/* Scoped to .home-landing so this page's dark cosmic theme doesn't
     leak into the rest of the app's (light/dark-toggleable) design system. */
.home-landing {
    color-scheme: dark;
    --bg-primary: #0A0C12;
    --bg-secondary: #12151E;
    --bg-card: #10141E;
    --text-primary: #F4F4EE;
    --text-secondary: #C5CAD8;
    --text-tertiary: #8A90A4;
    --text-dim: #9BA1B5;
    --border-color: #252B38;
    --accent: #E27288;
    /* coral/pink - phase 1 & 3 icon per real app */
    --accent-soft: #DD6B81;
    --gold: #DCAE57;
    /* phase 2 */
    --purple: #9B87E8;
    /* new: phase 3 differentiation, matches reference image */
    --blue: #6BA3D6;
    /* phase 4 - hospital missions, matches --info elsewhere in the app */
    --cyan: #5EC4D4;
    --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
    --section-gap: clamp(80px, 10vw, 120px);
    --content-pad: clamp(24px, 5vw, 72px);

    position: relative;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: none;
    margin: 0;
}

.main-content.main-content--home {
    max-width: none;
    width: 100%;
    padding: 0;
}

body.app-authenticated .main-content.main-content--home {
    padding: 0;
}

body.app-authenticated .home-landing > .nav {
    display: none;
}

.home-landing * {
    box-sizing: border-box;
}

.home-landing a {
    color: inherit;
    text-decoration: none;
}

/* base.html's .main-content has a page-entry animation that ends on
   transform:translateY(0). Any non-none transform on an ancestor —
   even an identity one like translateY(0), and even just while an
   animation using it is mid-flight — makes it a *containing block*
   for position:fixed descendants. Two things on this page get
   trapped by that: .ambient (would lock to .main-content's boxed
   width instead of the real viewport) and, worse, #authModalOverlay
   (the login/sign-up modal) — instead of covering the real browser
   viewport it gets confined to .main-content's own box, which ends
   right where the page content ends and the site footer begins. The
   modal then visibly stops short and the footer shows through under
   it, which is the bug this rule fixes.
   Targeted with a plain class (set via base.html's main_class block)
   rather than relying only on :has() support, since this isn't a
   cosmetic nicety — an unsupported selector here silently reopens
   the modal/footer overlap bug. transform is force-reset too, not
   just the animation, so nothing else on this page can reintroduce
   the trap later. */
.main-content.main-content--home,
.main-content:has(> .home-landing) {
    animation-name: home-landing-fade-in;
    transform: none;
}

@keyframes home-landing-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── ambient background ───────────────────────────── */
.home-landing .ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 1200px 800px at 85% 5%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
        radial-gradient(ellipse 900px 600px at 15% 90%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 60%),
        radial-gradient(ellipse 700px 500px at 50% 50%, color-mix(in srgb, var(--purple) 6%, transparent), transparent 70%),
        var(--bg-primary);
}

.home-landing .ambient::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image:
        linear-gradient(color-mix(in srgb, var(--border-color) 22%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--border-color) 22%, transparent) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, black 0%, transparent 80%);
}

/* ── aurora orbs (future atmosphere) ─────────────── */
.home-landing .aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: screen;
    opacity: .55;
    will-change: transform;
}

.home-landing .aurora--1 {
    top: -8%;
    right: 10%;
    width: min(680px, 55vw);
    height: min(680px, 55vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
    animation: auroraDrift1 18s ease-in-out infinite;
}

.home-landing .aurora--2 {
    bottom: 5%;
    left: -5%;
    width: min(520px, 45vw);
    height: min(520px, 45vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--purple) 50%, transparent), transparent 70%);
    animation: auroraDrift2 22s ease-in-out infinite;
}

.home-landing .aurora--3 {
    top: 40%;
    left: 35%;
    width: min(400px, 35vw);
    height: min(400px, 35vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 35%, transparent), transparent 70%);
    animation: auroraDrift3 26s ease-in-out infinite;
}

@keyframes auroraDrift1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-40px, 30px) scale(1.08);
    }
}

@keyframes auroraDrift2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(50px, -40px) scale(1.06);
    }
}

@keyframes auroraDrift3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: .35;
    }

    50% {
        transform: translate(-30px, 20px) scale(1.12);
        opacity: .55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .aurora {
        animation: none;
    }
}

/* ── perspective horizon grid ──────────────────────── */
.home-landing .horizon-grid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45vh;
    background:
        linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--bg-primary) 40%, transparent) 40%, var(--bg-primary) 100%),
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 79px,
            color-mix(in srgb, var(--border-color) 30%, transparent) 79px,
            color-mix(in srgb, var(--border-color) 30%, transparent) 80px),
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 39px,
            color-mix(in srgb, var(--border-color) 22%, transparent) 39px,
            color-mix(in srgb, var(--border-color) 22%, transparent) 40px);
    transform: perspective(600px) rotateX(72deg);
    transform-origin: center bottom;
    opacity: .22;
    mask-image: linear-gradient(to top, black 0%, transparent 85%);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 85%);
}

.home-landing .ambient-heart {
    position: absolute;
    top: -10px;
    left: 40px;
    width: min(820px, 58vw);
    height: auto;
    opacity: .88;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle at 72% 18%, black 0%, black 38%, transparent 72%);
    mask-image: radial-gradient(circle at 72% 18%, black 0%, black 38%, transparent 72%);
}

@media (max-width:1240px) {
    .home-landing .ambient-heart {
        width: 560px;
        top: -20px;
        left: -150px;
    }
}

@media (min-width: 981px) {

    /* Hero column carries its own heart layer; the fixed one sat under the
       mockup and read as “missing” once the split layout landed. */
    .home-landing .ambient-heart {
        display: none;
    }
}

@media (max-width:980px) {

    .home-landing .hero-showcase-ambient,
    .home-landing .ambient-heart {
        display: none;
    }
}

/* ── cosmic streak, next to the heart ──────────────── */
/* Head (the glowing ::after dot) sits at the top/right anchor point,
   since transform-origin is the streak's right end — the tail trails
   behind it along the rotated angle. Positioned + angled so the streak
   reads as launching from the heart and arcing down toward the "Get
   started free" button, instead of just floating near the heart. */
.home-landing .cosmic-streak {
    position: absolute;
    top: 80px;
    right: 280px;
    width: 480px;
    height: 4px;
    border-radius: 50%;
    background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--accent) 45%, transparent) 40%,
            color-mix(in srgb, var(--accent) 90%, white) 80%,
            #fff 97%,
            #fff 100%);
    transform: rotate(-42deg);
    transform-origin: 100% 50%;
    filter: blur(1.2px);
    opacity: .85;
    mix-blend-mode: screen;
}

/* .ambient is `position: fixed`, covering the whole viewport, so the
   heart glow + streak (pinned at fixed px offsets "next to the heart")
   stay glued to the same spot on screen at any scroll depth — they were
   only ever meant to sit next to the hero title. Once the page scrolls
   past the hero, whatever's underneath (e.g. the preview section's
   heading) is what ends up at that screen position, and the streak
   draws right through it. Fade both out past the hero instead of
   leaving them pinned for the whole page; the star layer is deliberately
   left out of this — that one's meant to stay visible throughout. */
.home-landing .ambient-heart,
.home-landing .cosmic-streak {
    transition: opacity .35s ease;
}

.home-landing.is-scrolled .ambient-heart,
.home-landing.is-scrolled .cosmic-streak {
    opacity: 0;
}

.home-landing .cosmic-streak::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 8px 2px #fff,
        0 0 20px 6px var(--accent),
        0 0 40px 12px color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (max-width:1240px) {
    .home-landing .cosmic-streak {
        width: 340px;
        top: 320px;
        right: 760px;
    }
}

@media (max-width:980px) {
    .home-landing .cosmic-streak {
        display: none;
    }
}

/* ── black hole — cosmic backdrop cameo ────────────── */
/* Lives in the fixed .ambient layer, same as the aurora orbs and the
   cosmic streak above — this is part of the page's cosmic backdrop,
   pinned to the viewport, not a decoration scrolling inside the
   AI-patient card. Hidden by default; home.js toggles .is-visible via
   an IntersectionObserver watching whether the AI-patient card
   (.ai-spotlight) is in view — reveal as the visitor scrolls to it,
   let go once they scroll past — the same "reveal, then let go"
   treatment as .ai-spotlight-mascot, just driven by a section instead
   of the one-way .is-scrolled threshold used above. mix-blend-mode:
   screen means the photo's black background contributes nothing
   against the dark page, only the glowing disk shows through, and the
   mask feathers its hard photo edges into a soft ambient glow so it
   reads as part of the backdrop rather than a pasted-in picture. */
