/* ===================================
CSS CUSTOM PROPERTIES - PURPLE-BLUE COLOR SYSTEM
=================================== */
:root {
 /* Primary Purple Palette */
 --primary-purple-deep: #6B46C1;
 --primary-purple-mid: #7C3AED;
 --primary-purple-light: #8B5CF6;
 
 /* Blue Accents */
 --accent-blue-deep: #2563EB;
 --accent-blue-mid: #3B82F6;
 --accent-blue-light: #60A5FA;
 
 /* Complementary Colors */
 --lavender-soft: #E9D5FF;
 --mint-green: #6EE7B7;
 --coral-warm: #FB923C;
 --indigo-deep: #312E81;
 
 /* Dark Mode Colors */
 
 --bg-dark-primary: #000000;
 --bg-dark-secondary: #1E1B4B;
 --bg-dark-tertiary: #1E1B4B;
 
 /* Light Mode Colors */
 --bg-light-primary: #ffffff;
 --bg-light-secondary: #F8FAFC;
 --text-light: #dddbe0;
 --text-dark: #1E293B;
 
 /* Gradients */
 --gradient-purple-blue: linear-gradient(135deg, var(--primary-purple-mid) 0%, var(--accent-blue-mid) 100%);
 --gradient-purple-blue-radial: radial-gradient(circle at top right, var(--primary-purple-light), var(--accent-blue-light));
 
 /* Typography */
 --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 --font-display: 'Space Grotesk', sans-serif;
 --font-serif: 'Playfair Display', Georgia, serif;
 


 /* Shadows */
 --shadow-sm: 0 2px 8px rgba(124, 58, 237, 0.1);
 --shadow-md: 0 4px 16px rgba(124, 58, 237, 0.2);
 --shadow-lg: 0 8px 32px rgba(124, 58, 237, 0.3);
 --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.4);



 /* Spacing */
 --spacing-xs: 0.5rem;
 --spacing-sm: 1rem;
 --spacing-md: 2rem;
 --spacing-lg: 4rem;
 --spacing-xl: 6rem;
 
 /* Transitions */
 --transition-fast: 0.2s ease;
 --transition-medium: 0.4s ease;
 --transition-slow: 0.6s ease;
 
}




/* ===================================
PREVENT FLASH OF UNSTYLED CONTENT (FOUC)
=================================== */
body {
    visibility: hidden;
  
}

body.loaded {
    visibility: visible;
    
}


/* ===================================
RESET & BASE STYLES
=================================== */
*, *::before, *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 font-size: 16px;
}

body {
 font-family: var(--font-body);
 background: var(--bg-dark-primary);
 color: var(--text-light);
 line-height: 1.6;
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
 }
}

/* ===================================
TYPOGRAPHY
=================================== */
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-display);
 font-weight: 700;
 line-height: 1.2;
 margin-bottom: 1rem;
}

h1 {
 font-size: clamp(2.5rem, 5vw, 4.5rem);
 background: var(--gradient-purple-blue);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

h2 {
 font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
 font-size: clamp(1.5rem, 3vw, 2.5rem);
}

p {
 margin-bottom: 1rem;
 font-size: clamp(1rem, 2vw, 1.125rem);
}

a {
 color: var(--accent-blue-light);
 text-decoration: none;
 transition: color var(--transition-fast);
}

a:hover {
 color: var(--primary-purple-light);
}

/* ===================================
LAYOUT UTILITIES
=================================== */
.container {
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 var(--spacing-md);
}

.section {
 padding: var(--spacing-xl) 0;
 position: relative;
 z-index: 10;
 background: inherit;
}

.section-title {
 text-align: center;
 margin-bottom: var(--spacing-md);
 font-size: clamp(2rem, 4vw, 3rem);
}

.section-subtitle {
 text-align: left;
 font-size: clamp(1.125rem, 2vw, 1.25rem);
 color: var(--lavender-soft);
 max-width: 800px;
 margin: 0 auto var(--spacing-lg);
}


/* ===================================
HERO SECTION WITH ANIMATED HEADER
=================================== */
.hero {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 overflow: hidden;
 background: #0a0e1a;
 padding: calc(var(--space-lg) + 70px) var(--space-md) var(--space-lg);
 margin-top: 0;
 scroll-margin-top: 70px; /* Prevent navigation overlap when scrolling */
}

.hero::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: 
     radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
     radial-gradient(circle at 80% 80%, rgba(8, 145, 178, 0.15) 0%, transparent 50%),
     radial-gradient(circle at 40% 20%, rgba(96, 165, 250, 0.1) 0%, transparent 50%);
 z-index: 1;
}

.hero-canvas {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
}

/* Hero Content */
.hero-content {
 position: relative;
 z-index: 3;
 max-width: 1200px;
 text-align: center;
 color: var(--primary-light);
}

