/* ==========================================================================
   Public landing page (signed-out "See What You're Missing" screen) in index.php.
   Always-dark obsidian surface with violet / cyan aurora, tinted pills, glass cards, modern CTA buttons.
   Linked after index_modern.css; :root body selectors beat the page's inline <style> (which is later in the DOM).
   ========================================================================== */

:root body .lp-page,
:root[data-theme="dark"] body .lp-page,
:root[data-theme="light"] body .lp-page {
    --lp-text: #f1f5f9;
    --lp-muted: #94a3b8;
    --lp-faint: #64748b;
    --lp-line: rgba(148, 163, 184, 0.16);
    --lp-card: rgba(15, 23, 42, 0.62);
    --lp-cyan: #22d3ee;
    --lp-violet: #a78bfa;
    background:
        radial-gradient(900px 520px at 12% -8%, rgba(139, 92, 246, 0.28), transparent 60%),
        radial-gradient(800px 480px at 92% 4%, rgba(6, 182, 212, 0.20), transparent 60%),
        linear-gradient(180deg, #020617 0%, #0b1220 100%);
    color: var(--lp-text);
}

/* ---- nav ------------------------------------------------------------------------------------------------------ */
:root body .lp-nav { background: rgba(2, 6, 23, 0.62); border-bottom: 1px solid var(--lp-line); backdrop-filter: blur(14px); }
:root body .lp-logo, :root body .lp-footer-logo { color: var(--lp-text); }
:root body .lp-nav-link { color: var(--lp-muted); border-radius: 10px; transition: background-color 200ms var(--ease-out-ui, ease), color 200ms var(--ease-out-ui, ease); }
:root body .lp-nav-link:hover { background: rgba(148, 163, 184, 0.10); color: var(--lp-text); }
:root body .lp-signin-link {
    border: 1px solid rgba(34, 211, 238, 0.35); border-radius: 10px;
    background: rgba(34, 211, 238, 0.08); color: var(--lp-cyan);
    transition: background-color 200ms var(--ease-out-ui, ease), box-shadow 200ms var(--ease-out-ui, ease), transform 200ms var(--ease-out-ui, ease);
}
:root body .lp-signin-link:hover { background: rgba(34, 211, 238, 0.16); border-color: rgba(34, 211, 238, 0.6); color: #ecfeff; box-shadow: 0 0 22px -6px rgba(34, 211, 238, 0.6); }

/* ---- hero ----------------------------------------------------------------------------------------------------- */
:root body .lp-headline {
    color: var(--lp-text); text-shadow: none; font-weight: 700; letter-spacing: -0.035em;
    background: linear-gradient(180deg, #ffffff 30%, #a5b4fc 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:root body .lp-hero h2 { color: var(--lp-muted); font-size: 1.15rem; font-weight: 400; line-height: 1.6; margin: 0; }

:root body .lp-cta-box {
    border: 1px solid var(--lp-line); border-radius: 20px;
    background: var(--lp-card);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 0 60px -28px rgba(34, 211, 238, 0.45);
    backdrop-filter: blur(14px);
}
:root body .lp-cta-label { color: var(--lp-text); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
:root body .lp-friction { color: var(--lp-faint); }
:root body .lp-friction, :root body .lp-trust-text { font-variant-numeric: tabular-nums; }

/* ---- CTA buttons ---------------------------------------------------------------------------------------------- */
:root body .lp-cta-btn {
    min-height: 48px; border-radius: 12px; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.005em;
    transition: transform 200ms var(--ease-out-ui, ease), box-shadow 200ms var(--ease-out-ui, ease), background-color 200ms var(--ease-out-ui, ease), border-color 200ms var(--ease-out-ui, ease);
}
:root body .lp-cta-btn:focus-visible { outline: 2px solid var(--lp-cyan); outline-offset: 3px; }
:root body .lp-cta-google,
:root[data-theme="dark"] body .lp-cta-google {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, #22d3ee, #06b6d4);
    color: #042f3a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 28px -10px rgba(34, 211, 238, 0.75);
    animation: none;
}
:root body .lp-cta-google svg { fill: #042f3a !important; }
:root body .lp-cta-google:hover { background: linear-gradient(180deg, #67e8f9, #22d3ee); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 16px 36px -10px rgba(34, 211, 238, 0.85); }
:root body .lp-cta-microsoft,
:root[data-theme="dark"] body .lp-cta-microsoft {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(148, 163, 184, 0.08);
    color: var(--lp-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root body .lp-cta-microsoft:hover,
:root[data-theme="dark"] body .lp-cta-microsoft:hover { background: rgba(148, 163, 184, 0.16); border-color: rgba(148, 163, 184, 0.5); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8); }

/* ---- trust ---------------------------------------------------------------------------------------------------- */
:root body .lp-trust-social { border: 1px solid rgba(167, 139, 250, 0.25); background: rgba(139, 92, 246, 0.10); }
:root body .lp-av { border-color: #0b1220; }
:root body .lp-trust-text { color: var(--lp-muted); }
:root body .lp-trust-text strong { color: var(--lp-violet); }
:root body .lp-testimonial { border-left: 3px solid rgba(34, 211, 238, 0.55); color: var(--lp-muted); }
:root body .lp-testimonial cite { color: var(--lp-faint); }

/* ---- carousel ------------------------------------------------------------------------------------------------- */
:root body .lp-carousel-eyebrow,
:root body .lp-hiw-eyebrow { color: var(--lp-cyan); font-weight: 600; letter-spacing: 0.14em; text-shadow: 0 0 18px rgba(34, 211, 238, 0.4); }
:root body .lp-carousel-track { border: 1px solid var(--lp-line); border-radius: 20px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85), 0 0 70px -34px rgba(139, 92, 246, 0.6); }
:root body .lp-slide-caption { background: linear-gradient(0deg, rgba(2, 6, 23, 0.85) 0%, transparent 100%); }
:root body .lp-dot { background: rgba(148, 163, 184, 0.35); }
:root body .lp-dot.active { background: var(--lp-cyan); box-shadow: 0 0 10px rgba(34, 211, 238, 0.7); }

/* ---- how it works --------------------------------------------------------------------------------------------- */
:root body .lp-hiw-title, :root body .lp-fgrid-title, :root body .lp-features-title, :root body .lp-secondary-headline { color: var(--lp-text); font-weight: 600; letter-spacing: -0.02em; }
:root body .lp-hiw-step {
    border: 1px solid var(--lp-line); border-radius: 18px; background: var(--lp-card); backdrop-filter: blur(10px);
    transition: transform 200ms var(--ease-out-ui, ease), box-shadow 200ms var(--ease-out-ui, ease), border-color 200ms var(--ease-out-ui, ease);
}
:root body .lp-hiw-step:hover { transform: translateY(-3px); border-color: rgba(34, 211, 238, 0.35); box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.8), 0 0 40px -22px rgba(34, 211, 238, 0.5); }
:root body .lp-hiw-num { background: rgba(139, 92, 246, 0.22); border: 1px solid rgba(167, 139, 250, 0.5); color: var(--lp-violet); font-variant-numeric: tabular-nums; box-shadow: 0 0 18px -4px rgba(139, 92, 246, 0.7); }
:root body .lp-hiw-icon { border: 1px solid rgba(34, 211, 238, 0.25); background: rgba(34, 211, 238, 0.10); }
:root body .lp-hiw-icon svg { stroke: var(--lp-cyan); }
:root body .lp-hiw-step h3 { color: var(--lp-text); }
:root body .lp-hiw-step p { color: var(--lp-muted); }
:root body .lp-hiw-connector::after { color: rgba(148, 163, 184, 0.35); }

/* ---- feature grid --------------------------------------------------------------------------------------------- */
:root body .lp-fg-item,
:root[data-theme="dark"] body .lp-fg-item {
    border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-card);
    transition: transform 200ms var(--ease-out-ui, ease), border-color 200ms var(--ease-out-ui, ease), background-color 200ms var(--ease-out-ui, ease);
}
:root body .lp-fg-item:hover { transform: translateY(-2px); border-color: rgba(167, 139, 250, 0.38); background: rgba(30, 41, 59, 0.6); }
:root body .lp-fg-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-top: 0; border-radius: 11px;
    border: 1px solid rgba(var(--ic, 167, 139, 250), 0.28);
    background: rgba(var(--ic, 167, 139, 250), 0.12);
    color: rgb(var(--ic, 167, 139, 250));
    font-size: 1rem;
}
:root body .lp-fg-icon.ic-cyan    { --ic: 34, 211, 238; }
:root body .lp-fg-icon.ic-emerald { --ic: 52, 211, 153; }
:root body .lp-fg-icon.ic-amber   { --ic: 251, 191, 36; }
:root body .lp-fg-icon.ic-rose    { --ic: 251, 113, 133; }
:root body .lp-fg-icon.ic-sky     { --ic: 56, 189, 248; }
:root body .lp-fg-item strong { color: var(--lp-text); }
:root body .lp-fg-item p { color: var(--lp-muted); }

/* ---- stories -------------------------------------------------------------------------------------------------- */
:root body .lp-card,
:root[data-theme="dark"] body .lp-card {
    border: 1px solid var(--lp-line); border-radius: 20px; background: var(--lp-card); box-shadow: none; backdrop-filter: blur(10px);
    transition: transform 200ms var(--ease-out-ui, ease), box-shadow 200ms var(--ease-out-ui, ease), border-color 200ms var(--ease-out-ui, ease);
}
:root body .lp-card:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, 0.4); box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.85), 0 0 46px -24px rgba(139, 92, 246, 0.6); }
:root body .lp-card-icon { border: 1px solid rgba(167, 139, 250, 0.35); background: rgba(139, 92, 246, 0.16); box-shadow: 0 0 28px -8px rgba(139, 92, 246, 0.65); }
:root body .lp-card-icon svg { stroke: var(--lp-violet); }
:root body .lp-card h3, :root[data-theme="dark"] body .lp-card h3 { color: var(--lp-text); }
:root body .lp-card-scenario, :root[data-theme="dark"] body .lp-card-scenario { color: var(--lp-muted); }
:root body .lp-benefit-tag,
:root[data-theme="dark"] body .lp-benefit-tag {
    border: 1px solid rgba(52, 211, 153, 0.22); background: rgba(52, 211, 153, 0.10); color: #34d399;
    font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}

/* ---- secondary CTA + footer ----------------------------------------------------------------------------------- */
:root body .lp-cta-secondary {
    background: radial-gradient(700px 260px at 50% 0%, rgba(139, 92, 246, 0.16), transparent 70%), rgba(2, 6, 23, 0.55);
    border-top: 1px solid var(--lp-line);
}
:root body .lp-footer { background: rgba(2, 6, 23, 0.85); border-top: 1px solid var(--lp-line); }
:root body .lp-footer-links a { color: var(--lp-muted); }
:root body .lp-footer-links a:hover { color: var(--lp-cyan); }
:root body .lp-footer-copy { color: var(--lp-faint); }

/* ---- sign-in modal -------------------------------------------------------------------------------------------- */
:root body .lp-modal-overlay { background: rgba(2, 6, 23, 0.72); backdrop-filter: blur(8px); }
:root body .lp-modal-box,
:root[data-theme="dark"] body .lp-modal-box { border-radius: 20px; box-shadow: 0 0 0 1px var(--dialog-ring, rgba(148, 163, 184, 0.2)), 0 30px 80px -20px rgba(0, 0, 0, 0.8); }
:root body .lp-modal-box .btn-google.social-btn {
    border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(180deg, #22d3ee, #06b6d4); color: #042f3a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 26px -10px rgba(34, 211, 238, 0.7);
}
:root body .lp-modal-box .btn-google.social-btn svg { fill: #042f3a !important; }
:root body .lp-modal-box .btn-google.social-btn:hover { background: linear-gradient(180deg, #67e8f9, #22d3ee); transform: translateY(-2px); }
:root body .lp-modal-box .btn-microsoft.social-btn,
:root[data-theme="dark"] body .lp-modal-box .btn-microsoft.social-btn { border: 1px solid rgba(148, 163, 184, 0.3); background: rgba(148, 163, 184, 0.08); color: var(--text-color); box-shadow: none; }
:root body .lp-modal-box .btn-microsoft.social-btn:hover,
:root[data-theme="dark"] body .lp-modal-box .btn-microsoft.social-btn:hover { background: rgba(148, 163, 184, 0.16); transform: translateY(-2px); }

@media (pointer: coarse) { :root body .lp-cta-btn, :root body .lp-signin-link { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
    :root body :is(.lp-cta-btn, .lp-hiw-step, .lp-fg-item, .lp-card, .lp-signin-link) { transition-duration: 0.01ms; }
    :root body :is(.lp-cta-btn, .lp-hiw-step, .lp-fg-item, .lp-card):hover { transform: none; }
}