/* =========================================================
   WHITE-LABEL EV CHARGING SOFTWARE — page-scoped redesign
   Namespace: .evc-*  |  Loads only on the EV-charging template
   Design principles:
     • One accent (electric green) + a cool secondary (cyan)
     • Dark, premium base — feels like a real EV product dashboard
     • Reveal-on-scroll fade-up + subtle hover lift (matches the
       Candy AI pattern so motion language stays consistent)
     • Single source of typography rhythm via .evc-section-title
     • Honors prefers-reduced-motion
========================================================= */

:root {
  --evc-green: #00d97e;          /* primary brand — Tesla-leaning green */
  --evc-green-soft: #4ce0a0;     /* hover / accent text */
  --evc-cyan: #00e5ff;           /* electric secondary accent */
  --evc-yellow: #ffd000;         /* bolt highlight */
  --evc-bg: #07100c;             /* darkest base */
  --evc-bg-2: #0b1612;           /* alt sections */
  --evc-bg-3: #101a16;           /* deepest card bg */
  --evc-card: #0f1814;
  --evc-card-hover: #131e19;
  --evc-text: #ffffff;
  --evc-text-soft: #b4c4bd;
  --evc-text-muted: #6f8079;
  --evc-line: rgba(255, 255, 255, 0.07);
  --evc-line-2: rgba(255, 255, 255, 0.14);
  --evc-line-green: rgba(0, 217, 126, 0.35);
  --evc-line-cyan: rgba(0, 229, 255, 0.3);
  --evc-grad: linear-gradient(135deg, #00d97e 0%, #00e5ff 100%);
  --evc-grad-soft: linear-gradient(135deg, rgba(0, 217, 126, 0.18) 0%, rgba(0, 229, 255, 0.10) 100%);
  --evc-radius: 14px;
  --evc-radius-lg: 20px;
  --evc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== KEYFRAMES ===== */
@keyframes evc-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes evc-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes evc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 217, 126, 0.55); }
  50%      { box-shadow: 0 0 0 14px rgba(0, 217, 126, 0); }
}
@keyframes evc-bolt {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 transparent); }
  50%      { transform: translateY(-3px) scale(1.04); filter: drop-shadow(0 6px 18px rgba(0, 217, 126, 0.45)); }
}
@keyframes evc-progress-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes evc-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes evc-glow-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes evc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ===== PAGE WRAPPER ===== */
.evc-page {
  background: var(--evc-bg);
  color: var(--evc-text);
  overflow-x: clip;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
}
.evc-page section { position: relative; }
.evc-page a { color: inherit; }

/* container width override — wide canvas to breathe */
.evc-page .container {
  max-width: 1360px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 991px) {
  .evc-page .container { padding-left: 22px !important; padding-right: 22px !important; }
}
@media (max-width: 575px) {
  .evc-page .container { padding-left: 18px !important; padding-right: 18px !important; }
}

/* Reveal-on-scroll utility */
.evc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--evc-ease), transform 0.7s var(--evc-ease);
  will-change: opacity, transform;
}
.evc-reveal.is-visible { opacity: 1; transform: translateY(0); }
.evc-reveal[data-delay="1"].is-visible { transition-delay: 0.06s; }
.evc-reveal[data-delay="2"].is-visible { transition-delay: 0.12s; }
.evc-reveal[data-delay="3"].is-visible { transition-delay: 0.18s; }
.evc-reveal[data-delay="4"].is-visible { transition-delay: 0.24s; }
.evc-reveal[data-delay="5"].is-visible { transition-delay: 0.3s; }

/* ===== TYPOGRAPHY ===== */
.evc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--evc-green-soft);
  margin-bottom: 18px;
}
.evc-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--evc-green);
}

.evc-section-title {
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--evc-text);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.evc-section-title .evc-accent {
  background: var(--evc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.evc-section-sub {
  color: var(--evc-text-soft);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
  max-width: 760px;
}

.evc-head { margin-bottom: 56px; }
.evc-head.is-center {
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 56px;
}
.evc-head.is-center .evc-section-sub { margin-left: auto; margin-right: auto; }
.evc-head.is-center .evc-eyebrow { justify-content: center; }

/* ===== BUTTONS ===== */
.evc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.005em;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.3s var(--evc-ease), box-shadow 0.3s var(--evc-ease), color 0.3s var(--evc-ease);
}
.evc-btn--primary {
  background: var(--evc-grad);
  color: #051a12;
  box-shadow: 0 12px 30px -10px rgba(0, 217, 126, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}
.evc-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #00e5ff 0%, #00d97e 100%);
  opacity: 0;
  transition: opacity 0.4s var(--evc-ease);
  z-index: -1;
}
.evc-btn--primary:hover {
  transform: translateY(-2px);
  color: #041510;
  box-shadow: 0 22px 50px -10px rgba(0, 229, 255, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}
.evc-btn--primary:hover::before { opacity: 1; }
.evc-btn--ghost {
  background: transparent;
  color: var(--evc-text);
  border-color: var(--evc-line-2);
}
.evc-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--evc-line-green);
  color: var(--evc-green-soft);
}
.evc-btn--light {
  background: #ffffff;
  color: #051a12;
}
.evc-btn--light:hover {
  transform: translateY(-2px);
  background: #f1fff7;
  color: #051a12;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.35);
}
.evc-btn .evc-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--evc-ease);
}
.evc-btn:hover .evc-arrow { transform: translateX(4px); }

