:root{
    --bg-0:#050B1F; --bg-1:#0A1B42; --bg-2:#12327a;
    --blue-800:#1b3f9c; --blue-600:#2F6FED; --blue-500:#4B84FF; --blue-400:#6FA0FF; --blue-300:#9CC0FF;
    --amber-600:#E0912A; --amber-400:#FFB74A; --amber-300:#FFCB7A;
    --violet-600:#7A4FD6; --violet-400:#B98CFF;
    --glass-fill:rgba(255,255,255,.06); --glass-fill-strong:rgba(255,255,255,.12); --glass-border:rgba(255,255,255,.16);
    --ink-0:#F5F8FF; --ink-200:#C9D6F5; --ink-300:#A9BAE0; --ink-500:#7C8FC2;
    --success:#3ED8A0; --success-700:#1c8f68; --danger:#FF7A7A; --danger-700:#a3232f;
    --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
    --radius-lg:28px; --radius-md:18px; --radius-sm:12px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;background:var(--bg-0);scrollbar-width:thin;scrollbar-color:var(--blue-500) transparent;}
  body{
    margin:0;min-height:100vh;font-family:var(--font-body);color:var(--ink-0);
    background:var(--bg-0);overflow-x:hidden;-webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--blue-600);color:#fff;}
  ::-webkit-scrollbar{width:9px;height:9px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--blue-500),var(--blue-600));border-radius:999px;border:2px solid var(--bg-0);background-clip:padding-box;}

  /* Phones and tablets already have their own thin, auto-hiding scroll
     indicator — forcing this branded one on top of it is what reads as
     a fat, glowing blue bar on a narrow screen. Keep the branded
     scrollbar for desktop/mouse use, where a visible 9px thumb looks
     intentional, and step aside on touch devices. */
  @media (hover:none) and (pointer:coarse){
    html{scrollbar-width:none;}
    ::-webkit-scrollbar{width:0;height:0;}
  }
  a{color:inherit;}
  h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.01em;}
  p{margin:0;}
  button{font:inherit;}
  textarea, input{font-family:var(--font-body);}

  /* The native `hidden` attribute should always win over a utility class
     like .block that sets its own `display`. Without this, toggling
     .hidden = true on an element that also has .block (or similar) still
     renders it, since author CSS beats the UA stylesheet's [hidden] rule.
     Keep this near the top so it's never accidentally overridden by
     something loading later. */
  [hidden]{
    display:none !important;
  }

  .bg-fx{position:fixed;inset:0;z-index:-2;
    background:
      radial-gradient(1100px 700px at 82% -8%, rgba(47,111,237,.35), transparent 60%),
      radial-gradient(900px 600px at -10% 20%, rgba(18,50,122,.55), transparent 55%),
      radial-gradient(700px 500px at 100% 85%, rgba(255,183,74,.10), transparent 60%),
      linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  }
  .bg-fx::before{
    content:"";position:absolute;inset:0;opacity:.35;
    background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
    background-size:22px 22px;
    -webkit-mask-image:radial-gradient(1200px 800px at 70% 10%, black, transparent 70%);
            mask-image:radial-gradient(1200px 800px at 70% 10%, black, transparent 70%);
  }
  .orb{position:fixed;border-radius:50%;z-index:-1;opacity:.5;animation:float 16s ease-in-out infinite;will-change:transform;}
  .orb-a{width:380px;height:380px;background:radial-gradient(circle, var(--blue-600) 0%, rgba(47,111,237,0) 72%);top:-120px;right:-100px;}
  .orb-b{width:300px;height:300px;background:radial-gradient(circle, var(--amber-400) 0%, rgba(255,183,74,0) 72%);bottom:6%;left:-120px;opacity:.22;animation-delay:-6s;}
  @keyframes float{0%,100%{transform:translate(0,0);}50%{transform:translate(-18px,26px);}}

  .glass{
    background:linear-gradient(155deg, var(--glass-fill-strong), var(--glass-fill));
    backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1px solid var(--glass-border);border-radius:var(--radius-lg);
    box-shadow:0 20px 60px -20px rgba(2,8,25,.65), inset 0 1px 0 rgba(255,255,255,.14);
  }

  .wrap{max-width:720px;margin:0 auto;padding:0 24px;}

  .topbar{padding:22px 0 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .brand-link{
    display:inline-flex;align-items:center;gap:8px;text-decoration:none;
    font-family:var(--font-mono);font-size:.8rem;color:var(--ink-300);
    padding:8px 14px 8px 10px;border-radius:999px;background:var(--glass-fill);border:1px solid var(--glass-border);
    transition:background .2s ease, color .2s ease;
    margin-top:6px;
  }
  .brand-link:hover{background:var(--glass-fill-strong);color:var(--ink-0);}
  .who-pill{
    display:none;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.76rem;color:var(--ink-300);
    padding:7px 8px 7px 14px;border-radius:999px;background:var(--glass-fill);border:1px solid var(--glass-border);
  }
  .who-pill.show{display:inline-flex;}
  .who-pill strong{color:var(--ink-0);font-family:var(--font-body);font-weight:600;}
  .who-pill button{
    border:none;background:var(--glass-fill-strong);color:var(--ink-200);font-family:var(--font-mono);
    font-size:.7rem;padding:6px 10px;border-radius:999px;cursor:pointer;
  }
  .who-pill button:hover{background:rgba(255,255,255,.18);}

  header.hero{padding:34px 0 4px;text-align:left;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--blue-300);padding:7px 14px;border-radius:999px;
    background:var(--glass-fill);border:1px solid var(--glass-border);margin-bottom:18px;
  }
  .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber-400);box-shadow:0 0 8px var(--amber-400);}
  .hero h1{
    font-size:clamp(2rem, 6vw, 3.1rem);line-height:1.03;font-weight:700;
    background:linear-gradient(180deg,#fff 20%, var(--blue-300) 150%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero .sub{font-size:clamp(1rem,2.2vw,1.1rem);color:var(--ink-200);margin-top:12px;font-weight:500;max-width:52ch;line-height:1.5;}

  main{padding:26px 0 90px;}