:root{
  --bg:#eef3f8; --panel:rgba(255,255,255,.72); --line:rgba(21,43,70,.11);
  --text:#102036; --muted:#5e6d82; --accent:#1389e6; --accent2:#7557e8;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:
  radial-gradient(circle at 12% 10%,rgba(19,137,230,.11),transparent 30%),
  radial-gradient(circle at 86% 20%,rgba(117,87,232,.10),transparent 28%),
  linear-gradient(180deg,#f6f9fc 0%,#e9f0f6 100%);
  color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
body:after{content:"";position:fixed;inset:0;pointer-events:none;
background:radial-gradient(circle at 50% 45%,transparent 0,rgba(255,255,255,.16) 62%,rgba(112,138,165,.12) 100%);
z-index:2}
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;filter:saturate(.98)}
.noise{position:fixed;inset:0;z-index:1;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at center,transparent 40%,rgba(0,0,0,.45) 100%)}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(244,248,252,.64));border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(39,67,96,.12)}
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));z-index:20;height:62px;border-radius:18px;display:flex;align-items:center;padding:0 18px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:#102036;text-decoration:none;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:18px;letter-spacing:-.3px;white-space:nowrap}.brand-mark{width:30px;height:30px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 24px rgba(101,216,255,.22)}
nav{display:flex;gap:8px;margin-left:auto}nav a{color:#50627a;text-decoration:none;font-size:13px;padding:9px 12px;border-radius:10px;transition:.25s}nav a:hover,nav a.active{color:#102036;background:rgba(19,137,230,.08)}
.nav-actions{display:flex;gap:5px}.nav-actions button,.mobile-toggle{background:transparent;border:0;color:#52657d;font-size:16px;cursor:pointer;padding:9px;border-radius:10px}.nav-actions button:hover,.mobile-toggle:hover{background:rgba(255,255,255,.06)}
.mobile-toggle{display:none;margin-left:auto}
.page{position:relative;min-height:100vh;z-index:4;display:flex;align-items:center;padding:120px max(7vw,24px) 80px;isolation:isolate}.hero{min-height:120vh}
.content{max-width:700px}.left{width:min(650px,55vw)}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin:0 0 18px}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;letter-spacing:-.045em;margin:0}h1{font-size:clamp(58px,8vw,120px);line-height:.88}h1 span,h2 span{background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(42px,6vw,84px);line-height:.9}h3{font-size:clamp(32px,4vw,58px)}
.lede,.section-copy>p:not(.eyebrow),.finale p{font-size:16px;line-height:1.75;color:var(--muted);max-width:610px}.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.btn{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--line);color:#fff;text-decoration:none;font-size:13px;font-weight:700;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;background:rgba(255,255,255,.03)}.btn:hover{transform:translateY(-2px);border-color:rgba(101,216,255,.5)}.primary{background:linear-gradient(135deg,#58d6ff,#876eff);border-color:transparent;box-shadow:0 12px 34px rgba(101,216,255,.16)}.ghost{background:rgba(9,14,27,.45)}.full{width:100%}
.stats{display:flex;gap:38px;margin-top:52px}.stats div{display:flex;flex-direction:column;gap:4px}.stats b{font-family:"Space Grotesk";font-size:21px}.stats span{font-size:11px;color:#63748a;text-transform:uppercase;letter-spacing:.12em}
.hero-hud{position:absolute;right:7vw;bottom:12%;width:220px;border-radius:18px;padding:16px}.hero-hud>div:first-child{display:flex;justify-content:space-between;font-size:10px;color:#52657b;letter-spacing:.12em}.hero-hud b{color:#fff}.hud-line{height:1px;background:linear-gradient(90deg,var(--accent),transparent);margin:15px 0}.hero-hud div:last-child{font-size:9px;color:#65758b;display:flex;justify-content:space-between;align-items:center}.hero-hud i{width:7px;height:7px;background:#73ffbb;border-radius:50%;box-shadow:0 0 14px #73ffbb}
.section-copy{margin-top:-20px;max-width:560px}.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:24px}.chip{border:1px solid var(--line);background:rgba(255,255,255,.55);color:#52657a;padding:9px 12px;border-radius:10px;font-size:11px;cursor:pointer}.chip.active{color:#12304d;border-color:rgba(101,216,255,.4);background:rgba(101,216,255,.07)}
.product-grid{position:absolute;left:50%;bottom:9%;transform:translateX(-3%);width:min(680px,53vw);display:grid;grid-template-columns:repeat(2,1fr);gap:12px;z-index:7}.product-card{position:relative;overflow:hidden;border-radius:18px;padding:14px;min-height:180px;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(242,247,251,.74));border:1px solid var(--line);transition:.28s;transform-style:preserve-3d}.product-card:hover{transform:perspective(900px) rotateX(2deg) rotateY(-4deg) translateY(-5px);border-color:rgba(101,216,255,.28);box-shadow:0 25px 70px rgba(0,0,0,.35)}.product-art{height:90px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(19,137,230,.10),transparent 60%),rgba(227,235,242,.68)}.product-art svg{width:100%;height:100%}.pcopy{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-top:10px}.pcopy h4{margin:0;font-size:12px}.pcopy p{margin:4px 0 0;color:#65758b;font-size:10px}.price{font-weight:800;font-size:13px;white-space:nowrap}.mini-actions{display:flex;gap:5px;margin-top:10px}.mini-actions button{font-size:10px;border:1px solid var(--line);color:#39506a;background:rgba(255,255,255,.55);padding:7px 8px;border-radius:8px;cursor:pointer}.mini-actions .add{background:rgba(19,137,230,.09);border-color:rgba(19,137,230,.22);color:#12304d}
.feature-note{position:absolute;right:7vw;top:20%;width:220px;padding:15px;border-radius:18px;display:flex;flex-direction:column;gap:7px}.feature-note b{font-size:10px;letter-spacing:.12em}.feature-note span{color:#8e99ae;font-size:10px;line-height:1.5}
.builder-panel{position:absolute;right:7vw;top:20%;width:min(350px,34vw);padding:18px;border-radius:20px;display:grid;gap:10px;z-index:7}.builder-panel label{font-size:10px;color:#98a4ba;text-transform:uppercase;letter-spacing:.1em}.builder-panel select{display:block;width:100%;margin-top:7px;background:#f4f8fb;color:#1f334b;border:1px solid var(--line);border-radius:10px;padding:10px 11px;outline:none}.price-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line);margin-top:3px}.price-row span{font-size:11px;color:#8390a6}.price-row b{font-size:18px;font-family:"Space Grotesk"}.assembly-status{position:absolute;left:7vw;bottom:10%;padding:12px 15px;border-radius:15px;display:flex;flex-direction:column;gap:4px;z-index:7}.assembly-status b{font-size:10px;letter-spacing:.12em}.assembly-status span{font-size:9px;color:#7f8ba4}
.finale{position:absolute;left:7vw;right:7vw;bottom:7%;border-radius:24px;padding:26px;display:flex;justify-content:space-between;align-items:center;gap:25px;z-index:7}.finale p{margin:.35em 0}.drawer{position:fixed;right:18px;top:92px;width:min(390px,calc(100% - 36px));max-height:calc(100vh - 110px);border-radius:20px;padding:18px;z-index:30;display:none;overflow:auto}.drawer.open{display:block}.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-head button,.modal-close{background:transparent;border:0;color:#bcc6d9;cursor:pointer}.cart-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.cart-row h4{margin:0;font-size:12px}.cart-row p{margin:4px 0;color:#7e8aa0;font-size:10px}.cart-controls{display:flex;align-items:center;gap:6px}.cart-controls button{width:25px;height:25px;border-radius:7px;border:1px solid var(--line);background:transparent;color:#fff}.drawer-total{display:flex;justify-content:space-between;margin:18px 0;font-size:13px}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);background:#0b1220;color:#fff;border:1px solid var(--line);padding:11px 15px;border-radius:12px;opacity:0;z-index:40;transition:.25s;font-size:12px}.toast.show{opacity:1;transform:translate(-50%,0)}
#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);background:#0b1220;color:#fff;border:1px solid var(--line);padding:11px 15px;border-radius:12px;opacity:0;z-index:40;transition:.25s;font-size:12px}#toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:50}.modal-backdrop.open{display:flex}.modal{width:min(560px,calc(100% - 30px));border-radius:20px;padding:22px}.modal-close{float:right}.modal h3{font-size:32px}.search-box{width:100%;background:#081021;color:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;margin-top:15px}
#loader{position:fixed;inset:0;background:#03060d;z-index:100;display:grid;place-items:center;align-content:center;gap:14px;color:#7f8ba4;font-size:10px;letter-spacing:.15em}.loader-ring{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.1);border-top-color:var(--accent);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:980px){
  nav{display:none}.mobile-toggle{display:block}.nav-actions{margin-left:0}.nav.open{height:auto;flex-wrap:wrap}.nav.open nav{display:flex;order:5;width:100%;overflow:auto}.page{padding-top:110px}.left{width:min(680px,72vw)}.product-grid{width:min(650px,64vw);transform:none;left:auto;right:6vw}.builder-panel{width:min(350px,42vw)}.feature-note{display:none}
}
@media(max-width:700px){
  .nav{top:10px;height:56px}.brand{font-size:16px}.nav-actions button{font-size:14px}.page{padding:100px 18px 60px;display:block}.hero{min-height:105vh}.left{width:100%;padding-top:8vh}h1{font-size:58px}.section-copy{padding-top:70px;max-width:100%}.product-grid{position:relative;left:0;right:auto;bottom:auto;transform:none;width:100%;margin-top:26px;grid-template-columns:1fr 1fr}.product-card{min-height:165px}.builder-panel{position:relative;right:auto;top:auto;width:100%;margin-top:24px}.assembly-status{left:18px;bottom:28px}.finale{left:18px;right:18px;bottom:24px;display:block}.finale .cta-row{margin-top:16px}.hero-hud{right:18px;bottom:80px;width:185px}.stats{gap:22px;flex-wrap:wrap}.lede{font-size:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.product-card,.btn{transition:none}}

/* Light-theme 3D presentation */
.scene-section::before{content:"";position:absolute;inset:12% 5% 9%;border-radius:34px;pointer-events:none;
  background:radial-gradient(circle at 48% 40%,rgba(255,255,255,.40),transparent 52%);
  border:1px solid rgba(41,82,120,.06);z-index:-1}
.product-card .product-art{box-shadow:inset 0 0 0 1px rgba(19,137,230,.05), inset 0 -18px 40px rgba(117,87,232,.04)}
.exploded-label{font-size:9px;letter-spacing:.14em;color:#55708c;text-transform:uppercase}