/* STREAMSCOPE//STUDIO — brand system per StreamScope-Website-Instructions.md §2 */

/* ---------- Themes (CSS custom properties only) ---------- */
:root, [data-theme="broadcast"] {
  --bg:#080A0E; --surface:#0F1318; --surface-var:#181C24; --elevated:#222830;
  --text:#D4D8DE; --text-2:#BFC6CE; --dim:#6B7280; --divider:#1E242C;
  --primary:#0097A7; --accent:#00BCD4; --tally:#E53935; --preview:#43A047; --warn:#FFA000;
  --glow:rgba(0,188,212,.35);
}
[data-theme="midnight"] {
  --bg:#070810; --surface:#0D0F1C; --surface-var:#151830; --elevated:#1E2240;
  --text:#D6D8E6; --text-2:#BEC2D8; --dim:#6C7091; --divider:#1C2038;
  --primary:#3F51B5; --accent:#5C6BC0; --glow:rgba(92,107,192,.35);
}
[data-theme="phosphor"] {
  --bg:#060A06; --surface:#0B120B; --surface-var:#121B12; --elevated:#1A261A;
  --text:#CFE8CF; --text-2:#B4D8B4; --dim:#5F7A5F; --divider:#182418;
  --primary:#2E7D32; --accent:#4CAF50; --glow:rgba(76,175,80,.35);
}
[data-theme="crimson"] {
  --bg:#0E0808; --surface:#170E0E; --surface-var:#221414; --elevated:#301C1C;
  --text:#E6D6D6; --text-2:#D8C2C2; --dim:#8A6B6B; --divider:#2A1A1A;
  --primary:#C62828; --accent:#E53935; --glow:rgba(229,57,53,.35);
}
[data-theme="daylight"] {
  --bg:#F2F4F7; --surface:#FFFFFF; --surface-var:#E8ECF1; --elevated:#DDE3EA;
  --text:#1A2027; --text-2:#3A434E; --dim:#7B8794; --divider:#D4DAE1;
  --primary:#00838F; --accent:#0097A7; --glow:rgba(0,151,167,.25);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; color:var(--text); font:400 17px/1.65 "IBM Plex Sans",sans-serif;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--bg) 55%, #000 100%),
    var(--bg);
  transition:background .25s cubic-bezier(.2,.8,.2,1), color .25s cubic-bezier(.2,.8,.2,1);
}
/* ~3% scanline texture — actual app-shell treatment */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
  mix-blend-mode:overlay;
}
[data-theme="daylight"] body::after{background:repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 4px)}
.mono{font-family:"IBM Plex Mono",monospace}
h1,h2,h3{font-family:"Chakra Petch",sans-serif; font-weight:600; line-height:1.15; margin:0 0 .5em}
h2{font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:.01em}
h3{font-size:1.05rem; letter-spacing:.03em}
a{color:var(--accent)}
img,canvas{max-width:100%}
::selection{background:var(--primary); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.wrap--narrow{max-width:760px}
.section{padding:clamp(72px,10vw,128px) 0; position:relative}
.section--alt{background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent) 12% 88%, transparent)}
.kicker{color:var(--accent); font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; margin:0 0 12px}
.lede{color:var(--text-2); font-size:1.08rem; max-width:64ch; margin:0 0 2rem}
.caption{color:var(--dim); font-size:.7rem; letter-spacing:.18em; margin-top:20px}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:24px; padding:14px 24px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--divider);
}
.nav__brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand-mark{color:var(--accent); font-weight:500; letter-spacing:.06em}
.brand-name{font-family:"Chakra Petch",sans-serif; font-weight:600; letter-spacing:.22em; font-size:.85rem}
.nav__links{margin-left:auto; display:flex; gap:22px; align-items:center}
.nav__links a{
  color:var(--text-2); text-decoration:none; font-family:"Chakra Petch",sans-serif;
  font-weight:500; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  transition:color .15s ease-out;
}
.nav__links a:hover{color:var(--accent)}
.nav__cta{border:1px solid var(--primary); border-radius:8px; padding:7px 14px; color:var(--accent)!important}
.nav__theme{display:flex; gap:8px; margin-left:8px}
.theme-dot{
  width:16px; height:16px; border-radius:50%; border:1px solid var(--divider);
  background:var(--dot); cursor:pointer; padding:0; transition:transform .15s ease-out, box-shadow .15s ease-out;
}
.theme-dot:hover{transform:scale(1.25); box-shadow:0 0 8px var(--dot)}
@media (max-width:820px){ .nav__links a:not(.nav__cta){display:none} }

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%}
.hero__scrim{position:absolute; inset:0; background:radial-gradient(80% 70% at 50% 45%, transparent 30%, var(--bg) 95%)}
.hero__inner{position:relative; z-index:3; text-align:center; padding:96px 24px 48px; max-width:900px}
.onair{
  display:inline-flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.3em;
  color:var(--tally); border:1px solid color-mix(in srgb, var(--tally) 45%, transparent);
  border-radius:6px; padding:5px 12px; margin-bottom:28px; background:color-mix(in srgb, var(--tally) 8%, transparent);
}
.onair__dot{width:8px; height:8px; border-radius:50%; background:var(--tally); box-shadow:0 0 10px var(--tally)}
.onair--blink .onair__dot{animation:blink .5s steps(2) 5}
@keyframes blink{50%{opacity:.15}}
.hero__title{
  font-size:clamp(2.4rem,7.5vw,5.2rem); letter-spacing:.015em; margin-bottom:20px;
  text-shadow:0 0 60px var(--glow);
}
.slash{color:var(--accent)}
.hero__sub{color:var(--text-2); font-size:clamp(1rem,2vw,1.25rem); max-width:56ch; margin:0 auto 30px}
.hero__telemetry{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; font-size:.82rem;
  letter-spacing:.12em; color:var(--text-2); margin-bottom:40px;
}
.hero__telemetry i{color:var(--accent); font-style:normal}
.hero__telemetry b{color:var(--accent); font-weight:500}
.hero__cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.hero__scrollhint{
  position:absolute; bottom:22px; left:0; right:0; text-align:center; z-index:3;
  color:var(--dim); font-size:.68rem; letter-spacing:.3em;
}
.hero__tc{color:var(--accent)}

