/* ═══════════════════════════════════════════════════════════
   LANDING3.CSS — Light Multi-Color Theme Override
   Overrides dark/brown palette from landing.css + landing2.css
   Brand color: indigo #6366F1 · Orange CTA · Teal · Pink · Green
   ═══════════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES — full palette swap ─── */
:root {
    --cream:    #EEF2FF;        /* light indigo background  */
    --warm:     #F1F5F9;        /* light slate              */
    --sand:     #CBD5E1;        /* borders / dividers       */
    --bark:     #64748B;        /* muted / secondary text   */
    --ink:      #0F172A;        /* primary dark text        */
    --charcoal: #1E293B;        /* secondary dark           */
    --accent:   #6366F1;        /* indigo — primary brand   */
    --gold:     #F97316;        /* orange — CTAs            */
    --blush:    #BFDBFE;        /* light blue               */
    --sage:     #16A34A;        /* green — success          */
    --white:    #FFFFFF;        /* pure white               */
    /* extra accents */
    --violet:   #7C3AED;
    --teal:     #0D9488;
    --pink:     #EC4899;
    --sky:      #0EA5E9;
    --yellow:   #EAB308;
}

/* ─── CURSOR — remove custom cursor entirely ─── */
.cursor,
.cursor-ring { display: none !important; }

/* ─── ANNOUNCEMENT BAR ─── */
.ann-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
    background: linear-gradient(90deg, #EEF2FF 0%, #F5F3FF 50%, #EEF2FF 100%) !important;
    border-bottom: 1px solid #C7D2FE !important;
    color: var(--ink) !important;
}
.ann-pill {
    background: var(--accent) !important;
    color: #fff !important;
}
.ann-link { color: var(--accent) !important; }

/* ─── NAV ─── */
nav {
    top: 41px !important;   /* sits below ann-bar; JS recalculates exact height */
    z-index: 1000 !important;
}
nav.scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 24px rgba(15, 23, 42, 0.06) !important;
    padding: 14px 48px !important;
}
.logo em { color: var(--accent) !important; }
.nav-links a { color: #475569 !important; }
.nav-links a::after { background: var(--accent) !important; }
.nav-toggle span { background: var(--ink) !important; }
/* mobile open state */
.nav-links { background: var(--white) !important; }

/* ─── BUTTONS ─── */
.btn { border-radius: 10px !important; }
.btn-outline {
    background: transparent !important;
    border-color: #CBD5E1 !important;
    color: var(--ink) !important;
}
.btn-outline:hover {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
}
.btn-filled { background: var(--accent) !important; }
.btn-filled:hover {
    background: #4338CA !important;
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.3) !important;
    transform: translateY(-2px) !important;
}
.btn-gold { background: var(--gold) !important; }
.btn-gold:hover {
    background: #EA580C !important;
    transform: translateY(-2px) !important;
}
.btn-ghost {
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: var(--ink) !important;
}
.btn-ghost:hover {
    border-color: var(--accent) !important;
    background: rgba(99, 102, 241, 0.05) !important;
}

