/* ============================================
   MAPPIN — THEME LAYER (light/dark)
   Loaded AFTER base.css / components.css / blog.css.
   Dark is the default (no attribute). Light = <html data-theme="light">.
   ============================================ */

/* ---------- Theme switch ----------
   Instant swap (like the master portal). No page-wide transition, no view-transition snapshot,
   no overlay: on this page each of those costs more than the single repaint it would hide. */

/* ---------- Tailwind utility classes used in the templates ---------- */
[data-theme="light"] body { background: var(--ink-950); color: var(--text-secondary); }
[data-theme="light"] .text-white { color: var(--text-primary); }
[data-theme="light"] .text-slate-300 { color: var(--text-secondary); }
[data-theme="light"] .text-slate-400 { color: var(--text-muted); }
[data-theme="light"] .text-slate-500 { color: var(--text-muted); }
[data-theme="light"] .text-slate-600 { color: var(--text-dim); }
[data-theme="light"] .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04); }
[data-theme="light"] .bg-white\/10 { background-color: rgba(15, 23, 42, 0.07); }
[data-theme="light"] .border-white\/5 { border-color: rgba(15, 23, 42, 0.06); }
[data-theme="light"] .border-white\/10 { border-color: rgba(15, 23, 42, 0.1); }
[data-theme="light"] .selection\:text-white ::selection { color: var(--text-primary); }