/* ---------- Buttons (crosspoint pulse on press) ---------- */
.btn{
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:.85rem;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  border-radius:8px; padding:14px 28px; display:inline-block; position:relative;
  transition:background .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}
.btn--primary{background:var(--primary); color:#fff; border:1px solid var(--primary)}
.btn--primary:hover{background:var(--accent); box-shadow:0 0 24px var(--glow); transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--accent); border:1px solid var(--primary)}
.btn--ghost:hover{background:color-mix(in srgb, var(--primary) 14%, transparent); box-shadow:0 0 18px var(--glow)}
.btn--full{width:100%; border:none}
.btn.pulse::after{
  content:""; position:absolute; inset:-2px; border-radius:10px; border:2px solid var(--accent);
  animation:xpoint .3s ease-out forwards;
}
@keyframes xpoint{from{opacity:1; transform:scale(1)} to{opacity:0; transform:scale(1.12)}}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .onair--blink .onair__dot{animation:none}
  .beam__dot{display:none}
  .mock-meter span{animation:none!important}
  .btn.pulse::after{animation:none}
}

/* ---------- Pairing panel (section 1) ---------- */
.pairing{
  display:grid; grid-template-columns:minmax(130px,180px) 1fr minmax(280px,460px);
  align-items:center; gap:8px; margin-top:44px;
}
.device__screen{
  background:var(--surface); border:1px solid var(--divider); border-radius:12px;
  overflow:hidden; box-shadow:0 12px 60px rgba(0,0,0,.5), 0 0 40px var(--glow);
}
.device--phone .device__screen{border-radius:22px; border-width:3px; border-color:var(--elevated); padding-bottom:8px}
.mock-topbar{
  font-size:.6rem; letter-spacing:.14em; color:var(--text-2); padding:8px 10px;
  border-bottom:1px solid var(--divider); background:var(--surface-var);
  display:flex; justify-content:space-between; gap:6px; white-space:nowrap; overflow:hidden;
}
.mock-live{color:var(--tally)}
.mock-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px}
.mock-cell{
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--pc,--text-2);
  border:1px solid color-mix(in srgb, var(--pc,#00BCD4) 55%, transparent);
  background:color-mix(in srgb, var(--pc,#00BCD4) 10%, transparent);
  border-radius:6px; aspect-ratio:16/10; display:flex; align-items:flex-end; padding:6px;
}
.mock-cell--tally{--pc:#E53935; box-shadow:inset 0 0 0 2px var(--pc)}
.mock-meter{display:flex; gap:3px; align-items:flex-end; height:26px; padding:0 10px}
.mock-meter span{flex:1; background:linear-gradient(180deg,var(--warn),var(--preview)); border-radius:2px 2px 0 0; animation:vu 1.1s ease-in-out infinite alternate}
.mock-meter span:nth-child(odd){animation-duration:.8s}
.mock-meter span:nth-child(3n){animation-duration:1.4s}
@keyframes vu{from{height:30%} to{height:95%}}
.mock-tc{text-align:center; color:var(--accent); font-size:.8rem; letter-spacing:.18em; padding:8px 0 4px}
.beam{width:100%; height:90px; overflow:visible}
.beam__label{fill:var(--dim); font-size:11px; letter-spacing:.18em}
.mock-matrix{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; padding:10px}
.mock-matrix i{
  aspect-ratio:1; border-radius:4px; border:1px solid var(--divider); display:block;
  background:var(--surface-var); transition:background .3s, box-shadow .3s;
}
.mock-matrix i.on{background:var(--primary); box-shadow:0 0 10px var(--glow); border-color:var(--accent)}
.mock-status{
  display:flex; gap:14px; font-size:.6rem; letter-spacing:.12em; color:var(--dim);
  padding:8px 10px; border-top:1px solid var(--divider);
}
.ok{color:var(--preview)}
@media (max-width:760px){
  .pairing{grid-template-columns:1fr; justify-items:center}
  .device--phone{width:56%; max-width:220px}
  .beam{transform:rotate(90deg); width:120px; height:60px; margin:22px 0}
  .device--desktop{width:100%}
}

/* ---------- Protocol chip wall ---------- */
.chipwall{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px}
.chip{
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; letter-spacing:.06em;
  color:var(--pc); border:1px solid color-mix(in srgb, var(--pc) 55%, transparent);
  background:color-mix(in srgb, var(--pc) 9%, transparent);
  border-radius:6px; padding:7px 13px; cursor:default;
  transition:box-shadow .15s ease-out, transform .15s ease-out, background .15s ease-out;
  opacity:0; transform:translateY(12px);
}
.chipwall.in .chip{opacity:1; transform:none; transition:opacity .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease-out, background .15s ease-out}
.chip:hover{box-shadow:0 0 16px color-mix(in srgb, var(--pc) 50%, transparent); background:color-mix(in srgb, var(--pc) 18%, transparent); transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.chip{opacity:1; transform:none}}

/* ---------- Toolkit chip strip (production tools) ---------- */
.toolstrip{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.tool{
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.03em;
  color:var(--text-2); background:var(--surface);
  border:1px solid var(--divider); border-left:2px solid var(--accent);
  border-radius:6px; padding:6px 12px;
  transition:color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}
.tool:hover{color:var(--text); border-color:var(--accent); box-shadow:0 0 14px var(--glow); transform:translateY(-1px)}

/* ---------- Cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-top:40px}
.card{
  background:var(--surface); border:1px solid var(--divider); border-radius:12px; padding:24px;
  transition:border-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}
.card:hover{border-color:var(--primary); box-shadow:0 6px 30px rgba(0,0,0,.35), 0 0 20px var(--glow); transform:translateY(-3px)}
.card h3{display:flex; align-items:center; gap:10px; color:var(--text)}
.card p{color:var(--text-2); font-size:.92rem; margin:0}
.ic{width:10px; height:10px; border-radius:3px; background:var(--pc,--accent); box-shadow:0 0 10px var(--pc,--accent); flex:none}

/* ---------- Terminal / spec sheet ---------- */
.term{background:#05070A; border:1px solid var(--divider); border-radius:12px; overflow:hidden; margin-top:36px; box-shadow:0 16px 70px rgba(0,0,0,.55)}
[data-theme="daylight"] .term{background:#0F1318; color:#D4D8DE}
.term__bar{display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--surface-var); border-bottom:1px solid var(--divider)}
[data-theme="daylight"] .term__bar{background:#181C24}
.term__bar span{width:11px; height:11px; border-radius:50%; background:var(--divider)}
.term__bar span:first-child{background:var(--tally)} .term__bar span:nth-child(2){background:var(--warn)} .term__bar span:nth-child(3){background:var(--preview)}
.term__bar em{margin-left:8px; font-style:normal; color:var(--dim); font-size:.72rem; letter-spacing:.12em}
.term__body{margin:0; padding:22px 24px; font-size:.82rem; line-height:1.9; color:#BFC6CE; overflow-x:auto}

/* ---------- Timeline ---------- */
.timeline{position:relative; margin-top:52px; padding-left:70px}
.timeline__line{position:absolute; left:26px; top:6px; bottom:6px; width:2px; background:var(--divider); border-radius:2px}
.timeline__line span{display:block; width:100%; height:0; background:linear-gradient(180deg,var(--primary),var(--accent)); box-shadow:0 0 12px var(--glow); transition:height .2s linear}
.tl-item{position:relative; padding:0 0 46px}
.tl-item::before{
  content:""; position:absolute; left:-51px; top:4px; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid var(--primary); box-shadow:0 0 12px var(--glow);
}
.tl-year{position:absolute; left:-70px; top:26px; color:var(--accent); font-size:.68rem; letter-spacing:.14em; writing-mode:vertical-rl; text-orientation:mixed}
.tl-body h3{font-size:1.3rem}
.tl-now{color:var(--tally); font-size:.75rem; letter-spacing:.2em}
.tl-body p{color:var(--text-2); max-width:62ch; margin:0}
@media (max-width:600px){ .timeline{padding-left:52px} .tl-year{display:none} .tl-item::before{left:-33px} .timeline__line{left:20px} }

/* ---------- Personas ---------- */
.personas{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.persona{
  font-family:"Chakra Petch",sans-serif; font-weight:500; font-size:.9rem; letter-spacing:.05em;
  background:var(--surface); border:1px solid var(--divider); border-radius:8px; padding:13px 20px;
  transition:border-color .15s ease-out, box-shadow .15s ease-out;
}
.persona:hover{border-color:var(--accent); box-shadow:0 0 16px var(--glow)}
.persona em{color:var(--accent); font-style:normal; font-size:.7rem; letter-spacing:.1em; display:block}

/* ---------- Form ---------- */
.form{margin-top:36px; padding:32px}
.form label{display:block; font-family:"Chakra Petch",sans-serif; font-weight:500; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-2); margin-bottom:18px}
.form input,.form select,.form textarea{
  display:block; width:100%; margin-top:8px; padding:12px 14px; font:400 1rem/1.4 "IBM Plex Sans",sans-serif;
  color:var(--text); background:var(--surface-var); border:1px solid var(--divider); border-radius:8px;
  transition:border-color .15s ease-out, box-shadow .15s ease-out;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}
.hp{position:absolute!important; left:-9999px!important; height:1px; width:1px; opacity:0}
.form__status{min-height:1.4em; margin:14px 0 0; font-size:.8rem; letter-spacing:.1em}
.form__status.ok{color:var(--preview)} .form__status.err{color:var(--tally)}
.form__privacy{color:var(--dim); font-size:.78rem; margin:10px 0 0}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--divider); padding:44px 0 60px}
.footer__inner{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.footer p{color:var(--dim); font-size:.8rem; margin:0}