@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@700;800;900&family=Inter:wght@400;500;600;800;900&display=swap');

/* ================================================================
   THE RX SPOT - DESIGN SYSTEM & STYLES
   ================================================================ */

/* ================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ================================================================ */

:root {
    /* Brand Colors */
    --color-brand-navy: #1a3d5c;
    --color-brand-deep-blue: #004E7C;
    --color-accent-primary: #004E7C;
    --color-accent-cyan: #0EA5E9;
    --color-accent-cyan-light: #38BDF8;

    /* Neutrals */
    --color-white: #ffffff;
    --color-silver-light: #f5f7fa;
    --color-silver: #e8ecf1;
    --color-gray-100: #f7f8fa;
    --color-gray-200: #e8ecf1;
    --color-gray-300: #d1d8e0;
    --color-gray-400: #a0aec0;
    --color-gray-500: #718096;
    --color-gray-600: #4a5568;
    --color-gray-700: #2d3748;
    --color-gray-800: #1a202c;
    --color-gray-900: #0f1419;

    /* Semantic Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: var(--color-accent-cyan);

    /* Badge Colors */
    --color-badge-blue: #2563EB;
    --color-badge-green: #10b981;
    --color-badge-purple: #8b5cf6;
    --color-badge-cyan: var(--color-accent-cyan);

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    /* Font Sizes (Fluid Typography) */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
    --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);

    /* Font Weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Spacing Scale (4px base) */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */
    --space-32: 8rem;
    /* 128px */

    /* Border Radius */
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-2xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-float: 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1100;
}

/* ================================================================
   2. RESET & BASE STYLES
   ================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    zoom: 0.9;
    /* Scale entire page to 90% for optimal default viewing */
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-gray-800);
    background-color: var(--color-white);
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    width: 100%;
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Accessibility: visible focus (WCAG 2.4.7) */
:focus-visible {
    outline: 2px solid var(--color-accent-cyan);
    outline-offset: 2px;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

::selection {
    background-color: var(--color-accent-cyan);
    color: var(--color-white);
}

/* ================================================================
   3. LAYOUT CONTAINERS
   ================================================================ */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.container-wide {
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* Scroll Offset for Sticky Header - Individually Tuned */
#for-patients {
    scroll-margin-top: 140px;
    /* Aligns For Patients */
}

#b2b {
    scroll-margin-top: 160px;
    /* Fixed "not far enough" for Providers */
}

#opportunities {
    scroll-margin-top: 120px;
}

#faq {
    scroll-margin-top: 40px;
    /* Fixed "scrolling too far" for FAQ */
}

@media (max-width: 640px) {

    .container,
    .container-wide {
        padding: 0 var(--space-4);
        /* Reduced from 1.5rem to 1rem */
    }
}

/* ================================================================
   4. TYPOGRAPHY
   ================================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--color-gray-900);
}

h1 {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-6);
}

h2 {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-5);
}

h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

h4 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

p {
    margin-bottom: var(--space-4);
}

.section-header {
    margin-bottom: var(--space-12);
}

.section-header.center {
    text-align: center;
}

.section-eyebrow {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent-cyan);
    margin-bottom: var(--space-3);
}

.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 700px;
    margin: 0 auto;
}

/* ================================================================
   5. BUTTONS
   ================================================================ */

.btn-primary,
.btn-secondary,
.btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: var(--weight-semibold);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        opacity var(--transition-base);
    white-space: nowrap;
    text-align: center;
}

.btn-primary {
    background: var(--color-accent-primary);
    color: var(--color-white);
    padding: var(--space-3) var(--space-6);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    color: var(--color-accent-primary);
    border: 2px solid var(--color-accent-primary);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
}

.btn-secondary:hover {
    color: var(--color-white);
}

/* ========================================
   GLASSY SIDE-FILL HOVER EFFECT
   Hollow pill buttons fill from left on hover
   ======================================== */

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent-primary);
    transform: scaleX(0);
    transform-origin: left;
    /* Snappy fill — fast out-of-the-gate cubic so the swipe feels energetic
       rather than the prior 0.5s linear-ish glide. */
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.34, 1);
    z-index: -1;
}

.btn-secondary:hover::before {
    transform: scaleX(1);
}

/* Glassy shimmer overlay — rides on top of the fill, faster so it crosses
   while the fill is still completing for that "swiped in" feel. */
.btn-secondary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    transition: left 0.42s cubic-bezier(0.2, 0.7, 0.3, 1);
    z-index: 0;
    pointer-events: none;
}

.btn-secondary:hover::after {
    left: 100%;
}

.btn-text {
    color: var(--color-accent-cyan);
    font-weight: var(--weight-semibold);
    padding: 0;
}

.btn-text:hover {
    color: var(--color-accent-cyan-light);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
}

/* =================================================================
   GLASS PILL TREATMENT
   ----------------------------------------------------------------
   Upgrades the four pill-shaped buttons (.btn-primary, .btn-secondary,
   .btn-login, .btn-phone) to read as polished frosted-glass capsules:

   - translucent layered fills with a subtle gradient (top-light → bottom-deep)
   - inset highlight along the upper edge (the "glass meniscus")
   - inset shadow along the lower edge (depth)
   - soft outer rim glow that intensifies on hover
   - existing shimmer-sweep ::after stays — gets stronger with the new base

   We do NOT touch border-radius / padding / typography of the originals,
   only the surface treatment. The fills override the prior solid colors
   with a higher specificity (compound selector + !important on the body
   background only, to win over the legacy block at line 331+).

   Backdrop-filter is included for browsers that support it; for those that
   don't, the layered gradient itself still reads as glassy.
   ================================================================= */

.btn-primary,
.btn-secondary,
.btn-login,
.btn-phone {
    /* Shared glass surface variables — tweak palette in one place */
    --glass-tint: 14, 165, 233;       /* cyan accent rgb */
    --glass-deep: 0, 78, 124;         /* trademark navy rgb */
    --glass-top-light: rgba(255, 255, 255, 0.55);
    --glass-bottom-shadow: rgba(2, 18, 36, 0.28);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
}

/* ---- PRIMARY: filled cyan glass ---- */
.btn-primary {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.04) 45%,
            rgba(0, 0, 0, 0.10) 100%),
        linear-gradient(180deg,
            rgba(var(--glass-tint), 0.95) 0%,
            rgba(var(--glass-deep), 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(2, 18, 36, 0.35),
        inset 0 0 14px rgba(255, 255, 255, 0.08),
        0 6px 18px -6px rgba(var(--glass-tint), 0.55),
        0 2px 4px rgba(2, 18, 36, 0.18);
}

.btn-primary:hover {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.26) 0%,
            rgba(255, 255, 255, 0.06) 45%,
            rgba(0, 0, 0, 0.08) 100%),
        linear-gradient(180deg,
            rgba(56, 189, 248, 0.98) 0%,
            rgba(0, 78, 124, 0.95) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(2, 18, 36, 0.4),
        inset 0 0 22px rgba(255, 255, 255, 0.14),
        0 12px 28px -8px rgba(var(--glass-tint), 0.7),
        0 3px 6px rgba(2, 18, 36, 0.22);
}

/* The legacy ::after at line ~3298 already supplies a diagonal shine
   sweep on hover. Leave it intact — with the new translucent base it
   reads more as a real specular highlight crossing the glass. */

/* ---- SECONDARY: hollow glass (frosted with cyan rim) ---- */
.btn-secondary {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(var(--glass-tint), 0.06) 100%);
    border: 1px solid rgba(var(--glass-deep), 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(var(--glass-tint), 0.12),
        0 4px 14px -6px rgba(var(--glass-deep), 0.18);
}

/* The ::before fill animation now uses a glass gradient too, so the
   left-to-right wipe reads as liquid glass, not a flat color slab. */
.btn-secondary::before {
    background:
        linear-gradient(180deg,
            rgba(56, 189, 248, 0.92) 0%,
            rgba(0, 78, 124, 0.95) 100%);
}

.btn-secondary:hover {
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(2, 18, 36, 0.35),
        0 10px 26px -8px rgba(var(--glass-tint), 0.55),
        0 2px 6px rgba(2, 18, 36, 0.18);
}

/* ---- DARK-CHROME GLASS (nav pills over the navy header) ----
   .btn-login + .btn-phone live on the dark header. They need the
   inverse of the light page glass: subtle cyan-tinted translucency
   that lets the navy bleed through, with a top-edge highlight that
   reads against the dark backdrop. */

.btn-login {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(var(--glass-tint), 0.10) 100%);
    border: 1px solid rgba(125, 211, 252, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(2, 18, 36, 0.30),
        0 2px 8px rgba(2, 18, 36, 0.18);
}

.btn-login:hover {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(56, 189, 248, 0.65) 60%,
            rgba(14, 165, 233, 0.85) 100%);
    border-color: rgba(186, 230, 253, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(2, 18, 36, 0.35),
        0 0 18px rgba(56, 189, 248, 0.55),
        0 4px 12px rgba(2, 18, 36, 0.25);
}

.btn-phone {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(14, 165, 233, 0.12) 55%,
            rgba(0, 78, 124, 0.18) 100%);
    border: 1px solid rgba(125, 211, 252, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(2, 18, 36, 0.32),
        0 3px 10px rgba(2, 18, 36, 0.22);
}

.btn-phone:hover {
    background:
        linear-gradient(180deg,
            rgba(186, 230, 253, 0.95) 0%,
            rgba(56, 189, 248, 0.95) 60%,
            rgba(14, 165, 233, 1) 100%);
    border-color: rgba(186, 230, 253, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(2, 18, 36, 0.35),
        0 0 22px rgba(56, 189, 248, 0.6),
        0 6px 18px rgba(2, 18, 36, 0.3);
}

/* Reduced-transparency fallback — accessibility users who disable
   transparency get a solid version that still reads as the same button
   without the layered glass effect. */
@media (prefers-reduced-transparency: reduce) {
    .btn-primary,
    .btn-secondary,
    .btn-login,
    .btn-phone {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .btn-primary {
        background: var(--color-accent-primary);
    }
    .btn-secondary {
        background: rgba(255, 255, 255, 0.92);
    }
    .btn-login {
        background: rgba(0, 78, 124, 0.6);
    }
    .btn-phone {
        background: rgba(14, 165, 233, 0.25);
    }
}

.btn-block {
    width: 100%;
}

.btn-icon {
    width: 20px;
    height: 20px;
}

/* ================================================================
   6. NAVIGATION (Consolidated & Fixed)
   ================================================================ */

.nav-sticky {
    position: fixed;
    top: 20px;
    /* Floating initially */
    left: 50%;
    transform: translateX(-50%);
    /* Center horizontal */
    width: 95%;
    /* Mobile width */
    max-width: 1400px;
    /* Desktop max constraint */
    background: transparent;
    transition: top 0.78s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.78s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Smoother placement transition - slowed by additional 20% */
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    /* Stack Top Bar and Main Content */
}

.nav-sticky.scrolled {
    top: -10px;
    /* Reverted to merg firmly with top */
    width: calc(86% - 140px);
    /* Collapsed in by total of 140px (130px + 10px narrower) */
    /* Reduced by additional 2% from 88% */
}

@media (min-width: 1024px) {
    .nav-sticky {
        width: 90%;
        /* 90% on desktop */
    }

    .nav-sticky.scrolled {
        width: calc(84.5% - 140px);
        /* Collapsed in by total of 140px (130px + 10px narrower) */
        /* Reduced by additional 1% from 85.5% */
    }
}

/* 6.1 Top Bar (Removed) */
.nav-top-bar {
    display: none;
}

/* 6.2 Main Nav Content */
.nav-main-content {
    position: relative;
    width: 100%;
    min-height: 120px;
    padding: 0;
    transition: background 0.36s ease, box-shadow 0.36s ease, border-color 0.36s ease;
    background: rgba(14, 45, 76, 0.55);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    border-radius: 24px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 28px -10px rgba(6, 27, 45, 0.18);
    border: 1px solid rgba(125, 175, 220, 0.18);
}


.nav-sticky.scrolled .nav-main-content {
    background: rgba(14, 45, 76, 0.84);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 14px 32px -14px rgba(6, 27, 45, 0.32);
    min-height: 103px;
    padding: 0;
    border-radius: 24px;
    border: 1px solid rgba(125, 175, 220, 0.22);
}

.nav-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Perfect Symmetry: Flexible Side Columns | Fixed Center Links | Flexible Side Columns */
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-6);
}

/* Mobile nav wrapper adjustments */
@media (max-width: 768px) {
    .nav-wrapper {
        gap: var(--space-3);
        padding: 0 var(--space-3);
        min-height: 80px;
        /* Ensure minimum height for verse to fit */
    }

    .nav-main-content {
        padding: var(--space-3) 0;
        min-height: 190px;
        /* Increased to 190px */
        padding-bottom: var(--space-4);
    }

    .nav-sticky.scrolled .nav-main-content {
        min-height: 160px;
        padding-bottom: var(--space-4);
        background: rgba(14, 45, 76, 0.96) !important;
        border-radius: 20px;
    }

    .nav-sticky.scrolled {
        width: calc(77.4% - 140px);
        /* Narrowed by another 10px (now 20px total) */
        top: 0;
    }

    /* Sane logo sizing for mobile */
    .logo {
        height: 160px;
        width: 160px;
        transform: translate(calc(-10% - 20px), 0);
        /* Shifted left 20px more */
    }

    .nav-sticky.scrolled .logo {
        height: 110px;
        width: 110px;
        transform: translate(calc(-50% + 45px), 10px) !important;
        /* Corrected: right another 15px (from +30 -> +45) */
    }
}

/* Logo */
.logo {
    justify-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 129px;
    /* Reduced by 10px from 134px */
    width: 124px;
    height: 124px;
    background: transparent;
    transform: translateY(4px);
    /* Shifted down exactly 4px */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-image {
    height: 100%;
    width: 100%;
    object-fit: contain;
    /* Zoomed effect to make the subject pop within the circle */
    transform: scale(1.3);
    transform-origin: center;

    /* Force browser to use highest quality interpolation */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;

    /* Prevent micro-stutter or blurring during composition */
    backface-visibility: hidden;
}

.nav-sticky.scrolled .logo {
    height: 90px;
    /* Reduced by 3px from 93px */
    width: 90px;
    transform: translate(27px, 9px);
    /* Reverted to original desktop position */
}

/* Move action stack inward and down on scroll */
.nav-sticky.scrolled .nav-actions-stack {
    transform: translate(5px, 8px);
    /* Centered for Login+Phone stack */
}

/* Links */
.nav-links {
    justify-self: center;
    display: none;
    gap: 38px;
    /* Increased from 32px to spread words (+24px total area) */
    justify-content: center;
    /* Center links in the middle column */
}

/* CRITICAL: This rule MUST be outside media queries for Chrome iOS */
.nav-links.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (min-width: 1024px) {
    .nav-links {
        display: flex;
        align-items: center;
    }
}

.nav-links a {
    font-weight: var(--weight-medium);
    color: var(--color-white);
    transition: color var(--transition-fast);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    font-size: var(--text-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.nav-links a:hover {
    color: var(--color-accent-cyan);
}

/* Mobile Navigation Expansion */
@media (max-width: 1023px) {
    .nav-links {
        flex-direction: column;
        position: fixed;
        top: 180px;
        /* Center without transform: use calc for left positioning */
        left: calc(50% - 170px);
        width: 340px;
        max-width: 90vw;
        /* Use solid color for Chrome iOS compatibility */
        background-color: #0d1b2a;
        background: #0d1b2a;
        border: 1px solid rgba(14, 165, 233, 0.3);
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(14, 165, 233, 0.2);
        padding: 24px;
        gap: 16px;
        z-index: 9999;
    }

    /* When active, ensure flex-direction is also set */
    .nav-links.active {
        flex-direction: column;
        align-items: stretch;
    }

    /* Adjust menu position when nav is scrolled */
    .nav-sticky.scrolled .nav-links {
        top: 140px;
    }

    .nav-links a,
    .nav-dropdown-toggle,
    .nav-dropdown-item {
        color: var(--color-white) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        padding: 10px 0;
        text-align: center;
        width: 100%;
    }

    .nav-dropdown-menu {
        position: relative;
        /* Expand within mobile menu */
        top: 0;
        left: 0;
        transform: none;
        background: rgba(255, 255, 255, 0.05);
        opacity: 1;
        visibility: visible;
        width: 100%;
        min-width: auto;
        box-shadow: none;
        border: none;
        margin-top: 10px;
        display: none;
        /* Hide until parent is interacted with or just show on mobile */
    }

    .nav-dropdown.active .nav-dropdown-menu,
    .nav-dropdown:hover .nav-dropdown-menu {
        display: block;
    }

    /* Mobile CTAs - Login & Phone */
    .nav-mobile-ctas {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(14, 165, 233, 0.2);
    }

    .nav-mobile-login,
    .nav-mobile-phone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        /* Increased padding and min-height for better touch targets */
        padding: 16px 28px;
        min-height: 52px;
        /* Use solid gradient colors for Chrome iOS */
        background: linear-gradient(135deg, #0EA5E9, #0284C7);
        color: #ffffff !important;
        font-weight: 600;
        font-size: 1rem;
        border-radius: 10px;
        transition: all 0.3s ease;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
        /* Ensure full width on mobile */
        width: 100%;
        box-sizing: border-box;
    }

    .nav-mobile-login:hover,
    .nav-mobile-phone:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
    }

    .nav-mobile-login svg,
    .nav-mobile-phone svg {
        flex-shrink: 0;
    }
}

/* Hide mobile CTAs on desktop */
.nav-mobile-ctas {
    display: none;
}

.nav-dropdown {
    position: relative;
    display: inline-block;
    height: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Invisible bridge to prevent menu closing when moving cursor */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 100;
}

.nav-dropdown-toggle {
    position: relative;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* Ensure minimum tap target size for iOS */
    min-height: 44px;
    min-width: 44px;
}

/* Refined Dropdown Arrow */
.nav-dropdown-toggle::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.6);
    margin-top: 10px;
    opacity: 0.8;
    transition: transform 0.4s ease, border-top-color 0.4s ease;
    /* Slower, synchronized with menu */
    transform-origin: center;
}

.nav-dropdown:hover .nav-dropdown-toggle::after {
    transform: rotate(180deg);
    border-top-color: var(--color-accent-cyan);
    opacity: 1;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;

    /* Professional, Solid Appearance (Less "Sci-Fi") */
    min-width: 260px;
    background: rgba(13, 27, 42, 0.98);
    /* Solid, deep navy brand color */
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 12px;
    /* Slightly tighter radius */

    /* Clean, professional shadow */
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(14, 165, 233, 0.15);

    padding: 8px;

    /* SMOOTH SLIDE DOWN ANIMATION */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-12px);
    transform-origin: top center;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    color: #e2e8f0;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    text-shadow: 0 0 0 rgba(14, 165, 233, 0);
    opacity: 0;
    transform: translateY(-15px) scale(0.9);
    position: relative;
    overflow: hidden;
    /* Smooth fade transitions */
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.36s cubic-bezier(0.4, 0, 0.2, 1),
        text-shadow 0.36s cubic-bezier(0.4, 0, 0.2, 1),
        padding-left 0.3s ease;
}

/* Background fade layer */
.nav-dropdown-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(56, 189, 248, 0.06));
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

/* Border glow fade layer */
.nav-dropdown-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-dropdown:hover .nav-dropdown-item {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.nav-dropdown:hover .nav-dropdown-item:nth-child(1) {
    transition-delay: 0.15s;
}

.nav-dropdown:hover .nav-dropdown-item:nth-child(2) {
    transition-delay: 0.25s;
}

.nav-dropdown-item:hover {
    color: var(--color-accent-cyan);
    padding-left: 20px;
    text-shadow: 0 0 6px rgba(14, 165, 233, 0.3), 0 0 12px rgba(14, 165, 233, 0.15);
    transition: color 0.36s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.36s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.3s ease;
}

.nav-dropdown-item:hover::before {
    opacity: 1;
}

.nav-dropdown-item:hover::after {
    opacity: 1;
}

/* Right Side Stack (Tagline + Phone) */
.nav-actions-stack {
    justify-self: end;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 1023px) {
    .nav-actions-stack {
        flex-direction: column;
        gap: 4px;
    }

    .nav-actions-stack .btn-login {
        padding: 10px 16px;
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    /* Hide on scroll for mobile only */
    .nav-sticky.scrolled .nav-actions-stack .btn-login {
        opacity: 0;
        pointer-events: none;
        transform: translateX(20px);
        width: 0;
        height: 0;
        padding: 0;
        margin: 0;
        border: none;
        overflow: hidden;
    }

    .nav-actions-stack .btn-phone {
        padding: 10px 16px;
        font-size: 0.8rem;
    }

    /* Hide on scroll for mobile only */
    .nav-sticky.scrolled .nav-actions-stack .btn-phone {
        opacity: 0;
        pointer-events: none;
        transform: translateX(20px);
        width: 0;
        height: 0;
        padding: 0;
        margin: 0;
        border: none;
        overflow: hidden;
    }

    /* Collapse stack on scroll for mobile only */
    .nav-sticky.scrolled .nav-actions-stack {
        width: 0;
        padding: 0;
        margin: 0;
        gap: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .nav-actions-stack .btn-phone .phone-wrap {
        display: none;
    }

    .nav-actions-stack .btn-phone::after {
        content: 'Call';
        font-weight: 700;
    }
}

@media (min-width: 1024px) {
    .nav-actions-stack {
        flex-direction: column;
        gap: 6px;
        transform: translate(10px, 4px);
        /* Centered for Login+Phone stack */
    }
}

.nav-tagline {
    font-family: var(--font-heading);
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-phone {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    color: var(--color-white);
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.4);
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 1rem;
    transition: all 0.48s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.phone-wrap {
    position: relative;
    width: 155px;
    /* Wide enough for single line */
    height: 18px;
    /* Single line height */
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.phone-segment {
    position: absolute;
    left: 0;
    /* Changed to left anchor */
    top: 0;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    white-space: nowrap;
    text-align: left;
    /* Left alignment requested */
}

/* Segment 1: (888) */
.phone-segment:nth-child(1) {
    transform: translate(0, 0);
}

/* Segment 2: THERXSPOT */
.phone-segment:nth-child(2) {
    transform: translate(50px, 0);
    /* Sits next to (888) */
}

/* SCROLLED STATE: Stack Animations */

.nav-sticky.scrolled .phone-wrap {
    width: 95px;
    /* Tighter container for stacked text */
    height: 38px;
}

.nav-sticky.scrolled .phone-segment:nth-child(1) {
    transform: translate(0, -4px);
    /* Shifted up 4px */
}

.nav-sticky.scrolled .phone-segment:nth-child(2) {
    transform: translate(0, 16px);
    /* Shifted up 4px (20px - 4px) */
}

.nav-sticky.scrolled .btn-phone {
    padding: 6px 14px;
    /* Slight adjustment */
}

.btn-phone:hover {
    background: var(--color-accent-cyan);
    border-color: var(--color-accent-cyan);
    color: var(--color-brand-navy);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}



.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-accent-cyan);
    background: transparent;
    border: 1px solid rgba(14, 165, 233, 0.3);
    padding: 5px 20px;
    /* Reduced top/bottom by 1px to make it 2px less tall overall */
    border-radius: 50px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
    /* Spacing between Login and Phone */
    text-decoration: none;
    transform: translateY(4px);
    /* Move down 4px */
}

.btn-login:hover {
    background: var(--color-accent-cyan);
    color: var(--color-brand-navy);
    border-color: var(--color-accent-cyan);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.4);
}

.nav-sticky.scrolled .btn-login {
    padding: 4px 16px;
    /* Reduced top/bottom by 1px to make it 2px less tall overall */
    font-size: 0.8rem;
}

/* Mobile Toggle */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: var(--space-2);
    z-index: 100;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background: none;
    border: none;
    width: 44px;
    height: 44px;
}

@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none;
    }
}

