/* ============================================================================
   EV-ON website UI kit — component styles
   Loads on top of ../../colors_and_type.css (tokens)
   ============================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-text);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.dark-sec { background: var(--anthracite); color: var(--d-fg); }
.sub-sec { background: var(--bg-sub); }

/* ---------- shared bits ---------- */
.eyebrow { display:inline-block; }
.section-head { max-width: 720px; margin-bottom: clamp(36px,5vw,60px); }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head .h2 { margin-top: 14px; }
.section-head .lead { margin-top: 18px; }
.dark-sec .eyebrow { color: var(--d-fg-3); }
.dark-sec .lead { color: var(--d-fg-2); }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family: var(--font-text); font-weight:700; font-size:16px; line-height:1;
  border-radius: var(--r-md); padding:15px 24px; border:1px solid transparent;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-base);
  white-space:nowrap;
}
.btn svg { width:19px; height:19px; }
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--volt); color: var(--accent-ink); box-shadow: var(--sh-volt); }
.btn-primary:hover { background: var(--volt-press); transform: translateY(-1px); box-shadow: 0 16px 40px -10px var(--volt-glow); }
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border-2); }
.btn-secondary:hover { border-color: var(--fg); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: var(--bg-inset); }
.btn-ondark { background: rgba(255,255,255,.08); color:#fff; border-color: var(--d-border-2); }
.btn-ondark:hover { background: rgba(255,255,255,.14); }
.btn-sm { padding:10px 16px; font-size:14px; border-radius: var(--r-sm); }
.btn-lg { padding:18px 30px; font-size:17px; }
.btn-block { width:100%; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color var(--t-base), background var(--t-base);
}
.nav.scrolled { border-color: var(--line); background: rgba(255,255,255,.85); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { width:34px; height:34px; border-radius:10px; background:var(--anthracite); display:grid; place-items:center; }
.brand-mark svg { width:19px; height:25px; }
.brand-name { font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-0.03em; color:var(--fg); }
.brand-name .hy { color: var(--volt); }
.brand-plasma-wrap { position:relative; display:inline-flex; align-items:center; gap:11px; }
.brand-plasma { position:absolute; pointer-events:none; z-index:0; }
.brand-plasma-wrap .brand-mark, .brand-plasma-wrap .brand-name { position:relative; z-index:1; }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-link { font-size:15px; font-weight:600; color:var(--fg-2); transition:color var(--t-fast); white-space:nowrap; }
.nav-link:hover { color: var(--fg); }
.nav-cta { display:flex; align-items:center; gap:14px; }
.nav-phone { display:flex; align-items:center; gap:7px; font-weight:700; font-size:15px; color:var(--fg); white-space:nowrap; }
.nav-phone svg { width:17px; height:17px; color:var(--volt-press); }
@media (max-width: 900px){ .nav-links, .nav-phone { display:none; } }

/* ---------- hero ---------- */
.hero { position:relative; overflow:hidden; background:var(--anthracite); color:#fff; }
.hero::before {
  content:""; position:absolute; top:-30%; right:-10%; width:60%; height:130%;
  background: radial-gradient(closest-side, rgba(0,224,122,.20), transparent 72%); pointer-events:none;
}
.hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(circle at 70% 18%, #000, transparent 70%);
}
.hero-inner { position:relative; z-index:2; padding-block: clamp(70px,10vw,120px); }
.hero-tag { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.06); border:1px solid var(--d-border-2); font-size:13.5px; font-weight:600; color:#fff; margin-bottom:26px; }
.hero-tag svg { width:15px; height:15px; color:var(--volt); }
.hero h1 { color:#fff; max-width: 20ch; font-size: clamp(36px, 4.3vw, 58px); line-height:1.04; letter-spacing:-0.025em; }
.hero h1 .accent { color: var(--volt); }
.hero-sub { color: var(--d-fg-2); max-width: 52ch; margin-top:24px; }
.hero-cta { display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
.hero-trust { display:flex; gap:34px; margin-top:54px; flex-wrap:wrap; }
.hero-reassure { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; }
.hero-reassure span { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--d-fg); white-space:nowrap; }
.hero-reassure svg { flex:none; }
.hero-trust .ht { display:flex; flex-direction:column; gap:3px; }
.hero-trust .ht-v { font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-0.02em; color:#fff; }
.hero-trust .ht-v .u { color:var(--volt); }
.hero-trust .ht-k { font-size:13px; color:var(--d-fg-2); font-weight:500; }

/* ---------- trust bar ---------- */
.trustbar { border-bottom:1px solid var(--line); }
.trustbar-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:26px; flex-wrap:wrap; }
.trust-label { font-size:13px; font-weight:600; color:var(--fg-3); letter-spacing:.04em; }
.trust-logos { display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.trust-logo { font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--fg-3); letter-spacing:-0.01em; opacity:.8; }

/* ---------- products ---------- */
.prod-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:720px){ .prod-grid { grid-template-columns:1fr; } }
.prod-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:32px; box-shadow:var(--sh-sm); transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
  display:flex; flex-direction:column; gap:18px; cursor:pointer;
}
.prod-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.prod-ico { width:54px; height:54px; border-radius:var(--r-md); background:var(--volt-soft); display:grid; place-items:center; color:var(--volt-press); }
.prod-ico svg { width:27px; height:27px; }
.prod-card h3 { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.02em; }
.prod-desc { font-size:15px; color:var(--fg-2); line-height:1.55; flex:1; }
.prod-metrics { display:grid; grid-template-columns:1fr 1fr; gap:14px; border-top:1px solid var(--line); padding-top:20px; }
.pm .k { font-size:12px; color:var(--fg-3); font-weight:600; }
.pm .v { font-family:var(--font-mono); font-weight:600; font-size:17px; color:var(--fg); margin-top:3px; }
.pm .v.volt { color:var(--volt-press); }
.prod-link { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:15px; color:var(--fg); white-space:nowrap; }
.prod-link svg { width:17px; height:17px; transition:transform var(--t-fast); }
.prod-card:hover .prod-link svg { transform:translateX(4px); }

/* ---------- process ---------- */
.proc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:0; margin-top:20px; }
@media (max-width:1000px){ .proc-grid { grid-template-columns:repeat(2,1fr); gap:28px 20px; } }
.proc-step { position:relative; padding-right:14px; }
.proc-line { position:absolute; top:23px; left:46px; right:0; height:2px; background:var(--d-border); }
.proc-step:last-child .proc-line { display:none; }
@media (max-width:1000px){ .proc-line { display:none; } }
.proc-node { width:46px; height:46px; border-radius:var(--r-md); background:var(--graphite); border:1px solid var(--d-border-2); display:grid; place-items:center; color:#fff; position:relative; z-index:2; }
.proc-node svg { width:22px; height:22px; }
.proc-num { font-family:var(--font-mono); font-size:12px; color:var(--volt); margin-top:18px; }
.proc-step h4 { font-family:var(--font-display); font-weight:600; font-size:17px; color:#fff; margin-top:8px; letter-spacing:-0.01em; }
.proc-step p { font-size:13.5px; color:var(--d-fg-2); line-height:1.45; margin-top:6px; }

/* ---------- financing ---------- */
.fin-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; }
@media (max-width:900px){ .fin-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .fin-grid { grid-template-columns:1fr; } }
.fin-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px 24px; }
.fin-card .ico { width:42px; height:42px; border-radius:var(--r-sm); background:var(--bg-inset); display:grid; place-items:center; color:var(--fg); margin-bottom:18px; }
.fin-card .ico svg { width:21px; height:21px; }
.fin-card .name { font-weight:700; font-size:16px; }
.fin-from { font-size:13px; color:var(--fg-3); margin-top:18px; }
.fin-price { font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-0.02em; color:var(--fg); margin-top:2px; }
.fin-price .per { font-family:var(--font-text); font-size:15px; font-weight:600; color:var(--fg-3); }
.fin-note { font-size:12.5px; color:var(--fg-3); margin-top:14px; line-height:1.4; }
.fin-foot { margin-top:40px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.fin-badges { display:flex; gap:10px; flex-wrap:wrap; }
.fin-badge { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; padding:9px 14px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); white-space:nowrap; }
.fin-badge svg { width:15px; height:15px; color:var(--volt-press); }

/* ---------- map / area ---------- */
.area-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:40px; align-items:center; }
@media (max-width:900px){ .area-grid { grid-template-columns:1fr; } }
.area-cities { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.city-chip { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--d-fg); padding:9px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.05); border:1px solid var(--d-border); transition:all var(--t-fast); cursor:default; white-space:nowrap; }
.city-chip:hover { background:rgba(0,224,122,.12); border-color:var(--volt); color:#fff; }
.city-chip .d { width:7px; height:7px; border-radius:50%; background:var(--volt); }
.map-panel { position:relative; aspect-ratio:1/.86; border-radius:var(--r-xl); background:radial-gradient(circle at 42% 40%, #1b2024, #14171A 70%); border:1px solid var(--d-border); overflow:hidden; }
.map-panel::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:40px 40px; }
.map-ring { position:absolute; border:1.5px dashed rgba(0,224,122,.35); border-radius:50%; }
.map-ring.r1 { width:46%; height:46%; left:27%; top:27%; }
.map-ring.r2 { width:78%; height:78%; left:11%; top:11%; border-color:rgba(0,224,122,.18); }
.map-dot { position:absolute; transform:translate(-50%,-50%); }
.map-dot .pin { width:11px; height:11px; border-radius:50%; background:var(--d-fg-2); box-shadow:0 0 0 4px rgba(255,255,255,.04); }
.map-dot.hub .pin { width:16px; height:16px; background:var(--volt); box-shadow:0 0 0 6px rgba(0,224,122,.18),0 0 24px 4px var(--volt-glow); }
.map-dot .ml { position:absolute; left:16px; top:-3px; font-size:12px; font-weight:600; color:var(--d-fg-2); white-space:nowrap; }
.map-dot.hub .ml { font-size:14px; font-weight:700; color:#fff; }
.area-map { position:absolute; inset:0; z-index:1; background:#14171A; }
.area-map .leaflet-control-attribution { background:rgba(15,18,20,.6); color:#7c8389; font-size:9px; }
.area-map .leaflet-control-attribution a { color:#9aa1a8; }
.area-tip { background:rgba(15,18,20,.86) !important; border:1px solid rgba(255,255,255,.14) !important; color:#E8EAEC !important; font-family:var(--font-text); font-weight:600; font-size:11px; padding:2px 7px; border-radius:6px; box-shadow:none !important; white-space:nowrap; }
.area-tip::before { display:none !important; }
.area-tip.hub { color:#00E07A !important; font-weight:700; font-size:12.5px; }
.calc-locbtn { display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:none; border:none; padding:4px 2px; font-family:var(--font-text); font-weight:600; font-size:14px; color:var(--volt-press); }
.calc-locbtn:hover { text-decoration:underline; }
.calc-locbtn svg { width:16px; height:16px; }

/* ---------- testimonials ---------- */
.story { display:grid; grid-template-columns:300px 1fr; gap:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-sm); }
@media (max-width:760px){ .story { grid-template-columns:1fr; } }
.story-side { background:var(--anthracite); color:#fff; padding:32px; display:flex; flex-direction:column; gap:18px; }
.story-photo { aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; background:var(--graphite-2); }
.story-who { font-weight:700; font-size:16px; }
.story-loc { font-size:13px; color:var(--d-fg-2); display:flex; align-items:center; gap:6px; }
.story-loc svg { width:14px; height:14px; color:var(--volt); }
.story-stats { display:flex; gap:22px; margin-top:auto; }
.story-stat .v { font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--volt); letter-spacing:-0.02em; }
.story-stat .k { font-size:11.5px; color:var(--d-fg-2); margin-top:2px; }
.story-body { padding:36px; display:flex; flex-direction:column; gap:18px; }
.story-block .bl { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); margin-bottom:6px; }
.story-block p { font-size:15px; color:var(--fg); line-height:1.6; }
.story-q { font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.4; letter-spacing:-0.01em; color:var(--fg); }
.story-nav { display:flex; gap:10px; margin-top:26px; }
.story-arrow { width:44px; height:44px; border-radius:var(--r-pill); border:1px solid var(--border-2); background:var(--surface); display:grid; place-items:center; color:var(--fg); transition:all var(--t-fast); }
.story-arrow:hover { border-color:var(--fg); }
.story-arrow svg { width:19px; height:19px; }

/* ---------- FAQ ---------- */
.faq-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start; }
@media (max-width:860px){ .faq-grid { grid-template-columns:1fr; } }
.faq-list { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; background:none; border:none; padding:22px 0; font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-0.01em; color:var(--fg); }
.faq-q .chev { width:34px; height:34px; flex:none; border-radius:var(--r-pill); background:var(--bg-inset); display:grid; place-items:center; transition:all var(--t-base); }
.faq-q .chev svg { width:18px; height:18px; transition:transform var(--t-base); }
.faq-item.open .chev { background:var(--volt); color:var(--accent-ink); }
.faq-item.open .chev svg { transform:rotate(45deg); }
.faq-a { overflow:hidden; max-height:0; transition:max-height var(--t-slow) var(--ease-out); }
.faq-a-inner { padding:0 0 24px; font-size:15px; color:var(--fg-2); line-height:1.6; max-width:60ch; }

/* ---------- footer ---------- */
.footer { background:var(--anthracite); color:var(--d-fg-2); padding-block:64px 32px; }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-bottom:48px; border-bottom:1px solid var(--d-border); }
@media (max-width:760px){ .footer-top { grid-template-columns:1fr 1fr; } }
.footer h5 { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--d-fg-3); margin-bottom:16px; font-weight:700; }
.footer-links { display:flex; flex-direction:column; gap:11px; }
.footer-links a { font-size:14.5px; color:var(--d-fg-2); transition:color var(--t-fast); }
.footer-links a:hover { color:#fff; }
.footer-brand .brand-name { color:#fff; }
.footer-brand .brand-mark { background:rgba(255,255,255,.08); border:1px solid var(--d-border); }
.footer-blurb { font-size:14px; color:var(--d-fg-2); line-height:1.6; max-width:36ch; margin-top:18px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--d-fg-3); }

/* ---------- calculator (modal) ---------- */
.calc-overlay { position:fixed; inset:0; z-index:100; background:rgba(10,12,14,.55); backdrop-filter:blur(6px); display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity var(--t-base); }
.calc-overlay.open { opacity:1; pointer-events:auto; }
.calc { width:min(680px,100%); max-height:92vh; background:var(--surface); border-radius:var(--r-2xl); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh-lg); transform:translateY(14px) scale(.98); transition:transform var(--t-base) var(--ease-out); }
.calc-overlay.open .calc { transform:none; }
.calc-head { display:flex; align-items:center; justify-content:space-between; padding:20px 26px; border-bottom:1px solid var(--line); }
.calc-head .title { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-0.01em; }
.calc-head .title .b { width:30px; height:30px; border-radius:8px; background:var(--anthracite); display:grid; place-items:center; }
.calc-head .title .b svg { width:16px; height:21px; }
.calc-close { width:38px; height:38px; border-radius:var(--r-pill); border:none; background:var(--bg-inset); display:grid; place-items:center; color:var(--fg-2); }
.calc-close:hover { background:var(--bg-inset); color:var(--fg); }
.calc-close svg { width:18px; height:18px; }
.calc-progress { height:3px; background:var(--bg-inset); }
.calc-progress .bar { height:100%; background:var(--volt); transition:width var(--t-slow) var(--ease-out); }
.calc-body { padding:34px; overflow-y:auto; }
.calc-step-label { font-family:var(--font-mono); font-size:12px; color:var(--volt-press); font-weight:600; }
.calc-q { font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-0.02em; margin-top:6px; }
.calc-help { font-size:14.5px; color:var(--fg-2); margin-top:8px; line-height:1.5; }
.calc-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:26px; }
.opt {
  display:flex; align-items:center; gap:13px; padding:18px; border-radius:var(--r-md);
  border:1.5px solid var(--border); background:var(--surface); text-align:left; transition:all var(--t-fast);
}
.opt:hover { border-color:var(--border-2); }
.opt.sel { border-color:var(--volt); background:var(--volt-soft); }
.opt .oi { width:40px; height:40px; flex:none; border-radius:var(--r-sm); background:var(--bg-inset); display:grid; place-items:center; color:var(--fg); }
.opt.sel .oi { background:var(--volt); color:var(--accent-ink); }
.opt .oi svg { width:20px; height:20px; }
.opt .ot { font-weight:700; font-size:15px; }
.opt .od { font-size:12.5px; color:var(--fg-3); margin-top:2px; }
.calc-field { margin-top:22px; }
.calc-loc-row { display:flex; gap:10px; margin-top:8px; align-items:flex-start; }
.calc-ac { position:relative; flex:1; }
.calc-ac .calc-input { width:100%; }
.calc-ac-list { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-lg); overflow-y:auto; max-height:236px; }
.calc-ac-item { display:flex; align-items:flex-start; gap:9px; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--line); padding:11px 13px; font-size:13.5px; color:var(--fg); line-height:1.35; }
.calc-ac-item:last-child { border-bottom:none; }
.calc-ac-item:hover { background:var(--volt-soft); }
.calc-ac-item svg { color:var(--volt-press); flex:none; margin-top:1px; }
.calc-ac-item b { font-weight:700; }
.calc-ac-empty { padding:12px 13px; font-size:13px; color:var(--fg-3); display:flex; align-items:center; gap:8px; }
.calc-ac-empty .spin { width:15px; height:15px; border-radius:50%; border:2px solid var(--border-2); border-top-color:var(--volt-press); animation:calcspin .7s linear infinite; }
.calc-map-wrap { margin-top:16px; height:236px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); position:relative; background:var(--bg-inset); isolation:isolate; }
.calc-map { width:100%; height:100%; }
.calc-map .leaflet-control-attribution { font-size:9px; opacity:.7; }
.calc-map-state { position:absolute; inset:0; z-index:600; display:grid; place-items:center; text-align:center; color:var(--fg-3); font-size:13.5px; padding:24px; background:var(--bg-inset); }
.calc-map-state .spin { width:22px; height:22px; border-radius:50%; border:2.5px solid var(--border-2); border-top-color:var(--volt-press); animation:calcspin .7s linear infinite; margin:0 auto 12px; }
@keyframes calcspin { to { transform:rotate(360deg); } }
.calc-map-cap { position:absolute; left:10px; bottom:10px; z-index:600; background:rgba(20,23,26,.74); color:#fff; font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:var(--r-pill); display:inline-flex; gap:7px; align-items:center; max-width:calc(100% - 20px); }
.calc-map-cap svg { width:14px; height:14px; color:var(--volt); flex:none; }
.calc-map-cap span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calc-pin { background:transparent !important; border:none !important; }
.calc-pin-dot { display:block; width:17px; height:17px; border-radius:50%; background:var(--volt); border:2.5px solid #fff; box-shadow:0 0 0 4px rgba(0,224,122,.30), 0 2px 8px rgba(0,0,0,.55); cursor:grab; }
.calc-pin:active .calc-pin-dot { cursor:grabbing; }
.calc-maphint { display:flex; align-items:center; gap:7px; margin-top:11px; font-size:12.5px; color:var(--fg-3); line-height:1.4; }
.calc-maphint svg { width:14px; height:14px; color:var(--volt-press); flex:none; }
.ev-place-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:6px; }
.ev-opt { display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 12px; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); cursor:pointer; transition:all var(--t-fast); text-align:center; }
.ev-opt:hover { border-color:var(--border-2); }
.ev-opt.sel { border-color:var(--volt); background:var(--volt-soft); }
.ev-opt .viz { width:72px; height:54px; color:var(--fg-2); }
.ev-opt.sel .viz { color:var(--volt-press); }
.ev-opt .viz svg { width:100%; height:100%; display:block; }
.ev-opt .viz-ic { display:grid; place-items:center; }
.ev-opt .viz-ic svg { width:auto; height:auto; }
.ev-opt.sel .viz-ic { color:var(--volt-press); }
.calc-foot-hint { font-size:13px; color:var(--fg-3); font-weight:500; }
.ev-opt .evlbl { font-size:13px; font-weight:600; color:var(--fg); line-height:1.25; }
@media (max-width:520px){ .ev-place-grid { grid-template-columns:1fr; } .ev-opt { flex-direction:row; justify-content:flex-start; gap:14px; } .ev-opt .viz { width:56px; height:42px; flex:none; } .ev-opt .evlbl { text-align:left; } }

