*{box-sizing:border-box}
:root{--red:#ef183b;--red2:#ff405c;--ink:#07080c}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#f5f5f7;font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
.top{height:76px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16;position:absolute;z-index:8;width:100%;background:linear-gradient(180deg,#050609aa,transparent);backdrop-filter:blur(8px)}
.brand{font-weight:800;letter-spacing:3px;color:white;text-decoration:none}.brand small{display:block;font-size:8px;color:#999;letter-spacing:3px}
.top nav{display:flex;gap:30px}.top nav a,.live{font-size:9px;letter-spacing:2px;color:#bbb;text-decoration:none}.top nav a:hover{color:var(--red2)}.live{color:#ff5368}
.hero{height:100svh;min-height:760px;position:relative;overflow:hidden;display:flex;align-items:center;padding:100px 6vw;background:radial-gradient(ellipse at 70% 57%,#67102055,transparent 40%),radial-gradient(ellipse at 85% 100%,#3d0a1c55,transparent 45%),linear-gradient(110deg,#07080c 0%,#0b0b10 55%,#13080e 100%)}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#07080cf0 0%,#07080ccf 27%,#07080c55 47%,transparent 70%),linear-gradient(0deg,#07080c 0%,transparent 24%,transparent 76%,#07080c66 100%)}
.hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.08;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px,transparent 5px);mask-image:linear-gradient(90deg,transparent,black 65%,transparent)}
.copy{position:relative;z-index:4;width:40%;max-width:520px;margin-top:15px;pointer-events:none;animation:copyIn .9s ease-out both}
.copy button{pointer-events:auto}
.eyebrow{font-size:9px;letter-spacing:3px;color:#b7b0b7}.eyebrow:before{content:"";display:inline-block;width:22px;height:1px;background:var(--red);margin:0 12px 3px 0}
.model-name{font-size:10px;letter-spacing:4px;color:#e6dfe2;margin:34px 0 0}.model-name span{color:#ff526b;margin-left:12px}
h1{font-size:clamp(55px,6.2vw,92px);line-height:.88;letter-spacing:-.075em;margin:18px 0 22px;font-weight:800}em{font-style:normal;color:#f52b49;text-shadow:0 0 32px #ed163c55}
.intro{color:#b7b2b8;font-size:12px;line-height:1.85;max-width:310px}
button{cursor:pointer;background:linear-gradient(110deg,#f01a3b,#a90927);color:white;border:1px solid #ff536b55;padding:15px 20px;font-size:9px;letter-spacing:2px;margin:18px 10px 0 0;box-shadow:0 8px 35px #e20d302b;transition:transform .25s,box-shadow .25s}
button:hover{transform:translateY(-3px);box-shadow:0 12px 38px #e20d3055}
.plain{background:#ffffff08;color:#eee;border-color:#ffffff30;box-shadow:none;backdrop-filter:blur(10px)}
.hint{font-size:8px;letter-spacing:2px;color:#aaa;margin-top:38px;display:flex;align-items:center;gap:10px}.hint span{width:6px;height:6px;border-radius:50%;background:#ff304d;box-shadow:0 0 12px #ff304d}.hint i{width:35px;height:1px;background:linear-gradient(90deg,#f22b49,transparent)}
#scene{position:absolute;inset:0;z-index:2;cursor:grab;touch-action:pan-y}
#scene:active{cursor:grabbing}#scene canvas{display:block;width:100%;height:100%}
#scene .model-status{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);color:#e7aab2;font-size:10px;letter-spacing:2px;z-index:2}
#scene.model-loaded .model-status{display:none}
section#experience,#specs{padding:110px 8vw;background:radial-gradient(ellipse at 80% 20%,#40101c33,transparent 35%),#0e0f14;position:relative}
h2{font-size:clamp(36px,5vw,65px);letter-spacing:-3px;margin:20px 0 45px}
.config{display:grid;grid-template-columns:1.6fr .8fr;min-height:460px;background:#15161c;border:1px solid #ffffff15;box-shadow:0 20px 80px #0005}
.config>div{min-height:460px;background:radial-gradient(ellipse,#74132666,transparent 60%);position:relative}
aside{padding:38px}aside p,aside label{font-size:9px;letter-spacing:2px;color:#aaa}aside h3{font-size:28px;margin:35px 0}aside label{display:block;margin-top:25px}
.swatches{display:flex;gap:15px;margin:18px 0}.swatches button{width:28px;height:28px;border-radius:50%;padding:0;border:2px solid #ffffff55;box-shadow:0 0 15px #0008}
aside>button{display:block;width:100%;background:#ffffff08;border:1px solid #ffffff35;color:#ddd;margin-top:15px;box-shadow:none}
aside small{display:block;color:#777;font-size:9px;line-height:1.6;margin-top:20px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid #ffffff25}
.cards article{padding:30px 20px 20px 0}.cards b{font-size:48px;color:#e31b35}.cards h3{font-size:15px}.cards p{font-size:11px;color:#999;line-height:1.8}
footer{padding:35px 8vw;border-top:1px solid #ffffff20;color:#888;font-size:9px;letter-spacing:2px;background:#07080c}
footer small{display:block;margin-top:12px;color:#777;letter-spacing:1px;line-height:1.8}footer a{color:#c6a0a6}
#configScene,.config>div{touch-action:pan-y}.model-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;color:#e7aab2;font-size:10px;letter-spacing:2px;text-align:center;white-space:nowrap;text-shadow:0 0 18px #e31b35}
.model-loaded .model-status{display:none}.model-error .model-status{white-space:normal;width:80%;color:#ff8a9a}
@keyframes copyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
.top{height:62px;padding:0 5vw}.top nav{display:none}.live{font-size:8px}
.hero{height:100svh;min-height:760px;display:block;padding:91px 6vw 20px}
.hero:before{background:linear-gradient(180deg,#07080cf5 0%,#07080cdd 24%,#07080c77 43%,transparent 66%),linear-gradient(0deg,#07080c 0%,transparent 25%)}
.copy{width:100%;max-width:370px;margin:0}.eyebrow{font-size:8px;letter-spacing:2px}.model-name{margin-top:22px;font-size:9px}
h1{font-size:clamp(44px,12.4vw,76px);margin:13px 0 13px;letter-spacing:-.07em}
.intro{font-size:11px;line-height:1.55;max-width:290px;margin:0}
button{padding:13px 15px;font-size:8px;margin-top:14px}.hint{margin-top:19px;font-size:7px;gap:8px}
#scene{inset:0;width:100%;height:100%}
#scene canvas{width:100%;height:100%}
#scene .model-status{top:65%}
section#experience,#specs{padding:75px 6vw}h2{font-size:38px}.config{grid-template-columns:1fr}.config>div{min-height:320px}aside{padding:28px}.cards{grid-template-columns:1fr}.cards article{border-bottom:1px solid #ffffff20}
}