/*
Theme Name:        LEOGC
Theme URI:         https://www.leogcltd.com
Author:            Revoraops
Author URI:        https://revoraops.com
Description:       Custom WordPress theme for LEOGC LTD — payment infrastructure for Africa and beyond. Built to match the locked v2 design system (cyan + dark navy, Inter Tight + Inter).
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.6
Requires PHP:      8.0
License:           Proprietary (Revoraops + LEOGC LTD)
Text Domain:       leogc
*/

:root {
  /* Dark corporate palette */
  --primary-900: #05080D;  /* Midnight Black — strongest dark (hero, CTA, sections) */
  --primary-800: #0B1220;  /* Charcoal Navy — secondary dark */
  --primary-700: #111827;  /* Deep Slate — card on dark */
  --primary-600: #1E2738;  /* slightly lighter */
  --strip-bg:    #2B3137;  /* Nav + footer strip background — softer than primary-900 */

  /* Cyan accent — main fintech action color */
  --accent-500: #00D5FF;
  --accent-400: #16C7E8;
  --accent-100: rgba(0,213,255,0.08);
  --accent-border: rgba(0,213,255,0.5);

  /* Deep technology blue — secondary accent */
  --blue-deep: #0B5C7A;

  /* Status / verification colors */
  --success:   #16A36A;
  --gold:      #D6A84F;
  --gold-soft: rgba(214,168,79,0.12);

  /* Backwards-compat aliases (keep existing CSS code working) */
  --highlight-500: var(--accent-500);
  --highlight-400: var(--accent-400);
  --highlight-100: var(--accent-100);

  /* Light surfaces */
  --bg:           #F7F9FC;
  --surface:      #FFFFFF;
  --surface-alt:  #F1F4F9;
  --border:       #E5E7EB;
  --border-strong:#CBD5E1;
  --border-dark:  rgba(255,255,255,0.12);

  /* Text */
  --text-900: #111827;
  --text-700: #1F2937;
  --text-500: #475569;
  --text-400: #6B7280;
  --text-light:      #F4F7FA;
  --text-light-muted:#CBD5E1;

  /* Typography — Inter Tight for headlines (slightly condensed), Inter for body */
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Shape — per doc: 18px cards, 10px buttons */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-btn: 10px;
  --radius-pill: 999px;

  --pad-card: 28px;
  --pad-section: 88px;
  --gap-grid: 24px;

  /* Shadows */
  --shadow-card: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-cyan: 0 0 24px rgba(0, 213, 255, 0.18);

  --container: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Cross-browser: ensure inline SVG icons render at their intrinsic size
   instead of collapsing to 0×0 in flex containers (older Safari bug) */
svg { display: inline-block; vertical-align: middle; max-width: 100%; }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--text-700); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text-900); line-height: 1.15; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.25rem, 5.5vw, 4.5rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.25rem, 3.8vw, 3rem); font-weight: 700; letter-spacing: -0.018em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 700; }
h4 { font-size: clamp(1rem, 1.4vw, 1.18rem); font-weight: 700; }
p  { color: var(--text-500); font-size: 1rem; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 700; color: var(--accent-500); }

/* announce */
.announce { background: var(--primary-800); color: rgba(255,255,255,0.85); padding: 9px 24px; text-align: center; font-size: 0.82rem; border-bottom: 1px solid var(--border-dark); }
.announce b { color: var(--highlight-400); font-weight: 600; }
.announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }

/* nav */
/* Nav — dark corporate per design doc */
.nav-wrap { position: sticky; top: 0; z-index: 100; background: var(--strip-bg); border-bottom: 1px solid var(--border-dark); }
.nav { max-width: var(--container); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav-brand { display: inline-flex; align-items: center; text-decoration: none; }
.nav-brand img { width: 52px; height: 52px; display: block; }
/* hide the text node next to the logo — logo already contains wordmark */
.nav-brand-text { display: none; }
.nav-links { display: flex; gap: 4px; }
.nav-links > a, .nav-dropdown > a { font-size: 0.92rem; font-weight: 500; color: var(--text-light); text-decoration: none; padding: 10px 14px; border-radius: 0; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s; position: relative; }
.nav-links > a:hover, .nav-dropdown > a:hover { color: var(--accent-500); background: transparent; }
/* Active page indicator — thin cyan underline */
.nav-links > a.current, .nav-dropdown > a.current { color: var(--accent-500); }
.nav-links > a.current::after, .nav-dropdown > a.current::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--accent-500); border-radius: 1px; }

.nav-dropdown { position: relative; }
.nav-dropdown:hover .nav-menu, .nav-menu:hover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,31,77,0.15); padding: 18px; width: 680px; z-index: 50; opacity: 0; visibility: hidden; transition: all .18s; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nav-menu-wide { width: 760px; grid-template-columns: 1fr 1fr; }
.nav-menu-item { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius-md); text-decoration: none; transition: background .12s; }
.nav-menu-item:hover { background: var(--surface-alt); }
.nav-menu-item .nm-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; background: var(--accent-100); color: var(--accent-500); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.nav-menu-item .nm-icon.lime { background: var(--highlight-100); color: #4D7C0F; }
.nav-menu-item .nm-icon.navy { background: var(--primary-800); color: #fff; }
.nav-menu-item .nm-name { font-family: var(--font-display); font-weight: 700; color: var(--text-900); font-size: 0.94rem; line-height: 1.3; }
.nav-menu-item .nm-desc { font-size: 0.78rem; color: var(--text-500); line-height: 1.45; margin-top: 2px; }
.nav-cta { display: flex; gap: 8px; align-items: center; }

/* buttons */
/* ========== CTA system — simple & consistent per design doc ========== */
/* Base button */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: all 0.18s; line-height: 1; }
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* Primary — cyan filled, dark text */
.btn-primary { background: var(--accent-500); color: var(--primary-900); font-weight: 700; border-color: var(--accent-500); }
.btn-primary:hover { background: var(--accent-400); border-color: var(--accent-400); transform: translateY(-1px); box-shadow: var(--shadow-cyan); }

/* Secondary — transparent + 1px cyan border. Light text on dark bg, deep-blue text on light bg. */
.btn-outline { background: transparent; color: var(--blue-deep); border-color: var(--accent-500); }
.btn-outline:hover { background: var(--accent-100); border-color: var(--accent-500); }
.btn-outline-light { background: transparent; color: var(--text-light); border-color: var(--accent-500); }
.btn-outline-light:hover { background: rgba(0,213,255,0.10); border-color: var(--accent-400); }

/* Ghost — used sparingly (nav-only). No border, cyan text. */
.btn-ghost { background: transparent; color: var(--accent-500); border-color: transparent; }
.btn-ghost:hover { color: var(--accent-400); }
.mobile-menu-btn { display: none; }
@media (max-width: 980px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .mobile-menu-btn { display: flex; background: transparent; border: 1px solid var(--border-dark); width: 42px; height: 42px; border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; color: var(--text-light); font-size: 18px; }
  /* mobile drawer — dark per design doc */
  .nav-wrap.mobile-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--primary-900);
    padding: 16px;
    border-bottom: 1px solid var(--border-dark);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    gap: 4px;
    z-index: 99;
  }
  .nav-wrap.mobile-open .nav-links > a,
  .nav-wrap.mobile-open .nav-dropdown > a {
    width: 100%; padding: 14px 14px; font-size: 1rem; border-radius: 8px;
  }
  .nav-wrap.mobile-open .nav-links > a.current::after,
  .nav-wrap.mobile-open .nav-dropdown > a.current::after { display: none; }
  .nav-wrap.mobile-open .nav-links > a.current,
  .nav-wrap.mobile-open .nav-dropdown.mobile-expanded > a { background: rgba(0,213,255,0.08); color: var(--accent-500); }
  .nav-wrap.mobile-open .nav-dropdown { width: 100%; }
  /* Sub-menu on mobile */
  .nav-wrap.mobile-open .nav-dropdown .nav-menu {
    position: static;
    transform: none; width: 100%;
    box-shadow: none; border: none;
    grid-template-columns: 1fr;
    background: transparent;
    opacity: 0; visibility: hidden;
    max-height: 0; padding: 0; overflow: hidden;
    transition: max-height .25s ease, opacity .15s, padding .2s;
  }
  .nav-wrap.mobile-open .nav-dropdown.mobile-expanded .nav-menu {
    opacity: 1; visibility: visible;
    max-height: 1000px; padding: 8px 0 4px;
  }
  .nav-wrap.mobile-open .nav-menu-item { padding: 10px 12px; background: rgba(255,255,255,0.04); margin-bottom: 4px; border-radius: 8px; border: 1px solid var(--border-dark); }
  .nav-wrap.mobile-open .nav-menu-item .nm-name { color: var(--text-light); }
  .nav-wrap.mobile-open .nav-menu-item .nm-desc { color: var(--text-light-muted); }
  .mobile-menu-btn.is-open { background: var(--accent-500); color: var(--primary-900); border-color: var(--accent-500); }
}

/* hero — premium fintech infrastructure feel */
.hero { background: radial-gradient(circle at 80% 20%, rgba(0,213,255,0.16), transparent 55%), radial-gradient(circle at 20% 80%, rgba(11,92,122,0.35), transparent 55%), linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%); color: var(--text-light); padding: 100px 24px 110px; position: relative; overflow: hidden; }
/* Subtle network lines layer — fades at edges */
.hero-network { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 100%); }
.hero-network svg { width: 100%; height: 100%; }
.hero-network .nn-line { stroke: rgba(0,213,255,0.18); stroke-width: 0.5; fill: none; }
.hero-network .nn-dot { fill: rgba(0,213,255,0.45); }
.hero-network .nn-dot.glow { fill: rgba(0,213,255,0.7); }
.hero-network .nn-pulse { fill: none; stroke: rgba(0,213,255,0.5); stroke-width: 1; transform-origin: center; transform-box: fill-box; animation: nn-pulse 3.5s ease-out infinite; opacity: 0; }
.hero-network .nn-pulse.d2 { animation-delay: 1.2s; }
.hero-network .nn-pulse.d3 { animation-delay: 2.4s; }
@keyframes nn-pulse { 0% { r: 3; opacity: 0.6; } 100% { r: 30; opacity: 0; } }
/* Ensure hero content sits above network layer */
.hero > .hero-grid { position: relative; z-index: 1; }
.hero-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; align-items: center; }
.hero .eyebrow { color: var(--highlight-400); }
.hero h1 {
	color: #fff;
	margin: 0 0 22px;
	font-size: clamp(1.85rem, 4.2vw, 60px);
	line-height: 1.18;
	letter-spacing: -0.018em;
}
.hero h1 .lime-accent { color: var(--highlight-400); }
.hero p.lead { color: rgba(255,255,255,0.78); font-size: 1.1rem; max-width: 580px; margin-bottom: 32px; line-height: 1.55; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-trust { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-pill); font-size: 0.82rem; color: rgba(255,255,255,0.85); }
.hero-trust .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--highlight-400); box-shadow: 0 0 0 4px rgba(132,204,22,0.25); }
.hero-trust b { color: var(--highlight-400); font-weight: 600; }

