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

:root {
    /* Core Foundation */
    --bg-white: #FFFDFB;
    --bg-off-white: #FAF9F7;
    --bg-light-gray: #F7F5F3;
    --bg-warm-gray: #FFFDFB;  /* Slightly warm off-white */
    --black-pure: #000000;
    
    /* Text Hierarchy */
    --text-primary: #000000;      /* Pure black for titles */
    --text-body: #1A1918;         /* Very dark for body text */
    --text-secondary: #4A4742;    /* Medium gray for supporting text */
    --text-tertiary: #6B655A;     /* Light gray for meta info */
    --text-disabled: #9B9589;     /* Disabled state */
    
    /* Typography System */
    --font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    
    /* Font Sizes - Responsive with clamp() */
    --text-xs: clamp(0.75rem, 1.5vw, 0.8125rem);      /* Meta info, captions */
    --text-sm: clamp(0.875rem, 2vw, 0.9375rem);       /* Navigation, small buttons */
    --text-base: clamp(1rem, 2.5vw, 1.0625rem);       /* Body text, descriptions */
    --text-lg: clamp(1.125rem, 3vw, 1.3125rem);       /* Sub-headlines */
    --text-xl: clamp(1.5rem, 4vw, 1.75rem);           /* Section titles */
    --text-2xl: clamp(2rem, 5vw, 2.25rem);            /* Major section titles */
    --text-3xl: clamp(2.5rem, 6vw, 3rem);             /* Hero headlines */
    --text-4xl: clamp(3rem, 8vw, 4rem);               /* Main hero text */
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Line Heights */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
    
    /* Letter Spacing */
    --tracking-tight: -0.03em;
    --tracking-normal: -0.02em;
    --tracking-wide: -0.01em;
    
    /* Gray Scale - Warmer, more solid */
    --gray-100: #F7F5F3;
    --gray-200: #E8E5E1;
    --gray-300: #D4CFC7;
    --gray-400: #9B9589;
    --gray-500: #6B655A;
    
    /* Primary Colors (Solid Darker Greens) */
    --green-primary: #059669;
    --green-hover: #047857;
    --green-active: #065F46;
    --green-light: #A7F3D0;
    --green-lightest: #D1FAE5;
    
    /* Supporting Colors */
    --blue-trust: #3B82F6;
    --blue-light: #EFF6FF;
    --amber-warm: #F59E0B;
    --amber-light: #FEF3C7;
    --red-gentle: #EF4444;
    --red-light: #FEE2E2;
    
    /* Sticky Note Colors */
    --yellow-sticky: #FEF3C7;
    --blue-sticky: #DBEAFE;
    --pink-sticky: #FCE7F3;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-sticky: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

body {
    font-family: var(--font-family);
    color: var(--text-body);
    background-color: #FFFDFB;  /* Warm off-white base */
    line-height: var(--leading-normal);
    font-size: var(--text-base);
    overflow-x: hidden;
    position: relative;
    width: 100%;
    max-width: 100vw;
}

/* Grain texture overlay - removed */

/* Prevent horizontal overflow on all sections */
section, .section, main {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Ensure all containers respect viewport */
.container, .nav-container, .hero-container, .trust-container, .footer-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Vignette effect - reduced opacity */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(circle at center, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.02) 100%);
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0; /* Allow flex items to shrink */
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap; /* Prevent wrapping */
}

