/* ===================================
   Genauris V2 - Minimalist Design
   Inspired by clean, professional aesthetics
   =================================== */

:root {
    /* Minimalist Color Palette */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-cream: #F5F5F0;
    --color-gray-light: #E8E8E3;
    --color-gray-medium: #999999;
    --color-gray-dark: #333333;

    /* Typography */
    --font-serif: 'Century Gothic', 'Questrial', sans-serif;
    --font-sans: 'Century Gothic', 'Questrial', sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font Sizes */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.5rem;
    /* 40px */
    --text-5xl: 3.5rem;
    /* 56px */
    --text-6xl: 4.5rem;
    /* 72px */

    /* Spacing */
    --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-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: 1rem;
    /* 16px */
    --radius-full: 9999px;

    /* Transitions */
    --transition-base: 0.2s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-black);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* ===================================
   Typography
   =================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
    margin-bottom: var(--space-4);
}

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

h2 {
    font-size: var(--text-5xl);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--text-3xl);
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition-base);
}

a:hover {
    opacity: 0.6;
}

/* ===================================
   Layout
   =================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-8);
}

.section {
    padding: var(--space-24) 0;
}

/* ===================================
   Navigation
   =================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-white);
    padding: var(--space-4) 0;
    z-index: 1000;
    /* Removed shadow for cleaner look matching mockup */
}

.nav-spacer {
    height: 80px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* Anchor for centered nav */
}

.nav-left {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.logo-link {
    display: block;
    line-height: 0;
}

.logo-img-full {
    height: 40px;
    /* Adjust based on logo aspect ratio */
    width: auto;
}

.nav-links-primary {
    display: flex;
    gap: var(--space-4);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    /* Hide on mobile? For now keep simple */
}

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

.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;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-gray-light);
    background: var(--color-white);
    color: var(--color-black);
    cursor: pointer;
}

.nav-toggle-icon {
    width: 20px;
    height: 14px;
    display: inline-block;
    background:
        linear-gradient(currentColor 0 0) 0 0/100% 2px,
        linear-gradient(currentColor 0 0) 0 50%/100% 2px,
        linear-gradient(currentColor 0 0) 0 100%/100% 2px;
    background-repeat: no-repeat;
}

.nav-mobile {
    display: none;
}

.nav-mobile.open {
    display: block;
}

.nav-mobile-container {
    padding: var(--space-4) 0 var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.nav-mobile-link {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-dark);
    text-transform: lowercase;
}

.nav-mobile-divider {
    height: 1px;
    background: var(--color-gray-light);
    margin: var(--space-2) 0;
}

.nav-mobile-cta {
    width: 100%;
    text-align: center;
}

.btn-login.nav-mobile-cta {
    margin-top: var(--space-1);
    display: block;
    padding: 10px 24px;
}

.nav-link {
    font-size: var(--text-base);
    text-decoration: none;
    color: var(--color-gray-dark);
    font-weight: 500;
    transition: color var(--transition-fast);
    text-transform: lowercase !important;
    /* Force lowercase to override any rogue styles */
}

.nav-link:hover {
    color: #4A90E2;
    /* Blue hover */
}

.nav-link.active {
    color: #4A90E2;
    box-shadow: 0 2px 0 0 #4A90E2;
    /* Custom underline using box-shadow to exact spacing */
}

.btn-sm {
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-sm);
    text-transform: lowercase;
    /* Mockup shows button text is lowercase too? Actually mockup says "get started" in button */
}

/* Specific override for Nav Button to match assets (Blue & thinner) */
.nav-right .btn {
    background-color: #4A90E2;
    /* Blue */
    padding-top: 5px;
    padding-bottom: 5px;
    color: var(--color-white);
    border: none;
}

.nav-right .btn:hover {
    background-color: #357ABD;
    opacity: 1;
}

/* Login Button - Secondary Style */
.btn-login {
    display: inline-block;
    padding: 5px 20px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-transform: lowercase;
    cursor: pointer;
    border: 1px solid #4A90E2;
    background: transparent;
    color: #4A90E2;
    transition: all var(--transition-base);
}

.btn-login:hover {
    background: #4A90E2;
    color: var(--color-white);
    opacity: 1;
}

/* ===================================
   Buttons
   =================================== */
.btn {
    display: inline-block;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: lowercase;
    cursor: pointer;
    border: none;
    transition: all var(--transition-base);
}

.btn-primary {
    background: var(--color-black);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-gray-dark);
    opacity: 1;
}

.btn-secondary {
    background: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-black);
}

.btn-secondary:hover {
    background: var(--color-black);
    color: var(--color-white);
    opacity: 1;
}

/* ===================================
   Central Hero Section (Redesign)
   =================================== */
.hero-central {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    /* Nav spacing */
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

.hero-container-central {
    width: 100%;
    max-width: 1400px;
    /* Wider for this layout */
    text-align: center;
}

.hero-title-central {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--color-gray-medium);
    margin-bottom: var(--space-8);
}

.hero-title-central .text-blue {
    color: #4A90E2;
}

