/**
 * ═══════════════════════════════════════════════════
 *  LEEDRUSH v2.0 DESIGN OVERRIDE
 *  Experimental merge: Monokai Pro Brown + indigo accent system
 *  Apply AFTER style.css to override tokens
 * ═══════════════════════════════════════════════════
 */

/* ── Smooth Scroll Behavior ─────────────────────────── */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ── DESIGN TOKENS v2.0 ──────────────────────────── */
:root {
    /* Background — brighter indigo-tinted charcoal (Option A) */
    --bg-body: #1e1b2a;
    --bg-layer-1: #1e1b2a;
    --bg-layer-2: #272438;
    --bg-surface: #272438;
    --bg-navbar: rgba(28, 25, 40, 0.92);

    /* Glass — indigo-tinted, slightly more visible */
    --glass-surface: rgba(99, 102, 241, 0.06);
    --glass-border: rgba(99, 102, 241, 0.18);
    --glass-highlight: rgba(99, 102, 241, 0.08);

    /* Primary gradient — orange → pink (same, but more vivid) */
    --accent-primary: #fd971f;
    --accent-secondary: #f92672;
    --accent-glow: rgba(253, 151, 31, 0.25);
    --grad-primary: linear-gradient(135deg, #fd971f 0%, #f92672 100%);

    /* Indigo system */
    --indigo: #6366f1;
    --indigo-dim: rgba(99, 102, 241, 0.15);
    --indigo-glow: rgba(99, 102, 241, 0.10);

    /* Typography — synced with landing-aplus text vars */
    --text-primary: #f0f4ff;
    --text-secondary: #a0a8be;
    --text-muted: #6b7a90;

    /* Radius — 20px cards like dashboard */
    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    /* Shadows — softer for brighter backgrounds */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, .25);
    --shadow-glow: 0 0 40px rgba(253, 151, 31, .18);
    --shadow-indigo: 0 0 20px rgba(99, 102, 241, .14);
}

/* ── BODY & GLOBAL ───────────────────────────────── */
body {
    background: var(--bg-body);
    background-image:
        radial-gradient(circle at 100% 0%, rgba(49, 46, 129, .55) 0%, transparent 25%),
        radial-gradient(circle at 50% -10%, rgba(30, 27, 75, .6) 0%, transparent 35%);
    background-attachment: fixed;
}

/* ── NAVBAR v2.0 ─────────────────────────────────── */
.navbar,
nav.navbar,
header.navbar {
    background: var(--bg-navbar) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: none !important;
}

/* Active nav link — orange underline */
.nav-link.active,
.navbar .nav-link.active {
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* ── LANGUAGE SELECTOR v2.0 ──────────────────────── */
.lang-selector {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.lang-btn:hover {
    color: var(--text-primary);
    border-color: rgba(99, 102, 241, .35);
    background: var(--indigo-glow);
}

.lang-arrow {
    font-size: 10px;
    transition: transform .2s;
}

.lang-selector.open .lang-arrow {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1e1c1c;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 6px;
    min-width: 165px;
    max-height: 340px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .6), var(--shadow-indigo);
    display: none;
    z-index: 9999;
    scrollbar-width: thin;
    scrollbar-color: var(--indigo-dim) transparent;
}

.lang-selector.open .lang-dropdown {
    display: block;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all .15s;
    text-decoration: none;
    cursor: pointer;
}

.lang-option:hover {
    background: var(--indigo-glow);
    color: var(--text-primary);
}

.lang-option.active {
    color: var(--accent-primary);
    font-weight: 600;
}

/* ── CARDS v2.0 — indigo border system ───────────── */
.card,
.auth-card,
.pricing-card,
.feature-card,
.metric-card,
.dashboard-card,
.stat-card,
[class*="card"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    transition: border-color .3s, box-shadow .3s, transform .3s !important;
}

[class*="card"]:hover {
    border-color: rgba(99, 102, 241, .32) !important;
    box-shadow: var(--shadow-card), var(--shadow-indigo) !important;
    transform: translateY(-3px) !important;
}

/* Restore gradient text for plan prices — undo the broad [class*=card] override */
.plan-card-price {
    background: linear-gradient(135deg, #e2e8f0, #ffffff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.plan-card.featured .plan-card-price {
    background: linear-gradient(135deg, #6366f1, #f472b6) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Light theme prices — solid dark text */
[data-theme="light"] .plan-card-price {
    background: none !important;
    -webkit-text-fill-color: #1e293b !important;
    color: #1e293b !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

[data-theme="light"] .plan-card.featured .plan-card-price {
    background: linear-gradient(135deg, #6366f1, #ec4899) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.plan-card-price:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ── LOGIN / REGISTER — PREMIUM v2.0 ─────────────── */
.auth-container,
.auth-wrapper,
.login-container,
.register-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 40px;
    background:
        radial-gradient(circle at 80% 10%, rgba(49, 46, 129, .5) 0%, transparent 30%),
        radial-gradient(circle at 20% 80%, rgba(253, 151, 31, .06) 0%, transparent 35%),
        var(--bg-body);
}

.auth-card,
.login-card,
.register-card,
.auth-box {
    background: rgba(255, 255, 255, .035) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 24px !important;
    padding: 48px 44px !important;
    width: 100%;
    max-width: 480px !important;
    box-shadow: 0 8px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(99, 102, 241, .08) !important;
    backdrop-filter: blur(12px);
}

/* Auth heading */
.auth-card h1,
.auth-card h2,
.auth-card .auth-title,
.login-card h1,
.login-card h2,
.register-card h1,
.register-card h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #f0f4ff !important;
    margin-bottom: 8px !important;
    letter-spacing: -.5px;
}

/* Auth subtitle */
.auth-card .auth-subtitle,
.auth-card p,
.login-card p,
.register-card p {
    color: var(--text-secondary) !important;
    font-size: 15px !important;
}

/* Social auth buttons */
.btn-google,
.btn-github,
.social-btn,
.oauth-btn {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(99, 102, 241, .2) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    transition: all .2s !important;
}

.btn-google:hover,
.btn-github:hover,
.social-btn:hover,
.oauth-btn:hover {
    background: rgba(99, 102, 241, .1) !important;
    border-color: rgba(99, 102, 241, .4) !important;
}

/* Input fields */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(99, 102, 241, .18) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    transition: border-color .2s, box-shadow .2s !important;
    outline: none !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(253, 151, 31, .5) !important;
    box-shadow: 0 0 0 3px rgba(253, 151, 31, .08) !important;
}

/* Labels */
label,
.form-label {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}

/* Primary button */
.btn-primary,
.btn.btn-primary,
button[type="submit"].btn-primary,
.cta-btn {
    background: var(--grad-primary) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 13px 24px !important;
    box-shadow: 0 4px 20px rgba(253, 151, 31, .3) !important;
    transition: all .25s !important;
}

.btn-primary:hover,
button[type="submit"].btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(253, 151, 31, .45) !important;
}

/* Sign Up button — indigo-tinted outline */
.btn-signup,
a.btn-signup,
.btn.btn-signup {
    background: rgba(253, 151, 31, .12) !important;
    border: 1px solid rgba(253, 151, 31, .4) !important;
    color: #fd971f !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    transition: all .25s !important;
}

.btn-signup:hover {
    background: rgba(253, 151, 31, .22) !important;
    border-color: rgba(253, 151, 31, .65) !important;
    transform: translateY(-2px) !important;
}

/* ── SECTION TAGS/CHIPS ───────────────────────────── */
.badge,
.section-tag,
.tag-chip,
[class*="badge"] {
    background: rgba(99, 102, 241, .1) !important;
    border: 1px solid rgba(99, 102, 241, .28) !important;
    color: #a5b4fc !important;
    border-radius: 999px !important;
}

/* ── CHAT WINDOW v2.0 ─────────────────────────────── */
.chat-widget,
.support-chat,
.chat-container,
#chat-widget,
#support-chat {
    background: #1e1c1c !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 60px rgba(0, 0, 0, .6), var(--shadow-indigo) !important;
    overflow: hidden;
}

.chat-header,
.chat-widget-header,
#chat-header {
    background: rgba(99, 102, 241, .08) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding: 16px 20px !important;
}

.chat-header h3,
.chat-header .title,
.chat-widget-header h4 {
    color: #f0f4ff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.chat-status-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulseDot 2s ease-in-out infinite;
    display: inline-block;
    margin-right: 6px;
}

@keyframes pulseDot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.7);
    }
}

.chat-messages,
.chat-body,
#chat-messages {
    background: transparent !important;
    padding: 16px !important;
    max-height: 380px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--indigo-dim) transparent;
}