.nav-logo a {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.nav-logo a:hover {
    transform: scale(1.05);
}

.nav-logo svg {
    transition: all 0.2s ease;
}

.nav-logo a:hover svg circle:first-child {
    stroke: var(--green-primary);
}

.nav-logo a:hover svg path {
    stroke: var(--green-primary);
}

.nav-logo a:hover svg circle:last-child {
    fill: var(--green-primary);
}

.logo-text {
    font-size: 20px;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-left: 4px;
    letter-spacing: -0.01em;
}

.beta-tag {
    background: var(--green-primary);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.05em;
    border-radius: 2px;
    text-transform: uppercase;
    margin-left: 4px;
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}

/* Prevent overlap at medium sizes */
@media (max-width: 1100px) {
    .nav-menu {
        gap: 1.5rem;
    }
    
    .nav-menu a {
        font-size: 14px;
        padding: 6px 12px;
    }
    
    .nav-actions {
        gap: 0.75rem;
    }
    
    .nav-signin,
    .nav-cta {
        padding: 6px 16px;
        font-size: 14px;
    }
}

.nav-menu a {
    text-decoration: none;
    color: var(--text-body);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    letter-spacing: var(--tracking-wide);
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    padding: 8px 16px;
    border-radius: 4px;
}

.nav-menu a:hover {
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.08);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

.nav-signin {
    background: white;
    color: var(--text-primary);
    padding: 8px 24px;
    border-radius: 0;
    border: 2px solid var(--text-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-signin:hover {
    background: white;
    color: var(--text-primary);
    border-color: var(--green-primary);
    box-shadow: 0 0 0 2px var(--green-primary);
}

.nav-cta {
    background: var(--text-primary);
    color: white !important;
    padding: 8px 24px;
    border-radius: 0;
    border: 2px solid var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-cta:hover {
    background: var(--text-primary);
    border-color: var(--green-primary);
    box-shadow: 0 0 0 2px var(--green-primary);
    transform: none;
}

.nav-cta:focus {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

/* Hero Section - Refined */
.hero {
    margin-top: 72px;
    min-height: calc(100vh - 72px);
    padding: 80px 0 200px 0; /* Increased bottom padding for better overlap */
    position: relative;
    overflow: visible; /* Allow honeycomb to extend beyond */
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Create visual extension of hero background */
.hero::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.hero-container {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    position: relative;
    z-index: 10; /* Above honeycomb canvas */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hero Typography */
.hero-headline {
    font-family: var(--font-family);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: var(--font-extrabold);
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
    position: relative;
    z-index: 11;
    width: 100%;
    text-align: center;
    display: block;
    /* Enhanced gradient text effect - more green coverage */
    background: linear-gradient(110deg, var(--text-primary) 0%, var(--text-primary) 35%, var(--green-primary) 85%, var(--green-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for browsers that don't support text gradients */
    color: var(--text-primary);
    /* Subtle text shadow for depth */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

/* Removed subject animation styles - no longer needed */

/* Optional: Add subtle animation on load */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-headline {
    animation: fadeInScale 0.8s ease-out;
}

/* Mobile adjustments for hero headline */
@media (max-width: 768px) {
    .hero-headline {
        font-size: clamp(2.5rem, 9vw, 3.5rem);
    }
}

/* Alternative style: Green outline (commented out - uncomment if preferred) */
/*
.hero-headline {
    font-family: var(--font-family);
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    margin-bottom: 32px;
    position: relative;
    z-index: 11;
    width: 100%;
    text-align: center;
    display: block;
    color: var(--text-primary);
    text-shadow: 
        0 0 1px var(--green-primary),
        0 0 2px var(--green-primary),
        0 0 3px rgba(5, 150, 105, 0.5);
}
*/


.hero-subheadline {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    margin-bottom: 48px;
    text-align: center;
    width: 100%;
    letter-spacing: -0.01em;
}

/* CTA Styles */
.hero-cta-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 48px;
    width: 100%;
    flex-wrap: wrap;
}

.cta-primary {
    background: var(--text-primary);
    color: white;
    padding: 16px 32px;
    border-radius: 0;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    font-family: var(--font-family);
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    border: 2px solid var(--text-primary);
    cursor: pointer;
}

.cta-primary:hover {
    background: var(--text-primary);
    border-color: var(--green-primary);
    box-shadow: 0 0 0 2px var(--green-primary);
    transform: none;
}

.cta-secondary {
    background: white;
    color: var(--text-primary);
    border: 2px solid var(--text-primary);
    padding: 16px 32px;
    border-radius: 0;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    font-family: var(--font-family);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.cta-secondary:hover {
    background: white;
    color: var(--text-primary);
    border-color: var(--green-primary);
    box-shadow: 0 0 0 2px var(--green-primary);
}

.cta-secondary .arrow {
    transition: transform 150ms ease;
}

.cta-secondary:hover .arrow {
    transform: translateX(2px);
}

/* Demo Container */
.demo-container {
    width: 100%;
    max-width: 980px;
    min-height: min(600px, 80vh);
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 300ms ease;
    z-index: 10; /* Ensure demo is above honeycomb */
    isolation: isolate; /* Create new stacking context */
    opacity: 1 !important;
}

.demo-container:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.demo-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFAFA;
    z-index: 21;
}

.loading-skeleton {
    width: 6.25rem;
    height: 6.25rem;
    background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 0.5rem;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.demo-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #FFFFFF !important;
    z-index: 22;
}

/* Ensure demo scenes are opaque */
.demo-scene {
    width: 100%;
    height: 100%;
    background: #FFFFFF !important;
    position: relative;
}

.demo-stage {
    width: 100%;
    height: 100%;
    background: #FFFFFF !important;
    position: relative;
}

/* Demo Controls */
.demo-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 24px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 1;
    transition: opacity 200ms ease;
    z-index: 25;
}

.demo-container:hover .demo-controls {
    opacity: 1;
}

.demo-progress {
    display: flex;
    gap: 8px;
}

.progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E5E5E5;
    cursor: pointer;
    transition: all 200ms ease;
}

.progress-dot:hover {
    background: #D1D5DB;
}

.progress-dot.active {
    background: var(--green-primary);
    width: 24px;
    border-radius: 4px;
}

.demo-timestamp {
    font-size: 12px;
    color: #737373;
    font-family: monospace;
}


/* Demo Placeholder Styles */
.demo-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px;
}

.demo-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #0A0A0A;
    margin-bottom: 8px;
}

.demo-header p {
    font-size: 18px;
    color: #171717;
}

.demo-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-animation {
    padding: 24px 48px;
    background: #FAFAFA;
    border-radius: 8px;
    color: #737373;
    font-size: 14px;
}

/* Play Button Overlay */
.play-button {
    color: var(--green-primary);
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Demo Scenes */
.demo-scene {
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Physics Demo */
.physics-demo {
    background: #FFFFFF !important;
}

.physics-demo .problem-statement {
    text-align: center;
    margin-bottom: 20px;
}

.physics-demo .problem-statement h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.physics-demo .problem-statement p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.physics-demo .problem-text {
    font-size: 20px;
    font-weight: 500;
    color: #0A0A0A;
    line-height: 1.5;
}

/* Quantum Demo Conversation Container */
.conversation-container {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: rgba(249, 250, 251, 0.8);
    border-radius: 12px;
    min-height: 120px;
}

.tutor-speech,
.student-speech {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.tutor-speech .speaker,
.student-speech .speaker {
    font-weight: 600;
    color: var(--green-primary);
    min-width: 60px;
    flex-shrink: 0;
}

.student-speech .speaker {
    color: var(--text-secondary);
}

.tutor-speech .message,
.student-speech .message {
    color: var(--text-body);
    line-height: 1.5;
    flex: 1;
    transition: opacity 0.2s ease;
}

/* Demo Stage Layout */
.demo-stage {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}

.quantum-visualization {
    margin: 20px 0;
}

.physics-demo .visualization-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.physics-demo .wave-function {
    width: 100%;
    max-width: 400px;
}

.physics-demo .equation {
    font-family: 'Times New Roman', serif;
    font-size: 24px;
    color: #171717;
    font-style: italic;
}

.physics-demo .student-voice {
    font-style: italic;
    color: #0A0A0A;
    text-align: center;
}

/* Literature Demo */
.literature-demo {
    background: #FFFFFF !important;
}

.literature-demo .text-excerpt {
    background: #FAFAFA;
    padding: 24px;
    border-radius: 8px;
    border-left: 4px solid var(--green-primary);
}

.literature-demo .kafka-text {
    font-size: 18px;
    line-height: 1.6;
    color: #171717;
    font-style: italic;
}

.literature-demo .analysis-map {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.literature-demo .theme-node {
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 20px;
}

.literature-demo .theme-node.central {
    background: var(--green-primary);
    color: white;
}

.literature-demo .theme-connections {
    display: flex;
    gap: 48px;
}

.literature-demo .branch {
    padding: 12px 24px;
    background: #F3F4F6;
    border-radius: 8px;
    font-weight: 500;
}

.literature-demo .student-annotation {
    text-align: center;
    font-style: italic;
    color: #0A0A0A;
}

/* Chemistry Demo */
.chemistry-demo {
    background: #FFFFFF !important;
}

.chemistry-demo .molecule-display {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    font-size: 24px;
}

.chemistry-demo .compound-structure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.chemistry-demo .benzene-ring {
    font-size: 48px;
}

.chemistry-demo .functional-groups {
    display: flex;
    gap: 32px;
}

.chemistry-demo .group {
    padding: 8px 16px;
    background: #EFF6FF;
    border-radius: 4px;
    font-family: monospace;
}

.chemistry-demo .retro-arrow {
    font-size: 32px;
    color: var(--green-primary);
}

.chemistry-demo .fragments {
    display: flex;
    gap: 16px;
    align-items: center;
}

.chemistry-demo .fragment {
    padding: 12px 24px;
    border: 2px dashed #D1D5DB;
    border-radius: 8px;
}

.chemistry-demo .synthesis-hint {
    text-align: center;
    color: var(--green-primary);
    font-weight: 500;
}

/* Math Demo */
.math-demo {
    background: #FFFFFF !important;
}

.math-demo .topology-problem {
    text-align: center;
}

.math-demo .problem {
    font-size: 20px;
    color: #171717;
    font-weight: 500;
}

.math-demo .visual-proof {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    font-size: 64px;
}

.math-demo .transformation-arrow {
    font-size: 32px;
    color: var(--green-primary);
}

.math-demo .proof-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.math-demo .step {
    color: #0A0A0A;
}

.math-demo .insight {
    color: var(--green-primary);
    font-weight: 500;
    text-align: center;
    margin-top: 16px;
}

.subject-content .subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
    font-style: italic;
}

/* Subject-specific styling */
.chord-progression {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 15px 0;
}

.chord {
    background: var(--green-lightest);
    color: var(--green-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
}

.chord.highlight {
    background: var(--green-primary);
    color: white;
}

.arrow {
    color: var(--text-secondary);
    font-weight: bold;
}

.music-notation {
    text-align: center;
    font-size: 20px;
    color: var(--green-primary);
    margin-top: 10px;
}

.equation {
    text-align: center;
    font-size: 18px;
    color: var(--text-primary);
    margin: 15px 0;
    font-family: 'Times New Roman', serif;
}

.chinese-chars {
    text-align: center;
    margin: 15px 0;
}

.char-evolution {
    font-size: 28px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.meaning {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

.game-matrix {
    font-size: 12px;
    border-collapse: collapse;
    margin: 10px auto;
}

.game-matrix td {
    padding: 8px 10px;
    border: 1px solid var(--gray-200);
    text-align: center;
}

.game-matrix .good {
    background: var(--green-lightest);
    color: var(--green-primary);
}

.game-matrix .bad {
    background: var(--red-light);
    color: var(--red-gentle);
}

.game-matrix .neutral {
    background: var(--amber-light);
    color: var(--amber-warm);
}

.topo-transform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
}

.equiv {
    font-size: 24px;
    color: var(--green-primary);
    font-weight: bold;
}

.dna-edit {
    text-align: center;
    margin: 15px 0;
}

.sequence {
    font-family: monospace;
    font-size: 16px;
    margin-bottom: 8px;
}

.original {
    color: var(--text-primary);
}

.cut {
    margin: 0 8px;
}

.edited {
    color: var(--green-primary);
    font-weight: bold;
}

.process {
    font-size: 12px;
    color: var(--text-secondary);
}

.consciousness {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
    font-size: 24px;
}

.puzzle {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
}

.crypto-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
    font-size: 16px;
}

.formula {
    color: var(--green-primary);
    font-weight: bold;
}

.key-info {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 8px;
}

.ocean-zones {
    margin: 15px 0;
}

.zone {
    padding: 8px;
    margin: 4px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}

.sunlight {
    background: #87CEEB;
    color: #000;
}

.twilight {
    background: #4682B4;
    color: #FFF;
}

.midnight {
    background: #1E3A8A;
    color: #FFF;
}

.hadal {
    background: #000000;
    color: #FFF;
}

.depth {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 8px;
}

.virus-attack {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 15px 0;
    font-size: 20px;
}

.mechanism {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 8px;
}

/* Conversation Layer */
.conversation-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 25;
}

.conversation-bubble {
    position: absolute;
    background: rgba(5, 150, 105, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    max-width: 200px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.conversation-stream {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 8s linear;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Knowledge Particles System */
.knowledge-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.knowledge-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, var(--green-primary) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    animation: knowledge-flow 12s infinite ease-out;
    will-change: transform, opacity;
}

/* Subject connection particles */
.connection-particle {
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, #3B82F6 0%, transparent 70%);
    animation: connection-flow 8s infinite ease-out;
}

/* Symbol particles */
.symbol-particle {
    width: auto;
    height: auto;
    font-size: 16px;
    color: var(--green-primary);
    opacity: 0;
    animation: symbol-drift 15s infinite ease-out;
}

/* Knowledge Connections SVG */
.knowledge-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.knowledge-flow-line {
    stroke: var(--green-primary);
    stroke-width: 1;
    fill: none;
    opacity: 0;
    stroke-dasharray: 5, 5;
    animation: dash-flow 20s linear infinite;
}

/* Subject Indicators */
.subject-indicators {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
}

.subject-pill {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.7;
    transition: all 0.3s ease;
    cursor: pointer;
}

.subject-pill:hover {
    opacity: 1;
    transform: translateX(-5px);
}

.subject-pill.stem {
    background: rgba(5, 150, 105, 0.1);
    color: var(--green-primary);
    border-color: rgba(5, 150, 105, 0.2);
}

.subject-pill.humanities {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    border-color: rgba(59, 130, 246, 0.2);
}

.subject-pill.professional {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
    border-color: rgba(139, 92, 246, 0.2);
}

.subject-pill.languages {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.2);
}

.subject-pill.creative {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.2);
}

/* Knowledge Flow Animations */
@keyframes knowledge-flow {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }
    5% {
        opacity: 0.8;
        transform: translate(20px, -10px) scale(1);
    }
    25% {
        opacity: 0.6;
        transform: translate(80px, -40px) scale(1.2);
    }
    50% {
        opacity: 0.4;
        transform: translate(160px, -20px) scale(0.8);
    }
    75% {
        opacity: 0.2;
        transform: translate(240px, -60px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(320px, -80px) scale(0);
    }
}

@keyframes connection-flow {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }
    10% {
        opacity: 0.5;
        transform: translate(30px, 15px) scale(1);
    }
    50% {
        opacity: 0.3;
        transform: translate(150px, 75px) scale(1.5);
    }
    90% {
        opacity: 0.1;
        transform: translate(270px, 135px) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translate(300px, 150px) scale(0);
    }
}

@keyframes symbol-drift {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg);
    }
    10% {
        opacity: 0.4;
        transform: translate(40px, -20px) rotate(15deg);
    }
    30% {
        opacity: 0.6;
        transform: translate(120px, -10px) rotate(-10deg);
    }
    60% {
        opacity: 0.3;
        transform: translate(200px, -30px) rotate(25deg);
    }
    90% {
        opacity: 0.1;
        transform: translate(280px, -40px) rotate(-5deg);
    }
    100% {
        opacity: 0;
        transform: translate(320px, -50px) rotate(0deg);
    }
}

@keyframes dash-flow {
    0% {
        stroke-dashoffset: 0;
        opacity: 0.3;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        stroke-dashoffset: -100;
        opacity: 0.3;
    }
}

/* Old canvas panel styles removed */

/* Old subject area styles removed */

/* Floating Sticky Notes */
.floating-sticky {
    position: absolute;
    width: 120px;
    padding: 15px;
    font-family: 'Caveat', cursive;
    font-size: 16px;
    line-height: 1.3;
    color: var(--text-body);
    box-shadow: var(--shadow-sticky);
    cursor: move;
    opacity: 0.9;
    animation: float-note 20s infinite ease-in-out;
}

.floating-sticky.yellow {
    background: var(--yellow-sticky);
    transform: rotate(-3deg);
}

.floating-sticky.blue {
    background: var(--blue-sticky);
    transform: rotate(2deg);
}

.floating-sticky.pink {
    background: var(--pink-sticky);
    transform: rotate(-1deg);
}

/* Floating Symbols */
.floating-symbols {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* ITERATION 3: Dynamic particle system */
.particle-system {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 25;
}

.knowledge-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, var(--green-primary) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    animation: particle-flow 8s infinite ease-out;
}

@keyframes particle-flow {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }
    10% {
        opacity: 0.8;
        transform: translate(var(--dx), var(--dy)) scale(1);
    }
    90% {
        opacity: 0.8;
        transform: translate(calc(var(--dx) * 5), calc(var(--dy) * 5)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--dx) * 6), calc(var(--dy) * 6)) scale(0);
    }
}

.symbol {
    position: absolute;
    font-size: 24px;
    color: var(--text-tertiary);
    opacity: 0.4;
    animation: float-symbol 15s infinite ease-in-out;
    transition: all 0.3s ease;
}

.symbol:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.symbol:nth-child(2) { top: 20%; left: 90%; animation-delay: 2s; }
.symbol:nth-child(3) { top: 70%; left: 10%; animation-delay: 4s; }
.symbol:nth-child(4) { top: 80%; left: 85%; animation-delay: 6s; }
.symbol:nth-child(5) { top: 40%; left: 50%; animation-delay: 8s; }
.symbol:nth-child(6) { top: 60%; left: 70%; animation-delay: 10s; }

@keyframes float-note {
    0%, 100% { transform: translate(0, 0) rotate(-3deg); }
    25% { transform: translate(50px, -30px) rotate(2deg); }
    50% { transform: translate(-30px, 20px) rotate(-1deg); }
    75% { transform: translate(40px, 10px) rotate(1deg); }
}

@keyframes float-symbol {
    0%, 100% { 
        transform: translate(0, 0) scale(1) rotate(0deg); 
        opacity: 0.4; 
    }
    25% { 
        transform: translate(40px, -30px) scale(1.3) rotate(90deg); 
        opacity: 0.7; 
    }
    50% { 
        transform: translate(-30px, 40px) scale(0.9) rotate(180deg); 
        opacity: 0.5; 
    }
    75% { 
        transform: translate(20px, 20px) scale(1.1) rotate(270deg); 
        opacity: 0.6; 
    }
}

/* ITERATION 4: Typography enhancements */
.subject-area h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

.subject-area h4::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--green-primary);
    transition: width 0.3s ease;
}