.mobile-menu-toggle span {
    width: 22px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    -webkit-transform-origin: center center;
    display: block;
}

/* Clean, centered X animation - spans are 2px tall with 5px gap = 7px between centers */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    -webkit-transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    -webkit-transform: translateY(-7px) rotate(-45deg);
}

/* Navigation Bible Verse */
.nav-verse {
    position: absolute;
    bottom: 10px;
    /* Moved up from -30px to sit on the banner */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--color-accent-cyan);
    font-size: 1.1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    opacity: 0.9;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    z-index: var(--z-sticky);
    pointer-events: none;
    /* Let clicks pass through if it overlaps */
}

@media (max-width: 768px) {
    .nav-verse {
        font-size: 1.0rem !important;
        font-family: var(--font-heading) !important;
        font-style: italic !important;
        white-space: normal;
        width: 95%;
        line-height: 1.2;
        bottom: 2px;
        /* Lowered by another 5px as requested (7px -> 2px) */
        left: 50%;
        transform: translateX(-50%);
        text-align: center !important;
        color: var(--color-accent-cyan) !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 1) !important;
        /* Maximum contrast for mobile */
        -webkit-text-fill-color: var(--color-accent-cyan);
        padding: 0 var(--space-4);
        z-index: 20;
        pointer-events: none;
    }
}

.nav-sticky.scrolled .nav-verse {
    display: block;
    /* Keep verse visible when scrolled */
    bottom: 5px;
    /* Tighter positioning for compact header */
    font-size: 1.0rem;
    /* Slightly smaller for the compact header */
    opacity: 0.8;
}

/* Ensure verse stays properly styled when scrolled on mobile */
@media (max-width: 768px) {
    .nav-sticky.scrolled .nav-verse {
        font-size: 0.9rem !important;
        bottom: 4px;
        /* Slightly more room when scrolled */
        font-family: var(--font-heading) !important;
        font-style: italic !important;
        color: var(--color-accent-cyan) !important;
        text-align: center !important;
        -webkit-text-fill-color: var(--color-accent-cyan);
        text-shadow: 0 2px 10px rgba(0, 0, 0, 1) !important;
    }
}


/* ================================================================
   7. HERO SECTION (Consolidated & Spacing Fixes)
   ================================================================ */

.hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    /* Force exact viewport height */
    min-height: 700px;
    /* Fallback min-height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-white);
}

.hero.hero-short {
    height: 220px;
    min-height: 220px;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, rgba(15, 43, 68, 1) 0%, rgba(0, 78, 124, 1) 100%);
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    /* Shift image up */
}

.hero-bg-visualizer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
    contain: strict;
    border: none;
    pointer-events: none;
    z-index: 1;
    display: block;
    /* Ensure canvas is visible on all devices */
}

/* Mobile: Keep visualizer ONLY in hero section */
@media (max-width: 768px) {
    .hero-bg-visualizer {
        display: none;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Semi-transparent overlay to show visualizer while keeping text readable */
    background: linear-gradient(135deg, rgba(15, 43, 68, 0.5) 0%, rgba(0, 78, 124, 0.4) 100%);
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 95vw;
    margin: 0 auto;
    /* Reduced padding for Splash Page fit (Desktop) */
    padding: 160px var(--space-4) var(--space-4);
    /* Increased to 160px to clear header and slide text down */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Mobile Fix: Ensure content clears nav and scrolls if needed */
@media (max-width: 768px) {
    .hero {
        height: auto !important;
        /* Allow scroll on mobile */
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: 2rem;
    }

    .hero-content {
        padding-top: 220px;
        /* Increased to clear floating banner on mobile */
        justify-content: flex-start;
    }

    .hero-feature-list {
        margin-top: 2rem;
        gap: var(--space-6);
        /* More breathing room */
    }

    .hero-sub {
        text-shadow: none;
    }

    /* Keep hero feature copy compact on mobile so text paints quickly and doesn't dominate LCP. */
    .feature-text {
        font-size: 1rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


.hero-text-content {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: var(--space-4);
}

.hero-subheader {
    font-size: 1.5625rem !important;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: var(--space-4);
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Bible Verse (Now inside Hero) */
.hero-verse-banner {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--color-accent-cyan);
    font-size: 1rem;
    margin-bottom: var(--space-3);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    opacity: 0.9;
}

.hero-sub {
    font-size: var(--text-2xl);
    /* Reduced slightly for fit */
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-5);
    opacity: 0;
    /* JS Reveal */
    color: var(--color-white) !important;
    /* Force White */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    line-height: 1.25;
}

/* LCP headline renders immediately (no reveal dependency). The per-word
   blur-in-up animation is the sole reveal; the line stays at its final
   resting position so the fade ends exactly where the text belongs. */
.hero-lcp-title,
.hero-lcp-title .hero-headline-line {
    opacity: 1;
    transform: none;
    animation: none;
}

/* Specific 20% distance reduction for standard headline */
.hero-sub.reveal {
    transform: translateY(160px);
    transition: opacity 1.35s cubic-bezier(0.25, 1, 0.5, 1), transform 1.35s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.1s !important;
    /* Locked to original timing */
}

.hero-sub.reveal.in-view {
    transform: translateY(0);
}

.hero-intro {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-6);
    color: var(--color-accent-cyan);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Hero Feature Grid - 4 Columns Wide */
.hero-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    /* Reduced gap */
    width: 100%;
    max-width: 1600px;
}

@media (min-width: 768px) {
    .hero-feature-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .hero-feature-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .hero-feature-list {
        grid-template-columns: repeat(5, 1fr);
    }

    .feature-item {
        padding: var(--space-4);
        /* Reduce padding to keep content lean */
    }

    .feature-text {
        font-size: 1.05rem;
        /* Slight reduction for 5-column view to prevent excessive bulk */
    }
}

/* Feature Item - Splash Fit */
/* Feature item styles moved to end of file to override reveal animations */

.feature-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.feature-heading {
    font-size: 1.5625rem;
    font-weight: 800;
    color: var(--color-accent-cyan);
    margin: 0;
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.64), 0 0 20px rgba(14, 165, 233, 0.32);
}

.feature-text {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.98);
}

.feature-bullet {
    color: var(--color-accent-cyan);
    font-size: 1.3em;
    line-height: 1;
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

.hero-actions {
    margin-top: var(--space-6);
    /* Reduced margin */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

/* 15% speed increase for bottom tagline */
.hero-actions.reveal {
    transform: translateY(180px);
    transition: opacity 1.7s cubic-bezier(0.25, 1, 0.5, 1), transform 1.7s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.75s !important;
    /* Added 0.15s to its current 0.6s delay */
}

.hero-actions.reveal.in-view {
    transform: translateY(0);
}

.hero-tagline {
    font-family: var(--font-heading);
    /* Outfit */
    color: var(--color-white);
    font-weight: 800;
    /* Bold to match Are you: */
    font-size: 1.5625rem;
    text-transform: none;
    /* Keep natural case */
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
    /* GLOW EFFECT: Stronger shadow + slight color boost */
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.64), 0 0 20px rgba(14, 165, 233, 0.32);
    opacity: 1;
}

/* Hero glow effect - applies same glow to "Are You:" */
.hero-glow {
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.8), 0 0 20px rgba(14, 165, 233, 0.4);
}

/* Glowing bullet points */
.feature-bullet {
    color: var(--color-accent-cyan);
    font-size: 1.5em;
    line-height: 1.2;
    margin-right: 0.1em;
    flex-shrink: 0;
    display: inline-block;
}

/* Clickable feature items */
.feature-item-clickable {
    cursor: pointer;
}

.feature-item-clickable:hover {
    /* Dynamics handled by .feature-item:hover */
}

/* ================================================================
   8. ANIMATION UTILITIES (Reveal)
   ================================================================ */

/* Unified animation timing across site */
/* Duration: 1s, Easing: smooth deceleration */

/* Initial Reveal State - From Bottom */
.reveal {
    opacity: 0;
    transform: translateY(180px);
    transition: opacity 1.7s cubic-bezier(0.25, 1, 0.5, 1),
        transform 1.7s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

@keyframes fallback-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Triggered State */
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Animation Delays - Shifted back 0.1s */
.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.3s;
}

.delay-3 {
    transition-delay: 0.4s;
}

.delay-4 {
    transition-delay: 0.5s;
}

.delay-5 {
    transition-delay: 0.6s;
}

.delay-6 {
    transition-delay: 0.7s;
}

.delay-7 {
    transition-delay: 0.8s;
}

/* Horizontal Reveals - From Left/Right */
.reveal-left {
    opacity: 0;
    transform: translateX(-225px);
    /* Reduced by 10% */
    transition: opacity 2.0s cubic-bezier(0.25, 1, 0.5, 1), transform 2.0s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(225px);
    /* Reduced by 10% */
    transition: opacity 2.0s cubic-bezier(0.25, 1, 0.5, 1), transform 2.0s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes fallback-reveal-left {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fallback-reveal-right {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.reveal-left.in-view,
.reveal-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Diagonal Reveals (45-degree angles) */
.reveal-bottom-left {
    opacity: 0;
    transform: translate(-225px, 225px);
    /* Reduced by 10% */
    transition: opacity 2.0s cubic-bezier(0.25, 1, 0.5, 1), transform 2.0s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-bottom-right {
    opacity: 0;
    transform: translate(225px, 225px);
    /* Reduced by 10% */
    transition: opacity 2.0s cubic-bezier(0.25, 1, 0.5, 1), transform 2.0s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes fallback-reveal-bottom-left {
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes fallback-reveal-bottom-right {
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.reveal-bottom-left.in-view,
.reveal-bottom-right.in-view {
    opacity: 1;
    transform: translate(0, 0);
}

/* Mobile: Override all reveals to come from bottom only */
@media (max-width: 768px) {

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-bottom-left,
    .reveal-bottom-right {
        opacity: 0;
        transform: translateY(60px);
        transition: opacity 1.5s cubic-bezier(0.1, 1, 0.2, 1), transform 1.5s cubic-bezier(0.1, 1, 0.2, 1);
        animation: fallback-reveal 0.1s ease-out 2.5s forwards;
    }

    .reveal.in-view,
    .reveal-left.in-view,
    .reveal-right.in-view,
    .reveal-bottom-left.in-view,
    .reveal-bottom-right.in-view {
        opacity: 1;
        transform: translateY(0);
    }

    /* Remove staggered delays on mobile - all animate immediately */
    .delay-1,
    .delay-2,
    .delay-3,
    .delay-4,
    .delay-5,
    .delay-6,
    .delay-7 {
        transition-delay: 0s;
    }
}

/* Cleaned up duplicate styles */

/* ================================================================
   8. PATIENT SERVICES WRAPPER
   ================================================================ */
/* Wrapper removed to allow full-width section flow */
.patient-services-wrapper {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.patient-services-wrapper::before {
    content: "Patient Services";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent-primary);
    color: var(--color-white);
    padding: var(--space-2) var(--space-6);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ================================================================
   9. TRUST STRIP (REMOVED or KEPT if needed elsewhere)
   ================================================================ */

.trust-strip {
    background: var(--color-gray-100);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.trust-icon {
    width: 32px;
    height: 32px;
    color: var(--color-accent-cyan);
    flex-shrink: 0;
}

.trust-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.trust-text strong {
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
}

.trust-text span {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

@media (min-width: 640px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .trust-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ================================================================
   9. GATEWAY SECTION
   ================================================================ */

.gateway {
    padding: var(--space-12) 0;
    background: #ffffff;
    position: relative;
    z-index: 10;
}

.gateway .container {
    background: transparent;
    padding: var(--space-12) var(--space-8);
    box-shadow: none;
}

.gateway-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.gateway-card {
    position: relative;
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    /* BASE STATE ANCHORS */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.025), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
    transform: translateY(0) scale(1);
}

.gateway-card.featured {
    border-color: var(--color-accent-cyan);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.13) 0%, rgba(0, 78, 124, 0.13) 100%);
}

.card-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: var(--color-accent-cyan);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gateway-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
}

.gateway-icon svg {
    width: 48px;
    height: 48px;
}

.patient-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.13) 0%, rgba(14, 165, 233, 0.13) 100%);
    color: #2563EB;
}

.b2b-icon {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.13) 0%, rgba(0, 78, 124, 0.13) 100%);
    color: var(--color-accent-cyan);
}

.opportunity-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.13) 0%, rgba(59, 130, 246, 0.13) 100%);
    color: #8b5cf6;
}

.gateway-card h3 {
    margin-bottom: var(--space-4);
}

.gateway-card>p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.gateway-features {
    list-style: none;
    margin-bottom: var(--space-8);
    flex-grow: 1;
}

.gateway-features li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--color-gray-700);
}

.gateway-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent-cyan);
    font-weight: var(--weight-bold);
}

@media (min-width: 768px) {
    .gateway-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ================================================================
   10. HOW IT WORKS SECTION
   ================================================================ */

.how-it-works {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(14, 165, 233, 0.13) 15%,
            rgba(14, 165, 233, 0.13) 85%,
            rgba(255, 255, 255, 0) 100%);
    width: 100%;
    position: relative;
    z-index: 10;
}

.how-it-works .container {
    background: transparent;
    padding: var(--space-16) var(--space-8);
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.timeline-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
    position: relative;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 31px;
    top: 64px;
    bottom: -48px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-accent-cyan) 0%, var(--color-gray-300) 100%);
}

.timeline-marker {
    position: relative;
    z-index: 1;
}

.timeline-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-cyan) 100%);
    color: var(--color-white);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
}

.timeline-content h3 {
    margin-bottom: var(--space-3);
}

.timeline-content p {
    color: var(--color-gray-600);
    margin-bottom: 0;
}

/* ================================================================
   11. SERVICES SECTION
   ================================================================ */

.services {
    padding: var(--space-12) 0;
    background: #ffffff;
    width: 100%;
    position: relative;
    z-index: 10;
}

.services .container {
    background: transparent;
    padding: var(--space-16) var(--space-8);
    box-shadow: none;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.service-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    /* BASE STATE ANCHORS */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.025), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
    transform: translateY(0) scale(1);
}

.service-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.service-icon svg {
    width: 40px;
    height: 40px;
}

.weight-loss-icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.13) 0%, rgba(245, 158, 11, 0.13) 100%);
    color: #ef4444;
}

.peptides-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.13) 0%, rgba(14, 165, 233, 0.13) 100%);
    color: #2563EB;
}

.hair-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.13) 0%, rgba(168, 85, 247, 0.13) 100%);
    color: #8b5cf6;
}

.skin-icon {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.13) 0%, rgba(251, 113, 133, 0.13) 100%);
    color: #ec4899;
}

.wellness-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.13) 0%, rgba(52, 211, 153, 0.13) 100%);
    color: #10b981;
}

.longevity-icon {
    background: linear-gradient(135deg, rgba(0, 78, 124, 0.13) 0%, rgba(14, 165, 233, 0.13) 100%);
    color: var(--color-accent-primary);
}

.service-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.service-card p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ================================================================
   12. B2B SECTION
   ================================================================ */

.b2b-section {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(14, 165, 233, 0.13) 15%,
            rgba(14, 165, 233, 0.13) 85%,
            rgba(255, 255, 255, 0) 100%);
    position: relative;
    z-index: 10;
}

.b2b-section .container {
    background: transparent;
    padding: var(--space-16) var(--space-8);
}

.b2b-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.b2b-image {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.175);
}

.b2b-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.b2b-content {
    padding: var(--space-6);
    /* Center align the pill */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centers the content */
    text-align: center;
    /* Centers the text */
}

.b2b-content .section-pillar-label {
    display: table;
    /* Shrink to fit content */
    margin: 0 auto var(--space-4) auto;
    /* Explicit auto margins */
}

.b2b-lead {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    margin-bottom: var(--space-8);
}

.b2b-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.b2b-feature {
    display: flex;
    gap: var(--space-4);
}

.feature-check {
    flex-shrink: 0;
    margin-top: var(--space-1);
}

.b2b-feature strong {
    display: block;
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
}

.b2b-feature p {
    color: var(--color-gray-600);
    margin-bottom: 0;
}

/* Grid override removed for centered flex layout */

/* ================================================================
   13. OPPORTUNITIES SECTION
   ================================================================ */

.opportunities-section {
    padding: var(--space-12) 0;
    background: #ffffff;
    position: relative;
    z-index: 10;
}

.opportunities-section .container {
    background: transparent;
    padding: var(--space-16) var(--space-8);
    box-shadow: none;
}

.opportunities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

/* Opportunity Card Mobile Fixes */
.opportunity-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    max-width: 100%;
    /* Ensure no overflow */
    /* BASE STATE ANCHORS */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.025), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
    transform: translateY(0) scale(1);
}

@media (max-width: 640px) {
    .opportunity-card {
        padding: var(--space-4);
        /* Reduce padding on mobile */
    }

    .opportunity-header {
        flex-direction: column;
        /* Stack header items if tight */
        align-items: flex-start;
        gap: var(--space-2);
    }

    .opportunity-header .badge {
        align-self: flex-start;
        /* Align badge cleanly */
    }
}



.opportunity-card.featured {
    border-color: var(--color-accent-cyan);
    border-width: 2px;
}

.opportunity-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.opportunity-card h3 {
    font-size: var(--text-xl);
    margin-bottom: 0;
}

.opportunity-card>p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.opportunity-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.opportunity-list li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--color-gray-700);
    font-size: var(--text-sm);
}

.opportunity-list li::before {
    content: '•';
    position: absolute;
    left: var(--space-3);
    color: var(--color-accent-cyan);
    font-weight: var(--weight-bold);
}

.split-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2) var(--space-4);
}

@media (min-width: 1024px) {
    .split-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.opportunities-cta {
    text-align: center;
}

@media (min-width: 640px) {
    .opportunities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================================
   14. FAQ SECTION
   ================================================================ */

.faq {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(14, 165, 233, 0.13) 15%,
            rgba(14, 165, 233, 0.13) 85%,
            rgba(255, 255, 255, 0) 100%);
}

.faq .container {
    background: transparent;
    padding: var(--space-16) var(--space-8);
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    text-align: left;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
    background: var(--color-white);
    transition: background-color var(--transition-base);
}

.faq-question:hover {
    background: var(--color-gray-100);
}

.faq-icon {
    flex-shrink: 0;
    transition: transform var(--transition-base);
    color: var(--color-accent-cyan);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-item.active {
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: inset 3px 0 0 #0EA5E9;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--transition-slow);
}

.faq-item.active .faq-answer {
    max-height: 500px;
    visibility: visible;
}

.faq-answer p {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-gray-600);
    line-height: 1.7;
}

.faq-answer a {
    color: var(--color-accent-cyan);
    text-decoration: underline;
}

/* ================================================================
   15. FINAL CTA SECTION
   ================================================================ */

.final-cta {
    padding: var(--space-20) 0;
    background: linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-accent-primary) 100%);
    color: var(--color-white);
    text-align: center;
}

.final-cta-content h2 {
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.final-cta-content p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto var(--space-8);
}

.final-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}

.final-cta-buttons .btn-secondary {
    background: transparent;
    border-color: var(--color-white);
    color: var(--color-white);
}

.final-cta-buttons .btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-accent-primary);
}

/* Override glassy fill for final CTA white buttons */
.final-cta-buttons .btn-secondary::before {
    background: var(--color-white);
}

.final-cta-buttons .btn-secondary:hover {
    color: var(--color-accent-primary);
}

.final-cta-buttons .btn-secondary::after {
    display: none;
}

@media (min-width: 640px) {
    .final-cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* ================================================================
   16. FOOTER
   ================================================================ */

.footer {
    padding: var(--space-16) 0 var(--space-8);
    background: var(--color-gray-900);
    color: var(--color-gray-300);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

/* Updated structure to match Header "Zoomed Badge" style */
.footer-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 200px;
    /* Readable size for footer */
    width: 200px;
    border-radius: 50%;

    background: transparent;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    /* Shadow for lift on dark bg */
    overflow: hidden;
    /* Crops zoomed image */

    margin-bottom: var(--space-6);
}

.footer-logo-image {
    height: 100%;
    width: 100%;
    object-fit: contain;
    /* Match header logo style */

    /* Removed zoom effect to match banner logo exactly */
    transform: none;
    transform-origin: center;
}

.footer-tagline {
    color: var(--color-gray-400);
    margin-bottom: var(--space-6);
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.badge-small {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border-radius: 4px;
    font-weight: var(--weight-medium);
}

.footer-col h3,
.footer-col h4 {
    color: var(--color-white);
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-links a {
    color: var(--color-gray-400);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-accent-cyan);
}

.footer-bottom {
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-bottom p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-2);
}

.disclaimer {
    font-size: var(--text-xs);
    color: var(--color-gray-600);
    font-style: italic;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* ================================================================
   17. BADGES
   ================================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.badge-blue {
    background: rgba(59, 130, 246, 0.13);
    color: var(--color-badge-blue);
}

.badge-green {
    background: rgba(16, 185, 129, 0.13);
    color: var(--color-badge-green);
}

.badge-purple {
    background: rgba(139, 92, 246, 0.13);
    color: var(--color-badge-purple);
}

.badge-cyan {
    background: rgba(14, 165, 233, 0.13);
    color: var(--color-badge-cyan);
}

.badge-inline {
    display: inline-flex;
    margin-left: var(--space-2);
}

/* ================================================================
   18. MODALS
   ================================================================ */

.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    animation: fadeIn var(--transition-base);
}

.modal-container {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp var(--transition-slow);
}

.modal-container.modal-large {
    max-width: 900px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-gray-200);
}