.hero-cluster {
    position: relative;
    height: 480px;
    /* Reduced height to fit on one screen */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Center Graphic */
.hero-center-graphic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.hero-network-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Link Blocks */
.hero-link-block {
    position: absolute;
    width: 280px;
    text-align: left;
    z-index: 2;
}

.hero-link-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: var(--space-2);
}

.hero-link-desc {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.hero-link-action {
    font-size: 0.85rem;
    text-transform: none;
    /* Comp shows sentence case */
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hero-link-action:hover {
    text-decoration: underline;
}

/* Colors matching comp */
.text-blue {
    color: #4A90E2;
}

.text-gold {
    color: #DAA520;
}

.text-purple {
    color: #DA70D6;
}

/* Adjusted to match "Public Health" pink/purple in comp */
.text-green {
    color: #228B22;
}

/* Positioning */
.pos-top-left {
    top: 5%;
    left: 0;
    text-align: right;
}

.pos-top-right {
    top: 5%;
    right: 0;
    text-align: left;
}

.pos-bottom-left {
    bottom: 5%;
    left: 0;
    text-align: right;
}

.pos-bottom-right {
    bottom: 5%;
    /* Push up slightly */
    right: 0;
    text-align: left;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-cluster {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
        padding: var(--space-12) 0;
    }

    .hero-center-graphic {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 250px;
        height: 250px;
        margin: 0 auto var(--space-8);
    }

    .hero-link-block {
        position: relative;
        width: 100%;
        text-align: center;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
}

/* ===================================
   About Section
   =================================== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    margin-top: var(--space-12);
    align-items: flex-start;
}

.about-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.about-image-wrapper {
    position: sticky;
    top: 120px;
}

.about-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
}

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

.about-text p {
    color: var(--color-gray-dark);
    line-height: 1.8;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-16);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-gray-light);
}

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

.stat-number {
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    margin-bottom: var(--space-2);
}

.stat-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-medium);
}

/* ===================================
   Feature Sections (Scroll Reveal)
   =================================== */
.section-feature {
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: var(--color-white);
}

.feature-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-24);
    align-items: center;
    width: 100%;
}

.section-feature-reverse .feature-container {
    direction: rtl;
}

.section-feature-reverse .feature-content {
    direction: ltr;
}

.section-feature .feature-content {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.section-feature.visible .feature-content {
    opacity: 1;
    transform: translateY(0);
}

.feature-label {
    display: inline-block;
    font-size: var(--text-base);
    text-transform: lowercase;
    margin-bottom: var(--space-4);
    color: #4A90E2;
    /* Default Blue */
}

.feature-label-alt1 {
    color: #D4AF37;
}

/* Gold/Practitioners */
.feature-label-alt2 {
    color: #7ED321;
}

/* Green/Pharma */
.feature-label-alt3 {
    color: #BD10E0;
}

/* Purple/Public Health */

.feature-title {
    font-size: 2rem;
    line-height: 1.25;
    margin-bottom: var(--space-4);
}

.feature-description {
    font-size: 1.1rem;
    color: var(--color-gray-dark);
    margin-bottom: var(--space-6);
    max-width: 90%;
}

.feature-list {
    list-style: none;
    margin-bottom: var(--space-8);
}

.feature-list li {
    font-size: 1rem;
    color: var(--color-gray-dark);
    margin-bottom: var(--space-3);
    padding-left: var(--space-4);
    position: relative;
    line-height: 1.5;
}

/* Add bullet point */
.feature-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: currentColor;
}

.btn-text {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: inherit;
    /* inhert specific colors if needed, but keeping simple */
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.btn-text:hover {
    opacity: 0.7;
}

.feature-image-wrapper {
    position: relative;
    height: 600px;
    border-radius: 100px 0 100px 0;
    /* Leaf/organic shape effect */
    overflow: hidden;
    opacity: 0;
    transform: scale(0.95);
    transition: all 1s ease-out 0.2s;
}

.section-feature-reverse .feature-image-wrapper {
    border-radius: 0 100px 0 100px;
}

.section-feature.visible .feature-image-wrapper {
    opacity: 1;
    transform: scale(1);
}

.feature-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive Features */
@media (max-width: 768px) {
    .section-feature {
        padding: var(--space-12) 0;
        min-height: auto;
    }

    .feature-container,
    .section-feature-reverse .feature-container {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        direction: ltr;
        /* Reset direction */
    }

    .feature-image-wrapper {
        height: 300px;
        border-radius: var(--radius-md);
        order: -1;
        /* Image first on mobile */
    }

    .section-feature-reverse .feature-image-wrapper {
        border-radius: var(--radius-md);
    }

    .feature-title {
        font-size: var(--text-3xl);
    }
}

/* ===================================
   How It Works Section
   =================================== */
.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
    margin-top: var(--space-16);
}

.how-step {
    padding: var(--space-8);
}

.step-number {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    color: var(--color-gray-medium);
    margin-bottom: var(--space-4);
}

.step-title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
}

