/* Vassal Enterprises · battery landing. Dark showroom palette taken from the hero render; brand green #7AC143. */
:root{
  --bg:#0b100d; --bg2:#101712; --panel:#141c17; --line:#24302a; --ink:#eef3ec; --mute:#a5b2a8; --dim:#748279;
  --brand:#7AC143; --brand-hi:#9bd664; --brand-ink:#0b1508; --glow:rgba(122,193,67,.45);
  --f:'Avenir Next',Avenir,'Segoe UI',system-ui,-apple-system,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --pad:clamp(16px,4vw,56px); --max:1320px; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--brand);color:var(--brand-ink);padding:8px 12px;border-radius:6px;z-index:50}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--brand-hi);outline-offset:3px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--pad);
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.vlogo{height:28px;width:auto;color:var(--brand)}.vlogo.sm{height:18px}
.brand-sep{width:1px;height:22px;background:#3a473f}.brand-sub{font-size:17px;letter-spacing:.01em;color:#dfe7dd}
.nav nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,30px)}
.nav nav a{text-decoration:none;color:var(--mute);font-size:15px}.nav nav a:hover{color:var(--ink)}
.nav nav a.btn{color:var(--brand-ink)}
@media (max-width:640px){.nav nav a:not(.btn){display:none}.brand-sub{display:none}.brand-sep{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px var(--f);text-decoration:none;color:var(--brand-ink);background:var(--brand);border:1px solid var(--brand);
  padding:12px 22px;border-radius:999px;transition:background .2s,box-shadow .2s,transform .2s;box-shadow:0 0 0 0 var(--glow)}
.btn:hover{background:var(--brand-hi);box-shadow:0 0 28px -4px var(--glow);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--brand) 65%,transparent)}
.btn-ghost:hover{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--ink)}
.btn-sm{padding:8px 16px;font-size:14px}

.eyebrow{margin:0 0 14px;font:600 12px var(--f);letter-spacing:.32em;text-transform:uppercase;color:var(--brand)}
.lede{color:var(--mute);font-size:clamp(16px,1.35vw,19px);max-width:56ch;margin:0}
h1,h2,h3{font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance}