/* ---------- Page atmosphere ---------- */
[data-theme="light"] .noise-overlay { opacity: 0.035; mix-blend-mode: multiply; }
[data-theme="light"] .gradient-mesh {
    background:
        radial-gradient(at 20% 20%, rgba(124, 92, 255, 0.16) 0px, transparent 50%),
        radial-gradient(at 80% 10%, rgba(168, 85, 247, 0.12) 0px, transparent 50%),
        radial-gradient(at 90% 80%, rgba(6, 182, 212, 0.10) 0px, transparent 50%),
        radial-gradient(at 10% 90%, rgba(124, 92, 255, 0.10) 0px, transparent 50%);
}
[data-theme="light"] .particles-canvas { opacity: 0.55; }
[data-theme="light"] .cursor-glow { opacity: 0.5; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #eef0f7; }

/* ---------- "Dark islands": product UI mockups, terminals and code stay dark in light mode.
   They are screenshots of a dark product - keeping them dark reads as intentional and
   gives the light page contrast. All tokens are simply re-pointed to their dark values. ---------- */
[data-theme="light"] .hero-browser,
[data-theme="light"] .showcase-browser,
[data-theme="light"] .bento-code-block,
[data-theme="light"] .hiw-term-header,
[data-theme="light"] .hiw-term-body,
[data-theme="light"] .code-block,
[data-theme="light"] pre,
[data-theme="light"] .bp-article pre {
    color-scheme: dark;
    --ink-950: #050510; --ink-900: #0a0a1a; --ink-800: #12122a; --ink-700: #1a1a35; --ink-600: #232345;
    --ink-850: #0f0f23; --ink-870: #0c0c1c; --ink-920: #08081a;
    --text-primary: #ffffff; --text-secondary: #cbd5e1; --text-muted: #64748b; --text-dim: #475569;
    --border-subtle: rgba(148, 163, 184, 0.08); --border-default: rgba(148, 163, 184, 0.12); --border-strong: rgba(148, 163, 184, 0.2);
    --glass-bg: rgba(15, 15, 35, 0.5); --glass-border: rgba(148, 163, 184, 0.1);
    --gradient-text: linear-gradient(135deg, #a5a8ff 0%, #c084fc 50%, #67e8f9 100%);
    --c-text-1: #ffffff; --c-text-2: #e2e8f0; --c-text-3: #cbd5e1; --c-text-4: #94a3b8; --c-text-5: #64748b; --c-text-6: #475569; --c-text-7: #334155; --c-text-8: #1e293b;
    --c-brand-text: #a5a8ff; --c-brand-text-2: #8b7dff; --c-violet-text: #c4b5fd; --c-violet-text-2: #c084fc; --c-violet-text-3: #e9d5ff;
    --c-cyan-text: #67e8f9; --c-cyan-text-2: #a5f3fc; --c-cyan-text-3: #22d3ee; --c-emerald-text: #6ee7b7; --c-emerald-text-2: #a7f3d0; --c-emerald-text-3: #34d399;
    --c-amber-text: #fcd34d; --c-amber-text-2: #fde68a; --c-rose-text: #fda4af; --c-rose-text-2: #fb7185; --c-blue-text: #60a5fa; --c-blue-text-2: #93c5fd;
    --c-white-a002: rgba(255,255,255,.02); --c-white-a003: rgba(255,255,255,.03); --c-white-a004: rgba(255,255,255,.04); --c-white-a005: rgba(255,255,255,.05);
    --c-white-a006: rgba(255,255,255,.06); --c-white-a008: rgba(255,255,255,.08); --c-white-a01: rgba(255,255,255,.1); --c-white-a015: rgba(255,255,255,.15);
    --c-white-a02: rgba(255,255,255,.2); --c-white-a095: rgba(255,255,255,.95);
    --c-line-a003: rgba(148,163,184,.03); --c-line-a004: rgba(148,163,184,.04); --c-line-a005: rgba(148,163,184,.05); --c-line-a006: rgba(148,163,184,.06);
    --c-line-a007: rgba(148,163,184,.07); --c-line-a008: rgba(148,163,184,.08); --c-line-a01: rgba(148,163,184,.1); --c-line-a012: rgba(148,163,184,.12);
    --c-line-a015: rgba(148,163,184,.15); --c-line-a018: rgba(148,163,184,.18); --c-line-a02: rgba(148,163,184,.2); --c-line-a03: rgba(148,163,184,.3); --c-line-a035: rgba(148,163,184,.35);
    --c-shadow-a03: rgba(0,0,0,.3); --c-shadow-a04: rgba(0,0,0,.4); --c-shadow-a05: rgba(0,0,0,.5); --c-shadow-a06: rgba(0,0,0,.6); --c-shadow-a07: rgba(0,0,0,.7);
    --c-glass-a04: rgba(12,12,28,.4); --c-glass-a05: rgba(12,12,28,.5); --c-glass-a06: rgba(12,12,28,.6); --c-glass-a07: rgba(12,12,28,.7); --c-glass-a075: rgba(12,12,28,.75);
    --c-glass-a08: rgba(12,12,28,.8); --c-glass-a085: rgba(12,12,28,.85); --c-glass-a09: rgba(12,12,28,.9); --c-glass-a095: rgba(12,12,28,.95);
}
/* islands sit on a light page: give them a crisp edge + soft shadow instead of a glow */
[data-theme="light"] .hero-browser,
[data-theme="light"] .showcase-browser,
[data-theme="light"] .bento-code-block {
    box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.08);
}

/* ---------- Theme toggle: soft rounded-square tile (navbar + mobile drawer) ----------
   Dark: deep tile + lavender moon.  Light: white->lavender tile + amber sun.
   Light state is driven by the page theme OR by the button's own .is-light/.is-dark class
   (JS flips the class first so the icon swaps instantly, the page re-themes a beat later).
   Markup: <button.theme-toggle> <span.tt-ring> <svg.tt-sun> <svg.tt-moon> */
.theme-toggle {
    --tt-size: 40px;
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--tt-size); height: var(--tt-size); border-radius: 12px; cursor: pointer; padding: 0; outline: none;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(145deg, #1b1b3e 0%, #0f0f28 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.35);
    color: #c4b5fd;
    transition: transform .2s ease, border-color .25s ease, box-shadow .25s ease;
    -webkit-tap-highlight-color: transparent; will-change: transform;
}
.theme-toggle svg {
    position: absolute; width: 18px; height: 18px; pointer-events: none;
    transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), opacity .18s ease;
    will-change: transform, opacity;
}
.theme-toggle .tt-moon { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .tt-sun  { opacity: 0; transform: rotate(-140deg) scale(.4); color: #f59e0b; }

/* ---- light state ---- */
:is([data-theme="light"] .theme-toggle:not(.is-dark), .theme-toggle.is-light) {
    border-color: rgba(15, 23, 42, 0.10);
    background: linear-gradient(145deg, #ffffff 0%, #ebe9ff 100%);
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px -6px rgba(15, 23, 42, 0.12);
    color: #f59e0b;
}
:is([data-theme="light"] .theme-toggle:not(.is-dark), .theme-toggle.is-light) .tt-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
:is([data-theme="light"] .theme-toggle:not(.is-dark), .theme-toggle.is-light) .tt-moon { opacity: 0; transform: rotate(140deg) scale(.4); }

/* hover / press / focus */
.theme-toggle .tt-ring {
    position: absolute; inset: -6px; border-radius: 16px; opacity: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(124, 92, 255, 0.35), transparent 70%);
    filter: blur(6px); transition: opacity .25s ease; z-index: -1;
}
:is([data-theme="light"] .theme-toggle:not(.is-dark), .theme-toggle.is-light) .tt-ring { background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.32), transparent 70%); }
.theme-toggle:hover { transform: translateY(-1px); border-color: rgba(124, 92, 255, 0.5); }
:is([data-theme="light"] .theme-toggle:not(.is-dark), .theme-toggle.is-light):hover { border-color: rgba(245, 158, 11, 0.45); }
.theme-toggle:hover .tt-ring { opacity: 1; }
.theme-toggle:hover .tt-moon { transform: rotate(-15deg) scale(1.08); }
:is([data-theme="light"] .theme-toggle:not(.is-dark), .theme-toggle.is-light):hover .tt-sun { animation: tt-spin 8s linear infinite; }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { box-shadow: 0 0 0 2px var(--ink-950), 0 0 0 4px var(--brand-primary); }
@keyframes tt-spin { to { transform: rotate(360deg) scale(1); } }

