/**
 * cgp-home-page.css
 *
 * Home / front page shell — recharge.gr/  &  recharge.gr/en/
 *
 * Scope: hero, trusted-by logos (section wrapper only — strip in cgp-logos.css),
 *        two-path routing cards, lifecycle strip, platform section,
 *        why-Recharge grid, closing CTA.
 * Does NOT contain: global type/buttons (style.css), calculators,
 *                   client logo strip (cgp-logos.css).
 * Complements:      style.css :root tokens, cgp-logos.css,
 *                   cgp-residential-page.css, cgp-business-page.css
 *
 * Visual language: "calm confidence, transparency, simplicity"
 *   — Geologica (display) + system-font (body)
 *   — Action blue (#1665D8) for CTAs
 *   — Generous whitespace, minimal decoration
 *
 * Changelog v1.6.17 (2026-06-14):
 *   — Why Recharge: added "Numbers, not promises." lede (.cgp-home-section-lede)
 *   — gov.gr card restyled as dark featured card: navy background, white title/logo-text,
 *     light-blue .gr accent (#71B0F6), translucent white body (rgba 0.65)
 *
 * Changelog v1.6.16 (2026-06-14):
 *   — Hero rewritten: eyebrow removed (+ .cgp-home-hero-eyebrow CSS deleted),
 *     title "Charging infrastructure, made easy.", subtitle rewritten (em-dash removed)
 *   — .cgp-home-cta padding normalized: 80px → var(--home-section-v)
 *   — Platform iframe loading="lazy" removed (mobile rendering diagnostic)
 *
 * Changelog v1.6.15 (2026-06-14):
 *   — Deployed updated (less-busy) charge-direct-platform-graphic.html
 *   — .cgp-home-platform-visual: overflow:hidden + border-radius/border/shadow
 *     matching .cgp-home-cap-card (var(--home-r-card), var(--home-border-soft),
 *     var(--home-shadow-sm)); iframe content clipped to rounded corners
 *
 * Changelog v1.6.14 (2026-06-14):
 *   — Platform section: refreshed Monitor/Access/Roaming/Support cap card copy
 *   — CTA link restyled: ghost-button → bold text link ("Discover Charge.Direct")
 *   — Platform lede rewritten, em-dash removed
 *   — --home-text token desaturated: #243C58 → #475569 (sitewide lede color)
 *   — Visual asset swapped to charge-direct-platform-graphic.html
 *
 * Changelog v1.6.13 (2026-06-14):
 *   — Lifecycle head: centered (margin: 0 auto; text-align: center)
 *   — Lifecycle step copy: Planning/Equipment/Installation/Operation refreshed
 *   — Steps 5 & 6 relabeled: Support→Maintenance (pos 5), Always on→Support (pos 6)
 *   — Removed dead .cgp-home-path-text rule (unused since 1.6.12)
 *
 * Changelog v1.6.12 (2026-06-14):
 *   — Removed .cgp-home-path-text paragraphs from both routing cards
 *   — Residential gradient lightened to match business curve shape
 *     (0.85/0.5/0.2/0 at 0%/45%/75%/100%, navy rgba(15,34,55))
 *   — Business gradient desaturated + rebalanced
 *     (rgba(18,52,110) 0.92/0.7/0.35/0.05 for better readability)
 *
 * Changelog v1.6.11 (2026-06-14):
 *   — Residential title: "Wake up to a full battery, every day" → "…battery."
 *   — Em dash removal: residential text, business text, business list item 2
 *   — Business gradient lightened (0.95/0.88/0.45/0.08 → 0.85/0.5/0.2/0)
 *   — Frosted buttons more transparent (bg 0.15→0.10, border 0.25→0.22)
 *   — text-shadow 0 1px 4px rgba(0,0,0,0.35) on overlay title, text, list items
 *
 * Changelog v1.6.10 (2026-06-14):
 *   — Routing cards: bottom-anchor content stack (justify-content: flex-end
 *     on overlay, flex: 1 removed from list, margin-top: auto CTA rule gone)
 *   — Overlay title: 1.35rem → clamp(1.7rem, 2.4vw, 2.15rem)
 *
 * Changelog v1.6.9 (2026-06-14):
 *   — Routing cards: full-card image redesign; .cgp-home-path-overlay now
 *     covers full card (sibling of .cgp-home-path-img, not child); extended
 *     gradient for text contrast; frosted CTA buttons; business card
 *     object-position 22% 45%; .cgp-home-path-body removed
 *
 * Changelog v1.6.8 (2026-06-13):
 *   — Mobile hero: min-height 88vh → 100vh (matches residential + business)
 *
 * Changelog v1.6.6 (2026-06-13):
 *   — .cgp-home-cta: padding-top 96px → 0 (remove gap above section)
 *
 * Changelog v1.6.5 (2026-06-13):
 *   — .cgp-home-why-from: removed text-transform uppercase
 *
 * Changelog v1.6.4 (2026-06-13):
 *   — .cgp-home-why-from: inline-block, 0.25em, vertical-align top, padding-top 0.15em
 *
 * Changelog v1.6.3 (2026-06-13):
 *   — .cgp-home-why-from: block → inline, 1rem → 0.45em, vertical-align middle
 *
 * Changelog v1.6.2 (2026-06-13):
 *   — Why Recharge: 3-col grid gap 20px → 24px
 *   — Added .cgp-home-why-card--govgr hero govgr overrides
 *   — @media 768px: why-grid stacks to 1-col
 *
 * Changelog v1.6.1 (2026-06-13):
 *   — Added .cgp-home-why-from (small blue caps label above stat number)
 *
 * Changelog v1.6.0 (2026-06-13):
 *   — Access card: renamed from "Billing & access", new credit card icon
 *   — .cgp-home-platform-cta-link border-radius: 999px → var(--home-r-btn)
 *   — Deleted .cgp-home-cap-value rule (no longer used)
 *
 * Changelog v1.5.9 (2026-06-13):
 *   — Fix: .accent colour inside .cgp-home-cap-title (merged card titles)
 *
 * Changelog v1.5.8 (2026-06-13):
 *   — Platform: removed featured Monitor card; restored pure 2×2 grid
 *   — Added .cgp-home-cap-value (blue sub-title line per card)
 *   — CTA: text link → ghost pill button (transparent → blue fill on hover)
 *   — CTA text changed to "Discover more"
 *
 * Changelog v1.5.7 (2026-06-13):
 *   — Platform: Monitor card spans full width (featured layout); added CTA link below cards
 *   — Headline updated: "Every charger, always in control"
 *   — Roaming card: removed EVRE reference, retitled "Roaming"
 *
 * Changelog v1.5.6 (2026-06-13):
 *   — Pill: color #7BB8F8 → #ffffff (white on both gradients); removed redundant business override
 *
 * Changelog v1.5.5 (2026-06-13):
 *   — Business card pill: override color to #ffffff on blue gradient overlay
 *
 * Changelog v1.5.4 (2026-06-13):
 *   — Pill: color #ffffff → #7BB8F8, font-weight 600 → 700
 *   — Body text: color var(--home-text-soft) → #374151 (darker for readability)
 *   — List items: replaced ::before bullet dots with inline SVG icons
 *     gap 11px → 8px; added li svg rule; removed ::before pseudo-element
 *
 * Changelog v1.4.0 (2026-06-13):
 *   — Hero: removed eyebrow pill (.cgp-home-hero-eyebrow)
 *   — Routing cards: replaced tag pill + body title with gradient overlay
 *     containing pill + title inside the image area
 *   — Residential overlay: navy gradient; business overlay: action-blue gradient
 *   — Image container class renamed: cgp-home-path-img → cgp-home-path-img
 *   — Added: .cgp-home-path-overlay, .cgp-home-path-pill, .cgp-home-path-overlay-title
 *
 * Changelog v1.3.0 (2026-06-12):
 *   — Hero: min-height 92vh → 100vh (matches residential + business, fixes
 *     image cutoff caused by outdoor-CPs.webp 4:3 aspect ratio)
 *   — Hero: image updated to outdoor-CPs-2.webp (cropped to 16:9, 1920x1080)
 *   — Hero: background-position tuned to 72% center (keeps white charger unit
 *     right-of-text at desktop; charger at 70-80% horizontal position in image)
 *   — Hero ≤1024px: 70% → 78% center
 *   — Hero mobile: background-position 82% center (charger upper-right above text,
 *     mirrors business page mobile treatment)
 *   — .cgp-home-clients: margin-block-start: 0 (kills WP-injected gap between
 *     hero block and logos block, consistent with residential fix)
 *   — .cgp-home-hero-img-mobile: updated to outdoor-CPs-2.webp
 *
 * Changelog v1.2.0 (2026-06-12):
 *   — Hero: background-position 62% center (keeps charger in frame at wide viewports)
 *   — Hero mobile: background-position 75% center (charger right-of-frame fix)
 *   — Platform section: replaced tab/panel/mock-screen pattern with
 *     2-col layout (left: heading + 4 capability cards, right: laptop mockup iframe)
 *   — Removed all orphaned tab/panel/screen CSS (.cgp-home-ptab, .cgp-home-ppanel,
 *     .cgp-home-screen-*, .cgp-home-pstat*, .cgp-home-prow*, .cgp-home-pbadge*)
 *   — Removed orphaned .cgp-home-logos-strip rules (moved to cgp-logos.css)
 *
 * Changelog v1.1.0 (2026-06-11):
 *   — Removed mock header, padding-top: 60px from hero
 *   — Logo strip replaced with business-page pattern (now in cgp-logos.css)
 *   — Hero buttons: arrows removed for consistency on dark overlay
 *
 * @version 1.6.15
 * @date    2026-06-14
 */