/* User message bubble */
.chat-message.user,
.message.user,
.msg-user {
    background: var(--grad-primary) !important;
    color: #fff !important;
    border-radius: 16px 16px 4px 16px !important;
    padding: 10px 14px !important;
    max-width: 78% !important;
    margin-left: auto !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    box-shadow: 0 2px 12px rgba(253, 151, 31, .25) !important;
}

/* Assistant/support message bubble */
.chat-message.bot,
.chat-message.support,
.message.bot,
.message.support,
.msg-bot {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--glass-border) !important;
    color: #f0f4ff !important;
    border-radius: 16px 16px 16px 4px !important;
    padding: 10px 14px !important;
    max-width: 78% !important;
    margin-right: auto !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
}

/* Chat input area */
.chat-input,
.chat-footer,
.chat-input-area,
#chat-input-area {
    background: rgba(255, 255, 255, .04) !important;
    border-top: 1px solid var(--glass-border) !important;
    padding: 12px 16px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.chat-input input,
.chat-input textarea,
#chat-text-input {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(99, 102, 241, .2) !important;
    border-radius: 10px !important;
    color: #f0f4ff !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    flex: 1 !important;
    outline: none !important;
    transition: border-color .2s !important;
}

.chat-input input:focus,
#chat-text-input:focus {
    border-color: rgba(253, 151, 31, .45) !important;
    box-shadow: 0 0 0 3px rgba(253, 151, 31, .07) !important;
}

.chat-send-btn,
.chat-submit,
#chat-send {
    background: var(--grad-primary) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all .2s !important;
    flex-shrink: 0 !important;
}

.chat-send-btn:hover,
#chat-send:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 4px 16px rgba(253, 151, 31, .4) !important;
}

/* Floating chat toggle button */
.chat-toggle,
.support-toggle,
#chat-toggle,
.how-it-works-btn,
[id*="how-it-works"] {
    background: var(--grad-primary) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 12px 22px !important;
    box-shadow: 0 4px 20px rgba(253, 151, 31, .4) !important;
    cursor: pointer !important;
    transition: all .25s !important;
}

.chat-toggle:hover,
#chat-toggle:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 8px 32px rgba(253, 151, 31, .55) !important;
}

/* ── FOOTER v2.0 ─────────────────────────────────── */
footer,
.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: #1e1b2a !important;
}

.footer-links a,
.footer a {
    color: var(--text-secondary) !important;
    transition: color .2s !important;
}

.footer-links a:hover,
.footer a:hover {
    color: var(--accent-primary) !important;
}

/* ── TABLE IMPROVEMENTS ───────────────────────────── */
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

thead th {
    background: rgba(99, 102, 241, .06) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #a5b4fc !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 14px 20px !important;
}

tbody tr:hover {
    background: rgba(99, 102, 241, .04) !important;
}

tbody td {
    border-bottom: 1px solid rgba(99, 102, 241, .08) !important;
    padding: 14px 20px !important;
    color: var(--text-primary) !important;
}

/* ── SIDEBAR v2.0 ─────────────────────────────────── */
.sidebar,
#sidebar,
.left-sidebar {
    background: rgba(15, 13, 13, .75) !important;
    border-right: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(12px) !important;
}

.sidebar-link.active,
.sidebar .nav-item.active,
.sidebar .active {
    background: rgba(99, 102, 241, .1) !important;
    border-left: 2px solid var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* ── Light theme sidebar ───────────────────────────── */
[data-theme="light"] .sidebar,
[data-theme="light"] #sidebar,
[data-theme="light"] .left-sidebar {
    background: #fafafa !important;
    border-right: 1px solid #e5e5e5 !important;
    backdrop-filter: none !important;
}

[data-theme="light"] .sidebar-title {
    color: #6b7280 !important;
}

[data-theme="light"] .sidebar-link {
    color: #374151 !important;
}

[data-theme="light"] .sidebar-link:hover {
    color: #e8850a !important;
    background: rgba(232, 133, 10, 0.06) !important;
}

[data-theme="light"] .sidebar-link.active,
[data-theme="light"] .sidebar .nav-item.active,
[data-theme="light"] .sidebar .active {
    color: #e8850a !important;
    background: rgba(232, 133, 10, 0.08) !important;
    border-left-color: #e8850a !important;
    font-weight: 600 !important;
}

/* ── SCROLLBAR ────────────────────────────────────── */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(253, 151, 31, .4) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(253, 151, 31, .35);
    border-radius: 3px;
    transition: background .2s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(253, 151, 31, .65);
}

/* ── HERO ORBS v2.0 ──────────────────────────────── */
.hero-orb,
.orb,
[class*="orb"] {
    animation: floatOrbV2 9s ease-in-out infinite !important;
}

@keyframes floatOrbV2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(25px, -18px) scale(1.04);
    }

    66% {
        transform: translate(-18px, 25px) scale(.96);
    }
}

/* ── THEME TOGGLE ────────────────────────────────── */
.theme-toggle,
#theme-toggle,
.theme-switcher {
    background: var(--glass-surface) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px !important;
    color: var(--text-secondary) !important;
    transition: all .2s !important;
}

.theme-toggle:hover {
    border-color: rgba(99, 102, 241, .35) !important;
}

/* ── MISC POLISH ─────────────────────────────────── */
/* Dividers */
hr,
.divider {
    border-color: var(--glass-border) !important;
}

/* Placeholder text */
::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* Selection */
::selection {
    background: rgba(253, 151, 31, .25);
    color: #fff;
}

/* Link orange accent */
a.link-accent,
a.text-accent {
    color: var(--accent-primary) !important;
}

/* Success state */
.alert-success,
.badge-success {
    background: rgba(34, 197, 94, .12) !important;
    border-color: rgba(34, 197, 94, .25) !important;
    color: #4ade80 !important;
}

/* Danger/error state */
.alert-danger,
.badge-danger {
    background: rgba(249, 38, 114, .1) !important;
    border-color: rgba(249, 38, 114, .25) !important;
    color: #fb7185 !important;
}

/* ═══════════════════════════════════════════════════
   AUTH PAGES — SPECIFIC v2.0 OVERRIDES
   ═══════════════════════════════════════════════════ */

/* Background glow orb */
.auth-bg-glow {
    position: fixed;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle at 100% 0%, rgba(49, 46, 129, .55) 0%, transparent 50%),
        radial-gradient(circle at 30% 100%, rgba(253, 151, 31, .06) 0%, transparent 50%);
    top: -200px;
    right: -200px;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(60px);
    animation: floatOrbV2 10s ease-in-out infinite;
}

/* Auth page layout */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Auth Card */
.auth-card {
    background: rgba(255, 255, 255, .035) !important;
    border: 1px solid rgba(99, 102, 241, .18) !important;
    border-radius: 24px !important;
    padding: 48px 44px !important;
    width: 100% !important;
    max-width: 460px !important;
    box-shadow: 0 8px 60px rgba(0, 0, 0, .55), 0 0 30px rgba(99, 102, 241, .07) !important;
    backdrop-filter: blur(14px) !important;
}

/* Auth header */
.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.logo-icon {
    font-size: 36px;
    display: block;
    margin: 0 auto 16px;
    filter: drop-shadow(0 0 12px rgba(253, 151, 31, .5));
}

.auth-header h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #f0f4ff !important;
    background: linear-gradient(135deg, #fd971f, #f92672);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px !important;
}

.auth-header p {
    color: #8892a8 !important;
    font-size: 14px !important;
}

/* Social buttons row */
.social-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.social-btns .btn {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(99, 102, 241, .2) !important;
    color: #f0f4ff !important;
    border-radius: 10px !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all .2s !important;
}

.social-btns .btn:hover {
    background: rgba(99, 102, 241, .1) !important;
    border-color: rgba(99, 102, 241, .4) !important;
    transform: translateY(-1px) !important;
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #4a5568;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(99, 102, 241, .15);
}

/* Input wrapper with icon */
.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #4a5568;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.input.with-icon {
    padding-left: 40px !important;
}

/* Auth footer link */
.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #8892a8;
}

.auth-footer a {
    color: #fd971f !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.auth-footer a:hover {
    text-decoration: underline !important;
}

/* Error state */
.text-danger,
#error-msg {
    color: #fb7185 !important;
    font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════
   SUPPORT / CHAT WINDOW v2.0
   ═══════════════════════════════════════════════════ */

