*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ground:#0b1017;--panel:#131b26;--panel2:#0e141d;--line:#1d2836;
  --text:#dbe5ee;--dim:#7d92a8;--faint:#5c718a;
  --accent:#4da3ff;--gold:#ffb84d;--ok:#4dd086;
}
body{background:linear-gradient(180deg,#0a0f16,#0d1520 55%,#0f1826) fixed,#0b1017;
  color:var(--text);font-family:'Public Sans',system-ui,sans-serif;font-size:16px;line-height:1.65}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}
a{color:var(--accent);text-decoration:none}
nav{display:flex;justify-content:space-between;align-items:center;padding:26px 0}
.logo{font-family:'Barlow Condensed';font-weight:700;font-size:30px;color:#fff;letter-spacing:.5px}
.logo span{color:var(--accent);font-weight:500}
nav .links a{color:var(--dim);margin-left:26px;font-size:15px}
nav .links a:hover{color:#fff}
.hero{text-align:center;padding:84px 0 60px}
.hero h1{font-family:'Barlow Condensed';font-weight:700;font-size:64px;line-height:1.05;
  color:#fff;letter-spacing:.5px;max-width:17ch;margin:0 auto;text-wrap:balance}
.hero h1 em{color:var(--accent);font-style:normal}
.hero p{color:var(--dim);font-size:19px;max-width:56ch;margin:22px auto 0}
.cta{display:inline-block;margin-top:38px;padding:16px 44px;border-radius:12px;
  background:linear-gradient(135deg,#2563b0,#3d8de0);color:#fff;font-weight:600;font-size:18px}
.cta:hover{background:linear-gradient(135deg,#2f7cd6,#4da3ff)}
.cta.ghost{background:transparent;border:2px solid var(--line);color:var(--dim);margin-left:14px}
.cta.ghost:hover{border-color:var(--accent);color:#fff}
.tvshot{margin:64px auto 0;max-width:860px;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 40px 100px rgba(0,0,0,.55);
  background:var(--panel2);padding:26px 30px;text-align:left}
.tvshot .row{display:flex;gap:14px;margin-bottom:14px}
.tile{flex:1;height:110px;border-radius:12px;position:relative;overflow:hidden;
  background:var(--panel);border:1px solid var(--line)}
.tile b{position:absolute;left:14px;bottom:10px;font-size:14px;color:#fff;font-weight:600}
.tile small{position:absolute;left:14px;bottom:-6px;opacity:0}
.t-movies{background:linear-gradient(135deg,#241435,#3b1f56)}
.t-series{background:linear-gradient(135deg,#0e2f33,#14494b)}
.t-foot{background:linear-gradient(135deg,#0c2917,#1c522e)}
.chiprow{display:flex;gap:10px}
.chip{flex:1;border-radius:9px;background:var(--panel);border:1px solid var(--line);
  padding:10px 14px;font-size:13px;color:var(--dim)}
.chip.on{border-color:var(--accent);color:#fff;background:rgba(77,163,255,.1)}
section{padding:70px 0 10px}
h2{font-family:'Barlow Condensed';font-weight:600;font-size:36px;color:#fff;
  margin-bottom:8px;letter-spacing:.5px}
h2::before{content:'';display:inline-block;width:26px;height:4px;border-radius:2px;
  background:var(--accent);margin-right:12px;vertical-align:6px}
.sub{color:var(--dim);margin-bottom:34px;max-width:64ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.card h3{font-family:'Barlow Condensed';font-weight:600;font-size:22px;color:#fff;margin-bottom:8px}
.card p{color:var(--dim);font-size:14.5px}
.price{max-width:460px;margin:0 auto;text-align:center;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:44px 40px}
.price .amount{font-family:'Barlow Condensed';font-weight:700;font-size:64px;color:#fff}
.price .amount small{font-size:22px;color:var(--faint);font-weight:500}
.price ul{list-style:none;margin:24px 0 30px;color:var(--dim);font-size:15px}
.price li{padding:6px 0}
.price li::before{content:'✓  ';color:var(--ok)}
.steps{counter-reset:s}
.step{display:flex;gap:18px;margin-bottom:18px;align-items:flex-start}
.step::before{counter-increment:s;content:counter(s);flex:0 0 40px;height:40px;
  border-radius:50%;background:rgba(77,163,255,.15);border:1px solid var(--accent);
  color:var(--accent);font-weight:600;display:flex;align-items:center;justify-content:center}
.step div{padding-top:7px;color:var(--dim);font-size:15px;max-width:62ch}
.step b{color:var(--text)}
details{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px 22px;margin-bottom:10px}
summary{cursor:pointer;color:var(--text);font-weight:500}
details p{color:var(--dim);font-size:14.5px;margin-top:10px;max-width:70ch}
footer{margin-top:90px;border-top:1px solid var(--line);padding:30px 0 50px;
  display:flex;justify-content:space-between;color:var(--faint);font-size:13.5px}
footer a{color:var(--faint);margin-left:18px}
footer a:hover{color:var(--dim)}
.disclaimer{margin-top:14px;font-size:12.5px;color:var(--faint);max-width:72ch}
/* buy page */
.buybox{max-width:640px;margin:60px auto;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:46px 50px;text-align:center}
.devlabel{font-size:13px;letter-spacing:3px;color:var(--faint);margin-top:30px}
#devcode{font-family:'Barlow Condensed';font-weight:700;font-size:44px;letter-spacing:3px;
  color:var(--accent);margin:6px 0 4px}
#devinput{width:100%;max-width:360px;padding:12px 16px;font-size:20px;text-align:center;
  background:var(--panel2);color:#fff;border:1px solid var(--line);border-radius:10px;margin-top:8px}
.doc{max-width:760px;margin:40px auto 80px}
.doc h1{font-family:'Barlow Condensed';font-size:42px;color:#fff;margin-bottom:20px}
.doc h3{color:#fff;margin:26px 0 8px;font-size:18px}
.doc p,.doc li{color:var(--dim);font-size:15px;max-width:72ch}
.doc ul{padding-left:22px}
@media(max-width:760px){.hero h1{font-size:44px}}

/* screenshots */
.tvshot.heroImg{padding:0;background:none}
.tvshot.heroImg img{display:block;width:100%}
.shotgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.shotgrid figure{margin:0}
.shotgrid img{display:block;width:100%;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.4)}
.shotgrid figcaption{margin-top:10px;font-size:13.5px;color:var(--faint)}
@media(max-width:760px){.shotgrid{grid-template-columns:1fr}}

/* keep intrinsic aspect ratio when CSS scales the width */
.shotgrid img,.tvshot.heroImg img{height:auto}