.step-description {
    color: var(--color-gray-dark);
    font-size: var(--text-sm);
    line-height: 1.8;
}

/* ===================================
   Trust Section
   =================================== */
.section-trust {
    background: var(--color-black);
    color: var(--color-white);
}

.trust-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.trust-content h2 {
    color: var(--color-white);
}

.trust-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.trust-badge {
    padding: var(--space-6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.badge-text {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ===================================
   CTA Section
   =================================== */
.section-cta {
    background: var(--color-white);
}

.cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

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

.cta-description {
    font-size: var(--text-lg);
    color: var(--color-gray-dark);
    margin-bottom: var(--space-12);
}

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

/* ===================================
   Our Approach Section
   =================================== */
.section-approach {
    background: var(--color-white);
    padding: var(--space-20) 0;
}

.section-title-left {
    font-size: 1.5rem;
    color: #4A90E2;
    margin-bottom: var(--space-8);
    font-weight: var(--font-weight-regular);
}

.approach-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    max-width: 900px;
    margin: 0 auto;
    /* Center the grid */
}

.approach-item {
    max-width: 800px;
}

.approach-item-right {
    align-self: flex-end;
    text-align: right;
}

.approach-heading {
    font-size: 1.5rem;
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-regular);
}

.approach-text {
    font-size: 1rem;
    color: var(--color-gray-dark);
    max-width: 650px;
    display: inline-block;
    /* allows text-align to control block placement if needed */
}

/* ===================================
   Patients Page Sub-sections
   =================================== */
/* Block 1: Intro */
.section-patient-intro {
    background: var(--color-white);
    padding: var(--space-8) 0 var(--space-20) 0;
}


.feature-image-wrapper-simple {
    width: 100%;
    max-width: 250px;
}

.feature-image-simple {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    /* Standard radius not organic */
}

.feature-list-questions {
    list-style: none;
    margin-bottom: var(--space-8);
}

.feature-list-questions li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--color-gray-dark);
    font-size: 1rem;
}

.feature-list-questions li::before {
    content: "○";
    /* Open circle bullet */
    position: absolute;
    left: 0;
    color: #4A90E2;
    font-weight: bold;
}

.feature-description-blue {
    font-size: 1.1rem;
    color: #4A90E2;
    /* Blue text */
    font-style: italic;
    /* Looks italic in comp */
    line-height: 1.6;
}

.feature-description-blue-italic {
    font-size: 1.1rem;
    color: #4A90E2;
    font-style: italic;
    line-height: 1.6;
}

.feature-image-inset {
    margin-top: var(--space-8);
    max-width: 400px;
}

.feature-image-inset .feature-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Image floated left with text wrapping */
.feature-with-image-left {
    overflow: hidden;
}

.feature-image-float-left {
    float: left;
    max-width: 150px;
    margin-right: var(--space-6);
    margin-bottom: var(--space-4);
}

.feature-image-float-left img {
    width: 100%;
    height: auto;
}

.feature-with-image-left .feature-list-blue {
    overflow: hidden;
}

/* Block 2: Token */
.section-patient-token {
    padding: var(--space-24) 0;
    background: var(--color-white);
    /* Fallback light blue/grey */
    background-image: url('images/patient-circuit-bg.png');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* .token-content background removed for direct text contrast */

/* ===================================
   Practitioners Page Sub-sections
   =================================== */
/* Block 1: Intro */
.section-practitioner-intro {
    background: var(--color-white);
    padding: var(--space-8) 0 var(--space-12) 0;
}

.feature-container-text {
    /* Text only container - inherits .container width */
    margin: 0 auto;
}

.feature-content-full {
    width: 100%;
}

.feature-label-gold {
    display: inline-block;
    font-size: 1.5rem;
    text-transform: lowercase;
    margin-bottom: var(--space-3);
    color: #D4AF37;
    /* Gold */
}

.feature-title-large {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    line-height: 1.3;
    margin-bottom: var(--space-4);
    color: var(--color-black);
    font-weight: var(--font-weight-regular);
}

.feature-lead {
    font-size: 1.1rem;
    margin-bottom: var(--space-4);
    color: var(--color-gray-dark);
}

.feature-list-gold {
    list-style: none;
    margin-bottom: var(--space-8);
}

.feature-list-gold li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--color-gray-dark);
    font-size: 1rem;
}

.feature-list-gold li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: #D4AF37;
    font-weight: bold;
}

.text-gold {
    color: #D4AF37;
}

.feature-description-gold-italic {
    font-size: 1.1rem;
    color: #D4AF37;
    font-style: italic;
    line-height: 1.6;
}

/* Block 2: Longitudinal Records */
/* Reuses .feature-container and .feature-image-wrapper */
.subsection-title {
    font-size: 1.5rem;
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--color-black);
    font-weight: var(--font-weight-regular);
}

.subsection-title.text-gold {
    color: #D4AF37;
}

/* Practitioner Specific Layouts */
.practitioner-intro-block {
    max-width: 100%;
    margin-bottom: var(--space-8);
}

.practitioner-intro-block .feature-description {
    max-width: 100%;
}

