/* Layout: one-screen hero — copy + chip-number form on the left, looping 3D mark on the right; a quiet three-step strip below. Single dark look. */
:root{
  --ink:#0A101D; --fg:#EEF2F8; --muted:#93A1B8; --line:#25324A;
  --accent:#356E94; --accent-ink:#FFFFFF; --glow:#3B2A8C; --ok:#34C77B; --err:#FF8A7A;
  --f-display:"Unbounded","Onest",system-ui,sans-serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
html,body{background:var(--ink);color:var(--fg)}
body{font-family:var(--f-body);font-size:16px;line-height:1.55;overflow-x:hidden;
  background:radial-gradient(70% 55% at 72% 100%, rgba(59,42,140,.55) 0%, rgba(59,42,140,0) 70%),
             radial-gradient(40% 40% at 85% 30%, rgba(53,110,148,.22) 0%, rgba(53,110,148,0) 70%), var(--ink)}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.logo{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--fg);text-decoration:none}
.logo b{color:var(--accent);font-weight:700}
.soon{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding-block:24px 40px}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr}.stage{order:-1;max-width:420px;margin:0 auto}}
.copy{display:flex;flex-direction:column;gap:20px;min-width:0}
h1{font-family:var(--f-display);font-weight:600;font-size:clamp(32px,4.3vw,56px);line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1 span{color:var(--accent)}
.lead{color:var(--muted);font-size:18px;max-width:30em;margin:0}
form{display:flex;flex-direction:column;gap:10px;max-width:560px}
.field{display:flex;background:#F4F6FA;border-radius:999px;padding:6px;gap:6px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.field input{flex:1;min-width:0;border:0;background:transparent;font:500 18px/1 var(--f-mono);color:#0A101D;padding:0 18px;letter-spacing:.04em;font-variant-numeric:tabular-nums;outline:none}
.field input::placeholder{font-family:var(--f-body);letter-spacing:0;color:#6B778C;font-weight:400}
.field:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.field button{border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 16px var(--f-body);padding:14px 26px;cursor:pointer;white-space:nowrap}
.field button:hover{filter:brightness(1.08)}
@media (max-width:420px){.field input{padding:0 12px;font-size:16px}.field button{padding:12px 18px}}
.field button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hint{font-size:14px;color:var(--muted);min-height:1.5em;margin:0 0 0 20px}
.hint.err{color:var(--err)} .hint.ok{color:var(--ok)}
.stage{position:relative;aspect-ratio:1/1;width:100%;max-width:100%}
/* canvas is 2x the stage so flying cubes never hit an edge; it sits behind the copy and ignores the pointer */
.stage canvas{position:absolute;left:-50%;top:-50%;width:200%;height:200%;display:block;pointer-events:none}
.copy{position:relative;z-index:1}
header,.steps,footer{position:relative;z-index:1}
.hero,.stage{position:relative}
.steps .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-block:8px 48px}
@media (max-width:720px){.steps .wrap{grid-template-columns:1fr}}
.step{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.step .k{font-family:var(--f-mono);font-size:13px;color:var(--accent)}
.step h3{margin:0;font-size:17px;font-weight:600}
.step p{margin:0;color:var(--muted);font-size:15px}
footer .wrap{padding-block:20px 32px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;gap:10px}
.logo img{width:30px;height:30px;display:block}