/* HertzGo — Institucional */
:root{
  --bg-0:#06101C;
  --bg-1:#0A1422;
  --bg-2:#0E1B2D;
  --teal:#016070;
  --teal-2:#03A4BD;
  --teal-glow:#22E0F2;
  --lime:#B5F02A;
  --ink:#F0F6FF;
  --ink-dim:#A8BCD6;
  --ink-mute:#7B8FAA;
  --line:rgba(255,255,255,0.10);
  --line-2:rgba(255,255,255,0.14);
  --glass:rgba(14,27,45,0.55);
  --glass-2:rgba(20,38,62,0.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg-0);color:var(--ink);font-family:'Geist','Inter Tight',system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body{min-height:100vh;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{display:block;max-width:100%}

/* Typography */
.t-display{font-family:'Space Grotesk', sans-serif;font-weight:800;letter-spacing:-0.03em;line-height:0.92}
.t-title{font-family:'Space Grotesk', sans-serif;font-weight:700;letter-spacing:-0.02em;line-height:1}
.t-mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:0.02em}
.t-eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--teal-glow)}

/* Layout */
.wrap{max-width:1320px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
@media (max-width:720px){.wrap{padding:0 20px}}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(6,16,28,0.7);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo svg{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{font-size:13px;color:var(--ink-dim);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:10px}
@media (max-width:920px){.nav-links{display:none}.nav{padding:14px 20px}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:0.01em;transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--teal-2);color:#031419;box-shadow:0 0 0 1px rgba(34,224,242,0.35), 0 8px 30px -10px rgba(3,164,189,0.6)}
.btn-primary:hover{background:var(--teal-glow);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(34,224,242,0.6), 0 12px 40px -10px rgba(34,224,242,0.7)}
.btn-ghost{background:rgba(255,255,255,0.04);color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.25)}
.btn-lime{background:var(--lime);color:#0A1422}
.btn-lime:hover{background:#C8FF55;transform:translateY(-1px)}
.btn-sm{padding:10px 16px;font-size:12px}
.btn-wa{
  background:#25D366;color:#0A1422;border-color:#25D366;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;letter-spacing:-0.005em;
  box-shadow:0 0 0 0 rgba(37,211,102,0.45);
  animation:waPulse 2.4s ease-in-out infinite;
}
.btn-wa:hover{background:#20BF5B;border-color:#20BF5B;transform:translateY(-1px);color:#0A1422}
.btn-wa svg{flex-shrink:0}
.btn-wa .wa-num{font-family:'JetBrains Mono', monospace;font-size:11px;letter-spacing:0.02em}
@keyframes waPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0.5)}
  50%{box-shadow:0 0 0 10px rgba(37,211,102,0)}
}
@media (max-width:1100px){.btn-wa .wa-num{display:none}}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:140px 0 80px;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.hero-photo{
  position:absolute;inset:0;z-index:1;
  background-image:url('/assets/station-parkway.png');
  background-size:cover;background-position:center;
  opacity:0.85;
  filter:saturate(1.25) contrast(1.1) brightness(1.05);
  animation:heroBreath 9s ease-in-out infinite;
}
@keyframes heroBreath{
  0%,100%{transform:scale(1.04);filter:saturate(1.25) contrast(1.1) brightness(1)}
  50%{transform:scale(1.10);filter:saturate(1.4) contrast(1.15) brightness(1.12)}
}
.hero-bg::before{
  content:"";position:absolute;inset:0;z-index:3;
  background:
    radial-gradient(ellipse 1100px 700px at 50% 35%, rgba(3,164,189,0.28), transparent 60%),
    radial-gradient(ellipse 800px 500px at 85% 80%, rgba(181,240,42,0.10), transparent 60%),
    linear-gradient(180deg, rgba(6,16,28,0.45) 0%, rgba(6,16,28,0.30) 40%, rgba(6,16,28,0.78) 80%, var(--bg-0) 100%);
  pointer-events:none;
  animation:heroTint 12s ease-in-out infinite;
}
@keyframes heroTint{
  0%,100%{opacity:1}
  50%{opacity:0.85}
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(3,164,189,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3,164,189,0.07) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  z-index:1;pointer-events:none;
}

.hero-inner{position:relative;z-index:3;width:100%}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:999px;
  background:rgba(3,164,189,0.10);
  border:1px solid rgba(34,224,242,0.25);
  margin-bottom:28px;
}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal-glow);box-shadow:0 0 12px var(--teal-glow);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}

.hero h1{
  font-size:clamp(48px, 8vw, 116px);
  margin-bottom:28px;
  max-width:14ch;
}
.hero h1 .accent{color:var(--teal-glow);position:relative;display:inline-block}
.hero h1 .lime{color:var(--lime)}
.hero p.lead{font-size:clamp(16px,1.4vw,20px);color:var(--ink-dim);max-width:60ch;margin-bottom:40px;line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-meta{display:flex;align-items:center;gap:24px;margin-top:56px;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:10px;color:var(--ink-dim);font-size:12px}
.hero-meta .item .v{color:var(--ink);font-family:'JetBrains Mono', monospace;font-size:13px}
.hero-meta .sep{width:1px;height:14px;background:var(--line)}

.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;color:var(--ink-mute);font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:0.2em;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-scroll .line{width:1px;height:40px;background:linear-gradient(180deg,var(--teal-glow),transparent);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.01%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===== SECTIONS ===== */
section{position:relative;padding:140px 0}
@media (max-width:720px){section{padding:90px 0}}

.section-head{margin-bottom:64px;max-width:760px}
.section-head h2{font-size:clamp(36px,5.2vw,72px);margin:14px 0 18px}
.section-head p{font-size:17px;color:var(--ink-dim);line-height:1.55;max-width:60ch}

/* ===== STATS ===== */
.stats{position:relative;background:linear-gradient(180deg,var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-0) 100%);overflow:hidden}
.stats::before{
  content:"";position:absolute;inset:0;
  background-image:url('/assets/mapa-only.png');
  background-size:65% auto;background-position:right center;background-repeat:no-repeat;
  opacity:0.45;pointer-events:none;z-index:0;
  filter:saturate(1.4) contrast(1.1) drop-shadow(0 0 30px rgba(34,224,242,0.5));
  animation:mapPulse 5s ease-in-out infinite;
}
.stats::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 600px 400px at 80% 50%, rgba(3,164,189,0.25), transparent 60%),
    radial-gradient(ellipse 400px 300px at 20% 80%, rgba(181,240,42,0.08), transparent 60%);
  animation:bgGlow 8s ease-in-out infinite;
}
@keyframes mapPulse{
  0%,100%{opacity:0.40;filter:saturate(1.3) contrast(1.1) drop-shadow(0 0 20px rgba(34,224,242,0.35))}
  50%{opacity:0.62;filter:saturate(1.6) contrast(1.2) drop-shadow(0 0 50px rgba(34,224,242,0.7))}
}
@keyframes bgGlow{
  0%,100%{opacity:0.7}
  50%{opacity:1}
}
.stats .wrap{position:relative;z-index:3}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 32px;padding-top:24px}
@media (max-width:1000px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:48px 24px}}
@media (max-width:560px){.stats-grid{grid-template-columns:1fr;gap:40px}}
.stat{
  position:relative;
  padding:0 0 0 18px;
  border-left:1px solid rgba(34,224,242,0.25);
  transition:border-color .4s ease, transform .4s ease;
}
.stat:hover{border-left-color:var(--teal-glow);transform:translateX(2px)}
.stat .label{font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:0.22em;color:var(--teal-glow);text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.stat .label .num{color:var(--ink-mute)}
.stat .value{font-family:'Space Grotesk', sans-serif;font-weight:800;font-size:clamp(48px,5.5vw,84px);margin:0 0 10px;letter-spacing:-0.04em;line-height:0.95;color:var(--ink);text-shadow:0 0 40px rgba(34,224,242,0.15)}
.stat .value .unit{font-size:0.32em;color:var(--teal-glow);margin-left:6px;font-weight:500;letter-spacing:0;font-family:'JetBrains Mono', monospace;text-transform:uppercase}
.stat .desc{font-size:13px;color:var(--ink-dim);max-width:24ch}

/* ===== NETWORK / MAP ===== */
.network{position:relative;background:var(--bg-0);padding:140px 0 120px;overflow:hidden}
.network::before{
  content:"";position:absolute;inset:0;
  background-image:url('/assets/mapa-brasil.png');
  background-size:contain;background-position:right center;background-repeat:no-repeat;
  opacity:0.30;pointer-events:none;z-index:0;
  filter:saturate(1.5) drop-shadow(0 0 24px rgba(34,224,242,0.5));
  mask-image:linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
  animation:mapPulse 6s ease-in-out infinite;
}

/* Bare map — info floating over the brasil background, no side card */
.network-bare{padding:120px 0 100px}
.network-bare::before{
  /* In bare mode, make the brasil map larger and centered as the main visual */
  background-size:auto 92%;
  background-position:center center;
  opacity:0.55;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 50%, transparent 95%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 50%, transparent 95%);
}
.map-bare{
  position:relative;
  width:100%;
  aspect-ratio:1.4/1;
  min-height:560px;
  margin-top:48px;
}
@media (max-width:760px){.map-bare{aspect-ratio:1/1.05;min-height:520px}}
.map-bare-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.map-bare-coords{
  position:absolute;right:0;top:0;
  font-family:'JetBrains Mono', monospace;font-size:11px;letter-spacing:0.1em;color:var(--ink-mute);
  text-align:right;line-height:1.7;
  background:rgba(6,16,28,0.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:10px;padding:12px 16px;
}
.map-bare-coords .live{color:var(--teal-glow);margin-top:2px}

.map-bare-legend{
  position:absolute;left:0;bottom:0;
  display:flex;flex-direction:column;gap:8px;
  background:rgba(6,16,28,0.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:10px;padding:12px 16px;
  font-family:'JetBrains Mono', monospace;font-size:11px;letter-spacing:0.1em;color:var(--ink-dim);
}
.map-bare-legend .item{display:flex;align-items:center;gap:8px}
.map-bare-legend .swatch{width:10px;height:10px;border-radius:50%;box-shadow:0 0 12px currentColor}

.map-bare-stats{
  position:absolute;right:0;bottom:0;
  display:flex;flex-direction:column;gap:14px;
  background:rgba(6,16,28,0.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:12px;padding:18px 22px;
  min-width:200px;
}
.map-bare-stats .mbs-row{display:flex;align-items:baseline;gap:14px;justify-content:space-between}
.map-bare-stats .mbs-num{
  font-family:'Space Grotesk', sans-serif;font-weight:700;font-size:28px;letter-spacing:-0.02em;
  color:var(--ink);line-height:1;
}
.map-bare-stats .mbs-lbl{
  font-family:'JetBrains Mono', monospace;font-size:9.5px;letter-spacing:0.12em;
  color:var(--ink-dim);text-transform:uppercase;text-align:right;line-height:1.3;
}
@media (max-width:760px){
  .map-bare-coords,.map-bare-legend,.map-bare-stats{font-size:10px;padding:10px 12px}
  .map-bare-stats{min-width:0;gap:10px}
  .map-bare-stats .mbs-num{font-size:22px}
}
.map-wrap{
  position:relative;
  display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start;
}
@media (max-width:1000px){.map-wrap{grid-template-columns:1fr}}

.map-stage{
  position:relative;border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,#08131F 0%, #0B1B2C 100%);
  border:1px solid var(--line);
  aspect-ratio:1.05/1;
  min-height:540px;
}
.map-stage svg{position:absolute;inset:0;width:100%;height:100%}
.map-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 55%, rgba(3,164,189,0.18), transparent 70%);pointer-events:none}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(34,224,242,0.05) 1px, transparent 1px),linear-gradient(90deg,rgba(34,224,242,0.05) 1px, transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 50%, transparent 100%)}

