/* ============================================================================
   HEALING SPACE UK — LANDING v2 "MODERN LAYER"
   ----------------------------------------------------------------------------
   Loaded AFTER the inline <style> in templates/landing_v2.html, so equal-
   specificity rules here win. Nothing in this file is required for the page to
   function — remove the <link> and you get the original landing page back.

   Design intent: professional + futuristic. Depth over decoration. Every
   motion is subtle, purposeful, and fully disabled under prefers-reduced-motion.
   ============================================================================ */

/* ============================================================
   1. TOKENS — refined palette, fluid scale, layered elevation
   ============================================================ */
:root {
    /* Brand — slightly deeper, cooler, more "instrument panel" than "poster" */
    --brand-primary:     #5b5bf0;
    --brand-secondary:   #8b5cf6;
    --brand-tertiary:    #06b6d4;
    --brand-gradient:    linear-gradient(135deg, #5b5bf0 0%, #8b5cf6 48%, #06b6d4 100%);
    --brand-gradient-2:  linear-gradient(135deg, #5b5bf0 0%, #8b5cf6 100%);

    /* Fluid spacing — one scale drives every gap, pad and rhythm */
    --space-2xs: clamp(0.375rem, 0.5vw, 0.5rem);
    --space-xs:  clamp(0.625rem, 0.9vw, 0.875rem);
    --space-sm:  clamp(0.875rem, 1.3vw, 1.25rem);
    --space-md:  clamp(1.25rem, 2vw, 1.875rem);
    --space-lg:  clamp(1.75rem, 3vw, 2.75rem);
    --space-xl:  clamp(2.5rem, 5vw, 4.5rem);
    --space-2xl: clamp(4rem, 8.5vw, 8rem);

    /* Layout */
    --container:   1240px;
    --gutter:      clamp(1.25rem, 4vw, 2.75rem);

    /* Radii — one step softer and more consistent than before */
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  22px;
    --r-xl:  28px;
    --r-2xl: 34px;
    --r-pill: 100px;

    /* Elevation — brand-tinted, two-part (contact shadow + ambient) */
    --shadow-sm: 0 1px 2px rgba(16, 18, 48, 0.05),
                 0 3px 10px rgba(16, 18, 48, 0.05);
    --shadow-md: 0 2px 4px rgba(16, 18, 48, 0.05),
                 0 10px 28px rgba(16, 18, 48, 0.08);
    --shadow-lg: 0 4px 8px rgba(16, 18, 48, 0.05),
                 0 20px 52px rgba(16, 18, 48, 0.11);
    --shadow-xl: 0 8px 16px rgba(16, 18, 48, 0.06),
                 0 36px 88px rgba(16, 18, 48, 0.16);
    --card-hover-shadow: 0 4px 10px rgba(91, 91, 240, 0.08),
                         0 24px 60px rgba(91, 91, 240, 0.20);

    /* Surfaces */
    --bg-page:       #ffffff;
    --bg-surface:    #f5f6fc;
    --bg-elevated:   #ffffff;
    --bg-card:       #ffffff;
    --stats-bg:      #f5f6fc;
    --border-subtle: #e6e8f3;
    --border-accent: rgba(91, 91, 240, 0.28);
    --nav-bg:        rgba(255, 255, 255, 0.72);
    --nav-border:    rgba(91, 91, 240, 0.13);

    /* Glass + sheen (the "futuristic" primitives, used sparingly) */
    --glass-bg:      rgba(255, 255, 255, 0.66);
    --glass-border:  rgba(255, 255, 255, 0.75);
    --sheen:         rgba(255, 255, 255, 0.55);
    --hairline:      rgba(16, 18, 48, 0.06);

    /* Motion */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:  0.18s;
    --dur:       0.32s;
    --dur-slow:  0.6s;

    /* Runtime values written by landing-v2-modern.js */
    --crisis-h: 0px;
    --scroll-progress: 0;
}

[data-theme="dark"] {
    --bg-page:       #070713;
    --bg-surface:    #0c0c1c;
    --bg-elevated:   #121228;
    --bg-card:       #121228;
    --stats-bg:      #0c0c1c;
    --text-primary:  #f2f2fa;
    --text-secondary:#a5a5cc;
    --text-muted:    #6c6c92;
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-accent: rgba(139, 92, 246, 0.36);
    --nav-bg:        rgba(7, 7, 19, 0.68);
    --nav-border:    rgba(139, 92, 246, 0.20);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4),  0 3px 12px rgba(0, 0, 0, 0.34);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.44);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 8px 18px rgba(0, 0, 0, 0.55),0 40px 96px rgba(0, 0, 0, 0.65);
    --card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
                         0 28px 68px rgba(91, 91, 240, 0.28);

    --glass-bg:     rgba(18, 18, 40, 0.6);
    --glass-border: rgba(255, 255, 255, 0.09);
    --sheen:        rgba(160, 170, 255, 0.16);
    --hairline:     rgba(255, 255, 255, 0.07);
}

