:root{--bg:#0b0e13;--panel:#121724;--line:#232c40;--txt:#e8ecf3;--mut:#9aa6bd;--acc:#ffb02e;--acc2:#3ddc84;--r:14px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.6 system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit}.top{position:sticky;top:0;z-index:5;display:flex;gap:16px;align-items:center;padding:12px 20px;background:rgba(11,14,19,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.brand{font-weight:800;text-decoration:none;font-size:20px}.brand span{color:var(--acc)}
.top nav{display:flex;gap:14px;margin-left:auto}.top nav a{color:var(--mut);text-decoration:none}.top nav a:hover{color:var(--txt)}
.btn{display:inline-block;border:1px solid var(--line);background:#1a2233;color:var(--txt);padding:12px 20px;border-radius:10px;text-decoration:none;cursor:pointer;font-weight:700}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#1a1200}.btn.ghost{background:transparent}.btn.sm{padding:8px 14px;font-size:14px}
main{max-width:1080px;margin:0 auto;padding:0 20px 40px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;padding:48px 0 20px;align-items:start}
.eyebrow{color:var(--acc2);font-weight:700}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc2);margin-right:8px}
h1{font-size:clamp(34px,5vw,56px);line-height:1.05;margin:.2em 0}.lede{color:var(--mut);font-size:18px}
.cta-row{display:flex;gap:12px;margin:18px 0}.name-row{display:flex;gap:10px;align-items:end}.name-row label{display:grid;gap:6px;color:var(--mut);font-size:14px}
input{background:#0e1320;border:1px solid var(--line);color:var(--txt);padding:10px 12px;border-radius:10px;min-width:220px}
.hint{color:var(--mut);font-size:13px}
.stage-screen{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#070a10;min-height:340px}
.stage-art{position:absolute;inset:0;background:
linear-gradient(180deg,rgba(7,10,16,.1),rgba(7,10,16,.85)),
repeating-linear-gradient(90deg,#1b2740 0 46px,#24314d 46px 92px),
repeating-linear-gradient(0deg,transparent 0 70px,rgba(0,0,0,.35) 70px 72px);}
.stage-art::after{content:"";position:absolute;inset:20% 8% 30% 8%;background:linear-gradient(90deg,#31405f,#1c2740);clip-path:polygon(0 30%,20% 0,80% 0,100% 30%,100% 100%,0 100%);opacity:.9}
.stage-overlay{position:absolute;inset:auto 12px 12px 12px;background:rgba(10,14,22,.92);border:1px solid var(--line);border-radius:12px;padding:14px}
.bar{height:8px;background:#0e1524;border-radius:99px;overflow:hidden;border:1px solid var(--line)}#barFill{height:100%;width:0%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.stage-status{color:var(--mut);font-size:14px}.stage-kicker{margin:0 0 8px;font-weight:700}
.caption{color:var(--mut);font-size:13px}
.section{padding:34px 0;border-top:1px solid var(--line);margin-top:26px}
.kicker{color:var(--acc);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin:0}
.section h2{margin:.2em 0 .6em;font-size:30px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid3 article,.plan,.rooms div,.controls div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.grid3 h3{margin:.2em 0}.grid3 p,.ticks li,.plan p{color:var(--mut)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.ticks{padding-left:18px}.steps{list-style:none;padding:0;display:grid;gap:10px}.steps li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--mut)}
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.controls b{display:block}.controls span{color:var(--mut);font-size:14px}
.plan{margin-top:14px}code{background:#0e1524;padding:2px 6px;border-radius:6px;border:1px solid var(--line)}
.rooms{display:grid;gap:10px;margin:14px 0}.room-actions{display:flex;gap:12px;align-items:center}
details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0}
summary{cursor:pointer;font-weight:700}details p{color:var(--mut)}
.cta-end{text-align:center;padding:44px 16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#141b2d,#0c111c);margin-top:30px}
.foot{color:var(--mut);text-align:center;padding:26px;font-size:13px}
@media(max-width:860px){.hero,.split{grid-template-columns:1fr}.grid3,.controls{grid-template-columns:1fr}.top nav{display:none}}