/* Extracted from /dark-preview.html — shared platform layout styles */

a { color: inherit; }

html,body{overflow-x:hidden;}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── GEIST FONT FAMILY — global override ─── */
html, body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, span, a, li, div, label {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
}

/* Map all legacy font families to Geist / Geist Mono */
[style*="DM Sans"],
[style*="'DM Sans'"],
[style*="Instrument Serif"],
[style*="'Instrument Serif'"] {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

[style*="DM Mono"],
[style*="'DM Mono'"] {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
}

/* Replace serif display headings with bold Geist for modern look */
.hero h1,
h1,
h2.sec-title,
.cta-box h2,
.price-amount,
.dpr-name {
  font-family: 'Geist', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}

/* Italic emphasis (formerly Instrument Serif italic) — keep gradient teal, drop italic for cleaner modern look */
.hero h1 em,
h1 em,
h2.sec-title em,
.cta-box h2 em {
  font-style: normal !important;
  font-weight: 800 !important;
}

/* Mono contexts */
.price-tier,
.dpr-price-big,
.dpr-tier,
.hero-stat-num,
.stat-box-num,
.spec-price,
.bar-label,
.bar-count,
.ticker-item,
.ret-table td,
.step-n,
.pain-num,
.sec-tag {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
}

/* Tune body text for readability */
body {
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  letter-spacing: -0.005em;
}

html, body {
  background-color: #0A0B0D !important;
  color-scheme: dark only;
}

:root {
  --white: #121316;
  --off: #121316;
  --off2: #22252B;
  --border: #2A2D33;
  --border-dark: #3A3E46;
  --text: #F5F6F7;
  --text-2: #D0D2D7;
  --text-3: #A0A4AB;
  --text-4: #6B7076;
  --accent: #00D2BE;
  --ink: #F5F6F7;
  --green: #00D2BE;
  --green-bg: rgba(0, 210, 190, 0.12);
  --blue: #3B82F6;
  --blue-bg: rgba(59, 130, 246, 0.12);
  --amber: #F59E0B;
  --amber-bg: rgba(245, 158, 11, 0.12);
  --r: 10px;
  --r-sm: 6px;
  --r-lg: 16px;

  /* Dark mode surfaces */
  --bg-base: #0A0B0D;
  --bg-surface: #121316;
  --bg-elevated: #1A1C20;
  --bg-hover: #22252B;
  --border-subtle: #22252B;
  --border-default: #2A2D33;
  --border-strong: #3A3E46;
  --text-primary: #F5F6F7;
  --text-secondary: #A0A4AB;
  --text-muted: #6B7076;
  --accent-color: #00D2BE;
  --accent-hover: #26D9C4;
  --accent-soft: rgba(0, 210, 190, 0.12);
  --accent-glow: rgba(0, 210, 190, 0.35);
}

html { scroll-behavior: smooth; }

body {
  background: #0A0B0D !important;
  background-color: #0A0B0D !important;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 1;
}

/* Carbon grain texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  z-index: 0;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }

/* ─── NAV ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(10, 11, 13, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-default);
  padding: 0;
}
.nav-inner {
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.3px;
  display: flex; align-items: center; gap: 6px;
}
.logo-mark {
  width: 22px; height: 22px;
  background: var(--ink);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
}
.logo-mark svg { width: 12px; height: 12px; fill: #0A0B0D; }
.nav-links {
  display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.nav-links a {
  color: var(--text-3);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  transition: all 0.15s;
}
.nav-links a:hover { color: var(--text); background: var(--bg-elevated); }
.nav-cta {
  background: #00D2BE !important;
  color: #000 !important;
  padding: 8px 16px !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.nav-cta:hover { background: #26D9C4 !important; }

/* ─── HERO ─── */
.hero {
  padding: 110px 0 60px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* ─── AURORA MESH GRADIENT (Stripe/Linear-style ambient blobs) ─── */
.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-aurora .aur-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  animation: auroraFadeIn 2.5s ease-out 0.3s forwards;
  will-change: transform;
}
.hero-aurora .aur-1 {
  width: 620px; height: 620px;
  top: -180px; left: -120px;
  background: radial-gradient(circle, rgba(0, 210, 190, 0.55), transparent 70%);
  animation: auroraFadeIn 2.5s ease-out 0.3s forwards, auroraDrift1 26s ease-in-out 2.8s infinite;
}
.hero-aurora .aur-2 {
  width: 520px; height: 520px;
  top: 40%; right: -140px;
  background: radial-gradient(circle, rgba(38, 217, 196, 0.42), transparent 70%);
  animation: auroraFadeIn 2.5s ease-out 0.6s forwards, auroraDrift2 32s ease-in-out 3.1s infinite;
}
.hero-aurora .aur-3 {
  width: 480px; height: 480px;
  bottom: -120px; left: 30%;
  background: radial-gradient(circle, rgba(0, 168, 150, 0.4), transparent 70%);
  animation: auroraFadeIn 2.5s ease-out 0.9s forwards, auroraDrift3 38s ease-in-out 3.4s infinite;
}
@keyframes auroraFadeIn {
  to { opacity: 1; }
}
@keyframes auroraDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(80px, 60px) scale(1.08); }
  66%      { transform: translate(-40px, 80px) scale(0.95); }
}
@keyframes auroraDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-120px, -60px) scale(1.12); }
}
@keyframes auroraDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(60px, -100px) scale(0.92); }
  70%      { transform: translate(-80px, -40px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aurora .aur-blob { animation: auroraFadeIn 1s ease-out forwards !important; }
}
@media (max-width: 768px) {
  .hero-aurora .aur-blob { filter: blur(60px); }
  .hero-aurora .aur-1 { width: 380px; height: 380px; }
  .hero-aurora .aur-2 { width: 320px; height: 320px; }
  .hero-aurora .aur-3 { width: 300px; height: 300px; }
}

/* ─── DOTTED GRID (Railway/Supabase — Platform Overview only) ─── */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 210, 190, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 210, 190, 0.14) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, rgba(0,0,0,1) 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, rgba(0,0,0,1) 40%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}
.grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 210, 190, 0.35) 1.3px, transparent 1.5px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, rgba(0,0,0,1) 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, rgba(0,0,0,1) 40%, transparent 85%);
  pointer-events: none;
}

/* ─── HORIZONTAL BARS (Billing section — bonus tier visual metaphor) ─── */
.bars-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bars-bg .bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0, 210, 190, 0.28) 40%, rgba(0, 210, 190, 0.28) 60%, transparent);
}
.bars-bg .bar-thick {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 210, 190, 0.15), transparent);
}
/* Render bars as a graphic pattern showing ascending bonus tier widths */
.bars-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 20%, rgba(0, 210, 190, 0.08) 22%, rgba(0, 210, 190, 0.08) 30%, transparent 32%),
    linear-gradient(90deg, transparent 20%, rgba(0, 210, 190, 0.10) 22%, rgba(0, 210, 190, 0.10) 42%, transparent 44%),
    linear-gradient(90deg, transparent 20%, rgba(0, 210, 190, 0.12) 22%, rgba(0, 210, 190, 0.12) 55%, transparent 57%),
    linear-gradient(90deg, transparent 20%, rgba(0, 210, 190, 0.14) 22%, rgba(0, 210, 190, 0.14) 68%, transparent 70%),
    linear-gradient(90deg, transparent 20%, rgba(0, 210, 190, 0.16) 22%, rgba(0, 210, 190, 0.16) 80%, transparent 82%);
  background-repeat: no-repeat;
  background-position: 0 25%, 0 40%, 0 55%, 0 70%, 0 85%;
  background-size: 100% 18px, 100% 18px, 100% 18px, 100% 18px, 100% 18px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,1) 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,1) 30%, transparent 90%);
}

/* ─── CONCENTRIC RINGS (Credit Tiers section — tier system visual) ─── */
.rings-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rings-bg::before {
  content: '';
  width: 1200px;
  height: 1200px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 158px, rgba(0, 210, 190, 0.18) 159px 160px, transparent 161px 258px, rgba(0, 210, 190, 0.14) 259px 260px, transparent 261px 378px, rgba(0, 210, 190, 0.10) 379px 380px, transparent 381px 518px, rgba(0, 210, 190, 0.07) 519px 520px, transparent 521px);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 20%, transparent 70%);
  animation: ringsRotate 80s linear infinite;
}
@keyframes ringsRotate {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rings-bg::before { animation: none; }
}

/* ─── RADIAL FOCAL GLOW (Final CTA — dramatic focus) ─── */
.focal-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0, 210, 190, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0, 210, 190, 0.08) 0%, transparent 30%);
}
.focal-bg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 210, 190, 0.22), transparent 60%);
  filter: blur(40px);
  animation: focalPulse 6s ease-in-out infinite;
}
@keyframes focalPulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .focal-bg::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SUBTLE TECH BACKGROUNDS - clean, modern, SaaS
   ════════════════════════════════════════════════════════════════════ */