/* ---- EV charger studio ---- */
.evs-drop { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:26px 20px; border:1.5px dashed var(--border-2); border-radius:var(--r-md); background:var(--bg-sub); cursor:pointer; transition:all var(--t-fast); }
.evs-drop:hover, .evs-drop.over { border-color:var(--volt); background:var(--volt-soft); }
.evs-drop-ic { width:48px; height:48px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border); display:grid; place-items:center; color:var(--volt-press); margin-bottom:4px; }
.evs-drop-t { font-weight:700; font-size:15px; color:var(--fg); display:block; width:100%; }
.evs-drop-d { font-size:12.5px; color:var(--fg-3); max-width:36ch; line-height:1.4; margin-top:5px; }
.evs-drop-help { font-size:13px; color:var(--fg-2); line-height:1.45; margin:0 0 12px; text-align:center; }
.evs-drop-sub { font-size:12px; color:var(--fg-3); margin-top:4px; display:block; width:100%; }
.evs-nophoto { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:10px; padding:11px; background:none; border:none; font-family:var(--font-text); font-weight:600; font-size:13.5px; color:var(--fg-2); cursor:pointer; border-radius:var(--r-md); transition:all var(--t-fast); }
.evs-nophoto:hover { color:var(--fg); background:var(--bg-sub); }
.evs-nophoto.active { color:var(--volt-press); background:var(--volt-soft); }
.evs-nophoto svg { flex:none; }
/* deactivated (non-chosen) input option */
.evs-drop.off, .evs-nophoto.off { opacity:.4; pointer-events:none; filter:grayscale(.5); }
.evs-or { display:flex; align-items:center; gap:12px; margin:14px 0 0; color:var(--fg-3); }
.evs-or::before, .evs-or::after { content:""; flex:1; height:1px; background:var(--border); }
.evs-or span { font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.evs-picked { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--volt); border-radius:var(--r-md); background:var(--volt-soft); }
.evs-picked-ic { width:34px; height:34px; flex:none; border-radius:50%; background:var(--volt); color:var(--accent-ink); display:grid; place-items:center; }
.evs-picked-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.evs-picked-t { font-weight:700; font-size:14px; color:var(--fg); }
.evs-picked-d { font-size:12px; color:var(--fg-2); }
.evs-manual { margin-top:14px; padding-top:4px; }
.evs-manual .calc-field:first-child { margin-top:0; }
.evs-route { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:520px){ .evs-route { grid-template-columns:1fr; } }
.evs-route-opt { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:13px; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); cursor:pointer; text-align:left; transition:all var(--t-fast); color:var(--fg); }
.evs-route-opt:hover { border-color:var(--border-2); }
.evs-route-opt.sel { border-color:var(--volt); background:var(--volt-soft); }
.evs-route-opt svg { color:var(--fg-2); }
.evs-route-opt.sel svg { color:var(--volt-press); }
.evs-route-opt span { font-weight:600; font-size:13px; line-height:1.3; }
.evs-choose { margin-top:14px; }
.evs-choose-h { font-size:13px; color:var(--fg-2); margin-bottom:2px; }
.evs-choose-h b { color:var(--fg); font-weight:700; }
.evs-hint { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--fg-2); margin:2px 0 10px; }
.evs-hint svg { flex:none; }
.evs-canvas { position:relative; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); background:#000; aspect-ratio:16/10; touch-action:none; cursor:crosshair; user-select:none; }
.evs-canvas img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.evs-canvas.result { cursor:default; }
.evs-canvas.cleaned img { filter:brightness(1.08) contrast(1.06) saturate(1.05); }
.evs-target { position:absolute; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px rgba(0,224,122,.5), 0 0 18px rgba(0,224,122,.5); display:grid; place-items:center; pointer-events:none; }
.evs-target-dot { width:11px; height:11px; border-radius:50%; background:var(--volt); }
.evs-row { display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:12px; }
.evs-link { display:inline-flex; align-items:center; gap:6px; background:none; border:none; font-family:var(--font-text); font-weight:600; font-size:13.5px; color:var(--fg-2); }
.evs-link:hover { color:var(--fg); }
.evs-link svg { width:15px; height:15px; }
.evs-loading { text-align:center; padding:30px 16px; }
.evs-spin { width:30px; height:30px; border-radius:50%; border:3px solid var(--border-2); border-top-color:var(--volt-press); animation:calcspin .7s linear infinite; margin:0 auto 14px; }
.evs-load-t { font-weight:700; font-size:15px; color:var(--fg); }
.evs-steps { display:flex; flex-direction:column; gap:6px; margin-top:14px; align-items:center; }
.evs-steps span { font-size:12.5px; color:var(--fg-3); display:flex; align-items:center; gap:7px; }
.evs-steps span::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--border-2); }
.evs-steps span.done { color:var(--fg-2); }
.evs-steps span.done::before { background:var(--volt); }
.evs-models { display:flex; flex-direction:column; gap:10px; }
.evs-model { display:flex; align-items:center; gap:13px; padding:14px; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); cursor:pointer; text-align:left; transition:all var(--t-fast); }
.evs-model:hover { border-color:var(--border-2); }
.evs-model.sel { border-color:var(--volt); background:var(--volt-soft); }
.evs-model-ic { width:40px; height:40px; flex:none; border-radius:var(--r-sm); background:var(--bg-inset); display:grid; place-items:center; color:var(--fg); }
.evs-model.sel .evs-model-ic { background:var(--volt); color:var(--accent-ink); }
.evs-model-main { flex:1; min-width:0; }
.evs-model-name { font-weight:700; font-size:14.5px; color:var(--fg); display:block; }
.evs-model-name em { font-style:normal; font-weight:600; font-size:12px; color:var(--volt-press); margin-left:4px; }
.evs-model-note { font-size:12px; color:var(--fg-3); }
.evs-model-price { font-weight:600; font-size:15px; color:var(--fg); flex:none; }
.evs-cleanup { text-align:center; padding:18px 14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-sub); }
.evs-clean-ic { width:46px; height:46px; border-radius:50%; background:var(--volt-soft); color:var(--volt-press); display:inline-grid; place-items:center; margin-bottom:10px; }
.evs-clean-t { font-weight:700; font-size:16px; color:var(--fg); }
.evs-clean-d { font-size:13px; color:var(--fg-2); max-width:42ch; margin:8px auto 0; line-height:1.45; }
.evs-clean-opts { display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.evs-toggle { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:var(--r-md); border:1.5px solid var(--border-2); background:var(--surface); font-family:var(--font-text); font-weight:600; font-size:13.5px; color:var(--fg); cursor:pointer; transition:all var(--t-fast); }
.evs-toggle.sel { border-color:var(--volt); background:var(--volt-soft); color:var(--volt-press); }
.evs-charger { position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
.evs-charger-box { width:34px; height:42px; border-radius:8px; background:var(--anthracite); border:2px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 4px rgba(0,224,122,.35); display:grid; place-items:center; }
.evs-charger-box svg { width:16px; height:22px; }
.evs-badge { position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; gap:6px; background:rgba(0,224,122,.92); color:var(--accent-ink); font-size:11px; font-weight:700; padding:5px 10px; border-radius:var(--r-pill); }
.evs-cap { position:absolute; right:10px; bottom:10px; background:rgba(20,23,26,.74); color:#fff; font-size:10.5px; font-weight:600; padding:4px 9px; border-radius:var(--r-pill); }
.evs-result-bar { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:13px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); font-size:14px; color:var(--fg); }
.evs-result-bar .data { font-weight:700; font-size:16px; }

/* funnel: params summary, cost, slots, payment */
.evs-params { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:14px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-sub); }
.evs-params > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.evs-params .k { font-size:11px; font-weight:600; color:var(--fg-3); text-transform:uppercase; letter-spacing:.04em; }
.evs-params .v { font-size:13.5px; font-weight:600; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.evs-cost { border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; margin-top:14px; background:var(--surface); }
.evs-shots { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.evs-shot { margin:0; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--bg-sub); }
.evs-shot img { display:block; width:100%; height:110px; object-fit:cover; }
.evs-shot-empty { display:flex; flex-direction:column; }
.evs-shot-empty > span { height:110px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--fg-3); }
.evs-shot figcaption { display:flex; align-items:center; gap:6px; padding:7px 10px; font-size:11.5px; font-weight:600; color:var(--fg-2); border-top:1px solid var(--line); background:var(--surface); }
.evs-shot figcaption svg { flex:none; color:var(--volt-press); }
.evs-cost-row { display:flex; justify-content:space-between; align-items:center; font-size:13.5px; color:var(--fg-2); padding:5px 0; }
.evs-cost-row .data { font-weight:600; color:var(--fg); }
.evs-cost-row.total { border-top:1px solid var(--border); margin-top:5px; padding-top:11px; font-weight:700; color:var(--fg); font-size:15px; }
.evs-cost-row.total .data { font-size:17px; }
.evs-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:4px; }
@media (max-width:520px){ .evs-slots { grid-template-columns:repeat(2,1fr); } }
.evs-slot { display:flex; flex-direction:column; gap:3px; padding:12px; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); cursor:pointer; text-align:left; transition:all var(--t-fast); }
.evs-slot:hover { border-color:var(--border-2); }
.evs-slot.sel { border-color:var(--volt); background:var(--volt-soft); }
.evs-slot-d { font-weight:700; font-size:13.5px; color:var(--fg); }
.evs-slot-t { font-size:12.5px; color:var(--fg-3); font-family:var(--font-mono); }
.evs-slot-tag { margin-top:6px; font-size:10.5px; font-weight:700; color:var(--fg-3); }
/* 3-month availability calendar */
.evs-cal { margin-top:6px; border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px 16px; background:var(--surface); }
.evs-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.evs-cal-title { font-weight:700; font-size:15px; color:var(--fg); text-transform:capitalize; }
.evs-cal-nav { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--border-2); border-radius:var(--r-sm); background:var(--surface); color:var(--fg); cursor:pointer; }
.evs-cal-nav:hover { background:var(--bg-inset); }
.evs-cal-nav:disabled { opacity:.35; cursor:not-allowed; }
.evs-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.evs-cal-dow { margin-bottom:6px; }
.evs-cal-wd { text-align:center; font-family:var(--font-mono); font-size:10.5px; color:var(--fg-3); padding:2px 0; }
.evs-cal-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:var(--r-sm); font-family:var(--font-text); font-size:13.5px; font-weight:600; }
.evs-cal-cell.empty { border:none; }
.evs-cal-cell.free { background:var(--volt-soft); color:var(--volt-press); border-color:transparent; cursor:pointer; }
.evs-cal-cell.free:hover { border-color:var(--volt); }
.evs-cal-cell.off { color:var(--fg-3); background:var(--bg-inset); opacity:.6; cursor:not-allowed; text-decoration:line-through; }
.evs-cal-cell.sel { background:var(--volt); color:var(--accent-ink); border-color:var(--volt); box-shadow:var(--sh-volt); }
.evs-cal-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:11.5px; color:var(--fg-2); }
.evs-cal-legend span { display:inline-flex; align-items:center; gap:6px; }
.evs-cal-legend .lg { width:13px; height:13px; border-radius:4px; }
.evs-cal-legend .lg.free { background:var(--volt-soft); }
.evs-cal-legend .lg.off { background:var(--bg-inset); }
.evs-cal-legend .lg.sel { background:var(--volt); }
.evs-slot-tag.up { color:var(--warn); }
.evs-slot-tag.down { color:var(--volt-press); }
.evs-slot.sel .evs-slot-tag { color:inherit; }
.evs-fine { font-size:11.5px; color:var(--fg-3); margin-top:8px; }
.evs-custom { margin-top:12px; padding:14px; border:1px dashed var(--border-2); border-radius:var(--r-md); background:var(--bg-sub); }
.evs-custom-h { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--fg-2); margin-bottom:10px; }
.evs-custom-h svg { flex:none; color:var(--volt-press); }
.evs-custom-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.evs-custom-row .calc-input { flex:none; width:auto; }
.evs-time-chips { display:flex; gap:8px; flex-wrap:wrap; }
.evs-timerange { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.evs-timerange .calc-input { flex:none; width:auto; }
.evs-tr-lbl { font-size:13px; font-weight:600; color:var(--fg-2); }
.evs-paywall { }
.evs-pw-head { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-0.01em; color:var(--fg); }
.evs-pw-d { font-size:13.5px; color:var(--fg-2); line-height:1.5; margin-top:8px; }
.evs-pw-d b { color:var(--fg); }
.evs-card { border:1px solid var(--border); border-radius:var(--r-md); padding:16px; margin-top:14px; background:var(--bg-sub); display:flex; flex-direction:column; gap:10px; }
.evs-paymethods { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.evs-paymethod { display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 8px; border:1.5px solid var(--border-2); border-radius:var(--r-md); background:var(--surface); font-family:var(--font-text); font-weight:600; font-size:13.5px; color:var(--fg-2); cursor:pointer; }
.evs-paymethod svg { color:var(--fg-3); }
.evs-paymethod:hover { border-color:var(--border); }
.evs-paymethod.sel { border-color:var(--volt); background:var(--volt-soft); color:var(--volt-press); }
.evs-paymethod.sel svg { color:var(--volt-press); }
.evs-card-top { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--fg); }
.evs-card-brands { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--fg-3); }
.evs-card-row { display:flex; gap:10px; }
.evs-card-row .calc-input { flex:1; }
.evs-secure { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--fg-3); margin-top:12px; line-height:1.4; }
.evs-secure svg { flex:none; }
.evs-reserved { display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:var(--r-md); background:var(--volt-soft); color:var(--fg); font-size:13.5px; font-weight:600; }
.evs-pay { display:flex; align-items:center; gap:13px; width:100%; padding:14px; margin-top:10px; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); cursor:pointer; text-align:left; transition:all var(--t-fast); }
.evs-pay:hover { border-color:var(--border-2); }
.evs-pay.sel { border-color:var(--volt); background:var(--volt-soft); }
.evs-pay-ic { width:40px; height:40px; flex:none; border-radius:var(--r-sm); background:var(--bg-inset); display:grid; place-items:center; color:var(--fg); }
.evs-pay.sel .evs-pay-ic { background:var(--volt); color:var(--accent-ink); }
.evs-pay-main { flex:1; min-width:0; }
.evs-pay-t { display:block; font-weight:700; font-size:14.5px; color:var(--fg); }
.evs-pay-d { font-size:12px; color:var(--fg-3); }
.evs-pay-amt { font-weight:700; font-size:15px; color:var(--fg); flex:none; }
.evs-inst { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.evs-inst-chip { padding:9px 14px; border:1.5px solid var(--border-2); border-radius:var(--r-pill); background:var(--surface); font-family:var(--font-mono); font-weight:600; font-size:13.5px; color:var(--fg); cursor:pointer; transition:all var(--t-fast); }
.evs-inst-chip.sel { border-color:var(--volt); background:var(--volt-soft); color:var(--volt-press); }
.evs-code { display:flex; gap:10px; margin-top:14px; align-items:stretch; }
.evs-code .calc-input { flex:1; }
.evs-code-ok { display:flex; align-items:center; gap:7px; margin-top:9px; font-size:12.5px; font-weight:600; color:var(--volt-press); }
.evs-booked { text-align:center; padding:18px 14px 6px; }
.evs-booked-ic { width:64px; height:64px; border-radius:50%; background:var(--volt-soft); display:inline-grid; place-items:center; margin-bottom:14px; }
.evs-booked-t { font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-0.02em; color:var(--fg); }
.evs-booked-sum { display:flex; flex-direction:column; gap:8px; margin:16px auto 0; max-width:360px; text-align:left; }
.evs-booked-sum > div { display:flex; justify-content:space-between; gap:14px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-sub); font-size:13px; }
.evs-booked-sum span { color:var(--fg-3); } .evs-booked-sum b { color:var(--fg); text-align:right; }
.evs-booked-d { font-size:13px; color:var(--fg-2); max-width:38ch; margin:16px auto 0; line-height:1.45; }
.evs-orderno { display:inline-flex; align-items:center; gap:10px; margin:14px auto 0; padding:9px 16px; border:1px dashed var(--border-2); border-radius:var(--r-pill); background:var(--bg-sub); }
.evs-orderno span { font-size:12px; color:var(--fg-3); }
.evs-orderno b { font-size:15px; font-weight:700; color:var(--fg); letter-spacing:.02em; }
.evs-track { display:flex; align-items:center; gap:16px; text-align:left; margin:18px auto 4px; max-width:380px; padding:14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); }
.evs-qr { flex:none; width:120px; height:120px; border-radius:var(--r-sm); background:#fff; padding:6px; border:1px solid var(--border); }
.evs-track-main { display:flex; flex-direction:column; gap:5px; }
.evs-track-t { display:flex; align-items:center; gap:7px; font-weight:700; font-size:14px; color:var(--fg); }
.evs-track-d { font-size:12.5px; color:var(--fg-2); line-height:1.45; }
.evs-track-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--volt-press); margin-top:2px; word-break:break-all; }
@media (max-width:480px){ .evs-track { flex-direction:column; text-align:center; align-items:center; } .evs-track-t { justify-content:center; } }
.calc-map .leaflet-control-zoom { border:none; box-shadow:var(--sh-sm); }
.calc-map .leaflet-control-zoom a { background:var(--surface); color:var(--fg); border-color:var(--border); }
.calc-map .leaflet-control-zoom a:hover { background:var(--bg-inset); }
.calc-field label { display:block; font-size:14px; font-weight:600; color:var(--fg-2); margin-bottom:8px; }
.calc-input { width:100%; font-family:var(--font-text); font-size:16px; padding:15px 16px; border:1.5px solid var(--border-2); border-radius:var(--r-md); color:var(--fg); }
.calc-input:focus { outline:none; border-color:var(--volt); box-shadow:var(--ring-volt); }
.calc-slider { width:100%; margin-top:8px; accent-color:var(--volt-press); }
.calc-slider-val { font-family:var(--font-mono); font-weight:600; font-size:22px; color:var(--fg); }
/* invoice (buy-mode delivery step) */
.calc-segic { display:inline-flex; gap:0; border:1.5px solid var(--border-2); border-radius:var(--r-md); overflow:hidden; }
.calc-seg { background:none; border:none; font-family:var(--font-text); font-weight:600; font-size:14px; color:var(--fg-2); padding:10px 18px; cursor:pointer; }
.calc-seg + .calc-seg { border-left:1.5px solid var(--border-2); }
.calc-seg.sel { background:var(--volt-soft); color:var(--volt-press); }
.calc-inv-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.calc-inv-grid .span2 { grid-column:1 / -1; }
.calc-foot { display:flex; align-items:center; justify-content:space-between; padding:18px 26px; border-top:1px solid var(--line); background:var(--bg-sub); }
.calc-back { background:none; border:none; font-weight:600; font-size:15px; color:var(--fg-2); display:inline-flex; align-items:center; gap:6px; }
.calc-back:hover { color:var(--fg); }
.calc-back svg { width:17px; height:17px; }