.modal-header h3 {
    margin-bottom: 0;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--color-gray-500);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.modal-body {
    padding: var(--space-6);
    overflow-y: auto;
}

.modal-intro {
    color: var(--color-gray-600);
    margin-bottom: var(--space-8);
}

/* ================================================================
   19. FORMS
   ================================================================ */

.modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group label {
    font-weight: var(--weight-medium);
    color: var(--color-gray-700);
    font-size: var(--text-sm);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: var(--space-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent-cyan);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.helper-text {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-2);
}

.volume-label,
.checkbox-group-label {
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
}

@media (min-width: 640px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Volume Matrix Table */
.volume-matrix {
    margin-top: var(--space-4);
    overflow-x: auto;
}

.volume-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* NEW MEDS LIST STYLES (for B2B Modal) */
.meds-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.med-item {
    display: grid;
    grid-template-columns: 1fr 200px;
    /* Name + Checkbox | Input - Increased to 200px to fit placeholder */
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.checkbox-simple {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-weight: var(--weight-medium);
    margin: 0;
}

.checkbox-simple input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-brand-blue);
}

.vol-input {
    padding: var(--space-2);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

@media (max-width: 480px) {
    .med-item {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}

.volume-table thead {
    background: var(--color-gray-100);
}

.volume-table th,
.volume-table td {
    padding: var(--space-3);
    text-align: center;
    border: 1px solid var(--color-gray-200);
}

.volume-table th {
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
    font-size: var(--text-sm);
}

.compound-col {
    text-align: left !important;
    min-width: 180px;
}

.compound-name {
    text-align: left;
    font-weight: var(--weight-medium);
    color: var(--color-gray-800);
}

.volume-table input[type="radio"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent-cyan);
}

/* Checkbox List */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.checkbox-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checkbox-item:hover {
    border-color: var(--color-accent-cyan);
    background: rgba(14, 165, 233, 0.02);
}

.checkbox-item input[type="checkbox"] {
    margin-top: var(--space-1);
    cursor: pointer;
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent-cyan);
    flex-shrink: 0;
}

.checkbox-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.checkbox-content strong {
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
}

.checkbox-content span {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.featured-checkbox {
    border-color: var(--color-accent-cyan);
    background: rgba(14, 165, 233, 0.03);
}

/* ================================================================
   20. ANIMATIONS
   ================================================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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



/* Patient Services Wrapper Background */
.patient-services-wrapper {
    /* Transparent wrapper to allow alternating child sections */
    background: transparent;
    border: none;
    border-radius: var(--radius-2xl);
    padding: var(--space-10) 0;
    margin: var(--space-12) 0;
    position: relative;
    z-index: 10;
    box-shadow: none;
    /* Clean flat look or consistent shadow? User asked for one box. */
}

/* Consistent Section Pillar Label */
.section-pillar-label {
    display: inline-block;
    /* Match .btn-primary gradient */
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-brand-navy) 100%);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    /* Match button weight */
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-md);
    /* Base shadow */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    /* Removed border to match clean button look */
    text-decoration: none;
    /* For links */
    cursor: pointer;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        color var(--transition-base),
        background var(--transition-base);
    /* Add transition for hover */
}

/* Add hover state to mimic buttons */
.section-pillar-label:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    /* Match btn-primary:hover shadow */
    color: var(--color-white);
    /* Ensure text stays white */
}

/* Center the pillars */
.section-header.center .section-pillar-label {
    margin-left: auto;
    margin-right: auto;
}

/* Hide the old pseudo-element label if we are adding it repeatedly in HTML */
.patient-services-wrapper::before {
    display: none;
}

/* ================================================================
   21. UTILITY CLASSES
   ================================================================ */

.text-center {
    text-align: center;
}

.hidden {
    display: none;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

.legal-page {
    padding: calc(var(--space-32) + var(--space-16)) 0 var(--space-24);
    background: var(--color-white);
    min-height: 100vh;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-kicker {
    color: var(--color-accent-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
}

.legal-content h1 {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    color: var(--color-brand-navy);
    margin-bottom: var(--space-4);
}

.legal-content .last-updated {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    margin-bottom: var(--space-12);
}

.legal-content h2 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--color-brand-navy);
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
}

.legal-content p {
    margin-bottom: var(--space-6);
    line-height: 1.8;
    color: var(--color-gray-700);
}

.legal-content ul {
    margin-bottom: var(--space-6);
    padding-left: var(--space-8);
}

.legal-content ul li {
    margin-bottom: var(--space-3);
    line-height: 1.8;
    color: var(--color-gray-700);
}

.legal-content a {
    color: var(--color-accent-primary);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-highlight,
.legal-contact-card {
    background: var(--color-silver-light);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin: var(--space-8) 0;
    padding: var(--space-6);
}

.legal-highlight p,
.legal-contact-card p {
    margin-bottom: var(--space-4);
}

.legal-highlight p:last-child,
.legal-contact-card p:last-child {
    margin-bottom: 0;
}

/* Dark navigation for legal pages */
.nav-dark {
    background: var(--color-brand-navy) !important;
    box-shadow: var(--shadow-md);
}

.nav-dark .nav-links a {
    color: var(--color-white);
}

.nav-dark .nav-links a:hover {
    color: var(--color-accent-cyan);
}

.legal-page-with-nav {
    padding-top: calc(var(--space-32) + 80px);
}

/* ================================================================
   XI. FEATURE BOXES & ENTRANCE
   ================================================================ */

.feature-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);

    /* Typography Boost */
    font-size: 1.15rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.98);

    /* Box Styling */
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Shadow Physics */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3), 0 0 0 rgba(14, 165, 233, 0);
    text-align: center;
}

/* Feature item entrance animations */
.feature-item.reveal,
.feature-item.reveal-left,
.feature-item.reveal-right,
.feature-item.reveal-bottom-left,
.feature-item.reveal-bottom-right {
    transition:
        opacity 1.2s ease-out,
        transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
        background 2.3s ease-in-out,
        border-color 2.3s ease-in-out,
        box-shadow 2.3s cubic-bezier(0.2, 0.5, 0.3, 1);
}

/* ================================================================
   XII. UNIFIED CARD PHYSICS (ULTRA SPECIFIC)
   Syncs timing, lift, and shadows across ALL cards.
   ================================================================ */

/* 1a. HERO BASE STATE (Original Timing) */
html body .feature-item {
    transition:
        transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 2.3s ease-in-out,
        border-color 2.3s ease-in-out,
        box-shadow 2.3s cubic-bezier(0.2, 0.5, 0.3, 1),
        opacity 2.3s ease-out !important;
}

/* 1b. NON-HERO BASE STATE (Glow 10% Faster, Lift 10% Slower) */
html body .gateway-card,
html body .service-card,
html body .opportunity-card {
    transition:
        transform 1.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 2.3s ease-in-out,
        border-color 2.3s ease-in-out,
        box-shadow 2.07s cubic-bezier(0.2, 0.5, 0.3, 1),
        opacity 2.07s ease-out !important;
}

/* 2. NON-HERO BOXES HOVER (Halved Intensity + Custom Timing) */
html body .gateway-card:hover,
html body .service-card:hover,
html body .opportunity-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    border-color: var(--color-accent-cyan) !important;

    /* Reduced shadow intensity by 30% per user request */
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.25),
        0 8px 25px rgba(14, 165, 233, 0.20),
        0 0 15px rgba(14, 165, 233, 0.12) !important;

    transition:
        transform 1.0s cubic-bezier(0.2, 0.8, 0.2, 1),
        /* Lift slowed 10% */
        background 1.04s ease-in-out,
        /* Glow sped 10% */
        border-color 1.04s ease-in-out,
        box-shadow 1.04s cubic-bezier(0.2, 0.5, 0.3, 1),
        opacity 1.04s ease-out !important;
}

/* 3. HERO BOXES HOVER (Full Intensity + Original Timing) */
html body .feature-item:hover {
    transform: translateY(-12px) scale(1.02) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: var(--color-accent-cyan) !important;

    /* Full intensity shadows */
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.69),
        0 25px 70px rgba(14, 165, 233, 0.58),
        0 0 45px rgba(14, 165, 233, 0.35) !important;

    transition:
        transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 1.15s ease-in-out,
        border-color 1.15s ease-in-out,
        box-shadow 1.15s cubic-bezier(0.2, 0.5, 0.3, 1),
        opacity 1.15s ease-out !important;
}

/* ================================================================
   PROFESSIONAL VISUAL REFINEMENTS
   Scroll progress, button shine, header accents, timeline,
   card borders, and image treatment — no content changes.
   ================================================================ */

/* --- 1. Scroll Progress Bar --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent-cyan), var(--color-accent-cyan-light));
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
}

/* --- 2. Button Shine Sweep --- */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 70%
    );
    transition: left 0.5s ease;
    pointer-events: none;
}

.btn-primary:hover::after {
    left: 100%;
}

/* --- 3. Section Header Accent Lines --- */
.section-header.center h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-cyan));
    margin: var(--space-4) auto 0;
    border-radius: 1px;
}

/* --- 4. Timeline Marker Pulse --- */
@keyframes timeline-ping {
    0%, 100% {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                    0 4px 6px -2px rgba(0, 0, 0, 0.05),
                    0 0 0 0 rgba(14, 165, 233, 0.35);
    }
    50% {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                    0 4px 6px -2px rgba(0, 0, 0, 0.05),
                    0 0 0 12px rgba(14, 165, 233, 0);
    }
}

/* --- 5. Timeline Number Scale Reveal --- */
@keyframes number-pop {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    60% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.timeline-number.revealed {
    animation: number-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               timeline-ping 3s cubic-bezier(0, 0, 0.2, 1) 0.8s infinite;
}

/* --- 6. Card Top-Border Accent --- */
.service-card {
    position: relative;
}

.gateway-card::before,
.service-card::before,
.opportunity-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-cyan));
    border-radius: 16px 16px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.gateway-card:hover::before,
.service-card:hover::before,
.opportunity-card:hover::before {
    transform: scaleX(1);
}

/* --- 7. B2B Image Edge Blend --- */
.b2b-img {
    -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}

/* ================================================================
   MOBILE: Ensure solid backgrounds, no visualizer bleed
   ================================================================ */
@media (max-width: 768px) {

    /* Force solid white background on all content sections */
    body {
        background: var(--color-white) !important;
    }

    /* Standard Alternating Pattern for Mobile */
    .gateway,
    .services,
    .opportunities-section {
        background: #ffffff !important;
    }

    .how-it-works,
    .b2b-section,
    .faq {
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(14, 165, 233, 0.13) 15%,
                rgba(14, 165, 233, 0.13) 85%,
                rgba(255, 255, 255, 0) 100%) !important;
    }

    .patient-services-wrapper {
        background: transparent !important;
    }

    /* Ensure cards are fully visible with opaque backgrounds */
    .gateway-card,
    .service-card,
    .opportunity-card,
    .faq-item {
        background: #ffffff !important;
    }
}

/* =================================================================
   PLATFORM LANDING LAYER — B2B telehealth operations
   Appended 2026-04. Scoped to the new platform-first homepage.
   No glassmorphism; no gradient blobs. Reuses existing tokens.
   ================================================================= */

:root {
    --rx-ink: #061b2d;
    --rx-ink-2: #0b2a44;
    --rx-line: rgba(6, 27, 45, 0.08);
    --rx-line-strong: rgba(6, 27, 45, 0.16);
    --rx-surface: #ffffff;
    --rx-surface-mute: #f4f7fb;
    --rx-surface-ice: #eaf3fa;
    --rx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --rx-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Anchor offsets so sticky nav doesn't hide section heads */
#platform,
#surfaces,
#storefront,
#audiences,
#programs,
#nutrition,
#faq {
    scroll-margin-top: 96px;
}

/* Common section head used in new sections */
.platform-section .section-head,
.surfaces-section .section-head,
.audiences-section .section-head,
.programs-section .section-head {
    max-width: 760px;
    margin: 0 auto var(--space-12);
    text-align: center;
}

.section-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-primary);
    margin-bottom: var(--space-4);
    padding: 0.28rem 0.7rem;
    border: 1px solid rgba(0, 78, 124, 0.18);
    border-radius: var(--radius-full);
    background: rgba(56, 189, 248, 0.08);
}

.section-eyebrow-on-dark {
    color: #a8d6ff;
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.28);
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--rx-ink);
    margin: 0 0 var(--space-4);
    font-weight: 600;
}

.section-lede {
    color: var(--color-gray-600);
    font-size: 1.08rem;
    line-height: 1.65;
    margin: 0;
}

.container-wide {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ---------- HERO (platform) ---------- */
.hero.hero-platform {
    position: relative;
    overflow: hidden;
    padding: clamp(6rem, 10vw, 10rem) 0 clamp(4rem, 7vw, 7rem);
    background:
        radial-gradient(1200px 600px at 70% -10%, rgba(56, 189, 248, 0.10), transparent 60%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 70%);
    isolation: isolate;
}

.hero.hero-platform .hero-grid-overlay {
    display: none;
}

.hero.hero-platform .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.9) 100%);
    pointer-events: none;
    z-index: 0;
}

.hero.hero-platform .hero-background,
.hero.hero-platform .hero-bg-visualizer {
    z-index: 0;
}

.hero-platform-grid {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 55%;
}

.hero-copy {
    max-width: 640px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-primary);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    background: rgba(14, 165, 233, 0.09);
    border: 1px solid rgba(0, 78, 124, 0.18);
    margin-bottom: var(--space-6);
}

.hero-headline {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(2.2rem, 1rem + 3.8vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -0.028em;
    color: var(--rx-ink);
    margin: 0 0 var(--space-6);
}

.hero-headline-line {
    display: block;
    opacity: 0;
    transform: translateY(14px);
    animation: rxHeroReveal 0.9s var(--rx-ease-out) forwards;
}

.hero-headline-line:nth-child(1) { animation-delay: 0.05s; }
.hero-headline-line:nth-child(2) { animation-delay: 0.18s; }
.hero-headline-line:nth-child(3) { animation-delay: 0.31s; }
.hero-headline-line:nth-child(4) { animation-delay: 0.44s; }

.hero-headline-accent {
    background: linear-gradient(100deg, #0EA5E9 0%, #004E7C 60%, #1a3d5c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes rxHeroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-lead {
    color: var(--color-gray-600);
    font-size: 1.12rem;
    line-height: 1.65;
    margin: 0 0 var(--space-8);
    max-width: 560px;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.95rem 1.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.98rem;
    border-radius: var(--radius-full);
    color: var(--color-accent-primary);
    background: transparent;
    border: 2px solid var(--color-accent-primary);
    box-shadow: none;
    transition: transform 0.2s var(--rx-ease-out), border-color 0.2s, color 0.2s, background 0.2s;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-hero-secondary:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-white);
    transform: translateY(-1px);
}

/* Glassy side-fill for hero secondary button */
.btn-hero-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-hero-secondary:hover::before {
    transform: scaleX(1);
}

/* Glassy shimmer overlay for hero secondary */
.btn-hero-secondary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    transition: left 0.6s ease;
    z-index: 0;
    pointer-events: none;
}

.btn-hero-secondary:hover::after {
    left: 100%;
}

.btn-hero-tertiary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-accent-primary);
    text-decoration: none;
    position: relative;
    padding: 0.35rem 0;
}

.btn-hero-tertiary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
    transform-origin: left;
    transition: transform 0.3s var(--rx-ease-out), opacity 0.3s;
}

.btn-hero-tertiary:hover::after {
    opacity: 1;
    transform: scaleX(1.02);
}

.btn-hero-tertiary svg {
    transition: transform 0.3s var(--rx-ease-out);
}

.btn-hero-tertiary:hover svg {
    transform: translate(2px, -2px);
}

.hero-trustline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4) var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--rx-line);
}

.hero-trustline li {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    line-height: 1.45;
}

.hero-trust-figure {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--rx-ink);
    letter-spacing: -0.01em;
    margin-bottom: 0.15rem;
}

/* ---------- Hero signature network SVG ---------- */
.hero-network-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 560px;
    margin-left: auto;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.hero-network-floor {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -4%;
    height: 60px;
    background: radial-gradient(ellipse at 50% 0%, rgba(14, 165, 233, 0.25), transparent 70%);
    filter: blur(14px);
    opacity: 0.55;
    pointer-events: none;
    z-index: -1;
}

.hero-network-svg {
    width: 100%;
    height: auto;
    overflow: visible;
    display: block;
}

.hero-network-svg .ring {
    fill: none;
    stroke: rgba(14, 165, 233, 0.18);
    stroke-width: 1;
    stroke-dasharray: 2 6;
    transform-origin: 280px 280px;
    animation: rxRingSpin 60s linear infinite;
}

.hero-network-svg .ring-2 {
    animation-duration: 90s;
    animation-direction: reverse;
    stroke: rgba(14, 165, 233, 0.12);
}

.hero-network-svg .ring-3 {
    animation-duration: 120s;
    stroke: rgba(14, 165, 233, 0.08);
}

@keyframes rxRingSpin {
    to { transform: rotate(360deg); }
}

.hero-network-svg .edge {
    stroke-width: 1.4;
    opacity: 0.75;
}

/* Legacy circular node — kept for any non-medallion nodes (currently none) */
.hero-network-svg .node:not(.node-medallion) circle {
    fill: url(#rxNodeFill);
    stroke: rgba(0, 78, 124, 0.28);
    stroke-width: 1.3;
    filter: drop-shadow(0 4px 8px rgba(6, 27, 45, 0.09));
    transition: transform 0.35s var(--rx-ease-out);
    transform-box: fill-box;
    transform-origin: center;
}

.hero-network-svg .node:not(.node-medallion):hover circle {
    transform: scale(1.08);
}

/* ---------- HEXAGONAL MEDALLION NODES ---------- */
/* Each satellite node renders a hexagonal medallion with a purpose-drawn
   sigil. The sigils share a common visual language: deep navy ink, cyan
   accents on the "active" element of each glyph, soft white gloss, and a
   tiny pulse dot tying every medallion back to the central hub. */

/* The medallion's parent <g> carries an SVG transform="translate(...)"
   placing it at the satellite position. We deliberately do NOT add a CSS
   transform on hover here — combining it with the existing translate
   causes a visible "jump" because the transform origin and box change
   between the two states. Hover lift is handled inside .node-sigil. */
.hero-network-svg .node-medallion {
    transition: filter 0.45s var(--rx-ease-out);
    filter: drop-shadow(0 8px 18px rgba(6, 27, 45, 0.18))
            drop-shadow(0 1px 2px rgba(6, 27, 45, 0.10));
}

.hero-network-svg .node-medallion:hover {
    filter: drop-shadow(0 12px 26px rgba(8, 60, 100, 0.32))
            drop-shadow(0 2px 4px rgba(6, 27, 45, 0.14));
}

/* Medallion frame parts (set via the <symbol> in defs) */
.hero-network-svg .medallion-shadow {
    fill: rgba(8, 32, 58, 0.25);
    transform: translate(0px, 1.5px);
}

.hero-network-svg .medallion-face {
    /* fill set inline — here we just animate the face on arrival */
    transition: filter 0.45s var(--rx-ease-out);
}

.hero-network-svg .medallion-rim {
    transition: stroke-width 0.3s var(--rx-ease-out);
}

.hero-network-svg .node-medallion:hover .medallion-rim {
    stroke-width: 1.9;
}

.hero-network-svg .medallion-gloss {
    pointer-events: none;
    opacity: 0.75;
}

.hero-network-svg .medallion-pulse {
    fill: #38BDF8;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.95));
    transform-box: fill-box;
    transform-origin: center;
    animation: rxMedallionPulse 4.4s ease-in-out infinite;
}

.hero-network-svg .node-medallion[data-node="n2"] .medallion-pulse { animation-delay: 0.6s; }
.hero-network-svg .node-medallion[data-node="n3"] .medallion-pulse { animation-delay: 1.2s; }
.hero-network-svg .node-medallion[data-node="n4"] .medallion-pulse { animation-delay: 1.8s; }
.hero-network-svg .node-medallion[data-node="n5"] .medallion-pulse { animation-delay: 2.4s; }
.hero-network-svg .node-medallion[data-node="n6"] .medallion-pulse { animation-delay: 3.0s; }
.hero-network-svg .node-medallion[data-node="n7"] .medallion-pulse { animation-delay: 3.6s; }

@keyframes rxMedallionPulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.45); }
}

/* ---------- SIGIL INK SYSTEM ----------
   Every glyph element opts into one of these roles. Hover lifts the
   accent elements (the "active" detail of each sigil) toward cyan, so
   the medallion reads as energizing when the user looks at it. */

/* Sigil stays put on hover — feedback is carried by the rim stroke
   widening and the cyan accent glow, both of which animate without
   changing element bounds (so no jump). */
.hero-network-svg .node-sigil {
    transition: opacity 0.3s var(--rx-ease-out);
}