/* hero variant — sub-pages (same gradient stack as .hero for visual consistency, shorter padding) */
.hero-sub { background: radial-gradient(circle at 80% 20%, rgba(0,213,255,0.16), transparent 55%), radial-gradient(circle at 20% 80%, rgba(11,92,122,0.35), transparent 55%), linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%); color: var(--text-light); padding: 80px 24px 90px; position: relative; overflow: hidden; }
.hero-sub-inner { max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
.hero-sub .eyebrow { color: var(--highlight-400); }
.hero-sub h1 { color: #fff; margin: 12px 0 16px; max-width: 800px; font-size: clamp(1.85rem, 4.2vw, 60px); line-height: 1.18; letter-spacing: -0.018em; }
.hero-sub p.lead { color: rgba(255,255,255,0.8); font-size: 1.1rem; max-width: 720px; margin-bottom: 28px; }
.hero-sub-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* hero visual — map */
.hero-visual { position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 22px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-visual::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--highlight-400), transparent); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.hv-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 16px; }
.hv-head .hv-title { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 0.98rem; }
.hv-head .hv-tag { font-size: 0.74rem; color: var(--text-light-muted); margin-top: 2px; font-weight: 500; }
.hv-head .hv-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--accent-500); background: rgba(0,213,255,0.12); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(0,213,255,0.3); }
.map-wrap { position: relative; padding: 0 8px 8px; }
.map-svg { width: 100%; height: auto; display: block; }
/* Global map — extra elements */
.map-svg.map-global .arc { fill: none; stroke: rgba(0,213,255,0.55); stroke-width: 1.4; stroke-dasharray: 5 7; stroke-linecap: round; animation: arc-flow 5s linear infinite; }
.map-svg.map-global .arc.arc-d2 { animation-delay: 0.8s; opacity: 0.85; }
.map-svg.map-global .arc.arc-d3 { animation-delay: 1.6s; opacity: 0.85; }
.map-svg.map-global .arc.arc-d4 { animation-delay: 2.4s; opacity: 0.85; }
@keyframes arc-flow { to { stroke-dashoffset: -120; } }
.map-svg.map-global .region-dot { fill: rgba(0,213,255,0.7); }
.map-svg.map-global .region-badge rect { fill: rgba(0,213,255,0.10); stroke: rgba(0,213,255,0.45); stroke-width: 1; }
.map-svg.map-global .region-badge .rb-name { font-family: 'Inter Tight', Inter, sans-serif; font-size: 8.5px; font-weight: 800; fill: var(--accent-500); letter-spacing: 0.8px; }
.map-svg.map-global .region-badge .rb-meta { font-family: Inter, sans-serif; font-size: 7.5px; font-weight: 500; fill: rgba(255,255,255,0.75); }
.map-svg .pin { fill: var(--accent-500); }
.map-svg .pin-ring { fill: none; stroke: var(--accent-500); stroke-width: 1; opacity: 0.5; transform-origin: center; transform-box: fill-box; animation: pin-pulse 2.4s ease-out infinite; }
.map-svg .pin-ring.d2 { animation-delay: 0.6s; }
.map-svg .pin-ring.d3 { animation-delay: 1.2s; }
@keyframes pin-pulse { 0% { stroke-width: 1; opacity: 0.7; r: 2; } 100% { stroke-width: 0; opacity: 0; r: 14; } }
.map-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.map-stat { text-align: center; }
.map-stat .v { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.5rem; line-height: 1; }
.map-stat .v .plus { color: var(--highlight-400); }
.map-stat .l { font-size: 0.7rem; color: rgba(255,255,255,0.5); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
@media (max-width: 980px) { .hero { padding: 60px 24px 70px; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Compliance trust strip — upfront credibility */
.trust-strip { background: var(--primary-900); padding: 22px 24px; border-bottom: 1px solid var(--border-dark); }
.ts-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; align-items: center; }
.ts-badge { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.ts-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(0,213,255,0.10); color: var(--accent-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(0,213,255,0.25); }
.ts-icon svg { width: 18px; height: 18px; stroke-width: 1.75; }
.ts-text b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--text-light); font-size: 0.86rem; line-height: 1.2; }
.ts-text span { display: block; font-size: 0.72rem; color: var(--text-light-muted); margin-top: 2px; }
@media (max-width: 1100px) { .ts-inner { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .ts-inner { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px) { .ts-inner { grid-template-columns: 1fr; } }

/* trusted */
.trusted { padding: 72px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.trusted-inner { max-width: var(--container); margin: 0 auto; }
.trusted-label { text-align: center; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-400); font-weight: 600; margin-bottom: 34px; }
@media (max-width: 640px) { .trusted { padding: 48px 24px; } .trusted-label { margin-bottom: 26px; } }
.trusted-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.trusted-track { display: flex; align-items: center; gap: 60px; width: max-content; padding: 4px 0; animation: leogc-trusted-scroll 40s linear infinite; will-change: transform; }
.trusted-track:hover { animation-play-state: paused; }
.trusted-logo { display: inline-flex; align-items: center; justify-content: center; height: 40px; opacity: 1; filter: none; flex-shrink: 0; }
.trusted-logo img { display: block; max-height: 100%; max-width: 130px; width: auto; object-fit: contain; }
@keyframes leogc-trusted-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .trusted-track { gap: 40px; animation-duration: 28s; } .trusted-logo { height: 30px; } .trusted-logo img { max-width: 100px; } }
@media (prefers-reduced-motion: reduce) { .trusted-track { animation: none; justify-content: center; flex-wrap: wrap; width: 100%; padding: 0 20px; } }

/* legal / long-form prose (Privacy, Terms) */
.legal-prose { font-size: 1rem; line-height: 1.75; color: var(--text-500); }
.legal-prose .legal-updated { padding: 12px 16px; background: var(--surface); border-left: 3px solid var(--accent-500); border-radius: 4px; margin-bottom: 32px; font-size: 0.95rem; color: var(--text-600); }
.legal-prose h2 { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: -0.01em; color: var(--primary-900); margin: 40px 0 14px; }
.legal-prose h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--primary-800, var(--primary-900)); margin: 24px 0 10px; }
.legal-prose p { margin: 0 0 16px; }
.legal-prose ul { margin: 0 0 20px; padding-left: 22px; }
.legal-prose ul li { margin-bottom: 8px; }
.legal-prose a { color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose a:hover { color: var(--accent-500); }

/* sections */
.section { padding: var(--pad-section) 24px; }
.section-alt { background: var(--surface); }
.section-dark { background: var(--primary-900); color: var(--text-light); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--text-light); }
.section-dark p { color: var(--text-light-muted); }
.section-charcoal { background: var(--primary-800); color: var(--text-light); }
.section-charcoal h2, .section-charcoal h3, .section-charcoal h4 { color: var(--text-light); }
.section-charcoal p { color: var(--text-light-muted); }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { margin: 10px 0 14px; }
.section-head p { font-size: 1.05rem; }

/* solutions grid */
.solutions { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.solutions.cols-5 { grid-template-columns: repeat(5, 1fr); }
/* center-orphans: when 5 sol-cards in 3-col grid, last 2 are centered on row 2 */
.solutions.center-orphans { grid-template-columns: repeat(6, 1fr); }
.solutions.center-orphans > .sol-card { grid-column: span 2; }
.solutions.center-orphans > .sol-card:nth-child(4) { grid-column: 2 / span 2; }
.solutions.center-orphans > .sol-card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 1100px) {
  .solutions.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .solutions.center-orphans { grid-template-columns: repeat(2, 1fr); }
  .solutions.center-orphans > .sol-card,
  .solutions.center-orphans > .sol-card:nth-child(4),
  .solutions.center-orphans > .sol-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 600px) {
  .solutions.center-orphans { grid-template-columns: 1fr; }
}
.sol-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--pad-card); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: all 0.2s; position: relative; }
.sol-card:hover { border-color: var(--accent-500); transform: translateY(-3px); box-shadow: var(--shadow-cyan); }
.sol-card:hover .sol-arrow { transform: translateX(4px); color: var(--accent-500); }
.sol-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--accent-100); color: var(--accent-500); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.sol-icon svg { width: 28px; height: 28px; stroke-width: 1.75; }
.sol-icon.lime { background: var(--gold-soft); color: var(--gold); }
.sol-icon.navy { background: var(--primary-800); color: var(--accent-500); }
.sol-card h3 { margin-bottom: 10px; }
.sol-card p { font-size: 0.92rem; margin-bottom: 18px; flex: 1; }
.sol-card .sol-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--accent-500); }
.sol-card .sol-arrow { transition: all 0.18s; display: inline-block; }
@media (max-width: 900px) { .solutions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .solutions { grid-template-columns: 1fr; } }

/* stats — dark variant per doc (charcoal navy bg, cyan numbers, silver labels) */
.stats { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); }
.stat { background: var(--primary-800); border: 1px solid var(--border-dark); border-radius: var(--radius-lg); padding: 32px 20px; text-align: center; }
.stat-value { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; color: var(--accent-500); line-height: 1; letter-spacing: -0.02em; }
.stat-value .plus { color: var(--accent-500); }
.stat-label { font-size: 0.88rem; color: var(--text-light-muted); margin-top: 10px; font-weight: 500; }
/* light stats variant when used on light bg */
.stats.light .stat { background: var(--surface); border-color: var(--border); }
.stats.light .stat-value { color: var(--blue-deep); }
.stats.light .stat-label { color: var(--text-500); }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; } .stat { padding: 20px 14px; } }

/* benefits two-col */
.benefits { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.benefits-left .eyebrow { display: block; margin-bottom: 20px; }
.benefits-left h2 { font-size: clamp(2.25rem, 3.8vw, 3.25rem); line-height: 1.18; margin-bottom: 24px; }
.benefits-left p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 40px; }
.benefits-list { display: grid; gap: 12px; }
.benefit-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all .15s; }
.benefit-row:hover { border-color: var(--accent-400); transform: translateX(4px); }
.benefit-row .b-tick { width: 32px; height: 32px; border-radius: 8px; background: var(--highlight-100); color: #4D7C0F; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.benefit-row .b-text { font-family: var(--font-display); font-weight: 600; color: var(--text-900); font-size: 0.95rem; }
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr; gap: 32px; } }

