/*
Theme Name: SEMoptimize Option 11 Dark (Child)
Theme URI: https://semoptimize.com
Description: SEMoptimize 2026 redesign "Option 11 Dark". Lean Hello Elementor child theme; core pages are PHP templates (no Elementor in the render path). Blog + landing pages use Gutenberg.
Author: SEMoptimize Technology
Template: hello-elementor
Version: 2026.07.14.1
Requires PHP: 8.2
*/


/* ==========================================================================
   SEMoptimize Option 11 Dark — ported CSS (2026-07-13 Elementor/Hello Elementor migration)
   Appended below the required theme header block above.
   ========================================================================== */

/* ==========================================================================
   Option 11 DARK — Stripe SEMO Homepage (dark-theme sibling)
   Re-skin of Option 11 (light) — identical structure/copy, dark palette only.
   Deep indigo-gray dark theme (NOT pure black — see tokens below).
   Vanilla CSS only.
   ========================================================================== */

/* ---------- Tokens (dark palette; extends the light build's --dark-* family) */
:root {
  /* Text tones (lightest→dimmest, all tuned for the dark surfaces below) */
  --ink: #e9e7f0;          /* headings / brightest text (was --dark-text) */
  --slate: #d3d0e0;        /* body text */
  --mist: #b3b0c4;         /* secondary text (was --dark-mist) */
  /* Surfaces (darkest→lightest; deep indigo-gray family, no pure black) */
  --bg: #1d1b28;           /* page background */
  --bg-soft: #232130;      /* alt-section background (= --dark-1) */
  --border: #403b56;       /* hairline */
  --border-strong: #4d4768;/* stronger border / muted fill */
  /* Brand saturated colors — kept for BUTTON FILLS / decorative gradients only
     (paired with white text, so contrast is unaffected by page theme). Never
     used as direct text-on-dark color — see the tint set below for that. */
  --accent: #2E76AA;       /* brightened vs light-theme #1E6295 for 3:1 UI-boundary contrast on dark bg */
  --accent-hover: #1E6295; /* hover/press state DARKENS (matches light-theme convention) — this is
     the original brand blue; verified white-text contrast 6.49:1, well clear of the 3.68:1 a
     lightened hover state gave when first drafted (that direction was backwards and got corrected) */
  --green: #4A9B82;
  --aqua-1: #3494BA;
  --aqua-2: #58B6C0;
  /* Accessible accent TINTS for text/links/icons directly on dark backgrounds
     (do not reuse --accent/--green/--aqua-1 as text color on dark — fails
     contrast; these lighter tints are vetted for dark bg, matching the set
     already used in Round 2/C1V2 - Helix Lab - Burst/styles.css) */
  --blue-t: #6FAEDD;
  --green-t: #7CC4AB;
  --aqua-t: #7FD3DE;
  --danger-t: #FF8A80;     /* accessible error/danger red for dark bg */
  /* Official logo gradient stops — unchanged; reads fine on dark per brief */
  --grad-1: #054A6A;
  --grad-2: #176070;
  --grad-3: #35817E;
  --grad-4: #65AE8E;
  --logo-grad: linear-gradient(100deg, var(--grad-1), var(--grad-2) 34%, var(--grad-3) 66%, var(--grad-4));
  /* Dark surface family (kept for compatibility with any component that
     references these names directly; --dark-3/--dark-border are new) */
  --dark-1: #232130;
  --dark-2: #2b2938;
  --dark-3: #332f45;       /* card / elevated-surface tone */
  --dark-3-hover: #3d3850; /* lightened one step further, for hover/open states */
  --dark-border: #403b56;
  --dark-border-strong: #4d4768;
  --dark-text: #e9e7f0;
  --dark-mist: #b3b0c4;
  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 200ms;
  --t-med: 500ms;
  --t-slow: 1200ms;
  /* Layout */
  --radius: 20px;
  --wrap: 1160px;
  --nav-h: 76px;
  --shadow-card: 0 2px 5px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);
  --shadow-mega: 0 6px 12px rgba(0, 0, 0, .4), 0 24px 60px rgba(0, 0, 0, .55);
}

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h1 { font-weight: 800; letter-spacing: -0.035em; font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.15rem); max-width: 640px; text-wrap: balance; }
h2 { font-weight: 800; letter-spacing: -0.025em; font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem); text-wrap: balance; }
h3 { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--blue-t); text-decoration: none; }
a:hover { color: var(--aqua-t); }
img, svg { display: block; max-width: 100%; height: auto; }
ul { padding: 0; margin: 0; list-style: none; }
strong { color: var(--ink); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 820px; }
.section { padding: clamp(64px, 6vw + 32px, 112px) 0; }
.kicker {
  font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-t); margin-bottom: 12px;
}
.kicker-light { color: var(--aqua-t); }
.section-lead { max-width: 640px; font-size: 1.08rem; color: var(--mist); margin-bottom: 40px; }
.section-lead-light { color: var(--dark-mist); }

