/* ═══════════════════════════════════════════════════════════════════
   SEOX Dark Theme — Variable Overrides + Hardcoded Color Fixes
   Applied via html[data-theme="dark"]
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. CSS Variable Overrides ─────────────────────────────────── */
html[data-theme="dark"] {
  --white:       #0e0d12;
  --black:       #f0f0f5;
  --gray-950:    #0a0a0e;
  --gray-900:    #f0f0f5;
  --gray-700:    #d4d3de;
  --gray-500:    #9594a3;
  --gray-400:    #6b6a78;
  --gray-300:    #3d3c47;
  --gray-200:    #2e2d36;
  --gray-100:    #24232b;
  --gray-50:     #1a1920;

  --pink:        #e04da0;
  --pink-mid:    #e95ab0;
  --pink-light:  #d06aaf;
  --pink-pale:   rgba(212, 35, 138, 0.15);
  --pink-dark:   #c73d8c;

  color-scheme: dark;
}

/* ─── 2. Body & Base ────────────────────────────────────────────── */
html[data-theme="dark"] body {
  background: #0e0d12;
  color: #e0dfe6;
}

/* ─── 3. Navigation — Glassmorphism Dark ────────────────────────── */
/* Higher specificity needed: nav-glass.css loads AFTER this file
   and uses "html .nav .nav-inner" (0,2,1). We use
   "html[data-theme="dark"] .nav .nav-inner" (0,3,1) to win. */