.hero-network-svg .sigil-fill {
    fill: url(#rxSigilInk);
}

.hero-network-svg .sigil-fill-back {
    fill: url(#rxSigilInk);
    opacity: 0.55;
}

.hero-network-svg .sigil-stroke {
    fill: none;
    stroke: url(#rxSigilInk);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-network-svg .sigil-gloss-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 0.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-network-svg .sigil-accent {
    fill: url(#rxSigilAccent);
    transition: filter 0.35s var(--rx-ease-out);
}

.hero-network-svg .sigil-accent-stroke {
    fill: none;
    stroke: url(#rxSigilAccent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: filter 0.35s var(--rx-ease-out);
}

.hero-network-svg .sigil-cutout {
    fill: rgba(255, 255, 255, 0.92);
}

.hero-network-svg .sigil-cutout-dot {
    fill: #ffffff;
}

.hero-network-svg .node-medallion:hover .sigil-accent,
.hero-network-svg .node-medallion:hover .sigil-accent-stroke {
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.85));
}

/* Inline glyph type — the small "Rx" inside the pharmacy bottle, the "$"
   on the price tag, the "×3" on the bulk-order stack. These are tiny
   labels-as-iconography rather than added text. */
.hero-network-svg .sigil-rx-mark {
    fill: #003a5e;
    font-family: var(--font-heading), 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 7px;
    letter-spacing: -0.02em;
}

.hero-network-svg .sigil-rx-mark-sm {
    font-size: 6px;
    fill: #ffffff;
}

.hero-network-svg .sigil-qty-mark {
    fill: url(#rxSigilAccent);
    font-family: var(--font-heading), 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 5.5px;
    letter-spacing: -0.02em;
}

/* ---------- Per-sigil micro-animation ----------
   Each medallion has one element that animates subtly so the row of
   icons feels alive without being noisy. Animation periods are spread
   out and easings are gentle — these are background atmosphere, not
   attention-grabbers. */

.hero-network-svg .sigil-bar {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: rxBarRise 5.5s var(--rx-ease-inout) infinite;
}
.hero-network-svg .sigil-bar-1 { animation-delay: 0s;   }
.hero-network-svg .sigil-bar-2 { animation-delay: 0.4s; }
.hero-network-svg .sigil-bar-3 { animation-delay: 0.8s; }

@keyframes rxBarRise {
    0%, 100% { transform: scaleY(0.85); }
    50%      { transform: scaleY(1);    }
}

.hero-network-svg .sigil-trend {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: rxTrendDraw 6s var(--rx-ease-inout) infinite;
}

@keyframes rxTrendDraw {
    0%   { stroke-dashoffset: 30; }
    35%  { stroke-dashoffset: 0;  }
    70%  { stroke-dashoffset: 0;  }
    100% { stroke-dashoffset: 30; }
}

.hero-network-svg .sigil-capsule {
    transform-box: fill-box;
    transform-origin: center;
    animation: rxCapsuleTip 6s ease-in-out infinite;
}

@keyframes rxCapsuleTip {
    0%, 100% { transform: translate(8px, 8px) rotate(28deg); }
    50%      { transform: translate(9px, 9px) rotate(42deg); }
}

.hero-network-svg .sigil-tubing {
    stroke-dasharray: 26;
    stroke-dashoffset: 0;
    animation: rxTubingFlow 5s linear infinite;
}

@keyframes rxTubingFlow {
    0%   { stroke-dashoffset: 0;  }
    100% { stroke-dashoffset: -26; }
}

.hero-network-svg .sigil-check {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    animation: rxCheckIn 4.6s var(--rx-ease-inout) infinite;
}

@keyframes rxCheckIn {
    0%, 100% { stroke-dashoffset: 14; }
    35%, 70% { stroke-dashoffset: 0;  }
}

/* Reduced motion — keep medallions visible, drop the loops */
@media (prefers-reduced-motion: reduce) {
    .hero-network-svg .medallion-pulse,
    .hero-network-svg .sigil-bar,
    .hero-network-svg .sigil-trend,
    .hero-network-svg .sigil-capsule,
    .hero-network-svg .sigil-tubing,
    .hero-network-svg .sigil-check {
        animation: none;
    }
    .hero-network-svg .sigil-trend,
    .hero-network-svg .sigil-check {
        stroke-dashoffset: 0;
    }
}

.hero-network-svg .node text {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    fill: var(--rx-ink);
    text-anchor: middle;
    letter-spacing: 0.01em;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.hero-network-svg .hub-halo {
    fill: rgba(14, 165, 233, 0.08);
    stroke: rgba(14, 165, 233, 0.18);
    stroke-width: 1;
    /* Very slow ambient breath — subtle enough to feel static, not a flash */
    animation: rxHubPulse 14s var(--rx-ease-inout) infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.hero-network-svg .hub-ring {
    fill: none;
    stroke: rgba(14, 165, 233, 0.42);
    stroke-width: 1.25;
    stroke-dasharray: 4 6;
    transform-origin: 280px 280px;
    animation: rxRingSpin 30s linear infinite;
}

.hero-network-svg .hub-core {
    filter: drop-shadow(0 10px 30px rgba(14, 78, 124, 0.35));
}

.hero-network-svg .hub-label-1 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    fill: #ffffff;
    text-anchor: middle;
    letter-spacing: 0.02em;
}

.hero-network-svg .hub-label-2 {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.28em;
    fill: rgba(168, 214, 255, 0.9);
    text-anchor: middle;
}

@keyframes rxHubPulse {
    0%, 100% { transform: scale(1);    opacity: 0.92; }
    50%      { transform: scale(1.018); opacity: 1;    }
}

/* Travelling pulses — ride offset-paths from each satellite node into the hub */
.hero-network-svg .pulse {
    fill: #7dd3fc;
    filter: drop-shadow(0 0 5px rgba(125, 211, 252, 0.6));
    offset-rotate: 0deg;
    opacity: 0;
}

/* Particle drift — slow, even, hypnotic. All 7 particles share an 8s
   travel duration and are staggered 8/7 ≈ 1.14s apart so that once
   the system settles, exactly one particle arrives at the hub every
   ~1.14s. Each ripple below is delay-locked to its particle's
   arrival moment so contact and pulse are visually coupled. */
.hero-network-svg .pulse.p1 {
    offset-path: path("M280 70 L280 280");
    animation: rxPulseRide 13s linear 0s infinite;
}
.hero-network-svg .pulse.p2 {
    offset-path: path("M470 140 L280 280");
    animation: rxPulseRide 13s linear 1.8s infinite;
}
.hero-network-svg .pulse.p3 {
    offset-path: path("M510 290 L280 280");
    animation: rxPulseRide 13s linear 3.6s infinite;
}
.hero-network-svg .pulse.p4 {
    offset-path: path("M460 444 L280 280");
    animation: rxPulseRide 13s linear 5.4s infinite;
}
.hero-network-svg .pulse.p5 {
    offset-path: path("M100 444 L280 280");
    animation: rxPulseRide 13s linear 7.2s infinite;
}
.hero-network-svg .pulse.p6 {
    offset-path: path("M50 290 L280 280");
    animation: rxPulseRide 13s linear 9s infinite;
}
.hero-network-svg .pulse.p7 {
    offset-path: path("M90 140 L280 280");
    animation: rxPulseRide 13s linear 10.8s infinite;
}

/* Ease-in the fade so particles ghost into view, hold, then the last
   5% lets them approach the hub at full opacity before the ripple
   takes over — no hard pop at the contact frame. */
@keyframes rxPulseRide {
    0%   { offset-distance: 0%;   opacity: 0; }
    16%  {                         opacity: 0.9; }
    92%  {                         opacity: 0.9; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* Pause pulses when the hero wrap is marked inactive (offscreen / small screens) */
.hero-network-wrap[data-rx-paused="true"] .pulse,
.hero-network-wrap[data-rx-paused="true"] .ring,
.hero-network-wrap[data-rx-paused="true"] .hub-ring,
.hero-network-wrap[data-rx-paused="true"] .hub-halo {
    animation-play-state: paused;
}

/* ---------- WHAT YOU GET (capability grid) ---------- */
.platform-section {
    position: relative;
    padding: clamp(4rem, 7vw, 7rem) 0;
    background: linear-gradient(180deg, #f0f4f8 0%, #ffffff 12%, #f4f8fc 100%);
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.capability-card {
    position: relative;
    padding: var(--space-8);
    background: #ffffff;
    border: 1px solid var(--rx-line);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(6, 27, 45, 0.04);
    transition: transform 0.35s var(--rx-ease-out), border-color 0.25s, box-shadow 0.3s;
    overflow: hidden;
}

.capability-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #0EA5E9, #38BDF8, #0EA5E9);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--rx-ease-out);
}

.capability-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 0 10px 25px -12px rgba(6, 27, 45, 0.16);
}

.capability-card:hover::before {
    transform: scaleX(1);
}

.capability-index {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--color-accent-cyan);
    margin-bottom: var(--space-5);
}

.capability-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(0, 78, 124, 0.1));
    color: var(--color-accent-primary);
    margin-bottom: var(--space-5);
}

.capability-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--rx-ink);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-3);
}

.capability-card p {
    color: var(--color-gray-600);
    font-size: 0.97rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------- SURFACES ---------- */
.surfaces-section {
    position: relative;
    padding: clamp(4rem, 7vw, 7rem) 0;
    background: #ffffff;
    overflow: hidden;
}

.surfaces-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(6, 27, 45, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(6, 27, 45, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 78%);
    pointer-events: none;
    opacity: 0.6;
}

.surfaces-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.surface-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-8);
    background: #ffffff;
    border: 1px solid var(--rx-line);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(6, 27, 45, 0.04);
    overflow: hidden;
    transition: transform 0.35s var(--rx-ease-out), border-color 0.25s, box-shadow 0.3s;
}

.surface-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 0 14px 32px -14px rgba(6, 27, 45, 0.18);
}

.surface-card.surface-featured {
    background: linear-gradient(180deg, #06263f 0%, #0b3a5f 100%);
    border-color: rgba(56, 189, 248, 0.3);
    color: #eaf3fa;
    box-shadow: 0 22px 50px -24px rgba(6, 27, 45, 0.45);
}

.surface-card.surface-featured:hover {
    box-shadow: 0 28px 60px -22px rgba(6, 27, 45, 0.55);
}

/* Specular shimmer sweep on the dark featured card — triggers on scroll reveal */
.surface-card.surface-featured::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 60%);
    pointer-events: none;
    z-index: 1;
    transform: translateX(-160%);
}
.surface-card.surface-featured.in-view::after {
    animation: surfaceShimmer 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}
@keyframes surfaceShimmer {
    from { transform: translateX(-160%); }
    to   { transform: translateX(220%); }
}

.surface-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.surface-tag {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent-cyan);
    font-weight: 600;
}

.surface-card.surface-featured .surface-tag {
    color: #7dd3fc;
}

.surface-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    color: var(--color-gray-700);
    background: var(--color-gray-100);
    border: 1px solid var(--rx-line);
}

.surface-pill.surface-pill-accent {
    color: #0f2a42;
    background: #b7e4fb;
    border-color: rgba(14, 165, 233, 0.4);
}

.surface-card.surface-featured .surface-pill {
    color: #c8e2f4;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.surface-card h3 {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--rx-ink);
    margin: 0 0 var(--space-3);
}

.surface-card.surface-featured h3 {
    color: #ffffff;
}

.surface-card > p {
    color: var(--color-gray-600);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0 0 var(--space-5);
}

.surface-card.surface-featured > p {
    color: #c9dfee;
}

.surface-features {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: grid;
    gap: 0.5rem;
    flex: 1;
}

.surface-features li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--color-gray-700);
    font-size: 0.93rem;
    line-height: 1.5;
}

.surface-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-accent-cyan);
    transform: rotate(45deg);
}

.surface-card.surface-featured .surface-features li {
    color: #dbeaf6;
}

.surface-card.surface-featured .surface-features li::before {
    background: #7dd3fc;
}

.surface-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-accent-primary);
    text-decoration: none;
    margin-top: auto;
    transition: gap 0.25s var(--rx-ease-out);
}

.surface-link:hover {
    gap: 0.65rem;
}

.surface-card.surface-featured .surface-link {
    color: #7dd3fc;
}

/* ---------- STOREFRONT PROOF ---------- */
.storefront-proof {
    padding: clamp(4rem, 7vw, 7rem) 0;
    background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%);
}

.proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.proof-copy {
    max-width: 540px;
}

.proof-copy .section-title {
    margin-top: var(--space-4);
}

.proof-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-6) 0 var(--space-6);
}

.proof-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.proof-chips li {
    padding: 0.4rem 0.85rem;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-gray-700);
    background: #ffffff;
    border: 1px solid var(--rx-line-strong);
    border-radius: var(--radius-full);
}

/* Browser mock ---------------------------------------- */
.proof-browser {
    position: relative;
}

.browser-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--rx-line-strong);
    box-shadow:
        0 24px 60px -28px rgba(6, 27, 45, 0.35),
        0 2px 6px rgba(6, 27, 45, 0.05);
    transform: translateY(0);
    transition: transform 0.5s var(--rx-ease-out), box-shadow 0.5s;
}

.browser-frame:hover {
    transform: translateY(-4px);
    box-shadow:
        0 32px 70px -28px rgba(6, 27, 45, 0.42),
        0 3px 8px rgba(6, 27, 45, 0.06);
}

.browser-chrome {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(180deg, #f4f7fb, #e9eef4);
    border-bottom: 1px solid var(--rx-line);
}

.browser-dots {
    display: flex;
    gap: 0.4rem;
}

.browser-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #d1d8e0;
}

.browser-dots span:nth-child(1) { background: #ff6057; }
.browser-dots span:nth-child(2) { background: #ffbd2e; }
.browser-dots span:nth-child(3) { background: #27c93f; }

.browser-url {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-full);
    background: #ffffff;
    border: 1px solid var(--rx-line);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    color: var(--color-gray-600);
    letter-spacing: 0.01em;
}

.browser-url svg { color: #10b981; }

.browser-tools {
    display: flex;
    gap: 0.35rem;
}

.browser-tools span {
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: #a0aec0;
}

.browser-viewport {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    aspect-ratio: 16 / 11;
    background: linear-gradient(180deg, #eef5fb 0%, #ffffff 38%);
    padding: 1rem 1rem 1.1rem;
    overflow: hidden;
}

.sp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(6, 27, 45, 0.06);
}

.sp-logo {
    width: 62px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(90deg, #004E7C, #0EA5E9);
}

.sp-nav-links {
    display: flex;
    gap: 0.8rem;
    color: var(--color-gray-600);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.sp-cart {
    width: 22px;
    height: 12px;
    border-radius: 3px;
    background: rgba(6, 27, 45, 0.12);
}

.sp-hero {
    display: grid;
    gap: 0.35rem;
    padding: 0.8rem 0 0.9rem;
    border-bottom: 1px solid rgba(6, 27, 45, 0.06);
}

.sp-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-primary);
}

.sp-h1 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--rx-ink);
    letter-spacing: -0.01em;
}

.sp-sub {
    font-size: 0.74rem;
    color: var(--color-gray-600);
}

.sp-btn {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.38rem 0.85rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #004E7C, #0EA5E9);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 0.25rem;
    box-shadow: 0 6px 14px -6px rgba(14, 78, 124, 0.5);
}

.sp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.sp-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid rgba(6, 27, 45, 0.06);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(6, 27, 45, 0.03);
}

.sp-img {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: linear-gradient(135deg, #e3f1fc, #c7e4f7);
}

.sp-img-a { background: linear-gradient(135deg, #d6ecfa, #9acceb); }
.sp-img-b { background: linear-gradient(135deg, #e7f4d9, #b4dba0); }
.sp-img-c { background: linear-gradient(135deg, #fce3ec, #f1a4c1); }
.sp-img-d { background: linear-gradient(135deg, #f3ebd9, #d7bd8a); }

.sp-title {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rx-ink);
    line-height: 1.2;
}

.sp-price {
    font-size: 0.66rem;
    color: var(--color-accent-primary);
    font-weight: 600;
}

.browser-hint {
    position: absolute;
    inset: auto 0.9rem 0.7rem auto;
    padding: 0.25rem 0.55rem;
    background: rgba(6, 27, 45, 0.88);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s var(--rx-ease-out), transform 0.25s var(--rx-ease-out);
    pointer-events: none;
}

.browser-frame:hover .browser-hint {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- AUDIENCES ---------- */
.audiences-section {
    padding: clamp(4rem, 7vw, 7rem) 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.audiences-section > .container {
    position: relative;
    z-index: 2;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.audience-card {
    position: relative;
    padding: var(--space-8);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid var(--rx-line);
    border-radius: var(--radius-xl);
    transition: transform 0.35s var(--rx-ease-out), border-color 0.25s, box-shadow 0.3s;
}

.audience-card:hover {
    transform: translateY(-3px);
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 0 14px 28px -14px rgba(6, 27, 45, 0.16);
}

.audience-icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    background: rgba(14, 165, 233, 0.1);
    color: var(--color-accent-primary);
    margin-bottom: var(--space-4);
}

.audience-card h3 {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--rx-ink);
    margin: 0 0 var(--space-3);
}

.audience-card p {
    color: var(--color-gray-600);
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------- PROGRAMS / DOCK CATALOG ---------- */
.programs-section {
    position: relative;
    padding: clamp(4rem, 7vw, 7rem) 0;
    background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
    overflow: hidden;
}

.dock-catalog {
    max-width: 960px;
    margin: 0 auto;
}

/* --- Detail card — curated display frame --- */
.dock-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(59, 130, 246, 0.12) 50%, rgba(14, 165, 233, 0.22)) border-box;
    padding: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 1.75rem;
    min-height: 260px;
    box-shadow:
        0 0 0 4px rgba(14, 165, 233, 0.04),
        0 24px 64px -16px rgba(6, 27, 45, 0.10),
        0 8px 20px -8px rgba(6, 27, 45, 0.06);
}
/* Inner inset hairline — double-frame treatment */
.dock-card::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 20px;
    border: 1px solid rgba(14, 165, 233, 0.08);
    pointer-events: none;
    z-index: 1;
}

.dock-card__glow {
    position: absolute;
    top: -120px;
    left: -120px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.07);
    filter: blur(120px);
    pointer-events: none;
}

.dock-card__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.dock-card__badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dock-card__badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--rx-line);
    background: #f8fbfe;
}

.dock-card__badge-icon svg {
    width: 20px;
    height: 20px;
    stroke: #0EA5E9;
}

.dock-card__counter {
    font-family: 'IBM Plex Mono', var(--font-mono, monospace);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--color-gray-500);
}

.dock-card__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--rx-ink);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.dock-card__detail {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-gray-500);
    max-width: 28rem;
    margin: 0;
}

.dock-card__right {
    border-left: 1px solid var(--rx-line);
    padding-left: 2.5rem;
}

.dock-card__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dock-card__items li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rx-line);
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--rx-ink);
}

.dock-card__items li:last-child {
    border-bottom: none;
}