/* Focus + skip link (WCAG AA) */
:focus-visible { outline: 3px solid var(--aqua-t); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--grad-1); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Buttons (44px+ targets) --------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 44px; padding: 10px 22px; border-radius: 999px;
  font-weight: 600; font-size: .98rem; line-height: 1.2;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn .arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); }
.btn-ghost { color: var(--ink); border: 1px solid transparent; }
.btn-ghost:hover { color: var(--blue-t); }
.btn-outline { color: var(--blue-t); border: 1.5px solid var(--dark-border-strong); background: rgba(255,255,255,.05); }
.btn-outline:hover { border-color: var(--blue-t); background: rgba(255,255,255,.08); }
.btn-lg { padding: 13px 28px; font-size: 1.05rem; }
.btn-pill { background: #fff; color: #1d1b28; padding: 13px 28px; font-size: 1.05rem; }
.btn-pill:hover { background: #eef6f3; color: #1d1b28; }
.btn-ghost-light { color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn-ghost-light:hover { color: #fff; border-color: #fff; }

.text-link { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.text-link .arrow { transition: transform var(--t-fast) var(--ease); }
.text-link:hover .arrow { transform: translateX(3px); }
.text-link-light { color: var(--aqua-t); }
.text-link-light:hover { color: var(--green-t); }

/* ---------- Sticky dark nav + mega-dropdowns ------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(29, 27, 40, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: 12px;
}
.nav-logo { display: inline-flex; align-items: center; padding: 6px 0; }
.nav-logo img { width: 275px; height: auto; }
.nav-menu { display: flex; align-items: center; flex: 1; gap: 12px; }
.nav-list { display: flex; align-items: center; gap: 4px; margin-left: 16px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .98rem; color: var(--ink); border-radius: 8px;
  transition: color var(--t-fast) var(--ease);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--blue-t); }
.nav-link .chev { transition: transform var(--t-fast) var(--ease); }
.has-mega { position: relative; }
.mega {
  position: absolute; top: calc(100% + 6px); left: -16px;
  min-width: 560px; padding: 14px;
  background: var(--dark-2); border: 1px solid var(--dark-border-strong); border-radius: 14px;
  box-shadow: var(--shadow-mega);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.mega-narrow { min-width: 340px; }
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.is-open .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.has-mega:hover .chev, .has-mega:focus-within .chev, .has-mega.is-open .chev { transform: rotate(180deg); }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-narrow .mega-grid { grid-template-columns: 1fr; }
.mega-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border-radius: 10px; min-height: 44px;
  transition: background var(--t-fast) var(--ease);
}
.mega-card:hover { background: var(--dark-3); }
.mega-card strong { display: block; color: var(--ink); font-size: .95rem; }
.mega-card small { color: var(--mist); font-size: .84rem; line-height: 1.4; display: block; }
.mega-ico { flex: 0 0 auto; margin-top: 2px; }
.nav-ctas { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-burger { display: none; }

/* ---------- HERO + gradient ribbon (Option B) ------------------------------ */
.hero { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 130px) 0 clamp(72px, 8vw, 120px); }
.hero-bg-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .4; pointer-events: none;
}
.hero-ribbon {
  position: absolute; inset: 0; left: 33%; z-index: 1; pointer-events: none;
  /* feathered, silk-like edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
}
.ribbon-clip {
  position: absolute; inset: -22% -14% -30% -6%;
  transform: skewY(-8deg) rotate(-4deg);
  overflow: hidden; border-radius: 48px;
  background: linear-gradient(115deg, rgba(5, 74, 106, .28), rgba(53, 129, 126, .30) 55%, rgba(101, 174, 142, .32));
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; }
.blob-1 { width: 46vw; height: 42vw; min-width: 420px; min-height: 380px; left: -8%; top: -14%;
  background: radial-gradient(circle at 35% 35%, var(--grad-1), transparent 68%);
  animation: drift1 18s var(--ease) infinite alternate; }
.blob-2 { width: 40vw; height: 38vw; min-width: 380px; min-height: 340px; right: -6%; top: 4%;
  background: radial-gradient(circle at 60% 40%, var(--grad-4), transparent 66%);
  animation: drift2 14s var(--ease) infinite alternate; }
.blob-3 { width: 34vw; height: 34vw; min-width: 320px; min-height: 300px; left: 26%; bottom: -18%;
  background: radial-gradient(circle at 50% 60%, var(--grad-3), transparent 66%);
  animation: drift3 22s var(--ease) infinite alternate; }
.blob-4 { width: 26vw; height: 26vw; min-width: 260px; min-height: 240px; right: 18%; bottom: -6%;
  background: radial-gradient(circle at 50% 50%, var(--aqua-2), transparent 64%);
  animation: drift1 11s var(--ease) infinite alternate-reverse; }
.ribbon-silk {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 90px, rgba(255,255,255,.05) 120px 150px, rgba(255,255,255,0) 190px 260px);
  animation: silk 26s linear infinite;
}
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(9%, 12%) scale(1.14); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-11%, 9%) scale(.92); } }
@keyframes drift3 { from { transform: translate(0, 0) scale(.95); } to { transform: translate(12%, -10%) scale(1.12); } }
@keyframes silk { from { transform: translateX(0); } to { transform: translateX(-260px); } }

.hero-inner { position: relative; z-index: 2; }
.hero-ticker {
  display: inline-flex; align-items: baseline; gap: 2px; flex-wrap: wrap;
  font-size: .95rem; font-weight: 600; color: var(--mist);
  background: rgba(43, 41, 56, .78); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 18px; margin-bottom: 26px;
  backdrop-filter: blur(4px);
}
.ticker-num { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--aqua-t); margin-right: 1px; }
.ticker-plus { font-weight: 800; color: var(--aqua-t); margin-right: 8px; }
.hero-sub { max-width: 560px; font-size: 1.15rem; color: var(--slate); margin: 20px 0 32px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Logo marquee ---------------------------------------------------- */
.marquee-band { padding: 34px 0 44px; border-top: 1px solid var(--border); }
.marquee-kicker { text-align: center; font-size: .88rem; color: var(--mist); margin-bottom: 22px; padding: 0 24px; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: inline-flex; align-items: center; gap: clamp(40px, 6vw, 84px);
  padding-right: clamp(40px, 6vw, 84px);
  white-space: nowrap; will-change: transform;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-logo {
  font-weight: 700; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); letter-spacing: .02em;
  color: var(--mist); /* light-gray wordmark, tuned for dark bg contrast */
  text-transform: uppercase;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Bento grid ------------------------------------------------------ */
.bento-section { background: var(--bg-soft); }
.bento {
  display: grid; gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(190px, auto);
}
.card {
  background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.card:hover {
  transform: translateY(-3px); border-color: var(--border-strong);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .4), 0 20px 44px rgba(0, 0, 0, .5);
}
.card p { color: var(--mist); font-size: .96rem; }
.card-ico { margin-bottom: 10px; }
.card-calc { grid-column: span 2; grid-row: span 2; }
.card-coverage { grid-column: span 2; }
.card-helix { grid-column: span 1; grid-row: span 2; align-items: center; text-align: center; }
.card-def { grid-column: span 2; background: linear-gradient(135deg, rgba(124,196,171,.14), rgba(111,174,221,.10)), var(--dark-3); }
.card-wide { grid-column: span 2; }

/* Calculator */
.calc { margin-top: auto; }
.calc-label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.calc-label output { font-variant-numeric: tabular-nums; color: var(--blue-t); font-weight: 800; }
input[type="range"] {
  width: 100%; height: 44px; margin: 0 0 18px; appearance: none; -webkit-appearance: none;
  background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--grad-1), var(--grad-4));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
input[type="range"]::-moz-range-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--grad-1), var(--grad-4));
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.meter { height: 14px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 14px; }
.meter-fill {
  height: 100%; border-radius: 999px;
  background: var(--logo-grad);
  transition: width var(--t-med) var(--ease);
}
.calc-result { font-size: 1.05rem; color: var(--ink); margin-bottom: 6px; }
.calc-result strong { font-variant-numeric: tabular-nums; font-size: 1.25rem; color: var(--aqua-t); }
.calc-result .per { color: var(--mist); font-size: .9rem; }
.calc-note { font-size: .82rem; color: var(--mist); margin: 0; }

/* Coverage widget */
.cov-toggle { display: inline-flex; gap: 6px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin: 6px 0 18px; }
.cov-btn {
  border: 0; background: none; font: inherit; font-weight: 600; font-size: .9rem;
  color: var(--mist); padding: 9px 16px; min-height: 44px; border-radius: 999px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cov-btn.is-active { background: var(--accent); color: #fff; }
.cov-bar-row { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
.cov-bar-label { font-size: .85rem; color: var(--mist); }
.cov-bar { height: 12px; border-radius: 999px; background: var(--border); overflow: hidden; }
.cov-fill { height: 100%; border-radius: 999px; transition: width var(--t-med) var(--ease), background var(--t-med) var(--ease); }
.cov-fill-a { background: linear-gradient(90deg, var(--grad-2), var(--grad-4)); }
.cov-fill-b { background: var(--border-strong); }
.cov-val { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink); font-size: .95rem; }
.cov-note { font-size: .85rem; color: var(--mist); margin: 4px 0 0; }

/* 3D helix token (pure CSS 3D, JS drag) */
.card-helix h3 { background: var(--logo-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.helix-hint { font-size: .8rem; color: var(--mist); margin: 0 0 8px; }
.helix-stage {
  width: 100%; min-height: 240px; flex: 1;
  display: flex; align-items: center; justify-content: center;
  perspective: 720px; touch-action: pan-y; cursor: grab; user-select: none;
}
.helix-stage:active { cursor: grabbing; }
.helix3d {
  position: relative; width: 150px; height: 216px;
  transform-style: preserve-3d;
  animation: helixSpin 14s linear infinite;
}
.helix-stage.is-js .helix3d { animation: none; }
.rung {
  position: absolute; left: 0; right: 0; top: calc(var(--i) * 18px);
  height: 10px; display: flex; align-items: center;
  transform: rotateY(calc(var(--i) * 30deg));
  transform-style: preserve-3d;
}
.rung .bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--aqua-1), var(--aqua-2));
  opacity: .85;
}
.rung .n { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; }
.rung .n-b { background: radial-gradient(circle at 35% 35%, #2f7fb5, var(--grad-1)); box-shadow: 0 0 10px rgba(30, 98, 149, .55); }
.rung .n-g { background: radial-gradient(circle at 35% 35%, #7cc3a4, var(--grad-3)); box-shadow: 0 0 10px rgba(74, 155, 130, .55); }
@keyframes helixSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.helix-caption { font-size: .88rem; color: var(--mist); margin: 10px 0 0; }

/* ---------- Stats band ------------------------------------------------------ */
.stats-section { padding-bottom: 0; overflow: hidden; }
.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 48px 0 0;
}
.stat { padding: 8px 28px 8px 0; border-left: 1px solid var(--border); padding-left: 28px; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat dd {
  margin: 0; order: -1;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--logo-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat { display: flex; flex-direction: column; }
.stat dt { font-size: .9rem; color: var(--mist); margin-top: 6px; }

/* ---------- Customer-story accordion ---------------------------------------- */
.stories-section { background: var(--bg-soft); }
.accordion { border: 1px solid var(--border); border-radius: var(--radius); background: var(--dark-2); overflow: hidden; box-shadow: var(--shadow-card); }
.acc-item { border-top: 1px solid var(--border); }
.acc-item:first-child { border-top: 0; }
.acc-heading { margin: 0; }
.acc-btn {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 22px 28px; min-height: 44px; border: 0; background: none; cursor: pointer; font: inherit;
  transition: background var(--t-fast) var(--ease);
}
.acc-btn:hover { background: var(--dark-3); }
.acc-vertical { font-weight: 700; color: var(--ink); font-size: 1.05rem; flex: 0 0 auto; }
.acc-teaser { color: var(--mist); font-size: .95rem; flex: 1; }
.acc-chev { flex: 0 0 auto; color: var(--mist); transition: transform var(--t-fast) var(--ease); }
.acc-item.is-open .acc-chev { transform: rotate(180deg); }
.acc-item.is-open .acc-btn { background: var(--dark-3); }
.acc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease);
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-body { overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; padding: 0 28px; }
.acc-item.is-open .acc-body { padding-bottom: 30px; }
.kpis { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 16px; }
.kpis li { font-size: .95rem; color: var(--mist); }
.kpis strong { display: block; font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--green-t); letter-spacing: -0.02em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chips li {
  font-size: .8rem; font-weight: 600; color: var(--aqua-t);
  background: rgba(53, 129, 126, .18); border: 1px solid rgba(127, 211, 222, .3);
  border-radius: 999px; padding: 5px 12px;
}
.acc-visual { display: flex; align-items: center; justify-content: center; padding-top: 6px; }
/* Angled frame echoing the badge geometry of the new logo */
.angle-frame {
  position: relative; width: min(260px, 100%); padding: 18px;
  background: linear-gradient(135deg, rgba(124,196,171,.14), rgba(111,174,221,.10)), var(--dark-3);
  border: 1px solid var(--border);
  transform: skewX(-6deg) rotate(-1.5deg);
  border-radius: 14px; box-shadow: var(--shadow-card);
}
.angle-frame > svg { transform: skewX(6deg) rotate(1.5deg); }
.frame-tag {
  position: absolute; bottom: -12px; right: 12px;
  transform: skewX(6deg) rotate(1.5deg);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: var(--logo-grad); padding: 4px 12px; border-radius: 999px;
}

/* ---------- Three-path chooser (raised dark band, denser) -------------------- */
.paths-section { background: linear-gradient(160deg, var(--dark-2), var(--dark-3)); }
.paths-section h2, .paths-section h3 { color: var(--dark-text); }
.paths-section p { color: var(--dark-mist); }
.mini-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 0 0 44px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12);
}
.mini-stats div { display: flex; flex-direction: column; }
.mini-stats dd {
  margin: 0; order: -1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  font-size: clamp(1.1rem, .9rem + 1vw, 1.5rem); color: var(--green-t);
}
.mini-stats dt { font-size: .85rem; color: var(--dark-mist); margin-top: 4px; }
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.path-card {
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  padding: 28px; background: rgba(255,255,255,.03);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  display: flex; flex-direction: column;
}
.path-card:hover { border-color: rgba(101, 174, 142, .5); background: rgba(255,255,255,.06); }
.path-card p { font-size: .95rem; flex: 1; }
.path-ico { margin-bottom: 14px; }

/* ---------- FAQ --------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--border); }
.faq details:first-child { border-top: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 4px; position: relative; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  width: 10px; height: 10px; border-right: 2px solid var(--mist); border-bottom: 2px solid var(--mist);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--t-fast) var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq summary h3 { display: inline; font-size: 1.08rem; }
.faq details p { padding: 0 4px 22px; max-width: 700px; color: var(--slate); }

/* ---------- Final CTA band (brand gradient field) ------------------------------ */
.cta-band {
  position: relative; overflow: hidden; text-align: left;
  /* Contrast-safety scrim layered UNDER the brand gradient stops: recomputed
     from scratch for this dark variant (not assumed from the light build) —
     the lightest stop (grad-4 #65AE8E) alone still gives ~2.6:1 for white
     text regardless of surrounding page theme (same two colors, same math),
     which fails WCAG AA. Same directional dark wash under the text column,
     fading out by ~75% toward the decorative icon — verified white text
     contrast after the wash is 6.3:1+ across the text zone. */
  background: linear-gradient(100deg, rgba(5, 12, 12, .4) 0%, rgba(5, 12, 12, .22) 42%, rgba(5, 12, 12, 0) 75%),
              linear-gradient(115deg, var(--grad-1), var(--grad-2) 32%, var(--grad-3) 64%, var(--grad-4));
  padding: clamp(72px, 8vw, 120px) 0;
}
.cta-helix {
  position: absolute; right: 0; top: 0; bottom: 0; width: clamp(280px, 34vw, 480px);
  opacity: .22; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.cta-helix img { height: 100%; width: auto; max-width: 100%; }
.cta-inner { position: relative; }
.cta-kicker { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 12px; }
.cta-band h2 { color: #fff; max-width: 620px; }
.cta-sub { color: rgba(255,255,255,.85); max-width: 520px; font-size: 1.1rem; margin-bottom: 30px; }

/* ---------- Footer -------------------------------------------------------------- */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding: 56px 0 28px; }
.footer-grid {
  display: grid; gap: 36px;
  grid-template-columns: 1.3fr repeat(4, 1fr) 1.2fr;
}
.footer-brand img { width: 216px; }
.footer-col h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); margin-bottom: 14px; }
.footer-col ul li { margin-bottom: 2px; }
.footer-col a { color: var(--mist); font-size: .92rem; display: inline-block; padding: 8px 0; }
.footer-col a:hover { color: var(--blue-t); }
address { font-style: normal; color: var(--mist); font-size: .92rem; line-height: 1.7; }
address strong { color: var(--ink); }
.footer-tagline { margin-top: 14px; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--aqua-t); font-weight: 600; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: .84rem; color: var(--mist);
}
.footer-bottom p { margin: 0; }

/* ---------- Responsive ------------------------------------------------------------ */
@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .card-calc, .card-coverage, .card-def, .card-wide { grid-column: span 2; }
  .card-helix { grid-column: span 2; grid-row: span 1; }
  .helix-stage { min-height: 260px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .stats-band { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .acc-body { grid-template-columns: 1fr; }
  .acc-visual { justify-content: flex-start; padding: 4px 0 12px; }
}

@media (max-width: 860px) {
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: auto; padding: 10px;
    background: none; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  }
  .nav-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--dark-2); border-bottom: 1px solid var(--border);
    padding: 12px 20px 20px; max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    box-shadow: var(--shadow-mega);
  }
  .nav-menu.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; margin-left: 0; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--border); }
  .nav-link { width: 100%; justify-content: space-between; padding: 14px 4px; }
  .mega {
    position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 12px;
    opacity: 1; visibility: visible; transform: none; display: none;
    background: transparent;
  }
  .has-mega.is-open .mega { display: block; }
  .has-mega:hover .mega { display: none; }
  .has-mega.is-open:hover .mega, .has-mega.is-open:focus-within .mega { display: block; }
  .mega-grid { grid-template-columns: 1fr; }
  .nav-ctas { margin: 16px 0 0; flex-direction: column; align-items: stretch; }
  .nav-ctas .btn { width: 100%; }
  .hero-ribbon { left: 12%; opacity: .55; }
}