.map-pin{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:var(--teal-glow);
  box-shadow:0 0 0 4px rgba(34,224,242,0.18), 0 0 20px var(--teal-glow);
  cursor:pointer;transition:transform .2s ease;
  transform:translate(-50%,-50%);
}
.map-pin::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(34,224,242,0.4);animation:ping 2.5s ease-out infinite}
.map-pin.hub{background:var(--lime);box-shadow:0 0 0 6px rgba(181,240,42,0.18), 0 0 30px var(--lime);width:18px;height:18px}
.map-pin.hub::before{border-color:rgba(181,240,42,0.5);animation-duration:2s}
.map-pin:hover, .map-pin.active{transform:translate(-50%,-50%) scale(1.25)}
.map-pin .map-label{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:0.1em;
  color:var(--ink);background:rgba(8,19,31,0.92);
  padding:6px 10px;border-radius:6px;
  border:1px solid rgba(34,224,242,0.25);
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .2s ease;
}
.map-pin:hover .map-label, .map-pin.active .map-label{opacity:1}
@keyframes ping{0%{transform:scale(1);opacity:0.8}100%{transform:scale(2.6);opacity:0}}

.map-legend{
  position:absolute;left:20px;bottom:20px;
  display:flex;gap:16px;
  background:rgba(6,16,28,0.7);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:0.1em;color:var(--ink-dim);
}
.map-legend .item{display:flex;align-items:center;gap:6px}
.map-legend .swatch{width:8px;height:8px;border-radius:50%}

.map-coords{
  position:absolute;right:20px;top:20px;
  font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:0.08em;color:var(--ink-mute);
  text-align:right;line-height:1.6;
}
.map-coords .live{color:var(--teal-glow)}

.station-list{display:flex;flex-direction:column;gap:12px}
.station{
  padding:18px 20px;border-radius:14px;
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  cursor:pointer;transition:all .2s ease;
  display:flex;align-items:center;gap:16px;
}
.station:hover, .station.active{border-color:rgba(34,224,242,0.4);background:rgba(20,38,62,0.7);transform:translateX(4px)}
.station.hub{border-color:rgba(181,240,42,0.3)}
.station.hub:hover, .station.hub.active{border-color:rgba(181,240,42,0.6)}
.station .num{font-family:'JetBrains Mono', monospace;font-size:11px;color:var(--teal-glow);min-width:28px}
.station.hub .num{color:var(--lime)}
.station .info{flex:1;min-width:0}
.station .name{font-family:'Space Grotesk', sans-serif;font-weight:600;font-size:15px;margin-bottom:3px;display:flex;align-items:center;gap:8px}
.station .badge-hub{font-family:'JetBrains Mono', monospace;font-size:9px;letter-spacing:0.15em;color:#0A1422;background:var(--lime);padding:2px 6px;border-radius:3px;text-transform:uppercase}
.station .meta{font-family:'JetBrains Mono', monospace;font-size:11px;color:var(--ink-dim)}
.station .arrow{color:var(--ink-mute);transition:transform .2s}
.station:hover .arrow{transform:translateX(4px);color:var(--teal-glow)}

/* ===== TECH SECTION ===== */
.tech{position:relative;background:linear-gradient(180deg,var(--bg-0),var(--bg-1) 50%,var(--bg-0));overflow:hidden}
.tech::before{
  content:"";position:absolute;inset:0;
  background-image:url('/assets/mapa-brasil.png');
  background-size:cover;background-position:center;
  opacity:0.32;pointer-events:none;z-index:0;
  filter:saturate(1.4) contrast(1.05);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 85%);
  animation:bgGlow 10s ease-in-out infinite;
}
.tech::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 800px 500px at 50% 50%, rgba(3,164,189,0.18), transparent 70%);
  animation:bgGlow 7s ease-in-out infinite reverse;
}
.tech .wrap{position:relative;z-index:2}
.tech-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center}
@media (max-width:1000px){.tech-grid{grid-template-columns:1fr;gap:48px}}