/* ─── HERO ─── */
.hero-left {
    background: linear-gradient(140deg, #ffffff 0%, #EEF2FF 100%) !important;
}
.hero-right {
    background: linear-gradient(150deg, #1E1B4B 0%, #3730A3 35%, #6366F1 75%, #818CF8 100%) !important;
}
/* eyebrow pill */
.hero-eyebrow {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
    color: var(--accent) !important;
}
.eyebrow-dot {
    background: var(--accent) !important;
    box-shadow: 0 0 8px var(--accent) !important;
}
/* trust row */
.trust-check { color: #16A34A !important; }
/* floating badges */
.hero-tag-float {
    border-color: rgba(99, 102, 241, 0.15) !important;
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.1) !important;
}
/* old corner tags on hero-right */
.hero-tag  { background: var(--accent) !important; }
.hero-tag2 { background: var(--gold) !important; }
.bg-text   { color: rgba(255,255,255,0.04) !important; }

/* store preview card */
.store-preview {
    border-radius: 18px !important;
    box-shadow:
        0 60px 120px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
.sp-bar { background: #0F172A !important; }
.sp-hero-img {
    background: linear-gradient(145deg, #1E1B4B 0%, #3730A3 50%, #4F46E5 100%) !important;
}
.sp-hero-img::before {
    background:
        radial-gradient(ellipse at 30% 60%, rgba(236,72,153,0.28) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(249,115,22,0.2)  0%, transparent 55%) !important;
}
.sp-product:nth-child(1) .sp-product-img { background: linear-gradient(155deg, #A5B4FC, #6366F1) !important; }
.sp-product:nth-child(2) .sp-product-img { background: linear-gradient(155deg, #F9A8D4, #EC4899) !important; }
.sp-product:nth-child(3) .sp-product-img { background: linear-gradient(155deg, #FCA5A5, #F97316) !important; }
.sp-pprice      { color: var(--accent) !important; }
.sp-nav         { background: #F8FAFC !important; border-top-color: #E2E8F0 !important; }
.sp-nav-item.active { color: var(--accent) !important; }
.sp-hero-text em { color: #BFDBFE !important; }

/* ─── STATS STRIP ─── */
.stats-strip {
    background: var(--ink) !important;
    border-top: none !important;
    border-bottom: none !important;
}
.stat-num   { color: #818CF8 !important; }
.stat-label { color: rgba(255,255,255,0.45) !important; }
.stat-divider { background: rgba(255,255,255,0.1) !important; }

/* ─── TICKER ─── */
.ticker {
    background: #1E1B4B !important;
    border-top: none !important;
}
.ticker-word  { color: #A5B4FC !important; }
.ticker-dot   { background: var(--gold) !important; }

/* ─── CLIENTS SECTION ─── */
.clients-section { background: var(--white); }
.client-card     { background: var(--white) !important; }
.clients-label   { color: #94A3B8 !important; }

/* ─── SECTION LABELS ─── */
.section-label { color: var(--accent) !important; }
.section-label::before { background: var(--accent) !important; }

/* ─── HOW IT WORKS ─── */
.live-section { background: #F8FAFC !important; }
.step { border-bottom-color: #E2E8F0 !important; }
.step-num { color: #C7D2FE !important; }

/* timer card */
.timer-card {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    border-radius: 18px !important;
}
.timer-card::before {
    background: radial-gradient(ellipse at center, rgba(99,102,241,0.18), transparent 70%) !important;
}
.timer-display span { color: #818CF8 !important; }
.timer-bar {
    background: linear-gradient(90deg, var(--accent), #EC4899) !important;
}
.tsl-item.done   { color: #4ADE80 !important; }
.tsl-item.active { color: #C7D2FE !important; }
.tsl-item.done   .tsl-dot { background: #16A34A !important; color: white !important; }
.tsl-item.active .tsl-dot { background: var(--accent) !important; color: white !important; }
.tsl-item        .tsl-dot { background: rgba(255,255,255,0.08) !important; }

/* ─── FEATURES ─── */
.features-section { background: var(--white) !important; }
.features-grid {
    background: #E2E8F0 !important;
    border-color: #E2E8F0 !important;
    border-radius: 20px !important;
    overflow: hidden;
}
.feat-card { background: var(--white) !important; }
.feat-card:hover { background: #FAFBFF !important; }
.feat-card::before { transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.feat-card:hover::before { transform: scaleX(1) !important; }
/* 12 rainbow top borders */
.feat-card:nth-child(1)::before  { background: #6366F1 !important; }
.feat-card:nth-child(2)::before  { background: #7C3AED !important; }
.feat-card:nth-child(3)::before  { background: #EC4899 !important; }
.feat-card:nth-child(4)::before  { background: #F97316 !important; }
.feat-card:nth-child(5)::before  { background: #0D9488 !important; }
.feat-card:nth-child(6)::before  { background: #16A34A !important; }
.feat-card:nth-child(7)::before  { background: #0EA5E9 !important; }
.feat-card:nth-child(8)::before  { background: #EAB308 !important; }
.feat-card:nth-child(9)::before  { background: #6366F1 !important; }
.feat-card:nth-child(10)::before { background: #7C3AED !important; }
.feat-card:nth-child(11)::before { background: #EC4899 !important; }
.feat-card:nth-child(12)::before { background: #F97316 !important; }

/* ─── MOBILE SECTION ─── */
.mobile-section {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #0F172A 100%) !important;
}
.mobile-text .section-label        { color: #A5B4FC !important; }
.mobile-text .section-label::before { background: #A5B4FC !important; }
.perk-icon {
    background: rgba(99,102,241,0.1) !important;
    border-color: rgba(99,102,241,0.2) !important;
}
.phone {
    background: #0A0A14 !important;
    border-color: rgba(99,102,241,0.2) !important;
}
.phone-screen    { background: #F8FAFC !important; }
.phone-btn       { background: var(--accent) !important; border-radius: 6px !important; }
.phone-field     { background: var(--white) !important; border-color: #CBD5E1 !important; }
.phone-upload-box { border-color: #CBD5E1 !important; }
.order-item      { background: var(--white) !important; border-color: #E2E8F0 !important; }
.os-new          { background: rgba(99,102,241,0.1) !important; color: var(--accent) !important; }
.os-shipped      { background: rgba(16,163,74,0.1) !important; color: #16A34A !important; }

/* ─── INTEGRATIONS ─── */
.integrations-section  { background: #F8FAFC !important; }
.int-card {
    border-color: #E2E8F0 !important;
    background: var(--white) !important;
    border-radius: 18px !important;
}
.int-card.wa {
    border-color: rgba(37,211,102,0.25) !important;
    background: rgba(37,211,102,0.03) !important;
}
.int-card.rp {
    border-color: rgba(99,102,241,0.2) !important;
    background: rgba(99,102,241,0.03) !important;
}
.int-feat::before { color: var(--sage) !important; }

/* ─── PRICING ─── */
.pricing-section { background: var(--white) !important; }
.price-card {
    background: var(--white) !important;
    border-color: #E2E8F0 !important;
    border-radius: 18px !important;
}
.price-card:hover {
    box-shadow: 0 30px 80px rgba(99,102,241,0.1) !important;
}
.price-card.featured {
    background: linear-gradient(150deg, #1E1B4B 0%, #3730A3 45%, #6366F1 100%) !important;
    border-color: #6366F1 !important;
}
.price-badge { background: var(--accent) !important; }
.price-divider { background: #F1F5F9 !important; }
.price-card.featured .price-divider { background: rgba(255,255,255,0.1) !important; }
.price-features li::before { color: var(--accent) !important; }
.price-limit {
    border-left-color: var(--accent) !important;
    background: rgba(99,102,241,0.06) !important;
    color: var(--accent) !important;
}
.price-popular-badge {
    background: linear-gradient(90deg, var(--accent), var(--violet)) !important;
    border-radius: 100px !important;
}
.trial-badge {
    background: rgba(99,102,241,0.06) !important;
    border-color: rgba(99,102,241,0.18) !important;
}
.price-trial-tag {
    background: rgba(22,163,74,0.08) !important;
    border-color: rgba(22,163,74,0.18) !important;
    color: #16A34A !important;
}

/* ─── FAQ ─── */
.faq-item   { border-bottom-color: #E2E8F0 !important; }
.faq-q:hover { color: var(--accent) !important; }
.faq-item.open .faq-arrow { color: var(--accent) !important; }

/* ─── CTA SECTION ─── */
.cta-section {
    background: linear-gradient(140deg, #1E1B4B 0%, #3730A3 30%, #7C3AED 65%, #6D28D9 100%) !important;
}
.cta-section::before { color: rgba(255,255,255,0.03) !important; }
.cta-section h2 em { color: #FCA5A5 !important; }

/* ─── FOOTER ─── */
footer { background: #0F172A !important; }
.footer-top { border-bottom-color: rgba(255,255,255,0.06) !important; }
.footer-brand .logo   { color: #F1F5F9 !important; }
.footer-brand .logo em { color: var(--accent) !important; }
.footer-col h5        { color: #94A3B8 !important; }
.footer-col ul a      { color: #64748B !important; }
.footer-col ul a:hover { color: #A5B4FC !important; }
.footer-bottom        { color: #475569 !important; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 24px; }
.footer-badge {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #94A3B8 !important;
}

/* ─── MODAL ─── */
.modal-overlay { background: rgba(15,23,42,0.88) !important; }
.modal         { border-radius: 20px !important; }
.modal h3 em   { color: var(--accent) !important; }
.form-group input:focus,
.form-group select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }

/* ─── TOAST ─── */
#toast { border-left-color: var(--accent) !important; }

/* ─── BUSINESS SHOWCASE ─── */
.biz-more {
    background: linear-gradient(150deg, #1E1B4B 0%, #3730A3 55%, #4F46E5 100%) !important;
    border-color: rgba(165,180,252,0.2) !important;
}
.biz-more::before {
    background: radial-gradient(circle at 50% 50%, rgba(165,180,252,0.1) 0%, transparent 70%) !important;
}
.biz-more h3 { color: #EEF2FF !important; }

/* ─── HERO TAG FLOATS (landing2.css) ─── */
.hero-tag-float {
    border-color: rgba(99,102,241,0.12) !important;
    box-shadow: 0 4px 20px rgba(99,102,241,0.1) !important;
}

/* ─── CTA ORB ─── */
.cta-bg-orb {
    background: radial-gradient(circle, rgba(165,180,252,0.1) 0%, transparent 70%) !important;
}

/* ─── RESPONSIVE fixes ─── */
@media (max-width: 768px) {
    .nav-toggle span { background: var(--ink) !important; }
}