.hero-title {
 font-family: var(--font-serif);
 font-size: clamp(2.5rem, 7vw, 6rem);
 margin-bottom: var(--space-md);
 line-height: 1.05;
 font-weight: 900;
 background: linear-gradient(135deg, #ffffff 0%, #60a5fa 50%, #0891b2 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 text-shadow: none;
 animation: fadeInUp 1s var(--transition-smooth), shimmer 3s ease-in-out infinite;
 letter-spacing: -0.02em;
}

@keyframes shimmer {
 0%, 100% {
     background-position: 0% 50%;
 }
 50% {
     background-position: 100% 50%;
 }
}

.hero-subtitle {
 font-size: clamp(1.2rem, 2.5vw, 2rem);
 margin-bottom: var(--space-lg);
 opacity: 0.95;
 animation: fadeInUp 1s var(--transition-smooth) 0.2s both;
 font-weight: 400;
 line-height: 1.5;
 max-width: 900px;
 margin-left: auto;
 margin-right: auto;
 color: #e2e8f0;
}

.hero-cta {
 display: inline-block;
 padding: 1.2rem 3rem;
 background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
 color: white;
 font-weight: 700;
 font-size: 1.1rem;
 border-radius: 50px;
 transition: all 0.4s var(--transition-smooth);
 animation: fadeInUp 1s var(--transition-smooth) 0.4s both, pulse 2s ease-in-out infinite;
 border: none;
 cursor: pointer;
 box-shadow: 0 10px 40px rgba(37, 99, 235, 0.4);
 position: relative;
 overflow: hidden;
}

.hero-cta::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
 transition: left 0.5s;
}

.hero-cta:hover::before {
 left: 100%;
}

.hero-cta:hover {
 transform: translateY(-4px) scale(1.05);
 box-shadow: 0 20px 60px rgba(37, 99, 235, 0.6);
 border-bottom-color: transparent;
}

@keyframes pulse {
 0%, 100% {
     box-shadow: 0 10px 40px rgba(37, 99, 235, 0.4);
 }
 50% {
     box-shadow: 0 10px 60px rgba(37, 99, 235, 0.6);
 }
}

@keyframes fadeInUp {
 from {
     opacity: 0;
     transform: translateY(30px);
 }
 to {
     opacity: 1;
     transform: translateY(0);
 }
}



/* ===================================
STATISTICS SECTION
=================================== */
.stats-section {
 background: var(--bg-dark-secondary);
 position: relative;
}

.stats-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: var(--spacing-md);
 margin-top: var(--spacing-lg);
}

.stat-card {
 background: rgba(124, 58, 237, 0.1);
 border: 1px solid rgba(124, 58, 237, 0.3);
 border-radius: 1rem;
 padding: var(--spacing-md);
 text-align: center;
 opacity: 0;
 transform: translateY(50px);
 transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
             transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
             border-color 0.3s ease,
             box-shadow 0.3s ease;
 will-change: opacity, transform;
}

.stat-card.animate-in {
 opacity: 1;
 transform: translateY(0);
}

/* Optimized staggered delays for smooth performance */
.stat-card:nth-child(1) { transition-delay: 0.05s; }
.stat-card:nth-child(2) { transition-delay: 0.1s; }
.stat-card:nth-child(3) { transition-delay: 0.15s; }
.stat-card:nth-child(4) { transition-delay: 0.2s; }

.stat-card:hover {
 transform: translateY(-5px);
 border-color: var(--primary-purple-light);
 box-shadow: var(--shadow-md);
}

.stat-number {
 font-size: clamp(2.5rem, 5vw, 4rem);
 font-weight: 800;
 background: var(--gradient-purple-blue);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-bottom: 0.5rem;
}

.stat-label {
 font-size: 1.125rem;
 color: var(--text-light);
 margin-bottom: 0.5rem;
}

.stat-source {
 font-size: 0.875rem;
 color: var(--lavender-soft);
 font-style: italic;
}

/* ===================================
UNDERSTANDING SECTION
=================================== */
.understanding-section {
 background: var(--bg-dark-primary);
}

.understanding-content {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--spacing-lg);
 margin-top: var(--spacing-lg);
}

.understanding-card {
 /* Match Patient Resources card styling (purple theme) */
 background: rgba(124, 58, 237, 0.1);
 border: 1px solid rgba(124, 58, 237, 0.3);
 border-radius: 1rem;
 padding: var(--spacing-md);
 transition: all var(--transition-medium);
}

.understanding-card:hover {
 transform: translateY(-5px);
 /* Align hover effect color with resources cards */
 border-color: var(--primary-purple-light);
 box-shadow: var(--shadow-md);
}