@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700&family=Nunito+Sans:wght@800&display=swap');

/* ============================================================
 * Token bridge (mirrors cgp-residential / cgp-business)
 * ============================================================ */

:root {
  --home-ink:          #0F2237;
  --home-navy:         #2B435E;
  --home-action:       #1665D8;
  --home-action-deep:  #0E4FB2;
  --home-blue:         #527FB3;
  --home-text:         #475569;
  --home-text-soft:    #5C708A;
  --home-text-faint:   #94A0AE;
  --home-border:       #DDE5EE;
  --home-border-soft:  #EDF1F6;
  --home-surface:      #FFFFFF;
  --home-tint:         #F4F8FD;
  --home-tint-soft:    #F8FAFB;
  --home-r-card:       18px;
  --home-r-pill:       9999px;
  --home-r-btn:        12px;
  --home-shadow-sm:    0 2px 12px rgba(15, 34, 55, 0.07);
  --home-shadow-md:    0 6px 24px rgba(15, 34, 55, 0.10);
  --home-shadow-lg:    0 12px 40px rgba(15, 34, 55, 0.13);
  --home-shadow-cta:   0 4px 16px rgba(22, 101, 216, 0.22);
  --home-f-display:    'Geologica', Helvetica, Arial, sans-serif;
  --home-f-body:       'Helvetica Neue', Helvetica, Arial, sans-serif;
  --home-t:            all 0.20s ease;
  --home-section-v:    96px;
}