/* coverage teaser */
.coverage { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.coverage-left h2 { margin-bottom: 14px; }
.coverage-left p { margin-bottom: 22px; font-size: 1.05rem; }
.coverage-counts { display: flex; gap: 28px; margin-bottom: 28px; }
.coverage-count .num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--accent-500); line-height: 1; }
.coverage-count .lbl { font-size: 0.85rem; color: var(--text-500); margin-top: 4px; }
.section-dark .coverage-count .lbl { color: var(--text-light-muted); }
.coverage-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; }
.coverage-list.dark { background: rgba(255,255,255,0.04); border: 1px solid var(--border-dark); }
.coverage-list.dark .country-row + .country-row { border-top: 1px solid var(--border-dark); }
.coverage-list.dark .country-row:hover { background: rgba(0,213,255,0.06); }
.coverage-list.dark .cn-name { color: var(--text-light); }
.coverage-list.dark .cn-ops { color: var(--text-light-muted); }
.coverage-list.dark .cn-badge { background: rgba(0,213,255,0.15); color: var(--accent-500); }
.country-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-md); transition: background .12s; }
.country-row:hover { background: var(--surface-alt); }
.country-row + .country-row { border-top: 1px solid var(--border); }
.country-row .flag { width: 36px; height: 26px; background: transparent; color: var(--text-500); font-weight: 700; font-size: 0.62rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.country-row .cn-name { font-family: var(--font-display); font-weight: 600; color: var(--text-900); font-size: 0.95rem; flex: 1; }
.country-row .cn-ops { font-size: 0.78rem; color: var(--text-500); }
.country-row .cn-badge { background: var(--highlight-100); color: #4D7C0F; padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
@media (max-width: 900px) { .coverage { grid-template-columns: 1fr; gap: 32px; } }

/* who we serve dark */
.serve-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
/* serve-chip — light variant by default per design doc */
.serve-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 16px; text-align: center; font-family: var(--font-display); font-weight: 600; color: var(--text-900); font-size: 0.92rem; transition: all 0.18s; cursor: default; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.serve-chip:hover { border-color: var(--accent-500); box-shadow: 0 6px 14px rgba(0,213,255,0.12); transform: translateY(-2px); }
.serve-chip > svg { width: 28px; height: 28px; color: var(--accent-500); stroke-width: 1.75; }
.serve-chip > span { display: block; }
/* legacy .ic supported for any non-converted chips */
.serve-chip .ic { font-size: 1.6rem; display: block; color: var(--accent-500); }
/* dark variant (kept for when used on dark sections) */
.section-dark .serve-chip, .serve-grid.dark .serve-chip { background: rgba(255,255,255,0.05); border-color: var(--border-dark); color: var(--text-light); }
.section-dark .serve-chip:hover, .serve-grid.dark .serve-chip:hover { background: rgba(0,213,255,0.08); border-color: var(--accent-500); }
@media (max-width: 900px) { .serve-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .serve-grid { grid-template-columns: repeat(2, 1fr); } }

/* how it works */
.how-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); }
.how-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.how-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .how-grid.cols-5 { grid-template-columns: repeat(3, 1fr); } }
.how-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; position: relative; }
.how-num { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: var(--highlight-500); line-height: 1; margin-bottom: 14px; display: inline-block; }
.how-step h4 { margin-bottom: 8px; font-size: 1.05rem; }
.how-step p { font-size: 0.9rem; }
@media (max-width: 900px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .how-grid { grid-template-columns: 1fr; } }

/* Developers page — resource cards */
.dev-resource-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dev-resource { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: all .2s; }
.dev-resource:hover { border-color: var(--accent-500); transform: translateY(-3px); box-shadow: var(--shadow-cyan); }
.dev-resource .dr-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-100); color: var(--accent-500); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.dev-resource .dr-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
.dev-resource h4 { margin-bottom: 6px; font-size: 1.02rem; }
.dev-resource p { font-size: 0.85rem; flex: 1; margin-bottom: 14px; }
.dev-resource .dr-link { font-size: 0.84rem; font-weight: 600; color: var(--accent-500); display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 950px) { .dev-resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dev-resource-grid { grid-template-columns: 1fr; } }

/* For Developers section + code block preview */
.dev-section { background: var(--surface-alt); }
.dev-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.dev-left h2 { margin-bottom: 14px; }
.dev-left p { font-size: 1.05rem; margin-bottom: 22px; }
.dev-feat { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.dev-feat li { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; color: var(--text-900); font-size: 0.95rem; }
.df-tick { width: 24px; height: 24px; border-radius: 7px; background: var(--accent-100); color: var(--accent-500); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.df-tick svg { width: 14px; height: 14px; stroke-width: 2.5; }
.dev-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.code-block { background: var(--primary-900); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-dark); box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.cb-head { background: var(--primary-800); padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-dark); }
.cb-dot { width: 11px; height: 11px; border-radius: 50%; }
.cb-dot.r { background: #FF5F57; }
.cb-dot.y { background: #FEBC2E; }
.cb-dot.g { background: #28C840; }
.cb-file { color: var(--accent-500); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.78rem; margin-left: 12px; font-weight: 600; }
.cb-tag { margin-left: auto; font-size: 0.72rem; color: var(--success); background: rgba(22,163,106,0.15); border: 1px solid rgba(22,163,106,0.3); padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.cb-body { padding: 22px 24px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.84rem; color: var(--text-light); line-height: 1.7; white-space: pre; overflow-x: auto; margin: 0; }
.cb-body .ck { color: var(--accent-400); }
.cb-body .cs { color: #BAE6FD; }
.cb-body .cm { color: #6B7280; font-style: italic; }
@media (max-width: 900px) { .dev-grid { grid-template-columns: 1fr; gap: 32px; } .cb-body { font-size: 0.74rem; padding: 16px; } }

/* Coverage dashboard panel — dashboard-like presentation */
.cov-dashboard { background: rgba(255,255,255,0.04); border: 1px solid var(--border-dark); border-radius: var(--radius-lg); padding: 22px 24px; }
.cov-dash-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--border-dark); margin-bottom: 16px; }
.cov-dash-title { font-family: var(--font-display); font-weight: 700; color: var(--text-light); font-size: 1.05rem; }
.cov-dash-sub { font-size: 0.78rem; color: var(--text-light-muted); margin-top: 2px; }
.cov-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 12px 0 18px; border-bottom: 1px solid var(--border-dark); margin-bottom: 16px; }
.cds { text-align: center; }
.cds-v { font-family: var(--font-display); font-weight: 800; color: var(--accent-500); font-size: 1.7rem; line-height: 1; }
.cds-v span { color: var(--accent-400); }
.cds-l { font-size: 0.7rem; color: var(--text-light-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.cov-dash-rows { display: grid; gap: 10px; margin-bottom: 14px; }
.cd-row { display: grid; grid-template-columns: 36px 1fr 100px 80px 40px; gap: 12px; align-items: center; padding: 4px 0; }
.cd-row .flag { width: 36px; height: 26px; border-radius: 5px; background: linear-gradient(135deg, var(--accent-500), var(--blue-deep)); color: #fff; font-weight: 700; font-size: 0.62rem; display: flex; align-items: center; justify-content: center; }
.cd-row .cd-name { font-family: var(--font-display); font-weight: 600; color: var(--text-light); font-size: 0.92rem; }
.cd-row .cd-ops { font-size: 0.75rem; color: var(--text-light-muted); }
.cd-row .cd-bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.cd-row .cd-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-500), var(--accent-400)); border-radius: 999px; }
.cd-row .cd-pct { text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--accent-500); font-size: 0.82rem; }
.cov-dash-foot { font-size: 0.72rem; color: var(--text-light-muted); text-align: center; padding-top: 10px; border-top: 1px solid var(--border-dark); }
@media (max-width: 700px) { .cd-row { grid-template-columns: 36px 1fr 50px; } .cd-row .cd-ops, .cd-row .cd-bar { display: none; } }

/* Status pill — dashboard signal */
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: rgba(22,163,106,0.12); border: 1px solid rgba(22,163,106,0.35); border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--success); font-family: var(--font-body); }
.status-pill .sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(22,163,106,0.5); animation: sp-pulse 2s infinite; }
.status-pill b { color: var(--text-light); font-weight: 700; }
@keyframes sp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22,163,106,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(22,163,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,106,0); }
}

/* ====== Payment Flow / Settlement Rail section ====== */
.flow-section { background: var(--primary-900); color: var(--text-light); padding: var(--pad-section) 24px; position: relative; overflow: hidden; }
.flow-section::before { content: ''; position: absolute; top: 50%; left: 50%; width: 700px; height: 700px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(0,213,255,0.08), transparent 60%); pointer-events: none; }
.flow-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.flow-head { text-align: center; margin-bottom: 56px; }
.flow-head .eyebrow { color: var(--accent-500); }
.flow-head h2 { color: var(--text-light); margin: 10px auto 12px; max-width: 720px; }
.flow-head p { color: var(--text-light-muted); max-width: 660px; margin: 0 auto; }

/* Flow diagram */
.flow-diagram { display: grid; gap: 20px; }
.flow-band { display: flex; flex-direction: column; align-items: center; }
.flow-band-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--accent-500); margin-bottom: 12px; }
.flow-rails { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; }
.flow-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-dark); border-radius: var(--radius-md); transition: all .18s; }
.flow-rail:hover { border-color: var(--accent-500); background: rgba(0,213,255,0.06); transform: translateY(-2px); }
.flow-rail .fr-icon { width: 36px; height: 36px; color: var(--accent-500); display: flex; align-items: center; justify-content: center; }
.flow-rail .fr-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
.flow-rail .fr-label { font-family: var(--font-display); font-weight: 700; color: var(--text-light); font-size: 0.88rem; text-align: center; line-height: 1.3; }

/* Arrow connectors between bands */
.flow-arrow { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 6px 0; }
.flow-arrow .fa-line { flex: 1; max-width: 40%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-500) 50%, transparent); position: relative; }
.flow-arrow .fa-line::after { content: ''; position: absolute; right: 30%; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-500); box-shadow: 0 0 8px var(--accent-500); animation: fa-travel 2.4s ease-in-out infinite; }
.flow-arrow .fa-line.r2::after { animation-delay: 0.6s; }
.flow-arrow .fa-line.r3::after { animation-delay: 1.2s; }
@keyframes fa-travel { 0% { right: 90%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { right: 5%; opacity: 0; } }

/* Core hub (LEOGC) */
.flow-core { position: relative; width: 100%; max-width: 480px; margin: 4px auto; padding: 28px 32px; background: linear-gradient(135deg, rgba(0,213,255,0.10), rgba(214,168,79,0.04)); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); display: flex; align-items: center; gap: 18px; }
.flow-core::before { content: ''; position: absolute; inset: -4px; border-radius: calc(var(--radius-lg) + 4px); background: linear-gradient(135deg, rgba(0,213,255,0.3), rgba(214,168,79,0.15)); z-index: -1; filter: blur(14px); opacity: 0.5; }
.flow-core .fc-logo { width: 56px; height: 56px; border-radius: 14px; background: rgba(0,213,255,0.18); color: var(--accent-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--accent-border); }
.flow-core .fc-logo svg { width: 30px; height: 30px; stroke-width: 1.75; }
.flow-core .fc-text { flex: 1; }
.flow-core .fc-title { font-family: var(--font-display); font-weight: 800; color: var(--text-light); font-size: 1.15rem; line-height: 1.2; }
.flow-core .fc-sub { font-size: 0.82rem; color: var(--text-light-muted); margin-top: 4px; }
.flow-core .fc-tag { background: rgba(0,213,255,0.15); color: var(--accent-500); padding: 4px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid rgba(0,213,255,0.35); }

/* Settlement / payout rails */
.flow-rails.outputs { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .flow-rails { grid-template-columns: repeat(3, 1fr); }
  .flow-rails.outputs { grid-template-columns: repeat(2, 1fr); }
  .flow-core { flex-direction: column; text-align: center; padding: 22px; gap: 10px; }
}
@media (max-width: 540px) {
  .flow-rails, .flow-rails.outputs { grid-template-columns: repeat(2, 1fr); }
  .flow-rail { padding: 14px 8px; }
  .flow-rail .fr-label { font-size: 0.8rem; }
}