/* =========================================================
   1. HERO
========================================================= */
.evc-hero {
  padding: 110px 0 110px;
  background: var(--evc-bg);
  border-bottom: 1px solid var(--evc-line);
  overflow: hidden;
}
.evc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 480px at 88% 10%, rgba(0, 229, 255, 0.18) 0%, transparent 70%),
    radial-gradient(620px 420px at 5% 90%, rgba(0, 217, 126, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.evc-hero::after {
  /* subtle grid pattern */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 65% 55% at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 50%, #000 0%, transparent 80%);
  pointer-events: none;
}
.evc-hero .container { position: relative; z-index: 2; }

.evc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0, 217, 126, 0.10);
  border: 1px solid var(--evc-line-green);
  color: var(--evc-green-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.evc-hero-eyebrow .evc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--evc-green);
  box-shadow: 0 0 0 0 rgba(0, 217, 126, 0.55);
  animation: evc-pulse 2s ease-in-out infinite;
}

.evc-hero-title {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  color: var(--evc-text);
}
.evc-hero-title .evc-accent {
  background: var(--evc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.evc-hero-sub {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--evc-text-soft);
  max-width: 620px;
  margin: 0 0 30px;
}

.evc-hero-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.evc-hero-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--evc-text);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(0, 217, 126, 0.08) 0%, rgba(0, 229, 255, 0.05) 100%);
  border: 1px solid rgba(0, 217, 126, 0.25);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--evc-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}
.evc-hero-bullets li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12l5 5L20 7' stroke='%23051a12' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat,
    var(--evc-grad);
  box-shadow: 0 4px 14px rgba(0, 217, 126, 0.4);
}
.evc-hero-bullets li:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, 0.6);
  box-shadow: 0 14px 32px rgba(0, 217, 126, 0.25), 0 0 30px rgba(0, 229, 255, 0.25);
}

.evc-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* HERO right — animated dashboard mock */
.evc-hero-dash {
  position: relative;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(0, 229, 255, 0.05) 0%, rgba(0, 217, 126, 0.02) 100%), var(--evc-card);
  border: 1px solid var(--evc-line-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 217, 126, 0.12),
    0 0 60px -10px rgba(0, 229, 255, 0.25);
}
.evc-hero-dash::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 217, 126, 0.45), transparent 60%, rgba(0, 229, 255, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.evc-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--evc-line);
  margin-bottom: 18px;
}
.evc-dash-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--evc-text);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.evc-dash-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--evc-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #051a12;
  box-shadow: 0 6px 18px -2px rgba(0, 217, 126, 0.5);
}
.evc-dash-brand-mark svg { width: 16px; height: 16px; }
.evc-dash-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 217, 126, 0.12);
  border: 1px solid var(--evc-line-green);
  color: var(--evc-green-soft);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.evc-dash-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--evc-green);
  box-shadow: 0 0 8px var(--evc-green);
  animation: evc-pulse 1.8s ease-in-out infinite;
}