/* calculator result */
.res-hero { background:var(--anthracite); color:#fff; border-radius:var(--r-xl); padding:30px; position:relative; overflow:hidden; }
.res-hero::after { content:""; position:absolute; top:-40%; right:-10%; width:50%; height:180%; background:radial-gradient(closest-side,rgba(0,224,122,.22),transparent 70%); }
.res-reco { position:relative; z-index:2; }
.res-reco .rl { font-size:13px; color:var(--d-fg-2); }
.res-reco .rt { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.02em; margin-top:4px; }
.res-reco .rtags { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.res-tag { font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid var(--d-border); }
.res-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.res-cell { border:1px solid var(--line); border-radius:var(--r-md); padding:18px; }
.res-cell .k { font-size:12.5px; color:var(--fg-3); font-weight:600; display:flex; align-items:center; gap:7px; }
.res-cell .k svg { width:15px; height:15px; color:var(--volt-press); }
.res-cell .v { font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-0.02em; margin-top:8px; }
.res-cell .v small { font-family:var(--font-text); font-size:14px; color:var(--fg-3); font-weight:600; }
.res-disc { font-size:12px; color:var(--fg-3); margin-top:16px; line-height:1.4; }

/* reveal */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; } html{scroll-behavior:auto;} }

/* ---------- theme toggle + dark-mode chrome overrides ---------- */
.nav-theme { width:40px; height:40px; flex:none; border-radius:var(--r-pill); border:1px solid var(--border-2); background:transparent; color:var(--fg); display:grid; place-items:center; transition:all var(--t-fast); }
.nav-theme:hover { background:var(--bg-inset); transform:translateY(-1px); }
.nav-theme svg { width:18px; height:18px; }
:root[data-theme="dark"] .nav { background:rgba(13,15,17,.72); }
:root[data-theme="dark"] .nav.scrolled { background:rgba(13,15,17,.86); border-color:var(--border); }
:root[data-theme="dark"] .brand-mark { background:rgba(255,255,255,.08); border:1px solid var(--border); }
:root[data-theme="dark"] .calc-head .title .b { background:rgba(255,255,255,.08); border:1px solid var(--border); }
:root[data-theme="dark"] .trustbar { border-color:var(--border); }
/* Section rhythm in dark mode: feature-dark bands read as raised, with hairline seams */
:root[data-theme="dark"] .dark-sec,
:root[data-theme="dark"] .footer { border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); }
:root[data-theme="dark"] .sub-sec { border-top:1px solid rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.04); }
:root[data-theme="dark"] .hero { border-bottom:1px solid rgba(255,255,255,.05); }