/* =============================================================================
   Marbos Leads — Landing page (V2 — maximum visual richness)
   Scope: body.landing-page. Builds on style.css design tokens.
   Order: ambient → nav → sections → responsive → reduced-motion.
   ============================================================================= */

body.landing-page {
    background: var(--bg);
    overflow-x: clip;
}

/* Sora ExtraBold — the display weight. Loaded via the header Google Fonts link
   already includes up to 700; we pull 800 via additional `&wght` at landing-time
   via the <link> in header. Safe if cached or not: falls back to 700. */

/* --- Ambient background layers (fixed, always on) -------------------------- */
.landing-page::before,
.landing-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

/* Dot-grid layer */
.landing-page::before {
    background-image:
        radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
    mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 90%);
}

/* Noise layer — inline SVG for grain texture */
.landing-page::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.6;
    mix-blend-mode: overlay;
}

/* Aurora layer — 3 drifting radial gradients (GPU-accelerated via transform) */
.landing-aurora {
    position: fixed;
    inset: -20%;
    z-index: -3;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.55;
}
.landing-aurora span {
    position: absolute;
    width: 52vmax;
    height: 52vmax;
    border-radius: 50%;
    will-change: transform;
}
.landing-aurora span:nth-child(1) {
    top: -10%; left: -10%;
    background: radial-gradient(circle, rgba(99,91,255,0.35), transparent 60%);
    animation: auroraDrift1 48s ease-in-out infinite;
}
.landing-aurora span:nth-child(2) {
    top: 40%; right: -20%;
    background: radial-gradient(circle, rgba(0,212,255,0.30), transparent 60%);
    animation: auroraDrift2 64s ease-in-out infinite;
}
.landing-aurora span:nth-child(3) {
    bottom: -15%; left: 20%;
    background: radial-gradient(circle, rgba(124,58,237,0.25), transparent 60%);
    animation: auroraDrift3 56s ease-in-out infinite;
}
@keyframes auroraDrift1 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(8vw, 4vh, 0) scale(1.12); }
}
@keyframes auroraDrift2 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(-6vw, 8vh, 0) scale(0.9); }
}
@keyframes auroraDrift3 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(4vw, -6vh, 0) scale(1.08); }
}

/* --- Landing-specific nav ------------------------------------------------- */
.landing-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 14px 24px;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid transparent;
}
.landing-nav.scrolled {
    background: rgba(7, 11, 23, 0.72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom-color: rgba(255,255,255,0.06);
}
.landing-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.landing-nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: #fff;
}
.landing-nav-logo-square {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    position: relative;
    overflow: hidden;
}
.landing-nav-logo-square::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 60%);
}
.landing-nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
}
.landing-nav-link {
    font-size: 14px;
    color: var(--text-secondary);
    position: relative;
    padding: 6px 0;
    transition: color 0.2s ease;
}
.landing-nav-link:hover { color: #fff; }
.landing-nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.landing-nav-link:hover::after { transform: scaleX(1); }
.landing-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.landing-nav-cta-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
}

/* Scroll progress bar */
.landing-nav-progress {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: var(--scroll-progress, 0%);
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.08s linear;
    box-shadow: 0 0 8px rgba(0,212,255,0.5);
}

/* Mobile nav */
.landing-nav-toggle {
    display: none;
    width: 44px; height: 44px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s ease;
}
.landing-nav-toggle:hover { background: rgba(255,255,255,0.04); }
.landing-nav-toggle svg { display: block; margin: 0 auto; }

.landing-nav-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(7,11,23,0.96);
    backdrop-filter: blur(20px);
    padding: 24px;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.landing-nav-drawer.open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.landing-nav-drawer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}
.landing-nav-drawer-close {
    width: 44px; height: 44px;
    border: none;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
}
.landing-nav-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.landing-nav-drawer-links a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    color: #fff;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.landing-nav-drawer-ctas {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Section primitives --------------------------------------------------- */
.landing-page .landing-section {
    position: relative;
    padding: 120px 24px;
}
.landing-page .landing-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.landing-page .landing-inner-narrow {
    max-width: 720px;
    margin: 0 auto;
}
.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 16px;
}
.landing-eyebrow-star {
    width: 12px; height: 12px;
    flex-shrink: 0;
}
.landing-section-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 16px;
}
.landing-section-sub {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 640px;
}

/* --- HERO ----------------------------------------------------------------- */
.hero-v2 {
    padding-top: 200px;
    padding-bottom: 140px;
    position: relative;
    overflow: hidden;
}
/* .hero-grid and .hero-text layout lives further down with the V2.4 mockup
   block (side-by-side split on desktop, stacked on mobile). */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--secondary);
    background: rgba(0,212,255,0.06);
    border: 1px solid rgba(0,212,255,0.22);
    border-radius: 999px;
    margin-bottom: 28px;
}
.hero-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 8px var(--secondary);
    animation: pulseDot 2s ease-in-out infinite;
}
.hero-v2 h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    /* V2.4 — right-sized for the split layout: 34px floor, 52px ceiling.
       The old 46-76px range was set for a full-width stacked headline. */
    font-size: clamp(2.125rem, 3.3vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #fff;
    margin-bottom: 24px;
    max-width: none;
    text-wrap: balance;
    -webkit-text-wrap: balance;
}
.hero-v2 h1 .accent {
    background: linear-gradient(120deg, var(--secondary) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.hero-v2 .hero-sub {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 640px;
    text-wrap: pretty;
    -webkit-text-wrap: pretty;
}
.hero-v2 .hero-ctas-v2 {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.hero-v2 .btn-glow {
    position: relative;
    isolation: isolate;
}
.hero-v2 .btn-glow::before {
    content: "";
    position: absolute;
    inset: -6px;
    background: radial-gradient(circle, rgba(0,212,255,0.55), transparent 70%);
    z-index: -1;
    border-radius: inherit;
    animation: pulseGlow 3s ease-in-out infinite;
    filter: blur(8px);
}
@keyframes pulseGlow {
    0%,100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.04); }
}
.hero-v2 .hero-trust {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.hero-v2 .hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.hero-v2 .hero-trust-item svg { color: var(--secondary); flex-shrink: 0; }
.hero-v2 .hero-microtrust {
    font-size: 12px;
    color: var(--text-muted);
}

/* Hero scanline rule */
.hero-scanline {
    position: relative;
    height: 1px;
    max-width: 420px;
    margin: 28px 0;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.hero-scanline::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 120px;
    background: linear-gradient(90deg, transparent, var(--secondary), transparent);
    animation: scanSweep 5s linear infinite;
}
@keyframes scanSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(450px); }
}