.tech-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:36px}
.spec{
  padding:22px;border-radius:14px;
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.spec .k{font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:0.18em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:10px}
.spec .v{font-family:'Space Grotesk', sans-serif;font-weight:700;font-size:28px;letter-spacing:-0.02em}
.spec .v .u{font-size:0.5em;color:var(--ink-dim);margin-left:4px}
.spec .sub{font-size:12px;color:var(--ink-dim);margin-top:6px;font-family:'JetBrains Mono', monospace}

/* Charger visual */
.charger-vis{
  position:relative;border-radius:24px;overflow:hidden;
  background:radial-gradient(ellipse 80% 80% at 50% 30%, #0B2030 0%, #050B14 80%);
  border:1px solid var(--line);
  aspect-ratio:0.85/1;
  display:flex;align-items:center;justify-content:center;
  padding:40px;
}
.charger-vis::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(34,224,242,0.06) 1px, transparent 1px),linear-gradient(90deg,rgba(34,224,242,0.06) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
}
.charger{position:relative;width:200px;height:380px;z-index:2}
.charger-body{position:absolute;inset:0;border-radius:18px;background:linear-gradient(180deg,#1a2d44 0%, #0d1a2c 100%);border:1px solid rgba(34,224,242,0.2);box-shadow:0 0 60px rgba(3,164,189,0.3), inset 0 0 0 1px rgba(255,255,255,0.04)}
.charger-screen{position:absolute;left:18px;right:18px;top:24px;bottom:120px;border-radius:10px;background:linear-gradient(180deg,#020a12,#000);border:1px solid rgba(34,224,242,0.3);padding:18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.charger-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,224,242,0.06),transparent 30%);pointer-events:none}
.cs-top{font-family:'JetBrains Mono', monospace;font-size:9px;letter-spacing:0.2em;color:var(--teal-glow);text-transform:uppercase;display:flex;justify-content:space-between}
.cs-mid{display:flex;align-items:center;justify-content:center;flex:1}
.cs-bolt{width:48px;height:48px;color:var(--teal-glow);filter:drop-shadow(0 0 12px var(--teal-glow));animation:boltPulse 1.5s ease-in-out infinite}
@keyframes boltPulse{0%,100%{filter:drop-shadow(0 0 8px var(--teal-glow));transform:scale(1)}50%{filter:drop-shadow(0 0 20px var(--teal-glow));transform:scale(1.05)}}
.cs-bottom{font-family:'JetBrains Mono', monospace}
.cs-power{font-family:'Space Grotesk', sans-serif;font-weight:800;font-size:34px;color:#fff;letter-spacing:-0.02em;line-height:1}
.cs-power .u{font-size:0.4em;color:var(--teal-glow)}
.cs-bar{margin-top:8px;height:4px;border-radius:2px;background:rgba(34,224,242,0.15);overflow:hidden}
.cs-bar div{height:100%;width:72%;background:linear-gradient(90deg,var(--teal-2),var(--teal-glow));box-shadow:0 0 12px var(--teal-glow);animation:fillBar 3s ease-in-out infinite}
@keyframes fillBar{0%{width:20%}50%{width:88%}100%{width:20%}}
.cs-status{font-size:8px;letter-spacing:0.15em;color:var(--ink-dim);margin-top:6px;text-transform:uppercase}

.charger-base{position:absolute;left:18px;right:18px;bottom:24px;height:84px;border-radius:8px;background:linear-gradient(180deg,#0a1422,#050b13);display:flex;align-items:center;justify-content:center;gap:14px;border:1px solid rgba(255,255,255,0.04)}
.charger-plug{width:14px;height:34px;border-radius:4px;background:linear-gradient(180deg,#1a2d44,#0a1422);border:1px solid rgba(34,224,242,0.25)}
.charger-cable{position:absolute;width:6px;background:linear-gradient(180deg,var(--teal),#0a1422);border-radius:3px}
.charger-cable.l{left:-30px;top:60%;height:200px;transform:rotate(15deg);transform-origin:top}
.charger-cable.r{right:-30px;top:60%;height:200px;transform:rotate(-15deg);transform-origin:top}

.charger-floor{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80%;height:30px;background:radial-gradient(ellipse at center, rgba(34,224,242,0.4) 0%, transparent 70%);filter:blur(8px)}

.plug-list{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px}
.plug-tag{font-family:'JetBrains Mono', monospace;font-size:11px;letter-spacing:0.1em;padding:8px 14px;border-radius:999px;background:rgba(3,164,189,0.08);border:1px solid rgba(3,164,189,0.25);color:var(--teal-glow)}

.compat{margin-top:36px}
.compat .label{font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:0.2em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:14px}
.compat-list{display:flex;flex-wrap:wrap;gap:10px}
.compat-tag{padding:10px 18px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid var(--line);font-size:13px;font-weight:500;letter-spacing:0.02em;transition:all .2s}
.compat-tag:hover{border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.06)}

/* ===== DIFFERENTIALS ===== */
.diffs{position:relative;background:var(--bg-0);overflow:hidden}
.diffs::before{
  content:"";position:absolute;inset:0;
  background-image:url('/assets/station-parkway.png');
  background-size:cover;background-position:center;
  opacity:0.32;pointer-events:none;z-index:0;
  filter:saturate(1.3) contrast(1.05) brightness(0.95);
  mask-image:linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.diffs::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 700px 500px at 30% 40%, rgba(3,164,189,0.20), transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 70%, rgba(181,240,42,0.10), transparent 60%);
  animation:bgGlow 9s ease-in-out infinite;
}
.diffs .wrap{position:relative;z-index:2}
.diffs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1100px){.diffs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.diffs-grid{grid-template-columns:1fr}}
.diff{
  position:relative;padding:32px 28px 32px 0;
  min-height:240px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .4s ease;
  border-top:1px solid rgba(34,224,242,0.18);
  padding-top:32px;
}
.diff:hover{transform:translateY(-4px)}
.diff:hover .diff-icon{background:rgba(3,164,189,0.22);border-color:var(--teal-glow);box-shadow:0 0 24px rgba(34,224,242,0.4)}
.diff.lime:hover .diff-icon{background:rgba(181,240,42,0.22);border-color:var(--lime);box-shadow:0 0 24px rgba(181,240,42,0.5)}
.diff-icon{width:46px;height:46px;border-radius:12px;background:rgba(3,164,189,0.10);border:1px solid rgba(3,164,189,0.35);display:flex;align-items:center;justify-content:center;color:var(--teal-glow);margin-bottom:24px;transition:all .3s ease}
.diff.lime .diff-icon{background:rgba(181,240,42,0.10);border-color:rgba(181,240,42,0.4);color:var(--lime)}
.diff h3{font-family:'Space Grotesk', sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.01em;margin-bottom:10px}
.diff p{font-size:13.5px;color:var(--ink-dim);line-height:1.55}
.diff .badge{margin-top:18px;font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:0.18em;color:var(--teal-glow);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.diff.lime .badge{color:var(--lime)}

/* ===== CTA STRIP ===== */
.cta-strip{
  position:relative;margin:0 auto;
  border-radius:32px;overflow:hidden;
  background:linear-gradient(135deg, #052028 0%, #0A1422 100%);
  border:1px solid rgba(34,224,242,0.2);
  padding:80px 64px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
}
.cta-strip::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 600px 400px at 90% 100%, rgba(3,164,189,0.25), transparent 70%),radial-gradient(ellipse 400px 300px at 10% 0%, rgba(181,240,42,0.08), transparent 70%);
  pointer-events:none;
}
.cta-strip > *{position:relative;z-index:2}
.cta-strip h2{font-family:'Space Grotesk', sans-serif;font-weight:800;font-size:clamp(32px,4vw,56px);letter-spacing:-0.02em;line-height:1;margin-bottom:18px}
.cta-strip p{color:var(--ink-dim);font-size:16px;line-height:1.55;max-width:46ch}
.cta-strip .actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media (max-width:900px){.cta-strip{grid-template-columns:1fr;padding:48px 32px}.cta-strip .actions{align-items:stretch}}

/* ===== FOOTER ===== */
footer{padding:96px 0 32px;border-top:1px solid var(--line);background:var(--bg-0);position:relative}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:64px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
.footer-brand .nav-logo{margin-bottom:20px}
.footer-brand p{font-size:14px;color:var(--ink-dim);max-width:36ch;line-height:1.6}
.footer-col h4{font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:0.2em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:18px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col li a{font-size:14px;color:var(--ink-dim);transition:color .2s}
.footer-col li a:hover{color:var(--teal-glow)}
.footer-bottom{padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-family:'JetBrains Mono', monospace;font-size:11px;color:var(--ink-mute);letter-spacing:0.05em}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-dim);transition:all .2s}
.socials a:hover{color:var(--teal-glow);border-color:rgba(34,224,242,0.4);background:rgba(3,164,189,0.08)}

/* ===== Reveal animations ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Floating orb decoration */
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.orb-1{width:500px;height:500px;background:rgba(3,164,189,0.18);top:20%;left:-200px}
.orb-2{width:400px;height:400px;background:rgba(181,240,42,0.05);bottom:10%;right:-150px}

/* Section label */
.s-label{display:flex;align-items:center;gap:14px;font-family:'JetBrains Mono', monospace;font-size:11px;letter-spacing:0.22em;color:var(--teal-glow);text-transform:uppercase;margin-bottom:20px}
.s-label::before{content:"";width:32px;height:1px;background:var(--teal-2)}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:rgba(3,164,189,0.3);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:rgba(3,164,189,0.5)}

::selection{background:var(--teal-glow);color:#031419}

/* Mobile responsive tightening */
@media (max-width:720px){
  .hero{padding:120px 0 60px;min-height:90vh}
  .hero-meta{gap:14px;margin-top:36px}
  .hero-meta .sep{display:none}
  .nav-cta .btn-ghost{display:none}
  .map-stage{min-height:380px;aspect-ratio:1/1}
  .section-head{margin-bottom:40px}
  .map-coords{font-size:9px}
  .cta-strip{padding:40px 24px;border-radius:24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;font-size:10px}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .map-pin{width:12px;height:12px}
  .map-pin.hub{width:14px;height:14px}
  .hero h1{font-size:clamp(40px,11vw,72px)}
}


/* ===== BLINKING / PULSE EFFECTS ===== */
@keyframes blink-soft {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px currentColor); }
  50% { opacity: 0.55; filter: drop-shadow(0 0 16px currentColor); }
}
.blink { animation: blink-soft 2.4s ease-in-out infinite; }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181,240,42,0.7); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(181,240,42,0); transform: scale(1.15); }
}
.dot {
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background: var(--lime); margin-right:6px;
  animation: pulse-dot 1.8s ease-out infinite;
  vertical-align: middle;
}
.dot.teal { background: var(--teal-glow); animation-name: pulse-dot-teal; }
@keyframes pulse-dot-teal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,224,242,0.7); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(34,224,242,0); transform: scale(1.15); }
}