/* ============================================================
 * Layout — container + shared primitives
 * ============================================================ */

.cgp-home-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px;
}

.cgp-home-section-eyebrow {
  display: block;
  font-family: var(--home-f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--home-blue);
  margin-bottom: 14px;
}

.cgp-home-section-title {
  font-family: var(--home-f-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  color: var(--home-ink);
  line-height: 1.12;
  letter-spacing: -0.026em;
  margin: 0 0 16px;
}

.cgp-home-section-title .accent { color: var(--home-action); }
.cgp-home-cap-title .accent { color: var(--home-action); }

.cgp-home-section-lede {
  font-family: var(--home-f-body);
  font-size: 1.06rem;
  color: var(--home-text);
  line-height: 1.66;
  margin: 0;
}

/* ============================================================
 * Buttons — page-level
 * ============================================================ */

.cgp-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--home-r-btn);
  padding: 15px 30px;
  font-family: var(--home-f-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: var(--home-t);
  border: 1.5px solid transparent;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.cgp-home-btn svg { flex-shrink: 0; transition: transform 0.2s ease; }
.cgp-home-btn:hover svg { transform: translateX(2px); }

.cgp-home-btn-primary {
  background: var(--home-action);
  color: #fff;
  border-color: var(--home-action);
  box-shadow: var(--home-shadow-cta);
}

.cgp-home-btn-primary:hover {
  background: var(--home-action-deep);
  border-color: var(--home-action-deep);
  box-shadow: 0 6px 22px rgba(22, 101, 216, 0.32);
  text-decoration: none;
  color: #fff;
}

.cgp-home-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cgp-home-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  text-decoration: none;
}

.cgp-home-btn-secondary {
  background: var(--home-surface);
  color: var(--home-ink);
  border-color: var(--home-border);
  box-shadow: var(--home-shadow-sm);
}

