:root {
      --ink: #071522;
      --ink-2: #17324b;
      --muted: #6d8194;
      --line: rgba(7, 21, 34, .12);
      --panel: rgba(255, 255, 255, .78);
      --white: #ffffff;
      --sky-25: #f6fbff;
      --sky-50: #edf8ff;
      --sky-100: #dff3ff;
      --sky-200: #bde8ff;
      --sky-300: #86d7ff;
      --blue: #f5a623;
      --blue-2: #e0890f;
      --dark: #0a1b2e;
      --dark-2: #10243a;
      --radius-xl: 34px;
      --radius-lg: 24px;
      --radius-md: 16px;
      --shadow: 0 26px 80px rgba(21, 89, 149, .14);
      --max: 1240px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; scroll-padding-top: 110px; }

    body {
      margin: 0;
      font-family: "Manrope", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 14% 0%, rgba(134, 215, 255, .58), transparent 34rem),
        radial-gradient(circle at 88% 8%, rgba(245, 166, 35, .22), transparent 32rem),
        linear-gradient(180deg, var(--sky-25) 0%, #fff 42%, var(--sky-50) 100%);
      overflow-x: hidden;
    }

    body.menu-open { overflow: hidden; }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(7, 21, 34, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(7, 21, 34, .035) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
    }

    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }

    .page {
      width: min(100%, 1440px);
      margin: 0 auto;
      position: relative;
    }

    .container {
      width: min(calc(100% - 40px), var(--max));
      margin: 0 auto;
    }

    .nav {
      position: sticky;
      top: 14px;
      z-index: 20;
      width: min(calc(100% - 40px), var(--max));
      margin: 14px auto 0;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 999px;
      background: rgba(255, 255, 255, .72);
      backdrop-filter: blur(18px);
      box-shadow: 0 12px 42px rgba(10, 27, 46, .08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px 10px 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: "Sora", sans-serif;
      font-weight: 800;
      letter-spacing: -.04em;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background:
        linear-gradient(135deg, #fff 0 28%, transparent 28%),
        linear-gradient(135deg, var(--blue), var(--dark));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.46), 0 14px 30px rgba(245,166,35,.26);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px;
      border: 1px solid rgba(7, 21, 34, .08);
      border-radius: 999px;
      background: rgba(246,251,255,.68);
    }

    .nav-links a {
      padding: 9px 14px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink-2);
      transition: .25s ease;
    }

    .nav-links a:hover { background: var(--white); box-shadow: 0 8px 22px rgba(23,50,75,.08); }

    .lang-switch {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px;
      border-radius: 999px;
      background: rgba(237,248,255,.82);
      border: 1px solid rgba(245,166,35,.14);
    }

    .lang-btn {
      min-width: 38px;
      height: 34px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font-weight: 950;
      font-size: 12px;
      letter-spacing: .04em;
      transition: background .22s ease, color .22s ease, transform .22s ease;
    }

    .lang-btn.active {
      color: var(--white);
      background: linear-gradient(135deg, var(--dark), var(--blue-2));
      box-shadow: 0 10px 24px rgba(0,104,217,.18);
    }

    .lang-btn:hover { transform: translateY(-1px); }

    .menu-toggle {
      display: none;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(7,21,34,.1);
      border-radius: 999px;
      background: rgba(255,255,255,.78);
      cursor: pointer;
      place-items: center;
      position: relative;
      z-index: 45;
    }

    .menu-toggle span {
      position: absolute;
      width: 18px;
      height: 2px;
      border-radius: 99px;
      background: var(--dark);
      transition: transform .28s ease;
    }

    .menu-toggle span:first-child { transform: translateY(-4px); }
    .menu-toggle span:last-child { transform: translateY(4px); }
    .menu-toggle.active span:first-child { transform: rotate(45deg); }
    .menu-toggle.active span:last-child { transform: rotate(-45deg); }

    .mobile-menu {
      display: none;
      position: fixed;
      inset: 84px 12px 12px;
      z-index: 40;
      padding: 16px;
      border-radius: 34px;
      background:
        radial-gradient(circle at 0% 0%, rgba(134,215,255,.42), transparent 18rem),
        radial-gradient(circle at 100% 22%, rgba(245,166,35,.18), transparent 22rem),
        rgba(255,255,255,.9);
      border: 1px solid rgba(255,255,255,.94);
      box-shadow: 0 26px 80px rgba(10,27,46,.18);
      backdrop-filter: blur(22px);
      transform: translateY(-18px) scale(.98);
      opacity: 0;
      pointer-events: none;
      transition: transform .32s ease, opacity .32s ease;
    }

    .mobile-menu.open {
      transform: translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-menu a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: clamp(54px, 9vh, 76px);
      padding: 0 clamp(16px, 5vw, 26px);
      border-radius: 22px;
      font-weight: 900;
      font-family: "Sora", sans-serif;
      font-size: clamp(22px, 7vw, 48px);
      letter-spacing: -.065em;
      color: var(--ink-2);
      border: 1px solid transparent;
      transition: background .22s ease, transform .22s ease, border-color .22s ease;
    }

    .mobile-menu a::after {
      content: "→";
      color: var(--blue-2);
    }

    .mobile-menu a:hover { background: rgba(255,255,255,.72); border-color: rgba(245,166,35,.16); transform: translateX(4px); }

    .mobile-menu-footer {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px;
      border-radius: 24px;
      color: var(--muted);
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(255,255,255,.8);
      font-weight: 850;
    }

    .nav-cta, .btn {
      border: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 46px;
      padding: 0 18px;
      border-radius: 999px;
      color: var(--white);
      background: linear-gradient(135deg, var(--dark), var(--blue-2));
      box-shadow: 0 14px 36px rgba(0, 104, 217, .24);
      font-weight: 800;
      letter-spacing: -.02em;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .nav-cta:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(0, 104, 217, .3); }

    .btn.secondary {
      color: var(--dark);
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(7,21,34,.13);
      box-shadow: none;
    }

    .hero {
      min-height: 770px;
      padding: 92px 0 42px;
      position: relative;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr);
      gap: 42px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      padding: 8px 12px;
      border: 1px solid rgba(245,166,35,.22);
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      color: var(--blue-2);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .pulse {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 8px rgba(245,166,35,.12);
    }

    h1, h2, h3 {
      margin: 0;
      font-family: "Sora", sans-serif;
      letter-spacing: -.075em;
      line-height: .92;
    }

    h1 {
      margin-top: 22px;
      font-size: clamp(58px, 8vw, 118px);
      max-width: 870px;
    }

    .hero-title-accent {
      display: inline-block;
      color: transparent;
      background: linear-gradient(90deg, var(--blue-2), var(--blue), #9ee2ff);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .lead {
      max-width: 690px;
      margin: 24px 0 0;
      color: var(--ink-2);
      font-size: clamp(18px, 1.45vw, 22px);
      line-height: 1.55;
      letter-spacing: -.025em;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 34px;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 58px;
    }

    .stat {
      min-height: 122px;
      padding: 18px;
      border-radius: 22px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 12px 36px rgba(23,50,75,.07);
    }

    .stat b {
      display: block;
      font-family: "Sora", sans-serif;
      font-size: 34px;
      letter-spacing: -.06em;
    }

    .stat span {
      display: block;
      margin-top: 12px;
      color: var(--muted);
      line-height: 1.25;
      font-weight: 700;
    }

    .device-card {
      position: relative;
      min-height: 560px;
      border-radius: 42px;
      padding: 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.48)),
        linear-gradient(135deg, rgba(245,166,35,.28), transparent);
      border: 1px solid rgba(255,255,255,.88);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .device-card::before {
      content: "";
      position: absolute;
      width: 340px;
      height: 340px;
      right: -120px;
      top: -80px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245,166,35,.4), transparent 65%);
    }

    .browser {
      position: relative;
      height: 100%;
      min-height: 520px;
      border-radius: 30px;
      background: var(--dark);
      color: var(--white);
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    }

    .browser-top {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      border-bottom: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.05);
    }

    .dots { display: flex; gap: 7px; }
    .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.34); }
    .url-pill {
      width: 54%;
      height: 26px;
      border-radius: 999px;
      background: rgba(255,255,255,.1);
    }

    .browser-body { padding: 26px; }

    .mini-kicker {
      color: #9ee2ff;
      font-weight: 800;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: .14em;
    }

    .mini-title {
      margin-top: 14px;
      font-family: "Sora", sans-serif;
      font-size: 42px;
      line-height: .95;
      letter-spacing: -.07em;
    }

    .mini-panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 34px;
    }

    .mini-panel {
      min-height: 128px;
      border-radius: 22px;
      padding: 16px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.1);
    }

    .mini-panel.wide { grid-column: 1 / -1; min-height: 144px; }

    .mini-line {
      height: 9px;
      width: 80%;
      border-radius: 99px;
      margin-top: 11px;
      background: rgba(255,255,255,.18);
    }

    .mini-line.short { width: 46%; }

    .floating-chip {
      position: absolute;
      left: -8px;
      bottom: 38px;
      width: 210px;
      padding: 14px;
      border-radius: 22px;
      background: rgba(255,255,255,.92);
      color: var(--dark);
      box-shadow: 0 24px 50px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.8);
      font-weight: 800;
    }

    .floating-chip span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .section {
      padding: 74px 0;
      position: relative;
    }

    .section::before {
      content: attr(data-section);
      position: absolute;
      right: 0;
      top: 18px;
      font-family: "Sora", sans-serif;
      font-size: clamp(48px, 11vw, 150px);
      line-height: .8;
      letter-spacing: -.09em;
      color: transparent;
      -webkit-text-stroke: 1px rgba(245,166,35,.16);
      pointer-events: none;
      opacity: .9;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .85fr) minmax(320px, .55fr);
      gap: 32px;
      align-items: end;
      margin-bottom: 30px;
    }

    .studio-note {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
      padding: 12px 14px;
      border-radius: 18px;
      color: var(--ink-2);
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(245,166,35,.14);
      font-weight: 900;
      box-shadow: 0 14px 40px rgba(23,50,75,.06);
    }

    .studio-note::before {
      content: "";
      width: 34px;
      height: 2px;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--blue-2), var(--sky-300));
    }

    h2 {
      font-size: clamp(42px, 5.8vw, 78px);
      max-width: 830px;
    }

    .section-copy {
      margin: 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.6;
      letter-spacing: -.02em;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .service {
      min-height: 280px;
      padding: 24px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 18px 54px rgba(23,50,75,.08);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .service:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(23,50,75,.12); }

    .service::after {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      right: -50px;
      top: -52px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245,166,35,.26), transparent 70%);
    }

    .icon {
      width: 48px;
      height: 48px;
      border-radius: 17px;
      display: grid;
      place-items: center;
      color: var(--blue-2);
      background: linear-gradient(135deg, #fff, var(--sky-100));
      border: 1px solid rgba(245,166,35,.18);
      box-shadow: 0 14px 28px rgba(245,166,35,.13);
    }

    .service h3, .project h3, .step h3 {
      font-size: 26px;
      line-height: 1;
      letter-spacing: -.055em;
    }

    .service p {
      margin: 14px 0 0;
      color: var(--muted);
      line-height: 1.55;
      font-weight: 600;
    }

    .service-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 22px;
    }

    .tag {
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--sky-50);
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 800;
    }

    .projects-wrap {
      padding: 16px;
      border-radius: 38px;
      background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(223,243,255,.5));
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: var(--shadow);
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
    }

    .project {
      grid-column: span 6;
      min-height: 420px;
      border-radius: 28px;
      overflow: hidden;
      background: var(--white);
      border: 1px solid rgba(7,21,34,.08);
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .project.large { grid-column: span 7; }
    .project.tall { grid-column: span 5; }

    .project-preview {
      min-height: 250px;
      padding: 22px;
      background:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.72), transparent 20rem),
        linear-gradient(135deg, var(--dark), #0c4578 54%, var(--blue));
      position: relative;
      overflow: hidden;
    }

    .project:nth-child(2) .project-preview {
      background:
        radial-gradient(circle at 88% 16%, rgba(255,255,255,.5), transparent 17rem),
        linear-gradient(135deg, #eaf8ff, #bde8ff 48%, #0a1b2e 49%);
    }

    .project:nth-child(3) .project-preview {
      background:
        linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.2) 1px, transparent 1px),
        linear-gradient(135deg, #10243a, #e0890f);
      background-size: 34px 34px, 34px 34px, cover;
    }

    .mock-window {
      height: 190px;
      border-radius: 22px;
      padding: 14px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(255,255,255,.74);
      box-shadow: 0 30px 70px rgba(0,0,0,.16);
      transform: rotate(-2deg);
    }

    .project:nth-child(2) .mock-window { transform: rotate(2deg); background: rgba(10,27,46,.88); }
    .project:nth-child(3) .mock-window { transform: rotate(0deg); }

    .mock-row {
      height: 14px;
      border-radius: 999px;
      background: rgba(245,166,35,.22);
      margin-bottom: 12px;
    }

    .mock-row.dark { background: rgba(10,27,46,.72); width: 68%; }
    .project:nth-child(2) .mock-row { background: rgba(255,255,255,.18); }

    .project-content {
      padding: 22px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 22px;
    }

    .project-content p {
      color: var(--muted);
      line-height: 1.5;
      margin: 10px 0 0;
      font-weight: 600;
    }

    .project-link {
      display: inline-flex;
      width: fit-content;
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--sky-50);
      color: var(--blue-2);
      font-weight: 800;
    }

    .process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      counter-reset: steps;
    }

    .step {
      padding: 22px;
      min-height: 250px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(255,255,255,.9);
      position: relative;
      overflow: hidden;
    }

    .step::before {
      counter-increment: steps;
      content: "0" counter(steps);
      display: block;
      margin-bottom: 56px;
      font-family: "Sora", sans-serif;
      font-size: 48px;
      letter-spacing: -.08em;
      color: rgba(245,166,35,.52);
    }

    .step p {
      margin: 12px 0 0;
      color: var(--muted);
      line-height: 1.5;
      font-weight: 600;
    }

    .system-board {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 14px;
      padding: 16px;
      border-radius: 38px;
      background: var(--dark);
      color: var(--white);
      box-shadow: 0 30px 80px rgba(10,27,46,.22);
    }

    .token-card, .component-card {
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 28px;
      padding: 24px;
      background: rgba(255,255,255,.06);
    }

    .swatches {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin-top: 24px;
    }

    .swatch {
      min-height: 96px;
      border-radius: 18px;
      padding: 10px;
      display: flex;
      align-items: flex-end;
      font-size: 11px;
      font-weight: 900;
      color: var(--dark);
    }

    .component-card p, .token-card p {
      color: rgba(255,255,255,.68);
      line-height: 1.6;
      margin: 12px 0 0;
    }

    .components-row {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 22px;
    }

    .field-demo {
      min-height: 48px;
      min-width: 240px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      display: flex;
      align-items: center;
      padding: 0 14px;
      color: rgba(255,255,255,.62);
      font-weight: 700;
    }

    .company-panel {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 14px;
      padding: 16px;
      border-radius: 38px;
      background:
        radial-gradient(circle at 0% 0%, rgba(134,215,255,.4), transparent 24rem),
        rgba(255,255,255,.72);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .company-story,
    .company-feature {
      border-radius: 28px;
      padding: 26px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(255,255,255,.88);
    }

    .company-story {
      color: var(--white);
      background:
        radial-gradient(circle at 100% 0%, rgba(134,215,255,.28), transparent 18rem),
        linear-gradient(135deg, var(--dark), var(--dark-2));
    }

    .company-story h2 {
      margin-top: 18px;
      font-size: clamp(38px, 4.6vw, 68px);
    }

    .company-story p,
    .company-feature p {
      margin: 16px 0 0;
      line-height: 1.65;
      color: rgba(255,255,255,.72);
      font-weight: 650;
    }

    .company-feature p { color: var(--muted); }

    .feature-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 18px;
    }

    .feature-grid div {
      min-height: 130px;
      border-radius: 22px;
      padding: 18px;
      background: var(--sky-50);
      border: 1px solid rgba(245,166,35,.12);
      font-weight: 800;
      transition: transform .25s ease, background .25s ease;
    }

    .feature-grid div:hover {
      transform: translateY(-5px) rotate(-1deg);
      background: var(--white);
    }

    .marquee {
      margin-top: 16px;
      border-radius: 24px;
      overflow: hidden;
      background: var(--dark);
      color: var(--white);
      border: 1px solid rgba(255,255,255,.12);
    }

    .marquee-track {
      width: max-content;
      display: flex;
      gap: 28px;
      padding: 14px 0;
      animation: marquee 20s linear infinite;
    }

    .marquee-track span {
      font-family: "Sora", sans-serif;
      font-size: 15px;
      letter-spacing: -.03em;
      white-space: nowrap;
      color: rgba(255,255,255,.82);
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .reviews-grid {
      display: flex;
      gap: 14px;
      transition: transform .45s cubic-bezier(.2,.8,.2,1);
      will-change: transform;
    }

    .reviews-shell {
      position: relative;
      overflow: hidden;
      padding: 16px;
      border-radius: 38px;
      background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(223,243,255,.48));
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: var(--shadow);
    }

    .review {
      flex: 0 0 calc((100% - 28px) / 3);
      min-height: 310px;
      padding: 24px;
      border-radius: 28px;
      background: rgba(255,255,255,.76);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 18px 54px rgba(23,50,75,.08);
      position: relative;
      overflow: hidden;
    }

    .review::before {
      content: "“";
      position: absolute;
      top: -18px;
      right: 22px;
      font-family: "Sora", sans-serif;
      font-size: 130px;
      line-height: 1;
      color: rgba(245,166,35,.14);
    }

    .review-stars {
      color: var(--blue-2);
      letter-spacing: .08em;
      font-weight: 900;
    }

    .review p {
      margin: 24px 0 0;
      color: var(--ink-2);
      line-height: 1.62;
      font-weight: 700;
    }

    .review-author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 28px;
      color: var(--muted);
      font-weight: 800;
    }

    .review-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-top: 14px;
    }

    .review-arrows {
      display: flex;
      gap: 8px;
    }

    .review-btn {
      width: 48px;
      height: 48px;
      border: 0;
      border-radius: 999px;
      color: var(--white);
      background: linear-gradient(135deg, var(--dark), var(--blue-2));
      box-shadow: 0 12px 30px rgba(0,104,217,.18);
      font-weight: 950;
    }

    .review-dots {
      display: flex;
      gap: 7px;
    }

    .review-dots button {
      width: 9px;
      height: 9px;
      padding: 0;
      border: 0;
      border-radius: 99px;
      background: rgba(245,166,35,.25);
      transition: width .24s ease, background .24s ease;
    }

    .review-dots button.active {
      width: 28px;
      background: var(--blue-2);
    }

    .avatar {
      width: 42px;
      height: 42px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      color: var(--white);
      background: linear-gradient(135deg, var(--blue), var(--dark));
      font-family: "Sora", sans-serif;
      font-weight: 900;
    }

    .contact-card {
      display: grid;
      grid-template-columns: .85fr 1fr;
      gap: 16px;
      padding: 18px;
      border-radius: 42px;
      background:
        radial-gradient(circle at 0% 0%, rgba(134,215,255,.55), transparent 28rem),
        rgba(255,255,255,.75);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: var(--shadow);
    }

    .contact-info {
      border-radius: 30px;
      padding: 32px;
      color: var(--white);
      background:
        radial-gradient(circle at 90% 10%, rgba(134,215,255,.34), transparent 17rem),
        linear-gradient(135deg, var(--dark), var(--dark-2));
    }

    .contact-info h2 { font-size: clamp(38px, 4vw, 64px); }

    .contact-info p {
      margin: 18px 0 0;
      color: rgba(255,255,255,.72);
      line-height: 1.6;
      font-size: 18px;
    }

    .checklist {
      display: grid;
      gap: 12px;
      margin-top: 30px;
    }

    .checklist span {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
    }

    .contact-links {
      display: grid;
      gap: 10px;
      margin-top: 30px;
    }

    .contact-link {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.86);
      font-weight: 850;
      transition: transform .24s ease, background .24s ease;
    }

    .contact-link:hover {
      transform: translateX(6px);
      background: rgba(255,255,255,.14);
    }

    .contact-link small {
      color: rgba(255,255,255,.58);
      font-weight: 800;
    }

    .contact-methods {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 16px;
    }

    .contact-method {
      min-height: 150px;
      padding: 20px;
      border-radius: 28px;
      background: rgba(255,255,255,.76);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 18px 54px rgba(23,50,75,.08);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .contact-method:hover {
      transform: translateY(-6px);
      box-shadow: 0 28px 70px rgba(23,50,75,.12);
    }

    .contact-method b {
      font-family: "Sora", sans-serif;
      font-size: 24px;
      letter-spacing: -.055em;
    }

    .contact-method span {
      color: var(--muted);
      font-weight: 850;
    }

    .checklist span::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--sky-300);
      box-shadow: 0 0 0 7px rgba(134,215,255,.13);
    }

    form {
      padding: 22px;
      border-radius: 30px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(255,255,255,.9);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    label {
      display: grid;
      gap: 8px;
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    input, select, textarea {
      width: 100%;
      border: 1px solid rgba(7,21,34,.12);
      border-radius: 16px;
      background: var(--white);
      color: var(--ink);
      outline: none;
      padding: 15px 14px;
      transition: .2s ease;
    }

    textarea { min-height: 138px; resize: vertical; }
    label.full { grid-column: 1 / -1; }
    input:focus, select:focus, textarea:focus { border-color: rgba(245,166,35,.74); box-shadow: 0 0 0 5px rgba(245,166,35,.12); }

    .form-note {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
      margin: 14px 0 0;
      font-weight: 700;
    }

    footer {
      padding: 34px 0 46px;
      color: var(--muted);
    }

    .footer-row {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      border-top: 1px solid var(--line);
      padding-top: 24px;
      font-weight: 800;
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      animation: reveal .8s ease forwards;
    }

    .delay-1 { animation-delay: .08s; }
    .delay-2 { animation-delay: .16s; }
    .delay-3 { animation-delay: .24s; }

    @keyframes reveal {
      to { opacity: 1; transform: translateY(0); }
    }

    .progress {
      position: fixed;
      inset: 0 0 auto 0;
      height: 3px;
      z-index: 80;
      transform: scaleX(0);
      transform-origin: left center;
      background: linear-gradient(90deg, var(--blue-2), var(--sky-300), var(--white));
      box-shadow: 0 0 22px rgba(245,166,35,.6);
    }

    .cursor-glow {
      position: fixed;
      z-index: -1;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(245,166,35,.18), transparent 66%);
      filter: blur(6px);
      transition: transform .16s ease-out;
    }

    .cursor-dot,
    .cursor-ring {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 12;
      pointer-events: none;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
    }

    .cursor-dot {
      width: 6px;
      height: 6px;
      background: rgba(0,104,217,.75);
      box-shadow: 0 0 18px rgba(245,166,35,.75);
    }

    .cursor-ring {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(245,166,35,.42);
      background: rgba(255,255,255,.05);
      backdrop-filter: blur(2px);
      transition: width .2s ease, height .2s ease, border-color .2s ease, background .2s ease;
    }

    .cursor-ring.is-active {
      width: 54px;
      height: 54px;
      border-color: rgba(245,166,35,.34);
      background: transparent;
    }

    .cursor-dot.is-hidden,
    .cursor-ring.is-hidden {
      opacity: 0 !important;
    }

    @media (hover: hover) and (pointer: fine) {
      body { cursor: none; }
      a, button, input, textarea, select { cursor: none; }
      .cursor-dot, .cursor-ring { opacity: 1; }
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      border-radius: 999px;
      filter: blur(.2px);
      animation: floatBlob 9s ease-in-out infinite alternate;
    }

    .hero::before {
      width: 210px;
      height: 210px;
      left: -80px;
      top: 160px;
      background: linear-gradient(135deg, rgba(134,215,255,.38), rgba(255,255,255,.1));
    }

    .hero::after {
      width: 150px;
      height: 150px;
      right: 28%;
      bottom: 80px;
      background: linear-gradient(135deg, rgba(245,166,35,.18), rgba(10,27,46,.12));
      animation-delay: -2s;
    }

    @keyframes floatBlob {
      from { transform: translate3d(0, var(--scroll-shift, 0), 0) rotate(0deg); }
      to { transform: translate3d(24px, calc(var(--scroll-shift, 0) + 18px), 0) rotate(18deg); }
    }

    .brand-mark,
    .pulse,
    .icon {
      animation: breathe 3.8s ease-in-out infinite;
    }

    @keyframes breathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }

    .hero-title-accent {
      background-size: 220% 100%;
      animation: shineText 5.5s ease-in-out infinite;
    }

    @keyframes shineText {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .browser {
      animation: deviceFloat 6s ease-in-out infinite;
    }

    @keyframes deviceFloat {
      0%, 100% { transform: translateY(0) rotate(.2deg); }
      50% { transform: translateY(-12px) rotate(-.35deg); }
    }

    .mini-panel,
    .mock-window {
      position: relative;
      overflow: hidden;
    }

    .mini-panel::after,
    .mock-window::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 70%);
      transform: translateX(-120%);
      animation: sweep 4.8s ease-in-out infinite;
    }

    .mini-panel:nth-child(2)::after { animation-delay: .7s; }
    .mini-panel:nth-child(3)::after { animation-delay: 1.2s; }

    @keyframes sweep {
      0%, 42% { transform: translateX(-120%); }
      68%, 100% { transform: translateX(120%); }
    }

    .service-tabs {
      grid-template-columns: repeat(4, 1fr);
    }

    .service {
      appearance: none;
      text-align: left;
      color: inherit;
      isolation: isolate;
    }

    .service::before,
    .project::before,
    .step::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0;
      transition: opacity .25s ease;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(245,166,35,.18), transparent 15rem);
    }

    .service:hover::before,
    .service.active::before,
    .project:hover::before,
    .step:hover::after {
      opacity: 1;
    }

    .service.active {
      transform: translateY(-6px);
      border-color: rgba(245,166,35,.38);
      box-shadow: 0 30px 80px rgba(245,166,35,.16);
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(237,248,255,.86)),
        radial-gradient(circle at 100% 0%, rgba(245,166,35,.25), transparent 15rem);
    }

    .service.active .icon {
      color: var(--white);
      background: linear-gradient(135deg, var(--blue), var(--dark));
    }

    .service-detail {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr);
      gap: 14px;
      margin-top: 16px;
      padding: 18px;
      border-radius: 38px;
      border: 1px solid rgba(255,255,255,.92);
      background:
        radial-gradient(circle at 8% 12%, rgba(134,215,255,.38), transparent 24rem),
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(223,243,255,.72));
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .detail-copy {
      padding: 22px;
    }

    .detail-copy h3 {
      margin-top: 18px;
      font-size: clamp(38px, 5vw, 70px);
    }

    .detail-copy p {
      max-width: 720px;
      color: var(--ink-2);
      font-size: 19px;
      line-height: 1.65;
      margin: 18px 0 0;
    }

    .detail-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 26px;
    }

    .detail-panel {
      display: grid;
      gap: 14px;
    }

    .detail-panel > div {
      padding: 22px;
      border-radius: 26px;
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(255,255,255,.88);
    }

    .detail-panel b {
      font-family: "Sora", sans-serif;
      font-size: 26px;
      letter-spacing: -.06em;
    }

    .detail-panel ul {
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .detail-panel li {
      position: relative;
      padding-left: 24px;
      color: var(--ink-2);
      font-weight: 700;
      line-height: 1.45;
    }

    .detail-panel li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .55em;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 6px rgba(245,166,35,.12);
    }

    .result-card {
      color: var(--white);
      background:
        radial-gradient(circle at 100% 0%, rgba(134,215,255,.24), transparent 16rem),
        linear-gradient(135deg, var(--dark), var(--blue-2)) !important;
    }

    .result-card span {
      display: block;
      color: rgba(255,255,255,.62);
      font-weight: 900;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: .12em;
    }

    .result-card strong {
      display: block;
      margin-top: 14px;
      font-size: 24px;
      line-height: 1.18;
      letter-spacing: -.04em;
    }

    .service-detail-in {
      animation: detailIn .48s ease both;
    }

    @keyframes detailIn {
      from { opacity: .45; transform: translateY(12px) scale(.99); filter: blur(6px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    .scroll-reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .75s ease, transform .75s ease;
    }

    .scroll-reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .form-success {
      display: none;
      margin-top: 14px;
      padding: 14px;
      border-radius: 18px;
      color: var(--blue-2);
      background: var(--sky-50);
      font-weight: 800;
      border: 1px solid rgba(245,166,35,.18);
    }

    .form-success.show {
      display: block;
      animation: detailIn .38s ease both;
    }

    .privacy-card {
      display: grid;
      grid-template-columns: .75fr 1.25fr;
      gap: 14px;
      padding: 16px;
      border-radius: 38px;
      background: rgba(255,255,255,.76);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: var(--shadow);
    }

    .privacy-card > div {
      padding: 24px;
      border-radius: 26px;
      background: var(--sky-50);
      border: 1px solid rgba(245,166,35,.12);
    }

    .privacy-card h2 {
      font-size: clamp(34px, 4vw, 58px);
    }

    .privacy-card p,
    .privacy-card li {
      color: var(--muted);
      line-height: 1.62;
      font-weight: 700;
    }

    .privacy-card ul {
      margin: 0;
      padding-left: 20px;
      display: grid;
      gap: 8px;
    }

    .cookie-consent {
      position: fixed;
      left: 50%;
      bottom: 18px;
      z-index: 70;
      width: min(calc(100% - 32px), 920px);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 16px;
      border-radius: 28px;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(255,255,255,.92);
      box-shadow: 0 24px 80px rgba(10,27,46,.18);
      backdrop-filter: blur(22px);
      transform: translate(-50%, 140%);
      opacity: 0;
      transition: transform .45s ease, opacity .45s ease;
    }

    .cookie-consent.show {
      transform: translate(-50%, 0);
      opacity: 1;
    }

    .cookie-consent.hidden {
      transform: translate(-50%, 140%);
      opacity: 0;
      pointer-events: none;
    }

    .cookie-consent strong {
      display: block;
      font-family: "Sora", sans-serif;
      letter-spacing: -.05em;
      font-size: 22px;
    }

    .cookie-consent p {
      margin: 6px 0 0;
      color: var(--muted);
      line-height: 1.45;
      font-weight: 700;
    }

    .cookie-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .cookie-chip {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 69;
      display: none;
      min-height: 42px;
      padding: 0 14px;
      border: 1px solid rgba(245,166,35,.2);
      border-radius: 999px;
      color: var(--blue-2);
      background: rgba(255,255,255,.88);
      box-shadow: 0 14px 42px rgba(10,27,46,.14);
      backdrop-filter: blur(14px);
      font-weight: 900;
    }

    .cookie-chip.show {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      animation: detailIn .34s ease both;
    }

    :root {
      --electric: #f5a623;
      --electric-2: #86d7ff;
      --deep-blue: #e0890f;
      --night: #071522;
      --motion-spring: cubic-bezier(.18, .9, .22, 1);
    }

    ::selection {
      color: var(--night);
      background: rgba(134, 215, 255, .62);
    }

    body[data-theme="dark"] {
      --ink: #f3fbff;
      --ink-2: #cfeaff;
      --muted: #8aa8bf;
      --line: rgba(134, 215, 255, .16);
      --panel: rgba(12, 31, 50, .78);
      --white: #ffffff;
      --sky-25: #07111f;
      --sky-50: #0c1d31;
      --sky-100: #102b47;
      --sky-200: #164266;
      --sky-300: #86d7ff;
      --blue: #f5a623;
      --blue-2: #58bbff;
      --dark: #050d18;
      --dark-2: #0b2138;
      --shadow: 0 30px 90px rgba(0, 0, 0, .38);
      color-scheme: dark;
      background:
        radial-gradient(circle at 14% 0%, rgba(245, 166, 35, .26), transparent 34rem),
        radial-gradient(circle at 86% 10%, rgba(134, 215, 255, .11), transparent 30rem),
        linear-gradient(180deg, #06101d 0%, #081827 48%, #050d18 100%);
    }

    body[data-theme="light"] { color-scheme: light; }

    body[data-theme="dark"] ::selection {
      color: #06101d;
      background: #86d7ff;
    }

    body[data-theme="dark"]::before {
      background-image:
        linear-gradient(rgba(134, 215, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(134, 215, 255, .055) 1px, transparent 1px);
    }

    body[data-theme="dark"] .nav,
    body[data-theme="dark"] .mobile-menu,
    body[data-theme="dark"] .stat,
    body[data-theme="dark"] .service,
    body[data-theme="dark"] .service-detail,
    body[data-theme="dark"] .detail-panel > div,
    body[data-theme="dark"] .projects-wrap,
    body[data-theme="dark"] .project,
    body[data-theme="dark"] .step,
    body[data-theme="dark"] .company-panel,
    body[data-theme="dark"] .company-feature,
    body[data-theme="dark"] .review,
    body[data-theme="dark"] .reviews-shell,
    body[data-theme="dark"] .contact-card,
    body[data-theme="dark"] form,
    body[data-theme="dark"] .cookie-consent,
    body[data-theme="dark"] .footer-panel,
    body[data-theme="dark"] .privacy-sheet {
      background: rgba(10, 27, 46, .78);
      border-color: rgba(134, 215, 255, .14);
    }

    body[data-theme="dark"] .nav-links,
    body[data-theme="dark"] .lang-switch,
    body[data-theme="dark"] .theme-toggle,
    body[data-theme="dark"] .mobile-menu-footer,
    body[data-theme="dark"] .eyebrow,
    body[data-theme="dark"] input,
    body[data-theme="dark"] select,
    body[data-theme="dark"] textarea,
    body[data-theme="dark"] option,
    body[data-theme="dark"] .tag,
    body[data-theme="dark"] .project-link,
    body[data-theme="dark"] .field-demo,
    body[data-theme="dark"] .form-success,
    body[data-theme="dark"] .privacy-content section,
    body[data-theme="dark"] .footer-socials a,
    body[data-theme="dark"] .feature-grid div {
      color: var(--ink);
      background: rgba(13, 35, 58, .86);
      border-color: rgba(134, 215, 255, .16);
    }

    body[data-theme="dark"] input::placeholder,
    body[data-theme="dark"] textarea::placeholder { color: rgba(207, 234, 255, .54); }

    body[data-theme="dark"] .btn.secondary {
      color: var(--sky-300);
      background: rgba(12, 31, 50, .82);
      border-color: rgba(134, 215, 255, .2);
    }

    body[data-theme="dark"] .service.active,
    body[data-theme="dark"] .feature-grid div:hover,
    body[data-theme="dark"] .nav-links a:hover,
    body[data-theme="dark"] .contact-method:hover {
      color: var(--ink);
      background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(245,166,35,.22), transparent 15rem),
        linear-gradient(180deg, rgba(16, 43, 71, .96), rgba(10, 27, 46, .96));
      border-color: rgba(134, 215, 255, .28);
      box-shadow: 0 26px 70px rgba(0, 104, 217, .18);
    }

    body[data-theme="dark"] .service.active p,
    body[data-theme="dark"] .service.active .tag,
    body[data-theme="dark"] .review p,
    body[data-theme="dark"] .project-content p,
    body[data-theme="dark"] .step p,
    body[data-theme="dark"] .section-copy,
    body[data-theme="dark"] .lead,
    body[data-theme="dark"] .privacy-content p { color: var(--muted); }

    body[data-theme="dark"] .project-preview {
      background:
        radial-gradient(circle at 18% 14%, rgba(134, 215, 255, .2), transparent 20rem),
        linear-gradient(135deg, #071522, #0b3a63 54%, #f5a623);
    }

    .brand { min-width: max-content; }
    .brand-word {
      font-size: 18px;
      background: linear-gradient(90deg, var(--ink), var(--blue-2), var(--electric-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand-mark {
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.72), transparent 24%),
        linear-gradient(145deg, var(--night), #0b3a63 48%, var(--electric));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 18px 40px rgba(245,166,35,.25);
      overflow: hidden;
    }

    .brand-mark svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: #f3fbff;
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,.28));
    }

    .theme-toggle {
      min-height: 42px;
      border: 1px solid rgba(245,166,35,.14);
      border-radius: 999px;
      padding: 4px 12px 4px 5px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--ink-2);
      background: rgba(237,248,255,.82);
      font-weight: 950;
      font-size: 12px;
      letter-spacing: -.01em;
      cursor: pointer;
      transition: transform .24s ease, border-color .24s ease, background .24s ease;
    }

    .theme-toggle:hover { transform: translateY(-1px); border-color: rgba(245,166,35,.42); }

    .theme-toggle-orb {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 30%, #fff 0 18%, transparent 19%),
        linear-gradient(135deg, var(--blue-2), var(--electric-2));
      box-shadow: 0 10px 22px rgba(245,166,35,.26);
      position: relative;
      overflow: hidden;
    }

    body[data-theme="dark"] .theme-toggle-orb::after {
      content: "";
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      right: -5px;
      top: -4px;
      background: #0c1d31;
      box-shadow: -4px 7px 0 rgba(255,255,255,.08);
    }

    .nav-cta, .btn, .review-btn, .privacy-close {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border: 1px solid rgba(134,215,255,.24);
      background:
        radial-gradient(circle at var(--mx, 18%) var(--my, 18%), rgba(255,255,255,.32), transparent 9rem),
        linear-gradient(135deg, #071522 0%, #e0890f 48%, #f5a623 100%);
      background-size: 160% 160%;
      box-shadow: 0 18px 44px rgba(0, 104, 217, .26), inset 0 1px 0 rgba(255,255,255,.26);
      transition: transform .32s var(--motion-spring), box-shadow .32s ease, filter .32s ease, background-position .45s ease;
    }

    .nav-cta::before, .btn::before, .review-btn::before, .privacy-close::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.28) 42%, transparent 66%);
      transform: translateX(-130%);
      transition: transform .75s var(--motion-spring);
    }

    .nav-cta::after, .btn::after, .review-btn::after, .privacy-close::after {
      content: "";
      position: absolute;
      width: 90px;
      height: 90px;
      left: var(--mx, 50%);
      top: var(--my, 50%);
      pointer-events: none;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(134,215,255,.34), transparent 66%);
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
      transition: transform .48s var(--motion-spring), opacity .48s ease;
    }

    .nav-cta:hover::before, .btn:hover::before, .review-btn:hover::before, .privacy-close:hover::before { transform: translateX(130%); }
    .nav-cta:hover::after, .btn:hover::after, .review-btn:hover::after, .privacy-close:hover::after { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
    .nav-cta:hover, .btn:hover, .review-btn:hover, .privacy-close:hover {
      filter: saturate(1.18) contrast(1.02);
      background-position: 100% 50%;
      box-shadow: 0 24px 62px rgba(0, 104, 217, .34), 0 0 0 6px rgba(245,166,35,.08), inset 0 1px 0 rgba(255,255,255,.32);
    }

    .btn.secondary {
      background:
        radial-gradient(circle at var(--mx, 18%) var(--my, 18%), rgba(245,166,35,.12), transparent 9rem),
        rgba(255,255,255,.78);
      color: var(--dark);
    }

    .btn.secondary::before { background: linear-gradient(110deg, transparent, rgba(245,166,35,.2), transparent); }
    .btn.secondary::after { background: radial-gradient(circle, rgba(245,166,35,.16), transparent 66%); }

    .service, .project, .step, .review, .contact-method, .feature-grid div, .footer-socials a {
      transition: transform .32s var(--motion-spring), box-shadow .32s ease, border-color .32s ease, background .32s ease;
    }

    .service:hover, .project:hover, .step:hover, .review:hover, .footer-socials a:hover {
      transform: translateY(-7px);
      border-color: rgba(245,166,35,.34);
      box-shadow: 0 28px 72px rgba(21, 89, 149, .14);
    }

    .company-panel-rich { grid-template-columns: .92fr 1.08fr; align-items: start; }
    .company-story,
    .company-feature { padding: 22px; }

    .company-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 18px;
    }

    .company-metrics div {
      min-height: 86px;
      padding: 13px;
      border-radius: 20px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
    }

    .company-metrics strong {
      display: block;
      font-family: "Sora", sans-serif;
      font-size: 28px;
      letter-spacing: -.07em;
      color: var(--sky-300);
    }

    .company-metrics span {
      display: block;
      margin-top: 6px;
      color: rgba(255,255,255,.72);
      font-weight: 800;
      line-height: 1.24;
      font-size: 13px;
    }

    .feature-grid div {
      min-height: 102px;
      display: grid;
      align-content: start;
      gap: 8px;
    }

    .feature-grid b {
      font-family: "Sora", sans-serif;
      font-size: 19px;
      letter-spacing: -.05em;
      color: var(--ink);
    }

    .feature-grid span {
      color: var(--muted);
      line-height: 1.38;
      font-weight: 700;
      font-size: 14px;
    }

    .contact-card-clean { grid-template-columns: .78fr 1.22fr; }

    .site-footer { padding-top: 54px; }
    .footer-panel {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
      gap: 18px;
      padding: 18px;
      border-radius: 38px;
      background:
        radial-gradient(circle at 0% 0%, rgba(245,166,35,.2), transparent 22rem),
        rgba(255,255,255,.72);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: var(--shadow);
    }

    .footer-main {
      min-height: 190px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px;
      border-radius: 28px;
      color: var(--white);
      background:
        radial-gradient(circle at 90% 0%, rgba(134,215,255,.28), transparent 18rem),
        linear-gradient(135deg, var(--dark), var(--dark-2));
    }

    .footer-main p {
      max-width: 540px;
      margin: 22px 0 0;
      color: rgba(255,255,255,.72);
      line-height: 1.55;
      font-weight: 800;
    }

    .footer-brand .brand-word { color: var(--white); background: none; }

    .footer-socials {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .footer-socials a {
      min-height: 190px;
      padding: 18px;
      border-radius: 28px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(255,255,255,.88);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 16px 46px rgba(23,50,75,.07);
    }

    .footer-socials svg {
      width: 42px;
      height: 42px;
      fill: var(--blue-2);
      filter: drop-shadow(0 12px 20px rgba(245,166,35,.18));
    }

    .footer-socials span {
      font-family: "Sora", sans-serif;
      font-size: 24px;
      line-height: 1;
      letter-spacing: -.06em;
      color: var(--ink);
      font-weight: 900;
    }

    .footer-socials small { color: var(--muted); font-weight: 900; }
    .footer-row a { color: var(--blue-2); }

    .privacy-page {
      position: fixed;
      inset: 0;
      z-index: 95;
      display: grid;
      place-items: stretch;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }

    .privacy-page.open { opacity: 1; pointer-events: auto; }

    .privacy-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(7, 10, 14, .54);
      backdrop-filter: blur(18px);
    }

    .privacy-sheet {
      position: relative;
      width: min(calc(100% - 28px), 1120px);
      max-height: calc(100dvh - 28px);
      margin: 14px auto;
      overflow: auto;
      border-radius: 36px;
      padding: 18px;
      background:
        radial-gradient(circle at 0% 0%, rgba(245,166,35,.18), transparent 26rem),
        rgba(255,255,255,.94);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 40px 120px rgba(0,0,0,.34);
      transform: translateY(22px) scale(.98);
      transition: transform .34s var(--motion-spring);
    }

    .privacy-page.open .privacy-sheet { transform: translateY(0) scale(1); }

    .privacy-topbar {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
      padding: 10px;
      border-radius: 24px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(255,255,255,.82);
      backdrop-filter: blur(16px);
    }

    body[data-theme="dark"] .privacy-topbar { background: rgba(10,27,46,.82); border-color: rgba(134,215,255,.14); }

    .privacy-close {
      min-height: 44px;
      padding: 0 16px;
      border-radius: 999px;
      color: var(--white);
      font-weight: 900;
      cursor: pointer;
    }

    .privacy-hero { padding: clamp(28px, 5vw, 58px) 14px 24px; }
    .privacy-hero h2 { margin-top: 18px; font-size: clamp(46px, 7vw, 92px); }
    .privacy-hero p { max-width: 760px; color: var(--muted); line-height: 1.65; font-size: 18px; font-weight: 800; }

    .privacy-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 0 0 2px;
    }

    .privacy-content section {
      padding: 22px;
      border-radius: 26px;
      background: var(--sky-50);
      border: 1px solid rgba(245,166,35,.12);
    }

    .privacy-content section:first-child { grid-column: 1 / -1; }
    .privacy-content h3 { font-size: 28px; }
    .privacy-content p { color: var(--muted); line-height: 1.62; font-weight: 750; }

    body.privacy-open { overflow: hidden; }
    .cursor-dot, .cursor-ring { z-index: 120; }
    .cursor-glow { z-index: -1; }

    @keyframes softPop {
      from { opacity: 0; transform: translateY(20px) scale(.98); filter: blur(8px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    .review, .service, .project, .step { animation: softPop .7s both; animation-delay: calc(var(--i, 0) * .04s); }


    .studio-note {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 0% 50%, rgba(245,166,35,.13), transparent 16rem),
        rgba(255,255,255,.72);
    }

    body[data-theme="dark"] .studio-note {
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 50%, rgba(245,166,35,.28), transparent 18rem),
        linear-gradient(135deg, rgba(12,31,50,.96), rgba(8,24,39,.92));
      border-color: rgba(134,215,255,.24);
      box-shadow: 0 18px 46px rgba(0,104,217,.16), inset 0 1px 0 rgba(255,255,255,.08);
    }

    body[data-theme="dark"] .studio-note::before {
      background: linear-gradient(90deg, var(--blue-2), var(--sky-300));
      box-shadow: 0 0 22px rgba(245,166,35,.45);
    }

    .icon {
      width: auto;
      min-width: 86px;
      max-width: 100%;
      padding: 0 13px;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 950;
      letter-spacing: -.02em;
    }

    .service:nth-child(3) .icon { min-width: 118px; }

    body[data-theme="dark"] .icon {
      color: var(--ink);
      background:
        radial-gradient(circle at 18% 15%, rgba(134,215,255,.34), transparent 8rem),
        linear-gradient(135deg, rgba(0,104,217,.76), rgba(12,31,50,.92));
      border-color: rgba(134,215,255,.28);
      box-shadow: 0 16px 34px rgba(0,104,217,.2), inset 0 1px 0 rgba(255,255,255,.12);
    }

    body[data-theme="dark"] .service.active .icon,
    body[data-theme="dark"] .service:hover .icon {
      color: #ffffff;
      background: linear-gradient(135deg, var(--blue-2), var(--blue));
      border-color: rgba(134,215,255,.44);
      box-shadow: 0 18px 42px rgba(245,166,35,.28);
    }

    body[data-theme="dark"] .service-meta .tag {
      color: var(--ink-2);
      background: rgba(10,27,46,.72);
      border: 1px solid rgba(134,215,255,.14);
    }

    .eyebrow .pulse {
      position: relative;
      flex: 0 0 auto;
      animation: pulseDot 1.55s ease-in-out infinite;
    }

    .eyebrow .pulse::after {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 1px solid rgba(245,166,35,.38);
      opacity: 0;
      transform: scale(.65);
      animation: pulseHalo 1.55s ease-out infinite;
    }

    body[data-theme="dark"] .eyebrow .pulse::after { border-color: rgba(134,215,255,.42); }

    @keyframes pulseDot {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 7px rgba(245,166,35,.12), 0 0 0 rgba(245,166,35,0); }
      50% { transform: scale(1.28); box-shadow: 0 0 0 10px rgba(245,166,35,.08), 0 0 24px rgba(245,166,35,.44); }
    }

    @keyframes pulseHalo {
      0% { opacity: .58; transform: scale(.62); }
      80%, 100% { opacity: 0; transform: scale(1.9); }
    }

    .reviews-shell { user-select: none; }
    .reviews-grid { cursor: grab; touch-action: pan-y; }
    .reviews-grid.is-dragging {
      cursor: grabbing;
      transition: none;
    }

    .footer-socials { align-items: stretch; }
    .footer-socials a {
      min-height: 158px;
      height: 100%;
      overflow: hidden;
    }

    .footer-socials small {
      display: block;
      max-width: 100%;
      overflow-wrap: anywhere;
      line-height: 1.35;
    }

    .contact-card-clean { align-items: stretch; }
    .contact-card-clean .contact-info,
    .contact-card-clean form { min-height: 100%; }

    @media (max-width: 980px) and (min-width: 641px) {
      .footer-socials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .footer-socials a { min-height: 148px; }
    }

    @media (max-width: 640px) {
      .footer-socials a { min-height: 132px; }
    }


    .service .icon {
      display: inline-grid;
      width: fit-content;
      min-width: 0;
      justify-self: start;
      padding-inline: 14px;
    }

    .service:nth-child(3) .icon { min-width: 0; }



    .service > div:first-child {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .service .icon {
      flex: 0 0 auto;
      margin-bottom: 18px;
      line-height: 1;
    }

    .service .icon + h3 {
      margin-top: 0;
      clear: both;
    }

    @media (max-width: 980px) {
      .nav-links { display: none; }
      .nav > .lang-switch, .nav > .theme-toggle { display: none; }
      .menu-toggle { display: grid; }
      .mobile-menu { display: grid; max-width: calc(100vw - 20px); inset: 78px 10px 10px; overflow-x: hidden; overflow-y: auto; }
      .hero-grid, .section-head, .system-board, .contact-card, .service-detail, .cookie-consent, .company-panel, .privacy-card, .footer-panel { grid-template-columns: 1fr; }
      .stats, .process, .contact-methods, .company-metrics, .footer-socials { grid-template-columns: repeat(2, 1fr); }
      .review { flex-basis: calc((100% - 14px) / 2); }
      .services-grid, .service-tabs { grid-template-columns: 1fr 1fr; }
      .project, .project.large, .project.tall { grid-column: 1 / -1; }
      .cookie-actions { justify-content: flex-start; }
    }

    @media (max-width: 640px) {
      .container, .nav { width: min(calc(100% - 24px), var(--max)); }
      .page { overflow-x: clip; }
      .nav { border-radius: 24px; }
      .nav-cta { display: none; }
      .hero { padding-top: 56px; min-height: auto; }
      .stats, .services-grid, .service-tabs, .process, .form-grid, .feature-grid, .contact-methods, .company-metrics, .footer-socials, .privacy-content { grid-template-columns: 1fr; }
      .review { flex-basis: 100%; }
      .device-card { min-height: auto; border-radius: 28px; }
      .browser { min-height: 430px; }
      .mini-title { font-size: 34px; }
      .floating-chip { left: 14px; right: 14px; width: auto; bottom: 22px; }
      .section { padding: 52px 0; }
      .swatches { grid-template-columns: repeat(2, 1fr); }
      .cookie-actions .btn { width: 100%; }
      .mobile-menu { inset: 74px 8px 8px; padding: 10px; border-radius: 26px; max-width: calc(100vw - 16px); }
      .mobile-menu a { min-height: clamp(46px, 7.2dvh, 58px); font-size: clamp(19px, 5.8vw, 31px); padding: 0 14px; border-radius: 18px; letter-spacing: -.055em; }
      .mobile-menu a:hover { transform: none; }
      .mobile-menu-footer { align-items: flex-start; flex-direction: column; }
      .footer-panel, .privacy-sheet { border-radius: 28px; }
      .privacy-topbar { align-items: stretch; flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
      }
      .cursor-glow { display: none; }
    }

    /* ============ Form validation ============ */
    .hp-field {
      position: absolute !important;
      left: -10000px !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .field-error {
      display: block;
      max-height: 0;
      margin-top: 6px;
      color: #e23838;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: -.01em;
      opacity: 0;
      transform: translateY(-4px);
      overflow: hidden;
      transition: opacity .25s ease, transform .25s ease, max-height .25s ease;
    }

    .field-error.show {
      opacity: 1;
      transform: translateY(0);
      max-height: 60px;
    }

    #brief-form label.invalid input,
    #brief-form label.invalid select,
    #brief-form label.invalid textarea {
      border-color: rgba(226, 56, 56, .55) !important;
      box-shadow: 0 0 0 4px rgba(226, 56, 56, .12), 0 12px 30px rgba(226, 56, 56, .12);
      animation: fieldShake .42s cubic-bezier(.36,.07,.19,.97);
    }

    @keyframes fieldShake {
      10%, 90% { transform: translateX(-1px); }
      20%, 80% { transform: translateX(2px); }
      30%, 50%, 70% { transform: translateX(-4px); }
      40%, 60% { transform: translateX(4px); }
    }

    .form-error {
      display: none;
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 18px;
      color: #b21818;
      background: linear-gradient(135deg, rgba(255, 226, 226, .9), rgba(255, 240, 240, .7));
      border: 1px solid rgba(226, 56, 56, .28);
      box-shadow: 0 12px 30px rgba(226, 56, 56, .12);
      font-weight: 800;
      letter-spacing: -.01em;
      animation: formAlertIn .35s cubic-bezier(.2,.8,.2,1);
    }
    .form-error.show { display: block; }

    @keyframes formAlertIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    body[data-theme="dark"] .form-error {
      color: #ffd2d2;
      background: rgba(78, 18, 18, .55);
      border-color: rgba(226, 56, 56, .35);
    }
    body[data-theme="dark"] .field-error { color: #ff8585; }

    /* Submit button: loading state */
    #brief-submit { position: relative; min-width: 200px; }
    #brief-submit .btn-spinner {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.35);
      border-top-color: #fff;
      margin-left: 10px;
      display: none;
      animation: btnSpin .8s linear infinite;
    }
    #brief-submit.is-loading {
      pointer-events: none;
      opacity: .85;
    }
    #brief-submit.is-loading .btn-spinner { display: inline-block; }
    @keyframes btnSpin { to { transform: rotate(360deg); } }

    .form-success.show { animation: formAlertIn .4s cubic-bezier(.2,.8,.2,1); }

    /* ============ Портфолио ============ */
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
      padding: 18px;
      border-radius: 38px;
      background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(223,243,255,.48));
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: var(--shadow);
    }

    .portfolio-card {
      position: relative;
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 0;
      min-height: 270px;
      border-radius: 26px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(255,255,255,.92);
      box-shadow: 0 18px 54px rgba(23,50,75,.08);
      overflow: hidden;
      cursor: pointer;
      isolation: isolate;
      transform-style: preserve-3d;
      transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .35s ease;
      outline: 0;
    }

    .portfolio-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(245,166,35,.16), transparent 16rem);
      opacity: 0;
      transition: opacity .35s ease;
      z-index: 1;
    }

    .portfolio-card:hover,
    .portfolio-card:focus-visible {
      transform: translateY(-6px);
      box-shadow: 0 30px 70px rgba(0, 104, 217, .22);
      border-color: rgba(245,166,35,.32);
    }

    .portfolio-card:hover::after,
    .portfolio-card:focus-visible::after { opacity: 1; }

    .portfolio-media {
      position: relative;
      min-height: 270px;
      padding: 22px;
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      overflow: hidden;
      background:
        radial-gradient(circle at 14% 16%, rgba(134,215,255,.55), transparent 16rem),
        linear-gradient(135deg, #0a1b2e 0%, #0b3a63 55%, #f5a623 100%);
    }

    .portfolio-media[data-variant="forum"] {
      background:
        radial-gradient(circle at 18% 20%, rgba(189,232,255,.55), transparent 18rem),
        linear-gradient(135deg, #0a1b2e 0%, #1c5188 60%, #86d7ff 100%);
    }
    .portfolio-media[data-variant="shop"] {
      background:
        radial-gradient(circle at 80% 18%, rgba(134,215,255,.45), transparent 16rem),
        linear-gradient(135deg, #07223f 0%, #1864c2 55%, #f5a623 100%);
    }
    .portfolio-media[data-variant="dashboard"] {
      background:
        radial-gradient(circle at 30% 80%, rgba(134,215,255,.5), transparent 18rem),
        linear-gradient(135deg, #06182b 0%, #0e3358 55%, #1f7ad6 100%);
    }
    .portfolio-media[data-variant="promo"] {
      background:
        radial-gradient(circle at 75% 10%, rgba(158,226,255,.55), transparent 18rem),
        linear-gradient(135deg, #050f1c 0%, #0a3158 55%, #f5a623 100%);
    }
    .portfolio-media[data-variant="corporate"] {
      background:
        radial-gradient(circle at 20% 80%, rgba(134,215,255,.4), transparent 16rem),
        linear-gradient(135deg, #08203a 0%, #15487c 55%, #4ab2ff 100%);
    }

    .portfolio-media--photo {
      padding: 0;
      background: #0a1b2e;
    }
    .portfolio-media--photo .portfolio-photo {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 270px;
      object-fit: contain;
      object-position: center;
      display: block;
      background: #0a1b2e;
      z-index: 1;
    }

    .portfolio-media::before {
      content: "";
      position: absolute;
      inset: -1px;
      background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.95), transparent 75%);
      pointer-events: none;
    }

    .portfolio-media::after {
      content: "";
      position: absolute;
      top: -40%;
      left: -10%;
      width: 60%;
      height: 180%;
      background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
      transform: translateX(-120%) rotate(8deg);
      transition: transform 1s ease;
      pointer-events: none;
    }

    .portfolio-card:hover .portfolio-media::after,
    .portfolio-card:focus-visible .portfolio-media::after { transform: translateX(120%) rotate(8deg); }

    .portfolio-mock {
      position: relative;
      width: 100%;
      align-self: stretch;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(237,248,255,.86));
      border: 1px solid rgba(255,255,255,.7);
      box-shadow: 0 22px 48px rgba(0,0,0,.28);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: translateZ(0);
      transition: transform .6s cubic-bezier(.2,.8,.2,1);
    }

    .portfolio-card:hover .portfolio-mock,
    .portfolio-card:focus-visible .portfolio-mock { transform: translateY(-4px) scale(1.02); }

    .portfolio-mock-top {
      display: flex;
      gap: 6px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(7,21,34,.08);
      background: rgba(246,251,255,.7);
    }
    .portfolio-mock-top i {
      width: 9px; height: 9px; border-radius: 50%;
      background: rgba(7,21,34,.16);
    }
    .portfolio-mock-top i:nth-child(1) { background: #ff6f6f; }
    .portfolio-mock-top i:nth-child(2) { background: #ffc862; }
    .portfolio-mock-top i:nth-child(3) { background: #6cd99a; }

    .portfolio-mock-body {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .portfolio-mock-kicker {
      display: inline-block;
      align-self: flex-start;
      padding: 4px 10px;
      border-radius: 999px;
      font-family: "Sora", sans-serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--blue-2);
      background: rgba(245,166,35,.12);
    }

    .portfolio-mock-line {
      display: block;
      height: 8px;
      border-radius: 99px;
      background: linear-gradient(90deg, rgba(7,21,34,.16), rgba(7,21,34,.06));
    }
    .portfolio-mock-line.w-90 { width: 90%; }
    .portfolio-mock-line.w-72 { width: 72%; }
    .portfolio-mock-line.w-50 { width: 50%; }

    .portfolio-mock-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-top: 4px;
    }
    .portfolio-mock-cards span {
      height: 28px;
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(245,166,35,.32), rgba(10,27,46,.12));
    }

    .portfolio-mock-threads {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 2px;
    }
    .portfolio-mock-threads > div {
      display: grid;
      grid-template-columns: 28px 1fr;
      column-gap: 10px;
      row-gap: 4px;
      align-items: center;
      padding: 6px;
      border-radius: 10px;
      background: rgba(245,166,35,.08);
    }
    .portfolio-mock-threads b {
      grid-row: span 2;
      width: 28px; height: 28px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--blue), var(--dark));
    }

    .portfolio-mock-products {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-top: 4px;
    }
    .portfolio-mock-products span {
      height: 42px;
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)),
        linear-gradient(135deg, rgba(245,166,35,.4), rgba(10,27,46,.18));
    }

    .portfolio-mock-chart {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 70px;
      padding: 4px 2px;
      border-radius: 10px;
      background: rgba(245,166,35,.06);
    }
    .portfolio-mock-chart span {
      flex: 1;
      height: var(--h, 50%);
      border-radius: 6px 6px 2px 2px;
      background: linear-gradient(180deg, var(--blue), var(--blue-2));
      transition: height .6s cubic-bezier(.2,.8,.2,1);
    }
    .portfolio-card:hover .portfolio-mock-chart span { animation: portfolioBar 1.1s ease-in-out infinite alternate; }
    .portfolio-mock-chart span:nth-child(2) { animation-delay: .08s; }
    .portfolio-mock-chart span:nth-child(3) { animation-delay: .16s; }
    .portfolio-mock-chart span:nth-child(4) { animation-delay: .24s; }
    .portfolio-mock-chart span:nth-child(5) { animation-delay: .32s; }
    .portfolio-mock-chart span:nth-child(6) { animation-delay: .4s; }

    @keyframes portfolioBar {
      from { transform: scaleY(.85); }
      to   { transform: scaleY(1.05); }
    }

    .portfolio-mock-big {
      display: block;
      font-family: "Sora", sans-serif;
      font-weight: 900;
      font-size: 30px;
      line-height: .92;
      letter-spacing: -.06em;
      color: var(--dark);
      margin: 4px 0 4px;
    }

    .portfolio-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      padding: 6px 12px;
      border-radius: 999px;
      font-family: "Sora", sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--white);
      background: rgba(7,21,34,.4);
      border: 1px solid rgba(255,255,255,.24);
      backdrop-filter: blur(8px);
      z-index: 3;
    }

    .portfolio-play {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 68px;
      height: 68px;
      transform: translate(-50%, -50%) scale(.86);
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--dark);
      background: rgba(255,255,255,.92);
      box-shadow: 0 16px 40px rgba(0,104,217,.28), 0 0 0 0 rgba(245,166,35,.35);
      opacity: 0;
      transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease, box-shadow .35s ease;
      z-index: 3;
    }
    .portfolio-play svg {
      width: 26px; height: 26px; fill: currentColor;
      margin-left: 3px;
    }

    .portfolio-card:hover .portfolio-play,
    .portfolio-card:focus-visible .portfolio-play {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      animation: portfolioPlayPulse 1.6s ease-out infinite;
    }

    @keyframes portfolioPlayPulse {
      0%   { box-shadow: 0 16px 40px rgba(0,104,217,.28), 0 0 0 0 rgba(245,166,35,.45); }
      70%  { box-shadow: 0 16px 40px rgba(0,104,217,.28), 0 0 0 22px rgba(245,166,35,0); }
      100% { box-shadow: 0 16px 40px rgba(0,104,217,.28), 0 0 0 0 rgba(245,166,35,0); }
    }

    .portfolio-body {
      position: relative;
      z-index: 2;
      padding: 26px 26px 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: space-between;
    }

    .portfolio-body .tag {
      align-self: flex-start;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--blue-2);
      background: rgba(245,166,35,.1);
      border: 1px solid rgba(245,166,35,.22);
    }

    .portfolio-body h3 {
      font-size: clamp(22px, 2vw, 28px);
      letter-spacing: -.06em;
      color: var(--ink);
    }

    .portfolio-body p {
      margin: 0;
      color: var(--ink-2);
      line-height: 1.55;
      font-weight: 700;
    }

    .portfolio-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
      font-family: "Sora", sans-serif;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: .02em;
      color: var(--blue-2);
    }
    .portfolio-link i {
      display: inline-block;
      transition: transform .35s ease;
    }
    .portfolio-card:hover .portfolio-link i,
    .portfolio-card:focus-visible .portfolio-link i { transform: translateX(6px); }

    /* ============ Video Modal ============ */
    .video-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(16px, 4vw, 40px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease;
    }
    .video-modal.open {
      opacity: 1;
      pointer-events: auto;
    }
    .video-modal-overlay {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 10%, rgba(245,166,35,.32), transparent 30rem),
        radial-gradient(circle at 80% 80%, rgba(134,215,255,.22), transparent 28rem),
        rgba(5, 14, 26, .72);
      backdrop-filter: blur(16px);
    }
    .video-modal-shell {
      position: relative;
      width: min(100%, 1080px);
      max-height: 92vh;
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr);
      gap: 24px;
      padding: 22px;
      border-radius: 32px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(237,248,255,.86));
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 50px 120px rgba(5,14,26,.55);
      transform: translateY(24px) scale(.96);
      opacity: 0;
      transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
    }
    .video-modal.open .video-modal-shell {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    .video-modal-close {
      position: absolute;
      top: -12px;
      right: -12px;
      width: 48px;
      height: 48px;
      border: 0;
      border-radius: 999px;
      color: var(--white);
      background: linear-gradient(135deg, var(--dark), var(--blue-2));
      box-shadow: 0 14px 40px rgba(0,104,217,.32);
      cursor: pointer;
      display: grid;
      place-items: center;
      z-index: 4;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .video-modal-close:hover { transform: scale(1.08); box-shadow: 0 18px 50px rgba(0,104,217,.4); }
    .video-modal-close svg { width: 20px; height: 20px; }

    .video-modal-frame {
      position: relative;
      border-radius: 22px;
      overflow: hidden;
      background: #050e1a;
      aspect-ratio: 16 / 9;
      box-shadow: 0 30px 80px rgba(5,14,26,.55);
    }
    .video-modal-glow {
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 30% 30%, rgba(245,166,35,.35), transparent 50%),
        radial-gradient(circle at 75% 70%, rgba(134,215,255,.25), transparent 55%);
      filter: blur(40px);
      pointer-events: none;
      animation: portfolioGlow 7s ease-in-out infinite alternate;
    }
    @keyframes portfolioGlow {
      from { transform: rotate(0deg) scale(1); opacity: .8; }
      to   { transform: rotate(8deg) scale(1.1); opacity: 1; }
    }
    .video-modal-frame video {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      background: #050e1a;
      z-index: 1;
    }
    .video-modal-empty {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 24px;
      text-align: center;
      color: var(--white);
      background:
        radial-gradient(circle at 50% 50%, rgba(245,166,35,.22), transparent 60%),
        linear-gradient(135deg, #07182b 0%, #0d3258 60%, #f5a623 130%);
    }
    .video-modal-empty[hidden] {
      display: none !important;
    }
    .video-modal-empty p {
      max-width: 320px;
      margin: 0;
      color: rgba(207, 234, 255, .85);
      font-weight: 700;
      line-height: 1.55;
    }
    .video-modal-empty code {
      padding: 2px 8px;
      border-radius: 8px;
      background: rgba(255,255,255,.12);
      font-family: "Sora", sans-serif;
      font-size: 12px;
    }

    .video-modal-info {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 12px 14px 14px 4px;
      align-self: center;
    }
    .video-modal-info h3 {
      font-size: clamp(22px, 2.4vw, 32px);
      letter-spacing: -.06em;
      color: var(--ink);
    }
    .video-modal-info p {
      margin: 0;
      color: var(--ink-2);
      line-height: 1.6;
      font-weight: 700;
    }

    body.video-open { overflow: hidden; }

    /* ============ Dark theme: Portfolio + Modal ============ */
    body[data-theme="dark"] .portfolio-grid,
    body[data-theme="dark"] .portfolio-card {
      background: rgba(10, 27, 46, .78);
      border-color: rgba(134, 215, 255, .14);
    }
    body[data-theme="dark"] .portfolio-card { box-shadow: 0 18px 54px rgba(0,0,0,.4); }
    body[data-theme="dark"] .portfolio-body h3 { color: var(--white); }
    body[data-theme="dark"] .portfolio-body p { color: var(--muted); }
    body[data-theme="dark"] .portfolio-body .tag {
      color: var(--sky-300);
      background: rgba(245,166,35,.1);
      border-color: rgba(134,215,255,.22);
    }
    body[data-theme="dark"] .portfolio-mock {
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(237,248,255,.82));
    }
    body[data-theme="dark"] .video-modal-shell {
      background:
        linear-gradient(180deg, rgba(10, 27, 46, .94), rgba(16, 36, 58, .92));
      border-color: rgba(134,215,255,.18);
    }
    body[data-theme="dark"] .video-modal-info h3 { color: var(--white); }
    body[data-theme="dark"] .video-modal-info p { color: var(--muted); }

    /* ============ Адаптив ============ */
    @media (max-width: 980px) {
      .portfolio-grid { grid-template-columns: 1fr; padding: 14px; gap: 16px; }
      .portfolio-card { grid-template-columns: 1fr; min-height: 0; }
      .portfolio-media { min-height: 220px; padding: 18px; }
      .video-modal-shell { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
      .video-modal-close { top: -10px; right: -6px; }
    }
    @media (max-width: 560px) {
      .portfolio-media { min-height: 200px; padding: 14px; }
      .portfolio-body { padding: 20px 20px 22px; }
      .portfolio-play { width: 58px; height: 58px; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

.brand-word b{color:var(--blue);font-weight:inherit;}

.review-stars .ic{vertical-align:-.12em}
.review-stars svg{fill:currentColor}