/* =============================================================================
   V2.4 — Hero mockup (replaces the old dot-grid map).
   Split layout on desktop (text left, mockup right); stacks on mobile.
   3D tilt via CSS on an inner wrapper; flat on mobile. All anim state is
   driven from JS via data-state on each card — CSS just gates visibility.
   ============================================================================= */

/* Switch the stacked hero grid (V2.3) to a 2-column split. Left column holds
   the headline block (hero-text), right column holds the product mockup. */
.hero-v2 .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.hero-v2 .hero-text {
    max-width: none;
    margin: 0;
    text-align: left;
}

/* ── Mockup container (3D perspective parent) ────────────────────────── */
.hero-mockup {
    position: relative;
    perspective: 1600px;
    width: 100%;
}
.hero-mockup-inner {
    position: relative;
    background: #121627;
    border: 1px solid rgba(99,91,255,0.22);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);
    transform: rotateY(-6.5deg) rotateX(3.5deg) rotateZ(-0.8deg);
    transform-origin: center center;
}

/* ── Window chrome (traffic lights + URL) ─────────────────────────────── */
.hm-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hm-chrome-dots {
    display: inline-flex;
    gap: 6px;
}
.hm-chrome-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.hm-chrome-dots span:nth-child(1) { background: rgba(255, 95, 87, 0.75); }
.hm-chrome-dots span:nth-child(2) { background: rgba(255, 189, 46, 0.75); }
.hm-chrome-dots span:nth-child(3) { background: rgba(39, 201, 63, 0.75); }
.hm-chrome-url {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* ── Search bar (active state) ────────────────────────────────────────── */
.hm-search {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
}
.hm-search-icon {
    width: 14px;
    height: 14px;
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
}
.hm-search-q {
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.hm-search-bullet {
    margin: 0 7px;
    color: var(--text-muted);
}
.hm-search-hint {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 2px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1.2;
}

/* ── Filter chips ─────────────────────────────────────────────────────── */
.hm-chips {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hm-chip {
    font-size: 11px;
    line-height: 1.3;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
    white-space: nowrap;
}
.hm-chip--active {
    background: rgba(99,91,255,0.18);
    border-color: rgba(99,91,255,0.3);
    color: #B5B0FF;
}
.hm-chip--dim {
    opacity: 0.55;
}

/* ── Meta row (hits count + credits) ──────────────────────────────────── */
.hm-meta {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.hm-meta-credits {
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    color: #7DD8F0;
    font-weight: 500;
}
.hm-meta-credits-num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ── Card list ────────────────────────────────────────────────────────── */
.hm-cards {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hm-card {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    background: transparent;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.45s ease;
}
.hm-card[data-state="unlocked"] {
    background: rgba(0,212,255,0.04);
    border-color: rgba(0,212,255,0.22);
}
.hm-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.hm-card-meta {
    min-width: 0;
    flex: 1;
}
.hm-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    min-width: 0;
}
.hm-card-title > [data-name] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.hm-new {
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    color: #B5B0FF;
    background: rgba(99,91,255,0.25);
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    white-space: nowrap;
}
.hm-card-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hm-badge {
    font-size: 10px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
    border: 0;
    font-family: inherit;
}
.hm-badge-unlocked {
    background: rgba(0,212,255,0.18);
    color: #7DD8F0;
    font-weight: 500;
}
.hm-badge-locked {
    background: linear-gradient(135deg, #635BFF 0%, #00D4FF 100%);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

/* State-driven visibility — CSS handles all the locked/unlocked swaps so JS
   just flips data-state on the card. */
.hm-card[data-state="unlocked"] .hm-badge-locked,
.hm-card[data-state="unlocked"] [data-email-mask],
.hm-card[data-state="unlocked"] [data-phone-mask] { display: none; }

.hm-card[data-state="locked"] .hm-badge-unlocked,
.hm-card[data-state="locked"] [data-email-reveal],
.hm-card[data-state="locked"] [data-phone-reveal] { display: none; }

.hm-card-bot {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    line-height: 1.4;
    flex-wrap: wrap;
}
.hm-contact {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
.hm-card[data-state="unlocked"] .hm-contact { color: #7DD8F0; }
.hm-card[data-state="locked"] .hm-contact {
    color: var(--text-muted);
    font-family: ui-monospace, 'JetBrains Mono', 'Geist Mono', monospace;
    font-size: 10px;
}
.hm-contact > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Footer (sources + note) ──────────────────────────────────────────── */
.hm-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hm-foot-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.hm-foot-pill {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #B5B0FF;
    background: rgba(99,91,255,0.2);
    border-radius: 4px;
    padding: 3px 6px;
    line-height: 1;
}
.hm-foot-note {
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Tablet (768–1023): 50/50 split, reduced tilt (no rotateZ), ~92% scale */
@media (max-width: 1023px) {
    .hero-v2 .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .hero-mockup-inner {
        transform: rotateY(-4deg) rotateX(2deg) scale(0.92);
    }
    .hm-foot-note { font-size: 9.5px; }
}

/* Mobile (<768): stack to single column, flat (no 3D), hide 4th card */
@media (max-width: 767px) {
    .hero-v2 .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .hero-v2 .hero-text {
        max-width: none;
    }
    .hero-mockup {
        perspective: none;
        max-width: 480px;
        margin: 0 auto;
    }
    .hero-mockup-inner {
        transform: none;
    }
    .hm-cards .hm-card:nth-child(4) { display: none; }
}

/* Ultra-narrow (<380): progressively hide non-essential mockup bits */
@media (max-width: 380px) {
    .hm-search-hint,
    .hm-foot,
    .hm-new { display: none; }
    .hero-mockup-inner { padding: 14px; }
}

/* --- LOGO STRIP ----------------------------------------------------------- */
.source-strip {
    padding: 48px 24px;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
}
.source-strip::before {
    content: "";
    position: absolute;
    left: -200px; top: 50%;
    width: 200px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent);
    animation: sourceScan 8s linear infinite;
}
@keyframes sourceScan {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 200px)); }
}
.source-strip-label {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.source-strip-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 32px;
    align-items: center;
    justify-items: center;
}
.source-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.58);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease;
    padding: 8px 0;
}
.source-logo:hover {
    color: var(--secondary);
    transform: scale(1.06);
}
.source-logo svg { flex-shrink: 0; }

/* --- STATS BAND ----------------------------------------------------------- */
.stats-band {
    padding: 100px 24px;
}
.stats-band-label {
    text-align: center;
}
.stats-band-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: stretch;
    margin-top: 48px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}
.stats-band-col {
    padding: 48px 32px;
    position: relative;
    text-align: center;
}
.stats-band-col + .stats-band-col::before {
    content: "";
    position: absolute;
    left: 0; top: 10%; bottom: 10%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(0,212,255,0.28), transparent);
}
.stats-big-num {
    font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
    font-weight: 700;
    font-size: clamp(44px, 6vw, 72px);
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #fff 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stats-big-label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin-top: 8px;
}
.stats-big-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 20px;
}

