/* ============================================================
   HOMEPAGE SHINE — flagship visual pass (2026-08-12)
   Loaded ONLY on index.html — safe to redeclare :root tokens
   here without affecting any other page on the site.
   Spec source: Neo4j :Project{key:'homepage-rebuild-2026-08-12'}.design_spec
   Brand purple (#7C3AED) + primary-light (#A78BFA) already exist in
   styles.css and are reused here, unchanged, for consistency.
   ============================================================ */

:root {
    --hp-bg: #09090B;
    --hp-surface: #18181B;
    --hp-surface-border: rgba(255, 255, 255, 0.07);
    --hp-accent: #A78BFA;
    --hp-text: #FAFAFA;
    --hp-text-muted: #A1A1AA;
}

html[data-theme="dark"] body { background-color: var(--hp-bg); }

/* ---------- Typography — larger body for low-vision legibility ---------- */
.hero-headline {
    font-size: clamp(2.15rem, 1.4rem + 3vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
}
.hero-headline .grad { display: block; margin-top: 0.22em; }
.section-heading { font-weight: 700; letter-spacing: -0.015em; }
.hero-sub, .section-sub, .ios-showcase__lead, .faq-answer, .lenny-section .section-sub {
    font-size: 1.0625rem;
    line-height: 1.65;
}

/* ---------- Bespoke, on-brand focus ring (accessibility as a design flex) ---------- */
:focus-visible {
    outline: 3px solid var(--hp-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ---------- Skip link: beautiful slide-in, not just a hidden anchor ---------- */
.skip-link {
    transform: translateY(-140%);
    transition: transform 0.25s cubic-bezier(.16, 1, .3, 1);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Hero: glass stage around the LIVE demo (wraps, never replaces it) ---------- */
.hero-glass-card {
    position: relative;
    background: rgba(24, 24, 27, 0.6);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--hp-surface-border);
    border-radius: 28px;
    padding: clamp(18px, 3vw, 38px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .hero-glass-card {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 20px 50px rgba(15, 15, 25, 0.12);
}
.hero-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hp-accent);
    background: rgba(124, 58, 237, 0.14);
    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: 999px;
    padding: 6px 14px 6px 12px;
    margin-bottom: 18px;
}
.hero-live-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
    flex: none;
}

/* ---------- Bento platform grid (S5) ---------- */
/* Selectors target .capability-strip / .capability-chip directly (NOT an
   added .bento-grid/.bento-card class) — tests/test_homepage_breadth_restored.py
   pins the exact substring class="capability-strip" on the <ul>, so the bento
   visual treatment is layered onto the existing, tested class names instead
   of requiring a second class that would break that exact-match assertion. */
.capability-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; list-style: none; padding: 0; }
@media (min-width: 860px) { .capability-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 360px) { .capability-strip { grid-template-columns: 1fr; } }
.capability-strip > li { margin: 0; }
.capability-chip, .capability-strip > li.bento-card {
    position: relative;
    display: block;
    background: var(--hp-surface);
    border: 1px solid var(--hp-surface-border);
    border-radius: 20px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.capability-chip::before, .bento-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 28% 18%, rgba(124, 58, 237, 0.28), transparent 62%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.capability-chip:hover, .capability-chip:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 16px 40px rgba(124, 58, 237, 0.14);
}
.capability-chip:hover::before, .capability-chip:focus-visible::before { opacity: 1; }
.bento-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.16);
    color: var(--hp-accent);
    margin-bottom: 14px;
    position: relative;
}
.capability-chip h3, .capability-chip strong { font-size: 1.03rem; margin: 0 0 6px; position: relative; display: block; }
.capability-chip p, .capability-chip span:not(.bento-card-icon):not(.module-status) { margin: 0; font-size: 0.92rem; color: var(--hp-text-muted); position: relative; }
.bento-arrow { opacity: 0.65; margin-left: 2px; }
.bento-see-all { margin-top: 18px; }