.evc-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.evc-dash-stat {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--evc-line);
}
.evc-dash-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--evc-text-muted);
  margin-bottom: 4px;
}
.evc-dash-stat-num {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--evc-text);
  letter-spacing: -0.01em;
}
.evc-dash-stat-num .evc-accent {
  background: var(--evc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.evc-dash-chart {
  height: 130px;
  position: relative;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(0, 229, 255, 0.06) 0%, transparent 100%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid var(--evc-line);
  overflow: hidden;
  margin-bottom: 18px;
  padding: 14px;
}
.evc-dash-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.evc-dash-chart-svg path.evc-line-path {
  fill: none;
  stroke: url(#evc-line-grad);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: evc-draw 2s ease forwards 0.4s;
}
.evc-dash-chart-svg path.evc-fill-path {
  fill: url(#evc-fill-grad);
  opacity: 0;
  animation: evc-fade-in 1s ease forwards 1.6s;
}
@keyframes evc-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes evc-fade-in { to { opacity: 1; } }

.evc-dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evc-dash-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--evc-line);
  font-size: 12.5px;
  color: var(--evc-text-soft);
}
.evc-dash-list .evc-charge-id {
  font-family: ui-monospace, monospace;
  font-weight: 600;
  color: var(--evc-text);
}
.evc-dash-list .evc-charge-pct {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--evc-green-soft);
}
.evc-dash-list .evc-charge-bar {
  flex: 1;
  height: 5px;
  margin: 0 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.evc-dash-list .evc-charge-bar-fill {
  height: 100%;
  background: var(--evc-grad);
  transform-origin: left center;
  transform: scaleX(0);
  animation: evc-progress-grow 1.6s var(--evc-ease) forwards;
}
.evc-dash-list li:nth-child(1) .evc-charge-bar-fill { animation-delay: 0.6s; --target: 0.82; }
.evc-dash-list li:nth-child(2) .evc-charge-bar-fill { animation-delay: 0.9s; --target: 0.45; }
.evc-dash-list li:nth-child(3) .evc-charge-bar-fill { animation-delay: 1.2s; --target: 0.68; }

@media (max-width: 991px) {
  .evc-hero { padding: 80px 0 70px; }
  .evc-hero-bullets { grid-template-columns: 1fr; }
  .evc-hero-dash { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .evc-hero-eyebrow .evc-dot,
  .evc-dash-status::before { animation: none; }
}

/* =========================================================
   2. MARKET OPPORTUNITY ($100B SECTION)
========================================================= */
.evc-market {
  padding: 110px 0;
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(0, 229, 255, 0.06) 0%, transparent 70%),
    var(--evc-bg-2);
  border-top: 1px solid var(--evc-line);
  border-bottom: 1px solid var(--evc-line);
}
.evc-market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}
.evc-market-card {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--evc-radius-lg);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--evc-ease), border-color 0.4s var(--evc-ease), box-shadow 0.4s var(--evc-ease);
}
.evc-market-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--evc-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--evc-ease);
}
.evc-market-card:hover::before { transform: scaleX(1); }
.evc-market-card::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(0, 217, 126, 0.16) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.5s var(--evc-ease);
  z-index: -1;
}
.evc-market-card:hover {
  transform: translateY(-6px);
  border-color: var(--evc-line-green);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.5), 0 0 30px -6px rgba(0, 217, 126, 0.32);
}
.evc-market-card:hover::after { opacity: 1; }
.evc-market-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.evc-market-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 217, 126, 0.10);
  border: 1px solid var(--evc-line-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--evc-green-soft);
  transition: transform 0.4s var(--evc-ease), background 0.4s ease;
}
.evc-market-card-icon svg { width: 22px; height: 22px; }
.evc-market-card:hover .evc-market-card-icon {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(0, 217, 126, 0.18);
}
.evc-market-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--evc-text);
  letter-spacing: -0.01em;
  margin: 0;
}
.evc-market-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.evc-market-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  position: relative;
}
.evc-market-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--evc-grad);
  box-shadow: 0 0 12px rgba(0, 217, 126, 0.45);
}
.evc-market-stat-num {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--evc-text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.evc-market-stat-num .evc-accent {
  background: var(--evc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.evc-market-stat-label {
  font-size: 0.92rem;
  color: var(--evc-text-soft);
  line-height: 1.45;
}

.evc-market-foot {
  margin-top: 44px;
  padding: 34px 38px;
  border-radius: var(--evc-radius-lg);
  background: linear-gradient(135deg, rgba(0, 217, 126, 0.16) 0%, rgba(0, 229, 255, 0.08) 100%);
  border: 1px solid var(--evc-line-green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.evc-market-foot::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.18) 0%, transparent 65%);
  pointer-events: none;
}
.evc-market-foot-content {
  flex: 1;
  min-width: 280px;
  position: relative;
}
.evc-market-foot h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--evc-text);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.evc-market-foot p {
  font-size: 0.96rem;
  color: var(--evc-text-soft);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 991px) {
  .evc-market { padding: 80px 0; }
  .evc-market-grid { grid-template-columns: 1fr; }
  .evc-market-foot { padding: 28px; }
}

/* =========================================================
   3. CORE FUNCTIONALITY
========================================================= */
.evc-core {
  padding: 110px 0;
  background: var(--evc-bg);
}
.evc-core-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.evc-core-card {
  position: relative;
  padding: 30px 28px;
  border-radius: var(--evc-radius);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  /* overflow stays visible so the battery terminals can extend
     beyond the card edges on the left and right. */
  isolation: isolate;
  transition: transform 0.4s var(--evc-ease), border-color 0.4s var(--evc-ease), background 0.4s var(--evc-ease), box-shadow 0.4s var(--evc-ease);
}
.evc-core-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--evc-radius);
  padding: 1px;
  background: linear-gradient(135deg, var(--evc-green), var(--evc-cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--evc-ease);
  pointer-events: none;
}
.evc-core-card:hover {
  transform: translateY(-6px);
  background: var(--evc-card-hover);
  box-shadow: 0 22px 48px -14px rgba(0, 0, 0, 0.55), 0 0 32px -6px rgba(0, 217, 126, 0.28);
}
.evc-core-card:hover::before { opacity: 1; }
.evc-core-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 217, 126, 0.16) 0%, rgba(0, 229, 255, 0.08) 100%);
  border: 1px solid var(--evc-line-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--evc-green-soft);
  margin-bottom: 22px;
  transition: transform 0.5s var(--evc-ease), color 0.4s ease, border-color 0.4s ease;
}
.evc-core-icon svg { width: 26px; height: 26px; }
.evc-core-card:hover .evc-core-icon {
  transform: scale(1.08) rotate(-6deg);
  color: var(--evc-cyan);
  border-color: var(--evc-line-cyan);
}
.evc-core-card h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--evc-text);
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  line-height: 1.3;
}
.evc-core-card p {
  font-size: 0.94rem;
  color: var(--evc-text-soft);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 991px) {
  .evc-core { padding: 80px 0; }
  .evc-core-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .evc-core-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   4. COMPLIANCE GRID
========================================================= */
.evc-compliance {
  padding: 110px 0;
  background: var(--evc-bg-2);
  border-top: 1px solid var(--evc-line);
  border-bottom: 1px solid var(--evc-line);
}
.evc-compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px;
}
.evc-compliance-card {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--evc-radius);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  /* overflow stays visible so the battery terminals can stick
     out the top edge. Bottom-border hover effect below uses
     scaleY so it doesn't need overflow clipping anymore. */
  isolation: isolate;
  transition: transform 0.45s var(--evc-ease), border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
}
.evc-compliance-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--evc-grad);
  border-radius: 0 0 var(--evc-radius) var(--evc-radius);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.5s var(--evc-ease);
}
.evc-compliance-card:hover {
  transform: translateY(-6px);
  background: var(--evc-card-hover);
  border-color: var(--evc-line-cyan);
  box-shadow: 0 22px 48px -16px rgba(0, 0, 0, 0.5), 0 0 30px -6px rgba(0, 229, 255, 0.3);
}
.evc-compliance-card:hover::before { transform: scaleY(1); }
.evc-compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--evc-green-soft);
  background: rgba(0, 217, 126, 0.10);
  border: 1px solid var(--evc-line-green);
  margin-bottom: 18px;
  font-family: ui-monospace, monospace;
}
.evc-compliance-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--evc-green);
  box-shadow: 0 0 8px var(--evc-green);
}
.evc-compliance-card h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--evc-text);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.evc-compliance-card p {
  font-size: 0.9rem;
  color: var(--evc-text-soft);
  line-height: 1.6;
  margin: 0;
}
.evc-compliance-card .evc-comp-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 28px;
  height: 28px;
  color: var(--evc-text-muted);
  transition: color 0.3s ease, transform 0.4s var(--evc-ease);
}
.evc-compliance-card:hover .evc-comp-icon {
  color: var(--evc-cyan);
  transform: rotate(10deg);
}
.evc-compliance-card .evc-comp-icon svg { width: 100%; height: 100%; }