.home-landing .cosmic-blackhole {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1000px, 84vw);
    height: auto;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, black 15%, transparent 78%);
    mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, black 15%, transparent 78%);
    transition: opacity 1.4s ease;
}

.home-landing .cosmic-blackhole.is-visible {
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .cosmic-blackhole {
        transition: opacity .4s ease;
    }
}

/* ── UFO — cosmic backdrop cameo, final CTA ────────── */
/* Same trick as .cosmic-blackhole above: lives in the fixed .ambient
   layer, not inside .home-final-cta itself, so it can bleed out past
   the card's edges instead of being clipped by its overflow:hidden.
   Toggled by home.js via an IntersectionObserver watching
   .home-final-cta — revealed as that section nears the viewport
   center, let go once scrolled past. Hovering / focusing the card's
   Créer mon compte button adds .is-flying: the wrap flies toward the
   upper-right while the ship itself rumbles like the engines are on.
   mix-blend-mode: screen drops the photo's black and leaves the saucer
   glowing through, feathered by the mask. */
.home-landing .cosmic-ship-wrap {
    position: absolute;
    top: 48%;
    left: 50%;
    width: min(400px, 40vw);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 1.4s ease, transform 1.45s cubic-bezier(.22, 1, .36, 1);
}

.home-landing .cosmic-ship-wrap.is-visible {
    opacity: 1;
}

.home-landing .cosmic-ship {
    display: block;
    width: 100%;
    height: auto;
    opacity: .5;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse 58% 55% at 50% 50%, black 15%, transparent 78%);
    mask-image: radial-gradient(ellipse 58% 55% at 50% 50%, black 15%, transparent 78%);
    transition: opacity .7s ease, filter .7s ease;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 16%, transparent));
}

.home-landing .cosmic-ship-wrap::before {
    content: '';
    position: absolute;
    right: 42%;
    top: 46%;
    width: 0;
    height: 3px;
    border-radius: 50%;
    background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--gold) 35%, transparent) 45%,
            color-mix(in srgb, var(--accent) 80%, white) 88%,
            #fff 100%);
    transform: rotate(-22deg);
    transform-origin: 100% 50%;
    opacity: 0;
    filter: blur(1px);
    mix-blend-mode: screen;
    pointer-events: none;
    transition: width .7s ease, opacity .45s ease;
}

.home-landing .cosmic-ship-wrap.is-flying {
    transform: translate(22%, -68%) rotate(8deg) scale(1.14);
}

.home-landing .cosmic-ship-wrap.is-flying::before {
    width: min(220px, 28vw);
    opacity: .8;
    animation: cosmic-ship-wake 0.55s linear infinite;
}

.home-landing .cosmic-ship-wrap.is-flying .cosmic-ship {
    opacity: .88;
    filter: drop-shadow(0 0 26px color-mix(in srgb, var(--gold) 34%, transparent));
    animation: cosmic-ship-thrust 0.28s ease-in-out infinite;
}

@keyframes cosmic-ship-thrust {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(1.5px, -2px) rotate(-0.7deg);
    }

    50% {
        transform: translate(-1px, 1.5px) rotate(0.5deg);
    }

    75% {
        transform: translate(2px, -1px) rotate(0.6deg);
    }
}

@keyframes cosmic-ship-wake {
    0% {
        opacity: .35;
        filter: blur(1.4px);
    }

    50% {
        opacity: .9;
        filter: blur(0.6px);
    }

    100% {
        opacity: .35;
        filter: blur(1.4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .cosmic-ship-wrap {
        transition: opacity .4s ease;
    }

    .home-landing .cosmic-ship-wrap.is-flying {
        transform: translate(-42%, -54%) scale(1.06);
    }

    .home-landing .cosmic-ship-wrap.is-flying::before,
    .home-landing .cosmic-ship-wrap.is-flying .cosmic-ship {
        animation: none;
    }
}

/* ── glowing stars ─────────────────────────────────── */
.home-landing .stars-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.home-landing .star {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--star-color);
    box-shadow: 0 0 4px 1px var(--star-color), 0 0 10px 2px var(--star-color);
    opacity: var(--min-opacity);
    animation: twinkle var(--dur) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes twinkle {

    0%,
    100% {
        opacity: var(--min-opacity);
        transform: scale(.75);
    }

    50% {
        opacity: var(--max-opacity);
        transform: scale(1.2);
    }
}

@media (prefers-reduced-motion:reduce) {
    .home-landing .star {
        animation: none;
        opacity: .5;
    }
}

/* ── nav ───────────────────────────────────────────── */
.home-landing .nav {
    position: sticky;
    top: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px var(--content-pad);
    max-width: 1480px;
    margin: 0 auto;
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}

.home-landing .nav.is-scrolled {
    background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border-color) 80%, transparent);
    padding-top: 12px;
    padding-bottom: 12px;
}

.home-landing .nav.is-scrolled .nav-right {
    padding: 6px 8px 6px 20px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.home-landing .nav-logo {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: opacity .2s ease, transform .2s ease;
}

.home-landing .nav-logo:hover {
    opacity: .92;
    transform: translateY(-1px);
}

.home-landing .nav-logo .i {
    font-style: italic;
    color: var(--accent);
}

.home-landing .nav-logo .dot {
    color: var(--gold);
}

.home-landing .nav-links,
.home-landing .nav-actions {
    display: flex;
    gap: 36px;
    font-size: 14px;
    color: var(--text-dim);
    align-items: center;
}

.home-landing .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
}

.home-landing .nav-actions {
    flex: 0 0 auto;
    align-items: center;
}

.home-landing .nav-links a,
.home-landing .nav-actions a:not(.nav-cta) {
    position: relative;
    transition: color .2s ease;
    white-space: nowrap;
}

.home-landing .nav-links a::after,
.home-landing .nav-actions a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1.5px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.home-landing .nav-links a:hover,
.home-landing .nav-actions a:not(.nav-cta):hover {
    color: var(--text-primary);
}

.home-landing .nav-links a:hover::after,
.home-landing .nav-actions a:not(.nav-cta):hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.home-landing .nav-links a:focus-visible::after,
.home-landing .nav-actions a:not(.nav-cta):focus-visible::after {
    transform: scaleX(1);
}

.home-landing .nav-cta {
    padding: 9px 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--gold) 70%, var(--accent)));
    color: #17131A !important;
    font-weight: 700;
    font-size: 13.5px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}

.home-landing .nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 42%, transparent);
    color: #17131A !important;
}

.home-landing .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
    cursor: pointer;
}

.home-landing .nav-toggle span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: var(--text-primary);
    transition: transform .2s ease, opacity .2s ease;
}

.home-landing .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.home-landing .nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.home-landing .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.home-landing .nav-right {
    display: flex;
    align-items: center;
    gap: 36px;
}

@media (max-width:760px) {
    .home-landing .nav {
        flex-wrap: wrap;
        gap: 0;
        padding: 16px 24px;
    }

    .home-landing .nav-toggle {
        display: flex;
    }

    .home-landing .nav-right {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding-top: 18px;
        margin-top: 14px;
        border-top: 1px solid var(--border-color);
    }

    .home-landing .nav-right.is-open {
        display: flex;
    }

    .home-landing .nav-links,
    .home-landing .nav-actions {
        flex-direction: column;
        gap: 14px;
    }

    .home-landing .nav-cta {
        text-align: center;
    }
}

/* ── hero ──────────────────────────────────────────── */
.home-landing .hero {
    position: relative;
    z-index: 2;
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 80px) var(--content-pad) clamp(72px, 8vw, 110px);
    min-height: min(92vh, 960px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-landing .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
    margin-bottom: clamp(56px, 7vw, 88px);
    position: relative;
    isolation: isolate;
}

/* Wireframe heart — sits in the valley between copy and mockup, not
   behind either column exclusively. Screen blend keeps the glow visible
   without washing out the headline. */
.home-landing .hero-grid-heart {
    position: absolute;
    left: 45%;
    top: 44%;
    transform: translate(-50%, -50%);
    width: min(620px, 50vw);
    height: auto;
    z-index: 0;
    pointer-events: none;
    opacity: .88;
    mix-blend-mode: screen;
    filter:
        drop-shadow(0 0 48px color-mix(in srgb, var(--accent) 28%, transparent)) drop-shadow(0 0 80px color-mix(in srgb, var(--purple) 18%, transparent));
    -webkit-mask-image: radial-gradient(ellipse 70% 72% at 58% 50%, black 10%, transparent 68%);
    mask-image: radial-gradient(ellipse 70% 72% at 58% 50%, black 10%, transparent 68%);
    transition: opacity .35s ease;
    transform-origin: 52% 62%;
    animation: hero-heart-beat 2.2s ease-in-out infinite;
}