@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .stats-band { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; }
  .mini-stats { grid-template-columns: 1fr; gap: 16px; }
  .paths { grid-template-columns: 1fr; }
  .acc-btn { flex-wrap: wrap; gap: 6px 12px; padding: 18px 20px; }
  .acc-body { padding: 0 20px; }
  .acc-teaser { flex-basis: 100%; order: 3; }
  .acc-chev { margin-left: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; }
  .hero-ctas .btn { width: 100%; }
  .cta-helix { width: 42vw; opacity: .16; }
}

/* ==========================================================================
   Interior-page extensions (paid-search / seo / case-studies / about / contact)
   Extends the tokens/components above — no new design system.
   ========================================================================== */

/* ---------- Page hero (lighter-toned band than homepage ribbon hero) --------- */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-soft), var(--bg) 78%);
}
/* Subtle homepage-echoing accent: a soft brand-gradient wash in the corner,
   static (no motion cost), ties interior pages back to the ribbon-hero
   signature on index.html without repeating its animated blobs. */
.page-hero::before {
  content: ""; position: absolute; top: -30%; right: -10%; z-index: 0;
  width: min(52vw, 620px); height: min(52vw, 620px); border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(101, 174, 142, .22), rgba(23, 96, 112, .16) 55%, transparent 72%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 760px; }
