/* ChargeGrid — landing page styles. Standalone (not part of AdminLayout/SuperAdminLayout). */
:root{
  --bg:#FFFFFF; --bg-alt:#FFFFFF; --panel:#FFFFFF; --panel-2:#F6F8F7;
  --border:#DCE4E1; --border-soft:#E9EFED;
  --text:#101917; --text-dim:#5A6B67; --text-faint:#8B9C97;
  --brand-1:#4A56D9; --brand-2:#635BDA; --brand-3:#6B63DE;
  --amber:#B0700D; --red:#D23C38;
  --accent-fg:var(--brand-1);
  --lime:#4A56D9; --lime-hover:#5C67E0;
  --tint-brand:rgba(74,86,217,.05); --tint-brand-2:rgba(74,86,217,.09);
  --tint-amber:rgba(176,112,13,.10); --tint-red:rgba(210,60,56,.09);
  --radius:10px; --radius-sm:6px;
}
:root.dark{
  --bg:#0E1416; --bg-alt:#0B1012; --panel:#161E21; --panel-2:#1B2427;
  --border:#26302F; --border-soft:#1E2729;
  --text:#EAF0EE; --text-dim:#93A19E; --text-faint:#5E6C6A;
  --brand-1:#7C6BFF; --brand-2:#9F92FF; --brand-3:#C2BAFF;
  --amber:#F0A93E; --red:#EF5350;
  --accent-fg:var(--brand-1);
  --lime:#5B4CE6; --lime-hover:#6C5EEE;
  --tint-brand:rgba(124,107,255,.15); --tint-brand-2:rgba(124,107,255,.22);
  --tint-amber:rgba(240,169,62,.15); --tint-red:rgba(239,83,80,.16);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;transition:background-color .2s ease,color .2s ease;
}
h1,h2,h3,.disp{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;margin:0;}
a{color:var(--accent-fg);text-decoration:none;}
a:hover{text-decoration:underline;}
img,svg{display:block;}
::selection{background:var(--lime);color:#fff;}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---- Nav ---- */
.nav{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-soft);
}
:root.dark .nav{background:rgba(14,20,22,.9);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:34px;height:34px;border-radius:8px;background:var(--lime);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  animation:markGlow 3s ease-in-out infinite;
}
@keyframes markGlow{
  0%,100%{box-shadow:0 0 0 0 var(--tint-brand-2);}
  50%{box-shadow:0 0 0 6px var(--tint-brand-2);}
}
.brand:hover .brand-mark{transform:rotate(-10deg) scale(1.08);}
@media (prefers-reduced-motion:reduce){
  .brand-mark{animation:none;}
}
.brand-mark svg{width:18px;height:18px;}
.brand-name{font-family:'Space Grotesk';font-weight:700;font-size:18px;line-height:1;color:var(--text);}
.brand-name em{font-style:normal;color:var(--accent-fg);}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{color:var(--text-dim);font-size:13.5px;font-weight:500;position:relative;}
.nav-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--accent-fg);
  transition:right .2s ease;
}
.nav-links a:hover{color:var(--text);text-decoration:none;}
.nav-links a:hover::after{right:0;}
.nav-actions{display:flex;align-items:center;gap:12px;}

