:root {
    --electric-green: #22c55e;
    --electric-green-light: #4ade80;
    --electric-blue: #0284c7;
    --electric-blue-light: #0ea5e9;
    --midnight: #0b0f19;
    --dark-panel: #111827;
    --slate-900: #0f172a;
    --slate-600: #475569;
    --slate-100: #f1f5f9;
    --page-light: #f8fafc;
    --white: #ffffff;
    --warning: #f59e0b;
    --danger: #ef4444;
    --text-muted: #9aa7ba;
    --glass: rgba(17, 24, 39, 0.66);
    --glass-border: rgba(255, 255, 255, 0.1);
    --container: 1200px;
    --header-height: 78px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --shadow-green: 0 18px 55px rgba(34, 197, 94, 0.18);
    --brand-action-gradient: linear-gradient(120deg, #0284c7 0%, #0ea5e9 38%, #22c55e 100%);
    --brand-action-border: rgba(56, 189, 248, .48);
    --brand-action-shadow: 0 0 18px rgba(14,165,233,.28), 0 0 24px rgba(34,197,94,.24), inset 0 1px 0 rgba(255,255,255,.3);
    --brand-action-shadow-hover: 0 0 26px rgba(14,165,233,.45), 0 0 34px rgba(34,197,94,.38), 0 12px 28px rgba(2,132,199,.2);
}

[data-theme="light"] {
    --midnight: #f8fafc;
    --dark-panel: #ffffff;
    --slate-900: #0f172a;
    --slate-600: #475569;
    --slate-100: #0f172a;
    --page-light: #ffffff;
    --white: #0f172a;
    --text-muted: #475569;
    --glass: rgba(255, 255, 255, .75);
    --glass-border: rgba(15, 23, 42, .1);
    --card-border: rgba(0, 0, 0, .08);
    --glass-bg: rgba(255, 255, 255, .75);
    --electric-green: #16a34a;
    --electric-green-light: #15803d;
    --electric-blue: #0284c7;
    --electric-blue-light: #0369a1;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(circle at 15% -10%, rgba(2, 132, 199, 0.14), transparent 32rem),
        var(--midnight);
    color: var(--slate-100);
    font-family: Manrope, Inter, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--white); line-height: 1.08; letter-spacing: -0.035em; }