/* ====== Trust & Compliance section — institutional dark per doc ====== */
.trust-section { background: var(--primary-800); color: var(--text-light); padding: var(--pad-section) 24px; position: relative; overflow: hidden; }
.trust-section::before { content: ''; position: absolute; top: -120px; right: -80px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(0,213,255,0.10), transparent 65%); pointer-events: none; }
.trust-section::after { content: ''; position: absolute; bottom: -120px; left: -80px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(22,163,106,0.08), transparent 65%); pointer-events: none; }
.trust-inner { max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
.trust-head { text-align: center; margin-bottom: 48px; }
.trust-head .eyebrow { color: var(--accent-500); }
.trust-head h2 { color: var(--text-light); margin: 10px auto 14px; max-width: 700px; }
.trust-head p { color: var(--text-light-muted); max-width: 680px; margin: 0 auto; font-size: 1.05rem; }

/* CBSL hero badge — most prominent */
.cbsl-hero { background: linear-gradient(135deg, rgba(0,213,255,0.08), rgba(22,163,106,0.05)); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); padding: 32px 36px; display: flex; align-items: center; gap: 28px; margin-bottom: 36px; position: relative; }
.cbsl-hero::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); background: radial-gradient(circle at 0% 0%, rgba(22,163,106,0.12), transparent 50%); pointer-events: none; }
.cbsl-icon { width: 88px; height: 88px; border-radius: 18px; background: rgba(0,213,255,0.12); color: var(--accent-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--accent-border); position: relative; z-index: 1; }
.cbsl-icon svg { width: 44px; height: 44px; stroke-width: 1.5; }
.cbsl-content { flex: 1; position: relative; z-index: 1; }
.cbsl-content h3 { color: var(--text-light); font-size: 1.4rem; margin-bottom: 6px; }
.cbsl-content p { color: var(--text-light-muted); font-size: 0.95rem; margin-bottom: 0; }
.cbsl-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(22,163,106,0.15); color: var(--success); padding: 5px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; border: 1px solid rgba(22,163,106,0.3); }
.cbsl-tag svg { width: 14px; height: 14px; stroke-width: 2.5; }

/* Trust badge grid */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trust-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .trust-grid.grid-4 { grid-template-columns: repeat(2, 1fr); } }
.trust-badge { display: flex; gap: 14px; align-items: flex-start; padding: 22px 20px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-dark); border-radius: var(--radius-md); transition: all .18s; }
.trust-badge:hover { border-color: var(--accent-500); background: rgba(0,213,255,0.05); transform: translateY(-2px); }
.trust-badge .tb-icon { width: 44px; height: 44px; border-radius: 11px; background: rgba(0,213,255,0.10); color: var(--accent-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--accent-border); }
.trust-badge .tb-icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.trust-badge .tb-text b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--text-light); font-size: 0.98rem; line-height: 1.35; }
.trust-badge .tb-text span { display: block; font-size: 0.82rem; color: var(--text-light-muted); line-height: 1.4; margin-top: 4px; }
.trust-badge .tb-text { align-self: center; }
/* verified state — green only for officially approved badges */
.trust-badge.verified .tb-icon { background: rgba(22,163,106,0.12); color: var(--success); border-color: rgba(22,163,106,0.35); }
.trust-badge.verified::after { content: '✓ Verified'; position: absolute; right: 16px; top: 16px; font-size: 0.66rem; font-weight: 700; color: var(--success); background: rgba(22,163,106,0.15); border: 1px solid rgba(22,163,106,0.3); padding: 3px 9px; border-radius: 999px; letter-spacing: 0.05em; }
.trust-badge.verified { position: relative; padding-right: 90px; }

.trust-cta { text-align: center; margin-top: 40px; }

@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .cbsl-hero { flex-direction: column; text-align: center; gap: 18px; padding: 28px 22px; }
  .cbsl-content { text-align: center; }
}
@media (max-width: 600px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-badge.verified { padding-right: 20px; }
  .trust-badge.verified::after { position: static; display: inline-block; margin-top: 6px; }
}

/* Existing .compliance-card kept for any other page using it */
.compliance-card { max-width: var(--container); margin: 0 auto; background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%); border-radius: var(--radius-lg); padding: 64px 56px; color: var(--text-light); display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; position: relative; overflow: hidden; border: 1px solid var(--border-dark); }
.compliance-card::before { content: ''; position: absolute; top: -100px; right: -50px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(0,213,255,0.18), transparent 70%); }
.compliance-card-left { position: relative; z-index: 1; }
.compliance-card-left h2 { color: var(--text-light); margin-bottom: 14px; }
.compliance-card-left p { color: var(--text-light-muted); margin-bottom: 26px; }
.compliance-points { position: relative; z-index: 1; display: grid; gap: 12px; }
.compliance-point { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: rgba(255,255,255,0.04); border: 1px solid var(--accent-border); border-radius: var(--radius-md); transition: all .15s; }
.compliance-point:hover { background: rgba(0,213,255,0.06); border-color: var(--accent-500); }
.compliance-point .cp-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(0,213,255,0.12); color: var(--accent-500); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.compliance-point .cp-text { font-size: 0.95rem; color: var(--text-light); font-weight: 600; }
@media (max-width: 900px) { .compliance-card { grid-template-columns: 1fr; padding: 36px 28px; } }

/* final cta — dark per doc spec (gradient from midnight to charcoal navy + cyan glow) */
.cta-section { background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%); padding: var(--pad-section) 24px; color: var(--text-light); position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; top: -120px; right: -80px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(0,213,255,0.18), transparent 65%); pointer-events: none; }
.cta-section::after { content: ''; position: absolute; bottom: -120px; left: -80px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(0,213,255,0.10), transparent 65%); pointer-events: none; }
.cta-card { max-width: 880px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cta-card .eyebrow { color: var(--accent-500); }
.cta-card h2 { margin: 10px 0 16px; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--text-light); }
.cta-card p { font-size: 1.05rem; margin-bottom: 32px; max-width: 580px; margin-left: auto; margin-right: auto; color: var(--text-light-muted); }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* legacy class kept (some pages used .cta-banner) */
.cta-banner { max-width: var(--container); margin: 0 auto; text-align: center; }
.cta-banner h2 { margin-bottom: 16px; font-size: clamp(2rem, 4vw, 2.8rem); }
.cta-banner p { font-size: 1.05rem; margin-bottom: 32px; max-width: 580px; margin-left: auto; margin-right: auto; }

/* footer */
.footer { background: var(--strip-bg); color: rgba(255,255,255,0.7); padding: 70px 24px 24px; }
.footer-inner { max-width: var(--container); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand { display: inline-flex; align-items: center; margin-bottom: 16px; }
.footer-brand img { width: 64px; height: 64px; display: block; }
.footer-brand .b-name { display: none; }
.footer-tag { font-size: 0.88rem; color: rgba(255,255,255,0.6); max-width: 320px; margin-bottom: 18px; }
.footer-licensed { display: inline-flex; align-items: center; gap: 8px; background: rgba(132,204,22,0.1); border: 1px solid rgba(132,204,22,0.25); padding: 8px 14px; border-radius: var(--radius-pill); font-size: 0.78rem; color: var(--highlight-400); font-weight: 500; }
.footer-licensed b { font-weight: 700; }
.footer-col h5 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; font-weight: 700; }
.footer-col a { display: block; color: rgba(255,255,255,0.65); text-decoration: none; padding: 5px 0; font-size: 0.9rem; transition: color .15s; }
.footer-col a:hover { color: var(--highlight-400); }
/* Footer social link */
.footer-social { display: inline-flex; align-items: center; gap: 10px; color: var(--text-light-muted); text-decoration: none; padding: 8px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-dark); border-radius: var(--radius-md); transition: all .15s; font-size: 0.88rem; font-weight: 500; }
.footer-social:hover { background: rgba(0,213,255,0.06); border-color: var(--accent-500); color: var(--accent-500); }
.footer-social svg { width: 18px; height: 18px; color: var(--accent-500); }

/* Footer trust strip — per update doc §3 */
.footer-trust { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 26px 24px; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-trust .ft-item { display: flex; align-items: center; gap: 12px; }
.footer-trust .ft-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(0,213,255,0.10); color: var(--accent-500); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,213,255,0.3); }
.footer-trust .ft-icon svg { width: 18px; height: 18px; stroke-width: 1.75; }
.footer-trust .ft-text b { display: block; color: var(--text-light); font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; line-height: 1.2; }
.footer-trust .ft-text span { display: block; color: var(--text-light-muted); font-size: 0.74rem; margin-top: 2px; }
.footer-trust .ft-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.08); }

/* Payment brand logos — consistent 40px height, clean white pills, subtle borders.
   Designed to read clearly on the dark footer; swap with official SVGs when client supplies them. */