/* Stats visuals */
.stats-viz-bars {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: flex-end;
    height: 40px;
    margin-top: 6px;
}
.stats-viz-bars > span {
    flex: 1;
    max-width: 22px;
    background: linear-gradient(180deg, var(--secondary), var(--primary));
    border-radius: 3px 3px 0 0;
    opacity: 0.8;
}
.stats-viz-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
}
.stats-viz-chip {
    font-size: 11px;
    padding: 3px 9px;
    background: rgba(99,91,255,0.08);
    border: 1px solid rgba(99,91,255,0.18);
    border-radius: 999px;
    color: rgba(255,255,255,0.72);
}
.stats-viz-chip:nth-child(even) {
    background: rgba(0,212,255,0.08);
    border-color: rgba(0,212,255,0.18);
}
.stats-viz-map,
.stats-viz-dotcluster {
    display: block;
    margin: 0 auto;
    width: 140px;
    max-width: 100%;
    height: auto;
}
.stats-viz-dotcluster {
    opacity: 0.95;
    filter: drop-shadow(0 0 12px rgba(0,212,255,0.12));
}

/* --- HOW IT WORKS --------------------------------------------------------- */
.how-works {
    padding: 120px 24px;
}
.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    position: relative;
}
.how-step {
    position: relative;
    padding: 28px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
}
.how-step::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(0,212,255,0.06), transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.how-step:hover::before { opacity: 1; }
.how-step-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 96px;
    letter-spacing: -0.04em;
    line-height: 0.9;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 12px;
    opacity: 0.9;
}
.how-step-icon {
    width: 48px; height: 48px;
    color: var(--secondary);
    margin-bottom: 16px;
}
.how-step h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.how-step p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 20px;
}
.how-step-demo {
    background: rgba(7,11,23,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 14px;
    margin-top: auto;
}
.how-demo-input {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: #fff;
}
.how-demo-input .caret {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: var(--secondary);
    animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink {
    50% { opacity: 0; }
}
.how-demo-masks {
    display: flex;
    gap: 6px;
    align-items: center;
}
.how-demo-mask {
    flex: 1;
    height: 10px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}
.how-demo-mask::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.25), transparent);
    animation: maskShimmer 2.4s linear infinite;
}
@keyframes maskShimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
.how-demo-unlock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
}
.how-demo-unlock-reveal {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--success);
}
.how-demo-unlock-chip {
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
    padding: 2px 7px;
    background: rgba(99,91,255,0.1);
    border: 1px solid rgba(99,91,255,0.25);
    border-radius: 6px;
}

/* Connecting line between steps (desktop only) */
@media (min-width: 1024px) {
    .how-step + .how-step::before {
        /* subtle inner glow — overridden from base */
    }
    .how-connector {
        position: absolute;
        top: 80px;
        height: 2px;
        background-image:
            linear-gradient(90deg, var(--secondary) 50%, transparent 50%);
        background-size: 8px 2px;
        background-repeat: repeat-x;
        opacity: 0.35;
        animation: dashFlow 3s linear infinite;
        pointer-events: none;
    }
    .how-connector--1 { left: calc(33.33% - 12px); right: calc(66.66% + 12px); }
    .how-connector--2 { left: calc(66.66% - 12px); right: calc(33.33% + 12px); }
}
@keyframes dashFlow {
    from { background-position: 0 0; }
    to   { background-position: 24px 0; }
}

/* --- LIVE PREVIEW --------------------------------------------------------- */
.live-preview {
    padding: 120px 24px;
    position: relative;
}
.lp-frame {
    position: relative;
    background: linear-gradient(180deg, #0E1326, #0A0E1A);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 40px 120px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,212,255,0.04);
    margin-top: 56px;
    isolation: isolate;
}
.lp-frame::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 50% -10%, rgba(0,212,255,0.12), transparent 60%);
    pointer-events: none;
    z-index: -1;
}
.lp-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(7,11,23,0.4);
}
.lp-chrome-dots {
    display: flex;
    gap: 6px;
}
.lp-chrome-dots span {
    width: 11px; height: 11px;
    border-radius: 50%;
}
.lp-chrome-dots span:nth-child(1) { background: #FF6B6B; }
.lp-chrome-dots span:nth-child(2) { background: #FDCB6E; }
.lp-chrome-dots span:nth-child(3) { background: #51CF66; }
.lp-chrome-url {
    flex: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-filterbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-wrap: wrap;
}
.lp-fake-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--text-secondary);
}
.lp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 3px 8px;
    background: rgba(99,91,255,0.1);
    border: 1px solid rgba(99,91,255,0.25);
    border-radius: 6px;
    color: var(--primary);
}
.lp-chip-x {
    cursor: pointer;
    color: var(--primary);
    opacity: 0.6;
}
.lp-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}
.lp-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    overflow-x: auto;
    scrollbar-width: none;
}
.lp-tabs::-webkit-scrollbar { display: none; }
.lp-tab {
    flex-shrink: 0;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}