/* Lub–dub, then a long diastole (~27 bpm visually so it reads calm
   on the hero). S1/S2 stay close together; only the rest lengthens. */
@keyframes hero-heart-beat {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1, 1);
        filter:
            drop-shadow(0 0 48px color-mix(in srgb, var(--accent) 28%, transparent)) drop-shadow(0 0 80px color-mix(in srgb, var(--purple) 18%, transparent));
    }

    4% {
        transform: translate(-50%, -50%) scale(1.085, 1.045);
        filter:
            drop-shadow(0 0 64px color-mix(in srgb, var(--accent) 48%, transparent)) drop-shadow(0 0 110px color-mix(in srgb, var(--purple) 32%, transparent));
    }

    8% {
        transform: translate(-50%, -50%) scale(0.985, 0.97);
        filter:
            drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 22%, transparent)) drop-shadow(0 0 70px color-mix(in srgb, var(--purple) 14%, transparent));
    }

    12% {
        transform: translate(-50%, -50%) scale(1.045, 1.025);
        filter:
            drop-shadow(0 0 56px color-mix(in srgb, var(--accent) 38%, transparent)) drop-shadow(0 0 96px color-mix(in srgb, var(--purple) 24%, transparent));
    }

    18%,
    99.9% {
        transform: translate(-50%, -50%) scale(1, 1);
        filter:
            drop-shadow(0 0 48px color-mix(in srgb, var(--accent) 28%, transparent)) drop-shadow(0 0 80px color-mix(in srgb, var(--purple) 18%, transparent));
    }
}


/* Fades out past the hero, same is-scrolled trigger used for the fixed
   ambient-heart/cosmic-streak below — this one scrolls with the grid
   rather than being pinned, but should still clear out of the way once
   the visitor moves on from the hero instead of lingering in the preview
   section underneath. */
.home-landing.is-scrolled .hero-grid-heart {
    opacity: 0;
    animation-play-state: paused;
}

.home-landing .hero-copy,
.home-landing .hero-showcase {
    position: relative;
    z-index: 1;
}

.home-landing .hero-copy {
    position: relative;
    text-align: left;
    max-width: 580px;
}

.home-landing .hero-copy::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -40px;
    width: min(420px, 80vw);
    height: 320px;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.home-landing .hero-kicker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
    animation: fadeUp .6s ease both;
}

.home-landing .home-tagline-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.home-landing .home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    animation: none;
    padding: 8px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent);
}

.home-landing .home-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: eyebrowPulse 2.5s ease-in-out infinite;
}

@keyframes eyebrowPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.85);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .home-eyebrow::before {
        animation: none;
    }
}

.home-landing .hero-title {
    font-family: var(--font-display);
    font-size: clamp(44px, 6vw, 72px);
    line-height: 1.06;
    font-weight: 600;
    margin: 0 0 28px;
    letter-spacing: -0.035em;
    animation: fadeUp .6s ease .05s both;
}

.home-landing .hero-word {
    display: inline;
}

.home-landing .hero-word--accent {
    color: var(--accent);
}

.home-landing .hero-word--gold {
    color: var(--gold);
}

.home-landing .hero-word--shimmer {
    background: linear-gradient(135deg, var(--text-primary) 0%, color-mix(in srgb, var(--accent) 65%, var(--text-primary)) 45%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width:640px) {
    .home-landing .hero-word {
        display: block;
    }
}

.home-landing .hero-sub {
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.7;
    color: var(--text-tertiary);
    max-width: 540px;
    margin: 0;
    animation: fadeUp .6s ease .1s both;
}

.home-landing .hero-sub-line {
    display: block;
}

.home-landing .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 40px;
    animation: fadeUp .6s ease .15s both;
}

.home-landing .home-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 36px;
    animation: fadeUp .6s ease .2s both;
}

.home-landing .home-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 68%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    color: #A3A9B3;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.home-landing .home-trust-pill svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: #8E94A1;
}

.home-landing .home-trust-pill--accent {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border-color));
    color: #D7DCE6;
}

/* ── hero product showcase ─────────────────────────── */
.home-landing .hero-showcase {
    position: relative;
    animation: fadeUp .7s ease .12s both;
    min-height: 340px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 16px;
    padding-right: 0;
    margin-bottom: clamp(20px, 2.5vw, 36px);
}

.home-landing .hero-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(680px, 95%);
    height: min(680px, 95%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    pointer-events: none;
    z-index: 0;
    opacity: .45;
}

.home-landing .hero-orbit::before {
    content: '';
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--purple) 25%, transparent);
    animation: orbitSpin 40s linear infinite;
}

.home-landing .hero-orbit::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 50%, transparent);
    animation: orbitSpin 40s linear infinite;
    transform-origin: 50% calc(min(340px, 47.5%) + 3px);
}

@keyframes orbitSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .home-landing .hero-orbit::before,
    .home-landing .hero-orbit::after {
        animation: none;
    }
}

/* Heart sits behind the mockup, offset so it reads around the frame — not
   buried under an opaque screenshot. The fixed .ambient-heart stays for
   scroll/atmosphere; this layer is hero-local and sized to the column. */
.home-landing .hero-showcase-ambient {
    position: absolute;
    inset: -8% -14% -6% 10%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
    background: transparent;
}

.home-landing .hero-showcase-heart {
    position: absolute;
    top: -30%;
    left: -38%;
    width: min(520px, 110%);
    height: 560px;
    opacity: .9;
    background: transparent;
    background-color: transparent;
}

.home-landing .hero-device {
    position: relative;
    z-index: 1;
    width: min(100%, 660px);
    max-width: 92%;
    margin-left: auto;
    margin-right: 0;
    border-radius: 22px;
    padding: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 38%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color));
    box-shadow:
        0 40px 100px rgba(0, 0, 0, .5),
        0 0 0 1px color-mix(in srgb, #fff 8%, transparent) inset,
        0 0 100px color-mix(in srgb, var(--accent) 14%, transparent),
        0 0 60px color-mix(in srgb, var(--purple) 8%, transparent);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    transform: perspective(1400px) rotateY(-5deg) rotateX(3deg);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}

.home-landing .hero-showcase:hover .hero-device {
    transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-6px);
    box-shadow:
        0 48px 120px rgba(0, 0, 0, .55),
        0 0 0 1px color-mix(in srgb, #fff 10%, transparent) inset,
        0 0 120px color-mix(in srgb, var(--accent) 18%, transparent),
        0 0 80px color-mix(in srgb, var(--purple) 12%, transparent);
}

.home-landing .hero-device-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 12px;
}

.home-landing .hero-device-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-color);
}

.home-landing .hero-device-dot:nth-child(1) {
    background: #E27288;
}

.home-landing .hero-device-dot:nth-child(2) {
    background: #DCAE57;
}

.home-landing .hero-device-dot:nth-child(3) {
    background: #6BA3D6;
}

.home-landing .hero-device-url {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-dim);
    letter-spacing: 0.04em;
}

.home-landing .hero-device-screen {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1800 / 1157;
    background: var(--bg-primary);
}

.home-landing .hero-device-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.home-landing .hero-device-glow {
    position: absolute;
    inset: 20% -10% -20%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%);
    pointer-events: none;
    z-index: -1;
    filter: blur(24px);
}

.home-landing .hero-float-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: heroFloatCard 4s ease-in-out infinite;
    z-index: 2;
}

.home-landing .hero-float-card--stats {
    left: 84px;
    bottom: 36px;
    animation-delay: 0s;
}

.home-landing .hero-float-card--badge {
    right: 4%;
    top: 8%;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    animation-delay: -2s;
}

.home-landing .hero-float-num {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
}

.home-landing .hero-float-icon {
    font-size: 22px;
    line-height: 1;
}

.home-landing .hero-float-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

@keyframes heroFloatCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@media (max-width:1024px) {
    .home-landing .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .home-landing .hero-grid-heart {
        left: 42%;
        top: 58%;
        width: min(420px, 72vw);
        opacity: .55;
    }

    .home-landing .hero-copy {
        max-width: none;
        text-align: center;
    }

    .home-landing .hero-kicker {
        align-items: center;
    }

    .home-landing .hero-sub {
        margin-left: auto;
        margin-right: auto;
    }

    .home-landing .hero-actions,
    .home-landing .home-trust-row {
        justify-content: center;
    }

    .home-landing .hero-showcase {
        max-width: 720px;
        margin: 0 auto;
        padding-right: 0;
        justify-content: center;
    }

    .home-landing .hero-showcase-ambient {
        inset: -6% -8% -4% -8%;
    }

    .home-landing .hero-showcase-heart {
        top: -12%;
        left: -10%;
        width: min(520px, 100%);
    }

    .home-landing .hero-device {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        transform: none;
    }

    .home-landing .hero-showcase:hover .hero-device {
        transform: translateY(-4px);
    }
}

