:root{
    --bg:#0b1020;
    --bg-2:#0e1428;
    --ink:#f4f7ff;
    --muted:#9bbcf0;
    --muted-dim:#6b80b0;
    --navy:#1e3a8a;
    --blue:#2563eb;
    --blue-2:#1d4ed8;
    --sky:#38bdf8;
    --gold:#f2c14e;
    --line:rgba(155,188,240,.14);
    --maxw:640px;
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html,body{height:100%;}

  body{
    background:
      radial-gradient(1200px 700px at 50% -10%, rgba(37,99,235,.16), transparent 60%),
      radial-gradient(900px 600px at 50% 120%, rgba(242,193,78,.07), transparent 55%),
      var(--bg);
    color:var(--ink);
    font-family:"Space Grotesk", system-ui, sans-serif;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:48px 24px;
    text-align:center;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* faint grid to give the void some texture */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(circle at 50% 42%, black, transparent 72%);
    mask-image:radial-gradient(circle at 50% 42%, black, transparent 72%);
    opacity:.5;
    pointer-events:none;
    z-index:0;
  }

  .stage{
    position:relative;
    z-index:1;
    width:100%;
    max-width:var(--maxw);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:34px;
  }

  /* ---- logo ---- */
  .logo{
    width:118px;
    height:auto;
    opacity:0;
    animation:rise .9s cubic-bezier(.2,.7,.2,1) .1s forwards;
  }
  .logo .arm{
    stroke-dasharray:240;
    stroke-dashoffset:240;
    animation:draw 1.5s ease .35s forwards;
  }
  .logo .node{opacity:0;animation:pop .5s ease forwards;}
  .logo .n1{animation-delay:1.0s;}
  .logo .n2{animation-delay:1.15s;}
  .logo .n3{animation-delay:1.3s;}
  .logo .n4{animation-delay:1.45s;}
  .logo .core{
    opacity:0;
    transform-box:fill-box;
    transform-origin:center;
    animation:pop .6s cubic-bezier(.2,1.4,.4,1) 1.6s forwards;
  }
  /* travelling pulse toward the gold core — the "beam" */
  .pulse{
    opacity:0;
    animation:beam 3.6s ease-in-out 2.4s infinite;
  }

  .wordmark{
    opacity:0;
    animation:rise .9s cubic-bezier(.2,.7,.2,1) .55s forwards;
  }
  .wordmark h1{
    font-family:"Space Grotesk", sans-serif;
    font-weight:500;
    font-size:clamp(3rem, 14vw, 5rem);
    letter-spacing:.18em;
    line-height:1;
    text-indent:.18em;          /* optical centering for tracked caps */
    margin-bottom:14px;
  }
  .wordmark .tag{
    font-family:"JetBrains Mono", monospace;
    font-size:clamp(.62rem,2.7vw,.74rem);
    letter-spacing:.42em;
    text-indent:.42em;
    color:var(--muted-dim);
    text-transform:uppercase;
  }

  .phrase{
    opacity:0;
    animation:rise 1s cubic-bezier(.2,.7,.2,1) 1.05s forwards;
    max-width:30ch;
  }
  .phrase p{
    font-family:"Fraunces", Georgia, serif;
    font-weight:300;
    font-size:clamp(1.18rem,4.6vw,1.6rem);
    line-height:1.45;
    color:var(--ink);
  }
  .phrase .ask{
    display:block;
    margin-top:.5em;
    font-style:italic;
    color:var(--muted);
  }

  /* ---- signup ---- */
  .signup{
    opacity:0;
    animation:rise 1s cubic-bezier(.2,.7,.2,1) 1.5s forwards;
    width:100%;
    max-width:380px;
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:center;
  }
  .field{
    display:flex;
    width:100%;
    gap:8px;
  }
  .field input{
    flex:1;
    min-width:0;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    border-radius:999px;
    padding:14px 20px;
    color:var(--ink);
    font-family:"Space Grotesk", sans-serif;
    font-size:.95rem;
    outline:none;
    transition:border-color .2s, background .2s, box-shadow .2s;
  }
  .field input::placeholder{color:var(--muted-dim);}
  .field input:focus{
    border-color:rgba(56,189,248,.6);
    background:rgba(255,255,255,.06);
    box-shadow:0 0 0 4px rgba(56,189,248,.12);
  }
  .btn{
    border:none;
    cursor:pointer;
    border-radius:999px;
    padding:14px 26px;
    font-family:"Space Grotesk", sans-serif;
    font-weight:500;
    font-size:.95rem;
    letter-spacing:.04em;
    color:#0b1020;
    background:linear-gradient(135deg, var(--sky), var(--gold));
    white-space:nowrap;
    transition:transform .15s ease, box-shadow .25s ease, filter .2s ease;
    box-shadow:0 6px 22px rgba(56,189,248,.22);
  }
  .btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(242,193,78,.28);filter:saturate(1.1);}
  .btn:active{transform:translateY(0);}
  .btn:focus-visible,.field input:focus-visible{outline:2px solid var(--sky);outline-offset:3px;}

  .note{
    font-family:"JetBrains Mono", monospace;
    font-size:.66rem;
    letter-spacing:.12em;
    color:var(--muted-dim);
    text-transform:uppercase;
  }

  /* success state */
  .done{
    display:none;
    flex-direction:column;
    gap:10px;
    align-items:center;
  }
  .done.show{display:flex;animation:rise .5s ease forwards;}
  .done .check{
    font-family:"Fraunces", serif;
    font-size:1.35rem;
    font-weight:400;
    color:var(--ink);
  }
  .done .sub{
    font-family:"JetBrains Mono", monospace;
    font-size:.66rem;
    letter-spacing:.14em;
    color:var(--gold);
    text-transform:uppercase;
  }
  .signup.hide{display:none;}

  footer{
    position:fixed;
    bottom:22px;
    left:0;right:0;
    z-index:1;
    text-align:center;
    font-family:"JetBrains Mono", monospace;
    font-size:.6rem;
    letter-spacing:.3em;
    color:var(--muted-dim);
    text-transform:uppercase;
    opacity:0;
    animation:rise 1s ease 1.9s forwards;
  }

  @keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes draw{to{stroke-dashoffset:0;}}
  @keyframes pop{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}
  @keyframes beam{
    0%{opacity:0;offset-distance:0%;}
    8%{opacity:1;}
    45%{opacity:1;}
    55%{opacity:0;offset-distance:100%;}
    100%{opacity:0;offset-distance:100%;}
  }

  @media (max-width:480px){
    .field{flex-direction:column;}
    .field input,.field .btn{width:100%;text-align:center;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;}
    .logo,.wordmark,.phrase,.signup,footer{opacity:1 !important;transform:none !important;}
    .logo .arm{stroke-dashoffset:0 !important;}
    .logo .node,.logo .core{opacity:1 !important;}
  }