/* ============================================================
   2. BASE RHYTHM & CONTAINERS
   ============================================================ */
html {
    font-size: 16px;
    /* Anchor links land below the fixed nav on every breakpoint.
       H2.3-S2: plus the secondary section nav stuck beneath the header
       (--site-subnav-h, measured by site-nav.js; 0 when absent). */
    scroll-padding-top: calc(84px + var(--crisis-h) + var(--site-subnav-h, 0px));
}

body {
    line-height: 1.65;
    letter-spacing: -0.011em;
    text-rendering: optimizeLegibility;
    /* Kill horizontal jitter from wide 3D transforms without clipping sticky UI */
    overflow-x: clip;
}

/* Fluid section rhythm replaces the fixed 104px/28px everywhere */
section,
.stats,
.ai-section,
.trust-badges,
.footer {
    padding-block: var(--space-2xl);
    padding-inline: var(--gutter);
}
.stats { padding-block: var(--space-lg); }
.trust-badges { padding-block: var(--space-xl); }

.section-inner,
.nav-inner,
.stats-inner,
.showcase-inner,
.footer-inner,
.trust-badges-inner,
.demo-cta-inner,
.founder-inner {
    max-width: var(--container);
    margin-inline: auto;
    width: 100%;
}

/* Section headings: quieter eyebrow, tighter title, wider measure */
.section-tag,
.demo-cta-tag,
.founder-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--brand-primary) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, transparent);
    color: var(--brand-primary);
    padding: 6px 16px 6px 12px;
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* The demo CTA's eyebrow sits on the brand gradient, where brand-coloured
   text disappears. Give it the glass treatment instead. */
.demo-cta-tag {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

/* Small pulsing status dot — the one piece of "live" ornament on the page */
.section-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: hs-pulse 2.8s var(--ease-soft) infinite;
    flex-shrink: 0;
}
@keyframes hs-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
    55%      { box-shadow: 0 0 0 7px transparent; }
}

.section-title {
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.05rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.038em;
    margin-bottom: var(--space-sm);
    text-wrap: balance;
}
.section-subtitle {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
    line-height: 1.7;
    max-width: 62ch;
    text-wrap: pretty;
}

/* ============================================================
   3. AURORA FIELD — a single fixed, near-invisible depth layer.
   Gives the whole page a sense of atmosphere without any per-section noise.
   ============================================================ */
body::before {
    content: '';
    position: fixed;
    inset: -20vmax;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38vmax 30vmax at 12% 8%,  color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 62%),
        radial-gradient(34vmax 28vmax at 88% 32%, color-mix(in srgb, var(--brand-secondary) 10%, transparent), transparent 60%),
        radial-gradient(30vmax 26vmax at 46% 92%, color-mix(in srgb, var(--brand-tertiary) 9%, transparent), transparent 62%);
    opacity: 0.55;
    animation: hs-aurora 34s var(--ease-soft) infinite alternate;
}
[data-theme="dark"] body::before { opacity: 0.75; }
@keyframes hs-aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(1.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.02); }
}

/* Opaque sections sit above the aurora; surface sections let it bleed through */
.features,
.testimonials,
.faq,
.pricing,
.contact,
.how-it-works { background: color-mix(in srgb, var(--bg-page) 88%, transparent); }
.ai-section,
.for-clinicians,
.showcase { background: color-mix(in srgb, var(--bg-surface) 82%, transparent); }

/* ============================================================
   4. NAV — true glass, height that reacts to scroll, progress rail
   ============================================================ */