@media (max-width:640px) {
    .home-landing .hero {
        padding: 40px 24px 64px;
        min-height: auto;
    }

    .home-landing .hero-grid-heart {
        display: none;
    }

    .home-landing .home-trust-row {
        justify-content: center;
    }

    .home-landing .hero-orbit {
        display: none;
    }

    .home-landing .hero-float-card--stats {
        left: 8px;
        bottom: 16px;
    }

    .home-landing .hero-float-card--badge {
        right: 8px;
        top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .hero-float-card {
        animation: none;
    }

    .home-landing .hero-grid-heart {
        animation: none;
        transform: translate(-50%, -50%);
    }

    .home-landing .hero-device,
    .home-landing .hero-showcase:hover .hero-device {
        transform: none;
    }
}

.home-landing .hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.home-landing .hero-btn svg {
    width: 16px;
    height: 16px;
}

.home-landing .hero-btn--primary {
    background: linear-gradient(90deg, var(--accent), var(--gold));
    color: #17131A;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}

.home-landing .hero-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent);
    color: #17131A;
}

.home-landing .hero-btn--secondary {
    background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.home-landing .hero-btn--secondary:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color));
    transform: translateY(-2px);
    color: var(--text-primary);
}

.home-landing .hero-btn--ghost {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text-primary) 25%, var(--border-color));
    color: var(--text-primary);
}

.home-landing .hero-btn--ghost:hover {
    border-color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {

    .home-landing .phase:hover .phase-card,
    .home-landing .feature:hover {
        transform: none;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ── phase panel: no more glass card wrapper — the six ── */
/* flip cards float directly on the page background now. */
.home-landing .home-phase-panel {
    position: relative;
    margin-top: clamp(48px, 6vw, 72px);
}

/* ── main content sections below hero ─────────────── */
.home-landing .home-body {
    position: relative;
    z-index: 2;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 var(--content-pad);
}

@media (max-width:640px) {
    .home-landing .stats-strip {
        padding: 0 24px;
        margin-bottom: 48px;
    }

    .home-landing .home-body {
        padding: 0 24px;
    }
}

.home-landing .home-body>.section-heading:first-child {
    margin-top: 0;
}

/* ── phase bento cards ─────────────────────────────── */
.home-landing .phase-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 22px);
    margin-bottom: clamp(52px, 5vw, 72px);
}

.home-landing .phase-row--new {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: clamp(64px, 7vw, 90px);
}

@media (min-width: 901px) {
    .home-landing .phase-row--new {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-landing .phase-row--new .phase:first-child {
        grid-column: 2;
    }
}

.home-landing .phase-connector {
    display: none;
}

.home-landing .phase-connector::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--gold), var(--purple), var(--blue));
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
    transition: width 1.6s cubic-bezier(.16, 1, .3, 1);
}

.home-landing .phase-connector.is-filled::after {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .phase-connector::after {
        transition: none;
    }
}

@media (max-width:900px) {
    .home-landing .phase-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .home-landing .phase-connector {
        display: none;
    }
}

@media (max-width:560px) {
    .home-landing .phase-row {
        grid-template-columns: 1fr;
    }

    .home-landing .phase-card-media img {
        height: 168px;
    }
}

.home-landing .phase {
    position: relative;
    z-index: 1;
    animation: fadeUp .6s ease both;
}

.home-landing .phase:nth-child(2) {
    animation-delay: .1s;
}

.home-landing .phase:nth-child(3) {
    animation-delay: .2s;
}

.home-landing .phase:nth-child(4) {
    animation-delay: .3s;
}

.home-landing .phase:nth-child(5) {
    animation-delay: .4s;
}

.home-landing .phase-row--new .phase:nth-child(1) {
    animation-delay: .45s;
}

.home-landing .phase-row--new .phase:nth-child(2) {
    animation-delay: .55s;
}

/* ── floating flip cards ───────────────────────────── */
.home-landing .phase-flip {
    outline: none;
    border-radius: 18px;
    perspective: 1400px;
    perspective-origin: center;
    animation-name: phaseEnter, phaseFloat;
    animation-duration: .6s, 5.4s;
    animation-timing-function: ease, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}

.home-landing .phase-row .phase-flip:nth-of-type(1) {
    animation-delay: 0s, 0s;
}

.home-landing .phase-row .phase-flip:nth-of-type(2) {
    animation-delay: .1s, -1.3s;
}

.home-landing .phase-row .phase-flip:nth-of-type(3) {
    animation-delay: .2s, -2.6s;
}

.home-landing .phase-row .phase-flip:nth-of-type(4) {
    animation-delay: .3s, -3.9s;
}

.home-landing .phase-row--new .phase-flip:nth-of-type(1) {
    animation-delay: .45s, -.9s;
}

.home-landing .phase-row--new .phase-flip:nth-of-type(2) {
    animation-delay: .55s, -2.1s;
}

@keyframes phaseEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes phaseFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.home-landing .phase-flip:hover,
.home-landing .phase-flip:focus-within,
.home-landing .phase-flip.is-flipped {
    z-index: 4;
    animation-play-state: running, paused;
}

.home-landing .phase-flip-card {
    position: relative;
    height: clamp(230px, 25vw, 272px);
    border-radius: 18px;
    cursor: pointer;
    outline: none;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.4, .15, .2, 1), box-shadow .25s ease;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .28),
        0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}

.home-landing .phase-flip.is-flipped .phase-flip-card,
.home-landing .phase-flip-card:focus-visible {
    transform: rotateY(180deg);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, .34),
        0 0 28px color-mix(in srgb, currentColor 16%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .home-landing .phase-flip:hover .phase-flip-card {
        transform: rotateY(180deg);
        box-shadow:
            0 18px 44px rgba(0, 0, 0, .34),
            0 0 28px color-mix(in srgb, currentColor 16%, transparent);
    }
}

.home-landing .phase-flip-card:focus-visible {
    box-shadow:
        0 18px 44px rgba(0, 0, 0, .34),
        0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}

.home-landing .phase-flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid color-mix(in srgb, currentColor 22%, var(--border-color));
}

.home-landing .phase-flip-face--front {
    transform: rotateY(0deg);
    background: color-mix(in srgb, currentColor 10%, #061018);
}

.home-landing .phase-flip-media {
    position: absolute;
    inset: 0;
}

.home-landing .phase-flip-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-landing .phase-flip-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, currentColor 10%, transparent) 0%, transparent 38%, rgba(4, 8, 14, .78) 100%);
    pointer-events: none;
}

.home-landing .phase-flip-front-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: clamp(14px, 1.8vw, 18px) clamp(14px, 1.8vw, 18px) 0;
}

.home-landing .phase-flip-front-body {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(16px, 2vw, 20px);
}

.home-landing .phase-flip-front-body .phase-title {
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.home-landing .phase-flip-face--back {
    justify-content: center;
    background:
        linear-gradient(165deg, color-mix(in srgb, currentColor 16%, transparent), transparent 42%),
        color-mix(in srgb, var(--bg-primary) 94%, transparent);
    padding: clamp(22px, 2.4vw, 28px) clamp(20px, 2.2vw, 26px);
    transform: rotateY(180deg);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

.home-landing .phase-flip-face--back .phase-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
}

@media (max-width:900px) {
    .home-landing .phase-flip-card {
        height: 240px;
    }
}

@media (max-width:560px) {
    .home-landing .phase-flip-card {
        height: 250px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .phase-flip {
        animation: none;
    }

    .home-landing .phase-flip-card {
        transition: none;
    }
}

.home-landing .phase-card {
    height: 100%;
    padding: clamp(22px, 2.5vw, 28px) clamp(20px, 2vw, 26px) clamp(24px, 2.5vw, 30px);
    border-radius: 18px;
    text-align: left;
    background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 18%, var(--border-color));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.home-landing .phase-card--visual {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.home-landing .phase-card-media {
    flex: none;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 10%, #061018);
}

.home-landing .phase-card-media img {
    display: block;
    width: 100%;
    height: 148px;
    object-fit: cover;
    object-position: center;
}

.home-landing .phase-card--visual .phase-card-body {
    padding: clamp(16px, 2vw, 20px) clamp(20px, 2vw, 26px) clamp(24px, 2.5vw, 30px);
}

.home-landing .phase:hover .phase-card {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, currentColor 35%, var(--border-color));
    background: color-mix(in srgb, var(--bg-primary) 75%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
        0 16px 40px rgba(0, 0, 0, .22),
        0 0 32px color-mix(in srgb, currentColor 12%, transparent);
}

.home-landing .phase-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.home-landing .phase-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 45%, var(--border-color));
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: currentColor;
}

.home-landing .phase-new {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border-color));
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    transition: transform .25s ease, box-shadow .25s ease, letter-spacing .25s ease, filter .25s ease;
    overflow: hidden;
}