@media (max-width: 1200px) {
  .evc-compliance-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .evc-compliance { padding: 80px 0; }
  .evc-compliance-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .evc-compliance-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   5. KEY FEATURES — TABBED SECTION
========================================================= */
.evc-features {
  padding: 110px 0;
  background: var(--evc-bg);
}
.evc-feat-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border-radius: 14px;
  background: var(--evc-card);
  border: 1px solid var(--evc-line-2);
  margin: 0 auto 44px;
}
.evc-feat-tab {
  position: relative;
  padding: 11px 22px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  color: var(--evc-text-soft);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s ease;
}
.evc-feat-tab svg { width: 16px; height: 16px; }
.evc-feat-tab:hover { color: var(--evc-text); }
.evc-feat-tab.is-active {
  background: var(--evc-grad);
  color: #051a12;
  box-shadow: 0 8px 20px -6px rgba(0, 217, 126, 0.5);
}
.evc-feat-tab.is-active:hover { color: #051a12; }
.evc-feat-panel { display: none; }
.evc-feat-panel.is-active { display: block; animation: evc-fade-up 0.5s var(--evc-ease); }

.evc-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.evc-feat-card {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--evc-radius);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--evc-ease), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.evc-feat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--evc-green) 30%, var(--evc-cyan) 50%, var(--evc-green) 70%, transparent 100%);
  background-size: 200% 100%;
  background-position: 200% 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.evc-feat-card:hover::before {
  opacity: 1;
  animation: evc-shine 1.6s linear infinite;
}
.evc-feat-card:hover {
  transform: translateY(-6px);
  background: var(--evc-card-hover);
  border-color: var(--evc-line-green);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.55), 0 0 32px -6px rgba(0, 217, 126, 0.32);
}
.evc-feat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(0, 217, 126, 0.10);
  border: 1px solid var(--evc-line-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--evc-green-soft);
  margin-bottom: 16px;
  transition: transform 0.5s var(--evc-ease), background 0.4s ease, color 0.4s ease;
}
.evc-feat-icon svg { width: 22px; height: 22px; }
.evc-feat-card:hover .evc-feat-icon {
  transform: scale(1.1) rotate(-6deg);
  color: var(--evc-cyan);
  background: rgba(0, 229, 255, 0.12);
}
.evc-feat-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--evc-text);
  margin: 0 0 10px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.evc-feat-card p {
  font-size: 0.88rem;
  color: var(--evc-text-muted);
  line-height: 1.6;
  margin: 0;
  transition: color 0.3s ease;
}
.evc-feat-card:hover p { color: var(--evc-text-soft); }

@media (max-width: 1200px) {
  .evc-feat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .evc-features { padding: 80px 0; }
  .evc-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .evc-feat-tabs { width: 100%; justify-content: center; }
  .evc-feat-tab { flex: 1; min-width: 0; justify-content: center; padding: 11px 14px; }
}
@media (max-width: 480px) {
  .evc-feat-grid { grid-template-columns: 1fr; }
  .evc-feat-tabs { flex-direction: column; }
  .evc-feat-tab { width: 100%; }
}