.page-hero .hero-sub { max-width: 660px; }
.meta-line { font-size: .85rem; color: var(--mist); margin: -6px 0 22px; }
.meta-line b { color: var(--ink); font-weight: 600; }

/* ---------- Breadcrumbs (SEO: internal linking + wayfinding) ------------------ */
.breadcrumbs { padding: 14px 0 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85rem; color: var(--mist); list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--border-strong); }
.breadcrumbs a { color: var(--mist); min-height: 28px; display: inline-flex; align-items: center; }
.breadcrumbs a:hover { color: var(--blue-t); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Answer-first / GEO definition callouts ---------------------------- */
.definition {
  background: linear-gradient(135deg, rgba(124,196,171,.14), rgba(111,174,221,.10)), var(--dark-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 32px; margin: 28px 0;
}
.definition p { margin: 0; color: var(--slate); font-size: 1.08rem; }
.definition p + p { margin-top: 14px; }
.definition strong { color: var(--ink); }

/* ---------- Data tables (comparison / results-at-a-glance) --------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 620px; }
.data-table caption { text-align: left; padding: 14px 18px; color: var(--mist); font-size: .85rem; border-bottom: 1px solid var(--border); }
.data-table th, .data-table td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table thead th { background: var(--bg-soft); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mist); position: sticky; top: 0; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td.num { color: var(--aqua-t); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table th.col-q, .data-table td.col-q { color: var(--aqua-t); font-weight: 600; }

/* ---------- Scale / delta bars (flagship before-after, evidence deltas) -------- */
.scale-pair { margin-bottom: 24px; }
.scale-pair:last-child { margin-bottom: 0; }
.scale-pair h4 { margin: 0 0 10px; font-size: .95rem; color: var(--ink); }
.bar-row { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; margin-bottom: 8px; }
.bar-label { font-size: .82rem; color: var(--mist); }
.bar-track { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--border-strong); transition: width var(--t-med) var(--ease); }
.bar-fill.up { background: var(--logo-grad); }
.bar-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); font-size: .88rem; white-space: nowrap; display: inline-flex; align-items: center; }
.bar-val.up { color: var(--green-t); }
.bar-val.down { color: var(--blue-t); }
.tri { display: inline-block; margin-right: 4px; flex: 0 0 auto; }