.lp-tab:hover { color: #fff; }
.lp-tab.active { color: var(--secondary); }
.lp-tab.active::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: -1px;
    height: 2px;
    background: var(--secondary);
    border-radius: 2px 2px 0 0;
}
.lp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.lp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.lp-table thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 14px 16px;
    text-align: left;
    background: rgba(255,255,255,0.015);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    white-space: nowrap;
}
.lp-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-secondary);
    position: relative;
}
.lp-table tbody tr {
    transition: background 0.2s ease;
}
.lp-table tbody tr:hover {
    background: rgba(0,212,255,0.03);
}
.lp-table tbody tr:hover td:first-child::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--secondary);
}
.lp-name { color: #fff; font-weight: 500; }
.lp-masked {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--secondary);
    text-shadow: 0 0 6px rgba(0,212,255,0.4);
    letter-spacing: 0.02em;
}
.lp-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--warning);
    font-weight: 500;
}
.lp-rating-count { color: var(--text-muted); font-weight: 400; }
.lp-action {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--secondary);
    background: rgba(0,212,255,0.05);
    border: 1px solid rgba(0,212,255,0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.lp-action:hover {
    background: rgba(0,212,255,0.12);
    border-color: var(--secondary);
    box-shadow: 0 0 12px rgba(0,212,255,0.25);
}
.lp-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    margin-left: 6px;
}
.lp-badge--new {
    color: var(--success);
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.3);
}
.lp-badge--verified {
    color: var(--secondary);
    background: rgba(0,212,255,0.1);
    border: 1px solid rgba(0,212,255,0.3);
}
.lp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.04);
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 8px;
}
.lp-footer-buttons {
    display: flex;
    gap: 6px;
}
.lp-footer-buttons .btn {
    padding: 5px 10px;
    font-size: 12px;
}
.lp-caption {
    text-align: center;
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* --- BENTO GRID ----------------------------------------------------------- */
.bento {
    padding: 120px 24px;
}
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 16px;
    margin-top: 48px;
}
.bento-card {
    position: relative;
    padding: 24px;
    background: linear-gradient(180deg, #111624, #0A0E1A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    isolation: isolate;
    /* V2.1 — 5-card layout. Every non-hero card spans 2 cols by default so the
       grid fills cleanly as: hero(2×2) | card2(2×1) · card3(2×1) / card4(2×1) · card5(2×1). */
    grid-column: span 2;
}
.bento-card:hover {
    border-color: rgba(0,212,255,0.35);
    transform: translateY(-2px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 24px rgba(0,212,255,0.12);
}
.bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 0%, rgba(0,212,255,0.08), transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
}
.bento-card:hover::before { opacity: 1; }
.bento-card--hero {
    grid-column: span 2;
    grid-row: span 2;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.bento-card--hero .bento-flow {
    flex: 1;
}
/* GDPR / trust row rendered inside the hero bento card (FIX 3). */
.bento-hero-trust {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(0,212,255,0.35), transparent) 1;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}
.bento-hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bento-hero-trust-item svg {
    flex-shrink: 0;
    color: var(--secondary);
}
.bento-hero-trust-sep {
    color: var(--text-muted);
    opacity: 0.5;
    display: inline-block;
}
.bento-card h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.bento-card--hero h3 {
    font-size: 28px;
}
.bento-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 20px;
}
.bento-card .bento-viz {
    margin-top: auto;
}

/* Bento hero data-flow SVG */
.bento-flow {
    position: relative;
    height: 220px;
    margin-top: 12px;
}
.bento-flow svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.bento-flow-node {
    fill: rgba(14,19,38,0.95);
    stroke: rgba(255,255,255,0.14);
    stroke-width: 1.5;
    transition: stroke 0.3s ease;
}
.bento-flow-node:hover { stroke: var(--secondary); }
.bento-flow-node--hub {
    fill: rgba(0,212,255,0.08);
    stroke: var(--secondary);
}
.bento-flow-line {
    stroke: var(--secondary);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 3 4;
    opacity: 0.55;
    animation: flowDash 2.4s linear infinite;
}
@keyframes flowDash {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -28; }
}
.bento-flow text {
    font-size: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    fill: rgba(255,255,255,0.72);
    pointer-events: none; /* clicks pass through to <g> */
}

/* ── Card 1: source-node interactivity (SPEC Step 2.3–2.5) ─────────────── */
/* .bento-flow needs position:relative to anchor the absolutely-positioned
   tooltip overlay that lives as a sibling of the <svg>. */