/* =========================================================
   6. WHO CAN BENEFIT
========================================================= */
.evc-audience {
  padding: 110px 0;
  background: var(--evc-bg-2);
  border-top: 1px solid var(--evc-line);
  border-bottom: 1px solid var(--evc-line);
}
.evc-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.evc-aud-card {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--evc-radius);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  /* overflow stays visible so the battery terminals can extend
     beyond the card edges. Radial glow below is inset-bound. */
  isolation: isolate;
  transition: transform 0.45s var(--evc-ease), background 0.4s ease, box-shadow 0.4s ease;
}
.evc-aud-card::after {
  /* Inset-bound radial glow — fills the card and stays clipped by
     the border-radius so it can't bleed onto neighbouring cards. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(180px 180px at 8% 95%, rgba(0, 229, 255, 0.22) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--evc-ease);
  z-index: -1;
  pointer-events: none;
}
.evc-aud-card:hover {
  transform: translateY(-6px);
  background: var(--evc-card-hover);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.55), 0 0 36px -6px rgba(0, 229, 255, 0.3);
}
.evc-aud-card:hover::after { opacity: 1; }
.evc-aud-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 217, 126, 0.18) 0%, rgba(0, 229, 255, 0.08) 100%);
  border: 1px solid var(--evc-line-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--evc-green-soft);
  margin-bottom: 20px;
  transition: transform 0.5s var(--evc-ease), color 0.4s ease;
}
.evc-aud-icon svg { width: 24px; height: 24px; }
.evc-aud-card:hover .evc-aud-icon {
  transform: scale(1.1) rotate(-6deg);
  color: var(--evc-cyan);
}
.evc-aud-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--evc-text);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.evc-aud-card p {
  font-size: 0.9rem;
  color: var(--evc-text-soft);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1100px) {
  .evc-audience-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .evc-audience { padding: 80px 0; }
  .evc-audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .evc-audience-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   7. CTA STRIP — "Market Won't Wait"
========================================================= */
.evc-cta-strip {
  padding: 70px 0;
  background: var(--evc-bg);
  position: relative;
  overflow: hidden;
}
.evc-cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 20% 50%, rgba(0, 217, 126, 0.14) 0%, transparent 70%),
    radial-gradient(700px 400px at 80% 50%, rgba(0, 229, 255, 0.14) 0%, transparent 70%);
  pointer-events: none;
}
.evc-cta-card {
  position: relative;
  padding: 50px 60px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(0, 217, 126, 0.10) 0%, rgba(0, 229, 255, 0.05) 100%),
    var(--evc-bg-3);
  border: 1px solid var(--evc-line-green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  overflow: hidden;
}
.evc-cta-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.22) 0%, transparent 65%);
  pointer-events: none;
}
.evc-cta-card::after {
  /* moving dot grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.6px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 0%, transparent 80%);
}
.evc-cta-card-content {
  flex: 1;
  min-width: 320px;
  position: relative;
  z-index: 1;
}
.evc-cta-card h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--evc-text);
  line-height: 1.18;
  margin: 0 0 10px;
}
.evc-cta-card h2 .evc-accent {
  background: var(--evc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.evc-cta-card p {
  font-size: 1rem;
  color: var(--evc-text-soft);
  line-height: 1.65;
  margin: 0;
  max-width: 620px;
}
.evc-cta-card .evc-btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .evc-cta-card { padding: 38px 32px; }
  .evc-cta-card { flex-direction: column; align-items: flex-start; }
  .evc-cta-card .evc-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   8. HOW IT WORKS — TIMELINE STEPS
========================================================= */
.evc-how {
  padding: 110px 0;
  background: var(--evc-bg);
}
.evc-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
}
.evc-how-step {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--evc-radius-lg);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.45s var(--evc-ease), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.evc-how-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--evc-grad);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.6s var(--evc-ease);
}
.evc-how-step:hover {
  transform: translateY(-6px);
  background: var(--evc-card-hover);
  border-color: var(--evc-line-green);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.55), 0 0 30px -6px rgba(0, 217, 126, 0.3);
}
.evc-how-step:hover::before { transform: scaleY(1); }
.evc-how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--evc-green-soft);
  background: rgba(0, 217, 126, 0.08);
  border: 1px solid var(--evc-line-green);
  margin-bottom: 22px;
  letter-spacing: -0.01em;
  transition: transform 0.5s var(--evc-ease), color 0.4s ease, background 0.4s ease;
}
.evc-how-step:hover .evc-how-step-num {
  transform: scale(1.06) rotate(-4deg);
  color: #051a12;
  background: var(--evc-grad);
}
.evc-how-step h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--evc-text);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.evc-how-step p {
  font-size: 0.95rem;
  color: var(--evc-text-soft);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 991px) {
  .evc-how { padding: 80px 0; }
  .evc-how-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .evc-how-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   9. REVENUE MODELS
========================================================= */
.evc-revenue {
  padding: 110px 0;
  background: var(--evc-bg-2);
  border-top: 1px solid var(--evc-line);
  border-bottom: 1px solid var(--evc-line);
}
.evc-revenue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.evc-revenue-card {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--evc-radius-lg);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  /* overflow stays visible so the battery terminals can extend
     beyond the card edges. Radial glow below is inset-bound. */
  isolation: isolate;
  transition: transform 0.4s var(--evc-ease), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.evc-revenue-card::after {
  /* Inset-bound radial glow — fills the card and stays clipped by
     the border-radius so it can't bleed onto neighbouring cards. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px 220px at 92% 8%, rgba(0, 217, 126, 0.22) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--evc-ease);
  z-index: -1;
  pointer-events: none;
}
.evc-revenue-card:hover {
  transform: translateY(-6px);
  background: var(--evc-card-hover);
  border-color: var(--evc-line-green);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.55), 0 0 30px -6px rgba(0, 217, 126, 0.3);
}
.evc-revenue-card:hover::after { opacity: 1; }
.evc-rev-tag {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--evc-cyan);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid var(--evc-line-cyan);
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.evc-revenue-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--evc-text);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.evc-revenue-card p {
  font-size: 0.95rem;
  color: var(--evc-text-soft);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 991px) {
  .evc-revenue { padding: 80px 0; }
  .evc-revenue-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .evc-revenue-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   10. WHY CHOOSE — split feature grid
========================================================= */
.evc-why {
  padding: 110px 0;
  background: var(--evc-bg);
}
.evc-why-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}
.evc-why-intro {
  position: sticky;
  top: 40px;
}
.evc-why-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.evc-why-item {
  position: relative;
  display: flex;
  gap: 22px;
  padding: 26px 28px;
  border-radius: var(--evc-radius);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--evc-ease), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.evc-why-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--evc-grad);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.5s var(--evc-ease);
}
.evc-why-item:hover {
  transform: translateX(6px);
  background: var(--evc-card-hover);
  border-color: var(--evc-line-green);
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.55), 0 0 26px -6px rgba(0, 217, 126, 0.28);
}
.evc-why-item:hover::before { transform: scaleY(1); }
.evc-why-num {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--evc-text-muted);
  letter-spacing: -0.01em;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.4s ease;
  background: var(--evc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.55;
}
.evc-why-item:hover .evc-why-num { opacity: 1; }
.evc-why-body h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--evc-text);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.evc-why-body p {
  font-size: 0.95rem;
  color: var(--evc-text-soft);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 991px) {
  .evc-why { padding: 80px 0; }
  .evc-why-split { grid-template-columns: 1fr; gap: 32px; }
  .evc-why-intro { position: static; }
}

