:root{
    --accent:#4FD1FF;--accent-2:#2563EB;--accent-deep:#1B47B0;--ink:#0A1A3F;--bg-dark:#060F26;--bg-deep:#04091A;
    --navy-800:#0E2150;--navy-700:#102A56;--navy-600:#15366B;
    --platinum:#EAEEF5;--silver:#BAC4D6;--silver-2:#94A0BA;--slate:#6C7A98;--slate-line:#2C3A5E;
    --bg:#EAEEF5;--bg-soft:#faf9f5;--text:#BAC4D6;--text-strong:#EAEEF5;--text-muted:#94A0BA;--text-faint:#6C7A98;
    --surface:rgba(255,255,255,0.035);--surface-glass:rgba(15,31,64,0.55);--surface-inset:rgba(4,9,26,0.45);
    --border:rgba(255,255,255,0.11);--border-soft:rgba(255,255,255,0.07);--border-strong:rgba(255,255,255,0.18);--border-accent:rgba(79,209,255,0.45);
    --font-display:'Space Grotesk',system-ui,sans-serif;--font-body:'Manrope',system-ui,-apple-system,sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;
    --radius:16px;--radius-sm:12px;--radius-lg:24px;--radius-pill:999px;
    --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:40px;--s-8:48px;--s-9:64px;--s-10:80px;--s-12:128px;
    --maxw:1200px;--pad:24px;
    --grad-accent:linear-gradient(135deg,#2563EB 0%,#4FD1FF 100%);
    --grad-text:linear-gradient(120deg,#EAEEF5 0%,#BAC4D6 55%,#5B9BFF 100%);
    --grad-hero:radial-gradient(120% 120% at 50% 0%,#102A56 0%,#0A1A3F 38%,#060F26 100%);
    --grad-line:linear-gradient(90deg,transparent,rgba(79,209,255,0.55),transparent);
    --shadow-card:0 1px 0 rgba(255,255,255,0.05) inset,0 24px 48px -24px rgba(2,6,18,0.75);
    --glow-accent:0 0 0 1px rgba(79,209,255,0.25),0 8px 32px -6px rgba(37,99,235,0.55);
    --glow-accent-lg:0 0 60px -8px rgba(79,209,255,0.45),0 0 0 1px rgba(79,209,255,0.3);
    --ease:cubic-bezier(0.22,1,0.36,1);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--text);background:var(--bg-dark);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-0.015em;color:var(--text-strong)}
  p{margin:0}
  a{color:inherit;text-decoration:none;transition:color .14s var(--ease)}
  img{max-width:100%;display:block}
  ::selection{background:rgba(37,99,235,.4);color:var(--platinum)}
  :focus-visible{outline:none;box-shadow:0 0 0 3px rgba(79,209,255,.35);border-radius:6px}
  .b-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
  .b-eyebrow{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
  .b-eyebrow::before{content:"";width:18px;height:1px;background:var(--grad-line)}
  .b-gradient-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
  .b-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;transition:transform .14s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease)}
  .b-btn:active{transform:translateY(1px)}
  .b-btn svg{width:1.1em;height:1.1em;transition:transform .24s var(--ease)}
  .b-btn:hover svg{transform:translateX(4px)}
  .b-btn--md{height:44px;padding:0 24px;font-size:16px}
  .b-btn--lg{height:56px;padding:0 32px;font-size:18px}
  .b-btn--sm{height:38px;padding:0 18px;font-size:15px}
  .b-btn--glow{background:var(--grad-accent);color:#04122b;box-shadow:var(--glow-accent)}
  .b-btn--glow:hover{box-shadow:var(--glow-accent-lg);transform:translateY(-1px)}
  .b-btn--primary{background:var(--accent-2);color:#fff;box-shadow:0 6px 20px -8px rgba(37,99,235,.7)}
  .b-btn--primary:hover{background:#3B82F6;box-shadow:0 10px 28px -8px rgba(59,130,246,.85)}
  .b-btn--secondary{background:var(--surface);color:var(--text-strong);border-color:var(--border-strong)}
  .b-btn--secondary:hover{border-color:var(--border-accent);background:rgba(255,255,255,.06)}
  /* scroll-reveal (CSS + tiny IO below); degrades to visible if JS off */
  .b-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .b-reveal.is-in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.b-reveal{opacity:1;transform:none;transition:none}}

/* =====================================================================
   Premium motion layer (Section B — ANIMATIONS.md). GPU-friendly,
   fully gated behind prefers-reduced-motion.
   ===================================================================== */

/* B8 — button sheen on hover (diagonal light sweep) */
.b-btn{position:relative;overflow:hidden}
.b-btn::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);pointer-events:none}

/* B9 — card cursor-glow (radial follows --mx/--my set by JS) */
.b-card{overflow:hidden}
.b-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(79,209,255,.16),transparent 60%);
  opacity:0;transition:opacity .24s var(--ease)}
.b-card:hover::after{opacity:1}

/* hero interactive constellation canvas */
.b-hero__net{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;opacity:.85}

@media (prefers-reduced-motion: no-preference){
  /* B3 — shimmer across gradient text */
  .b-gradient-text{background-size:220% auto;animation:b-shimmer 6s linear infinite}
  @keyframes b-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}

  /* B7 — breathing glow on the primary glow button */
  .b-btn--glow{animation:b-breathe 3.6s ease-in-out infinite}
  @keyframes b-breathe{0%,100%{box-shadow:var(--glow-accent)}50%{box-shadow:var(--glow-accent-lg)}}

  /* B8 — sheen runs on hover */
  .b-btn:hover::after{animation:b-sheen .85s var(--ease)}
  @keyframes b-sheen{from{left:-120%}to{left:130%}}

  /* B10 — status-dot pulse */
  .b-hero__badge .dot{animation:b-pulse 2.4s ease-in-out infinite}
  @keyframes b-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}

  /* B4 — hero entrance cascade (staggered reveal of hero children) */
  .b-hero__in > .b-reveal:nth-child(1){transition-delay:.05s}
  .b-hero__in > .b-reveal:nth-child(2){transition-delay:.18s}
  .b-hero__in > .b-reveal:nth-child(3){transition-delay:.32s}
  .b-hero__in > .b-reveal:nth-child(4){transition-delay:.46s}
  .b-hero__in > .b-reveal:nth-child(5){transition-delay:.60s}
}