.practitioner-split-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.practitioner-text-col {
    flex: 1;
}

.practitioner-image-col {
    flex: 1;
}

@media (max-width: 768px) {
    .practitioner-split-row {
        flex-direction: column-reverse;
        /* Stack image on top or bottom? usually top, but let's stick to natural flow or requested styles. Mockup implies side-by-side desktop. Mobile usually stacks. */
        align-items: flex-start;
    }

    .practitioner-image-col {
        width: 100%;
        margin-bottom: var(--space-8);
    }
}

/* Block 3: Insights */
.section-practitioner-insights {
    padding: var(--space-16) 0;
    background-image: url('images/practitioner-dashboard-bg.png');
    background-size: cover;
    background-position: center;
    position: relative;
    color: var(--color-black);
    /* Dark text on light BG */
}

/* Overlay removed */

.section-practitioner-insights .container {
    position: relative;
    z-index: 2;
}

.insights-content {
    /* background: rgba(255, 255, 255, 0.7); removed for full overlay style */
    padding: var(--space-8) 0;
    max-width: 100%;
    margin: 0 auto;
}

.insights-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    line-height: 1.3;
    margin-bottom: var(--space-4);
    color: var(--color-black);
    text-align: center;
}

.insights-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: var(--space-4);
    color: var(--color-gray-dark);
}

.feature-list-gold-sm {
    list-style: none;
}

.feature-list-gold-sm li {
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-2);
    color: var(--color-gray-dark);
    font-size: var(--text-base);
}

.feature-list-gold-sm li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: #D4AF37;
    font-weight: bold;
    font-size: 0.8em;
}

/* ===================================
   Pharma Page Sub-sections
   =================================== */
/* Block 1: Intro */
.section-pharma-intro {
    background: var(--color-white);
    padding: var(--space-8) 0 var(--space-12) 0;
}

.feature-label-green {
    display: inline-block;
    font-size: 1.5rem;
    text-transform: lowercase;
    margin-bottom: var(--space-3);
    color: #7ED321;
    /* Green */
}

.feature-list-green {
    list-style: none;
    margin-bottom: var(--space-8);
}

.feature-list-green li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--color-gray-dark);
    font-size: 1rem;
}

.feature-list-green li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: #7ED321;
    font-weight: bold;
}

.text-green {
    color: #7ED321;
}

.feature-description-green-italic {
    font-size: 1.1rem;
    color: #7ED321;
    font-style: italic;
    line-height: 1.6;
}

/* Block 2: Clinical Trials */
.subsection-title.text-green {
    color: #7ED321;
}

.pharma-intro-block {
    max-width: 100%;
    margin-bottom: var(--space-8);
}

.pharma-intro-block .feature-description {
    max-width: 100%;
}

.pharma-split-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.pharma-text-col {
    flex: 1;
}

.pharma-image-col {
    flex: 1;
}

@media (max-width: 768px) {
    .pharma-split-row {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .pharma-image-col {
        width: 100%;
        margin-bottom: var(--space-8);
    }
}

/* Block 3: RWE */
.section-pharma-rwe {
    background: var(--color-white);
    padding: var(--space-12) 0;
}

/* ===================================
   Public Health Page Sub-sections
   =================================== */
/* Block 1: Intro */
/* Block 1: Intro */
.section-ph-intro {
    background: var(--color-white);
    padding: var(--space-8) 0 var(--space-12) 0;
}


.feature-label-purple {
    display: inline-block;
    font-size: 1.5rem;
    text-transform: lowercase;
    margin-bottom: var(--space-3);
    color: #C042BC;
    /* Purple */
}

.feature-list-purple {
    list-style: none;
    margin-bottom: var(--space-8);
}

.feature-list-purple li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--color-gray-dark);
    font-size: 1rem;
}

.feature-list-purple li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: #C042BC;
    font-weight: bold;
}

.text-purple {
    color: #C042BC;
}

.ph-intro-block {
    max-width: 100%;
    margin-bottom: var(--space-8);
}

.ph-intro-block .feature-description {
    max-width: 100%;
}

.ph-split-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-8);
}

.ph-text-col {
    flex: 1;
}

.ph-image-col {
    flex: 1;
}

.ph-bottom-block {
    max-width: 100%;
}

@media (max-width: 768px) {
    .ph-split-row {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .ph-image-col {
        width: 100%;
        margin-bottom: var(--space-8);
    }
}

/* ===================================
   About Page Sub-sections
   =================================== */
/* Intro */
.section-about-intro {
    padding: var(--space-8) 0 var(--space-12) 0;
    text-align: center;
}

.section-about-intro .feature-content-full {
    text-align: left;
    /* Keep left aligned as per mock? Mock looks left aligned actually */
}

/* Values Grid */
.section-about-values {
    padding: var(--space-12) 0;
    background: var(--color-white);
}

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

.values-left {
    max-width: 500px;
}

.feature-label-blue {
    display: inline-block;
    font-size: 1.5rem;
    text-transform: lowercase;
    margin-bottom: var(--space-3);
    color: #4A90E2;
}

.text-gray {
    color: var(--color-gray-dark);
}

.value-item {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    align-items: flex-start;
}

.value-icon-wrapper {
    flex: 0 0 80px;
    /* Increased from 50px */
}

.value-icon {
    width: 100%;
    height: auto;
}

/* Color Utilities */
.text-green {
    color: #7ED321;
}

.text-purple {
    color: #C042BC;
}

.value-title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
    text-transform: lowercase;
    /* as per mock "patient ownership." */
}