/* =========================================================
   11. FAQ — accordion
========================================================= */
.evc-faq {
  padding: 110px 0;
  background: var(--evc-bg-2);
  border-top: 1px solid var(--evc-line);
}
.evc-faq-list {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.evc-faq-item {
  border-radius: var(--evc-radius);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.evc-faq-item[open] {
  border-color: var(--evc-line-green);
  background: var(--evc-card-hover);
}
.evc-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 26px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--evc-text);
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  letter-spacing: -0.005em;
  transition: color 0.3s ease;
}
.evc-faq-item summary::-webkit-details-marker { display: none; }
.evc-faq-item summary::after {
  content: "";
  width: 22px;
  height: 22px;
  margin-left: auto;
  flex-shrink: 0;
  background: var(--evc-grad);
  border-radius: 50%;
  position: relative;
  transition: transform 0.35s var(--evc-ease);
}
.evc-faq-item summary::before {
  content: "";
  position: absolute;
  right: 32px;
  width: 10px;
  height: 2px;
  background: #051a12;
  z-index: 2;
  transition: transform 0.35s var(--evc-ease);
}
.evc-faq-item summary {
  position: relative;
}
.evc-faq-item summary .evc-faq-plus {
  position: absolute;
  right: 32px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 2;
}
.evc-faq-item summary .evc-faq-plus::before,
.evc-faq-item summary .evc-faq-plus::after {
  content: "";
  position: absolute;
  background: #051a12;
  border-radius: 1px;
  transition: transform 0.35s var(--evc-ease), opacity 0.35s ease;
}
.evc-faq-item summary .evc-faq-plus::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
}
.evc-faq-item summary .evc-faq-plus::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
}
.evc-faq-item[open] summary .evc-faq-plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.evc-faq-item[open] summary::after { transform: rotate(180deg); }
.evc-faq-item summary::before { display: none; }

.evc-faq-item summary:hover { color: var(--evc-green-soft); }
.evc-faq-a {
  padding: 0 26px 24px 26px;
  font-size: 0.96rem;
  color: var(--evc-text-soft);
  line-height: 1.7;
  margin: 0;
  animation: evc-fade-up 0.4s var(--evc-ease);
}

@media (max-width: 575px) {
  .evc-faq { padding: 80px 0; }
  .evc-faq-item summary { padding: 18px 22px; font-size: 1rem; }
  .evc-faq-item summary .evc-faq-plus { right: 26px; }
  .evc-faq-a { padding: 0 22px 22px; }
}

/* =========================================================
   ROW LAYOUT — hero two-col helpers
========================================================= */
.evc-hero-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}
@media (max-width: 991px) {
  .evc-hero-row { grid-template-columns: 1fr; }
}

/* =========================================================
   SCHEDULE FORM SECTION
========================================================= */
.evc-schedule {
  padding: 110px 0;
  background: var(--evc-bg);
}
.evc-schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 44px;
  align-items: center;
}
.evc-schedule-info h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--evc-text);
  margin: 0 0 16px;
}
.evc-schedule-info h2 .evc-accent {
  background: var(--evc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.evc-schedule-info p {
  font-size: 1.02rem;
  color: var(--evc-text-soft);
  line-height: 1.7;
  margin: 0 0 24px;
}
.evc-schedule-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.evc-schedule-perks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.96rem;
  color: var(--evc-text-soft);
}
.evc-schedule-perks li::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12l5 5L20 7' stroke='%23051a12' stroke-width='3.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat,
    var(--evc-grad);
  box-shadow: 0 4px 14px rgba(0, 217, 126, 0.4);
}
.evc-form-card {
  padding: 36px 34px;
  border-radius: 22px;
  background: var(--evc-card);
  border: 1px solid var(--evc-line-2);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.evc-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 280px at 0% 0%, rgba(0, 217, 126, 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.evc-form-card > * { position: relative; }
.evc-form-card h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--evc-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.evc-form-card .evc-form-intro {
  font-size: 0.93rem;
  color: var(--evc-text-muted);
  margin: 0 0 22px;
  line-height: 1.55;
}

/* Local overrides for shared form classes */
.evc-page .tm-field-grid { gap: 14px; margin-bottom: 14px; }
.evc-page .tm-field { display: flex; flex-direction: column; }
.evc-page .tm-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--evc-text-soft);
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.evc-page .tm-opt {
  font-size: 0.7rem;
  color: var(--evc-text-muted);
  font-weight: 500;
  letter-spacing: 0.3px;
}
.evc-page .tm-input-wrap {
  position: relative;
}
.evc-page .tm-input,
.evc-page .tm-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--evc-line-2);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--evc-text);
  font-size: 0.95rem;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.evc-page .tm-input::placeholder,
.evc-page .tm-textarea::placeholder { color: var(--evc-text-muted); }
.evc-page .tm-input:focus,
.evc-page .tm-textarea:focus {
  outline: none;
  border-color: var(--evc-green-soft);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 217, 126, 0.18);
}
.evc-page .tm-textarea { min-height: 110px; resize: vertical; }
.evc-page .error-message {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: #ff7878;
  min-height: 18px;
}
.evc-page .tm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 18px;
  cursor: pointer;
}
.evc-page .tm-toggle-input { display: none; }
.evc-page .tm-toggle-track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--evc-line-2);
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
}
.evc-page .tm-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s var(--evc-ease);
}
.evc-page .tm-toggle-input:checked + .tm-toggle-track {
  background: var(--evc-grad);
  border-color: transparent;
}
.evc-page .tm-toggle-input:checked + .tm-toggle-track .tm-toggle-thumb {
  transform: translateX(18px);
}
.evc-page .tm-toggle-text { display: flex; flex-direction: column; }
.evc-page .tm-toggle-title { font-size: 0.9rem; font-weight: 600; color: var(--evc-text); }
.evc-page .tm-toggle-sub { font-size: 0.78rem; color: var(--evc-text-muted); }

.evc-page .tm-submit {
  width: 100%;
  padding: 14px 22px;
  border-radius: 12px;
  border: 0;
  background: var(--evc-grad);
  color: #051a12;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 16px 36px -10px rgba(0, 217, 126, 0.5);
  transition: transform 0.3s var(--evc-ease), box-shadow 0.3s var(--evc-ease);
}
.evc-page .tm-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -10px rgba(0, 229, 255, 0.5);
}
.evc-page .tm-submit-arrow { font-size: 1.15rem; transition: transform 0.3s var(--evc-ease); }
.evc-page .tm-submit:hover .tm-submit-arrow { transform: translateX(4px); }