.nav {
    transition: background var(--dur) var(--ease-soft),
                border-color var(--dur) var(--ease-soft),
                box-shadow var(--dur) var(--ease-soft),
                backdrop-filter var(--dur) var(--ease-soft);
}
.nav.scrolled {
    background: var(--nav-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom-color: var(--nav-border);
    box-shadow: 0 1px 0 var(--hairline), 0 8px 32px rgba(16, 18, 48, 0.07);
}
[data-theme="dark"] .nav.scrolled {
    box-shadow: 0 1px 0 var(--hairline), 0 8px 32px rgba(0, 0, 0, 0.5);
}
.nav-inner {
    height: 82px;
    padding-inline: var(--gutter);
    transition: height var(--dur) var(--ease-out);
}
.nav.scrolled .nav-inner { height: 66px; }

/* Reading-progress rail along the bottom edge of the nav */
.nav::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: 0 50%;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-soft);
    pointer-events: none;
}
.nav.scrolled::after { opacity: 1; }

.nav-links { gap: clamp(18px, 2.2vw, 34px); }
.nav-links a { font-weight: 550; }
.nav-links a::after {
    height: 2px;
    bottom: -6px;
    border-radius: 2px;
    transform-origin: 0 50%;
    transition: transform var(--dur) var(--ease-out);
}

.theme-toggle {
    width: 38px;
    height: 38px;
    transition: transform var(--dur) var(--ease-out), background var(--dur-fast) ease,
                border-color var(--dur-fast) ease;
}
.theme-toggle:hover { transform: rotate(-22deg) scale(1.06); }

.btn-login,
.btn-primary-hero,
.btn-secondary-hero,
.ai-callout-btn,
.demo-btn-primary,
.demo-btn-secondary,
.pricing-cta,
.contact-cta-btn,
.btn-submit,
.clin-btn,
.sticky-btn-white,
.sticky-btn-ghost {
    letter-spacing: -0.012em;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                background var(--dur-fast) ease,
                color var(--dur-fast) ease,
                border-color var(--dur-fast) ease;
}

/* Sheen sweep on primary actions — one pass on hover, never looping */
.btn-primary-hero,
.ai-callout-btn,
.demo-btn-primary,
.btn-submit,
.pricing-cta-gradient,
.contact-cta-btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-primary-hero::after,
.ai-callout-btn::after,
.demo-btn-primary::after,
.btn-submit::after,
.pricing-cta-gradient::after,
.contact-cta-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 38%, var(--sheen) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform 0.75s var(--ease-out);
}
.btn-primary-hero:hover::after,
.ai-callout-btn:hover::after,
.demo-btn-primary:hover::after,
.btn-submit:hover::after,
.pricing-cta-gradient:hover::after,
.contact-cta-btn-primary:hover::after { transform: translateX(120%); }

.mobile-menu {
    top: 100%;
    background: var(--nav-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: var(--space-xs) var(--space-sm) var(--space-sm);
}
.mobile-menu a { padding: 14px 16px; border-radius: var(--r-sm); }

/* ============================================================
   5. HERO — depth in layers, pointer + scroll parallax
   ============================================================ */
.hero {
    /* Small-viewport-safe height; avoids the mobile URL-bar jump of 100vh */
    min-height: 100svh;
    padding: calc(var(--space-2xl) + var(--crisis-h) + 40px) var(--gutter) var(--space-2xl) !important;
    display: grid;
    place-items: center;
    perspective: 1200px;
    background:
        radial-gradient(120% 90% at 50% -10%, #7c6cff 0%, transparent 55%),
        linear-gradient(150deg, #4f46e5 0%, #7c3aed 42%, #0e7490 100%);
}
[data-theme="dark"] .hero {
    background:
        radial-gradient(120% 90% at 50% -10%, #2a1d78 0%, transparent 58%),
        linear-gradient(150deg, #0d0e4a 0%, #1a0a46 45%, #06283a 100%);
}

/* Fine grid overlay — reads as "engineered", disappears at a glance */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%);
}
/* Soft horizon fade into the stats bar below */
.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Capped in px as well as vh — on a tall viewport a raw 22vh washed out
       the lower third of the hero, buttons included. */
    height: clamp(70px, 12vh, 170px);
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--stats-bg) 78%, transparent));
}