@keyframes feature-new-badge {
    0% {
        transform: translateY(0) scale(.96);
        filter: saturate(.8);
        box-shadow: 0 0 0 rgba(255, 191, 80, 0);
    }

    20% {
        transform: translateY(-5px) scale(1.12) rotate(-1deg);
        filter: saturate(1.25);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent), 0 10px 18px color-mix(in srgb, var(--gold) 18%, transparent);
    }

    45% {
        transform: translateY(-10px) scale(1.18) rotate(1deg);
        filter: saturate(1.4);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent), 0 12px 22px color-mix(in srgb, var(--gold) 26%, transparent), 0 0 18px color-mix(in srgb, var(--gold) 36%, transparent);
    }

    72% {
        transform: translateY(-3px) scale(1.06) rotate(0deg);
        filter: saturate(1.2);
    }

    100% {
        transform: translateY(-2px) scale(1.03);
        filter: saturate(1);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent), 0 10px 18px color-mix(in srgb, var(--gold) 18%, transparent);
    }
}

@keyframes feature-new-badge-shimmer {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        transform: translateX(140%);
        opacity: 0;
    }
}

.home-landing .feature--featured:hover .phase-new {
    animation: feature-new-badge .7s cubic-bezier(.2, .8, .2, 1) both;
    letter-spacing: 0.12em;
}

.home-landing .feature--featured:hover .phase-new::after {
    content: "";
    position: absolute;
    inset: -25% -40%;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.7) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: feature-new-badge-shimmer .85s ease-out forwards;
}

.home-landing .phase-icon {
    margin-left: auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, color-mix(in srgb, currentColor 22%, transparent), color-mix(in srgb, currentColor 6%, transparent));
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, currentColor 18%, transparent);
}

.home-landing .phase-icon svg {
    width: 22px;
    height: 22px;
}

.home-landing .phase:nth-child(2) {
    color: var(--purple);
}

.home-landing .phase:nth-child(3) {
    color: var(--gold);
}

.home-landing .phase:nth-child(4) {
    color: var(--accent);
}

.home-landing .phase:nth-child(5) {
    color: var(--blue);
}

.home-landing .phase--diagnostic {
    color: var(--gold);
}

.home-landing .phase--physiology {
    color: var(--accent);
}

.home-landing .phase-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.home-landing .phase-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-tertiary);
    margin: 0;
    max-width: none;
}

/* ── phase CTA line ────────────────────────────────── */
.home-landing .phase-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 0;
    padding: 20px 26px;
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-card)), color-mix(in srgb, var(--gold) 9%, var(--bg-card)));
    border: 1px solid var(--border-color);
    animation: fadeUp .6s ease .5s both;
}

.home-landing .phase-cta-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}

.home-landing .phase-cta-icon svg {
    width: 22px;
    height: 22px;
}

.home-landing .phase-cta p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-primary);
}

.home-landing .phase-cta strong {
    color: var(--accent);
}

/* ── community card (avatar stack variant) ─────────── */
.home-landing .community-cta {
    gap: 20px;
    margin-top: clamp(28px, 3vw, 40px);
    margin-bottom: clamp(8px, 1.5vw, 16px);
    padding: clamp(22px, 2.5vw, 28px) clamp(26px, 3vw, 34px);
    border-radius: 22px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--purple) 8%, transparent) 48%, color-mix(in srgb, var(--text-primary) 5%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-color));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
        0 18px 48px rgba(0, 0, 0, .22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.home-landing .community-cta:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border-color));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent),
        0 22px 56px color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .community-cta:hover {
        transform: none;
    }

    .home-landing .ai-spotlight-points li:hover {
        transform: none;
    }
}

.home-landing .community-text {
    flex: 1 1 auto;
    min-width: 0;
}

.home-landing .community-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.home-landing .community-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-tertiary);
}

.home-landing .community-cta-text.community-join {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: none;
    padding: 10px 16px 10px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    color: #17131A;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent);
}

.home-landing .community-join svg {
    width: 15px;
    height: 15px;
}

.home-landing .avatar-stack {
    flex: none;
    display: flex;
}

.home-landing .avatar-dot {
    width: 52px;
    height: 52px;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    margin-left: -14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    background: var(--bg-tertiary);
}

.home-landing .community-cta:hover .avatar-dot:nth-child(2) {
    transform: translateX(3px);
}

.home-landing .community-cta:hover .avatar-dot:nth-child(3) {
    transform: translateX(6px);
}

.home-landing .community-cta:hover .avatar-dot:nth-child(4) {
    transform: translateX(9px);
}

.home-landing .community-cta:hover .avatar-dot:nth-child(5) {
    transform: translateX(12px);
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .community-cta:hover .avatar-dot {
        transform: none;
    }
}

.home-landing .avatar-dot svg {
    width: 18px;
    height: 18px;
}

.home-landing .avatar-dot:first-child {
    margin-left: 0;
}

.home-landing .community-cta-text:not(.community-join) {
    flex: none;
    max-width: 130px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-tertiary);
}

.home-landing .community-arrow {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    color: var(--text-tertiary);
}

.home-landing .community-arrow svg {
    width: 16px;
    height: 16px;
}

@media (max-width:700px) {
    .home-landing .phase-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-landing .community-cta-text {
        max-width: none;
    }

    .home-landing .community-arrow {
        display: none;
    }
}

/* ── stats strip ───────────────────────────────────── */
.home-landing .stats-strip {
    position: relative;
    z-index: 2;
    max-width: 1480px;
    margin: clamp(48px, 6vw, 80px) auto var(--section-gap);
    padding: 0 var(--content-pad);
}

.home-landing .stats-kicker {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 22px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-landing .stats-kicker::before,
.home-landing .stats-kicker::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 45%, var(--border-color)), transparent);
}

.home-landing .stats-kicker span {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--border-color));
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    color: var(--gold);
}

.home-landing .home-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 1.6vw, 18px);
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    position: relative;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.home-landing .home-stats-grid::before {
    display: none;
}

.home-landing .stat {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: clamp(22px, 2.4vw, 28px) clamp(18px, 2vw, 24px);
    border: 1px solid color-mix(in srgb, var(--stat-accent, var(--border-color)) 32%, var(--border-color));
    border-radius: 20px;
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--stat-accent, var(--text-primary)) 10%, transparent), color-mix(in srgb, var(--bg-card) 72%, transparent) 42%, color-mix(in srgb, var(--bg-secondary) 40%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 10px 28px rgba(0, 0, 0, .18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.home-landing .stat:nth-child(1) {
    --stat-accent: var(--accent);
}

.home-landing .stat:nth-child(2) {
    --stat-accent: var(--gold);
}

.home-landing .stat:nth-child(3) {
    --stat-accent: var(--purple);
}

.home-landing .stat:nth-child(4) {
    --stat-accent: var(--blue);
}

.home-landing .stat:hover {
    transform: translateY(-4px);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--stat-accent, var(--accent)) 16%, transparent), color-mix(in srgb, var(--bg-card) 88%, transparent) 46%, color-mix(in srgb, var(--bg-secondary) 50%, transparent));
    border-color: color-mix(in srgb, var(--stat-accent, var(--accent)) 55%, var(--border-color));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent),
        0 18px 40px rgba(0, 0, 0, .26),
        0 0 32px color-mix(in srgb, var(--stat-accent, var(--accent)) 16%, transparent);
}

.home-landing .stat:last-child {
    border-right: 1px solid color-mix(in srgb, var(--stat-accent, var(--border-color)) 32%, var(--border-color));
}

@media (max-width:900px) {
    .home-landing .home-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:560px) {
    .home-landing .home-stats-grid {
        grid-template-columns: 1fr;
    }

    .home-landing .stat {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .home-landing .stat:last-child {
        border-bottom: none;
    }
}

.home-landing .stat-icon {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, currentColor 14%, transparent);
}

.home-landing .stat-icon svg {
    width: 22px;
    height: 22px;
}