.bento-flow {
    position: relative;
}
/* Screen-reader-only utility — used for hidden subtitle descriptions */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.bento-source {
    cursor: pointer;
    outline: none;
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-source .bento-flow-node {
    transition:
        stroke 250ms cubic-bezier(0.4, 0, 0.2, 1),
        fill   250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-source text {
    transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Keyboard focus — WCAG-visible ring via outline on the whole <g> */
.bento-source:focus-visible {
    outline: 2px solid rgba(0, 212, 255, 0.45);
    outline-offset: 3px;
    border-radius: 2px;
}
/* Active (hovered / focused / tapped) source */
.bento-source.is-active .bento-flow-node {
    stroke: #00D4FF;
    fill: rgba(0, 212, 255, 0.08);
}
.bento-source.is-active text {
    fill: #7DD8F0;
}
.bento-source.is-active .bento-flow-line {
    stroke: #00D4FF;
    opacity: 1;
    animation-duration: 1.6s; /* default 2.4s → ~1.5× faster during hover */
}
/* Non-active siblings dim while another is active */
.bento-source.is-dim { opacity: 0.35; }
.bento-source.is-dim .bento-flow-line { opacity: 0.25; }
/* Hub ring gets brightened via a class on the flow node itself */
.bento-flow-node--hub.is-pulsing {
    stroke: #00D4FF;
}

/* Tooltip for Card 1 */
.bento-tt {
    position: absolute;
    z-index: 3;
    top: 0; left: 0;
    min-width: 120px;
    max-width: 240px;
    padding: 10px 14px;
    background: rgba(18, 22, 39, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 10px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 12px 32px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 0);
    will-change: transform, opacity;
}
.bento-tt-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.35;
    color: #FFFFFF;
    letter-spacing: -0.005em;
}
.bento-tt-sub {
    margin-top: 3px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}
/* Arrow — pointed left, cyan border matches tooltip's left + bottom edges */
.bento-tt-arrow {
    position: absolute;
    top: 50%;
    left: -5px;
    width: 10px; height: 10px;
    background: rgba(18, 22, 39, 0.95);
    border-left: 1px solid rgba(0, 212, 255, 0.25);
    border-bottom: 1px solid rgba(0, 212, 255, 0.25);
    transform: translateY(-50%) rotate(45deg);
}
/* Arrow flip when tooltip falls to the left of its source (edge case) */
.bento-tt.is-left .bento-tt-arrow {
    left: auto;
    right: -5px;
    border: none;
    border-right: 1px solid rgba(0, 212, 255, 0.25);
    border-top: 1px solid rgba(0, 212, 255, 0.25);
}

/* Reduced-motion: disable decorative dash loop + idle pulses, keep functional
   state changes instant (no transition delay). Tooltip opacity toggled by JS
   without GSAP tween in this mode. */
@media (prefers-reduced-motion: reduce) {
    .bento-flow-line { animation: none; opacity: 0.55; }
    .bento-source, .bento-source .bento-flow-node, .bento-source text {
        transition: none;
    }
    .bento-tt { transition: none; }
}


.bento-viz-unlock {
    display: grid;
    gap: 8px;
}
.bento-viz-unlock-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
}
.bento-viz-unlock-row .bento-viz-check {
    color: #7DD8F0;
    opacity: 0;
    margin-right: -4px;
    transform: translateX(-8px);
    transition:
        opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
        margin-right 200ms cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}
.bento-viz-unlock-row .m { color: var(--text-muted); }
.bento-viz-unlock-row .r {
    color: #7DD8F0; /* spec: matches real unlocked-row color in product */
    display: none;
}
/* Class-based reveal (SPEC: Card 2 Steps 3.1.2–3.1.4). `.r` fades in on reveal;
   `.m` disappears instantly (pragmatic near-cross-fade — avoids layout shift
   from absolute-positioning two different-width values). */
.bento-viz-unlock.is-revealed .bento-viz-unlock-row .m { display: none; }
.bento-viz-unlock.is-revealed .bento-viz-unlock-row .r {
    display: inline;
    animation: bentoUnlockFade 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bentoUnlockFade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .bento-viz-unlock.is-revealed .bento-viz-unlock-row .r { animation: none; }
}
.bento-viz-unlock.is-revealed .bento-viz-unlock-row .bento-viz-check {
    opacity: 1;
    transform: translateX(0);
    margin-right: 2px;
}

/* Unlock container: clickable row (wraps both unlock rows). */
.bento-viz-unlock {
    position: relative;
    cursor: pointer;
    padding: 4px;
    margin: -4px;
    border-radius: 10px;
    transition:
        background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        outline-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: 1px solid transparent;
}
.bento-viz-unlock:focus-visible {
    outline: 2px solid rgba(0, 212, 255, 0.45);
    outline-offset: 2px;
}
/* Hover: only when pointer is fine (desktop), NOT during cooldown. */
@media (hover: hover) and (pointer: fine) {
    .bento-viz-unlock:hover:not(.is-revealed):not(.is-cooldown) {
        background: rgba(0, 212, 255, 0.05);
    }
    .bento-viz-unlock:hover:not(.is-revealed):not(.is-cooldown) .bento-viz-unlock-btn {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .bento-viz-unlock.is-cooldown:hover .bento-viz-unlock-wait {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Hover mini-button — gradient-filled "Feloldás · 1 kredit" */
.bento-viz-unlock-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 4px 10px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #635BFF 0%, #00D4FF 100%);
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
        opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(99, 91, 255, 0.35);
    white-space: nowrap;
}
/* Press feedback — tactile scale pulse triggered via JS-added `.is-pressed` */
.bento-viz-unlock-btn.is-pressed {
    animation: bentoBtnPress 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bentoBtnPress {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(0) scale(0.96); }
    100% { transform: translateY(0) scale(1); }
}
/* Cooldown label replaces the button during the 3s rest after auto-revert */
.bento-viz-unlock-wait {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 4px 10px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
/* During reveal + cooldown, cursor is not pointer (no fresh click target) */
.bento-viz-unlock.is-revealed,
.bento-viz-unlock.is-cooldown { cursor: default; }

/* Lock icon pulse — cyan ring flash, scale 1→1.12→1. Pure CSS so we can gate
   scale via reduced-motion in a single place. */
.bento-lock-icon {
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1),
                color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}
.bento-lock-icon.is-pulsing {
    animation: bentoLockPulse 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bentoLockPulse {
    0%   { transform: scale(1);    stroke: var(--secondary); filter: drop-shadow(0 0 0 rgba(0,212,255,0)); }
    50%  { transform: scale(1.12); stroke: #7DD8F0;          filter: drop-shadow(0 0 6px rgba(0,212,255,0.5)); }
    100% { transform: scale(1);    stroke: var(--secondary); filter: drop-shadow(0 0 0 rgba(0,212,255,0)); }
}
@media (prefers-reduced-motion: reduce) {
    .bento-lock-icon.is-pulsing {
        animation: bentoLockPulseRM 200ms linear;
    }
    /* Reduced-motion: color flash only, no scale */
    @keyframes bentoLockPulseRM {
        0%, 100% { stroke: var(--secondary); }
        50%      { stroke: #7DD8F0; }
    }
    .bento-viz-unlock-row .bento-viz-check,
    .bento-viz-unlock-btn,
    .bento-viz-unlock-wait,
    .bento-viz-unlock { transition: none; }
}

.bento-viz-csv {
    background: rgba(7,11,23,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
}
.bento-viz-csv b { color: var(--secondary); font-weight: 500; }
.bento-viz-export-badges {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
}
/* Card 3 format tabs (SPEC Step 4.1). CSV = default active gradient,
   XLSX = outline; click swaps. */
.bento-viz-tab {
    padding: 5px 12px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition:
        color 180ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-viz-tab:hover:not(.is-active) {
    border-color: rgba(0, 212, 255, 0.35);
    background: rgba(0, 212, 255, 0.05);
    color: #7DD8F0;
}
.bento-viz-tab:focus-visible {
    outline: 2px solid rgba(0, 212, 255, 0.45);
    outline-offset: 2px;
}
.bento-viz-tab.is-active {
    background: linear-gradient(135deg, #635BFF 0%, #00D4FF 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 91, 255, 0.25);
}

/* Preview block — now a tabpanel containing both format variants */
.bento-viz-csv { position: relative; }
.bento-viz-csv-content {
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}
.bento-viz-csv-content.is-fading { opacity: 0; }
/* Hide-until-hover download link, bottom-right of the preview area */
.bento-viz-csv-download {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition:
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
        color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-viz-csv-download svg {
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
    .bento-viz-csv:hover .bento-viz-csv-download,
    .bento-viz-csv:focus-within .bento-viz-csv-download {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}
.bento-viz-csv-download:hover { color: #7DD8F0; }
.bento-viz-csv-download:hover svg { transform: translateX(2px); }
.bento-viz-csv-download:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: 2px solid rgba(0, 212, 255, 0.45);
    outline-offset: 2px;
}

/* Toast — small cyan-bordered card bottom-right. Inserted via JS on-demand. */
.bento-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    max-width: 360px;
    padding: 12px 16px;
    background: rgba(18, 22, 39, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.45;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 16px 48px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    pointer-events: none;
}
.bento-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.bento-toast strong {
    color: #7DD8F0;
    font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
    .bento-viz-tab,
    .bento-viz-csv-content,
    .bento-viz-csv-download,
    .bento-toast { transition: none; }
}

.bento-viz-lists {
    display: grid;
    gap: 6px;
    position: relative; /* drop-indicator is absolute-positioned inside */
}
.bento-viz-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    user-select: none;
    outline: none;
    transition:
        background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-viz-list-row:focus-visible {
    outline: 2px solid rgba(0, 212, 255, 0.45);
    outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .bento-viz-list-row:hover {
        background: rgba(255, 255, 255, 0.03);
    }
    .bento-viz-list-row:hover .bento-viz-list-grip {
        color: rgba(255, 255, 255, 0.7);
    }
}
/* Drag-active state (pointer drag OR keyboard drag mode). SPEC Step 5.2 —
   scale 1.02, layered shadow, subtle opacity drop, z-lifted. */
.bento-viz-list-row.drag {
    transform: scale(1.02);
    border-color: rgba(0, 212, 255, 0.3);
    background: rgba(0, 212, 255, 0.05);
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.3),
        0 12px 32px rgba(0, 212, 255, 0.2);
    opacity: 0.95;
    z-index: 2;
    cursor: grabbing;
}
/* Settle bounce on drop (SPEC Step 5.2 — scale 1.0 → 0.98 → 1.0) */
.bento-viz-list-row.is-settled {
    animation: bentoListSettle 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bentoListSettle {
    0%   { transform: scale(1);    }
    40%  { transform: scale(0.98); }
    100% { transform: scale(1);    }
}
/* Success flash (SPEC Step 5.2 — border pulses cyan 0→full→0 over 400ms) */
.bento-viz-list-row.is-success-flash {
    animation: bentoListSuccessFlash 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bentoListSuccessFlash {
    0%   { box-shadow: 0 0 0 1px rgba(0, 212, 255, 0); }
    40%  { box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.85), 0 0 16px rgba(0, 212, 255, 0.4); }
    100% { box-shadow: 0 0 0 1px rgba(0, 212, 255, 0); }
}
/* Drop indicator — inserted dynamically between rows during drag */
.bento-viz-list-drop-indicator {
    height: 2px;
    background: #00D4FF;
    border-radius: 2px;
    margin: 2px 0;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
    animation: bentoDropIndicatorIn 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bentoDropIndicatorIn {
    from { opacity: 0; transform: scaleX(0.8); }
    to   { opacity: 1; transform: scaleX(1); }
}
.bento-viz-list-grip {
    color: var(--text-muted);
    cursor: grab;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: none; /* allow long-press to initiate drag instead of page scroll */
}
.bento-viz-list-row.drag .bento-viz-list-grip { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
    .bento-viz-list-row { transition: none; }
    .bento-viz-list-row.is-settled,
    .bento-viz-list-row.is-success-flash,
    .bento-viz-list-drop-indicator { animation: none; }
}

.bento-viz-synonyms {
    position: relative;
    padding-top: 44px;
}
.bento-viz-syn-query {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #fff;
    margin-bottom: 14px;
}
.bento-viz-syn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Card 5 — clickable synonym chips (SPEC Steps 6.1, 6.4). Initial SSR stagger
   via nth-child animation-delay; JS-driven swap re-uses chipPop via class
   toggle + inline animation-delay. */
.bento-viz-syn-chip {
    padding: 4px 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    background: rgba(99, 91, 255, 0.08);
    border: 1px solid rgba(99, 91, 255, 0.22);
    border-radius: 999px;
    color: var(--primary);
    cursor: pointer;
    opacity: 0;
    animation: chipPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transition:
        color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-viz-syn-chip:hover {
    background: rgba(99, 91, 255, 0.28);
    color: #fff;
    transform: translateY(-2px);
    border-color: rgba(99, 91, 255, 0.4);
}
.bento-viz-syn-chip:focus-visible {
    outline: 2px solid rgba(0, 212, 255, 0.45);
    outline-offset: 2px;
}
.bento-viz-syn-chip:active { transform: translateY(0) scale(0.96); }
/* SSR stagger — applies only to chips that don't have inline animation-delay */
.bento-viz-syn-chip:nth-child(1) { animation-delay: 0.20s; }
.bento-viz-syn-chip:nth-child(2) { animation-delay: 0.28s; }
.bento-viz-syn-chip:nth-child(3) { animation-delay: 0.36s; }
.bento-viz-syn-chip:nth-child(4) { animation-delay: 0.44s; }
.bento-viz-syn-chip:nth-child(5) { animation-delay: 0.52s; }
@keyframes chipPop {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Main query pill — hover glow + slight scale (not actionable) */
.bento-viz-syn-query {
    transition:
        border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
    .bento-viz-syn-query:hover {
        border-color: rgba(0, 212, 255, 0.35);
        transform: scale(1.02);
        box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
    }
}
/* Count label — monospace tertiary */
.bento-viz-syn-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
    margin: 0 0 8px;
    transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-viz-syn-count.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .bento-viz-syn-chip {
        opacity: 1;
        animation: none;
        transition: none;
    }
    .bento-viz-syn-query,
    .bento-viz-syn-count { transition: none; }
}

.bento-viz-security {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bento-viz-security-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}
.bento-viz-security-row svg { color: var(--secondary); flex-shrink: 0; }
.bento-viz-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--success);
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.28);
    border-radius: 999px;
    width: fit-content;
}

/* --- PERSONAS ------------------------------------------------------------- */
.personas {
    padding: 120px 24px;
}
.personas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 48px;
}
.persona-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: linear-gradient(180deg, #111624, #0A0E1A);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.persona-card:hover {
    border-color: rgba(0,212,255,0.3);
    transform: translateY(-2px);
}
.persona-card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(0,212,255,0.06);
    border: 1px solid rgba(0,212,255,0.22);
    color: var(--secondary);
    margin-bottom: 16px;
}
.persona-card h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
}
.persona-card blockquote {
    font-style: italic;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 16px;
    border-left: 2px solid rgba(0,212,255,0.3);
    padding-left: 12px;
}
.persona-card-benefit {
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    margin-bottom: 8px;
}
.persona-card-detail {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    line-height: 1.5;
}

/* --- DEEP DIVE ------------------------------------------------------------ */
.deep-dive {
    padding: 120px 24px;
}
.dd-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 48px;
    align-items: center;
}
.dd-checklist {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 24px 0 32px;
}
.dd-checklist li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.dd-checklist svg {
    flex-shrink: 0;
    color: var(--secondary);
    margin-top: 3px;
}
.dd-profile {
    position: relative;
    padding: 28px;
    background: linear-gradient(180deg, #111624, #0A0E1A);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
    isolation: isolate;
}
.dd-profile::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 50%, rgba(0,212,255,0.1), transparent 60%);
    pointer-events: none;
    z-index: -1;
}
.dd-profile-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 18px;
}
.dd-profile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    letter-spacing: -0.01em;
}
.dd-profile-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.dd-profile-contact {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}
.dd-profile-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: #fff;
}
.dd-profile-contact-row svg { color: var(--secondary); flex-shrink: 0; }
.dd-profile-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 16px;
}
.dd-profile-tab {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}
.dd-profile-tab:hover { color: #fff; }
.dd-profile-tab.active { color: var(--secondary); }
.dd-profile-tab.active::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: -1px;
    height: 2px;
    background: var(--secondary);
    border-radius: 2px 2px 0 0;
}
.dd-profile-panels { min-height: 100px; }
.dd-profile-panel { display: none; animation: fadeIn 0.3s ease; }
.dd-profile-panel.active { display: block; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dd-tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dd-tech-chips span {
    padding: 4px 10px;
    font-size: 12px;
    background: rgba(99,91,255,0.08);
    border: 1px solid rgba(99,91,255,0.22);
    border-radius: 999px;
    color: var(--primary);
}

/* --- PRICING TEASER ------------------------------------------------------- */
.pricing-teaser {
    padding: 120px 24px;
}
.pt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
    align-items: stretch;
}
.pt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: linear-gradient(180deg, #111624, #0A0E1A);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.pt-card:hover {
    border-color: rgba(0,212,255,0.3);
    transform: translateY(-2px);
}
.pt-card--hl {
    border: 1px solid transparent;
    background:
        linear-gradient(#0E1326,#0E1326) padding-box,
        linear-gradient(135deg, var(--primary), var(--secondary)) border-box;
    box-shadow: 0 24px 60px rgba(99,91,255,0.18);
}
@media (min-width: 1024px) {
    .pt-card--hl { transform: scale(1.03); }
    .pt-card--hl:hover { transform: scale(1.03) translateY(-4px); }
}
.pt-card-badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000;
    background: var(--warning);
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 0 0 4px #0A0E1A, 0 4px 12px rgba(250,204,21,0.35);
}
.pt-tier-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(0,212,255,0.06);
    border: 1px solid rgba(0,212,255,0.22);
    color: var(--secondary);
    margin-bottom: 16px;
}
.pt-tier-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.pt-tier-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}
.pt-tier-price-amount {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 44px;
    letter-spacing: -0.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.pt-tier-price-per {
    font-size: 14px;
    color: var(--text-muted);
}
.pt-tier-credits {
    font-size: 13px;
    color: var(--secondary);
    margin-bottom: 20px;
    font-weight: 500;
}
.pt-features {
    list-style: none;
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
    flex: 1;
}
.pt-features li {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    align-items: flex-start;
    line-height: 1.5;
}
.pt-features svg {
    flex-shrink: 0;
    color: var(--secondary);
    margin-top: 3px;
}
.pt-footer-note {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.04);
    font-size: 13px;
    color: var(--text-muted);
}
.pt-footer-trust {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}
.pt-footer-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pt-footer-trust svg { color: var(--success); }

