/* ========================================
   COLOR SYSTEM
   Shift-inspired palette (indigo + pale yellow) with legacy token aliases
   ======================================== */

:root {
    /* Semantic design tokens */
    --color-primary: #635BFF;
    --color-primary-light: #8B84FF;
    --color-primary-dark: #5248e6;
    --color-secondary: #000000;
    --color-background: #F0F0F0;
    --color-surface: #FFFFFF;
    --color-accent: #FFF5C3;
    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --radius-full: 9999px;
    --radius-card: 24px;
    --shadow-nav: 0 4px 24px rgba(15, 23, 42, 0.06);
    --shadow-card-subtle: 0 1px 4px rgba(15, 23, 42, 0.03);
    /* Stacked "card" page layout (muted canvas + rounded sections) */
    --page-gutter: 18px;
    --section-stack-gap: calc(var(--page-gutter) * 1.75);
    --section-card-radius: 20px;
    --mobile-menu-inset-x: var(--page-gutter);
    --mobile-nav-bar-height: calc(var(--space-3) * 4 + 44px + var(--space-2));
    --mobile-menu-header-gap: var(--space-4);

    /* Legacy primary stack (maps to indigo system -- keeps existing components working) */
    --primary-blue: var(--color-primary);
    --primary-cyan: var(--color-primary-light);
    --primary-dark: var(--color-primary-dark);
    --primary-light: #EEF2FF;
    --accent-blue: var(--color-primary);
    --accent-cyan: var(--color-primary-light);
    
    /* Text Colors */
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-tertiary: #999999;
    
    /* Legacy text colors for compatibility */
    --text-dark: var(--text-primary);
    --text-gray: var(--text-secondary);
    
    /* Background Colors */
    --bg-primary: var(--color-surface);
    --bg-secondary: var(--color-background);
    --bg-tertiary: #E8E8ED;
    
    /* Legacy background colors */
    --bg-light: var(--bg-secondary);
    --bg-white: var(--bg-primary);
    
    /* Border Colors */
    --border-light: rgba(0, 0, 0, 0.06);
    --border-medium: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.15);
    
    /* Legacy border */
    --border-color: var(--border-light);
    
    /* Status Colors */
    --success: #30D158;
    --warning: #FF9F0A;
    --error: #FF453A;
    --info: #64D2FF;
    
    /* Glassmorphism Colors */
    --glass-white: rgba(255, 255, 255, 0.72);
    --glass-white-strong: rgba(255, 255, 255, 0.85);
    --glass-dark: rgba(0, 0, 0, 0.45);
    --glass-blue: rgba(99, 91, 255, 0.12);
    --glass-blue-strong: rgba(99, 91, 255, 0.2);
    
    /* Overlay Colors */
    --overlay-light: rgba(255, 255, 255, 0.15);
    --overlay-dark: rgba(0, 0, 0, 0.3);
    --overlay-dark-strong: rgba(0, 0, 0, 0.5);
    
    /* Shadow Colors */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.24);
    
    /* Colored Shadows */
    --shadow-blue: 0 8px 32px rgba(99, 91, 255, 0.22);
    --shadow-blue-lg: 0 16px 48px rgba(99, 91, 255, 0.28);
    --shadow-cyan: 0 8px 32px rgba(139, 132, 255, 0.22);

    /* Footer ambient background (Tenity-inspired ribbed glow) */
    --footer-bg-base: #04040c;
    --footer-glow-primary: rgba(99, 91, 255, 0.48);
    --footer-glow-accent: rgba(255, 245, 195, 0.28);
    --footer-bar-light: rgba(139, 132, 255, 0.18);
    --footer-bar-dark: rgba(99, 91, 255, 0.04);

    /* Shared outer drop shadows (primary + secondary elevation) */
    --btn-shadow-outer-rest:
        0 1px 2px rgba(15, 23, 42, 0.3),
        0 2px 6px rgba(15, 23, 42, 0.16);
    --btn-shadow-outer-hover:
        0 6px 12px rgba(15, 23, 42, 0.24),
        0 2px 4px rgba(15, 23, 42, 0.16);
    --btn-shadow-outer-active:
        0 1px 2px rgba(15, 23, 42, 0.28),
        0 1px 3px rgba(15, 23, 42, 0.16);

    /* Tactile button shadows (inset highlight + shared outer drop shadow) */
    --btn-primary-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        var(--btn-shadow-outer-rest);
    --btn-primary-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        var(--btn-shadow-outer-hover);
    --btn-primary-shadow-active:
        inset 0 2px 5px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        var(--btn-shadow-outer-active);
    --btn-secondary-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(99, 91, 255, 0.1),
        var(--btn-shadow-outer-rest);
    --btn-secondary-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(99, 91, 255, 0.12),
        var(--btn-shadow-outer-hover);
    --btn-secondary-shadow-active:
        inset 0 2px 4px rgba(99, 91, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        var(--btn-shadow-outer-active);
}

/* Dark Mode Support - Disabled to maintain light theme on all devices */
/* @media (prefers-color-scheme: dark) { ... } */

/* Background Gradients */
.gradient-hero {
    background: linear-gradient(180deg, 
        var(--bg-secondary) 0%, 
        var(--bg-primary) 100%
    );
}