.text-blue {
    color: #4A90E2;
}

/* Story Section */
.section-about-story {
    padding: var(--space-8) 0;
    min-height: 0;
    overflow: visible;
    /* Ensure no clipping if we push boundaries */
}

.section-about-story .feature-container {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    /* Give text more room, squeeze image column */
    gap: var(--space-6);
    /* Close gap */
    align-items: center;
    /* Vertically align center */
}

.section-about-story .feature-description {
    font-size: 0.95rem;
    /* Slightly larger than text-sm, smaller than base */
    margin-bottom: var(--space-3);
    line-height: 1.6;
    max-width: 100%;
    /* Allow full width of column */
}

.section-about-story .feature-image-wrapper {
    height: auto;
    border-radius: 0;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    /* Push image to far right */
    align-items: center;
}

.section-about-story .feature-image {
    object-fit: contain;
    max-height: 400px;
    /* constraint height slightly */
    max-width: 100%;
}

.feature-image-wrapper-globe {
    /* Specific wrapper if needed, otherwise reuses base styles */
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.feature-image-globe {
    width: 100%;
    height: auto;
}

/* ===================================
   Leadership & Advisors
   =================================== */
.section-leadership,
.section-advisors {
    padding: var(--space-12) 0;
    text-align: left;
    /* Changed from center */
}

.section-leadership .feature-label-blue,
.section-advisors .feature-label-gold {
    display: inline-block;
    font-size: var(--text-xl);
    /* Removed text-transform: lowercase to inherit capitalize */
    margin-bottom: var(--space-8);
}

.feature-label-gold {
    color: #D4AF37;
    font-weight: var(--font-weight-regular);
}

.team-grid {
    display: grid;
    gap: var(--space-8);
    justify-content: center;
}

.team-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.team-grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.team-member-img-wrapper {
    width: 150px;
    height: 150px;
    margin-bottom: var(--space-4);
    /* For cutout feel */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.team-member-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.team-member-placeholder {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.icon-user {
    width: 80px;
    height: 80px;
}

.team-name {
    font-size: 0.9rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    margin-bottom: var(--space-1);
    line-height: 1.2;
}

.team-title {
    font-size: 0.8rem;
    color: var(--color-black);
    line-height: 1.3;
}

.text-gold {
    color: #D4AF37;
}

/* Responsive */
@media (max-width: 1024px) {

    .team-grid-5,
    .team-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {

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

/* ===================================
   Auto-flip Carousel
   =================================== */
.section-carousel {
    position: relative;
    width: 100%;
}

.carousel-viewport {
    position: relative;
    height: 100vh;
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    height: 100%;
    width: 400%;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

.landing-card {
    flex: 0 0 25%;
    /* Each card takes 25% of track (100% of viewport) */
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Carousel Navigation */
.carousel-nav {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--color-gray-dark);
}

.carousel-btn:hover {
    background: var(--color-white);
    border-color: #4A90E2;
    color: #4A90E2;
}

.carousel-dots {
    display: flex;
    gap: 12px;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.carousel-dot:hover {
    border-color: #4A90E2;
}

.carousel-dot.active {
    background: #4A90E2;
    border-color: #4A90E2;
}

/* Organic Shapes - kept for visual flair but full screen logic applies */
.card-shape-1 {
    /* shape logic might need adjusting for full screen, 
       but we can keep the border radius for the internal content container if we wanted,
       or just full bleed. User asked for sections to pull in. 
       Let's keep them full bleed rectangles for the carousel effect. */
    border-radius: 0;
}

.card-shape-2 {
    border-radius: 0;
}

/* Background Image Layer */
.landing-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Gradient Overlay - Left Focus */
.landing-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #FFFFFF 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0.4) 100%);
    z-index: 2;
}

/* Gradient Overlay - Right Focus */
.landing-card-overlay-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-90deg, #FFFFFF 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0.4) 100%);
    z-index: 2;
}

/* Content */
.landing-card-content {
    position: relative;
    z-index: 3;
    max-width: 65%;
    /* Widen to 65% */
    padding: var(--space-12);
    margin-left: 10%;
    /* Indent from edge */
}

.landing-card-content.content-right {
    margin-left: auto;
    margin-right: 10%;
    text-align: right;
}

/* Typography Details */
.landing-card-headline {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: var(--space-4);
    color: var(--color-black);
}

.landing-card-text {
    font-size: 1rem;
    color: var(--color-gray-dark);
    margin-bottom: var(--space-3);
    line-height: 1.5;
    max-width: 90%;
}

.landing-card-link {
    display: inline-block;
    margin-top: var(--space-4);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-lg);
    text-decoration: none;
    border-bottom: 2px solid currentColor;
}

.landing-card-link:hover {
    opacity: 0.8;
}

/* Adjustments for right alignment text specificity if needed */
.landing-card-content.content-right .landing-card-text {
    margin-left: auto;
    /* helps if lines are short */
}

/* Mobile Fallback */
@media (max-width: 768px) {
    .section-carousel {
        height: auto;
    }

    .carousel-viewport {
        position: static;
        height: auto;
    }

    .carousel-track {
        flex-direction: column;
        width: 100%;
        transform: none !important;
    }

    .landing-card {
        flex: none;
        height: auto;
        min-height: 500px;
        width: 100%;
        flex-direction: column;
    }

    .landing-card-bg {
        position: absolute;
        height: 100%;
    }

    /* Tweaked overlays for mobile readability */
    .landing-card-overlay,
    .landing-card-overlay-right {
        background: rgba(255, 255, 255, 0.9);
    }

    .landing-card-content,
    .landing-card-content.content-right {
        max-width: 100%;
        text-align: left;
        margin: 0;
        padding: var(--space-8);
    }

    /* Hide carousel navigation on mobile */
    .carousel-nav {
        display: none;
    }
}

.feature-description-purple-italic {
    font-size: 1.1rem;
    color: #C042BC;
    font-style: italic;
    line-height: 1.6;
}

/* Block 2: Network Effect */
.section-ph-network {
    padding: var(--space-12) 0;
}

.feature-row-split {
    display: flex;
    gap: var(--space-12);
    margin-top: var(--space-8);
}

.feature-col-left {
    flex: 1;
}

.feature-col-right {
    flex: 0 0 400px;
}

.ph-case-study {
    background-image: url('images/ph-street.png');
    background-size: cover;
    background-position: center;
    border: 2px solid #C042BC;
    padding: var(--space-6);
    position: relative;
}

/* Overlay for text readability on case study */
.ph-case-study::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1;
}

.case-study-title,
.case-study-text {
    position: relative;
    z-index: 2;
}

.case-study-title {
    color: #C042BC;
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
    text-align: center;
}

.case-study-text {
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

/* Block 3: Diverse Data */
.section-ph-data {
    background-image: url('images/public-health-data-bg.png');
    background-size: cover;
    background-position: center;
    padding: var(--space-16) 0;
    position: relative;
}

/* Overlay for data section */
/* Overlay removed */

.section-ph-data .container {
    position: relative;
    z-index: 2;
}

.feature-row-split-bullets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    margin-top: var(--space-8);
}

.feature-list-purple-sm {
    list-style: none;
}

.feature-list-purple-sm li {
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-2);
    color: var(--color-gray-dark);
    font-size: var(--text-base);
}

.feature-list-purple-sm li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: #C042BC;
    font-weight: bold;
    font-size: 0.8em;
}


/* Block 4: Catalyzing Agency */
.section-ph-agency {
    background-image: url('images/public-health-agency-bg.png');
    background-size: cover;
    background-position: center;
    padding: var(--space-16) 0;
    position: relative;
}

/* Overlay removed */

.section-ph-agency .container {
    position: relative;
    z-index: 2;
}

.feature-description-lg {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: var(--space-4);
    color: var(--color-black);
}



.token-title {
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: var(--space-8);
}

.token-body {
    background: rgba(255, 255, 255, 0.6);
    /* Slight backing for readability */
    padding: var(--space-8);
    border-radius: var(--radius-md);
    backdrop-filter: blur(5px);
}

.token-intro {
    font-size: 1.1rem;
    margin-bottom: var(--space-6);
}

.token-list {
    list-style: none;
}

.token-list>li {
    font-size: 1.1rem;
    margin-bottom: var(--space-3);
    padding-left: var(--space-6);
    position: relative;
}

.token-list>li::before {
    content: "○";
    color: #DAA520;
    /* Gold bullets */
    position: absolute;
    left: 0;
}

.token-sublist {
    list-style: disc;
    /* Filled bullets? Comp is hard to see, looks like solid dots */
    margin-left: var(--space-8);
    margin-top: var(--space-2);
}

.token-sublist li {
    font-size: 1rem;
    margin-bottom: var(--space-2);
    color: var(--color-gray-dark);
}


/* Block 3: App */
.app-intro-block {
    max-width: 100%;
    margin-bottom: var(--space-8);
}

.app-content-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
}