/* --- BIZ-ADD SECTION ------------------------------------------------------ */
.biz-add {
    padding: 120px 24px;
}
.biz-add-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 48px;
    align-items: center;
}
.biz-add-big {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(48px, 5vw, 72px);
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(120deg, var(--secondary) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-top: 24px;
}
.biz-add-reward-line {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 14px;
}
.biz-listing {
    position: relative;
    background: linear-gradient(180deg, #111624, #0A0E1A);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}
.biz-listing-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 18px;
}
.biz-listing-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.biz-listing-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    letter-spacing: -0.01em;
}
.biz-listing-edit {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.biz-listing-edit:hover { border-color: var(--secondary); color: var(--secondary); }
.biz-listing-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.biz-listing-stats {
    display: flex;
    gap: 18px;
    padding: 14px 16px;
    background: rgba(0,212,255,0.04);
    border: 1px solid rgba(0,212,255,0.18);
    border-radius: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.biz-listing-stats > div {
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.biz-listing-stats-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary);
}
.biz-listing-stats-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-top: 2px;
}

/* --- FAQ ------------------------------------------------------------------ */
.faq {
    padding: 120px 24px;
}
.faq-list {
    margin-top: 48px;
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    transition: background 0.2s ease;
}
.faq-item.open {
    background: rgba(0,212,255,0.015);
}
.faq-item.open::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--secondary);
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s ease;
}
.faq-q:hover { color: var(--secondary); }
.faq-icon {
    width: 24px; height: 24px;
    color: var(--secondary);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(.22,1,.36,1);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
    overflow: hidden;
    padding: 0 24px;
}
.faq-a-text {
    padding: 0 0 20px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 720px;
}