.footer-trust .ft-logo { background: #fff; padding: 6px 14px; border-radius: 6px; display: inline-flex; align-items: center; height: 40px; min-width: 70px; justify-content: center; box-shadow: 0 1px 0 rgba(255,255,255,0.04); font-family: 'Inter Tight', Inter, sans-serif; }
.footer-trust .ft-logo img { display: block; max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
/* PCI DSS — official-ish dark-blue gradient with PCI brand + DSS tag */
.footer-trust .ft-pci { background: linear-gradient(135deg, #003B6F, #00609E); padding: 0 14px; gap: 7px; line-height: 1; }
.footer-trust .ft-pci-brand { font-weight: 900; font-size: 1.05rem; color: #fff; letter-spacing: 0.02em; }
.footer-trust .ft-pci-dss { font-weight: 700; font-size: 0.65rem; color: #fff; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 7px; background: rgba(255,255,255,0.18); border-radius: 3px; line-height: 1; }
/* VISA — italic dark-blue wordmark */
.footer-trust .ft-visa { color: #1A1F71; font-style: italic; font-weight: 900; font-size: 1.2rem; letter-spacing: 0.04em; padding: 0 22px; }
/* Mastercard — overlapping red + yellow circles with multiply blend */
.footer-trust .ft-mc { padding: 0 16px 0 12px; gap: 8px; }
.footer-trust .ft-mc-c { display: inline-block; width: 22px; height: 22px; border-radius: 50%; }
.footer-trust .ft-mc-red { background: #EB001B; position: relative; z-index: 1; }
.footer-trust .ft-mc-yellow { background: #F79E1B; margin-left: -10px; mix-blend-mode: multiply; }
.footer-trust .ft-mc-text { color: #1A1A1A; font-weight: 700; font-size: 0.88rem; letter-spacing: -0.01em; margin-left: 2px; }
@media (max-width: 700px) {
  .footer-trust { gap: 14px; padding: 22px 16px; }
  .footer-trust .ft-divider { display: none; }
}

.footer-cta { text-align: center; padding: 22px 24px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-cta p { color: var(--text-light-muted); font-size: 0.95rem; margin: 0; }
.footer-cta a { color: var(--accent-500); text-decoration: none; font-weight: 600; transition: color .15s; }
.footer-cta a:hover { color: var(--accent-400); }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,0.55); }
.footer-offices { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-offices span::before { content: '●'; color: var(--highlight-500); margin-right: 6px; font-size: 0.7em; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==================== SUB-PAGE COMPONENTS ==================== */

/* two-col text + list */
.two-col { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-start; }
.two-col h2 { margin-bottom: 16px; }
.two-col p { margin-bottom: 14px; font-size: 1.02rem; }
.two-col .list { display: grid; gap: 10px; margin-top: 16px; }
.two-col .list-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.two-col .list-item .tk { width: 26px; height: 26px; border-radius: 7px; background: var(--highlight-100); color: #4D7C0F; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.two-col .list-item .tx { font-size: 0.92rem; color: var(--text-700); }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

/* feature grid 3-col */
.feature-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.feature-card .fi { width: 44px; height: 44px; border-radius: 11px; background: var(--accent-100); color: var(--accent-500); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.feature-card .fi.lime { background: var(--highlight-100); color: #4D7C0F; }
.feature-card .fi.navy { background: var(--primary-800); color: #fff; }
.feature-card h4 { margin-bottom: 8px; font-size: 1.02rem; }
.feature-card p { font-size: 0.88rem; }
@media (max-width: 850px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px) { .feature-grid { grid-template-columns: 1fr; } }

/* ideal use cases — chip grid */
.use-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.use-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; text-align: center; font-family: var(--font-display); font-weight: 600; color: var(--text-900); font-size: 0.9rem; transition: all .15s; }
.use-chip:hover { border-color: var(--accent-400); background: var(--accent-100); }
@media (max-width: 900px) { .use-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .use-grid { grid-template-columns: 1fr; } }

/* coverage page — tabs + accordion */
.cov-tabs { max-width: var(--container); margin: 0 auto 32px; display: flex; gap: 8px; border-bottom: 2px solid var(--border); }
.cov-tabs button { background: none; border: none; padding: 14px 20px; cursor: pointer; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--text-500); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.cov-tabs button:hover { color: var(--accent-500); }
.cov-tabs button.on { color: var(--accent-500); border-bottom-color: var(--accent-500); }

.cov-controls { max-width: var(--container); margin: 0 auto 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cov-search { flex: 1; min-width: 220px; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.95rem; background: var(--surface); }
.cov-search:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 4px rgba(0,122,204,0.12); }
.cov-filter { padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; cursor: pointer; }

.acc-list { max-width: var(--container); margin: 0 auto; }
.acc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; }
.acc-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; user-select: none; }
.acc-head:hover { background: var(--surface-alt); }
.acc-head .flag { width: 36px; height: 26px; background: transparent; color: var(--text-500); font-weight: 700; font-size: 0.62rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acc-head .acc-name { font-family: var(--font-display); font-weight: 700; color: var(--text-900); flex: 1; font-size: 1rem; }
.acc-head .acc-meta { font-size: 0.82rem; color: var(--text-400); }
.acc-head .acc-toggle { color: var(--accent-500); font-size: 1.2rem; font-weight: 700; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-100); display: flex; align-items: center; justify-content: center; transition: transform .18s; }
.acc.open .acc-toggle { transform: rotate(45deg); background: var(--highlight-100); color: #4D7C0F; }
.acc-body { padding: 0 20px 16px 70px; display: none; }
.acc.open .acc-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.op-chip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px; }
.op-logo { width: 40px; height: 40px; border-radius: 8px; background: var(--primary-800); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; overflow: hidden; }
/* When a real logo image is present, switch to a white card so the logo reads clearly */
.op-logo--has-image { background: #fff; padding: 4px; }
.op-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.op-name { font-size: 0.86rem; font-weight: 600; color: var(--text-900); line-height: 1.2; }
.op-meta { font-size: 0.7rem; color: var(--text-400); display: block; margin-top: 2px; }

/* corridor grid (cross-border) */
.corridor-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.corridor { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all .12s; }
.corridor:hover { border-color: var(--accent-400); transform: translateY(-2px); }
.corridor .cflag { width: 30px; height: 22px; background: transparent; color: var(--text-500); font-weight: 700; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.corridor .cname { font-family: var(--font-display); font-weight: 600; color: var(--text-900); font-size: 0.9rem; }

/* about — values & offices */
.values-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.value-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.value-card .v-num { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--accent-500); margin-bottom: 8px; }
@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr; } }

.mv-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); }
.mv-card { background: linear-gradient(135deg, var(--primary-800), var(--primary-700)); color: #fff; border-radius: var(--radius-lg); padding: 36px; position: relative; overflow: hidden; }
.mv-card::before { content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; background: radial-gradient(circle, rgba(132,204,22,0.2), transparent 70%); }
.mv-card h3 { color: #fff; margin-bottom: 14px; position: relative; z-index: 1; font-size: 1.3rem; }
.mv-card p { color: rgba(255,255,255,0.85); position: relative; z-index: 1; font-size: 0.98rem; }
.mv-card .mv-eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 700; color: var(--highlight-400); margin-bottom: 10px; position: relative; z-index: 1; }
@media (max-width: 700px) { .mv-grid { grid-template-columns: 1fr; } }

.offices { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.office { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.office .o-flag { width: 44px; height: 32px; background: transparent; color: var(--text-500); font-weight: 700; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
/* Flag SVG images fill their container fully, keep the parent's rounded corners */
.flag > img, .cflag > img, .o-flag > img, .cd-row .flag > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.office h4 { margin-bottom: 6px; }
.office .o-addr { font-size: 0.88rem; color: var(--text-500); line-height: 1.5; }
@media (max-width: 900px) { .offices { grid-template-columns: 1fr; } }

/* contact form */
.contact-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 50px; align-items: flex-start; }
.contact-info h3 { margin-bottom: 12px; }
.contact-info p { margin-bottom: 22px; }
.contact-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }
.contact-item:first-of-type { border-top: none; padding-top: 0; }
.contact-item .ci-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--accent-100); color: var(--accent-500); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.contact-item .ci-text b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--text-900); font-size: 0.95rem; margin-bottom: 2px; }
.contact-item .ci-text span { font-size: 0.86rem; color: var(--text-500); }
.contact-item .ci-text a { font-size: 0.86rem; color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; }
.contact-item .ci-text a:hover { color: var(--accent-500); }

.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-grid.full { grid-template-columns: 1fr; }
.field { display: block; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-700); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 0.95rem; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-900); transition: all .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 4px rgba(0,122,204,0.12); }
.field textarea { resize: vertical; min-height: 110px; font-family: var(--font-body); }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }

/* security blocks */
.sec-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-grid); }
.sec-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.sec-block .sb-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--highlight-100); color: #4D7C0F; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.sec-block h3 { margin-bottom: 8px; font-size: 1.15rem; }
.sec-block p { font-size: 0.92rem; }
@media (max-width: 700px) { .sec-grid { grid-template-columns: 1fr; } }

/* dev cards */
.dev-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.dev-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; text-decoration: none; color: inherit; transition: all .2s; }
.dev-card:hover { border-color: var(--accent-400); transform: translateY(-3px); }
.dev-card .d-tag { display: inline-block; background: var(--highlight-100); color: #4D7C0F; padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; margin-bottom: 12px; }
.dev-card h4 { margin-bottom: 6px; }
.dev-card p { font-size: 0.88rem; margin-bottom: 14px; }
.dev-card .d-link { font-size: 0.85rem; font-weight: 600; color: var(--accent-500); }
@media (max-width: 900px) { .dev-grid { grid-template-columns: 1fr; } }

/* page summary band */
.summary-band { background: var(--accent-100); padding: 24px; border-radius: var(--radius-md); margin-bottom: 32px; display: flex; gap: 18px; align-items: center; }
.summary-band .sb-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.summary-band .sb-text { font-size: 0.95rem; color: var(--text-700); }
.summary-band .sb-text b { color: var(--text-900); }

/* security page — trust badges (regulator + card networks + PCI DSS) */
.trust-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 12px; }
.trust-badge-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; transition: transform .2s, box-shadow .2s; }
.trust-badge-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,8,13,0.08); }
.trust-badge-item img { display: block; max-height: 40px; max-width: 100%; width: auto; object-fit: contain; }
.trust-badge-item span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-500); font-weight: 600; }
@media (max-width: 900px) { .trust-badges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .trust-badges { grid-template-columns: repeat(2, 1fr); gap: 12px; } .trust-badge-item { padding: 14px 8px; } .trust-badge-item img { max-height: 32px; } }

/* small disclaimer */
.disclaimer { font-size: 0.8rem; color: var(--text-400); font-style: italic; margin-top: 14px; }

/* verbatim bullet grid — exact draft items, no invented descriptions */
.vb-grid { display: grid; gap: 12px; }
.vb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.vb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.vb-cols-4 { grid-template-columns: repeat(4, 1fr); }
.vb-cols-5 { grid-template-columns: repeat(5, 1fr); }
.vb-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all .15s; }
.vb-card:hover { border-color: var(--accent-400); transform: translateY(-2px); }
.vb-card .vb-tick { width: 28px; height: 28px; border-radius: 8px; background: var(--highlight-100); color: #4D7C0F; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.vb-card .vb-text { font-family: var(--font-display); font-weight: 600; color: var(--text-900); font-size: 0.94rem; line-height: 1.4; }
.vb-card.vb-dark { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.vb-card.vb-dark .vb-text { color: var(--text-light); }
.vb-card.vb-dark .vb-tick { background: rgba(0,213,255,0.14); color: var(--accent-500); border: 1px solid rgba(0,213,255,0.35); }

/* center-last: when item count produces an awkward orphan row, center it */
.vb-center-last { display: flex; flex-direction: column; gap: 12px; }
.vb-center-last .vb-row { display: grid; gap: 12px; }
.vb-center-last .vb-row.full-3 { grid-template-columns: repeat(3, 1fr); }
.vb-center-last .vb-row.full-4 { grid-template-columns: repeat(4, 1fr); }
.vb-center-last .vb-row.last { justify-content: center; }
.vb-center-last .vb-row.last.partial-1 { grid-template-columns: minmax(0, 33%); }
.vb-center-last .vb-row.last.partial-2 { grid-template-columns: minmax(0, 33%) minmax(0, 33%); gap: 12px; }

@media (max-width: 1100px) { .vb-cols-5 { grid-template-columns: repeat(3, 1fr); } .vb-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .vb-cols-3, .vb-cols-5 { grid-template-columns: repeat(2, 1fr); } .vb-center-last .vb-row { grid-template-columns: repeat(2, 1fr) !important; justify-content: stretch !important; } }
@media (max-width: 600px) { .vb-cols-2, .vb-cols-3, .vb-cols-4, .vb-cols-5 { grid-template-columns: 1fr; } .vb-center-last .vb-row { grid-template-columns: 1fr !important; } }

/* =========================================================
   WordPress-specific additions
   ========================================================= */
.screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.screen-reader-text:focus { clip: auto; height: auto; width: auto; padding: 12px 16px; background: #fff; color: var(--primary-900); z-index: 100000; }
.alignleft   { float: left; margin: 0 24px 16px 0; }
.alignright  { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption img { max-width: 100%; height: auto; }
.wp-caption .wp-caption-text { font-size: 0.85rem; color: var(--text-500); margin-top: 6px; text-align: center; }
.sticky, .gallery-caption, .bypostauthor { /* required by theme check */ }

/* Admin bar offset so sticky nav sits below */
.admin-bar .nav-wrap { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .nav-wrap { top: 46px; } }

/* =========================================================
   Contact Form 7 — adapt CF7's output to the v2 form styling
   ========================================================= */
.wpcf7-form .field { margin-bottom: 0; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 0.95rem;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--text-900);
	transition: all .15s;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--accent-500);
	box-shadow: 0 0 0 4px rgba(0,122,204,0.12);
}
.wpcf7-form textarea { resize: vertical; min-height: 110px; font-family: var(--font-body); }

/* CF7 wraps fields in <span class="wpcf7-form-control-wrap"> — make it inherit width */
.wpcf7-form .wpcf7-form-control-wrap { display: block; width: 100%; }

/* Submit button — already has .btn .btn-primary .btn-lg via our seeder. Full-width. */
.wpcf7-form input[type="submit"].btn {
	width: 100%;
	justify-content: center;
	cursor: pointer;
}
.wpcf7-form p:has(> input[type="submit"]) { margin: 0; }
.wpcf7-spinner { vertical-align: middle; margin-left: 10px; }

/* Validation states */
.wpcf7-not-valid {
	border-color: #DC2626 !important;
	box-shadow: 0 0 0 4px rgba(220,38,38,0.08) !important;
}
.wpcf7-not-valid-tip {
	display: block;
	color: #DC2626;
	font-size: 0.8rem;
	font-weight: 500;
	margin-top: 4px;
}

/* Response messages (success / error banners) */
.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 18px;
	border-radius: var(--radius-md);
	font-size: 0.92rem;
	font-weight: 500;
}
.wpcf7 form.sent .wpcf7-response-output {
	background: rgba(22,163,106,0.10);
	border: 1px solid rgba(22,163,106,0.35);
	color: #0F7B4F;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	background: rgba(220,38,38,0.08);
	border: 1px solid rgba(220,38,38,0.30);
	color: #B91C1C;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	background: rgba(214,168,79,0.10);
	border: 1px solid rgba(214,168,79,0.30);
	color: #92580A;
}

/* =========================================================
   Blog — listing + single
   ========================================================= */

/* Single post hero (default — no featured image): tight dark gradient. */
.entry-hero {
	background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%);
	color: var(--text-light);
	padding: 80px 24px 70px;
	position: relative;
	overflow: hidden;
}
.entry-hero::before {
	content: '';
	position: absolute;
	top: -100px; right: -50px;
	width: 420px; height: 420px;
	background: radial-gradient(circle, rgba(0,213,255,0.18), transparent 60%);
	pointer-events: none;
}