/* ---------- Result cards (case studies grid) reuse .card + .chips -------------- */
/* Dark card treatment — accent-tint top border (not the saturated --aqua-1
   used on the light build) + dark-3 card surface, per Justin's "no black
   surfaces" standing note. */
.result-card {
  /* solid accent, not border-image: border-image ignores border-radius and
     would square off .card's rounded corners */
  border-top: 3px solid var(--aqua-t);
  background: linear-gradient(180deg, var(--dark-2), var(--dark-3) 45%);
}
.result-card .kicker { display: flex; align-items: center; gap: 4px; }
.kicker .dash { color: var(--aqua-t); font-weight: 400; letter-spacing: 0; }
.result-card .kicker .dash { color: var(--aqua-t); font-weight: 400; }
.result-card .verdict { color: var(--mist); margin-bottom: 14px; }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }

/* ---------- Team / founders (about) -------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.team-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; background: var(--dark-3); box-shadow: var(--shadow-card); }
.team-card h3 { margin-bottom: 4px; }
.team-role { color: var(--mist); font-size: .88rem; margin: 0 0 12px; display: block; font-weight: 600; }
.value-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin: 24px 0 0; }
.value-list li { padding-left: 26px; position: relative; color: var(--slate); }
.value-list li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--logo-grad);
}

/* ---------- Contact form -------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.form-card { background: var(--dark-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-card); }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; border: 1.5px solid var(--border-strong); border-radius: 10px; padding: 12px 14px;
  font: inherit; font-size: 1rem; min-height: 44px; background: var(--dark-2); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--mist); opacity: 1; }
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--blue-t); outline: none; box-shadow: 0 0 0 3px rgba(111, 174, 221, .25); }
.field-hint { font-size: .82rem; color: var(--mist); margin-top: 6px; }
.field-error { color: var(--danger-t); font-size: .84rem; margin-top: 6px; display: none; }
.field.has-error input, .field.has-error textarea { border-color: var(--danger-t); }
.field.has-error .field-error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Honeypot: visually hidden via clip, NOT display:none, so bots that check visibility still fill it */
.hp-field {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.form-status { margin-top: 16px; padding: 12px 16px; border-radius: 10px; font-size: .9rem; display: none; }
.form-status.is-success { display: block; background: rgba(74, 155, 130, .18); color: var(--green-t); border: 1px solid rgba(124, 196, 171, .4); }
.form-status.is-error { display: block; background: rgba(255, 138, 128, .12); color: var(--danger-t); border: 1px solid rgba(255, 138, 128, .35); }
.trust-strip { display: flex; flex-wrap: wrap; gap: 28px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--border); }
.trust-item { display: flex; flex-direction: column; gap: 2px; }
.trust-item strong { font-size: 1.3rem; color: var(--green-t); font-variant-numeric: tabular-nums; }
.trust-item span { font-size: .82rem; color: var(--mist); }

