*{box-sizing:border-box}
:root{--bg:#08090d;--panel:#11131a;--line:#292d39;--text:#f5f6fb;--muted:#9399aa;--violet:#9078ff;--cyan:#52d7ff}
html{scroll-behavior:smooth}
body{margin:0;background:#08090d;color:var(--text);font-family:Arial,sans-serif}
a{color:inherit;text-decoration:none}
.layout{display:grid;grid-template-columns:245px 1fr;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;padding:34px 25px;border-right:1px solid var(--line);background:#0b0c11}
.logo{font-size:22px;font-weight:900;letter-spacing:-1px}
.logo small{display:block;margin-top:7px;color:var(--muted);font-size:10px;letter-spacing:3px}
.nav{display:grid;gap:9px;margin-top:70px}
.nav a{padding:13px 15px;border:1px solid transparent;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:1px}
.nav a:hover,.nav a.on{color:#fff;border-color:var(--line);background:#12141b}
.rail-note{position:absolute;bottom:30px;color:var(--muted);font-size:12px;line-height:1.7}
.stage{padding:40px 5vw 30px}
.hero{position:relative;min-height:580px;padding:70px;border:1px solid var(--line);overflow:hidden;background:linear-gradient(135deg,#11131a,#08090d)}
.hero:after{content:"";position:absolute;width:430px;height:430px;right:-100px;bottom:-150px;border:1px solid #50468a;border-radius:50%;box-shadow:0 0 100px #352b6866}
.kicker{color:var(--cyan);font-size:12px;letter-spacing:4px;text-transform:uppercase}
h1{position:relative;z-index:1;max-width:900px;margin:28px 0 22px;font-size:clamp(48px,7vw,96px);line-height:.92;letter-spacing:-5px}
.lead{position:relative;z-index:1;max-width:650px;color:var(--muted);font-size:18px;line-height:1.7}
.filmstrip{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:55px}
.frame{min-height:125px;padding:20px;border:1px solid var(--line);background:#0c0e14}
.frame strong{display:block;margin-bottom:25px;color:var(--violet);font-size:25px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1px;background:var(--line)}
.card{min-height:230px;padding:34px;background:#0b0c11}
.card span{color:var(--cyan);font-family:monospace}
.card h2{margin:35px 0 12px;font-size:25px}
.card p{color:var(--muted);line-height:1.7}
.footer{display:flex;justify-content:space-between;padding:35px 0;color:var(--muted);font-size:12px}
@media(max-width:850px){.layout{display:block}.rail{position:relative;width:100%;height:auto}.nav{display:flex;overflow:auto;margin-top:25px}.rail-note{display:none}.stage{padding:18px}.hero{padding:35px;min-height:auto}.filmstrip,.cards{grid-template-columns:1fr}h1{letter-spacing:-3px}}