/* tooltip */
.theme-toggle::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px);
    white-space: nowrap; font-size: .7rem; font-weight: 600; letter-spacing: .02em; padding: .3rem .55rem; border-radius: 6px;
    background: var(--ink-800); color: var(--text-primary); border: 1px solid var(--border-default); box-shadow: var(--shadow-elevation-1);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 3;
}
.theme-toggle:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 1024px) { .nav-actions .theme-toggle { display: none; } }

/* mobile drawer row */
.nav-mobile-theme {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 1rem; margin-top: .5rem; border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary); font-size: .9rem; font-weight: 500;
}
.nav-mobile-theme .theme-toggle::after { display: none; }
.nav-mobile-theme .theme-toggle { --tt-size: 44px; }

/* ---------- Light-mode fixes for elements whose dark look depends on blend/glow ---------- */
[data-theme="light"] img.nav-logo-img,
[data-theme="light"] img.ft-logo-img { filter: none; }


/* =====================================================================
   LIGHT MODE DESIGN PASS (v3)
   Light is a designed theme, not an inversion: paper texture instead of
   purple fog, real card elevation, saturated icon tiles, alternating
   section surfaces, crisp secondary buttons, dark footer anchor.
   Everything below is scoped to [data-theme="light"]  ->  dark unchanged.
   ===================================================================== */
[data-theme="light"] {
    --l-surface: #ffffff;
    --l-line: rgba(15, 23, 42, 0.08);
    --l-line-strong: rgba(15, 23, 42, 0.14);
    --l-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
    --l-shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 34px -18px rgba(15, 23, 42, 0.16);
    --l-shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.04), 0 28px 56px -24px rgba(15, 23, 42, 0.22);
    --l-brand-ink: #6d3fff;
    --l-cyan-ink: #0891b2;
    --l-emerald-ink: #059669;
    --l-violet-ink: #7e22ce;
    --l-amber-ink: #d97706;
    --l-rose-ink: #e11d48;
}