.understanding-icon {
 font-size: 3rem;
 margin-bottom: 1rem;
}

.understanding-title {
 font-size: 1.5rem;
 margin-bottom: 1rem;
 /* Use the same title color as resource cards */
 color: var(--primary-purple-light);
}

.understanding-text {
 color: var(--lavender-soft);
 line-height: 1.8;
}

/* ===================================
CONDITIONS SECTION
=================================== */
.conditions-section {
 background: var(--bg-dark-secondary);
}

.conditions-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 gap: var(--spacing-md);
 margin-top: var(--spacing-lg);
}
/* Featured presentation card that spans full width inside the grid */
.featured-presentation {
 grid-column: 1 / -1;
 background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(59, 130, 246, 0.12));
 border: 2px solid var(--primary-purple-mid);
 border-radius: 1rem;
}
.featured-presentation .condition-header {
 align-items: center;
}
.featured-presentation .condition-icon {
 font-size: 2.75rem;
}
.featured-presentation .condition-name {
 font-size: 1.5rem;
 color: var(--primary-purple-light);
}
.featured-presentation .condition-description {
 color: var(--lavender-soft);
}
.featured-presentation .condition-link {
 font-weight: 600;
}

.condition-card {
 background: rgba(124, 58, 237, 0.05);
 border: 1px solid rgba(124, 58, 237, 0.2);
 border-radius: 1rem;
 padding: var(--spacing-md);
 cursor: pointer;
 opacity: 0;
 transform: translateY(50px);
 transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
             transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
             background 0.3s ease,
             border-color 0.3s ease;
 will-change: opacity, transform;
}

.condition-card.animate-in {
 opacity: 1;
 transform: translateY(0);
}

/* Optimized staggered delays for condition cards */
.condition-card:nth-child(1) { transition-delay: 0.05s; }
.condition-card:nth-child(2) { transition-delay: 0.08s; }
.condition-card:nth-child(3) { transition-delay: 0.11s; }
.condition-card:nth-child(4) { transition-delay: 0.14s; }
.condition-card:nth-child(5) { transition-delay: 0.17s; }
.condition-card:nth-child(6) { transition-delay: 0.2s; }
.condition-card:nth-child(7) { transition-delay: 0.23s; }
.condition-card:nth-child(8) { transition-delay: 0.26s; }
.condition-card:nth-child(9) { transition-delay: 0.29s; }
.condition-card:nth-child(10) { transition-delay: 0.32s; }
.condition-card:nth-child(11) { transition-delay: 0.35s; }
.condition-card:nth-child(12) { transition-delay: 0.38s; }

/* Optimized fade-in animations for all card types */  
.understanding-card {
 opacity: 1;
 transform: translateY(0);
 transition: none;
 will-change: none;
}

.lifestyle-card, .resource-card {
 opacity: 0;
 transform: translateY(50px);
 transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
             transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 will-change: opacity, transform;
}

.lifestyle-card.animate-in, .resource-card.animate-in {
 opacity: 1;
 transform: translateY(0);
}

/* Understanding cards are now static - no animation delays needed */

/* Optimized staggered delays for lifestyle cards */
.lifestyle-card:nth-child(1) { transition-delay: 0.05s; }
.lifestyle-card:nth-child(2) { transition-delay: 0.08s; }
.lifestyle-card:nth-child(3) { transition-delay: 0.11s; }
.lifestyle-card:nth-child(4) { transition-delay: 0.14s; }
.lifestyle-card:nth-child(5) { transition-delay: 0.17s; }
.lifestyle-card:nth-child(6) { transition-delay: 0.2s; }

/* Optimized staggered delays for resource cards */
.resource-card:nth-child(1) { transition-delay: 0.05s; }
.resource-card:nth-child(2) { transition-delay: 0.08s; }
.resource-card:nth-child(3) { transition-delay: 0.11s; }
.resource-card:nth-child(4) { transition-delay: 0.14s; }
.resource-card:nth-child(5) { transition-delay: 0.17s; }
.resource-card:nth-child(6) { transition-delay: 0.2s; }

.condition-card:hover {
 transform: translateY(-5px);
 border-color: var(--primary-purple-light);
 box-shadow: var(--shadow-lg);
 background: rgba(124, 58, 237, 0.15);
}

.condition-header {
 display: flex;
 align-items: center;
 gap: 1rem;
 margin-bottom: 1rem;
}

.condition-icon {
 font-size: 2.5rem;
}

.condition-name {
 font-size: 1.5rem;
 color: var(--primary-purple-light);
}

.condition-description {
 color: var(--lavender-soft);
 margin-bottom: 1rem;
 line-height: 1.6;
}

.condition-stats {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
 margin-bottom: 1rem;
}