/* --- FINAL CTA ------------------------------------------------------------ */
.final-cta {
    position: relative;
    padding: 140px 24px;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.final-cta-aurora {
    position: absolute;
    inset: -20%;
    z-index: 0;
    filter: blur(80px);
    pointer-events: none;
}
.final-cta-aurora span {
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    opacity: 0.4;
    will-change: transform;
}
.final-cta-aurora span:nth-child(1) {
    top: -20%; left: -10%;
    background: radial-gradient(circle, rgba(99,91,255,0.55), transparent 60%);
    animation: auroraDrift1 40s ease-in-out infinite;
}
.final-cta-aurora span:nth-child(2) {
    top: 30%; right: -20%;
    background: radial-gradient(circle, rgba(0,212,255,0.50), transparent 60%);
    animation: auroraDrift2 50s ease-in-out infinite;
}
.final-cta-aurora span:nth-child(3) {
    bottom: -20%; left: 20%;
    background: radial-gradient(circle, rgba(155,89,219,0.45), transparent 60%);
    animation: auroraDrift3 60s ease-in-out infinite;
}
.final-cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}
.final-cta h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 4.2vw, 3.75rem);
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin-bottom: 20px;
    text-wrap: balance;
    -webkit-text-wrap: balance;
}
.final-cta h2 br { display: inline; }
.final-cta-sub {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 36px;
}
.final-cta .btn-primary {
    font-size: 16px;
    padding: 14px 26px;
    box-shadow: 0 0 0 0 rgba(0,212,255,0.3);
    animation: pulseGlow 3.2s ease-in-out infinite;
}
.final-cta-trust {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 28px;
    font-size: 13px;
    color: var(--text-secondary);
}
.final-cta-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.final-cta-trust svg { color: var(--secondary); flex-shrink: 0; }