.dock-card__item-num {
    font-family: 'IBM Plex Mono', var(--font-mono, monospace);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

/* --- Card transition system --- */
.dock-card__badge {
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0s;
}
.dock-card__title {
    transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.04s;
}
.dock-card__detail {
    transition: opacity 0.44s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.44s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.08s;
}
.dock-card__right {
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.06s;
}

/* Exit: fast fade out + slide up */
.dock-card--exiting .dock-card__badge,
.dock-card--exiting .dock-card__title,
.dock-card--exiting .dock-card__detail {
    opacity: 0;
    transform: translateY(-10px);
    transition-duration: 0.14s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.dock-card--exiting .dock-card__right {
    opacity: 0;
    transform: translateX(-8px);
    transition-duration: 0.12s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

/* Enter: offscreen positions (set by JS, then removed to animate in) */
.dock-card--entering .dock-card__badge {
    opacity: 0;
    transform: translateY(20px);
    transition-delay: 0s;
}
.dock-card--entering .dock-card__title {
    opacity: 0;
    transform: translateY(24px);
    transition-delay: 0s;
}
.dock-card--entering .dock-card__detail {
    opacity: 0;
    transform: translateY(28px);
    transition-delay: 0s;
}
.dock-card--entering .dock-card__right {
    opacity: 0;
    transform: translateX(20px);
    transition-delay: 0s;
}

/* Staggered item entrance */
.dock-card__items li {
    opacity: 0;
    transform: translateX(16px);
    animation: dockItemIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dock-card__items li:nth-child(1) { animation-delay: 0.06s; }
.dock-card__items li:nth-child(2) { animation-delay: 0.12s; }
.dock-card__items li:nth-child(3) { animation-delay: 0.18s; }
.dock-card__items li:nth-child(4) { animation-delay: 0.24s; }
.dock-card__items li:nth-child(5) { animation-delay: 0.30s; }

@keyframes dockItemIn {
    to { opacity: 1; transform: translateX(0); }
}

/* --- Dock bar --- */
.dock-bar {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.55rem 1.1rem 0.7rem;
    border-radius: 1rem;
    border: 1px solid var(--rx-line);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 1px 2px rgba(6, 27, 45, 0.03),
        0 6px 18px -14px rgba(6, 27, 45, 0.16);
    width: fit-content;
    margin: 0 auto;
}

/* Shelf shadow — soft glow beneath the dock bar like a glass surface */
.dock-bar::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 10%;
    right: 10%;
    height: 14px;
    background: radial-gradient(ellipse 80% 100% at 50% 0%,
        rgba(14, 165, 233, 0.10) 0%,
        rgba(6, 27, 45, 0.04) 50%,
        transparent 100%);
    filter: blur(4px);
    pointer-events: none;
}

.dock-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.dock-icon svg {
    width: var(--dock-size, 52px);
    height: var(--dock-size, 52px);
    padding: 12px;
    border-radius: 13px;
    border: 1px solid var(--rx-line);
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    color: var(--color-gray-500);
    box-shadow:
        0 1px 2px rgba(6, 27, 45, 0.05),
        0 2px 5px -2px rgba(6, 27, 45, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease,
                background 0.2s ease;
}

.dock-icon--active svg,
.dock-icon:hover svg {
    color: #0EA5E9;
    border-color: rgba(14, 165, 233, 0.4);
    background: linear-gradient(180deg, #f5fbff 0%, #e2f1fb 100%);
    box-shadow:
        0 2px 4px rgba(14, 165, 233, 0.1),
        0 6px 14px -5px rgba(14, 165, 233, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.dock-icon__label {
    font-family: 'IBM Plex Mono', var(--font-mono, monospace);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--color-gray-400);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.dock-icon--active .dock-icon__label {
    color: var(--rx-ink);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .dock-card__inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .dock-card__right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--rx-line);
        padding-top: 1.5rem;
    }
    .dock-bar {
        gap: 0.4rem;
        padding: 0.45rem 0.7rem 0.55rem;
        overflow-x: auto;
        max-width: 100%;
        border-radius: 0.85rem;
    }
    .dock-icon svg {
        --dock-size: 44px;
        width: var(--dock-size);
        height: var(--dock-size);
        padding: 10px;
        border-radius: 11px;
        box-shadow:
            0 1px 2px rgba(6, 27, 45, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .dock-icon__label {
        font-size: 0.55rem;
    }
}

.programs-footer {
    text-align: center;
    margin-top: var(--space-10);
}

.btn-text-lg {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-accent-primary);
    text-decoration: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 78, 124, 0.3);
    transition: border-color 0.3s, gap 0.25s var(--rx-ease-out);
}

.btn-text-lg:hover {
    border-color: var(--color-accent-primary);
    gap: 0.7rem;
}

/* ---------- NUTRITION ---------- */
.nutrition-section {
    padding: clamp(4rem, 7vw, 7rem) 0;
    background: #ffffff;
}

.nutrition-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(2rem, 4vw, 3.5rem);
    background:
        radial-gradient(ellipse 80% 60% at 88% 12%, rgba(56, 189, 248, 0.32) 0%, transparent 55%),
        radial-gradient(ellipse 70% 55% at 12% 88%, rgba(14, 165, 233, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(125, 211, 252, 0.10) 0%, transparent 70%),
        linear-gradient(135deg, #06263f 0%, #0b3a5f 100%);
    border-radius: var(--radius-2xl);
    color: #eaf3fa;
    overflow: hidden;
    position: relative;
    box-shadow: 0 28px 80px -30px rgba(6, 27, 45, 0.45);
}

/* Grid lattice — visible across the full card, slow drift adds breath */
.nutrition-card::before {
    content: "";
    position: absolute;
    inset: -10%;
    background-image:
        linear-gradient(to right, rgba(125, 211, 252, 0.09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(125, 211, 252, 0.09) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, rgba(0,0,0,0.65) 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, rgba(0,0,0,0.65) 60%, transparent 100%);
    pointer-events: none;
    animation: rxNutritionLattice 60s linear infinite;
}

/* Drifting volumetric highlight — the breathing layer */
.nutrition-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(125, 211, 252, 0.22) 0%, transparent 35%),
        radial-gradient(circle at 75% 70%, rgba(56, 189, 248, 0.18) 0%, transparent 40%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: rxNutritionDrift 24s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes rxNutritionLattice {
    from { transform: translate(0, 0); }
    to   { transform: translate(48px, 48px); }
}

@keyframes rxNutritionDrift {
    0%, 100% { transform: translate(0, 0) scale(1);    opacity: 0.85; }
    33%      { transform: translate(-3%, 2%) scale(1.08); opacity: 1; }
    66%      { transform: translate(2%, -3%) scale(0.95); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    .nutrition-card::before,
    .nutrition-card::after { animation: none; }
}

.nutrition-copy {
    position: relative;
    max-width: 540px;
}

.nutrition-copy .section-eyebrow {
    color: #a8d6ff;
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.3);
}

.nutrition-copy .section-title {
    color: #ffffff;
}

.nutrition-copy > p {
    color: #c9dfee;
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0 0 var(--space-6);
}

.nutrition-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.nutrition-ctas .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.nutrition-ctas .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
}

.nutrition-visual {
    position: relative;
    height: 280px;
}

.nutrition-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.1rem;
}

.nutrition-bottle {
    position: relative;
    display: grid;
    place-items: center;
    width: 86px;
    height: 200px;
    border-radius: 14px 14px 10px 10px;
    background: linear-gradient(180deg, #eaf3fa 0%, #ffffff 30%, #d6ecfa 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        inset 4px 0 8px rgba(6, 27, 45, 0.08),
        inset -6px 0 12px rgba(255, 255, 255, 0.3),
        0 18px 40px -18px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s var(--rx-ease-out);
}

.nutrition-bottle:hover {
    transform: translateY(-6px);
}

.nutrition-bottle .bottle-cap {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 62px;
    height: 20px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #0b3a5f, #06263f);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}

.nutrition-bottle .bottle-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: #06263f;
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.05;
    padding: 0.35rem 0.4rem;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(6, 27, 45, 0.08);
}

.nutrition-bottle.bottle-a { transform: translateY(10px) rotate(-3deg); }
.nutrition-bottle.bottle-b { height: 220px; z-index: 2; }
.nutrition-bottle.bottle-c { transform: translateY(18px) rotate(3deg); }

.nutrition-bottle.bottle-a:hover { transform: translateY(4px) rotate(-3deg); }
.nutrition-bottle.bottle-c:hover { transform: translateY(12px) rotate(3deg); }

/* ---------- FAQ — platform variant ---------- */
.faq.faq-platform {
    padding: clamp(4rem, 7vw, 7rem) 0;
    background: linear-gradient(180deg, #eef5fb 0%, #ffffff 100%);
}

.faq.faq-platform .section-header {
    margin-bottom: var(--space-12);
}

.faq.faq-platform .faq-item {
    border: 1px solid var(--rx-line);
    box-shadow: 0 1px 2px rgba(6, 27, 45, 0.03);
}

.faq.faq-platform .faq-item:hover {
    border-color: rgba(14, 165, 233, 0.35);
}

/* ---------- FINAL CTA — platform variant ---------- */
.final-cta.final-cta-platform {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1100px 500px at 50% -20%, rgba(14, 165, 233, 0.32), transparent 60%),
                linear-gradient(180deg, #06263f 0%, #04182a 100%);
    color: #eaf3fa;
}

.final-cta-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 75%);
    opacity: 0.6;
}

.final-cta-orbit::before,
.final-cta-orbit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px dashed rgba(56, 189, 248, 0.22);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.final-cta-orbit::before {
    width: 520px;
    height: 520px;
    animation: rxRingSpin 60s linear infinite;
}

.final-cta-orbit::after {
    width: 760px;
    height: 760px;
    border-color: rgba(56, 189, 248, 0.12);
    animation: rxRingSpin 90s linear infinite reverse;
}

.final-cta.final-cta-platform .final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: clamp(4rem, 7vw, 6.5rem) 0;
}

.final-cta.final-cta-platform h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 1.2rem + 2.2vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: var(--space-4) 0 var(--space-4);
}

.final-cta.final-cta-platform p {
    color: #c8e0f1;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 var(--space-8);
}

.final-cta.final-cta-platform .final-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

.final-cta.final-cta-platform .btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.final-cta.final-cta-platform .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}

/* Override glassy fill for final CTA platform buttons */
.final-cta.final-cta-platform .btn-secondary::before {
    background: var(--color-white);
}

.final-cta.final-cta-platform .btn-secondary:hover {
    color: var(--color-accent-primary);
}

.final-cta.final-cta-platform .btn-secondary::after {
    display: none;
}

/* ---------- Reveal delay helper (data attribute stagger) ---------- */
.reveal[data-reveal-delay="0"] { transition-delay: 0s; }
.reveal[data-reveal-delay="1"] { transition-delay: 0.09s; }
.reveal[data-reveal-delay="2"] { transition-delay: 0.18s; }
.reveal[data-reveal-delay="3"] { transition-delay: 0.27s; }
.reveal[data-reveal-delay="4"] { transition-delay: 0.36s; }
.reveal[data-reveal-delay="5"] { transition-delay: 0.45s; }

/* ---------- Responsive tuning ---------- */
@media (max-width: 1024px) {
    .hero-platform-grid {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 5vw, 3rem);
    }

    .hero-network-wrap {
        max-width: 480px;
        margin: 0 auto;
    }

    .proof-grid {
        grid-template-columns: 1fr;
    }

    .nutrition-card {
        grid-template-columns: 1fr;
    }

    .nutrition-visual {
        height: 220px;
    }
}

@media (max-width: 720px) {
    .hero.hero-platform {
        /* Mobile nav is fixed + tall (verse + CTAs). Ensure hero copy clears it. */
        padding-top: clamp(15rem, 36vw, 18rem);
    }

    .hero-headline {
        font-size: clamp(2rem, 4vw + 1rem, 2.6rem);
    }

    .hero-ctas {
        gap: 0.75rem;
    }

    .btn-hero-secondary,
    .hero-cta-primary {
        width: 100%;
        justify-content: center;
    }

    .btn-hero-tertiary {
        width: 100%;
        justify-content: flex-start;
    }

    .hero-trustline {
        grid-template-columns: 1fr;
    }

    .sp-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nutrition-stack {
        gap: 0.6rem;
    }

    .nutrition-bottle {
        width: 64px;
        height: 150px;
    }

    .nutrition-bottle .bottle-cap {
        width: 46px;
        height: 16px;
    }

    .nutrition-bottle.bottle-b {
        height: 168px;
    }
}

/* Pause animations on tiny devices to preserve battery */
@media (max-width: 520px) {
    .hero-network-svg .pulse {
        animation-duration: 6s;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-headline-line {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-network-svg .ring,
    .hero-network-svg .hub-ring,
    .hero-network-svg .hub-halo,
    .hero-network-svg .pulse,
    .final-cta-orbit::before,
    .final-cta-orbit::after {
        animation: none !important;
    }

    .hero-network-svg .pulse {
        display: none;
    }

    .capability-card,
    .surface-card,
    .audience-card,
    .dock-icon svg,
    .browser-frame,
    .nutrition-bottle {
        transition: none;
    }
}

/* Prevent horizontal overflow at all breakpoints. Use `clip` rather
   than `hidden` so position:sticky on descendants (the hero pin) is
   not anchored to a body-level scroll container. */
html, body {
    overflow-x: clip;
}

.hero.hero-platform,
.platform-section,
.surfaces-section,
.storefront-proof,
.audiences-section,
.programs-section,
.nutrition-section,
.faq.faq-platform,
.final-cta.final-cta-platform {
    max-width: 100%;
}

/* =================================================================
   PLATFORM LANDING — REFINEMENT PASS
   Fixes hero readability + hub monogram + pro details.
   Appended 2026-04 (second pass).
   ================================================================= */

/* Override base .hero constraints for the platform variant.
   Base .hero was locking to 100vh, dark bg, and white color — which
   was making the dark headline invisible on a dark navy canvas. */
.hero.hero-platform {
    height: auto;
    min-height: 0;
    display: block;
    color: var(--rx-ink);
    padding-top: clamp(9.75rem, 13vw, 12.5rem);
    padding-bottom: clamp(4rem, 7vw, 7rem);
    background: #ffffff;
}

.hero.hero-platform .hero-background {
    background:
        radial-gradient(1100px 700px at 82% 0%, rgba(56, 189, 248, 0.18), transparent 65%),
        radial-gradient(800px 500px at 100% 50%, rgba(14, 165, 233, 0.10), transparent 60%),
        linear-gradient(180deg, #f5faff 0%, #ffffff 70%, #ffffff 100%);
}

.hero.hero-platform .hero-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.92) 100%);
}

/* Hide the canvas visualizer on the platform hero — the SVG network
   is the signature visual, and the dark navy canvas was making the
   headline text unreadable on a dark-blue wash. */
.hero.hero-platform .hero-bg-visualizer {
    display: none;
}

.hero.hero-platform .container-wide {
    position: relative;
    z-index: 3;
}

/* Pro-detail: global heading refinements — optical letter-spacing,
   balanced wrap, OT features. */
.hero-headline,
.section-title,
.final-cta.final-cta-platform h2,
.nutrition-copy .section-title,
.surface-card h3,
.capability-card h3,
.audience-card h3 {
    text-wrap: balance;
    font-feature-settings: "ss01", "ss02", "cv11";
    font-variant-ligatures: common-ligatures contextual;
}

/* Live status dot on hero eyebrow */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0.85rem 0.38rem 0.7rem;
}

.hero-eyebrow .eyebrow-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: rxLiveDot 2.4s ease-out infinite;
    flex-shrink: 0;
}

@keyframes rxLiveDot {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ---------- HUB MONOGRAM + satellite node ICONS ---------- */

/* Legacy node-icon rules — only apply to nodes that don't use the
   medallion treatment, so the new sigil circles aren't given an
   unwanted dark stroke. */
.hero-network-svg .node:not(.node-medallion) > circle {
    stroke-width: 1.5;
}

.hero-network-svg .node:not(.node-medallion) .node-icon {
    fill: none;
    stroke: #004E7C;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.82;
    transition: stroke 0.3s var(--rx-ease-out), opacity 0.3s, transform 0.35s var(--rx-ease-out);
    transform-box: fill-box;
    transform-origin: center;
}

.hero-network-svg .node:not(.node-medallion):hover .node-icon {
    stroke: #0EA5E9;
    opacity: 1;
    transform: scale(1.08);
}

/* Edge — default + highlight on sibling-node hover */
.hero-network-svg .edge {
    transition: opacity 0.3s, stroke-width 0.3s;
}

/* When user hovers a node, highlight its edge via JS-applied class.
   CSS-only fallback: slight pulse on edge hover. */
.hero-network-svg .edge.is-active {
    stroke-width: 2.4;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.55));
}

/* Hub layering: core + soft highlight + hairline */
.hero-network-svg .hub-core {
    filter: drop-shadow(0 18px 40px rgba(14, 116, 165, 0.32));
}

.hero-network-svg .hub-gloss {
    pointer-events: none;
}

.hero-network-svg .hub-innerline {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1;
}

.hero-network-svg .hub-orbit {
    fill: none;
    stroke: rgba(56, 189, 248, 0.45);
    stroke-width: 1;
    stroke-dasharray: 1 6;
    transform-origin: 280px 280px;
    animation: rxRingSpin 22s linear infinite;
}

.hero-network-svg .hub-orbit-dot {
    fill: #38BDF8;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
    transform-origin: 280px 280px;
    animation: rxRingSpin 22s linear infinite;
}

/* Hub ring style tweak — crisper */
.hero-network-svg .hub-ring {
    stroke: rgba(168, 214, 255, 0.38);
    stroke-dasharray: 3 8;
}

.hero-network-svg .hub-halo {
    fill: rgba(14, 165, 233, 0.10);
    stroke: rgba(14, 165, 233, 0.22);
}

/* Rx monogram */
.hub-monogram {
    transform-box: fill-box;
    transform-origin: center;
    animation: rxMonoFloat 6s ease-in-out infinite;
}

.hub-monogram .mono-r {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.hub-monogram .mono-x {
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.65));
}

@keyframes rxMonoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* Remove (or safely hide) the now-unused hub-label-1/hub-label-2
   rules — they no longer have DOM but the selectors are harmless. */

/* Node labels — upgraded weight/size for readability on light bg */
.hero-network-svg .node text {
    font-size: 13px;
    font-weight: 600;
    fill: #0b2a44;
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 4px;
    paint-order: stroke fill;
}

/* ---------- Hub network label below (status strip) ---------- */
/* Optional pro-detail: subtle caption under the network */
.hero-network-wrap::after {
    content: "Operational platform · seven integrated surfaces";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    white-space: nowrap;
}

/* ---------- Section eyebrow: drop background chip for cleaner feel ---------- */
.section-eyebrow {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    color: var(--color-accent-cyan);
    position: relative;
    padding-left: 1.6rem;
}

.section-eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.section-eyebrow-on-dark {
    color: #7dd3fc;
}

/* ---------- Capability cards — cleaner without the index label ---------- */
.capability-card {
    padding-top: var(--space-7, 1.75rem);
}

.capability-index {
    display: none;
}

/* ---------- Surface cards — no more "Surface 0X" top tag ---------- */
.surface-tag {
    display: none;
}

.surface-head {
    justify-content: flex-start;
    margin-bottom: var(--space-4);
}

/* ---------- Surface features: elegant arrow marker (pro-detail) ---------- */
.surface-features li {
    padding-left: 1.5rem;
}

.surface-features li::before {
    content: "";
    width: 14px;
    height: 1.5px;
    top: 0.7rem;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.55;
    transform: none;
}

.surface-features li::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 0.42rem;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
}

.surface-features li {
    color: var(--color-gray-700);
}

.surface-card.surface-featured .surface-features li::before,
.surface-card.surface-featured .surface-features li::after {
    color: #7dd3fc;
}

/* ---------- FAQ .section-header eyebrow/title adjustments ---------- */
.faq.faq-platform .section-header {
    text-align: center;
}

.faq.faq-platform .section-eyebrow {
    display: inline-block;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

.faq.faq-platform .section-eyebrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

/* ---------- Hero trust-line refinement ---------- */
.hero-trust-figure {
    color: var(--color-accent-primary);
    font-weight: 700;
}

.hero-trustline {
    padding-top: var(--space-5);
    margin-top: var(--space-2);
    border-top-color: rgba(6, 27, 45, 0.10);
}

/* ---------- Final CTA — softer orbit, removed double ring blob ---------- */
.final-cta.final-cta-platform {
    background: radial-gradient(800px 400px at 50% -10%, rgba(14, 165, 233, 0.22), transparent 55%),
                linear-gradient(180deg, #06263f 0%, #04182a 100%);
}

.final-cta-orbit::before,
.final-cta-orbit::after {
    border-color: rgba(56, 189, 248, 0.14);
}

/* ---------- Mobile: tighten hero padding and stack ---------- */
@media (max-width: 720px) {
    .hero.hero-platform {
        /* Mobile nav is fixed + tall (verse + CTAs). Ensure hero copy clears it. */
        padding-top: clamp(15rem, 36vw, 18rem);
    }

    .hero-network-wrap::after {
        font-size: 0.62rem;
        letter-spacing: 0.16em;
    }

    .hub-monogram {
        transform: scale(0.95);
        transform-box: fill-box;
        transform-origin: center;
    }
}

/* ---------- Reduced motion additions ---------- */
@media (prefers-reduced-motion: reduce) {
    .eyebrow-dot { animation: none; }
    .hub-monogram { animation: none; }
    .hub-orbit, .hub-orbit-dot { animation: none; }
}

/* =================================================================
   PLATFORM LANDING — TYPOGRAPHY OVERHAUL (third pass)
   Swap harsh geometric Outfit on display headings for warm editorial
   Fraunces. Outfit stays for UI micro-copy (buttons, nav, pills).
   Inter stays for body. Hero composition rebuilt.
   ================================================================= */

/* Metric-matched fallback for Fraunces. Without this, the browser uses a
   sans-serif fallback (Outfit) while Fraunces loads from Google Fonts, then
   reflows the hero headline when Fraunces arrives — the reflow is very
   visible because `max-width: 19ch` resolves to different widths per font.
   Georgia is a serif installed on all major OSes; size-adjust brings its
   advance widths close to Fraunces so the headline wraps the same way
   before and after the swap. */
@font-face {
    font-family: "Fraunces Fallback";
    src: local("Georgia");
    size-adjust: 95%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Fraunces Fallback";
    src: local("Georgia Italic"), local("Georgia");
    font-style: italic;
    size-adjust: 95%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

:root {
    /* Display headings use Outfit (already self-hosted, weights 100-900).
       Confident, sturdy clinical sans — no italic editorial serifs.
       Variable was kept named --font-display to minimise downstream churn. */
    --font-display: "Outfit", "Inter", system-ui, sans-serif;
}

/* Display-class headings — heavy Outfit, tight tracking. */
.hero-headline,
.section-title,
.final-cta.final-cta-platform h2,
.nutrition-copy .section-title,
.surface-card h3,
.capability-card h3,
.audience-card h3,
.faq.faq-platform h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-feature-settings: "ss01", "ss02", "cv11", "liga";
    letter-spacing: -0.022em;
}

/* Hero — new composition ---------------------------------- */

/* Retire the pill eyebrow entirely */
.hero.hero-platform .hero-eyebrow { display: none; }

.hero-mark {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
    opacity: 0;
    animation: rxHeroReveal 0.8s var(--rx-ease-out) 0.05s forwards;
}

.hero-mark-rule {
    width: clamp(2rem, 4vw, 3rem);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-accent-primary) 100%);
    flex-shrink: 0;
}

.hero-mark-label {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent-primary);
    line-height: 1.45;
}

.hero-mark-dot {
    display: inline-block;
    margin: 0 0.35em;
    color: var(--color-accent-cyan);
    font-weight: 700;
    transform: translateY(-0.05em);
}

.hero.hero-platform .hero-headline {
    font-family: 'Barlow', 'Helvetica Neue', 'Arial', Helvetica, sans-serif;
    font-weight: 900;
    font-size: clamp(2.8rem, 1.2rem + 4.5vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
    text-wrap: balance;
    max-width: 20ch;
    font-feature-settings: normal;
}

.hero.hero-platform .hero-headline-line {
    display: block;
    background:
        /* Smoke wisps — ragged tendrils reaching into the dark zone */
        radial-gradient(ellipse 7% 28% at 33% 18%, rgba(91, 196, 255, 0.55) 0%, transparent 100%),
        radial-gradient(ellipse 5% 32% at 30% 72%, rgba(91, 196, 255, 0.45) 0%, transparent 100%),
        radial-gradient(ellipse 10% 14% at 37% 46%, rgba(91, 196, 255, 0.4) 0%, transparent 100%),
        /* Main gradient: vivid blue left → black right, very shallow angle */
        linear-gradient(
            100deg,
            #5BC4FF 0%,
            #5BC4FF 15%,
            #3AAEF0 21%,
            #1878D4 27%,
            #083060 31.5%,
            #010610 35%,
            #000000 42%
        );
    background-attachment: fixed;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.hero.hero-platform .hero-headline-line .word {
    background: inherit;
    background-attachment: fixed;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Cascade: each line shifts progressively rightward */
.hero.hero-platform .hero-headline-line:nth-child(2) {
    margin-left: clamp(1.5rem, 3vw, 2.5rem);
}
.hero.hero-platform .hero-headline-line:nth-child(3) {
    margin-left: clamp(3rem, 5.5vw, 5rem);
}
.hero.hero-platform .hero-headline-line:nth-child(4) {
    margin-left: clamp(4rem, 7vw, 6.5rem);
}

/* Accent class — no-op; gradient is set per .hero-headline-line. */
.hero.hero-platform .hero-headline-accent {
    font-style: normal;
    font-weight: inherit;
    letter-spacing: inherit;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 0.6rem + 0.7vw, 1.22rem);
    line-height: 1.55;
    color: var(--color-gray-700);
    max-width: 38ch;
    margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
    opacity: 0;
    transform: translateY(10px);
    animation: rxHeroReveal 0.8s var(--rx-ease-out) 0.35s forwards;
    text-wrap: balance;
}

.hero.hero-platform .hero-subtitle {
    font-weight: 500;
    color: var(--color-gray-600);
}

.hero.hero-platform .hero-lead {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-gray-400);
    max-width: 44ch;
    margin-bottom: var(--space-8);
    opacity: 0;
    transform: translateY(10px);
    animation: rxHeroReveal 0.8s var(--rx-ease-out) 0.5s forwards;
}

/* Section titles — heavy Outfit */
.section-title {
    font-weight: 750;
    font-variation-settings: "wght" 750;
    letter-spacing: -0.026em;
    line-height: 1.06;
}

/* Surface / capability / audience card titles */
.surface-card h3,
.capability-card h3,
.audience-card h3 {
    font-weight: 700;
    font-variation-settings: "wght" 700;
    letter-spacing: -0.018em;
}

/* FAQ h2 */
.faq.faq-platform h2 {
    font-weight: 750;
    font-variation-settings: "wght" 750;
}

/* Final CTA h2 */
.final-cta.final-cta-platform h2 {
    font-weight: 750;
    font-variation-settings: "wght" 750;
    letter-spacing: -0.026em;
}

/* Keep UI micro-copy crisp in Outfit — don't let Fraunces leak */
.btn-primary,
.btn-secondary,
.btn-hero-secondary,
.btn-hero-tertiary,
.btn-text-lg,
.nav-links a,
.nav-dropdown-item,
.hero-trust-figure,
.surface-pill,
.section-eyebrow {
    font-family: var(--font-heading);
}

/* Trust figure — keep sans, but proper digits */
.hero-trust-figure {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}

/* Hero CTA typography alignment with new hierarchy */
.hero.hero-platform .hero-ctas {
    margin-top: var(--space-2);
    margin-bottom: var(--space-10);
}

/* =================================================================
   HERO PRODUCT STACK — Parallel stacked cards with fog edges.
   All cards share the same 3D rotation, staggered in Z-space so
   edges peek behind. Fog gradient softens the outer edges.
   ================================================================= */

.hero-product-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    perspective: 1400px;
    isolation: isolate;
}