/* Magazine-cover hero — featured image as background + dark overlay. */
.entry-hero--cover {
	min-height: 520px;
	padding: 120px 24px 80px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.entry-hero--cover::before { display: none; }
.entry-hero--cover .entry-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(5,8,13,0.35) 0%, rgba(5,8,13,0.88) 100%),
		radial-gradient(circle at 80% 20%, rgba(0,213,255,0.18), transparent 60%);
	pointer-events: none;
	z-index: 1;
}

.entry-hero-inner {
	max-width: 760px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	text-align: center;
}
.entry-hero .eyebrow { color: var(--highlight-400); }

/* Split hero — text left, featured image right. */
.entry-hero--split {
	padding: 70px 24px 70px;
	min-height: auto;
}
.entry-hero--split .entry-hero-inner {
	max-width: var(--container);
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
	text-align: left;
}
.entry-hero--split .entry-hero-text {
	max-width: 600px;
}
.entry-hero--split .entry-title {
	font-size: clamp(1.85rem, 3.8vw, 2.8rem);
	margin: 12px 0 22px;
	letter-spacing: -0.015em;
}
.entry-hero--split .entry-meta {
	justify-content: flex-start;
}
.entry-hero--split .entry-hero-media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, var(--primary-900), var(--primary-700));
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
	aspect-ratio: 4 / 3;
	position: relative;
	z-index: 1;
}
.entry-hero--split .entry-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 900px) {
	.entry-hero--split { padding: 56px 24px 48px; }
	.entry-hero--split .entry-hero-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.entry-hero--split .entry-hero-media { aspect-ratio: 16 / 9; }
}

/* "Back to all posts" link inside the hero. */
.entry-hero-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 500;
	margin-bottom: 22px;
	letter-spacing: 0.04em;
	transition: color .15s;
}
.entry-hero-back:hover { color: var(--accent-500); }
.entry-title {
	color: #fff;
	margin: 14px 0 22px;
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	line-height: 1.15;
	letter-spacing: -0.018em;
}
.entry-meta {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	font-size: 0.88rem;
	color: rgba(255,255,255,0.78);
}
.entry-meta-sep { color: rgba(255,255,255,0.35); }
.entry-meta-byline { font-weight: 600; color: var(--accent-500); }

/* Optional featured image directly under the hero. */
.entry-featured {
	max-width: 880px;
	margin: -32px auto 0;
	padding: 0 24px;
	position: relative;
	z-index: 2;
}
.entry-featured img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 60px rgba(0,0,0,0.22);
}

/* ---------- 2-col blog single layout ---------- */
.entry-layout {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px 60px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	align-items: start;
}
@media (max-width: 1000px) {
	.entry-layout { grid-template-columns: 1fr; gap: 32px; padding: 32px 20px 48px; }
}

/* Breadcrumb at the top of the main column. */
.entry-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: var(--text-500);
	margin-bottom: 24px;
	font-weight: 500;
}
.entry-breadcrumb a {
	color: var(--text-500);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color .15s;
}
.entry-breadcrumb a:hover { color: var(--accent-500); }
.entry-breadcrumb .bc-sep { color: var(--text-400); }
.entry-breadcrumb .bc-current {
	color: var(--text-900);
	font-weight: 600;
	max-width: 60ch;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 700px) {
	.entry-breadcrumb .bc-current { max-width: 24ch; }
}

/* Contained featured-image card. */
.entry-cover {
	margin: 0 0 28px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, var(--primary-900), var(--primary-700));
	aspect-ratio: 16 / 9;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
}
.entry-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Title + eyebrow on the main column. */
.entry-header {
	margin-bottom: 28px;
}
.entry-eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--accent-500);
	margin-bottom: 12px;
}
.entry-main .entry-title {
	font-family: var(--font-display);
	font-size: clamp(1.65rem, 3.2vw, 2.45rem);
	font-weight: 800;
	color: var(--text-900);
	line-height: 1.2;
	letter-spacing: -0.018em;
	margin: 0;
}

/* Meta stats row (Date / Author / Read time, 3-up icons). */
.entry-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin-bottom: 36px;
}
.entry-stat {
	display: flex;
	align-items: center;
	gap: 14px;
}
.entry-stat-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: var(--accent-100);
	color: var(--accent-500);
	display: flex;
	align-items: center;
	justify-content: center;
}
.entry-stat-icon svg { width: 20px; height: 20px; }
.entry-stat-label {
	font-size: 0.72rem;
	color: var(--text-400);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	margin-bottom: 2px;
}
.entry-stat-value {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--text-900);
	font-size: 0.95rem;
	line-height: 1.3;
}
@media (max-width: 700px) {
	.entry-stats { grid-template-columns: 1fr; padding: 18px 18px; gap: 14px; }
}

/* Article body — inside the main column, no longer needs centering. */
.entry-main .entry-body {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Legacy centered body used by static pages (page.php) — keep working. */
.entry-body {
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 24px;
}
.prose { font-size: 1.05rem; line-height: 1.75; color: var(--text-700); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.4vw, 1.85rem);
	font-weight: 700;
	color: var(--text-900);
	margin-top: 2em;
	margin-bottom: 0.6em;
	line-height: 1.25;
	letter-spacing: -0.012em;
}
.prose h3 {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 1.8vw, 1.4rem);
	font-weight: 700;
	color: var(--text-900);
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	line-height: 1.3;
}
.prose h4 {
	font-family: var(--font-display);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--text-900);
	margin-top: 1.4em;
	margin-bottom: 0.4em;
}
.prose p { color: var(--text-700); }
.prose p strong { color: var(--text-900); }
.prose a {
	color: var(--blue-deep);
	text-decoration: underline;
	text-decoration-color: var(--accent-500);
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition: color .15s;
}
.prose a:hover { color: var(--accent-500); }
.prose ul, .prose ol {
	padding-left: 1.4em;
	margin-left: 0;
}
.prose li { margin-top: 0.4em; }
.prose li::marker { color: var(--accent-500); }
.prose blockquote {
	border-left: 4px solid var(--accent-500);
	background: var(--accent-100);
	padding: 18px 24px;
	margin: 1.8em 0;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-style: italic;
	color: var(--text-900);
}
.prose blockquote p { color: var(--text-900); }
.prose blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 0.9rem;
	color: var(--text-500);
	font-style: normal;
}
.prose code {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.92em;
	background: var(--surface-alt);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--blue-deep);
}
.prose pre {
	background: var(--primary-900);
	color: var(--text-light);
	padding: 20px 22px;
	border-radius: var(--radius-md);
	overflow-x: auto;
	font-size: 0.88rem;
	line-height: 1.55;
}
.prose pre code { background: transparent; color: inherit; padding: 0; }
.prose img, .prose figure {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.prose figcaption {
	text-align: center;
	color: var(--text-500);
	font-size: 0.88rem;
	margin-top: 8px;
}
.prose hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 2.5em 0;
}

/* ---------- Sidebar widgets ---------- */
.entry-aside {
	display: flex;
	flex-direction: column;
	gap: 22px;
	position: sticky;
	top: 90px;
	align-self: start;
}
@media (max-width: 1000px) {
	.entry-aside { position: static; }
}

.widget {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px;
}
.widget-title {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--text-900);
	margin: 0 0 16px;
	letter-spacing: -0.012em;
	line-height: 1.3;
}

/* Search widget */
.widget-search { background: var(--accent-100); border-color: rgba(0,213,255,0.25); }
.widget-search-form {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-md);
	padding: 4px 4px 4px 14px;
	transition: border-color .15s;
}
.widget-search-form:focus-within {
	border-color: var(--accent-500);
	box-shadow: 0 0 0 4px rgba(0,213,255,0.10);
}
.widget-search-form input[type="search"] {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: 0.92rem;
	color: var(--text-900);
	padding: 10px 0;
	min-width: 0;
}
.widget-search-form input[type="search"]::placeholder { color: var(--text-400); }
.widget-search-form button {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--accent-500);
	color: var(--primary-900);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s;
}
.widget-search-form button:hover { background: var(--accent-400); }
.widget-search-form button svg { width: 18px; height: 18px; }

/* ---------- Contact widget — LEOGC dark navy mini-CTA card ----------
   Pattern reference: homepage .cta-section + .trust-section
   Dark navy gradient + corner cyan glow + cyan accents on dark
*/
.widget-contact {
	background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%);
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-lg);
	padding: 0;
	overflow: hidden;
	position: relative;
	color: var(--text-light);
	box-shadow: 0 12px 32px rgba(5, 8, 13, 0.18);
}
/* Cyan radial glow in the top-right — LEOGC signature */
.widget-contact::before {
	content: '';
	position: absolute;
	top: -80px;
	right: -60px;
	width: 280px;
	height: 280px;
	background: radial-gradient(circle, rgba(0,213,255,0.18), transparent 65%);
	pointer-events: none;
	z-index: 0;
}