.subject-area.active h4::after {
    width: 100%;
}

/* Connections Layer */
.connections-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}

.connection-line {
    stroke: var(--green-primary);
    stroke-width: 2;
    fill: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    stroke-dasharray: 5, 5;
    animation: dash 20s linear infinite;
}

.connection-line.active {
    opacity: 0.3;
}

@keyframes dash {
    to { stroke-dashoffset: -100; }
}

/* Student Annotations */
.student-annotations {
    position: absolute;
    color: var(--text-primary);
    font-size: 20px;
    pointer-events: none;
}

/* Voice Indicators */
.voice-indicators {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 20px;
    z-index: 25;
}

.voice-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.voice-bubble.active {
    opacity: 1;
    transform: translateY(0);
}

.mini-waveform {
    display: flex;
    gap: 2px;
    align-items: center;
}

.mini-waveform span {
    display: block;
    width: 2px;
    background: var(--green-primary);
    border-radius: 2px;
    animation: mini-wave 1s ease-in-out infinite;
}

.mini-waveform span:nth-child(1) { height: 8px; animation-delay: 0s; }
.mini-waveform span:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.mini-waveform span:nth-child(3) { height: 10px; animation-delay: 0.2s; }

@keyframes mini-wave {
    0%, 100% { transform: scaleY(0.6); }
    50% { transform: scaleY(1); }
}

.voice-lang {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Minimal Tools */
.minimal-tools {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 30;
}

.tool-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-300);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tool-dot:hover {
    background: var(--gray-500);
    transform: scale(1.5);
}

.tool-dot.active {
    background: var(--green-primary);
    box-shadow: 0 0 10px rgba(5, 150, 105, 0.3);
}

.mobile-menu-actions .nav-signin {
    text-align: center;
    padding: 12px 24px;
    background: var(--bg-light-gray);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

.mobile-menu-actions .nav-cta {
    text-align: center;
    padding: 16px 24px;
    background: var(--green-primary);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: var(--font-semibold);
}

/* Container constraint for larger screens */
@media (max-width: 1200px) {
    .nav-container {
        padding: 0 24px;
    }
}

/* Tablet and Mobile Responsive */
@media (max-width: 1024px) {
    .navbar {
        height: 4rem;
    }
    
    .nav-container {
        padding: 0 20px;
        justify-content: space-between;
    }
    
    .nav-logo {
        /* No positioning needed, flexbox handles it */
    }
    
    .logo-text {
        font-size: 18px;
    }
    
    .beta-tag {
        display: none;
    }
    
    .nav-menu {
        display: none;
    }
    
    .nav-actions {
        display: none;
    }
    
    /* Mobile menu styles removed - see navbar.css */
    
    .hero {
        margin-top: 64px;
        padding: 40px 0;
    }
    
    .hero-container {
        padding: 0 20px;
    }
    
    /* Hero headline uses clamp() for responsive sizing */
    
    .hero-subheadline {
        font-size: 18px;
        margin-bottom: 24px;
        padding: 0 20px;
    }
    
    .hero-cta-row {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        margin-bottom: 32px;
    }
    
    .cta-primary {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        padding: 16px 24px;
        font-size: 16px;
    }
    
    .demo-container {
        aspect-ratio: 16/10;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .demo-canvas {
        border-radius: 12px;
    }
    
    .demo-controls {
        padding: 12px 16px;
        border-radius: 0 0 12px 12px;
    }
    
    .demo-timestamp {
        font-size: 12px;
    }
    
    /* Trust Bar Mobile */
    .trust-bar {
        padding: 40px 20px;
    }
    
    .trust-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .university-logos-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .university-logo {
        height: 40px;
    }
    
    /* Learning Puzzle Mobile */
    .learning-puzzle-section {
        padding: 60px 20px;
    }
    
    .puzzle-section-content {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 1rem;
    }
    
    .puzzle-left-content {
        text-align: center;
        padding-right: 0;
    }
    
    .puzzle-title {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 2rem;
    }
    
    .hours-display {
        font-size: 48px;
    }
    
    .puzzle-grid-container {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Elite Showcase Mobile */
    .elite-showcase {
        padding: 60px 20px;
    }
    
    .showcase-header h2 {
        font-size: 28px;
    }
    
    .showcase-subtitle {
        font-size: 16px;
    }
    
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .showcase-card {
        min-height: 300px;
    }
    
    /* Footer Mobile */
    .footer {
        padding: 40px 20px 20px;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }
    
    .footer-section h4 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .footer-section li {
        margin-bottom: 8px;
    }
}

/* Tablet Responsive */
@media (max-width: 1024px) {
    .nav-container {
        padding: 0 30px;
    }
    
    .nav-menu {
        gap: 2rem;
    }
    
    .hero-container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .puzzle-section-content {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    /* Prevent horizontal scroll on mobile */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
    
    * {
        max-width: 100vw !important;
    }
    /* Hero headline uses clamp() for responsive sizing */
    
    .hero-subheadline {
        font-size: 16px;
    }
    
    .puzzle-title {
        font-size: 24px;
    }
    
    .showcase-header h2 {
        font-size: 24px;
    }
    
    /* Reduce honeycomb opacity on mobile for better readability */
    #honeycombBackground {
        opacity: 0.3 !important;
    }
    
    .showcase-grid {
        grid-template-columns: 1fr;
    }
    
    .demo-container {
        margin: 0;
        width: 100%;
        border-radius: 0;
        padding: 0 20px;
    }
    
    .demo-canvas {
        border-radius: 0;
    }
}

/* ITERATION 5: Final polish and advanced effects */
.canvas-panel {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.canvas-panel:hover {
    transform: translateZ(10px);
    transition: transform 0.3s ease;
}

/* Glowing edges on active panels */
.canvas-panel.highlighting::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--green-primary), var(--blue-trust), var(--amber-warm));
    border-radius: 3px;
    opacity: 0;
    z-index: -1;
    animation: glow-pulse 2s ease-in-out;
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.5; }
}