/* Parallax: --px/--py come from the pointer, --sy from scroll (see JS) */
.hero-blob {
    filter: blur(96px);
    opacity: 0.85;
    will-change: transform;
    transform: translate3d(calc(var(--px, 0) * var(--depth, 14px)),
                           calc(var(--py, 0) * var(--depth, 14px) + var(--sy, 0px)), 0);
    transition: transform 0.9s var(--ease-out);
}
.hero-blob-1 { --depth: 22px; }
.hero-blob-2 { --depth: -16px; }
.hero-blob-3 { --depth: 12px; }

.hero-watermark {
    opacity: 0.06;
    will-change: transform;
    transform: translate(-50%, -50%)
               translate3d(calc(var(--px, 0) * -26px), calc(var(--py, 0) * -26px), 0)
               rotate(calc(var(--px, 0) * 2deg));
    transition: transform 1.1s var(--ease-out);
}

.hero-content {
    max-width: 62rem;
    transform: translate3d(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 5px), 0);
    transition: transform 0.9s var(--ease-out);
}

.hero-badge {
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    padding: 9px 20px;
    font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    font-weight: 550;
    margin-bottom: var(--space-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    max-width: min(100%, 46rem);
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    text-wrap: balance;
}

.hero-title {
    font-size: clamp(2.25rem, 1.35rem + 4.1vw, 4.35rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
    margin-bottom: var(--space-md);
    text-wrap: balance;
    /* Top-lit type: bright at the cap line, settling into the gradient below */
    background: linear-gradient(180deg, #ffffff 28%, rgba(255, 255, 255, 0.74) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 24px rgba(10, 8, 60, 0.28));
}

.hero-subtitle {
    font-size: clamp(1rem, 0.94rem + 0.42vw, 1.25rem);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.68;
    max-width: 40rem;
    margin-bottom: var(--space-lg);
    text-wrap: pretty;
}

.hero-ctas { gap: var(--space-sm); }

.btn-primary-hero {
    padding: 16px 34px;
    box-shadow: 0 2px 6px rgba(10, 8, 60, 0.18), 0 14px 40px rgba(10, 8, 60, 0.3);
}
.btn-primary-hero:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 4px 10px rgba(10, 8, 60, 0.2), 0 22px 56px rgba(10, 8, 60, 0.38);
}
.btn-secondary-hero {
    padding: 16px 34px;
    border-width: 1.5px;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn-secondary-hero:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
}

/* Arrow nudge on hover — small, and only on the affordance itself */
.btn-primary-hero span,
.btn-secondary-hero span,
.contact-cta-btn span { transition: transform var(--dur) var(--ease-out); display: inline-block; }
.btn-primary-hero:hover span { transform: translateX(4px); }
.btn-secondary-hero:hover span { transform: translateY(3px); }

/* Staged entrance: the opening line lands as a sequence, not a block. Kept to
   opacity + translate only — the title's own drop-shadow filter must survive. */
@keyframes hs-rise {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: none; }
}
.hero-badge    { animation: hs-rise 0.85s var(--ease-out) 0.05s both; }
.hero-title    { animation: hs-rise 0.95s var(--ease-out) 0.18s both; }
.hero-subtitle { animation: hs-rise 0.95s var(--ease-out) 0.34s both; }
.hero-ctas     { animation: hs-rise 0.95s var(--ease-out) 0.50s both; }

/* Above the horizon fade, which is painted by .hero::after */
.scroll-chevron {
    bottom: clamp(18px, 3vh, 36px);
    z-index: 2;
    /* Fades in only once the copy has settled, so it invites rather than competes.
       Its own keyframes — a bare translate would drop the translateX(-50%)
       that centres it, and the arrow would jump sideways on entry. */
    opacity: 0;
    animation: hs-rise-centred 0.8s var(--ease-out) 1.1s both,
               bounceDown 2.2s ease-in-out 1.9s infinite;
}
@keyframes hs-rise-centred {
    from { opacity: 0;   transform: translateX(-50%) translateY(18px); }
    to   { opacity: 0.8; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   5b. VALUE — the dual-audience pitch, first thing after the hero.
   Two columns because there are exactly two people this has to work for;
   anything more would dilute it back into a feature list.
   ============================================================ */
.value {
    background: color-mix(in srgb, var(--bg-page) 90%, transparent);
    padding-block: var(--space-xl) var(--space-2xl);
    position: relative;
    z-index: 1;
}
.value-heading {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.35rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.035em;
    text-align: center;
    text-wrap: balance;
    max-width: 22ch;
    margin: 0 auto var(--space-lg);
    color: var(--text-primary);
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: var(--space-md);
}

.value-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--r-xl);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}
/* A single tinted wash per audience — the only thing distinguishing the two
   columns, so the eye sorts them without a hard colour block. */
.value-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120% 90% at 0% 0%, var(--tint, transparent), transparent 60%);
}
.value-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: var(--rule, var(--brand-gradient-2));
}
.value-patient   { --tint: color-mix(in srgb, var(--brand-tertiary) 10%, transparent);
                   --rule: linear-gradient(180deg, #06b6d4, #5b5bf0); }
.value-clinician { --tint: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
                   --rule: linear-gradient(180deg, #8b5cf6, #5b5bf0); }

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--border-accent);
}

.value-card-head { display: flex; align-items: flex-start; gap: var(--space-sm); }
.value-card-icon {
    flex-shrink: 0;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    font-size: 1.6rem;
    border-radius: var(--r-md);
    background: var(--brand-gradient);
    box-shadow: 0 6px 20px rgba(91, 91, 240, 0.3);
}
.value-card-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 4px;
}
.value-card-title {
    font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    text-wrap: balance;
}

.value-list { list-style: none; display: grid; gap: var(--space-sm); margin: 0; padding: 0; }
.value-list li {
    position: relative;
    padding-left: 30px;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-secondary);
    text-wrap: pretty;
}
.value-list li::before {
    content: '';
    position: absolute;
    left: 4px; top: 0.55em;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--brand-gradient-2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.value-list strong {
    display: block;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.012em;
    margin-bottom: 2px;
}

.value-link {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--brand-primary);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-accent);
    background: color-mix(in srgb, var(--brand-primary) 7%, transparent);
    transition: background var(--dur-fast) ease, transform var(--dur) var(--ease-out),
                border-color var(--dur-fast) ease;
}
.value-link span { transition: transform var(--dur) var(--ease-out); }
.value-link:hover {
    background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
    border-color: var(--brand-primary);
    transform: translateY(-2px);
}
.value-link:hover span { transform: translateX(4px); }

