/* JewelDraft main.css v2 */
  /* ============================================================
     TOKENS  —  light base, jewel accents, depth = shadow
     ============================================================ */
  :root{
    --bg:#f5f7fa;
    --bg-2:#eef2f7;
    --white:#ffffff;
    --alt:#f0f3f8;

    --ink:#1f2937;        /* charcoal — primary text            */
    --ink-2:#4b5563;      /* secondary text                     */
    --ink-3:#6b7280;      /* muted labels                       */

    --emerald:#10b981;    /* DECOR ONLY                          */
    --cyan:#22b8cf;       /* DECOR ONLY                          */
    --sapphire:#3b6bf5;   /* large text ok                       */
    --amethyst:#8b5cf6;   /* large text ok                       */

    /* heading gradient — dark stops only (readable) */
    --grad-head:linear-gradient(100deg,#3b6bf5 0%,#6d5cf0 52%,#8b5cf6 100%);
    /* full jewel gradient — DECOR (borders, fills, lines, ticks) */
    --grad-jewel:linear-gradient(100deg,#10b981 0%,#22b8cf 32%,#3b6bf5 66%,#8b5cf6 100%);
    /* button gradient — readable with white text */
    --grad-btn:linear-gradient(100deg,#3b6bf5 0%,#6d4fe6 60%,#8b5cf6 100%);

    --line:rgba(31,41,55,.09);
    --line-2:rgba(31,41,55,.14);

    /* multi-layer COLORED shadows = the core depth trick */
    --sh-blue:0 2px 4px rgba(31,41,55,.05), 0 12px 24px rgba(31,41,55,.07), 0 30px 60px -24px rgba(59,107,245,.20);
    --sh-blue-h:0 4px 8px rgba(31,41,55,.06), 0 20px 40px rgba(31,41,55,.10), 0 44px 84px -24px rgba(59,107,245,.32);
    --sh-violet:0 2px 4px rgba(31,41,55,.05), 0 12px 24px rgba(31,41,55,.07), 0 30px 60px -24px rgba(139,92,246,.20);
    --sh-violet-h:0 4px 8px rgba(31,41,55,.06), 0 20px 40px rgba(31,41,55,.10), 0 44px 84px -24px rgba(139,92,246,.32);
    --sh-teal:0 2px 4px rgba(31,41,55,.05), 0 12px 24px rgba(31,41,55,.07), 0 30px 60px -24px rgba(16,185,129,.18);
    --sh-teal-h:0 4px 8px rgba(31,41,55,.06), 0 20px 40px rgba(31,41,55,.10), 0 44px 84px -24px rgba(16,185,129,.30);

    --mono:'Consolas','SF Mono','SFMono-Regular','Courier New',monospace;
    --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --serif:Georgia,'Times New Roman',serif;

    --r-lg:22px;
    --r-md:16px;
    --r-sm:10px;
    --maxw:1240px;
    --pad:clamp(18px,4vw,30px);
    --ease:cubic-bezier(.22,.61,.36,1);
  }

  /* ============================================================ RESET */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  html,body{max-width:100%;overflow-x:hidden}
  body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--ink);
    font-size:16px;line-height:1.65;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    position:relative;
  }
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:0;background:none}
  svg{display:block}
  ::selection{background:rgba(59,107,245,.18);color:var(--ink)}

  .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}

  /* ============================================================
     BACKGROUND STACK  (honest z-order, all pre-blurred/cheap)
     deepest: pastel jewel washes  ->  blueprint grid
     ============================================================ */
  .bg-wash{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(46vw 46vw at 10% 4%,  rgba(16,185,129,.10), transparent 60%),
      radial-gradient(44vw 44vw at 92% 10%, rgba(59,107,245,.11), transparent 60%),
      radial-gradient(48vw 48vw at 78% 82%, rgba(139,92,246,.10), transparent 62%),
      radial-gradient(40vw 40vw at 16% 88%, rgba(34,184,207,.09), transparent 60%);
  }
  .bg-grid{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(59,107,245,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(59,107,245,.045) 1px,transparent 1px),
      linear-gradient(rgba(59,107,245,.075) 1px,transparent 1px),
      linear-gradient(90deg,rgba(59,107,245,.075) 1px,transparent 1px);
    background-size:34px 34px,34px 34px,170px 170px,170px 170px;
    background-position:-1px -1px;
    -webkit-mask-image:radial-gradient(130% 100% at 50% 0%,#000 55%,transparent 92%);
    mask-image:radial-gradient(130% 100% at 50% 0%,#000 55%,transparent 92%);
  }

  /* ============================================================ TYPO */
  .kicker{
    font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-2);display:inline-flex;align-items:center;gap:9px;font-weight:600;
  }
  .kicker::before{content:"";width:22px;height:1.5px;border-radius:2px;background:var(--grad-jewel)}

  h1,h2,h3{line-height:1.1;letter-spacing:-.02em;font-weight:750}
  h2{font-size:clamp(27px,4.4vw,46px)}
  h3{font-size:20px;letter-spacing:-.01em;font-weight:700}
  .grad{
    background:var(--grad-head);-webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* ============================================================ BUTTONS */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
    font-size:13px;letter-spacing:.02em;font-weight:650;
    padding:14px 26px;border-radius:var(--r-sm);position:relative;
    transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease);
  }
  .btn svg{width:16px;height:16px}
  .btn--primary{
    color:#fff;background:var(--grad-btn);background-size:150% 150%;
    box-shadow:0 2px 5px rgba(31,41,55,.10), 0 10px 22px -6px rgba(59,107,245,.45), 0 18px 40px -14px rgba(139,92,246,.40);
  }
  .btn--primary::before{ /* top specular edge */
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 42%);
    -webkit-mask:linear-gradient(#000 0 0);opacity:.9;
  }
  .btn--primary:hover{transform:translateY(-3px);background-position:100% 0;
    box-shadow:0 4px 8px rgba(31,41,55,.12), 0 16px 30px -6px rgba(59,107,245,.55), 0 28px 60px -14px rgba(139,92,246,.50);}
  .btn--primary .arw{transition:transform .28s var(--ease)}
  .btn--primary:hover .arw{transform:translateX(4px)}
  .btn--ghost{
    color:var(--ink);background:rgba(255,255,255,.85);border:1px solid var(--line-2);
    box-shadow:0 1px 2px rgba(31,41,55,.05),0 8px 20px -12px rgba(31,41,55,.25);
  }
  .btn--ghost:hover{transform:translateY(-3px);border-color:transparent;
    box-shadow:0 2px 5px rgba(31,41,55,.06),0 14px 30px -12px rgba(59,107,245,.35), inset 0 0 0 1.5px rgba(59,107,245,.5);}

  /* ============================================================ HEADER / NAV */
  header#nav{
    position:sticky;top:0;z-index:100;
    background:rgba(245,247,250,.72);
    -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
    border-bottom:1px solid transparent;transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
  }
  header#nav.scrolled{border-bottom:1px solid var(--line);background:rgba(245,247,250,.86);box-shadow:0 10px 30px -20px rgba(31,41,55,.45)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
  .brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:750;letter-spacing:-.02em;color:var(--ink)}
  .brand .mark{width:30px;height:30px;flex:0 0 auto;filter:drop-shadow(0 4px 8px rgba(59,107,245,.30))}
  .brand .dot{background:var(--grad-head);-webkit-background-clip:text;background-clip:text;color:transparent}
  .nav-links{display:flex;align-items:center;gap:4px;list-style:none}
  .nav-links a{
    font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-2);
    padding:9px 14px;border-radius:8px;position:relative;transition:color .22s var(--ease)}
  .nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
    background:var(--grad-jewel);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{transform:scaleX(1)}
  .nav-cta{display:flex;align-items:center;gap:12px}
  .burger{display:none;width:44px;height:40px;border:1px solid var(--line-2);border-radius:9px;position:relative;background:rgba(255,255,255,.7)}
  .burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--ink);transition:.28s var(--ease)}
  .burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:25px}
  .burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .drawer{display:none}
  @media(max-width:900px){.drawer{display:block}}
  .drawer{
    position:fixed;inset:70px 0 auto 0;z-index:99;
    background:rgba(245,247,250,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(31,41,55,.5);
    transform:translateY(-130%);transition:transform .38s var(--ease);padding:14px var(--pad) 24px;
  }
  .drawer.open{transform:translateY(0)}
  .drawer ul{list-style:none;display:flex;flex-direction:column}
  .drawer a{display:block;font-size:15px;font-weight:600;color:var(--ink-2);padding:15px 4px;border-bottom:1px solid var(--line)}
  .drawer .btn{display:flex;width:100%;margin-top:18px}

  /* ============================================================ SECTION FRAME */
  .sec{padding:clamp(64px,9vw,116px) 0;position:relative}
  .sec--alt{background:rgba(255,255,255,.55)}
  .sec-head{max-width:660px;margin:0 auto clamp(40px,6vw,60px);text-align:center}
  .sec-head.left{margin-left:0;margin-right:auto;text-align:left}
  .sec-head .kicker{margin-bottom:16px}
  .sec-head h2{margin-bottom:16px}
  .sec-head p{color:var(--ink-2);font-size:clamp(15px,1.6vw,17px)}

  /* card base — glass on light: fill >= .72, hairline + layered shadow */
  .card{
    position:relative;background:rgba(255,255,255,.80);
    border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--sh-blue);overflow:hidden;
  }
  /* 3D tilt + specular sheen */
  .tilt{transition:transform .5s var(--ease),box-shadow .4s var(--ease);will-change:transform;transform-style:preserve-3d}
  .tilt::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;opacity:0;
    transition:opacity .4s var(--ease);
    background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.18) 53%,transparent 62%);
    background-size:250% 250%;background-position:var(--mx,50%) var(--my,50%);
  }
  .tilt:hover,.tilt.tilting{box-shadow:var(--sh-blue-h)}
  .tilt.tilting::after{opacity:1}
  .card--v{box-shadow:var(--sh-violet)}.card--v.tilt:hover,.card--v.tilt.tilting{box-shadow:var(--sh-violet-h)}
  .card--t{box-shadow:var(--sh-teal)}.card--t.tilt:hover,.card--t.tilt.tilting{box-shadow:var(--sh-teal-h)}
  /* no-JS / touch hover fallback */
  @media(hover:hover){.tilt:hover{transform:translateY(-6px)}}

  /* ============================================================ HERO */
  .hero{position:relative;overflow:hidden;padding:clamp(30px,5vw,54px) 0 clamp(50px,7vw,84px)}
  .hero-inner{display:grid;grid-template-columns:1.02fr 1.1fr;gap:clamp(30px,5vw,60px);align-items:center;position:relative;z-index:3}

  .hero-copy .chip{
    display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-2);font-weight:600;padding:8px 15px;border-radius:100px;
    background:rgba(255,255,255,.8);border:1px solid var(--line-2);box-shadow:var(--sh-blue);margin-bottom:22px;
  }
  .hero-copy .chip .d{width:8px;height:8px;border-radius:2px;background:var(--grad-jewel);transform:rotate(45deg)}
  .hero h1{font-size:clamp(35px,5.7vw,62px);letter-spacing:-.03em;margin-bottom:22px;font-weight:800}
  .hero-sub{font-size:clamp(16px,1.75vw,19px);color:var(--ink-2);max-width:52ch;margin-bottom:32px}
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px}
  .hero-micro{display:flex;flex-wrap:wrap;gap:10px 18px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);letter-spacing:.02em}
  .hero-micro span{display:inline-flex;align-items:center;gap:9px}
  .hero-micro span::before{content:"";width:7px;height:7px;background:var(--grad-jewel);transform:rotate(45deg);flex:0 0 auto}

  /* entrance */
  .js .hero-copy>*{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .hero.in .hero-copy>*{opacity:1;transform:none}
  .hero.in .hero-copy .chip{transition-delay:.05s}
  .hero.in .hero-copy h1{transition-delay:.13s}
  .hero.in .hero-copy .hero-sub{transition-delay:.22s}
  .hero.in .hero-copy .hero-actions{transition-delay:.31s}
  .hero.in .hero-copy .hero-micro{transition-delay:.40s}
  .js .hero-stage{opacity:0;transform:translateY(26px) scale(.985);transition:opacity 1s var(--ease) .18s,transform 1s var(--ease) .18s}
  .hero.in .hero-stage{opacity:1;transform:none}

  /* floating faceted gems (hero) — real contour + fill + cast shadow */
  .facets{position:absolute;inset:0;z-index:1;pointer-events:none}
  .facets .gem{position:absolute;filter:drop-shadow(0 12px 18px rgba(59,107,245,.22))}
  .facets .g1{width:80px;left:2%;top:18%;animation:floatA 13s var(--ease) infinite alternate}
  .facets .g2{width:40px;left:44%;top:6%;animation:floatB 16s var(--ease) infinite alternate}
  .facets .g3{width:64px;right:38%;bottom:10%;animation:floatC 14s var(--ease) infinite alternate}
  .facets .g4{width:30px;left:8%;bottom:16%;animation:floatB 18s var(--ease) infinite alternate}
  .facets .g5{width:44px;right:3%;top:60%;animation:floatA 15s var(--ease) infinite alternate}
  @keyframes floatA{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-26px) rotate(12deg)}}
  @keyframes floatB{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(22px) rotate(-14deg)}}
  @keyframes floatC{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-18px) rotate(9deg)}}

  /* showreel placeholder (full-bleed feel, 4K) */
  .showreel{
    position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;
    background:
      radial-gradient(120% 90% at 24% 12%,rgba(59,107,245,.10),transparent 55%),
      radial-gradient(110% 90% at 88% 84%,rgba(139,92,246,.11),transparent 58%),
      radial-gradient(90% 80% at 60% 40%,rgba(34,184,207,.07),transparent 60%),
      linear-gradient(160deg,#ffffff,#eef2f8 60%,#e7edf6);
    border:1px solid var(--line-2);
    box-shadow:0 4px 8px rgba(31,41,55,.06), 0 26px 50px -18px rgba(31,41,55,.22), 0 50px 90px -30px rgba(59,107,245,.30);
  }
  .showreel .grid-o{position:absolute;inset:0;opacity:.7;
    background-image:linear-gradient(rgba(59,107,245,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(59,107,245,.10) 1px,transparent 1px);
    background-size:38px 38px;-webkit-mask-image:radial-gradient(95% 90% at 50% 45%,#000,transparent 82%);mask-image:radial-gradient(95% 90% at 50% 45%,#000,transparent 82%)}
  .showreel .ringwrap{position:absolute;inset:0;display:grid;place-items:center}
  .showreel .ringwrap svg{width:66%;height:66%;overflow:visible}
  .spin{transform-origin:50% 50%;animation:spin 30s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .showreel .sweep{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
    transform:translateX(-120%);animation:sweep 6.5s var(--ease) infinite}
  @keyframes sweep{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
  .play{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
    width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
    background:var(--grad-btn);box-shadow:0 10px 24px -6px rgba(59,107,245,.55),0 18px 44px -12px rgba(139,92,246,.5);
    transition:transform .3s var(--ease)}
  .play::before{content:"";width:0;height:0;margin-left:6px;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
  .play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(59,107,245,.5);animation:pulse 2.6s ease-out infinite}
  @keyframes pulse{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(1.55);opacity:0}}
  .showreel:hover .play{transform:translate(-50%,-50%) scale(1.07)}
  .tag-chip{
    position:absolute;z-index:5;font-family:var(--mono);font-size:11px;letter-spacing:.16em;font-weight:600;
    padding:6px 11px;border-radius:7px;background:rgba(255,255,255,.9);border:1px solid var(--line-2);color:var(--ink);
    display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 16px -8px rgba(31,41,55,.4)}
  .tag-chip.tl{left:16px;top:16px}
  .tag-chip.tl::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--grad-jewel)}
  .tag-chip.tr{right:16px;top:16px;color:var(--ink-2)}
  .tag-chip.tr .rec{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.16);animation:blink 1.6s steps(1) infinite}
  @keyframes blink{50%{opacity:.25}}
  .readout{position:absolute;left:16px;right:16px;bottom:14px;z-index:5;display:flex;justify-content:space-between;gap:10px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2)}

  /* ============================================================ SPEC READOUT BAR */
  .readbar{position:relative;z-index:2;margin-top:clamp(6px,2vw,10px)}
  .readbar .inner{
    display:grid;grid-template-columns:repeat(4,1fr);
    background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--sh-blue);overflow:hidden}
  .stat{padding:26px 22px;border-right:1px solid var(--line);position:relative}
  .stat:last-child{border-right:none}
  .stat .num{font-family:var(--mono);font-size:clamp(26px,3.6vw,36px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
  .stat .num .u{background:var(--grad-head);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:.62em;font-weight:700}
  .stat .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:9px}
  .stat .lbl b{color:var(--ink);font-weight:700}

  /* ============================================================ TRUST */
  .trust{padding:46px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .trust p{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:24px;font-weight:600}
  .logos{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
  .logo-chip{
    display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:100px;
    background:rgba(255,255,255,.82);border:1px solid var(--line);
    box-shadow:0 1px 2px rgba(31,41,55,.04),0 10px 24px -16px rgba(31,41,55,.4);
    font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--ink);font-weight:600;
    transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .logo-chip:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(31,41,55,.05),0 16px 30px -14px rgba(59,107,245,.4)}
  .logo-chip .mk{width:16px;height:16px;background:var(--grad-jewel);border-radius:4px;transform:rotate(45deg);flex:0 0 auto}
  .logo-chip .mk.c{border-radius:50%;transform:none}

  /* ============================================================ SERVICES */
  .grid-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .svc{padding:28px 24px 24px}
  .svc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
  .svc-ico{width:56px;height:56px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
    background:linear-gradient(150deg,rgba(59,107,245,.10),rgba(139,92,246,.10));border:1px solid var(--line)}
  .svc-ico svg{width:32px;height:32px}
  .svc .no{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
  .svc h3{margin-bottom:10px}
  .svc p{color:var(--ink-2);font-size:14.5px;line-height:1.6}
  .svc p b{color:var(--ink);font-weight:650}
  .badge{
    display:inline-flex;align-items:center;gap:8px;margin-top:18px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink);
    padding:6px 11px;border-radius:7px;background:rgba(255,255,255,.7);border:1px solid var(--line-2)}
  .badge::before{content:"";width:7px;height:7px;background:var(--grad-jewel);transform:rotate(45deg)}

  /* ============================================================ PORTFOLIO (bento) */
  .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;grid-auto-rows:minmax(150px,auto)}
  .pf{position:relative;overflow:hidden;border-radius:var(--r-lg);cursor:pointer}
  .pf-a{grid-column:span 7;grid-row:span 2}
  .pf-b{grid-column:span 5}
  .pf-c{grid-column:span 5}
  .pf-d{grid-column:span 4;grid-row:span 2}
  .pf-e{grid-column:span 4;grid-row:span 2}
  .pf-f{grid-column:span 4;grid-row:span 2}
  .pf-media{position:absolute;inset:0;z-index:0}
  .pf .grid-o{position:absolute;inset:0;opacity:.55;
    background-image:linear-gradient(rgba(59,107,245,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(59,107,245,.09) 1px,transparent 1px);
    background-size:30px 30px}
  .pf .wire{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:44%;max-width:150px;height:auto;overflow:visible;opacity:.9;z-index:1}
  .pf-1{background:radial-gradient(90% 90% at 30% 24%,rgba(16,185,129,.16),transparent 58%),radial-gradient(85% 85% at 82% 88%,rgba(59,107,245,.16),transparent 60%),linear-gradient(150deg,#ffffff,#eef3f8)}
  .pf-2{background:radial-gradient(90% 90% at 72% 26%,rgba(139,92,246,.17),transparent 58%),radial-gradient(70% 80% at 16% 82%,rgba(59,107,245,.12),transparent 60%),linear-gradient(150deg,#ffffff,#eff2f9)}
  .pf-3{background:radial-gradient(85% 90% at 40% 34%,rgba(59,107,245,.16),transparent 58%),radial-gradient(70% 70% at 86% 86%,rgba(34,184,207,.14),transparent 60%),linear-gradient(150deg,#ffffff,#edf3f8)}
  .pf-4{background:radial-gradient(80% 90% at 55% 30%,rgba(34,184,207,.16),transparent 58%),radial-gradient(70% 80% at 20% 84%,rgba(139,92,246,.14),transparent 60%),linear-gradient(150deg,#ffffff,#eef2f9)}
  .pf-5{background:radial-gradient(80% 80% at 60% 26%,rgba(139,92,246,.16),transparent 58%),radial-gradient(80% 90% at 18% 88%,rgba(59,107,245,.14),transparent 60%),linear-gradient(150deg,#ffffff,#eef3f9)}
  .pf-6{background:radial-gradient(70% 120% at 22% 46%,rgba(16,185,129,.15),transparent 60%),radial-gradient(70% 120% at 84% 54%,rgba(59,107,245,.15),transparent 60%),linear-gradient(150deg,#ffffff,#edf2f8)}
  .pf-glyph{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.85);z-index:3;
    width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--grad-btn);
    box-shadow:0 10px 24px -6px rgba(59,107,245,.5);opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .pf-glyph::before{content:"";width:0;height:0;margin-left:4px;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
  .pf:hover .pf-glyph{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .pf-type{position:absolute;top:14px;right:14px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.12em;font-weight:700;
    padding:5px 10px;border-radius:100px;background:var(--grad-btn);color:#fff;box-shadow:0 6px 14px -6px rgba(59,107,245,.6)}
  .pf-meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 18px 16px;
    background:linear-gradient(to top,rgba(255,255,255,.94),rgba(255,255,255,.7) 55%,transparent);
    border-top:1px solid var(--line)}
  .pf-meta .pt{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
  .pf-specs{display:flex;flex-wrap:wrap;gap:6px 14px}
  .pf-specs .s{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-2)}
  .pf-specs .s b{color:var(--ink);font-weight:700}
  .pf-specs .s i{font-style:normal;color:var(--ink-3);margin-right:4px}

  /* ============================================================ WHY */
  .grid-why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .why{padding:26px 24px}
  .why .wn{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3);margin-bottom:14px}
  .why .wn::before{content:"";width:11px;height:11px;border:1.5px solid transparent;background:var(--grad-jewel);
    -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    transform:rotate(45deg);border-radius:2px}
  .why h3{font-size:18px;margin-bottom:9px}
  .why p{color:var(--ink-2);font-size:14.5px;line-height:1.58}

  /* ============================================================ PROCESS */
  .proc-wrap{position:relative}
  .proc-line{position:absolute;left:6%;right:6%;top:38px;height:2px;z-index:0;overflow:visible;display:block}
  .grid-proc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1}
  .step{text-align:center}
  .step .node{
    width:74px;height:74px;margin:0 auto 20px;border-radius:18px;display:grid;place-items:center;position:relative;
    background:rgba(255,255,255,.9);border:1px solid var(--line-2);
    font-family:var(--mono);font-size:24px;font-weight:700;color:var(--ink);
    box-shadow:var(--sh-blue);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .step .node .grad{font-weight:800}
  .step:hover .node{transform:translateY(-5px);box-shadow:var(--sh-blue-h)}
  .step .node span.s{position:absolute;top:6px;left:8px;font-size:8.5px;letter-spacing:.12em;color:var(--ink-3);font-weight:600}
  .step h3{font-size:17px;margin-bottom:9px}
  .step p{color:var(--ink-2);font-size:14px;line-height:1.55;max-width:24ch;margin:0 auto}

  /* ============================================================ TESTIMONIALS */
  .grid-tst{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .tst{padding:36px 34px}
  .tst .qm{font-family:var(--serif);font-size:56px;line-height:.4;height:26px;background:var(--grad-head);-webkit-background-clip:text;background-clip:text;color:transparent}
  .tst blockquote{font-size:18.5px;line-height:1.55;color:var(--ink);letter-spacing:-.01em;margin:22px 0 26px}
  .tst .who{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:18px}
  .tst .av{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
    font-family:var(--mono);font-size:14px;font-weight:700;color:#fff;background:var(--grad-btn);box-shadow:0 8px 18px -8px rgba(59,107,245,.5)}
  .tst .nm{font-size:14.5px;font-weight:700;color:var(--ink)}
  .tst .rl{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-3)}

  /* ============================================================ CTA BLOCK */
  .cta{position:relative;padding:clamp(30px,5vw,50px) 0}
  .cta .panel{
    position:relative;overflow:hidden;border-radius:var(--r-lg);text-align:center;
    padding:clamp(48px,7vw,84px) clamp(24px,5vw,60px);
    background:
      radial-gradient(80% 130% at 16% 8%,rgba(16,185,129,.14),transparent 55%),
      radial-gradient(80% 130% at 88% 92%,rgba(139,92,246,.16),transparent 55%),
      radial-gradient(70% 100% at 60% 50%,rgba(59,107,245,.10),transparent 60%),
      linear-gradient(160deg,#ffffff,#eef2f9);
    border:1px solid var(--line-2);
    box-shadow:0 4px 8px rgba(31,41,55,.05),0 30px 60px -24px rgba(59,107,245,.3),0 60px 100px -40px rgba(139,92,246,.28)}
  .cta .panel .grid-o{position:absolute;inset:0;opacity:.5;pointer-events:none;
    background-image:linear-gradient(rgba(59,107,245,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(59,107,245,.08) 1px,transparent 1px);
    background-size:40px 40px;-webkit-mask-image:radial-gradient(80% 100% at 50% 30%,#000,transparent 78%);mask-image:radial-gradient(80% 100% at 50% 30%,#000,transparent 78%)}
  .cta .panel>*{position:relative;z-index:2}
  .cta .kicker{justify-content:center;display:inline-flex;margin-bottom:16px}
  .cta h2{max-width:20ch;margin:0 auto 16px}
  .cta p{color:var(--ink-2);font-size:17px;max-width:48ch;margin:0 auto 30px}

  /* ============================================================ FOOTER */
  footer{background:var(--bg-2);border-top:1px solid var(--line);position:relative;z-index:2}
  .foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:36px;padding:60px 0 36px}
  .foot .brand{margin-bottom:16px}
  .foot .blurb{color:var(--ink-2);font-size:14px;max-width:320px;line-height:1.6}
  .foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
  .foot ul{list-style:none}
  .foot li{margin-bottom:11px}
  .foot a{color:var(--ink-2);font-size:14px;transition:color .2s var(--ease)}
  .foot a:hover{color:var(--ink)}
  .foot .mail{font-family:var(--mono);font-size:14px;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:2px}
  .foot-bar{border-top:1px solid var(--line);padding:22px 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
  .foot-bar span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3)}

  /* ============================================================ REVEAL / DRAW */
  .js .reveal{opacity:0;transform:translateY(28px) scale(.99);transition:opacity .75s var(--ease),transform .75s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal[data-d="1"]{transition-delay:.08s}
  .reveal[data-d="2"]{transition-delay:.16s}
  .reveal[data-d="3"]{transition-delay:.24s}
  .reveal[data-d="4"]{transition-delay:.32s}
  .reveal[data-d="5"]{transition-delay:.40s}
  .js .draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.6s var(--ease)}
  .draw.in{stroke-dashoffset:0}

  /* ============================================================ ADDED EFFECTS (design6a) */
  /* [1] scroll-progress bar — driven by the single unified rAF scroll handler */
  .scroll-progress{
    position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none;
    transform:scaleX(0);transform-origin:0 50%;
    background:var(--grad-jewel);box-shadow:0 1px 6px -1px rgba(59,107,245,.45);
    transition:transform .1s linear;
  }
  /* [2] hero H1 word-stagger — words wrapped by JS; first word immediate (LCP-safe) */
  .js .hero h1.split{opacity:1;transform:none;transition:none}
  .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em);
    transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .hero.in h1.split .w{opacity:1;transform:none}
  /* [7] hero H1 accent gradient — very slow drift keyframes (paint area = a few words) */
  @keyframes heroGrad{0%{background-position:0% 50%}100%{background-position:100% 50%}}
  /* [3] blueprint section dividers — reuse .draw + existing IntersectionObserver */
  .sec-divider{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
  .sec-divider svg{width:100%;height:38px;overflow:visible;display:block}
  /* [6] one-shot shimmer sweep on primary CTA — reuses @keyframes sweep */
  .btn--primary{overflow:hidden}
  .btn--primary::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
    background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);
    transform:translateX(-140%);
  }
  /* pointer-capable devices only (gates out coarse): grad drift, portfolio hover-zoom, CTA sweep */
  @media(hover:hover){
    .hero h1 .grad{background-size:230% 100%;animation:heroGrad 15s var(--ease) infinite alternate}
    .pf-media{transition:transform .6s var(--ease)}
    .pf:hover .pf-media{transform:scale(1.06)}
    .btn--primary:hover::after{animation:sweep .85s var(--ease)}
  }

  /* ============================================================ RESPONSIVE */
  @media(max-width:1024px){
    .grid-svc{grid-template-columns:repeat(2,1fr)}
    .grid-why{grid-template-columns:repeat(2,1fr)}
    .grid-proc{grid-template-columns:repeat(2,1fr)}
    .proc-line{display:none}
    .foot{grid-template-columns:1fr 1fr;gap:28px}
    .foot .brandcol{grid-column:1/-1}
  }
  @media(max-width:900px){
    .hero-inner{grid-template-columns:1fr;gap:36px}
    .hero-stage{max-width:560px}
    .nav-links,.nav-cta .btn{display:none}
    .burger{display:block}
    .readbar .inner{grid-template-columns:1fr 1fr}
    .stat:nth-child(2){border-right:none}
    .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
    .bento{grid-template-columns:1fr;grid-auto-rows:auto}
    .pf{grid-column:span 1!important;grid-row:auto!important;aspect-ratio:16/11}
    .pf-glyph{opacity:1;transform:translate(-50%,-50%) scale(1)}
    /* PERF: lighter header backdrop-blur on small screens */
    header#nav,header#nav.scrolled{-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px)}
    /* PERF: kill floating gems + any heavy motion on mobile */
    .facets{display:none}
    .showreel .sweep{display:none}
  }
  @media(max-width:600px){
    .grid-svc{grid-template-columns:1fr}
    .grid-why{grid-template-columns:1fr}
    .grid-proc{grid-template-columns:1fr}
    .grid-tst{grid-template-columns:1fr}
    .foot{grid-template-columns:1fr}
    .hero-actions .btn{flex:1 1 auto}
    .readbar .inner{grid-template-columns:1fr 1fr}
  }
  @media(max-width:380px){
    .readbar .inner{grid-template-columns:1fr}
    .stat{border-right:none;border-bottom:1px solid var(--line)}
    .stat:last-child{border-bottom:none}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
    .reveal,.hero-copy>*,.hero-stage{opacity:1!important;transform:none!important}
    .draw{stroke-dashoffset:0!important}
    .facets{display:none}
    .hero h1 .w{opacity:1!important;transform:none!important}
    .hero h1 .grad{animation:none!important;background-size:100%!important;background-position:0 50%!important}
    .pf-media{transform:none!important}
    .btn--primary::after{display:none!important}
  }

  /* ============================================================
     ADDED v1.1  —  shared internal-page components
     (forms, prose, page-hero, active-nav, footbar, FAQ accordion)
     built ONLY on existing tokens — no new colors/variables
     ============================================================ */

  /* === FORM  —  contact / get-a-quote === */
  .form{width:100%;max-width:660px}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}
  .field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;position:relative}
  .field > label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
  .field > label .req{color:var(--sapphire);font-weight:700}
  .field .hint{font-size:12.5px;line-height:1.5;color:var(--ink-3)}

  .input,
  .field input,
  .field textarea,
  .field select{
    width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);line-height:1.5;
    background:rgba(255,255,255,.85);
    border:1px solid var(--line-2);border-radius:var(--r-sm);
    padding:13px 15px;
    -webkit-appearance:none;appearance:none;
    transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  }
  .field textarea{min-height:140px;resize:vertical}
  .field input::placeholder,
  .field textarea::placeholder{color:var(--ink-3)}
  .field input:hover,
  .field textarea:hover,
  .field select:hover{border-color:rgba(59,107,245,.45)}

  /* custom select caret (inline data-URI, charcoal = --ink value, self-contained) */
  .field select{
    padding-right:42px;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231f2937' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px;
  }

  /* focus ring — indigo / sapphire, matches site accent */
  .input:focus,
  .field input:focus,
  .field textarea:focus,
  .field select:focus{
    outline:none;border-color:var(--sapphire);background:var(--white);
    box-shadow:0 0 0 3px rgba(59,107,245,.16);
  }

  /* validation states (reuse existing reds/greens already in file) */
  .field.is-error input,
  .field.is-error textarea,
  .field.is-error select{border-color:#ef4444}
  .field.is-error input:focus,
  .field.is-error textarea:focus,
  .field.is-error select:focus{box-shadow:0 0 0 3px rgba(239,68,68,.16)}
  .field.is-ok input,
  .field.is-ok textarea,
  .field.is-ok select{border-color:var(--emerald)}
  .field.is-ok input:focus,
  .field.is-ok textarea:focus,
  .field.is-ok select:focus{box-shadow:0 0 0 3px rgba(16,185,129,.16)}
  .field-msg{display:flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
  .field.is-error .field-msg{color:#ef4444}
  .field.is-ok .field-msg{color:var(--emerald)}

  /* form-level alert banners */
  .form-alert{border-radius:var(--r-md);border:1px solid var(--line-2);padding:14px 18px;margin-bottom:22px;font-size:14px;line-height:1.55;color:var(--ink)}
  .form-alert--ok{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.34)}
  .form-alert--err{background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.34)}

  /* submit button — mirrors .btn--primary, works standalone */
  .btn-submit{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
    font-family:var(--sans);font-size:13px;letter-spacing:.02em;font-weight:650;
    padding:15px 30px;border-radius:var(--r-sm);position:relative;overflow:hidden;
    color:#fff;background:var(--grad-btn);background-size:150% 150%;
    box-shadow:0 2px 5px rgba(31,41,55,.10), 0 10px 22px -6px rgba(59,107,245,.45), 0 18px 40px -14px rgba(139,92,246,.40);
    transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease);
  }
  .btn-submit:hover{transform:translateY(-3px);background-position:100% 0;
    box-shadow:0 4px 8px rgba(31,41,55,.12), 0 16px 30px -6px rgba(59,107,245,.55), 0 28px 60px -14px rgba(139,92,246,.50)}
  .btn-submit:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(59,107,245,.30), 0 10px 22px -6px rgba(59,107,245,.45)}
  .btn-submit .arw{transition:transform .28s var(--ease)}
  .btn-submit:hover .arw{transform:translateX(4px)}
  .btn-submit:disabled,
  .btn-submit[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:0 2px 5px rgba(31,41,55,.10)}

  /* custom checkbox — Privacy consent */
  .check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;user-select:none;
    font-family:var(--sans);font-size:13.5px;line-height:1.5;letter-spacing:normal;text-transform:none;color:var(--ink-2)}
  .check input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
  .check .box{
    flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:6px;position:relative;
    display:grid;place-items:center;
    background:rgba(255,255,255,.85);border:1px solid var(--line-2);
    transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
  }
  .check .box::after{content:"";width:10px;height:6px;margin-top:-2px;
    border-left:2px solid #fff;border-bottom:2px solid #fff;border-radius:1px;
    transform:rotate(-45deg) scale(0);transition:transform .2s var(--ease)}
  .check input:checked + .box{background:var(--grad-btn);border-color:transparent}
  .check input:checked + .box::after{transform:rotate(-45deg) scale(1)}
  .check input:focus-visible + .box{box-shadow:0 0 0 3px rgba(59,107,245,.22)}
  .check a{color:var(--sapphire);text-decoration:underline;text-underline-offset:2px}
  .check a:hover{color:var(--amethyst)}

  /* file upload / dropzone */
  .dropzone{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
    padding:32px 24px;border-radius:var(--r-md);cursor:pointer;position:relative;
    background:rgba(255,255,255,.55);border:1.5px dashed var(--line-2);color:var(--ink-2);font-size:14px;
    transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
  }
  .dropzone:hover{border-color:var(--sapphire);background:var(--white)}
  .dropzone.is-drag{border-color:var(--sapphire);background:rgba(59,107,245,.05);box-shadow:0 0 0 3px rgba(59,107,245,.12)}
  .dropzone input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
  .dropzone .dz-ico{width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
    background:linear-gradient(150deg,rgba(59,107,245,.10),rgba(139,92,246,.10));border:1px solid var(--line)}
  .dropzone .dz-ico svg{width:22px;height:22px}
  .dropzone .dz-title{font-weight:650;font-size:14.5px;color:var(--ink)}
  .dropzone .dz-title u{color:var(--sapphire);text-underline-offset:2px}
  .dropzone .dz-hint{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-3)}
  .dz-file{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;border-radius:var(--r-sm);
    background:rgba(255,255,255,.80);border:1px solid var(--line);font-size:13px;color:var(--ink)}
  .dz-file .dz-x{margin-left:auto;color:var(--ink-3);font-family:var(--mono);cursor:pointer;transition:color .2s var(--ease)}
  .dz-file .dz-x:hover{color:#ef4444}

  @media(max-width:600px){.form-row{grid-template-columns:1fr}}

  /* === PROSE  —  long-form typography (privacy / about / faq) === */
  .prose{max-width:72ch;color:var(--ink-2);font-size:16px;line-height:1.75}
  .prose > *:first-child{margin-top:0}
  .prose > *:last-child{margin-bottom:0}
  .prose p{margin:0 0 1.15em}
  .prose h2{color:var(--ink);font-size:clamp(23px,3vw,32px);letter-spacing:-.02em;margin:1.9em 0 .55em}
  .prose h3{color:var(--ink);font-size:19px;margin:1.6em 0 .5em}
  .prose h2:first-child,.prose h3:first-child{margin-top:0}
  .prose h2 + p,.prose h3 + p{margin-top:0}
  .prose strong,.prose b{color:var(--ink);font-weight:700}
  .prose a{color:var(--sapphire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
    text-decoration-color:rgba(59,107,245,.42);transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
  .prose a:hover{color:var(--amethyst);text-decoration-color:var(--amethyst)}
  .prose ol{margin:0 0 1.2em;padding-left:1.4em}
  .prose ol li{margin:0 0 .5em;padding-left:.2em}
  .prose ol li::marker{color:var(--sapphire);font-family:var(--mono);font-weight:700}
  /* jewel diamond bullets — mirrors .hero-micro motif */
  .prose ul{list-style:none;margin:0 0 1.2em;padding-left:0}
  .prose ul li{position:relative;margin:0 0 .5em;padding-left:1.5em}
  .prose ul li::before{content:"";position:absolute;left:1px;top:.62em;width:7px;height:7px;
    background:var(--grad-jewel);transform:rotate(45deg)}
  .prose blockquote{margin:1.6em 0;padding:6px 0 6px 22px;
    border-left:3px solid;border-image:var(--grad-jewel) 1;
    color:var(--ink);font-size:18px;line-height:1.6}
  .prose blockquote p:last-child{margin-bottom:0}
  .prose code{font-family:var(--mono);font-size:.88em;color:var(--ink);
    background:rgba(59,107,245,.08);border:1px solid var(--line);border-radius:6px;padding:.12em .42em}
  .prose hr{border:0;height:1px;background:var(--line);margin:2.2em 0}

  /* === PAGE-HERO  —  lightweight internal-page header === */
  .page-hero{position:relative;z-index:2;padding:clamp(30px,6vw,64px) 0 clamp(24px,4vw,40px);text-align:center}
  .page-hero .kicker{display:inline-flex;justify-content:center;margin-bottom:16px}
  .page-hero h1{font-size:clamp(30px,5vw,50px);letter-spacing:-.03em;font-weight:800;margin-bottom:16px}
  .page-hero p{max-width:62ch;margin:0 auto;color:var(--ink-2);font-size:clamp(15px,1.7vw,18px)}
  .page-hero.left{text-align:left}
  .page-hero.left .kicker,.page-hero.left .breadcrumb{justify-content:flex-start}
  .page-hero.left p{margin-left:0}

  /* breadcrumb (place inside .page-hero or standalone) */
  .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin-bottom:18px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}
  .page-hero .breadcrumb{justify-content:center}
  .breadcrumb li{display:inline-flex;align-items:center;gap:8px}
  .breadcrumb li:not(:last-child)::after{content:"/";color:var(--line-2)}
  .breadcrumb a{color:var(--ink-2);transition:color .2s var(--ease)}
  .breadcrumb a:hover{color:var(--sapphire)}
  .breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}

  /* === ACTIVE NAV  —  current-page marker (reuses nav underline) === */
  .nav-links a[aria-current="page"],
  .nav-links a.active{color:var(--ink)}
  .nav-links a[aria-current="page"]::after,
  .nav-links a.active::after{transform:scaleX(1)}
  .drawer a[aria-current="page"],
  .drawer a.active{color:var(--ink)}

  /* === FOOT-BAR LINK HOVER === */
  .foot-bar a{color:var(--ink-3);transition:color .2s var(--ease)}
  .foot-bar a:hover{color:var(--ink)}

  /* === FAQ ACCORDION  —  <details>/<summary> === */
  .faq{border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-item summary{
    list-style:none;cursor:pointer;position:relative;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:22px 46px 22px 0;
    font-size:clamp(16px,2vw,18px);font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--ink);
    transition:color .2s var(--ease);
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary:hover{color:var(--sapphire)}
  .faq-item summary:focus-visible{outline:none;color:var(--sapphire);box-shadow:0 0 0 3px rgba(59,107,245,.20);border-radius:var(--r-sm)}
  /* +/- indicator drawn with the two summary pseudos */
  .faq-item summary::before,
  .faq-item summary::after{content:"";position:absolute;top:50%;background:var(--ink);border-radius:2px;pointer-events:none;
    transition:transform .3s var(--ease),opacity .3s var(--ease),background .3s var(--ease)}
  .faq-item summary::before{right:4px;width:15px;height:2px;margin-top:-1px}      /* horizontal bar */
  .faq-item summary::after{right:10.5px;width:2px;height:15px;margin-top:-7.5px}   /* vertical bar   */
  .faq-item[open] summary{color:var(--sapphire)}
  .faq-item[open] summary::before{background:var(--sapphire)}
  .faq-item[open] summary::after{transform:scaleY(0);opacity:0}                    /* + becomes -    */
  .faq-item .faq-a{padding:0 46px 24px 0;max-width:80ch;color:var(--ink-2);font-size:15.5px;line-height:1.7}
  .faq-item .faq-a > *:first-child{margin-top:0}
  .faq-item .faq-a > *:last-child{margin-bottom:0}
  .faq-item .faq-a p{margin:0 0 1em}
  .faq-item .faq-a a{color:var(--sapphire);text-decoration:underline;text-underline-offset:2px}
  .faq-item[open] .faq-a{animation:faqOpen .35s var(--ease)}
  @keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* reduced-motion guard for the added interactive pieces (explicit; global * rule also covers) */
  @media(prefers-reduced-motion:reduce){
    .faq-item[open] .faq-a{animation:none}
    .btn-submit,.dropzone,.check .box,.check .box::after,
    .field input,.field textarea,.field select,
    .faq-item summary,.faq-item summary::before,.faq-item summary::after{transition:none}
  }

  /* ============================================================
     ADDED v2  —  nav-dropdown, preloader, testimonials slider,
     team grid, blog cards, directional reveals
     built ONLY on existing tokens — no new colors/variables
     ============================================================ */

  /* === NAV-DROPDOWN (Services) — desktop hover + focus-within + click(aria); mobile = drawer accordion === */
  .nav-dd{position:relative;display:flex;align-items:center}
  .nav-dd-btn{
    font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-2);
    display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:8px;position:relative;
    background:none;transition:color .22s var(--ease);
  }
  .nav-dd-caret{width:10px;height:10px;flex:0 0 auto;line-height:0;transition:transform .28s var(--ease)}
  .nav-dd-caret svg{width:10px;height:10px;display:block}
  .nav-dd-btn::after{content:"";position:absolute;left:13px;right:24px;bottom:5px;height:2px;border-radius:2px;
    background:var(--grad-jewel);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .nav-dd-btn:hover,.nav-dd:focus-within .nav-dd-btn,.nav-dd-btn[aria-expanded="true"]{color:var(--ink)}
  .nav-dd-btn:hover::after,.nav-dd:focus-within .nav-dd-btn::after,.nav-dd-btn[aria-expanded="true"]::after{transform:scaleX(1)}
  .nav-dd-btn[aria-expanded="true"] .nav-dd-caret{transform:rotate(180deg)}
  .nav-dd-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(59,107,245,.24)}

  .nav-dd-panel{
    position:absolute;top:calc(100% + 10px);left:0;min-width:236px;z-index:120;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
    border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-blue);
    padding:8px;display:flex;flex-direction:column;gap:2px;
    opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
    transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s var(--ease);
  }
  .nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} /* keeps hover across the gap */
  .nav-dd-panel a{
    display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-sm);
    font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;
    transition:background .2s var(--ease),color .2s var(--ease);
  }
  .nav-dd-panel a::before{content:"";width:7px;height:7px;flex:0 0 auto;background:var(--grad-jewel);
    transform:rotate(45deg);opacity:.5;transition:opacity .2s var(--ease)}
  .nav-dd-panel a:hover,.nav-dd-panel a:focus-visible{background:rgba(59,107,245,.08);color:var(--ink);outline:none}
  .nav-dd-panel a:hover::before,.nav-dd-panel a:focus-visible::before{opacity:1}
  /* desktop reveal — hover + keyboard focus-within (pointer devices only, so touch-tap uses the aria path) */
  @media(hover:hover){
    .nav-dd:hover .nav-dd-panel,
    .nav-dd:focus-within .nav-dd-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  }
  /* click / touch / keyboard reveal — JS-driven aria-expanded (all devices) */
  .nav-dd-btn[aria-expanded="true"] + .nav-dd-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}

  /* === DRAWER ACCORDION (mobile Services) — sub-list toggled by a SEPARATE arrow button === */
  .drawer{max-height:calc(100vh - 70px);overflow-y:auto;overscroll-behavior:contain}
  .drawer-acc-row{display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid var(--line)}
  .drawer-acc-row > a{flex:1 1 auto;border-bottom:0}
  .drawer-acc-btn{
    flex:0 0 auto;width:46px;height:52px;display:grid;place-items:center;border-radius:9px;background:none;
    color:var(--ink-2);transition:color .2s var(--ease),background .2s var(--ease);
  }
  .drawer-acc-btn:hover,.drawer-acc-btn:focus-visible{color:var(--ink);background:rgba(59,107,245,.06);outline:none}
  .drawer-acc-caret{width:14px;height:14px;line-height:0;transition:transform .3s var(--ease)}
  .drawer-acc-caret svg{width:14px;height:14px;display:block}
  .drawer-acc-btn[aria-expanded="true"] .drawer-acc-caret{transform:rotate(180deg)}
  .drawer-acc-panel{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
  .drawer-acc-panel.open{max-height:440px}
  .drawer-acc-panel ul{list-style:none;padding:0}
  .drawer-acc-panel a{display:block;font-size:14px;font-weight:600;color:var(--ink-3);
    padding:13px 4px 13px 22px;border-bottom:1px solid var(--line)}
  .drawer-acc-panel li:last-child a{border-bottom:0}
  .drawer-acc-panel a:hover{color:var(--ink)}

  /* === PRELOADER — full-screen branded overlay; JS-gated (.js) so no-JS sees content instantly === */
  .preloader{display:none}
  .js .preloader{
    display:grid;place-items:center;gap:22px;position:fixed;inset:0;z-index:1000;
    background:
      radial-gradient(60vw 60vw at 50% 40%,rgba(59,107,245,.10),transparent 60%),
      var(--bg);
    transition:opacity .6s var(--ease),visibility .6s var(--ease);
  }
  .preloader.loaded{opacity:0;visibility:hidden;pointer-events:none}
  .pl-core{position:relative;width:92px;height:92px;display:grid;place-items:center}
  .pl-ring{position:absolute;inset:0;width:92px;height:92px;animation:plspin 2.4s linear infinite}
  .pl-gem{width:46px;height:46px;filter:drop-shadow(0 8px 16px rgba(59,107,245,.28));animation:plpulse 1.8s var(--ease) infinite}
  .pl-text{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);font-weight:600;padding-left:.28em}
  @keyframes plspin{to{transform:rotate(360deg)}}
  @keyframes plpulse{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.06);opacity:1}}

  /* === TESTIMONIALS SLIDER (vanilla — no libraries) === */
  .tslider{position:relative;max-width:820px;margin:0 auto}
  .tslide-viewport{overflow:hidden;padding:8px 6px 36px}
  .tslide-track{display:flex;transition:transform .6s var(--ease)}
  .tslide{flex:0 0 100%;min-width:0}
  .tslide-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
  .tslide-arrow{
    width:46px;height:46px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
    background:rgba(255,255,255,.85);border:1px solid var(--line-2);color:var(--ink);
    box-shadow:0 1px 2px rgba(31,41,55,.05),0 8px 20px -12px rgba(31,41,55,.35);
    transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease),color .2s var(--ease);
  }
  .tslide-arrow svg{width:18px;height:18px}
  .tslide-arrow:hover{transform:translateY(-2px);border-color:transparent;color:var(--sapphire);
    box-shadow:0 2px 5px rgba(31,41,55,.06),0 14px 28px -12px rgba(59,107,245,.4)}
  .tslide-arrow:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(59,107,245,.28)}
  .tslide-arrow[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
  .tslide-dots{display:flex;align-items:center;gap:9px}
  .tslide-dot{width:9px;height:9px;padding:0;border-radius:50%;background:var(--line-2);flex:0 0 auto;
    transition:width .3s var(--ease),background .3s var(--ease)}
  .tslide-dot:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(59,107,245,.28)}
  .tslide-dot.active{width:24px;border-radius:100px;background:var(--grad-jewel)}

  /* === TEAM GRID === */
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .team-card{
    position:relative;background:rgba(255,255,255,.80);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh-blue);
    padding:32px 26px;text-align:center;
    transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  }
  @media(hover:hover){.team-card:hover{transform:translateY(-6px);box-shadow:var(--sh-blue-h)}}
  .team-av{
    width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--mono);font-size:23px;font-weight:700;color:#fff;letter-spacing:.02em;
    background:var(--grad-btn);box-shadow:0 10px 24px -8px rgba(59,107,245,.5);
  }
  .team-name{font-size:17px;font-weight:750;letter-spacing:-.01em;color:var(--ink);margin-bottom:5px}
  .team-role{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sapphire);font-weight:600}
  .team-spec{color:var(--ink-2);font-size:14px;line-height:1.6;margin-top:13px}

  /* === BLOG GRID + POST CARD (thumb placeholder / date / title / excerpt / read-more) === */
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .post-card{
    position:relative;display:flex;flex-direction:column;overflow:hidden;
    background:rgba(255,255,255,.80);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh-blue);
    transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  }
  @media(hover:hover){.post-card:hover{transform:translateY(-6px);box-shadow:var(--sh-blue-h)}}
  .post-thumb{
    position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);
    background:
      radial-gradient(90% 90% at 28% 22%,rgba(59,107,245,.16),transparent 58%),
      radial-gradient(80% 85% at 82% 86%,rgba(139,92,246,.15),transparent 60%),
      linear-gradient(150deg,#ffffff,#eef3f8);
  }
  .post-thumb::after{content:"";position:absolute;inset:0;opacity:.5;
    background-image:linear-gradient(rgba(59,107,245,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(59,107,245,.10) 1px,transparent 1px);
    background-size:30px 30px;
    -webkit-mask-image:radial-gradient(95% 90% at 50% 45%,#000,transparent 82%);mask-image:radial-gradient(95% 90% at 50% 45%,#000,transparent 82%)}
  .post-tag{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
    font-weight:700;padding:5px 10px;border-radius:100px;background:var(--grad-btn);color:#fff;
    box-shadow:0 6px 14px -6px rgba(59,107,245,.6)}
  .post-body{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 22px 24px}
  .post-date{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
  .post-card h3{font-size:18px;line-height:1.3;margin-bottom:10px}
  .post-card h3 a{color:var(--ink);transition:color .2s var(--ease)}
  .post-card h3 a:hover{color:var(--sapphire)}
  .post-excerpt{color:var(--ink-2);font-size:14px;line-height:1.6;margin-bottom:16px}
  .post-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;
    font-size:13px;font-weight:650;letter-spacing:.01em;color:var(--sapphire);transition:color .2s var(--ease)}
  .post-more svg{width:15px;height:15px;transition:transform .28s var(--ease)}
  .post-more:hover{color:var(--amethyst)}
  .post-more:hover svg{transform:translateX(3px)}

  /* === DIRECTIONAL REVEALS (slide + fade; same IntersectionObserver, own code — not AOS) === */
  .js .reveal-up,.js .reveal-left,.js .reveal-right{opacity:0;transition:opacity .75s var(--ease),transform .75s var(--ease)}
  .js .reveal-up{transform:translateY(34px)}
  .js .reveal-left{transform:translateX(-42px)}
  .js .reveal-right{transform:translateX(42px)}
  .reveal-up.in,.reveal-left.in,.reveal-right.in{opacity:1;transform:none}
  .reveal-up[data-d="1"],.reveal-left[data-d="1"],.reveal-right[data-d="1"]{transition-delay:.08s}
  .reveal-up[data-d="2"],.reveal-left[data-d="2"],.reveal-right[data-d="2"]{transition-delay:.16s}
  .reveal-up[data-d="3"],.reveal-left[data-d="3"],.reveal-right[data-d="3"]{transition-delay:.24s}
  .reveal-up[data-d="4"],.reveal-left[data-d="4"],.reveal-right[data-d="4"]{transition-delay:.32s}
  .reveal-up[data-d="5"],.reveal-left[data-d="5"],.reveal-right[data-d="5"]{transition-delay:.40s}

  /* === RESPONSIVE (added components) === */
  @media(max-width:1080px) and (min-width:901px){
    .nav-links{gap:2px}
    .nav-links a,.nav-dd-btn{padding-left:10px;padding-right:10px}
  }
  @media(max-width:1024px){
    .team-grid{grid-template-columns:repeat(2,1fr)}
    .blog-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:640px){
    .team-grid{grid-template-columns:1fr}
    .blog-grid{grid-template-columns:1fr}
  }

  /* reduced-motion guards for added pieces (base * rule also covers; explicit for directional reveals) */
  @media(prefers-reduced-motion:reduce){
    .reveal-up,.reveal-left,.reveal-right{opacity:1!important;transform:none!important}
    .pl-gem,.pl-ring{animation:none!important}
    .preloader,.tslide-track,.nav-dd-panel,.nav-dd-caret,.drawer-acc-panel,.drawer-acc-caret,
    .team-card,.post-card,.tslide-arrow,.tslide-dot{transition:none!important}
  }

  /* ============================================================
     ADDED v2.1 — enriched living background + section decor
     Desktop-only & motion-safe for free: everything lives inside the
     .facets layer, which is already display:none at <=900px AND under
     prefers-reduced-motion. Reuses @keyframes floatA/floatB/floatC + spin
     (NO new keyframes). New nodes carry .soft (filter:none) so there is no
     drop-shadow paint-storm; all motion is transform/opacity only.
     ============================================================ */
  .facets{overflow:hidden}                    /* keep every floating node inside its section box */
  .facets .gem.soft{filter:none}              /* extra shapes stay cheap — no cast shadow */

  /* slow-rotating faceted ring — reuses .spin (transform only, no filter) */
  .facets .orbit{position:absolute;pointer-events:none;filter:none;opacity:.3;line-height:0}
  .facets .orbit svg{width:100%;height:100%;overflow:visible}

  /* hero — two more faceted gems + a large drifting ring */
  .hero .facets .g6{width:76px;right:14%;top:31%;animation:floatC 17s var(--ease) infinite alternate}
  .hero .facets .g7{width:40px;left:33%;bottom:12%;animation:floatB 19s var(--ease) infinite alternate}
  .hero .facets .orbit{width:240px;height:240px;right:1%;top:5%;opacity:.24}

  /* testimonials section — floating gems in the side whitespace + a ring */
  #testimonials .facets .t1{width:58px;left:4%;top:22%;animation:floatA 15s var(--ease) infinite alternate}
  #testimonials .facets .t2{width:38px;right:5%;top:16%;animation:floatB 18s var(--ease) infinite alternate}
  #testimonials .facets .t3{width:48px;right:9%;bottom:16%;animation:floatC 14s var(--ease) infinite alternate}
  #testimonials .facets .orbit{width:190px;height:190px;left:2%;bottom:8%;opacity:.22}

  /* why section — a couple of subtle drifting gems behind the grid */
  #about .facets .w1{width:52px;left:3%;top:26%;animation:floatB 18s var(--ease) infinite alternate}
  #about .facets .w2{width:36px;right:4%;bottom:22%;animation:floatA 16s var(--ease) infinite alternate}