:root {
  --void:#0B0C10; --panel:#14161D; --panel-2:#1B1E27; --line:#262A35; --line-2:#333846;
  --ink:#EDF0F5; --muted:#9199AC; --faint:#606877;
  --amber:#FFB020; --amber-2:#FFC352; --amber-soft:rgba(255,176,32,.14);
  --live:#FF4438;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Bricolage Grotesque','Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,'Courier New',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],[id="features"]{scroll-margin-top:80px}
body{
  background:var(--void); color:var(--ink); font-family:var(--sans);
  line-height:1.6; min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; position:relative;
}
/* Ambient screen-glow: warm amber behind the player, faint cool wash below */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 46% at 82% 6%, rgba(255,176,32,.11), transparent 62%),
    radial-gradient(48% 40% at 6% 92%, rgba(88,132,255,.05), transparent 60%);
}
.shell{position:relative; z-index:1; overflow-x:clip}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
a{color:inherit; text-decoration:none}

/* ── Nav ───────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,12,16,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:11px}
.brand img{height:32px; width:32px; object-fit:contain; border-radius:8px; background:#fff; padding:3px; border:1px solid var(--line-2)}
.brand b{font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em}
.nav-links{display:flex; align-items:center; gap:6px}
.nav-links a:not(.btn){
  font-size:13.5px; color:var(--muted); padding:8px 12px; border-radius:8px; transition:color .15s,background .15s;
}
.nav-links a:not(.btn):hover{color:var(--ink); background:var(--panel)}

/* ── Buttons ───────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:-.01em;
  padding:12px 20px; border-radius:10px; border:1px solid transparent;
  transition:transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
.btn svg{width:17px; height:17px}
.btn-primary{background:var(--amber); color:#221700; box-shadow:0 6px 20px -6px rgba(255,176,32,.5)}
.btn-primary:hover{background:var(--amber-2); transform:translateY(-1px)}
.btn-sm{padding:9px 16px; font-size:13px}
.btn-ghost{background:var(--panel); color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--panel-2); border-color:#454b5c; transform:translateY(-1px)}
.btn-line{background:transparent; color:var(--muted); border-color:var(--line-2)}
.btn-line:hover{color:var(--ink); border-color:#454b5c}
.btn-off{background:var(--panel); color:var(--faint); border-color:var(--line); cursor:default}

/* ── Hero ──────────────────────────────────────── */
/* NOTE: vertical padding must be longhand; the `padding` shorthand would wipe .wrap's side padding */
.hero{display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; padding-top:92px; padding-bottom:40px}
.hero-copy{min-width:0}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:nowrap;
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.16em;
  color:var(--amber); text-transform:uppercase; margin-bottom:22px;
}
.eyebrow .rec{flex:none; width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(255,68,56,.6); animation:rec 2s infinite}
@keyframes rec{0%,100%{box-shadow:0 0 0 0 rgba(255,68,56,.55)}50%{box-shadow:0 0 0 6px rgba(255,68,56,0)}}
h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:1.02;
  font-size:clamp(40px,5.4vw,62px); color:#fff;
}
h1 mark{background:linear-gradient(transparent 60%, rgba(255,176,32,.30) 0); color:inherit; padding:0 .02em}
.sub{font-size:clamp(15px,1.5vw,17px); color:var(--muted); max-width:36em; margin:22px 0 34px; line-height:1.68}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-note{margin-top:20px; font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.02em}
.hero-note b{color:var(--muted); font-weight:400}