/* Chat floating button override */
#how-it-works-btn,
.how-it-works,
button.how-it-works-btn,
#openChatBtn {
    background: linear-gradient(135deg, #fd971f, #f92672) !important;
    border-radius: 50px !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 24px rgba(253, 151, 31, .4) !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Support page layout */
.support-page,
.chat-page {
    background: var(--bg-body) !important;
}

/* Support chat frame */
.support-chat-window,
.chat-window {
    background: #1e1c1c !important;
    border: 1px solid rgba(99, 102, 241, .18) !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 8px 60px rgba(0, 0, 0, .5), 0 0 20px rgba(99, 102, 241, .08) !important;
}

/* Color accents for stat numbers on dashboard */
.stat-value,
.metric-value,
.stat-number {
    background: linear-gradient(135deg, #fd971f, #f92672);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME — COMPREHENSIVE OVERRIDES
   Adapts the dark-first A+ landing to light mode
   ═══════════════════════════════════════════════════ */

[data-theme="light"],
:root[data-theme="light"] {
    /* Background — clean warm white */
    --bg-body: #f8f7f6;
    --bg-layer-1: #f8f7f6;
    --bg-layer-2: #ffffff;
    --bg-surface: #ffffff;
    --bg-navbar: rgba(255, 255, 255, 0.92);

    /* Glass — subtle indigo tint on white */
    --glass-surface: rgba(99, 102, 241, 0.04);
    --glass-border: rgba(99, 102, 241, 0.12);
    --glass-highlight: rgba(99, 102, 241, 0.06);

    /* Accents stay vivid */
    --accent-primary: #e8850a;
    --accent-secondary: #e01d5f;
    --accent-glow: rgba(253, 151, 31, 0.15);
    --grad-primary: linear-gradient(135deg, #fd971f 0%, #f92672 100%);

    /* Indigo */
    --indigo: #4f46e5;
    --indigo-dim: rgba(79, 70, 229, 0.1);
    --indigo-glow: rgba(79, 70, 229, 0.06);

    /* Typography — dark text on light backgrounds */
    --text-primary: #1a1625;
    --text-secondary: #5a5775;
    --text-muted: #9ca3af;

    /* Shadows — lighter, softer */
    --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 30px rgba(253, 151, 31, 0.1);
    --shadow-indigo: 0 0 16px rgba(99, 102, 241, 0.06);
}

/* ── BODY ──────────────────────────────────────────── */
[data-theme="light"] body {
    background: var(--bg-body) !important;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(99, 102, 241, .06) 0%, transparent 25%),
        radial-gradient(circle at 50% -10%, rgba(168, 85, 247, .04) 0%, transparent 35%) !important;
    color: var(--text-primary) !important;
}

/* ── NAVBAR ────────────────────────────────────────── */
[data-theme="light"] .nav,
[data-theme="light"] .navbar,
[data-theme="light"] header.nav {
    background: var(--bg-navbar) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

[data-theme="light"] .nav__link,
[data-theme="light"] .nav__links a,
[data-theme="light"] .nav-link {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .nav__link:hover,
[data-theme="light"] .nav__links a:hover {
    color: var(--text-primary) !important;
}

[data-theme="light"] .logo-text {
    color: var(--text-primary) !important;
}

[data-theme="light"] .btn--ghost,
[data-theme="light"] a.btn--ghost {
    color: var(--text-primary) !important;
    border-color: rgba(99, 102, 241, .2) !important;
}

[data-theme="light"] .btn--ghost:hover {
    background: rgba(99, 102, 241, .06) !important;
}

/* ── HERO ──────────────────────────────────────────── */
[data-theme="light"] .hero {
    background: linear-gradient(180deg, #f0eef5 0%, var(--bg-body) 100%) !important;
}

[data-theme="light"] .hero__title {
    color: var(--text-primary) !important;
}

[data-theme="light"] .hero__sub {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .hero__sub strong {
    color: var(--accent-primary) !important;
}

[data-theme="light"] .hero__badge {
    background: rgba(99, 102, 241, .08) !important;
    border-color: rgba(99, 102, 241, .2) !important;
    color: var(--indigo) !important;
}

[data-theme="light"] .hero__stats {
    background: rgba(255, 255, 255, .8) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .stat__num {
    color: var(--accent-primary) !important;
    -webkit-text-fill-color: unset !important;
}

[data-theme="light"] .stat__label {
    color: var(--text-secondary) !important;
}

/* Opportunity Card */
[data-theme="light"] .opp-card {
    background: #ffffff !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .opp-card__name,
[data-theme="light"] .opp-card__role {
    color: var(--text-primary) !important;
}

[data-theme="light"] .opp-card__details .info-row span:first-child {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .opp-card__details .info-row span:last-child {
    color: var(--text-primary) !important;
}

[data-theme="light"] .opp-card__footer {
    color: var(--text-primary) !important;
}

[data-theme="light"] .opp-card__bar {
    background: rgba(99, 102, 241, .1) !important;
}

/* ── ORBS — hide in light mode ─────────────────────── */
[data-theme="light"] .orb,
[data-theme="light"] [class*="orb--"] {
    opacity: 0.15 !important;
}

/* ── TRUST BAR ─────────────────────────────────────── */
[data-theme="light"] .trust {
    background: rgba(99, 102, 241, .03) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

[data-theme="light"] .trust__label {
    color: var(--text-muted) !important;
}

[data-theme="light"] .trust__label strong {
    color: #e8850a !important;
}

[data-theme="light"] .trust-badge,
[data-theme="light"] .trust-badge--premium {
    background: #ffffff !important;
    border: 1px solid rgba(79, 70, 229, .1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
}

[data-theme="light"] .trust-badge__text strong {
    color: #1a1a2e !important;
}

[data-theme="light"] .trust-badge__text span {
    color: #64748b !important;
}

[data-theme="light"] .trust-badge__icon {
    background: rgba(79, 70, 229, .06) !important;
    border-color: rgba(79, 70, 229, .1) !important;
}

[data-theme="light"] .trust__results {
    background: rgba(79, 70, 229, .03) !important;
    border-color: rgba(79, 70, 229, .08) !important;
}

[data-theme="light"] .result-stat__label {
    color: #64748b !important;
}

[data-theme="light"] .result-stat__divider {
    background: rgba(79, 70, 229, .1) !important;
}

[data-theme="light"] .stack-item {
    color: var(--text-secondary) !important;
}

/* ── SECTIONS (Problem, How It Works, etc.) ────────── */
[data-theme="light"] .section {
    background: transparent !important;
}

[data-theme="light"] .section-tag,
[data-theme="light"] .section-tag span {
    background: rgba(79, 70, 229, .08) !important;
    border-color: rgba(79, 70, 229, .2) !important;
    color: var(--indigo) !important;
}

[data-theme="light"] .section-title,
[data-theme="light"] .section-title h2,
[data-theme="light"] h2 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .section-sub {
    color: var(--text-secondary) !important;
}

/* ── CARDS (problem, metric, step, testi) ──────────── */
[data-theme="light"] .problem-card,
[data-theme="light"] .metric-card,
[data-theme="light"] .step,
[data-theme="light"] .testi-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .book-form-card,
[data-theme="light"] .choose-box,
[data-theme="light"] [class*="card"] {
    background: #ffffff !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .problem-card h3,
[data-theme="light"] .metric-card h3,
[data-theme="light"] .step h3,
[data-theme="light"] .pricing-card h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .problem-card p,
[data-theme="light"] .metric-card p,
[data-theme="light"] .step p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .problem-card__stat {
    background: rgba(79, 70, 229, .06) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .problem-card__stat span {
    color: var(--accent-primary) !important;
}

/* Step numbers & arrows */
[data-theme="light"] .step__num {
    color: var(--accent-primary) !important;
}

[data-theme="light"] .step__arrow svg {
    color: var(--text-muted) !important;
}

/* Pills */
[data-theme="light"] .pill {
    background: rgba(99, 102, 241, .08) !important;
    color: var(--indigo) !important;
}

/* Metric rows */
[data-theme="light"] .metric-row span:first-child {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .metric-val {
    color: var(--text-primary) !important;
}

[data-theme="light"] .metric-val.positive {
    color: #16a34a !important;
}

[data-theme="light"] .metric-val.negative {
    color: #dc2626 !important;
}

/* Choose box */
[data-theme="light"] .choose-box {
    background: linear-gradient(135deg, rgba(79, 70, 229, .04), rgba(168, 85, 247, .04)) !important;
}

[data-theme="light"] .choose-box h3,
[data-theme="light"] .choose-box__sub {
    color: var(--text-primary) !important;
}

[data-theme="light"] .choose-stat span:last-child {
    color: var(--text-secondary) !important;
}

/* ── COMPARISON TABLE ──────────────────────────────── */
[data-theme="light"] .compare-table__inner,
[data-theme="light"] .compare-table table {
    background: #ffffff !important;
}

[data-theme="light"] .compare-table thead th {
    background: rgba(79, 70, 229, .05) !important;
    color: var(--indigo) !important;
}

[data-theme="light"] .compare-table .col-leedrush {
    background: rgba(253, 151, 31, .04) !important;
}

[data-theme="light"] .compare-table tbody td {
    color: var(--text-primary) !important;
    border-color: rgba(99, 102, 241, .06) !important;
}

[data-theme="light"] .no-cc {
    color: var(--text-secondary) !important;
}

/* ── TESTIMONIALS ──────────────────────────────────── */
[data-theme="light"] .testi-card {
    border-left: 4px solid var(--accent-primary) !important;
}

[data-theme="light"] .testi-card:nth-child(2) {
    border-left-color: #a855f7 !important;
}

[data-theme="light"] .testi-card:nth-child(3) {
    border-left-color: #22c55e !important;
}

[data-theme="light"] .stars {
    color: #f59e0b !important;
}

[data-theme="light"] .testi-card blockquote {
    color: var(--text-primary) !important;
}

[data-theme="light"] .testi-name {
    color: var(--text-primary) !important;
}

[data-theme="light"] .testi-role {
    color: var(--text-secondary) !important;
}

/* ── PRICING CARDS ─────────────────────────────────── */
[data-theme="light"] .pricing-card {
    background: #ffffff !important;
}

[data-theme="light"] .pricing-card--popular {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 4px 24px rgba(253, 151, 31, .12) !important;
}

[data-theme="light"] .price-amount {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: unset !important;
}

[data-theme="light"] .price-period,
[data-theme="light"] .price-credits {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .pricing-features li {
    color: var(--text-secondary) !important;
}

/* ── BOOK A DEMO ───────────────────────────────────── */
[data-theme="light"] .book {
    background: linear-gradient(135deg, rgba(79, 70, 229, .03), rgba(168, 85, 247, .03)) !important;
}

[data-theme="light"] .book__benefits strong,
[data-theme="light"] .book__left h2 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .book__benefits p,
[data-theme="light"] .book__left p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .book-form-card {
    background: #ffffff !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08) !important;
}

[data-theme="light"] .book-form-card h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .book-form-card p,
[data-theme="light"] .form-note {
    color: var(--text-secondary) !important;
}

/* ── FORM INPUTS (light) ───────────────────────────── */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: #f8f7f6 !important;
    border: 1px solid rgba(99, 102, 241, .15) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(253, 151, 31, .08) !important;
}

[data-theme="light"] label {
    color: var(--text-secondary) !important;
}

[data-theme="light"] ::placeholder {
    color: #b0aec0 !important;
}

/* ── CTA BANNER ────────────────────────────────────── */
[data-theme="light"] .cta-banner {
    background: linear-gradient(135deg, rgba(79, 70, 229, .06), rgba(168, 85, 247, .04)) !important;
}

[data-theme="light"] .cta-banner h2 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .cta-banner p {
    color: var(--text-secondary) !important;
}

/* ── MODAL ─────────────────────────────────────────── */
[data-theme="light"] .modal-backdrop {
    background: rgba(0, 0, 0, .4) !important;
}

[data-theme="light"] .modal {
    background: #ffffff !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 16px 60px rgba(0, 0, 0, .12) !important;
}

[data-theme="light"] .modal h2,
[data-theme="light"] .modal h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .modal p,
[data-theme="light"] .modal__perks li,
[data-theme="light"] .modal__response {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .modal__close {
    color: var(--text-secondary) !important;
}

/* ── FOOTER ────────────────────────────────────────── */
[data-theme="light"] .footer,
[data-theme="light"] footer {
    background: #f0eef5 !important;
    border-top: 1px solid var(--glass-border) !important;
}

[data-theme="light"] .footer h4,
[data-theme="light"] .footer__col h4 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .footer a {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .footer a:hover {
    color: var(--accent-primary) !important;
}

[data-theme="light"] .footer__bottom p {
    color: var(--text-muted) !important;
}

[data-theme="light"] .footer__brand p {
    color: var(--text-secondary) !important;
}

/* ── CHAT WIDGET — FULL LIGHT THEME ──────────────── */

/* Chat window container */
[data-theme="light"] .chat-widget,
[data-theme="light"] .support-chat,
[data-theme="light"] #chat-widget,
[data-theme="light"] .chat-window,
[data-theme="light"] .support-chat-window {
    background: #ffffff !important;
    border: 1px solid rgba(79, 70, 229, .12) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .1), 0 0 20px rgba(79, 70, 229, .04) !important;
}

/* Chat widget container (the outer wrapper) */
[data-theme="light"] .chat-widget-container .chat-window {
    background: #ffffff !important;
    border: 1px solid rgba(79, 70, 229, .12) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .1) !important;
}

/* Header */
[data-theme="light"] .chat-header,
[data-theme="light"] .chat-widget-header {
    background: rgba(79, 70, 229, .04) !important;
    border-bottom: 1px solid rgba(79, 70, 229, .08) !important;
}

[data-theme="light"] .chat-header h3,
[data-theme="light"] .chat-header h4,
[data-theme="light"] .chat-widget-header h4 {
    color: #1a1a2e !important;
}

[data-theme="light"] .chat-header span {
    color: #64748b !important;
}

/* Header action buttons (expand, close) */
[data-theme="light"] .chat-header-actions button,
[data-theme="light"] .chat-close,
[data-theme="light"] .chat-expand-btn {
    color: #64748b !important;
}

[data-theme="light"] .chat-header-actions button:hover {
    color: #1a1a2e !important;
    background: rgba(79, 70, 229, .06) !important;
}

/* Message body area */
[data-theme="light"] .chat-body,
[data-theme="light"] .chat-messages,
[data-theme="light"] #chat-messages {
    background: #ffffff !important;
}

/* Bot messages */
[data-theme="light"] .chat-message.bot,
[data-theme="light"] .chat-msg.msg-bot,
[data-theme="light"] .msg-bot {
    background: #f4f3f8 !important;
    border: 1px solid rgba(79, 70, 229, .08) !important;
    color: #1a1a2e !important;
}

/* User messages — keep gradient but lighter shadow */
[data-theme="light"] .chat-message.user,
[data-theme="light"] .chat-msg.msg-user,
[data-theme="light"] .msg-user {
    box-shadow: 0 2px 12px rgba(253, 151, 31, .15) !important;
}

/* Quick reply chips */
[data-theme="light"] .chat-quick-chip {
    background: rgba(79, 70, 229, .06) !important;
    border: 1px solid rgba(79, 70, 229, .12) !important;
    color: #4f46e5 !important;
}

[data-theme="light"] .chat-quick-chip:hover {
    background: rgba(79, 70, 229, .12) !important;
    border-color: rgba(79, 70, 229, .25) !important;
}

/* Footer / input area */
[data-theme="light"] .chat-footer,
[data-theme="light"] .chat-input-area,
[data-theme="light"] #chat-input-area {
    background: #fafafa !important;
    border-top: 1px solid rgba(79, 70, 229, .08) !important;
}

/* Text input */
[data-theme="light"] .chat-footer .chat-input,
[data-theme="light"] .chat-footer input,
[data-theme="light"] #chat-input,
[data-theme="light"] #chat-text-input {
    background: #f4f3f8 !important;
    border: 1px solid rgba(79, 70, 229, .12) !important;
    color: #1a1a2e !important;
}

[data-theme="light"] .chat-footer .chat-input::placeholder,
[data-theme="light"] #chat-input::placeholder {
    color: #94a3b8 !important;
}

[data-theme="light"] .chat-footer .chat-input:focus,
[data-theme="light"] #chat-input:focus {
    border-color: rgba(79, 70, 229, .3) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .06) !important;
}

/* Send button — keep gradient */
[data-theme="light"] .chat-send,
[data-theme="light"] .chat-send-btn {
    box-shadow: 0 2px 8px rgba(253, 151, 31, .2) !important;
}

/* Toggle FAB button */
[data-theme="light"] .chat-toggle-btn {
    background: linear-gradient(135deg, #fd971f, #f92672) !important;
    box-shadow: 0 4px 20px rgba(253, 151, 31, .25) !important;
}

/* Inline style overrides via CSS specificity */
[data-theme="light"] .chat-body [style*="color:var(--text-secondary)"] {
    color: #64748b !important;
}

/* ── LANG SELECTOR (light) ─────────────────────────── */
[data-theme="light"] .lang-btn {
    background: rgba(79, 70, 229, .05) !important;
    border-color: rgba(79, 70, 229, .12) !important;
    color: var(--text-secondary) !important;
}

[data-theme="light"] .lang-dropdown {
    background: #ffffff !important;
    border-color: var(--glass-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .08) !important;
}

[data-theme="light"] .lang-option {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .lang-option:hover {
    background: rgba(79, 70, 229, .06) !important;
    color: var(--text-primary) !important;
}

/* ── AUTH PAGES (light) ────────────────────────────── */
[data-theme="light"] .auth-container,
[data-theme="light"] .auth-wrapper,
[data-theme="light"] .login-container,
[data-theme="light"] .register-container,
[data-theme="light"] .auth-page {
    background:
        radial-gradient(circle at 80% 10%, rgba(99, 102, 241, .06) 0%, transparent 30%),
        radial-gradient(circle at 20% 80%, rgba(253, 151, 31, .04) 0%, transparent 35%),
        var(--bg-body) !important;
}

[data-theme="light"] .auth-card {
    background: #ffffff !important;
    border-color: var(--glass-border) !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, .06) !important;
}

[data-theme="light"] .auth-header h2 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .auth-divider {
    color: var(--text-muted) !important;
}

[data-theme="light"] .auth-divider::before,
[data-theme="light"] .auth-divider::after {
    background: var(--glass-border) !important;
}

/* ── SCROLLBAR (light) ─────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, .15) !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, .3) !important;
}

/* ── BG GLOW (light mode) ──────────────────────────── */
[data-theme="light"] .auth-bg-glow {
    opacity: 0.3 !important;
}

/* ── GENERAL TEXT SWEEP ────────────────────────────── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
    color: var(--text-primary) !important;
}

[data-theme="light"] p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] strong {
    color: var(--text-primary) !important;
}

/* ── TABLE (light) ─────────────────────────────────── */
[data-theme="light"] thead th {
    background: rgba(79, 70, 229, .04) !important;
    color: var(--indigo) !important;
}

[data-theme="light"] tbody td {
    color: var(--text-primary) !important;
    border-color: rgba(99, 102, 241, .06) !important;
}

[data-theme="light"] tbody tr:hover {
    background: rgba(79, 70, 229, .03) !important;
}

[data-theme="light"] .btn--signup,
[data-theme="light"] a.btn--signup {
    background: rgba(253, 151, 31, .1) !important;
    border-color: rgba(253, 151, 31, .35) !important;
    color: #e8850a !important;
}

/* ─── URGENCY BAR v2 ─────────────────────────────── */
.urgency-bar {
    background: linear-gradient(90deg, rgba(99, 102, 241, .08), rgba(253, 151, 31, .08)) !important;
    border-top: 1px solid rgba(99, 102, 241, .12) !important;
    border-bottom: 1px solid rgba(99, 102, 241, .12) !important;
    padding: 16px 0 !important;
}

.urgency-bar__inner {
    color: rgba(255, 255, 255, .65) !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
}

.urgency-bar__inner strong {
    color: rgba(255, 255, 255, .95) !important;
}

.urgency-dot {
    color: rgba(255, 255, 255, .45) !important;
}

/* ─── FAQ SECTION v2 ─────────────────────────────── */
.faq {
    background: transparent !important;
}

.faq-grid {
    max-width: 780px !important;
    margin: 0 auto !important;
}

.faq-item {
    background: #232020 !important;
    border: 1px solid rgba(99, 102, 241, .12) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2) !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
}

.faq-item:hover {
    border-color: rgba(99, 102, 241, .25) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25) !important;
}

.faq-item[open] {
    border-color: #fd971f !important;
    box-shadow: 0 4px 24px rgba(253, 151, 31, .08) !important;
}

.faq-item summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .92) !important;
    cursor: pointer !important;
    list-style: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    transition: background .15s ease !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -0.01em !important;
}

.faq-item summary::-webkit-details-marker {
    display: none !important;
}

.faq-item summary::marker {
    display: none !important;
    content: '' !important;
}

.faq-item summary::after {
    content: '+' !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, .55) !important;
    flex-shrink: 0 !important;
    margin-left: 16px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(99, 102, 241, .08) !important;
    transition: all .2s ease !important;
}

.faq-item[open] summary::after {
    content: '−' !important;
    color: #fd971f !important;
    background: rgba(253, 151, 31, .12) !important;
}

.faq-item summary:hover {
    background: rgba(99, 102, 241, .04) !important;
}

.faq-item summary:hover::after {
    background: rgba(99, 102, 241, .15) !important;
    color: rgba(255, 255, 255, .7) !important;
}

.faq-answer {
    padding: 0 24px 20px 24px !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, .6) !important;
    font-family: 'Inter', sans-serif !important;
    border-top: 1px solid rgba(99, 102, 241, .08) !important;
    margin-top: 0 !important;
    padding-top: 16px !important;
}

.faq-answer p {
    margin: 0 !important;
}

.faq-answer strong {
    color: #fd971f !important;
    font-weight: 600 !important;
}

/* ─── 4-COLUMN PRICING GRID — PREMIUM ────────────── */
#pricing .container {
    max-width: 1360px !important;
}

.pricing-grid.pricing-grid--4col {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pricing-grid--4col .pricing-card {
    padding: 0 !important;
    gap: 0 !important;
    background: rgba(35, 32, 32, .65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(99, 102, 241, .1) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
    position: relative !important;
}

/* gradient top accent bar */
.pricing-grid--4col .pricing-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, rgba(99, 102, 241, .4), rgba(99, 102, 241, .15)) !important;
    transition: opacity .3s !important;
}

.pricing-grid--4col .pricing-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3), 0 0 30px rgba(99, 102, 241, .06) !important;
    border-color: rgba(99, 102, 241, .2) !important;
}

/* POPULAR card — orange/pink gradient accent */
.pricing-grid--4col .pricing-card--popular {
    border-color: rgba(253, 151, 31, .2) !important;
    background: rgba(35, 32, 32, .8) !important;
}

.pricing-grid--4col .pricing-card--popular::before {
    height: 3px !important;
    background: linear-gradient(90deg, #fd971f, #f92672) !important;
    opacity: 1 !important;
}

.pricing-grid--4col .pricing-card--popular:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 40px rgba(253, 151, 31, .08) !important;
    border-color: rgba(253, 151, 31, .3) !important;
}

/* popular badge */
.pricing-grid--4col .popular-badge {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    background: linear-gradient(135deg, #fd971f, #f92672) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    z-index: 2 !important;
    font-family: 'Inter', sans-serif !important;
}

/* ── CARD HEADER ─────────────────────────────────── */
.pricing-grid--4col .pricing-card__header {
    padding: 28px 24px 20px !important;
    border-bottom: 1px solid rgba(99, 102, 241, .06) !important;
}

.pricing-grid--4col .pricing-card__header h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, .95) !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -.01em !important;
}

