/* =====================================================================
   PHANTOM — shared monochrome design system
===================================================================== */
:root{
  --bg:#040404;
  --ink:#f4f4f4;
  --w-70:rgba(244,244,244,.7);
  --w-50:rgba(244,244,244,.5);
  --w-35:rgba(244,244,244,.35);
  --w-20:rgba(244,244,244,.2);
  --w-12:rgba(244,244,244,.12);
  --w-07:rgba(244,244,244,.07);
  --line:rgba(244,244,244,.1);
  --sans:'Space Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;cursor:none}
@media (hover:none),(pointer:coarse){body{cursor:auto}#cur-dot,#cur-ring{display:none!important}}
::selection{background:#fff;color:#000}
a{color:inherit}

/* ---- webgl canvas ---- */
#webgl{position:fixed;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity 1.4s ease .1s;touch-action:pan-y}
body.ready #webgl{opacity:1}
body.no-webgl #webgl{display:none}
body.grabbing{cursor:grabbing}
.scrim{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 120% at 50% 30%,transparent 42%,rgba(0,0,0,.55) 100%);mix-blend-mode:multiply}

/* ---- cursor ---- */
#cur-dot,#cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;will-change:transform}
#cur-dot{width:7px;height:7px;margin:-4px 0 0 -4px;background:#fff;mix-blend-mode:difference}
#cur-ring{width:42px;height:42px;margin:-21px 0 0 -21px;border:1px solid rgba(255,255,255,.5);mix-blend-mode:difference;transition:width .25s,height .25s,margin .25s,opacity .25s}
#cur-ring.active{width:70px;height:70px;margin:-35px 0 0 -35px;border-color:#fff}
#cur-ring.grab::after{content:'DRAG';position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:8px;letter-spacing:.15em;color:#fff}

/* ---- loader ---- */
#loader{position:fixed;inset:0;z-index:10000;background:#040404;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
#loader.done{opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s 1s}
.load-mark{font-family:var(--mono);font-size:13px;letter-spacing:.55em;color:var(--w-50);text-transform:uppercase;padding-left:.55em}
.load-bar{width:min(46vw,340px);height:1px;background:var(--w-12);position:relative;overflow:hidden}
.load-bar i{position:absolute;inset:0;width:0;background:#fff;display:block}
.load-num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--w-35)}

/* ---- status + nav ---- */
.statusline{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:center;height:30px;font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--w-35);border-bottom:1px solid var(--line);background:rgba(4,4,4,.6);backdrop-filter:blur(14px)}
.statusline .dot{width:5px;height:5px;border-radius:50%;background:#fff;margin-right:10px;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
nav{position:fixed;top:30px;left:0;right:0;z-index:95;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,4vw,52px);transition:padding .4s,background .4s,border-color .4s;border-bottom:1px solid transparent}
nav.scrolled{padding-top:14px;padding-bottom:14px;background:rgba(4,4,4,.72);backdrop-filter:blur(18px);border-color:var(--line)}
.nav-logo{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-family:var(--mono);font-weight:700;letter-spacing:.24em;font-size:16px}
.nav-logo img{width:24px;height:24px;object-fit:contain}
.nav-links{display:flex;gap:clamp(20px,2.4vw,38px);list-style:none}
.nav-links a{position:relative;text-decoration:none;color:var(--w-50);font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:color .25s}
.nav-links a.here{color:#fff}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;height:1px;width:0;background:#fff;transition:width .35s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after,.nav-links a.here::after{width:100%}
.nav-cta{text-decoration:none;color:#000;background:#fff;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:11px 22px;transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s}
.nav-cta:hover{transform:translateY(-2px);background:var(--w-70)}
@media(max-width:860px){.nav-links{display:none}}

/* ---- layout ---- */
main{position:relative;z-index:5}
.section{position:relative;min-height:100vh;padding:clamp(90px,14vh,180px) clamp(20px,5vw,80px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.section.short{min-height:auto}
.wrap{width:100%;max-width:1280px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--w-50);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--w-35)}
.display{font-weight:500;line-height:.92;letter-spacing:-.04em;font-size:clamp(44px,8.5vw,128px)}
.h2{font-weight:500;line-height:1.02;letter-spacing:-.03em;font-size:clamp(34px,5.4vw,76px)}
.h3b{font-weight:500;line-height:1.05;letter-spacing:-.02em;font-size:clamp(26px,3.4vw,44px)}
.lead{color:var(--w-50);line-height:1.7;font-size:clamp(15px,1.25vw,18px);max-width:56ch}
.mask{overflow:hidden;display:block}
.mask>span{display:block;will-change:transform}
.r{opacity:0;transform:translateY(34px);will-change:transform,opacity}

/* ---- buttons ---- */
.btn{text-decoration:none;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:16px 34px;display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s,color .3s,border-color .3s}
.btn-fill{background:#fff;color:#000}
.btn-fill:hover{transform:translateY(-3px)}
.btn-ghost{border:1px solid var(--w-20);color:#fff}
.btn-ghost:hover{border-color:#fff;background:var(--w-07);transform:translateY(-3px)}

/* ---- cards / grids ---- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
@media(max-width:1100px) and (min-width:901px){.grid-4{grid-template-columns:repeat(2,1fr)}}
.cell{background:rgba(8,8,8,.55);backdrop-filter:blur(6px);padding:clamp(26px,3vw,42px);position:relative;overflow:hidden;transition:background .4s}
.cell:hover{background:rgba(16,16,16,.7)}
.cell::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:#fff;transition:width .5s cubic-bezier(.16,1,.3,1)}
.cell:hover::after{width:100%}
.cell .idx{font-family:var(--mono);font-size:11px;color:var(--w-35);letter-spacing:.2em}
.cell .big{font-family:var(--mono);font-size:clamp(30px,4vw,50px);color:var(--w-12);margin-bottom:8px}
.cell h3{font-size:19px;font-weight:600;margin:16px 0 10px;letter-spacing:-.01em}
.cell p{color:var(--w-50);line-height:1.65;font-size:13.5px}
.cell .sub{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--w-35);margin-bottom:14px}

/* metric row */
.metrics{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
.metrics .m{background:rgba(8,8,8,.6);padding:22px 30px;flex:1 1 140px}
.metrics .m b{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em}
.metrics .m span{display:block;margin-top:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--w-50)}

/* watermark */
.watermark{position:absolute;left:0;right:0;width:100%;padding:0 clamp(20px,5vw,80px);box-sizing:border-box;font-family:var(--sans);font-weight:700;font-size:clamp(80px,20vw,300px);line-height:1;letter-spacing:-.04em;color:var(--w-07);text-transform:uppercase;white-space:nowrap;pointer-events:none;z-index:-1;will-change:transform;user-select:none}

/* ---- hotspots (interactive 3D markers) ---- */
.hotspot{position:absolute;top:0;left:0;z-index:6;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;will-change:transform}
.hotspot .pin{width:32px;height:32px;border-radius:50%;border:1px solid var(--w-35);display:grid;place-items:center;position:relative;transition:border-color .3s,background .3s}
.hotspot .pin::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff}
.hotspot .pin::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid #fff;opacity:.6;animation:ping 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.1);opacity:0}}
.hotspot:hover .pin,.hotspot.open .pin{border-color:#fff;background:rgba(255,255,255,.1)}
.hotspot .card{position:absolute;left:44px;top:50%;transform:translateY(-50%) translateX(8px);width:230px;background:rgba(8,8,8,.85);backdrop-filter:blur(14px);border:1px solid var(--line);padding:16px 18px;opacity:0;visibility:hidden;transition:opacity .35s,transform .35s;pointer-events:none}
.hotspot.open .card{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);pointer-events:auto}
.hotspot .card .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--w-35);margin-bottom:6px}
.hotspot .card h4{font-size:15px;font-weight:600;margin-bottom:7px}
.hotspot .card p{font-size:12px;line-height:1.55;color:var(--w-50)}
@media(max-width:760px){.hotspot{display:none}}

/* hint chip */
.hint{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:8;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--w-35);display:flex;align-items:center;gap:10px;pointer-events:none;opacity:0;transition:opacity .6s}
body.ready .hint{opacity:1}
.hint .b{border:1px solid var(--w-20);padding:3px 7px;color:var(--w-50)}

/* ---- marquee ---- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:20px 0;background:rgba(6,6,6,.5);position:relative;z-index:5}
.marquee .track{display:flex;white-space:nowrap;animation:scrollx 32s linear infinite;will-change:transform}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee .it{display:flex;align-items:center;gap:18px;padding:0 44px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--w-35)}
.marquee .it i{width:4px;height:4px;border-radius:50%;background:var(--w-35);display:block}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:40px clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;position:relative;z-index:5;background:rgba(4,4,4,.7);backdrop-filter:blur(14px);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--w-35)}
footer a{color:var(--w-50);text-decoration:none;transition:color .25s}
footer a:hover{color:#fff}

/* ---- config switcher (Tesla-style) ---- */
.switcher{display:inline-flex;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.switcher button{background:rgba(8,8,8,.6);color:var(--w-50);border:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:14px 22px;cursor:pointer;transition:background .3s,color .3s}
.switcher button.on,.switcher button:hover{background:#fff;color:#000}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}