/* Fog overlay — soft gradient that fades cards at edges */
.hero-product-fog {
    position: absolute;
    inset: -20%;
    background: radial-gradient(
        65% 55% at 60% 40%,
        transparent 25%,
        rgba(250, 250, 250, 0.7) 50%,
        rgba(250, 250, 250, 0.95) 75%
    );
    pointer-events: none;
    z-index: 10;
}

/* Shared card styles — NO borders, NO frames. Floating on thin air. */
.hero-product-card {
    position: absolute;
    border-radius: 4px;
    background: #ffffff;
    /* Single ultra-soft shadow — no borders, no frames */
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    will-change: transform;
    transform-style: preserve-3d;
    /* All cards share the same base rotation (parallel stack) */
    transform: rotateX(18deg) rotateY(-28deg);
    border: none;
}

/* Remove ALL pseudo-elements that create borders */
.hero-product-card::before,
.hero-product-card::after {
    display: none;
}

/* Chrome bar for all cards */
.hero-product-card__chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: none;
}

.hero-product-card__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e6ebf2;
}
.hero-product-card__dot:nth-child(1) { background: #ff6b6b; opacity: 0.5; }
.hero-product-card__dot:nth-child(2) { background: #ffd166; opacity: 0.5; }
.hero-product-card__dot:nth-child(3) { background: #06d6a0; opacity: 0.5; }

.hero-product-card__title {
    margin-left: 6px;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-gray-500);
}

/* Deep card (furthest back) */
.hero-product-card--deep {
    width: 62%;
    aspect-ratio: 16 / 10;
    top: -16%;
    right: -2%;
    z-index: 1;
    transform: rotateX(18deg) rotateY(-28deg) translateZ(-90px) translateY(-20px) translateX(30px);
    opacity: 0.55;
}

/* Mid card */
.hero-product-card--mid {
    width: 68%;
    aspect-ratio: 16 / 10;
    top: -8%;
    right: -4%;
    z-index: 2;
    transform: rotateX(18deg) rotateY(-28deg) translateZ(-50px) translateY(-10px) translateX(15px);
    opacity: 0.75;
}

/* Simple gradient bodies for deep/mid cards */
.hero-product-card__body {
    height: calc(100% - 42px);
    width: 100%;
}

.hero-product-card__body--gradient {
    background: #f1f5f9;
}

.hero-product-card__body--gradient-alt {
    background: #f8fafc;
}

/* Back card — Orders stats */
.hero-product-card--back {
    width: 74%;
    aspect-ratio: 16 / 10.5;
    top: 2%;
    right: -6%;
    z-index: 3;
    transform: rotateX(18deg) rotateY(-28deg) translateZ(-20px) translateY(5px) translateX(5px);
    padding: 0 0 14px;
    display: flex;
    flex-direction: column;
}

.hero-product-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 14px;
}

.hpm {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 4px;
    background: #f8fafc;
    border: none;
}

.hpm-label {
    font-family: var(--font-heading);
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gray-500);
}

.hpm-value {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rx-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.hpm-delta {
    font-family: var(--font-heading);
    font-size: 0.58rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hpm-delta--up { color: #059669; }

.hero-product-card__spark {
    flex: 1;
    width: 100%;
    min-height: 30px;
    padding: 0 14px;
    margin-top: auto;
}

/* Front card — main screenshot */
.hero-product-card--front {
    width: 82%;
    aspect-ratio: 16 / 9.5;
    bottom: -4%;
    left: -4%;
    z-index: 4;
    transform: rotateX(18deg) rotateY(-28deg) translateZ(20px);
    animation: rxCardFloatFront 8s ease-in-out infinite alternate;
    /* Single clean shadow — no borders */
    box-shadow: 0 25px 70px -20px rgba(0, 0, 0, 0.12);
}



.hero-product-card--front img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

@keyframes rxCardFloatFront {
    0%   { transform: rotateX(18deg) rotateY(-28deg) translateZ(20px) translate3d(0, 0, 0); }
    100% { transform: rotateX(18deg) rotateY(-28deg) translateZ(20px) translate3d(0, -5px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-product-card--front {
        animation: none;
    }
}

/* Mobile */
@media (max-width: 900px) {
    .hero-platform-grid {
        grid-template-columns: 1fr !important;
    }
    .hero-product-stack {
        max-width: 480px;
        margin: clamp(2rem, 6vw, 3rem) auto 0;
        aspect-ratio: 5 / 4;
    }
    .hero-product-card {
        transform: rotateX(12deg) rotateY(-18deg);
    }
    .hero-product-card--deep {
        transform: rotateX(12deg) rotateY(-18deg) translateZ(-60px) translateY(-15px) translateX(20px);
    }
    .hero-product-card--mid {
        transform: rotateX(12deg) rotateY(-18deg) translateZ(-35px) translateY(-8px) translateX(10px);
    }
    .hero-product-card--back {
        transform: rotateX(12deg) rotateY(-18deg) translateZ(-15px) translateY(3px) translateX(3px);
    }
    .hero-product-card--front {
        transform: rotateX(12deg) rotateY(-18deg) translateZ(15px);
    }
}

/* Reduce the hero-network caption — less LLM, more editorial */
.hero-network-wrap::after {
    content: "";
    display: none;
}

/* Tighten the hero-copy max-width so the composition feels authored */
.hero-copy {
    max-width: 680px;
}

/* Mobile: shrink serif display a touch, keep poise */
@media (max-width: 720px) {
    .hero.hero-platform .hero-headline {
        font-size: clamp(2.2rem, 2rem + 4vw, 2.9rem);
        max-width: none;
    }

    .hero-mark-rule {
        width: 1.5rem;
    }

    .hero-mark-label {
        font-size: 0.7rem;
        letter-spacing: 0.18em;
    }

    .hero-subtitle {
        font-size: 1.04rem;
    }
}

/* Reduced motion — hero intro falls in instantly */
@media (prefers-reduced-motion: reduce) {
    .hero-mark,
    .hero-subtitle,
    .hero.hero-platform .hero-lead {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* =================================================================
   PLATFORM LANDING — MAGIC UI FLOURISHES (fourth pass)
   1. Header opacity lift (legible over light hero)
   2. Hero Particles canvas (drifting cyan specks)
   3. TextAnimate blurInUp by word on headline
   4. AnimatedGridPattern behind final CTA
   ================================================================= */

/* ---------- 1. HEADER: platform-page refinement ----------
   The landing hero is now light (white) and uses Fraunces serif
   for display. The old nav (Outfit 500, heavy text-shadow, 0.3
   background) reads as a different era. This block harmonises the
   chrome: tighter Inter micro-copy, dropped shadow, more opacity. */

body:has(.page-platform) .nav-main-content {
    background: rgba(14, 45, 76, 0.88);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 10px 30px rgba(8, 32, 58, 0.24);
}

body:has(.page-platform) .nav-sticky.scrolled .nav-main-content {
    background: rgba(14, 45, 76, 0.96);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    backdrop-filter: saturate(150%) blur(18px);
    border-color: rgba(255, 255, 255, 0.11);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 14px 40px rgba(8, 32, 58, 0.34);
}

/* Nav link typography — swap heavy Outfit + text-shadow for Inter
   medium. Drop size to sit comfortably alongside the serif hero. */
body:has(.page-platform) .nav-links a,
body:has(.page-platform) .nav-dropdown-toggle,
body:has(.page-platform) .nav-dropdown-item {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.005em;
    text-shadow: none;
    color: rgba(255, 255, 255, 0.88);
    transition: color 0.2s ease;
}

body:has(.page-platform) .nav-links a:hover,
body:has(.page-platform) .nav-dropdown-toggle:hover,
body:has(.page-platform) .nav-dropdown-item:hover {
    color: var(--color-accent-cyan-light, #38BDF8);
}

/* Login + Phone CTAs — match the refined micro-copy */
body:has(.page-platform) .btn-login,
body:has(.page-platform) .btn-phone {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow: none;
}

body:has(.page-platform) .btn-login {
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body:has(.page-platform) .btn-login:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

body:has(.page-platform) .btn-phone {
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.32);
    color: #ffffff;
    border-radius: 999px;
}

body:has(.page-platform) .btn-phone:hover {
    background: rgba(56, 189, 248, 0.32);
    border-color: rgba(56, 189, 248, 0.5);
}

/* Verse — italic, but with enough weight to read clearly on glass header */
body:has(.page-platform) .nav-verse {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-variation-settings: "opsz" 24, "wght" 500;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.005em;
    text-shadow: none;
}

/* A touch more breathing room between logo and nav links on wide screens */
@media (min-width: 1024px) {
    body:has(.page-platform) .nav-wrapper {
        gap: clamp(1rem, 2vw, 2.25rem);
    }

    body:has(.page-platform) .nav-links {
        gap: clamp(1rem, 1.5vw, 1.75rem);
    }
}

/* Safari <15.4 / Firefox <121 fallback — apply a reasonable
   sitewide lift so the nav never sits at rgba(0,0,0,0.3). */
@supports not selector(:has(*)) {
    .nav-main-content {
        background: rgba(6, 22, 40, 0.82);
        -webkit-backdrop-filter: saturate(140%) blur(12px);
        backdrop-filter: saturate(140%) blur(12px);
    }
}

/* ---------- 2. HERO PARTICLES CANVAS ---------- */
.hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 1.2s ease;
    contain: strict;
}

.hero-particles.is-ready {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-particles {
        display: none;
    }
}

/* ---------- 3. TEXTANIMATE: BLUR IN UP, BY WORD ---------- */
.hero-headline .word {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(16px);
    will-change: transform, filter, opacity;
}

.hero-headline.is-animated .word {
    animation: rxBlurInUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.085s);
}

.hero-headline .word-space {
    display: inline-block;
    width: 0.3em;
}

@keyframes rxBlurInUp {
    0% {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(16px);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* Preserve the gradient clip on the accent line when we split words.
   background-attachment: fixed anchors the gradient to the viewport, so
   each word samples the same continuous sweep instead of banding
   independently. */
.hero.hero-platform .hero-headline-accent,
.hero.hero-platform .hero-headline-accent .word {
    background-attachment: fixed;
}

.hero-headline-accent .word {
    background: inherit;
    background-attachment: fixed;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .hero-headline .word {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none;
    }
}

/* ---------- 4. ANIMATED GRID PATTERN (final CTA backdrop) ---------- */
.animated-grid-pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    -webkit-mask-image: radial-gradient(
        650px circle at 50% 30%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.6) 55%,
        transparent 85%
    );
    mask-image: radial-gradient(
        650px circle at 50% 30%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.6) 55%,
        transparent 85%
    );
    transform: skewY(-10deg);
    transform-origin: 50% 0;
}

.animated-grid-pattern .agp-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgba(148, 206, 244, 0.14);
}

.animated-grid-pattern .agp-square {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(56, 189, 248, 0.28);
    border-radius: 2px;
    opacity: 0;
    animation: rxGridSquare var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
    will-change: opacity, transform;
}

@keyframes rxGridSquare {
    0%, 100% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        opacity: var(--max, 0.45);
        transform: scale(1);
    }
}

/* Swap grid hue on the light surfaces section (if ever placed there) */
.surfaces-section .animated-grid-pattern .agp-grid {
    color: rgba(6, 27, 45, 0.08);
}

.surfaces-section .animated-grid-pattern .agp-square {
    background: rgba(14, 165, 233, 0.14);
}

/* Audiences section backdrop — stronger visibility over white */
.audiences-section .animated-grid-pattern {
    -webkit-mask-image: radial-gradient(
        110% 90% at 50% 40%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.75) 55%,
        transparent 95%
    );
    mask-image: radial-gradient(
        110% 90% at 50% 40%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.75) 55%,
        transparent 95%
    );
    transform: skewY(-6deg);
}

.audiences-section .animated-grid-pattern .agp-grid {
    color: rgba(14, 165, 233, 0.22);
}

.audiences-section .animated-grid-pattern .agp-square {
    background: rgba(14, 165, 233, 0.5);
    --max: 0.85;
}

/* Ensure final CTA content stays above the pattern */
.final-cta.final-cta-platform .final-cta-content {
    position: relative;
    z-index: 2;
}

.final-cta.final-cta-platform .final-cta-orbit {
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .animated-grid-pattern .agp-square {
        animation: none;
        opacity: 0;
    }
}

/* =================================================================
   HERO ORB CENTERPIECE — layered SVG composition
   Field + ripples + caustics + parallax + orbital satellites.
   All GPU-accelerated (transform/opacity); pauses when offscreen
   via [data-rx-paused="true"] and respects prefers-reduced-motion.
   ================================================================= */

.hero-network-wrap {
    --rx-mx: 0;
    --rx-my: 0;
}

/* Outer energy field — breathes in/out like a reactor */
.hero-network-svg .hub-field {
    transform-box: fill-box;
    transform-origin: center;
    /* Slow ambient field — tied to the ripple cadence (8s) so it
       reads as part of the same breathing rather than a second
       independent rhythm. Amplitude reduced so it no longer
       punches on its own. */
    animation: rxFieldBreathe 8s ease-in-out infinite;
}
@keyframes rxFieldBreathe {
    0%, 100% { transform: scale(1);     opacity: 0.9; }
    50%      { transform: scale(1.025); opacity: 1;   }
}

/* Arrival ripples — one per satellite pulse.
   Each ripple's animation-duration equals its pulse's duration, and
   its delay equals (pulse.delay + pulse.duration) so iteration 1 starts
   the moment the pulse first arrives at center. Every subsequent
   arrival lines up with the next iteration boundary — locked sync. */
.hero-network-svg .hub-ripple {
    fill: none;
    stroke: rgba(125, 211, 252, 0.85);
    stroke-width: 1.6;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    will-change: opacity, r, stroke-width;
}
/* Ripple cycle = pulse cycle (13s); stagger 1.8s so the hub breathes
   at a comfortable cadence — alive, not strobing. */
.hero-network-svg .hub-ripple.rp1 { animation: rxRipple 13s cubic-bezier(0.22, 0.7, 0.3, 1) 13s    infinite; }
.hero-network-svg .hub-ripple.rp2 { animation: rxRipple 13s cubic-bezier(0.22, 0.7, 0.3, 1) 14.8s  infinite; }
.hero-network-svg .hub-ripple.rp3 { animation: rxRipple 13s cubic-bezier(0.22, 0.7, 0.3, 1) 16.6s  infinite; }
.hero-network-svg .hub-ripple.rp4 { animation: rxRipple 13s cubic-bezier(0.22, 0.7, 0.3, 1) 18.4s  infinite; }
.hero-network-svg .hub-ripple.rp5 { animation: rxRipple 13s cubic-bezier(0.22, 0.7, 0.3, 1) 20.2s  infinite; }
.hero-network-svg .hub-ripple.rp6 { animation: rxRipple 13s cubic-bezier(0.22, 0.7, 0.3, 1) 22s    infinite; }
.hero-network-svg .hub-ripple.rp7 { animation: rxRipple 13s cubic-bezier(0.22, 0.7, 0.3, 1) 23.8s  infinite; }

/* Pulse ring — emerges at the orb edge the instant a particle makes
   contact, grows to a quick emission peak, then expands and fades
   outward like a water-droplet ripple. Visible for the first ~45%
   of the 8s cycle and invisible the rest; with 7 rings staggered
   every 1.14s there are always 3-4 concentric rings visible at
   varying expansions, producing a continuous hypnotic pulse. */
@keyframes rxRipple {
    0%          { r: 66;  opacity: 0;    stroke-width: 0.4; }
    2%          { r: 68;  opacity: 0.55; stroke-width: 1.4; }
    5%          { r: 72;  opacity: 0.8;  stroke-width: 1.8; }
    15%         { r: 92;  opacity: 0.5;  stroke-width: 1.2; }
    30%         { r: 118; opacity: 0.22; stroke-width: 0.7; }
    45%         { r: 140; opacity: 0.04; stroke-width: 0.35; }
    60%, 100%   { r: 150; opacity: 0;    stroke-width: 0.2; }
}

/* Parallax group — CSS variables drive the translate. Interior layers
   use inverse translate for specular/depth effect. */
.hero-network-svg .hub-parallax {
    transform: translate(calc(var(--rx-mx) * 4px), calc(var(--rx-my) * 4px));
    transition: transform 0.45s cubic-bezier(0.2, 0.65, 0.3, 1);
    will-change: transform;
}

/* Specular highlight — offset opposite the parallax to simulate a fixed
   light source, and slowly drift so the orb never feels frozen. */
.hero-network-svg .hub-gloss {
    transform: translate(calc(var(--rx-mx) * -10px), calc(var(--rx-my) * -10px));
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.55s cubic-bezier(0.2, 0.65, 0.3, 1);
    animation: rxGlossDrift 16s ease-in-out infinite;
    mix-blend-mode: screen;
    will-change: transform;
}
@keyframes rxGlossDrift {
    0%, 100% { filter: brightness(1);     }
    50%      { filter: brightness(1.06);  }
}

/* WebGL orb mount — foreignObject sits inside the parallax group.
   Size matches the 168x168 attribute set on the foreignObject element,
   centered at the hub origin. Canvas fills it; Three.js handles the rest. */
.hero-network-svg .hero-orb-fo {
    overflow: visible;
}
.hero-orb-canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* When the WebGL orb successfully mounts, hide the SVG fallback
   body layers — the shader replaces core + gloss + caustics entirely.
   Halo, rings, monogram, ripples, satellites all stay visible. */
.hero-network-wrap.has-webgl-orb .hub-core,
.hero-network-wrap.has-webgl-orb .hub-gloss,
.hero-network-wrap.has-webgl-orb .hub-caustics,
.hero-network-wrap.has-webgl-orb .hub-innerline {
    display: none;
}

/* Caustic inner light — three soft radial blobs drifting independently.
   Together they read as liquid light inside the orb. */
.hero-network-svg .caustic {
    mix-blend-mode: screen;
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}
.hero-network-svg .caustic.c1 { animation: rxCausticDrift1 11s ease-in-out infinite; }
.hero-network-svg .caustic.c2 { animation: rxCausticDrift2 14s ease-in-out infinite; }
.hero-network-svg .caustic.c3 { animation: rxCausticDrift3 17s ease-in-out infinite; }

@keyframes rxCausticDrift1 {
    0%, 100% { transform: translate(-10px, -8px) scale(1);    opacity: 0.75; }
    33%      { transform: translate(12px, -4px)  scale(1.1);  opacity: 0.9; }
    66%      { transform: translate(6px, 10px)   scale(0.95); opacity: 0.65; }
}
@keyframes rxCausticDrift2 {
    0%, 100% { transform: translate(12px, 6px)   scale(1);    opacity: 0.6; }
    50%      { transform: translate(-12px, -8px) scale(1.15); opacity: 0.85; }
}
@keyframes rxCausticDrift3 {
    0%, 100% { transform: translate(0, 12px)     scale(1);    opacity: 0.7; }
    40%      { transform: translate(-8px, -10px) scale(0.9);  opacity: 0.55; }
    70%      { transform: translate(10px, 4px)   scale(1.1);  opacity: 0.8; }
}

/* Orbit rings — slowed so the orb feels orchestrated, not spinning */
.hero-network-svg .hub-orbit-1 {
    fill: none;
    stroke: rgba(56, 189, 248, 0.34);
    stroke-width: 1;
    stroke-dasharray: 1 6;
    transform-origin: 280px 280px;
    animation: rxRingSpin 48s linear infinite;
}
.hero-network-svg .hub-orbit-2 {
    fill: none;
    stroke: rgba(125, 211, 252, 0.18);
    stroke-width: 0.8;
    stroke-dasharray: 1 9;
    transform-origin: 280px 280px;
    animation: rxRingSpin 80s linear infinite reverse;
}

/* Orbital satellites — softened glow so they read as quiet markers,
   not video-game neon bullets. */
.hero-network-svg .satellite-orbit {
    transform-origin: 280px 280px;
    will-change: transform;
}
.hero-network-svg .satellite-orbit.so1 { animation: rxRingSpin 32s linear infinite; }
.hero-network-svg .satellite-orbit.so2 { animation: rxRingSpin 48s linear infinite reverse; }
.hero-network-svg .satellite-orbit.so3 { animation: rxRingSpin 40s linear infinite; }

.hero-network-svg .satellite {
    fill: #38BDF8;
    filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.55));
    opacity: 0.8;
}
.hero-network-svg .satellite-sm {
    fill: #bae6fd;
    filter: drop-shadow(0 0 2px rgba(125, 211, 252, 0.5));
    opacity: 0.7;
}