.value-footnote {
    margin: var(--space-md) auto 0;
    max-width: 76ch;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--text-muted);
    text-wrap: pretty;
}

@media (max-width: 600px) {
    .value-card { padding: var(--space-md); }
    .value-card-icon { width: 44px; height: 44px; font-size: 1.35rem; }
    .value-link { align-self: stretch; justify-content: center; }
}

/* ============================================================
   6. STATS — bento strip with a hairline top light
   ============================================================ */
.stats {
    background: var(--stats-bg);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    z-index: 1;
}
.stats-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-sm);
}
.stat-item {
    border-radius: var(--r-md);
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
    background: var(--bg-elevated);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}
[data-theme="dark"] .stat-item { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-sm); }
.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    background: linear-gradient(140deg,
                color-mix(in srgb, var(--brand-primary) 16%, transparent),
                color-mix(in srgb, var(--brand-tertiary) 12%, transparent));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

/* ============================================================
   7. CARD SYSTEM — composed 3D transform + cursor-tracked sheen
   ------------------------------------------------------------
   Every card shares one transform recipe so tilt, lift and scale never fight:
     perspective → rotateX/Y (pointer) → translateY (lift) → scale (featured)
   JS writes --rx/--ry/--mx/--my; CSS owns the resting and hover states.
   ============================================================ */
.stat-item,
.ai-pillar,
.feature-card,
.trust-badge,
.testimonial-card,
.pricing-card,
.contact-card,
.faq-item {
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    --scale: 1;
    transform-style: preserve-3d;
    transform: perspective(1000px)
               rotateX(var(--rx)) rotateY(var(--ry))
               translate3d(0, var(--lift), 0)
               scale(var(--scale));
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}
/* will-change only while actually animating — promoting 40+ cards up front
   costs more memory than it saves in paint time. */