/* Enhanced AI writing with typing effect */
.ai-writing-layer.typing::after {
    content: '|';
    color: var(--green-primary);
    font-weight: normal;
    animation: cursor-blink 1s infinite;
}

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Knowledge flow lines */
.knowledge-flow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.flow-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--green-primary), transparent);
    transform-origin: left center;
    opacity: 0;
    animation: flow-animation 3s infinite;
}

@keyframes flow-animation {
    0% {
        width: 0;
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    50% {
        width: 200px;
        opacity: 0.5;
    }
    90% {
        opacity: 0;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

/* Removed duplicate hero styles */

/* Old subject animation system removed */

/* Live Indicator */
.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #666666;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--green-primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.live-count {
    font-weight: 600;
    color: #0A0A0A;
}

/* Removed duplicate and obsolete styles */

.metric-card-live {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.metric-card-live:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.metric-label {
    font-size: 12px;
    color: #666666;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: #0A0A0A;
    margin-bottom: 4px;
}

.metric-trend {
    font-size: 12px;
    color: var(--green-primary);
    font-weight: 600;
}

.metric-chart {
    margin-top: 8px;
}

.metric-subtitle {
    font-size: 12px;
    color: #666666;
}

.cta-button {
    background: var(--text-primary);
    color: white;
    border: 2px solid var(--text-primary);
    padding: 16px 32px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    font-family: var(--font-family);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.2);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cta-button:hover {
    background: var(--text-primary);
    border-color: var(--green-primary);
    box-shadow: 0 0 0 2px var(--green-primary);
    transform: none;
}

.cta-button:active {
    transform: translateY(0) scale(1);
}

.cta-button:focus {
    outline: 2px solid var(--green-primary);
    outline-offset: 2px;
}

.cta-button span {
    position: relative;
    z-index: 1;
}

.hero-visual {
    position: relative;
    height: clamp(300px, 50vh, 500px);
}

.knowledge-tree {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(5, 150, 105, 0.18) 0%, transparent 70%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 80px rgba(5, 150, 105, 0.1);
}

/* Trust Bar - Compact */
.trust-bar {
    padding: 0.5rem 0;
    background: rgba(255, 253, 251, 0.85); /* Semi-transparent to show hero behind */
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(212, 207, 199, 0.3);
    position: relative;
    z-index: 20;
    margin-top: -180px; /* Move down further from -196px */
    box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.02);
    width: 100%;
    overflow: hidden;
}

.trust-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.trust-header {
    flex-shrink: 0;
}

.trust-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
}

.university-logos-wrapper {
    overflow: hidden;
    position: relative;
    flex: 1;
}

.university-logos-grid {
    display: flex;
    gap: 3rem;
    align-items: center;
    animation: scroll-logos 30s linear infinite;
    width: max-content;
}

/* Pause on hover */
.university-logos-wrapper:hover .university-logos-grid {
    animation-play-state: paused;
}

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.logo-item {
    flex: 0 0 auto;
    width: 6.25rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: all 0.3s ease;
    cursor: pointer;
}

.logo-item:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.university-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Media query for trust bar mobile */
@media (max-width: 768px) {
    .trust-container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .trust-title {
        font-size: 16px;
    }
    
    .logo-item {
        width: 80px;
        height: 32px;
    }
}

/* Impact Metrics Section - Ambitious Layout */
.impact-metrics {
    padding: 1rem 0;
    min-height: 80vh;
    background: var(--bg-warm-gray);
    position: relative;
    overflow: hidden;
}

.metrics-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 3rem;
    align-items: center;
    min-height: 80vh;
}

/* Side Panels */
.side-panel {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    opacity: 0;
    transform: translateX(0);
}

.left-panel {
    transform: translateX(-50px);
}

.right-panel {
    transform: translateX(50px);
}

.insight-card {
    background: var(--bg-off-white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.insight-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.insight-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.insight-visual {
    height: 120px;
    background: var(--bg-white);
    border-radius: 8px;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.insight-stat {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.insight-stat .highlight {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-primary);
    display: block;
    margin-bottom: 0.25rem;
}

/* Central Stage */
.central-stage {
    position: relative;
    width: 100%;
    height: clamp(400px, 60vh, 600px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Globe Container */
.globe-container {
    width: clamp(250px, 40vw, 400px);
    height: clamp(250px, 40vw, 400px);
    position: relative;
    z-index: 10;
}

/* Metric Pods - Orbiting Elements */
.metric-pod {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle)));
    width: 90px;
    height: 90px;
    opacity: 0;
    z-index: 20;
}

@keyframes podAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(calc(var(--radius) * 0.5)) rotate(calc(-1 * var(--angle))) scale(0);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle))) scale(1);
    }
}

.pod-connector {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--radius);
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(5, 150, 105, 0.2), rgba(5, 150, 105, 0.4));
    transform-origin: left center;
    transform: rotate(calc(var(--angle) + 180deg)) translateY(-0.5px);
    opacity: 0;
    animation: beamAppear 0.5s ease-out forwards;
    animation-delay: calc(var(--angle) / 60deg * 0.1s + 0.3s);
}

@keyframes beamAppear {
    to { opacity: 1; }
}

.pod-content {
    width: 100%;
    height: 100%;
    background: var(--bg-white);
    border: 2px solid var(--green-primary);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.pod-content:hover {
    border-color: var(--green-hover);
    box-shadow: var(--shadow-lg);
    transform: scale(1.1);
}

.pod-visual {
    width: 50px;
    height: 30px;
    margin-bottom: 0.25rem;
    position: relative;
}

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

.pod-number {
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-primary);
    display: block;
    line-height: 1;
}

.pod-label {
    font-size: 0.6rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Data Streams */
.data-streams {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(800px, 80vw);
    height: min(800px, 80vw);
    pointer-events: none;
}

/* Specific metric styles */
.grades-svg, .neural-svg, .timer-svg, .competition-svg {
    width: 100%;
    height: 100%;
}

.brain-comparison {
    display: flex;
    gap: 1rem;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.brain-side {
    flex: 1;
    height: 100%;
    position: relative;
}

.brain-svg {
    width: 100%;
    height: 100%;
}

.competition-bars {
    display: flex;
    gap: 1.5rem;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
}

.bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.bar {
    width: 40px;
    background: var(--gray-300);
    border-radius: 4px 4px 0 0;
    transition: all 1s ease-out;
    height: 0;
}

.bar.before {
    background: var(--gray-400);
}

.bar.after {
    background: var(--green-primary);
}

.bar-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.hours-display {
    position: relative;
    width: 100%;
    height: 100%;
}

.hours-svg {
    width: 100%;
    height: 100%;
}

.hours-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--green-primary);
    opacity: 0.2;
    transform: translate(-50%, -50%);
    animation: hoursPulse 3s ease-out infinite;
}

/* Globe Styles */
.globe-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 20px rgba(5, 150, 105, 0.15));
}

