/**
 * FIDUS FLO — design tokens (light + dark)
 * Load before site.css. site.css :root will be migrated to use these in Step 3.
 */

/* ═══════════════════════════════════════════════════════════
   BRAND — consistent across themes (current live palette)
═══════════════════════════════════════════════════════════ */
:root {
  --brand-teal: #34d3ff;
  --brand-teal-dark: #1ba8e0;
  --brand-teal-light: #38f2c2;

  --brand-indigo: #2563eb;
  --brand-indigo-dark: #1e40af;
  --brand-indigo-light: #60a5fa;
  --brand-indigo-deep: #1e3a8a;

  /* Deeper teal variants (light theme accents — dark keeps bright --brand-teal) */
  --brand-teal-deep: #047857;
  --brand-teal-ink: #0f766e;

  --brand-coral: #ff8c42;
  --brand-coral-light: #ffb085;

  --brand-whatsapp: #25d366;
  --flo-wa: var(--brand-whatsapp);

  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Gradients (brand anchors) */
  --grad-primary: linear-gradient(135deg, var(--brand-teal), var(--brand-indigo));
  --grad-accent: linear-gradient(135deg, var(--brand-coral), #e85d4a);
  --grad-brand-text: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-light));

  /* Typography */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* Motion */
  --transition: all 0.2s ease;
  --transition-slow: all 0.3s ease;

  /* Layout (non-theme) */
  --max: 1140px;
  --h1: clamp(42px, 4.5vw, 64px);
  --h1-inner: clamp(28px, 3vw, 44px);
  --h2: clamp(24px, 2.4vw, 34px);
  --body-size: 16px;
  --lead-size: 17px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME (default)