.theme-toggle{
  width:36px;height:36px;border-radius:8px;background:var(--panel-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);flex-shrink:0;
  transition:color .15s ease,transform .15s ease,border-color .15s ease;
}
.theme-toggle:hover{color:var(--text);transform:rotate(14deg);}
.theme-toggle:active{transform:rotate(14deg) scale(.9);}
.theme-toggle svg{width:16px;height:16px;}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;
  font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .18s ease,background-color .15s ease,border-color .15s ease,box-shadow .18s ease;
}
.btn:active{transform:translateY(0) scale(.97);}
.btn-primary{background:var(--lime);border-color:var(--lime);color:#fff;}
.btn-primary:hover{background:var(--lime-hover);border-color:var(--lime-hover);color:#fff;text-decoration:none;transform:translateY(-2px);}
.btn-ghost{background:var(--panel);border-color:var(--border);color:var(--text);}
.btn-ghost:hover{border-color:var(--text-faint);color:var(--text);text-decoration:none;transform:translateY(-2px);}
.btn svg{width:14px;height:14px;transition:transform .18s ease;}
.btn:hover svg{transform:translateX(2px);}

.menu-btn{display:none;width:36px;height:36px;border-radius:8px;background:var(--panel);border:1px solid var(--border);align-items:center;justify-content:center;color:var(--text-dim);cursor:pointer;}
.menu-btn svg{width:18px;height:18px;}

/* ---- Hero ---- */
.hero{padding:52px 0 36px;text-align:center;position:relative;overflow:hidden;}
.hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hero-bg svg{width:100%;height:100%;}
.hero-bg .stop-1{stop-color:var(--brand-1);}
.hero-bg .stop-2{stop-color:var(--brand-2);}
.hero-bg .stop-3{stop-color:var(--brand-3);}
.hero-bg .stop-0{stop-color:var(--brand-1);stop-opacity:0;}
.hero-bg .blob{transform-box:fill-box;transform-origin:center;}
.hero-bg .b1{animation:drift1 17s ease-in-out infinite;}
.hero-bg .b2{animation:drift2 21s ease-in-out infinite;}
.hero-bg .b3{animation:drift3 25s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(24px,18px) scale(1.08);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-22px,14px) scale(.94);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(14px,-20px) scale(1.05);}}
.hero-bg .grid-dots{opacity:.22;}
.hero-bg .bolt{fill:var(--brand-1);opacity:.10;}
:root.dark .hero-bg .bolt{opacity:.16;}
@media (prefers-reduced-motion:reduce){
  .hero-bg .blob{animation:none;}
}
.hero > .wrap{position:relative;z-index:1;}
.kicker{
  display:inline-flex;align-items:center;gap:8px;background:var(--tint-brand);color:var(--accent-fg);
  border:1px solid var(--tint-brand-2);padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:16px;
}
.kicker .pulse{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent-fg);flex-shrink:0;}
.kicker .pulse::after{
  content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--accent-fg);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7;}100%{transform:scale(2.6);opacity:0;}}
.hero h1{font-size:42px;line-height:1.12;max-width:760px;margin:0 auto;font-weight:700;}
.hero h1 em{
  font-style:normal;background:linear-gradient(100deg,var(--brand-1),var(--brand-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lede{max-width:560px;margin:16px auto 0;color:var(--text-dim);font-size:15.5px;line-height:1.6;}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap;}
.hero-ctas .btn{padding:12px 22px;font-size:13.5px;}
.hero-ctas .btn-primary{box-shadow:0 8px 22px -8px var(--brand-1);position:relative;}
.hero-ctas .btn-primary::before{
  content:'';position:absolute;inset:0;border-radius:8px;border:2px solid var(--brand-1);
  animation:ctaRing 2.4s ease-out infinite;pointer-events:none;
}
@keyframes ctaRing{
  0%{opacity:.6;transform:scale(1);}
  100%{opacity:0;transform:scale(1.22);}
}
@media (prefers-reduced-motion:reduce){
  .hero-ctas .btn-primary::before{animation:none;}
}

.hero-stats{display:flex;align-items:center;justify-content:center;gap:44px;margin-top:34px;flex-wrap:wrap;}
.hero-stats .stat{text-align:center;}
.hero-stats .v{font-family:'Space Grotesk';font-weight:700;font-size:26px;color:var(--text);}
.hero-stats .k{font-size:13px;color:var(--text-dim);margin-top:3px;}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.hero .kicker,.hero h1,.hero p.lede,.hero-ctas,.hero-stats{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both;}
.hero .kicker{animation-delay:.02s;}
.hero h1{animation-delay:.09s;}
.hero p.lede{animation-delay:.17s;}
.hero-ctas{animation-delay:.25s;}
.hero-stats{animation-delay:.33s;}
.hero-stats .v{transition:color .2s ease;}
@media (prefers-reduced-motion:reduce){
  .hero .kicker,.hero h1,.hero p.lede,.hero-ctas,.hero-stats{animation:none;}
}

/* ---- Sections ---- */
section{padding:36px 0;}
.section-head{
  text-align:center;max-width:600px;margin:0 auto 26px;
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;
}
.section-head.in{opacity:1;transform:translateY(0);}
.section-head .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--accent-fg);text-transform:uppercase;margin-bottom:8px;}
.section-head h2{font-size:28px;font-weight:700;}
.section-head p{color:var(--text-dim);font-size:14px;margin-top:10px;line-height:1.6;}

