/* =========================================================================
   Landing Page Background
   =========================================================================
   Soft, theme-aware gradient blobs behind the anonymous hero. Pure CSS, no
   image assets — colors derive from --z-accent-rgb so they automatically
   match the brand color and stay correct if the accent ever changes.
   ========================================================================= */

.landing-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* keep blobs (z-index: -1) from escaping behind ancestors */
}

.landing-hero::before,
.landing-hero::after {
    content: "";
    position: fixed; /* viewport-relative, not the shrink-wrapped hero box —
                         so the gradient always reaches the footer regardless
                         of how tall the hero's own content is */
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
}

.landing-hero::before {
    width: 520px;
    height: 520px;
    top: -220px;
    left: -160px;
    background: rgba(var(--z-accent-rgb), 0.55);
}

.landing-hero::after {
    width: 620px;
    height: 620px;
    bottom: -260px;
    right: -180px;
    background: rgba(var(--z-accent-rgb), 0.4);
}

[data-bs-theme="dark"] .landing-hero::before,
[data-bs-theme="dark"] .landing-hero::after {
    opacity: 0.22;
}

/* ── Light/dark logo swap ────────────────────────────────────────────────
   Required by the <picture class="logo-light">/<picture class="logo-dark">
   markup below — without it both logos render at once. */
.logo-dark { display: none; }
[data-bs-theme="dark"] .logo-light { display: none; }
[data-bs-theme="dark"] .logo-dark { display: block; }

/* ── Landing hero layout (ported from V2's site.css) ────────────────────── */
.landing-hero-spacing {
    gap: var(--z-space-8);
    padding: var(--z-space-12) var(--z-space-4);
}

.zk-landing-logo-80 {
    max-height: 80px;
}

.landing-hero-text {
    max-width: 640px;
}

.zk-max-w-960 {
    max-width: 960px;
}

.z-icon-em {
    width: 1em;
}

/* ── Top bar controls ─────────────────────────────────────────────────────
   Deliberately lower visual weight than real CTAs: no border/background at
   rest, since Login/theme/language are utility controls, not calls to
   action, and shouldn't carry the same weight as btn-outline-secondary
   does for the hero's actual secondary CTA. */
.topbar-btn {
    border-color: transparent;
    background-color: transparent;
    color: var(--z-text-muted);
}

.topbar-btn:hover,
.topbar-btn:focus {
    border-color: var(--z-border);
    background-color: var(--z-surface-raised);
    color: var(--z-text);
}

/* ── Section rhythm (three doors / differentiator / features / objections / pricing) ── */
.landing-section {
    padding: var(--z-space-12) var(--z-space-4);
}

/* ── Hero product demo screenshot ─────────────────────────────────────────
   Light/dark swap follows the same [data-bs-theme] pattern as the logo above. */
.hero-demo {
    width: 100%;
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
}

.hero-demo-dark { display: none; }
[data-bs-theme="dark"] .hero-demo-light { display: none; }
[data-bs-theme="dark"] .hero-demo-dark { display: block; }

/* ── Three doors cards ────────────────────────────────────────────────────*/
.door-card {
    padding: var(--z-space-5);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    background: var(--z-card-bg);
}

/* ── Differentiator browser badges ────────────────────────────────────────*/
.browser-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--z-space-1);
    color: var(--z-text-muted);
}

/* ── Objection-killer band ────────────────────────────────────────────────
   Distinct background so it reads as its own reassurance band right before
   pricing, not a visual continuation of the "What's inside" feature grid. */
.objection-band {
    background: var(--z-surface-raised);
}

/* ── Pricing summary cards ────────────────────────────────────────────────*/
.pricing-card {
    padding: var(--z-space-5);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    background: var(--z-card-bg);
    text-align: center;
}

.pricing-card-highlight {
    border-color: var(--z-accent);
    border-width: 2px;
    position: relative;
}

.pricing-card-badge {
    position: absolute;
    top: -0.7em;
    left: 50%;
    transform: translateX(-50%);
    background: var(--z-accent);
    color: var(--bs-white, #fff);
    font-size: var(--z-text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2em 0.75em;
    border-radius: var(--z-radius-sm);
    white-space: nowrap;
}

.pricing-card-price {
    font-size: var(--z-text-2xl);
    font-weight: 700;
}