.pricing-card__desc {
    font-size: 13px !important;
    color: rgba(255, 255, 255, .55) !important;
    margin: 4px 0 20px 0 !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.4 !important;
}

/* price block */
.pricing-grid--4col .pricing-card__price {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
}

.pricing-grid--4col .price-amount {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -.02em !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.1 !important;
}

.pricing-grid--4col .price-period {
    font-size: 14px !important;
    color: rgba(255, 255, 255, .5) !important;
    font-weight: 400 !important;
    font-family: 'Inter', sans-serif !important;
}

.pricing-grid--4col .price-credits {
    font-size: 12px !important;
    color: rgba(99, 102, 241, .7) !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    margin-top: 4px !important;
}

/* popular card price accent */
.pricing-grid--4col .pricing-card--popular .price-amount {
    background: linear-gradient(135deg, #fd971f, #f9a825) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.pricing-grid--4col .pricing-card--popular .price-credits {
    color: rgba(253, 151, 31, .6) !important;
}

/* ── FEATURES LIST ───────────────────────────────── */
.pricing-grid--4col .pricing-features {
    padding: 20px 24px !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 !important;
}

.pricing-grid--4col .pricing-features li {
    font-size: 13px !important;
    color: rgba(255, 255, 255, .6) !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.4 !important;
    padding-left: 0 !important;
}

/* checkmark accent color */
.pricing-grid--4col .pricing-card--popular .pricing-features li {
    color: rgba(255, 255, 255, .7) !important;
}

/* ── CTA BUTTON AREA ─────────────────────────────── */
.pricing-grid--4col .pricing-card .btn {
    display: flex !important;
    width: auto !important;
    margin: 0 24px 24px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -.01em !important;
    transition: all .2s ease !important;
}

.pricing-grid--4col .pricing-card .btn--ghost {
    background: rgba(99, 102, 241, .06) !important;
    border: 1px solid rgba(99, 102, 241, .15) !important;
    color: rgba(255, 255, 255, .8) !important;
}

.pricing-grid--4col .pricing-card .btn--ghost:hover {
    background: rgba(99, 102, 241, .12) !important;
    border-color: rgba(99, 102, 241, .3) !important;
    color: #fff !important;
}

/* Light theme pricing ghost buttons — high specificity override */
[data-theme="light"] .pricing-grid--4col .pricing-card .btn--ghost {
    background: rgba(79, 70, 229, .04) !important;
    border: 1px solid rgba(79, 70, 229, .2) !important;
    color: #4f46e5 !important;
}

[data-theme="light"] .pricing-grid--4col .pricing-card .btn--ghost:hover {
    background: rgba(79, 70, 229, .1) !important;
    border-color: rgba(79, 70, 229, .35) !important;
    color: #4338ca !important;
}

.pricing-grid--4col .pricing-card .btn--primary {
    background: linear-gradient(135deg, #fd971f, #f92672) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(253, 151, 31, .2) !important;
}

.pricing-grid--4col .pricing-card .btn--primary:hover {
    box-shadow: 0 6px 24px rgba(253, 151, 31, .35) !important;
    transform: translateY(-1px) !important;
}

/* ─── ADD-ONS SECTION ────────────────────────────── */
.pricing-addons {
    margin-top: 48px !important;
    padding: 32px !important;
    background: #232020 !important;
    border: 1px solid rgba(99, 102, 241, .12) !important;
    border-radius: 16px !important;
}

.addons-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, .95) !important;
    margin: 0 0 6px 0 !important;
    font-family: 'Inter', sans-serif !important;
}