.features{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px;}
.feature{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
  opacity:0;transform:translateY(14px);
}
.feature.in{opacity:1;transform:translateY(0);transition:opacity .5s ease,transform .5s ease,border-color .15s ease,box-shadow .15s ease;}
.feature:hover{border-color:var(--accent-fg);transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(0,0,0,.35);}
.feature-icon{
  width:38px;height:38px;border-radius:9px;background:var(--tint-brand);color:var(--accent-fg);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background-color .15s ease;
}
.feature:hover .feature-icon{transform:scale(1.1) rotate(-6deg);}
.feature:nth-child(3n+2) .feature-icon{background:var(--tint-brand-2);color:var(--brand-2);}
.feature:nth-child(3n) .feature-icon{background:var(--tint-brand);color:var(--brand-3);}
.feature-icon svg{width:19px;height:19px;}
.feature:nth-child(2){transition-delay:.06s;}
.feature:nth-child(3){transition-delay:.12s;}
.feature:nth-child(4){transition-delay:.06s;}
.feature:nth-child(5){transition-delay:.12s;}
.feature:nth-child(6){transition-delay:.18s;}
.feature h3{font-size:15px;font-weight:600;margin-bottom:7px;}
.feature p{font-size:13px;color:var(--text-dim);line-height:1.6;margin:0;}

/* ---- Consoles ---- */
#consoles{background:var(--panel-2);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
.consoles{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:18px;}
.consoles-divider{display:flex;align-items:center;justify-content:center;position:relative;}
.consoles-divider::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--border);
}
.consoles-divider span{
  position:relative;z-index:1;background:var(--panel-2);border:1px solid var(--border);color:var(--text-faint);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:20px;padding:5px 10px;
}
.console-card{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:26px;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 2px rgba(16,25,23,.03);
  opacity:0;transform:translateY(14px);transition:border-color .15s ease,box-shadow .15s ease;
}
.console-card.in{opacity:1;transform:translateY(0);transition:opacity .5s ease,transform .5s ease,border-color .15s ease,box-shadow .15s ease;}
.console-card:hover{border-color:var(--accent-fg);box-shadow:0 14px 28px -18px rgba(0,0,0,.35);transform:translateY(-3px);}
.console-card .tag{
  display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent-fg);background:var(--tint-brand);
  padding:5px 11px;border-radius:20px;
}
.console-card h3{font-size:19px;font-weight:700;}
.console-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:0;}
.console-card ul{margin:4px 0 6px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.console-card li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text);}
.console-card li svg{width:15px;height:15px;color:var(--accent-fg);flex-shrink:0;margin-top:1px;transition:transform .2s ease;}
.console-card:hover li svg{transform:scale(1.15);}
.console-card li:nth-child(2) svg{transition-delay:.04s;}
.console-card li:nth-child(3) svg{transition-delay:.08s;}
.console-card .btn{align-self:flex-start;margin-top:6px;}

/* ---- Get started ---- */
#get-started{
  background:linear-gradient(180deg,var(--bg) 0%,var(--tint-brand) 50%,var(--bg) 100%);
  padding:56px 0 64px;
}

/* ---- CTA band ---- */
.cta-band{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:40px;
  text-align:center;position:relative;overflow:hidden;
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;
}
.cta-band.in{opacity:1;transform:translateY(0);}
.cta-band::before{
  content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);
  width:480px;height:240px;border-radius:50%;background:var(--tint-brand-2);filter:blur(50px);z-index:0;
  animation:ctaGlow 6s ease-in-out infinite;
}
@keyframes ctaGlow{0%,100%{opacity:1;transform:translateX(-50%) scale(1);}50%{opacity:.7;transform:translateX(-50%) scale(1.15);}}
.cta-band > *{position:relative;z-index:1;}
.cta-band h2{font-size:25px;font-weight:700;}
.cta-band p{color:var(--text-dim);font-size:14px;margin:10px auto 22px;max-width:480px;}
@media (prefers-reduced-motion:reduce){
  .cta-band::before{animation:none;}
}

/* ---- Footer ---- */
footer{border-top:1px solid var(--border-soft);padding:24px 0;}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
footer .fine{font-size:12px;color:var(--text-faint);}
footer .foot-links{display:flex;gap:18px;}
footer .foot-links a{font-size:12.5px;color:var(--text-dim);position:relative;}
footer .foot-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:var(--text-dim);
  transition:right .2s ease;
}
footer .foot-links a:hover{color:var(--text);text-decoration:none;}
footer .foot-links a:hover::after{right:0;}

@media (max-width:900px){
  .features{grid-template-columns:repeat(2,1fr);}
  .consoles{grid-template-columns:1fr;}
  .consoles-divider{display:none;}
}
@media (max-width:767.98px){
  .nav-links{display:none;}
  .menu-btn{display:flex;}
  .hero h1{font-size:30px;}
  .hero-stats{gap:24px;}
  section{padding:30px 0;}
  .features{grid-template-columns:1fr;}
  .section-head h2{font-size:22px;}
}