.final-cta-side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.8;
    white-space: nowrap;
    display: none;
    z-index: 1;
}
.final-cta-side--left { left: 24px; text-align: left; }
.final-cta-side--right { right: 24px; text-align: right; }
.final-cta-side-row { opacity: 0.4; }
.final-cta-side-row b { color: var(--secondary); font-weight: 500; }
@media (min-width: 1200px) {
    .final-cta-side { display: block; }
}

/* --- Skip link ------------------------------------------------------------ */
.landing-skip {
    position: absolute;
    top: 8px; left: 8px;
    padding: 10px 16px;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    z-index: 100;
    transform: translateY(-200%);
    transition: transform 0.2s ease;
}
.landing-skip:focus { transform: translateY(0); }

/* --- Data-reveal animation state ----------------------------------------- */
.landing-page [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
}
.landing-page [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1023px) {
    /* V2.3: hero already flex-column globally; tablet just rechecks the
       vertical spacing between text block and visual. */
    .hero-visual { max-width: 640px; margin-top: 56px; }
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-card--hero { grid-column: span 2; grid-row: span 1; }
    .personas-grid { grid-template-columns: repeat(2, 1fr); }
    .dd-grid { grid-template-columns: 1fr; gap: 32px; }
    .biz-add-grid { grid-template-columns: 1fr; gap: 32px; }
    .pt-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
    @media (min-width: 1024px) {
        .pt-card--hl { transform: none; }
    }
    .source-strip-row { grid-template-columns: repeat(4, 1fr); row-gap: 20px; }
    .how-grid { grid-template-columns: 1fr; }
    .stats-band-grid { grid-template-columns: 1fr; }
    .stats-band-col + .stats-band-col::before {
        left: 10%; right: 10%; top: 0; bottom: auto;
        width: auto; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0,212,255,0.28), transparent);
    }
}
@media (max-width: 767px) {
    .landing-page .landing-section,
    .hero-v2, .source-strip, .stats-band, .how-works, .live-preview,
    .bento, .personas, .deep-dive, .pricing-teaser,
    .biz-add, .faq, .final-cta {
        padding-left: 20px;
        padding-right: 20px;
    }
    .hero-v2 { padding-top: 140px; padding-bottom: 80px; }
    /* FIX 6 — Mobile hero is fully center-aligned. Desktop stays left-aligned. */
    .hero-v2 .hero-text {
        text-align: center;
    }
    .hero-v2 .hero-eyebrow {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-v2 .hero-sub {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-v2 .hero-ctas-v2 {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .hero-v2 .hero-trust {
        justify-content: center;
    }
    .hero-v2 .hero-scanline {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-v2 .hero-microtrust {
        text-align: center;
    }
    .landing-section, .how-works, .live-preview, .bento, .personas,
    .deep-dive, .pricing-teaser, .biz-add, .faq {
        padding-top: 80px; padding-bottom: 80px;
    }
    .landing-nav-links { display: none; }
    .landing-nav-toggle { display: inline-flex; }
    .landing-section-title { font-size: clamp(28px, 8vw, 40px); }
    /* V2.3 — let the base `clamp(2.875rem, 5.2vw, 4.75rem)` enforce 46px floor.
       No mobile-only font override; max-width resets to full container. */
    .hero-v2 h1 { max-width: 100%; }
    .hero-visual { width: 85%; max-width: 340px; margin: 48px auto 0; }
    .bento-grid { grid-template-columns: 1fr; }
    .bento-card,
    .bento-card--hero { grid-column: 1 / -1; grid-row: auto; }
    .personas-grid {
        grid-template-columns: 1fr;
    }
    .source-strip-row { grid-template-columns: repeat(2, 1fr); }
    /* 7 sources → odd last item (Azure Maps) spans both columns, centered */
    .source-strip-row > .source-logo:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
    }
    /* Center section eyebrow badges, titles and subs on mobile */
    .landing-eyebrow {
        display: flex;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    .landing-section-title,
    .landing-section-sub {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .lp-filterbar { padding: 12px 16px; gap: 8px; }
    .lp-tabs { padding: 0 12px; }
    .final-cta { padding: 96px 20px; }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .landing-page *,
    .landing-page *::before,
    .landing-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .landing-aurora,
    .final-cta-aurora {
        opacity: 0.3;
    }
    .hero-v2 .btn-glow::before,
    .final-cta .btn-primary {
        animation: none;
        box-shadow: 0 0 0 2px rgba(0,212,255,0.3);
    }
    .landing-page [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}