.gradient-primary {
    background: linear-gradient(135deg, 
        var(--primary-blue) 0%, 
        var(--primary-cyan) 100%
    );
}

.gradient-medical {
    background: linear-gradient(135deg, 
        var(--primary-blue) 0%, 
        var(--primary-cyan) 100%
    );
}

.gradient-radial-primary {
    background: radial-gradient(
        circle at 50% 50%, 
        rgba(99, 91, 255, 0.12) 0%, 
        transparent 60%
    );
}

.gradient-radial-white {
    background: radial-gradient(
        circle at 50% 50%, 
        rgba(255, 255, 255, 0.15) 0%, 
        transparent 60%
    );
}

.gradient-mesh {
    background: 
        radial-gradient(at 0% 0%, rgba(99, 91, 255, 0.14) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(255, 245, 195, 0.35) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(99, 91, 255, 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(255, 245, 195, 0.25) 0px, transparent 50%);
}

/* Glassmorphism Utilities */
.glass {
    background: var(--glass-white);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-strong {
    background: var(--glass-white-strong);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-dark {
    background: var(--glass-dark);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-blue {
    background: var(--glass-blue);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(99, 91, 255, 0.18);
}

/* Color Classes */
.bg-white { background-color: var(--color-surface) !important; }
.bg-light { background-color: var(--color-background) !important; }
.section--surface { background-color: var(--color-surface); }
.section--muted { background-color: var(--color-background); }
.bg-primary { background-color: var(--primary-blue); }
.bg-primary-dark { background-color: var(--primary-dark); }
.bg-secondary { background-color: var(--color-background) !important; }
.bg-tertiary { background-color: #E8E8ED !important; }

.text-dark { color: var(--color-text-primary) !important; }
.text-gray { color: var(--color-text-secondary) !important; }
.text-tertiary { color: #999999 !important; }
.text-white { color: white !important; }
.text-primary { color: var(--primary-blue); }
.text-cyan { color: var(--primary-cyan); }

.border-light { border-color: var(--border-light); }
.border-medium { border-color: var(--border-medium); }
.border-primary { border-color: var(--primary-blue); }

/* Scrollbar Colors */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(99, 91, 255, 0.35);
    border-radius: 6px;
    border: 3px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 91, 255, 0.55);
}

/* Selection Colors */
::selection {
    background: var(--primary-light);
    color: var(--primary-blue);
}

::-moz-selection {
    background: var(--primary-light);
    color: var(--primary-blue);
}
/* ========================================
   TYPOGRAPHY SYSTEM
   Plus Jakarta Sans (self-hosted) + metric-matched fallback
   ======================================== */

/* Self-hosted Plus Jakarta Sans — declared in critical CSS so @font-face exists
   before first paint. Preload the matching woff2 in HTML. Variable font files
   cover weights 400–800 for latin / latin-ext (needed for à/è/ù). */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback (Arial) to limit font-swap CLS while swap completes. */
@font-face {
    font-family: "Plus Jakarta Sans Fallback";
    src: local('Arial'), local('ArialMT');
    ascent-override: 98.8763%;
    descent-override: 21.147%;
    line-gap-override: 0%;
    size-adjust: 104.9796%;
}

/* Base Typography */
body {
    font-family: var(--font-family-base);
    font-size: var(--text-base-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--color-text-primary, #111827) !important;
}

/* Typography Scale - Apple's approach */
:root {
    /* Font Families */
    --font-family-base: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: var(--font-family-base);
    --font-body: var(--font-family-base);
    
    /* Font Sizes - body (Mona Sans) uses slightly larger sizes for readability */
    --text-base-body: 1rem;       /* 16px - body base */
    --text-sm-body: 0.9375rem;    /* 15px - body small */
    --text-lg-body: 1.125rem;     /* 18px - body large */
    --text-xl-body: 1.3125rem;    /* 21px - body xl */
    
    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 0.9375rem;  /* 15px - Apple's body text */
    --text-md: 1rem;         /* 16px */
    --text-lg: 1.0625rem;    /* 17px - Apple's large body */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4.5rem;      /* 72px */
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.15;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.75;
    
    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
}

/* Heading Styles - Use Lato for headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-text-primary, #111827) !important;
    letter-spacing: -0.02em;
}

h1 {
    font-size: var(--text-6xl);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}

h3 {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    letter-spacing: -0.02em;
}

h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
}

h5 {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
}

h6 {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Paragraph Styles - Use Mona Sans for body */
p {
    font-family: var(--font-body);
    font-size: var(--text-base-body);
    line-height: 1.6;
    color: var(--color-text-secondary, #6B7280) !important;
    letter-spacing: var(--tracking-normal);
}

.text-lg {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.text-xl {
    font-size: var(--text-xl);
    line-height: var(--leading-normal);
}

.text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.text-xs {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

/* Font Weights */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Hero Typography - Lato for impact */
.hero-title {
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text-primary);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-xl-body);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    letter-spacing: var(--tracking-normal);
}

/* Section Typography */
.section-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--color-text-primary, #111827) !important;
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-lg-body);
    line-height: 1.6;
    color: var(--color-text-secondary, #6B7280) !important;
    letter-spacing: var(--tracking-normal);
}

/* Card Typography */
.card-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.card-text {
    font-family: var(--font-body);
    font-size: var(--text-base-body);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* Navigation Typography - Mona Sans for readability */
.nav-link {
    font-family: var(--font-body);
    font-size: var(--text-base-body);
    font-weight: 500;
    letter-spacing: var(--tracking-normal);
}

/* Button Typography - Lato for impact */
.btn-text {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: var(--tracking-normal);
}

/* Footer Typography */
.footer-heading {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.footer-text {
    font-family: var(--font-body);
    font-size: var(--text-base-body);
    line-height: var(--leading-relaxed);
}

.footer-small {
    font-family: var(--font-body);
    font-size: var(--text-sm-body);
    line-height: var(--leading-normal);
}

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text Decoration */
.no-underline { text-decoration: none; }
.underline { text-decoration: underline; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Line Height Utilities */
.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* Letter Spacing Utilities */
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }

/* Apple-style Emphasis */
.text-emphasis {
    font-weight: 600;
    color: var(--text-primary);
}

.text-subtle {
    color: var(--text-tertiary);
}

/* Display Text - For large hero sections with Lato */
.display-1 {
    font-family: var(--font-display);
    font-size: var(--text-7xl);
    font-weight: 700;
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
}

.display-2 {
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
}

/* Responsive Typography */
@media (max-width: 1024px) {
    :root {
        --text-6xl: 3rem;     /* 48px */
        --text-5xl: 2.5rem;   /* 40px */
        --text-4xl: 2rem;     /* 32px */
        --text-3xl: 1.75rem;  /* 28px */
    }
    
    h1, .hero-title {
        font-size: var(--text-5xl);
    }
    
    h2, .section-title {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 768px) {
    :root {
        --text-6xl: 2.5rem;   /* 40px */
        --text-5xl: 2.25rem;  /* 36px */
        --text-4xl: 1.875rem; /* 30px */
        --text-3xl: 1.5rem;   /* 24px */
        --text-xl: 1.125rem;  /* 18px */
    }
    
    h1, .hero-title {
        font-size: var(--text-5xl);
        letter-spacing: var(--tracking-tight);
    }
    
    h2, .section-title {
        font-size: var(--text-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--text-lg-body);
    }
    
    .text-lg {
        font-size: var(--text-md);
    }
}

@media (max-width: 480px) {
    :root {
        --text-6xl: 2rem;     /* 32px */
        --text-5xl: 1.875rem; /* 30px */
        --text-4xl: 1.5rem;   /* 24px */
    }
}
/* ========================================
   APPLE HIG-INSPIRED SPACING SYSTEM
   Based on 8pt grid system
   ======================================== */

/* Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 8pt Grid System Variables */
:root {
    --space-0: 0;
    --space-1: 4px;     /* 0.5 × base */
    --space-2: 8px;     /* 1 × base */
    --space-3: 12px;    /* 1.5 × base */
    --space-4: 16px;    /* 2 × base */
    --space-5: 20px;    /* 2.5 × base */
    --space-6: 24px;    /* 3 × base */
    --space-8: 32px;    /* 4 × base */
    --space-10: 40px;   /* 5 × base */
    --space-12: 48px;   /* 6 × base */
    --space-16: 64px;   /* 8 × base */
    --space-20: 80px;   /* 10 × base */
    --space-24: 96px;   /* 12 × base */
    --space-32: 128px;  /* 16 × base */
    --space-40: 160px;  /* 20 × base */
    
    /* Semantic Spacing */
    --space-xs: var(--space-2);
    --space-sm: var(--space-4);
    --space-md: var(--space-6);
    --space-lg: var(--space-8);
    --space-xl: var(--space-12);
    --space-2xl: var(--space-16);
    --space-3xl: var(--space-24);
    --space-4xl: var(--space-32);
}

/* Section Padding -- tighter within boxed cards */
.section-padding {
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5%, 3rem);
}

.section-padding-lg {
    padding: clamp(3rem, 7vw, 4.5rem) clamp(1.5rem, 5%, 3rem);
}

.section-padding-sm {
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5%, 3rem);
}

.section-padding-xs {
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5%, 3rem);
}

/* Container Max Widths */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

.container-md {
    max-width: 1024px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.container-sm {
    max-width: 768px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.container-xs {
    max-width: 640px;
    margin: 0 auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* Margin Utilities - 8pt Grid System */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }

.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.mx-auto { 
    margin-left: auto; 
    margin-right: auto; 
}

/* Padding Utilities - 8pt Grid System */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* Gap Utilities - 8pt Grid System */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

/* Specific Component Spacing */

/* Navbar: transparent shell, aligns with page gutter */
.navbar {
    padding: var(--space-3) 0;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.nav-links {
    gap: var(--space-8);
}

/* Hero Spacing */
.hero {
    padding: var(--space-40) 4% var(--space-32);
}

.hero-content {
    gap: var(--space-24);
}

/* Card Spacing */
.card {
    padding: var(--space-8);
}

.card-lg {
    padding: var(--space-10);
}

.card-sm {
    padding: var(--space-6);
}

/* Grid Spacing */
.grid-gap {
    gap: var(--space-8);
}

.grid-gap-lg {
    gap: var(--space-10);
}

.grid-gap-sm {
    gap: var(--space-6);
}

/* Footer Spacing */
.footer {
    padding: var(--space-24) 4% var(--space-8);
}

.footer-content {
    gap: var(--space-16);
    margin-bottom: var(--space-12);
}

.footer-bottom {
    padding-top: var(--space-8);
}

/* List Item Spacing */
.list-spacing li {
    margin-bottom: var(--space-3);
}

.list-spacing-sm li {
    margin-bottom: var(--space-2);
}

/* Button Spacing */
.btn {
    padding: var(--space-3) var(--space-6);
}

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

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

/* Responsive Spacing */
@media (max-width: 1024px) {
    :root {
        --space-40: 120px;
        --space-32: 96px;
        --space-24: 72px;
    }
    
    .hero-content {
        gap: var(--space-12);
    }
    
    .footer-content {
        gap: var(--space-12);
    }
}

@media (max-width: 768px) {
    :root {
        --space-40: 96px;
        --space-32: 80px;
        --space-24: 64px;
        --page-gutter: 12px;
        --section-stack-gap: calc(var(--page-gutter) * 1.75);
        --section-card-radius: 16px;
    }
    
    .section-padding {
        padding: clamp(1.5rem, 4vw, 2.5rem) var(--space-5);
    }
    
    .section-padding-lg {
        padding: clamp(2rem, 5vw, 3rem) var(--space-5);
    }
    
    .hero {
        padding: var(--space-24) var(--space-5) var(--space-20);
    }
    
    .navbar {
        padding: var(--space-3) 0;
    }
    
    .footer {
        padding: var(--space-16) var(--space-5) var(--space-8);
    }
    
    .footer-content {
        gap: var(--space-8);
    }
    
    .card {
        padding: var(--space-6);
    }
    
    .container,
    .container-md,
    .container-sm,
    .container-xs {
        padding-left: 0;
        padding-right: 0;
    }
}
/* ========================================
   LAYOUT SYSTEM
   Apple HIG-inspired layout with grid and flexbox
   ======================================== */

/* i18n: Prevent Flash of Untranslated Content */
html.lang-loading [data-i18n],
html.lang-loading [data-i18n-html] {
    visibility: hidden;
}

/* Language Selector – consistent header/footer/mobile, Safari-friendly */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Lato', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.lang-switch a {
    color: var(--text-secondary, #6E6E73);
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.lang-switch a:hover {
    color: var(--primary-blue, #635BFF);
}

.lang-switch a.active {
    color: var(--primary-blue, #635BFF);
    background-color: rgba(99, 91, 255, 0.1);
    text-decoration: none;
    -webkit-text-decoration: none;
}

.lang-switch .lang-divider {
    color: var(--text-tertiary, #86868B);
    user-select: none;
    pointer-events: none;
}

/* Footer language selector – explicit colors on dark background */
.footer-legal .lang-switch a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
}

.footer-legal .lang-switch a.active {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.15);
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
}

.footer-legal .lang-switch .lang-divider {
    color: rgba(255, 255, 255, 0.6);
}

/* Mobile menu – same as header (light context) */
.mobile-menu-wrapper .lang-switch a {
    color: var(--text-secondary, #6E6E73);
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
}

.mobile-menu-wrapper .lang-switch a.active {
    color: var(--primary-blue, #635BFF);
    background-color: rgba(99, 91, 255, 0.1);
}

.mobile-menu-wrapper .lang-switch .lang-divider {
    color: var(--text-tertiary, #86868B);
}

/* Base Layout */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background-color: var(--color-background, #F0F0F0) !important;
    background-image:
        radial-gradient(circle at 2% 18%, rgba(255, 244, 126, 0.44) 0%, rgba(255, 244, 126, 0.24) 20%, rgba(255, 244, 126, 0) 48%),
        radial-gradient(circle at 98% 24%, rgba(255, 244, 126, 0.36) 0%, rgba(255, 244, 126, 0.2) 18%, rgba(255, 244, 126, 0) 46%),
        radial-gradient(circle at 10% 78%, rgba(255, 244, 126, 0.33) 0%, rgba(255, 244, 126, 0.17) 17%, rgba(255, 244, 126, 0) 44%),
        radial-gradient(circle at 94% 74%, rgba(255, 244, 126, 0.29) 0%, rgba(255, 244, 126, 0.15) 16%, rgba(255, 244, 126, 0) 42%),
        radial-gradient(circle at 54% 48%, rgba(255, 244, 126, 0.24) 0%, rgba(255, 244, 126, 0.12) 14%, rgba(255, 244, 126, 0) 36%),
        radial-gradient(circle at 50% 2%, rgba(255, 244, 126, 0.22) 0%, rgba(255, 244, 126, 0.11) 13%, rgba(255, 244, 126, 0) 34%),
        radial-gradient(circle at 4% 52%, rgba(255, 244, 126, 0.2) 0%, rgba(255, 244, 126, 0.1) 12%, rgba(255, 244, 126, 0) 33%),
        radial-gradient(circle at 96% 50%, rgba(255, 244, 126, 0.2) 0%, rgba(255, 244, 126, 0.1) 12%, rgba(255, 244, 126, 0) 33%);
    background-repeat: no-repeat;
    background-size: 78vmax 78vmax, 74vmax 74vmax, 72vmax 72vmax, 70vmax 70vmax, 66vmax 66vmax, 64vmax 64vmax, 62vmax 62vmax, 62vmax 62vmax;
    background-position:
        var(--ambient-x1, 0%) var(--ambient-y1, 14%),
        var(--ambient-x2, 100%) var(--ambient-y2, 22%),
        var(--ambient-x3, 8%) var(--ambient-y3, 82%),
        var(--ambient-x4, 92%) var(--ambient-y4, 70%),
        var(--ambient-x5, 50%) var(--ambient-y5, 46%),
        var(--ambient-x6, 50%) var(--ambient-y6, 2%),
        var(--ambient-x7, 2%) var(--ambient-y7, 52%),
        var(--ambient-x8, 98%) var(--ambient-y8, 50%);
    animation: ambient-bg-drift 12s cubic-bezier(0.42, 0, 0.28, 1) infinite, ambient-bg-pulse 5.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes ambient-bg-drift {
    0% {
        background-position:
            var(--ambient-x1, 0%) var(--ambient-y1, 14%),
            var(--ambient-x2, 100%) var(--ambient-y2, 22%),
            var(--ambient-x3, 8%) var(--ambient-y3, 82%),
            var(--ambient-x4, 92%) var(--ambient-y4, 70%),
            var(--ambient-x5, 50%) var(--ambient-y5, 46%),
            var(--ambient-x6, 50%) var(--ambient-y6, 2%),
            var(--ambient-x7, 2%) var(--ambient-y7, 52%),
            var(--ambient-x8, 98%) var(--ambient-y8, 50%);
    }
    22% {
        background-position:
            calc(var(--ambient-x1, 0%) + 2%) calc(var(--ambient-y1, 14%) + 3%),
            calc(var(--ambient-x2, 100%) - 2%) calc(var(--ambient-y2, 22%) + 4%),
            calc(var(--ambient-x3, 8%) + 3%) calc(var(--ambient-y3, 82%) - 2%),
            calc(var(--ambient-x4, 92%) - 3%) calc(var(--ambient-y4, 70%) + 3%),
            calc(var(--ambient-x5, 50%) + 2%) calc(var(--ambient-y5, 46%) + 2%),
            calc(var(--ambient-x6, 50%) - 2%) calc(var(--ambient-y6, 2%) + 3%),
            calc(var(--ambient-x7, 2%) + 3%) calc(var(--ambient-y7, 52%) - 2%),
            calc(var(--ambient-x8, 98%) - 3%) calc(var(--ambient-y8, 50%) + 2%);
    }
    47% {
        background-position:
            calc(var(--ambient-x1, 0%) + 6%) calc(var(--ambient-y1, 14%) + 4%),
            calc(var(--ambient-x2, 100%) - 5%) calc(var(--ambient-y2, 22%) + 7%),
            calc(var(--ambient-x3, 8%) + 5%) calc(var(--ambient-y3, 82%) - 6%),
            calc(var(--ambient-x4, 92%) - 7%) calc(var(--ambient-y4, 70%) + 4%),
            calc(var(--ambient-x5, 50%) + 5%) calc(var(--ambient-y5, 46%) + 6%),
            calc(var(--ambient-x6, 50%) - 4%) calc(var(--ambient-y6, 2%) + 6%),
            calc(var(--ambient-x7, 2%) + 7%) calc(var(--ambient-y7, 52%) - 4%),
            calc(var(--ambient-x8, 98%) - 7%) calc(var(--ambient-y8, 50%) + 5%);
    }
    73% {
        background-position:
            calc(var(--ambient-x1, 0%) + 3%) calc(var(--ambient-y1, 14%) + 7%),
            calc(var(--ambient-x2, 100%) - 6%) calc(var(--ambient-y2, 22%) + 4%),
            calc(var(--ambient-x3, 8%) + 7%) calc(var(--ambient-y3, 82%) - 3%),
            calc(var(--ambient-x4, 92%) - 4%) calc(var(--ambient-y4, 70%) + 7%),
            calc(var(--ambient-x5, 50%) + 1%) calc(var(--ambient-y5, 46%) + 4%),
            calc(var(--ambient-x6, 50%) - 5%) calc(var(--ambient-y6, 2%) + 8%),
            calc(var(--ambient-x7, 2%) + 4%) calc(var(--ambient-y7, 52%) - 5%),
            calc(var(--ambient-x8, 98%) - 4%) calc(var(--ambient-y8, 50%) + 7%);
    }
    100% {
        background-position:
            calc(var(--ambient-x1, 0%) + 5%) calc(var(--ambient-y1, 14%) + 6%),
            calc(var(--ambient-x2, 100%) - 5%) calc(var(--ambient-y2, 22%) + 6%),
            calc(var(--ambient-x3, 8%) + 6%) calc(var(--ambient-y3, 82%) - 5%),
            calc(var(--ambient-x4, 92%) - 6%) calc(var(--ambient-y4, 70%) + 6%),
            calc(var(--ambient-x5, 50%) + 4%) calc(var(--ambient-y5, 46%) + 5%),
            calc(var(--ambient-x6, 50%) - 4%) calc(var(--ambient-y6, 2%) + 6%),
            calc(var(--ambient-x7, 2%) + 6%) calc(var(--ambient-y7, 52%) - 4%),
            calc(var(--ambient-x8, 98%) - 6%) calc(var(--ambient-y8, 50%) + 4%);
    }
}

@keyframes ambient-bg-pulse {
    0% {
        background-size: 68vmax 68vmax, 64vmax 64vmax, 62vmax 62vmax, 60vmax 60vmax, 56vmax 56vmax, 54vmax 54vmax, 52vmax 52vmax, 52vmax 52vmax;
    }
    18% {
        background-size: 74vmax 74vmax, 70vmax 70vmax, 68vmax 68vmax, 66vmax 66vmax, 62vmax 62vmax, 60vmax 60vmax, 58vmax 58vmax, 58vmax 58vmax;
    }
    37% {
        background-size: 86vmax 86vmax, 82vmax 82vmax, 80vmax 80vmax, 78vmax 78vmax, 74vmax 74vmax, 72vmax 72vmax, 70vmax 70vmax, 70vmax 70vmax;
    }
    58% {
        background-size: 78vmax 78vmax, 74vmax 74vmax, 72vmax 72vmax, 70vmax 70vmax, 66vmax 66vmax, 64vmax 64vmax, 62vmax 62vmax, 62vmax 62vmax;
    }
    79% {
        background-size: 84vmax 84vmax, 80vmax 80vmax, 78vmax 78vmax, 76vmax 76vmax, 72vmax 72vmax, 70vmax 70vmax, 68vmax 68vmax, 68vmax 68vmax;
    }
    100% {
        background-size: 82vmax 82vmax, 78vmax 78vmax, 76vmax 76vmax, 74vmax 74vmax, 70vmax 70vmax, 68vmax 68vmax, 66vmax 66vmax, 66vmax 66vmax;
    }
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }
}

/* Flexbox Utilities */
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

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

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

/* Grid Utilities */
.grid {
    display: grid;
}

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

.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-auto-fit-sm {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.grid-auto-fit-lg {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Positioning */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-999 { z-index: 999; }
.z-1000 { z-index: 1000; }
.z-1001 { z-index: 1001; }
.z-1002 { z-index: 1002; }

/* Width and Height */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }

/* Display */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Navbar Layout -- default: fixed for non-homepage pages */
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reserve navbar space before dynamic component injection on stacked pages.
   This prevents mobile CLS when #navbar-placeholder is populated asynchronously. */
:root {
    --navbar-placeholder-height-mobile: 107px;
    --navbar-placeholder-height-desktop: 107px;
}

main.main-stack #navbar-placeholder {
    min-height: var(--navbar-placeholder-height-mobile);
}

.navbar-content {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border-radius: 0;
    padding: var(--space-3) var(--page-gutter, 18px);
    box-shadow: none;
    border: none;
    gap: var(--space-4);
}

/* Inside the hero card, section padding handles horizontal space; navbar only needs vertical */
main.main-stack .navbar-content {
    padding: var(--space-4) 0;
}

/* When navbar lives inside a stacked-card hero, make it in-flow (relative for mobile menu anchor) */
main.main-stack .navbar {
    position: relative;
    width: auto;
    z-index: 100;
}

/* ===== STACKED-CARD PAGE LAYOUT ===== */
main.main-stack {
    display: flex;
    flex-direction: column;
    gap: var(--section-stack-gap, 32px);
    padding: var(--page-gutter, 18px) var(--page-gutter, 18px) 0;
    margin-bottom: var(--section-stack-gap, 32px);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

main.main-stack .container {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

main.main-stack > section,
main.main-stack > section.bg-light,
main.main-stack > section.bg-white {
    background: var(--color-surface, #fff) !important;
    border-radius: var(--section-card-radius, 20px);
    overflow: hidden;
}

/* Lead section: in-flow nav sits flush to top of first card */
main.main-stack > section:has(#navbar-placeholder) {
    overflow: visible;
    z-index: 10;
    padding-top: 0;
}

main.main-stack > section.modern-hero {
    overflow: visible;
}

main.main-stack > section.hero:not(.modern-hero) {
    overflow: visible;
}

main.main-stack > section:has(#navbar-placeholder).modern-hero.section-padding-lg {
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* Blog & success-stories: more space between in-flow header and hero title */
main.main-stack > section.modern-hero.modern-hero--page-hub .hero-container {
    padding-top: clamp(1.75rem, 5vw, 3.25rem);
}

/* Home, solutions, newsletter, specialty landings: extra gap below in-flow navbar before hero body */
main.main-stack > section.modern-hero.modern-hero--below-nav-gap .hero-container {
    padding-top: clamp(1.5rem, 4.5vw, 2.75rem);
}

/* Partners + Chi Siamo: more breathing room above hero content */
main.main-stack > section.modern-hero.modern-hero--top-spacious .hero-container {
    padding-top: clamp(2rem, 5.5vw, 3.25rem);
}

/* Newsletter page: hero is single-column copy only */
main.main-stack > section.modern-hero .hero-content-wrapper.hero-content-wrapper--newsletter {
    grid-template-columns: 1fr;
    max-width: 52rem;
    margin-inline: auto;
    justify-items: center;
    text-align: center;
}

main.main-stack > section.modern-hero .hero-content-wrapper.hero-content-wrapper--newsletter .hero-text {
    max-width: 42rem;
    width: 100%;
}

main.main-stack > section.modern-hero .hero-content-wrapper.hero-content-wrapper--newsletter .hero-title,
main.main-stack > section.modern-hero .hero-content-wrapper.hero-content-wrapper--newsletter .hero-subtitle {
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Critical hero layout (render-blocking) — prevents Cumulative Layout Shift.
   The same structural rules also exist in components.css, which is loaded
   asynchronously (media="print" onload). Without the render-blocking copy
   below, the above-the-fold hero paints unstyled and reflows when the async
   stylesheet arrives: the video card has no reserved height and collapses,
   and the two-column grid snaps into place. Keeping this space-reserving
   subset in render-blocking CSS sizes the hero correctly on first paint.
   Values MUST stay in sync with components.css.
   --------------------------------------------------------------------------- */
.hero-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
    min-width: 0;
}

.hero-content-wrapper > *,
.hero-image-wrapper {
    min-width: 0;
}

/* Hero headline/subtitle sizing — same values as components.css. Kept here so
   the above-the-fold text occupies its final box on first paint (defaults to
   the much larger base h1/p sizes otherwise, which reflows when the async
   stylesheet arrives). */
.hero-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.12;
    margin-bottom: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* Border/box must be render-blocking: components.css is async and would
   otherwise expand the card by 12px when it arrives (desktop CLS ~0.12). */
.hero-video-card {
    position: relative;
    background: var(--color-surface, #fff);
    border-radius: 16px;
    overflow: hidden;
    border: 6px solid var(--color-surface, #fff);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

.hero-video-card video,
.hero-video-card img {
    width: 100%;
    max-width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    margin: 0;
    padding: 0;
}

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

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-image-wrapper {
        padding-bottom: 28px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.125rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }
}

/* Newsletter signup: visual (left) + HubSpot form (right); stack on small screens */
.newsletter-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
    max-width: 1100px;
    margin-inline: auto;
    width: 100%;
}

.newsletter-page-layout__form {
    min-width: 0;
}

.newsletter-hero-visual-card {
    background-color: #f5f5f5;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    max-height: min(70vh, 520px);
    margin-inline: auto;
    width: 100%;
}

.newsletter-hero-visual-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 768px) {
    .newsletter-page-layout {
        grid-template-columns: 1fr;
    }

    .newsletter-hero-visual-card {
        max-height: none;
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 769px) {
    main.main-stack #navbar-placeholder {
        min-height: var(--navbar-placeholder-height-desktop);
    }
}

/* Blog, newsletter, success-stories: first two blocks read as one card (no gutter or seam).
   Use nth-of-type so HTML comments between sections do not break pairing. */
main.main-stack.main-stack--lead-joined > section:nth-of-type(2) {
    margin-top: calc(-1 * var(--section-stack-gap));
}

main.main-stack.main-stack--lead-joined > section:nth-of-type(1) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

main.main-stack.main-stack--lead-joined > section:nth-of-type(2) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Roadmap: merge hero + next section without overlap (prevents clipping/disappearing effects) */
main.main-stack.main-stack--roadmap-joined {
    gap: 0;
}

main.main-stack.main-stack--roadmap-joined > section:nth-of-type(1) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

main.main-stack.main-stack--roadmap-joined > section:nth-of-type(2) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}

main.main-stack.main-stack--roadmap-joined > section:nth-of-type(n+3) {
    margin-top: var(--section-stack-gap, 32px);
}

main.main-stack.main-stack--roadmap-joined > section.modern-hero::before,
main.main-stack.main-stack--roadmap-joined > section.modern-hero::after {
    display: none;
}

/*
 * Lead-joined: hero + next section render as one card.
 * - Hero z-index: auto so it doesn't stack above the 2nd section.
 * - clip the hero to its padding box so ::before/::after gradient blobs
 *   don't paint over the 2nd section in the negative-margin overlap zone.
 *   clip (not overflow:hidden) still allows dropdown menus to escape because
 *   the .navbar has its own stacking context (position:relative + z-index).
 *   NOTE: clip-path on the hero itself would trap dropdowns, so we clip
 *   blobs directly instead.
 */
main.main-stack.main-stack--lead-joined > section:has(#navbar-placeholder) {
    z-index: auto;
}

main.main-stack.main-stack--lead-joined > section.modern-hero::before,
main.main-stack.main-stack--lead-joined > section.modern-hero::after {
    display: none;
}

/* Footer card inside the stack */
body:has(main.main-stack) #footer-placeholder {
    padding: 0 var(--page-gutter, 18px);
    margin-top: 0;
    box-sizing: border-box;
}

body:has(main.main-stack) #footer-placeholder .footer.modern-footer {
    border-radius: var(--section-card-radius, 20px);
    overflow: hidden;
    margin-bottom: var(--page-gutter, 18px);
}

.logo {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
}

/* Hero Layout */
.hero-content {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-buttons {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
}

/*
 * Hero CTA critical styles (also in components.css).
 * components.css is often loaded async; without these, anchors render as default
 * inline links then jump to full-width pill buttons on mobile (CLS).
 */
.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
    font-family: var(--font-display, system-ui, sans-serif);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 22px;
    border-radius: var(--radius-full, 9999px);
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
}

.hero-buttons .btn-primary {
    background: var(--color-primary, var(--primary-blue)) !important;
    color: #fff !important;
    transition: box-shadow 0.24s cubic-bezier(0.2, 0, 0, 1), transform 0.24s cubic-bezier(0.2, 0, 0, 1), background-color 0.24s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: var(--btn-primary-shadow);
}

.hero-buttons .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--btn-primary-shadow-hover);
    background: var(--primary-dark) !important;
}

.hero-buttons .btn-primary:active {
    transform: translateY(1px);
    box-shadow: var(--btn-primary-shadow-active);
}

.hero-buttons .btn-secondary {
    background: transparent !important;
    color: var(--color-primary, var(--primary-blue)) !important;
    border: 2px solid var(--color-primary, var(--primary-blue)) !important;
    transition: box-shadow 0.24s cubic-bezier(0.2, 0, 0, 1), transform 0.24s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: var(--btn-secondary-shadow);
}

.hero-buttons .btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: var(--btn-secondary-shadow-hover);
}

.hero-buttons .btn-secondary:active {
    transform: translateY(1px);
    box-shadow: var(--btn-secondary-shadow-active);
}

.hero-buttons .btn-primary .icon-bubble,
.hero-buttons .btn-secondary .icon-bubble {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-buttons .btn-primary .icon-bubble {
    background: rgba(255, 255, 255, 0.2);
}

.hero-buttons .btn-secondary .icon-bubble {
    background: var(--color-primary, var(--primary-blue)) !important;
}

.hero-buttons .btn-primary .icon-bubble svg,
.hero-buttons .btn-secondary .icon-bubble svg {
    color: #fff !important;
    stroke: #fff !important;
}

/* Grid Layouts for Components */

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Pillars Grid */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

/* Testimonial Grid */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

/* Client Logos Grid */
.client-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    align-items: center;
}

/* Team Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-10);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
}

/* Solutions Grid */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
}

/* Footer Layout */
.footer-content {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

/* Section Headers */
.section-header {
    text-align: center;
}

/* Mobile Menu -- full-viewport panel on small screens */
.mobile-menu-wrapper {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-left: var(--mobile-menu-inset-x);
    padding-right: var(--mobile-menu-inset-x);
    box-sizing: border-box;
}

.mobile-menu-wrapper.active {
    display: block;
}

body.mobile-menu-open {
    overflow: hidden;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1002;
    padding: var(--space-2);
}

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 220px;
    z-index: 1001;
    top: 100%;
    padding-top: 8px;
}

/* Create invisible bridge for smooth mouse transition */
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.mobile-menu-wrapper .dropdown {
    width: 100%;
}

.mobile-menu-wrapper .dropdown-content {
    position: static;
    display: none;
}

.mobile-menu-wrapper .dropdown.active .dropdown-content {
    display: block;
}

/* About Content Layout */
.about-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

/* Responsive Layout */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

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

    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .testimonial-grid,
    .features-grid,
    .solutions-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    
    .about-content .about-image {
        order: 2;
    }
    
    .about-content .about-text {
        order: 1;
    }

    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--space-8);
    }
}

@media (max-width: 768px) {
    body:has(main.main-stack) {
        --mobile-menu-inset-x: calc(var(--page-gutter) + var(--space-5));
        --mobile-nav-bar-height: calc(var(--space-3) * 2 + var(--space-4) * 2 + 44px + var(--space-2));
    }

    .hamburger {
        display: flex;
    }

    .navbar.menu-open .navbar-content {
        position: relative;
        z-index: 1002;
    }

    .nav-links {
        display: none;
    }

    .navbar-content > .cta-button {
        display: none;
    }

    .mobile-menu-wrapper .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: var(--mobile-menu-header-gap) 0 0;
        padding: 0 0 var(--space-4);
        list-style: none;
        width: 100%;
        box-sizing: border-box;
        border-top: 1px solid var(--border-light);
    }

    .mobile-menu-wrapper .nav-links li {
        width: 100%;
    }

    .mobile-menu-wrapper .nav-links a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .mobile-menu-wrapper .dropdown > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-menu-wrapper .cta-button {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    .pillars-grid,
    .team-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--space-3);
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 10px 10px 10px 18px;
        gap: 10px;
    }

    .hero-buttons .btn-primary .icon-bubble,
    .hero-buttons .btn-secondary .icon-bubble {
        width: 32px;
        height: 32px;
    }
    
    .services-grid,
    .testimonial-grid {
        gap: var(--space-6);
    }
}

/* Screen-reader only (visually hidden, accessible to assistive tech) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Smooth Animations */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}