/* ---- 1. Atmosphere: no fog, subtle dot-paper + one soft glow at the top ---- */
[data-theme="light"] .noise-overlay { opacity: 0.015; }
[data-theme="light"] .gradient-mesh {
    opacity: 1;
    background:
        radial-gradient(rgba(15, 23, 42, 0.075) 1px, transparent 1.3px) 0 0 / 26px 26px,
        radial-gradient(ellipse 55% 45% at 12% 0%, rgba(124, 92, 255, 0.10), transparent 70%),
        radial-gradient(ellipse 45% 35% at 92% 0%, rgba(6, 182, 212, 0.07), transparent 70%);
}
[data-theme="light"] .hero-blob,
[data-theme="light"] .blob { opacity: 0.55; }
[data-theme="light"] .hero-mockup-glow,
[data-theme="light"] .showcase-mockup-glow { opacity: 0.4; }
[data-theme="light"] .cursor-glow { opacity: 0.3; }
[data-theme="light"] .stats-value { text-shadow: none; }
[data-theme="light"] .hero-bottom-fade { opacity: 0; }

/* ---- 2. Section rhythm: alternate page / white surfaces ---- */
[data-theme="light"] .stats-section,
[data-theme="light"] .showcase-section,
[data-theme="light"] .bf-section,
[data-theme="light"] .faq-section { background: var(--l-surface); }
[data-theme="light"] .showcase-section,
[data-theme="light"] .bf-section,
[data-theme="light"] .faq-section { border-top: 1px solid var(--l-line); border-bottom: 1px solid var(--l-line); }
[data-theme="light"] .stats-border-top { background: linear-gradient(90deg, transparent 0%, rgba(124, 92, 255, 0.35) 50%, transparent 100%); }
[data-theme="light"] .stats-border-bottom { background: var(--l-line); }

/* ---- 3. Cards: white, hairline border, real elevation ---- */
[data-theme="light"] .bento-card,
[data-theme="light"] .hiw-card,
[data-theme="light"] .pr-card-inner,
[data-theme="light"] .faq-item,
[data-theme="light"] .hero-float-card,
[data-theme="light"] .bf-persona,
[data-theme="light"] .bf-early-stat-card,
[data-theme="light"] .bf-compare-wrap,
[data-theme="light"] .showcase-tabs {
    background: var(--l-surface);
    border-color: var(--l-line);
    box-shadow: var(--l-shadow-md);
}
[data-theme="light"] .hero-float-card { box-shadow: var(--l-shadow-lg); border-color: var(--l-line-strong); }
[data-theme="light"] .faq-item { box-shadow: var(--l-shadow-sm); }
[data-theme="light"] .showcase-tabs { box-shadow: var(--l-shadow-sm); padding: 0.35rem; }
[data-theme="light"] .bento-card:hover,
[data-theme="light"] .hiw-card:hover { border-color: rgba(124, 92, 255, 0.35); box-shadow: var(--l-shadow-lg); }
[data-theme="light"] .bento-card-glow { opacity: 0 !important; }
[data-theme="light"] .faq-item:hover { border-color: var(--l-line-strong); }
[data-theme="light"] .faq-item.faq-open { background: var(--l-surface); border-color: rgba(124, 92, 255, 0.35); box-shadow: var(--l-shadow-md); }
[data-theme="light"] .pr-card-popular .pr-card-inner {
    background: radial-gradient(ellipse at top, rgba(124, 92, 255, 0.10) 0%, transparent 55%), var(--l-surface);
    border-color: rgba(124, 92, 255, 0.35);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 30px 60px -24px rgba(124, 92, 255, 0.45), 0 0 0 4px rgba(124, 92, 255, 0.06);
}
[data-theme="light"] .cta-card,
[data-theme="light"] .bf-early-card,
[data-theme="light"] .hiw-cta-content {
    background:
        radial-gradient(ellipse at top, rgba(124, 92, 255, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
        var(--l-surface);
    border-color: rgba(124, 92, 255, 0.22);
    box-shadow: var(--l-shadow-lg);
}
[data-theme="light"] .cta-grid-pattern { opacity: 0.6; }

/* ---- 4. Icon tiles: saturated ink on a soft tint ---- */
[data-theme="light"] .bento-icon-wrap,
[data-theme="light"] .hiw-icon-wrap,
[data-theme="light"] .stats-icon-wrap,
[data-theme="light"] .hero-float-card-icon,
[data-theme="light"] .showcase-check-icon,
[data-theme="light"] .bf-promise-icon,
[data-theme="light"] .bf-compare-brand-icon,
[data-theme="light"] .pr-plan-icon,
[data-theme="light"] .hero-play-icon,
[data-theme="light"] .faq-q-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.06); }