.home-landing .stat-num {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.home-landing .home-stat-label {
    font-size: 12.5px;
    color: var(--text-tertiary);
    margin-top: 4px;
    line-height: 1.45;
}

/* ── features section ─────────────────────────────── */
.home-landing .section-heading {
    text-align: center;
    margin: var(--section-gap) 0 clamp(40px, 4.5vw, 56px);
    position: relative;
}

.home-landing .section-heading[data-section]::before {
    content: attr(data-section);
    display: block;
    margin: 0 auto 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: color-mix(in srgb, var(--gold) 80%, var(--text-tertiary));
}

.home-landing .section-heading .home-eyebrow {
    margin-bottom: 18px;
}

.home-landing .section-heading h2 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 600;
    position: relative;
    display: block;
    padding-bottom: 0;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.home-landing .section-heading h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    margin: 18px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}

.home-landing .section-subheading {
    margin-top: 16px;
    margin-bottom: 0;
    color: var(--text-tertiary);
    font-size: clamp(15px, 1.5vw, 17px);
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

/* ── product preview (screenshot showcase) ───────────
   Real screenshots of the logged-in app (archive, mastery,
   exam, clinical), tabbed so a visitor can see the actual
   product before signing up instead of taking marketing
   copy on faith. Static — no motion — so it's cheap to
   render and doesn't compete with the auth modal for
   "heaviest thing on the page". */
.home-landing .app-preview {
    max-width: 1180px;
    margin: 0 auto var(--section-gap);
    padding: 0;
}

.home-landing .app-preview-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    padding: 6px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.home-landing .app-preview-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}

.home-landing .app-preview-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.home-landing .app-preview-tab:hover {
    border-color: transparent;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.home-landing .app-preview-tab.is-active {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--gold) 28%, transparent);
    color: var(--text-primary);
    box-shadow: 0 0 20px color-mix(in srgb, var(--gold) 12%, transparent);
}

.home-landing .app-preview-stage {
    position: relative;
    padding: 12px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--bg-secondary) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 16%, var(--border-color));
    box-shadow:
        0 28px 80px rgba(0, 0, 0, .38),
        0 0 80px color-mix(in srgb, var(--accent) 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    transform: perspective(1600px) rotateX(2deg);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}

.home-landing .app-preview:hover .app-preview-stage {
    transform: perspective(1600px) rotateX(0deg) translateY(-6px);
    box-shadow:
        0 36px 90px rgba(0, 0, 0, .44),
        0 0 90px color-mix(in srgb, var(--accent) 14%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
}

.home-landing .app-preview-stage::before {
    content: '';
    position: absolute;
    inset: -18% -8% auto -8%;
    height: 42%;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.home-landing .app-preview-chrome {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 8px 12px;
}

.home-landing .app-preview-dots {
    display: flex;
    gap: 6px;
}

.home-landing .app-preview-url {
    flex: 1;
    max-width: 280px;
    margin: 0 auto;
    padding: 5px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-landing .app-preview-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
}

.home-landing .app-preview-dot:nth-child(1) {
    background: #E27288;
}

.home-landing .app-preview-dot:nth-child(2) {
    background: #DCAE57;
}

.home-landing .app-preview-dot:nth-child(3) {
    background: #6BA3D6;
}

.home-landing .app-preview-images {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1800 / 1157;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
}

.home-landing .app-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transform: scale(1.025);
    pointer-events: none;
    transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.home-landing .app-preview-img.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .app-preview-img {
        transition: opacity .25s ease;
        transform: none;
    }

    .home-landing .app-preview-stage,
    .home-landing .app-preview:hover .app-preview-stage {
        transform: none;
        transition: none;
    }
}

.home-landing .app-preview-caption {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 22px;
    min-height: 44px;
}

.home-landing .app-preview-caption span {
    display: none;
    padding: 10px 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--border-color));
    color: var(--text-secondary);
    font-size: 14px;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.home-landing .app-preview-caption span.is-active {
    display: inline-flex;
}

@media (max-width: 640px) {
    .home-landing .app-preview-tabs {
        width: 100%;
        border-radius: 22px;
        justify-content: stretch;
    }

    .home-landing .app-preview-tab span,
    .home-landing .app-preview-tab {
        font-size: 13px;
        padding: 8px 14px;
    }

    .home-landing .app-preview-url {
        display: none;
    }

    .home-landing .app-preview-chrome {
        justify-content: flex-start;
    }
}

/* ── AI patient spotlight ─────────────────────────────
   The flagship differentiator gets its own two-column beat
   instead of being just another feature-grid card. The chat
   thread on the right is a hand-built, static mockup — not a
   live screenshot — but it mirrors the real UI honestly: emoji
   patient avatars (see templates/clinical/ai_patient.html),
   same bubble/tag shapes. No live API call on a marketing page. */
.home-landing .ai-spotlight {
    position: relative;
    max-width: 1080px;
    margin: 0 auto var(--section-gap);
    padding: clamp(36px, 4vw, 52px);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--purple) 28%, var(--border-color));
    box-shadow:
        0 24px 64px rgba(0, 0, 0, .3),
        0 0 80px color-mix(in srgb, var(--purple) 8%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

/* Nebula photo clipped to the card. mix-blend-mode: screen keeps the
   image's black sky transparent so the fixed cosmic-blackhole backdrop
   behind the page still shows through when you scroll to this section. */
.home-landing .ai-spotlight-nebula {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
    transition: opacity 1.2s ease;
}

.home-landing .ai-spotlight-nebula.is-visible {
    opacity: .65;
}

/* Purple tint sits above the nebula so copy stays legible. */
.home-landing .ai-spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--purple) 8%, transparent), color-mix(in srgb, var(--text-primary) 4%, transparent));
    pointer-events: none;
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .ai-spotlight-nebula {
        transition: opacity .4s ease;
    }
}

@media (max-width: 860px) {
    .home-landing .ai-spotlight {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 28px 24px;
    }

    .home-landing .ai-spotlight-desc {
        max-width: none;
    }
}

.home-landing .ai-spotlight-content {
    position: relative;
    z-index: 1;
}

/* Peeks out of the bottom-left corner of the whole section (sibling of
   both columns, not nested in .ai-spotlight-content) so it always has
   guaranteed room — it used to sit in the leftover space below the text
   column, sized by measuring that gap at runtime, but the text column
   is frequently taller than the chat mockup, so that gap was often
   zero/negative and the image was hidden on every normal viewport. A
   fixed clamp() size anchored to the section itself needs no
   measurement and can't disappear like that. Hidden by default —
   home.js toggles .is-visible via an IntersectionObserver on this
   section so it fades in on the way down and fades back out once
   scrolled past, the same "reveal, then let go" treatment as
   .ambient-heart in the hero, just section-local instead of a single
   global scroll threshold. */
.home-landing .ai-spotlight-mascot {
    position: relative;
    z-index: 1;
    justify-self: center;
    align-self: end;
    width: auto;
    max-width: 100%;
    height: clamp(280px, 35vw, 460px);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
    pointer-events: none;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .45));
}

.home-landing .ai-spotlight-mascot.is-visible {
    opacity: 1;
    transform: translateY(0);
    animation: mascotBreathe 5s ease-in-out 1s infinite;
}

@keyframes mascotBreathe {

    0%,
    100% {
        transform: translateY(0);
        filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .45));
    }

    50% {
        transform: translateY(-10px);
        filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .5)) drop-shadow(0 0 28px color-mix(in srgb, var(--purple) 35%, transparent));
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-landing .ai-spotlight-mascot {
        transition: opacity .3s ease;
        transform: none;
    }

    .home-landing .ai-spotlight-mascot.is-visible {
        animation: none;
    }
}

@media (max-width: 860px) {
    .home-landing .ai-spotlight-mascot {
        display: none;
    }
}

.home-landing .ai-spotlight-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 18px;
}

.home-landing .ai-spotlight-badge::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5EE0A0;
    box-shadow: 0 0 10px #5EE0A0;
    animation: eyebrowPulse 1.8s ease-in-out infinite;
}

.home-landing .ai-spotlight-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.home-landing .ai-spotlight-title span {
    color: var(--accent);
}

.home-landing .ai-spotlight-desc {
    color: var(--text-tertiary);
    font-size: 15px;
    line-height: 1.65;
    max-width: 440px;
    margin: 0 0 32px;
}

.home-landing .ai-spotlight-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 0 34px;
}

.home-landing .ai-spotlight-points li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-primary) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.home-landing .ai-spotlight-points li:hover {
    transform: translateX(4px);
    border-color: color-mix(in srgb, var(--purple) 40%, var(--border-color));
    background: color-mix(in srgb, var(--bg-primary) 58%, transparent);
}