.addons-sub {
    font-size: 14px !important;
    color: rgba(255, 255, 255, .5) !important;
    margin: 0 0 24px 0 !important;
    font-family: 'Inter', sans-serif !important;
}

.addons-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.addon-card {
    background: rgba(99, 102, 241, .04) !important;
    border: 1px solid rgba(99, 102, 241, .1) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: border-color .2s !important;
}

.addon-card:hover {
    border-color: rgba(99, 102, 241, .25) !important;
}

.addon-card__header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.addon-icon {
    font-size: 28px !important;
    flex-shrink: 0 !important;
}

.addon-card__header h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .92) !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

.addon-card__header p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, .6) !important;
    margin: 2px 0 0 0 !important;
    font-family: 'Inter', sans-serif !important;
}

.addon-price {
    margin-left: auto !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fd971f !important;
    white-space: nowrap !important;
    font-family: 'Inter', sans-serif !important;
}

.addon-price small {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, .55) !important;
}

.addons-bundle {
    text-align: center !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, .55) !important;
    margin: 20px 0 0 0 !important;
    font-family: 'Inter', sans-serif !important;
}

.addons-bundle strong {
    color: #22c55e !important;
}

/* ─── TRUST SECTION ─────────────────────────────── */
.trust__label strong {
    color: #fd971f !important;
}