:is(.stat-item, .ai-pillar, .feature-card, .trust-badge, .testimonial-card,
    .pricing-card, .contact-card):hover { will-change: transform; }

.stat-item:hover      { --lift: -4px; }
.ai-pillar:hover,
.feature-card:hover,
.testimonial-card:hover,
.contact-card:hover,
.trust-badge:hover    { --lift: -7px; box-shadow: var(--card-hover-shadow); }
.pricing-card:hover   { --lift: -8px; box-shadow: var(--card-hover-shadow); }
.pricing-card.featured        { --scale: 1.04; }
.pricing-card.featured:hover  { --lift: -8px; --scale: 1.055; }

/* Cursor sheen — injected by JS as .hs-sheen so it never collides with the
   ::before/::after the base stylesheet already uses on these cards. */
.hs-sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur) var(--ease-soft);
    background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%),
                color-mix(in srgb, var(--brand-primary) 14%, transparent), transparent 72%);
    z-index: 0;
}
[data-theme="dark"] .hs-sheen {
    background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
                rgba(150, 160, 255, 0.14), transparent 70%);
}
:is(.ai-pillar, .feature-card, .testimonial-card, .contact-card, .trust-badge,
    .pricing-card, .stat-item):hover > .hs-sheen { opacity: 1; }
/* Keep real content above the sheen */
:is(.ai-pillar, .feature-card, .testimonial-card, .contact-card,
    .pricing-card) > *:not(.hs-sheen) { position: relative; z-index: 1; }

/* Shared card chrome */
.ai-pillar,
.feature-card,
.testimonial-card,
.contact-card,
.trust-badge,
.faq-item {
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.ai-pillar,
.feature-card { padding: var(--space-md); }

.ai-pillar-icon,
.feature-emoji {
    filter: drop-shadow(0 6px 16px rgba(91, 91, 240, 0.28));
}
.ai-pillar-icon {
    width: 58px;
    height: 58px;
    border-radius: var(--r-md);
    margin-bottom: var(--space-sm);
}

/* ============================================================
   8. GRIDS — auto-fit everywhere, so tablets get their own layout for free
   ============================================================ */
.ai-pillars       { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); }
.features-grid    { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-md); }
.testimonials-grid{ grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: var(--space-md); }
.contact-cards    { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); }
.trust-badges-grid{ grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--space-sm); }
.steps-container  { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-lg); }
.pricing-grid     { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-md); align-items: stretch; }
.clinicians-grid  { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--space-xl); }
.footer-grid      { gap: var(--space-lg); }

/* Featured pricing card needs breathing room for its scale */
.pricing-grid { padding-block: 14px; }

/* ============================================================
   9. SHOWCASE — the device frame gets real depth
   ============================================================ */
.showcase-inner { perspective: 1600px; }
.showcase-frame {
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xl);
    transform: rotateX(var(--frame-rx, 4deg)) translateZ(0);
    transform-origin: 50% 100%;
    transition: transform 0.8s var(--ease-out), box-shadow 0.8s var(--ease-out);
}
/* Settles flat as you engage with it */
.showcase-frame:hover,
.showcase-frame:focus-within { --frame-rx: 0deg; box-shadow: var(--shadow-xl), 0 0 0 1px var(--border-accent); }

.showcase-browser-bar {
    background: color-mix(in srgb, var(--bg-surface) 70%, var(--bg-elevated));
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.showcase-tabs { gap: var(--space-2xs); flex-wrap: wrap; }
.showcase-tab {
    border-radius: var(--r-pill);
    transition: transform var(--dur) var(--ease-out), background var(--dur-fast) ease,
                color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out);
}
.showcase-tab:hover { transform: translateY(-2px); }
.showcase-tab.active { box-shadow: 0 6px 20px rgba(91, 91, 240, 0.3); }