.condition-stat {
 background: rgba(59, 130, 246, 0.2);
 padding: 0.5rem 1rem;
 border-radius: 0.5rem;
 font-size: 0.875rem;
}

.condition-link {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 color: var(--accent-blue-light);
 font-weight: 500;
 transition: color var(--transition-fast);
}

.condition-link:hover {
 color: var(--primary-purple-light);
}

/* ===================================
BREAKTHROUGH TREATMENTS SECTION
=================================== */
.treatments-section {
 background: var(--bg-dark-primary);
}

.treatment-highlight {
 background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(59, 130, 246, 0.2));
 border: 2px solid var(--primary-purple-mid);
 border-radius: 1.5rem;
 padding: var(--spacing-lg);
 margin: var(--spacing-lg) 0;
}

.treatment-badge {
 display: inline-block;
 background: var(--gradient-purple-blue);
 color: white;
 padding: 0.5rem 1.5rem;
 border-radius: 50px;
 font-weight: 600;
 margin-bottom: 1rem;
}

.treatment-title {
 font-size: 2.5rem;
 margin-bottom: 1rem;
}

.treatment-description {
 font-size: 1.125rem;
 color: var(--lavender-soft);
 margin-bottom: 1.5rem;
 line-height: 1.8;
}

.treatment-results {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: var(--spacing-md);
 margin-top: var(--spacing-md);
}

.treatment-result {
 background: rgba(110, 231, 183, 0.1);
 border: 1px solid var(--mint-green);
 border-radius: 0.75rem;
 padding: 1rem;
 text-align: center;
}

.result-number {
 font-size: 2rem;
 font-weight: 700;
 color: var(--mint-green);
 margin-bottom: 0.5rem;
}

.result-label {
 font-size: 0.875rem;
 color: var(--lavender-soft);
}

.treatment-source {
 margin-top: 1.5rem;
 padding-top: 1.5rem;
 border-top: 1px solid rgba(124, 58, 237, 0.3);
 font-size: 0.875rem;
 color: var(--lavender-soft);
}

/* ===================================
LIFESTYLE FACTORS SECTION
=================================== */
.lifestyle-section {
 background: var(--bg-dark-secondary);
}

.lifestyle-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--spacing-md);
 margin-top: var(--spacing-lg);
}

.lifestyle-card {
background: rgba(124, 58, 237, 0.05);
 border: 1px solid rgba(124, 58, 237, 0.2);
 border-radius: 1rem;
 padding: var(--spacing-md);
 transition: all var(--transition-medium);
}

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

.lifestyle-icon {
 font-size: 3rem;
 margin-bottom: 1rem;
}

.lifestyle-title {
 font-size: 1.5rem;
 color: var(--accent-blue-light);
 margin-bottom: 1rem;
}

.lifestyle-list {
 list-style: none;
 padding: 0;
}

.lifestyle-list li {
 padding: 0.5rem 0;
 padding-left: 1.5rem;
 position: relative;
 color: var(--lavender-soft);
}

.lifestyle-list li::before {
 content: "✓";
 position: absolute;
 left: 0;
 color: var(--mint-green);
 font-weight: bold;
}

/* ===================================
PATIENT RESOURCES SECTION
=================================== */
.resources-section {
 background: var(--bg-dark-primary);
}

.resources-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--spacing-md);
 margin-top: var(--spacing-lg);
}

.resource-card {
 background: rgba(124, 58, 237, 0.1);
 border: 1px solid rgba(124, 58, 237, 0.3);
 border-radius: 1rem;
 padding: var(--spacing-md);
 transition: all var(--transition-medium);
}

.resource-card:hover {
 transform: translateY(-5px);
 border-color: var(--primary-purple-light);
 box-shadow: var(--shadow-md);
}

.resource-icon {
 font-size: 2.5rem;
 margin-bottom: 1rem;
}

.resource-title {
 font-size: 1.25rem;
 color: var(--primary-purple-light);
 margin-bottom: 0.5rem;
}

.resource-org {
 font-weight: 600;
 margin-bottom: 0.5rem;
}

.resource-description {
 color: var(--lavender-soft);
 margin-bottom: 1rem;
 font-size: 0.9375rem;
}

.resource-link {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 color: var(--accent-blue-light);
 font-weight: 500;
 transition: color var(--transition-fast);
}

.resource-link:hover {
 color: var(--primary-purple-light);
}



/* ===================================
RESPONSIVE DESIGN
=================================== */
@media (max-width: 768px) {
 .hero {
     padding-top: calc(var(--space-lg) + 70px); /* Adjust for mobile navigation height */
     padding-bottom: var(--space-md);
 }
 
 .hero-title {
     font-size: 2rem;
 }
 

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

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

:focus-visible {
 outline: 2px solid var(--accent-blue-light);
 outline-offset: 2px;
}