.cgp-home-btn-secondary:hover {
  border-color: var(--home-action);
  color: var(--home-action);
  box-shadow: var(--home-shadow-md);
  text-decoration: none;
}

/* ============================================================
 * HERO
 * Image: outdoor-CPs-2.webp — 1920x1080 (16:9), cropped from
 * original 1920x1440 (4:3). Charger unit sits at 70–80% from
 * left; background-position tuned to keep it right-of-text
 * at all viewport widths.
 * ============================================================ */

.cgp-home-hero {
  position: relative;
  min-height: 100vh;
  background-image: url('https://charge.guide/wp-content/uploads/outdoor-CPs-2.webp');
  background-size: cover;
  background-position: 72% center;
  display: flex;
  align-items: center;
}

.cgp-home-hero-img-mobile { display: none; }

.cgp-home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(8, 18, 32, 0.96) 0%,
    rgba(8, 18, 32, 0.88) 32%,
    rgba(8, 18, 32, 0.42) 58%,
    rgba(8, 18, 32, 0.10) 80%,
    transparent 94%
  );
  pointer-events: none;
  z-index: 0;
}

.cgp-home-hero-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 88px 48px;
}


.cgp-home-hero-title {
  font-family: var(--home-f-display);
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.06;
  letter-spacing: -0.032em;
  margin: 0 0 24px;
}

.cgp-home-hero-title .hero-accent { color: #71B0F6; }

.cgp-home-hero-sub {
  font-family: var(--home-f-body);
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.1rem;
  line-height: 1.66;
  margin: 0 0 38px;
  max-width: 510px;
}

.cgp-home-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================================
 * TRUSTED-BY LOGOS — section wrapper only
 * Strip styles live in cgp-logos.css (.cgp-client-logos-strip)
 * ============================================================ */

.cgp-home-clients {
  padding: 64px 0;
  background: var(--home-surface);
  margin-block-start: 0; /* kill WP-injected gap between hero block and this block */
}

.cgp-home-clients-label {
  text-align: center;
  font-family: var(--home-f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--home-text-soft);
  margin-bottom: 44px;
}

/* ============================================================
 * HOME vs BUSINESS — routing cards
 * ============================================================ */

.cgp-home-paths {
  padding: var(--home-section-v) 0;
  background: var(--home-tint-soft);
}

.cgp-home-paths-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.cgp-home-path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  background: var(--home-surface);
  border-radius: var(--home-r-card);
  border: 1px solid var(--home-border-soft);
  box-shadow: var(--home-shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.28s ease;
}

.cgp-home-path-card:hover {
  box-shadow: var(--home-shadow-lg);
}

.cgp-home-path-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cgp-home-path-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.cgp-home-path-card:hover .cgp-home-path-img img {
  transform: scale(1.04);
}

.cgp-home-path-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--home-f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  padding: 6px 13px;
  border-radius: var(--home-r-pill);
  background: rgba(15, 34, 55, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
}

.cgp-home-path-title {
  font-family: var(--home-f-display);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 700;
  color: var(--home-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
}

.cgp-home-path-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cgp-home-path-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--home-f-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.cgp-home-path-list li svg {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.9);
}

/* --- Path card overlay (now full-card content layer) --- */
.cgp-home-path-overlay {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 28px 30px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

.cgp-home-path-overlay--residential {
  background: linear-gradient(to top,
    rgba(15, 34, 55, 0.85) 0%,
    rgba(15, 34, 55, 0.5) 45%,
    rgba(15, 34, 55, 0.2) 75%,
    rgba(15, 34, 55, 0) 100%);
}

.cgp-home-path-overlay--business {
  background: linear-gradient(to top,
    rgba(18, 52, 110, 0.92) 0%,
    rgba(18, 52, 110, 0.7) 45%,
    rgba(18, 52, 110, 0.35) 75%,
    rgba(18, 52, 110, 0.05) 100%);
}

.cgp-home-path-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-family: var(--home-f-display, 'Geologica', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  width: fit-content;
}

.cgp-home-path-pill svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.cgp-home-path-overlay-title {
  font-family: var(--home-f-display, 'Geologica', sans-serif);
  font-size: clamp(1.7rem, 2.4vw, 2.15rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* --- Frosted CTA buttons for full-card image overlay --- */
.cgp-home-paths .cgp-home-btn-primary {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.cgp-home-paths .cgp-home-btn-primary:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ============================================================
 * LIFECYCLE — one partner, end to end
 * ============================================================ */

.cgp-home-lifecycle {
  padding: var(--home-section-v) 0;
  background: var(--home-surface);
}

.cgp-home-lifecycle-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.cgp-home-lifecycle-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
}

.cgp-home-lifecycle-track::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(to right,
    var(--home-border) 0%, var(--home-blue) 50%, var(--home-border) 100%);
  z-index: 0;
}

.cgp-home-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
}

.cgp-home-step-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--home-surface);
  border: 1.5px solid var(--home-border);
  border-radius: 50%;
  color: var(--home-action);
  margin-bottom: 16px;
  box-shadow: var(--home-shadow-sm);
}