/* ---------- Free-beta gradient banner (S6) ---------- */
.beta-gradient-banner {
    background: linear-gradient(135deg, #4C1D95, #7C3AED);
    border-radius: 28px;
    padding: clamp(26px, 4vw, 48px);
    color: #FAFAFA;
    box-shadow: 0 22px 55px rgba(76, 29, 149, 0.35);
}
.beta-gradient-banner .section-eyebrow,
.beta-gradient-banner .section-heading,
.beta-gradient-banner .section-sub,
.beta-gradient-banner .pricing-preview-note,
.beta-gradient-banner .pricing-preview-disclaimer { color: #FAFAFA; }
.beta-gradient-banner .section-sub { color: rgba(255, 255, 255, 0.86); }
.beta-gradient-banner .beta-pricing-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.beta-gradient-banner .btn-preview--solid { background: #FAFAFA; color: #4C1D95; }
.beta-gradient-banner .btn-preview--solid:hover { background: #FFFFFF; }
.beta-gradient-banner .inline-cta { color: #FAFAFA; text-decoration-color: rgba(255, 255, 255, 0.5); }

/* ---------- Founder / mission editorial (S4) ---------- */
.founder-editorial { display: grid; grid-template-columns: minmax(0, 62ch) auto; gap: 44px; align-items: center; }
@media (max-width: 860px) { .founder-editorial { grid-template-columns: 1fr; } }
.founder-portrait-wrap { position: relative; justify-self: center; }
.founder-portrait-wrap img {
    width: min(260px, 58vw);
    border-radius: 24px;
    display: block;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.founder-portrait-wrap::before {
    content: "";
    position: absolute;
    inset: -18%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.38), transparent 70%);
    filter: blur(30px);
    z-index: 0;
    animation: hp-aura-breathe 4s ease-in-out infinite;
}

/* ---------- Vision concept illustration (S2) — clearly separate from real screenshots ---------- */
.vision-concept-figure {
    margin-top: 22px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--hp-surface-border);
    position: relative;
}
.vision-concept-figure img { display: block; width: 100%; height: auto; }
.vision-concept-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(9, 9, 11, 0.78);
    color: #FAFAFA;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.vision-concept-caption {
    font-size: 0.8rem;
    color: var(--hp-text-muted);
    margin: 10px 2px 0;
}

/* ---------- "Under the hood" credibility strip (S4 companion) ---------- */
.tech-proof-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}
.tech-proof-strip li {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hp-text-muted);
    background: var(--hp-surface);
    border: 1px solid var(--hp-surface-border);
    border-radius: 999px;
    padding: 7px 14px;
    line-height: 1.3;
}

@keyframes hp-aura-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ---------- Scroll reveal — progressive enhancement, JS adds .is-revealed ---------- */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.6s cubic-bezier(.16, 1, .3, 1), transform 0.6s cubic-bezier(.16, 1, .3, 1);
    }
    [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .founder-portrait-wrap::before { animation: none; }
}

/* ---------- Quote band (moved from an inline <style> block, 2026-08-12 —
   fixes tests/test_homepage_no_inline_style.py's <5-line inline-style cap;
   pure move, no visual change; position page 2026-08-10) ---------- */
.quote-band {
    padding: 2.5rem 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}