.app-image-wrapper {
    flex: 0 0 300px;
    /* Base width for phone */
}

.app-image-phone {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

.app-list-wrapper {
    flex: 1;
    padding-top: var(--space-4);
    /* Align slightly with phone screen top */
}

@media (max-width: 768px) {
    .app-content-row {
        flex-direction: column;
        align-items: center;
    }

    .app-image-wrapper {
        flex: auto;
        width: 100%;
        max-width: 300px;
        margin-bottom: var(--space-8);
    }
}

.section-patient-app {
    padding: var(--space-20) 0;
    background: var(--color-white);
}

.text-blue-header {
    color: #4A90E2;
}

/* HealthIQ Section Layout */
.healthiq-intro {
    margin-bottom: var(--space-8);
}

.healthiq-layout {
    overflow: hidden;
}

.healthiq-phone {
    float: left;
    max-width: 220px;
    margin-right: var(--space-8);
    margin-bottom: var(--space-4);
}

.healthiq-phone img {
    width: 100%;
    height: auto;
}

.healthiq-content {
    overflow: hidden;
}

@media (max-width: 768px) {
    .healthiq-phone {
        max-width: 150px;
        margin-right: var(--space-6);
    }
}

.app-list-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-regular);
}

.feature-list-blue {
    list-style: none;
}