.cgp-home-step-num {
  font-family: var(--home-f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--home-text-faint);
  margin-bottom: 5px;
}

.cgp-home-step-label {
  font-family: var(--home-f-display);
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--home-ink);
  letter-spacing: -0.01em;
  margin-bottom: 7px;
}

.cgp-home-step-desc {
  font-family: var(--home-f-body);
  font-size: 0.85rem;
  color: var(--home-text-soft);
  line-height: 1.52;
  max-width: 150px;
}

/* ============================================================
 * CHARGE.DIRECT PLATFORM SECTION
 * Two-column: left = heading + 4 capability cards (2×2 grid)
 *             right = laptop mockup (iframe)
 * ============================================================ */

.cgp-home-platform {
  padding: var(--home-section-v) 0;
  background: var(--home-surface);
}

.cgp-home-platform-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.cgp-home-platform-text {
  display: flex;
  flex-direction: column;
}

.cgp-home-platform-head {
  margin-bottom: 36px;
}

/* 2×2 capability card grid */
.cgp-home-cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cgp-home-platform-cta {
  margin-top: 24px;
}

.cgp-home-platform-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--home-action, #1665D8);
  font-family: var(--home-f-display, 'Geologica', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.cgp-home-platform-cta-link:hover {
  gap: 12px;
}

.cgp-home-cap-card {
  background: var(--home-surface);
  border-radius: var(--home-r-card);
  border: 1px solid var(--home-border-soft);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--home-shadow-sm);
  transition: box-shadow 0.22s ease;
}

.cgp-home-cap-card:hover {
  box-shadow: var(--home-shadow-md);
}

.cgp-home-cap-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--home-tint);
  border-radius: 9px;
  color: var(--home-action);
  flex-shrink: 0;
  margin-bottom: 2px;
}

.cgp-home-cap-title {
  font-family: var(--home-f-display);
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--home-ink);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
}

.cgp-home-cap-body {
  font-family: var(--home-f-body);
  font-size: 0.84rem;
  color: var(--home-text-soft);
  line-height: 1.60;
  margin: 0;
}

/* Laptop mockup container */
.cgp-home-platform-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Match .cgp-home-cap-card framing: */
  border-radius: var(--home-r-card);
  border: 1px solid var(--home-border-soft);
  box-shadow: var(--home-shadow-sm);
}

.cgp-home-platform-visual iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ============================================================
 * WHY RECHARGE — grid with stat cards
 * ============================================================ */

.cgp-home-why {
  padding: var(--home-section-v) 0;
  background: var(--home-surface);
}

.cgp-home-why-head {
  margin-bottom: 52px;
}

.cgp-home-why-head .cgp-home-section-lede {
  max-width: 560px;
}