/* Add blink to existing tech specs values for ambient life */
.tech-specs .spec .v { transition: text-shadow .3s; }
.tech-specs .spec:nth-child(1) .v { animation: blink-soft 3.5s ease-in-out infinite; color: var(--teal-glow); }

/* ===== CHARGER LINEUP ===== */
.charger-lineup {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .charger-lineup { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .charger-lineup { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 380px)  { .charger-lineup { grid-template-columns: 1fr; } }

.charger-card {
  position: relative;
  padding: 22px 16px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10,30,48,0.7), rgba(5,15,28,0.85));
  border: 1px solid rgba(34,224,242,0.12);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.charger-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34,224,242,0.45);
  box-shadow: 0 16px 40px -12px rgba(34,224,242,0.4);
}
.charger-card.teal { border-color: rgba(34,224,242,0.25); }
.charger-card.teal-glow {
  border-color: rgba(34,224,242,0.55);
  box-shadow: 0 0 32px -10px rgba(34,224,242,0.6), inset 0 0 30px rgba(34,224,242,0.06);
  animation: card-glow-teal 3.5s ease-in-out infinite;
}
.charger-card.lime {
  border-color: rgba(181,240,42,0.5);
  background: linear-gradient(180deg, rgba(40,55,8,0.6), rgba(10,20,5,0.85));
  box-shadow: 0 0 36px -10px rgba(181,240,42,0.55), inset 0 0 30px rgba(181,240,42,0.06);
  animation: card-glow-lime 3s ease-in-out infinite;
}
@keyframes card-glow-teal {
  0%, 100% { box-shadow: 0 0 32px -10px rgba(34,224,242,0.5), inset 0 0 30px rgba(34,224,242,0.06); }
  50% { box-shadow: 0 0 48px -8px rgba(34,224,242,0.85), inset 0 0 40px rgba(34,224,242,0.12); }
}
@keyframes card-glow-lime {
  0%, 100% { box-shadow: 0 0 36px -10px rgba(181,240,42,0.5), inset 0 0 30px rgba(181,240,42,0.06); }
  50% { box-shadow: 0 0 56px -6px rgba(181,240,42,0.85), inset 0 0 40px rgba(181,240,42,0.14); }
}

.cc-flag {
  position: absolute; top: 10px; right: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.18em;
  color: #050B14; background: var(--lime);
  padding: 3px 7px; border-radius: 4px; font-weight: 700;
  min-height: 16px;
}
.cc-flag:empty { display: none; }
.cc-type {
  font-size: 10px; letter-spacing: 0.22em; color: var(--ink-dim);
  text-transform: uppercase;
}
.charger-card.teal .cc-type, .charger-card.teal-glow .cc-type { color: var(--teal-glow); }
.charger-card.lime .cc-type { color: var(--lime); }
.cc-kw { display: flex; align-items: baseline; gap: 4px; }
.cc-num {
  font-family: 'Space Grotesk', sans-serif; font-weight: 800;
  font-size: clamp(34px, 4vw, 52px); line-height: 0.95;
  color: var(--ink);
}
.charger-card.teal-glow .cc-num { color: var(--teal-glow); text-shadow: 0 0 24px rgba(34,224,242,0.45); }
.charger-card.lime .cc-num { color: var(--lime); text-shadow: 0 0 24px rgba(181,240,42,0.45); }
.cc-unit { font-size: 14px; color: var(--ink-dim); font-weight: 600; }
.cc-time {
  font-size: 11px; letter-spacing: 0.1em; color: var(--ink);
  text-transform: uppercase;
}
.cc-desc { font-size: 12px; color: var(--ink-dim); margin-top: -4px; }
.cc-bar {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.06); overflow: hidden;
  margin-top: 4px;
}
.cc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-glow));
}
.charger-card.lime .cc-bar-fill { background: linear-gradient(90deg, var(--teal-glow), var(--lime)); }
.charger-card.ink-dim .cc-bar-fill { background: linear-gradient(90deg, #4a6273, #6c8a9c); }

/* Tech photo */
.tech-photo .photo-frame {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(34,224,242,0.2);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 60px -20px rgba(34,224,242,0.4);
}
.tech-photo .photo-frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1);
}
.tech-photo .photo-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5,11,20,0.85));
  pointer-events: none;
}
.photo-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(5,11,20,0.7); backdrop-filter: blur(12px);
  border: 1px solid rgba(34,224,242,0.3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; color: var(--ink);
}

/* ===== GALLERY MARQUEE ===== */
.gallery {
  position: relative;
  padding: 100px 0 80px;
  background: linear-gradient(180deg, var(--bg-0), var(--bg-1) 30%, var(--bg-0));
  overflow: hidden;
}
.gallery-marquee {
  margin-top: 56px;
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gallery-track {
  display: flex; gap: 22px;
  animation: marquee 60s linear infinite;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.g-card {
  width: 320px; flex-shrink: 0;
  border-radius: 16px; overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(135deg, #0a1422 0%, #08131F 100%);
  margin: 0;
  isolation: isolate;
}
.g-card::before{
  /* Solid placeholder behind every image — prevents parallax bleed-through if image fails to load on Vercel */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(34,224,242,0.12), transparent 70%),
    linear-gradient(135deg, #0B1A2E 0%, #050B14 100%);
}
.g-card img {
  position: relative; z-index: 1;
  width: 100%; height: 220px; object-fit: cover;
  display: block;
  background: #0a1422;
  transition: transform .6s ease;
}
.g-card:hover img { transform: scale(1.06); }
.g-card figcaption {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--ink); text-transform: uppercase;
  background: linear-gradient(180deg, transparent, rgba(5,11,20,0.95));
  position: absolute; bottom: 0; left: 0; right: 0;
}

/* ===== VISION SECTION ===== */
.vision {
  position: relative;
  padding: 120px 0 100px;
  background:
    radial-gradient(ellipse 1200px 700px at 80% 20%, rgba(34,224,242,0.10), transparent 60%),
    radial-gradient(ellipse 900px 600px at 10% 90%, rgba(181,240,42,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-0), #06121E 50%, var(--bg-0));
  overflow: hidden;
}
.vision::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(34,224,242,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,224,242,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 80%);
}
.vision-bg-orb {
  position: absolute; right: -200px; top: 30%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,224,242,0.18), transparent 70%);
  filter: blur(80px);
  animation: orb-pulse 6s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
.vision .wrap { position: relative; z-index: 2; }

.vision-stage {
  margin-top: 56px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10,25,42,0.7), rgba(5,12,22,0.9));
  border: 1px solid rgba(34,224,242,0.15);
  backdrop-filter: blur(12px);
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7), 0 0 80px -30px rgba(34,224,242,0.4);
}
.vision-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid rgba(34,224,242,0.12);
  background: rgba(5,11,20,0.4);
  overflow-x: auto;
}
.v-tab {
  flex: 1; min-width: 200px;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--ink-dim);
  border-right: 1px solid rgba(34,224,242,0.08);
  transition: background .3s, color .3s;
  position: relative;
}
.v-tab:last-child { border-right: 0; }
.v-tab:hover { background: rgba(34,224,242,0.04); color: var(--ink); }
.v-tab.active {
  background: linear-gradient(180deg, rgba(34,224,242,0.08), transparent);
  color: var(--ink);
}
.v-tab.active::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-glow));
  box-shadow: 0 0 12px var(--teal-glow);
}
.v-tab-num {
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--teal-glow); opacity: 0.7;
}
.v-tab-title { font-size: 14px; font-weight: 600; }