.home-landing .ai-spotlight-point-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-landing .ai-spotlight-point-icon svg {
    width: 18px;
    height: 18px;
}

.home-landing .ai-spotlight-points h5 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}

.home-landing .ai-spotlight-points p {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

.home-landing .ai-spotlight-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    color: #17131A;
    font-weight: 700;
    font-size: 14.5px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}

.home-landing .ai-spotlight-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent);
    color: #17131A;
}

.home-landing .ai-spotlight-cta svg {
    width: 16px;
    height: 16px;
}

/* ── Badges teaser (real badge data — same codes/icons/names
   as utils/badges.py and the profile page's badge grid, just a
   curated subset for the marketing page). Static emoji, no
   images to load, no animation loop — cheap by design. ────── */
.home-landing .badges-teaser {
    position: relative;
    max-width: 1080px;
    margin: 0 auto var(--section-gap);
    padding: clamp(36px, 4vw, 48px) clamp(22px, 3vw, 40px);
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 55%),
        color-mix(in srgb, var(--bg-card) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--border-color));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 20px 50px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.home-landing .badges-teaser::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 72px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 40%, transparent), transparent);
    pointer-events: none;
}

.home-landing .badges-teaser-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
}

.home-landing .badges-teaser-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 128px;
    text-align: center;
}

.home-landing .badges-teaser-icon {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 24%, transparent), color-mix(in srgb, var(--gold) 6%, transparent));
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border-color));
    box-shadow: inset 0 1px 1px color-mix(in srgb, #fff 25%, transparent), 0 0 24px color-mix(in srgb, var(--gold) 18%, transparent);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.home-landing .badges-teaser-icon::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 16%;
    width: 40%;
    height: 26%;
    border-radius: 50%;
    background: linear-gradient(160deg, color-mix(in srgb, #fff 45%, transparent), transparent 70%);
    filter: blur(2px);
    pointer-events: none;
}

.home-landing .badges-teaser-item:hover .badges-teaser-icon {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 1px color-mix(in srgb, #fff 30%, transparent), 0 0 32px color-mix(in srgb, var(--gold) 32%, transparent);
}

.home-landing .badges-teaser-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

@media (max-width: 560px) {
    .home-landing .badges-teaser-row {
        gap: 20px;
    }

    .home-landing .badges-teaser::before {
        display: none;
    }

    .home-landing .badges-teaser-item {
        width: 92px;
    }

    .home-landing .badges-teaser-icon {
        width: 62px;
        height: 62px;
        font-size: 26px;
    }
}

/* ── FAQ (native <details>/<summary> — no JS, free keyboard
   and screen-reader support, and one less thing competing for
   "heaviest element on the page"). ─────────────────────────── */
.home-landing .faq {
    max-width: 820px;
    margin: 0 auto var(--section-gap);
    padding: 10px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--bg-card) 45%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 18px 48px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: home-faq;
}

.home-landing .faq-item:first-child {
    border-top: none;
}

.home-landing .faq-item {
    border: 1px solid transparent;
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-card) 55%, transparent);
    padding: 0 18px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.home-landing .faq-item:hover {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border-color));
    background: color-mix(in srgb, var(--bg-card) 78%, transparent);
}

.home-landing .faq-item[open] {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border-color));
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}

.home-landing .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 2px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.home-landing .faq-item summary>span {
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-landing .faq-item summary>span::before {
    counter-increment: home-faq;
    content: counter(home-faq, decimal-leading-zero);
    flex: none;
    min-width: 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--gold);
    opacity: .85;
}

.home-landing .faq-item summary::-webkit-details-marker {
    display: none;
}

.home-landing .faq-item summary:hover {
    color: var(--accent);
}

.home-landing .faq-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform .2s ease, color .2s ease;
}

.home-landing .faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

.home-landing .faq-answer {
    padding: 0 2px 22px;
    max-width: 640px;
}

.home-landing .faq-answer p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-tertiary);
}

/* Smooth open/close, Chrome/Edge only for now (interpolate-size +
   ::details-content are new). Gated behind @supports so everywhere
   else just keeps the native instant <details> toggle this already
   had — no markup or JS change, nothing lost where it's unsupported. */
@supports (interpolate-size: allow-keywords) {
    .home-landing .faq-item {
        interpolate-size: allow-keywords;
    }

    .home-landing .faq-item::details-content {
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: height .3s cubic-bezier(.16, 1, .3, 1), opacity .25s ease;
    }

    .home-landing .faq-item[open]::details-content {
        height: auto;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    @supports (interpolate-size: allow-keywords) {
        .home-landing .faq-item::details-content {
            transition: none;
        }
    }
}

.home-landing .features {
    max-width: none;
    margin: 0 auto;
    padding: 0 0 var(--section-gap);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(16px, 2vw, 22px);
}

.home-landing .feature {
    grid-column: span 4;
}

.home-landing .feature--featured {
    grid-column: span 6;
}

@media (max-width:900px) {
    .home-landing .features {
        grid-template-columns: 1fr 1fr;
    }

    .home-landing .feature,
    .home-landing .feature--featured {
        grid-column: auto;
    }
}

@media (max-width:560px) {
    .home-landing .features {
        grid-template-columns: 1fr;
        padding: 0 0 70px;
    }
}

.home-landing .feature {
    position: relative;
    padding: clamp(26px, 2.8vw, 34px) clamp(22px, 2.4vw, 30px);
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 55%, transparent), color-mix(in srgb, var(--bg-secondary) 30%, transparent));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 8px 24px rgba(0, 0, 0, .18);
    overflow: hidden;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.home-landing .feature--featured {
    background: linear-gradient(160deg, color-mix(in srgb, var(--feature-accent, var(--gold)) 10%, transparent), color-mix(in srgb, var(--bg-card) 55%, transparent) 42%, color-mix(in srgb, var(--bg-secondary) 30%, transparent));
    min-height: 220px;
}

.home-landing .feature-card-top {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 10px;
}

.home-landing .feature::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, color-mix(in srgb, #fff 14%, transparent), transparent 45%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.home-landing .feature:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--feature-accent, var(--accent)) 40%, var(--border-color));
    background: linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 70%, transparent), color-mix(in srgb, var(--bg-secondary) 40%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 16px 40px rgba(0, 0, 0, .28);
}

.home-landing .feature--featured:hover {
    background: linear-gradient(160deg, color-mix(in srgb, var(--feature-accent, var(--gold)) 16%, transparent), color-mix(in srgb, var(--bg-card) 70%, transparent) 42%, color-mix(in srgb, var(--bg-secondary) 40%, transparent));
}

.home-landing .feature::after {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--feature-accent, var(--accent)), transparent);
    opacity: .55;
}

.home-landing .feature:nth-child(1) {
    --feature-accent: var(--accent);
}

.home-landing .feature:nth-child(2) {
    --feature-accent: var(--gold);
}

.home-landing .feature:nth-child(3) {
    --feature-accent: var(--purple);
}

.home-landing .feature:nth-child(4) {
    --feature-accent: var(--accent);
}

.home-landing .feature:nth-child(5) {
    --feature-accent: var(--purple);
}

.home-landing .feature:nth-child(6) {
    --feature-accent: var(--gold);
}

.home-landing .feature:nth-child(7) {
    --feature-accent: var(--gold);
}

.home-landing .feature:nth-child(8) {
    --feature-accent: var(--accent);
}

.home-landing .feature:hover .feature-icon {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 0 28px color-mix(in srgb, currentColor 28%, transparent);
}

.home-landing .feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, currentColor 16%, transparent);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}

.home-landing .feature-icon svg {
    width: 20px;
    height: 20px;
}

.home-landing .feature h4 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.home-landing .feature p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-tertiary);
    margin: 0;
}

/* ── scroll reveal ─────────────────────────────────── */
.home-landing .reveal-on-scroll {
    opacity: 1;
    transform: none;
}

.home-landing.js-ready .reveal-on-scroll:not(.is-revealed) {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.home-landing.js-ready .reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    .home-landing.js-ready .reveal-on-scroll:not(.is-revealed),
    .home-landing .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── final CTA banner ──────────────────────────────── */
.home-landing .home-final-cta {
    max-width: 960px;
    margin: 0 auto var(--section-gap);
    padding: 0;
}

.home-landing .home-final-cta-inner {
    position: relative;
    text-align: center;
    padding: clamp(56px, 6.5vw, 80px) clamp(28px, 4vw, 56px);
    border-radius: 32px;
    background:
        radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%),
        radial-gradient(ellipse at 85% 100%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 48%),
        color-mix(in srgb, var(--bg-card) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--border-color));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
        0 28px 70px rgba(0, 0, 0, .32);
    overflow: hidden;
}