.cgp-home-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cgp-home-why-card {
  background: var(--home-tint-soft);
  border-radius: var(--home-r-card);
  border: 1px solid var(--home-border-soft);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

.cgp-home-why-card:hover {
  box-shadow: var(--home-shadow-md);
}

.cgp-home-why-card--stat {
  background: var(--home-tint);
  border-color: var(--home-border);
  padding-top: 34px;
}

.cgp-home-why-card--stat:hover {
  border-color: #BFD7F7;
}

.cgp-home-why-card--govgr {
  background: var(--home-ink, #0F2237);
  border-color: var(--home-ink, #0F2237);
}

.cgp-home-why-card--govgr:hover {
  border-color: var(--home-ink, #0F2237);
  box-shadow: var(--home-shadow-md);
}

.cgp-home-why-card--govgr .cgp-home-why-title {
  color: #ffffff;
}

.cgp-home-why-card--govgr .cgp-home-why-body {
  color: rgba(255, 255, 255, 0.65);
}

.cgp-home-why-bignum {
  font-family: var(--home-f-display);
  font-size: clamp(3rem, 4.6vw, 4.1rem);
  font-weight: 700;
  color: var(--home-action);
  letter-spacing: -0.05em;
  line-height: 0.92;
  margin-bottom: 10px;
}

.cgp-home-why-bignum span {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--home-blue);
}

.cgp-home-why-from {
  display: inline-block;
  font-size: 0.25em;
  font-weight: 600;
  color: var(--home-action, #1665D8);
  letter-spacing: 0.06em;
  vertical-align: top;
  margin-right: 4px;
  padding-top: 0.15em;
}

.cgp-home-why-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--home-tint);
  border-radius: 11px;
  color: var(--home-action);
}

.cgp-home-why-title {
  font-family: var(--home-f-display);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--home-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.cgp-home-why-body {
  font-family: var(--home-f-body);
  font-size: 0.92rem;
  color: var(--home-text-soft);
  line-height: 1.66;
  margin: 0;
}

.cgp-home-why-govgr {
  margin-top: 4px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  line-height: 1;
}

.cgp-home-why-govgr .gov { color: #003366; }
.cgp-home-why-govgr .gr  { color: #00AEEF; }

.cgp-home-why-card--govgr .cgp-home-why-govgr {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  line-height: 1;
}

.cgp-home-why-card--govgr .cgp-home-why-govgr .gov {
  color: #ffffff;
}

.cgp-home-why-card--govgr .cgp-home-why-govgr .gr {
  color: #71B0F6;
}

/* ============================================================
 * CLOSING CTA
 * ============================================================ */

.cgp-home-cta {
  padding: 0 0 var(--home-section-v);
  background: var(--home-surface);
  margin-bottom: 0;
}

.cgp-home-cta-inner {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.cgp-home-cta-eyebrow {
  display: block;
  font-family: var(--home-f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--home-action);
  margin-bottom: 18px;
}

.cgp-home-cta-title {
  font-family: var(--home-f-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  color: var(--home-ink);
  line-height: 1.12;
  letter-spacing: -0.026em;
  margin: 0 0 18px;
}

.cgp-home-cta-text {
  font-family: var(--home-f-body);
  font-size: 1.1rem;
  color: var(--home-text);
  line-height: 1.66;
  margin: 0 auto 38px;
  max-width: 540px;
}

.cgp-home-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */

@media (max-width: 1024px) {
  .cgp-home-hero { background-position: 78% center; }
  .cgp-home-platform-inner { gap: 44px; }
}

@media (max-width: 900px) {
  .cgp-home-why-grid { grid-template-columns: repeat(2, 1fr); }
  .cgp-home-lifecycle-track { grid-template-columns: repeat(3, 1fr); gap: 40px 0; }
  .cgp-home-lifecycle-track::before { display: none; }
  .cgp-home-platform-inner { grid-template-columns: 1fr; gap: 40px; }
  .cgp-home-platform-visual { max-width: 600px; }
}

@media (max-width: 768px) {
  :root { --home-section-v: 64px; }
  .cgp-home-container { padding: 0 22px; }
  .cgp-home-paths-split { grid-template-columns: 1fr; gap: 20px; }
  .cgp-home-cap-grid { grid-template-columns: 1fr; }
  .cgp-home-why-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cgp-home-hero {
    background: none; min-height: 100vh;
    align-items: flex-end; overflow: hidden;
  }
  .cgp-home-hero-img-mobile {
    display: block; position: absolute; inset: 0;
    background-image: url('https://charge.guide/wp-content/uploads/outdoor-CPs-2.webp');
    background-size: cover; background-position: 82% center;
  }
  .cgp-home-hero-overlay {
    background: linear-gradient(to top,
      rgba(8,18,32,0.97) 0%, rgba(8,18,32,0.85) 42%,
      rgba(8,18,32,0.15) 72%, transparent 88%);
  }
  .cgp-home-hero-content { padding: 32px 24px 48px; max-width: 100%; width: 100%; }
  .cgp-home-hero-title { font-size: 1.95rem; }
  .cgp-home-hero-sub   { font-size: 0.98rem; }
  .cgp-home-hero-actions .cgp-home-btn { flex: 1; justify-content: center; }
}

@media (max-width: 560px) {
  .cgp-home-why-grid { grid-template-columns: 1fr; }
  .cgp-home-lifecycle-track { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .cgp-home-step-desc { max-width: 130px; }
}