:root{
  --bg-0:#05070c;
  --bg-1:#080b12;
  --panel:#0a0e16;
  --panel-2:#0c111b;
  --ink:#eef2fb;
  --muted:#8a97ad;
  --faint:#5d6a82;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.06);

  /* accent set — overridden per theme */
  --accent:#4d8dff;
  --accent-2:#34e3e3;
  --glow:rgba(77,141,255,.45);
  --node:rgba(150,180,235,.85);
  --link-line:rgba(120,155,220,.16);
  --term-ink:#b9c6e0;

  --display:'Space Grotesk', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

/* ============ THEMES ============ */
[data-theme="mono"]{
  --accent:#f4f6fc;
  --accent-2:#c2ccde;
  --glow:rgba(220,228,245,.28);
  --node:rgba(225,231,244,.9);
  --link-line:rgba(200,210,230,.14);
  --term-ink:#cdd5e6;
}
[data-theme="blue"]{
  --accent:#4d8dff;
  --accent-2:#34e3e3;
  --glow:rgba(77,141,255,.45);
  --node:rgba(150,180,235,.9);
  --link-line:rgba(120,155,220,.18);
  --term-ink:#b9c6e0;
}
[data-theme="amber"]{
  --accent:#ffb454;
  --accent-2:#ff8a3d;
  --glow:rgba(255,180,84,.40);
  --node:rgba(255,205,150,.85);
  --link-line:rgba(255,180,110,.16);
  --term-ink:#e7d7c2;
}
[data-theme="green"]{
  --accent:#3ef08a;
  --accent-2:#27d6c4;
  --glow:rgba(62,240,138,.38);
  --node:rgba(150,240,190,.85);
  --link-line:rgba(110,220,160,.16);
  --term-ink:#bfe6cf;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg-0);
  color:var(--ink);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* ---------- background ---------- */
#net{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.9;}
.bg-base{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 16% 4%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(48% 48% at 96% 18%, color-mix(in oklab, var(--accent-2) 9%, transparent), transparent 60%),
    radial-gradient(90% 75% at 50% 122%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 55%, var(--bg-0));
}
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(125% 100% at 50% 0%, #000 30%, transparent 82%);
  mask-image:radial-gradient(125% 100% at 50% 0%, #000 30%, transparent 82%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shell ---------- */
.wrap{
  position:relative; z-index:2;
  min-height:100svh; display:flex; flex-direction:column;
  padding:clamp(20px,3.4vw,42px);
  max-width:1340px; margin:0 auto;
}

/* header */
header.top{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:13px;}
.logo-img{height:54px; width:auto; display:block; filter:drop-shadow(0 4px 18px rgba(0,0,0,.6));}
.brand-meta{display:flex; flex-direction:column; gap:3px;}
.brand-name{font-family:var(--mono); font-size:13.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); font-weight:500;}
.brand-sub{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);}
.status{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  background:color-mix(in oklab, var(--accent) 5%, transparent);
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 11px var(--accent-2); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}

/* main grid (split layout default) */
main{
  flex:1; display:grid; align-items:center;
  grid-template-columns:1.05fr .95fr; gap:clamp(30px,4.5vw,68px);
  padding:clamp(34px,7vh,82px) 0;
}

.kicker{
  font-family:var(--mono); font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); margin-bottom:26px; display:flex; align-items:center; gap:12px;
  opacity:0; animation:rise .8s .1s forwards;
}
.kicker::before{content:""; width:34px; height:1px; background:var(--accent); opacity:.55;}

h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(52px,7.4vw,96px); line-height:1.0; letter-spacing:-.03em; margin-bottom:26px;
}
h1 .l1{display:block; opacity:0; animation:rise .9s .2s forwards;}
h1 .l2{display:block; opacity:0; animation:rise .9s .34s forwards;}
h1 .em{
  background:linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
[data-theme="mono"] h1 .em{ -webkit-text-fill-color:initial; background:none; color:var(--ink);}

.lede{
  font-size:clamp(17px,1.9vw,22px); line-height:1.62; color:var(--muted); font-weight:400;
  max-width:560px; margin-bottom:38px; opacity:0; animation:rise .9s .48s forwards;
}
.lede strong{color:var(--ink); font-weight:500;}

/* rotating ticker — theme-aware nudges + facts */
.ticker{
  font-family:var(--mono, monospace);
  font-size:.82rem;
  color:var(--muted, #8195b6);
  margin:6px 0 34px;          /* the lede's margin-bottom sits above; add room below before the countdown */
  min-height:1.2em;            /* reserve space so changing text length doesn't shift layout */
  letter-spacing:.02em;
  opacity:0;
  transition:opacity .4s ease;
}
.ticker.show{opacity:1;}
.ticker b{color:var(--accent, #4d8dff); font-weight:500;}

/* countdown */
.countdown{display:flex; gap:10px; margin-bottom:38px; opacity:0; animation:rise .9s .6s forwards;}
.cd-unit{
  flex:1; max-width:112px; text-align:center;
  border:1px solid var(--line); border-radius:13px; padding:18px 6px 13px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 7%, transparent), transparent);
  position:relative;
}
.cd-num{font-family:var(--display); font-weight:600; font-size:clamp(30px,3.7vw,42px); line-height:1; font-variant-numeric:tabular-nums; color:var(--ink);}
.cd-lbl{font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:10px;}

/* signup */
.signup{max-width:540px; opacity:0; animation:rise .9s .72s forwards;}
.signup .label{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:13px; display:block;}
.field{
  display:flex; gap:8px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:14px; padding:6px;
  background:rgba(255,255,255,.02); transition:border-color .25s, box-shadow .25s;
}
.field:focus-within{border-color:color-mix(in oklab, var(--accent) 55%, transparent); box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent);}
.field input{
  flex:1 1 200px; min-width:0; background:transparent; border:0; outline:0;
  color:var(--ink); font-family:var(--display); font-size:17px; padding:14px 14px;
}
.field input::placeholder{color:#56657f;}
.field button{
  flex:0 0 auto; cursor:pointer; font-family:var(--mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:#05070c; font-weight:700;
  background:linear-gradient(100deg, var(--accent-2), var(--accent));
  border:0; border-radius:10px; padding:0 24px; min-height:54px;
  box-shadow:0 6px 24px var(--glow); transition:transform .15s, filter .2s, opacity .2s;
}
.field button:hover{transform:translateY(-1px); filter:brightness(1.08);}
.field button:active{transform:translateY(0);}
.field button:disabled{opacity:.6; cursor:default;}
.note{font-family:var(--mono); font-size:11px; color:#56657f; margin-top:14px; letter-spacing:.03em;}
.msg{margin-top:12px; font-size:14px; min-height:18px; line-height:1.5; font-family:var(--mono);}
.msg.err{color:#ff9a9a;}
.success{display:none; max-width:540px; border:1px solid color-mix(in oklab, var(--accent-2) 40%, transparent); border-radius:14px; padding:22px 24px; background:color-mix(in oklab, var(--accent-2) 6%, transparent);}
.success.show{display:block; animation:rise .5s forwards;}
.success h3{font-family:var(--display); font-size:22px; font-weight:600; margin-bottom:7px; color:var(--accent-2);}
.success p{color:var(--muted); font-size:14px; line-height:1.55;}

/* ---------- terminal ---------- */
.console{
  border:1px solid var(--line); border-radius:18px; overflow:hidden; text-align:left;
  background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 92%, transparent), color-mix(in oklab, var(--bg-0) 92%, transparent));
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
  opacity:0; animation:rise 1s .4s forwards;
  display:flex; flex-direction:column;
}
.console-bar{display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.018);}
.tl{width:11px; height:11px; border-radius:50%;}
.tl.r{background:#ff5f57;} .tl.y{background:#febc2e;} .tl.g{background:#28c840;}
.console-title{font-family:var(--mono); font-size:12px; color:var(--muted); margin-left:8px; letter-spacing:.04em;}
.console-hint{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:.08em; text-transform:uppercase;}
.console-body{
  font-family:var(--mono); font-size:14.5px; line-height:1.8; padding:22px;
  height:340px; max-height:46vh; overflow-y:auto; color:var(--term-ink); white-space:pre-wrap; word-break:break-word;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.console-body::-webkit-scrollbar{width:8px;}
.console-body::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px;}
.console-body .p{color:var(--accent-2);}
.console-body .ok{color:#43d17a;}
[data-theme="mono"] .console-body .ok{color:#eaf0fb;}  /* keep mono truly monochrome */
.console-body .hl{color:var(--accent); font-weight:500;}
.console-body .dim{color:var(--faint);}
.console-body .err{color:#ff9a9a;}
.console-body a{color:var(--accent); text-decoration:none; border-bottom:1px dotted color-mix(in oklab, var(--accent) 50%, transparent);}
.term-line{display:block;}
/* live input row */
.term-input-row{display:flex; align-items:baseline; gap:0; font-family:var(--mono); font-size:14.5px;}
.term-prompt{color:var(--accent-2); white-space:pre; flex:0 0 auto;}
.term-input{
  flex:1 1 auto; min-width:4ch; background:transparent; border:0; outline:0;
  color:var(--ink); font-family:var(--mono); font-size:14.5px; caret-color:var(--accent); padding:0;
}
.caret{display:inline-block; width:8px; height:15px; transform:translateY(2px); background:var(--accent); animation:blink 1.1s steps(1) infinite; margin-left:2px;}
@keyframes blink{0%,50%{opacity:1;} 50.01%,100%{opacity:0;}}

/* footer */
footer.bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em;
  padding-top:24px; border-top:1px solid var(--line);
}
.socials{display:flex; gap:20px;}
.socials a{color:var(--muted); text-decoration:none; transition:color .2s;}
.socials a:hover{color:var(--accent);}

@keyframes rise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}

/* ============ LAYOUT: TERMINAL HERO ============ */
body[data-layout="hero"] main{grid-template-columns:1fr; justify-items:center; text-align:center; gap:34px;}
body[data-layout="hero"] h1{align-self:stretch; width:auto; max-width:100%;}
body[data-layout="hero"] .kicker{justify-content:center;}
body[data-layout="hero"] .left-col{display:flex; flex-direction:column; align-items:center; max-width:780px;}
body[data-layout="hero"] .lede{margin-left:auto; margin-right:auto;}
body[data-layout="hero"] .right-col{width:100%; max-width:920px;}
body[data-layout="hero"] .console-body{height:380px;}
body[data-layout="hero"] .signup{margin-left:auto; margin-right:auto;}  /* visible email field, centered */
body[data-layout="hero"] .success{margin-left:auto; margin-right:auto;}
body[data-layout="hero"] .countdown{justify-content:center; max-width:520px; margin-left:auto; margin-right:auto;}

/* ============ LAYOUT: EDITORIAL ============ */
body[data-layout="editorial"] main{grid-template-columns:1fr; gap:30px; align-content:center;}
body[data-layout="editorial"] h1{font-size:clamp(54px,10vw,140px); font-weight:700; letter-spacing:-.045em; line-height:.92;}
body[data-layout="editorial"] .lede{max-width:560px;}
body[data-layout="editorial"] .ed-row{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end;}
body[data-layout="editorial"] .console{margin-top:10px;}
body[data-layout="editorial"] .console-body{height:200px;}
body[data-layout="editorial"] .right-col{display:flex; flex-direction:column; gap:24px;}
@media (max-width:900px){
  body[data-layout="editorial"] .ed-row{grid-template-columns:1fr; gap:30px;}
}

/* responsive */
@media (max-width:900px){
  main{grid-template-columns:1fr !important; gap:40px;}
  body[data-layout="hero"] .signup{display:block;}
}
@media (max-width:560px){
  .field button{flex:1 1 100%;}
  footer.bottom{flex-direction:column; align-items:flex-start; gap:14px;}
  .brand-sub{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;}
  .kicker,.lede,.countdown,.signup,.console,h1 .l1,h1 .l2{opacity:1 !important;}
}