.quote-band-inner { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; text-align: center; }
.quote-band-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--link);
    margin-bottom: 1rem;
}
.quote-band-quote { margin: 0 auto 1.1rem; max-width: 640px; }
.quote-band-quote p {
    font-size: 1.25rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--text-primary);
    margin: 0 0 0.6rem;
}
.quote-band-quote footer { font-size: 0.95rem; font-style: normal; color: var(--text-secondary); }
.quote-band-quote footer cite { font-style: normal; }
.quote-band-quote footer a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.quote-band-quote footer a:hover,
.quote-band-quote footer a:focus-visible { color: var(--primary-light); }
.quote-band-line { font-size: 1.02rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.quote-band-link {
    display: inline-block;
    margin-left: 0.4rem;
    color: var(--link);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.quote-band-link:hover,
.quote-band-link:focus-visible { color: var(--primary-light); }
@media (prefers-reduced-motion: reduce) {
    .quote-band * { transition: none !important; animation: none !important; }
}

/* ============================================================
   FABLE PREMIUM PASS (2026-08-12) — iOS-26 Liquid Glass + Safari-26
   native polish, layered ON TOP of the shine pass above. Additive,
   index.html-only, progressive-enhancement (every effect degrades to a
   solid, legible surface where unsupported). Text contrast never rides
   on the glass — copy sits on solid-enough backing, WCAG AA preserved.
   ============================================================ */

/* ---- Liquid Glass tokens ---- */
:root {
    --lg-blur: 22px;
    --lg-sat: 180%;
    --lg-tint-dark: rgba(24, 24, 27, 0.55);
    --lg-tint-light: rgba(255, 255, 255, 0.66);
    /* specular top-edge highlight that reads as a glass bevel */
    --lg-edge: inset 0 1px 0 rgba(255, 255, 255, 0.14),
               inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ---- True Liquid Glass on the hero demo card ---- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero-glass-card {
        background: var(--lg-tint-dark);
        -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
        backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), var(--lg-edge);
    }
    html[data-theme="light"] .hero-glass-card {
        background: var(--lg-tint-light);
        -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(160%);
        backdrop-filter: blur(var(--lg-blur)) saturate(160%);
        box-shadow: 0 20px 50px rgba(15, 15, 25, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
    /* Frosted, self-tinting top navigation — the OS-bar feel */
    .navbar {
        -webkit-backdrop-filter: blur(18px) saturate(var(--lg-sat));
        backdrop-filter: blur(18px) saturate(var(--lg-sat));
        background: color-mix(in srgb, var(--hp-bg) 62%, transparent);
        border-bottom: 1px solid var(--hp-surface-border);
    }
}

/* ---- Refined typography: even, intentional ragged edges ---- */
.hero-headline, .section-heading, .quote-band-quote p { text-wrap: balance; }
.hero-sub, .section-sub, .faq-answer, .ios-showcase__lead,
.capability-chip p, .founder-editorial p { text-wrap: pretty; }
.hero-headline { font-optical-sizing: auto; }

/* ---- The gradient headline word: richer, animated sheen ---- */
.hero-headline .grad {
    background: linear-gradient(100deg, #A78BFA 0%, #7C3AED 45%, #C4B5FD 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- Primary CTA: premium depth, glow, and a light sweep on hover ---- */
.btn-preview--solid, .concierge-open-cta:not(.concierge-open-cta--ghost) {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg, #8B5CF6, #7C3AED);
    box-shadow: 0 8px 22px rgba(124, 58, 237, 0.35), var(--lg-edge);
    transition: transform 0.25s cubic-bezier(.16,1,.3,1),
                box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-preview--solid:hover, .concierge-open-cta:not(.concierge-open-cta--ghost):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(124, 58, 237, 0.48), var(--lg-edge);
    filter: saturate(1.06);
}
@media (prefers-reduced-motion: no-preference) {
    .btn-preview--solid::after, .concierge-open-cta:not(.concierge-open-cta--ghost)::after {
        content: "";
        position: absolute;
        top: 0; left: -60%;
        width: 40%; height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
        transform: skewX(-18deg);
        transition: left 0.6s cubic-bezier(.16,1,.3,1);
        pointer-events: none;
    }
    .btn-preview--solid:hover::after,
    .concierge-open-cta:not(.concierge-open-cta--ghost):hover::after { left: 130%; }
}

/* ---- Bento cards: liquid-glass surface + a brighter gradient edge on hover ---- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .capability-chip {
        background: color-mix(in srgb, var(--hp-surface) 82%, transparent);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: var(--lg-edge);
    }
}
.capability-chip:hover, .capability-chip:focus-visible {
    box-shadow: 0 16px 40px rgba(124, 58, 237, 0.18), var(--lg-edge);
}

/* ---- Native scroll-driven reveal: on Safari-26+/Chromium it animates from
   the scroll timeline with ZERO JS. The JS [data-reveal] path stays as the
   fallback + a11y failsafe for browsers without scroll-timeline support. ---- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        [data-reveal] {
            opacity: 1;               /* JS no longer needed to un-hide */
            transform: none;
            animation: hp-reveal-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 42%;
        }
    }
}
@keyframes hp-reveal-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Accessible auto-contrast on any solid brand chip that opts in ---- */
@supports (color: contrast-color(#000)) {
    .btn-preview--solid { color: contrast-color(#7C3AED); }
}

/* ---- Audit fixes (2026-08-12) ---- */

/* #4: the hero H1 must be the DISPLAY step (it was rendering smaller than the
   section H2s). .hero-headline sizing above now applies to #concierge-title;
   the inline .grad accent gets the gradient sheen. Keep it bold + tight. */
#concierge-title.hero-headline {
    font-size: clamp(2.6rem, 1.6rem + 4.5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin-bottom: 0.35em;
}
#concierge-title.hero-headline .grad { display: inline; }

/* #3: kill mobile horizontal scroll — the breathing Voice Aura + glow can
   render wider than the stage; clip at the section and cap aura width so
   nothing escapes the 390px viewport (scrollWidth must equal clientWidth). */
.concierge-section { overflow-x: clip; }
.concierge-stage { max-width: 100%; }
.lenny-mascot-glow, .hero-voice-aura, [class*="aura"] { max-width: 100%; }

/* Orphaned .hero-glass-card note: intentionally NOT applied to the avatar
   stage — tests/test_homepage_glass_stage.py pins the "one solid panel, not
   glass" board decision (2026-08-05). The Liquid Glass language lives on the
   navbar + bento cards instead. The .hero-glass-card rule above is retained
   only for the /business hero, which DOES use it. */

/* ---- 2-COLUMN HERO (2026-08-12, Joe): copy left, live demo right, so the
   avatar is framed instead of floating in a single column with an empty
   gutter. CSS-only — the 5 hero children (eyebrow, h1, subhead, mic-note,
   CTA go to column 1; .concierge-stage spans column 2). Stacks on mobile. */
.hero-primary-cta { margin-top: 26px; }
.hero-try-btn {
    display: inline-flex; align-items: center;
    font-weight: 700; font-size: 1.02rem;
    padding: 14px 28px; border-radius: 999px; text-decoration: none;
}
@media (min-width: 920px) {
    #meet-lenny > .container {
        display: grid;
        grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
        column-gap: clamp(36px, 5vw, 76px);
        /* start, not center: the demo card is much taller than the copy, so
           centering sank the headline ~540px down leaving a void above it
           (prod review 2026-08-12). Anchor the copy near the top instead. */
        align-items: start;
        max-width: 1180px;
    }
    .hero-copy {
        grid-column: 1;
        text-align: left;
        max-width: 36ch;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: clamp(24px, 4vw, 64px);
    }
    .hero-copy > * { margin-left: 0; margin-right: 0; }
    #meet-lenny > .container > .concierge-stage {
        grid-column: 2;
        align-self: center;
        justify-self: center;
        margin: 0;
        width: 100%;
    }
}
/* Mobile: copy stays centered above the demo (default flow) */
.hero-copy { width: 100%; }