/* ─── HERO ANIMATED BACKGROUND ─── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 210, 190, 0.10) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0, 210, 190, 0.07) 0%, transparent 45%);
  pointer-events: none;
}
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.55;
}
.hero-chart {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 72%;
  opacity: 1;
  pointer-events: none;
}
.hero-chart .chart-line {
  fill: none;
  stroke: #00D2BE;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(0, 210, 190, 1)) drop-shadow(0 0 28px rgba(0, 210, 190, 0.5));
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  animation: drawChart 22s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards,
             pulseChart 6s ease-in-out 23.5s infinite;
}
.hero-chart .chart-fill {
  fill: url(#chartGradient);
  opacity: 0;
  animation: fadeInFill 4.5s ease-out 15s forwards;
}

/* "SERPpro activated" inflection marker */
.hero-chart .chart-activation {
  opacity: 0;
  animation: fadeInLabel 1.2s ease-out 10s forwards;
}
.hero-chart .chart-act-pill {
  fill: rgba(0, 210, 190, 0.18);
  stroke: rgba(0, 210, 190, 0.6);
  stroke-width: 1;
}
.hero-chart .chart-act-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  fill: #00D2BE;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* BEFORE / AFTER period labels */
.hero-chart .chart-period-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  fill: rgba(161, 161, 170, 0.55);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeInLabel 1.8s ease-out forwards;
}
.hero-chart .chart-period-label.chart-period-after { fill: rgba(0, 210, 190, 0.85); }

/* Animated live counter */
.hero-chart .chart-counter {
  font-family: 'Geist Mono', monospace;
  font-size: 26px;
  font-weight: 600;
  fill: #00D2BE;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 0 6px rgba(0, 210, 190, 0.6));
  opacity: 0;
  animation: fadeInLabel 1.5s ease-out 1.2s forwards;
}

/* Chart axis / legend label */
.hero-chart .chart-axis-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  fill: rgba(0, 210, 190, 0.85);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeInLabel 1.5s ease-out 0.3s forwards;
}
.hero-chart .chart-axis-label-line {
  stroke: rgba(0, 210, 190, 0.4);
  stroke-width: 1;
  opacity: 0;
  animation: fadeInLabel 1.5s ease-out 0.3s forwards;
}
.hero-chart .chart-dot {
  fill: #00D2BE;
  filter: drop-shadow(0 0 8px rgba(0, 210, 190, 0.9));
  opacity: 0;
  animation: popDot 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.hero-chart .chart-dot-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  fill: #00D2BE;
  opacity: 0;
  animation: fadeInLabel 1.4s ease-out forwards;
}
@keyframes drawChart { to { stroke-dashoffset: 0; } }
@keyframes fadeInFill { to { opacity: 1; } }
@keyframes popDot { to { opacity: 1; } }
@keyframes fadeInLabel { to { opacity: 0.9; } }
@keyframes pulseChart {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(0, 210, 190, 0.9)) drop-shadow(0 0 24px rgba(0, 210, 190, 0.4)); }
  50%      { filter: drop-shadow(0 0 18px rgba(0, 210, 190, 1)) drop-shadow(0 0 36px rgba(0, 210, 190, 0.6)); }
}
.hero > .container { position: relative; z-index: 2; }
@media (max-width: 768px) {
  #heroCanvas { display: none; }
  .hero-chart { opacity: 1; height: 55%; }
  .hero h1 { white-space: normal !important; font-size: clamp(30px, 7vw, 40px) !important; }
  .hero h1 span { display: block !important; }
}
@media (max-width: 960px) {
  .hero .container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero h1 { white-space: normal !important; }
  .hero div[style*="transform:scale"] { transform: none !important; margin-right: 0 !important; margin-top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chart .chart-line,
  .hero-chart .chart-fill,
  .hero-chart .chart-dot,
  .hero-chart .chart-dot-label {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
  #heroCanvas { display: none; }
}

.agencies-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.agencies-badge::before {
  content: '';
  width: 5px; height: 5px;
  background: #00D2BE;
  border-radius: 50%;
}
.hero-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.hero-label-line {
  width: 24px; height: 1px;
  background: #00D2BE;
}
.hero h1 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(40px, 5.4vw, 78px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 900px;
  margin: 0 auto 24px;
}
.hero h1 em {
  font-style: italic;
  background: linear-gradient(90deg, #00D2BE, #4DE0CE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #00D2BE;
  border: 3px solid #1A1C20;
  box-shadow: 0 2px 8px rgba(0,210,190,0.3);
  cursor: pointer;
  margin-top: -8px;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #00D2BE;
  border: 3px solid #1A1C20;
  box-shadow: 0 2px 8px rgba(0,210,190,0.3);
  cursor: pointer;
}
.hero-rotate {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}
.hero-rotate .typed-text {
  border-right: 2px solid #00D2BE;
  animation: blink-caret 0.7s step-end infinite;
}
.hero-rotate .typed-text.done {
  border-right-color: transparent;
  animation: none;
}
.hero-rotate .typed-spacer {
  visibility: hidden;
  height: 0;
  display: block;
  overflow: hidden;
}
@keyframes blink-caret {
  0%, 100% { border-color: #00D2BE; }
  50% { border-color: transparent; }
}
.hero-sub {
  font-size: 17px;
  color: var(--text-3);
  max-width: 500px;
  line-height: 1.7;
  margin-bottom: 40px;
  font-weight: 400;
}
.hero-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 60px;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: #00D2BE;
  color: #000;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: -0.1px;
  box-shadow: 0 0 0 1px #00D2BE, 0 4px 12px rgba(0, 210, 190, 0.35);
}
.btn-primary:hover { background: #26D9C4; transform: translateY(-1px); box-shadow: 0 0 0 1px #26D9C4, 0 6px 20px rgba(0, 210, 190, 0.45); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-primary);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  transition: all 0.2s;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.btn-secondary:hover { border-color: #00D2BE; color: #00D2BE; background: var(--bg-hover); }

.hero-stats {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-surface);
  width: fit-content;
}
.hero-stat {
  padding: 20px 28px;
  border-right: 1px solid var(--border);
}
.hero-stat:last-child { border-right: none; }
.hero-stat-num {
  font-family: 'DM Mono', monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.hero-stat-label {
  font-size: 12px;
  color: var(--text-4);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ─── TICKER ─── */
.ticker-strip {
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-surface);
}
.ticker-track {
  display: flex; gap: 40px;
  animation: ticker 50s linear infinite;
  width: max-content;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  font-family: 'DM Mono', monospace;
}
.ticker-sep { color: var(--border-strong); font-size: 14px; }
.ticker-dr {
  color: var(--text-4);
  font-size: 11px;
}

/* ─── SECTION HEADERS ─── */
.sec-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00D2BE;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.sec-tag::before {
  content: '';
  width: 16px; height: 1px;
  background: #00D2BE;
}
h2.sec-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}
h2.sec-title em {
  font-style: italic;
  background: linear-gradient(90deg, #00D2BE, #4DE0CE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec-desc {
  font-size: 16px;
  color: var(--text-3);
  max-width: 480px;
  line-height: 1.7;
}

/* ─── PAIN SECTION ─── */
.pain { padding: 100px 0; position: relative; overflow: hidden; }
.pain-intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end;
  margin-bottom: 56px;
}
.pain-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pain-card {
  padding: 32px 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: background 0.2s;
}
.pain-card:nth-child(3n) { border-right: none; }
.pain-card:nth-child(4), .pain-card:nth-child(5), .pain-card:nth-child(6) { border-bottom: none; }
.pain-card:hover { background: var(--bg-hover); }
.pain-num {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-4);
  margin-bottom: 16px;
  letter-spacing: 0.06em;
}
.pain-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.35;
  letter-spacing: -0.2px;
}
.pain-card p {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.65;
  margin-bottom: 16px;
}
.pain-quote {
  font-size: 13px;
  color: var(--text-3);
  font-style: italic;
  padding: 10px 14px;
  background: var(--bg-base);
  border-radius: var(--r-sm);
  line-height: 1.55;
  border-left: 2px solid #00D2BE;
}

/* ─── NETWORK ─── */
.network { padding: 100px 0; background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.network-layout {
  display: grid; grid-template-columns: 5fr 4fr; gap: 80px; align-items: start;
}
.stat-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 40px;
}
.stat-box {
  background: var(--bg-elevated);
  padding: 24px 20px;
  transition: background 0.2s;
}
.stat-box:hover { background: var(--bg-hover); }
.stat-box-num {
  font-family: 'DM Mono', monospace;
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.03em;
}
.stat-box-label { font-size: 12px; color: var(--text-4); font-weight: 500; }

/* BARS */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
  min-width: 58px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.bar-track {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: #00D2BE;
  border-radius: 2px;
  width: 0%;
  transition: width 1.4s cubic-bezier(0.16,1,0.3,1);
}
.bar-count {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-4);
  min-width: 36px;
  text-align: right;
}
.bar-note { font-size: 11px; color: var(--text-4); min-width: 120px; }