/* ---------- Utility ------------------------------------------------------------- */
.alt-bg { background: var(--bg-soft); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Interior-page responsive -------------------------------------------- */
@media (max-width: 1020px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .results-grid, .team-grid, .value-list { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 56px 1fr auto; }
}

/* ---------- Reduced motion: freeze ribbon, marquee, burst, helix, count-up ------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .blob, .ribbon-silk, .marquee-track, .helix3d { animation: none !important; }
  .hero-bg-video { display: none; }
  .helix3d { transform: rotateY(24deg); }
  .marquee-track { transform: none; }
}

/* ---- Mobile QA fix (2026-07-13): collapse the reused .bento card grid to a
   single column on phones/small tablets. Interior pages (case-studies,
   paid-search) reuse .bento for plain result cards that otherwise sit multi-up
   and overflow narrow viewports. Home bento is unaffected (its cards span 2). */
@media (max-width: 768px) {
  .bento { grid-template-columns: 1fr !important; }
  .card-calc, .card-coverage, .card-def, .card-wide, .card-helix { grid-column: auto !important; grid-row: auto !important; }
}

/* ==== Full-bleed + hero-top fixes (2026-07-13 QA round 2) ==== */
.site-header, .site-footer { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.elementor-section > .elementor-container { max-width: 100% !important; width: 100% !important; }
.site-header { transition: background var(--t-fast) var(--ease), backdrop-filter var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.home .site-header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.home .site-header.is-scrolled { background: rgba(29,27,40,.88); backdrop-filter: blur(12px); border-bottom-color: var(--border); }
.home .elementor > .elementor-section:first-child { margin-top: calc(-1 * var(--nav-h)); }
.home .hero { padding-top: clamp(104px, 11vw, 160px); }

/* Header height/logo normalization (2026-07-13 QA r2): Hello Elementor forces
   .site-header to display:flex with padding, and the nav logo SVG has a tall
   canvas (internal whitespace) that inflated the bar to ~162px. Constrain to the
   intended ~76px nav so the homepage hero video reaches the top. */
.site-header { display: block !important; padding: 0 !important; }
.nav-logo img { height: 48px !important; width: auto !important; }

/* ==== QA round 3 (2026-07-13): bigger nav logo (doubled) + CTA helix fills the band top-to-bottom ==== */
:root { --nav-h: 110px; }
.nav-logo img { height: 96px !important; width: auto !important; }
.cta-helix { align-items: center; overflow: hidden; }
.cta-helix img { height: 112%; width: auto; max-width: none; object-fit: contain; }

/* ==== QA round 4 (2026-07-13): nav selected/hover color -> brand blue (Get-a-Free-Audit button color); override Hello reset.css button pink (#CC3366) ==== */
.nav-link, .nav-link:link, .nav-link:visited { color: var(--ink) !important; }
.nav-link:hover, .nav-link:focus, .nav-link:active, .nav-link[aria-expanded="true"], .has-mega.is-open > .nav-link { color: var(--accent) !important; }

/* ==== QA round 5 (2026-07-13): neutralize Hello reset button pink (#CC3366) + client-logo chip marquee ==== */
button { color: inherit; }
.nav-link { color: var(--ink); }
.marquee-track .mq-logo-img { height: 58px; width: auto; max-width: 190px; object-fit: contain; flex: 0 0 auto; background: #fff; border-radius: 10px; padding: 12px 22px; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform var(--t-fast) var(--ease); }
.marquee:hover .mq-logo-img { transform: translateY(-2px); }
.marquee-track { animation-duration: 55s; gap: 28px; }

/* ==== QA round 6 (2026-07-13): remove Hello reset.css pink BACKGROUND (#CC3366) on button hover/focus for nav & toggle buttons ==== */
.nav-link:hover, .nav-link:focus, .nav-link:active, .nav-link[aria-expanded="true"] { background: transparent !important; }
.cov-btn:hover, .cov-btn:focus, .nav-burger:hover, .nav-burger:focus { background: transparent; }