html[data-theme="dark"] .nav .nav-inner,
html[data-theme="dark"] .nav .nav-inner.container {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .nav.scrolled .nav-inner {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] .nav .nav-inner::after {
  background: radial-gradient(ellipse, rgba(212, 35, 138, 0.4) 0%, rgba(212, 35, 138, 0.1) 40%, transparent 70%);
}
html[data-theme="dark"] .nav .nav-inner::before {
  background: radial-gradient(ellipse, rgba(212, 35, 138, 0.12) 0%, transparent 70%);
}
/* Divider between logo and links */
html[data-theme="dark"] .nav-divider {
  background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .nav-link {
  color: rgba(255, 255, 255, 0.72);
}
html[data-theme="dark"] .nav-link:hover {
  color: rgba(255, 255, 255, 0.98);
  background: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Logo swap — CSS filter */
html[data-theme="dark"] .nav-logo-full {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
html[data-theme="dark"] .nav-logo:hover .nav-logo-full {
  opacity: 1;
}

/* Nav toggle bars */
html[data-theme="dark"] .nav-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ─── 4. Mobile Menu — Always dark, no overrides needed ─────────── */

/* Nav toggle bars — light on dark */
html[data-theme="dark"] .nav-toggle-bar,
html[data-theme="dark"] .nav-toggle-bar::before,
html[data-theme="dark"] .nav-toggle-bar::after {
  background: rgba(255, 255, 255, 0.85);
}

/* ─── 5. Mega Menu — Glassmorphism ───────────────────────────────── */
html[data-theme="dark"] .mega-menu {
  background: rgba(18, 8, 53, 0.92);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ─── 6. Buttons ────────────────────────────────────────────────── */
html[data-theme="dark"] .btn-ghost {
  color: #e0dfe6;
  border-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

/* ─── 7. Sphere Tags (floating around hero sphere) ──────────────── */
html[data-theme="dark"] .sphere-tag {
  background: rgba(22, 21, 28, 0.92);
  border-color: rgba(212, 35, 138, 0.2);
  color: #e0dfe6;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ─── 8. Analyse Modal stays LIGHT in dark mode ──────────────────── */
/* HubSpot form iframe is always light-styled (cross-origin, can't inject CSS).
   Keep the modal surface light so labels/inputs remain readable.
   Only the backdrop overlay darkens to harmonize with the dark page. */
html[data-theme="dark"] .analyse-modal-content {
  background: #ffffff !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}
html[data-theme="dark"] .analyse-modal-close {
  color: #999 !important;
}
html[data-theme="dark"] .analyse-modal-close:hover {
  background: #f5f5f5 !important;
  color: #333 !important;
}
html[data-theme="dark"] .analyse-modal-title {
  color: #1a1a2e !important;
}
html[data-theme="dark"] .analyse-modal-desc {
  color: #666 !important;
}
html[data-theme="dark"] .analyse-modal-badge {
  background: rgba(212, 35, 138, 0.1) !important;
  color: #d4238a !important;
}

/* Generic white bg elements in hero visual / bento */
html[data-theme="dark"] .bv-serp-bar,
html[data-theme="dark"] .bv-serp-result,
html[data-theme="dark"] .bv-ads-metric,
html[data-theme="dark"] .bv-aimaco-plat,
html[data-theme="dark"] .cwv-panel,
html[data-theme="dark"] .bv-node {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Bento visual backgrounds — gradient panels */
html[data-theme="dark"] .cv-audit {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-theme="dark"] .cv-audit-inner {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .cv-audit-header { color: rgba(255,255,255,0.7); }
html[data-theme="dark"] .cv-audit-title { color: rgba(255,255,255,0.85); }
html[data-theme="dark"] .cv-audit-subtitle { color: rgba(255,255,255,0.4); }
html[data-theme="dark"] .cv-audit-item { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .cv-audit-item-label { color: rgba(255,255,255,0.6); }
html[data-theme="dark"] .cv-audit-item-check.pass { background: rgba(22,163,74,0.15); }
html[data-theme="dark"] .cv-audit-item-check.warn { background: rgba(202,138,4,0.15); }
html[data-theme="dark"] .cv-audit-item-check.fail { background: rgba(220,38,38,0.15); }
html[data-theme="dark"] .cv-audit-scan { background: rgba(212,35,138,0.15); }

html[data-theme="dark"] .cv-build {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-theme="dark"] .cv-build-inner {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .cv-build-chrome {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .cv-build-url {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .cv-build-page {
  background: rgba(255, 255, 255, 0.02);
}
html[data-theme="dark"] .cv-build-block--hero {
  background: linear-gradient(135deg, rgba(212,35,138,0.15), rgba(212,35,138,0.06));
}
html[data-theme="dark"] .cv-build-speed {
  background: rgba(22,163,74,0.12);
  border-color: rgba(22,163,74,0.2);
}

/* ALPS method cards (cat-card) — borders + bg */
html[data-theme="dark"] .cat-card {
  background: rgba(255, 255, 255, 0.04);
  border-top: 1.5px solid rgba(255,255,255,0.06);
  border-left: 1.5px solid rgba(255,255,255,0.04);
  border-right: 1.5px solid rgba(255,255,255,0.04);
  border-bottom: 1.5px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .cat-card:hover {
  border-bottom-color: rgba(212,35,138,0.2);
  border-right-color: rgba(212,35,138,0.12);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .cat-icon {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .cv-grow {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-theme="dark"] .cv-grow-label {
  color: rgba(255,255,255,0.5);
}
html[data-theme="dark"] .cv-grow-grid-line {
  stroke: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .cv-grow-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .cv-grow-badge-val { color: rgba(255,255,255,0.9); }
html[data-theme="dark"] .cv-grow-badge-label { color: rgba(255,255,255,0.4); }

html[data-theme="dark"] .cv-scale {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-theme="dark"] .cv-scale-node {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .cv-scale-node-label { color: rgba(255,255,255,0.5); }
html[data-theme="dark"] .cv-scale-line { stroke: rgba(255,255,255,0.08); }
html[data-theme="dark"] .cv-scale-pulse {
  border-color: rgba(212,35,138,0.25);
}

html[data-theme="dark"] .bv-web {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .bv-social {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .bv-social-lines line {
  stroke: rgba(255,255,255,0.08);
}

/* Hardcoded #fff elements inside visualizations */
html[data-theme="dark"] .cv-audit-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .cv-build-dot:nth-child(1) { background: #ff5f57; }
html[data-theme="dark"] .cv-build-dot:nth-child(2) { background: #febc2e; }
html[data-theme="dark"] .cv-build-dot:nth-child(3) { background: #28c840; }
html[data-theme="dark"] .cv-grow-grid-line {
  stroke: rgba(255,255,255,0.06);
  stroke-dasharray: 4 3;
}
html[data-theme="dark"] .cv-grow-area {
  fill-opacity: 0.15;
}
html[data-theme="dark"] .cv-grow-dot {
  fill: var(--pink);
  stroke: rgba(22, 21, 28, 0.5);
}

html[data-theme="dark"] .bv-serp {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .bv-serp-bar-q {
  background: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .bv-serp-ai {
  background: linear-gradient(135deg, rgba(212,35,138,0.12), rgba(212,35,138,0.04));
  border-color: rgba(212,35,138,0.2);
}
html[data-theme="dark"] .bv-serp-result-title { color: rgba(255,255,255,0.7); }
html[data-theme="dark"] .bv-serp-result-url { color: rgba(255,255,255,0.35); }
html[data-theme="dark"] .bv-serp-result-line { background: rgba(255,255,255,0.06); }

html[data-theme="dark"] .bv-ads {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .bv-ads-metric {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .bv-ads-metric-label { color: rgba(255,255,255,0.4); }
html[data-theme="dark"] .bv-ads-metric-val { color: rgba(255,255,255,0.85); }
html[data-theme="dark"] .bv-ads-bar-bg { background: rgba(255,255,255,0.06); }

html[data-theme="dark"] .bv-aimaco {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .bv-aimaco-plat {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .bv-aimaco-plat-name { color: rgba(255,255,255,0.5); }
html[data-theme="dark"] .bv-aimaco-plat-icon { filter: brightness(0.8) invert(0.8); }

html[data-theme="dark"] .bv-content {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .bv-node {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255,255,255,0.1);
}
html[data-theme="dark"] .bv-line { stroke: rgba(255,255,255,0.08); }

/* Bento CTA card — muted pink glass, not bright gradient */
html[data-theme="dark"] .bento-card.bento-cta {
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(212, 35, 138, 0.08) 0%, transparent 60%),
    linear-gradient(160deg, rgba(212, 35, 138, 0.14) 0%, rgba(158, 24, 104, 0.06) 100%);
  border: 1px solid rgba(212, 35, 138, 0.18);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .bento-card.bento-cta:hover {
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(212, 35, 138, 0.12) 0%, transparent 60%),
    linear-gradient(160deg, rgba(212, 35, 138, 0.2) 0%, rgba(158, 24, 104, 0.1) 100%);
  border-color: rgba(212, 35, 138, 0.25);
  box-shadow:
    0 8px 40px rgba(212, 35, 138, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* CTA card top streak — pink-tinted */
html[data-theme="dark"] .bento-card.bento-cta::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 35, 138, 0.15) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(212, 35, 138, 0.15) 75%,
    transparent 100%);
}
html[data-theme="dark"] .bento-cta h3 { color: #f0f0f5; }
html[data-theme="dark"] .bento-cta p { color: rgba(255, 255, 255, 0.55); }
html[data-theme="dark"] .bento-cta .btn {
  background: rgba(212, 35, 138, 0.15);
  color: var(--pink);
  border: 1px solid rgba(212, 35, 138, 0.25);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .bento-cta .btn:hover {
  background: rgba(212, 35, 138, 0.25);
  border-color: rgba(212, 35, 138, 0.4);
  box-shadow: 0 4px 20px rgba(212, 35, 138, 0.15);
}

/* ─── 9. Cards & Surfaces ───────────────────────────────────────── */

/* Generic card-like surfaces with white bg */
html[data-theme="dark"] .geo-card--seo {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .geo-card--seo:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .geo-card--seo .geo-card-btn {
  background: #f0f0f5;
  color: #0e0d12;
}
html[data-theme="dark"] .geo-card--seo .geo-card-btn:hover {
  background: #d4d3de;
}

/* LLMO + GEO cards — glossy glass instead of bright pink */
html[data-theme="dark"] .geo-card--llmo {
  background: linear-gradient(160deg, rgba(91, 75, 224, 0.18) 0%, rgba(91, 75, 224, 0.08) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(91, 75, 224, 0.24);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .geo-card--llmo:hover {
  background: linear-gradient(160deg, rgba(91, 75, 224, 0.24) 0%, rgba(91, 75, 224, 0.12) 100%);
  border-color: rgba(91, 75, 224, 0.32);
  box-shadow:
    0 8px 40px rgba(91, 75, 224, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .geo-card--geo {
  background: linear-gradient(160deg, rgba(212, 35, 138, 0.18) 0%, rgba(91, 75, 224, 0.10) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(124, 76, 200, 0.26);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .geo-card--geo:hover {
  background: linear-gradient(160deg, rgba(212, 35, 138, 0.24) 0%, rgba(91, 75, 224, 0.15) 100%);
  border-color: rgba(124, 76, 200, 0.36);
  box-shadow:
    0 8px 40px rgba(124, 76, 200, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Shine effects on all 3 geo-cards ── */

/* Top-edge light streak — thin gloss line across the top */
html[data-theme="dark"] .geo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.15) 70%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}
html[data-theme="dark"] .geo-card--llmo::before,
html[data-theme="dark"] .geo-card--geo::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124, 76, 200, 0.2) 20%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(124, 76, 200, 0.2) 80%,
    transparent 100%);
}

/* Diagonal shimmer — subtle moving light reflection */
html[data-theme="dark"] .geo-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    225deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 60%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
html[data-theme="dark"] .geo-card:hover::after {
  opacity: 1;
}
html[data-theme="dark"] .geo-card--llmo::after,
html[data-theme="dark"] .geo-card--geo::after {
  background: linear-gradient(
    225deg,
    transparent 0%,
    transparent 40%,
    rgba(124, 76, 200, 0.04) 45%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(124, 76, 200, 0.04) 55%,
    transparent 60%,
    transparent 100%
  );
}

/* Corner glow — soft radial light in top-left */
html[data-theme="dark"] .geo-card--seo {
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
html[data-theme="dark"] .geo-card--llmo {
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
    linear-gradient(160deg, rgba(91, 75, 224, 0.18) 0%, rgba(91, 75, 224, 0.08) 100%);
}
html[data-theme="dark"] .geo-card--geo {
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
    linear-gradient(160deg, rgba(212, 35, 138, 0.18) 0%, rgba(91, 75, 224, 0.10) 100%);
}

/* Text + items on glass cards */
html[data-theme="dark"] .geo-card--llmo .geo-card-title,
html[data-theme="dark"] .geo-card--geo .geo-card-title {
  color: #f0f0f5;
}
html[data-theme="dark"] .geo-card--llmo .geo-card-desc,
html[data-theme="dark"] .geo-card--geo .geo-card-desc {
  color: rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] .geo-card--llmo .geo-card-check,
html[data-theme="dark"] .geo-card--geo .geo-card-check {
  color: rgba(255, 255, 255, 0.7);
}
html[data-theme="dark"] .geo-card--llmo .geo-card-item,
html[data-theme="dark"] .geo-card--geo .geo-card-item {
  color: rgba(255, 255, 255, 0.8);
}

/* Button on glass cards — outline style */
html[data-theme="dark"] .geo-card--llmo .geo-card-btn,
html[data-theme="dark"] .geo-card--geo .geo-card-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #f0f0f5;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
html[data-theme="dark"] .geo-card--llmo .geo-card-btn:hover,
html[data-theme="dark"] .geo-card--geo .geo-card-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
}

/* NEU badge on glass cards */
html[data-theme="dark"] .geo-card-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}

/* Value Prop cards */
html[data-theme="dark"] .vp-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .vp-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Process / Method cards */
html[data-theme="dark"] .method-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .method-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Service grid cards */
html[data-theme="dark"] .service-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .service-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  border-color: rgba(212, 35, 138, 0.4);
}

/* Tech stack / tools cards */
html[data-theme="dark"] .tool-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Testimonial cards */
html[data-theme="dark"] .testi-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* FAQ items */
html[data-theme="dark"] .faq-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── 9a. Glossy shine effects — all cards ────────────────────── */

/* Ensure all cards can host pseudo-elements */
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .bento-card,
html[data-theme="dark"] .problem-card,
html[data-theme="dark"] .testi-card,
html[data-theme="dark"] .testi-featured,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .hp-price-card,
html[data-theme="dark"] .stat-item,
html[data-theme="dark"] .comparison-wrap {
  position: relative;
  overflow: hidden;
}

/* Corner glow — glassmorphism cards */
html[data-theme="dark"] .cat-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
html[data-theme="dark"] .bento-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
html[data-theme="dark"] .problem-card {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
html[data-theme="dark"] .testi-card,
html[data-theme="dark"] .testi-featured {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
html[data-theme="dark"] .faq-item {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
html[data-theme="dark"] .hp-price-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
html[data-theme="dark"] .hp-price-card--featured {
  background:
    radial-gradient(ellipse 50% 40% at 10% 5%, rgba(212,35,138,0.06) 0%, transparent 60%),
    rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(212, 35, 138, 0.25);
  box-shadow:
    0 0 15px rgba(212, 35, 138, 0.08),
    0 0 30px rgba(212, 35, 138, 0.04),
    inset 0 1px 0 rgba(212, 35, 138, 0.15);
}
html[data-theme="dark"] .stat-item {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
html[data-theme="dark"] .comparison-wrap {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Top-edge light streak — thin gloss line across the top */
html[data-theme="dark"] .cat-card::before,
html[data-theme="dark"] .bento-card::before,
html[data-theme="dark"] .problem-card::before,
html[data-theme="dark"] .testi-card::before,
html[data-theme="dark"] .testi-featured::before,
html[data-theme="dark"] .hp-price-card::before,
html[data-theme="dark"] .stat-item::before,
html[data-theme="dark"] .comparison-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.08) 75%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* FAQ items — subtler streak */
html[data-theme="dark"] .faq-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 30%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 70%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Diagonal shimmer on hover — subtle light sweep */
html[data-theme="dark"] .cat-card::after,
html[data-theme="dark"] .bento-card::after,
html[data-theme="dark"] .problem-card::after,
html[data-theme="dark"] .testi-card::after,
html[data-theme="dark"] .testi-featured::after,
html[data-theme="dark"] .hp-price-card::after,
html[data-theme="dark"] .stat-item::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    225deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,0.02) 45%,
    rgba(255,255,255,0.05) 50%,
    rgba(255,255,255,0.02) 55%,
    transparent 58%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
html[data-theme="dark"] .cat-card:hover::after,
html[data-theme="dark"] .bento-card:hover::after,
html[data-theme="dark"] .problem-card:hover::after,
html[data-theme="dark"] .testi-card:hover::after,
html[data-theme="dark"] .testi-featured:hover::after,
html[data-theme="dark"] .hp-price-card:hover::after,
html[data-theme="dark"] .stat-item:hover::after {
  opacity: 1;
}

/* Inset top-glow on all dark cards via box-shadow */
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .bento-card {
  box-shadow:
    0 2px 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
html[data-theme="dark"] .cat-card:hover,
html[data-theme="dark"] .bento-card:hover {
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
html[data-theme="dark"] .problem-card {
  box-shadow:
    0 2px 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
html[data-theme="dark"] .problem-card:hover {
  box-shadow:
    0 4px 16px rgba(212,35,138,0.08),
    0 8px 24px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
html[data-theme="dark"] .testi-card {
  box-shadow:
    0 2px 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
html[data-theme="dark"] .hp-price-card {
  box-shadow:
    0 4px 24px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
html[data-theme="dark"] .hp-price-card--featured {
  border: 1px solid rgba(212, 35, 138, 0.3) !important;
  box-shadow:
    0 0 20px rgba(212, 35, 138, 0.12),
    0 0 40px rgba(212, 35, 138, 0.06),
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(212, 35, 138, 0.2);
}
html[data-theme="dark"] .hp-price-card:hover {
  box-shadow:
    0 12px 40px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
html[data-theme="dark"] .hp-price-card--featured:hover {
  border-color: rgba(212, 35, 138, 0.4) !important;
  box-shadow:
    0 0 25px rgba(212, 35, 138, 0.18),
    0 0 50px rgba(212, 35, 138, 0.08),
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(212, 35, 138, 0.25);
}
html[data-theme="dark"] .stat-item {
  box-shadow:
    0 1px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.03);
}
html[data-theme="dark"] .comparison-wrap {
  box-shadow:
    0 2px 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ─── 10. Sections with light backgrounds ───────────────────────── */
html[data-theme="dark"] .geo-equation,
html[data-theme="dark"] .section-alt,
html[data-theme="dark"] .section-gray {
  background: rgba(255, 255, 255, 0.04);
}

/* Footer */
html[data-theme="dark"] .footer {
  background: #0a0a0e;
}
html[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .footer-social a {
  border-color: rgba(255, 255, 255, 0.1);
  color: #9594a3;
}
html[data-theme="dark"] .footer-social a:hover {
  background: rgba(224, 77, 160, 0.12);
  color: var(--pink);
  border-color: rgba(224, 77, 160, 0.25);
}

/* ─── 11. Box Shadows — deeper on dark ──────────────────────────── */
html[data-theme="dark"] .nav.scrolled {
  box-shadow: none;
}

/* ─── 12. Borders — hardcoded rgba(0,0,0,*) ─────────────────────── */
html[data-theme="dark"] .avatar-stack img {
  border-color: #0e0d12;
}

/* ─── 13. Dark ambient glow — all homepage sections ────────────── */

/* Hero (has .container on the section itself).
   Layout-Properties (max-width, width, padding-inline) NICHT veraendern - sonst
   verschiebt sich der Hero-Content beim Theme-Toggle um 64px. Background-Gradient
   wird via ::before (siehe unten) ueber die volle Viewport-Breite gezogen. */
/* .hero stays at .container width for layout; the FULL background (base gradient
   + glow) is painted on the full-bleed ::before so there are no black side rails.
   overflow:visible is required so the 100vw ::before is not clipped at the 1200px
   hero box — html/body overflow-x:hidden still prevents any horizontal scrollbar. */
html[data-theme="dark"] .hero {
  background: transparent;
  overflow: visible;
}
html[data-theme="dark"] .hero::before {
  left: 50%;
  right: auto;
  margin-left: -50vw;
  width: 100vw;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 40%, rgba(212,35,138,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 20% 35%, rgba(139,92,246,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 90%, rgba(212,35,138,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0c0a1a 0%, #1a1530 50%, #0e0d12 100%);
}

/* All other sections (have .container as child — just need bg) */
html[data-theme="dark"] .value-prop {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 100%);
  position: relative;
}
html[data-theme="dark"] .problem {
  background: linear-gradient(180deg, #1a1730 0%, #0e0d12 100%);
}
html[data-theme="dark"] .services {
  background: linear-gradient(180deg, #0e0d12 0%, #1c1832 50%, #0e0d12 100%);
  position: relative;
}
html[data-theme="dark"] .geo-equation {
  background: linear-gradient(180deg, #0e0d12 0%, #1e1a35 50%, #0e0d12 100%);
}
html[data-theme="dark"] .comparison {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 100%);
}
html[data-theme="dark"] .testimonials {
  background: linear-gradient(180deg, #0e0d12 0%, #1b182e 50%, #0e0d12 100%);
  position: relative;
}
html[data-theme="dark"] .hp-pricing {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 50%, #0e0d12 100%);
}
html[data-theme="dark"] .faq {
  background: linear-gradient(180deg, #0e0d12 0%, #1b182e 100%);
}
html[data-theme="dark"] .blog-teaser {
  background: linear-gradient(180deg, #1b182e 0%, #0e0d12 100%);
}

/* Ambient glow overlays for key sections */
html[data-theme="dark"] .value-prop::after,
html[data-theme="dark"] .services::after,
html[data-theme="dark"] .testimonials::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
html[data-theme="dark"] .value-prop::after {
  background:
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(139,92,246,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 70%, rgba(212,35,138,0.10) 0%, transparent 55%);
}
html[data-theme="dark"] .services::after {
  background:
    radial-gradient(ellipse 60% 50% at 25% 40%, rgba(212,35,138,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 80% 60%, rgba(139,92,246,0.10) 0%, transparent 55%);
}
html[data-theme="dark"] .testimonials::after {
  background:
    radial-gradient(ellipse 55% 50% at 70% 35%, rgba(212,35,138,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 25% 65%, rgba(139,92,246,0.10) 0%, transparent 55%);
}

/* Ensure section content stays above glow overlays */
html[data-theme="dark"] .value-prop > .container,
html[data-theme="dark"] .services > .container,
html[data-theme="dark"] .testimonials > .container {
  position: relative;
  z-index: 1;
}

/* ─── 13a. Value prop — stat items + viz funnel ────────────────── */
html[data-theme="dark"] .stat-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .viz-funnel {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .viz-chart {
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .viz-stage {
  border-bottom-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .viz-arrow {
  color: rgba(255,255,255,0.15);
}

/* ─── 13b. Problem cards ───────────────────────────────────────── */
html[data-theme="dark"] .problem-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .problem-card:hover {
  border-color: rgba(212,35,138,0.25);
  box-shadow: 0 4px 16px rgba(212,35,138,0.08), 0 8px 24px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .problem-card-icon {
  background: rgba(212,35,138,0.1);
  border-color: rgba(212,35,138,0.2);
}
html[data-theme="dark"] .problem-card h3 { color: rgba(255,255,255,0.9); }
html[data-theme="dark"] .problem-card p { color: rgba(255,255,255,0.5); }
html[data-theme="dark"] .problem-card-highlight { color: var(--pink); }

/* ─── 13c. Comparison table ────────────────────────────────────── */
html[data-theme="dark"] .comparison-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}
html[data-theme="dark"] .comparison-table td {
  border-bottom-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .comparison-table td:first-child {
  color: rgba(255,255,255,0.85);
}
html[data-theme="dark"] .comparison-table td:nth-child(2) {
  color: rgba(255,255,255,0.45);
}
html[data-theme="dark"] .comparison-table td:nth-child(3) {
  background: rgba(212,35,138,0.08);
  color: var(--pink);
  border-left-color: rgba(212,35,138,0.12);
}
html[data-theme="dark"] .comparison-table td:nth-child(4) {
  background: rgba(158,24,104,0.1);
  color: var(--pink);
  border-left-color: rgba(158,24,104,0.1);
}

/* ─── 13d. Pricing cards ───────────────────────────────────────── */
html[data-theme="dark"] .hp-price-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .hp-price-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .hp-price-divider {
  background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .hp-price-feature {
  border-bottom-color: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6);
}

/* ─── 13e. Blog teaser cards ───────────────────────────────────── */
html[data-theme="dark"] .blog-teaser-card {
  background:
    radial-gradient(ellipse 50% 40% at 10% 5%, rgba(255,255,255,0.03) 0%, transparent 60%),
    rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .blog-teaser-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
html[data-theme="dark"] .blog-teaser-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 50%, transparent);
  z-index: 2;
  pointer-events: none;
}
html[data-theme="dark"] .blog-teaser-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(225deg, transparent 42%, rgba(255,255,255,0.04) 50%, transparent 58%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
html[data-theme="dark"] .blog-teaser-card:hover::after {
  opacity: 1;
}

/* Blog teaser articles (inline-styled on homepage) */
html[data-theme="dark"] .blog-teaser-grid article {
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .blog-teaser-grid article::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 50%, transparent);
  z-index: 2;
  pointer-events: none;
}

/* ─── 14. Marquee logos — light chip for dark bg ──────────── */
/* brightness(0) invert(1) turned "white card" logos (local.ch, search.ch badge)
   into solid white boxes. Show all logos in original colours on a light chip
   instead — works for both line-art and full-colour/badge logos. */
html[data-theme="dark"] .marquee-track img {
  filter: none;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 7px;
  padding: 6px 11px;
  opacity: 0.92;
}
html[data-theme="dark"] .marquee-track img:hover {
  filter: none;
  background: #fff;
  opacity: 1;
}

/* ─── 15. Hero visual — chat window animations already dark ─────── */

/* ─── 16. Section headings with hardcoded colors ────────────────── */
html[data-theme="dark"] .section-eyebrow {
  color: var(--pink);
}
html[data-theme="dark"] .section-title {
  color: #f0f0f5;
}
html[data-theme="dark"] .section-desc {
  color: #9594a3;
}

/* ─── 17. Case Studies (already dark background — no changes) ───── */

/* ─── 18. Pricing (already dark background — no changes) ────────── */

/* ─── 19. CTA Section ───────────────────────────────────────────── */
/* Already uses dark/magenta gradient — no changes needed */

/* ─── 20. Scroll indicators & misc ──────────────────────────────── */
html[data-theme="dark"] .hero-eyebrow {
  background: rgba(212, 35, 138, 0.12);
  border-color: rgba(212, 35, 138, 0.25);
}

/* ─── 21. Theme Toggle Button — Fixed FAB (bottom-right) ────────── */
/* Theme toggle — lives inside nav-inner (left side) */
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  color: var(--gray-700, #3a3a3c);
  transition: transform 0.2s, background 0.2s;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 6px;
  padding: 0;
}
.theme-toggle:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}
.theme-toggle:active {
  transform: scale(0.95);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
}
.theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
.theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.1);
  color: #b8b7c4;
}
html[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
html[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

/* ─── 22. Smooth transition on theme switch ─────────────────────── */
html.theme-transition,
html.theme-transition > body,
html.theme-transition .nav,
html.theme-transition section,
html.theme-transition .container,
html.theme-transition footer,
html.theme-transition .card,
html.theme-transition .geo-card,
html.theme-transition .bento-card,
html.theme-transition .faq-item,
html.theme-transition .cs-card,
html.theme-transition .pricing-card,
html.theme-transition .comparison-wrap,
html.theme-transition .btn {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease !important;
}

/* ─── 23. Process / step sections ───────────────────────────────── */
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .process-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── 24. Bento grid cards ──────────────────────────────────────── */
html[data-theme="dark"] .bento-card {
  background: rgba(255, 255, 255, 0.04);
  border-top: 1.5px solid rgba(255,255,255,0.06);
  border-left: 1.5px solid rgba(255,255,255,0.04);
  border-right: 1.5px solid rgba(255,255,255,0.04);
  border-bottom: 1.5px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .bento-card:hover {
  border-bottom-color: rgba(212,35,138,0.2);
  border-right-color: rgba(212,35,138,0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .bento-card h3 { color: rgba(255,255,255,0.9); }
html[data-theme="dark"] .bento-card p { color: rgba(255,255,255,0.5); }
html[data-theme="dark"] .bento-icon {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* Inner visualization mini-elements */
html[data-theme="dark"] .cv-audit-item-bar {
  background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .cv-build-block--header {
  background: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .cv-build-block--col {
  background: rgba(255,255,255,0.04);
}

/* ─── 25. Glassmorphism overlays ────────────────────────────────── */
html[data-theme="dark"] .analyse-modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* ─── 26. Selection ─────────────────────────────────────────────── */
html[data-theme="dark"] ::selection {
  background: rgba(224, 77, 160, 0.3);
  color: #f0f0f5;
}

/* ─── 27. Scrollbar ─────────────────────────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0e0d12;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2e2d36;
  border-radius: 4px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #3d3c47;
}

/* ─── 28. Breadcrumb — Dark Mode ───────────────────────────────── */
html[data-theme="dark"] .breadcrumb {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .breadcrumb a {
  color: rgba(255, 255, 255, 0.45);
}
html[data-theme="dark"] .breadcrumb a:hover {
  color: var(--pink);
}
html[data-theme="dark"] .breadcrumb .breadcrumb-current {
  color: rgba(255, 255, 255, 0.75);
}
html[data-theme="dark"] .breadcrumb > span,
html[data-theme="dark"] .breadcrumb-list > span {
  color: rgba(255, 255, 255, 0.15);
}

/* ─── 29. Remaining dark overrides ─────────────────────────────── */

/* Comparison table wrapper — border invisible on dark bg */
html[data-theme="dark"] .comparison-wrap {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Core Web Vitals ring — light green bg stroke too bright */
html[data-theme="dark"] .cwv-ring-bg {
  stroke: rgba(22, 163, 74, 0.15);
}
html[data-theme="dark"] .cwv-topbar {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* KPI cards hover shadow — needs deeper shadow on dark */
html[data-theme="dark"] .cat-kpi:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Geo-card SEO border — rgba(0,0,0) invisible on dark */
html[data-theme="dark"] .geo-card--seo {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Testi featured card border */
html[data-theme="dark"] .testi-featured {
  border-color: rgba(255, 255, 255, 0.06);
}

/* CTA banner — light pink gradient to dark */
html[data-theme="dark"] .cta-banner {
  background: linear-gradient(135deg, #1b182e 0%, #1a1730 50%, #0e0d12 100%);
}
html[data-theme="dark"] .cta-banner::before {
  background:
    radial-gradient(ellipse 50% 80% at 20% 50%, rgba(212, 35, 138, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 80% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
}
html[data-theme="dark"] .cta-banner h2 {
  color: #f0f0f5;
}
html[data-theme="dark"] .cta-banner p {
  color: #9594a3;
}

/* ═══════════════════════════════════════════════════════════════════
   UNTERSEITEN — Dark Mode Section Gradients + Glassmorphism Cards
   Matching the homepage design language
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Landing Page / Service Page Sections ─────────────────────── */
html[data-theme="dark"] .lp-hero {
  background: linear-gradient(180deg, #0c0a1a 0%, #1a1530 50%, #0e0d12 100%);
}
html[data-theme="dark"] .lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 40%, rgba(212,35,138,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 20% 35%, rgba(139,92,246,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 90%, rgba(212,35,138,0.08) 0%, transparent 50%) !important;
  pointer-events: none;
}
html[data-theme="dark"] .lp-why,
html[data-theme="dark"] .lp-about,
html[data-theme="dark"] .lp-what {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 100%) !important;
}
html[data-theme="dark"] .lp-services,
html[data-theme="dark"] .lp-solutions,
html[data-theme="dark"] .lp-ansatz {
  background: linear-gradient(180deg, #1a1730 0%, #1c1832 50%, #0e0d12 100%);
}
html[data-theme="dark"] .lp-visual,
html[data-theme="dark"] .lp-serp,
html[data-theme="dark"] .lp-dashboard,
html[data-theme="dark"] .lp-lighthouse {
  background: linear-gradient(180deg, #0e0d12 0%, #1e1a35 50%, #0e0d12 100%);
}
html[data-theme="dark"] .lp-industries,
html[data-theme="dark"] .lp-branchen,
html[data-theme="dark"] .lp-platforms {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 100%);
}
html[data-theme="dark"] .lp-stats,
html[data-theme="dark"] .lp-results,
html[data-theme="dark"] .lp-proof {
  background: linear-gradient(180deg, #0e0d12 0%, #1b182e 50%, #0e0d12 100%);
}
html[data-theme="dark"] .lp-problems,
html[data-theme="dark"] .lp-problem,
html[data-theme="dark"] .lp-diff,
html[data-theme="dark"] .lp-compare {
  background: linear-gradient(180deg, #1a1730 0%, #0e0d12 100%);
}
/* Compare-Card Border-Symmetrie im Dark (Light hat Inset-Effekt mit asymmetrischen Borders) */
html[data-theme="dark"] .lp-compare-col {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
html[data-theme="dark"] .lp-process,
html[data-theme="dark"] .lp-timeline,
html[data-theme="dark"] .lp-quality {
  background: linear-gradient(180deg, #0e0d12 0%, #1c1832 50%, #0e0d12 100%);
}
html[data-theme="dark"] .lp-ref,
html[data-theme="dark"] .lp-cases,
html[data-theme="dark"] .lp-trusted {
  background: linear-gradient(180deg, #0e0d12 0%, #1b182e 100%);
}
html[data-theme="dark"] .lp-benefits,
html[data-theme="dark"] .lp-measure {
  background: linear-gradient(180deg, #1b182e 0%, #1a1730 50%, #0e0d12 100%);
}
html[data-theme="dark"] .lp-geo,
html[data-theme="dark"] .lp-equation,
html[data-theme="dark"] .lp-tech {
  background: linear-gradient(180deg, #0e0d12 0%, #1e1a35 50%, #0e0d12 100%);
}
html[data-theme="dark"] .lp-audit,
html[data-theme="dark"] .lp-tools,
html[data-theme="dark"] .lp-maps {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 100%);
}
html[data-theme="dark"] .lp-faq {
  background: linear-gradient(180deg, #0e0d12 0%, #1b182e 100%);
}
html[data-theme="dark"] .lp-pricing,
html[data-theme="dark"] .pricing-section {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 50%, #0e0d12 100%);
}
html[data-theme="dark"] .lp-cta,
html[data-theme="dark"] .lp-cta-med {
  background: linear-gradient(135deg, #1b182e 0%, #1a1730 50%, #0e0d12 100%);
}
html[data-theme="dark"] .lp-campaigns {
  background: linear-gradient(180deg, #0e0d12 0%, #1c1832 100%);
}

/* ─── Erfolge Section (Google Ads) ────────────────────────────── */
html[data-theme="dark"] .erfolge {
  background: linear-gradient(180deg, #0e0d12 0%, #1b182e 50%, #0e0d12 100%) !important;
}
html[data-theme="dark"] .erfolge-header h2 {
  color: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme="dark"] .erfolge-stat-label {
  color: rgba(255, 255, 255, 0.45) !important;
}
html[data-theme="dark"] .erfolge-card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] .erfolge-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .erfolge-card h3 {
  color: rgba(255, 255, 255, 0.9) !important;
}
html[data-theme="dark"] .erfolge-card p {
  color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] .seo-foundation {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 50%, #0e0d12 100%);
}

/* ─── Page Hero (Über uns, Referenzen, Kontakt, etc.) ──────────── */
html[data-theme="dark"] .page-hero {
  background: linear-gradient(180deg, #0c0a1a 0%, #1a1530 50%, #0e0d12 100%);
  position: relative;
}
html[data-theme="dark"] .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(212,35,138,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 25% 60%, rgba(139,92,246,0.06) 0%, transparent 55%);
  pointer-events: none;
}
html[data-theme="dark"] .page-content {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 50%, #0e0d12 100%);
}

/* ─── Über uns Sections ────────────────────────────────────────── */
html[data-theme="dark"] .metrics-section {
  background: linear-gradient(180deg, #0e0d12 0%, #1b182e 100%);
}
html[data-theme="dark"] .clients-section {
  background: linear-gradient(180deg, #1b182e 0%, #0e0d12 100%);
}
html[data-theme="dark"] .team-section {
  background: linear-gradient(180deg, #0e0d12 0%, #1c1832 50%, #0e0d12 100%);
}
html[data-theme="dark"] .brands-section {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 100%);
}
html[data-theme="dark"] .story-section {
  background: linear-gradient(180deg, #1a1730 0%, #1b182e 50%, #0e0d12 100%);
}
html[data-theme="dark"] .own-tech-section {
  background: linear-gradient(180deg, #0e0d12 0%, #1e1a35 50%, #0e0d12 100%);
}
html[data-theme="dark"] .locations-section {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 100%);
}
html[data-theme="dark"] .map-section {
  background: linear-gradient(180deg, #1a1730 0%, #0e0d12 100%);
}

/* ─── Referenzen Sections ──────────────────────────────────────── */
html[data-theme="dark"] .stats-bar {
  background: linear-gradient(180deg, #0e0d12 0%, #1b182e 100%);
}
html[data-theme="dark"] .cases {
  background: linear-gradient(180deg, #1b182e 0%, #1c1832 50%, #0e0d12 100%);
}

/* ─── Blog Sections ────────────────────────────────────────────── */
html[data-theme="dark"] .blog-hero {
  background: linear-gradient(180deg, #0c0a1a 0%, #1a1530 50%, #0e0d12 100%);
}
html[data-theme="dark"] .blog-filters {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 100%);
}
html[data-theme="dark"] .blog-section {
  background: linear-gradient(180deg, #1a1730 0%, #1b182e 50%, #0e0d12 100%);
}
html[data-theme="dark"] .newsletter {
  background: linear-gradient(135deg, #1b182e 0%, #1e1a35 50%, #0e0d12 100%);
}

/* ─── Generic CTA Section ──────────────────────────────────────── */
html[data-theme="dark"] section.cta {
  background: linear-gradient(135deg, #1b182e 0%, #1a1730 50%, #0e0d12 100%);
}

/* ─── Campaign Cards (Google Ads) ─────────────────────────────── */
html[data-theme="dark"] .lp-campaign-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
html[data-theme="dark"] .lp-campaign-card:hover {
  border-color: rgba(212, 35, 138, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .lp-campaign-card h3 {
  color: rgba(255, 255, 255, 0.9) !important;
}
html[data-theme="dark"] .lp-campaign-card p {
  color: rgba(255, 255, 255, 0.5) !important;
}
html[data-theme="dark"] .lp-campaign-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

/* ─── Steps (Google Ads Ansatz) ────────────────────────────────── */
/* Steps dark mode — handled inline on the dark landing page, no overrides needed */

/* ─── Unterseiten Card Glassmorphism ───────────────────────────── */
html[data-theme="dark"] .lp-solution-grid > div,
html[data-theme="dark"] .lp-problem-card,
html[data-theme="dark"] .lp-branchen-card,
html[data-theme="dark"] .lp-industry-icon,
html[data-theme="dark"] .lp-process-step,
html[data-theme="dark"] .lp-campaign-icon,
html[data-theme="dark"] .lp-eq-item,
html[data-theme="dark"] .lp-diff-grid > div,
html[data-theme="dark"] .lp-quality-grid > div,
html[data-theme="dark"] .lp-measure-grid > div,
html[data-theme="dark"] .lp-tool-icon,
html[data-theme="dark"] .lp-platform-icon,
html[data-theme="dark"] .lp-proof,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .blog-card-link,
html[data-theme="dark"] .team-card-photo,
html[data-theme="dark"] .own-tech-mockup,
html[data-theme="dark"] .map-listing {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Social-Media Plattform-Karten (Bug #44) ───────────────────── */
/* Karten-Border symmetrisch (Light-Inset-Borders wirken im Dark als weisse Umrandung) */
html[data-theme="dark"] .lp-platform-card {
  border-top: 1.5px solid rgba(255,255,255,0.08);
  border-left: 1.5px solid rgba(255,255,255,0.08);
  border-right: 1.5px solid rgba(255,255,255,0.08);
  border-bottom: 1.5px solid rgba(255,255,255,0.08);
}
/* Brand-Farben der Icons im Dark erhalten (generischer Glass-Override entfärbt sie sonst).
   Spezifität (0,3,1) schlägt den Glass-Override (0,2,1). */
html[data-theme="dark"] .lp-platform-card--ig .lp-platform-icon,
html[data-theme="dark"] .lp-platform-card--li .lp-platform-icon,
html[data-theme="dark"] .lp-platform-card--fb .lp-platform-icon,
html[data-theme="dark"] .lp-platform-card--tt .lp-platform-icon {
  backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent;
}
html[data-theme="dark"] .lp-platform-card--ig .lp-platform-icon { background: linear-gradient(135deg, #833AB4 0%, #E1306C 50%, #F77737 100%); color: #fff; }
html[data-theme="dark"] .lp-platform-card--li .lp-platform-icon { background: #0A66C2; color: #fff; }
html[data-theme="dark"] .lp-platform-card--fb .lp-platform-icon { background: #1877F2; color: #fff; }
/* TikTok-Schwarz ist auf dunklem BG unsichtbar → helles Kästchen mit schwarzem Logo */
html[data-theme="dark"] .lp-platform-card--tt .lp-platform-icon { background: #fff; color: #010101; }

/* ─── Branchenexpertise (Standortseiten) — Inline-Style overrides ─ */
/* Cards use inline style background:var(--bg-card, #fff) → forces white in dark.
   Need !important to defeat inline-style specificity. */
html[data-theme="dark"] .lp-branchen-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
html[data-theme="dark"] .lp-branchen-card:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(212, 35, 138, 0.4) !important;
  box-shadow: 0 8px 24px rgba(212, 35, 138, 0.15) !important;
}

/* ─── Unterseiten Text Colors ──────────────────────────────────── */
html[data-theme="dark"] .lp-hero h1,
html[data-theme="dark"] .page-hero h1,
html[data-theme="dark"] .blog-hero h1 {
  color: #f0f0f5;
}
html[data-theme="dark"] .lp-hero p,
html[data-theme="dark"] .lp-hero-sub,
html[data-theme="dark"] .page-hero p {
  color: #9594a3;
}
html[data-theme="dark"] section h2,
html[data-theme="dark"] section h3 {
  color: rgba(255, 255, 255, 0.92);
}
html[data-theme="dark"] section p {
  color: rgba(255, 255, 255, 0.6);
}
html[data-theme="dark"] .lp-faq summary,
html[data-theme="dark"] .lp-faq-answer {
  color: rgba(255, 255, 255, 0.8);
}

/* ─── Unterseiten Ambient Glows ────────────────────────────────── */
html[data-theme="dark"] .lp-services::before,
html[data-theme="dark"] .lp-solutions::before,
html[data-theme="dark"] .team-section::before,
html[data-theme="dark"] .own-tech-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(139,92,246,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 70%, rgba(212,35,138,0.08) 0%, transparent 55%);
}
html[data-theme="dark"] .lp-services,
html[data-theme="dark"] .lp-solutions,
html[data-theme="dark"] .team-section,
html[data-theme="dark"] .own-tech-section {
  position: relative;
}
html[data-theme="dark"] .lp-services > .container,
html[data-theme="dark"] .lp-solutions > .container,
html[data-theme="dark"] .team-section > .container,
html[data-theme="dark"] .own-tech-section > .container {
  position: relative;
  z-index: 1;
}

/* ─── Case Study Sections ──────────────────────────────────────── */
html[data-theme="dark"] .cs-hero {
  background: linear-gradient(180deg, #0c0a1a 0%, #1a1530 50%, #0e0d12 100%);
}
html[data-theme="dark"] .cs-section {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 50%, #0e0d12 100%);
}
html[data-theme="dark"] .cs-section:nth-child(odd) {
  background: linear-gradient(180deg, #0e0d12 0%, #1b182e 50%, #0e0d12 100%);
}
html[data-theme="dark"] .cs-cta {
  background: none;
}

/* ─── Karriere Sections ────────────────────────────────────────── */
html[data-theme="dark"] .karriere-hero {
  background: linear-gradient(180deg, #0c0a1a 0%, #1a1530 50%, #0e0d12 100%);
}
html[data-theme="dark"] .benefits {
  background: linear-gradient(180deg, #0e0d12 0%, #1c1832 50%, #0e0d12 100%);
}
html[data-theme="dark"] .jobs {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 100%);
}
html[data-theme="dark"] .initiative {
  background: linear-gradient(180deg, #1a1730 0%, #0e0d12 100%);
}

/* ─── Blog Article Sections ────────────────────────────────────── */
html[data-theme="dark"] .container > article {
  color: rgba(255, 255, 255, 0.75);
}

/* ─── FAQ / Glossar ────────────────────────────────────────────── */
html[data-theme="dark"] .lp-faq details {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Section-gray Override ────────────────────────────────────── */
html[data-theme="dark"] .section-gray {
  background: linear-gradient(180deg, #0e0d12 0%, #1a1730 50%, #0e0d12 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL CARD GLASSMORPHISM — All subpage card/panel backgrounds
   Override solid var(--white)/var(--gray-50) → transparent rgba()
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Service/Landing Page Cards ──────────────────────────────── */
html[data-theme="dark"] .lp-why-card,
html[data-theme="dark"] .lp-service-card,
html[data-theme="dark"] .lp-solution-card,
html[data-theme="dark"] .lp-industry-card,
html[data-theme="dark"] .lp-pricing-card,
html[data-theme="dark"] .lp-service-wide,
html[data-theme="dark"] .lp-process-card,
html[data-theme="dark"] .lp-about-card,
html[data-theme="dark"] .lp-faq-item,
html[data-theme="dark"] .lp-benefit-card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .lp-why-card {
  border-top-color: rgba(212, 35, 138, 0.4);
}
html[data-theme="dark"] .lp-why-card:hover,
html[data-theme="dark"] .lp-service-card:hover,
html[data-theme="dark"] .lp-solution-card:hover,
html[data-theme="dark"] .lp-industry-card:hover,
html[data-theme="dark"] .lp-process-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
html[data-theme="dark"] .lp-pricing-card--featured {
  border-color: rgba(212, 35, 138, 0.3);
  box-shadow:
    0 0 20px rgba(212, 35, 138, 0.12),
    0 0 40px rgba(212, 35, 138, 0.06),
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(212, 35, 138, 0.2);
}

/* ─── Audit/Dashboard Elements ────────────────────────────────── */
html[data-theme="dark"] .audit-card,
html[data-theme="dark"] .audit-dashboard,
html[data-theme="dark"] .audit-check,
html[data-theme="dark"] .onpage-card,
html[data-theme="dark"] .onpage-check,
html[data-theme="dark"] .mobile-check,
html[data-theme="dark"] .cro-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .audit-header,
html[data-theme="dark"] .audit-dash-header {
  background: linear-gradient(135deg, rgba(26, 10, 46, 0.8), rgba(18, 8, 53, 0.8));
}
html[data-theme="dark"] .audit-check--fail {
  background: rgba(255, 95, 86, 0.06);
}
html[data-theme="dark"] .audit-check--warn,
html[data-theme="dark"] .onpage-check--warn {
  background: rgba(245, 158, 11, 0.06);
}
html[data-theme="dark"] .audit-check-icon--pass,
html[data-theme="dark"] .onpage-check-icon--pass,
html[data-theme="dark"] .mobile-check-icon--pass {
  background: rgba(39, 201, 63, 0.12);
}
html[data-theme="dark"] .audit-check-icon--fail,
html[data-theme="dark"] .onpage-check-icon--fail,
html[data-theme="dark"] .mobile-check-icon--fail {
  background: rgba(255, 95, 86, 0.12);
}
html[data-theme="dark"] .audit-check-icon--warn,
html[data-theme="dark"] .onpage-check-icon--warn,
html[data-theme="dark"] .mobile-check-icon--warn {
  background: rgba(255, 189, 46, 0.12);
}

/* ─── Step/Process Elements ───────────────────────────────────── */
html[data-theme="dark"] .strategy-step,
html[data-theme="dark"] .process-step,
html[data-theme="dark"] .strat-step {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .advisor-step {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
}

/* ─── Referenzen/Case Study Metric Boxes ──────────────────────── */
html[data-theme="dark"] .cs-metric-box,
html[data-theme="dark"] .metric-box,
html[data-theme="dark"] .key-metric-box {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ─── GEO/SEO Stats & Map Elements ────────────────────────────── */
html[data-theme="dark"] .geo-stat,
html[data-theme="dark"] .sv-map-result,
html[data-theme="dark"] .sv-dashboard,
html[data-theme="dark"] .sv-doc,
html[data-theme="dark"] .serp-map-preview,
html[data-theme="dark"] .map-mockup {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .sv-map-result--active {
  background: rgba(212, 35, 138, 0.08);
  border-color: rgba(212, 35, 138, 0.2);
}
/* Service-visual mockup cards (standorte hubs) — dashboard + document.
   Light skeleton/track values flip to light-on-dark so they stay visible. */
html[data-theme="dark"] .sv-doc {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .sv-dashboard-bar-wrap {
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .sv-doc-title {
  background: rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] .sv-doc-line {
  background: rgba(255, 255, 255, 0.12);
}
/* seo-experte stat band: .numbers-value uses var(--white) which remaps to
   near-black in dark mode → invisible digits on the dark band. Force light. */
html[data-theme="dark"] .numbers-value {
  color: #f0f0f5;
}
/* Footer Clutch badge mark: brand navy #17313B is invisible on the dark footer.
   Lighten just this mark in dark mode (inline style → needs !important). */
html[data-theme="dark"] .footer-badge-mark[style*="17313B"] {
  color: #8fb9c7 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK-MODE CONTRAST / LIGHT-ISLAND REMEDIATION (2026-05-21)
   Mockup & illustration components with hardcoded light bg (#fff) or
   hardcoded dark text (#1a0dab) that don't follow the dark-mode remap.
   ═══════════════════════════════════════════════════════════════════ */
/* (A) Full-width light bands → blend into the dark page */
html[data-theme="dark"] .detail-hero,
html[data-theme="dark"] .key-metrics {
  background: transparent !important;
}
/* (A) Light "screenshot/card" surfaces → dark glass */
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .case-card-top,
html[data-theme="dark"] .case-card-body,
html[data-theme="dark"] .phone-screen,
html[data-theme="dark"] .alpha-nav-wrapper,
html[data-theme="dark"] .op-serp,
html[data-theme="dark"] .speed-window,
html[data-theme="dark"] .ba-side--before {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
/* (B) SERP mockup — card remaps dark via var(--white); fix hardcoded text */
html[data-theme="dark"] .serp-result-title,
html[data-theme="dark"] .serp-organic-title,
html[data-theme="dark"] .serp-ad-title,
html[data-theme="dark"] .serp-title {
  color: #8ab4f8;
}
html[data-theme="dark"] .serp-result--featured .serp-result-title {
  color: var(--pink);
}
html[data-theme="dark"] .serp-result-url,
html[data-theme="dark"] .serp-organic-url,
html[data-theme="dark"] .serp-ad-url,
html[data-theme="dark"] .op-og-domain {
  color: #6ee79f;
}
/* (B) Misc dashboard/mockup labels & values → readable light */
html[data-theme="dark"] .onpage-check-detail,
html[data-theme="dark"] .mobile-check-detail,
html[data-theme="dark"] .op-cwv-label,
html[data-theme="dark"] .geo-operator,
html[data-theme="dark"] .b2b-funnel-val,
html[data-theme="dark"] .backlink-chart-month,
html[data-theme="dark"] .rank-hash,
html[data-theme="dark"] .breadcrumb-sep,
html[data-theme="dark"] .lp-trusted-logo,
html[data-theme="dark"] .th-neu-badge,
html[data-theme="dark"] .step-number,
html[data-theme="dark"] .lp-process-step,
html[data-theme="dark"] .intl-market-flag--fr,
html[data-theme="dark"] .geo-vis-chat-msg--user {
  color: rgba(255, 255, 255, 0.75) !important;
}
/* Bot-Bubble im Dark: war helles 35%-Bubble + dunkler Text (ratio~1) → dunkles Glas + heller Text */
html[data-theme="dark"] .geo-vis-chat-msg--bot {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
/* (A) Light pill/badge backgrounds in mockups → dark glass (keep brand color) */
html[data-theme="dark"] .phone-search-bar {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
html[data-theme="dark"] .feed-card-platform,
html[data-theme="dark"] .cro-variant-badge {
  background: rgba(255, 255, 255, 0.08) !important;
}
/* (B) Remaining dark-on-dark text in single-page mockups → light */
html[data-theme="dark"] .lh-gauge-score,
html[data-theme="dark"] .op-serp-label,
html[data-theme="dark"] .op-serp-url-line,
html[data-theme="dark"] .comparison-table th {
  color: rgba(255, 255, 255, 0.8) !important;
}
/* Disabled glossary A–Z letters: faded but visible on dark */
html[data-theme="dark"] a.is-disabled {
  color: rgba(255, 255, 255, 0.3) !important;
}
/* Case-study hero mockups use mix-blend multiply (works on the light hero in
   light mode). In dark mode the hero is dark → multiply hides the image. */
html[data-theme="dark"] .cs-hero-img {
  mix-blend-mode: normal;
}

/* ─── Blog Elements ───────────────────────────────────────────── */
html[data-theme="dark"] .author-box {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .article-infobox {
  background: rgba(212, 35, 138, 0.08);
  border-color: rgba(212, 35, 138, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ─── Hero Float Cards ────────────────────────────────────────── */
html[data-theme="dark"] .hero-float-card {
  background: rgba(14, 13, 18, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* ─── Chatbot Card ────────────────────────────────────────────── */
html[data-theme="dark"] .chatbot-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── AIMACO Dashboard ────────────────────────────────────────── */
html[data-theme="dark"] .aimaco-dashboard {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Analyse Modal — handled at top of file (stays light in dark mode) ── */

/* ─── SERP & Visual Mockups ───────────────────────────────────── */
html[data-theme="dark"] .serp-mockup,
html[data-theme="dark"] .geo-chat-mockup {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── CRO Elements ────────────────────────────────────────────── */
html[data-theme="dark"] .cro-card-header {
  background: linear-gradient(135deg, rgba(26, 10, 46, 0.6), rgba(18, 8, 53, 0.6));
}

/* ─── Pricing deliverables (already dark, just polish) ────────── */
html[data-theme="dark"] .pricing-del {
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .pricing-roi {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── SEO Found Layer Cards ───────────────────────────────────── */
html[data-theme="dark"] .seo-found-layer {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Footer on subpages ──────────────────────────────────────── */
html[data-theme="dark"] .footer {
  background: #0a0a0e;
}

/* ─── Generic Card Borders for Dark Mode ──────────────────────── */
html[data-theme="dark"] .lp-why-card,
html[data-theme="dark"] .lp-service-card,
html[data-theme="dark"] .lp-solution-card,
html[data-theme="dark"] .lp-faq-item,
html[data-theme="dark"] .audit-card {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ─── Karriere Cards ──────────────────────────────────────────── */
html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .job-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ─── Team Cards (Über uns) ───────────────────────────────────── */
html[data-theme="dark"] .team-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Services Advisor Card ───────────────────────────────────── */
html[data-theme="dark"] .advisor {
  background: transparent !important;
}
html[data-theme="dark"] .advisor-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .advisor-progress-step {
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .advisor-progress-step.active {
  background: var(--pink);
  box-shadow: 0 0 10px rgba(212, 35, 138, 0.4);
}
html[data-theme="dark"] .advisor-step h3 {
  color: #fff;
}
html[data-theme="dark"] .advisor-step-hint {
  color: rgba(255, 255, 255, 0.45);
}
html[data-theme="dark"] .advisor-option {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
html[data-theme="dark"] .advisor-option:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
html[data-theme="dark"] .advisor-option.selected {
  background: rgba(212, 35, 138, 0.12) !important;
  border-color: var(--pink) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px var(--pink), 0 0 20px rgba(212, 35, 138, 0.2) !important;
}
html[data-theme="dark"] .advisor-option-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
html[data-theme="dark"] .advisor-option.selected .advisor-option-icon {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 0 12px rgba(212, 35, 138, 0.4);
}
html[data-theme="dark"] .advisor-nav-back {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .advisor-nav-back:hover {
  color: #fff;
}
html[data-theme="dark"] .advisor-nav-next {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 2px 20px rgba(212, 35, 138, 0.5);
}
html[data-theme="dark"] .advisor-nav-next:hover {
  background: #e83da0;
  box-shadow: 0 4px 28px rgba(212, 35, 138, 0.6);
}
html[data-theme="dark"] .advisor-nav-next:disabled {
  background: rgba(212, 35, 138, 0.3);
  box-shadow: none;
}
html[data-theme="dark"] .advisor-result-title {
  color: #fff;
}
html[data-theme="dark"] .advisor-result-sub {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .advisor-result-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .advisor-result-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 35, 138, 0.3);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .advisor-result-card h4 {
  color: #fff;
}
html[data-theme="dark"] .advisor-result-card p {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .advisor-result-badge {
  background: rgba(212, 35, 138, 0.15);
  color: #e83da0;
}
html[data-theme="dark"] .advisor-result-restart {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .advisor-result-restart:hover {
  color: var(--pink);
}

/* ─── Referenzen Cards ────────────────────────────────────────── */
html[data-theme="dark"] .cs-cta-card {
  background: linear-gradient(135deg, rgba(212,35,138,0.1), rgba(212,35,138,0.04));
}
html[data-theme="dark"] .cs-author-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Glossar / FAQ page cards ────────────────────────────────── */
html[data-theme="dark"] .glossar-card,
html[data-theme="dark"] .glossar-item {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Blog card links + articles ──────────────────────────────── */
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .blog-article-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Kontakt Form ────────────────────────────────────────────── */
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .contact-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Own Tech Mockup (Über uns) ──────────────────────────────── */
html[data-theme="dark"] .own-tech-mockup-header {
  background: linear-gradient(135deg, rgba(26, 10, 46, 0.8), rgba(18, 8, 53, 0.8));
}

/* ─── SEO Found Layer (used on several pages) ─────────────────── */
html[data-theme="dark"] .seo-found-layer--seo {
  background: rgba(212, 35, 138, 0.06);
  border-color: rgba(212, 35, 138, 0.12);
}
html[data-theme="dark"] .seo-found-layer--geo {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.12);
}
html[data-theme="dark"] .seo-found-layer--result {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   HERO VISUAL CARDS — Dark Mode Glassmorphism
   All hero dashboard/mockup cards across all subpages
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Universal Hero Card Glassmorphism ───────────────────────── */
html[data-theme="dark"] .audit-card,
html[data-theme="dark"] .onpage-card,
html[data-theme="dark"] .mobile-card,
html[data-theme="dark"] .kw-card,
html[data-theme="dark"] .backlink-card,
html[data-theme="dark"] .intl-card,
html[data-theme="dark"] .ecom-card,
html[data-theme="dark"] .b2b-card,
html[data-theme="dark"] .cro-card,
html[data-theme="dark"] .strategy-card,
html[data-theme="dark"] .ba-card,
html[data-theme="dark"] .chatbot-card,
html[data-theme="dark"] .workshop-card,
html[data-theme="dark"] .aimaco-dashboard,
html[data-theme="dark"] .maps-card,
html[data-theme="dark"] .hero-budget-card,
html[data-theme="dark"] .ai-card,
html[data-theme="dark"] .serp-card,
html[data-theme="dark"] .ranking-loop .serp-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top-color: rgba(255, 255, 255, 0.08);
  border-left-color: rgba(255, 255, 255, 0.06);
  border-right-color: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.04);
  box-shadow:
    0 4px 32px rgba(0,0,0,0.4),
    0 1px 3px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ─── Card Headers (macOS-style titlebars) ────────────────────── */
html[data-theme="dark"] .audit-header,
html[data-theme="dark"] .audit-dash-header,
html[data-theme="dark"] .onpage-card-header,
html[data-theme="dark"] .mobile-card-header,
html[data-theme="dark"] .kw-card-header,
html[data-theme="dark"] .backlink-header,
html[data-theme="dark"] .intl-card-header,
html[data-theme="dark"] .ecom-card-header,
html[data-theme="dark"] .b2b-card-header,
html[data-theme="dark"] .cro-card-header,
html[data-theme="dark"] .strategy-card-header,
html[data-theme="dark"] .ba-card-header,
html[data-theme="dark"] .chatbot-card-header,
html[data-theme="dark"] .workshop-header,
html[data-theme="dark"] .aimaco-dashboard-header,
html[data-theme="dark"] .maps-card-header,
html[data-theme="dark"] .hero-budget-header,
html[data-theme="dark"] .ai-card-header,
html[data-theme="dark"] .dash-mockup-header,
html[data-theme="dark"] .serp-header {
  background: linear-gradient(135deg, rgba(26, 10, 46, 0.7), rgba(18, 8, 53, 0.7));
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ─── Inner Check/Row Items (gray-50 bg → transparent) ────────── */
html[data-theme="dark"] .onpage-check,
html[data-theme="dark"] .mobile-check,
html[data-theme="dark"] .audit-check {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.75);
}
html[data-theme="dark"] .onpage-check--fail,
html[data-theme="dark"] .mobile-check--fail,
html[data-theme="dark"] .audit-check--fail {
  background: rgba(255, 95, 86, 0.06);
}
html[data-theme="dark"] .onpage-check--warn,
html[data-theme="dark"] .mobile-check--warn,
html[data-theme="dark"] .audit-check--warn {
  background: rgba(245, 158, 11, 0.06);
}

/* ─── Score Bars (pink-pale bg → dark) ────────────────────────── */
html[data-theme="dark"] .onpage-card-score,
html[data-theme="dark"] .mobile-card-score {
  background: linear-gradient(135deg, rgba(212,35,138,0.1), rgba(212,35,138,0.04));
}

/* ─── CRO Card Inner Elements ─────────────────────────────────── */
html[data-theme="dark"] .cro-card-body {
  background: transparent;
}
html[data-theme="dark"] .cro-card-uplift-bar {
  background: rgba(255, 255, 255, 0.06);
}

/* ─── Chatbot Card Messages ───────────────────────────────────── */
html[data-theme="dark"] .chatbot-msg--user {
  background: rgba(212, 35, 138, 0.12);
}
html[data-theme="dark"] .chatbot-msg--bot {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .chatbot-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── AI Card Inner Elements ──────────────────────────────────── */
html[data-theme="dark"] .ai-card-body,
html[data-theme="dark"] .ai-card-item {
  border-color: rgba(255, 255, 255, 0.06);
}

/* ─── Budget/Google Ads Card Inner ────────────────────────────── */
html[data-theme="dark"] .hero-budget-row,
html[data-theme="dark"] .hero-budget-item {
  border-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .hero-budget-bar-track {
  background: rgba(255, 255, 255, 0.06);
}

/* ─── Check/Status Icon Badges (pass/fail/warn) ──────────────── */
html[data-theme="dark"] .onpage-check-icon--pass,
html[data-theme="dark"] .mobile-check-icon--pass,
html[data-theme="dark"] .audit-check-icon--pass {
  background: rgba(39, 201, 63, 0.15);
  color: #4ade80;
}
html[data-theme="dark"] .onpage-check-icon--fail,
html[data-theme="dark"] .mobile-check-icon--fail,
html[data-theme="dark"] .audit-check-icon--fail {
  background: rgba(255, 95, 86, 0.15);
  color: #ff7b74;
}
html[data-theme="dark"] .onpage-check-icon--warn,
html[data-theme="dark"] .mobile-check-icon--warn,
html[data-theme="dark"] .audit-check-icon--warn {
  background: rgba(255, 189, 46, 0.15);
  color: #ffd060;
}

/* ─── Floating Hero Cards (seo-agentur + industry pages) ──────── */
html[data-theme="dark"] .hero-float-card {
  background: rgba(14, 13, 18, 0.85);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  color: rgba(255, 255, 255, 0.9);
}
html[data-theme="dark"] .hero-card-label {
  color: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .hero-card-value {
  color: rgba(255, 255, 255, 0.9);
}

/* ─── Hero Center Icon (seo-agentur/industry pages) ──────────── */
html[data-theme="dark"] .hero-hotel-icon,
html[data-theme="dark"] .hero-center-icon {
  background: linear-gradient(145deg, rgba(212,35,138,0.15), rgba(212,35,138,0.08));
  border-color: rgba(212, 35, 138, 0.25);
}

/* ─── AI Platform Cards (LLMO page) ──────────────────────────── */
html[data-theme="dark"] .ai-card--chatgpt .ai-card-icon {
  background: rgba(16, 185, 129, 0.12);
  color: #4ade80;
}
html[data-theme="dark"] .ai-card--gemini .ai-card-icon {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}
html[data-theme="dark"] .ai-card--perplexity .ai-card-icon {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
}
html[data-theme="dark"] .ai-card--aio .ai-card-icon {
  background: rgba(212, 35, 138, 0.12);
  color: var(--pink);
}

/* ─── SERP Mockup (multiple pages) ────────────────────────────── */
html[data-theme="dark"] .serp-mockup {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .serp-search-bar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .serp-header {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .serp-result,
html[data-theme="dark"] .serp-result-card {
  border-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .serp-ai-box,
html[data-theme="dark"] .serp-ai-card {
  background: rgba(212, 35, 138, 0.06);
  border-color: rgba(212, 35, 138, 0.12);
}

/* ─── Social Media Feed Cards ─────────────────────────────────── */
html[data-theme="dark"] .social-feed-mock {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .feed-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Map Mockup (local-seo) ──────────────────────────────────── */
html[data-theme="dark"] .map-mockup {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .map-top {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.04));
}
html[data-theme="dark"] .map-result,
html[data-theme="dark"] .map-listing {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .map-result--active,
html[data-theme="dark"] .map-listing--active {
  background: rgba(212, 35, 138, 0.08);
  border-color: rgba(212, 35, 138, 0.2);
}

/* ─── Maps Card Inner Elements (local-seo hero) ──────────────── */
html[data-theme="dark"] .maps-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .maps-header-icon {
  background: rgba(16, 185, 129, 0.12);
}
html[data-theme="dark"] .maps-item--active {
  background: linear-gradient(135deg, rgba(212,35,138,0.1), rgba(212,35,138,0.04));
}
html[data-theme="dark"] .maps-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ─── GEO Chat Mockup ─────────────────────────────────────────── */
html[data-theme="dark"] .geo-chat-mockup {
  background: rgba(14, 13, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Audit Dashboard Body (inner sections) ───────────────────── */
html[data-theme="dark"] .audit-dash-body,
html[data-theme="dark"] .audit-checklist {
  background: transparent;
}
html[data-theme="dark"] .audit-dash-bar-track,
html[data-theme="dark"] .audit-ring-bg {
  stroke: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .audit-dash-bar-track {
  background: rgba(255, 255, 255, 0.06);
}

/* ─── Workshop Card Inner Modules ─────────────────────────────── */
html[data-theme="dark"] .workshop-module {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .workshop-module:hover {
  border-color: rgba(212, 35, 138, 0.25);
  box-shadow: 0 2px 12px rgba(212, 35, 138, 0.08);
}
html[data-theme="dark"] .workshop-duration {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .workshop-avatar {
  border-color: rgba(14, 13, 18, 0.8);
}
html[data-theme="dark"] .workshop-progress-track {
  background: rgba(255, 255, 255, 0.06);
}

/* ─── Strategy Card Timeline ──────────────────────────────────── */
html[data-theme="dark"] .strategy-month {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ─── Keyword Card Table ──────────────────────────────────────── */
html[data-theme="dark"] .kw-table th {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .kw-table td {
  border-bottom-color: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
}

/* ─── Backlink Card Elements ──────────────────────────────────── */
html[data-theme="dark"] .backlink-dr-ring-bg,
html[data-theme="dark"] .backlink-da-ring-bg {
  stroke: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .backlink-bar-track {
  background: rgba(255, 255, 255, 0.06);
}

/* ─── Before/After Card ───────────────────────────────────────── */
html[data-theme="dark"] .ba-before,
html[data-theme="dark"] .ba-after {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ─── E-Commerce Card Elements ────────────────────────────────── */
html[data-theme="dark"] .ecom-metric {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ─── B2B Funnel Elements ─────────────────────────────────────── */
html[data-theme="dark"] .b2b-funnel-stage {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ─── Service Visual Boxes (seo-content, seo-agentur pages) ──── */
html[data-theme="dark"] .lp-service-visual {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1.5px solid rgba(255, 255, 255, 0.08);
  border-left: 1.5px solid rgba(255, 255, 255, 0.06);
  border-right: 1.5px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .service-visual-label {
  color: rgba(255, 255, 255, 0.9);
}
html[data-theme="dark"] .service-visual-desc {
  color: rgba(255, 255, 255, 0.5);
}

/* ─── Topic Cluster Visual (seo-content) ─────────────────────── */
html[data-theme="dark"] .tc-cluster {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
html[data-theme="dark"] .tc-line {
  background: rgba(255, 255, 255, 0.15);
}

/* ─── Content Audit Bar Track ────────────────────────────────── */
html[data-theme="dark"] .audit-bar-track {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .audit-bar-label {
  color: rgba(255, 255, 255, 0.6);
}

/* ─── Strategy Step Numbers ──────────────────────────────────── */
html[data-theme="dark"] .strat-step-num {
  background: rgba(212, 35, 138, 0.12);
}
html[data-theme="dark"] .strat-step-text {
  color: rgba(255, 255, 255, 0.8);
}

/* Steps — styles are handled inline on the dark Google Ads LP */

/* ─── FIX: Volvo / testi-featured image area dark mode ─────────── */
html[data-theme="dark"] .testi-featured-img {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .testi-featured-img img {
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .testi-featured-text {
  color: #f0f0f5;
}
html[data-theme="dark"] .testi-featured-mark {
  color: rgba(255, 255, 255, 0.15);
}

/* ─── FIX: Case study cards dark mode ──────────────────────────── */
html[data-theme="dark"] .cs-card-img-wrap {
  background: transparent;
  border-color: transparent;
}
html[data-theme="dark"] .cs-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .cs-tags {
  margin-bottom: 16px;
}
html[data-theme="dark"] .cs-tag {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
}
html[data-theme="dark"] .cs-metrics {
  border-top-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ─── FIX: Blog teaser cards dark mode ─────────────────────────── */
html[data-theme="dark"] .blog-teaser-grid article {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .blog-teaser-grid article div[style*="background:linear-gradient"],
html[data-theme="dark"] .blog-teaser-grid article div[style*="background: linear-gradient"] {
  opacity: 0.4;
}
html[data-theme="dark"] .blog-teaser-grid article h3 {
  color: #f0f0f5 !important;
}
html[data-theme="dark"] .blog-teaser-grid article p {
  color: #9594a3 !important;
}
html[data-theme="dark"] .blog-teaser-grid article time {
  color: #6b6a78 !important;
}

/* ─── FIX: Footer dark mode — headings, links, brand, grid ─────── */
html[data-theme="dark"] .footer-brand p {
  color: #9594a3;
}
html[data-theme="dark"] .footer-brand .nav-logo {
  color: #fff;
}
html[data-theme="dark"] .footer-col .footer-heading {
  color: #7a7989;
}
html[data-theme="dark"] .footer-col ul li a {
  color: #9594a3;
}
html[data-theme="dark"] .footer-col ul li a:hover {
  color: #fff;
}
html[data-theme="dark"] .footer-copy {
  color: #6b6a78;
}
html[data-theme="dark"] .footer-legal a {
  color: #6b6a78;
}
html[data-theme="dark"] .footer-legal a:hover {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES — geo-chat-mockup
   Page-inline CSS is hardcoded dark (rgba(26,26,46,0.65) etc.).
   Force light styling when user toggles to light mode.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .geo-chat-mockup {
  background: #ffffff;
  border: 1px solid var(--gray-200, #d1d1d6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
}
html[data-theme="light"] .geo-chat-header {
  background: var(--gray-50, #f8f8f8);
  border-bottom: 1px solid var(--gray-200, #d1d1d6);
}
html[data-theme="light"] .geo-chat-title {
  color: var(--gray-500, #6e6e73);
}
html[data-theme="light"] .geo-chat-avatar--user {
  background: var(--gray-100, #f2f2f7);
  color: var(--gray-500, #6e6e73);
}
html[data-theme="light"] .geo-chat-bubble--user {
  background: var(--gray-100, #f2f2f7);
  color: var(--gray-700, #3a3a3c);
}
html[data-theme="light"] .geo-chat-bubble--ai {
  background: #fdf0f8;
  color: var(--gray-700, #3a3a3c);
  border-color: rgba(212, 35, 138, 0.2);
}
html[data-theme="light"] .geo-chat-bubble--ai strong {
  color: var(--pink, #d4238a);
}
html[data-theme="light"] .geo-chat-typing span {
  background: var(--gray-400, #8e8e93);
}
html[data-theme="light"] .geo-chat-sources {
  border-top-color: var(--gray-200, #d1d1d6);
}
html[data-theme="light"] .geo-chat-sources-label {
  color: var(--gray-500, #6e6e73);
}
html[data-theme="light"] .geo-chat-source {
  background: #fdf0f8;
  color: var(--pink, #d4238a);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES — hs-form-wrapper (kontakt, analyse pages)
   HubSpot form iframe is always light. Keep wrapper light in dark mode
   so labels/inputs inside the iframe remain readable on a matching surface.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .hs-form-wrapper {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════
   Projekt-Webdesign accent band (services/webdesign) — always dark by
   design (hardcoded colours, no var remap). In dark mode the band sits
   on a dark body, so lift the border/glow for separation.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .projekt-band {
  border-color: rgba(212, 35, 138, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════
   Service-Berater (homepage #berater) — pills + recommendation box.
   Light gradients use light tints that do NOT remap → override to dark
   glass so they don't become light islands. Accent fills (pink/indigo)
   are hardcoded and stay; only the neutral surfaces flip.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .svc-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f0f0f5;
}
html[data-theme="dark"] .svc-pill:hover { border-color: rgba(255, 255, 255, 0.28); }
html[data-theme="dark"] .svc-rec--seo,
html[data-theme="dark"] .svc-rec--local {
  background: linear-gradient(120deg, rgba(212, 35, 138, 0.12) 0%, rgba(255, 255, 255, 0.03) 62%);
  border-color: rgba(212, 35, 138, 0.28);
}
html[data-theme="dark"] .svc-rec--llmo {
  background: linear-gradient(120deg, rgba(91, 75, 224, 0.14) 0%, rgba(255, 255, 255, 0.03) 62%);
  border-color: rgba(91, 75, 224, 0.28);
}
html[data-theme="dark"] .svc-rec--geo {
  background: linear-gradient(120deg, rgba(212, 35, 138, 0.12) 0%, rgba(91, 75, 224, 0.12) 100%);
  border-color: rgba(124, 76, 200, 0.3);
}
html[data-theme="dark"] .svc-rec-desc { color: rgba(255, 255, 255, 0.62); }