/* ── Signature: 3D player + guide ──────────────── */
.stage{position:relative; min-width:0; perspective:1700px; perspective-origin:60% 40%}
.stage::before{
  content:""; position:absolute; inset:-16% -12% -22% -8%; z-index:-1;
  background:radial-gradient(60% 60% at 58% 34%, rgba(255,176,32,.20), transparent 66%);
  filter:blur(10px);
}
.player{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-2); border-radius:16px; overflow:hidden;
  transform-style:preserve-3d; will-change:transform;
  transform:rotateY(-16deg) rotateX(7deg) rotateZ(.6deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  animation:float3d 7s ease-in-out infinite;
  box-shadow:
    -34px 34px 60px -34px rgba(0,0,0,.85),
    0 54px 100px -46px rgba(0,0,0,.92),
    0 0 0 1px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 1px 0 0 rgba(255,255,255,.04);
}
/* Straighten and lift toward the viewer on hover */
.player:hover{transform:rotateY(-6deg) rotateX(3deg) translateY(-4px) scale(1.015)}
@keyframes float3d{
  0%,100%{transform:rotateY(-16deg) rotateX(7deg) rotateZ(.6deg) translateY(0)}
  50%{transform:rotateY(-13deg) rotateX(6deg) rotateZ(.4deg) translateY(-10px)}
}
/* Faux edge thickness sitting behind the tilted card */
.player::after{
  content:""; position:absolute; inset:0; border-radius:16px; z-index:-1;
  transform:translateZ(-26px);
  background:linear-gradient(180deg,#0e1015,#080a0d);
  box-shadow:0 30px 50px -20px rgba(0,0,0,.8);
}
.screen{
  position:relative; aspect-ratio:16/9;
  background:
    radial-gradient(120% 90% at 70% 15%, rgba(255,176,32,.16), transparent 55%),
    linear-gradient(160deg,#1d222c 0%,#0e1015 70%);
  display:flex; flex-direction:column; justify-content:space-between; padding:14px 16px;
}
.screen-top{display:flex; align-items:center; gap:10px}
.live{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; color:#fff;
  background:rgba(255,68,56,.16); border:1px solid rgba(255,68,56,.4); padding:4px 9px; border-radius:6px;
}
.live i{width:7px; height:7px; border-radius:50%; background:var(--live); animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.now-ch{font-family:var(--sans); font-size:13.5px; font-weight:600; color:#fff}
.badge-4k{margin-left:auto; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--amber); border:1px solid rgba(255,176,32,.35); padding:3px 7px; border-radius:5px}
.screen-mid{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.playbtn{
  width:60px; height:60px; border-radius:50%;
  background:rgba(10,11,15,.5); border:1.5px solid rgba(255,255,255,.7);
  display:grid; place-items:center; color:#fff; backdrop-filter:blur(2px);
}
.playbtn svg{width:22px; height:22px; margin-left:3px}
.scrub{display:flex; flex-direction:column; gap:7px}
.scrub-bar{height:4px; border-radius:99px; background:rgba(255,255,255,.16); overflow:hidden}
.scrub-bar i{display:block; height:100%; width:64%; border-radius:99px; background:linear-gradient(90deg,var(--amber),var(--amber-2)); animation:fill 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes fill{from{width:0}to{width:64%}}
.scrub-time{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.7)}

.guide{position:relative; padding:14px 16px 16px; border-top:1px solid var(--line)}
.guide-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px}
.guide-head b{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--faint); font-weight:700}
.guide-times{display:flex; gap:34px; font-family:var(--mono); font-size:11px; color:var(--faint)}
.row{display:grid; grid-template-columns:34px 66px 1fr; align-items:center; gap:10px; padding:5px 0}
.cno{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--amber)}
.cname{font-size:12.5px; color:var(--muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.progs{display:flex; gap:6px}
.prog{
  flex:1; font-size:11.5px; color:var(--muted); background:var(--panel-2);
  border:1px solid var(--line); border-radius:6px; padding:6px 9px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.prog.on{color:#221700; font-weight:600; background:linear-gradient(180deg,var(--amber-2),var(--amber)); border-color:transparent}
.nowline{position:absolute; top:44px; bottom:14px; left:60.5%; width:2px; background:linear-gradient(180deg,var(--live),transparent); z-index:2}
.nowline::before{content:""; position:absolute; top:-4px; left:-3px; width:8px; height:8px; border-radius:50%; background:var(--live)}

/* ── Ticker ────────────────────────────────────── */
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(20,22,29,.5); overflow:hidden; margin-top:34px}
.ticker-track{display:flex; gap:0; white-space:nowrap; width:max-content; animation:scroll 34s linear infinite}
.ticker span{display:inline-flex; align-items:center; gap:16px; padding:13px 0; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--faint)}
.ticker span::after{content:"◆"; color:var(--amber); font-size:8px; margin:0 26px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Capabilities ──────────────────────────────── */
.sec{padding-top:84px; padding-bottom:84px}
.sec-head{margin-bottom:40px}
.kicker{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; color:var(--amber); text-transform:uppercase}
.sec-head h2{font-family:var(--display); font-weight:700; font-size:clamp(26px,3.4vw,36px); letter-spacing:-.03em; margin-top:12px; color:#fff}
.caps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.cap{
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:14px; padding:24px 22px; position:relative; transition:border-color .18s, transform .18s;
}
.cap:hover{border-color:var(--line-2); transform:translateY(-3px)}
.cap-ic{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; color:var(--amber); background:var(--amber-soft); border:1px solid rgba(255,176,32,.22); margin-bottom:16px}
.cap-ic svg{width:21px; height:21px}
.cap h3{font-family:var(--display); font-size:16.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:6px}
.cap p{font-size:13.5px; color:var(--muted); line-height:1.55}


/* ── Setup steps / long-form / FAQ ─────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:step}
.step{background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:14px; padding:24px 22px; position:relative}
.step::before{counter-increment:step; content:"0" counter(step); font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--amber)}
.step h3{font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.01em; margin:10px 0 6px; color:#fff}
.step p{font-size:13.5px; color:var(--muted); line-height:1.6}
.step code{font-family:var(--mono); font-size:12px; color:var(--ink); background:var(--void); border:1px solid var(--line); padding:1px 6px; border-radius:5px}
.prose{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.prose h2{font-family:var(--display); font-weight:700; font-size:clamp(22px,2.6vw,28px); letter-spacing:-.025em; color:#fff; margin-bottom:12px}
.prose h3{font-family:var(--display); font-weight:600; font-size:16.5px; color:#fff; margin:22px 0 6px}
.prose p{font-size:14.5px; color:var(--muted); line-height:1.7; margin-bottom:12px}
.prose ul{margin:0 0 12px 18px; color:var(--muted); font-size:14.5px; line-height:1.7}
.prose a{color:var(--amber)} .prose a:hover{text-decoration:underline}
.faq{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.qa{background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:14px; padding:22px 22px 20px; transition:border-color .18s}
.qa:hover{border-color:var(--line-2)}
.qa h3{font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.01em; color:#fff; margin-bottom:8px; padding-left:18px; position:relative}
.qa h3::before{content:"Q"; position:absolute; left:0; top:1px; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--amber)}
.qa p{font-size:14px; color:var(--muted); line-height:1.65; padding-left:18px}
.qa p a{color:var(--amber)} .qa p a:hover{text-decoration:underline}
.legal-note{margin-top:28px; font-size:12.5px; color:var(--faint); line-height:1.6; max-width:820px}
@media (max-width:940px){ .steps{grid-template-columns:1fr} .prose{grid-template-columns:1fr; gap:24px} .faq{grid-template-columns:1fr} }
@media (max-width:600px){ .eyebrow{align-items:flex-start} .eyebrow .rec{margin-top:5px} .qa{padding:18px 16px 16px} .qa h3{font-size:15px} .prose h2{font-size:22px} }

/* ── Release band ──────────────────────────────── */
.release .wrap{display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center;
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:18px; padding:38px 40px; max-width:1124px;
}
.release .wrap{margin:0 auto}
.rel-tag{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--amber); text-transform:uppercase}
.rel-ver{font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,44px); letter-spacing:-.03em; color:#fff; margin:14px 0 6px}
.rel-plat{font-family:var(--mono); font-size:12px; color:var(--faint)}
.rel-cta{margin-top:22px; display:flex; gap:11px; flex-wrap:wrap}
.notes{background:var(--void); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.notes-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--faint)}
.notes-bar i{width:9px; height:9px; border-radius:50%; background:var(--line-2)}
.notes-bar i:first-child{background:var(--live)} .notes-bar i:nth-child(2){background:var(--amber)}
.notes pre{
  margin:0; padding:16px; font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--muted);
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; max-height:190px; overflow:auto;
}

/* ── Footer ────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding:30px 0}
.foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--faint)}
.foot-links{display:flex; gap:22px; flex-wrap:wrap}
.foot-links a{color:var(--muted)} .foot-links a:hover{color:var(--ink)}

/* ── Reveal / motion ───────────────────────────── */
.reveal{opacity:0; transform:translateY(16px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1; transform:none}}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:6px}

/* ── Responsive ────────────────────────────────── */
@media (max-width:940px){
  .hero{grid-template-columns:1fr; gap:44px; padding-top:64px; padding-bottom:24px}
  .stage{max-width:520px; margin:0 auto; width:100%; perspective:1400px}
  /* Ease the 3D angle in a narrow centered column */
  .player{transform:rotateY(-9deg) rotateX(5deg); animation:none}
  .player:hover{transform:rotateY(-4deg) rotateX(2deg) translateY(-3px)}
  .release .wrap{grid-template-columns:1fr; gap:26px; padding:30px 26px}
  .caps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .nav-in{height:60px}
  .nav-links a:not(.btn){display:none}
  .hero{padding-top:48px; padding-bottom:16px}
  .cta{flex-direction:column; align-items:stretch}
  .btn{justify-content:center}
  .sec{padding-top:60px; padding-bottom:60px}
  .caps{grid-template-columns:1fr}
  .guide-times{gap:20px}
  .foot{justify-content:center; text-align:center}
}
@media (max-width:600px){
  .player{transform:rotateY(-6deg) rotateX(4deg)}
  .player::after{transform:translateZ(-16px)}
}
@media (max-width:380px){
  .brand b{font-size:15px}
  .guide-times i:first-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  .scrub-bar i{width:64%}
  .player{transform:rotateY(-9deg) rotateX(5deg)}
}