h1 { max-width: 780px; margin-bottom: 24px; font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 800; }
h2 { margin-bottom: 20px; font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { margin-bottom: 12px; font-size: 1.25rem; }
p { color: var(--text-muted); }

.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.section { position: relative; padding: 120px 0; overflow: clip; }
.section--compact { padding-top: 72px; }
.section-heading { max-width: 680px; margin-bottom: 54px; }
.section-heading > p:last-child { font-size: 1.08rem; }
.eyebrow {
    margin-bottom: 16px;
    color: var(--electric-green-light);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 10px 16px; transform: translateY(-160%); border-radius: 10px; background: var(--white); color: var(--midnight); }
.skip-link:focus { transform: translateY(0); }

.site-header { position:sticky; z-index:1000; top:0; height:var(--header-height); border-bottom:1px solid rgba(255,255,255,.08); background:rgba(17,24,39,.7); box-shadow:0 10px 35px rgba(0,0,0,.08); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transition:background .25s ease,border-color .25s ease,box-shadow .25s ease; }
.site-header.is-scrolled { background:rgba(11,15,25,.86); box-shadow:0 16px 42px rgba(0,0,0,.18); }
.site-header__inner { display:flex; height:100%; align-items:center; gap:32px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__logo { width: auto; display: block; object-fit: contain; }
.brand__logo--mark { height:40px; }
.brand__logo--text { height:40px; max-width:285px; }
.brand__name { color: var(--white); font-size: 1.08rem; font-weight: 800; letter-spacing: -.04em; }
.brand__name span { color: var(--electric-green-light); }
.primary-nav { display:flex; align-items:center; gap:28px; margin-inline:auto; }
.primary-nav a { position:relative; padding:29px 0 27px; color:#c4ccda; font-size:.84rem; font-weight:500; transition:color .22s ease; }
.primary-nav a::after { content:''; position:absolute; right:0; bottom:20px; left:0; height:1px; border-radius:999px; background:linear-gradient(90deg,#22c55e,#0ea5e9); box-shadow:0 0 9px rgba(34,197,94,.5); transform:scaleX(0); transform-origin:right; transition:transform .28s ease; }
.primary-nav a:hover,.primary-nav a.is-active { color:#fff; }
.primary-nav a:hover::after,.primary-nav a.is-active::after { transform:scaleX(1); transform-origin:left; }
.header-actions { display:flex; align-items:center; gap:12px; }
.language-dropdown { position:relative; flex:0 0 auto; }
.language-dropdown summary { display:flex; min-width:64px; height:42px; align-items:center; justify-content:center; gap:8px; padding:0 11px; border:1px solid rgba(255,255,255,.11); border-radius:14px; background:rgba(255,255,255,.045); color:#fff; cursor:pointer; list-style:none; transition:border-color .2s ease,background .2s ease,transform .2s ease; }
.language-dropdown summary::-webkit-details-marker { display:none; }
.language-dropdown summary:hover { transform:translateY(-1px); border-color:rgba(74,222,128,.35); background:rgba(255,255,255,.08); }
.language-dropdown summary strong { font-size:.7rem; font-weight:600; letter-spacing:.06em; }
.language-dropdown summary svg { width:10px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .2s ease; }
.language-dropdown[open] summary svg { transform:rotate(180deg); }
.language-dropdown__menu { position:absolute; z-index:1100; top:calc(100% + 10px); right:0; width:164px; padding:7px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(11,15,25,.96); box-shadow:0 22px 55px rgba(0,0,0,.38); backdrop-filter:blur(20px); }
.language-dropdown__menu a { display:grid; grid-template-columns:30px 1fr; align-items:center; gap:8px; padding:10px; border-radius:10px; color:#fff; }
.language-dropdown__menu a:hover { background:rgba(34,197,94,.1); }
.language-dropdown__menu strong { font-size:.72rem; font-weight:700; }
.language-dropdown__menu small { color:#9aa7ba; font-size:.66rem; }
.header-cta { display:inline-flex; min-height:44px; align-items:center; gap:8px; padding:0 19px; border:1px solid var(--brand-action-border); background:var(--brand-action-gradient); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.045em; text-shadow:0 1px 8px rgba(3,25,40,.25); box-shadow:var(--brand-action-shadow); backdrop-filter:blur(14px); }
.header-cta__icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
.header-cta:hover { transform:translateY(-2px); box-shadow:var(--brand-action-shadow-hover); }
.theme-toggle { position: relative; display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--glass-border); border-radius: 50%; background: var(--glass); color: var(--white); cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.theme-toggle:hover { transform: translateY(-2px); border-color: rgba(74,222,128,.38); }
.theme-toggle__sun, .theme-toggle__moon { position: absolute; width: 18px; height: 18px; transition: opacity .2s ease, transform .25s ease; }
.theme-toggle__sun { opacity: 0; transform: rotate(-45deg) scale(.7); }
.theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle__sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle__moon { opacity: 0; transform: rotate(45deg) scale(.7); }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 0; background: transparent; }
.menu-toggle span:not(.sr-only) { display: block; width: 100%; height: 2px; margin: 6px 0; background: var(--white); }

.hero { min-height: calc(100svh - var(--header-height)); display: grid; align-items: center; padding-top: 64px; }
.hero--fullbleed { position: relative; isolation: isolate; display: grid; min-height: clamp(680px, calc(100svh - 76px), 920px); align-items: center; overflow: hidden; background: #07101c; }
.hero__backdrop { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__scrim { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(11,15,25,.94) 0%, rgba(11,15,25,.86) 35%, rgba(11,15,25,.3) 65%, rgba(11,15,25,.08) 100%), linear-gradient(0deg, rgba(6,10,17,.38), transparent 55%); }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); align-items: center; min-height: inherit; gap: 40px; padding-block: 100px 82px; }
.hero__content { position: relative; z-index: 5; max-width: 640px; }
.hero--fullbleed .hero__content, .hero--fullbleed .hero__lead, .hero--fullbleed .trust-line { color: rgba(255,255,255,.82); }
.hero--fullbleed .hero__title { color: #fff; text-shadow: 0 8px 32px rgba(0,0,0,.28); }
.hero--fullbleed .button--ghost { color:#fff; border-color:rgba(56,189,248,.38); background:rgba(11,15,25,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(12px); }
.hero--fullbleed .button--ghost:hover { border-color:rgba(56,189,248,.65); background:rgba(14,165,233,.17); box-shadow:0 12px 30px rgba(2,132,199,.18); }
.hero__lead { max-width: 670px; margin-bottom: 34px; font-size: clamp(1.05rem, 1.7vw, 1.28rem); }
.hero__title { font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.15; }
.hero__title span { color: var(--electric-green); background: linear-gradient(135deg, #22c55e, #0ea5e9); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.trust-line { margin: 22px 0 0; font-size: .78rem; }
.trust-line span { color: var(--electric-green-light); }
.hero__glow { position: absolute; width: 440px; height: 440px; border-radius: 50%; filter: blur(105px); opacity: .15; pointer-events: none; }
.hero__glow--green { right: -120px; top: 8%; background: var(--electric-green); }
.hero__glow--blue { right: 25%; bottom: -240px; background: var(--electric-blue); }
.hero-hud { position: relative; align-self: stretch; min-height: 560px; pointer-events: none; }
.hero-route-motion { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-route-motion path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-route-motion__base { stroke: rgba(14,165,233,.28); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(14,165,233,.45)); }
.hero-route-motion__pulse { stroke: #b9fff0; stroke-width: 5; stroke-dasharray: 18 180; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 7px #22c55e); }
.hero-route-motion.is-route-active .hero-route-motion__pulse { opacity: .95; animation: hero-route-pulse 2.8s linear infinite; }
@keyframes hero-route-pulse { to { stroke-dashoffset: -396; } }
.hud-waypoint { position: absolute; z-index: 4; display: grid; grid-template-columns: 12px auto; gap: 1px 10px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: #fff; background: rgba(7,15,26,.62); box-shadow: 0 14px 35px rgba(0,0,0,.28), inset 0 0 28px rgba(14,165,233,.06); backdrop-filter: blur(16px); animation: hud-float 4s ease-in-out infinite; }
.hud-waypoint i { grid-row: 1 / 3; align-self: center; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.15), 0 0 18px #22c55e; animation: hud-pulse 1.8s ease-out infinite; }
.hud-waypoint strong { font-size: .78rem; white-space: nowrap; }
.hud-waypoint span { color: rgba(255,255,255,.68); font-size: .66rem; }
.hud-waypoint--start { left: 3%; bottom: 11%; }
.hud-waypoint--charge { left: 43%; top: 42%; animation-delay: -.9s; }
.hud-waypoint--charge i { background: #f59e0b; box-shadow: 0 0 0 5px rgba(245,158,11,.14), 0 0 18px #f59e0b; }
.hud-waypoint--finish { right: 0; top: 14%; animation-delay: -1.8s; }
.hud-waypoint--finish i { background: #0ea5e9; box-shadow: 0 0 0 5px rgba(14,165,233,.15), 0 0 18px #0ea5e9; }
@keyframes hud-float { 50% { transform: translate3d(0,-8px,0); } }
@keyframes hud-pulse { 70%,100% { box-shadow: 0 0 0 10px transparent, 0 0 18px currentColor; } }
.simulator-stage { z-index: 3; margin-top: 0; padding: 110px 0; overflow: hidden; background: radial-gradient(circle at 80% 50%, rgba(2,132,199,.11), transparent 38%); }
.simulator-lab { display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); align-items: center; gap: clamp(44px,6vw,92px); }
.simulator-stage__inner { width: 100%; pointer-events: auto; }
.simulator-stage .range-simulator { background: rgba(17,24,39,.75); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); backdrop-filter: blur(20px); }
[data-theme="light"] .simulator-stage .range-simulator { background: rgba(255,255,255,.82); box-shadow: 0 26px 70px rgba(15,23,42,.1); }
.simulator-lab__visual { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(14,165,233,.2); border-radius: 28px; background: #07101c; box-shadow: 0 35px 90px rgba(0,0,0,.32); }
.simulator-lab__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(4,10,18,.82)); pointer-events: none; }
.simulator-lab__visual img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.simulator-lab__visual figcaption { position: absolute; z-index: 2; left: 22px; bottom: 18px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.78); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.simulator-lab__visual figcaption span { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 15px #22c55e; }

.range-simulator { position: relative; display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); grid-template-areas: "intro result" "meter meter" "controls controls" "insight insight"; column-gap: 26px; padding: 26px 28px; overflow: hidden; }
.range-simulator::before { content: ''; position: absolute; width: 280px; height: 280px; right: -140px; top: -150px; border-radius: 50%; background: var(--electric-green); opacity: .08; filter: blur(40px); }
.simulator-header { position: relative; grid-area: intro; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.simulator-header h2 { max-width: 420px; margin-bottom: 25px; font-size: clamp(1.45rem, 2.6vw, 2rem); }
.live-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid rgba(74,222,128,.18); border-radius: 999px; background: rgba(34,197,94,.07); color: #9ee8b8; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.live-badge > span { width: 6px; height: 6px; border-radius: 50%; background: var(--electric-green); box-shadow: 0 0 10px var(--electric-green); }
.simulator-range { grid-area: result; display: flex; min-height: 100px; align-items: flex-end; justify-content: space-between; gap: 18px; padding-left: 24px; border-left: 1px solid var(--glass-border); }
.simulator-range > div > span { display: block; color: var(--text-muted); font-size: .72rem; }
.simulator-range strong { color: var(--white); font-size: clamp(2.3rem, 4vw, 3.3rem); line-height: 1; letter-spacing: -.06em; }
.simulator-range strong small { color: #7d899b; font-size: 1rem; letter-spacing: 0; }
.climate-loss { padding-bottom: 5px; text-align: right; }
.climate-loss strong { display: block; margin-top: 5px; color: var(--electric-blue-light); font-size: 1.35rem; letter-spacing: -.03em; }
.range-meter { grid-area: meter; height: 12px; margin: 20px 0 24px; overflow: hidden; border: 1px solid rgba(14,165,233,.18); border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 3px rgba(0,0,0,.28); }
.range-meter span { display: block; width: 79%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--electric-blue-light), var(--electric-green-light)); box-shadow: 0 0 20px rgba(34,197,94,.58); transition: width .55s cubic-bezier(.2,.7,.2,1); }
.simulator-controls { grid-area: controls; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.control-group { display: block; }
.control-label { display: flex; min-height: 26px; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #aeb9ca; font-size: .7rem; }
.control-label strong { color: var(--white); font-size: .75rem; }
.control-group input[type='range'] { --temperature-color: #facc15; width: 100%; height: 12px; margin: 14px 0; appearance: none; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: linear-gradient(90deg, #0284c7 0%, #38bdf8 24%, #facc15 53%, #fb923c 76%, #ef4444 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,.28), 0 0 0 1px rgba(14,165,233,.08); cursor: pointer; }
.control-group input[type='range']::-webkit-slider-thumb { width: 34px; height: 34px; appearance: none; border: 5px solid var(--white); border-radius: 50%; background: var(--temperature-color); box-shadow: 0 3px 12px rgba(0,0,0,.35), 0 0 16px color-mix(in srgb, var(--temperature-color) 60%, transparent); }
.control-group input[type='range']::-moz-range-thumb { width: 24px; height: 24px; border: 5px solid var(--white); border-radius: 50%; background: var(--temperature-color); box-shadow: 0 3px 12px rgba(0,0,0,.35), 0 0 16px color-mix(in srgb, var(--temperature-color) 60%, transparent); }
.range-labels { display: flex; justify-content: space-between; color: #5e6b7e; font-size: .6rem; }
.select-shell { position: relative; display: block; }
.select-shell::after { content: '⌄'; position: absolute; right: 13px; top: 50%; transform: translateY(-58%); color: #8793a5; pointer-events: none; }
.select-shell select { width: 100%; height: 45px; padding: 0 38px 0 13px; appearance: none; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; outline: none; background: rgba(255,255,255,.035); color: var(--white); font-size: .72rem; }
.select-shell select:focus { border-color: rgba(14,165,233,.55); }
.select-shell option { background: var(--dark-panel); }
.simulator-insight { grid-area: insight; display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 12px 14px; border: 1px solid rgba(14,165,233,.14); border-radius: 12px; background: rgba(2,132,199,.055); }
.simulator-insight span { color: var(--electric-blue-light); }
.simulator-insight p { margin: 0; font-size: .7rem; }

.stats-section { border-block: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.018); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-item { position: relative; display: flex; min-height: 150px; align-items: center; justify-content: center; flex-direction: column; padding: 28px 20px; text-align: center; }
.stat-item + .stat-item::before { content: ''; position: absolute; left: 0; top: 28%; bottom: 28%; width: 1px; background: rgba(255,255,255,.08); }
.stat-item strong { color: var(--white); font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.05em; }
.stat-item > span { max-width: 180px; color: #79869a; font-size: .68rem; }

.section-heading--center { margin-inline: auto; text-align: center; }
.compatibility-section { position: relative; z-index: 4; overflow: visible; background: radial-gradient(circle at 50% 40%, rgba(2,132,199,.08), transparent 30rem); }
.compatibility-section .container { overflow: visible; }
.vehicle-search { position: relative; z-index: 10000; isolation: isolate; display: flex; width: min(100%, 740px); min-height: 70px; align-items: center; gap: 14px; margin: 0 auto; padding: 10px 18px; overflow: visible; }
.vehicle-search__icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: rgba(14,165,233,.09); color: var(--electric-blue-light); font-size: 1.4rem; }
.vehicle-search input { width: 100%; height: 48px; border: 0; outline: none; background: transparent; color: var(--white); font-size: .95rem; }
.vehicle-search input::placeholder { color: #6d798b; }
.vehicle-search__hint { flex: 0 0 auto; color: #5e6b7e; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.autocomplete-list { position: absolute; z-index: 9999; top: calc(100% + 8px); left: 0; right: 0; max-height: 360px; padding: 8px; overflow: hidden auto; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background-color: #111827; background-image: none; box-shadow: 0 20px 40px rgba(0,0,0,.62); opacity: 1; backdrop-filter: none; }
.autocomplete-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--white); text-align: left; cursor: pointer; }
.autocomplete-option:hover, .autocomplete-option.is-active { background: rgba(34,197,94,.1); }
.autocomplete-option span { font-size: .82rem; font-weight: 700; }
.autocomplete-option small { color: #6f7d90; }
.autocomplete-empty { padding: 16px; color: var(--text-muted); font-size: .82rem; text-align: center; }
.vehicle-support-message { width: min(100%, 740px); margin: 12px auto 0; padding: 15px 18px; border-color: rgba(74,222,128,.2); color: #b9f5ce; font-size: .82rem; }
.vehicle-support-message strong { color: var(--white); }
.vehicle-support-message { width: min(100%,740px); margin: 18px auto 0; }
.ev-spec-card { width: min(100%,900px); margin: 22px auto 0; padding: 28px; transform-origin: top center; animation: spec-card-in .42s cubic-bezier(.2,.75,.25,1) both; }
.ev-spec-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.ev-spec-card__head h3 { margin: 0; font-size: clamp(1.35rem,2.5vw,2rem); }
.ev-spec-card__badge { display: inline-flex; align-items: center; gap: 7px; max-width: 390px; padding: 8px 12px; border: 1px solid rgba(34,197,94,.22); border-radius: 999px; color: var(--electric-green-light); background: rgba(34,197,94,.08); font-size: .7rem; font-weight: 800; }
.ev-spec-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.ev-spec-item { min-height: 122px; padding: 18px; border: 1px solid var(--glass-border); border-radius: 16px; background: rgba(2,132,199,.045); }
.ev-spec-item > span { display: block; margin-bottom: 11px; color: var(--text-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ev-spec-item strong { display: block; color: var(--white); font-size: 1.05rem; }
.ev-spec-item small { display: block; margin-top: 7px; color: var(--text-muted); line-height: 1.45; }
@keyframes spec-card-in { from { opacity: 0; transform: translateY(-12px) scale(.985); } }
.brand-marquee { position: relative; z-index: 1; width: 100%; margin-top: 65px; overflow: hidden; color: var(--white); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.brand-marquee__track { display: flex; width: max-content; animation: infiniteScroll 34s linear infinite; }
.brand-marquee:hover .brand-marquee__track { animation-play-state: paused; }
.brand-marquee__set { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(42px,5vw,76px); padding-right: clamp(42px,5vw,76px); }
.brand-marquee img { display: block; width: auto; height: 38px; opacity: .68; object-fit: contain; transition: opacity .22s ease,filter .22s ease,transform .22s ease; }
.brand-marquee .brand-logo--mono,.brand-marquee .brand-logo--dark { filter:grayscale(1) brightness(0) invert(1); }
.brand-marquee .brand-logo--color { filter:saturate(.85) brightness(.95); }
.brand-marquee img:hover { opacity:1; transform:translateY(-2px) scale(1.05); filter:drop-shadow(0 0 10px rgba(14,165,233,.7)) drop-shadow(0 0 16px rgba(34,197,94,.36)); }
.brand-marquee .brand-logo--mono:hover,.brand-marquee .brand-logo--dark:hover { filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(14,165,233,.7)); }
@keyframes infiniteScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.battery-section { background: #070b12; }
.battery-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 90px; }
.battery-photo { position: relative; min-height: 470px; margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: 0 32px 90px rgba(0,0,0,.32); }
.battery-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,10,18,.34)); pointer-events: none; }
.battery-photo img { width: 100%; height: 470px; object-fit: cover; }
.battery-photo__glow { position: absolute; z-index: 2; width: 44%; height: 5px; left: 9%; bottom: 17%; transform: rotate(5deg); border-radius: 99px; background: linear-gradient(90deg, transparent, var(--electric-blue-light), var(--electric-green-light), transparent); filter: blur(1px); box-shadow: 0 0 18px rgba(14,165,233,.55); opacity: .75; }
.battery-copy > p:not(.eyebrow) { max-width: 600px; }
.check-list, .plan-features { padding: 0; margin: 30px 0; list-style: none; }
.check-list { display: grid; gap: 14px; }
.check-list li { position: relative; padding-left: 28px; color: #a2aec0; font-size: .88rem; }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--electric-green-light); font-weight: 800; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--electric-blue-light); font-size: .82rem; font-weight: 800; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.battery-dashboard { position: relative; padding: 30px; overflow: hidden; }
.battery-dashboard__image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.battery-dashboard::after { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(120deg, rgba(7,11,18,.88), rgba(7,11,18,.45)); pointer-events: none; }
.battery-dashboard > :not(.battery-dashboard__image) { z-index: 1; }
.energy-cable { position: absolute; z-index: 2; width: 58%; height: 7px; left: 18%; bottom: 32%; transform: rotate(-8deg); overflow: hidden; border-radius: 999px; background: rgba(5,12,20,.82); box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 0 14px rgba(14,165,233,.22); pointer-events: none; }
.energy-cable::before { content: ''; position: absolute; inset: 2px; border-radius: inherit; background: linear-gradient(90deg, rgba(14,165,233,.15), var(--charge-color, #ef4444), rgba(14,165,233,.15)); }
.energy-cable span { position: absolute; top: 1px; width: 20px; height: 5px; border-radius: 99px; background: #dffcff; box-shadow: 0 0 12px var(--charge-color, #ef4444); animation: energy-pulse 1.35s linear infinite; }
.energy-cable span:nth-child(2) { animation-delay: -.45s; }.energy-cable span:nth-child(3) { animation-delay: -.9s; }
@keyframes energy-pulse { from { left: -24px; } to { left: calc(100% + 24px); } }
.battery-dashboard::before { content: ''; position: absolute; inset: auto 12% -35% 12%; height: 250px; background: var(--electric-green); opacity: .1; filter: blur(70px); }
.battery-dashboard__top { position: relative; display: flex; align-items: center; justify-content: space-between; color: #a5b0c1; font-size: .78rem; }
.battery-visual { display: grid; min-height: 250px; place-items: center; }
.battery-shell { position: relative; width: 205px; height: 94px; padding: 7px; border: 3px solid #8490a1; border-radius: 18px; }
.battery-shell::after { content: ''; position: absolute; width: 7px; height: 34px; right: -11px; top: 27px; border-radius: 0 5px 5px 0; background: #8490a1; }
.battery-fill { position: absolute; inset: 7px auto 7px 7px; width: calc(78% - 14px); border-radius: 9px; background: linear-gradient(90deg, var(--electric-blue-light), var(--electric-green-light)); box-shadow: 0 0 28px rgba(34,197,94,.3); transition: width 1.1s cubic-bezier(.2,.7,.2,1), background .4s ease; }
.battery-shell > span { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: var(--white); font-size: 1.65rem; font-weight: 800; }
.soc-route { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 18px; text-align: center; }
.soc-route__line { position: absolute; top: 4px; left: 16.5%; right: 16.5%; height: 2px; background: rgba(255,255,255,.08); }
.soc-route__line span { display: block; width: 78%; height: 100%; background: linear-gradient(90deg, var(--electric-green), var(--warning)); }
.soc-route > div:not(.soc-route__line) { position: relative; }
.soc-route > div:not(.soc-route__line)::before { content: ''; position: absolute; width: 8px; height: 8px; top: -18px; left: calc(50% - 4px); border-radius: 50%; background: var(--electric-green-light); box-shadow: 0 0 9px rgba(74,222,128,.7); }
.soc-route > div:nth-child(4)::before { background: var(--warning); }
.soc-route strong, .soc-route span { display: block; }
.soc-route strong { color: var(--white); font-size: .9rem; }
.soc-route span { color: #69768a; font-size: .62rem; }
.battery-alert { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 25px; padding: 12px 14px; border-radius: 11px; background: rgba(34,197,94,.07); }
.battery-alert > span { color: var(--electric-green-light); }
.battery-alert p { margin: 0; font-size: .68rem; }
.battery-orbit { position: absolute; border: 1px solid rgba(14,165,233,.1); border-radius: 50%; pointer-events: none; }
.battery-orbit--one { width: 520px; height: 520px; right: -280px; top: 10%; }
.battery-orbit--two { width: 300px; height: 300px; left: -190px; bottom: -80px; }

.network-section { background: linear-gradient(180deg, var(--midnight), #0d121d); }
.network-experience { display: grid; grid-template-columns: minmax(0,45fr) minmax(0,55fr); align-items: center; gap: clamp(42px,6vw,90px); }
.network-intro { min-width: 0; }
.network-intro .section-heading { margin-bottom: 30px; }
.network-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.network-filters button { padding: 10px 14px; border: 1px solid var(--glass-border); border-radius: 999px; color: var(--text-muted); background: rgba(17,24,39,.5); font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; transition: .25s ease; }
.network-filters button:hover { border-color:rgba(14,165,233,.38); color:var(--white); background:rgba(14,165,233,.1); }
.network-filters button.is-active { border-color:var(--brand-action-border); color:#fff; background:var(--brand-action-gradient); box-shadow:0 0 18px rgba(14,165,233,.2),0 0 20px rgba(34,197,94,.16); }
.network-map { position: relative; min-height: 440px; overflow: hidden; background: radial-gradient(circle at 65% 45%,rgba(14,165,233,.12),transparent 40%),rgba(7,12,21,.92); box-shadow: 0 35px 90px rgba(0,0,0,.3); }
.network-map::before { content:''; position:absolute; inset:0; opacity:.16; background-image: linear-gradient(rgba(14,165,233,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.2) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(#000,transparent 92%); }
.network-map svg { position:absolute; inset:48px 20px 34px; width:calc(100% - 40px); height:calc(100% - 82px); overflow:visible; }
.network-map__outline { fill:rgba(15,23,42,.78); stroke:url(#balkanGlow); stroke-width:2; filter:drop-shadow(0 0 12px rgba(14,165,233,.24)); }
.network-map__route { fill:none; stroke:rgba(14,165,233,.3); stroke-width:2; stroke-dasharray:5 10; }
.network-map__top { position:absolute; z-index:3; top:18px; right:20px; left:20px; display:flex; align-items:center; justify-content:space-between; color:rgba(255,255,255,.55); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.network-map__top span { display:flex; align-items:center; gap:7px; }
.network-map__top i { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 12px #22c55e; }
.network-map__top strong { color:rgba(255,255,255,.82); }
.network-marker { color:#0ea5e9; opacity:.72; transition:opacity .3s ease,filter .3s ease; }
.network-marker circle:last-child { fill:currentColor; filter:drop-shadow(0 0 7px currentColor); }
.network-marker__pulse { fill:none; stroke:currentColor; stroke-width:2; transform-origin:center; animation:network-pulse 2.4s ease-out infinite; }
.network-marker:nth-of-type(3n) { color:#22c55e; }
.network-marker.is-muted { opacity:.07; }
.network-marker.is-highlighted { opacity:1; filter:drop-shadow(0 0 10px currentColor); }
.network-marker.is-highlighted .network-marker__pulse { animation-duration:.85s; }
@keyframes network-pulse { 0% { transform:scale(.35); opacity:1; } 80%,100% { transform:scale(1.25); opacity:0; } }
.network-map__legend { position:absolute; z-index:3; right:18px; bottom:14px; display:flex; gap:14px; color:rgba(255,255,255,.5); font-size:.6rem; }
.network-map__legend span { display:flex; align-items:center; gap:5px; }
.network-map__legend i { width:6px; height:6px; border-radius:50%; background:#0ea5e9; }
.network-map__legend i.is-live { background:#22c55e; }
.operator-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:4px; }
.operator-card { appearance:none; position:relative; display:grid; min-height:146px; align-content:center; justify-items:center; padding:20px 16px; overflow:hidden; border:1px solid rgba(255,255,255,.08); color:var(--white); background:rgba(17,24,39,.6); backdrop-filter:blur(12px); cursor:pointer; text-align:center; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,opacity .25s ease; }
.operator-card:hover,.operator-card.is-active { transform:translateY(-5px); border-color:var(--operator-color); box-shadow:0 18px 45px color-mix(in srgb,var(--operator-color) 20%,transparent); }
.operator-card.is-filtered { display:none; }
.operator-card__logo { display:flex; width:100%; height:60px; align-items:center; justify-content:center; }
.operator-card__logo img { display:block; width:auto; max-width:min(190px,90%); height:auto; max-height:40px; object-fit:contain; transition:transform .3s ease,filter .3s ease; }
.operator-card:hover .operator-card__logo img,.operator-card.is-active .operator-card__logo img { transform:scale(1.05); }
.operator-card__details { display:flex; width:100%; justify-content:center; gap:12px; margin-top:10px; color:#7e8a9d; font-size:.62rem; opacity:.32; transform:translateY(7px); transition:.3s ease; }
.operator-card:hover .operator-card__details,.operator-card.is-active .operator-card__details { opacity:1; transform:translateY(0); }
.operator-card__details .is-live { color:#4ade80; }
[data-theme="dark"] .operator-card__logo img[src$=".svg?v=1"] { filter:brightness(0) invert(1); }
[data-theme="dark"] .operator-card__logo img[src*="electrip-logo.svg"],[data-theme="dark"] .operator-card__logo img[src*="vsichkotok-logo.webp"] { filter:brightness(0) invert(1); }

.pricing-preview { background: #090d16; }
.plan-grid { display: grid; width: min(100%, 900px); grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0 auto; }
.plan-card { position: relative; display: flex; min-height: 500px; flex-direction: column; padding: 34px; }
.plan-card--premium { border-color: rgba(74,222,128,.35); background: linear-gradient(145deg, rgba(34,197,94,.09), rgba(17,24,39,.72) 42%); box-shadow: 0 30px 100px rgba(34,197,94,.08); }
.popular-badge { position: absolute; top: 0; right: 28px; padding: 7px 12px; transform: translateY(-50%); border-radius: 999px; background: var(--electric-green); color: #07130a; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.plan-card__header { min-height: 105px; border-bottom: 1px solid rgba(255,255,255,.08); }
.plan-card__header > div { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.plan-card__header span { color: #8290a4; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.plan-card__header strong { color: var(--white); font-size: 2.25rem; letter-spacing: -.05em; }
.plan-card__header strong small { color: #788498; font-size: .68rem; letter-spacing: 0; }
.plan-card__header > small { color: var(--electric-green-light); font-size: .66rem; }
.plan-features { display: grid; flex: 1; gap: 14px; }
.plan-features li { position: relative; padding-left: 27px; color: #a4afc0; font-size: .8rem; }
.plan-features li::before { position: absolute; left: 0; font-weight: 800; }
.plan-features .is-included::before { content: '✓'; color: var(--electric-green-light); }
.plan-features .is-muted { color: #5e697a; }
.plan-features .is-muted::before { content: '–'; color: #5e697a; }
.pricing-more { margin-top: 28px; text-align: center; }
.section--cta { padding-top: 72px; }
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 54px; background: linear-gradient(130deg, rgba(2,132,199,.14), rgba(34,197,94,.09)); }
.cta-panel h2 { max-width: 700px; }
.cta-panel p:last-child { margin-bottom: 0; }

.site-footer { padding: 76px 0 24px; border-top: 1px solid var(--glass-border); background: #080b12; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 70px; }
.footer-grid h2 { margin-bottom: 22px; color: #758297; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 11px; }
.footer-grid a:not(.brand) { color: #9aa7ba; font-size: .84rem; }
.footer-grid a:hover { color: var(--white); }
.footer-brand p { max-width: 340px; margin-top: 22px; font-size: .85rem; }
.footer-brand__logo { width: min(260px, 100%); height: auto; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.06); }
.footer-bottom p, .footer-status { margin: 0; color: #8290a4; font-size: .72rem; }
.footer-status { display: flex; align-items: center; gap: 8px; }
.footer-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--electric-green); box-shadow: 0 0 10px var(--electric-green); }
.placeholder-page { min-height: 68vh; display: grid; place-items: center; text-align: center; }
.placeholder-page__inner { max-width: 700px; }
.placeholder-page h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.placeholder-page p:not(.eyebrow) { max-width: 620px; margin: 0 auto 30px; }

/* Inner pages */
.inner-hero { min-height: 630px; display: grid; align-items: center; padding: 105px 0; background: radial-gradient(circle at 75% 35%, rgba(2,132,199,.12), transparent 28rem); }
.inner-hero__content { position: relative; max-width: 900px; text-align: left; }
.inner-hero__content h1 { max-width: 900px; }
.inner-hero__content > p:not(.eyebrow) { max-width: 680px; font-size: 1.12rem; }
.inner-hero__content .button { margin-top: 12px; }
.inner-hero__glow { position: absolute; width: 500px; height: 500px; right: -220px; top: 8%; border-radius: 50%; background: var(--electric-green); opacity: .08; filter: blur(100px); }
.content-page-section { padding-top: 40px; }
.content-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.content-card { padding: 32px; }
.content-card h2 { font-size: 1.45rem; }
.content-card__icon { display: grid; width: 48px; height: 48px; margin-bottom: 30px; place-items: center; border: 1px solid rgba(14,165,233,.2); border-radius: 14px; background: rgba(14,165,233,.07); color: var(--electric-blue-light); }
.prose-panel { padding: 42px; }
.prose-panel p { max-width: 850px; margin-bottom: 0; }

/* Pricing */
.pricing-hero { min-height: 570px; text-align: center; }
.pricing-hero .inner-hero__content { margin-inline: auto; text-align: center; }
.pricing-hero .inner-hero__content > p { margin-inline: auto; }
.billing-switch { display: inline-flex; margin-top: 26px; padding: 5px; border: 1px solid var(--glass-border); border-radius: 14px; background: rgba(255,255,255,.035); }
.billing-switch button { position: relative; min-width: 140px; min-height: 45px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; color: #8895a8; font-size: .78rem; font-weight: 800; cursor: pointer; }
.billing-switch button.is-active { background:var(--brand-action-gradient); color:#fff; box-shadow:var(--brand-action-shadow); }
.billing-switch button span { position: absolute; left: 50%; bottom: -27px; width: max-content; transform: translateX(-50%); color: var(--electric-green-light); font-size: .58rem; }
.pricing-detail-section { padding-top: 10px; }
.detailed-plan-grid { display: grid; width: min(100%, 940px); grid-template-columns: repeat(2, 1fr); gap: 22px; }
.detailed-plan { position: relative; padding: 38px; }
.detailed-plan--premium { border-color: rgba(74,222,128,.36); background: linear-gradient(145deg, rgba(34,197,94,.1), rgba(17,24,39,.7) 45%); }
.plan-kicker { color: var(--electric-green-light); font-size: .68rem; font-weight: 800; letter-spacing: .17em; }
.detailed-plan > h2 { font-size: 4rem; }
.detailed-plan > .button { width: 100%; margin: 18px 0 4px; }
.dynamic-price { display: flex; min-height: 72px; align-items: baseline; gap: 5px; }
.dynamic-price > span { color: var(--white); font-size: 1.4rem; font-weight: 800; }
.dynamic-price strong { color: var(--white); font-size: 4rem; line-height: 1; letter-spacing: -.07em; transition: opacity .14s ease, transform .14s ease; }
.dynamic-price strong.is-changing { transform: translateY(6px); opacity: 0; }
.dynamic-price small { color: #768397; font-size: .72rem; }
.comparison-section { padding-top: 70px; }
.comparison-table-wrap { overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; text-align: left; }
.comparison-table th, .comparison-table td { padding: 19px 24px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .78rem; }
.comparison-table thead th { color: #758297; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.comparison-table tbody th { color: #abb6c7; font-weight: 600; }
.comparison-table td { color: #7a879a; }
.comparison-table .premium-value { color: var(--electric-green-light); font-weight: 800; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.accordion { display: grid; gap: 12px; }
.accordion details { padding: 0 22px; }
.accordion summary { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 20px; color: var(--white); font-size: .86rem; font-weight: 700; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span { color: var(--electric-green-light); font-size: 1.4rem; transition: transform .2s ease; }
.accordion details[open] summary span { transform: rotate(45deg); }
.accordion details p { padding: 0 30px 20px 0; font-size: .8rem; }

/* Features */
.feature-showcase { display: grid; gap: 130px; }
.showcase-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.showcase-row--reverse .showcase-copy { order: 2; }
.showcase-row--reverse .showcase-visual { order: 1; }
.showcase-copy { position: relative; }
.showcase-number { position: absolute; right: 0; top: -55px; color: rgba(255,255,255,.035); font-size: 7rem; font-weight: 800; }
.showcase-copy h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
.showcase-visual { position: relative; min-height: 390px; overflow: hidden; background: linear-gradient(145deg, rgba(14,165,233,.08), rgba(17,24,39,.7)); }
.showcase-visual--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase-visual--photo::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 24%, rgba(5,10,18,.82)); pointer-events: none; }
.showcase-visual--photo .visual-grid, .showcase-visual--photo .visual-primary, .showcase-visual--photo .visual-secondary, .showcase-visual--photo i { z-index: 2; }
.showcase-visual--photo::after { z-index: 2; }
.battery-feature-widget { isolation: isolate; min-height: 470px; background: #07101a; }
.battery-feature-widget::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(4,9,16,.06), rgba(4,9,16,.82)); pointer-events: none; }
.battery-feature-widget > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.battery-feature-widget__hud { position: absolute; z-index: 4; right: 28px; bottom: 26px; display: grid; width: min(190px, calc(100% - 56px)); justify-items: center; gap: 11px; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(7,12,20,.72); box-shadow: 0 20px 55px rgba(0,0,0,.4); backdrop-filter: blur(16px); }
.battery-feature-widget__hud > span { color: #8ea0b7; font-size: .58rem; font-weight: 800; letter-spacing: .16em; }
.battery-feature-widget__hud .battery-shell { width: 78px; height: 154px; }
.battery-feature-widget__hud .battery-shell::after { width: 34px; height: 7px; right: auto; top: -11px; left: 19px; border-radius: 5px 5px 0 0; }
.battery-feature-widget__hud .battery-shell strong { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.35rem; }
.battery-feature-widget__hud .battery-fill { inset: auto 7px 7px; width: auto; height: calc(15% - 14px); background: linear-gradient(0deg, #0ea5e9, var(--charge-color, #ef4444)); transition: height 1.1s cubic-bezier(.2,.7,.2,1), background .4s ease; }
.battery-feature-widget__hud small { color: #8ea0b7; font-size: .65rem; }
.visual-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 32px 32px; }
.visual-primary { position: absolute; left: 34px; bottom: 52px; color: var(--white); font-size: 2.6rem; font-weight: 800; letter-spacing: -.06em; }
.visual-secondary { position: absolute; left: 36px; bottom: 32px; color: #718096; font-size: .65rem; }
.showcase-visual i { position: absolute; width: 17px; height: 17px; border: 4px solid #07111c; border-radius: 50%; background: var(--electric-green-light); box-shadow: 0 0 18px rgba(74,222,128,.65); }
.showcase-visual i:nth-of-type(1) { left: 16%; top: 23%; }.showcase-visual i:nth-of-type(2) { left: 54%; top: 49%; }.showcase-visual i:nth-of-type(3) { right: 14%; top: 18%; }
.showcase-visual::after { content: ''; position: absolute; width: 70%; height: 4px; left: 17%; top: 33%; transform: rotate(15deg); transform-origin: left; border-radius: 10px; background: linear-gradient(90deg, var(--electric-blue-light), var(--electric-green-light)); box-shadow: 0 0 20px rgba(14,165,233,.5); }
.showcase-visual--battery::after { width: 62%; height: 88px; left: 19%; top: 30%; transform: none; border: 3px solid #7d899c; border-radius: 17px; background: linear-gradient(90deg, var(--electric-green) 68%, rgba(255,255,255,.05) 68%); }
.showcase-visual--traffic::after { width: 72%; height: 6px; top: 43%; transform: rotate(-12deg); background: linear-gradient(90deg, var(--electric-green), var(--warning), var(--danger)); }
.showcase-visual--filter::after { width: 70%; height: 120px; top: 24%; transform: none; border: 1px solid var(--glass-border); border-radius: 16px; background: rgba(11,15,25,.75); }
.showcase-visual--modes::after { width: 64%; height: 50px; top: 31%; transform: none; border-radius: 999px; background: linear-gradient(90deg, var(--electric-green) 50%, rgba(255,255,255,.05) 50%); }
.showcase-visual--mobile::after { width: 130px; height: 240px; left: calc(50% - 65px); top: 11%; transform: none; border: 6px solid #4d596c; border-radius: 24px; background: #0a101a; }

/* Realtime data */
.section-anchor { position:relative; height:1px; margin-top:-1px; scroll-margin-top:calc(var(--header-height) + 18px); }
.data-hero { min-height: 720px; }
.data-hero-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 65px; }
.data-hero .inner-hero__content h1,.data-hero .inner-hero__content h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
.data-freshness { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; color: #8e9bad; font-size: .72rem; }
.data-freshness span { width: 8px; height: 8px; border-radius: 50%; background: var(--electric-green); box-shadow: 0 0 12px var(--electric-green); }
.data-flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 28px 20px; }
.data-visual-stack { position: relative; min-height: 510px; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: 0 32px 90px rgba(0,0,0,.3); }
.data-visual-stack::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(7,11,18,.86) 77%); pointer-events: none; }
.data-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.data-visual-stack .data-flow { position: absolute; z-index: 2; right: 18px; bottom: 18px; left: 18px; backdrop-filter: blur(16px); }
.story-visual { position: relative; min-height: 520px; margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
.story-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(7,11,18,.9)); pointer-events: none; }
.story-visual img { width: 100%; height: 520px; object-fit: cover; }
.story-visual figcaption { position: absolute; z-index: 2; right: 36px; bottom: 34px; left: 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.story-visual figcaption strong { max-width: 560px; color: #fff; font-size: clamp(1.25rem,2.5vw,2rem); line-height: 1.18; }

/* About */
.about-hero { position:relative; isolation:isolate; display:grid; min-height:clamp(680px,calc(100svh - var(--header-height)),900px); align-items:center; overflow:hidden; background:#07101c; }
.about-hero__image { position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.about-hero__scrim { position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(7,12,21,.94),rgba(7,12,21,.77) 42%,rgba(7,12,21,.12) 78%),linear-gradient(0deg,rgba(7,12,21,.55),transparent 55%); }
.about-hero__content { padding-block:100px; }
.about-hero__content h1 { max-width:760px; color:#fff; font-size:clamp(2.8rem,6vw,5.9rem); line-height:.98; letter-spacing:-.065em; }
.about-hero__content > p:not(.eyebrow) { max-width:650px; color:rgba(255,255,255,.72); font-size:clamp(1rem,1.6vw,1.24rem); }
.about-hero__badge { display:inline-flex; align-items:center; gap:9px; margin-top:20px; padding:9px 13px; border:1px solid rgba(255,255,255,.13); border-radius:999px; color:rgba(255,255,255,.8); background:rgba(7,12,21,.36); backdrop-filter:blur(14px); font-size:.7rem; font-weight:800; }
.about-hero__badge i { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 14px #22c55e; }
.about-story__grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.72fr); align-items:center; gap:clamp(50px,8vw,130px); }
.about-story__copy h2 { max-width:760px; }
.about-story__copy p:not(.eyebrow) { max-width:720px; }
.about-metrics { overflow:hidden; border:1px solid var(--glass-border); border-radius:28px; background:var(--glass-bg); box-shadow:0 28px 80px rgba(0,0,0,.18); backdrop-filter:blur(16px); }
.about-metrics > div { display:flex; min-height:122px; align-items:center; justify-content:space-between; gap:20px; padding:24px 28px; border-bottom:1px solid var(--glass-border); }
.about-metrics > div:last-child { border-bottom:0; }
.about-metrics strong { color:var(--white); font-size:clamp(1.6rem,3vw,2.5rem); letter-spacing:-.06em; }
.about-metrics span { max-width:140px; color:var(--text-muted); font-size:.72rem; text-align:right; text-transform:uppercase; letter-spacing:.08em; }
.about-mission { background:radial-gradient(circle at 50% 0,rgba(34,197,94,.09),transparent 38rem); }
.about-mission__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:50px; }
.about-mission__card { position:relative; min-height:300px; padding:42px; overflow:hidden; }
.about-mission__card > span { display:block; margin-bottom:60px; color:var(--electric-green-light); font-size:.7rem; font-weight:800; letter-spacing:.14em; }
.about-mission__card h3 { font-size:clamp(1.5rem,3vw,2.35rem); }
.about-mission__card p { max-width:540px; }
.about-mission__card::after { content:''; position:absolute; width:180px; height:180px; right:-80px; bottom:-100px; border:1px solid rgba(14,165,233,.16); border-radius:50%; box-shadow:0 0 50px rgba(14,165,233,.06); }
.about-freedom { padding-top:35px; }
.about-freedom__panel { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); align-items:center; gap:60px; min-height:620px; padding:clamp(38px,6vw,82px); overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:36px; color:#fff; background:radial-gradient(circle at 78% 45%,rgba(14,165,233,.2),transparent 30%),radial-gradient(circle at 65% 80%,rgba(34,197,94,.12),transparent 35%),#07101c; box-shadow:0 40px 110px rgba(0,0,0,.3); }
.about-freedom__panel::before { content:''; position:absolute; z-index:-1; inset:0; opacity:.13; background-image:linear-gradient(rgba(14,165,233,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.24) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(90deg,transparent,#000 62%); }
.about-freedom__copy h2 { max-width:780px; color:#fff; font-size:clamp(2.2rem,4.6vw,4.7rem); line-height:1; letter-spacing:-.06em; }
.about-freedom__copy > p:not(.eyebrow) { max-width:700px; color:rgba(255,255,255,.67); }
.about-freedom__copy ul { display:grid; grid-template-columns:repeat(2,1fr); gap:13px 24px; margin:30px 0 0; padding:0; list-style:none; }
.about-freedom__copy li { display:flex; align-items:flex-start; gap:8px; color:rgba(255,255,255,.78); font-size:.75rem; }
.about-freedom__copy li span { color:#4ade80; }
.about-freedom__symbol { position:relative; display:grid; aspect-ratio:1; place-items:center; }
.about-freedom__symbol svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 12px rgba(14,165,233,.35)); }
.about-freedom__symbol path { fill:none; stroke:url(#freedomRoute); stroke-width:4; stroke-linecap:round; stroke-dasharray:12 16; animation:freedom-route 6s linear infinite; }
.about-freedom__symbol circle { fill:#07101c; stroke:url(#freedomRoute); stroke-width:4; }
.about-freedom__symbol strong { position:absolute; bottom:11%; max-width:220px; color:rgba(255,255,255,.76); font-size:.7rem; text-align:center; text-transform:uppercase; letter-spacing:.12em; }
.about-freedom__orbit { position:absolute; width:72%; height:72%; border:1px solid rgba(14,165,233,.18); border-radius:50%; animation:freedom-orbit 12s linear infinite; }
.about-freedom__orbit::after { content:''; position:absolute; top:12%; right:12%; width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 16px #22c55e; }
.about-freedom__orbit--two { width:48%; height:48%; animation-direction:reverse; animation-duration:8s; }
.about-freedom__orbit--two::after { background:#0ea5e9; box-shadow:0 0 16px #0ea5e9; }
@keyframes freedom-route { to { stroke-dashoffset:-112; } }
@keyframes freedom-orbit { to { transform:rotate(360deg); } }
.about-intelligence { padding-top:40px; }
.about-intelligence__visual { position:relative; min-height:600px; margin:0; overflow:hidden; border-radius:32px; background:#06101c; box-shadow:0 40px 110px rgba(0,0,0,.32); }
.about-intelligence__visual::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(4,9,16,.92)); }
.about-intelligence__visual img { width:100%; height:600px; object-fit:cover; }
.about-intelligence__visual figcaption { position:absolute; z-index:2; right:42px; bottom:36px; left:42px; display:flex; align-items:flex-end; justify-content:space-between; gap:28px; }
.about-intelligence__visual figcaption strong { max-width:600px; color:#fff; font-size:clamp(1.35rem,2.8vw,2.35rem); line-height:1.12; }
.about-values__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.about-value { min-height:280px; padding:30px 26px; transition:transform .3s ease,border-color .3s ease; }
.about-value:hover { transform:translateY(-6px); border-color:rgba(34,197,94,.3); }
.about-value > span { display:grid; width:42px; height:42px; place-items:center; margin-bottom:50px; border:1px solid rgba(34,197,94,.2); border-radius:13px; color:var(--electric-green-light); background:rgba(34,197,94,.07); }
.about-value h3 { font-size:1.15rem; }
.about-value p { font-size:.78rem; }
.about-help { background:linear-gradient(180deg,transparent,rgba(2,132,199,.045)); }
.about-help__grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:48px; border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); }
.about-help__card { min-height:260px; padding:36px 34px; border-right:1px solid var(--glass-border); }
.about-help__card:last-child { border-right:0; }
.about-help__card > span { color:var(--electric-blue-light); font-size:.68rem; font-weight:800; }
.about-help__card h3 { margin-top:54px; }
.about-help__card p { font-size:.8rem; }
[data-theme="light"] .about-metrics,[data-theme="light"] .about-mission__card,[data-theme="light"] .about-value { box-shadow:0 24px 70px rgba(15,23,42,.07); }

[data-theme="light"] body { background: radial-gradient(circle at 15% -10%, rgba(2,132,199,.1), transparent 32rem), var(--midnight); }
[data-theme="light"] .site-header,[data-theme="light"] .site-header.is-scrolled { border-color:rgba(15,23,42,.08); background:rgba(248,250,252,.82); box-shadow:0 12px 30px rgba(15,23,42,.06); }
[data-theme="light"] .primary-nav a { color:#475569; }
[data-theme="light"] .primary-nav a:hover,[data-theme="light"] .primary-nav a.is-active { color:#0f172a; }
[data-theme="light"] .language-dropdown summary { border-color:rgba(15,23,42,.1); background:rgba(255,255,255,.64); color:#0f172a; }
[data-theme="light"] .language-dropdown__menu { border-color:rgba(15,23,42,.1); background:rgba(255,255,255,.97); box-shadow:0 22px 55px rgba(15,23,42,.16); }
[data-theme="light"] .language-dropdown__menu a { color:#0f172a; }
[data-theme="light"] .language-dropdown__menu small { color:#64748b; }
[data-theme="light"] .range-simulator, [data-theme="light"] .vehicle-search, [data-theme="light"] .operator-card, [data-theme="light"] .plan-card, [data-theme="light"] .content-card, [data-theme="light"] .data-layer-card { box-shadow: 0 20px 60px rgba(15,23,42,.07); }
[data-theme="light"] .select-shell select { border-color: rgba(15,23,42,.12); background: rgba(255,255,255,.65); }
[data-theme="light"] .autocomplete-list { background-color: #fff; background-image: none; border-color: rgba(15,23,42,.12); box-shadow: 0 25px 65px rgba(15,23,42,.2); }
[data-theme="light"] .brand-marquee .brand-logo--mono,[data-theme="light"] .brand-marquee .brand-logo--dark { filter:grayscale(1) brightness(0); }
[data-theme="light"] .brand-marquee .brand-logo--color { filter:saturate(.9); }
[data-theme="light"] .brand-marquee img:hover { filter:drop-shadow(0 0 9px rgba(2,132,199,.4)); }
[data-theme="light"] .brand-marquee .brand-logo--mono:hover,[data-theme="light"] .brand-marquee .brand-logo--dark:hover { filter:brightness(0) drop-shadow(0 0 9px rgba(2,132,199,.4)); }
[data-theme="light"] .stats-section { border-color: rgba(15,23,42,.08); background: rgba(15,23,42,.018); }
[data-theme="light"] .stat-item + .stat-item::before, [data-theme="light"] .soc-route__line { background: rgba(15,23,42,.1); }
[data-theme="light"] .battery-section, [data-theme="light"] .pricing-preview, [data-theme="light"] .offline-section { background: #eef2f7; }
[data-theme="light"] .network-section { background: linear-gradient(180deg, #f8fafc, #eef6fb); }
[data-theme="light"] .network-filters button { background:rgba(255,255,255,.78); }
[data-theme="light"] .network-filters button:hover { border-color:rgba(2,132,199,.34); color:#075985; background:rgba(14,165,233,.1); }
[data-theme="light"] .network-filters button.is-active { border-color:var(--brand-action-border); color:#fff; background:var(--brand-action-gradient); box-shadow:0 0 18px rgba(14,165,233,.18),0 0 20px rgba(34,197,94,.14); }
[data-theme="light"] .operator-card { background:rgba(255,255,255,.72); border-color:rgba(15,23,42,.08); }
[data-theme="light"] .site-footer { background: #edf2f7; }
[data-theme="light"] .footer-grid a:not(.brand), [data-theme="light"] .footer-bottom p, [data-theme="light"] .footer-status { color: #475569; }
[data-theme="light"] .plan-card--premium { background: linear-gradient(145deg, rgba(34,197,94,.1), rgba(255,255,255,.9) 46%); }
[data-theme="light"] .primary-nav { color-scheme: light; }

.page-loader { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; background: #0b0f19; opacity: 1; visibility: visible; transition: opacity .28s ease, visibility .28s ease; }
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader__core { position: relative; display: grid; min-width: 180px; justify-items: center; gap: 16px; }
.page-loader__core img { position: relative; z-index: 2; width: 78px; height: auto; filter: drop-shadow(0 0 16px rgba(34,197,94,.5)); animation: loader-logo .72s ease both; }
.page-loader__ring { position: absolute; width: 126px; height: 126px; top: -35px; border: 1px solid rgba(14,165,233,.18); border-top-color: #22c55e; border-right-color: #0ea5e9; border-radius: 50%; box-shadow: 0 0 30px rgba(14,165,233,.12), inset 0 0 24px rgba(34,197,94,.06); animation: loader-ring .72s cubic-bezier(.2,.7,.2,1) both; }
.page-loader__battery { width: 118px; height: 8px; margin-top: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 99px; background: rgba(255,255,255,.04); }
.page-loader__battery span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg,#ef4444,#f59e0b,#22c55e); box-shadow: 0 0 14px #22c55e; animation: loader-charge .7s cubic-bezier(.2,.75,.25,1) forwards; }
.page-loader small { color: #6f7d90; font-size: .58rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
@keyframes loader-charge { to { transform: scaleX(1); } }
@keyframes loader-ring { to { transform: rotate(360deg) scale(1.08); } }
@keyframes loader-logo { from { opacity: .2; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
.data-flow > i { color: #536075; font-style: normal; }
.flow-node { display: grid; min-width: 125px; min-height: 150px; align-content: center; justify-items: center; padding: 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(255,255,255,.025); text-align: center; }
.flow-node--cloud { border-color: rgba(74,222,128,.28); background: rgba(34,197,94,.06); box-shadow: 0 0 45px rgba(34,197,94,.07); }
.flow-node > span { margin-bottom: 16px; color: var(--electric-green-light); font-size: .6rem; font-weight: 800; }
.flow-node strong { color: var(--white); font-size: .76rem; }.flow-node small { color: #687589; font-size: .56rem; }
.data-layer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.data-layer-card { position: relative; min-height: 420px; padding: 32px; }
.layer-number { position: absolute; right: 22px; top: 17px; color: rgba(255,255,255,.07); font-size: 2rem; font-weight: 800; }
.layer-icon { display: grid; width: 48px; height: 48px; margin-bottom: 32px; place-items: center; border-radius: 14px; background: rgba(14,165,233,.08); color: var(--electric-blue-light); }
.data-layer-card ul { display: grid; gap: 9px; padding: 0; margin-top: 22px; list-style: none; }
.data-layer-card li { position: relative; padding-left: 18px; color: #778499; font-size: .72rem; }.data-layer-card li::before { content: ''; position: absolute; width: 5px; height: 5px; left: 0; top: .55em; border-radius: 50%; background: var(--electric-green); }
.offline-section { background: #080c14; }
.offline-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.offline-visual { position: relative; display: grid; min-height: 390px; place-items: center; }
.station-signal { position: relative; display: grid; width: 110px; height: 110px; place-items: center; border: 1px solid rgba(239,68,68,.25); border-radius: 50%; background: rgba(239,68,68,.05); }
.station-signal > span { width: 20px; height: 45px; border: 3px solid #8490a1; border-radius: 7px; }
.station-signal::after { content: ''; position: absolute; width: 2px; height: 140px; transform: rotate(45deg); background: var(--danger); box-shadow: 0 0 15px rgba(239,68,68,.4); }
.station-signal i { position: absolute; border: 1px solid rgba(239,68,68,.16); border-radius: 50%; }.station-signal i:nth-child(2){inset:-35px}.station-signal i:nth-child(3){inset:-70px}.station-signal i:nth-child(4){inset:-105px}
.offline-status { position: absolute; right: 22px; bottom: 22px; display: grid; padding: 15px 18px; border: 1px solid var(--glass-border); border-radius: 13px; background: rgba(11,15,25,.85); }
.offline-status span,.offline-status small { color: #69768a; font-size: .58rem; }.offline-status strong { color: var(--white); }
.transparency-panel { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 70px; padding: 50px; border-color: rgba(245,158,11,.2); background: rgba(245,158,11,.035); }
.transparency-panel p { margin: 0; }
.cpo-panel { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 55px; border: 1px solid rgba(74,222,128,.25); border-radius: var(--radius-lg); background: linear-gradient(120deg, rgba(34,197,94,.12), rgba(2,132,199,.1)); }
.cpo-panel > div:first-child { max-width: 690px; }.cpo-panel p:last-child { margin-bottom: 0; }.cpo-actions { display: flex; flex: 0 0 auto; flex-direction: column; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}