[data-theme="light"] .bento-icon-brand, [data-theme="light"] .hiw-icon-brand,
[data-theme="light"] .hero-float-card-icon, [data-theme="light"] .showcase-check-icon,
[data-theme="light"] .bf-promise-icon, [data-theme="light"] .bf-compare-brand-icon,
[data-theme="light"] .stats-icon-wrap[style*="124, 92, 255"], [data-theme="light"] .hero-play-icon
    { background: linear-gradient(135deg, rgba(124, 92, 255, 0.18), rgba(124, 92, 255, 0.08)); border-color: rgba(124, 92, 255, 0.30); color: var(--l-brand-ink); }
[data-theme="light"] .bento-icon-cyan, [data-theme="light"] .hiw-icon-cyan, [data-theme="light"] .pr-plan-icon-enterprise,
[data-theme="light"] .stats-icon-wrap[style*="6, 182, 212"]
    { background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(6, 182, 212, 0.08)); border-color: rgba(6, 182, 212, 0.30); color: var(--l-cyan-ink); }
[data-theme="light"] .bento-icon-emerald, [data-theme="light"] .hiw-icon-emerald,
[data-theme="light"] .stats-icon-wrap[style*="16, 185, 129"]
    { background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.08)); border-color: rgba(16, 185, 129, 0.30); color: var(--l-emerald-ink); }
[data-theme="light"] .bento-icon-violet, [data-theme="light"] .hiw-icon-violet,
[data-theme="light"] .stats-icon-wrap[style*="168, 85, 247"]
    { background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(168, 85, 247, 0.08)); border-color: rgba(168, 85, 247, 0.30); color: var(--l-violet-ink); }
[data-theme="light"] .bento-icon-amber,
[data-theme="light"] .stats-icon-wrap[style*="245, 158, 11"]
    { background: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(245, 158, 11, 0.08)); border-color: rgba(245, 158, 11, 0.35); color: var(--l-amber-ink); }
[data-theme="light"] .bento-icon-rose,
[data-theme="light"] .stats-icon-wrap[style*="244, 63, 94"]
    { background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(244, 63, 94, 0.08)); border-color: rgba(244, 63, 94, 0.30); color: var(--l-rose-ink); }
