main{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(1.5rem,5vh,3rem) 6vw .5rem;
}
h1{
  font-weight:200;
  font-size:clamp(2.1rem,5.6vw,5.5rem);
  letter-spacing:.14em;line-height:1.12;
  margin-right:-.14em; /* optically recenter tracked text */
  background:linear-gradient(180deg,#ffffff 0%,#dfe5ff 55%,#a9b6ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(140,160,255,.28));
  opacity:0;animation:rise 1.8s cubic-bezier(.2,.7,.2,1) .2s forwards;
  transition:font-size .6s cubic-bezier(.2,.7,.2,1);
}
h1 span{display:inline-block;white-space:nowrap}
.rule{
  width:clamp(48px,8vw,96px);height:1px;margin:clamp(1.2rem,3vh,2.2rem) 0;
  background:linear-gradient(90deg,transparent,rgba(180,195,255,.75),transparent);
  opacity:0;animation:fade 1.6s ease 1s forwards;transition:margin .6s;
}
.soon{
  font-weight:300;font-size:clamp(.8rem,1.5vw,1.05rem);
  letter-spacing:.55em;margin-right:-.55em;text-transform:uppercase;
  color:rgba(214,221,255,.85);
  opacity:0;animation:fade 1.6s ease 1.3s forwards;
}

/* CTA + form */
.signup{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:clamp(1.6rem,5vh,3rem);opacity:0;animation:fade 1.6s ease 1.9s forwards}
.cta{
  display:inline-flex;align-items:center;gap:.6em;
  font:inherit;font-size:clamp(.85rem,1.25vw,.98rem);font-weight:300;letter-spacing:.03em;
  color:#dfe5ff;background:rgba(150,170,255,.06);
  border:1px solid rgba(170,190,255,.28);border-radius:999px;
  padding:.8em 1.4em;cursor:pointer;white-space:nowrap;max-width:100%;
  box-shadow:0 0 0 0 rgba(140,160,255,0),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .25s,border-color .25s,box-shadow .25s,color .25s;
}
.cta:hover{background:rgba(150,170,255,.12);border-color:rgba(190,205,255,.5);box-shadow:0 0 24px rgba(140,160,255,.18);color:#fff}
.cta .chev{transition:transform .35s;opacity:.8;flex:none}
.cta[aria-expanded="true"]{background:transparent;border-color:transparent;box-shadow:none}
.cta[aria-expanded="true"] .chev{transform:rotate(180deg)}

.panel{width:min(440px,100%);margin-top:.9rem;animation:panel-in .55s cubic-bezier(.2,.7,.2,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.glass{
  text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  border:1px solid rgba(190,205,255,.18);border-radius:18px;
  padding:clamp(1.1rem,2.6vh,1.5rem) clamp(1rem,3vw,1.5rem);
  backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.field{display:flex;flex-direction:column;gap:.38rem;margin-bottom:.8rem}
label{font-size:.72rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:rgba(214,221,255,.72)}
input{
  font:inherit;font-size:16px;font-weight:300;color:#f2f4ff;width:100%;
  background:rgba(6,9,26,.55);border:1px solid rgba(170,190,255,.2);border-radius:10px;
  padding:.68rem .8rem;transition:border-color .2s,box-shadow .2s,background .2s;
}
input::placeholder{color:rgba(200,210,255,.35)}
input:hover{border-color:rgba(170,190,255,.35)}
input:focus{outline:none;border-color:rgba(170,190,255,.75);box-shadow:0 0 0 3px rgba(130,150,255,.18);background:rgba(8,12,34,.7)}
input[aria-invalid="true"]{border-color:rgba(255,140,160,.75)}
input:-webkit-autofill{-webkit-text-fill-color:#f2f4ff;-webkit-box-shadow:0 0 0 40px #0b1030 inset;caret-color:#fff}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.turnstile{min-height:65px;margin:.2rem 0 .7rem;display:flex;justify-content:center}
.consent{font-size:.74rem;line-height:1.6;font-weight:300;color:rgba(200,210,255,.66);margin-bottom:.8rem;text-align:center}
.status{font-size:.82rem;line-height:1.5;min-height:0;color:#ffb3c1;text-align:center}
.status:not(:empty){margin-bottom:.7rem}
.submit{
  width:100%;font:inherit;font-size:.92rem;font-weight:400;letter-spacing:.06em;
  color:#0a0d22;background:linear-gradient(180deg,#f3f5ff,#c9d2ff);
  border:0;border-radius:10px;padding:.82rem 1rem;cursor:pointer;
  box-shadow:0 6px 24px rgba(130,150,255,.25);transition:transform .15s,box-shadow .2s,opacity .2s;
}
.submit:hover{box-shadow:0 8px 30px rgba(130,150,255,.4)}
.submit:active{transform:translateY(1px)}
.submit[disabled]{opacity:.6;cursor:progress}
.success{text-align:center;padding:1.8rem 1.5rem}
.success svg{filter:drop-shadow(0 0 10px rgba(170,190,255,.7));margin-bottom:.6rem}
.success h2{font-weight:300;font-size:1.25rem;letter-spacing:.04em;margin-bottom:.5rem}
.success p{font-size:.86rem;font-weight:300;line-height:1.65;color:rgba(214,221,255,.78)}
.success:focus{outline:none}

/* When the form is open, tighten the hero so everything fits one screen */
body.open h1{font-size:clamp(1.9rem,4.2vw,4rem)}
body.open .rule{margin:clamp(.9rem,2vh,1.6rem) 0}

@keyframes rise{from{opacity:0;transform:translateY(14px);letter-spacing:.22em}to{opacity:1;transform:none;letter-spacing:.14em}}
@media (max-width:600px){
  h1{font-size:clamp(2.2rem,11.5vw,3.6rem);letter-spacing:.08em;margin-right:-.08em}
  body.open h1{font-size:clamp(2rem,10vw,3rem)}
  h1 span{display:block}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .soon{letter-spacing:.45em;margin-right:-.45em}
  main{padding-left:5vw;padding-right:5vw}
  .cta{white-space:normal;text-wrap:balance;font-size:.86rem;padding:.75em 1.2em}
}
@media (max-width:359px){.row{grid-template-columns:1fr;gap:0}}
@media (max-height:760px) and (min-width:601px){
  body.open h1{font-size:clamp(1.8rem,3.6vw,3.2rem)}
  .signup{margin-top:1.2rem}
}
@media (prefers-reduced-motion:reduce){h1,.rule,.soon,.signup{opacity:1}}