/* hero */
.hero{position:relative;padding-top:clamp(28px,5vw,64px);background:radial-gradient(90% 60% at 60% 45%,#13261a 0%,var(--bg) 70%)}
.hero-copy{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.hero h1{font-size:clamp(40px,6.4vw,92px);line-height:1.02;margin-bottom:20px}
.hero h1 span{display:block;color:var(--brand);text-shadow:0 0 40px rgba(122,193,67,.25)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.stage{position:relative;margin:clamp(-60px,-4vw,-20px) auto 0;max-width:1672px;padding:0}
.stage img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%)}
.stage figcaption{max-width:var(--max);margin:-18px auto 0;padding:0 var(--pad);font-size:12px;color:var(--dim);position:relative}
.spots{position:absolute;inset:0}
.spot{position:absolute;left:var(--x);top:var(--y);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #e9f6e2;cursor:pointer;
  background:radial-gradient(circle,var(--brand) 0 5px,rgba(11,16,13,.55) 6px);box-shadow:0 0 0 0 var(--glow),0 0 18px rgba(122,193,67,.5);padding:0}
.spot::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--brand);opacity:0;animation:ping 2.6s ease-out infinite}
.spot:nth-child(2)::after{animation-delay:.6s}.spot:nth-child(3)::after{animation-delay:1.2s}.spot:nth-child(4)::after{animation-delay:1.8s}
.spot[aria-expanded="true"]{background:radial-gradient(circle,#fff 0 5px,var(--brand) 6px);border-color:var(--brand)}
@keyframes ping{0%{transform:scale(.7);opacity:.9}80%,100%{transform:scale(1.6);opacity:0}}
.card{position:absolute;z-index:5;width:min(320px,80vw);padding:16px 18px;border-radius:14px;background:rgba(14,22,17,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);box-shadow:0 20px 50px -20px #000,0 0 30px -12px var(--glow)}
.card h3{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--brand);margin-bottom:8px;font-weight:600}
.card p{margin:0 0 10px;color:#d4ddd3;font-size:14.5px}.card b{color:var(--ink)}
.card a{color:var(--brand-hi);font-weight:600;font-size:14px;text-decoration:none}.card a:hover{text-decoration:underline}
@media (max-width:720px){.spot{width:26px;height:26px;margin:-13px 0 0 -13px}.card{position:fixed;left:16px!important;right:16px;top:auto!important;bottom:16px;width:auto}}

.stats{list-style:none;margin:0 auto;padding:22px var(--pad) clamp(40px,6vw,72px);max-width:var(--max);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.stats li{display:flex;gap:14px;align-items:flex-start;padding:4px 22px;border-left:1px solid var(--line)}.stats li:first-child{border-left:0;padding-left:0}
.stats svg{flex:none;width:30px;height:30px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.stats b{display:block;font-size:17px;font-weight:600;color:var(--brand-hi)}.stats span{display:block;font-size:14px;color:var(--mute)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}.stats li:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:480px){.stats{grid-template-columns:1fr}.stats li{border-left:0;padding-left:0}}

/* explorer */
.explore{max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,96px) var(--pad);display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;border-top:1px solid var(--line)}
.explore h2,.evidence h2,.start h2{font-size:clamp(30px,3.4vw,46px);line-height:1.08;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 18px}
.chips button{font:500 14px var(--f);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;transition:.2s}
.chips button:hover{border-color:color-mix(in srgb,var(--brand) 60%,transparent)}
.chips button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 0 22px -6px var(--glow)}
.info{min-height:150px;margin-bottom:22px;padding:16px 18px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.info h3{font-size:17px;margin-bottom:6px}.info p{margin:0 0 10px;color:var(--mute);font-size:15px}
.info dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:14px}.info dt{color:var(--dim)}.info dd{margin:0;font-family:var(--mono);font-size:13px;color:var(--ink)}
.viewer{position:relative;aspect-ratio:16/11;min-height:340px;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(80% 70% at 50% 40%,#16271c,#0a0f0c 75%);box-shadow:inset 0 0 80px #000}
.viewer canvas{display:block;width:100%!important;height:100%!important;touch-action:none;cursor:grab}.viewer canvas:active{cursor:grabbing}
.loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--mute);font-size:14px}
.loading span{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.vhint{position:absolute;left:16px;bottom:12px;font-size:12px;color:var(--dim);pointer-events:none}
.vlabel{position:absolute;right:16px;bottom:12px;font-size:12px;color:var(--dim);pointer-events:none}
@media (max-width:900px){.explore{grid-template-columns:minmax(0,1fr)}.viewer{order:-1;aspect-ratio:4/3;min-height:0;width:100%}}

/* evidence */
.evidence{max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,96px) var(--pad);border-top:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.cards article{padding:24px;border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line)}
.cards h3{font-size:20px;margin-bottom:10px}.cards p{color:var(--mute);margin:0 0 14px;font-size:15.5px}
.cards .proof{margin:0;padding-top:12px;border-top:1px solid var(--line);color:var(--brand-hi);font-size:14px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

.start{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,80px) var(--pad) clamp(56px,8vw,110px);border-top:1px solid var(--line)}
.starts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.starts a{display:block;text-decoration:none;padding:22px 24px;border-radius:16px;border:1px solid var(--line);background:var(--bg2);transition:.2s;position:relative}
.starts a::after{content:"→";position:absolute;right:22px;top:20px;color:var(--brand);font-size:20px;transition:transform .2s}
.starts a:hover{border-color:var(--brand);box-shadow:0 0 30px -14px var(--glow)}.starts a:hover::after{transform:translateX(4px)}
.starts b{display:block;font-size:19px;font-weight:600;margin-bottom:6px}.starts span{color:var(--mute);font-size:15px}
@media (max-width:900px){.starts{grid-template-columns:1fr}}

.foot{border-top:1px solid var(--line);padding:28px var(--pad) calc(28px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:auto 1fr auto;gap:12px 28px;align-items:center;font-size:13px;color:var(--dim)}
.foot div{display:flex;align-items:center;gap:10px;color:var(--mute)}.foot p{margin:0}
.foot nav{display:flex;gap:18px}.foot a{color:var(--mute);text-decoration:none}.foot a:hover{color:var(--ink)}
@media (max-width:900px){.foot{grid-template-columns:1fr}}