.vision-screen { padding: 24px; }
.v-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #050B14; border-radius: 10px 10px 0 0;
  border: 1px solid rgba(34,224,242,0.1); border-bottom: 0;
}
.v-dot { width: 10px; height: 10px; border-radius: 50%; }
.v-dot.r { background: #ff5f57; }
.v-dot.y { background: #febc2e; }
.v-dot.g { background: #28c840; }
.v-url {
  flex: 1; text-align: center;
  font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.06em;
}
.v-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--lime);
}
.v-image {
  border: 1px solid rgba(34,224,242,0.15); border-top: 0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #050B14 0%, #08131F 100%);
  position: relative;
  isolation: isolate;
}
.v-image::before{
  /* Opaque base under vision screenshot — prevents parallax bleed-through */
  content:""; position:absolute; inset:0; z-index:0;
  background: #050B14;
}
.v-image img {
  position: relative; z-index: 1;
  background: #050B14;
  width: 100%; display: block;
  animation: fade-in 0.5s ease;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.vision-features {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 900px) { .vision-features { grid-template-columns: repeat(2, 1fr); } }
.v-feat {
  padding: 22px 20px; border-radius: 14px;
  background: rgba(10,25,42,0.4); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .3s, border-color .3s;
}
.v-feat:hover { transform: translateY(-3px); border-color: rgba(34,224,242,0.3); }
.v-feat-icon { font-size: 24px; margin-bottom: 12px; }
.v-feat-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; font-size: 15px; }
.v-feat-desc { font-size: 13px; color: var(--ink-dim); line-height: 1.5; }

.vision-cta {
  margin-top: 56px;
  padding: 32px 36px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(1,96,112,0.4), rgba(34,224,242,0.1));
  border: 1px solid rgba(34,224,242,0.3);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
}

/* ===== COURSE SECTION ===== */
.course {
  position: relative;
  padding: 120px 0 100px;
  background:
    radial-gradient(ellipse 1000px 600px at 20% 30%, rgba(181,240,42,0.07), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 50%, var(--bg-0));
  overflow: hidden;
}
.course::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 80px, rgba(181,240,42,0.025) 80px, rgba(181,240,42,0.025) 81px);
}
.course .wrap { position: relative; z-index: 2; }
.course-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px;
  align-items: start;
}
@media (max-width: 1000px) { .course-grid { grid-template-columns: 1fr; gap: 56px; } }

.course-modules {
  display: grid; gap: 12px;
}
.course-module {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  padding: 18px 20px; border-radius: 14px;
  background: rgba(10,25,42,0.4);
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color .3s, background .3s, transform .3s;
}
.course-module:hover {
  border-color: rgba(181,240,42,0.4);
  background: rgba(40,55,8,0.3);
  transform: translateX(4px);
}
.cm-num {
  font-size: 22px; color: var(--lime); font-weight: 700;
  text-shadow: 0 0 16px rgba(181,240,42,0.5);
}
.cm-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.cm-desc { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }

.course-card {
  position: sticky; top: 100px;
  padding: 36px 32px; border-radius: 22px;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(181,240,42,0.12), transparent 70%),
    linear-gradient(180deg, rgba(20,32,12,0.85), rgba(8,16,4,0.95));
  border: 1px solid rgba(181,240,42,0.3);
  backdrop-filter: blur(12px);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.6), 0 0 60px -20px rgba(181,240,42,0.4);
}
.cc-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(181,240,42,0.12);
  border: 1px solid rgba(181,240,42,0.4);
  color: var(--lime);
  font-size: 10px; letter-spacing: 0.18em;
  margin-bottom: 20px;
}
.cc-tag .dot { background: var(--lime); }
.course-card h3 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 32px; color: var(--ink); margin-bottom: 24px;
}
.cc-price { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cc-price-from { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.1em; text-transform: uppercase; }
.cc-price-value { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 48px; color: var(--ink); margin: 4px 0; }
.cc-price-num { color: var(--lime); text-shadow: 0 0 24px rgba(181,240,42,0.5); }
.cc-price-cond { font-size: 13px; color: var(--ink-dim); }
.cc-bullets { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.cc-bullets li { color: var(--ink); font-size: 14px; line-height: 1.45; }
.btn-lime {
  background: var(--lime);
  color: #050B14;
  font-weight: 700;
  border: 0;
  box-shadow: 0 8px 24px -8px rgba(181,240,42,0.7), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.btn-lime:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -6px rgba(181,240,42,0.85); }
.cc-guarantee {
  margin-top: 18px; text-align: center;
  font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--ink-dim); text-transform: uppercase;
}


/* ===== SPLASH INTRO ===== */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at 50% 50%, #0a1422 0%, #050B14 70%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.splash.done { opacity: 0; visibility: hidden; pointer-events: none; }

.splash-net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 8px rgba(34,224,242,0.4));
}
@keyframes splash-line {
  to { stroke-dashoffset: 0; stroke-opacity: 0.5; }
}
@keyframes splash-node {
  0% { opacity: 0; r: 0.2; }
  60% { opacity: 1; r: 1.2; }
  100% { opacity: 0.85; r: 0.7; }
}
.splash-core {
  filter: drop-shadow(0 0 8px #22E0F2);
  animation: splash-core-pulse 1.5s ease-in-out infinite;
}
@keyframes splash-core-pulse {
  0%, 100% { r: 1.2; opacity: 0.8; }
  50% { r: 2.2; opacity: 1; }
}

.splash-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.splash-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--teal-glow);
  margin-bottom: 36px;
  opacity: 0;
  animation: splash-fade 0.6s 0.3s ease forwards;
}
.splash-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--ink-dim);
  margin-top: 28px;
  opacity: 0;
  animation: splash-fade 0.6s 2.0s ease forwards;
}
@keyframes splash-fade {
  to { opacity: 1; }
}