/* ─── TRUST PILLS — COMPACT INLINE ROW ──────────── */
.trust-pills {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 24px 0 32px !important;
}

.trust-pill {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    color: rgba(255, 255, 255, .75) !important;
    white-space: nowrap !important;
    transition: all .25s ease !important;
}

.trust-pill:hover {
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: rgba(255, 255, 255, .9) !important;
}

.trust-pill__check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.trust-pill__check--indigo {
    background: rgba(99, 102, 241, .15) !important;
    color: #818cf8 !important;
}

.trust-pill__check--emerald {
    background: rgba(16, 185, 129, .15) !important;
    color: #34d399 !important;
}

.trust-pill__check--amber {
    background: rgba(245, 158, 11, .15) !important;
    color: #fbbf24 !important;
}

.trust-pill__check--violet {
    background: rgba(139, 92, 246, .15) !important;
    color: #a78bfa !important;
}

/* ─── TRUST STATS — KEY NUMBERS ─────────────────── */
.trust-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
}

.trust-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
}

/* subtle vertical divider between stats */
.trust-stat+.trust-stat::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, .08) !important;
}

.trust-stat__num {
    font-size: 28px !important;
    font-weight: 800 !important;
    font-family: 'Inter', sans-serif !important;
    background: linear-gradient(135deg, #fd971f, #f92672) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    letter-spacing: -.02em !important;
    line-height: 1.1 !important;
}

.trust-stat__label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, .5) !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

/* ─── RESPONSIVE TRUST ──────────────────────────── */
@media (max-width: 768px) {
    .trust-pills {
        gap: 8px !important;
    }

    .trust-pill {
        font-size: 12px !important;
        padding: 6px 14px !important;
    }

    .trust-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px 0 !important;
    }

    .trust-stat+.trust-stat::before {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .trust-pills {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .trust-pill {
        justify-content: center !important;
    }
}

/* ─── RESPONSIVE PRICING ────────────────────────── */
@media (max-width: 1100px) {
    .pricing-grid.pricing-grid--4col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .pricing-grid.pricing-grid--4col {
        grid-template-columns: 1fr !important;
    }

    .addons-grid {
        grid-template-columns: 1fr !important;
    }

    .pricing-addons {
        padding: 20px !important;
    }
}


/* ═══════════════════════════════════════════════════
   MICRO-ANIMATIONS — Landing Page V3
   ═══════════════════════════════════════════════════ */

/* ── Gradient Shimmer on Hero Title ──────────────── */
@keyframes gradientShimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero__title .gradient-text,
.gradient-text {
    background-size: 200% 200%;
    animation: gradientShimmer 4s ease infinite;
}

/* ── Card Container Reset — Remove Background/Подложка ── */
.cards-grid,
.steps,
.pricing-grid,
.compare-grid {
    background: transparent !important;
    border: none !important;
}

/* ── Card Hover Lift — Unified Orange Border ────── */
.problem-card,
.step,
.pricing-card,
.testi-card,
.addon-card,
.choose-box,
.metric-card,
.compare-row {
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: transform 0.35s cubic-bezier(.25, .46, .45, .94),
        box-shadow 0.35s cubic-bezier(.25, .46, .45, .94),
        border-color 0.35s ease,
        background 0.35s ease;
}

.problem-card:hover,
.step:hover,
.pricing-card:hover,
.testi-card:hover,
.addon-card:hover,
.choose-box:hover,
.metric-card:hover {
    transform: translateY(-6px);
    border-color: #ff6b35 !important;
    background: rgba(255, 107, 53, 0.03) !important;
    box-shadow: 0 20px 40px rgba(255, 107, 53, 0.15),
        0 0 0 1px rgba(255, 107, 53, 0.3);
}

/* ── Stat Counter Pulse ──────────────────────────── */
@keyframes countPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

.stat__value,
.metric-card .metric-number,
.choose-num {
    display: inline-block;
    transition: color 0.3s ease;
}

.stat__value.counted,
.metric-card .metric-number.counted,
.choose-num.counted {
    animation: countPulse 0.6s ease-out;
}

/* ── Scroll FadeInUp ─────────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.anim-fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Staggered Reveal Delays ─────────────────────── */
.anim-delay-1 {
    transition-delay: 0.1s !important;
}

.anim-delay-2 {
    transition-delay: 0.2s !important;
}

.anim-delay-3 {
    transition-delay: 0.3s !important;
}

.anim-delay-4 {
    transition-delay: 0.4s !important;
}

.anim-delay-5 {
    transition-delay: 0.5s !important;
}

.anim-delay-6 {
    transition-delay: 0.6s !important;
}

/* ── Section Tag Slide-in ────────────────────────── */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.section__tag {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.section__tag.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ── Typing Cursor Blink ─────────────────────────── */
@keyframes cursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--accent-primary, #a855f7);
    margin-left: 4px;
    vertical-align: text-bottom;
    animation: cursorBlink 0.8s step-end infinite;
}

/* ── Trust Bar Slide-in ──────────────────────────── */
.trust-pill {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.trust-pill.visible {
    opacity: 1;
    transform: translateY(0);
}

.trust-pill:nth-child(1) {
    transition-delay: 0.05s;
}

.trust-pill:nth-child(2) {
    transition-delay: 0.10s;
}

.trust-pill:nth-child(3) {
    transition-delay: 0.15s;
}

.trust-pill:nth-child(4) {
    transition-delay: 0.20s;
}

/* ── Compare Table Row Highlight ─────────────────── */
.compare-row:hover {
    background: rgba(168, 85, 247, 0.06);
    transition: background 0.25s ease;
}

/* ── CTA Banner Pulse Glow ───────────────────────── */
@keyframes ctaPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(168, 85, 247, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
    }
}

.cta-banner .btn--primary {
    animation: ctaPulse 2.5s ease-in-out infinite;
}

/* ── Reduce Motion for Accessibility ─────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ═══════════════════════════════════════════════════
   BACKGROUND ANIMATION — Landing Page V3
   Full-page ambient mesh gradient
   ═══════════════════════════════════════════════════ */


/* ── Section Divider Glow Lines ──────────────────── */
/* Sections need relative positioning for the absolute ::before line */
section+section {
    position: relative !important;
}

section+section::before {
    content: '';
    display: block;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 800px;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 107, 53, 0.5) 20%,
            rgba(168, 85, 247, 0.6) 50%,
            rgba(99, 102, 241, 0.5) 80%,
            transparent 100%);
    box-shadow: 0 0 12px 2px rgba(168, 85, 247, 0.3), 0 0 30px 6px rgba(255, 107, 53, 0.15);
    animation: glowLinePulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowLinePulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}