.feature-list-blue li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    font-size: 1.1rem;
}

.feature-list-blue li::before {
    content: "○";
    color: #4A90E2;
    position: absolute;
    left: 0;
}


/* Specific text colors from comp */
.text-purple {
    color: #A020F0;
}

.text-gold {
    color: #DAA520;
}

.text-green {
    color: #228B22;
}


/* ===================================
   Partners Section
   =================================== */
.section-partners {
    padding: var(--space-20) 0;
    background: var(--color-white);
}

.partners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    max-width: 900px;
    margin: 0 auto;
}

.partners-title {
    font-size: 1.5rem;
    color: #4A90E2;
    margin-bottom: var(--space-6);
    font-weight: var(--font-weight-regular);
}

.partners-logos {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    flex-wrap: wrap;
}

.partner-logo-img {
    height: 50px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    /* Removed grayscale to match colorful mockup */
}

.partner-logo-img:hover {
    opacity: 0.8;
}

.partner-logo-text {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-dark);
}

/* ===================================
   Coming Soon Pages
   =================================== */
.coming-soon {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.coming-soon-container {
    max-width: 760px;
    text-align: left;
}

.coming-soon-title {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-6);
}

.coming-soon-text {
    color: var(--color-gray-dark);
    font-size: var(--text-lg);
}

.coming-soon-actions {
    margin-top: var(--space-8);
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Contact page embed */
.contact-embed {
    padding: var(--space-16) 0;
}

.contact-embed-container {
    max-width: 1100px;
    margin: 0 auto;
}

.contact-embed .hs-form-frame {
    width: 100%;
    display: block;
}

@media (max-width: 768px) {
    .coming-soon {
        min-height: auto;
    }

    .coming-soon-title {
        font-size: var(--text-4xl);
    }
}


/* ===================================
   Footer Redesign
   =================================== */
.footer {
    position: relative;
    color: var(--color-white);
    border-top: none;
    padding: 0;
    /* Background Image */
    background-image: url('images/footer-bg-new.png');
    /* Using the generated image */
    background-size: cover;
    background-position: center;
}

.footer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    /* Dark overlay */
    z-index: 1;
}

.footer-container-inner {
    position: relative;
    z-index: 2;
    padding: var(--space-16) var(--space-8);
}

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

.footer-logo {
    margin-bottom: var(--space-6);
    height: 40px;
}

.social-icons {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.social-icon {
    width: 24px;
    height: 24px;
    background: var(--color-white);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    /* Slight rounded */
    font-weight: bold;
    font-size: 12px;
}

.footer-email {
    display: block;
    color: var(--color-white);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
}

.footer-links-col h4 {
    color: var(--color-white);
    font-size: var(--text-base);
    text-transform: capitalize;
    /* Normal case looks better slightly */
    margin-bottom: var(--space-6);
    font-weight: var(--font-weight-semibold);
}

.footer-links-col a {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
    text-transform: lowercase;
    /* Matches comp */
}

.footer-links-col a:hover {
    color: var(--color-white);
}

.footer-bottom-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-6);
    text-align: center;
    /* Or left? Comp doesn't explicitly show alignment but usually center or left */
}