/* Dot Pulse Animation */
@keyframes dotPulse {
    0% {
        opacity: 0;
        r: 0;
    }
    20% {
        opacity: 0.8;
        r: 3;
    }
    80% {
        opacity: 0.8;
        r: 2;
    }
    100% {
        opacity: 0;
        r: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .metrics-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .side-panel {
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
    }
    
    .central-stage {
        height: 500px;
    }
    
    .globe-container {
        width: 350px;
        height: 350px;
    }
    
    .metric-pod {
        --radius: 200px !important;
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .impact-metrics {
        padding: 2rem 0;
        min-height: 60vh;
    }
    
    .metrics-container {
        padding: 0 1rem;
    }
    
    .side-panel {
        flex-direction: column;
        gap: 1rem;
    }
    
    .insight-card {
        padding: 1rem;
    }
    
    .central-stage {
        height: 400px;
    }
    
    .globe-container {
        width: 280px;
        height: 280px;
    }
    
    .metric-pod {
        --radius: 160px !important;
        width: 70px;
        height: 70px;
    }
    
    .pod-visual {
        width: 40px;
        height: 25px;
    }
    
    .pod-number {
        font-size: 0.875rem;
    }
}


/* Data Stream Animation */
@keyframes streamPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.3; }
}

/* Particle Animation */
@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    10% {
        opacity: 0.8;
        transform: scale(1);
    }
    90% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* Pod Pulse Animation */
@keyframes podPulse {
    0% {
        box-shadow: 
            0 0 20px rgba(5, 150, 105, 0.2),
            inset 0 0 20px rgba(5, 150, 105, 0.1);
    }
    50% {
        box-shadow: 
            0 0 60px rgba(5, 150, 105, 0.6),
            inset 0 0 40px rgba(5, 150, 105, 0.3);
    }
    100% {
        box-shadow: 
            0 0 20px rgba(5, 150, 105, 0.2),
            inset 0 0 20px rgba(5, 150, 105, 0.1);
    }
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes hoursPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.3;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Learning Puzzle Section - Redesigned */
.learning-puzzle-section {
    padding: 120px 0 80px 0; /* More top padding to separate from trust bar */
    background: var(--bg-warm-gray);
    position: relative;
    overflow: visible;
    z-index: 2;
    margin-top: 40px; /* Add gap between trust bar and this section */
}

.puzzle-section-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

/* Left Side Content */
.puzzle-left-content {
    padding-right: 2rem;
}

.puzzle-title {
    font-family: var(--font-family);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    margin-bottom: 3rem;
    letter-spacing: var(--tracking-normal);
}

.puzzle-title span {
    display: block;
}

.puzzle-title span:first-child {
    margin-left: 0; /* Remove negative margin that causes overflow */
    padding-left: 10px;
}

.puzzle-title span:last-child {
    margin-left: 30px; /* Shift "Building Human Intelligence" right */
}

/* Hours Counter */
.hours-counter {
    margin: 2.5rem 0 2.5rem 30px; /* Match the left margin of "Building Human Intelligence" */
    text-align: left;
}

.hours-display {
    margin-bottom: 0.5rem;
}

.hours-number {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: var(--green-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-normal);
}

.hours-label {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    margin-left: 0.5rem;
    text-transform: lowercase;
}

.hours-subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Puzzle Metrics */
.puzzle-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.puzzle-metric {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.puzzle-metric-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--green-primary);
    display: inline-block; /* Changed from block to inline-block */
    margin-bottom: 0.5rem;
}

.metric-suffix {
    font-size: 24px;
    font-weight: 700;
    color: var(--green-primary);
    display: inline-block;
    margin-left: 2px;
}

.puzzle-metric-label {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: block;
}

/* Read Research Button */
.read-research-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 16px 32px;
    margin-left: 30px;
    background: var(--text-primary);
    color: white;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    border: 2px solid var(--text-primary);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.read-research-btn:hover {
    background: var(--text-primary);
    border-color: var(--green-primary);
    box-shadow: 0 0 0 2px var(--green-primary);
    transform: none;
}

.read-research-btn svg {
    transition: transform 0.2s ease;
}

.read-research-btn:hover svg {
    transform: translateX(2px);
}

/* Right Side Puzzle Container */
.puzzle-grid-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    width: 100%;
    z-index: 5;
    background: transparent;
}

/* Puzzle SVG Styles */
.puzzle-svg {
    width: 100%;
    max-width: 600px;
    min-height: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
    background: transparent;
    /* Remove border to blend with page */
    border: none;
    padding: 0;
}

.puzzle-svg .puzzle-group {
    opacity: 1 !important;
    visibility: visible !important;
}

.puzzle-svg .puzzle-piece {
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Support for morphing rectangles to puzzle pieces */
.puzzle-svg .puzzle-piece rect {
    transition: clip-path 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
}

.puzzle-svg .puzzle-piece use {
    opacity: 1 !important;
    visibility: visible !important;
    fill: inherit !important;
    stroke: inherit !important;
}

/* Hover effect removed for cleaner look */

.puzzle-svg .puzzle-piece path {
    /* Removed transition for no hover effects */
}

/* Removed hover effect */

.puzzle-svg text {
    pointer-events: none;
    user-select: none;
    opacity: 1 !important;
}

/* Respect inline fill colors for specific pieces */
.puzzle-svg text[fill="white"] {
    fill: white !important;
}

/* Puzzle Grid Layout */
.puzzle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3px;
    max-width: 650px;
    margin: 0 auto;
    position: relative;
    background: rgba(0, 0, 0, 0.08);
    padding: 3px;
    border-radius: 12px;
}

/* Clean Puzzle Piece Cards */
.puzzle-piece-new {
    position: relative;
    padding: 2.5rem 2rem;
    background: #fff;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Remove default border radius for custom shapes */
}

.puzzle-piece-new h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.puzzle-piece-new p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    opacity: 0.9;
}

/* Green variations for each piece */
.puzzle-piece-new.metacognitive {
    background: #E6FFFA;
    border: 1px solid #A7F3D0;
}

.puzzle-piece-new.resilience {
    background: #D1FAE5;
    border: 1px solid #6EE7B7;
}

.puzzle-piece-new.critical {
    background: #A7F3D0;
    border: 1px solid #34D399;
}

.puzzle-piece-new.creative {
    background: #6EE7B7;
    border: 1px solid #10B981;
}

.puzzle-piece-new.creative h3,
.puzzle-piece-new.creative p {
    color: var(--text-primary);
}

.puzzle-piece-new.synthesis {
    background: #34D399;
    border: 1px solid #059669;
    color: white;
}

.puzzle-piece-new.synthesis h3,
.puzzle-piece-new.synthesis p {
    color: white;
}

.puzzle-piece-new.agility {
    background: #10B981;
    border: 1px solid #047857;
    color: white;
}

.puzzle-piece-new.agility h3,
.puzzle-piece-new.agility p {
    color: white;
}

/* Removed hover effects */

/* Active state */
.puzzle-piece-new:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Puzzle piece shapes - each piece has unique tabs/blanks */
/* Top row */
.puzzle-piece-new[data-piece="1"] {
    clip-path: polygon(
        0 0, /* top-left */
        100% 0, /* top-right */
        100% 40%, /* right side - before tab */
        90% 40%, /* tab indent */
        90% 60%, /* tab bottom */
        100% 60%, /* tab outdent */
        100% 100%, /* bottom-right */
        0 100%, /* bottom-left */
        0 0 /* close */
    );
}

.puzzle-piece-new[data-piece="2"] {
    clip-path: polygon(
        0 0, /* top-left */
        100% 0, /* top-right */
        100% 40%, /* right side - before tab */
        90% 40%, /* tab indent */
        90% 60%, /* tab bottom */
        100% 60%, /* tab outdent */
        100% 100%, /* bottom-right */
        0 100%, /* bottom-left */
        0 60%, /* left blank bottom */
        10% 60%, /* left blank indent */
        10% 40%, /* left blank top */
        0 40%, /* left blank outdent */
        0 0 /* close */
    );
}

.puzzle-piece-new[data-piece="3"] {
    clip-path: polygon(
        0 0, /* top-left */
        100% 0, /* top-right */
        100% 100%, /* bottom-right */
        0 100%, /* bottom-left */
        0 60%, /* left blank bottom */
        10% 60%, /* left blank indent */
        10% 40%, /* left blank top */
        0 40%, /* left blank outdent */
        0 0 /* close */
    );
}

/* Bottom row */
.puzzle-piece-new[data-piece="4"] {
    clip-path: polygon(
        0 0, /* top-left */
        40% 0, /* before top blank */
        40% 10%, /* top blank left */
        60% 10%, /* top blank right */
        60% 0, /* after top blank */
        100% 0, /* top-right */
        100% 40%, /* right side - before tab */
        90% 40%, /* tab indent */
        90% 60%, /* tab bottom */
        100% 60%, /* tab outdent */
        100% 100%, /* bottom-right */
        0 100%, /* bottom-left */
        0 0 /* close */
    );
}

.puzzle-piece-new[data-piece="5"] {
    clip-path: polygon(
        0 0, /* top-left */
        40% 0, /* before top blank */
        40% 10%, /* top blank left */
        60% 10%, /* top blank right */
        60% 0, /* after top blank */
        100% 0, /* top-right */
        100% 40%, /* right side - before tab */
        90% 40%, /* tab indent */
        90% 60%, /* tab bottom */
        100% 60%, /* tab outdent */
        100% 100%, /* bottom-right */
        0 100%, /* bottom-left */
        0 60%, /* left blank bottom */
        10% 60%, /* left blank indent */
        10% 40%, /* left blank top */
        0 40%, /* left blank outdent */
        0 0 /* close */
    );
}