/* Idle (offscreen / reduced motion / hidden tab) — freeze the expensive layers */
.hero-network-wrap[data-rx-paused="true"] .hub-field,
.hero-network-wrap[data-rx-paused="true"] .hub-ripple,
.hero-network-wrap[data-rx-paused="true"] .caustic,
.hero-network-wrap[data-rx-paused="true"] .hub-gloss,
.hero-network-wrap[data-rx-paused="true"] .hub-orbit-1,
.hero-network-wrap[data-rx-paused="true"] .hub-orbit-2,
.hero-network-wrap[data-rx-paused="true"] .satellite-orbit {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .hero-network-svg .hub-field,
    .hero-network-svg .hub-ripple,
    .hero-network-svg .caustic,
    .hero-network-svg .hub-gloss,
    .hero-network-svg .hub-orbit-1,
    .hero-network-svg .hub-orbit-2,
    .hero-network-svg .satellite-orbit {
        animation: none;
    }
    .hero-network-svg .hub-ripple { opacity: 0; }
    .hero-network-svg .hub-parallax { transform: none; }
}

/* Mobile — dampen the effect so we don't churn battery on phones */
@media (max-width: 720px) {
    .hero-network-svg .hub-ripple.rp4,
    .hero-network-svg .hub-ripple.rp5,
    .hero-network-svg .hub-ripple.rp6,
    .hero-network-svg .hub-ripple.rp7,
    .hero-network-svg .satellite-orbit.so3,
    .hero-network-svg .caustic.c3 {
        display: none;
    }
    .hero-network-svg .hub-field { animation-duration: 7s; }
}

/* =================================================================
   APPENDED 2026-04 — Sticky stack, dock tiles, shimmer headline,
   rotating backplate behind storefront browser.
   ================================================================= */

/* ---------- 1. Sticky-stack scroll narrative ----------
   Each main section past the hero becomes sticky and stacks with
   ~36px of the previous section peeking above. Solid backgrounds
   are required so later sections cover earlier ones cleanly. */
.sticky-stack {
    /* Nav-safe baseline — sections stack below the floating nav so
       the peek strip is visible, not hidden behind the nav. */
    --stack-nav-offset: clamp(74px, 9vh, 104px);
    --stack-peek: 36px;
}

.sticky-stack > section[style*="--stack-i"] {
    /* The original design pinned each section as a stack. With the new
       hero scroll narrative active, we need normal flow on these so the
       page continues to scroll naturally below the hero. The --stack-i
       custom property is left harmlessly in place on the markup. */
    position: relative;
    background-color: #ffffff;
    border-radius: 0;
    z-index: calc(var(--stack-i) + 1);
}

/* Preserve existing section backgrounds — these already opaque rules
   win over the safety fallback above because they're more specific. */
.sticky-stack > .platform-section { background: #ffffff; }
.sticky-stack > .surfaces-section { background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%); }
.sticky-stack > .storefront-proof { background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%); }
.sticky-stack > .audiences-section { background: #ffffff; }
.sticky-stack > .programs-section { background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%); }
.sticky-stack > .nutrition-section { background: #ffffff; }
.sticky-stack > .faq-platform { background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%); }
.sticky-stack > .final-cta-platform { background: #061b2d; }

/* Subtle top-edge separator that reads as a "stack seam" when a
   later section is layered over an earlier one. */
.sticky-stack > section[style*="--stack-i"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(6, 27, 45, 0) 0%,
        rgba(6, 27, 45, 0.08) 18%,
        rgba(6, 27, 45, 0.08) 82%,
        rgba(6, 27, 45, 0) 100%);
    pointer-events: none;
}

/* Subtle drop-shadow under each stacked section so the stack feels
   layered, not pasted. Kept soft and directional (downward). */
.sticky-stack > section[style*="--stack-i"] {
    box-shadow: 0 -8px 24px -18px rgba(6, 27, 45, 0.18);
}
/* Dark final CTA gets a lighter shadow tone so the seam still reads */
.sticky-stack > .final-cta-platform {
    box-shadow: 0 -10px 28px -20px rgba(6, 27, 45, 0.55);
}

@media (max-width: 720px) {
    /* On small screens the peek is too cramped — reduce it */
    .sticky-stack {
        --stack-peek: 22px;
        --stack-nav-offset: clamp(64px, 12vh, 88px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-stack > section[style*="--stack-i"] {
        position: relative;
        top: auto;
    }
}

/* ---------- 2. Program tile dock magnification ----------
   Dock magnification — macOS-style radial scaling on the
   horizontal dock bar. JS sets --dock-size per icon based on
   pointer distance from each icon's center. */
.dock-bar {
    perspective: 1200px;
}

@media (prefers-reduced-motion: reduce) {
    .dock-icon svg {
        transition: none;
    }
}

/* ---------- 3. Animated shimmer on hero headline accent ----------
   Multi-stop navy → sky → white → sky → navy gradient slowly drifts
   across the italic accent line. Uses background-attachment: fixed
   so the gradient samples as a single continuous sweep across every
   word span, keeping the effect cohesive. The animation is applied
   only to the parent so the per-word rxBlurInUp entrance animation
   on `.word` is preserved (words inherit `background` and pick up
   the parent's animated background-position at paint time). */
.hero.hero-platform .hero-headline-accent,
.hero.hero-platform .hero-headline-accent .word {
    background: linear-gradient(
        100deg,
        #064a76 0%,
        #0EA5E9 18%,
        #7dd3fc 34%,
        #e8f4fc 48%,
        #ffffff 52%,
        #cfe7fa 66%,
        #38bdf8 82%,
        #064a76 100%
    );
    background-size: 320% 100%;
    background-position: 0% 50%;
    background-attachment: fixed;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero.hero-platform .hero-headline-accent {
    animation: rxAccentShimmer 18s ease-in-out infinite;
}

@keyframes rxAccentShimmer {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero.hero-platform .hero-headline-accent {
        animation: none;
        background-position: 20% 50%;
    }
}

/* ---------- 4. Rotating accent backplate behind browser mockup ----
   A slightly larger rounded rectangle sits behind the white browser
   card, offset down-and-right. Pale-blue → off-white gradient, thin
   low-contrast border, soft diffuse shadow. Slow oscillating rotation
   between -5deg and +3deg over ~28s for editorial depth. */
.proof-browser {
    position: relative;
    isolation: isolate;
}

.proof-browser::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 22px;
    right: -14px;
    bottom: -18px;
    background:
        linear-gradient(135deg,
            #eef5fc 0%,
            #f7fbfe 55%,
            #e6eff8 100%);
    border: 1px solid rgba(14, 78, 124, 0.09);
    border-radius: 22px;
    box-shadow:
        0 28px 52px -30px rgba(6, 27, 45, 0.22),
        0 10px 22px -14px rgba(14, 78, 124, 0.1);
    transform-origin: 50% 50%;
    animation: rxBackplateDrift 28s ease-in-out infinite alternate;
    z-index: -1;
    pointer-events: none;
}

/* Keep the browser frame on top of its backplate, within the
   proof-browser's isolated stacking context. */
.proof-browser .browser-frame {
    position: relative;
    z-index: 1;
}

@keyframes rxBackplateDrift {
    0%   { transform: rotate(-5deg); }
    100% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .proof-browser::before {
        animation: none;
        transform: rotate(-1.5deg);
    }
}

@media (max-width: 1024px) {
    /* On stacked mobile layout the backplate can crowd the edges */
    .proof-browser::before {
        top: 14px;
        left: 14px;
        right: -8px;
        bottom: -12px;
    }
}

/* =================================================================
   Narrative refinements — scroll progress hairline, hero trustline
   cascade, and engaged-state micro-interactions on cards.
   ================================================================= */

/* Hairline scroll progress — editorial thin line, soft glow */
.scroll-progress {
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(56, 189, 248, 0.6) 6%,
        var(--color-accent-cyan) 100%);
    box-shadow:
        0 0 6px rgba(14, 165, 233, 0.35),
        0 0 14px rgba(14, 165, 233, 0.18);
}

/* Trustline cascade — each item arrives sequentially as the hero loads */
.hero-trustline li {
    opacity: 0;
    transform: translateY(8px);
    animation: rxTrustlineRise 0.7s cubic-bezier(0.2, 0.65, 0.3, 1) forwards;
}
.hero-trustline li:nth-child(1) { animation-delay: 0.6s; }
.hero-trustline li:nth-child(2) { animation-delay: 0.74s; }
.hero-trustline li:nth-child(3) { animation-delay: 0.88s; }

@keyframes rxTrustlineRise {
    to { opacity: 1; transform: translateY(0); }
}

/* Engaged-state lift on capability / surface / audience cards.
   The page rewards engagement: hovering reveals depth and a touch
   of the brand accent. Avoids being too perky — 2px lift, 0.25s. */
.capability-card,
.surface-card,
.audience-card {
    transition:
        transform 0.36s cubic-bezier(0.2, 0.65, 0.3, 1),
        box-shadow 0.36s cubic-bezier(0.2, 0.65, 0.3, 1),
        border-color 0.36s ease;
}

.capability-card:hover,
.audience-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 2px rgba(6, 27, 45, 0.04),
        0 14px 30px -16px rgba(14, 165, 233, 0.22),
        0 4px 8px -6px rgba(6, 27, 45, 0.10);
    border-color: rgba(14, 165, 233, 0.28);
}

/* Surface cards have their own internal palette — keep the lift but
   inherit each card's existing border tone via box-shadow only. */
.surface-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 2px rgba(6, 27, 45, 0.05),
        0 16px 32px -18px rgba(14, 165, 233, 0.28),
        0 4px 10px -6px rgba(6, 27, 45, 0.12);
}

/* Capability icon — subtle accent reveal on parent hover.
   Pulls the eye through the grid as the user scans. */
.capability-card .capability-icon {
    transition:
        color 0.36s ease,
        background 0.36s ease,
        transform 0.36s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.capability-card:hover .capability-icon {
    color: var(--color-accent-primary);
    transform: translateY(-1px) scale(1.04);
}

/* Hero network — gentle scale-in when first revealed, so the orb
   feels like it's arriving rather than blinking on. */
.hero-network-wrap {
    opacity: 0;
    transform: scale(0.96);
    animation: rxOrbArrive 1.25s cubic-bezier(0.2, 0.65, 0.25, 1) 0.3s forwards;
}

@keyframes rxOrbArrive {
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-trustline li,
    .hero-network-wrap {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .capability-card:hover,
    .surface-card:hover,
    .audience-card:hover {
        transform: none;
    }
}


/* =================================================================
   HERO — CLEAN, PERFORMANT DESIGN
   No scroll-jacking, no sticky pin, no progressive reveal.
   All content visible immediately. Normal page flow.
   ================================================================= */

.hero.hero-platform {
    height: auto;
    min-height: 100vh;
    display: block;
    color: var(--rx-ink);
    padding-top: clamp(9.75rem, 13vw, 12.5rem);
    padding-bottom: clamp(4rem, 7vw, 7rem);
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero.hero-platform .hero-background {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 60% at 72% 20%, rgba(30, 144, 255, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 70% 80% at 55% 65%, rgba(14, 165, 233, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, #eef5ff 0%, #f8fbff 40%, #ffffff 80%);
}

.hero.hero-platform .hero-overlay {
    display: none;
}

/* Hide the canvas visualizer and particles — not needed for clean design */
.hero.hero-platform .hero-bg-visualizer,
.hero.hero-platform .hero-particles {
    display: none;
}

.hero.hero-platform .container-wide {
    position: relative;
    z-index: 3;
}

/* CTAs and trust line visible immediately */
.hero.hero-platform .hero-ctas,
.hero.hero-platform .hero-trustline {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none !important;
}

/* Subtitle and lead: blur-in reveal after the headline lands */
@keyframes rxHeroBlurReveal {
    from { opacity: 0; filter: blur(10px); transform: translateY(6px); }
    to   { opacity: 1; filter: blur(0px); transform: translateY(0); }
}

.hero.hero-platform .hero-subtitle {
    opacity: 0;
    animation: rxHeroBlurReveal 1s cubic-bezier(0.25, 1, 0.5, 1) 0.75s forwards;
}

.hero.hero-platform .hero-lead {
    opacity: 0;
    animation: rxHeroBlurReveal 1s cubic-bezier(0.25, 1, 0.5, 1) 1.05s forwards;
}

/* Right column — product screenshots only, no orb */
.hero.hero-platform .hero-visual {
    position: relative;
    width: 100%;
    aspect-ratio: auto;
    isolation: isolate;
}

/* Product stack always visible */
.hero.hero-platform .hero-visual .hero-product-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    perspective: 1600px;
    opacity: 1;
}

/* Card animations run normally */
.hero.hero-platform .hero-visual .hero-product-stack .hero-product-card,
.hero.hero-platform .hero-visual .hero-product-stack .hero-product-glow {
    animation-play-state: running;
}

/* Hide the network orb entirely */
.hero.hero-platform .hero-network-wrap {
    display: none;
}

/* Product screenshots — stacked, slight tilt, mist-faded edges */
.hero-screenshots-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-screenshots-bg .hero-product-stack {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-48%) translateX(-15px) rotateX(10deg) rotateY(-10deg);
    width: 57%;
    perspective: 2000px;
    transform-style: preserve-3d;
}

/* Mist — super foggy: heavy veil on all edges, especially left and bottom */
.hero-screenshots-bg .hero-product-stack::after {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 20;
    background:
        linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.98) 15%, rgba(255,255,255,0.82) 35%, rgba(255,255,255,0.45) 55%, transparent 72%),
        linear-gradient(to left, rgba(255,255,255,0.65) 0%, transparent 22%),
        linear-gradient(to bottom, rgba(255,255,255,0.75) 0%, transparent 22%),
        linear-gradient(to top, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.3) 18%, transparent 35%);
    pointer-events: none;
}

.hero-screenshots-bg .hero-product-card--deep {
    width: 92%;
    top: 0;
    left: 0;
    transform: rotateX(4deg) rotateY(-2deg) translateZ(-40px) translate(14px, 18px);
    opacity: 0.22;
}

.hero-screenshots-bg .hero-product-card--mid {
    width: 96%;
    top: 0;
    left: 0;
    transform: rotateX(4deg) rotateY(-2deg) translateZ(-20px) translate(7px, 9px);
    opacity: 0.38;
}

.hero-screenshots-bg .hero-product-card--front {
    width: 100%;
    top: 0;
    left: 0;
    transform: rotateX(14deg) rotateY(-12deg);
    border-radius: 10px;
    opacity: 0.62;
    box-shadow:
        0 30px 70px -20px rgba(10, 25, 41, 0.14),
        0 8px 24px -8px rgba(10, 25, 41, 0.06);
}

/* Mobile adjustments */
@media (max-width: 900px) {
    .hero.hero-platform {
        height: auto;
        padding-top: clamp(9.75rem, 13vw, 12.5rem);
        padding-bottom: clamp(2rem, 6vw, 4rem);
    }
    .hero.hero-platform .hero-visual {
        aspect-ratio: auto;
        margin-top: clamp(2rem, 6vw, 3rem);
        min-height: auto;
    }
    .hero-screenshots-bg {
        display: none;
    }
}

/* ================================================================
   MOBILE REDESIGN — Compact nav + varied card layouts
   ================================================================ */

@media (max-width: 768px) {
    /* ---------- NAV: Kill the dongle ---------- */
    .nav-sticky {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    .nav-sticky.scrolled {
        width: 100% !important;
        top: 0 !important;
    }

    .nav-main-content {
        border-radius: 0 !important;
        min-height: 64px !important;
        padding: 0 !important;
        background: rgba(14, 45, 76, 0.96) !important;
        border: none !important;
        border-bottom: 1px solid rgba(125, 175, 220, 0.15) !important;
        box-shadow: 0 4px 20px rgba(6, 27, 45, 0.3) !important;
    }

    .nav-sticky.scrolled .nav-main-content {
        min-height: 64px !important;
        border-radius: 0 !important;
        background: rgba(14, 45, 76, 0.98) !important;
    }

    .nav-wrapper {
        min-height: 64px !important;
        padding: 0 1rem !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.75rem !important;
    }

    .logo {
        height: 44px !important;
        width: 44px !important;
        transform: none !important;
    }

    .logo-image {
        transform: scale(1.1) !important;
    }

    .nav-sticky.scrolled .logo {
        height: 44px !important;
        width: 44px !important;
        transform: none !important;
    }

    .nav-verse {
        display: none !important;
    }

    .nav-actions-stack {
        flex-direction: row !important;
        gap: 0.5rem !important;
        transform: none !important;
    }

    .nav-actions-stack .btn-login,
    .nav-actions-stack .btn-phone {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    .nav-actions-stack .btn-phone .phone-wrap {
        display: none !important;
    }

    .nav-actions-stack .btn-phone::after {
        content: 'Call' !important;
        font-weight: 700 !important;
    }

    /* Collapse action stack on scroll for mobile */
    .nav-sticky.scrolled .nav-actions-stack {
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0.5rem !important;
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .nav-sticky.scrolled .nav-actions-stack .btn-login,
    .nav-sticky.scrolled .nav-actions-stack .btn-phone {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        padding: 0.4rem 0.75rem !important;
        margin: 0 !important;
        border: inherit !important;
        overflow: visible !important;
    }

    /* Adjust mobile menu position */
    .nav-links {
        top: 68px !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        border-radius: 1rem !important;
    }

    .nav-sticky.scrolled .nav-links {
        top: 68px !important;
    }

    /* ---------- HERO: Adjust for compact nav ---------- */
    .hero.hero-platform {
        padding-top: 5rem !important;
    }

    /* ---------- CARDS: Break the monotony ---------- */

    /* Capability cards — horizontal icon-left layout */
    .capability-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .capability-card {
        display: flex !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding: 1.25rem !important;
        border-radius: var(--radius-lg) !important;
    }

    .capability-card::before {
        display: none !important;
    }

    .capability-icon {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        border-radius: var(--radius-md) !important;
    }

    .capability-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .capability-card h3 {
        font-size: 1rem !important;
        margin-bottom: 0.35rem !important;
    }

    .capability-card p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }

    /* Surface cards — featured dominates, others compact */
    .surfaces-grid {
        grid-template-columns: 1fr !important;
        gap: 0.875rem !important;
    }

    .surface-card {
        padding: 1.5rem !important;
        border-radius: var(--radius-lg) !important;
    }

    .surface-card.surface-featured {
        padding: 1.75rem !important;
        border-radius: var(--radius-xl) !important;
        order: -1 !important; /* Featured first */
        box-shadow: 0 16px 40px -12px rgba(6, 27, 45, 0.35) !important;
    }

    .surface-head {
        margin-bottom: 0.75rem !important;
    }

    .surface-pill {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.5rem !important;
    }

    .surface-card h3 {
        font-size: 1.15rem !important;
        margin-bottom: 0.5rem !important;
    }

    .surface-card > p {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }

    .surface-features {
        gap: 0.4rem !important;
        margin-bottom: 1.25rem !important;
    }

    .surface-features li {
        font-size: 0.85rem !important;
        padding-left: 1.15rem !important;
    }

    .surface-link {
        font-size: 0.88rem !important;
    }

    /* Audience cards — left-border accent style, no heavy card */
    .audience-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .audience-card {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.875rem !important;
        padding: 1rem 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid var(--rx-line, #e8ecf1) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .audience-card:last-child {
        border-bottom: none !important;
    }

    .audience-card:hover {
        transform: none !important;
        border-color: var(--rx-line, #e8ecf1) !important;
        box-shadow: none !important;
    }

    .audience-icon {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(0, 78, 124, 0.1)) !important;
        border-radius: var(--radius-md) !important;
    }

    .audience-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .audience-card h3 {
        font-size: 0.95rem !important;
        margin-bottom: 0.25rem !important;
    }

    .audience-card p {
        font-size: 0.85rem !important;
        line-height: 1.45 !important;
    }

    /* Section spacing tighten */
    .platform-section,
    .surfaces-section,
    .storefront-proof,
    .audiences-section,
    .programs-section,
    .nutrition-section,
    .faq.faq-platform {
        padding: 2.5rem 0 !important;
    }

    .section-head {
        margin-bottom: 1.5rem !important;
    }

    .section-title {
        font-size: clamp(1.6rem, 1.5rem + 2vw, 2rem) !important;
    }

    .section-lede {
        font-size: 0.95rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero.hero-platform .hero-product-stack .hero-product-card,
    .hero.hero-platform .hero-product-stack .hero-product-glow {
        animation: none;
    }
}


/* =========================================================
   RxSpot Hero v3 — refactor: editorial composition,
   single directional light, product shot as an object,
   CSS-var-composed transforms (no GSAP/keyframe collisions)
   ========================================================= */

/* ---------- Scoped design tokens ---------- */
.hero-v3 {
  --bone:        #FFFFFF;
  --surface:     rgba(255, 255, 255, 0.06);
  --surface-alt: rgba(255, 255, 255, 0.03);
  --ink:         #FFFFFF;
  --ink-2:       rgba(255, 255, 255, 0.92);
  --slate:       rgba(255, 255, 255, 0.62);
  --slate-2:     rgba(255, 255, 255, 0.36);
  --hairline:    rgba(255, 255, 255, 0.10);
  --hairline-2:  rgba(255, 255, 255, 0.045);
  --pulse:       #22D3EE;
  --pulse-2:     #06B6D4;
  --blue:        #3B82F6;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --ease-snap:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --gutter:      clamp(1.25rem, 2.5vw, 2.5rem);
  --max-w:       1340px;
}

.hero-v3 {
  position: relative;
  overflow: visible;
}

.hero-v3__pin {
  position: relative;
  width: 100%;
  max-width: none;
  height: var(--vzh, 100dvh);
  min-height: 700px;
  overflow: visible;
  /* Subtle directional gradient: cooler upper-right, deeper lower-left.
     Reads as one ambient light source rather than five competing glows. */
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, #14304f 0%, #0a1a2e 35%, #060e1a 75%),
    linear-gradient(168deg, #060e1a 0%, #0a1828 60%, #061321 100%);
  isolation: isolate;
}

/* Desktop: hero fills viewport but isn't pinned — scroll-driven screenshot only */
@media (min-width: 961px) {
  .hero-v3__pin { height: var(--vzh, 100dvh); overflow: visible; }
}

.hero-v3__inner {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: start center;
  padding: clamp(11rem, 13vw, 12.5rem) var(--gutter) clamp(1.5rem, 2vw, 2rem);
  overflow: visible;
}

/* ---------- Noise grain overlay (very subtle, breaks gradient banding) ---------- */
.hero-v3__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ---------- Background: one directional light + a second quiet wash ---------- */
.hero-v3__bg-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 75% at 92% 8%,
      rgba(34, 211, 238, 0.18) 0%,
      rgba(34, 211, 238, 0.08) 22%,
      transparent 55%);
}
.hero-v3__bg-light--secondary {
  background:
    radial-gradient(ellipse 55% 50% at 70% 78%,
      rgba(59, 130, 246, 0.10) 0%,
      rgba(59, 130, 246, 0.04) 30%,
      transparent 60%);
  opacity: 0.85;
}

.hero-v3__bg-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--hairline-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline-2) 1px, transparent 1px);
  background-size:
    calc(100% / 12) 100%,
    100% 64px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  opacity: 0.85;
}