.splash-logo-wrap {
  position: relative;
  padding: 24px 36px;
  border-radius: 14px;
  opacity: 0;
  transform: scale(0.85);
}
.splash.reveal .splash-logo-wrap,
.splash.done .splash-logo-wrap {
  animation: splash-logo-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes splash-logo-in {
  0% { opacity: 0; transform: scale(0.7); filter: blur(8px); }
  60% { opacity: 1; transform: scale(1.05); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.splash-logo {
  height: 80px; width: auto; display: block;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(34,224,242,0.6));
}
.splash-logo-wrap::after {
  content: ""; position: absolute; inset: -2px; border-radius: 14px;
  border: 1px solid rgba(34,224,242,0.4);
  background: radial-gradient(ellipse at center, rgba(34,224,242,0.15), transparent 70%);
  animation: splash-halo 1.6s ease-out infinite;
  z-index: -1;
}
@keyframes splash-halo {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* ===== FIXED PULSING LOGO ===== */
.fixed-logo {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 200;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(5,11,20,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(34,224,242,0.45);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.6), 0 0 24px -6px rgba(34,224,242,0.5);
  transition: transform .3s ease, border-color .3s;
  cursor: pointer;
}
.fixed-logo:hover {
  transform: scale(1.08);
  border-color: var(--teal-glow);
}
.fixed-logo img {
  width: 38px; height: 38px;
  object-fit: contain;
  mix-blend-mode: screen;
  position: relative; z-index: 2;
}
.fl-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--teal-glow);
  animation: fl-ring 2.4s ease-out infinite;
  pointer-events: none;
}
.fl-pulse-2 { animation-delay: 1.2s; }
@keyframes fl-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (max-width: 700px) {
  .fixed-logo { width: 50px; height: 50px; bottom: 16px; right: 16px; }
  .fixed-logo img { width: 30px; height: 30px; }
}

/* ===== LOYALTY ===== */
.loyalty {
  position: relative;
  padding: 120px 0 100px;
  background:
    radial-gradient(ellipse 1100px 600px at 50% 0%, rgba(181,240,42,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-0), #07131F 50%, var(--bg-0));
  overflow: hidden;
}
.loyalty::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(181,240,42,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,224,242,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 80%);
}
.loyalty-bg-orb {
  position: absolute; left: -150px; bottom: 10%;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(181,240,42,0.18), transparent 70%);
  filter: blur(80px);
  animation: orb-pulse 7s ease-in-out infinite;
}
.loyalty .wrap { position: relative; z-index: 2; }

.loyalty-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 980px) { .loyalty-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .loyalty-grid { grid-template-columns: 1fr; } }

.tier {
  position: relative;
  padding: 28px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10,30,48,0.7), rgba(5,15,28,0.85));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.tier:hover { transform: translateY(-6px); }

.tier.teal { border-color: rgba(34,224,242,0.3); box-shadow: 0 0 30px -12px rgba(34,224,242,0.45); }
.tier.teal-glow {
  border-color: rgba(34,224,242,0.55);
  box-shadow: 0 0 40px -10px rgba(34,224,242,0.65), inset 0 0 30px rgba(34,224,242,0.06);
  animation: card-glow-teal 3.5s ease-in-out infinite;
}
.tier.lime {
  border-color: rgba(181,240,42,0.5);
  background: linear-gradient(180deg, rgba(40,55,8,0.6), rgba(10,20,5,0.85));
  box-shadow: 0 0 50px -8px rgba(181,240,42,0.65), inset 0 0 30px rgba(181,240,42,0.06);
  animation: card-glow-lime 3s ease-in-out infinite;
}
.tier-flag {
  position: absolute; top: 14px; right: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.18em; font-weight: 700;
  color: #050B14; background: var(--lime);
  padding: 4px 8px; border-radius: 4px;
}
.tier-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 22px; color: var(--ink);
  letter-spacing: -0.01em;
}
.tier.teal .tier-name { color: var(--teal-glow); }
.tier.teal-glow .tier-name { color: var(--teal-glow); text-shadow: 0 0 20px rgba(34,224,242,0.4); }
.tier.lime .tier-name { color: var(--lime); text-shadow: 0 0 20px rgba(181,240,42,0.4); }

.tier-kwh {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.tier-price {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tp-from {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink-dim); text-transform: uppercase;
}
.tp-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800; font-size: 36px;
  color: var(--ink); letter-spacing: -0.03em;
  line-height: 1;
}
.tier.lime .tp-num { color: var(--lime); }
.tp-unit { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.tier-saving {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-top: 4px;
}
.tier.teal .tier-saving, .tier.teal-glow .tier-saving { color: var(--teal-glow); }
.tier.lime .tier-saving { color: var(--lime); font-weight: 600; }

.tier-progress {
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.06); overflow: hidden;
  margin-top: 8px;
}
.tier-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-glow));
}
.tier.lime .tier-progress-fill { background: linear-gradient(90deg, var(--teal-glow), var(--lime)); }

.loyalty-meta {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 32px 36px;
  border-radius: 20px;
  background: rgba(10,25,42,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
}
@media (max-width: 900px) { .loyalty-meta { grid-template-columns: 1fr; padding: 24px; } }
.lm-item { display: flex; gap: 16px; align-items: flex-start; }
.lm-icon { font-size: 28px; flex-shrink: 0; }
.lm-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; font-size: 15px; }
.lm-desc { font-size: 13px; color: var(--ink-dim); line-height: 1.5; }

/* ===== READABILITY FIX — make all dim text more visible ===== */
.section-head p { color: var(--ink-dim); }
.diff p, .v-feat-desc, .cm-desc, .lm-desc, .cc-price-cond, .stat .desc, .footer-brand p,
.spec .sub, .spec .v .u, .cc-desc, .tier-kwh {
  color: #BCCEE6 !important;
}
/* a touch lighter on station meta */
.station .meta { color: #BCCEE6; }


/* ================================================================
   FLOATING-INFO LAYOUT — content as loose elements over fixed bgs
   ================================================================ */

/* Override the old card sections so they don't double-paint */
.stats, .tech, .diffs, .vision, .course, .loyalty {
  background: transparent !important;
  padding: 0 !important;
}
.stats::before, .stats::after,
.tech::before, .tech::after,
.diffs::before, .diffs::after,
.vision::before, .vision::after,
.course::before, .course::after,
.loyalty::before, .loyalty::after {
  display: none !important;
}
.stats-grid, .charger-lineup, .diffs-grid, .loyalty-grid, .loyalty-meta,
.tech-grid, .course-grid {
  display: none !important;
}

/* Float section base */
.float-section {
  position: relative;
  padding: 160px 0 140px;
  overflow: hidden;
  isolation: isolate;
}
.float-section + .float-section { padding-top: 140px; }

@media (max-width: 720px) {
  .float-section { padding: 100px 0 80px; }
}

/* Fixed parallax background photo */
.float-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.05);
}
@supports (-webkit-touch-callout: none) {
  /* iOS doesn't support background-attachment: fixed reliably */
  .float-bg { background-attachment: scroll; }
}

/* Scrim layer for legibility */
.float-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--bg-0) 0%, rgba(6,16,28,0.55) 22%, rgba(6,16,28,0.55) 78%, var(--bg-0) 100%),
    radial-gradient(ellipse 1100px 600px at 50% 50%, rgba(3,164,189,0.18), transparent 60%);
  backdrop-filter: blur(2px);
}
.float-scrim.deep {
  background:
    linear-gradient(180deg, var(--bg-0) 0%, rgba(6,16,28,0.78) 18%, rgba(6,16,28,0.78) 82%, var(--bg-0) 100%),
    radial-gradient(ellipse 1100px 600px at 50% 50%, rgba(3,164,189,0.14), transparent 60%);
  backdrop-filter: blur(4px);
}

/* Section heading (replaces .section-head) */
.float-head {
  margin-bottom: 80px;
  max-width: 920px;
}
.float-head .s-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.28em;
  color: var(--teal-glow);
  text-transform: uppercase;
  margin-bottom: 22px;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(34,224,242,0.35);
}
.float-head h2 {
  font-size: clamp(44px, 7vw, 96px);
  margin-bottom: 24px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.float-head p {
  font-size: clamp(16px, 1.3vw, 19px);
  color: #BCCEE6;
  max-width: 60ch;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .float-head { margin-bottom: 56px; }
  .float-head h2 { font-size: clamp(36px, 10vw, 56px); }
}

/* ================================================================
   STATS — floating numbers, no cards
   ================================================================ */
.stats-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.stat-row {
  display: grid;
  grid-template-columns: 60px 1.5fr 2.5fr 2fr;
  align-items: baseline;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  position: relative;
}
.stat-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
.stat-row.lime { border-color: rgba(181,240,42,0.3); }
.stat-row::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--teal-glow);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s ease;
}
.stat-row.in::before { transform: scaleX(1); }
.stat-row.lime::before { background: var(--lime); }