.puzzle-piece-new[data-piece="6"] {
    clip-path: polygon(
        0 0, /* top-left */
        40% 0, /* before top blank */
        40% 10%, /* top blank left */
        60% 10%, /* top blank right */
        60% 0, /* after top blank */
        100% 0, /* top-right */
        100% 100%, /* bottom-right */
        0 100%, /* bottom-left */
        0 60%, /* left blank bottom */
        10% 60%, /* left blank indent */
        10% 40%, /* left blank top */
        0 40%, /* left blank outdent */
        0 0 /* close */
    );
}

/* Hexagonal Puzzle Pieces */
.puzzle-piece {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    /* Don't set initial transform - let SVG handle positioning */
}

.puzzle-piece .piece-path {
    transition: all 0.3s ease;
}

.puzzle-piece {
    transform-box: fill-box;
    transform-origin: center;
}

/* Removed hover effects */

/* Active state for click feedback */
.puzzle-piece:active {
    transform: scale(1.02);
}

.puzzle-piece:active .piece-path {
    filter: url(#puzzle-shadow) brightness(0.95);
}

/* Text styling within SVG */
.piece-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    fill: var(--text-primary);
    pointer-events: none;
    user-select: none;
}

.piece-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    fill: var(--text-secondary);
    pointer-events: none;
    user-select: none;
}

/* Ensure text is visible on hover */
/* Removed text hover effects */

/* Animated assembly states */
.puzzle-piece[data-piece="1"] {
    opacity: 1 !important;
    /* Let SVG handle positioning */
}

.puzzle-piece[data-piece="2"] {
    opacity: 1 !important;
    /* Let SVG handle positioning */
}

.puzzle-piece[data-piece="3"] {
    opacity: 1 !important;
    /* Let SVG handle positioning */
}

.puzzle-piece[data-piece="4"] {
    opacity: 1 !important;
    /* Let SVG handle positioning */
}

.puzzle-piece[data-piece="5"] {
    opacity: 1 !important;
    /* Let SVG handle positioning */
}

.puzzle-piece[data-piece="6"] {
    opacity: 1 !important;
    /* Let SVG handle positioning */
}

/* Assembled state */
.puzzle-assembled .puzzle-piece {
    opacity: 1;
    /* Let SVG handle positioning */
}

/* Connection glow effect */
@keyframes connection-glow {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}

.connection-glow {
    fill: #F59E0B;
    opacity: 0;
    animation: connection-glow 2s ease-in-out;
}

/* Floating animation for idle pieces - DISABLED to not interfere with positioning */
/*
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.puzzle-assembled .puzzle-piece {
    animation: float 4s ease-in-out infinite;
}

.puzzle-assembled .puzzle-piece[data-piece="1"] { animation-delay: 0s; }
.puzzle-assembled .puzzle-piece[data-piece="2"] { animation-delay: 0.5s; }
.puzzle-assembled .puzzle-piece[data-piece="3"] { animation-delay: 1s; }
.puzzle-assembled .puzzle-piece[data-piece="4"] { animation-delay: 1.5s; }
.puzzle-assembled .puzzle-piece[data-piece="5"] { animation-delay: 2s; }
.puzzle-assembled .puzzle-piece[data-piece="6"] { animation-delay: 2.5s; }
*/

/* Media queries for learning puzzle section */
@media (max-width: 1200px) {
    .puzzle-svg {
        max-width: 700px;
    }
}

@media (max-width: 1024px) {
    .puzzle-section-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .puzzle-left-content {
        padding-right: 0;
        text-align: center;
    }
    
    .puzzle-metrics {
        justify-content: center;
        max-width: 500px;
        margin: 0 auto 3rem;
    }
    
    .puzzle-grid-container {
        min-height: 400px;
    }
    
    .puzzle-svg {
        max-width: 600px;
    }
}

@media (max-width: 768px) {
    .puzzle-title {
        font-size: 28px;
    }
    
    .puzzle-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        max-width: 400px;
    }
    
    .puzzle-piece-new {
        min-height: 140px;
        padding: 1.5rem;
    }
    
    .puzzle-piece-new h3 {
        font-size: 16px;
    }
    
    .puzzle-piece-new p {
        font-size: 13px;
    }
}

/* Old puzzle piece positions - kept for compatibility */
.puzzle-piece {
    --offset-x: 0px;
    --offset-y: 0px;
    --rotation: 0deg;
}

.puzzle-piece.metacognitive {
    left: 100px;
    top: 0;
    --offset-x: -40px;
    --offset-y: -40px;
    --rotation: -5deg;
}

.puzzle-piece.resilience {
    left: 300px;
    top: 0;
    --offset-x: 40px;
    --offset-y: -40px;
    --rotation: 3deg;
}

.puzzle-piece.critical {
    left: 400px;
    top: 173px;
    --offset-x: 40px;
    --offset-y: 0px;
    --rotation: -3deg;
}

.puzzle-piece.creative {
    left: 300px;
    top: 346px;
    --offset-x: 40px;
    --offset-y: 40px;
    --rotation: 4deg;
}

.puzzle-piece.synthesis {
    left: 100px;
    top: 346px;
    --offset-x: -40px;
    --offset-y: 40px;
    --rotation: -2deg;
}

.puzzle-piece.agility {
    left: 0;
    top: 173px;
    --offset-x: -40px;
    --offset-y: 0px;
    --rotation: 5deg;
}

/* Default state - separated */
.puzzle-piece {
    transform: translate(var(--offset-x), var(--offset-y)) rotate(var(--rotation));
}

/* Assembled state */
.puzzle-assembled .puzzle-piece {
    transform: translate(0, 0) rotate(0) !important;
}

/* Animation delays */
.puzzle-piece[data-delay="0"] { transition-delay: 0s; }
.puzzle-piece[data-delay="0.1"] { transition-delay: 0.1s; }
.puzzle-piece[data-delay="0.2"] { transition-delay: 0.2s; }
.puzzle-piece[data-delay="0.3"] { transition-delay: 0.3s; }
.puzzle-piece[data-delay="0.4"] { transition-delay: 0.4s; }
.puzzle-piece[data-delay="0.5"] { transition-delay: 0.5s; }

/* Puzzle snap effect */
.puzzle-assembled .puzzle-piece:last-child {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Piece shape and shadow */
.piece-shape {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: filter 0.3s ease;
}

.puzzle-assembled .piece-shape {
    filter: brightness(1.1) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
}

/* Piece content */
.piece-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    text-align: center;
    pointer-events: none;
}

.piece-content .icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    color: #374151;
}

.piece-content h3 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.piece-content p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #4B5563;
    line-height: 1.6;
}

/* Metrics Row */
.metrics-row {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.5s;
}

.puzzle-assembled ~ .metrics-row {
    opacity: 1;
    transform: translateY(0);
}

.metric {
    text-align: center;
}

.metric-value {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #1F2937;
    display: inline-block;
    transition: all 1.5s ease;
}

.metric-suffix {
    font-size: 28px;
    color: #1F2937;
    margin-left: 2px;
}

.metric-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #6B7280;
    margin-top: 8px;
}

/* Final message */
.final-message {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-style: italic;
    color: #6B7280;
    opacity: 0;
    transition: opacity 0.5s ease 1s;
}

.puzzle-assembled ~ .metrics-row ~ .final-message {
    opacity: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .learning-puzzle-section {
        padding: 84px 0;
    }
    
    .section-header {
        font-size: 24px;
    }
    
    .section-subheader {
        font-size: 16px;
        margin-bottom: 40px;
    }
    
    .puzzle-container {
        width: 100%;
        max-width: 400px;
        height: 600px;
        margin-bottom: 60px;
    }
    
    /* 2x3 grid on mobile */
    .puzzle-piece {
        width: 133px;
        height: 200px;
    }
    
    .puzzle-piece.metacognitive {
        left: 0;
        top: 0;
        --offset-x: -20px;
        --offset-y: -20px;
    }
    
    .puzzle-piece.resilience {
        left: 133px;
        top: 0;
        --offset-x: 0px;
        --offset-y: -20px;
    }
    
    .puzzle-piece.critical {
        left: 266px;
        top: 0;
        --offset-x: 20px;
        --offset-y: -20px;
    }
    
    .puzzle-piece.creative {
        left: 0;
        top: 200px;
        --offset-x: -20px;
        --offset-y: 0px;
    }
    
    .puzzle-piece.synthesis {
        left: 133px;
        top: 200px;
        --offset-x: 0px;
        --offset-y: 0px;
    }
    
    .puzzle-piece.agility {
        left: 266px;
        top: 200px;
        --offset-x: 20px;
        --offset-y: 0px;
    }
    
    .piece-content {
        width: 110px;
    }
    
    .piece-content h3 {
        font-size: 14px;
    }
    
    .piece-content p {
        font-size: 12px;
    }
    
    .metrics-row {
        flex-wrap: wrap;
        gap: 30px;
    }
    
    .metric-value {
        font-size: 28px;
    }
    
    .metric-suffix {
        font-size: 22px;
    }
    
    .metric-label {
        font-size: 14px;
    }
    
    .final-message {
        font-size: 16px;
        padding: 0 20px;
    }
}

