/* Messenger Studio — terminal/utilitarian landing. Dependency-free. */
:root{
  --bg:#0a0e12; --bg2:#0d141b; --bg3:#10181f;
  --ink:#e9f0f5; --fg:#9fb0bd; --dim:#5a6b78;
  --green:#5ef2a0; --green-dim:#2f8f63; --amber:#f5a623; --red:#ff6b6b;
  --line:rgba(94,242,160,.16); --line-soft:rgba(159,176,189,.12);
  --mono:ui-monospace,"JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--green); text-decoration:none}
b{color:var(--ink); font-weight:600}
code{font-family:var(--mono); color:var(--amber); background:rgba(245,166,35,.08);
  padding:.05em .4em; border-radius:3px; font-size:.86em}
::selection{background:rgba(94,242,160,.28); color:#fff}

/* ── ambient fx ───────────────────────────────────────────── */
.fx-grid,.fx-scan,.fx-grain,.fx-glow{position:fixed; inset:0; pointer-events:none; z-index:0}
.fx-grid{
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:44px 44px; opacity:.5;
  mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 75%);
}
/* Static scanlines — painted once, zero per-frame cost (no animation / no
   blend-mode, which would force full-viewport recomposition on scroll). */
.fx-scan{
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px);
  opacity:.5;
}
.fx-grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.04;
}
.fx-glow{background:
  radial-gradient(60% 40% at 50% -5%,rgba(94,242,160,.10),transparent 70%),
  radial-gradient(50% 30% at 100% 0%,rgba(245,166,35,.06),transparent 70%);}

/* ── layout ───────────────────────────────────────────────── */
main,.topbar,.footer{position:relative; z-index:1}
.section,.band,.hero{max-width:var(--maxw); margin:0 auto; padding:84px 24px}
.section{padding-top:54px}

/* ── topbar ───────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:14px 24px;
  border-bottom:1px solid var(--line); background:rgba(10,14,18,.72);
  backdrop-filter:blur(8px);
}
.brand{color:var(--ink); font-weight:600; letter-spacing:.02em; white-space:nowrap}
.brand-prompt{color:var(--green); text-shadow:0 0 10px rgba(94,242,160,.6); margin-right:.35em}
.brand-dim{color:var(--dim)}
.nav{display:flex; align-items:center; gap:22px; font-size:13.5px}
.nav a{color:var(--fg)}
.nav a:hover{color:var(--green)}
.nav-status{color:var(--dim); display:inline-flex; align-items:center; gap:7px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media(max-width:680px){.nav a{display:none}.nav-status{display:inline-flex}}

/* ── hero ─────────────────────────────────────────────────── */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-top:64px}
.kicker{color:var(--green); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 18px; opacity:0; animation:rise .6s .05s both}
h1{font-size:clamp(30px,4.6vw,54px); line-height:1.08; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 22px; font-weight:700}
h1 .hl{color:var(--green); text-shadow:0 0 26px rgba(94,242,160,.35)}
.hero-copy h1{opacity:0; animation:rise .6s .12s both}
.lede{font-size:16.5px; max-width:46ch; margin:0 0 28px; opacity:0; animation:rise .6s .2s both}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:rise .6s .28s both}
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono);
  font-size:14px; padding:12px 20px; border-radius:6px; border:1px solid var(--line);
  transition:transform .15s, box-shadow .2s, background .2s, color .2s; cursor:pointer}