.footer-bottom-row p {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--text-xs);
    margin: 0;
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 768px) {
    :root {
        --text-6xl: 3rem;
        --text-5xl: 2.5rem;
        --text-4xl: 2rem;
    }

    .container {
        padding: 0 var(--space-4);
    }

    .section {
        padding: var(--space-16) 0;
    }

    .nav {
        position: sticky;
        padding: var(--space-3) 0;
    }

    .nav-spacer {
        display: none;
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-links-primary,
    .nav-right {
        display: none;
    }

    .logo-img-full {
        height: 32px;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-mobile {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        border-top: 1px solid var(--color-gray-light);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }

    .nav-link {
        font-size: var(--text-sm);
    }

    .btn-sm {
        width: auto;
        text-align: center;
        padding: var(--space-3) var(--space-5);
    }

    .hero-central {
        min-height: auto;
        padding-top: var(--space-16);
        padding-bottom: var(--space-12);
    }

    .hero-grid,
    .about-grid,
    .solutions-grid,
    .how-grid,
    .footer-grid,
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

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

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

    .about-image-wrapper {
        position: static;
        top: auto;
    }

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

    .footer-container-inner {
        padding: var(--space-12) var(--space-4);
    }

    .feature-row-split {
        flex-direction: column;
    }

    .feature-col-right {
        flex: 1 1 auto;
    }

    .feature-row-split-bullets {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .cta-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    :root {
        --text-6xl: 2.5rem;
        --text-5xl: 2.1rem;
        --text-4xl: 1.75rem;
        --text-3xl: 1.5rem;
    }

    .hero-center-graphic {
        width: 220px;
        height: 220px;
    }

    .hero-icon-center {
        width: 88px;
    }

    .trust-badges {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   News Page
   =================================== */
.news-page {
    padding: var(--space-16) 0;
    min-height: 60vh;
}

.news-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.news-header .feature-title-large {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.news-header .feature-description {
    max-width: 600px;
    margin: 0 auto;
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-8);
}

/* News Card */
.news-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.news-card-image {
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.news-card-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-base);
}

.news-card:hover .news-card-image img {
    transform: scale(1.02);
}

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

.news-card-date {
    font-size: var(--text-sm);
    color: var(--color-gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news-card-title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-dark);
    margin: var(--space-2) 0 var(--space-3);
    line-height: 1.4;
}

.news-card-summary {
    font-size: var(--text-base);
    color: var(--color-gray-medium);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.news-card-link {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.news-card-link:hover {
    opacity: 0.8;
}

/* Error State */
.news-error {
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--color-gray-medium);
}

.news-error p {
    margin-bottom: var(--space-6);
}

/* Empty State */
.news-empty {
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--color-gray-medium);
}

/* Responsive */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .news-card-content {
        padding: var(--space-4);
    }
}

/* ===================================
   News Card Link Wrapper
   =================================== */
.news-card-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ===================================
   Blog Post Page
   =================================== */
.blog-post-page {
    padding: var(--space-8) 0 var(--space-16);
    min-height: 60vh;
}

.blog-back-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    margin-bottom: var(--space-8);
    transition: opacity var(--transition-fast);
}

.blog-back-link:hover {
    opacity: 0.7;
}

.blog-loading {
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--color-gray-medium);
}

.blog-error {
    text-align: center;
    padding: var(--space-16) 0;
}

.blog-error h2 {
    font-size: 1.5rem;
    margin-bottom: var(--space-4);
    color: var(--color-gray-dark);
}

.blog-error p {
    color: var(--color-gray-medium);
    margin-bottom: var(--space-6);
}

.blog-article {
    max-width: 800px;
    margin: 0 auto;
}

.blog-hero-image {
    display: none;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-8);
}

.blog-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Show blog hero image only on mobile */
@media (max-width: 768px) {
    .blog-hero-image {
        display: block;
    }
}

.blog-article-content {
    padding: 0 var(--space-4);
}

.blog-date {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

.blog-title {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-dark);
    line-height: 1.2;
    margin-bottom: var(--space-8);
}

.blog-body {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--color-gray-dark);
}

.blog-body p {
    margin-bottom: var(--space-6);
}

.blog-body h2 {
    font-size: 1.75rem;
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    color: var(--color-gray-dark);
}

.blog-body h3 {
    font-size: 1.375rem;
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    color: var(--color-gray-dark);
}

.blog-body h4 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    color: var(--color-gray-dark);
}

.blog-body ul,
.blog-body ol {
    margin-bottom: var(--space-6);
    padding-left: var(--space-8);
}

.blog-body li {
    margin-bottom: var(--space-2);
}

.blog-body blockquote {
    border-left: 4px solid #4A90E2;
    padding-left: var(--space-6);
    margin: var(--space-8) 0;
    font-style: italic;
    color: var(--color-gray-medium);
    font-size: 1.25rem;
}

.blog-body a {
    color: #4A90E2;
    text-decoration: underline;
}

.blog-body a:hover {
    opacity: 0.8;
}

.blog-body figure {
    margin: var(--space-8) 0;
}

.blog-body figure img {
    width: 100%;
    border-radius: var(--radius-md);
}

.blog-body figcaption {
    font-size: var(--text-sm);
    color: var(--color-gray-medium);
    text-align: center;
    margin-top: var(--space-2);
}

.blog-body strong {
    font-weight: var(--font-weight-semibold);
}

.blog-body code {
    background: var(--color-gray-light);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.9em;
}

.blog-body hr {
    border: none;
    border-top: 1px solid var(--color-gray-light);
    margin: var(--space-10) 0;
}

/* Blog Post Responsive */
@media (max-width: 768px) {
    .blog-title {
        font-size: 1.75rem;
    }
    
    .blog-body {
        font-size: 1rem;
    }
    
    .blog-body h2 {
        font-size: 1.5rem;
    }
    
    .blog-body h3 {
        font-size: 1.25rem;
    }
    
    .blog-body blockquote {
        font-size: 1.125rem;
        padding-left: var(--space-4);
    }
    
    .blog-article-content {
        padding: 0;
    }
}

/* ===================================
   Animations
   =================================== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}