/* stats icons carry an inline dark-theme colour -> must override */
[data-theme="light"] .stats-icon-wrap svg,
[data-theme="light"] .stats-icon-wrap i { color: inherit !important; }
[data-theme="light"] .hero-float-card-icon svg,
[data-theme="light"] .hero-float-card-icon i,
[data-theme="light"] .showcase-check-icon svg,
[data-theme="light"] .showcase-check-icon i { color: inherit !important; }
[data-theme="light"] .pr-plan-icon { background: #f1f3f9; border-color: var(--l-line-strong); color: #334155; }
[data-theme="light"] .pr-plan-icon-popular { background: linear-gradient(135deg, rgba(124, 92, 255, 0.20), rgba(168, 85, 247, 0.12)); border-color: rgba(124, 92, 255, 0.35); color: var(--l-brand-ink); box-shadow: 0 4px 14px -4px rgba(124, 92, 255, 0.35); }
[data-theme="light"] .faq-q-icon { background: #f1f3f9; border-color: var(--l-line-strong); }
[data-theme="light"] .faq-open .faq-q-icon { background: rgba(124, 92, 255, 0.14); border-color: rgba(124, 92, 255, 0.4); }

/* ---- 5. Secondary buttons: crisp white, not grey ---- */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .cta-btn-secondary,
[data-theme="light"] .pr-cta-secondary {
    background: var(--l-surface);
    color: #0f172a;
    border-color: var(--l-line-strong);
    box-shadow: var(--l-shadow-sm);
}
[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .cta-btn-secondary:hover,
[data-theme="light"] .pr-cta-secondary:hover {
    background: #f7f8fc;
    border-color: rgba(124, 92, 255, 0.45);
    color: var(--l-brand-ink);
    box-shadow: var(--l-shadow-md);
}
[data-theme="light"] .hero-trust-logo-item,
[data-theme="light"] .hiw-time-tag,
[data-theme="light"] .pr-trust-icon { background: var(--l-surface); border-color: var(--l-line); box-shadow: var(--l-shadow-sm); }
[data-theme="light"] .hero-trust-logo-item:hover { border-color: var(--l-line-strong); }

/* ---- 6. How-it-works steps & terminal ---- */
[data-theme="light"] .hiw-step-number { background: var(--l-surface); border-color: rgba(124, 92, 255, 0.35); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 0 0 3px var(--ink-950); }
[data-theme="light"] .hiw-step.hiw-step-active .hiw-step-number { box-shadow: 0 10px 24px -8px rgba(124, 92, 255, 0.6), 0 0 0 3px var(--ink-950); }
[data-theme="light"] .hiw-step.hiw-step-active .hiw-step-num-text { color: #ffffff; }
[data-theme="light"] .hiw-visual-terminal {
    color-scheme: dark;
    background: #0a0a1a;
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 16px 36px -20px rgba(15, 23, 42, 0.5);
}
[data-theme="light"] .hiw-visual-terminal .hiw-term-header { background: rgba(255, 255, 255, 0.03); border-bottom-color: rgba(148, 163, 184, 0.1); }
[data-theme="light"] .hiw-visual-terminal .hiw-term-cmd { color: #e2e8f0; }
[data-theme="light"] .hiw-visual-terminal .hiw-term-title,
[data-theme="light"] .hiw-visual-terminal .hiw-term-time { color: #64748b; }
[data-theme="light"] .hiw-visual-terminal .hiw-term-output { color: #67e8f9; }

/* ---- 7. Small things that were too faint ---- */
[data-theme="light"] .hero-scroll-mouse { border-color: rgba(15, 23, 42, 0.28); }
[data-theme="light"] .hero-scroll-text { color: #64748b; }
[data-theme="light"] .stats-divider { background: linear-gradient(180deg, transparent 0%, var(--l-line-strong) 30%, var(--l-line-strong) 70%, transparent 100%); }
[data-theme="light"] .stats-trust-item { color: #475569; }
/* the pill itself, never its block wrapper (wrappers are full-width -> square ghost box) */
[data-theme="light"] .hero-badge-wrap { box-shadow: none; background: transparent; }
[data-theme="light"] .hero-badge { background: rgba(124, 92, 255, 0.07); border-color: rgba(124, 92, 255, 0.28); box-shadow: var(--l-shadow-sm); }
[data-theme="light"] .hero-badge:hover { background: rgba(124, 92, 255, 0.12); border-color: rgba(124, 92, 255, 0.45); }
[data-theme="light"] .showcase-tab-indicator { background: rgba(124, 92, 255, 0.12); border-color: rgba(124, 92, 255, 0.35); box-shadow: 0 2px 8px -2px rgba(124, 92, 255, 0.35); }
/* navbar pill: real frosted glass; nothing painted on the square wrapper around it */
[data-theme="light"] .nav-container,
[data-theme="light"] .nav-wrapper.scrolled .nav-container { box-shadow: none; background: transparent; }
[data-theme="light"] .nav-inner,
[data-theme="light"] .nav-inner.glass-strong {
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 10px 30px -12px rgba(15, 23, 42, 0.16);
}
[data-theme="light"] .nav-wrapper.scrolled .nav-inner {
    background: rgba(255, 255, 255, 0.74);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 0 0 1px rgba(15, 23, 42, 0.07),
        0 16px 40px -16px rgba(15, 23, 42, 0.22);
}

/* ---- 8. Footer stays dark: anchors the light page like the dark product mockups do ---- */
[data-theme="light"] .ft-section {
    color-scheme: dark;
    background: #050510;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    --ink-950: #050510; --ink-900: #0a0a1a; --ink-800: #12122a; --ink-700: #1a1a35; --ink-600: #232345;
    --ink-850: #0f0f23; --ink-870: #0c0c1c; --ink-920: #08081a;
    --text-primary: #ffffff; --text-secondary: #cbd5e1; --text-muted: #64748b; --text-dim: #475569;
    --border-subtle: rgba(148, 163, 184, 0.08); --border-default: rgba(148, 163, 184, 0.12); --border-strong: rgba(148, 163, 184, 0.2);
    --glass-bg: rgba(15, 15, 35, 0.5); --glass-border: rgba(148, 163, 184, 0.1);
    --gradient-text: linear-gradient(135deg, #a5a8ff 0%, #c084fc 50%, #67e8f9 100%);
    --c-text-1: #ffffff; --c-text-2: #e2e8f0; --c-text-3: #cbd5e1; --c-text-4: #94a3b8; --c-text-5: #64748b; --c-text-6: #475569; --c-text-7: #334155; --c-text-8: #1e293b;
    --c-brand-text: #a5a8ff; --c-brand-text-2: #8b7dff; --c-violet-text: #c4b5fd; --c-violet-text-2: #c084fc; --c-violet-text-3: #e9d5ff;
    --c-cyan-text: #67e8f9; --c-cyan-text-2: #a5f3fc; --c-cyan-text-3: #22d3ee; --c-emerald-text: #6ee7b7; --c-emerald-text-2: #a7f3d0; --c-emerald-text-3: #34d399;
    --c-amber-text: #fcd34d; --c-amber-text-2: #fde68a; --c-rose-text: #fda4af; --c-rose-text-2: #fb7185; --c-blue-text: #60a5fa; --c-blue-text-2: #93c5fd;
    --c-white-a002: rgba(255,255,255,.02); --c-white-a003: rgba(255,255,255,.03); --c-white-a004: rgba(255,255,255,.04); --c-white-a005: rgba(255,255,255,.05);
    --c-white-a006: rgba(255,255,255,.06); --c-white-a008: rgba(255,255,255,.08); --c-white-a01: rgba(255,255,255,.1); --c-white-a015: rgba(255,255,255,.15);
    --c-white-a02: rgba(255,255,255,.2); --c-white-a095: rgba(255,255,255,.95);
    --c-line-a003: rgba(148,163,184,.03); --c-line-a004: rgba(148,163,184,.04); --c-line-a005: rgba(148,163,184,.05); --c-line-a006: rgba(148,163,184,.06);
    --c-line-a007: rgba(148,163,184,.07); --c-line-a008: rgba(148,163,184,.08); --c-line-a01: rgba(148,163,184,.1); --c-line-a012: rgba(148,163,184,.12);
    --c-line-a015: rgba(148,163,184,.15); --c-line-a018: rgba(148,163,184,.18); --c-line-a02: rgba(148,163,184,.2); --c-line-a03: rgba(148,163,184,.3); --c-line-a035: rgba(148,163,184,.35);
    --c-shadow-a03: rgba(0,0,0,.3); --c-shadow-a04: rgba(0,0,0,.4); --c-shadow-a05: rgba(0,0,0,.5); --c-shadow-a06: rgba(0,0,0,.6); --c-shadow-a07: rgba(0,0,0,.7);
    --c-glass-a04: rgba(12,12,28,.4); --c-glass-a05: rgba(12,12,28,.5); --c-glass-a06: rgba(12,12,28,.6); --c-glass-a07: rgba(12,12,28,.7); --c-glass-a075: rgba(12,12,28,.75);
    --c-glass-a08: rgba(12,12,28,.8); --c-glass-a085: rgba(12,12,28,.85); --c-glass-a09: rgba(12,12,28,.9); --c-glass-a095: rgba(12,12,28,.95);
}
[data-theme="light"] .ft-section img.ft-logo-img { filter: none; }

@media (prefers-reduced-motion: reduce) {
    .theme-toggle svg { transition: none; animation: none !important; }
}