.btn-primary{background:var(--green); color:#062013; border-color:var(--green); font-weight:600}
.btn-primary:hover{box-shadow:0 0 26px rgba(94,242,160,.45); transform:translateY(-2px)}
.btn-ghost{color:var(--fg)}
.btn-ghost:hover{color:var(--green); border-color:var(--green); transform:translateY(-2px)}
.hero-badges{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0;
  margin:30px 0 0; opacity:0; animation:rise .6s .36s both}
.hero-badges li{font-size:12px; color:var(--dim); border:1px solid var(--line-soft);
  padding:5px 10px; border-radius:999px}
.hero-badges li::before{content:"› "; color:var(--green-dim)}
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@media(max-width:860px){.hero{grid-template-columns:1fr; gap:34px}}

/* ── terminal window ──────────────────────────────────────── */
.term{border:1px solid var(--line); border-radius:9px; background:linear-gradient(180deg,var(--bg2),var(--bg));
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(94,242,160,.04),
  inset 0 0 60px rgba(94,242,160,.025); overflow:hidden}
.term-bar{display:flex; align-items:center; gap:8px; padding:11px 14px;
  border-bottom:1px solid var(--line-soft); background:rgba(255,255,255,.015)}
.term-bar i{width:11px; height:11px; border-radius:50%; background:#1c252d; border:1px solid #2a343c}
.term-bar i:nth-child(1){box-shadow:inset 0 0 0 99px rgba(255,107,107,.5)}
.term-bar i:nth-child(2){box-shadow:inset 0 0 0 99px rgba(245,166,35,.5)}
.term-bar i:nth-child(3){box-shadow:inset 0 0 0 99px rgba(94,242,160,.5)}
.term-title{margin-left:8px; color:var(--dim); font-size:12px}
.term-body{margin:0; padding:18px; font-size:13.5px; line-height:1.7; color:var(--fg);
  white-space:pre-wrap; min-height:60px}
.hero-term{opacity:0; animation:rise .7s .3s both}
.hero-term .term-body{min-height:300px}
.bl-prompt{color:var(--green)} .bl-ok{color:var(--green)} .bl-warn{color:var(--amber)}
.bl-dim{color:var(--dim)} .bl-ink{color:var(--ink)}
.bl-row{animation:blrow .22s ease both}
.bl-row .ico{display:inline-block; width:1.4em; color:var(--green)}
.bl-row.warn .ico{color:var(--amber)}
.bl-sep{color:var(--green-dim)}
@keyframes blrow{from{opacity:0; transform:translateY(3px)}to{opacity:1; transform:none}}
.cursor{display:inline-block; width:.6em; height:1.05em; vertical-align:-2px;
  background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ── band / manifesto ─────────────────────────────────────── */
.prompt{color:var(--green); font-size:14px; margin:0 0 22px; letter-spacing:.02em;
  text-shadow:0 0 12px rgba(94,242,160,.25)}
.band{padding-top:40px; padding-bottom:40px}
.manifesto{font-size:clamp(18px,2.3vw,25px); line-height:1.6; max-width:40ch; color:var(--ink);
  border-left:2px solid var(--green); padding-left:22px; margin:0}

/* ── features grid ────────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.card{position:relative; border:1px solid var(--line-soft); border-radius:10px;
  background:linear-gradient(180deg,var(--bg2),var(--bg)); padding:22px 22px 20px;
  overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--green-dim);
  transform:scaleY(0); transform-origin:top; transition:transform .3s}
.card:hover{border-color:var(--line); transform:translateY(-3px);
  box-shadow:0 24px 60px -40px rgba(0,0,0,.9)}
.card:hover::before{transform:scaleY(1)}
.card header{display:flex; align-items:baseline; gap:12px; margin-bottom:10px}
.card-id{color:var(--green-dim); font-size:13px; font-weight:600}
.card h3{margin:0; font-size:16.5px; color:var(--ink); font-weight:600}
.card p{margin:0 0 14px; font-size:14px; color:var(--fg)}
.card>code{display:inline-block; color:var(--green); background:rgba(94,242,160,.06);
  border:1px solid var(--line-soft); font-size:11.5px}

/* ── how it works ─────────────────────────────────────────── */
.how{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center}
.how-text h2,.license-intro h2{font-size:clamp(22px,2.8vw,30px); color:var(--ink); margin:0 0 16px; letter-spacing:-.01em}
.how-text p{margin:0 0 14px; font-size:15px}
.ticks{list-style:none; padding:0; margin:18px 0 0}
.ticks li{padding-left:24px; position:relative; margin:8px 0; font-size:14px; color:var(--fg)}
.ticks li::before{content:"[x]"; position:absolute; left:0; color:var(--green)}
.diagram{font-size:11.5px; line-height:1.45; color:var(--green); overflow-x:auto;
  white-space:pre; padding-bottom:22px;
  /* CRT phosphor glow on the box-drawing lines (kept readable). */
  text-shadow:0 0 1px rgba(94,242,160,.9), 0 0 6px rgba(94,242,160,.45),
              0 0 14px rgba(94,242,160,.22);}
@media(max-width:860px){.how{grid-template-columns:1fr; gap:26px}}

/* ── license tool ─────────────────────────────────────────── */
.license{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:start}
.license-intro p{font-size:15px; margin:0 0 14px}
.muted{color:var(--dim); font-size:13.5px}
.license-form{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center}
.field-label{grid-column:1}
.prompt-inline{color:var(--green); font-size:13.5px; white-space:nowrap}
#key{grid-column:2; background:#070b0f; border:1px solid var(--line-soft); color:var(--ink);
  font-family:var(--mono); font-size:15px; letter-spacing:.12em; text-transform:uppercase;
  padding:11px 13px; border-radius:6px; min-width:0; transition:border-color .2s, box-shadow .2s}
#key::placeholder{color:#3a4751; letter-spacing:.12em}
#key:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(94,242,160,.12)}
#resetBtn{grid-column:3; background:transparent; color:var(--green); border:1px solid var(--green);
  font-family:var(--mono); font-size:13.5px; padding:11px 18px; border-radius:6px; cursor:pointer;
  transition:background .2s, color .2s, box-shadow .2s}
#resetBtn:hover:not(:disabled){background:var(--green); color:#062013; box-shadow:0 0 22px rgba(94,242,160,.4)}
#resetBtn:disabled{opacity:.5; cursor:progress}
.license-out{grid-column:1/-1; margin:6px 0 0; font-size:13px; min-height:0; white-space:pre-wrap}
.license-out:empty{display:none}
.out-ok{color:var(--green)} .out-err{color:var(--red)} .out-run{color:var(--amber)} .out-dim{color:var(--dim)}
.fineprint{color:var(--dim); font-size:12.5px; margin:26px 0 0; max-width:70ch}
@media(max-width:860px){.license{grid-template-columns:1fr; gap:26px}
  .license-form{grid-template-columns:1fr; gap:10px} #key,#resetBtn{grid-column:1}}

/* ── footer ───────────────────────────────────────────────── */
.footer{max-width:var(--maxw); margin:40px auto 0; padding:30px 24px 60px;
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px;
  justify-content:space-between; align-items:center}
.footer-prompt{color:var(--green); font-size:14px}
.blink{animation:blink 1s step-end infinite}
.footer-meta{color:var(--dim); font-size:12.5px; display:flex; gap:10px; flex-wrap:wrap}
.footer-meta .sep{color:var(--green-dim)}

/* ── reveal on scroll ─────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s, transform .6s}
.reveal.in{opacity:1; transform:none}
.grid .reveal:nth-child(2){transition-delay:.06s}
.grid .reveal:nth-child(3){transition-delay:.12s}
.grid .reveal:nth-child(4){transition-delay:.18s}
.grid .reveal:nth-child(5){transition-delay:.24s}
.grid .reveal:nth-child(6){transition-delay:.30s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none} .fx-scan{display:none}
}