/* ─── SERVICES ─── */
.services { padding: 100px 0; }
.tabs-row {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-row::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 10px 18px;
  border: none; background: transparent;
  font-size: 14px; font-weight: 500;
  color: var(--text-4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: -0.1px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-btn:hover { color: var(--text-2); }
.tab-btn.active { color: #00D2BE; border-bottom-color: #00D2BE; font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.price-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.price-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  background: var(--bg-elevated);
  transition: all 0.2s;
  position: relative;
}
.price-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.price-card.pop {
  border-color: #00D2BE;
  background: #00D2BE;
  color: #000;
}
.price-tier {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-4);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.price-card.pop .price-tier { color: rgba(0,0,0,0.6); }
.price-type { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 20px; }
.price-card.pop .price-type { color: #000; }
.price-amount {
  font-family: 'Instrument Serif', serif;
  font-size: 38px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}
.price-card.pop .price-amount { color: #000; }
.price-per { font-size: 12px; color: var(--text-4); margin-bottom: 22px; }
.price-card.pop .price-per { color: rgba(0,0,0,0.6); }
.price-feats { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.price-feats li {
  font-size: 13px; color: var(--text-3);
  display: flex; align-items: center; gap: 8px;
}
.price-card.pop .price-feats li { color: rgba(0,0,0,0.7); }
.feat-dot {
  width: 4px; height: 4px;
  background: var(--border-strong);
  border-radius: 50%; flex-shrink: 0;
}
.price-card.pop .feat-dot { background: rgba(0,0,0,0.35); }

/* Pop card CTA override — inside .pop cards, btn-primary should be black bg with teal text */
.price-card.pop .btn-primary {
  background: #000 !important;
  color: #00D2BE !important;
  box-shadow: 0 0 0 1px #000, 0 4px 12px rgba(0,0,0,0.4) !important;
}
.price-card.pop .btn-primary:hover {
  background: #111 !important;
  box-shadow: 0 0 0 1px #111, 0 6px 20px rgba(0,0,0,0.5) !important;
}

/* DPR cards */
.dpr-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.dpr-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  background: var(--bg-elevated);
  transition: all 0.2s;
}
.dpr-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.dpr-card.mid { background: var(--bg-hover); border-color: var(--border-strong); }
.dpr-tier { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); margin-bottom: 10px; }
.dpr-name {
  font-family: 'Instrument Serif', serif;
  font-size: 30px; font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.dpr-links-text { font-size: 13px; color: var(--text-3); margin-bottom: 24px; }
.dpr-price-big {
  font-family: 'DM Mono', monospace;
  font-size: 30px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-bottom: 3px;
}
.dpr-mo { font-size: 13px; color: var(--text-4); margin-bottom: 28px; }
.dpr-feats { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dpr-feats li { font-size: 14px; color: var(--text-3); display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.ck { color: #00D2BE; font-size: 13px; flex-shrink: 0; margin-top: 1px; }

/* specialty */
.spec-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.spec-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 18px;
  background: var(--bg-elevated);
  transition: all 0.2s;
}
.spec-card:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.spec-tag {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.tag-green { background: rgba(0, 210, 190, 0.12); color: #00D2BE; }
.tag-blue { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.tag-amber { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.spec-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.spec-price {
  font-family: 'DM Mono', monospace;
  font-size: 20px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.spec-feats { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.spec-feats li { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }

/* ─── RETAINER ─── */
.retainer { padding: 100px 0; background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.retainer-layout { display: grid; grid-template-columns: 2fr 3fr; gap: 80px; align-items: start; }
.ret-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}
.ret-table th {
  padding: 12px 20px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.ret-table td {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  font-family: 'DM Mono', monospace;
  transition: background 0.15s;
}
.ret-table tr:last-child td { border-bottom: none; }
.ret-table tr:hover td { background: var(--bg-hover); }
.ret-table td:first-child { color: var(--ink); font-weight: 500; }
.ret-table td.bonus { color: #00D2BE; font-weight: 500; }
.ret-table td.pct { color: var(--text-3); font-size: 13px; }

/* ─── HOW IT WORKS ─── */
.how { padding: 100px 0; }
.how-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  margin-top: 56px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.how-step {
  padding: 32px 28px;
  border-right: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: background 0.2s;
}
.how-step:last-child { border-right: none; }
.how-step:hover { background: var(--bg-hover); }
.step-n {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #00D2BE;
  margin-bottom: 16px;
  letter-spacing: 0.06em;
}
.how-step h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.2px;
  line-height: 1.35;
}
.how-step p { font-size: 13.5px; color: var(--text-3); line-height: 1.65; }

/* ─── TESTIMONIALS ─── */
.testimonials { padding: 100px 0; background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.test-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
.test-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  background: var(--bg-elevated);
  transition: all 0.2s;
}
.test-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.test-stars { color: var(--amber); font-size: 12px; letter-spacing: 1px; margin-bottom: 14px; }
.test-text {
  font-size: 15px; color: var(--text-2);
  line-height: 1.65; margin-bottom: 22px;
  font-style: italic;
}
.test-author { display: flex; align-items: center; gap: 11px; }
.test-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  font-family: 'DM Sans', sans-serif;
  flex-shrink: 0;
}
.test-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.test-role { font-size: 12px; color: var(--text-4); }

/* ─── CTA ─── */
.cta-section { padding: 100px 0; }
.cta-box {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 72px 64px;
  text-align: center;
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: #00D2BE;
}
.cta-box h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 16px;
}
.cta-box h2 em {
  font-style: italic;
  background: linear-gradient(90deg, #00D2BE, #4DE0CE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-box p { font-size: 16px; color: var(--text-3); max-width: 420px; margin: 0 auto 36px; line-height: 1.7; }
.cta-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cta-trust {
  margin-top: 24px;
  font-size: 12.5px;
  color: var(--text-4);
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.trust-item { display: flex; align-items: center; gap: 5px; }
.trust-item svg { width: 13px; height: 13px; }

/* ─── NAV DROPDOWNS ─── */
.nav-dropdown { position: relative; }
.nav-dropdown > a { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown > a::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.5;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 0;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 200;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0; right: 0;
  height: 12px;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown:first-child .nav-dropdown-menu {
  min-width: 520px; left: 0; transform: none; padding: 16px 0;
  grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 0;
}
.nav-dropdown:first-child .nav-dropdown-menu .nav-dropdown-label[style*="margin-top"] { margin-top: 0 !important; grid-row: 1; }
.nav-dropdown:first-child:hover .nav-dropdown-menu { display: grid; }
.nav-dropdown-menu a {
  display: block !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
  border-radius: 0 !important;
  background: none !important;
}
.nav-dropdown-menu a:hover { background: var(--bg-hover) !important; color: var(--text) !important; }
.nav-dropdown-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 6px 18px 4px;
  pointer-events: none;
}

/* Resources mega dropdown — 3 columns */
.nav-dropdown.resources-dropdown .nav-dropdown-menu {
  min-width: 560px; left: 50%; transform: translateX(-50%); padding: 16px 0;
  grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 0;
}
.nav-dropdown.resources-dropdown:hover .nav-dropdown-menu { display: grid; }

/* ─── FOOTER ─── */
footer {
  border-top: 1px solid var(--border);
  padding: 60px 0 40px;
  background: var(--bg-base);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand p { font-size: 13px; color: var(--text-3); line-height: 1.6; margin-top: 12px; max-width: 260px; }
.footer-col h4, .footer-col .footer-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: 13px; color: var(--text-3); text-decoration: none; transition: color 0.15s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: 12.5px; color: var(--text-4); }
.footer-legal { display: flex; gap: 16px; list-style: none; }
.footer-legal a { font-size: 12px; color: var(--text-4); text-decoration: none; }
.footer-legal a:hover { color: var(--text-2); }

/* ─── FADE ANIMATION ─── */
.reveal { transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* ─── DISABLE ALL ANIMATIONS ON MOBILE ─── */
@media (max-width: 960px) {
  .guarantee-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .guarantee-card { text-align: center; }
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4, .reveal-d5 { transition-delay: 0s !important; }
  .ticker-track { animation-duration: 30s !important; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 960px) {
  .guarantee-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .guarantee-card { text-align: center; }
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .container { padding: 0 24px; }
  .hero .container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero picture { display: none !important; }
  .hero div:has(> picture) { display: none !important; }
  .hero .reveal-d5 { display: none !important; }
  .pain-grid { grid-template-columns: 1fr 1fr; }
  .pain-card:nth-child(3n) { border-right: 1px solid var(--border); }
  .pain-card:nth-child(2n) { border-right: none; }
  .pain-card:nth-child(5), .pain-card:nth-child(6) { border-bottom: none; }
  .network-layout { grid-template-columns: 1fr; gap: 48px; }
  .price-grid { grid-template-columns: 1fr 1fr; }
  .dpr-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .retainer-layout { grid-template-columns: 1fr; gap: 40px; }
  .how-grid { grid-template-columns: 1fr 1fr; }
  .how-step:nth-child(2) { border-right: none; }
  .how-step:nth-child(3) { border-right: 1px solid var(--border); }
  .test-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; }
  .hero-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .hero-stat:last-child { border-bottom: none; }
  .pain-intro { grid-template-columns: 1fr; gap: 24px; }
  .hamburger { display: flex !important; }
  .nav-links { display: none !important; position: fixed; top: 60px; left: 0; right: 0; background: var(--bg-surface); flex-direction: column; align-items: stretch; gap: 0; padding: 16px 24px 32px; overflow-y: auto; z-index: 99; max-height: calc(100vh - 60px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); border-top: 1px solid var(--border); }
  .nav-links.open { display: flex !important; }
  .nav-links li { border-bottom: 1px solid var(--border); }
  .nav-links li.nav-dropdown { display: none !important; }
  .nav-links a { display: block; padding: 14px 0; font-size: 16px; }
  .nav-links .nav-cta { font-size: 16px !important; padding: 14px 0 !important; background: none !important; color: var(--text) !important; text-align: left !important; border-radius: 0 !important; }

  .cta-box { padding: 48px 32px; }
  /* Footer: force both main + extended footer-grids (with inline styles) to 2 cols */
  footer .footer-grid,
  footer .footer-grid[style] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  footer .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .footer-bottom > div { text-align: left !important; margin-top: 0 !important; }

  /* Proof of Placement: ensure slider shows on mobile */
  .proof-slide { width: 260px !important; height: 155px !important; }

  /* Backlinks matter section: stack on mobile */
  section > .container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Package generator form: stack on mobile */
  div[style*="grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px"] {
    grid-template-columns: 1fr !important;
  }

  /* Stat row in publisher network: 2 cols on mobile */
  .stat-row { grid-template-columns: 1fr 1fr !important; }

  /* Bar chart notes: hide on mobile to save space */
  .bar-note { display: none; }
}
@media (max-width: 600px) {
  .price-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .how-step { border-right: none !important; border-bottom: 1px solid var(--border); }
  .how-step:last-child { border-bottom: none; }
  .pain-grid { grid-template-columns: 1fr; }
  .pain-card { border-right: none !important; }
  /* Stack all footer grids to 1 col on phones */
  footer .footer-grid,
  footer .footer-grid[style] { grid-template-columns: 1fr !important; gap: 24px !important; }
  footer .footer-brand { grid-column: auto; }

  /* Proof slider: smaller on phones */
  .proof-slide { width: 220px !important; height: 132px !important; }

  /* Stat row in publisher network: single col on small phones */
  .stat-row { grid-template-columns: 1fr !important; }
}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:28px;height:28px;cursor:pointer;background:none;border:none;padding:0;z-index:101}.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s}.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── DARK MODE OVERRIDES FOR INLINE STYLES ─── */

/* Override any inline background:white or background:#ffffff */
[style*="background:white"],
[style*="background: white"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background:#FFFFFF"],
[style*="background: #FFFFFF"],
[style*="background:#fff"],
[style*="background: #fff"] {
  background: var(--bg-elevated) !important;
}

/* Override inline color references to light mode values */
[style*="color:#444"] { color: var(--text-2) !important; }
[style*="color: #444"] { color: var(--text-2) !important; }
[style*="color:#888"] { color: var(--text-4) !important; }
[style*="color: #888"] { color: var(--text-4) !important; }

/* Override inline border colors that reference light values */
[style*="border:1px solid rgba(0,0,0,0.08)"],
[style*="border-top:1px solid rgba(0,0,0,0.08)"] {
  border-color: var(--border) !important;
}

/* Form inputs in dark mode */
input, select, textarea {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #00D2BE !important;
}
input::placeholder { color: var(--text-4) !important; }
select option { background: var(--bg-elevated); color: var(--text); }
select optgroup { background: var(--bg-surface); color: var(--text-3); }

/* Package generator results box */
#pkgResults { border-color: var(--border) !important; }
#pkgError { background: rgba(220, 38, 38, 0.12) !important; border-color: rgba(220, 38, 38, 0.3) !important; color: #F87171 !important; }

/* Guarantee section coupon result box */
div[style*="background:var(--green-bg)"],
div[style*="background: var(--green-bg)"] {
  border-color: rgba(0, 210, 190, 0.3) !important;
}

/* Proof slider dark bg */
.proof-slide {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
.proof-slide-label {
  color: var(--text-2) !important;
}

/* Dark mode preview floating label */
.dark-preview-label {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
  background: rgba(0, 210, 190, 0.12);
  border: 1px solid rgba(0, 210, 190, 0.3);
  color: #00D2BE;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Override pop card inline style that sets background:white;color:var(--ink) */
.price-card.pop a.btn-primary[style*="background:white"] {
  background: #000 !important;
  color: #00D2BE !important;
}

/* Senja embed container */
.senja-embed { position: relative; z-index: 1; }

/* ─── Senja widget — DARK MODE ONLY — scoped to prevent leak to light ─── */
html[data-theme="dark"] .senja-embed,
html[data-theme="dark"] .senja-embed * {
  color: #F5F6F7 !important;
}
/* Preserve star fills in both modes */
.senja-embed svg[class*="star"],
.senja-embed [class*="star"] svg,
.senja-embed svg[data-icon="star"] {
  fill: #FBBF24 !important;
}
/* Transparent outer wrapper in both modes */
.senja-embed,
.senja-embed > div[class*="container"],
.senja-embed > div[class*="wrapper"] {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-theme="dark"] .senja-embed [style*="color:#"],
html[data-theme="dark"] .senja-embed [style*="color: #"],
html[data-theme="dark"] .senja-embed [style*="color:rgb"],
html[data-theme="dark"] .senja-embed [style*="color: rgb"] {
  color: #F5F6F7 !important;
}
html[data-theme="dark"] .senja-embed [style*="opacity:0.5"],
html[data-theme="dark"] .senja-embed [style*="opacity: 0.5"],
html[data-theme="dark"] .senja-embed [style*="opacity:0.6"],
html[data-theme="dark"] .senja-embed [style*="opacity: 0.6"],
html[data-theme="dark"] .senja-embed [style*="opacity:0.7"],
html[data-theme="dark"] .senja-embed [style*="opacity: 0.7"] {
  opacity: 0.9 !important;
}

/* ─── Senja slider DARK MODE bubble styling ─── */
html[data-theme="dark"] .senja-slider-wide [class*="card"],
html[data-theme="dark"] .senja-slider-wide [class*="tile"],
html[data-theme="dark"] .senja-slider-wide [class*="bubble"],
html[data-theme="dark"] .senja-slider-wide [class*="testimonial"],
html[data-theme="dark"] .senja-slider-wide article,
html[data-theme="dark"] .senja-slider-wide [role="article"],
html[data-theme="dark"] .senja-slider-wide [class*="slide"] > div,
html[data-theme="dark"] .senja-slider-wide [data-testimonial],
html[data-theme="dark"] .senja-slider-wide div[style*="background: white"],
html[data-theme="dark"] .senja-slider-wide div[style*="background:white"],
html[data-theme="dark"] .senja-slider-wide div[style*="background: #fff"],
html[data-theme="dark"] .senja-slider-wide div[style*="background:#fff"],
html[data-theme="dark"] .senja-slider-wide div[style*="background-color: white"],
html[data-theme="dark"] .senja-slider-wide div[style*="background-color:white"],
html[data-theme="dark"] .senja-slider-wide div[style*="background-color: #fff"],
html[data-theme="dark"] .senja-slider-wide div[style*="background-color:#fff"] {
  background: #1A1C20 !important;
  background-color: #1A1C20 !important;
  color: #F5F6F7 !important;
  border-color: #2A2D33 !important;
}
/* Avatar images stay visible in both modes */
.senja-slider-wide img {
  opacity: 1 !important;
  filter: none !important;
}
/* Dark mode nav arrows */
html[data-theme="dark"] .senja-slider-wide [class*="arrow"],
html[data-theme="dark"] .senja-slider-wide [class*="nav"] button,
html[data-theme="dark"] .senja-slider-wide button[class*="next"],
html[data-theme="dark"] .senja-slider-wide button[class*="prev"] {
  background: rgba(0, 210, 190, 0.15) !important;
  color: #00D2BE !important;
  border-color: rgba(0, 210, 190, 0.3) !important;
}
html[data-theme="dark"] .senja-slider-wide [class*="arrow"]:hover,
html[data-theme="dark"] .senja-slider-wide [class*="nav"] button:hover {
  background: rgba(0, 210, 190, 0.3) !important;
}
html[data-theme="dark"] .senja-slider-wide [class*="dot"],
html[data-theme="dark"] .senja-slider-wide [class*="indicator"] {
  background: #3A3E46 !important;
}
html[data-theme="dark"] .senja-slider-wide [class*="dot"].active,
html[data-theme="dark"] .senja-slider-wide [class*="dot"][aria-current="true"] {
  background: #00D2BE !important;
}
html[data-theme="dark"] .senja-slider-wide svg[class*="quote"],
html[data-theme="dark"] .senja-slider-wide [class*="quote"] svg {
  fill: #00D2BE !important;
  color: #00D2BE !important;
}

/* ─── Senja slider LIGHT MODE bubble styling — clean cards with readable text ─── */
html[data-theme="light"] .senja-slider-wide [class*="card"],
html[data-theme="light"] .senja-slider-wide [class*="tile"],
html[data-theme="light"] .senja-slider-wide [class*="testimonial"],
html[data-theme="light"] .senja-slider-wide article,
html[data-theme="light"] .senja-slider-wide [role="article"],
html[data-theme="light"] .senja-slider-wide [class*="slide"] > div {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #0F0E0C !important;
  border: 1px solid #E8E5DF !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important;
}
html[data-theme="light"] .senja-slider-wide,
html[data-theme="light"] .senja-slider-wide * {
  color: inherit;
}
html[data-theme="light"] .senja-slider-wide p,
html[data-theme="light"] .senja-slider-wide span,
html[data-theme="light"] .senja-slider-wide div {
  color: #0F0E0C !important;
}
html[data-theme="light"] .senja-slider-wide [style*="opacity:0.5"],
html[data-theme="light"] .senja-slider-wide [style*="opacity: 0.5"],
html[data-theme="light"] .senja-slider-wide [style*="opacity:0.6"],
html[data-theme="light"] .senja-slider-wide [style*="opacity: 0.6"],
html[data-theme="light"] .senja-slider-wide [style*="opacity:0.7"],
html[data-theme="light"] .senja-slider-wide [style*="opacity: 0.7"] {
  opacity: 1 !important;
  color: #5C5951 !important;
}
html[data-theme="light"] .senja-slider-wide [class*="arrow"],
html[data-theme="light"] .senja-slider-wide [class*="nav"] button {
  background: rgba(0, 168, 150, 0.10) !important;
  color: #00A896 !important;
  border-color: rgba(0, 168, 150, 0.3) !important;
}
html[data-theme="light"] .senja-slider-wide [class*="dot"].active,
html[data-theme="light"] .senja-slider-wide [class*="dot"][aria-current="true"] {
  background: #00A896 !important;
}

/* Senja internal overflow container — force white in light mode */
html[data-theme="light"] .senja-slider-wide .masked-overflow,
html[data-theme="light"] .senja-slider-wide [class*="masked-overflow"],
html[data-theme="light"] .senja-slider-wide [class*="overflow"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Belt-and-suspenders: force any dark-bg Senja internals to white in light mode */
html[data-theme="light"] .senja-slider-wide [style*="background-color: rgb(26"],
html[data-theme="light"] .senja-slider-wide [style*="background-color:rgb(26"],
html[data-theme="light"] .senja-slider-wide [style*="background: rgb(26"],
html[data-theme="light"] .senja-slider-wide [style*="background:rgb(26"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* ════════════════════════════════════════════════════════════════════
   FEATURE SLIDER - Tabbed On-Page / Off-Page carousel
   ════════════════════════════════════════════════════════════════════ */
.feature-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg-surface, #121316);
  border: 1px solid var(--border-default, #2A2D33);
  margin: 0 auto 20px;
  width: max-content;
  max-width: 100%;
}
.feature-tab {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #A0A4AB;
  background: transparent;
  border: none;
  padding: 10px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.22s ease;
  letter-spacing: -0.005em;
}
.feature-tab:hover { color: #F5F6F7; }
.feature-tab.active {
  background: #00D2BE;
  color: #000;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 210, 190, 0.30);
}
html[data-theme="light"] .feature-tabs {
  background: #FFFFFF;
  border-color: #E8E5DF;
}
html[data-theme="light"] .feature-tab { color: #767269; }
html[data-theme="light"] .feature-tab:hover { color: #0F0E0C; }
html[data-theme="light"] .feature-tab.active {
  background: #00A896;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 168, 150, 0.25);
}
.feature-panel { display: none; animation: fadePanel 0.35s ease; }
.feature-panel.active { display: block; }
@keyframes fadePanel {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.feat-slider {
  position: relative;
  border-radius: 16px;
  min-height: 420px;
}
.feat-slide { display: none; animation: slideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.feat-slide.active { display: block; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.feat-slide-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  padding: 28px;
  background: var(--bg-surface, #121316);
  border: 1px solid var(--border-default, #2A2D33);
  border-radius: 16px;
}
html[data-theme="light"] .feat-slide-inner {
  background: #FFFFFF !important;
  border-color: #E8E5DF !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.04);
}
.feat-copy { padding: 0 8px; }
.feat-eyebrow {
  font-family: 'Geist Mono', 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #00D2BE;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.feat-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: #00D2BE;
}
html[data-theme="light"] .feat-eyebrow { color: #00A896; }
html[data-theme="light"] .feat-eyebrow::before { background: #00A896; }
.feat-title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #F5F6F7;
  margin-bottom: 16px;
}
html[data-theme="light"] .feat-title { color: #0F0E0C !important; }
.feat-title em {
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(90deg, #00D2BE, #4DE0CE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .feat-title em {
  background: linear-gradient(90deg, #00A896, #00D2BE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.feat-body {
  font-size: 15px;
  line-height: 1.65;
  color: #A0A4AB;
  margin-bottom: 20px;
  max-width: 480px;
}
html[data-theme="light"] .feat-body { color: #5C5951 !important; }
.feat-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.feat-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: #D0D2D7;
}
html[data-theme="light"] .feat-bullets li { color: #3D3B36 !important; }
.feat-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 210, 190, 0.15);
  border: 1.5px solid #00D2BE;
}
html[data-theme="light"] .feat-bullets li::before {
  background: rgba(0, 168, 150, 0.12);
  border-color: #00A896;
}
.feat-visual {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-default, #2A2D33);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 30px rgba(0, 210, 190, 0.08);
}
html[data-theme="light"] .feat-visual {
  border-color: #E8E5DF !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 0 24px rgba(0, 168, 150, 0.06) !important;
}
.feat-visual img {
  width: 100%;
  height: auto;
  display: block;
}
.feat-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}
.feat-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-surface, #121316);
  border: 1px solid var(--border-default, #2A2D33);
  color: #A0A4AB;
  cursor: pointer;
  transition: all 0.2s ease;
}
.feat-arrow:hover {
  border-color: #00D2BE;
  color: #00D2BE;
  background: rgba(0, 210, 190, 0.08);
}
.feat-arrow svg { width: 18px; height: 18px; }
html[data-theme="light"] .feat-arrow {
  background: #FFFFFF !important;
  border-color: #D4D0C8 !important;
  color: #5C5951 !important;
}
html[data-theme="light"] .feat-arrow:hover {
  border-color: #00A896 !important;
  color: #00A896 !important;
  background: rgba(0, 168, 150, 0.06) !important;
}
.feat-dots { display: flex; gap: 8px; }
.feat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3A3E46;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.feat-dot:hover { background: #6B7076; }
.feat-dot.active {
  background: #00D2BE;
  width: 24px;
  border-radius: 4px;
}
html[data-theme="light"] .feat-dot { background: #D4D0C8 !important; }
html[data-theme="light"] .feat-dot:hover { background: #767269 !important; }
html[data-theme="light"] .feat-dot.active { background: #00A896 !important; }
@media (max-width: 768px) {
  .feat-slider { min-height: auto; }
  .feat-slide-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 16px;
  }
  .feat-copy { padding: 0; }
  .feat-title { font-size: 22px; }
  .feature-tab { padding: 10px 16px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   BEFORE / AFTER COMPARISON TABLE
   ════════════════════════════════════════════════════════════════════ */
.comparison-section { position: relative; }
/* Homepage's grid-based comparison uses <div class="compare-table"> with
   <div class="compare-head"> + <div class="compare-row"> children.
   Service pages use <table class="compare-table"> — keep that scoped out
   so the grid display doesn't break native <table> column alignment. */
div.compare-table {
  display: grid;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-default, #2A2D33);
  background: var(--bg-surface, #121316);
  margin-bottom: 40px;
}
html[data-theme="light"] div.compare-table {
  background: #FFFFFF !important;
  border-color: #E8E5DF !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.04);
}
.compare-head,
.compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
}
.compare-head {
  background: rgba(0, 210, 190, 0.04);
  border-bottom: 1px solid var(--border-default, #2A2D33);
}
html[data-theme="light"] .compare-head {
  background: #F7F6F3 !important;
  border-bottom-color: #E8E5DF !important;
}
.compare-row {
  border-bottom: 1px solid var(--border-subtle, #22252B);
  transition: background 0.2s ease;
}
html[data-theme="light"] .compare-row {
  border-bottom-color: #F0EEE9 !important;
}
.compare-row:last-child { border-bottom: none; }
.compare-row:hover { background: rgba(0, 210, 190, 0.03); }
html[data-theme="light"] .compare-row:hover { background: rgba(0, 168, 150, 0.03) !important; }

.compare-cell {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 78px;
  justify-content: center;
}
.compare-cell-metric {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  border-right: 1px solid var(--border-subtle, #22252B);
  background: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .compare-cell-metric {
  background: #FAFAF8 !important;
  border-right-color: #F0EEE9 !important;
}
.compare-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 210, 190, 0.10);
  border: 1px solid rgba(0, 210, 190, 0.25);
  color: #00D2BE;
  flex-shrink: 0;
}
html[data-theme="light"] .compare-metric-icon {
  background: rgba(0, 168, 150, 0.08) !important;
  border-color: rgba(0, 168, 150, 0.22) !important;
  color: #00A896 !important;
}
.compare-metric-icon svg { width: 18px; height: 18px; }
.compare-metric-name {
  font-size: 14px;
  font-weight: 500;
  color: #F5F6F7;
  letter-spacing: -0.01em;
}
html[data-theme="light"] .compare-metric-name { color: #0F0E0C !important; }

.compare-cell-before { border-right: 1px solid var(--border-subtle, #22252B); }
html[data-theme="light"] .compare-cell-before { border-right-color: #F0EEE9 !important; }

.compare-col-label {
  font-family: 'Geist Mono', 'DM Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.compare-col-label-before {
  color: #EF4444;
}
.compare-col-label-before::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
.compare-col-label-after {
  color: #00D2BE;
}
.compare-col-label-after::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00D2BE;
  box-shadow: 0 0 8px rgba(0, 210, 190, 0.6);
}
html[data-theme="light"] .compare-col-label-after { color: #00A896; }
html[data-theme="light"] .compare-col-label-after::before { background: #00A896; box-shadow: 0 0 8px rgba(0, 168, 150, 0.5); }
.compare-col-sub {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #A0A4AB;
  margin-top: 4px;
}
html[data-theme="light"] .compare-col-sub { color: #767269 !important; }

.compare-val {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.compare-val-bad {
  color: #F87171;
  text-decoration: line-through;
  text-decoration-color: rgba(248, 113, 113, 0.35);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.compare-val-good {
  color: #00D2BE;
}
html[data-theme="light"] .compare-val-bad {
  color: #DC2626 !important;
  text-decoration-color: rgba(220, 38, 38, 0.35) !important;
}
html[data-theme="light"] .compare-val-good { color: #00A896 !important; }
.compare-detail {
  font-size: 12.5px;
  color: #A0A4AB;
  font-weight: 400;
  letter-spacing: -0.005em;
}
html[data-theme="light"] .compare-detail { color: #767269 !important; }

/* Savings footer */
.compare-savings {
  background: var(--bg-surface, #121316);
  border: 1px solid var(--border-default, #2A2D33);
  border-radius: 16px;
  padding: 40px 48px;
  position: relative;
  overflow: hidden;
}
.compare-savings::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00D2BE, transparent);
}
html[data-theme="light"] .compare-savings {
  background: #FFFFFF !important;
  border-color: #E8E5DF !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.04);
}
html[data-theme="light"] .compare-savings::before {
  background: linear-gradient(90deg, transparent, #00A896, transparent) !important;
}
.compare-savings-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
.compare-savings-item {
  text-align: center;
}
.compare-savings-label {
  font-family: 'Geist Mono', 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A0A4AB;
  margin-bottom: 8px;
}
html[data-theme="light"] .compare-savings-label { color: #767269 !important; }
.compare-savings-value {
  font-family: 'Geist', sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(90deg, #00D2BE, #4DE0CE);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .compare-savings-value {
  background: linear-gradient(90deg, #00A896, #00D2BE) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.compare-savings-divider {
  width: 1px;
  height: 40px;
  background: var(--border-default, #2A2D33);
}
html[data-theme="light"] .compare-savings-divider { background: #E8E5DF !important; }

/* Responsive */
@media (max-width: 900px) {
  .compare-head, .compare-row {
    grid-template-columns: 1fr;
  }
  .compare-cell-metric,
  .compare-cell-before,
  .compare-cell-after {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle, #22252B);
  }
  html[data-theme="light"] .compare-cell-metric,
  html[data-theme="light"] .compare-cell-before,
  html[data-theme="light"] .compare-cell-after {
    border-bottom-color: #F0EEE9 !important;
  }
  .compare-cell-after { border-bottom: none; }
  .compare-head .compare-cell-metric { display: none; }
  .compare-savings { padding: 28px 24px; }
  .compare-savings-row { grid-template-columns: 1fr; gap: 20px; }
  .compare-savings-divider { width: 80%; height: 1px; margin: 0 auto; }
  .compare-savings-value { font-size: 28px; }
}

/* ════════════════════════════════════════════════════════════════════
   LIGHT MODE — soft off-white background with teal accents
   Scoped under html[data-theme="light"] so dark stays the default.
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  color-scheme: light;
  --accent: #00A896;
  --accent-hover: #00B8A6;
}

/* Base: warm off-white body, dark text */
html[data-theme="light"],
html[data-theme="light"] body {
  background: #F7F6F3 !important;
  background-color: #F7F6F3 !important;
  color: #0F0E0C !important;
}

/* Nav — white + subtle teal border */
html[data-theme="light"] nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: #E8E5DF !important;
}
html[data-theme="light"] .nav-links a {
  color: #3D3B36 !important;
}
html[data-theme="light"] .nav-links a:hover {
  color: #0F0E0C !important;
  background: #F0EEE9 !important;
}
html[data-theme="light"] .nav-dropdown-menu {
  background: #FFFFFF !important;
  border-color: #E8E5DF !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .nav-dropdown-menu a { color: #3D3B36 !important; }
html[data-theme="light"] .nav-dropdown-menu a:hover { background: #F0EEE9 !important; color: #0F0E0C !important; }
html[data-theme="light"] .nav-dropdown-label { color: #767269 !important; }
html[data-theme="light"] .hamburger span { background: #0F0E0C !important; }

/* Primary button — teal */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .nav-cta {
  background: #00A896 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 1px #00A896, 0 4px 12px rgba(0, 168, 150, 0.25) !important;
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .nav-cta:hover {
  background: #00B8A6 !important;
  box-shadow: 0 0 0 1px #00B8A6, 0 6px 20px rgba(0, 168, 150, 0.35) !important;
}
html[data-theme="light"] .btn-secondary {
  background: #FFFFFF !important;
  border-color: #D4D0C8 !important;
  color: #0F0E0C !important;
}
html[data-theme="light"] .btn-secondary:hover {
  border-color: #00A896 !important;
  color: #00A896 !important;
}

/* Hero: headline + em gradient in light mode */
html[data-theme="light"] .hero h1 em,
html[data-theme="light"] h1 em,
html[data-theme="light"] h2.sec-title em {
  background: linear-gradient(90deg, #00A896, #00D2BE) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
html[data-theme="light"] .hero h1 {
  color: #0F0E0C !important;
}
html[data-theme="light"] .hero-sub {
  color: #5C5951 !important;
}
html[data-theme="light"] .agencies-badge {
  background: #FFFFFF !important;
  border-color: #D4D0C8 !important;
  color: #5C5951 !important;
}
html[data-theme="light"] .agencies-badge::before {
  background: #767269 !important;
}
html[data-theme="light"] .hero-label {
  color: #5C5951 !important;
}
html[data-theme="light"] .hero-label-line {
  background: #D4D0C8 !important;
}

/* Section backgrounds: alternating off-whites */
html[data-theme="light"] .pf-section-base {
  background: #F7F6F3 !important;
}
html[data-theme="light"] .pf-section-alt {
  background: #FFFFFF !important;
  border-top: 1px solid #E8E5DF;
  border-bottom: 1px solid #E8E5DF;
}
html[data-theme="light"] .testimonials {
  background: #FFFFFF !important;
  border-color: #E8E5DF !important;
}

/* Section heading color */
html[data-theme="light"] h2.sec-title {
  color: #0F0E0C !important;
}
html[data-theme="light"] .sec-tag {
  color: #767269 !important;
}
html[data-theme="light"] .sec-tag::before {
  background: #D4D0C8 !important;
}
html[data-theme="light"] .sec-desc,
html[data-theme="light"] .pf-body {
  color: #5C5951 !important;
}

/* Cards — white with subtle border, teal hover */
html[data-theme="light"] .pf-card {
  background: #FFFFFF !important;
  border-color: #E8E5DF !important;
}
html[data-theme="light"] .pf-card:hover {
  border-color: #00A896 !important;
  box-shadow: 0 12px 32px rgba(0, 168, 150, 0.10) !important;
}
html[data-theme="light"] .pf-card h3 {
  color: #0F0E0C !important;
}
html[data-theme="light"] .pf-card p {
  color: #5C5951 !important;
}
html[data-theme="light"] .pf-card-icon {
  background: rgba(0, 168, 150, 0.08) !important;
  border-color: rgba(0, 168, 150, 0.25) !important;
}
html[data-theme="light"] .pf-card-icon svg {
  color: #00A896 !important;
}

/* Feature bullets */
html[data-theme="light"] .pf-bullets li {
  color: #3D3B36 !important;
}
html[data-theme="light"] .pf-bullets li::before {
  color: #00A896 !important;
}

/* Ticker */
html[data-theme="light"] .ticker-strip {
  background: #FFFFFF !important;
  border-color: #E8E5DF !important;
}
html[data-theme="light"] .ticker-item {
  color: #3D3B36 !important;
}
html[data-theme="light"] .ticker-dr {
  color: #767269 !important;
}
html[data-theme="light"] .ticker-sep {
  color: #D4D0C8 !important;
}

/* Hero chart — adjust for light bg (keep teal but tone) */
html[data-theme="light"] .hero-chart .chart-line {
  stroke: #00A896 !important;
  filter: drop-shadow(0 0 10px rgba(0, 168, 150, 0.5)) !important;
}
html[data-theme="light"] .hero-chart .chart-fill {
  opacity: 0.7 !important;
}

/* Aurora blobs — lighter tones on white bg */
html[data-theme="light"] .hero-aurora .aur-blob {
  mix-blend-mode: multiply;
}
html[data-theme="light"] .hero-aurora .aur-1 {
  background: radial-gradient(circle, rgba(0, 210, 190, 0.35), transparent 70%) !important;
}
html[data-theme="light"] .hero-aurora .aur-2 {
  background: radial-gradient(circle, rgba(38, 217, 196, 0.28), transparent 70%) !important;
}
html[data-theme="light"] .hero-aurora .aur-3 {
  background: radial-gradient(circle, rgba(0, 168, 150, 0.25), transparent 70%) !important;
}

/* Dotted grid + intersection dots — muted on light bg */
html[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(0, 168, 150, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 168, 150, 0.10) 1px, transparent 1px) !important;
}
html[data-theme="light"] .grid-bg::after {
  background-image: radial-gradient(rgba(0, 168, 150, 0.28) 1.3px, transparent 1.5px) !important;
}

/* Concentric rings — lighter */
html[data-theme="light"] .rings-bg::before {
  background:
    radial-gradient(circle, transparent 0 158px, rgba(0, 168, 150, 0.14) 159px 160px, transparent 161px 258px, rgba(0, 168, 150, 0.11) 259px 260px, transparent 261px 378px, rgba(0, 168, 150, 0.08) 379px 380px, transparent 381px 518px, rgba(0, 168, 150, 0.05) 519px 520px, transparent 521px) !important;
}

/* Horizontal bars (if visible) */
html[data-theme="light"] .bars-bg::before {
  background-image:
    linear-gradient(90deg, transparent 20%, rgba(0, 168, 150, 0.06) 22%, rgba(0, 168, 150, 0.06) 30%, transparent 32%),
    linear-gradient(90deg, transparent 20%, rgba(0, 168, 150, 0.08) 22%, rgba(0, 168, 150, 0.08) 42%, transparent 44%),
    linear-gradient(90deg, transparent 20%, rgba(0, 168, 150, 0.10) 22%, rgba(0, 168, 150, 0.10) 55%, transparent 57%),
    linear-gradient(90deg, transparent 20%, rgba(0, 168, 150, 0.12) 22%, rgba(0, 168, 150, 0.12) 68%, transparent 70%),
    linear-gradient(90deg, transparent 20%, rgba(0, 168, 150, 0.14) 22%, rgba(0, 168, 150, 0.14) 80%, transparent 82%) !important;
}

/* Focal glow — lighter */
html[data-theme="light"] .focal-bg {
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0, 168, 150, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0, 168, 150, 0.05) 0%, transparent 30%) !important;
}
html[data-theme="light"] .focal-bg::before {
  background: radial-gradient(circle, rgba(0, 168, 150, 0.16), transparent 60%) !important;
}

/* Hero particle canvas — reduce visibility on light bg */
html[data-theme="light"] #heroCanvas {
  opacity: 0.4 !important;
}

/* Screenshots — keep teal glow but softer */
html[data-theme="light"] .hero img,
html[data-theme="light"] .pf-shot img,
html[data-theme="light"] section img[src*="/images/platform-"] {
  border-color: rgba(0, 168, 150, 0.2) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08), 0 0 40px rgba(0, 168, 150, 0.08) !important;
}

/* API section code block */
html[data-theme="light"] pre,
html[data-theme="light"] code {
  background: #0F0E0C !important;
  color: #F5F6F7 !important;
  border-color: #2A2D33 !important;
}
html[data-theme="light"] .pf-integration-pill {
  background: #FFFFFF !important;
  border-color: #E8E5DF !important;
  color: #3D3B36 !important;
}

/* Footer */
html[data-theme="light"] footer {
  background: #F0EEE9 !important;
  border-color: #E8E5DF !important;
}
html[data-theme="light"] .footer-col a { color: #5C5951 !important; }
html[data-theme="light"] .footer-col a:hover { color: #0F0E0C !important; }
html[data-theme="light"] .footer-col h4 { color: #767269 !important; }
html[data-theme="light"] .footer-copy,
html[data-theme="light"] .footer-legal a { color: #767269 !important; }

/* Sticky bar */
html[data-theme="light"] .sticky-bottom {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #E8E5DF !important;
}

/* Senja — light mode: remove dark forced styles (let native light show) */
html[data-theme="light"] .senja-embed *,
html[data-theme="light"] .senja-slider-wide * {
  /* Allow default Senja colors in light mode */
}
html[data-theme="light"] .senja-slider-wide [class*="card"],
html[data-theme="light"] .senja-slider-wide article,
html[data-theme="light"] .senja-slider-wide [class*="slide"] > div {
  background: #FFFFFF !important;
  color: #0F0E0C !important;
  border: 1px solid #E8E5DF !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* Theme toggle button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-dark);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  margin-right: 4px;
  transition: all 0.2s ease;
  color: inherit;
}
html[data-theme="dark"] .theme-toggle-btn {
  border-color: #2A2D33;
  color: #F5F6F7;
}
html[data-theme="dark"] .theme-toggle-btn:hover {
  border-color: #00D2BE;
  background: rgba(0, 210, 190, 0.08);
  color: #00D2BE;
}
html[data-theme="light"] .theme-toggle-btn {
  border-color: #D4D0C8;
  color: #0F0E0C;
}
html[data-theme="light"] .theme-toggle-btn:hover {
  border-color: #00A896;
  background: rgba(0, 168, 150, 0.06);
  color: #00A896;
}
.theme-toggle-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
html[data-theme="dark"] .theme-toggle-btn .moon-icon { display: none; }
html[data-theme="dark"] .theme-toggle-btn .sun-icon { display: block; }
html[data-theme="light"] .theme-toggle-btn .moon-icon { display: block; }
html[data-theme="light"] .theme-toggle-btn .sun-icon { display: none; }

/* Mobile theme toggle — visible next to hamburger on small screens only */
.theme-toggle-mobile { display: none !important; }
@media (max-width: 768px) {
  .theme-toggle-mobile { display: inline-flex !important; margin-left: auto; margin-right: 6px; }
}

/* Logo swap handled by JS (more reliable than CSS content:) */


/* ─── block ─── */

  
  .ticker-item{font-family:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace !important;}
  /* Platform sections */
  .pf-section{padding:100px 0;}
  .pf-section-alt{background:#121316;}
  .pf-section-base{background:#0A0B0D;}
  .pf-grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
  .pf-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:14px;padding:32px;transition:border-color 0.2s, transform 0.2s;}
  .pf-card:hover{border-color:var(--border-strong);transform:translateY(-2px);}
  .pf-card-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(0,210,190,0.08);border:1px solid rgba(0,210,190,0.25);margin-bottom:18px;}
  .pf-card-icon svg{width:20px;height:20px;color:#00D2BE;}
  .pf-card h3{font-size:17px;font-weight:700;letter-spacing:-0.01em;margin-bottom:8px;color:var(--text);}
  .pf-card p{font-size:14px;line-height:1.6;color:var(--text-3);}
  .pf-two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
  .pf-copy h2{margin-bottom:16px;}
  .pf-copy .pf-body{font-size:16px;line-height:1.7;color:var(--text-2);margin-bottom:20px;}
  .pf-bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
  .pf-bullets li{font-size:14px;color:var(--text-3);padding-left:24px;position:relative;line-height:1.55;}
  .pf-bullets li::before{content:'';position:absolute;left:0;top:8px;width:10px;height:1px;background:#00D2BE;}
  .pf-shot{border:1px solid var(--border-default);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.4);transition:box-shadow 0.3s;}
  .pf-shot:hover{box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,210,190,0.15);}
  .pf-shot img{width:100%;height:auto;display:block;}
  .pf-shot-stack{display:flex;flex-direction:column;gap:20px;}
  .pf-code{background:#0A0B0D;border:1px solid var(--border-default);border-radius:12px;padding:24px;font-family:'Geist Mono',monospace;font-size:13px;line-height:1.7;color:var(--text-2);overflow-x:auto;}
  .pf-code .c-key{color:#00D2BE;}
  .pf-code .c-str{color:#D0D2D7;}
  .pf-code .c-brace{color:var(--text-4);}
  .pf-pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:40px;}
  .pf-pill{padding:8px 16px;border:1px solid var(--border-default);border-radius:100px;font-family:'Geist Mono',monospace;font-size:12px;color:var(--text-2);background:var(--bg-surface);}
  .pf-bill-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;}
  .pf-bill-col{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:14px;padding:36px;position:relative;}
  .pf-bill-col.featured{border-color:rgba(0,210,190,0.5);box-shadow:0 0 0 1px rgba(0,210,190,0.2);}
  .pf-bill-col h3{font-size:20px;font-weight:700;letter-spacing:-0.01em;margin-bottom:8px;}
  .pf-bill-col .pf-bill-sub{font-size:13px;color:var(--text-3);margin-bottom:20px;}
  .pf-bill-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
  .pf-bill-col ul li{font-size:14px;color:var(--text-2);padding-left:24px;position:relative;line-height:1.55;}
  .pf-bill-col ul li::before{content:'';position:absolute;left:0;top:7px;width:10px;height:1px;background:#00D2BE;}
  .pf-best-badge{position:absolute;top:-10px;right:24px;background:#00D2BE;color:#0A0B0D;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:5px 10px;border-radius:100px;}
  .pf-tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px;}
  .pf-tier{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:12px;padding:24px;text-decoration:none;color:inherit;display:block;transition:border-color 0.2s, transform 0.2s;position:relative;}
  .pf-tier:hover{border-color:var(--border-strong);transform:translateY(-2px);}
  .pf-tier.best{border-color:rgba(0,210,190,0.5);}
  .pf-tier-amt{font-family:'Geist Mono',monospace;font-size:20px;font-weight:600;color:var(--text);margin-bottom:4px;}
  .pf-tier-bonus{font-size:13px;color:#00D2BE;margin-bottom:8px;font-weight:600;}
  .pf-tier-rate{font-size:12px;color:var(--text-4);font-family:'Geist Mono',monospace;}
  .pf-tier-best-tag{position:absolute;top:-8px;right:14px;background:#00D2BE;color:#0A0B0D;font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:4px 8px;border-radius:100px;}
  .pf-cta-final{text-align:center;}
  .pf-cta-trust{display:flex;justify-content:center;gap:24px;margin-top:24px;flex-wrap:wrap;}
  .pf-cta-trust span{font-size:13px;color:var(--text-3);font-family:'Geist Mono',monospace;}
  @media (max-width: 960px){
    .pf-grid-6{grid-template-columns:1fr;}
    .pf-two-col{grid-template-columns:1fr;gap:40px;}
    .pf-two-col.reverse .pf-shot{order:2;}
    .pf-bill-grid{grid-template-columns:1fr;}
    .pf-tier-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width: 600px){
    .pf-tier-grid{grid-template-columns:1fr;}
    .pf-section{padding:64px 0;}
  }
  @media (min-width: 600px) and (max-width: 960px){
    .pf-grid-6{grid-template-columns:1fr 1fr;}
  }


/* ─── block ─── */

.sticky-bottom{position:fixed;bottom:0;left:0;right:0;z-index:99;background:rgba(10,11,13,0.95);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:center;gap:16px;transform:translateY(100%);transition:transform 0.3s ease;box-shadow:0 -2px 12px rgba(0,0,0,0.3);}
.sticky-bottom.visible{transform:translateY(0);}
.sticky-bottom p{font-size:14px;color:var(--text-3);margin:0;font-family:'DM Sans',sans-serif;}
.sticky-bottom .sticky-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#00D2BE;color:#000;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;border-radius:var(--r-sm,6px);text-decoration:none;white-space:nowrap;transition:background 0.2s,transform 0.15s;cursor:pointer;border:none;}
.sticky-bottom .sticky-cta:hover{background:#26D9C4;transform:translateY(-1px);}
.sticky-bottom .sticky-close{position:absolute;right:16px;background:none;border:none;color:var(--text-4);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:color 0.15s,background 0.15s;}
.sticky-bottom .sticky-close:hover{color:var(--text);background:var(--bg-elevated);}
@media(max-width:600px){.sticky-bottom p{display:none;}.sticky-bottom{justify-content:center;}}

/* ════════════════════════════════════════════════════════════════════
   FAQ + GUARANTEE BASE STYLES
   These were in the legacy css/styles.css but never copied into the
   new dark-theme rebuild, so service pages were rendering FAQs as
   raw <button>s with browser-default grey backgrounds, and guarantee
   cards with no padding/borders/icon styling.
   ════════════════════════════════════════════════════════════════════ */

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq { padding: 100px 0; }
.faq-list { max-width: 720px; margin: 40px auto 0; }
.faq-item {
  border-bottom: 1px solid var(--border, #2A2D33);
  padding: 20px 0;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: none !important;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #F5F6F7);
  padding: 0;
  font-family: 'Geist', 'DM Sans', sans-serif;
  line-height: 1.4;
  gap: 16px;
}
.faq-q::after {
  content: '+';
  font-size: 20px;
  color: var(--text-4, #767A82);
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item.open .faq-q::after { content: '−'; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-a { max-height: 1500px !important; padding-top: 12px !important; }
.faq-a p {
  font-size: 14px;
  color: var(--text-3, #A0A4AB);
  line-height: 1.7;
}

/* ── Guarantees ───────────────────────────────────────────────────── */
.guarantees {
  padding: 60px 0;
  background: var(--off, #121316);
  border-top: 1px solid var(--border, #2A2D33);
  border-bottom: 1px solid var(--border, #2A2D33);
}
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.guarantee-card {
  text-align: center;
  padding: 24px 20px;
  border: 1px solid var(--border, #2A2D33);
  border-radius: 12px;
  background: var(--bg-elevated, #1A1C20);
}
.guarantee-icon {
  font-size: 24px;
  margin-bottom: 12px;
  color: #00D2BE;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guarantee-icon svg { stroke: #00D2BE; }
.guarantee-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #F5F6F7);
  margin-bottom: 6px;
}
.guarantee-desc {
  font-size: 13px;
  color: var(--text-3, #A0A4AB);
  line-height: 1.55;
}
@media (max-width: 760px) {
  .guarantee-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .guarantee-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   CASE STUDIES — base layout (was only in legacy css/styles.css)
   ════════════════════════════════════════════════════════════════════ */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.case-card {
  border: 1px solid var(--border, #2A2D33);
  border-radius: var(--r-lg, 16px);
  padding: 32px 28px;
  background: var(--bg-elevated, #1A1C20);
  transition: all 0.2s;
}
.case-card:hover {
  border-color: var(--border-dark, #3A3E46);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
}
.case-industry {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4, #767A82);
  margin-bottom: 10px;
}
.case-title {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--ink, #F5F6F7);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.case-desc {
  font-size: 14px;
  color: var(--text-3, #A0A4AB);
  line-height: 1.65;
  margin-bottom: 20px;
}
.case-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border, #2A2D33);
  border: 1px solid var(--border, #2A2D33);
  border-radius: var(--r, 10px);
  overflow: hidden;
}
.case-metric {
  background: var(--bg-elevated, #1A1C20);
  padding: 14px 12px;
  text-align: center;
}
.case-metric-num {
  font-family: 'DM Mono', 'Geist Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  color: #00D2BE;
  margin-bottom: 2px;
}
.case-metric-label {
  font-size: 11px;
  color: var(--text-4, #767A82);
  font-weight: 500;
}
@media (max-width: 768px) {
  .case-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   PORTFOLIO + TEAM + TIMELINE + CONTACT FORM (missing legacy classes)
   ════════════════════════════════════════════════════════════════════ */

/* Portfolio (portfolio.html) */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.portfolio-card {
  border: 1px solid var(--border, #2A2D33);
  border-radius: var(--r-lg, 16px);
  padding: 28px 24px;
  background: var(--bg-elevated, #1A1C20);
  transition: all 0.2s;
}
.portfolio-card:hover {
  border-color: var(--border-dark, #3A3E46);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
}
.portfolio-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.portfolio-pub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4, #767A82);
  margin-bottom: 10px;
}
.portfolio-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #F5F6F7);
  margin-bottom: 6px;
  line-height: 1.35;
}
.portfolio-desc {
  font-size: 13px;
  color: var(--text-3, #A0A4AB);
  line-height: 1.6;
  margin-bottom: 12px;
}
.portfolio-meta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Team (about.html) */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.team-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #F5F6F7);
  margin-bottom: 2px;
}
.team-av {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--off2, #22252B);
  border: 1px solid var(--border, #2A2D33);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  color: var(--text-3, #A0A4AB);
  margin: 0 auto 14px;
}

/* Timeline (about.html) */
.timeline { padding: 0; margin: 48px 0; }
.timeline-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border, #2A2D33);
}
.timeline-year {
  font-family: 'DM Mono', 'Geist Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-4, #767A82);
  padding-top: 2px;
}

/* Contact form */
.contact-form { max-width: 560px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
}
.form-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-4, #767A82);
}
.form-field label span {
  color: var(--border-dark, #3A3E46);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

/* Misc */
.demo-check { font-size: 40px; margin-bottom: 14px; }

@media (max-width: 960px) {
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
}