═══════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #fafbfc;
  --bg2: #f4f6f8;
  --bg-elevated: #ffffff;
  --bg-subtle: #f4f6f8;
  --bg-muted: #e5e9ee;

  --text: #0b1220;
  --text-soft: #1e293b;
  --text-muted: #334155;
  --text-faint: #475569;

  --border: #dee3ea;
  --border-soft: #ebeff4;
  --border-strong: #cbd5e1;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.1), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow: var(--shadow-lg);
  --shadow-soft: var(--shadow-md);

  --grad-subtle: linear-gradient(
    180deg,
    rgba(4, 120, 87, 0.04) 0%,
    transparent 48%
  );

  /* Decorative surfaces */
  --grid-line: rgba(15, 23, 42, 0.06);
  --glow-cyan: rgba(4, 120, 87, 0.06);
  --glow-mint: rgba(15, 118, 110, 0.05);

  --card: #ffffff;
  --card2: #f4f6f8;
  --line: rgba(4, 120, 87, 0.18);
  --line2: rgba(71, 85, 105, 0.35);

  --page-gradient:
    radial-gradient(900px 500px at 20% -8%, var(--glow-cyan), transparent 58%),
    radial-gradient(700px 400px at 95% 0%, var(--glow-mint), transparent 55%),
    linear-gradient(165deg, var(--bg), var(--bg2));

  --ticker-bg: linear-gradient(90deg, #ecfdf5 0%, #fafbfc 50%, #f4f6f8 100%);
  --ticker-border: var(--border);
  --ticker-dot: #d97706;
  --ticker-dot-glow: rgba(217, 119, 6, 0.22);
  --ticker-label-bg: var(--accent-bg);
  --ticker-label-border: var(--accent-border);
  --ticker-label-text: var(--brand-teal-deep);
  --ticker-marquee-bg: var(--bg-elevated);
  --ticker-marquee-border: var(--border);
  --ticker-msg: var(--text-soft);
  --ticker-msg-strong: var(--text);
  --ticker-btn-bg: var(--bg-elevated);
  --ticker-btn-border: var(--border);
  --ticker-btn-text: var(--text);
  --ticker-btn-hover: var(--bg-subtle);
  --ticker-close-bg: var(--bg-elevated);
  --ticker-close-border: var(--border);

  --topbar-bg: rgba(255, 255, 255, 0.86);
  --topbar-bg-scrolled: rgba(255, 255, 255, 0.96);
  --dropbar-bg: rgba(255, 255, 255, 0.98);
  --dropbar-border: var(--border);

  --btn-secondary-bg: #ffffff;
  --btn-secondary-border: var(--border);
  --btn-secondary-hover: var(--bg-subtle);
  --pill-bg: var(--accent-bg);
  --pill-border: var(--accent-border);
  --pill-text: var(--brand-teal-deep);
  --ai-badge-bg: rgba(99, 102, 241, 0.08);
  --ai-badge-border: rgba(99, 102, 241, 0.22);
  --ai-badge-text: #4338ca;
  --ai-badge-dot: #6366f1;

  /* WhatsApp float widget */
  --flo-wa-ink: #0b1328;
  --flo-wa-muted: rgba(11, 19, 40, 0.68);
  --flo-wa-line: rgba(11, 19, 40, 0.12);
  --flo-wa-card: rgba(255, 255, 255, 0.96);
  --flo-wa-card2: rgba(245, 248, 255, 0.92);
  --flo-wa-btn: rgba(255, 255, 255, 0.92);
  --flo-wa-btn2: rgba(245, 248, 255, 0.88);
  --flo-wa-shadow: var(--shadow-md);
  --flo-radius: 18px;

  /* Glass panels (hero, side cards) */
  --surface-glass-base: rgba(255, 255, 255, 0.94);
  --surface-glass-border: var(--border);
  --surface-glass-shadow: var(--shadow-md);
  --surface-glass-highlight: var(--accent-border);
  --surface-glass-glow-a: rgba(4, 120, 87, 0.05);
  --surface-glass-glow-b: rgba(15, 118, 110, 0.04);

  /* Footer */
  --footer-bg: rgba(255, 255, 255, 0.92);
  --footer-callout-bg: var(--bg-subtle);

  /* Compare / chips */
  --compare-chip-bg: var(--bg-subtle);
  --compare-chip-border: var(--border-strong);
  --surface-chip-bg: rgba(15, 23, 42, 0.04);
  --surface-chip-border: rgba(15, 23, 42, 0.08);
  --surface-chip-text: var(--text-faint);
  --honest-strip-bg: var(--bg-subtle);
  --honest-strip-border: var(--border);
  --callout-info-bg: var(--accent-bg);
  --callout-info-border: var(--accent-border);
  --callout-info-border-strong: color-mix(in srgb, var(--brand-teal-deep) 35%, var(--border-strong));
  --accent-card-fallback: var(--border-strong);

  /* ROI section band + surfaces */
  --roi-band-bg: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%);
  --roi-band-fade: var(--bg);
  --roi-band-edge: var(--border);
  --roi-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.95));
  --roi-card-border: var(--border);
  --roi-surface: rgba(255, 255, 255, 0.85);
  --roi-surface-border: var(--border-strong);
  --roi-input-bg: #ffffff;
  --roi-input-border: var(--border-strong);
  --roi-input-text: var(--text);
  --roi-note-bg: var(--bg-subtle);
  --roi-note-border: var(--border);
  --roi-action-bar-bg: rgba(255, 255, 255, 0.92);
  --roi-action-bar-border: color-mix(in srgb, var(--brand-teal) 28%, var(--border));
  --roi-modal-overlay: rgba(15, 23, 42, 0.45);
  --roi-modal-bg: #ffffff;
  --roi-modal-field-bg: var(--bg-subtle);
  --roi-modal-field-border: var(--border-strong);
  --roi-btn-ghost-bg: var(--btn-secondary-bg);
  --roi-btn-ghost-border: var(--btn-secondary-border);
  --roi-btn-ghost-text: var(--text);
  --roi-kicker: var(--brand-teal-deep);

  /* Chart.js (read via getComputedStyle in site.js) */
  --chart-muted: #475569;
  --chart-grid: rgba(148, 163, 184, 0.4);
  --chart-tooltip-bg: rgba(255, 255, 255, 0.98);
  --chart-tooltip-border: var(--border);
  --chart-tooltip-title: var(--text);
  --chart-tooltip-body: var(--brand-teal-deep);
  --chart-bar-muted: rgba(100, 116, 139, 0.4);
  --chart-bar-muted-border: rgba(100, 116, 139, 0.55);
  --chart-bar-accent-a: rgba(4, 120, 87, 0.78);
  --chart-bar-accent-b: rgba(15, 118, 110, 0.52);
  --chart-bar-accent-border: rgba(4, 120, 87, 0.85);
  --chart-donut-converted: rgba(4, 120, 87, 0.82);
  --chart-donut-rest: rgba(148, 163, 184, 0.5);
  --chart-donut-risk: rgba(220, 38, 38, 0.72);
  --chart-donut-converted-border: rgba(4, 120, 87, 0.45);
  --chart-donut-rest-border: rgba(148, 163, 184, 0.35);
  --chart-donut-risk-border: rgba(220, 38, 38, 0.4);

  /* Site chat widget */
  --chat-btn-bg: linear-gradient(135deg, var(--brand-teal-deep), var(--brand-teal-ink));
  --chat-btn-icon: #ffffff;
  --chat-btn-shadow: 0 4px 16px rgba(4, 120, 87, 0.28);
  --chat-panel-bg: var(--bg-elevated);
  --chat-panel-border: var(--border);
  --chat-panel-shadow: var(--shadow-lg);
  --chat-head-bg: var(--bg-subtle);
  --chat-head-border: var(--border);
  --chat-title: var(--text);
  --chat-sub: var(--brand-teal-deep);
  --chat-close: var(--text-muted);
  --chat-close-hover: var(--text);
  --chat-scroll: var(--border);
  --chat-msg-bot-bg: var(--bg-subtle);
  --chat-msg-bot-text: var(--text-soft);
  --chat-msg-typing: var(--text-muted);
  --chat-msg-link: var(--brand-teal-deep);
  --chat-msg-link-hover: var(--brand-teal-ink);
  --chat-msg-user-bg: linear-gradient(135deg, var(--brand-teal-deep), var(--brand-teal-ink));
  --chat-msg-user-text: #ffffff;
  --chat-form-bg: var(--bg-subtle);
  --chat-form-border: var(--border);
  --chat-form-title: var(--brand-teal-deep);
  --chat-input-bg: #ffffff;
  --chat-input-border: var(--border-strong);
  --chat-input-text: var(--text);
  --chat-input-focus: var(--brand-teal-deep);
  --chat-send-bg: var(--chat-btn-bg);
  --chat-send-icon: #ffffff;
  --chat-muted: var(--text-muted);
  --chat-wa: #25d366;
  --chat-fco-bg: var(--bg-elevated);
  --chat-fco-border: var(--border);
  --chat-fco-hover-border: var(--accent-border);
  --chat-fco-hover-bg: var(--accent-bg);

  /* Homepage — journey strip, integrations, proof cards, hero trust */
  --journey-grid-bg: rgba(148, 163, 184, 0.2);
  --journey-grid-border: var(--border-strong);
  --journey-step-bg: var(--bg-elevated);
  --journey-step-hover-bg: var(--bg-subtle);
  --journey-step-accent: var(--brand-teal-deep);
  --journey-icon-bg: var(--bg-subtle);
  --journey-icon-border: var(--border);
  --journey-chip-bg: var(--pill-bg);
  --journey-chip-border: var(--pill-border);
  --journey-chip-text: var(--text-soft);
  --journey-footer-bg: var(--bg-subtle);
  --journey-footer-border: var(--border-strong);
  --integrations-bar-bg: var(--bg-subtle);
  --integrations-label: var(--text-muted);
  --integration-chip-bg: var(--bg-elevated);
  --integration-chip-border: var(--border-strong);
  --integration-chip-text: var(--text-soft);
  --integration-chip-hover-bg: #ffffff;
  --integration-chip-hover-border: var(--accent-border);
  --integration-chip-native-bg: var(--accent-bg);
  --integration-chip-native-border: var(--accent-border);
  --integration-chip-native-text: var(--text);
  --integration-chip-icon-bg: rgba(52, 211, 255, 0.12);
  --integrations-note: var(--text-faint);
  --proof-strip-label: var(--brand-teal-deep);
  --proof-strip-border: var(--border);
  --proof-card-bg: var(--bg-elevated);
  --proof-card-border: var(--border-strong);
  --proof-card-hover-bg: #ffffff;
  --proof-card-hover-border: var(--accent-border);
  --proof-card-icon-bg: var(--bg-subtle);
  --proof-card-icon-border: var(--border);
  --proof-card-domain: var(--brand-teal-deep);
  --hero-trust-name-bg: var(--pill-bg);
  --hero-trust-name-border: var(--pill-border);
  --hero-trust-name-text: var(--text-soft);

  /* Header / dropbar */
  --dropbar-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
  --dropbar-tile-bg: var(--bg-elevated);
  --dropbar-tile-border: var(--border-strong);
  --dropbar-tile-hover-bg: var(--bg-subtle);
  --dropbar-tile-hover-border: var(--accent-border);
  --dropbar-tile-active-bg: var(--accent-bg);
  --dropbar-tile-active-border: var(--accent-border);
  --dropbar-tile-icon-bg: var(--bg-subtle);
  --dropbar-tile-icon-border: var(--border);
  --dropbar-tile-cta-bg: color-mix(in srgb, var(--brand-teal-light) 10%, var(--bg-elevated));
  --dropbar-tile-cta-border: rgba(52, 211, 255, 0.28);
  --dropbar-divider: var(--border);
  --dropbar-live-text: var(--brand-teal-deep);
  --nav-mobile-bg: var(--dropbar-bg);
  --nav-mobile-border: var(--border-strong);

  /* FAQ, CTA, steps, cards, pricing, footer band */
  --faq-bg: var(--bg-elevated);
  --faq-border: var(--border-strong);
  --faq-summary-text: var(--text);
  --faq-body-text: var(--text-muted);
  --faq-hover-border: var(--accent-border);
  --faq-icon-bg: var(--accent-bg);
  --faq-icon-border: var(--accent-border);
  --cta-block-bg:
    radial-gradient(900px 400px at 20% 50%, rgba(4, 120, 87, 0.06), transparent 55%),
    radial-gradient(900px 400px at 80% 50%, rgba(30, 58, 138, 0.04), transparent 55%),
    var(--bg-elevated);
  --cta-block-border: var(--border);
  --cta-block-heading: var(--text);
  --cta-block-text: var(--text-soft);
  --step-line: var(--accent-border);
  --step-num-bg:
    radial-gradient(circle at 35% 35%, rgba(4, 120, 87, 0.08), transparent 65%),
    var(--bg-elevated);
  --step-num-border: var(--accent-border);
  --step-title: var(--text);
  --surface-card-bg: var(--bg-elevated);
  --surface-card-border: var(--border-strong);
  --surface-card-muted-bg: var(--bg-subtle);
  --surface-card-muted-border: var(--border);
  --surface-card-muted-title: var(--text-muted);
  --surface-card-muted-heading: var(--text-soft);
  --link-card-bg: var(--surface-card-bg);
  --link-card-border: var(--surface-card-border);
  --link-card-accent-a: var(--brand-teal-deep);
  --link-card-accent-b: var(--brand-indigo-deep);
  --link-card-muted-bg: var(--surface-card-muted-bg);
  --link-card-muted-border: var(--surface-card-muted-border);
  --link-card-muted-accent: var(--border-strong);
  --link-card-muted-title: var(--surface-card-muted-title);
  --pricing-konnect-bg: var(--bg-subtle);
  --plan-bg: var(--bg-elevated);
  --plan-border: var(--border-strong);
  --plan-pop-bg:
    radial-gradient(520px 240px at 20% 0%, rgba(4, 120, 87, 0.06), transparent 60%),
    var(--bg-elevated);
  --plan-pop-border: var(--accent-border);
  --plan-tag-text: var(--brand-teal-deep);
  --plan-tag-bg: var(--accent-bg);
  --plan-tag-border: var(--accent-border);
  --reviews-band-bg: var(--bg-subtle);
  --reviews-band-border: var(--border);
  --reviews-band-text: var(--text-muted);
  --reviews-band-score: var(--text);
  --reviews-band-divider: var(--border-strong);
  --star-off: #cbd5e1;
  --google-review-card-bg: #ffffff;
  --google-review-card-border: #e8eaed;
  --google-review-card-shadow: 0 2px 12px rgba(60, 64, 67, 0.12);
  --google-review-name: #202124;
  --google-review-co: #5f6368;
  --google-review-body: #3c4043;
  --footer-v2-bg: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%);
  --footer-v2-border: var(--border);
  --footer-v2-heading: var(--text);
  --footer-v2-sheen: 0.08;
  --footer-v2-grid-opacity: 0.05;
  --footer-v2-top-divider: var(--border);
  --footer-v2-card-bg: var(--bg-elevated);
  --footer-v2-card-border: var(--border);
  --footer-v2-card-shadow: var(--shadow-sm);
  --footer-v2-body: var(--text-muted);
  --footer-v2-body-strong: var(--text);
  --footer-v2-muted: var(--text-muted);
  --footer-v2-muted-soft: var(--text-soft);
  --footer-v2-link: var(--text-soft);
  --footer-v2-link-hover-color: var(--text);
  --footer-v2-link-hover-bg: var(--bg-subtle);
  --footer-v2-link-hover-border: var(--border);
  --footer-v2-callout-bg: var(--bg-elevated);
  --footer-v2-callout-border: var(--border);
  --footer-v2-callout-shadow: var(--shadow-sm);
  --footer-v2-grid-line: rgba(15, 23, 42, 0.06);
  --footer-v2-sheen-a: rgba(4, 120, 87, 0.06);
  --footer-v2-sheen-b: rgba(4, 120, 87, 0);
  --input-bg: #ffffff;
  --input-border: var(--border-strong);

  /* Journey strips (homepage, social, how-it-works) */
  --jf-grid-border: var(--border-strong);
  --jf-step-bg: var(--bg-elevated);
  --jf-step-hover-bg: var(--bg-subtle);
  --jf-icon-bg: var(--bg-subtle);
  --jf-icon-border: var(--border);
  --jf-chip-border: var(--border);
  --sj-active-bg: color-mix(in srgb, #ec4899 10%, var(--bg-elevated));
  --sj-active-num: #be185d;
  --sj-active-label: var(--text);
  --sj-active-bar: linear-gradient(90deg, #ec4899, #f472b6);
  --social-feat-bg: var(--bg-elevated);
  --social-feat-border: color-mix(in srgb, #ec4899 22%, var(--border-strong));
  --social-feat-icon-bg: color-mix(in srgb, #ec4899 10%, var(--bg-subtle));
  --social-feat-icon-border: color-mix(in srgb, #ec4899 25%, var(--border));
  --wc-card-bg: var(--bg-elevated);
  --wc-card-border: var(--border-strong);
  --plan-icon-bg: var(--bg-subtle);
  --plan-icon-border: var(--border);
  --price-badge-soft-bg: var(--bg-subtle);
  --price-badge-soft-border: var(--border-strong);
  --price-badge-soft-text: var(--text-soft);

  /* Universal surfaces (bulk migration — most page cards/panels) */
  --surface-raised-a: var(--bg-elevated);
  --surface-raised-b: var(--bg-elevated);
  --surface-raised-c: var(--bg-subtle);
  --surface-raised-d: color-mix(in srgb, var(--bg-subtle) 85%, var(--border));
  --surface-border: var(--border-strong);
  --surface-border-medium: var(--border);
  --surface-border-soft: color-mix(in srgb, var(--border) 70%, transparent);
  --surface-inset: #ffffff;
  --surface-inset-border: var(--border-strong);
  --surface-grid-bg: var(--journey-grid-bg);
  --surface-grid-line: var(--journey-grid-border);
  --surface-overlay: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-subtle) 100%);
  --text-bright: var(--text);
  --text-dim: var(--text-soft);
  --text-faded: var(--text-muted);
  --text-on-dark-muted: var(--text-soft);
  --mobile-nav-bg: var(--dropbar-bg);
  --mobile-nav-border: var(--border-strong);
  --mobile-nav-item-bg: var(--bg-subtle);
  --mobile-nav-item-border: var(--border);
  --hero-inner-bg: var(--bg-elevated);
  --hero-inner-border: var(--border-strong);
  --compare-card-bg: var(--bg-elevated);
  --compare-card-border: var(--border-strong);
  --stat-strip-bg: var(--journey-grid-bg);
  --stat-strip-border: var(--journey-grid-border);
  --badge-glass-bg: var(--pill-bg);
  --badge-glass-border: var(--pill-border);
  --badge-glass-text: var(--pill-text);

  /* Light theme accents (deeper teal — not neon on white) */
  --accent: var(--brand-teal-deep);
  --accent-soft: var(--brand-teal-ink);
  --accent-bg: #ecfdf5;
  --accent-border: #a7f3d0;
  --accent2: var(--brand-teal-ink);
  --gradient-headline: linear-gradient(135deg, #047857 0%, #1e3a8a 100%);

  /* Legacy aliases (used across site.css today) */
  --muted: var(--text-soft);
  --radius: 20px;
  --radius2: 14px;
  --body: var(--body-size);
  --lead: var(--lead-size);
}

/* ═══════════════════════════════════════════════════════════
   DARK THEME (matches current production look)
═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #060b18;
  --bg2: #0a1225;
  --bg-elevated: #131825;
  --bg-subtle: #1a2030;
  --bg-muted: #242b3d;

  --text: #e8eeff;
  --text-soft: #cbd5e1;
  --text-muted: #8fa0c8;
  --text-faint: #64748b;

  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.04);
  --border-strong: rgba(36, 48, 95, 0.65);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.28);

  --grad-subtle: linear-gradient(
    180deg,
    rgba(52, 211, 255, 0.08) 0%,
    transparent 50%
  );

  --grid-line: rgba(52, 211, 255, 0.035);
  --glow-cyan: rgba(52, 211, 255, 0.13);
  --glow-mint: rgba(56, 242, 194, 0.09);

  --card: rgba(14, 22, 46, 0.6);
  --card2: rgba(14, 22, 46, 0.35);
  --line: rgba(52, 211, 255, 0.12);
  --line2: rgba(36, 48, 95, 0.55);

  --page-gradient:
    radial-gradient(1200px 600px at 30% -10%, var(--glow-cyan), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, var(--glow-mint), transparent 55%),
    linear-gradient(160deg, var(--bg), var(--bg2));

  --ticker-bg: linear-gradient(
    135deg,
    rgba(4, 120, 87, 0.14) 0%,
    rgba(10, 16, 34, 0.94) 55%,
    rgba(10, 16, 34, 0.98) 100%
  );
  --ticker-border: rgba(255, 255, 255, 0.08);
  --ticker-dot: #f59e0b;
  --ticker-dot-glow: rgba(245, 158, 11, 0.28);
  --ticker-label-bg: rgba(4, 120, 87, 0.15);
  --ticker-label-border: rgba(52, 211, 255, 0.22);
  --ticker-label-text: #6ee7b7;
  --ticker-marquee-bg: rgba(14, 22, 46, 0.45);
  --ticker-marquee-border: rgba(255, 255, 255, 0.1);
  --ticker-msg: rgba(231, 236, 255, 0.82);
  --ticker-msg-strong: rgba(231, 236, 255, 0.98);
  --ticker-btn-bg: rgba(14, 22, 46, 0.5);
  --ticker-btn-border: rgba(52, 211, 255, 0.25);
  --ticker-btn-text: rgba(231, 236, 255, 0.95);
  --ticker-btn-hover: rgba(14, 22, 46, 0.7);
  --ticker-close-bg: rgba(14, 22, 46, 0.5);
  --ticker-close-border: rgba(255, 255, 255, 0.12);

  --topbar-bg: rgba(6, 11, 24, 0.72);
  --topbar-bg-scrolled: rgba(6, 11, 24, 0.88);
  --dropbar-bg: rgba(8, 15, 36, 0.97);
  --dropbar-border: rgba(52, 211, 255, 0.18);

  --btn-secondary-bg: rgba(14, 22, 46, 0.4);
  --btn-secondary-border: rgba(36, 48, 95, 0.55);
  --btn-secondary-hover: rgba(14, 22, 46, 0.55);
  --pill-bg: rgba(52, 211, 255, 0.09);
  --pill-border: rgba(52, 211, 255, 0.18);
  --pill-text: #b9eeff;
  --ai-badge-bg: rgba(139, 92, 246, 0.08);
  --ai-badge-border: rgba(139, 92, 246, 0.35);
  --ai-badge-text: rgba(196, 181, 253, 0.9);
  --ai-badge-dot: rgba(139, 92, 246, 0.9);

  --flo-ink: #e7ecff;
  --flo-muted: rgba(231, 236, 255, 0.72);
  --flo-line: rgba(255, 255, 255, 0.12);
  --flo-card: rgba(18, 26, 54, 0.58);
  --flo-card2: rgba(18, 26, 54, 0.38);
  --flo-wa-ink: #0b1328;
  --flo-wa-muted: rgba(11, 19, 40, 0.68);
  --flo-wa-line: rgba(11, 19, 40, 0.12);
  --flo-wa-card: rgba(255, 255, 255, 0.96);
  --flo-wa-card2: rgba(245, 248, 255, 0.92);
  --flo-wa-btn: rgba(255, 255, 255, 0.92);
  --flo-wa-btn2: rgba(245, 248, 255, 0.88);
  --flo-wa-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
  --flo-radius: 18px;

  --surface-glass-base: rgba(12, 20, 44, 0.7);
  --surface-glass-border: rgba(52, 211, 255, 0.15);
  --surface-glass-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --surface-glass-highlight: rgba(52, 211, 255, 0.4);
  --surface-glass-glow-a: rgba(52, 211, 255, 0.1);
  --surface-glass-glow-b: rgba(56, 242, 194, 0.07);

  --footer-bg: rgba(4, 8, 18, 0.6);
  --footer-callout-bg: rgba(14, 22, 46, 0.25);

  --compare-chip-bg: rgba(18, 26, 54, 0.32);
  --compare-chip-border: rgba(36, 48, 95, 0.65);
  --surface-chip-bg: rgba(255, 255, 255, 0.04);
  --surface-chip-border: rgba(255, 255, 255, 0.08);
  --surface-chip-text: rgba(231, 236, 255, 0.55);
  --honest-strip-bg: rgba(255, 255, 255, 0.03);
  --honest-strip-border: rgba(255, 255, 255, 0.08);
  --callout-info-bg: rgba(52, 211, 255, 0.03);
  --callout-info-border: rgba(52, 211, 255, 0.18);
  --callout-info-border-strong: rgba(52, 211, 255, 0.4);
  --accent-card-fallback: rgba(36, 48, 95, 0.55);

  --roi-band-bg: linear-gradient(180deg, #0b1328 0%, #0e1833 100%);
  --roi-band-fade: #0e1833;
  --roi-band-edge: rgba(255, 255, 255, 0.06);
  --roi-card-bg: linear-gradient(135deg, rgba(18, 26, 54, 0.58), rgba(18, 26, 54, 0.38));
  --roi-card-border: rgba(255, 255, 255, 0.12);
  --roi-surface: rgba(255, 255, 255, 0.05);
  --roi-surface-border: rgba(255, 255, 255, 0.12);
  --roi-input-bg: rgba(255, 255, 255, 0.06);
  --roi-input-border: rgba(255, 255, 255, 0.14);
  --roi-input-text: #e7ecff;
  --roi-note-bg: rgba(6, 11, 24, 0.3);
  --roi-note-border: rgba(36, 48, 95, 0.45);
  --roi-action-bar-bg: rgba(8, 15, 36, 0.7);
  --roi-action-bar-border: rgba(52, 211, 255, 0.2);
  --roi-modal-overlay: rgba(4, 8, 20, 0.8);
  --roi-modal-bg: rgba(10, 18, 40, 0.98);
  --roi-modal-field-bg: rgba(6, 11, 24, 0.6);
  --roi-modal-field-border: rgba(36, 48, 95, 0.7);
  --roi-btn-ghost-bg: rgba(14, 22, 46, 0.35);
  --roi-btn-ghost-border: rgba(36, 48, 95, 0.55);
  --roi-btn-ghost-text: var(--text);
  --roi-kicker: #34d3ff;

  --chart-muted: rgba(143, 160, 200, 0.7);
  --chart-grid: rgba(36, 48, 95, 0.45);
  --chart-tooltip-bg: rgba(6, 11, 24, 0.92);
  --chart-tooltip-border: rgba(52, 211, 255, 0.25);
  --chart-tooltip-title: #e8eeff;
  --chart-tooltip-body: #34d3ff;
  --chart-bar-muted: rgba(143, 160, 200, 0.25);
  --chart-bar-muted-border: rgba(143, 160, 200, 0.4);
  --chart-bar-accent-a: rgba(52, 211, 255, 0.8);
  --chart-bar-accent-b: rgba(56, 242, 194, 0.55);
  --chart-bar-accent-border: rgba(52, 211, 255, 0.7);
  --chart-donut-converted: rgba(56, 242, 194, 0.8);
  --chart-donut-rest: rgba(36, 48, 95, 0.7);
  --chart-donut-risk: rgba(248, 113, 113, 0.7);
  --chart-donut-converted-border: rgba(56, 242, 194, 0.4);
  --chart-donut-rest-border: rgba(36, 48, 95, 0.3);
  --chart-donut-risk-border: rgba(248, 113, 113, 0.4);

  --chat-btn-bg: linear-gradient(135deg, #34d3ff, #38f2c2);
  --chat-btn-icon: #060b18;
  --chat-btn-shadow: 0 4px 18px rgba(52, 211, 255, 0.4);
  --chat-panel-bg: #0d1526;
  --chat-panel-border: #1e2d4a;
  --chat-panel-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  --chat-head-bg: #060b18;
  --chat-head-border: #1e2d4a;
  --chat-title: #e8eaf0;
  --chat-sub: #38f2c2;
  --chat-close: #7a8aaa;
  --chat-close-hover: #e8eaf0;
  --chat-scroll: #1e2d4a;
  --chat-msg-bot-bg: #1a2540;
  --chat-msg-bot-text: #e8eaf0;
  --chat-msg-typing: #7a8aaa;
  --chat-msg-link: #34d3ff;
  --chat-msg-link-hover: #38f2c2;
  --chat-msg-user-bg: linear-gradient(135deg, #34d3ff, #38f2c2);
  --chat-msg-user-text: #060b18;
  --chat-form-bg: #111e36;
  --chat-form-border: #1e2d4a;
  --chat-form-title: #34d3ff;
  --chat-input-bg: #1a2540;
  --chat-input-border: #1e2d4a;
  --chat-input-text: #e8eaf0;
  --chat-input-focus: #34d3ff;
  --chat-send-bg: linear-gradient(135deg, #34d3ff, #38f2c2);
  --chat-send-icon: #060b18;
  --chat-muted: #7a8aaa;
  --chat-wa: #25d366;
  --chat-fco-bg: #1a2540;
  --chat-fco-border: #1e2d4a;
  --chat-fco-hover-border: #34d3ff;
  --chat-fco-hover-bg: rgba(52, 211, 255, 0.06);

  --journey-grid-bg: rgba(36, 48, 95, 0.35);
  --journey-grid-border: rgba(36, 48, 95, 0.4);
  --journey-step-bg: var(--bg);
  --journey-step-hover-bg: rgba(255, 255, 255, 0.025);
  --journey-step-accent: rgba(52, 211, 255, 0.4);
  --journey-icon-bg: rgba(255, 255, 255, 0.04);
  --journey-icon-border: rgba(255, 255, 255, 0.07);
  --journey-chip-bg: rgba(255, 255, 255, 0.04);
  --journey-chip-border: rgba(255, 255, 255, 0.07);
  --journey-chip-text: rgba(143, 160, 200, 0.75);
  --journey-footer-bg: rgba(6, 12, 30, 0.6);
  --journey-footer-border: rgba(36, 48, 95, 0.4);
  --integrations-bar-bg: rgba(6, 11, 24, 0.35);
  --integrations-label: rgba(143, 160, 200, 0.4);
  --integration-chip-bg: rgba(12, 20, 44, 0.35);
  --integration-chip-border: rgba(36, 48, 95, 0.7);
  --integration-chip-text: var(--text-muted);
  --integration-chip-hover-bg: rgba(12, 20, 44, 0.55);
  --integration-chip-hover-border: rgba(52, 211, 255, 0.3);
  --integration-chip-native-bg: rgba(52, 211, 255, 0.06);
  --integration-chip-native-border: rgba(52, 211, 255, 0.22);
  --integration-chip-native-text: rgba(231, 236, 255, 0.88);
  --integration-chip-icon-bg: rgba(52, 211, 255, 0.08);
  --integrations-note: rgba(143, 160, 200, 0.38);
  --proof-strip-label: rgba(52, 211, 255, 0.55);
  --proof-strip-border: rgba(255, 255, 255, 0.06);
  --proof-card-bg: rgba(12, 20, 44, 0.45);
  --proof-card-border: rgba(36, 48, 95, 0.55);
  --proof-card-hover-bg: rgba(12, 20, 44, 0.7);
  --proof-card-hover-border: rgba(52, 211, 255, 0.25);
  --proof-card-icon-bg: rgba(255, 255, 255, 0.04);
  --proof-card-icon-border: rgba(255, 255, 255, 0.07);
  --proof-card-domain: rgba(52, 211, 255, 0.7);
  --hero-trust-name-bg: rgba(255, 255, 255, 0.03);
  --hero-trust-name-border: rgba(255, 255, 255, 0.08);
  --hero-trust-name-text: rgba(231, 236, 255, 0.65);

  --dropbar-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --dropbar-tile-bg: var(--card2);
  --dropbar-tile-border: var(--line2);
  --dropbar-tile-hover-bg: rgba(52, 211, 255, 0.06);
  --dropbar-tile-hover-border: rgba(52, 211, 255, 0.3);
  --dropbar-tile-active-bg: rgba(52, 211, 255, 0.08);
  --dropbar-tile-active-border: rgba(52, 211, 255, 0.4);
  --dropbar-tile-icon-bg: rgba(255, 255, 255, 0.04);
  --dropbar-tile-icon-border: rgba(255, 255, 255, 0.07);
  --dropbar-tile-cta-bg: rgba(56, 242, 194, 0.05);
  --dropbar-tile-cta-border: rgba(56, 242, 194, 0.22);
  --dropbar-divider: rgba(255, 255, 255, 0.07);
  --dropbar-live-text: #38f2c2;
  --nav-mobile-bg: rgba(8, 15, 36, 0.97);
  --nav-mobile-border: rgba(36, 48, 95, 0.65);

  --faq-bg: rgba(12, 20, 44, 0.35);
  --faq-border: rgba(36, 48, 95, 0.55);
  --faq-summary-text: rgba(231, 236, 255, 0.96);
  --faq-body-text: var(--text-muted);
  --faq-hover-border: rgba(52, 211, 255, 0.18);
  --faq-icon-bg: rgba(52, 211, 255, 0.08);
  --faq-icon-border: rgba(52, 211, 255, 0.2);
  --cta-block-bg:
    radial-gradient(900px 400px at 20% 50%, rgba(52, 211, 255, 0.12), transparent 55%),
    radial-gradient(900px 400px at 80% 50%, rgba(56, 242, 194, 0.09), transparent 55%),
    rgba(10, 18, 38, 0.7);
  --cta-block-border: rgba(52, 211, 255, 0.18);
  --cta-block-heading: var(--text);
  --cta-block-text: var(--text-muted);
  --step-line: rgba(52, 211, 255, 0.3);
  --step-num-bg:
    radial-gradient(circle at 35% 35%, rgba(52, 211, 255, 0.18), transparent 65%),
    rgba(10, 18, 38, 0.7);
  --step-num-border: rgba(52, 211, 255, 0.25);
  --step-title: rgba(231, 236, 255, 0.96);
  --surface-card-bg: rgba(12, 20, 44, 0.4);
  --surface-card-border: rgba(36, 48, 95, 0.6);
  --surface-card-muted-bg: rgba(12, 20, 44, 0.2);
  --surface-card-muted-border: rgba(36, 48, 95, 0.4);
  --surface-card-muted-title: rgba(231, 236, 255, 0.5);
  --surface-card-muted-heading: rgba(231, 236, 255, 0.4);
  --link-card-bg: rgba(12, 20, 44, 0.4);
  --link-card-border: rgba(36, 48, 95, 0.6);
  --link-card-accent-a: rgba(52, 211, 255, 0.45);
  --link-card-accent-b: rgba(56, 242, 194, 0.4);
  --link-card-muted-bg: rgba(12, 20, 44, 0.2);
  --link-card-muted-border: rgba(36, 48, 95, 0.4);
  --link-card-muted-accent: rgba(255, 255, 255, 0.1);
  --link-card-muted-title: rgba(231, 236, 255, 0.5);
  --plan-bg: rgba(12, 20, 44, 0.35);
  --plan-border: rgba(36, 48, 95, 0.7);
  --plan-pop-bg:
    radial-gradient(520px 240px at 20% 0%, rgba(52, 211, 255, 0.12), transparent 60%),
    radial-gradient(520px 240px at 80% 0%, rgba(56, 242, 194, 0.1), transparent 60%),
    rgba(12, 20, 44, 0.35);
  --plan-pop-border: rgba(52, 211, 255, 0.45);
  --plan-tag-text: #b9eeff;
  --plan-tag-bg: rgba(52, 211, 255, 0.09);
  --plan-tag-border: rgba(52, 211, 255, 0.22);
  --pricing-konnect-bg:
    radial-gradient(740px 260px at 20% 0%, rgba(52, 211, 255, 0.1), transparent 62%),
    radial-gradient(740px 260px at 80% 0%, rgba(56, 242, 194, 0.08), transparent 62%),
    rgba(12, 20, 44, 0.4);
  --reviews-band-bg: #060b18;
  --reviews-band-border: rgba(255, 255, 255, 0.06);
  --reviews-band-text: #9aa3b8;
  --reviews-band-score: #e8eaf0;
  --reviews-band-divider: rgba(255, 255, 255, 0.12);
  --star-off: #2a3a5a;
  --google-review-card-bg: #ffffff;
  --google-review-card-border: rgba(255, 255, 255, 0.12);
  --google-review-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --google-review-name: #202124;
  --google-review-co: #5f6368;
  --google-review-body: #3c4043;
  --footer-v2-bg:
    radial-gradient(1100px 520px at 18% 20%, rgba(40, 214, 227, 0.14), transparent 55%),
    radial-gradient(900px 540px at 85% 30%, rgba(51, 242, 214, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(4, 7, 14, 1), rgba(6, 10, 20, 1) 55%, rgba(4, 7, 14, 1));
  --footer-v2-border: rgba(255, 255, 255, 0.08);
  --footer-v2-heading: rgba(231, 236, 255, 0.95);
  --footer-v2-link: rgba(170, 179, 214, 0.95);
  --footer-v2-sheen: 0.35;
  --footer-v2-grid-opacity: 0.03;
  --footer-v2-top-divider: rgba(255, 255, 255, 0.08);
  --footer-v2-card-bg: linear-gradient(180deg, rgba(11, 27, 45, 0.52), rgba(6, 12, 25, 0.42));
  --footer-v2-card-border: rgba(255, 255, 255, 0.09);
  --footer-v2-card-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  --footer-v2-body: rgba(170, 179, 214, 0.9);
  --footer-v2-body-strong: rgba(231, 236, 255, 0.96);
  --footer-v2-muted: rgba(170, 179, 214, 0.9);
  --footer-v2-muted-soft: rgba(170, 179, 214, 0.85);
  --footer-v2-link-hover-color: rgba(231, 236, 255, 0.96);
  --footer-v2-link-hover-bg: rgba(10, 22, 45, 0.55);
  --footer-v2-link-hover-border: rgba(255, 255, 255, 0.12);
  --footer-v2-callout-bg: linear-gradient(180deg, rgba(11, 27, 45, 0.55), rgba(6, 12, 25, 0.45));
  --footer-v2-callout-border: rgba(255, 255, 255, 0.1);
  --footer-v2-callout-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  --footer-v2-grid-line: rgba(255, 255, 255, 0.05);
  --footer-v2-sheen-a: rgba(255, 255, 255, 0.08);
  --footer-v2-sheen-b: rgba(255, 255, 255, 0);
  --jf-grid-border: rgba(36, 48, 95, 0.55);
  --jf-step-bg: var(--bg);
  --jf-step-hover-bg: rgba(255, 255, 255, 0.025);
  --jf-icon-bg: rgba(255, 255, 255, 0.04);
  --jf-icon-border: rgba(255, 255, 255, 0.07);
  --jf-chip-border: rgba(36, 48, 95, 0.35);
  --sj-active-bg: rgba(236, 72, 153, 0.05);
  --sj-active-num: #ec4899;
  --sj-active-label: #f9a8d4;
  --sj-active-bar: linear-gradient(90deg, #ec4899, #f472b6);
  --social-feat-bg: rgba(236, 72, 153, 0.04);
  --social-feat-border: rgba(236, 72, 153, 0.2);
  --social-feat-icon-bg: rgba(236, 72, 153, 0.08);
  --social-feat-icon-border: rgba(236, 72, 153, 0.18);
  --wc-card-bg: rgba(12, 20, 44, 0.35);
  --wc-card-border: rgba(36, 48, 95, 0.55);
  --plan-icon-bg: rgba(255, 255, 255, 0.04);
  --plan-icon-border: rgba(255, 255, 255, 0.07);
  --price-badge-soft-bg: rgba(14, 22, 46, 0.18);
  --price-badge-soft-border: var(--line2);
  --price-badge-soft-text: rgba(231, 236, 255, 0.9);
  --surface-raised-a: rgba(12, 20, 44, 0.35);
  --surface-raised-b: rgba(12, 20, 44, 0.4);
  --surface-raised-c: rgba(12, 20, 44, 0.45);
  --surface-raised-d: rgba(12, 20, 44, 0.55);
  --surface-border: rgba(36, 48, 95, 0.55);
  --surface-border-medium: rgba(36, 48, 95, 0.6);
  --surface-border-soft: rgba(36, 48, 95, 0.45);
  --surface-inset: rgba(6, 11, 24, 0.8);
  --surface-inset-border: rgba(36, 48, 95, 0.9);
  --surface-grid-bg: rgba(36, 48, 95, 0.35);
  --surface-grid-line: rgba(36, 48, 95, 0.4);
  --surface-overlay: rgba(10, 18, 38, 0.7);
  --text-bright: rgba(231, 236, 255, 0.96);
  --text-dim: rgba(143, 160, 200, 0.75);
  --text-faded: rgba(143, 160, 200, 0.5);
  --text-on-dark-muted: rgba(231, 236, 255, 0.72);
  --mobile-nav-bg: rgba(8, 15, 36, 0.97);
  --mobile-nav-border: rgba(36, 48, 95, 0.65);
  --mobile-nav-item-bg: rgba(14, 22, 46, 0.22);
  --mobile-nav-item-border: rgba(36, 48, 95, 0.35);
  --hero-inner-bg: rgba(12, 20, 44, 0.4);
  --hero-inner-border: rgba(36, 48, 95, 0.6);
  --compare-card-bg: rgba(12, 20, 44, 0.4);
  --compare-card-border: rgba(36, 48, 95, 0.6);
  --stat-strip-bg: rgba(36, 48, 95, 0.45);
  --stat-strip-border: rgba(36, 48, 95, 0.45);
  --badge-glass-bg: rgba(18, 26, 54, 0.35);
  --badge-glass-border: rgba(36, 48, 95, 0.8);
  --badge-glass-text: var(--text-muted);

  --accent: var(--brand-teal);
  --accent2: var(--brand-teal-light);
  --muted: var(--text-muted);
}