.sr-num {
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--teal-glow);
  align-self: start;
  padding-top: 22px;
}
.sr-label {
  font-size: 12px; letter-spacing: 0.18em;
  color: #BCCEE6;
  text-transform: uppercase;
  align-self: start;
  padding-top: 22px;
}
.sr-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(54px, 8vw, 110px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
  text-shadow: 0 6px 40px rgba(0,0,0,0.4);
}
.stat-row.lime .sr-value { color: var(--lime); text-shadow: 0 0 40px rgba(181,240,42,0.4); }
.sr-unit {
  font-size: 0.4em;
  color: var(--teal-glow);
  margin-left: 8px;
  vertical-align: top;
  font-weight: 600;
}
.stat-row.lime .sr-unit { color: var(--lime); }
.sr-desc {
  font-size: 14px;
  color: #BCCEE6;
  align-self: end;
  padding-bottom: 12px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .stat-row {
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      "num label"
      "val val"
      "desc desc";
    gap: 8px 18px;
    padding: 28px 0;
  }
  .sr-num { grid-area: num; padding-top: 4px; }
  .sr-label { grid-area: label; padding-top: 4px; }
  .sr-value { grid-area: val; margin-top: 12px; }
  .sr-desc { grid-area: desc; padding-bottom: 0; padding-top: 4px; }
}

/* ================================================================
   TECH — floating charger spec rows
   ================================================================ */
.charger-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 80px;
}
.ch-row {
  display: grid;
  grid-template-columns: 60px 180px 1fr 90px 220px 60px;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
  transition: padding-left 0.3s ease;
}
.ch-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.ch-row:hover { padding-left: 12px; }

.ch-type {
  font-size: 11px; letter-spacing: 0.22em;
  color: #8FA4BE;
}
.ch-row.teal .ch-type, .ch-row.teal-glow .ch-type { color: var(--teal-glow); }
.ch-row.lime .ch-type { color: var(--lime); }

.ch-kw {
  display: flex; align-items: baseline; gap: 6px;
}
.ch-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 6vw, 80px);
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--ink);
}
.ch-row.teal .ch-num { color: var(--ink); }
.ch-row.teal-glow .ch-num { color: var(--teal-glow); text-shadow: 0 0 30px rgba(34,224,242,0.4); }
.ch-row.lime .ch-num { color: var(--lime); text-shadow: 0 0 30px rgba(181,240,42,0.5); }
.ch-unit {
  font-size: 18px; color: #8FA4BE; font-weight: 500;
}

.ch-bar {
  height: 2px; background: rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
}
.ch-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, var(--teal-glow));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ch-row.in .ch-bar-fill { transform: scaleX(1); }
.ch-row.lime .ch-bar-fill { background: linear-gradient(90deg, transparent, var(--teal-glow), var(--lime)); box-shadow: 0 0 20px rgba(181,240,42,0.5); }
.ch-row.teal-glow .ch-bar-fill { background: linear-gradient(90deg, transparent, var(--teal-2), var(--teal-glow)); }

.ch-time {
  font-size: 13px; letter-spacing: 0.08em;
  color: #BCCEE6;
  text-align: right;
}
.ch-plug {
  font-size: 13px; color: #BCCEE6;
}
.ch-row.teal .ch-plug, .ch-row.teal-glow .ch-plug { color: var(--teal-glow); }
.ch-row.lime .ch-plug { color: var(--lime); }
.ch-flag {
  font-size: 9px; letter-spacing: 0.18em; font-weight: 700;
  color: #050B14; background: var(--lime);
  padding: 4px 7px; border-radius: 3px;
  justify-self: end;
}

@media (max-width: 900px) {
  .ch-row {
    grid-template-columns: 60px 1fr auto;
    grid-template-areas:
      "type kw flag"
      "type bar bar"
      "time plug plug";
    gap: 6px 16px;
    padding: 22px 0;
  }
  .ch-type { grid-area: type; align-self: center; }
  .ch-kw { grid-area: kw; }
  .ch-bar { grid-area: bar; }
  .ch-time { grid-area: time; text-align: left; }
  .ch-plug { grid-area: plug; text-align: right; }
  .ch-flag { grid-area: flag; }
}

/* Tech meta */
.tech-meta {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 60px;
  padding: 50px 0 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.tm-block .t-eyebrow { display: block; margin-bottom: 16px; }
.tm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.04em;
  padding: 6px 12px;
  border: 1px solid rgba(34,224,242,0.4);
  color: var(--teal-glow);
  border-radius: 999px;
}
.tm-tag.muted {
  color: #BCCEE6;
  border-color: rgba(255,255,255,0.16);
}
.tm-line {
  font-size: 14px;
  color: #BCCEE6;
  margin-bottom: 8px;
  display: flex; justify-content: space-between;
}
.tm-line .hi { color: var(--ink); font-weight: 600; }
.tm-line .hi-lime { color: var(--lime); font-weight: 600; }

@media (max-width: 900px) {
  .tech-meta { grid-template-columns: 1fr; gap: 40px; }
}

/* ================================================================
   DIFFS — floating headlines, no cards
   ================================================================ */
.diffs-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.diff-row {
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  align-items: start;
  gap: 32px;
  padding: 44px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  position: relative;
  transition: padding-left 0.4s ease;
}
.diff-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
.diff-row:hover { padding-left: 16px; }

.dr-num {
  font-size: 12px; letter-spacing: 0.22em;
  color: var(--teal-glow);
  padding-top: 10px;
}
.diff-row.lime .dr-num { color: var(--lime); }

.dr-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 14px;
}
.diff-row.lime .dr-title { color: var(--lime); }
.dr-desc {
  font-size: 16px;
  color: #BCCEE6;
  line-height: 1.55;
  max-width: 56ch;
}
.dr-hi {
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--teal-glow);
  text-align: right;
  align-self: start;
  padding-top: 14px;
  text-transform: uppercase;
}
.diff-row.lime .dr-hi { color: var(--lime); }

@media (max-width: 900px) {
  .diff-row {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "num hi"
      "body body";
    gap: 12px 20px;
    padding: 32px 0;
  }
  .dr-num { grid-area: num; }
  .dr-body { grid-area: body; }
  .dr-hi { grid-area: hi; padding-top: 0; }
}

/* ================================================================
   APP HERTZGO (driver app — phone mockup + features)
   ================================================================ */
.app-stage {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 980px) {
  .app-stage { grid-template-columns: 1fr; gap: 60px; }
  .app-phone-col { display: flex; justify-content: center; }
}

/* Phone */
.app-phone {
  width: 320px; height: 660px;
  background: #050B14;
  border-radius: 44px;
  border: 8px solid #1a2536;
  box-shadow:
    0 60px 100px -30px rgba(0,0,0,0.7),
    0 0 0 1px rgba(34,224,242,0.2),
    0 0 60px -20px rgba(34,224,242,0.4);
  position: relative;
  overflow: hidden;
  transform: perspective(1200px) rotateY(-8deg) rotateX(2deg);
  transform-style: preserve-3d;
}
.apf-notch {
  position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 24px;
  background: #050B14;
  border-radius: 0 0 16px 16px;
  z-index: 5;
}
.apf-screen {
  position: absolute; inset: 0;
  padding: 52px 22px 22px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #07131F 0%, #0A1422 100%);
  overflow: hidden;
}
.apf-status {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--teal-glow);
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.apf-greet {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.apf-sub {
  font-size: 11px;
  color: #8FA4BE;
  margin-bottom: 16px;
}
.apf-map {
  position: relative;
  height: 220px;
  background: radial-gradient(ellipse at 50% 50%, rgba(3,164,189,0.18), rgba(6,16,28,0.6) 60%, var(--bg-0));
  border-radius: 14px;
  border: 1px solid rgba(34,224,242,0.18);
  margin-bottom: 14px;
  overflow: hidden;
}
.apf-map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(34,224,242,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,224,242,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 90%);
}
.apf-pin {
  position: absolute;
  width: 12px; height: 12px;
}
.apf-pin .pp {
  position: absolute; inset: 0;
  background: var(--teal-glow);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--teal-glow);
  animation: apf-blink 1.6s ease-in-out infinite;
}
.apf-pin.p1 { top: 30%; left: 25%; animation-delay: 0s; }
.apf-pin.p2 { top: 60%; left: 70%; animation-delay: 0.4s; }
.apf-pin.p3.hub { top: 45%; left: 48%; }
.apf-pin.hub .pp {
  background: var(--lime);
  box-shadow: 0 0 18px var(--lime);
  animation: apf-blink 1.4s ease-in-out infinite;
  width: 16px; height: 16px;
}
.apf-pin.hub .pl {
  position: absolute;
  left: 22px; top: -2px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  background: rgba(10,20,34,0.92);
  color: var(--lime);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(181,240,42,0.4);
  letter-spacing: 0.06em;
}
@keyframes apf-blink {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.6; }
}