/* Head (badge + title + subtitle) — left aligned, eyebrow rhythm */
.widget-contact-head {
	padding: 22px 22px 12px;
	text-align: left;
	position: relative;
	z-index: 1;
}
/* Rounded-square badge — matches .trust-badge / .cbsl-icon pattern */
.widget-contact-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(0, 213, 255, 0.12);
	color: var(--accent-500);
	border: 1px solid var(--accent-border);
	border-radius: 10px;
	margin-bottom: 12px;
}
.widget-contact-badge svg { width: 20px; height: 20px; }

.widget-contact .widget-title {
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 800;
	color: var(--text-light);
	margin: 0 0 4px;
	text-align: left;
	letter-spacing: -0.015em;
	line-height: 1.25;
}
.widget-subtitle {
	font-size: 0.82rem;
	color: var(--text-light-muted);
	margin: 0;
	text-align: left;
	line-height: 1.45;
}

/* CF7 form body */
.widget-contact .wpcf7,
.widget-contact .wpcf7-form { padding: 0; position: relative; z-index: 1; }
.widget-contact .wpcf7-form > p { margin: 0; }
.widget-contact .form-grid,
.widget-contact .form-grid.full {
	display: block;
	margin: 0;
	padding: 4px 22px 0;
}
.widget-contact .field {
	margin-bottom: 10px;
	position: relative;
}
.widget-contact .field label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--text-light);
	margin-bottom: 5px;
	letter-spacing: 0.02em;
}
.widget-contact .field-req {
	color: var(--accent-500);
	margin-left: 2px;
	font-weight: 700;
}
.widget-contact .field-opt {
	font-weight: 400;
	color: var(--text-light-muted);
	font-size: 0.72rem;
	margin-left: 4px;
}

/* Inputs — translucent white on dark (matches .hero-trust + code-block) */
.widget-contact .wpcf7-form input[type="text"],
.widget-contact .wpcf7-form input[type="email"],
.widget-contact .wpcf7-form input[type="tel"],
.widget-contact .wpcf7-form textarea {
	width: 100%;
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-light);
	transition: all .15s;
}
.widget-contact .wpcf7-form input::placeholder,
.widget-contact .wpcf7-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.42);
}
.widget-contact .wpcf7-form input:hover,
.widget-contact .wpcf7-form textarea:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.18);
}
.widget-contact .wpcf7-form input:focus,
.widget-contact .wpcf7-form textarea:focus {
	outline: 0;
	background: rgba(255, 255, 255, 0.10);
	border-color: var(--accent-500);
	box-shadow: 0 0 0 4px rgba(0, 213, 255, 0.18);
}
.widget-contact .wpcf7-form textarea {
	min-height: 72px;
	resize: vertical;
	line-height: 1.5;
}

/* Icon-prefixed fields (cyan SVG strokes on dark) */
.widget-contact .field--icon .wpcf7-form-control-wrap { display: block; position: relative; }
.widget-contact .field--icon .wpcf7-form-control-wrap::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	pointer-events: none;
	z-index: 1;
}
/* Override the base input padding so the icon has clear space.
   Selectors match base specificity (0,3,1) and come later in the file
   so they win the cascade. */
.widget-contact .field--icon input[type="text"],
.widget-contact .field--icon input[type="email"],
.widget-contact .field--icon input[type="tel"],
.widget-contact .field--icon textarea {
	padding: 10px 14px 10px 44px;
}
.widget-contact .field--icon-message .wpcf7-form-control-wrap::before {
	top: 13px;
	transform: none;
}

.widget-contact .field--icon-email .wpcf7-form-control-wrap::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300D5FF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>");
}
.widget-contact .field--icon-phone .wpcf7-form-control-wrap::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300D5FF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
.widget-contact .field--icon-message .wpcf7-form-control-wrap::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300D5FF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-9 8.5 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.2A8.38 8.38 0 0 1 12 3a8.5 8.5 0 0 1 9 8.5z'/></svg>");
}

/* Submit — cyan primary pops on dark navy */
.sb-submit-wrap { padding: 2px 22px 0; margin: 4px 0 0; }
.widget-contact .wpcf7-form input.btn.sb-submit,
.widget-contact .wpcf7-form input.btn.btn-block {
	width: 100%;
	justify-content: center;
	padding: 11px 22px;
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 213, 255, 0.20);
}
.widget-contact .wpcf7-form input.btn.sb-submit:hover {
	box-shadow: 0 8px 24px rgba(0, 213, 255, 0.28);
}

/* Trust line — integrated via top border, no separate background */
.widget-contact-trust {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px 14px;
	margin: 12px 0 0;
	font-size: 0.75rem;
	color: var(--text-light-muted);
	border-top: 1px solid var(--border-dark);
	background: transparent;
	line-height: 1.4;
	position: relative;
	z-index: 1;
}
.widget-contact-trust svg {
	width: 14px;
	height: 14px;
	color: var(--accent-500);
	flex-shrink: 0;
}

/* Response messages on dark */
.widget-contact .wpcf7-response-output {
	margin: 14px 26px 0;
	padding: 11px 14px;
	font-size: 0.82rem;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.15);
	color: var(--text-light);
}
.widget-contact .wpcf7 form.sent .wpcf7-response-output {
	background: rgba(22, 163, 106, 0.15);
	border-color: rgba(22, 163, 106, 0.4);
	color: #5CDDA0;
}
.widget-contact .wpcf7 form.invalid .wpcf7-response-output,
.widget-contact .wpcf7 form.unaccepted .wpcf7-response-output {
	background: rgba(220, 38, 38, 0.14);
	border-color: rgba(220, 38, 38, 0.40);
	color: #FCA5A5;
}
.widget-contact .wpcf7-not-valid {
	border-color: #F87171 !important;
	box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.14) !important;
}
.widget-contact .wpcf7-not-valid-tip { color: #FCA5A5; }

/* Tags at the bottom of an article. */
.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}
.entry-tag {
	display: inline-block;
	padding: 6px 12px;
	background: var(--accent-100);
	color: var(--blue-deep);
	border-radius: var(--radius-pill);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: all .15s;
}
.entry-tag:hover {
	background: var(--accent-500);
	color: var(--primary-900);
}

/* Featured "lead post" — first post on the listing page, full-width 2-col. */
.lead-post {
	max-width: var(--container);
	margin: 0 auto 40px;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: all .25s;
	position: relative;
}
.lead-post:hover {
	border-color: var(--accent-500);
	box-shadow: 0 18px 50px rgba(0,213,255,0.10), 0 4px 12px rgba(15,23,42,0.06);
	transform: translateY(-2px);
}
.lead-post-media {
	overflow: hidden;
	background: linear-gradient(135deg, var(--primary-900), var(--primary-700));
	min-height: 320px;
}
.lead-post-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.lead-post:hover .lead-post-media img { transform: scale(1.025); }
.lead-post-body {
	padding: 40px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.lead-post-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: var(--accent-500);
	color: var(--primary-900);
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.lead-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 0.82rem;
	color: var(--text-500);
	font-weight: 500;
	margin-bottom: 14px;
}
.lead-post-cat {
	color: var(--accent-500);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.74rem;
}
.lead-post-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 800;
	color: var(--text-900);
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 14px;
}
.lead-post:hover .lead-post-title { color: var(--blue-deep); }
.lead-post-excerpt {
	font-size: 1rem;
	color: var(--text-500);
	line-height: 1.6;
	margin: 0 0 22px;
}
.lead-post-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent-500);
	font-weight: 700;
	font-size: 0.95rem;
}
.lead-post-arrow {
	transition: transform .18s;
	display: inline-block;
}
.lead-post:hover .lead-post-arrow { transform: translateX(5px); }
.lead-post--no-thumb { grid-template-columns: 1fr; }
.lead-post--no-thumb .lead-post-body {
	padding: 56px 48px;
	background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
	border-left: 4px solid var(--accent-500);
}
@media (max-width: 900px) {
	.lead-post { grid-template-columns: 1fr; }
	.lead-post-media { min-height: 240px; aspect-ratio: 16 / 9; }
	.lead-post-body { padding: 32px 28px; }
}

/* Post-card grid — used by /blog/ listing and related-posts section. */
.post-grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
/* When the grid follows the lead-post, give it a touch of breathing room. */
.post-grid--secondary { margin-top: 0; }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .post-grid { grid-template-columns: 1fr; } }

.post-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all .2s;
}
.post-card:hover {
	border-color: var(--accent-500);
	transform: translateY(-3px);
	box-shadow: var(--shadow-cyan);
}
.post-card-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, var(--primary-800), var(--primary-700));
}
.post-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.post-card:hover .post-card-media img { transform: scale(1.03); }
.post-card-body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.post-card--no-thumb .post-card-body { padding-top: 24px; }
.post-card--no-thumb {
	background: linear-gradient(135deg, var(--surface) 0%, var(--surface-alt) 100%);
	border-left: 3px solid var(--accent-500);
}
.post-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 0.78rem;
	color: var(--text-500);
	font-weight: 500;
	margin-bottom: 12px;
}
.post-card-cat {
	color: var(--accent-500);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
}
.post-card-sep { color: var(--border-strong); }
.post-card-title {
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px;
	color: var(--text-900);
}
.post-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color .15s;
}
.post-card:hover .post-card-title a { color: var(--blue-deep); }
.post-card-excerpt {
	font-size: 0.92rem;
	color: var(--text-500);
	margin-bottom: 16px;
	line-height: 1.55;
	flex: 1;
}
.post-card-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--accent-500);
	text-decoration: none;
}
.post-card-arrow {
	transition: transform .18s;
	display: inline-block;
}
.post-card:hover .post-card-arrow { transform: translateX(4px); }

/* Pagination. */
.post-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 48px;
}
.post-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--text-700);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all .15s;
	background: var(--surface);
}
.post-pagination .page-numbers:hover {
	border-color: var(--accent-500);
	color: var(--accent-500);
}
.post-pagination .page-numbers.current {
	background: var(--accent-500);
	border-color: var(--accent-500);
	color: var(--primary-900);
}
.post-pagination .page-numbers.dots {
	border: none;
	background: transparent;
}

.entry-share {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}
.entry-share-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--accent-500);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	transition: color .15s;
}
.entry-share-back:hover { color: var(--blue-deep); }
.related-cta { text-align: center; margin-top: 36px; }

.related-section .section-head { margin-bottom: 36px; }
.post-empty-state {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 60px 40px;
}

@media (max-width: 700px) {
	.entry-hero { padding: 60px 20px 50px; }
	.entry-body { padding: 40px 20px; }
	.prose { font-size: 1rem; }
}


/* =========================================================
   HERO MAP v4 — 2-column hero, right panel with detailed Africa map
   Ported from Design/index-v4.html
   ========================================================= */

/* ---------------------------------------------------------------
   HERO MAP v4 — all styles scoped under .hero-map-panel.
   NOTE: a stray global reset used to live here and was removed —
     - an html,body rule forcing background #050d18 (turned every page dark)
     - a duplicate :root that redefined the --gold design token
     - a duplicate universal box-sizing reset
   Every map selector below is now namespaced under .hero-map-panel so
   these styles cannot leak onto the rest of the site.
   --------------------------------------------------------------- */