/* ═══════════════════════════════════════════════════
   SECTION TYPOGRAPHY & LAYOUT SYSTEM v2
   Global overrides for consistent text rhythm across
   all landing sections (Problem, How, Metrics, etc.)
   ═══════════════════════════════════════════════════ */

/* ── Section header rhythm ──────────────────────────────── */
.section-tag {
    margin-bottom: 14px !important;
}

.section-title {
    font-size: clamp(28px, 4.5vw, 48px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 14px !important;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section-sub {
    font-size: clamp(15px, 1.8vw, 18px) !important;
    line-height: 1.75 !important;
    color: var(--text-secondary, #a0a8be) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 48px !important;
}

/* ── Problem cards ──────────────────────────────────────── */
.problem-card h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
}

.problem-card p {
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 16px !important;
}

.problem-card__stat {
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
    opacity: 0.8;
}

.problem-card__stat span {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    display: block;
    margin-bottom: 2px;
}

/* ── How it Works steps ────────────────────────────────── */
.step h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.step p {
    font-size: 0.92rem !important;
    line-height: 1.72 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 14px !important;
}

.choose-box h3 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.choose-box__sub {
    font-size: 0.93rem !important;
    line-height: 1.72 !important;
    color: var(--text-secondary) !important;
}

/* ── Metrics cards ─────────────────────────────────────── */
.metric-card h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.metric-card p {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 16px !important;
}

.metric-row span:first-child {
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
}

/* ── Choose-stats / bottom line numbers ────────────────── */
.choose-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.choose-stat span:last-child {
    font-size: 0.82rem !important;
    color: var(--text-secondary) !important;
    text-align: center;
}

/* ── Comparison table ──────────────────────────────────── */
.compare-table td,
.compare-table th {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    padding: 13px 18px !important;
}

.compare-table td strong {
    font-weight: 700 !important;
}

.no-cc {
    font-size: 0.82rem !important;
    opacity: 0.55 !important;
    margin-top: 12px !important;
    text-align: center;
}

/* ── Testimonials ──────────────────────────────────────── */
.testi-card blockquote {
    font-size: 0.93rem !important;
    line-height: 1.78 !important;
    color: var(--text-secondary) !important;
    margin: 0 0 18px !important;
    font-style: italic;
}

.testi-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
}

.testi-role {
    font-size: 0.8rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.5 !important;
}

/* ── Pricing cards ─────────────────────────────────────── */
.pricing-card h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}

.pricing-card__desc {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 4px !important;
}

.pricing-features li {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    padding: 4px 0 !important;
}

.price-credits {
    font-size: 0.82rem !important;
    opacity: 0.65 !important;
    margin-top: 4px !important;
    line-height: 1.5 !important;
}

/* ── Add-ons ───────────────────────────────────────────── */
.addons-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}

.addons-sub {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 20px !important;
}

.addon-card h4 {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
}

.addon-card p {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    color: var(--text-secondary) !important;
}

/* ── Trust bar ─────────────────────────────────────────── */
.trust__label {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
}

/* ── CTA / Book Demo section ───────────────────────────── */
.cta-section h2,
.book-section h2,
[id="book"] h2,
.section.book h2 {
    font-size: clamp(26px, 4vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 14px !important;
}

.cta-section p,
.book-section p {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
    color: var(--text-secondary) !important;
    max-width: 520px;
    margin: 0 auto 28px;
}

/* ── Responsive tightening ─────────────────────────────── */
@media (max-width: 768px) {
    .section-title {
        font-size: clamp(24px, 7vw, 36px) !important;
    }

    .section-sub {
        font-size: 15px !important;
        margin-bottom: 32px !important;
    }

    .problem-card p,
    .step p,
    .metric-card p,
    .testi-card blockquote {
        font-size: 0.9rem !important;
    }
}

/* ═══════════════════════════════════════════════════
   PROFESSIONAL TYPOGRAPHY FIXES v2
   Based on visual audit — fixes specific rendering
   issues observed on leedrush.com
   ═══════════════════════════════════════════════════ */

/* ── Hero H1: compact for 2-col split ─────────────────── */
.hero__title {
    font-size: clamp(24px, 3vw, 42px) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -1.2px !important;
    margin-bottom: 12px !important;
}

.hero__title .gradient-text {
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
}

/* ── Hero sub ────────────────────────────────────── */
.hero__sub {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
    max-width: 460px !important;
}


/* ── Hero micro copy ───────────────────────────────────────── */
.hero__micro {
    font-size: 13px !important;
    color: rgba(160, 168, 190, 0.65) !important;
    letter-spacing: 0.2px !important;
}

/* ── Hero stats: uppercase labels, consistent rhythm ────────── */
.stat__label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    margin-top: 3px !important;
}