/* Screen cross-fade instead of a hard swap */
.showcase-screen {
    animation: hs-screen-in 0.45s var(--ease-out) both;
}
@keyframes hs-screen-in {
    from { opacity: 0; transform: translateY(10px) scale(0.995); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   10. AI CALLOUT / DEMO CTA — gradient panels with an inner light
   ============================================================ */
.ai-callout,
.demo-cta,
.pricing-card.featured {
    position: relative;
    isolation: isolate;
    border-radius: var(--r-xl);
    box-shadow: 0 4px 12px rgba(91, 91, 240, 0.18), 0 28px 72px rgba(91, 91, 240, 0.26);
}
.ai-callout::before,
.demo-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(80% 120% at 12% 0%, rgba(255, 255, 255, 0.24), transparent 58%);
}
.ai-callout { padding: var(--space-xl); gap: var(--space-lg); }
.demo-cta { margin-inline: var(--gutter); border-radius: var(--r-2xl); }

/* ============================================================
   11. HOW IT WORKS — connector reads as a progress line
   ============================================================ */
.step-circle {
    border-radius: 26px;
    box-shadow: 0 8px 28px rgba(91, 91, 240, 0.32);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.step:hover .step-circle {
    transform: translateY(-5px) rotate(-4deg);
    box-shadow: 0 14px 40px rgba(91, 91, 240, 0.42);
}
.steps-connector { opacity: 0.35; }

/* ============================================================
   12. PRICING / FAQ / FORM polish
   ============================================================ */
.pricing-card {
    border-radius: var(--r-xl);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
}
.pricing-cta { border-radius: var(--r-pill); margin-top: auto; }
.pricing-tabs, .billing-toggle { flex-wrap: wrap; }
.pricing-tab-btn, .billing-switch { transition: all var(--dur) var(--ease-out); }

.faq-item {
    margin-bottom: var(--space-2xs);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out);
}
.faq-item:hover { border-color: var(--border-accent); }
.faq-item.open { border-color: var(--border-accent); box-shadow: var(--shadow-md); }
.faq-chevron { transition: transform var(--dur) var(--ease-out); }
.faq-answer, .feature-expand, .step-expand, .clin-detail {
    transition: max-height 0.45s var(--ease-out), opacity var(--dur) var(--ease-soft);
}

.form-wrapper {
    border-radius: var(--r-xl);
    border: 1px solid var(--border-subtle);
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--shadow-lg);
}
.form-group input,
.form-group textarea {
    border-radius: var(--r-sm);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
                background var(--dur-fast) ease;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 16%, transparent);
    outline: none;
}
.form-row { gap: var(--space-sm); }

/* ============================================================
   13. CRISIS BAR / STICKY CTA / FOOTER
   ============================================================ */
.crisis-bar {
    position: relative;
    z-index: 1100;
    box-shadow: 0 2px 14px rgba(180, 20, 20, 0.24);
}

.sticky-cta {
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-soft);
}
[data-theme="dark"] .sticky-cta { border-color: var(--hairline); }

.footer { position: relative; z-index: 1; }
.footer-links-list a { transition: color var(--dur-fast) ease, transform var(--dur) var(--ease-out); display: inline-block; }
.footer-links-list a:hover { transform: translateX(3px); }
.footer-back-top { transition: transform var(--dur) var(--ease-out); }
.footer-back-top:hover { transform: translateY(-3px); }

/* ============================================================
   14. REVEAL — a single stagger system, blur-in for softness
   ============================================================ */
.fade-in {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    filter: blur(6px);
    transition: opacity 0.75s var(--ease-out),
                transform 0.75s var(--ease-out),
                filter 0.75s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.fade-in.visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}
/* Base delay classes fold into the same scale */
.fade-in-delay-1 { --i: 1; transition-delay: calc(var(--i) * 70ms); }
.fade-in-delay-2 { --i: 2; transition-delay: calc(var(--i) * 70ms); }
.fade-in-delay-3 { --i: 3; transition-delay: calc(var(--i) * 70ms); }
.fade-in-delay-4 { --i: 4; transition-delay: calc(var(--i) * 70ms); }
.fade-in-delay-5 { --i: 5; transition-delay: calc(var(--i) * 70ms); }
.fade-in-delay-6 { --i: 6; transition-delay: calc(var(--i) * 70ms); }

/* ============================================================
   15. RESPONSIVE — tablet, mobile, and coarse-pointer refinements
   ============================================================ */

