/* Moonlight / point-cloud sculpture. Homepage only. */
.hero{
  --hero-ink:#05070c;--hero-white:#e7ebef;--hero-muted:#939da9;
  min-height:620px;height:min(900px,calc(100svh - 70px));padding:42px 0 86px;
  background:var(--hero-ink);color:var(--hero-white);isolation:isolate;
}
.hero::before{z-index:-4;background:radial-gradient(ellipse 52% 65% at 77% 45%,rgba(74,99,119,.12),transparent 78%)}
.hero::after{content:"";position:absolute;pointer-events:none;z-index:1;inset:0;background:linear-gradient(0deg,var(--hero-ink),transparent 16%);opacity:.6}
.hero-layout{display:block;position:relative;align-items:center;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0}
.hero-stage{position:absolute;inset:-5% -7% -4%;grid-column:auto;grid-row:auto;min-width:0;min-height:0;overflow:visible;z-index:2}
.hero-horizon{inset:0;background:radial-gradient(ellipse 42% 8% at 74% 79%,rgba(115,144,162,.08),transparent 78%)}
.hero-glow{left:48%;right:-8%;bottom:14%;height:3%;filter:blur(16px);background:radial-gradient(ellipse,rgba(111,145,166,.14),transparent 70%)}
#truckCanvas{inset:0;width:100%;height:100%;opacity:1;filter:none;transform:none;transition:opacity .6s}
.hero-truck-fallback{inset:0;width:100%;height:100%;object-fit:contain;opacity:0;filter:grayscale(1) brightness(.32) contrast(1.3);mask-image:radial-gradient(ellipse,#000 15%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse,#000 15%,transparent 70%)}
.hero[data-model-state="fallback"] .hero-truck-fallback{opacity:.75;animation:heroFallbackBreathe 5s ease-in-out infinite}
.hero[data-model-state="fallback"] #truckCanvas{opacity:0}
@keyframes heroFallbackBreathe{0%,100%{opacity:.62;transform:scale(.985)}50%{opacity:.82;transform:scale(1.015)}}
.hero-model-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:1}
.hero-copy{position:relative;z-index:3;display:flex;grid-column:auto;grid-row:auto;justify-content:center;align-items:flex-start;width:100%;min-width:0;max-width:1600px;margin:0 auto;padding-inline:clamp(26px,7vw,112px);flex:none}
.hero-signature{display:flex;align-items:center;gap:20px;margin-bottom:34px;animation:heroEnter .8s both}
.hero-logo{width:72px;height:72px;flex:0 0 72px;margin:0;border:1px solid rgba(199,215,227,.22);box-shadow:0 0 26px rgba(100,154,184,.1);animation:none}
.hero-kicker{margin:0;font-family:var(--font-body);font-size:.65rem;font-weight:500;line-height:1.7;letter-spacing:2px;color:var(--hero-muted);opacity:1}
.hero h1{max-width:100%;font-size:clamp(3.4rem,6.4vw,6rem);font-weight:600;line-height:1.03;letter-spacing:-4px;color:var(--hero-white);animation:heroEnter .9s .1s both}
.hero h1 .o{color:inherit}
.hero h1 .g{display:block;font-size:.38em;font-weight:400;letter-spacing:.3em;margin-top:16px;color:#c3a777}
.hero .tagline{max-width:400px;margin:30px 0 0;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.8;font-style:normal;color:var(--hero-muted);animation:heroEnter .9s .2s both}
.hero-cta{gap:12px;margin-top:32px;justify-content:flex-start;animation:heroEnter .9s .3s both}
.hero .btn{min-height:50px;padding:12px 22px;border-radius:5px;font-size:.83rem;font-weight:600}
.hero .btn-gold{background:#c6aa78;color:#101116;box-shadow:none;gap:32px;border-color:#c6aa78}
.hero .btn-gold:hover{background:#dfc499;border-color:#dfc499;box-shadow:none}
.hero .btn-gold span:last-child{transition:transform .25s}
.hero .btn-gold:hover span:last-child{transform:translate(2px,-2px)}
.hero .btn-ghost{background:rgba(255,255,255,.02);color:#d7dde3;border-color:rgba(208,218,227,.16)}
.hero .btn-ghost:hover{border-color:rgba(208,218,227,.5);background:rgba(255,255,255,.05)}
.hero-meta{gap:10px;margin-top:22px;font-family:var(--font-body);font-size:.67rem;color:#75818e;letter-spacing:.2px}
.hero-meta b{font-weight:500;color:#a9b2bc}.hero-meta-line{width:34px;height:1px;background:#49515c;display:block;margin-left:4px}
.hero-baseline{position:absolute;z-index:3;bottom:30px;left:0;right:0;max-width:1440px;padding-inline:clamp(26px,7vw,112px);display:flex;justify-content:space-between;align-items:center;gap:24px}
.hero-scroll{position:static;writing-mode:horizontal-tb;gap:14px;color:#a2adb9;font:500 .62rem var(--font-body);letter-spacing:1.4px}
.hero-scroll>span:first-child{width:26px;height:26px;display:grid;place-items:center;background:none;border:1px solid #39414c;border-radius:50%;font-size:.8rem;transition:transform .25s}
.hero-scroll>span:last-child{display:inline;width:auto;height:auto;background:none}
.hero-scroll:hover>span:first-child{transform:translateY(3px)}
.hero-model-credit{padding:0;border:0;color:#64707e;font:400 .6rem var(--font-body);letter-spacing:.3px}
.hero-model-credit a{color:#929dab;border:0}.hero-model-credit a:hover{color:#dce4ed}
#community{scroll-margin-top:90px}
@media(min-width:1025px) and (max-height:780px){
  .hero{min-height:570px;padding-top:24px;padding-bottom:76px}
  .hero-signature{margin-bottom:22px}.hero-logo{width:58px;height:58px;flex-basis:58px}
  .hero h1{font-size:clamp(3.4rem,6.1vw,5.5rem)}.hero h1 .g{margin-top:10px}
  .hero .tagline{margin-top:20px}.hero-cta{margin-top:24px}.hero-meta{margin-top:18px}
}
/* Separate rows before the visual can collide with the copy. Neither the
   truck nor the CTA relies on viewport-relative absolute offsets here. */
@media(max-width:1024px){
  .hero{height:auto;min-height:calc(100svh - 70px);max-height:none;padding:32px 0 72px;align-items:stretch}
  .hero-layout{display:block;position:relative;min-height:calc(100svh - 175px);padding-inline:0}
  .hero-stage{position:absolute;inset:-4% -10% -5%;min-height:0;width:auto;z-index:2}
  #truckCanvas,.hero-truck-fallback{transform:none}
  .hero::after{background:linear-gradient(0deg,var(--hero-ink),transparent 18%,transparent 57%,rgba(5,7,12,.5));opacity:.7}
  .hero-copy{align-items:flex-start;text-align:left;justify-content:flex-start;height:100%;padding:clamp(20px,15vh,200px) clamp(22px,5vw,48px) 0}
  .hero-signature{gap:14px;margin-bottom:22px}.hero-logo{width:50px;height:50px;flex-basis:50px}
  .hero-kicker{font-size:.53rem;letter-spacing:1.7px;line-height:1.6}
  .hero h1{font-size:clamp(3.2rem,7vw,4.8rem);letter-spacing:-2.5px;line-height:1.05}
  .hero h1 .g{display:inline;font-size:.36em;letter-spacing:.12em;margin:0 0 0 6px}
  .hero .tagline{margin-top:18px;font-size:.9rem;line-height:1.7;max-width:340px}
  .hero-glow{left:0;right:0;bottom:12%}.hero-horizon{background:radial-gradient(ellipse 60% 9% at 50% 78%,rgba(115,144,162,.08),transparent 78%)}
  .hero-cta{position:static;justify-content:flex-start;margin-top:22px;gap:10px}
  .hero .btn{font-size:.77rem;padding-inline:16px;min-height:46px}.hero .btn-gold{gap:20px}
  .hero-meta{margin-top:14px;justify-content:flex-start;font-size:.6rem}
  .hero-baseline{bottom:22px;padding-inline:clamp(22px,5vw,48px);gap:10px}
  .hero-scroll{font-size:.52rem;gap:8px;letter-spacing:.8px}.hero-scroll>span:first-child{width:23px;height:23px}
  .hero-model-credit{max-width:145px;text-align:right;font-size:.48rem;line-height:1.7}
}
@media(max-width:720px){
  .hero{padding-top:24px;padding-bottom:64px}
  .hero-layout{min-height:calc(100svh - 155px)}
  .hero-stage{inset:-4% -18% -4%}
  /* Small screens compress the same point energy into fewer physical pixels;
     lift only the canvas contrast so the geometry and particle count stay put. */
  #truckCanvas{filter:brightness(1.3) contrast(1.2) saturate(1.1)}
  .hero h1{font-size:clamp(2.5rem,9.2vw,3.6rem);letter-spacing:-2px}
  .hero .tagline{font-size:.85rem;margin-top:16px}
}
@media(prefers-reduced-motion:reduce){
  .hero-signature,.hero h1,.hero .tagline,.hero-cta,.hero[data-model-state="fallback"] .hero-truck-fallback{animation:none;transform:none;opacity:1}
}

/* The point sculpture keeps its contrast in light mode, but the hero surface
   must still belong to the same theme as the content that follows it. */
:root[data-theme="light"] .hero{
  --hero-ink:var(--bg);
  --hero-white:var(--text);
  --hero-muted:var(--muted);
  background:var(--bg);
}
:root[data-theme="light"] .hero::before{
  background:linear-gradient(90deg,rgba(243,245,251,.94) 0%,rgba(243,245,251,.72) 42%,rgba(243,245,251,.08) 77%,rgba(243,245,251,.32) 100%);
}
:root[data-theme="light"] .hero::after{
  background:linear-gradient(0deg,var(--hero-ink),transparent 16%);
}