/* ---------- Layout grid: 5:7 asymmetric (product side dominates) ----------
   align-items: center balances the two columns vertically so the text
   column doesn't float against the top while the taller image column
   extends below it. The two columns share a visual midline. */
.hero-v3__grid {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--max-w);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

@media (max-width: 960px) {
  .hero-v3 { height: auto; }
  .hero-v3__pin { position: relative; height: auto; }
  .hero-v3__grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }
  .hero-v3__inner { padding: clamp(7rem, 12vw, 9rem) clamp(1.25rem, 4vw, 2rem) clamp(2rem, 4vw, 3rem); }
  /* Non-desktop: everything visible, no scroll reveals */
  .hero-v3__chunk,
  .hero-v3__reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  .hero-v3__headline-prefix { clip-path: none !important; -webkit-clip-path: none !important; }
  .hero-v3__left::before { display: none; }
  .hero-v3__left { padding-left: 0; }
  .hero-v3__right { display: block; }
  .hero-v3__shot-stage {
    --enter-x: 0%; --enter-y: 0%; --enter-rot: 0deg; --enter-scale: 1;
    pointer-events: auto;
  }
  .hero-v3__shot-frame {
    --tilt-base-y: 0deg; --tilt-base-x: 0deg;
  }
  .hero-v3__shot-reflection { display: none; }
}

/* ---------- LEFT column + left-edge hairline anchor ---------- */
.hero-v3__left {
  position: relative;
  padding-left: clamp(0.875rem, 1.4vw, 1.5rem);
}
.hero-v3__left::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 10%,
    rgba(255, 255, 255, 0.14) 88%,
    transparent 100%);
  pointer-events: none;
}

/* ---------- HEADLINE — Outfit 700, prefix masks in, em fades up ---------- */
.hero-v3__headline {
  font-family: var(--font-display);
  font-weight: 700;
  /* Capped at 3.6rem so a 3-line headline fits within ~190px at zoom 1.0.
     Scales up generously on wider viewports via the 3.4vw component. */
  font-size: clamp(2rem, 0.55rem + 3.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 0.55rem;
  max-width: 18ch;
}
.hero-v3__headline-prefix {
  display: inline-block;
  vertical-align: baseline;
}
.hero-v3__headline-em {
  background: linear-gradient(118deg, var(--pulse) 0%, var(--blue) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}
.hero-v3__headline-em::after {
  content: "";
  position: absolute;
  left: 0; right: 0.05em;
  bottom: 0.02em;
  height: 0.07em;
  background: linear-gradient(90deg, var(--pulse) 0%, var(--blue) 100%);
  transform-origin: left center;
  transform: scaleX(var(--ul, 0));
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.45));
}

/* ---------- Reveal primitives (scroll-driven via GSAP) ---------- */
.hero-v3__chunk {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
}
.hero-v3__reveal {
  opacity: 0;
  transform: translateY(22px);
}

/* ---------- Body copy ---------- */
.hero-v3__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.55rem + 0.55vw, 1.15rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 42ch;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}

.hero-v3__lead {
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 0.5rem + 0.4vw, 1rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.52);
  max-width: 46ch;
  margin: 0 0 0.75rem;
}

/* ---------- Editorial process list — oversized numerals as visual anchors ---------- */
.hero-v3__process {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.hero-v3__process-item {
  display: grid;
  grid-template-columns: clamp(2.8rem, 4vw, 3.6rem) 1fr;
  gap: clamp(0.6rem, 1vw, 0.9rem);
  align-items: start;
  padding: 0.65rem 0 0.7rem;
  border-bottom: 1px solid var(--hairline);
  cursor: default;
  transition: background 0.4s var(--ease-soft);
  position: relative;
}
.hero-v3__process-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-soft);
}
.hero-v3__process-item:hover::before { opacity: 1; }

.hero-v3__process-num {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.2rem);
  font-weight: 600;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  line-height: 0.95;
  color: rgba(255, 255, 255, 0.06);
  letter-spacing: -0.03em;
  transition: color 0.45s var(--ease-soft);
  user-select: none;
  padding-top: 0.1rem;
}
.hero-v3__process-item:hover .hero-v3__process-num {
  color: rgba(34, 211, 238, 0.18);
}

.hero-v3__process-text strong {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 0.55rem + 0.35vw, 0.98rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.18rem;
  letter-spacing: -0.008em;
}
.hero-v3__process-text span {
  font-family: var(--font-body);
  font-size: clamp(0.83rem, 0.5rem + 0.25vw, 0.88rem);
  color: rgba(255, 255, 255, 0.56);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .hero-v3__process-item {
    grid-template-columns: 1.75rem 1fr;
    gap: 0.75rem;
  }
}

/* ---------- CTAs ---------- */
.hero-v3__ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 0.4rem;
}
.hero-v3__cta {
  --mag-x: 0px;
  --mag-y: 0px;
  --hover-y: 0px;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.8rem 1.45rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transform: translate3d(var(--mag-x), calc(var(--mag-y) + var(--hover-y)), 0);
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
              background 0.25s var(--ease-soft),
              box-shadow 0.3s var(--ease-soft),
              border-color 0.25s var(--ease-soft);
}
.hero-v3__cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #060e1a,
    0 0 0 4px var(--pulse),
    0 0 24px -4px rgba(34, 211, 238, 0.55);
}

.hero-v3__cta--primary {
  background: linear-gradient(135deg, var(--pulse) 0%, var(--pulse-2) 100%);
  color: #061722;
  font-weight: 600;
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 24px -8px rgba(34, 211, 238, 0.35);
}
.hero-v3__cta--primary:hover {
  --hover-y: -1px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 12px 36px -8px rgba(34, 211, 238, 0.55),
    0 0 0 1px rgba(34, 211, 238, 0.22);
}
.hero-v3__cta--primary::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transition: left 0.65s var(--ease-soft);
  pointer-events: none;
}
.hero-v3__cta--primary:hover::before { left: 140%; }

.hero-v3__cta--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.hero-v3__cta--ghost .hero-v3__cta-label {
  position: relative;
  display: inline-block;
}
/* Hairline underline draw on hover (replaces border-color flicker) */
.hero-v3__cta--ghost .hero-v3__cta-label::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.hero-v3__cta--ghost:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.035);
}
.hero-v3__cta--ghost:hover .hero-v3__cta-label::after {
  transform: scaleX(1);
}

/* CTA arrow stack — ghost trail behind real arrow on hover */
.hero-v3__cta-arrows {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
}
.hero-v3__cta-arrow {
  position: absolute;
  top: 0; left: 0;
  transition: transform 0.32s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 0.32s var(--ease-soft);
}
.hero-v3__cta-arrow--trail {
  opacity: 0;
  transform: translateX(-6px);
}
.hero-v3__cta:hover .hero-v3__cta-arrow:not(.hero-v3__cta-arrow--trail) {
  transform: translateX(4px);
}
.hero-v3__cta:hover .hero-v3__cta-arrow--trail {
  opacity: 0.45;
  transform: translateX(-2px);
}

/* ---------- Trustline (tabular, count-up-ready) ---------- */
.hero-v3__trustline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0.4rem 0 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
  gap: 0;
}
.hero-v3__trustline li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.1rem;
  border-right: 1px solid var(--hairline);
  white-space: nowrap;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.hero-v3__trustline li:first-child { padding-left: 0; }
.hero-v3__trustline li:last-child { border-right: 0; }
.hero-v3__trust-figure {
  color: var(--ink);
  font-weight: 600;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

@media (max-width: 640px) {
  .hero-v3__trustline { flex-direction: column; align-items: flex-start; gap: 0; }
  .hero-v3__trustline li {
    border-right: 0;
    padding: 0.45rem 0;
    width: 100%;
    border-bottom: 1px solid var(--hairline);
  }
  .hero-v3__trustline li:last-child { border-bottom: 0; }
}

/* ---------- RIGHT column: product shot as an object ---------- */
.hero-v3__right {
  position: relative;
  width: 100%;
  align-self: center;
  min-width: 0;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  /* No overflow:clip — needs to show bloom + reflection beyond bounds */
}

/* Stage: holds the entrance transform (composed via CSS vars to avoid collisions) */
.hero-v3__shot-stage {
  --enter-x: 0%;
  --enter-y: 0%;
  --enter-rot: 0deg;
  --enter-scale: 1;
  position: relative;
  width: 100%;
  z-index: 2;
  pointer-events: auto;
  perspective: 1400px;
  perspective-origin: 50% 35%;
}

/* Bloom: glow precedes the image (CSS-var opacity for GSAP-free init) */
.hero-v3__shot-bloom {
  position: absolute;
  top: -18%;
  left: -10%;
  right: -18%;
  bottom: -10%;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%,
      rgba(34, 211, 238, 0.30) 0%,
      rgba(34, 211, 238, 0.12) 30%,
      transparent 62%),
    radial-gradient(ellipse 75% 60% at 35% 70%,
      rgba(59, 130, 246, 0.18) 0%,
      rgba(59, 130, 246, 0.06) 35%,
      transparent 60%);
  filter: blur(48px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  will-change: opacity, transform;
}

/* Enter wrapper: GSAP/JS animates the composed transform via CSS vars only.
   Nothing else writes to its transform — no collisions. */
.hero-v3__shot-enter {
  position: relative;
  z-index: 2;
  transform:
    translate3d(var(--enter-x), var(--enter-y), 0)
    scale(var(--enter-scale))
    rotate(var(--enter-rot));
  opacity: var(--enter-opacity, 1);
  filter: var(--enter-filter, none);
  transform-origin: 60% 50%;
}

/* Frame: holds resting tilt + pointer tilt (separate from entrance transform).
   This is the only place rotateX/rotateY live; entrance uses 2D translate/scale/rotate. */
.hero-v3__shot-frame {
  --tilt-base-y: -2deg;
  --tilt-base-x: 1deg;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  width: min(118%, 760px);
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  background: #0d1b2a;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 8px rgba(0, 0, 0, 0.35),
    0 30px 50px -18px rgba(0, 0, 0, 0.55),
    0 60px 100px -30px rgba(0, 0, 0, 0.65),
    0 0 60px -15px rgba(34, 211, 238, 0.10);
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--tilt-base-y) + var(--tilt-y)))
    rotateX(calc(var(--tilt-base-x) + var(--tilt-x)));
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-v3__shot-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  height: 32px;
  position: relative;
  z-index: 1;
}
.hero-v3__shot-chrome span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.hero-v3__shot-inner {
  position: relative;
  width: 100%;
  height: calc(100% - 32px);
  overflow: hidden;
}
.hero-v3__shot-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

/* Light leak: directional gradient catching the upper-right ambient light.
   Lower opacity than typical — the screen-blend already brightens dark UI;
   pushing higher would wash out the "Storefront Control Center" heading. */
.hero-v3__shot-leak {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg,
      rgba(34, 211, 238, 0.14) 0%,
      rgba(34, 211, 238, 0.04) 18%,
      transparent 36%);
  mix-blend-mode: screen;
  opacity: 0.4;
  z-index: 4;
}

/* One-shot specular sheen on landing */
.hero-v3__shot-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.10) 50%,
    transparent 70%);
  pointer-events: none;
  z-index: 5;
  transform: translateX(-160%);
  animation: hero-v3-shine 2.0s cubic-bezier(0.4, 0, 0.2, 1) 1.4s both;
}
@keyframes hero-v3-shine {
  from { transform: translateX(-160%); }
  to   { transform: translateX(220%); }
}

/* Horizon line: thin luminous edge at the base of the device */
.hero-v3__shot-enter::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.25) 20%,
    rgba(34, 211, 238, 0.50) 50%,
    rgba(34, 211, 238, 0.25) 80%,
    transparent 100%);
  pointer-events: none;
  z-index: 3;
}

/* Reflection: cyan-tinged glow pool below the device */
.hero-v3__shot-reflection {
  position: absolute;
  top: 100%;
  left: 4%;
  right: 4%;
  height: 100px;
  margin-top: -18px;
  background:
    radial-gradient(ellipse 75% 100% at 50% 0%,
      rgba(34, 211, 238, 0.24) 0%,
      rgba(34, 211, 238, 0.10) 30%,
      transparent 68%);
  filter: blur(10px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}


/* =========================================================
   MOBILE OVERRIDES — placed at end so they win over earlier
   base rules. Desktop's product-shot width: min(118%, 760px)
   would overflow a 1-column mobile layout; cap at 100%.
   ========================================================= */
@media (max-width: 960px) {
  .hero-v3__shot-frame {
    width: 100%;
  }
}

/* =========================================================
   SHORT-VIEWPORT OVERRIDES (720p laptops, zoomed browsers)
   Placed at end of section to win over earlier base rules.
   Trims vertical breathing room so the trustline still fits
   above the fold. Keeps full-spaced layout for common 900+
   pixel-tall viewports.
   ========================================================= */
@media (min-width: 961px) and (max-height: 780px) {
  .hero-v3__inner { padding: clamp(10rem, 12vw, 11.5rem) var(--gutter) clamp(1.5rem, 2vw, 2rem); }
  .hero-v3__headline { font-size: clamp(1.9rem, 0.5rem + 3vw, 3.1rem); margin-bottom: 0.45rem; }
  .hero-v3__subtitle { margin-bottom: 0.4rem; }
  .hero-v3__lead { margin-bottom: 0.55rem; }
  .hero-v3__process { margin-bottom: 0.65rem; }
  .hero-v3__process-item { padding: 0.4rem 0.25rem 0.45rem; }
  .hero-v3__ctas { margin-bottom: 0.3rem; }
  .hero-v3__cta { padding: 0.65rem 1.3rem; }
  .hero-v3__trustline { padding-top: 0.3rem; }
}


/* =========================================================
   QUICK REVEAL — for lower-fold elements (footer, final CTA)
   ========================================================= */
.reveal-quick {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

.reveal-quick.in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-quick {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.no-js .reveal-quick {
    opacity: 1;
    transform: none;
}

/* =========================================================
   SCROLL-TO-TOP BUTTON (landing page)
   ========================================================= */
.scroll-to-top-landing {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(26, 61, 92, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s, background 0.15s;
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.scroll-to-top-landing.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-to-top-landing:hover {
    background: var(--accent, #0EA5E9);
}

.scroll-to-top-landing:focus-visible {
    outline: 2px solid var(--accent, #0EA5E9);
    outline-offset: 2px;
}

.scroll-to-top-landing svg {
    width: 20px;
    height: 20px;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-v3__shot-stage {
    --enter-x: 0%; --enter-y: 0%; --enter-rot: 0deg; --enter-scale: 1;
  }
  .hero-v3__headline-prefix { --mask-r: 0%; clip-path: none; -webkit-clip-path: none; }
  .hero-v3__headline-em { opacity: 1; transform: none; }
  .hero-v3__shot-bloom { opacity: 0.8; }
}

/* =========================================================
   DOCK SECTION (pulled from style.css 5015-5325 verbatim)
   ========================================================= */

/* =================================================================
   RX LANDING POLISH — 2026-06
   Scoped to .page-platform (index.html landing) unless noted.
   Adds: tightened reveal motion, cursor-spotlight cards, border
   beam on featured surface, gradient accent words, final CTA stats,
   nav scrollspy state, live chip, proof-browser tilt, skip link,
   small contrast + typography upgrades.
   ================================================================= */

/* ---------- Skip link (a11y, global) ---------- */
.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 10000;
    padding: 0.65rem 1.1rem;
    background: #061b2d;
    color: #ffffff;
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    transition: top 0.25s var(--rx-ease-out);
}
.skip-link:focus {
    top: 12px;
    outline: 2px solid var(--color-accent-cyan);
    outline-offset: 2px;
}

/* ---------- Typography: balanced titles, pretty ledes ---------- */
.page-platform .section-title,
.hero-v3__headline {
    text-wrap: balance;
}
.page-platform .section-lede,
.page-platform .capability-card p,
.page-platform .audience-card p,
.page-platform .surface-card > p {
    text-wrap: pretty;
}

/* ---------- Gradient accent word in section titles ----------
   Echoes the hero's "Commerce." treatment so the page reads as
   one system. Dark-bg variant for the nutrition card. */
.page-platform .section-title em {
    font-style: normal;
    background: linear-gradient(118deg, #0284C7 0%, #004E7C 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.page-platform .nutrition-copy .section-title em {
    background: linear-gradient(118deg, #7DD3FC 0%, #38BDF8 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Tightened reveal motion (landing only) ----------
   The legacy 180px / 1.7s reveal reads as floaty; 44px / 0.85s
   with the same family of easing feels engineered. Longhands so
   the [data-reveal-delay] stagger rules keep their delays. */
.page-platform .reveal {
    transform: translateY(44px);
    transition-property: opacity, transform;
    transition-duration: 0.85s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Hero contrast nudges (WCAG) ---------- */
.hero-v3__lead { color: rgba(255, 255, 255, 0.62); }
.hero-v3__trustline li { color: rgba(255, 255, 255, 0.58); }

/* ---------- Cursor spotlight on light cards ----------
   JS writes --spot-x/--spot-y per card; pure-CSS fallback keeps
   the glow centered. Hover-only, so coarse pointers never see it. */
.page-platform .capability-card::after,
.page-platform .audience-card::after,
.page-platform .surface-card:not(.surface-featured)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(14, 165, 233, 0.10) 0%,
        rgba(14, 165, 233, 0.04) 40%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.35s var(--rx-ease-out);
    pointer-events: none;
    z-index: 0;
}
.page-platform .capability-card:hover::after,
.page-platform .audience-card:hover::after,
.page-platform .surface-card:not(.surface-featured):hover::after {
    opacity: 1;
}
/* Keep card content above the spotlight wash */
.page-platform .capability-card > *,
.page-platform .audience-card > *,
.page-platform .surface-card > * {
    position: relative;
    z-index: 1;
}

/* ---------- Icon micro-motion on card hover ---------- */
.page-platform .capability-icon,
.page-platform .audience-icon {
    transition: background 0.35s var(--rx-ease-out),
                color 0.35s var(--rx-ease-out),
                transform 0.35s var(--rx-ease-out),
                box-shadow 0.35s var(--rx-ease-out);
}
.page-platform .capability-card:hover .capability-icon,
.page-platform .audience-card:hover .audience-icon {
    background: linear-gradient(135deg, #0EA5E9 0%, #0369A1 100%);
    color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 22px -10px rgba(14, 165, 233, 0.65);
}

/* ---------- Border beam on the featured surface card ----------
   A slow light tracer riding the card's edge. Uses @property for
   smooth angle interpolation; browsers without it see a static rim. */
@property --rx-beam {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.page-platform .surface-card.surface-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--rx-beam, 0deg),
        transparent 0deg,
        transparent 308deg,
        rgba(125, 211, 252, 0.55) 332deg,
        rgba(56, 189, 248, 0.95) 348deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: rxBeamSpin 7s linear infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes rxBeamSpin {
    to { --rx-beam: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
    .page-platform .surface-card.surface-featured::before { animation: none; }
}

/* ---------- Proof browser: pointer tilt + LIVE chip ---------- */
@media (min-width: 961px) {
    .page-platform .proof-browser { perspective: 1200px; }
    .page-platform .browser-frame {
        transform: translateY(var(--bf-lift, 0px))
                   rotateX(var(--bf-rx, 0deg))
                   rotateY(var(--bf-ry, 0deg));
        transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.5s;
    }
    .page-platform .browser-frame:hover { --bf-lift: -4px; }
}
.browser-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #15803d;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.browser-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    animation: rxLivePulse 2.2s ease-out infinite;
}
@keyframes rxLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ---------- Nav scrollspy active state ---------- */
#main-nav .nav-links a.is-active {
    color: var(--color-accent-cyan);
    text-shadow: 0 0 14px rgba(14, 165, 233, 0.55);
}

/* ---------- FAQ: per-item stagger + hover affordance ---------- */
.page-platform .faq-item {
    transition: border-color 0.25s, box-shadow 0.3s, transform 0.35s var(--rx-ease-out);
}
.page-platform .faq-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(6, 27, 45, 0.18);
}

/* ---------- Final CTA stats band ---------- */
.final-cta-stats {
    list-style: none;
    margin: var(--space-10) auto 0;
    padding: var(--space-6) 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    max-width: 720px;
}
.final-cta-stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}
.final-stat-num {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.final-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(200, 224, 241, 0.75);
}
@media (max-width: 640px) {
    .final-cta-stats {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--space-6);
    }
}

/* ---------- Footer seam (global, subtle) ---------- */
.footer {
    position: relative;
}
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(56, 189, 248, 0.45) 50%,
        transparent 100%);
    pointer-events: none;
}

/* ---------- GSAP CDN failure fallback ----------
   heroChoreo() adds .no-gsap to <html> when GSAP is unavailable;
   everything the timeline would have revealed shows immediately. */
.no-gsap .hero-v3__chunk,
.no-gsap .hero-v3__reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}
.no-gsap .hero-v3__headline { opacity: 1 !important; transform: none !important; }
.no-gsap .hero-v3__headline-em { --ul: 1; }
.no-gsap .hero-v3__shot-bloom { opacity: 0.85 !important; }