.home-landing .home-final-cta-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.home-landing .home-final-cta-inner .home-eyebrow {
    margin-bottom: 22px;
}

/* Faint reprise of the hero's ambient heart, bookending the page at the
   last conversion moment instead of introducing a new visual motif. */
.home-landing .home-final-cta-inner::before {
    content: '';
    position: absolute;
    top: -18%;
    right: -6%;
    width: 320px;
    height: 320px;
    background: none;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.home-landing .home-final-cta-inner>* {
    position: relative;
    z-index: 1;
}

@media (max-width: 560px) {
    .home-landing .home-final-cta-inner::before {
        width: 220px;
        height: 220px;
        top: -10%;
        right: -12%;
    }
}

.home-landing .home-final-cta-inner h2 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0 0 14px;
}

.home-landing .home-final-cta-inner p {
    font-size: 16.5px;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto 32px;
    line-height: 1.65;
}

.home-landing .home-final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

@media (max-width:560px) {
    .home-landing .home-final-cta-inner {
        padding: 36px 24px;
    }

    .home-landing .home-final-cta-inner h2 {
        font-size: 26px;
    }
}

/* ── Auth modal (login / sign up) ─────────────────────────
     Same dark-scrim-plus-blur backdrop already used by the
     onboarding modal (.onb-overlay), so the "shadow effect on
     the background" matches the rest of the app instead of
     inventing a new pattern. */

/* home.js hangs #authModalOverlay off a dedicated
   .home-landing.auth-modal-portal wrapper appended directly to
   <body> (see home.js for why). That wrapper only exists to keep
   the modal's ".home-landing …" theme variables resolving — none
   of .home-landing's actual page-layout rules (100vw width,
   negative margins, position:relative, etc.) should apply to it,
   since it has no other content and sits after the footer in the
   DOM. */
.home-landing.auth-modal-portal {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    overflow: visible;
}

.home-landing .auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 9, 13, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: auth-modal-scrim-in .2s ease;
}

.home-landing .auth-modal-overlay[hidden] {
    display: none;
}

@keyframes auth-modal-scrim-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.home-landing .auth-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-radius: var(--radius-lg);
    animation: auth-modal-in .35s cubic-bezier(.19, 1, .22, 1);
}

@keyframes auth-modal-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.home-landing .auth-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.home-landing .auth-modal-close:hover {
    background: color-mix(in srgb, var(--text-primary) 18%, transparent);
    transform: scale(1.06);
}

.home-landing .auth-card--modal {
    margin: 0;
    width: 100%;
}

/* ── Glass card + no spinning ring ────────────────────────
   The login/sign-up cards used to inherit .auth-card's rotating
   conic-gradient ring (::before, 10s infinite animation + six
   stacked drop-shadow filters) — that's a full-viewport gradient
   being repainted every frame right under the user's cursor while
   they type, which is what made the modal feel heavy. Switched to
   a static frosted-glass look instead: no per-frame repaint, and
   it reads as more premium than the spinning border did.
   ::before/::after are the ring + its opaque seam-cover — both are
   removed since the card background is translucent now. */
.home-landing .auth-card--modal::before,
.home-landing .auth-card--modal::after {
    display: none;
}

.home-landing .auth-card--modal {
    background: color-mix(in srgb, var(--bg-secondary) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--navbar-gold) 22%, var(--border-color) 78%);
    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.home-landing .auth-modal-pane[hidden] {
    display: none;
}

.home-landing .auth-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.home-landing .captcha-group .cf-turnstile {
    display: flex;
    justify-content: center;
}

.home-landing .captcha-group input {
    letter-spacing: 0.04em;
}

@media (max-width: 560px) {
    .home-landing .auth-modal-dialog {
        max-width: 100%;
    }

    .home-landing .auth-card--modal {
        padding: 40px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .home-landing .auth-modal-overlay,
    .home-landing .auth-modal-dialog {
        animation: none;
    }
}

/* ── Freeze background motion behind the modal ────────────
     backdrop-filter: blur() on .auth-modal-overlay must recompute
     every frame the content behind it changes. With the star field
     and ring/icon pulses left running under an open modal, that
     made the login card (and typing into it) feel heavy. Nothing
     here is visible through the blur+scrim anyway, so pausing is
     free visually. */
.home-landing.auth-modal-open .star,
.home-landing.auth-modal-open .hero-grid-heart {
    animation-play-state: paused;
}

/* ── No-JS fallback ────────────────────────────────────────
     Only ever shown when scripting is unavailable — the modal
     above needs JS to open, so without it there'd be no way to
     log in at all. Browsers never render <noscript> content
     when JS is enabled, so this adds nothing visible for the
     vast majority of visitors. */
.home-landing .auth-noscript-fallback {
    max-width: 460px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.home-landing .auth-noscript-fallback .auth-card {
    margin: 0;
    width: 100%;
}

.home-landing .auth-noscript-flash {
    margin-bottom: 16px;
}

.home-landing .auth-noscript-flash p {
    margin: 0 0 8px;
    padding: 12px 16px;
    border-radius: var(--radius-md, 10px);
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.home-landing .auth-noscript-flash p.flash-danger {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--danger);
}

.home-landing .auth-noscript-flash p.flash-warning {
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    border-color: color-mix(in srgb, var(--gold) 30%, transparent);
    color: var(--gold);
}

.home-landing .auth-noscript-flash p.flash-success {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
    color: var(--success);
}

.home-landing .auth-noscript-flash p.flash-info {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
}

/* ── editorial depth pass ───────────────────────────────────────────────
   The journey cards above are intentionally left alone.  This pass gives
   the content that follows a quieter, magazine-like rhythm: a faint guide
   line, more deliberate surfaces, and interaction states that reward
   exploration without making the page feel busier. */
.home-landing .home-body {
    isolation: isolate;
}



.home-landing .section-heading {
    scroll-margin-top: 108px;
}

.home-landing .section-heading h2 {
    text-wrap: balance;
}

.home-landing .section-heading .home-eyebrow {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 10%, transparent);
}

.home-landing .stats-strip {
    isolation: isolate;
}

.home-landing .stat {
    position: relative;
    overflow: hidden;
}

.home-landing .stat::after {
    content: '';
    position: absolute;
    width: 86px;
    height: 86px;
    right: -38px;
    bottom: -44px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--stat-accent) 22%, transparent), transparent 68%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
    pointer-events: none;
}

.home-landing .stat:hover::after {
    transform: scale(1.6);
}

.home-landing .app-preview-stage {
    overflow: hidden;
}

.home-landing .app-preview-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(130deg,
            color-mix(in srgb, #fff 26%, transparent),
            transparent 28%, transparent 70%,
            color-mix(in srgb, var(--accent) 28%, transparent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.home-landing .app-preview-tab:focus-visible,
.home-landing .ai-spotlight-cta:focus-visible,
.home-landing .community-cta:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 64%, transparent);
    outline-offset: 4px;
}

.home-landing .ai-spotlight {
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent),
        0 32px 84px rgba(0, 0, 0, .25),
        0 0 96px color-mix(in srgb, var(--purple) 9%, transparent);
}

.home-landing .feature {
    min-height: 208px;
}

.home-landing .feature--featured {
    min-height: 240px;
}

.home-landing .feature:hover::after {
    opacity: 1;
    box-shadow: 0 0 20px color-mix(in srgb, var(--feature-accent, var(--accent)) 52%, transparent);
}

.home-landing .badges-teaser {
    background:
        radial-gradient(ellipse at 50% -8%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 50%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 90%, transparent), color-mix(in srgb, var(--bg-secondary) 42%, transparent));
}

.home-landing .badges-teaser-item {
    position: relative;
}

.home-landing .badges-teaser-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 38px;
    left: calc(50% + 50px);
    width: calc(100% - 26px);
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 35%, transparent), transparent);
}

.home-landing .faq-item {
    position: relative;
}

.home-landing .faq-item[open]::after {
    content: '';
    position: absolute;
    right: 18px;
    bottom: 14px;
    left: 46px;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
    pointer-events: none;
}

@media (max-width: 760px) {

    .home-landing .home-body::before,
    .home-landing .badges-teaser-item::after {
        display: none;
    }

    .home-landing .feature,
    .home-landing .feature--featured {
        min-height: 0;
    }

    .home-landing .stat {
        min-height: 100px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .home-landing .stat::after,
    .home-landing .feature::after {
        transition: none;
    }
}