.stat__num {
    font-size: clamp(22px, 3.5vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
}

/* ── Section sub: allow wrapping naturally ──────────────────── */
.section-sub {
    max-width: 640px !important;
}

/* ── Problem stats: big accent numbers ──────────────────────── */
.problem-card__stat span {
    font-size: 2rem !important;
    font-weight: 900 !important;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-bottom: 2px;
    line-height: 1.1;
}

/* ── Pricing: credits legibility fix ────────────────────────── */
.price-credits {
    opacity: 1 !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

/* PAYG "No monthly fee" — distinct color not muted orange */
.pricing-card .price-credits {
    color: rgba(160, 168, 190, 0.75) !important;
}

/* ── Price amount sizing ─────────────────────────────────────── */
.price-amount {
    font-size: clamp(28px, 4vw, 40px) !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
}

.price-period {
    font-size: 14px !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* ── Testimonials: author contrast boost ────────────────────── */
.testi-name {
    color: #f0f4ff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

.testi-role {
    color: rgba(160, 168, 190, 0.75) !important;
    font-size: 13px !important;
}

.testi-card blockquote {
    color: rgba(240, 244, 255, 0.78) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    font-style: normal !important;
    position: relative;
    padding-left: 16px;
    border-left: 2px solid rgba(253, 151, 31, 0.35);
}

/* ── Stars gold ─────────────────────────────────────────────── */
.stars {
    color: #fbbf24 !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    margin-bottom: 14px !important;
}

/* ── Comparison table: feature col bold ────────────────────── */
.compare-table .feature-col {
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
}

/* ── Trust bar pills: readable ───────────────────────────────── */
.trust-pill {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(240, 244, 255, 0.75) !important;
}

/* ── Section padding boost ───────────────────────────────────── */
.section {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* Hero section: full viewport centered vertically */
/* Hero section: hug content, no vertical centering */
.hero {
    min-height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 88px !important;
    padding-bottom: 72px !important;
}

/* Fix right column: don't center the mockup, pin to top */
.hero__right {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.hero__right .hero__mockup {
    margin-top: 0 !important;
}

.hero .container.hero__split {
    width: 100%;
    display: grid !important;
    grid-template-columns: 36% 64% !important;
    gap: 36px !important;
    align-items: flex-start !important;
    max-width: 1280px !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

section.hero .container.hero__split .hero__left,
section.hero .container.hero__split .hero__right {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

section.hero .container.hero__split .hero__right {
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 0;
}

/* ── How-it-Works step numbers ──────────────────────────────── */
.step__num {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: var(--accent-primary) !important;
    margin-bottom: 12px !important;
    opacity: 0.9;
}

/* ── Metrics: value colours ─────────────────────────────────── */
.metric-val {
    font-size: 15px !important;
    font-weight: 700 !important;
}

.metric-val.positive {
    color: #4ade80 !important;
}

.metric-val.negative {
    color: #fb923c !important;
}

/* ── Choose-stats large numbers ─────────────────────────────── */
.choose-num {
    font-size: clamp(36px, 5vw, 56px) !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
    background: var(--grad-primary) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}

/* ── Body base font size ────────────────────────────────────── */
body {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* ── Mobile hero adjustments ───────────────────────────────── */
@media (max-width: 1024px) {
    .hero__title {
        font-size: clamp(32px, 9vw, 52px) !important;
        letter-spacing: -1px !important;
    }

    .hero__sub {
        max-width: 100% !important;
    }

    .hero {
        min-height: auto !important;
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }


    .section {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DUAL CTA — Hero path cards
═══════════════════════════════════════════════════════════════ */
.hero-dual-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    width: 100%;
}

.hero-path-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    cursor: pointer;
}

.hero-path-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.hero-path-card:hover {
    transform: translateY(-2px);
}

.hero-path-card:hover::before {
    opacity: 1;
}

/* Primary — Clean My Leads (orange) */
.hero-path-card--primary {
    background: linear-gradient(135deg, rgba(253, 151, 31, .15) 0%, rgba(249, 38, 114, .1) 100%);
    border: 1px solid rgba(253, 151, 31, .35);
    box-shadow: 0 4px 20px rgba(253, 151, 31, .1);
}

.hero-path-card--primary::before {
    background: linear-gradient(135deg, rgba(253, 151, 31, .08) 0%, rgba(249, 38, 114, .05) 100%);
}

.hero-path-card--primary:hover {
    border-color: rgba(253, 151, 31, .55);
    box-shadow: 0 8px 30px rgba(253, 151, 31, .2);
}

/* Secondary — Find New Clients (indigo) */
.hero-path-card--secondary {
    background: linear-gradient(135deg, rgba(99, 102, 241, .12) 0%, rgba(139, 92, 246, .08) 100%);
    border: 1px solid rgba(99, 102, 241, .3);
    box-shadow: 0 4px 20px rgba(99, 102, 241, .08);
}

.hero-path-card--secondary::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, .07) 0%, rgba(139, 92, 246, .04) 100%);
}

.hero-path-card--secondary:hover {
    border-color: rgba(99, 102, 241, .5);
    box-shadow: 0 8px 30px rgba(99, 102, 241, .18);
}

.hero-path-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-path-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-path-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.hero-path-card--primary .hero-path-title {
    background: linear-gradient(135deg, #fd971f, #f92672);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-path-card--secondary .hero-path-title {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-path-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

.hero-path-card svg {
    flex-shrink: 0;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}

.hero-path-card:hover svg {
    opacity: 0.9;
    transform: translateX(3px);
}

/* Light theme adjustments */
[data-theme="light"] .hero-path-card--primary {
    background: rgba(253, 151, 31, .06);
    border-color: rgba(253, 151, 31, .25);
}

[data-theme="light"] .hero-path-card--secondary {
    background: rgba(99, 102, 241, .06);
    border-color: rgba(99, 102, 241, .2);
}

/* ── Utility Classes — TD-05 Inline Style Cleanup ────
   Replaces repeated inline style="" patterns across
   dashboard.html, marketplace.html and landing pages.
   ──────────────────────────────────────────────────── */

/* Icon sizes */
.icon-14 {
    width: 14px;
    height: 14px;
}

.icon-16 {
    width: 16px;
    height: 16px;
}

.icon-20 {
    width: 20px;
    height: 20px;
}

.icon-24 {
    width: 24px;
    height: 24px;
}

.icon-48 {
    width: 48px;
    height: 48px;
}

/* Text helpers */
.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.82rem;
}

.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

.text-tertiary {
    color: var(--text-tertiary, var(--text-muted));
}

.text-accent {
    color: var(--accent-primary);
}

.text-xs-muted {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.text-xs-secondary {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.text-sm-secondary {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.text-sm-muted {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Spacing */
.mb-0 {
    margin-bottom: 0;
}

.mb-xs {
    margin-bottom: 0.3rem;
}

.mb-sm {
    margin-bottom: 0.5rem;
}

.mb-md {
    margin-bottom: 1rem;
}

.mb-lg {
    margin-bottom: 1.5rem;
}

.mb-xl {
    margin-bottom: 2rem;
}

.mt-xs {
    margin-top: 2px;
}

.mt-sm {
    margin-top: 0.5rem;
}

/* Flex utils */
.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Card icon wrappers */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    width: 44px;
    height: 44px;
}

.icon-box--indigo {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.icon-box--orange {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.icon-box--gradient {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* Status dot */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7280;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.status-dot--active {
    background: #22c55e;
}

.status-dot--warning {
    background: #f59e0b;
}

.status-dot--error {
    background: #ef4444;
}

/* ─── MOBILE STACKING COMPONENT (FORCED) ──────────────── */
@media (max-width: 768px) {
    .compare-table__inner table {
        min-width: 0 !important;
        display: block !important;
        background: transparent !important;
    }

    .compare-table__inner thead {
        display: none !important;
    }

    .compare-table__inner tbody,
    .compare-table__inner tr,
    .compare-table__inner td {
        display: block !important;
        width: 100% !important;
    }

    .compare-table__inner tr {
        margin-bottom: 30px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }

    [data-theme="light"] .compare-table__inner tr {
        background: #ffffff !important;
        border-color: rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    }

    .compare-table__inner td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        text-align: right !important;
        min-height: 50px !important;
    }

    [data-theme="light"] .compare-table__inner td {
        border-color: rgba(0, 0, 0, 0.03) !important;
    }

    .compare-table__inner td:last-child {
        border-bottom: none !important;
    }

    .compare-table__inner td:before {
        content: attr(data-label);
        font-weight: 700 !important;
        text-align: left !important;
        color: var(--text-secondary) !important;
        font-size: 0.85rem !important;
        margin-right: 15px !important;
    }

    .compare-table__inner td.feature-col {
        background: rgba(99, 102, 241, 0.1) !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        color: #fff !important;
        padding: 18px !important;
    }

    [data-theme="light"] .compare-table__inner td.feature-col {
        background: rgba(99, 102, 241, 0.05) !important;
        color: var(--indigo) !important;
    }

    .compare-table__inner td.feature-col:before {
        display: none !important;
    }

    /* Fix horizontal overflow on small screens */
    .compare-table__inner {
        overflow-x: hidden !important;
        padding: 0 5px !important;
    }
}
/* ── PRICING CARDS: pin CTA buttons to card bottom ── */
.pricing-grid--4col .pricing-card {
    display: flex !important;
    flex-direction: column !important;
}

.pricing-grid--4col .pricing-card .btn,
.pricing-grid--4col .pricing-card a.btn {
    margin-top: auto !important;
}

/* Restore inner padding removed by earlier override */
.pricing-grid--4col .pricing-card__header,
.pricing-grid--4col .pricing-card > .pricing-card__header {
    padding: 28px 28px 0 !important;
}

.pricing-grid--4col .pricing-features {
    padding: 0 28px !important;
    flex: 1 !important;
}

.pricing-grid--4col .pricing-card > .btn,
.pricing-grid--4col .pricing-card > a.btn {
    margin: 0 28px 28px !important;
}

/* ═══════════════════════════════════════════════════════════════
   LANDING AUDIT FIXES — April 2026
   P0: Mobile hero + Support bubble
   P1: Hero CTA hierarchy + lazy loading
═══════════════════════════════════════════════════════════════ */

/* ── P0.1: Mobile hero visual — hide dashboard on small screens ── */
@media (max-width: 700px) {
    section.hero .container.hero__split .hero__right,
    .hero__right {
        display: none !important;
    }

    .hero__split {
        grid-template-columns: 1fr !important;
    }

    .hero__left {
        text-align: center !important;
        max-width: 100% !important;
    }

    .hero__title {
        font-size: clamp(1.9rem, 9vw, 2.6rem) !important;
        line-height: 1.18 !important;
    }

    .hero-dual-cta,
    .hero__ctas {
        align-items: center !important;
    }
}

/* ── P0.2: Support bubble — don't overlap bottom CTAs ── */
/* Hide bubble while user is in the CTA-dense zones (bottom 25%) */
.support-bubble-wrap,
#support-widget > button,
#support-widget .support-btn,
.support-chat-btn,
[class*="support-btn"],
[id*="support-btn"] {
    bottom: 24px !important;
    right: 20px !important;
    z-index: 800 !important; /* below modals (1000+) */
}

@media (max-width: 768px) {
    /* On mobile push it up so it doesn't overlap sticky CTAs */
    .support-bubble-wrap,
    #support-widget > button,
    #support-widget .support-btn,
    .support-chat-btn {
        bottom: 72px !important;
        right: 16px !important;
    }
}

/* ── P1: Hero CTA — emphasise primary path ── */
/* Clean Your Leads = primary, Find Leads = secondary */
.hero-dual-cta .cta-card:first-child {
    border-color: rgba(253, 151, 31, 0.45) !important;
    background: rgba(253, 151, 31, 0.07) !important;
    box-shadow: 0 0 20px rgba(253, 151, 31, 0.12) !important;
}

.hero-dual-cta .cta-card:first-child .cta-card__title {
    color: #fd971f !important;
    font-weight: 700 !important;
    font-size: 1.05em !important;
}

/* ── lazy loading — ensure off-screen images load lazily ── */
/* (HTML attr loading="lazy" is the real fix but this gives a hint) */
.testimonials-grid img,
.compare img,
.metrics img,
.book img {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}