body.landing{overflow-y:auto; background:
  radial-gradient(1200px 500px at 70% -10%, rgba(245,164,66,.25), transparent 60%),
  linear-gradient(180deg,#241521 0%,#31192a 45%,#1b0f18 100%);
  color:var(--paper)}
#top{position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:rgba(20,10,16,.85); backdrop-filter:blur(6px); border-bottom:1px solid rgba(245,164,66,.35)}
.mark{font-weight:800; letter-spacing:.18em; color:var(--amber)}
.cta{display:inline-block; text-decoration:none; font-weight:800; letter-spacing:.14em; color:#241521;
  background:linear-gradient(180deg,var(--amber),#e07b2a); border-radius:10px; padding:14px 30px;
  box-shadow:0 4px 0 #7a3c12, 0 10px 30px rgba(245,164,66,.35); transition:transform .12s}
.cta:active{transform:translateY(3px); box-shadow:0 1px 0 #7a3c12}
.cta.small{padding:8px 16px; font-size:13px}
.cta.big{font-size:20px; padding:18px 42px}
#hero{position:relative; min-height:62vh; display:flex; align-items:flex-end; border-bottom:1px solid rgba(245,164,66,.25)}
#hero-preview{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero-copy{position:relative; padding:min(8vw,60px); max-width:720px;
  background:linear-gradient(90deg,rgba(20,10,16,.88) 55%,transparent); }
.hero-copy h1{font-size:clamp(38px,7.5vw,72px); letter-spacing:.14em; color:var(--amber);
  text-shadow:0 0 30px rgba(245,164,66,.55); line-height:1.05}
.tagline{margin:12px 0 22px; font-size:clamp(15px,2.2vw,20px); color:var(--sand); max-width:34ch}
main{max-width:1100px; margin:0 auto; padding:0 20px 40px}
.block{padding:44px 0 8px; border-bottom:1px dashed rgba(245,164,66,.2)}
.block h2{font-size:clamp(22px,3.4vw,32px); letter-spacing:.1em; color:var(--teal-lt); margin-bottom:8px}
.block .sub{color:var(--sand); margin-bottom:14px}
#gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:18px}
#gallery figure{background:#160b12; border:1px solid rgba(245,164,66,.35); border-radius:12px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
#gallery img{width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover}
#gallery figcaption{padding:10px 12px; font-size:13px; letter-spacing:.08em; color:var(--sand)}
#features{list-style:none; margin-top:14px; display:grid; gap:12px}
#features li{padding:14px 16px 14px 44px; position:relative; background:rgba(255,244,224,.05);
  border:1px solid rgba(95,184,166,.25); border-radius:10px; line-height:1.5}
#features li::before{content:"✦"; position:absolute; left:16px; color:var(--amber)}
#features b{color:var(--teal-lt)}
.two{display:grid; grid-template-columns:2fr 1fr; gap:26px; align-items:start}
#controls{margin-top:12px; display:grid; gap:10px; line-height:1.55}
#controls b{color:var(--amber)}
#controls p:first-child{color:var(--teal-lt)}
.score-card{background:rgba(47,128,116,.12); border:1px solid rgba(95,184,166,.4); border-radius:12px; padding:18px}
.score-card h3{color:var(--teal-lt); letter-spacing:.1em; margin-bottom:10px}
.score-card p{margin:6px 0}
.score-card b{color:var(--amber)}
.center{text-align:center}
footer{padding:30px 20px 44px; text-align:center; color:#c8a06e; font-size:13px; max-width:760px; margin:0 auto}
@media (max-width:640px){
  .two{grid-template-columns:1fr}
  #hero{min-height:56vh}
  .hero-copy{background:rgba(20,10,16,.78)}
  .cta.big{font-size:16px; padding:14px 26px}
  .block{padding:30px 0 8px}
}