@media (max-width: 991px) {
  .evc-schedule { padding: 80px 0; }
  .evc-schedule-grid { grid-template-columns: 1fr; gap: 32px; }
  .evc-form-card { padding: 28px 24px; }
}

/* =========================================================
   12. MARQUEE — feature trust strip
========================================================= */
.evc-marquee {
  background: var(--evc-bg-2);
  padding: 22px 0;
  border-top: 1px solid var(--evc-line);
  border-bottom: 1px solid var(--evc-line);
  overflow: hidden;
  position: relative;
}
.evc-marquee::before,
.evc-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.evc-marquee::before { left: 0;  background: linear-gradient(90deg, var(--evc-bg-2), transparent); }
.evc-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--evc-bg-2), transparent); }
.evc-marquee-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: evc-marquee 50s linear infinite;
}
.evc-marquee:hover .evc-marquee-track { animation-play-state: paused; }
.evc-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--evc-line);
  color: var(--evc-text-soft);
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
}
.evc-feature-pill svg {
  width: 14px;
  height: 14px;
  color: var(--evc-green-soft);
  flex-shrink: 0;
}

/* =========================================================
   TRUST BAR — small horizontal stat strip after the marquee
========================================================= */
.evc-trust {
  padding: 56px 0;
  background: var(--evc-bg);
  border-bottom: 1px solid var(--evc-line);
  position: relative;
}
.evc-trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 220px at 50% 100%, rgba(0, 217, 126, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.evc-trust .container { position: relative; }
.evc-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.evc-trust-stat {
  text-align: center;
  padding: 24px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 217, 126, 0.06) 0%, rgba(0, 229, 255, 0.04) 100%);
  border: 1px solid var(--evc-line);
  transition: transform 0.4s var(--evc-ease), border-color 0.4s ease, box-shadow 0.4s ease;
}
.evc-trust-stat:hover {
  transform: translateY(-4px);
  border-color: var(--evc-line-green);
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.45), 0 0 22px -6px rgba(0, 217, 126, 0.28);
}
.evc-trust-num {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  background: var(--evc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 6px;
  line-height: 1.05;
}
.evc-trust-label {
  display: block;
  font-size: 0.86rem;
  color: var(--evc-text-soft);
  letter-spacing: 0.4px;
  font-weight: 500;
  line-height: 1.4;
}
@media (max-width: 991px) {
  .evc-trust { padding: 44px 0; }
  .evc-trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   INTEGRATIONS — 6-category grid of payment/hardware/cloud
   integration chips. Sits between Compliance and Features.
========================================================= */
.evc-integrations {
  padding: 110px 0;
  background: var(--evc-bg);
}
.evc-integ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.evc-integ-card {
  position: relative;
  padding: 28px 26px;
  border-radius: var(--evc-radius);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--evc-ease), border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.evc-integ-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--evc-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--evc-ease);
}
.evc-integ-card:hover {
  transform: translateY(-6px);
  background: var(--evc-card-hover);
  border-color: var(--evc-line-cyan);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.55), 0 0 30px -6px rgba(0, 229, 255, 0.28);
}
.evc-integ-card:hover::before { transform: scaleX(1); }
.evc-integ-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.evc-integ-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 217, 126, 0.14) 0%, rgba(0, 229, 255, 0.06) 100%);
  border: 1px solid var(--evc-line-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--evc-green-soft);
  flex-shrink: 0;
  transition: transform 0.5s var(--evc-ease), color 0.4s ease;
}
.evc-integ-icon svg { width: 22px; height: 22px; }
.evc-integ-card:hover .evc-integ-icon {
  transform: scale(1.08) rotate(-6deg);
  color: var(--evc-cyan);
}
.evc-integ-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--evc-text);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.evc-integ-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.evc-integ-chip {
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--evc-line);
  color: var(--evc-text-soft);
  letter-spacing: 0.1px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.evc-integ-chip:hover {
  background: rgba(0, 217, 126, 0.10);
  border-color: var(--evc-line-green);
  color: var(--evc-green-soft);
  transform: translateY(-2px);
}
@media (max-width: 991px) {
  .evc-integrations { padding: 80px 0; }
  .evc-integ-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .evc-integ-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PREMIUM ADD-ONS — 4-col card grid. Sits between Features
   and Audience. Each card has a yellow "Power-Up" badge.
========================================================= */
.evc-addons {
  padding: 110px 0;
  background: var(--evc-bg-2);
  border-top: 1px solid var(--evc-line);
  border-bottom: 1px solid var(--evc-line);
}
.evc-addon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.evc-addon-card {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--evc-radius);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--evc-ease), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.evc-addon-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--evc-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--evc-ease);
}
.evc-addon-card:hover {
  transform: translateY(-6px);
  background: var(--evc-card-hover);
  border-color: var(--evc-line-green);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.55), 0 0 30px -6px rgba(0, 217, 126, 0.32);
}
.evc-addon-card:hover::before { transform: scaleX(1); }
.evc-addon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  color: var(--evc-yellow);
  background: rgba(255, 208, 0, 0.10);
  border: 1px solid rgba(255, 208, 0, 0.32);
  margin-bottom: 16px;
}
.evc-addon-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--evc-yellow);
  box-shadow: 0 0 8px rgba(255, 208, 0, 0.6);
}
.evc-addon-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(0, 217, 126, 0.10);
  border: 1px solid var(--evc-line-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--evc-green-soft);
  margin-bottom: 16px;
  transition: transform 0.5s var(--evc-ease), color 0.4s ease, background 0.4s ease;
}
.evc-addon-icon svg { width: 22px; height: 22px; }
.evc-addon-card:hover .evc-addon-icon {
  transform: scale(1.1) rotate(-6deg);
  color: var(--evc-cyan);
  background: rgba(0, 229, 255, 0.12);
}
.evc-addon-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--evc-text);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.evc-addon-card p {
  font-size: 0.88rem;
  color: var(--evc-text-soft);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1100px) {
  .evc-addon-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .evc-addons { padding: 80px 0; }
  .evc-addon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .evc-addon-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ENGAGEMENT PROCESS — 6-step delivery timeline. Sits
   between Why-Choose and the second CTA strip. Each step
   uses a cyan "phase" pill (Day 1, Week 2-4, etc.).
========================================================= */
.evc-process {
  padding: 110px 0;
  background: var(--evc-bg);
}
.evc-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.evc-process-step {
  position: relative;
  padding: 30px 28px;
  border-radius: var(--evc-radius-lg);
  background: var(--evc-card);
  border: 1px solid var(--evc-line);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.45s var(--evc-ease), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.evc-process-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--evc-grad);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.6s var(--evc-ease);
}
.evc-process-step:hover {
  transform: translateY(-6px);
  background: var(--evc-card-hover);
  border-color: var(--evc-line-green);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.55), 0 0 30px -6px rgba(0, 217, 126, 0.3);
}
.evc-process-step:hover::before { transform: scaleY(1); }
.evc-process-phase {
  display: inline-block;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--evc-cyan);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid var(--evc-line-cyan);
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.evc-process-step h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--evc-text);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.evc-process-step p {
  font-size: 0.95rem;
  color: var(--evc-text-soft);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 991px) {
  .evc-process { padding: 80px 0; }
  .evc-process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .evc-process-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   BATTERY-STYLE TERMINALS — two variants
   Default (.evc-bat): small dark "knobs" stick out the LEFT
     and RIGHT edges of the card, lighting up with the brand
     green→cyan gradient on hover. Used for Core Functionality,
     Audience and Revenue cards.
   .evc-bat--top: two coloured knobs (GREEN negative, RED
     positive) sit on TOP of the card like a car battery's
     terminals. Used for Compliance cards only.
   Pure CSS, no images, aria-hidden.
========================================================= */
.evc-bat {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

/* ---------- DEFAULT: side knobs ---------- */
.evc-bat::before,
.evc-bat::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 30px;
  background: var(--evc-card);
  border: 1px solid var(--evc-line-2);
  transform: translateY(-50%);
  transition: background 0.4s var(--evc-ease), border-color 0.4s var(--evc-ease), box-shadow 0.4s var(--evc-ease);
}
.evc-bat::before {
  left: -7px;
  border-radius: 3px 0 0 3px;
  border-right: 0;
}
.evc-bat::after {
  right: -7px;
  border-radius: 0 3px 3px 0;
  border-left: 0;
}

/* Card hover — side knobs light up with the brand gradient and
   a soft green+cyan glow, like contacts under load. */
.evc-core-card:hover > .evc-bat::before,
.evc-core-card:hover > .evc-bat::after,
.evc-aud-card:hover > .evc-bat::before,
.evc-aud-card:hover > .evc-bat::after,
.evc-revenue-card:hover > .evc-bat::before,
.evc-revenue-card:hover > .evc-bat::after {
  background: var(--evc-grad);
  border-color: transparent;
  box-shadow: 0 0 18px rgba(0, 217, 126, 0.55), 0 0 28px rgba(0, 229, 255, 0.35);
}

/* ---------- MODIFIER: top red/green knobs ---------- */
/* Reset side positioning, then place two knobs on top. */
.evc-bat--top::before,
.evc-bat--top::after {
  top: -9px;
  width: 38px;
  height: 10px;
  background: var(--evc-card);  /* overridden below */
  border: 0;
  border-radius: 4px 4px 0 0;
  transform: none;
  transition:
    box-shadow 0.4s var(--evc-ease),
    transform   0.4s var(--evc-ease);
}
/* LEFT knob — GREEN (negative terminal) */
.evc-bat--top::before {
  left: 22%;
  right: auto;
  background: linear-gradient(180deg, #4ce0a0 0%, #00d97e 60%, #00a85f 100%);
  box-shadow:
    0 0 0 1px rgba(0, 217, 126, 0.35),
    0 0 14px rgba(0, 217, 126, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* RIGHT knob — RED (positive terminal) */
.evc-bat--top::after {
  right: 22%;
  left: auto;
  background: linear-gradient(180deg, #ff7378 0%, #ec2024 60%, #b3151a 100%);
  box-shadow:
    0 0 0 1px rgba(236, 32, 36, 0.35),
    0 0 14px rgba(236, 32, 36, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Compliance hover — top knobs lift and glow brighter. */
.evc-compliance-card:hover > .evc-bat--top::before {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(0, 217, 126, 0.6),
    0 0 22px rgba(0, 217, 126, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.evc-compliance-card:hover > .evc-bat--top::after {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(236, 32, 36, 0.6),
    0 0 22px rgba(236, 32, 36, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

@media (max-width: 575px) {
  /* Phones — smaller side knobs */
  .evc-bat::before,
  .evc-bat::after {
    width: 5px;
    height: 26px;
  }
  .evc-bat::before { left: -6px; }
  .evc-bat::after  { right: -6px; }

  /* Phones — smaller top knobs */
  .evc-bat--top::before,
  .evc-bat--top::after {
    width: 30px;
    height: 8px;
    top: -7px;
  }
  .evc-bat--top::before { left: 20%; }
  .evc-bat--top::after  { right: 20%; }
}

/* =========================================================
   FINAL — reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .evc-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}