.hero-map-panel .leogc-wrap {
    background:radial-gradient(120% 120% at 50% 0%, #0a1a30 0%, #050d18 70%);
    padding:28px; min-height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  }
.hero-map-panel .leogc-card {
    width:100%; max-width:1180px; border-radius:20px; overflow:hidden;
    box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(90,150,200,.14);
  }
  .hero-map-panel .infographic{display:block; width:100%; height:auto;}

  /* map */
  .hero-map-panel .world path{ fill:#14304e; stroke:#1d3c5e; stroke-width:.6; }
  .hero-map-panel .africa path{ fill:url(#afFill); stroke:#4a86c1; stroke-width:.9;
    filter:drop-shadow(0 0 2px rgba(74,134,193,.5)); }

  /* connections */
  .hero-map-panel .link{ fill:none; stroke:#5fb3e8; stroke-width:1.5; stroke-linecap:round;
    stroke-dasharray:1.5 8; opacity:.6; }
  .hero-map-panel .dot-link{ fill:#7dd3fc; opacity:.85; }

  /* markets — v4: no dot glow, smaller lighter labels */
  .hero-map-panel .dot-mkt{ fill:#4cc6ff; r:2.5; }
  .hero-map-panel .leader{ stroke:#7fb4d8; stroke-width:.7; opacity:.45; }
  .hero-map-panel .mkt-label{ fill:#e7f2fb; font-size:12px; font-weight:300; letter-spacing:.2px;
    paint-order:stroke; stroke:#08192c; stroke-width:2.2px; stroke-linejoin:round; }
  .hero-map-panel .mkt-label tspan{ paint-order:stroke; }

  /* HQ */
  .hero-map-panel .hq-halo{ fill:#ffc23a; opacity:.14; }
  .hero-map-panel .hq-ring{ fill:none; stroke:#ffc23a; stroke-width:1.6; opacity:.7; }
  .hero-map-panel .dot-hq{ fill:#ffc23a; filter:url(#glowGold); }
  .hero-map-panel .hq-label{ fill:#f4f9ff; font-size:16px; font-weight:600; }
  .hero-map-panel .hq-tag{ fill:#ffc23a; font-size:14px; font-weight:700; letter-spacing:1px; }

  /* region + legend panels */
  .hero-map-panel .region rect,.hero-map-panel .legend rect{ fill:rgba(9,23,41,.72); stroke:rgba(96,158,210,.30); stroke-width:1; }
  .hero-map-panel .icon{ fill:none; stroke:#5cc2f5; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .hero-map-panel .region-title{ fill:#eaf4fd; font-size:16px; font-weight:700; letter-spacing:1.2px; }
  .hero-map-panel .region-sub{ fill:#8fa9c0; font-size:13px; font-weight:500; }
  .hero-map-panel .lg-title{ fill:#eaf4fd; font-size:15px; font-weight:600; }
  .hero-map-panel .lg-sub{ fill:#8299b0; font-size:12.5px; }

  /* stat row */
  .hero-map-panel .rule{ stroke:rgba(96,158,210,.22); stroke-width:1; }
  .hero-map-panel .v-div{ stroke:rgba(96,158,210,.16); stroke-width:1; }
  .hero-map-panel .stat-num{ fill:#f4f9ff; font-size:62px; font-weight:800; letter-spacing:-1px;
    font-variant-numeric:tabular-nums; }
  .hero-map-panel .stat-lab{ fill:#8299b0; font-size:14px; font-weight:600; letter-spacing:1.6px; }

  /* header */
  .hero-map-panel .title{ fill:#f6fbff; font-size:44px; font-weight:800; letter-spacing:-.5px; }
  .hero-map-panel .subtitle{ fill:#8fa9c0; font-size:19px; font-weight:500; letter-spacing:.3px; }
  .hero-map-panel .badge rect{ fill:rgba(76,198,255,.10); stroke:rgba(76,198,255,.55); stroke-width:1.2; }
  .hero-map-panel .badge-dot{ fill:#4cc6ff; filter:url(#glowCyan); }
  .hero-map-panel .badge-text{ fill:#9fe0ff; fill:#a9e3ff; font-size:16px; font-weight:600; letter-spacing:.3px; }

/* Right-panel container overrides */
/* Match the SVG's internal <rect fill="url(#bgGrad)"> exactly so panel and
   map read as one continuous surface. SVG's bgGrad: radial cx=45% cy=42% r=78%,
   stops #123453 → #0a1f38 → #05101e */
.hero-map-panel {
  position: relative;
  background: radial-gradient(circle at 45% 42%, #123453 0%, #0a1f38 55%, #05101e 100%);
  border: 1px solid rgba(96,158,210,0.20);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(90,150,200,0.10);
  overflow: hidden;
  display: block;
}
.hero-map-panel .infographic { display: block; width: 100%; height: auto; position: relative; z-index: 1; }

/* Panel header (title / subtitle / live badge) — HTML above the SVG */
.hero-map-panel .hmp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 6px;
  position: relative;
  z-index: 2;
}
.hero-map-panel .hmp-title-block { min-width: 0; }
.hero-map-panel .hmp-title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 800;
  color: #f6fbff;
  letter-spacing: -0.5px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  line-height: 1.15;
}
.hero-map-panel .hmp-subtitle {
  margin: 0;
  font-size: 13px;
  color: #8fa9c0;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}
.hero-map-panel .hmp-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #a9e3ff;
  background: rgba(76,198,255,0.10);
  border: 1px solid rgba(76,198,255,0.55);
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}
.hero-map-panel .hmp-badge-dot {
  width: 6px; height: 6px;
  background: #4cc6ff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(76,198,255,0.20);
  animation: hmpBadgePulse 2s ease-in-out infinite;
}
@keyframes hmpBadgePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(76,198,255,0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(76,198,255,0); }
}
.hero-map-panel .hmp-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(96,158,210,0.22) 20%, rgba(96,158,210,0.22) 80%, transparent 100%);
  margin: 0 20px 6px;
}
@media (max-width: 640px) {
  .hero-map-panel .hmp-header { padding: 14px 16px 4px; flex-direction: column; }
  .hero-map-panel .hmp-title { font-size: 22px; }
}

/* ========== NATURAL HEIGHT — no forced stretch ========== */
/* Let each column size to its content; visual balance is fine either way. */
.hero-grid { align-items: center; }

/* ========== ANIMATIONS ========== */

/* HQ marker: pulse ring expanding outward */
.hero-map-panel .hq-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: leogcHqPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes leogcHqPulse {
  0%   { r: 10; opacity: 0.9; }
  100% { r: 26; opacity: 0; }
}

/* HQ halo — slower ambient glow */
.hero-map-panel .hq-halo {
  animation: leogcHqGlow 3.5s ease-in-out infinite;
}
@keyframes leogcHqGlow {
  0%, 100% { opacity: 0.14; }
  50%      { opacity: 0.28; }
}

/* Connection lines — dashes flow along the path (data-in-motion feel) */
/* Connection lines: dashes flow visibly along the path from HQ outward */
.hero-map-panel .link {
  stroke: #4cc6ff;
  stroke-dasharray: 3 7;
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0.95;
  animation: leogcDashFlow 4s linear infinite;
}
@keyframes leogcDashFlow {
  to { stroke-dashoffset: -80; }
}

/* Country marker dots — subtle breathing, staggered so they don't sync */
.hero-map-panel .dot-mkt {
  animation: leogcMktBreathe 3.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.hero-map-panel .markets > circle:nth-child(4n+1)   { animation-delay: 0s;   }
.hero-map-panel .markets > circle:nth-child(4n+2)   { animation-delay: 0.9s; }
.hero-map-panel .markets > circle:nth-child(4n+3)   { animation-delay: 1.8s; }
.hero-map-panel .markets > circle:nth-child(4n+4)   { animation-delay: 2.7s; }
@keyframes leogcMktBreathe {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(1.15); }
}

/* Respect reduced-motion — kill all animations */
@media (prefers-reduced-motion: reduce) {
  .hero-map-panel .hq-ring,
  .hero-map-panel .hq-halo,
  .hero-map-panel .link,
  .hero-map-panel .dot-mkt { animation: none; }
}

/* Per-country Africa colors: LEOGC live markets vs other African countries */
.hero-map-panel .africa .country { stroke: #4a86c1; stroke-width: 0.6; transition: fill .3s ease; }
.hero-map-panel .africa .country.leogc {
  fill: url(#afFill);  /* keep original gradient — the "highlighted" fill */
}
.hero-map-panel .africa .country.other {
  fill: #0d2745;       /* darker base — clearly different from LEOGC */
  stroke: #1a3a5e;
  opacity: 0.85;
}

/* Stats band inside hero-map-panel (below the SVG) */
/* 4-stat band inside hero-map-panel (below the SVG) */
.hero-map-panel .hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 18px 8px 6px;
  margin-top: 6px;
  border-top: 1px solid rgba(96,158,210,0.15);
}
.hero-map-panel .hero-stat {
  text-align: center;
  padding: 6px 8px;
  border-right: 1px solid rgba(96,158,210,0.10);
}
.hero-map-panel .hero-stat:last-child { border-right: none; }
.hero-map-panel .hero-stat .hs-icon { width: 22px; height: 22px; color: #4cc6ff; margin: 0 auto 8px; }
.hero-map-panel .hero-stat .hs-icon svg { width: 100%; height: 100%; display: block; }
.hero-map-panel .hero-stat .hs-value { font-size: 30px; font-weight: 800; color: #f4f9ff; letter-spacing: -0.02em; line-height: 1; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.hero-map-panel .hero-stat .hs-value .plus { color: #4cc6ff; font-weight: 800; }
.hero-map-panel .hero-stat .hs-label { font-size: 9px; color: #8299b0; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-top: 6px; }
@media (max-width: 900px) {
  .hero-map-panel .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-map-panel .hero-stat { border-right: none; border-bottom: 1px solid rgba(96,158,210,0.10); padding: 10px; }
  .hero-map-panel .hero-stat:nth-last-child(-n+2) { border-bottom: none; }
  .hero-map-panel .hero-stat .hs-value { font-size: 26px; }
}

/* =========================================================
   HERO MAP v4 — Mobile stack (below 900px, single column)
   ========================================================= */
@media (max-width: 900px) {
  .hero-map-panel { margin-top: 24px; padding: 8px; }
  .hero-map-panel .hmp-header { padding: 12px 14px 4px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-map-panel .hmp-title { font-size: 20px; }
  .hero-map-panel .hmp-subtitle { font-size: 12px; }
  .hero-map-panel .hmp-badge { font-size: 11px; padding: 6px 12px; }
  .hero-map-panel .hmp-divider { margin: 0 12px 4px; }
  .hero-map-panel .hero-stats { padding: 12px 6px 4px; }
  .hero-map-panel .hero-stat { padding: 4px 6px; }
  .hero-map-panel .hero-stat .hs-value { font-size: 22px; }
  .hero-map-panel .hero-stat .hs-label { font-size: 8px; }
  /* Country labels get tiny on mobile — hide the smallest to reduce clutter */
  .hero-map-panel .mkt-label { font-size: 10px; }
}
@media (max-width: 480px) {
  .hero-map-panel .mkt-label { display: none; }
}