/* Tablet responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .puzzle-container {
        width: 500px;
        height: 433px;
    }
    
    .puzzle-piece {
        width: 167px;
        height: 144px;
    }
    
    .puzzle-piece.metacognitive,
    .puzzle-piece.resilience,
    .puzzle-piece.critical {
        top: 0;
    }
    
    .puzzle-piece.creative,
    .puzzle-piece.synthesis,
    .puzzle-piece.agility {
        top: 144px;
    }
    
    .puzzle-piece.metacognitive,
    .puzzle-piece.creative {
        left: 0;
    }
    
    .puzzle-piece.resilience,
    .puzzle-piece.synthesis {
        left: 167px;
    }
    
    .puzzle-piece.critical,
    .puzzle-piece.agility {
        left: 334px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .puzzle-piece {
        transition: opacity 0.5s ease;
    }
    
    .puzzle-piece {
        transform: none !important;
        opacity: 0;
    }
    
    .puzzle-assembled .puzzle-piece {
        opacity: 1;
    }
}

/* Core Concepts Section */
.core-concepts {
    padding: 2rem 2rem 6rem 2rem;
    background: var(--bg-warm-gray);
}

.concepts-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

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

.concept-tagline {
    font-size: 0.875rem;
    color: var(--green-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.concept-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.concept-description {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.concept-animation {
    height: 200px;
    background: var(--bg-white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.concept-link {
    color: var(--green-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.concept-link:hover {
    color: var(--green-hover);
    text-decoration: underline;
}

/* Browse Tutors Section */
.browse-tutors {
    padding: 80px 40px 100px;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFDFB 50%, #FFF9F5 100%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(16, 185, 129, 0.1);
}

.browse-tutors::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.tutors-container {
    max-width: 1400px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-header::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #10B981, #059669);
    border-radius: 2px;
}

.section-eyebrow {
    font-size: 14px;
    font-weight: 600;
    color: #10B981;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.section-title {
    font-size: 48px;
    font-weight: 800;
    color: #1C1917;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Carousel Container */
.tutors-carousel-container {
    position: relative;
    width: 100%;
}

.tutors-carousel {
    overflow: hidden;
    margin: 0 60px;
}

.tutors-track {
    display: flex;
    transition: transform 0.4s ease;
}

.tutor-slide {
    flex: 0 0 33.333%;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.tutor-slide.active {
    opacity: 1;
    transform: scale(1);
}

.tutor-image {
    width: 100%;
    max-width: 280px;
    height: 320px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutor-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tutor-name {
    font-size: 28px;
    font-weight: 700;
    color: #1C1917;
    margin-bottom: 8px;
}

.tutor-subject {
    font-size: 16px;
    font-weight: 600;
    color: #10B981;
    margin-bottom: 16px;
}

/* Removed tutor descriptions from landing page */

/* Carousel Navigation */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    color: #10B981;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.carousel-nav:hover:not([disabled]) {
    background: #10B981;
    border-color: #10B981;
    color: white;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.carousel-nav svg {
    width: 24px;
    height: 24px;
}

.carousel-nav-left {
    left: 20px;
}

.carousel-nav-right {
    right: 20px;
}

/* No disabled states needed for infinite carousel */

/* Use Cases Carousel */
.use-cases {
    padding: 4rem 2rem;
    background: var(--bg-warm-gray);
}

.use-cases-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-subtitle {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-secondary);
}

.carousel-container {
    overflow: hidden;
    margin: 0 auto;
    max-width: 800px;
}

.carousel-track {
    display: flex;
    animation: carousel 20s linear infinite;
}

.use-case-slide {
    flex: 0 0 100%;
    text-align: center;
    padding: 2rem;
}

.use-case-text {
    font-size: 1.25rem;
    color: var(--text-body);
}

@keyframes carousel {
    0% { transform: translateX(0); }
    25% { transform: translateX(-100%); }
    50% { transform: translateX(-200%); }
    75% { transform: translateX(-300%); }
    100% { transform: translateX(0); }
}

/* Final CTA Section */
.final-cta {
    padding: 8rem 2rem;
    background: var(--bg-warm-gray);
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

.cta-left {
    flex: 1;
    text-align: left;
}

.cta-title-large {
    font-size: 80px;
    font-weight: var(--font-semibold);
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    margin-bottom: 3rem;
    white-space: nowrap;
}

.cta-right {
    flex: 0 0 auto;
}

.cta-logo {
    width: 350px;
    height: auto;
}

.final-cta-btn {
    margin-top: 2rem;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .cta-title-large {
        font-size: 64px;
    }
    
    .cta-logo {
        width: 280px;
    }
}

@media (max-width: 1024px) {
    .cta-title-large {
        font-size: 52px;
    }
    
    .cta-logo {
        width: 250px;
    }
}

@media (max-width: 768px) {
    .cta-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cta-left {
        text-align: center;
    }
    
    .cta-title-large {
        font-size: 42px;
        white-space: normal;
    }
    
    .cta-logo {
        width: 180px;
    }
    
    .final-cta {
        padding: 4rem 2rem;
    }
}

/* Footer */
.footer {
    background: var(--text-primary);
    color: white;
    padding: 4rem 2rem 2rem;
    border-top: 1px solid var(--gray-200);
    width: 100%;
    overflow: hidden;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

.footer-section h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: white;
    font-weight: 600;
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: 0.75rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-section a:hover {
    color: white;
}

/* Login Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-width: 400px;
    width: 90%;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-primary);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-body);
}

.form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-white);
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--text-body);
    transition: all 0.2s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.login-btn {
    width: 100%;
    margin-top: 1rem;
}

.modal-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-secondary);
}

.signup-link {
    color: var(--green-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.signup-link:hover {
    color: var(--green-hover);
    text-decoration: underline;
}

/* Animations */
@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

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

/* Particle Effect Background */
.particle-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* Professional Micro-interactions */
.hero-content {
    animation: fadeUpIn 0.6s ease-out;
}

@keyframes fadeUpIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.metrics-cards {
    animation: slideInRight 0.8s ease-out 0.2s both;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(40px) translateY(-50%);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(-50%);
    }
}

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

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

/* Navigation hover effects */

/* Live metrics card stagger animation */
.metric-card-live:nth-child(1) { animation: slideInUp 0.6s ease-out 0.3s both; }
.metric-card-live:nth-child(2) { animation: slideInUp 0.6s ease-out 0.4s both; }
.metric-card-live:nth-child(3) { animation: slideInUp 0.6s ease-out 0.5s both; }

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Trust logos fade in */
.trust-logos {
    animation: fadeIn 1s ease-out 0.8s both;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 0.4; }
}

/* Performance Optimizations */
.whiteboard-container,
.knowledge-particles,
.subject-indicators {
    will-change: transform, opacity;
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    .knowledge-particle,
    .symbol-particle,
    .connection-particle,
    .knowledge-flow-line {
        animation: none;
    }
    
    .subject-pill {
        transition: none;
    }
    
    .hero-content * {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus States for Accessibility */
.subject-pill:focus {
    outline: 2px solid #0066CC;
    outline-offset: 2px;
}

.cta-button:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 3px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .hero-headline {
        /* Disable gradient for high contrast mode */
        background: none;
        -webkit-text-fill-color: #000000;
        color: #000000;
        filter: none;
    }
    
    .hero-subheadline {
        color: #000000;
    }
    
    .whiteboard-container {
        border: 2px solid #000000;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Fix horizontal overflow issues on mobile */
    html {
        overflow-x: hidden;
    }
    
    body {
        overflow-x: hidden;
        position: relative;
        width: 100%;
    }
    
    /* Disable problematic animations on mobile */
    .university-logos-grid {
        animation: none !important;
    }
    
    /* Fix trust bar on mobile */
    .trust-bar {
        overflow: hidden;
        width: 100%;
    }
    
    .trust-container {
        width: 100%;
        max-width: 100%;
        padding: 0 1rem;
    }
    .nav-container {
        padding: 0 20px;
        max-width: calc(100% - 40px);
    }
    
    .hero-container {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
        max-width: calc(100% - 40px);
    }
    
    .hero-content {
        max-width: 100%;
        margin-bottom: 2rem;
    }
    
    /* Hero headline uses clamp() for responsive sizing */
    
    .hero-subheadline {
        font-size: 18px;
    }
    
    .cta-row {
        justify-content: center;
    }
    
    .cta-button {
        padding: 16px 36px;
        font-size: 18px;
    }
    
    .metrics-cards {
        position: static;
        transform: none;
        width: 100%;
        flex-direction: row;
        gap: 12px;
        margin-top: 2rem;
    }
    
    .metric-card-live {
        flex: 1;
        padding: 16px;
    }
    
    .metric-value {
        font-size: 18px;
    }
    
    .whiteboard-container {
        margin: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        border-radius: 12px;
    }
    
    .subject-indicators {
        top: 10px;
        right: 10px;
        gap: 4px;
    }
    
    .subject-pill {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .metrics-grid,
    .concepts-container,
    .tutors-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 1rem;
    }
    
    .globe-container {
        height: 300px;
        margin-bottom: 2rem;
    }
    
    .globe {
        width: 250px;
        height: 250px;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        padding-top: 0;
        gap: 1rem;
    }
    
    .metric-card[data-metric="grades"],
    .metric-card[data-metric="memory"] {
        grid-row: 1;
    }
    
    .metric-card[data-metric="connections"],
    .metric-card[data-metric="competition"] {
        grid-row: 2;
    }
    
    .metric-card[data-metric="struggle"],
    .metric-card[data-metric="hours"] {
        grid-row: 3;
    }
    
    .metric-card[data-metric="grades"] { grid-column: 1; }
    .metric-card[data-metric="memory"] { grid-column: 2; }
    .metric-card[data-metric="connections"] { grid-column: 1; }
    .metric-card[data-metric="competition"] { grid-column: 2; }
    .metric-card[data-metric="struggle"] { grid-column: 1; }
    .metric-card[data-metric="hours"] { grid-column: 2; }
    
    .university-logos-grid {
        gap: 2rem;
        padding: 0.5rem 0;
        animation-duration: 25s;
    }
    
    .logo-item {
        width: 6.25rem;
        height: 3.125rem;
    }
}

@media (max-width: 480px) {
    /* Hero headline uses clamp() for responsive sizing */
    
    .hero-subheadline {
        font-size: 1.2rem;
    }
    
    .dynamic-subject {
        min-width: min(300px, 90vw);
    }
    
    .cta-button {
        padding: 14px 32px;
        font-size: 16px;
    }
    
    .university-logos-grid {
        gap: 1.5rem;
        animation-duration: 20s;
    }
    
    .logo-item {
        width: 90px;
        height: 45px;
    }
    
    .trust-title {
        font-size: 20px;
    }
}

/* Elite Learning Section */
.elite-learning-section {
    padding: 40px 80px 80px 80px;
    background: var(--bg-white);
    position: relative;
}

.elite-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* Hero Typography */
.elite-header {
    margin-bottom: 96px;
}

.elite-headline {
    font-family: var(--font-family);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    margin-bottom: 24px;
}

.elite-supporting {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 820px;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--font-normal);
}

/* Three Card Showcase Grid */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

/* Universal Card Properties */
.showcase-card {
    height: clamp(400px, 52vh, 520px);
    background: #FFFFFF;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
    border: 2px solid #000000;
    will-change: transform;
}

.showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: none;
    border-color: #000000;
}

/* Card Content Area - Now on Top */
.card-content-area {
    padding: 40px 40px 32px 40px;
}

.card-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: var(--tracking-normal);
}

.card-description {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    letter-spacing: var(--tracking-wide);
}

/* Card Visual Area - Now on Bottom */
.card-visual-area {
    height: 312px;
    position: relative;
    overflow: hidden;
}

/* Card Image Container */
.card-image-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.02) 100%);
}

.card-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    border-radius: 0;
}

.showcase-card:hover .card-hero-image {
    transform: scale(1.02);
}

/* Card Custom Visual Container */
.card-custom-visual {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card-custom-visual svg {
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 300px;
}

/* Card 1: Adaptive Neural Network */
[data-card="adaptive"] .card-visual-area {
    background: white;
}


/* Card 2: Proven Research */
[data-card="proven"] .card-visual-area {
    background: white;
}

/* Card 3: Everything Network */
[data-card="everything"] .card-visual-area {
    background: white;
}


.adaptive-neural-network {
    width: 100%;
    height: 100%;
    position: relative;
}

.neural-svg {
    width: 100%;
    height: 100%;
}

.neural-node {
    cursor: pointer;
    transition: all 0.3s ease;
}

.neural-node circle {
    fill: url(#node-gradient);
    filter: url(#glow);
}

.neural-connection {
    stroke: url(#line-gradient);
    stroke-width: 2;
    fill: none;
    opacity: 0.6;
    stroke-dasharray: 100;
}

/* Hover-activated animations */
.showcase-card[data-card="adaptive"]:hover .neural-connection {
    animation: dash 3s linear infinite;
}

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

@keyframes dash {
    to { stroke-dashoffset: -100; }
}

@keyframes nodeAppear {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Energy Particles */
.energy-particle {
    r: 2;
    fill: #3B82F6;
    filter: url(#glow);
}

/* Card 2: Data Helix */
[data-card="proven"] .card-visual-area {
    background: 
        linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 40%);
}


.data-helix-container {
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 800px;
}

.helix-structure {
    width: 200px;
    height: 280px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(10deg);
    transform-style: preserve-3d;
}

@keyframes helixRotate {
    from { transform: translate(-50%, -50%) rotateY(0deg) rotateX(10deg); }
    to { transform: translate(-50%, -50%) rotateY(360deg) rotateX(10deg); }
}

.data-point {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #10B981 0%, #059669 100%);
    border-radius: 50%;
    position: absolute;
    box-shadow: 
        0 0 20px rgba(16, 185, 129, 0.4),
        inset 0 0 4px rgba(255, 255, 255, 0.3);
}

.data-point.highlighted {
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #FBBF24 0%, #F59E0B 100%);
    box-shadow: 
        0 0 30px rgba(251, 191, 36, 0.6),
        0 0 60px rgba(251, 191, 36, 0.3);
}

@keyframes dataPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
}

/* Floating Metrics */
.floating-metrics {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.metric-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.2);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    left: 50%;
    top: 50%;
    transform-origin: center;
}

/* Hover-activated metric orbit */
.showcase-card[data-card="proven"]:hover .metric-card {
    animation: metricOrbit 10s linear infinite;
    animation-delay: var(--orbit-delay);
}

@keyframes metricOrbit {
    from {
        transform: rotate(0deg) translateX(120px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(120px) rotate(-360deg);
    }
}

/* Success Particles */
.success-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
    animation: particleRise 4s linear infinite;
}

@keyframes particleRise {
    0% {
        transform: translateY(280px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/* Card 3: Infinite Tunnel */
[data-card="everything"] .card-visual-area {
    background: 
        radial-gradient(ellipse at center, rgba(139, 92, 246, 0.06) 0%, transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.03) 100%);
}


.infinite-tunnel-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.tunnel-perspective {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    perspective: 600px;
    perspective-origin: 50% 50%;
}

.course-cards-spiral {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

@keyframes tunnelFlow {
    from {
        transform: translateZ(0) rotateZ(0deg);
    }
    to {
        transform: translateZ(2000px) rotateZ(360deg);
    }
}

.course-card {
    width: 80px;
    height: 100px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
    border-radius: 8px;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 0 1px rgba(0, 0, 0, 0.1);
    padding: 8px;
    position: absolute;
    backface-visibility: hidden;
}

.course-card::before {
    content: '';
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    border-radius: 6px;
    display: block;
    margin-bottom: 4px;
}

.course-card::after {
    content: '';
    height: 4px;
    background: #E5E7EB;
    border-radius: 2px;
    display: block;
    margin-top: 4px;
}

.course-card.highlighted {
    animation: subjectHighlight 4s ease-in-out infinite;
}

@keyframes subjectHighlight {
    0%, 100% {
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.1),
            0 0 20px rgba(139, 92, 246, 0);
        transform: var(--base-transform) scale(1);
    }
    50% {
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.15),
            0 0 40px rgba(139, 92, 246, 0.6);
        transform: var(--base-transform) scale(1.1);
    }
}

.infinity-fog {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 40%,
        rgba(249, 250, 251, 0.4) 70%,
        rgba(249, 250, 251, 0.9) 100%
    );
    pointer-events: none;
}

/* Page-level animations */
.showcase-card {
    opacity: 0;
}

.showcase-card.in-view {
    animation: cardSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive styles for Elite Learning Section */
@media (max-width: 1024px) {
    .elite-learning-section {
        padding: 80px 40px 60px 40px;
    }
    
    .elite-headline {
        font-size: 40px;
    }
    
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .showcase-card {
        height: 480px;
    }
}

@media (max-width: 768px) {
    .elite-learning-section {
        padding: 60px 20px 40px 20px;
    }
    
    .elite-headline {
        font-size: 32px;
        line-height: 1.1;
    }
    
    .elite-supporting {
        font-size: 18px;
        line-height: 28px;
    }
    
    .showcase-card {
        height: 440px;
    }
    
    .card-visual-area {
        height: 260px;
    }
    
    .card-title {
        font-size: 28px;
        line-height: 34px;
    }
    
    .card-description {
        font-size: 16px;
        line-height: 24px;
    }
    
    /* Browse Tutors Mobile */
    .browse-tutors {
        padding: 60px 20px 80px;
    }
    
    .section-title {
        font-size: 32px;
    }
    
    .tutors-carousel {
        margin: 0 40px;
    }
    
    .tutor-slide {
        flex: 0 0 100%;
    }
    
    .tutor-image {
        height: 240px;
        max-width: 200px;
    }
    
    .tutor-name {
        font-size: 24px;
    }
    
    .carousel-nav {
        width: 40px;
        height: 40px;
    }
}