.apf-card {
  background: rgba(20,40,62,0.6);
  border: 1px solid rgba(34,224,242,0.25);
  border-radius: 12px;
  padding: 12px;
  backdrop-filter: blur(4px);
  margin-bottom: 14px;
}
.apf-card-row {
  display: flex; justify-content: space-between;
  margin-bottom: 4px;
}
.apf-card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.apf-card-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--lime);
}
.apf-card-meta {
  font-size: 11px;
  color: #BCCEE6;
  margin-bottom: 10px;
}
.apf-card-bar {
  height: 3px; background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
  margin-bottom: 12px;
}
.apf-card-fill {
  height: 100%; width: 70%;
  background: linear-gradient(90deg, var(--teal-2), var(--teal-glow));
  border-radius: 2px;
  animation: apf-fill 2.4s ease-in-out infinite;
}
@keyframes apf-fill {
  0%, 100% { width: 65%; }
  50% { width: 80%; }
}
.apf-card-btn {
  width: 100%;
  background: var(--teal-2);
  color: #031419;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  padding: 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.apf-tabs {
  margin-top: auto;
  display: flex; justify-content: space-around;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.apf-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #5A6E8A;
  text-transform: uppercase;
}
.apf-tab.active { color: var(--teal-glow); }

/* App info column */
.app-info-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.app-feat {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  align-items: start;
}
.app-feat:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.10); }
.af-num {
  font-size: 12px; letter-spacing: 0.22em;
  color: var(--teal-glow);
  padding-top: 6px;
}
.af-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.af-desc {
  font-size: 14px;
  color: #BCCEE6;
  line-height: 1.55;
  max-width: 50ch;
}

.app-stores {
  display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap;
}
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(10,25,42,0.5);
  backdrop-filter: blur(8px);
  color: var(--ink);
  transition: all 0.25s ease;
}
.store-btn:hover {
  border-color: var(--teal-glow);
  background: rgba(34,224,242,0.08);
  transform: translateY(-2px);
}
.sb-stack { display: flex; flex-direction: column; line-height: 1; }
.sb-small { font-size: 10px; color: #BCCEE6; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; }
.sb-big { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; }

/* ================================================================
   VISION — keep existing screen but features as floating list
   ================================================================ */
.vision-features-stack {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vf-row {
  display: grid;
  grid-template-columns: 60px 280px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  align-items: baseline;
}
.vf-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
.vf-num { font-size: 12px; letter-spacing: 0.22em; color: var(--teal-glow); }
.vf-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.vf-desc { font-size: 14px; color: #BCCEE6; }
@media (max-width: 800px) {
  .vf-row {
    grid-template-columns: 50px 1fr;
    grid-template-areas: "n t" ". d";
    gap: 8px 16px;
  }
  .vf-num { grid-area: n; }
  .vf-title { grid-area: t; }
  .vf-desc { grid-area: d; }
}

/* ================================================================
   COURSE — floating modules
   ================================================================ */
.modules-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 80px;
}
.mod-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  align-items: start;
  transition: padding-left 0.4s ease;
}
.mod-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
.mod-row:hover { padding-left: 16px; }
.mr-num {
  font-size: 12px; letter-spacing: 0.22em;
  color: var(--lime);
  padding-top: 6px;
}
.mr-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.mr-desc { font-size: 15px; color: #BCCEE6; line-height: 1.55; max-width: 60ch; }

.course-cta {
  margin-top: 60px;
  padding: 40px 0;
  border-top: 1px solid rgba(181,240,42,0.3);
  border-bottom: 1px solid rgba(181,240,42,0.3);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
@media (max-width: 800px) { .course-cta { grid-template-columns: 1fr; } }

/* ================================================================
   LOYALTY — Bronze / Silver / Golden / Platinum, no prices
   ================================================================ */
.loyalty-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.loy-row {
  display: grid;
  grid-template-columns: 280px 240px 1fr 2fr;
  align-items: center;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  position: relative;
  transition: padding-left 0.4s ease;
}
.loy-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
.loy-row:hover { padding-left: 14px; }

.loy-tier {
  display: flex; align-items: center; gap: 18px;
}
.loy-medal {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 20px currentColor;
}
.tier-bronze   .loy-medal { background: radial-gradient(circle at 35% 35%, #E8A87C, #A6572D 60%, #6B3315); color: rgba(166,87,45,0.6); }
.tier-silver   .loy-medal { background: radial-gradient(circle at 35% 35%, #F4F7FB, #B6C2D1 60%, #7B8FAA); color: rgba(182,194,209,0.6); }
.tier-golden   .loy-medal { background: radial-gradient(circle at 35% 35%, #FFEAA7, #E5B73B 55%, #8C6A14); color: rgba(229,183,59,0.7); }
.tier-platinum .loy-medal {
  background: radial-gradient(circle at 35% 35%, #E8FCFF, #88E5F2 50%, #1FB3CC);
  color: rgba(34,224,242,0.8);
  animation: loy-pulse 2.4s ease-in-out infinite;
}
@keyframes loy-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(34,224,242,0.5); }
  50% { box-shadow: 0 0 36px rgba(34,224,242,0.9); }
}

.loy-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.tier-bronze   .loy-name { color: #D9986C; }
.tier-silver   .loy-name { color: #DDE5EE; }
.tier-golden   .loy-name { color: #F4CD52; }
.tier-platinum .loy-name { color: var(--teal-glow); text-shadow: 0 0 24px rgba(34,224,242,0.4); }

.loy-thresh {
  display: flex; flex-direction: column; gap: 2px;
}
.loy-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.loy-unit {
  font-size: 11px;
  color: #BCCEE6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loy-bar {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.loy-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #A6572D, #DDE5EE 33%, #E5B73B 66%, #22E0F2);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.loy-row.in .loy-bar-fill { transform: scaleX(1); }

.loy-perk {
  font-size: 14px;
  color: #BCCEE6;
  line-height: 1.55;
  max-width: 50ch;
}

.loy-flag {
  position: absolute;
  top: 20px; right: 0;
  font-size: 9px; letter-spacing: 0.18em; font-weight: 700;
  color: #050B14; background: var(--lime);
  padding: 4px 8px; border-radius: 4px;
}

@media (max-width: 980px) {
  .loy-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "tier thresh"
      "bar bar"
      "perk perk";
    gap: 14px 24px;
    padding: 28px 0;
  }
  .loy-tier { grid-area: tier; }
  .loy-thresh { grid-area: thresh; align-items: flex-end; }
  .loy-bar { grid-area: bar; }
  .loy-perk { grid-area: perk; max-width: 100%; }
}

.loyalty-meta-stack {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lm-row {
  display: grid;
  grid-template-columns: 50px 1fr 2fr;
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  align-items: baseline;
}
.lm-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.lm-num {
  font-size: 18px;
  color: var(--lime);
  font-weight: 700;
}
.lm-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.lm-desc { font-size: 14px; color: #BCCEE6; }
@media (max-width: 800px) {
  .lm-row {
    grid-template-columns: 36px 1fr;
    grid-template-areas: "n t" ". d";
    gap: 6px 16px;
  }
  .lm-num { grid-area: n; }
  .lm-title { grid-area: t; }
  .lm-desc { grid-area: d; }
}

/* ================================================================
   CTA Float
   ================================================================ */
.cta-float { padding: 120px 0; position: relative; }
.cta-stack { max-width: 900px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ================================================================
   Reset old class blocks now fully replaced
   ================================================================ */
.charger-card, .stat, .diff, .tier, .tech-photo, .cta-strip, .stats-grid,
.tier-flag, .tier-name, .tier-kwh, .tier-price, .tier-saving, .tier-progress,
.lm-item, .v-feat, .vision-features, .course-card, .course-modules, .course-module {
  /* visually hidden — replaced by floating equivalents */
}