/* Tablet: give the clinician split and callout a sensible mid layout */
@media (max-width: 1024px) {
    .ai-callout { grid-template-columns: 1fr; text-align: center; }
    .ai-callout-cta { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .showcase-frame { --frame-rx: 2deg; }

    /* Six nav items don't fit a tablet bar — they wrapped to two lines at ~830px.
       Switch to the hamburger here rather than at 768px. */
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .nav-inner { height: 74px; }
    .nav.scrolled .nav-inner { height: 64px; }
}

/* Phones: the bar Login pushed the hamburger off-screen. The mobile menu
   already carries its own Login, so drop the duplicate. */
@media (max-width: 600px) {
    .nav-actions { gap: 8px; }
    .nav-actions .btn-login { display: none; }
    .nav-logo-wordmark { font-size: 1.0625rem; }
    .nav-logo-img { width: 32px; height: 32px; }
}

@media (max-width: 768px) {
    html { scroll-padding-top: calc(74px + var(--crisis-h) + var(--site-subnav-h, 0px)); }
    .hero { min-height: 92svh; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas > a { justify-content: center; width: 100%; }
    /* inline-block keeps the flag in the text flow; as a flex item it wrapped
       onto a line of its own. */
    .hero-badge { display: inline-block; line-height: 1.6; padding: 10px 18px; }
    .ai-callout, .demo-cta { padding: var(--space-lg) var(--space-md); }
    .demo-cta { margin-inline: 0; }
    .form-row { grid-template-columns: 1fr; }
    .showcase-frame { --frame-rx: 0deg; }
    /* A scaled-up featured card has nowhere to go in a single column */
    .pricing-card.featured,
    .pricing-card.featured:hover { --scale: 1; }
    /* Horizontal scroller beats a cramped wrap for the showcase tabs */
    .showcase-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 6px;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }
    .showcase-tabs::-webkit-scrollbar { display: none; }
    .showcase-tab { flex: 0 0 auto; scroll-snap-align: center; }
}

@media (max-width: 480px) {
    .hero-title { letter-spacing: -0.035em; }
    .stat-item { padding: var(--space-sm); }
    .stat-icon { width: 40px; height: 40px; font-size: 1.4rem; }
    .sticky-cta { border-radius: var(--r-lg); }
}

/* Touch / no-hover devices: drop tilt + glass cost, keep the layout */
@media (hover: none), (pointer: coarse) {
    .stat-item, .ai-pillar, .feature-card, .trust-badge, .testimonial-card,
    .pricing-card, .contact-card, .faq-item {
        --rx: 0deg !important;
        --ry: 0deg !important;
        will-change: auto;
    }
    .hs-sheen { display: none; }
    .hero-blob { filter: blur(70px); }
    body::before { animation: none; }
}

/* Very wide screens: cap the measure rather than stretching everything */
@media (min-width: 1600px) {
    :root { --container: 1320px; }
}

/* Short landscape (phone rotated): don't force a full-height hero */
@media (max-height: 560px) and (orientation: landscape) {
    .hero { min-height: auto; padding-block: calc(var(--space-xl) + var(--crisis-h) + 40px) var(--space-xl) !important; }
    .scroll-chevron { display: none; }
}

/* ============================================================
   16. ACCESSIBILITY — motion, contrast, print
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .fade-in { opacity: 1 !important; transform: none !important; filter: none !important; }
    .hero-blob, .hero-watermark, .hero-content, .particle { transform: none !important; }
    .particle { display: none; }
    .showcase-frame { --frame-rx: 0deg; }
    body::before { animation: none; }
    .section-tag::before { animation: none; }
}

@media (prefers-contrast: more) {
    :root { --border-subtle: #9aa0bd; --text-secondary: #33334d; }
    [data-theme="dark"] { --border-subtle: rgba(255,255,255,0.35); --text-secondary: #ccccf0; }
    .hero-title { -webkit-text-fill-color: #fff; color: #fff; background: none; }
    .hs-sheen, body::before { display: none; }
}

:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 3px;
    border-radius: 6px;
}
.hero :focus-visible { outline-color: #fff; }

@media print {
    .nav, .sticky-cta, .crisis-bar, .scroll-chevron, .hs-sheen, body::before { display: none !important; }
    .hero { min-height: auto; background: none; color: #000; }
    .fade-in { opacity: 1 !important; transform: none !important; filter: none !important; }
}