*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#10111a;color:#faf9ff;font:16px system-ui,Arial,sans-serif}
header,main,footer{width:92%;max-width:1600px;margin:auto}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 0}
header strong{font-size:24px;letter-spacing:.17em;color:#ccbcff}
header span,.eyebrow,.status{font-size:.75rem;letter-spacing:.12em;font-weight:750}
header span,footer,small{color:#b9b5c9}
.install{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 28px;background:#24203b;border:1px solid #50466f;border-radius:18px;margin-bottom:20px}
.status{display:inline-block;background:#393150;color:#ecddff;padding:6px 10px;border-radius:20px}
.status[data-state="ready"],.status[data-state="installed"]{background:#18483e;color:#beffeb}
h2{margin:8px 0}
p{line-height:1.5;margin:8px 0 0;color:#e0dcec}
button{border:0;border-radius:10px;padding:13px 18px;color:#160d28;background:#d3bfff;font:inherit;font-weight:750;cursor:pointer;transition:background .18s,transform .18s}
button:hover{background:#eee5ff}
button:focus{outline:3px solid #fff;outline-offset:4px}
.hero{min-height:370px;display:flex;align-items:end;padding:5%;border-radius:20px;background:#201735 linear-gradient(90deg,#110d23 0%,rgba(17,13,35,.83) 33%,transparent 100%);background-image:linear-gradient(90deg,#110d23 0%,rgba(17,13,35,.83) 33%,transparent 100%),url('./assets/0.svg');background-size:cover;background-position:center}
.hero h1{font-size:clamp(2.5rem,7vw,6rem);line-height:.98;margin:14px 0;max-width:9em}
.hero p{max-width:32em;margin-bottom:18px}
.eyebrow{color:#e2cfff}
.shelf{margin-top:26px}
.rail{display:flex;gap:14px;overflow-x:auto;padding:8px 7px 16px;scroll-snap-type:x proximity;scrollbar-color:#605680 #171522}
.tile{flex:0 0 clamp(175px,23vw,310px);padding:0;text-align:left;overflow:hidden;background:#242237;color:#faf9ff;scroll-snap-align:start}
.tile:hover,.tile:focus{background:#413658}
.tile img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tile span{display:block;padding:12px}
footer{padding:28px 0}
.overlay{position:fixed;inset:0;background:rgba(7,6,13,.96);z-index:2;overflow:auto;padding:4vh 5vw}
.panel{max-width:960px;margin:auto}
video{display:block;width:100%;max-height:69vh;background:#000;border-radius:12px}
@media(max-width:600px){.install{flex-direction:column;align-items:flex-start;padding:18px}.hero{min-height:340px;padding:22px}header span{text-align:right}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}