/* ========================================
   SPIRIT SCIENCE - QUANTUM RENAISSANCE
   Modern Physics School + Classic Renaissance Fusion
   ======================================== */

/* ========================================
   DESIGN SYSTEM - CSS VARIABLES
   ======================================== */
:root {
    /* === QUANTUM RENAISSANCE COLOR PALETTE === */

    /* Renaissance Golds & Classical */
    --renaissance-gold: #D4AF37;
    --antique-gold: #C9A961;
    --bronze: #CD7F32;
    --ivory: #FFFFF0;
    --parchment: #F0E5D8;
    --marble-white: #F8F8FF;
    --classical-cream: #FAF0E6;

    /* Quantum Physics Neons & Tech */
    --quantum-cyan: #00FFF0;
    --quantum-blue: #0080FF;
    --neon-purple: #9D00FF;
    --plasma-pink: #FF006E;
    --electron-blue: #4A90E2;
    --photon-green: #00FF94;
    --quantum-violet: #8A2BE2;

    /* Deep Space & Background */
    --space-black: #0A0E27;
    --deep-navy: #1A1F3A;
    --cosmic-purple: #2D1B4E;
    --void-black: #000000;

    /* Fusion Gradients */
    --gradient-renaissance-quantum: linear-gradient(135deg, #D4AF37 0%, #00FFF0 100%);
    --gradient-marble-plasma: linear-gradient(180deg, #F8F8FF 0%, #9D00FF 100%);
    --gradient-gold-neon: linear-gradient(90deg, #C9A961, #0080FF, #9D00FF);
    --gradient-classical-tech: radial-gradient(circle, #FAF0E6 0%, #1A1F3A 100%);

    /* === TYPOGRAPHY SYSTEM === */

    /* Renaissance Serif */
    --font-renaissance: 'Playfair Display', 'Theano Didot', serif;
    --font-classical: 'Theano Didot', serif;

    /* Quantum Tech */
    --font-quantum: 'Space Mono', 'Major Mono Display', monospace;
    --font-futuristic: 'Audiowide', 'Tourney', sans-serif;

    /* Hybrid */
    --font-body: 'Inter', sans-serif;

    /* === SPACING (Golden Ratio Based) === */
    --space-xs: 0.382rem;    /* φ^-2 */
    --space-sm: 0.618rem;    /* φ^-1 */
    --space-md: 1rem;        /* 1 */
    --space-lg: 1.618rem;    /* φ */
    --space-xl: 2.618rem;    /* φ^2 */
    --space-2xl: 4.236rem;   /* φ^3 */

    /* === EFFECTS & FILTERS === */

    /* Holographic */
    --hologram-shift: hue-rotate(0deg);
    --hologram-opacity: 0.8;

    /* Glass Morphism */
    --glass-blur: blur(20px);
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);

    /* Marble Texture */
    --marble-overlay: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence baseFrequency="0.9" numOctaves="4"/></filter><rect width="200" height="200" filter="url(%23noise)" opacity="0.05"/></svg>');

    /* Quantum Glow */
    --glow-quantum: 0 0 20px var(--quantum-cyan), 0 0 40px var(--quantum-blue);
    --glow-gold: 0 0 30px var(--renaissance-gold), 0 0 60px var(--antique-gold);
    --glow-neon: 0 0 15px var(--neon-purple), 0 0 30px var(--plasma-pink);

    /* === TRANSITIONS === */
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-classical: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow-x: hidden;
}

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

body {
    font-family: var(--font-body);
    line-height: 1.618; /* Golden ratio */
    color: var(--classical-cream);
    background: var(--space-black);
    overflow-x: hidden;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Quantum Renaissance Background Pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(157, 0, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 255, 240, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--marble-overlay);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
}

/* ========================================
   TYPOGRAPHY SYSTEM - QUANTUM RENAISSANCE
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-renaissance);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--space-md);
    color: var(--marble-white);
    text-shadow: var(--glow-gold);
    position: relative;
}

h1 {
    font-size: 4.236rem; /* φ^3 for hero impact */
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--gradient-renaissance-quantum);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s ease-in-out infinite;
}

h2 {
    font-size: 2.618rem; /* φ^2 */
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--renaissance-gold);
    text-transform: uppercase;
    border-bottom: 2px solid var(--quantum-cyan);
    padding-bottom: var(--space-sm);
    display: inline-block;
}

h3 {
    font-size: 1.618rem; /* φ */
    font-weight: 600;
    color: var(--antique-gold);
    font-family: var(--font-classical);
}

h4 {
    font-size: 1.272rem; /* √φ */
    font-weight: 500;
    color: var(--quantum-cyan);
    font-family: var(--font-quantum);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

h5 {
    font-size: 1.118rem;
    font-weight: 500;
    color: var(--photon-green);
}

h6 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--classical-cream);
}

p {
    font-family: var(--font-body);
    line-height: 1.618;
    margin-bottom: var(--space-md);
    color: var(--classical-cream);
}

/* Quantum Shimmer Animation */
@keyframes shimmer {
    0%, 100% {
        filter: brightness(1) contrast(1);
    }
    50% {
        filter: brightness(1.2) contrast(1.1);
    }
}

/* ========================================
   LOADING ANIMATION - QUANTUM DROP
   ======================================== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--space-black) 0%, var(--deep-navy) 50%, var(--cosmic-purple) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.5s ease-out;
}

.loading-screen::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, var(--renaissance-gold) 50%, transparent 100%);
    opacity: 0.1;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(1.1); }
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.drop-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drop {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #4A90E2 0%, #2c5aa0 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.8);
    animation: drop-fall 2.5s ease-in-out infinite;
    z-index: 2;
}

.resonance-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring {
    position: absolute;
    border: 2px solid rgba(74, 144, 226, 0.4);
    border-radius: 50%;
    animation: resonance 3s ease-out infinite;
}

.ring-1 {
    width: 40px;
    height: 40px;
    animation-delay: 0s;
}

.ring-2 {
    width: 80px;
    height: 80px;
    animation-delay: 0.5s;
}

.ring-3 {
    width: 120px;
    height: 120px;
    animation-delay: 1s;
}

@keyframes drop-fall {
    0% {
        transform: translateY(-100px);
        opacity: 1;
    }
    70% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

@keyframes resonance {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* ========================================
   NAVIGATION SYSTEM - QUANTUM RENAISSANCE
   ======================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 14, 39, 0.85);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--renaissance-gold);
    box-shadow: 0 4px 30px rgba(0, 255, 240, 0.1);
    z-index: 1000;
    transition: all 0.3s var(--transition-smooth);
}

.navbar::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-gold-neon);
    opacity: 0.6;
}

.navbar.scrolled {
    background: rgba(10, 14, 39, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-bottom: 2px solid var(--quantum-cyan);
    box-shadow:
        0 4px 30px rgba(0, 255, 240, 0.2),
        0 0 60px rgba(157, 0, 255, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

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

.logo-img {
    height: 80px;
    width: auto;
    opacity: 0;
    transform: scale(0.5);
    animation: logo-reveal 1.5s ease-out 0.5s forwards;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: 50%;
    padding: 8px;
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.8),
        0 0 40px rgba(255, 255, 255, 0.6),
        inset 0 0 10px rgba(255, 255, 255, 0.4);
}

.logo-img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.5) 100%);
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 1),
        0 0 60px rgba(255, 255, 255, 0.8),
        0 0 90px rgba(255, 255, 255, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.6);
}

@keyframes logo-reveal {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-lg);
}

.nav-link {
    color: var(--classical-cream);
    text-decoration: none;
    font-weight: 400;
    position: relative;
    transition: all 0.3s var(--transition-classical);
    padding: var(--space-sm) 0;
    font-family: var(--font-quantum);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.nav-link::before {
    content: '◆';
    position: absolute;
    left: -20px;
    opacity: 0;
    color: var(--renaissance-gold);
    transition: all 0.3s var(--transition-bounce);
    transform: translateX(-10px);
}

.nav-link:hover::before,
.nav-link.active::before {
    opacity: 1;
    transform: translateX(0);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-gold-neon);
    box-shadow: 0 0 10px var(--quantum-cyan);
    transition: width 0.3s var(--transition-smooth);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--quantum-cyan);
    text-shadow: var(--glow-quantum);
    transform: translateY(-2px);
}

/* Scrolled navbar styles */
.navbar.scrolled .nav-link {
    color: var(--renaissance-gold);
    font-weight: 400;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.navbar.scrolled .nav-link:hover {
    color: var(--quantum-cyan);
    text-shadow: var(--glow-quantum);
    transform: translateY(-2px);
}

.navbar.scrolled .nav-link.active {
    color: var(--neon-purple);
    text-shadow: var(--glow-neon);
    font-weight: 600;
}

.navbar.scrolled .logo-img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) brightness(1);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.4) 100%);
    box-shadow: 
        0 0 25px rgba(255, 255, 255, 0.9),
        0 0 50px rgba(255, 255, 255, 0.7),
        inset 0 0 12px rgba(255, 255, 255, 0.5);
}

.navbar.scrolled .logo-img:hover {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) brightness(1.1);
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.6) 100%);
    box-shadow: 
        0 0 35px rgba(255, 255, 255, 1),
        0 0 70px rgba(255, 255, 255, 0.9),
        0 0 100px rgba(255, 255, 255, 0.7),
        inset 0 0 18px rgba(255, 255, 255, 0.7);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background: #fff;
    margin: 3px 0;
    transition: 0.3s;
}

/* ========================================
   HERO SECTION - QUANTUM RENAISSANCE
   ======================================== */
.hero {
    position: relative;
    min-height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

/* Hero Video Section - Renaissance Canvas with Quantum Overlay */
.hero-video-section {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at top, var(--cosmic-purple) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, var(--deep-navy) 0%, transparent 50%),
        var(--space-black);
}

/* Ornate Renaissance Border - Main Frame */
.hero-video-section::before {
    content: '';
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    right: var(--space-lg);
    bottom: var(--space-lg);
    border: 3px solid var(--renaissance-gold);
    border-image: linear-gradient(
        45deg,
        var(--renaissance-gold) 0%,
        var(--quantum-cyan) 25%,
        var(--neon-purple) 50%,
        var(--quantum-cyan) 75%,
        var(--renaissance-gold) 100%
    ) 1;
    box-shadow:
        inset 0 0 80px rgba(212, 175, 55, 0.15),
        inset 0 0 40px rgba(0, 255, 240, 0.1),
        0 0 80px rgba(212, 175, 55, 0.2),
        0 0 40px rgba(0, 255, 240, 0.15);
    pointer-events: none;
    z-index: 5;
    opacity: 0.8;
    animation: border-shimmer 6s ease-in-out infinite;
}

/* Inner Renaissance Border */
.hero-video-section::after {
    content: '';
    position: absolute;
    top: calc(var(--space-lg) + 12px);
    left: calc(var(--space-lg) + 12px);
    right: calc(var(--space-lg) + 12px);
    bottom: calc(var(--space-lg) + 12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        inset 0 0 40px rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 5;
    opacity: 0.5;
}

@keyframes border-shimmer {
    0%, 100% {
        opacity: 0.7;
        box-shadow:
            inset 0 0 80px rgba(212, 175, 55, 0.15),
            inset 0 0 40px rgba(0, 255, 240, 0.1),
            0 0 80px rgba(212, 175, 55, 0.2),
            0 0 40px rgba(0, 255, 240, 0.15);
    }
    50% {
        opacity: 1;
        box-shadow:
            inset 0 0 100px rgba(212, 175, 55, 0.25),
            inset 0 0 60px rgba(0, 255, 240, 0.2),
            0 0 120px rgba(212, 175, 55, 0.3),
            0 0 60px rgba(0, 255, 240, 0.25),
            0 0 100px rgba(157, 0, 255, 0.1);
    }
}

/* Hero Content Layout */
.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    padding: 6rem 2rem 2rem 2rem;
    box-sizing: border-box;
    min-height: 100vh;
}

/* Hero Top Row */
.hero-top-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    flex: 0 0 auto;
    margin-bottom: 2rem;
}

/* Hero School Title */
.hero-school-title {
    text-align: right;
    margin-bottom: 0;
    animation: fadeInUp 1.5s ease-out 0.5s both;
    flex: 1;
    max-width: 600px;
}

.hero-school-title h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.618rem;
    font-weight: 600;
    color: var(--marble-white);
    text-shadow: var(--glow-gold);
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.05em;
    background: var(--gradient-renaissance-quantum);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    overflow: visible;
    text-transform: uppercase;
    animation: font-family-cycle 24s ease-in-out infinite;
    transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth Font Family Cycling Animation with Fade */
@keyframes font-family-cycle {
    /* Playfair Display - Renaissance Gold */
    0%, 22% {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        letter-spacing: 0.05em;
        opacity: 1;
        transform: scale(1);
        text-shadow:
            0 0 30px rgba(212, 175, 55, 0.8),
            0 0 60px rgba(212, 175, 55, 0.4);
    }
    23%, 24% {
        opacity: 0;
        transform: scale(0.98);
    }

    /* Theano Didot - Quantum Cyan */
    25% {
        font-family: 'Theano Didot', serif;
        font-weight: 600;
        letter-spacing: 0.08em;
        opacity: 0;
        transform: scale(0.98);
    }
    26%, 47% {
        font-family: 'Theano Didot', serif;
        font-weight: 600;
        letter-spacing: 0.08em;
        opacity: 1;
        transform: scale(1);
        text-shadow:
            0 0 30px rgba(0, 255, 240, 0.8),
            0 0 60px rgba(0, 255, 240, 0.4);
    }
    48%, 49% {
        opacity: 0;
        transform: scale(0.98);
    }

    /* Tourney - Neon Purple */
    50% {
        font-family: 'Tourney', sans-serif;
        font-weight: 500;
        letter-spacing: 0.12em;
        opacity: 0;
        transform: scale(0.98);
    }
    51%, 72% {
        font-family: 'Tourney', sans-serif;
        font-weight: 500;
        letter-spacing: 0.12em;
        opacity: 1;
        transform: scale(1);
        text-shadow:
            0 0 30px rgba(157, 0, 255, 0.8),
            0 0 60px rgba(157, 0, 255, 0.4);
    }
    73%, 74% {
        opacity: 0;
        transform: scale(0.98);
    }

    /* Audiowide - Plasma Pink */
    75% {
        font-family: 'Audiowide', sans-serif;
        font-weight: 400;
        letter-spacing: 0.1em;
        opacity: 0;
        transform: scale(0.98);
    }
    76%, 97% {
        font-family: 'Audiowide', sans-serif;
        font-weight: 400;
        letter-spacing: 0.1em;
        opacity: 1;
        transform: scale(1);
        text-shadow:
            0 0 30px rgba(255, 0, 110, 0.8),
            0 0 60px rgba(255, 0, 110, 0.4);
    }
    98%, 100% {
        opacity: 0;
        transform: scale(0.98);
    }
}

.hero-school-title h1::before {
    content: '◈';
    position: absolute;
    top: -30px;
    right: 0;
    font-size: 2rem;
    color: var(--quantum-cyan);
    opacity: 0.6;
    text-shadow: var(--glow-quantum);
    animation: float 4s ease-in-out infinite, color-cycle-smooth 24s ease-in-out infinite;
    transition: all 1.5s ease-in-out;
}

/* Smooth Color Cycle for Ornament */
@keyframes color-cycle-smooth {
    0%, 22% {
        color: var(--renaissance-gold);
        text-shadow: 0 0 20px var(--renaissance-gold), 0 0 40px var(--antique-gold);
        opacity: 0.8;
    }
    23%, 24% {
        opacity: 0.3;
    }
    25%, 47% {
        color: var(--quantum-cyan);
        text-shadow: 0 0 20px var(--quantum-cyan), 0 0 40px var(--quantum-blue);
        opacity: 0.8;
    }
    48%, 49% {
        opacity: 0.3;
    }
    50%, 72% {
        color: var(--neon-purple);
        text-shadow: 0 0 20px var(--neon-purple), 0 0 40px var(--quantum-violet);
        opacity: 0.8;
    }
    73%, 74% {
        opacity: 0.3;
    }
    75%, 97% {
        color: var(--plasma-pink);
        text-shadow: 0 0 20px var(--plasma-pink), 0 0 40px rgba(255, 0, 110, 0.6);
        opacity: 0.8;
    }
    98%, 100% {
        opacity: 0.3;
    }
}

.hero-school-title h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-gold-neon);
    box-shadow: 0 0 20px var(--quantum-cyan);
    animation: underline-glow-smooth 24s ease-in-out infinite;
    transition: all 1.5s ease-in-out;
}

/* Smooth Underline Glow Animation */
@keyframes underline-glow-smooth {
    0%, 22% {
        box-shadow: 0 0 20px var(--renaissance-gold), 0 0 40px var(--antique-gold);
        opacity: 1;
    }
    23%, 24% {
        opacity: 0.3;
    }
    25%, 47% {
        box-shadow: 0 0 20px var(--quantum-cyan), 0 0 40px var(--quantum-blue);
        opacity: 1;
    }
    48%, 49% {
        opacity: 0.3;
    }
    50%, 72% {
        box-shadow: 0 0 20px var(--neon-purple), 0 0 40px var(--quantum-violet);
        opacity: 1;
    }
    73%, 74% {
        opacity: 0.3;
    }
    75%, 97% {
        box-shadow: 0 0 20px var(--plasma-pink), 0 0 40px rgba(255, 0, 110, 0.6);
        opacity: 1;
    }
    98%, 100% {
        opacity: 0.3;
    }
}

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

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

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

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.4;
    mix-blend-mode: luminosity;
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Quantum Renaissance Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, rgba(212, 175, 55, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(0, 255, 240, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(157, 0, 255, 0.05) 0%, transparent 60%),
        linear-gradient(
            135deg,
            rgba(10, 14, 39, 0.7) 0%,
            rgba(26, 31, 58, 0.5) 50%,
            rgba(45, 27, 78, 0.7) 100%
        );
    z-index: -1;
}

.hero-overlay::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: var(--marble-overlay);
    opacity: 0.2;
    mix-blend-mode: overlay;
}

/* Hero Logo */
.hero-logo {
    position: relative;
    z-index: 10;
    opacity: 0;
    animation: logo-fade-in 1.5s ease-out 0.5s forwards;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 0 0 auto;
}

.hero-logo-img {
    height: 500px;
    width: auto;
    max-width: 500px;
    filter:
        drop-shadow(0 0 40px var(--quantum-cyan))
        drop-shadow(0 0 80px var(--renaissance-gold))
        brightness(1.1);
    transition: all 0.4s var(--transition-bounce);
    animation: logo-quantum-pulse 4s ease-in-out infinite;
    position: relative;
}

.hero-logo-img:hover {
    transform: scale(1.08) rotate(5deg);
    filter:
        drop-shadow(0 0 60px var(--neon-purple))
        drop-shadow(0 0 100px var(--quantum-cyan))
        brightness(1.3)
        hue-rotate(30deg);
}

@keyframes logo-quantum-pulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 40px var(--quantum-cyan))
            drop-shadow(0 0 80px var(--renaissance-gold))
            brightness(1.1);
    }
    50% {
        filter:
            drop-shadow(0 0 60px var(--neon-purple))
            drop-shadow(0 0 100px var(--photon-green))
            brightness(1.3);
    }
}

@keyframes logo-fade-in {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================
   HERO FLOATING VIDEO BOX
   ======================================== */
/* Hero Floating Video - Quantum Renaissance Post-Modern Design */
.hero-floating-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 160px;
    border-radius: 2px;
    overflow: visible;
    z-index: 5;
    opacity: 0.9;
    animation: horizontal-flow 30s ease-in-out infinite;
    will-change: transform, box-shadow;
    padding: 8px;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.15) 0%,
        rgba(0, 255, 240, 0.1) 50%,
        rgba(157, 0, 255, 0.12) 100%
    );
    backdrop-filter: blur(10px);
}

/* Ornate Renaissance Frame */
.hero-floating-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-image: linear-gradient(
        135deg,
        var(--renaissance-gold) 0%,
        var(--quantum-cyan) 25%,
        var(--neon-purple) 50%,
        var(--quantum-cyan) 75%,
        var(--renaissance-gold) 100%
    ) 1;
    z-index: 1;
    pointer-events: none;
}

/* Corner Ornaments */
.hero-floating-video::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    background:
        linear-gradient(90deg, var(--renaissance-gold) 0%, transparent 10%, transparent 90%, var(--renaissance-gold) 100%),
        linear-gradient(0deg, var(--renaissance-gold) 0%, transparent 10%, transparent 90%, var(--renaissance-gold) 100%);
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

/* Gentle Horizontal Flowing Animation with Slow Motion Glow */
@keyframes horizontal-flow {
    0% {
        transform: translate(-50%, -50%) translateX(0) rotate(0deg) scale(1);
        border-color: rgba(0, 255, 240, 0.4);
        box-shadow:
            0 0 20px rgba(0, 255, 240, 0.4),
            0 0 40px rgba(212, 175, 55, 0.2),
            0 0 60px rgba(0, 255, 240, 0.1);
    }
    25% {
        transform: translate(-50%, -50%) translateX(-40px) rotate(0.5deg) scale(1.01);
        border-color: rgba(212, 175, 55, 0.4);
        box-shadow:
            0 0 30px rgba(212, 175, 55, 0.5),
            0 0 60px rgba(212, 175, 55, 0.3),
            0 0 90px rgba(0, 255, 240, 0.2);
    }
    50% {
        transform: translate(-50%, -50%) translateX(0) rotate(0deg) scale(1);
        border-color: rgba(157, 0, 255, 0.4);
        box-shadow:
            0 0 25px rgba(157, 0, 255, 0.5),
            0 0 50px rgba(157, 0, 255, 0.3),
            0 0 75px rgba(212, 175, 55, 0.2);
    }
    75% {
        transform: translate(-50%, -50%) translateX(40px) rotate(-0.5deg) scale(1.01);
        border-color: rgba(0, 255, 148, 0.4);
        box-shadow:
            0 0 30px rgba(0, 255, 148, 0.5),
            0 0 60px rgba(0, 255, 240, 0.3),
            0 0 90px rgba(157, 0, 255, 0.2);
    }
    100% {
        transform: translate(-50%, -50%) translateX(0) rotate(0deg) scale(1);
        border-color: rgba(0, 255, 240, 0.4);
        box-shadow:
            0 0 20px rgba(0, 255, 240, 0.4),
            0 0 40px rgba(212, 175, 55, 0.2),
            0 0 60px rgba(0, 255, 240, 0.1);
    }
}

/* Video Container */
.hero-floating-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    position: relative;
    z-index: 0;
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.4),
        inset 0 0 80px rgba(0, 255, 240, 0.05);
}

/* Holographic Overlay */
.hero-video-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background:
        radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(0, 255, 240, 0.12) 0%, transparent 40%),
        linear-gradient(135deg, rgba(157, 0, 255, 0.05) 0%, transparent 50%, rgba(0, 255, 148, 0.05) 100%);
    z-index: 2;
    pointer-events: none;
    border-radius: 2px;
    mix-blend-mode: screen;
    animation: holographic-shimmer 8s ease-in-out infinite;
}

@keyframes holographic-shimmer {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

/* ========================================
   HERO TERMINAL ANIMATION
   ======================================== */
/* Hero Typing Text */
.hero-typing-text {
    position: relative;
    z-index: 10;
    opacity: 0;
    animation: fade-in-up 1.5s ease-out 2s forwards;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    /* Fixed height to prevent jumping */
    min-height: 200px;
    height: 200px;
    margin-top: auto;
}

.hero-typing-text span {
    /* Quantum Terminal Typography */
    font-family: var(--font-quantum);
    font-size: 1.1rem;
    line-height: 1.618;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--photon-green);
    text-align: left;
    text-shadow:
        0 0 10px var(--photon-green),
        0 2px 8px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    background: rgba(10, 14, 39, 0.6);
    padding: var(--space-lg);
    border-left: 3px solid var(--quantum-cyan);
    border-radius: 4px;
    box-shadow: inset 0 0 40px rgba(0, 255, 240, 0.1);
}

/* Typing Cursor Animation - Improved */
.hero-typing-text .cursor {
    animation: cursorBlink 1s infinite;
    color: #e8e8e8;
    font-weight: 400;
    font-size: 1.1rem;
    text-shadow: 0 0 4px #e8e8e8, 0 0 8px rgba(232, 232, 232, 0.2);
    background: linear-gradient(90deg, transparent 0%, rgba(232, 232, 232, 0.15) 50%, transparent 100%);
    padding: 0 1px;
    border-radius: 1px;
    /* Improved cursor positioning */
    display: inline-block;
    vertical-align: baseline;
    line-height: 1;
    margin-left: 1px;
    width: 1px;
    height: 0.8em;
    position: relative;
}

.hero-typing-text .cursor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e8e8e8;
    border-radius: 0.5px;
    animation: cursorPulse 1s infinite;
}

/* Enhanced cursor animations */
@keyframes cursorBlink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.4;
    }
}

@keyframes cursorPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 2px #e8e8e8;
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 4px #e8e8e8;
    }
}

/* Ensure stable layout during typing animation */
.hero-typing-text {
    /* Prevent content jumping */
    contain: layout style;
    will-change: auto;
}

/* ========================================
   HERO BACKGROUND PATTERNS
   ======================================== */
.hero-background-patterns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Pattern Layers */
.pattern-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    animation: patternFloat 20s ease-in-out infinite;
}

.pattern-1 {
    background: 
        radial-gradient(circle at 20% 30%, rgba(128, 128, 128, 0.3) 0%, transparent 50%),
        linear-gradient(45deg, rgba(96, 96, 96, 0.1) 0%, transparent 50%);
    animation-delay: 0s;
    animation-duration: 25s;
}

.pattern-2 {
    background: 
        radial-gradient(circle at 80% 70%, rgba(160, 160, 160, 0.2) 0%, transparent 60%),
        linear-gradient(135deg, rgba(112, 112, 112, 0.15) 0%, transparent 40%);
    animation-delay: -8s;
    animation-duration: 30s;
}

.pattern-3 {
    background: 
        radial-gradient(circle at 50% 50%, rgba(144, 144, 144, 0.1) 0%, transparent 70%),
        linear-gradient(90deg, rgba(80, 80, 80, 0.1) 0%, transparent 60%);
    animation-delay: -15s;
    animation-duration: 35s;
}

/* Quantum Particle System */
.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.floating-circle,
.floating-square {
    position: absolute;
    background: radial-gradient(circle, var(--quantum-cyan) 0%, transparent 70%);
    box-shadow:
        0 0 20px var(--quantum-cyan),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    animation: quantum-float 15s ease-in-out infinite, quantum-pulse 3s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.floating-circle {
    border-radius: 50%;
    background: radial-gradient(circle, var(--renaissance-gold) 0%, transparent 70%);
    box-shadow:
        0 0 30px var(--renaissance-gold),
        0 0 60px var(--antique-gold);
}

.floating-square {
    border-radius: 4px;
    transform: rotate(45deg);
    background: radial-gradient(circle, var(--neon-purple) 0%, transparent 70%);
    box-shadow:
        0 0 25px var(--neon-purple),
        0 0 50px var(--quantum-violet);
}

.circle-1 {
    width: 80px;
    height: 80px;
    top: 15%;
    left: 8%;
    animation-delay: 0s;
    animation-duration: 20s;
    background: radial-gradient(circle, var(--renaissance-gold) 0%, rgba(212, 175, 55, 0.3) 40%, transparent 70%);
    box-shadow:
        0 0 40px var(--renaissance-gold),
        0 0 80px var(--antique-gold),
        inset 0 0 30px rgba(255, 255, 255, 0.6);
}

.circle-2 {
    width: 60px;
    height: 60px;
    top: 55%;
    right: 12%;
    animation-delay: -5s;
    animation-duration: 24s;
    background: radial-gradient(circle, var(--quantum-cyan) 0%, rgba(0, 255, 240, 0.3) 40%, transparent 70%);
    box-shadow:
        0 0 35px var(--quantum-cyan),
        0 0 70px var(--quantum-blue),
        inset 0 0 25px rgba(255, 255, 255, 0.5);
}

.circle-3 {
    width: 100px;
    height: 100px;
    bottom: 25%;
    left: 18%;
    animation-delay: -10s;
    animation-duration: 28s;
    background: radial-gradient(circle, var(--photon-green) 0%, rgba(0, 255, 148, 0.3) 40%, transparent 70%);
    box-shadow:
        0 0 45px var(--photon-green),
        0 0 90px rgba(0, 255, 148, 0.6),
        inset 0 0 35px rgba(255, 255, 255, 0.7);
}

.square-1 {
    width: 45px;
    height: 45px;
    top: 38%;
    right: 28%;
    animation-delay: -3s;
    animation-duration: 22s;
    background: radial-gradient(circle, var(--neon-purple) 0%, rgba(157, 0, 255, 0.3) 40%, transparent 70%);
    box-shadow:
        0 0 30px var(--neon-purple),
        0 0 60px var(--quantum-violet),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
}

.square-2 {
    width: 70px;
    height: 70px;
    bottom: 18%;
    right: 8%;
    animation-delay: -7s;
    animation-duration: 30s;
    background: radial-gradient(circle, var(--plasma-pink) 0%, rgba(255, 0, 110, 0.3) 40%, transparent 70%);
    box-shadow:
        0 0 40px var(--plasma-pink),
        0 0 80px rgba(255, 0, 110, 0.6),
        inset 0 0 30px rgba(255, 255, 255, 0.6);
}

/* Pattern Animations */
@keyframes patternFloat {
    0%, 100% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0.1;
    }
    25% {
        transform: translateX(20px) translateY(-15px) rotate(1deg);
        opacity: 0.15;
    }
    50% {
        transform: translateX(-10px) translateY(10px) rotate(-1deg);
        opacity: 0.08;
    }
    75% {
        transform: translateX(15px) translateY(-5px) rotate(0.5deg);
        opacity: 0.12;
    }
}

/* Quantum Float Animation */
@keyframes quantum-float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-30px) translateX(20px) scale(1.1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-15px) translateX(-25px) scale(0.9);
        opacity: 0.5;
    }
    75% {
        transform: translateY(-40px) translateX(10px) scale(1.05);
        opacity: 0.7;
    }
}

/* Quantum Pulse Animation */
@keyframes quantum-pulse {
    0%, 100% {
        box-shadow:
            0 0 20px currentColor,
            inset 0 0 20px rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow:
            0 0 40px currentColor,
            0 0 80px currentColor,
            inset 0 0 30px rgba(255, 255, 255, 0.7);
    }
}

@keyframes floatElement {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-20px) translateX(10px) rotate(90deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-10px) translateX(-15px) rotate(180deg);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-30px) translateX(5px) rotate(270deg);
        opacity: 0.5;
    }
}



/* Typing Section - Terminal Style */
.typing-section {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
    padding: 4rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    position: relative;
    overflow: hidden;
}

.typing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(52, 152, 219, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(155, 89, 182, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(46, 204, 113, 0.1) 0%, transparent 50%);
    animation: terminalGlow 8s ease-in-out infinite alternate;
}

@keyframes terminalGlow {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

.typing-container {
    width: 100%;
    max-width: 900px;
    opacity: 0;
    animation: fade-in 0.8s ease-out 2.5s forwards;
    position: relative;
    z-index: 2;
}

.typing-text {
    background: linear-gradient(135deg, #1a252f 0%, #2c3e50 50%, #34495e 100%);
    border-radius: 8px;
    border: 2px solid #4a5568;
    box-shadow: 
        0 0 0 1px #2d3748,
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(52, 152, 219, 0.2);
    padding: 2.5rem;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    font-size: 1rem;
    line-height: 1.6;
    color: #e2e8f0;
    font-weight: 400;
    letter-spacing: 0.01em;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    position: relative;
    overflow: hidden;
}

.typing-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.typing-text::after {
    content: '● ● ●';
    position: absolute;
    top: 8px;
    left: 1rem;
    color: #e53e3e;
    font-size: 0.8rem;
    letter-spacing: 0.5rem;
}

.typing-text {
    padding-top: 3.5rem;
}

.cursor {
    animation: terminalBlink 1.2s infinite;
    color: #00ff88;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 0 0 10px #00ff88;
    background: rgba(0, 255, 136, 0.1);
    padding: 0 2px;
    border-radius: 2px;
}

@keyframes terminalBlink {
    0%, 50% {
        opacity: 1;
        text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
    }
    51%, 100% {
        opacity: 0.3;
        text-shadow: 0 0 5px #00ff88;
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: 0;
    }
    
    .hero-video-section {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        position: relative;
    }
    
    .hero-content {
        flex-direction: column;
        gap: 2.5rem;
        padding: 7rem 1rem 1.5rem 1rem;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }
    
    .hero-top-row {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        width: 100%;
    }
    
    .hero-school-title h1 {
        font-size: 1.8rem;
        line-height: 1.3;
        text-align: center;
    }
    
    .hero-logo {
        margin-right: 0;
        margin-bottom: 0;
        order: 1;
    }
    
    .hero-logo-img {
        height: 380px;
        width: auto;
        max-width: 400px;
    }
    
    .hero-school-title {
        order: 2;
        width: 100%;
    }
    
    .hero-typing-text {
        flex: 0 0 auto;
        width: 100%;
        padding: 1rem;
        min-height: 150px;
        height: auto;
        margin-top: auto;
        text-align: center;
        order: 3;
    }
    
    .hero-typing-text span {
        font-size: 0.95rem;
        line-height: 1.4;
        min-height: auto;
        text-align: left;
    }
    
    
    
    .typing-section {
        padding: 3rem 1rem;
    }
    
    
    
    .typing-text {
        padding: 1.5rem 1.2rem;
        padding-top: 6rem;
        min-height: 200px;
        max-height: none;
        font-size: 0.9rem;
        line-height: 1.5;
        font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
        overflow: visible;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }
}

/* Hero Floating Video - Responsive */
@media (max-width: 1024px) {
    .hero-floating-video {
        width: 240px;
        height: 140px;
        padding: 6px;
        animation: horizontal-flow-tablet 28s ease-in-out infinite;
    }

    @keyframes horizontal-flow-tablet {
        0%, 100% {
            transform: translate(-50%, -50%) translateX(0) rotate(0deg) scale(1);
            box-shadow:
                0 0 20px rgba(0, 255, 240, 0.4),
                0 0 40px rgba(212, 175, 55, 0.2);
        }
        25% {
            transform: translate(-50%, -50%) translateX(-30px) rotate(0.3deg) scale(1.01);
            box-shadow:
                0 0 25px rgba(212, 175, 55, 0.5),
                0 0 50px rgba(0, 255, 240, 0.3);
        }
        50% {
            transform: translate(-50%, -50%) translateX(0) rotate(0deg) scale(1);
            box-shadow:
                0 0 22px rgba(157, 0, 255, 0.5),
                0 0 45px rgba(212, 175, 55, 0.2);
        }
        75% {
            transform: translate(-50%, -50%) translateX(30px) rotate(-0.3deg) scale(1.01);
            box-shadow:
                0 0 25px rgba(0, 255, 148, 0.5),
                0 0 50px rgba(157, 0, 255, 0.3);
        }
    }
}

@media (max-width: 768px) {
    .hero-floating-video {
        width: 200px;
        height: 120px;
        padding: 5px;
        top: 45%;
        animation: horizontal-flow-mobile 26s ease-in-out infinite;
    }

    .hero-video-overlay {
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
    }

    @keyframes horizontal-flow-mobile {
        0%, 100% {
            transform: translate(-50%, -50%) translateX(0) rotate(0deg) scale(1);
            box-shadow:
                0 0 18px rgba(0, 255, 240, 0.4),
                0 0 36px rgba(212, 175, 55, 0.2);
        }
        33% {
            transform: translate(-50%, -50%) translateX(-20px) rotate(0.2deg) scale(1.005);
            box-shadow:
                0 0 22px rgba(212, 175, 55, 0.5),
                0 0 44px rgba(0, 255, 240, 0.3);
        }
        66% {
            transform: translate(-50%, -50%) translateX(20px) rotate(-0.2deg) scale(1.005);
            box-shadow:
                0 0 22px rgba(157, 0, 255, 0.5),
                0 0 44px rgba(212, 175, 55, 0.3);
        }
    }
}

@media (max-width: 480px) {
    .hero-floating-video {
        width: 180px;
        height: 100px;
        padding: 4px;
        top: 42%;
        animation: horizontal-flow-small 24s ease-in-out infinite;
    }

    .hero-floating-video::after {
        inset: -4px;
    }

    .hero-video-overlay {
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
    }

    @keyframes horizontal-flow-small {
        0%, 100% {
            transform: translate(-50%, -50%) translateX(0) rotate(0deg);
            box-shadow:
                0 0 15px rgba(0, 255, 240, 0.4),
                0 0 30px rgba(212, 175, 55, 0.2);
        }
        50% {
            transform: translate(-50%, -50%) translateX(-15px) rotate(0.1deg);
            box-shadow:
                0 0 20px rgba(212, 175, 55, 0.5),
                0 0 40px rgba(0, 255, 240, 0.3);
        }
    }

    .hero-video-section {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }
    
    .hero-content {
        flex-direction: column;
        gap: 2rem;
        padding: 6rem 0.8rem 1rem 0.8rem;
        height: 100%;
        justify-content: space-between;
        align-items: center;
    }
    
    .hero-top-row {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
    }
    
    .hero-school-title h1 {
        font-size: 1.4rem;
        line-height: 1.3;
        text-align: center;
    }
    
    .hero-logo {
        margin-right: 0;
        margin-bottom: 0;
        order: 1;
    }
    
    .hero-logo-img {
        height: 320px;
        max-width: 340px;
    }
    
    .hero-school-title {
        order: 2;
        width: 100%;
    }
    
    .hero-typing-text {
        padding: 0.5rem;
        min-height: 120px;
        height: auto;
        width: 100%;
        margin-top: auto;
        order: 3;
    }
    
    .hero-typing-text span {
        font-size: 0.85rem;
        line-height: 1.3;
        min-height: auto;
        text-align: left;
    }
    
    /* About Section - Mobile 375px optimization */
    .about-split-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 0.5rem;
        min-height: auto;
    }
    
    .about-text-content {
        order: 1;
        text-align: center;
        width: 100%;
        padding: 0;
        margin-bottom: 0.5rem;
    }
    
    .about-text-content h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .about-text-content p {
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 0.8rem;
    }
    
    .about-visual {
        order: 2;
        height: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem;
    }
    
    .glowing-illustration {
        height: 100%;
        width: 100%;
        max-width: 200px;
    }
    
    .light-orb {
        width: 60px;
        height: 60px;
    }
    
    .orb-logo {
        width: 30px;
        height: 30px;
    }
    
    .consciousness-dots .dot {
        width: 20px;
        height: 20px;
    }
    
    .dot-logo {
        width: 8px;
        height: 8px;
    }
    
    .book-showcase {
        margin-top: 1rem;
        padding: 0.5rem;
    }
    
    .book-showcase h4 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .book-item-single {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .book-cover {
        width: 60px;
        height: 80px;
    }
    
    .book-info h5 {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }
    
    .book-info p {
        font-size: 0.7rem;
    }
}

/* Extra Small Mobile - 375px and below */
@media (max-width: 375px) {
    .hero-video-section {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }
    
    .hero-content {
        flex-direction: column;
        gap: 1.5rem;
        padding: 5rem 0.5rem 0.8rem 0.5rem;
        height: 100%;
        justify-content: space-between;
        align-items: center;
    }
    
    .hero-top-row {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.2rem;
        width: 100%;
    }
    
    .hero-school-title h1 {
        font-size: 1.1rem;
        line-height: 1.3;
        text-align: center;
    }
    
    .hero-logo {
        margin-right: 0;
        margin-bottom: 0;
        order: 1;
    }
    
    .hero-logo-img {
        height: 280px;
        max-width: 300px;
    }
    
    .hero-school-title {
        order: 2;
        width: 100%;
    }
    
    .hero-typing-text {
        padding: 0.3rem;
        min-height: 100px;
        height: auto;
        width: 100%;
        margin-top: auto;
        order: 3;
    }
    
    .hero-typing-text span {
        font-size: 0.75rem;
        line-height: 1.2;
        min-height: auto;
        text-align: left;
    }
    
    /* About Section - 375px specific optimizations */
    .about-split-layout {
        gap: 0.8rem;
        padding: 0 0.3rem;
    }
    
    .about-text-content h2 {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }
    
    .about-text-content p {
        font-size: 0.85rem;
        line-height: 1.3;
        margin-bottom: 0.6rem;
    }
    
    .about-visual {
        height: 150px;
        padding: 0.3rem;
    }
    
    .glowing-illustration {
        max-width: 150px;
    }
    
    .light-orb {
        width: 50px;
        height: 50px;
    }
    
    .orb-logo {
        width: 25px;
        height: 25px;
    }
    
    .consciousness-dots .dot {
        width: 15px;
        height: 15px;
    }
    
    .dot-logo {
        width: 6px;
        height: 6px;
    }
    
    .book-showcase {
        margin-top: 0.8rem;
        padding: 0.3rem;
    }
    
    .book-showcase h4 {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }
    
    .book-cover {
        width: 50px;
        height: 70px;
    }
    
    .book-info h5 {
        font-size: 0.75rem;
        margin-bottom: 0.2rem;
    }
    
    .book-info p {
        font-size: 0.65rem;
    }
}

/* Large Mobile - 600px to 768px */
@media (max-width: 600px) and (min-width: 481px) {
    .hero-video-section {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }
    
    .hero-content {
        flex-direction: column;
        gap: 1.8rem;
        padding: 4.5rem 1rem 1.2rem 1rem;
        justify-content: space-between;
    }
    
    .hero-top-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .hero-school-title h1 {
        font-size: 1.5rem;
        line-height: 1.3;
        text-align: right;
    }
    
    .hero-logo {
        margin-right: 1.5rem;
    }
    
    .hero-logo-img {
        height: 120px;
        max-width: 160px;
    }
    
    .hero-typing-text {
        margin-top: auto;
    }
    
    .hero-typing-text span {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}

/* Small Mobile - 320px to 375px */
@media (max-width: 320px) {
    .hero-video-section {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
    }
    
    .hero-content {
        flex-direction: column;
        gap: 1.2rem;
        padding: 4.5rem 0.3rem 0.5rem 0.3rem;
        justify-content: space-between;
        align-items: center;
    }
    
    .hero-top-row {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }
    
    .hero-school-title h1 {
        font-size: 0.95rem;
        line-height: 1.2;
        text-align: center;
    }
    
    .hero-logo {
        margin-right: 0;
        margin-bottom: 0;
        order: 1;
    }
    
    .hero-logo-img {
        height: 240px;
        max-width: 260px;
    }
    
    .hero-school-title {
        order: 2;
        width: 100%;
    }
    
    .hero-typing-text {
        padding: 0.2rem;
        min-height: 80px;
        margin-top: auto;
        order: 3;
    }
    
    .hero-typing-text span {
        font-size: 0.7rem;
        line-height: 1.1;
        text-align: left;
    }
}

/* Mobile Touch and Performance Optimizations */
@media (max-width: 768px) {
    /* Optimize video performance on mobile */
    .hero-video video {
        object-fit: cover;
        object-position: center;
        will-change: auto;
    }
    
    /* Improve touch interactions */
    .hero-content {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Optimize animations for mobile */
    .hero-logo-img {
        will-change: transform;
        backface-visibility: hidden;
    }
    
    .hero-typing-text {
        will-change: auto;
        contain: layout style;
    }
    
    /* Prevent horizontal scroll */
    .hero {
        overflow-x: hidden;
        width: 100%;
    }
    
    .hero-video-section {
        overflow: hidden;
    }
    
    /* Mobile background patterns optimization */
    .hero-background-patterns {
        opacity: 0.7;
    }
    
    .pattern-layer {
        opacity: 0.05;
    }
    
    .floating-circle,
    .floating-square {
        opacity: 0.3;
        animation-duration: 12s;
    }
    
    .circle-1, .circle-3 {
        width: 40px;
        height: 40px;
    }
    
    .circle-2 {
        width: 25px;
        height: 25px;
    }
    
    .square-1 {
        width: 20px;
        height: 20px;
    }
    
    .square-2 {
        width: 30px;
        height: 30px;
    }
}


/* Sections */
.section {
    min-height: 100vh;
    padding: var(--space-2xl) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Quantum Field Background for Sections */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(0, 255, 240, 0.03) 0%, transparent 40%);
    z-index: -1;
    pointer-events: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.section-content {
    width: 100%;
}

.section h2 {
    font-family: var(--font-renaissance);
    font-size: 2.618rem;
    font-weight: 600;
    margin-bottom: var(--space-xl);
    color: var(--renaissance-gold);
    text-align: center;
    letter-spacing: 0.02em;
    text-shadow: var(--glow-gold);
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    border-bottom: 2px solid var(--quantum-cyan);
    padding-bottom: var(--space-sm);
}

.section h2::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-gold-neon);
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.5; box-shadow: 0 0 10px var(--quantum-cyan); }
    50% { opacity: 1; box-shadow: 0 0 20px var(--quantum-cyan), 0 0 40px var(--neon-purple); }
}

.section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #8a8a8a, #a0a0a0);
    border-radius: 2px;
}

/* About Section */
/* ========================================
   ABOUT SECTION - QUANTUM RENAISSANCE REDESIGN
   ======================================== */
.about-section {
    background:
        radial-gradient(ellipse at top left, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0, 255, 240, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at center, rgba(157, 0, 255, 0.05) 0%, transparent 60%),
        var(--space-black);
    padding-top: var(--space-2xl);
    position: relative;
    overflow: hidden;
}

/* Ornate Border Frame */
.about-section::before {
    content: '';
    position: absolute;
    top: var(--space-xl);
    left: var(--space-xl);
    right: var(--space-xl);
    bottom: var(--space-xl);
    border: 2px solid var(--renaissance-gold);
    border-image: linear-gradient(
        90deg,
        var(--renaissance-gold) 0%,
        var(--quantum-cyan) 50%,
        var(--renaissance-gold) 100%
    ) 1;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

.about-split-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
    min-height: 80vh;
    position: relative;
    z-index: 2;
}

.about-text-content {
    opacity: 0;
    transform: translateX(-30px);
    animation: fade-in-left 1s ease-out 0.5s forwards;
    text-align: left;
    position: relative;
}

/* About Intro - Holographic Card */
.about-intro {
    margin-bottom: var(--space-xl);
    background:
        linear-gradient(135deg, rgba(10, 14, 39, 0.8) 0%, rgba(26, 31, 58, 0.9) 100%);
    padding: var(--space-xl);
    border-radius: 8px;
    border: 2px solid var(--quantum-cyan);
    box-shadow:
        0 0 40px rgba(0, 255, 240, 0.2),
        inset 0 0 60px rgba(0, 255, 240, 0.05);
    position: relative;
    overflow: hidden;
}

.about-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--marble-overlay);
    opacity: 0.15;
    pointer-events: none;
}

.about-intro p {
    font-family: var(--font-renaissance);
    font-size: 1.3rem;
    line-height: 1.618;
    color: var(--classical-cream);
    font-weight: 500;
    text-align: left;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Main Project - Renaissance Card with Quantum Glow */
.main-project {
    background:
        linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(157, 0, 255, 0.1) 100%),
        rgba(10, 14, 39, 0.95);
    padding: var(--space-xl);
    border-radius: 8px;
    box-shadow:
        0 0 60px rgba(212, 175, 55, 0.3),
        inset 0 0 80px rgba(212, 175, 55, 0.05);
    backdrop-filter: blur(20px);
    border: 2px solid var(--renaissance-gold);
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--transition-smooth);
}

.main-project::before {
    content: '◈';
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    font-size: 3rem;
    color: var(--renaissance-gold);
    opacity: 0.2;
    animation: float 4s ease-in-out infinite;
}

.main-project:hover {
    transform: translateY(-5px);
    box-shadow:
        0 0 80px rgba(212, 175, 55, 0.5),
        0 0 40px rgba(157, 0, 255, 0.3),
        inset 0 0 100px rgba(212, 175, 55, 0.1);
    border-color: var(--neon-purple);
}

.main-project h3 {
    font-family: var(--font-futuristic);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--renaissance-gold);
    margin-bottom: var(--space-md);
    text-align: left;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: var(--glow-gold);
    position: relative;
    z-index: 1;
}

.main-project p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.618;
    color: var(--classical-cream);
    margin-bottom: var(--space-md);
    text-align: left;
    position: relative;
    z-index: 1;
}

/* About Visual - Quantum Consciousness Display */
.about-visual {
    opacity: 0;
    transform: translateX(30px);
    animation: fade-in-right 1s ease-out 0.8s forwards;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
    height: auto;
    min-height: 600px;
}

/* Quantum Physics Logo Visualization */
.glowing-illustration {
    position: relative;
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Central Quantum Logo - HUGE */
.light-orb {
    width: 250px;
    height: 250px;
    background: transparent;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: quantum-rotation 20s linear infinite;
}

/* Quantum Field Background */
.light-orb::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at center, var(--renaissance-gold) 0%, var(--quantum-cyan) 20%, var(--neon-purple) 40%, transparent 70%);
    border-radius: 50%;
    animation: quantum-pulse 3s ease-in-out infinite;
    box-shadow:
        0 0 80px var(--renaissance-gold),
        0 0 160px var(--quantum-cyan),
        0 0 240px var(--neon-purple),
        inset 0 0 60px rgba(255, 255, 255, 0.2);
}

/* Quantum Core Glow */
.light-orb::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, var(--quantum-cyan) 40%, transparent 70%);
    border-radius: 50%;
    animation: core-pulse 2s ease-in-out infinite alternate;
    box-shadow: 0 0 100px rgba(255, 255, 255, 0.8);
}

/* Logo Image - Centered and Enhanced */
.orb-logo {
    width: 180px !important;
    height: 180px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 10;
    filter:
        drop-shadow(0 0 40px var(--quantum-cyan))
        drop-shadow(0 0 80px var(--renaissance-gold))
        brightness(1.2);
    animation: logo-quantum-float 6s ease-in-out infinite;
}

@keyframes quantum-rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes quantum-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

@keyframes core-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

@keyframes logo-quantum-float {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter:
            drop-shadow(0 0 40px var(--quantum-cyan))
            drop-shadow(0 0 80px var(--renaissance-gold))
            brightness(1.2);
    }
    33% {
        transform: translateY(-15px) scale(1.05);
        filter:
            drop-shadow(0 0 60px var(--neon-purple))
            drop-shadow(0 0 120px var(--quantum-violet))
            brightness(1.3);
    }
    66% {
        transform: translateY(-8px) scale(1.02);
        filter:
            drop-shadow(0 0 50px var(--photon-green))
            drop-shadow(0 0 100px var(--quantum-cyan))
            brightness(1.25);
    }
}

/* Quantum Energy Waves */
.energy-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wave {
    position: absolute;
    border: 2px solid var(--quantum-cyan);
    border-radius: 50%;
    animation: ripple-expand-quantum 5s ease-out infinite;
    box-shadow: 0 0 20px var(--quantum-cyan);
}

.wave-1 {
    width: 220px;
    height: 220px;
    animation-delay: 0s;
    border-color: var(--renaissance-gold);
    box-shadow: 0 0 20px var(--renaissance-gold);
}

.wave-2 {
    width: 300px;
    height: 300px;
    animation-delay: 1.5s;
    border-color: var(--neon-purple);
    box-shadow: 0 0 20px var(--neon-purple);
}

.wave-3 {
    width: 380px;
    height: 380px;
    animation-delay: 3s;
    border-color: var(--photon-green);
    box-shadow: 0 0 20px var(--photon-green);
}

@keyframes ripple-expand-quantum {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

/* Orbital Rings - Atom Structure */
.consciousness-dots::before,
.consciousness-dots::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 240, 0.3);
    pointer-events: none;
}

.consciousness-dots::before {
    width: 340px;
    height: 340px;
    transform: translate(-50%, -50%) rotateX(70deg);
    box-shadow:
        0 0 20px rgba(0, 255, 240, 0.2),
        inset 0 0 20px rgba(0, 255, 240, 0.1);
    animation: orbital-ring-1 12s linear infinite;
}

.consciousness-dots::after {
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%) rotateX(70deg) rotateZ(60deg);
    border-color: rgba(157, 0, 255, 0.3);
    box-shadow:
        0 0 20px rgba(157, 0, 255, 0.2),
        inset 0 0 20px rgba(157, 0, 255, 0.1);
    animation: orbital-ring-2 15s linear infinite reverse;
}

@keyframes orbital-ring-1 {
    0%, 100% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg);
    }
}

@keyframes orbital-ring-2 {
    0%, 100% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateZ(60deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateZ(420deg);
    }
}

/* Quantum Particles - Electron Orbits */
.consciousness-dots {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Quantum Particles as Electrons */
.consciousness-dots .dot {
    position: absolute;
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hide old logo images inside particles */
.dot-logo {
    display: none !important;
    opacity: 0 !important;
}

/* Particle Core */
.consciousness-dots .dot::before {
    content: '';
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, var(--quantum-cyan) 0%, var(--neon-purple) 100%);
    border-radius: 50%;
    box-shadow:
        0 0 20px var(--quantum-cyan),
        0 0 40px var(--neon-purple);
    animation: particle-glow 2s ease-in-out infinite alternate;
}

/* Orbital Paths */
.dot-1 {
    animation: orbit-1 8s linear infinite;
}

.dot-2 {
    animation: orbit-2 10s linear infinite;
}

.dot-3 {
    animation: orbit-3 12s linear infinite reverse;
}

.dot-4 {
    animation: orbit-4 9s linear infinite;
}

.dot-5 {
    animation: orbit-5 11s linear infinite reverse;
}

/* Orbital Animations - Electron Paths */
@keyframes orbit-1 {
    0% {
        top: -150px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    25% {
        top: 50%;
        left: calc(100% + 50px);
        transform: translate(-50%, -50%);
    }
    50% {
        top: calc(100% + 50px);
        left: 50%;
        transform: translate(-50%, 0);
    }
    75% {
        top: 50%;
        left: -50px;
        transform: translate(-50%, -50%);
    }
    100% {
        top: -150px;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

@keyframes orbit-2 {
    0% {
        top: 50%;
        left: -120px;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        top: 50%;
        left: -120px;
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes orbit-3 {
    0% {
        top: -100px;
        left: calc(100% + 20px);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        top: -100px;
        left: calc(100% + 20px);
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes orbit-4 {
    0% {
        top: calc(100% + 80px);
        left: 20%;
        transform: translate(-50%, 0);
    }
    33% {
        top: -80px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    66% {
        top: calc(100% + 80px);
        left: 80%;
        transform: translate(-50%, 0);
    }
    100% {
        top: calc(100% + 80px);
        left: 20%;
        transform: translate(-50%, 0);
    }
}

@keyframes orbit-5 {
    0% {
        top: -80px;
        left: -80px;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
    }
    100% {
        top: -80px;
        left: -80px;
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
}

@keyframes particle-glow {
    0%, 100% {
        box-shadow:
            0 0 20px var(--quantum-cyan),
            0 0 40px var(--neon-purple);
    }
    50% {
        box-shadow:
            0 0 30px var(--photon-green),
            0 0 60px var(--renaissance-gold);
    }
}

/* Logo Branding Elements */
.orb-logo {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    animation: logo-pulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(74, 144, 226, 0.6));
}

/* .dot-logo is hidden - see line 2711 */

.avatar-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(74, 144, 226, 0.3));
}

.developer-card:hover .avatar-logo {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 6px 12px rgba(74, 144, 226, 0.5));
}

.course-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(74, 144, 226, 0.3));
}

.course-card:hover .course-logo {
    transform: scale(1.1) rotate(-5deg);
    filter: drop-shadow(0 6px 12px rgba(74, 144, 226, 0.5));
}

@keyframes logo-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

@keyframes logo-float {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
        opacity: 1;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Book Showcase */
/* Book Showcase - Futuristic 3D Renaissance */
.book-showcase {
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background:
        linear-gradient(135deg, rgba(157, 0, 255, 0.1) 0%, rgba(0, 255, 240, 0.1) 100%),
        rgba(10, 14, 39, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 2px solid var(--neon-purple);
    box-shadow:
        0 0 60px rgba(157, 0, 255, 0.3),
        inset 0 0 80px rgba(157, 0, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.book-showcase::before {
    content: '📖';
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    font-size: 2.5rem;
    opacity: 0.15;
    animation: float 3s ease-in-out infinite;
}

.book-showcase h4 {
    font-family: var(--font-classical);
    font-size: 1.618rem;
    font-weight: 600;
    color: var(--neon-purple);
    margin-bottom: var(--space-lg);
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 0 20px var(--neon-purple);
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    justify-items: center;
}

.book-item-single {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background:
        linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(0, 255, 240, 0.08) 100%),
        rgba(26, 31, 58, 0.8);
    border-radius: 12px;
    border: 1px solid var(--renaissance-gold);
    transition: all 0.4s var(--transition-bounce);
    width: 100%;
    position: relative;
    overflow: hidden;
}

.book-item-single::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
    transition: left 0.6s ease;
}

.book-item-single:hover::before {
    left: 100%;
}

.book-item-single:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 15px 40px rgba(212, 175, 55, 0.3),
        0 0 60px rgba(0, 255, 240, 0.2);
    border-color: var(--quantum-cyan);
}

.book-item {
    text-align: center;
    transition: transform 0.3s ease;
}

.book-item:hover {
    transform: translateY(-5px);
}

.book-cover {
    position: relative;
    width: 80px;
    height: 100px;
    margin: 0 auto 1rem;
    perspective: 1000px;
}

.book-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.book-item:hover .book-placeholder {
    transform: rotateY(-10deg) rotateX(5deg);
}

.book-spine {
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(180deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
    border-radius: 4px 0 0 4px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

.book-pages {
    position: absolute;
    left: 8px;
    top: 0;
    width: 72px;
    height: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 0 8px 8px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.book-pages::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(74, 144, 226, 0.1) 25%, 
        rgba(74, 144, 226, 0.1) 75%, 
        transparent 100%);
    border-radius: 4px;
}

.book-pages::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 15px;
    right: 15px;
    height: 1px;
    background: rgba(74, 144, 226, 0.3);
    box-shadow: 
        0 8px 0 rgba(74, 144, 226, 0.2),
        0 16px 0 rgba(74, 144, 226, 0.1),
        0 24px 0 rgba(74, 144, 226, 0.1),
        0 32px 0 rgba(74, 144, 226, 0.1),
        0 40px 0 rgba(74, 144, 226, 0.1);
}

.book-info h5 {
    font-family: var(--font-renaissance);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--renaissance-gold);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
    text-align: left;
    letter-spacing: 0.02em;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.book-info p {
    font-family: var(--font-quantum);
    font-size: 0.9rem;
    color: var(--quantum-cyan);
    line-height: 1.4;
    margin: 0;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 40px rgba(74, 144, 226, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 60px rgba(74, 144, 226, 0.6);
    }
}

@keyframes inner-glow {
    0% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes float-dots {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-10px) scale(1.2);
        opacity: 1;
    }
}

/* Notification Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}


/* Touch-friendly button improvements */
@media (max-width: 768px) {
    .submit-btn,
    .join-btn,
    .course-btn {
        min-height: 48px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    .submit-btn:active,
    .join-btn:active,
    .course-btn:active {
        transform: scale(0.98);
    }
    
    /* Improve touch targets */
    .nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hamburger {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    
    /* Reduce animations on mobile for better performance */
    .glowing-illustration,
    .energy-waves,
    .consciousness-dots {
        animation-duration: 6s;
    }

    .light-orb {
        animation-duration: 4s;
    }

    /* Scale down quantum logo visualization for mobile */
    .glowing-illustration {
        width: 350px;
        height: 350px;
    }

    .light-orb {
        width: 180px;
        height: 180px;
    }

    .orb-logo {
        width: 120px !important;
        height: 120px !important;
    }

    /* Adjust orbital rings for mobile */
    .consciousness-dots::before {
        width: 240px;
        height: 240px;
    }

    .consciousness-dots::after {
        width: 280px;
        height: 280px;
    }

    /* Optimize energy waves */
    .wave-1 {
        width: 150px;
        height: 150px;
    }

    .wave-2 {
        width: 210px;
        height: 210px;
    }

    .wave-3 {
        width: 270px;
        height: 270px;
    }
    
    /* Improve scrolling performance */
    .section {
        contain: layout style paint;
    }
    
    /* Optimize backdrop filters for mobile */
    .navbar,
    .nav-menu,
    .static-quote,
    .typing-text {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hero-video video,
    .developers-video-bg video {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .nav-link,
    .submit-btn,
    .join-btn,
    .course-btn {
        border: 2px solid currentColor;
    }
    
    .static-quote,
    .typing-text {
        background: rgba(0, 0, 0, 0.8);
        border: 2px solid #fff;
    }
}

/* Focus improvements for keyboard navigation */
.nav-link:focus,
.submit-btn:focus,
.join-btn:focus,
.course-btn:focus,
.hamburger:focus {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
}

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

/* Developers Section */
/* Developers Section - Quantum Renaissance Greyish Theme */
.developers-section {
    position: relative;
    background:
        radial-gradient(ellipse at top left, rgba(212, 175, 55, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0, 255, 240, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at center, rgba(157, 0, 255, 0.03) 0%, transparent 60%),
        linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 30%, #2d2d2d 70%, #252525 100%);
    overflow: visible;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

/* Quantum Grid Pattern Overlay */
.developers-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 255, 240, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 240, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

/* Renaissance Border Frame */
.developers-section::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid transparent;
    border-image: linear-gradient(
        90deg,
        rgba(212, 175, 55, 0.3) 0%,
        rgba(0, 255, 240, 0.2) 50%,
        rgba(212, 175, 55, 0.3) 100%
    ) 1;
    pointer-events: none;
    z-index: 0;
}

/* Video Background as Chaotic Floating Box */
.developers-video-bg {
    position: absolute;
    top: 20%;
    right: 5%;
    width: 280px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 1;
    border: 2px solid rgba(0, 255, 240, 0.3);
    box-shadow:
        0 0 30px rgba(0, 255, 240, 0.2),
        0 0 60px rgba(157, 0, 255, 0.1),
        inset 0 0 40px rgba(0, 255, 240, 0.05);
    opacity: 0.8;
    animation: chaotic-float 25s ease-in-out infinite;
    will-change: transform;
}

/* Chaotic Flowing Animation - Complex Path */
@keyframes chaotic-float {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        border-color: rgba(0, 255, 240, 0.3);
        box-shadow:
            0 0 30px rgba(0, 255, 240, 0.2),
            0 0 60px rgba(157, 0, 255, 0.1);
    }
    8% {
        transform: translate(-80px, 50px) rotate(3deg) scale(1.05);
        border-color: rgba(212, 175, 55, 0.3);
    }
    16% {
        transform: translate(-120px, -30px) rotate(-5deg) scale(0.95);
        border-color: rgba(157, 0, 255, 0.3);
        box-shadow:
            0 0 40px rgba(157, 0, 255, 0.3),
            0 0 80px rgba(0, 255, 240, 0.1);
    }
    24% {
        transform: translate(-40px, 80px) rotate(7deg) scale(1.1);
        border-color: rgba(0, 255, 240, 0.4);
    }
    32% {
        transform: translate(60px, 100px) rotate(-4deg) scale(0.9);
        border-color: rgba(212, 175, 55, 0.4);
    }
    40% {
        transform: translate(120px, 40px) rotate(6deg) scale(1.05);
        border-color: rgba(255, 0, 110, 0.3);
        box-shadow:
            0 0 35px rgba(255, 0, 110, 0.2),
            0 0 70px rgba(212, 175, 55, 0.2);
    }
    48% {
        transform: translate(80px, -60px) rotate(-8deg) scale(0.95);
        border-color: rgba(0, 255, 148, 0.3);
    }
    56% {
        transform: translate(-60px, -100px) rotate(5deg) scale(1.08);
        border-color: rgba(157, 0, 255, 0.4);
    }
    64% {
        transform: translate(-140px, -40px) rotate(-6deg) scale(0.92);
        border-color: rgba(0, 255, 240, 0.3);
        box-shadow:
            0 0 30px rgba(0, 255, 240, 0.3),
            0 0 60px rgba(157, 0, 255, 0.2);
    }
    72% {
        transform: translate(-100px, 60px) rotate(9deg) scale(1.06);
        border-color: rgba(212, 175, 55, 0.3);
    }
    80% {
        transform: translate(40px, 120px) rotate(-7deg) scale(0.94);
        border-color: rgba(255, 0, 110, 0.3);
    }
    88% {
        transform: translate(100px, -20px) rotate(4deg) scale(1.03);
        border-color: rgba(0, 255, 148, 0.4);
        box-shadow:
            0 0 40px rgba(0, 255, 148, 0.2),
            0 0 80px rgba(212, 175, 55, 0.1);
    }
    96% {
        transform: translate(20px, -80px) rotate(-3deg) scale(0.97);
        border-color: rgba(157, 0, 255, 0.3);
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        border-color: rgba(0, 255, 240, 0.3);
        box-shadow:
            0 0 30px rgba(0, 255, 240, 0.2),
            0 0 60px rgba(157, 0, 255, 0.1);
    }
}

.developers-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(0, 255, 240, 0.15) 0%,
        rgba(157, 0, 255, 0.1) 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 2;
}

.developers-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 600;
    color: var(--marble-white);
    text-shadow:
        0 0 20px var(--quantum-cyan),
        0 0 40px var(--renaissance-gold),
        0 4px 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
    margin-bottom: var(--space-xl);
    position: relative;
    z-index: 2;
    background: linear-gradient(
        135deg,
        var(--renaissance-gold) 0%,
        var(--quantum-cyan) 50%,
        var(--marble-white) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.developers-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2rem 0;
    margin-top: 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--quantum-cyan) rgba(0, 255, 240, 0.1);
    position: relative;
    z-index: 2;
}

.developers-scroll-container::-webkit-scrollbar {
    height: 10px;
}

.developers-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 255, 240, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 240, 0.1);
}

.developers-scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(
        90deg,
        var(--quantum-cyan) 0%,
        var(--neon-purple) 50%,
        var(--quantum-cyan) 100%
    );
    border-radius: 8px;
    box-shadow:
        0 0 10px var(--quantum-cyan),
        0 0 20px var(--neon-purple);
}

.developers-scroll-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        90deg,
        var(--neon-purple) 0%,
        var(--quantum-cyan) 50%,
        var(--neon-purple) 100%
    );
}

.developers-grid {
    display: flex;
    gap: 3rem;
    padding: 0 2rem;
    min-width: max-content;
}

/* Quantum Renaissance Developer Cards */
.developer-card {
    background:
        radial-gradient(circle at top left, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
        radial-gradient(circle at bottom right, rgba(0, 255, 240, 0.06) 0%, transparent 40%),
        linear-gradient(135deg, rgba(55, 55, 55, 0.95) 0%, rgba(40, 40, 40, 0.98) 100%);
    backdrop-filter: blur(30px);
    padding: 2rem;
    border-radius: 16px;
    text-align: left;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(212, 175, 55, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(0, 255, 240, 0.1),
        inset 0 1px 1px rgba(212, 175, 55, 0.2),
        inset 0 -1px 1px rgba(0, 255, 240, 0.1);
    position: relative;
    overflow: hidden;
    min-width: 320px;
    max-width: 380px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Ornate Corner Decorations */
.developer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 30%),
        linear-gradient(225deg, rgba(0, 255, 240, 0.08) 0%, transparent 30%),
        linear-gradient(315deg, rgba(157, 0, 255, 0.06) 0%, transparent 30%),
        linear-gradient(45deg, rgba(212, 175, 55, 0.08) 0%, transparent 30%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: none;
    border-radius: 16px;
}

/* Quantum Field Effect */
.developer-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(0, 255, 240, 0.1) 0%,
        transparent 50%
    );
    opacity: 0;
    transition: all 0.6s ease;
    z-index: 1;
    pointer-events: none;
    animation: quantum-pulse 4s ease-in-out infinite;
}

@keyframes quantum-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.3;
    }
}

.developer-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 255, 240, 0.3),
        0 0 90px rgba(212, 175, 55, 0.2),
        inset 0 2px 2px rgba(212, 175, 55, 0.3),
        inset 0 -2px 2px rgba(0, 255, 240, 0.2);
    border-color: rgba(0, 255, 240, 0.5);
}

.developer-card:hover::before {
    opacity: 1;
}

.developer-card:hover::after {
    opacity: 0.5;
}

/* Quantum Avatar with Holographic Effect */
.developer-avatar {
    width: 90px;
    height: 90px;
    background: linear-gradient(
        135deg,
        var(--renaissance-gold) 0%,
        var(--quantum-cyan) 50%,
        var(--neon-purple) 100%
    );
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 30px rgba(0, 255, 240, 0.4),
        0 0 60px rgba(212, 175, 55, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    z-index: 2;
    border: 3px solid rgba(212, 175, 55, 0.4);
}

.developer-avatar::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--quantum-cyan),
        var(--neon-purple),
        var(--renaissance-gold),
        var(--quantum-cyan)
    );
    animation: avatar-rotate 4s linear infinite;
    z-index: -1;
    opacity: 0.5;
}

@keyframes avatar-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.developer-card:hover .developer-avatar {
    transform: scale(1.1);
    box-shadow:
        0 0 40px rgba(0, 255, 240, 0.6),
        0 0 80px rgba(212, 175, 55, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.developer-card:hover .developer-avatar::before {
    animation-duration: 2s;
    opacity: 0.8;
}

.avatar-initial {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Developer Name - Theano Didot */
.developer-card h3 {
    font-family: 'Theano Didot', serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--marble-white);
    margin-bottom: 0.8rem;
    text-align: left;
    line-height: 1.3;
    letter-spacing: 0.03em;
    position: relative;
    z-index: 2;
    text-shadow:
        0 0 10px rgba(0, 255, 240, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Developer Title - Space Mono */
.developer-title {
    font-family: 'Space Mono', monospace;
    color: var(--antique-gold);
    font-weight: 400;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    text-align: left;
    line-height: 1.4;
    position: relative;
    z-index: 2;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Developer Role - Audiowide */
.developer-role {
    font-family: 'Audiowide', cursive;
    color: var(--quantum-cyan);
    font-weight: 400;
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
    text-align: right;
    line-height: 1.4;
    text-shadow: 0 0 8px rgba(0, 255, 240, 0.4);
}

/* Projects List - Tourney Font */
.projects-list {
    margin-top: 1.5rem;
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.projects-list h4 {
    font-family: 'Tourney', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--renaissance-gold);
    margin-bottom: 0.8rem;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 0.4rem;
    display: block;
    line-height: 1.3;
    position: relative;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.projects-list h4::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--renaissance-gold) 0%,
        var(--quantum-cyan) 50%,
        var(--neon-purple) 100%
    );
    transition: width 0.5s ease;
    box-shadow: 0 0 10px var(--quantum-cyan);
}

.developer-card:hover .projects-list h4::after {
    width: 100%;
}

.projects-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Project Items - Major Mono Display */
.projects-list li {
    font-family: 'Major Mono Display', monospace;
    color: var(--classical-cream);
    font-size: 0.7rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
    padding-left: 1.2rem;
    position: relative;
    transition: all 0.4s ease;
    text-align: left;
    opacity: 0.9;
}

.projects-list li::before {
    content: '◆';
    color: var(--quantum-cyan);
    font-size: 0.7rem;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.4s ease;
    text-shadow: 0 0 8px var(--quantum-cyan);
}

.developer-card:hover .projects-list li {
    color: var(--marble-white);
    transform: translateX(4px);
    opacity: 1;
    text-shadow: 0 0 6px rgba(0, 255, 240, 0.3);
}

.developer-card:hover .projects-list li::before {
    color: var(--renaissance-gold);
    transform: translateX(4px) rotate(45deg);
    text-shadow: 0 0 12px var(--renaissance-gold);
}

/* Developers Section - Responsive Design */
@media (max-width: 1024px) {
    .developers-video-bg {
        width: 220px;
        height: 140px;
        right: 3%;
        top: 15%;
        animation: chaotic-float-tablet 20s ease-in-out infinite;
    }

    @keyframes chaotic-float-tablet {
        0%, 100% {
            transform: translate(0, 0) rotate(0deg) scale(1);
        }
        25% {
            transform: translate(-60px, 40px) rotate(5deg) scale(1.05);
        }
        50% {
            transform: translate(40px, -50px) rotate(-6deg) scale(0.95);
        }
        75% {
            transform: translate(-40px, 60px) rotate(4deg) scale(1.02);
        }
    }

    .developer-card {
        min-width: 280px;
        max-width: 320px;
        min-height: 380px;
    }

    .developers-section h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .developers-section::after {
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .developers-video-bg {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        max-width: 400px;
        height: 200px;
        margin: 0 auto 2rem;
        display: block;
        animation: chaotic-float-mobile 18s ease-in-out infinite;
    }

    @keyframes chaotic-float-mobile {
        0%, 100% {
            transform: rotate(0deg) scale(1);
        }
        25% {
            transform: rotate(3deg) scale(1.03);
        }
        50% {
            transform: rotate(-4deg) scale(0.97);
        }
        75% {
            transform: rotate(2deg) scale(1.02);
        }
    }

    .developers-section h2 {
        font-size: 2rem;
    }

    .developers-scroll-container {
        padding: 1rem 0;
    }

    .developers-grid {
        gap: 2rem;
        padding: 0 1rem;
    }

    .developer-card {
        min-width: 260px;
        max-width: 280px;
        min-height: 360px;
        padding: 1.5rem;
    }

    .developer-avatar {
        width: 80px;
        height: 80px;
    }

    .developer-card h3 {
        font-size: 1.1rem;
    }

    .projects-list li {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .developers-section h2 {
        font-size: 1.6rem;
    }

    .developers-video-bg {
        height: 160px;
        max-width: 320px;
    }

    .developer-card {
        min-width: 240px;
        max-width: 260px;
        padding: 1.2rem;
    }

    .developer-avatar {
        width: 70px;
        height: 70px;
    }

    .developer-card h3 {
        font-size: 1rem;
    }

    .developer-title {
        font-size: 0.75rem;
    }

    .projects-list {
        padding: 0.8rem;
    }

    .projects-list h4 {
        font-size: 0.8rem;
    }

    .projects-list li {
        font-size: 0.6rem;
        line-height: 1.4;
    }
}

/* History Section */
.history-section {
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 30%, #0f0f0f 70%, #000 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.history-section h2 {
    font-family: 'Inter', sans-serif;
    color: #e0e0e0;
    font-size: 1.8rem;
    font-weight: 400;
    text-align: left;
    letter-spacing: 0.01em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
}

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

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.3) 100%);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.timeline-item:hover {
    transform: translateY(-5px);
}

.timeline-item:hover .timeline-content {
    background: rgba(60, 60, 60, 0.95);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
}

.timeline-item.animate {
    opacity: 1;
    transform: translateY(0);
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(odd) .timeline-content {
    text-align: left;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-item:nth-child(even) .timeline-content {
    text-align: right;
}


.timeline-year {
    font-family: 'Inter', sans-serif;
    background: rgba(40, 40, 40, 0.8);
    color: #d0d0d0;
    padding: 0.3rem 0.8rem;
    border-radius: 2px;
    font-weight: 400;
    font-size: 0.75rem;
    white-space: nowrap;
    margin: 0 1rem;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    min-width: 50px;
    text-align: center;
    border: 1px solid #444;
    opacity: 1;
    transform: scale(1);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-year.animate {
    opacity: 1;
    transform: scale(1);
}

.timeline-content {
    background: rgba(35, 35, 35, 0.8);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 4px;
    flex: 1;
    max-width: 320px;
    border: 1px solid #444;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transform: translateY(0);
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-content.animate {
    opacity: 1;
    transform: translateY(0);
}

.timeline-content h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.6rem;
    color: #d0d0d0;
    letter-spacing: 0.005em;
    line-height: 1.3;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-content h3.animate {
    opacity: 1;
    transform: translateY(0);
}

.timeline-content h4 {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    margin: 0.8rem 0 0.6rem 0;
    color: #c0c0c0;
    line-height: 1.3;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-content h4.animate {
    opacity: 1;
    transform: translateX(0);
}

.timeline-content p {
    font-family: 'Inter', sans-serif;
    color: #b0b0b0;
    line-height: 1.4;
    margin-bottom: 0.6rem;
    font-size: 0.75rem;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-content p.animate {
    opacity: 1;
    transform: translateY(0);
}

.timeline-content ul {
    font-family: 'Inter', sans-serif;
    color: #b0b0b0;
    padding-left: 1rem;
    margin: 0.6rem 0;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-size: 0.75rem;
}

.timeline-content ul.animate {
    opacity: 1;
    transform: translateX(0);
}

.timeline-content li {
    margin-bottom: 0.3rem;
    line-height: 1.4;
    font-size: 0.75rem;
}

/* Scholars Section */
.scholars-section {
    margin-top: 1rem;
}

.scholar {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 6px;
    margin: 0.8rem 0;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.scholar h4 {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.6rem;
    color: #d0d0d0;
}

.scholar p {
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
}

.scholar a {
    color: #4A90E2;
    text-decoration: none;
    font-weight: 500;
}

.scholar a:hover {
    text-decoration: underline;
}

.transformation-path {
    background: rgba(74, 144, 226, 0.2);
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 1.5rem;
    border: 1px solid rgba(74, 144, 226, 0.3);
}

.transformation-path p {
    font-weight: 600;
    color: #fff;
    margin: 0;
}

/* Highlighted Timeline Items */
.timeline-item.highlight-yellow {
    background: rgba(255, 193, 7, 0.08);
    border: 2px solid rgba(255, 193, 7, 0.4);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.timeline-item.highlight-yellow .timeline-content {
    background: transparent;
    border: none;
}

.timeline-item.highlight-green {
    background: rgba(40, 167, 69, 0.08);
    border: 2px solid rgba(40, 167, 69, 0.4);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.timeline-item.highlight-green .timeline-content {
    background: transparent;
    border: none;
}

.highlight-message {
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.highlight-message.yellow {
    background: rgba(255, 193, 7, 0.3);
    border: 2px solid rgba(255, 193, 7, 0.6);
    color: #fff;
}

.highlight-message.green {
    background: rgba(40, 167, 69, 0.3);
    border: 2px solid rgba(40, 167, 69, 0.6);
    color: #fff;
}

/* Goals Section - Quantum Renaissance Post-Modern Design */
.goals-section {
    background:
        radial-gradient(ellipse at top left, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0, 255, 240, 0.06) 0%, transparent 50%),
        linear-gradient(135deg, rgba(45, 45, 45, 0.95) 0%, rgba(30, 30, 30, 0.98) 100%);
    padding: 2.5rem 1.5rem;
    margin-top: 3rem;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    backdrop-filter: blur(20px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(0, 255, 240, 0.1),
        inset 0 1px 1px rgba(212, 175, 55, 0.2);
}

/* Ornate Corner Decorations */
.goals-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, transparent 20%),
        linear-gradient(225deg, rgba(0, 255, 240, 0.08) 0%, transparent 20%),
        linear-gradient(315deg, rgba(157, 0, 255, 0.06) 0%, transparent 20%),
        linear-gradient(45deg, rgba(212, 175, 55, 0.08) 0%, transparent 20%);
    pointer-events: none;
    z-index: 0;
}

/* Quantum Grid Pattern */
.goals-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 255, 240, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 240, 0.02) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

.goals-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--marble-white);
    letter-spacing: 0.05em;
    text-align: center;
    position: relative;
    z-index: 2;
    text-shadow:
        0 0 20px rgba(0, 255, 240, 0.3),
        0 0 40px rgba(212, 175, 55, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.5);
    background: linear-gradient(
        135deg,
        var(--renaissance-gold) 0%,
        var(--quantum-cyan) 50%,
        var(--marble-white) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Removed titleGlow animation */

.goals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.goal-box {
    background:
        radial-gradient(circle at top left, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
        radial-gradient(circle at bottom right, rgba(0, 255, 240, 0.06) 0%, transparent 40%),
        linear-gradient(135deg, rgba(50, 50, 50, 0.95) 0%, rgba(35, 35, 35, 0.98) 100%);
    padding: 0.8rem;
    border: 2px solid rgba(212, 175, 55, 0.25);
    border-radius: 6px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: quantum-float 12s ease-in-out infinite;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.goal-box:nth-child(1) {
    animation-delay: 0s;
    animation-duration: 10s;
}

.goal-box:nth-child(2) {
    animation-delay: 2s;
    animation-duration: 11s;
}

.goal-box:nth-child(3) {
    animation-delay: 4s;
    animation-duration: 12s;
}

.goal-box:nth-child(4) {
    animation-delay: 6s;
    animation-duration: 10.5s;
}

@keyframes quantum-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.1), 0 0 20px rgba(0, 255, 240, 0.05);
    }
    25% {
        transform: translate(0, -3px) scale(1.005);
        box-shadow: 0 6px 20px rgba(0, 255, 240, 0.15), 0 0 25px rgba(212, 175, 55, 0.08);
    }
    50% {
        transform: translate(0, 0) scale(1);
        box-shadow: 0 4px 15px rgba(157, 0, 255, 0.12), 0 0 22px rgba(0, 255, 240, 0.06);
    }
    75% {
        transform: translate(0, -2px) scale(1.003);
        box-shadow: 0 5px 18px rgba(212, 175, 55, 0.12), 0 0 24px rgba(157, 0, 255, 0.07);
    }
}

.goal-box:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow:
        0 12px 35px rgba(212, 175, 55, 0.3),
        0 0 40px rgba(0, 255, 240, 0.2),
        inset 0 0 30px rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.5);
    background:
        radial-gradient(circle at top left, rgba(212, 175, 55, 0.15) 0%, transparent 40%),
        radial-gradient(circle at bottom right, rgba(0, 255, 240, 0.12) 0%, transparent 40%),
        linear-gradient(135deg, rgba(55, 55, 55, 0.95) 0%, rgba(40, 40, 40, 0.98) 100%);
}

.goal-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 255, 240, 0.04) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    border-radius: 6px;
}

.goal-box:hover::before {
    opacity: 1;
}

/* Quantum particle effect for goal boxes */
.goal-box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(0, 255, 240, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: quantum-particle 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    box-shadow:
        0 0 10px rgba(0, 255, 240, 0.5),
        0 0 20px rgba(212, 175, 55, 0.3);
}

.goal-box:nth-child(1)::after {
    animation-delay: 0s;
}

.goal-box:nth-child(2)::after {
    animation-delay: 2s;
}

.goal-box:nth-child(3)::after {
    animation-delay: 4s;
}

.goal-box:nth-child(4)::after {
    animation-delay: 6s;
}

@keyframes quantum-particle {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    20% {
        transform: translate(-20%, -80%) scale(1);
    }
    40% {
        transform: translate(60%, -40%) scale(0.8);
    }
    60% {
        transform: translate(30%, 70%) scale(1.2);
    }
    80% {
        transform: translate(-70%, 30%) scale(0.9);
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}

.goal-icon {
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
    display: block;
    text-align: center;
    animation: quantum-icon-pulse 4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.3));
    background: linear-gradient(
        135deg,
        var(--renaissance-gold) 0%,
        var(--quantum-cyan) 50%,
        var(--renaissance-gold) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

.goal-box:nth-child(1) .goal-icon {
    animation-delay: 0s;
}

.goal-box:nth-child(2) .goal-icon {
    animation-delay: 0.5s;
}

.goal-box:nth-child(3) .goal-icon {
    animation-delay: 1s;
}

.goal-box:nth-child(4) .goal-icon {
    animation-delay: 1.5s;
}

@keyframes quantum-icon-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.3));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 15px rgba(0, 255, 240, 0.5)) drop-shadow(0 0 25px rgba(212, 175, 55, 0.3));
    }
}

.goal-number {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: linear-gradient(
        90deg,
        var(--quantum-cyan) 0%,
        var(--renaissance-gold) 50%,
        var(--quantum-cyan) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    animation: quantum-number-glow 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes quantum-number-glow {
    0% {
        filter: drop-shadow(0 0 4px rgba(0, 255, 240, 0.4));
        opacity: 0.9;
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6)) drop-shadow(0 0 12px rgba(0, 255, 240, 0.4));
        opacity: 1;
    }
    100% {
        filter: drop-shadow(0 0 4px rgba(0, 255, 240, 0.4));
        opacity: 0.9;
    }
}

.goal-text {
    font-family: 'Theano Didot', serif;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--marble-white);
    font-weight: 400;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

/* Contact Section - Postmodern Renaissance Quantum Physics School */
.contact-section {
    background: linear-gradient(135deg, #0A0E27 0%, #1A1F3A 50%, #2D1B4E 100%);
    position: relative;
    overflow: hidden;
    padding: 3rem 0;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 75% 75%, rgba(0, 255, 240, 0.08) 0%, transparent 30%),
        linear-gradient(45deg, transparent 48%, rgba(157, 0, 255, 0.03) 49%, rgba(157, 0, 255, 0.03) 51%, transparent 52%);
    background-size: 40px 40px, 60px 60px, 15px 15px;
    pointer-events: none;
}

.contact-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(212, 175, 55, 0.05) 2px, rgba(212, 175, 55, 0.05) 4px),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 240, 0.05) 2px, rgba(0, 255, 240, 0.05) 4px);
    pointer-events: none;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-info {
    text-align: left;
    background: rgba(26, 31, 58, 0.9);
    padding: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(212, 175, 55, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.contact-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(0, 255, 240, 0.03));
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-info:hover::before {
    opacity: 1;
}

.contact-info:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.contact-info h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #D4AF37;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-renaissance);
    position: relative;
}

.contact-info h3::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 20px;
    height: 1px;
    background: linear-gradient(90deg, #D4AF37, #00FFF0);
}

.contact-item {
    margin-bottom: 1rem;
    padding: 0.8rem;
    background: rgba(10, 14, 39, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 6px;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.contact-item:hover {
    background: rgba(10, 14, 39, 0.8);
    transform: translateX(5px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.1);
}

.contact-item h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: #D4AF37;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-quantum);
}

.contact-item p {
    color: #E0E0E0;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
}

.contact-form {
    background: rgba(26, 31, 58, 0.95);
    padding: 3rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 
        0 8px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
    max-width: 600px;
    margin: 0 auto;
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(157, 0, 255, 0.05), rgba(0, 255, 240, 0.03));
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-form:hover::before {
    opacity: 1;
}

.contact-form:hover {
    transform: translateY(-3px);
    border-color: rgba(157, 0, 255, 0.5);
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(157, 0, 255, 0.2);
}

.form-group {
    margin-bottom: 1rem;
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1.2rem 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(10, 14, 39, 0.8);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: #E0E0E0;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
    min-height: 56px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00FFF0;
    background: rgba(10, 14, 39, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 255, 240, 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(176, 176, 176, 0.8);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
}

.submit-btn {
    background: #ffffff;
    color: #0A0E27;
    padding: 1.2rem 3rem;
    border: 2px solid #ffffff;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    min-height: 60px;
    width: 100%;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    background: #f8f9fa;
    border-color: #e9ecef;
}

.submit-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    background: #e9ecef;
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Success animation after form submission */
.submit-btn.success {
    background: linear-gradient(135deg, #00FF94 0%, #4CAF50 100%);
    animation: successPulse 0.4s ease-in-out;
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Ideation Section - Postmodern Quantum Physics School */
.ideation-section {
    background: linear-gradient(135deg, #0A0E27 0%, #1A1F3A 50%, #2D1B4E 100%);
    color: #E0E0E0;
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
}

.ideation-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(0, 255, 240, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(157, 0, 255, 0.08) 0%, transparent 40%),
        linear-gradient(45deg, transparent 48%, rgba(212, 175, 55, 0.03) 49%, rgba(212, 175, 55, 0.03) 51%, transparent 52%);
    background-size: 60px 60px, 80px 80px, 20px 20px;
    pointer-events: none;
}

.ideation-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 255, 240, 0.05) 2px, rgba(0, 255, 240, 0.05) 4px),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(157, 0, 255, 0.05) 2px, rgba(157, 0, 255, 0.05) 4px);
    pointer-events: none;
}

.ideation-section h2 {
    font-family: var(--font-quantum);
    font-size: 2rem;
    font-weight: 700;
    color: #00FFF0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 20px rgba(0, 255, 240, 0.3);
}

.ideation-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Ideation Section - 12 Column Grid System */
.ideation-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    align-items: start;
    margin: 2rem 0;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.ideation-layout::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(0, 255, 240, 0.4) 20%, 
        rgba(157, 0, 255, 0.6) 50%, 
        rgba(0, 255, 240, 0.4) 80%, 
        transparent 100%);
    transform: translateX(-50%);
    z-index: 1;
    border-radius: 1px;
}

/* Left Section - Alpasca Journey (6 columns) */
.ideation-left-column {
    grid-column: 1 / 7; /* Takes columns 1-6 */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-right: 1rem;
    position: relative;
    z-index: 2;
}

/* Right Section - Courses Carousel (6 columns) */
.ideation-right-column {
    grid-column: 7 / 13; /* Takes columns 7-12 */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-left: 1rem;
    position: relative;
    z-index: 2;
}

/* Alpasca Journey Section - 6 Columns */
.journey-intro {
    background: rgba(26, 31, 58, 0.9);
    padding: 2rem;
    border: 1px solid rgba(0, 255, 240, 0.4);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.journey-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00FFF0, #9D00FF, #D4AF37);
}

.journey-intro h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #D4AF37;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.journey-intro p {
    color: #E0E0E0;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

.journey-stages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 2;
    flex: 1;
}

.stage-accordion {
    background: rgba(26, 31, 58, 0.8);
    border: 1px solid rgba(0, 255, 240, 0.3);
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    margin-bottom: 1rem;
}

.stage-accordion:hover {
    border-color: rgba(0, 255, 240, 0.5);
    box-shadow: 0 6px 25px rgba(0, 255, 240, 0.2);
}

.stage-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.stage-header:hover {
    background: rgba(0, 255, 240, 0.05);
}

.stage-number {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #D4AF37, #9D00FF);
    color: #0A0E27;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.stage-header h4 {
    color: #00FFF0;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.accordion-arrow {
    color: #00FFF0;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.stage-accordion.active .accordion-arrow {
    transform: rotate(180deg);
}

.stage-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(10, 14, 39, 0.6);
}

.stage-content.active {
    max-height: 200px;
}

.stage-content p {
    padding: 1rem;
    color: #E0E0E0;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Initial state for first accordion */
.stage-accordion.active .stage-content {
    max-height: 200px;
}

.stage-content p {
    padding: 0.8rem 1.2rem 1.2rem 1.2rem;
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: #d0d0d0;
    line-height: 1.4;
    font-size: 0.85rem;
    font-weight: 400;
    text-align: left;
}

.accordion-arrow {
    margin-left: auto;
    font-size: 0.8rem;
    color: #ccc;
    transition: transform 0.3s ease;
}

.stage-accordion.active .accordion-arrow {
    transform: rotate(180deg);
}

.stage-card:nth-child(1) {
    animation-delay: 0s;
    animation-duration: 12s;
}

.stage-card:nth-child(2) {
    animation-delay: 3s;
    animation-duration: 13s;
}

.stage-card:nth-child(3) {
    animation-delay: 6s;
    animation-duration: 14s;
}

.stage-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #666, #888, #666);
    z-index: -1;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    transition: all 0.3s ease;
}

.stage-card:hover {
    transform: translateY(-8px) scale(1.02) rotate(1deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: #777;
}

.stage-card:hover::before {
    background: linear-gradient(45deg, #777, #999, #777);
}

.stage-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #666, #888);
    color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Audiowide', cursive;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid #555;
    transition: all 0.3s ease;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    flex-shrink: 0;
}

.stage-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 5px 20px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(100, 100, 100, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.stage-card:hover .stage-number {
    transform: scale(1.05);
    background: linear-gradient(135deg, #777, #999);
    border-color: #888;
}

.stage-header h4 {
    font-family: 'Tourney', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stage-content p {
    font-family: 'Inter', sans-serif;
    color: #d0d0d0;
    line-height: 1.4;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.journey-guidance {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 50%, #000 100%);
    padding: 1.2rem;
    border: 2px solid #fff;
    text-align: left;
    position: relative;
    z-index: 2;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    box-shadow: 
        0 3px 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.journey-guidance::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #fff, #ccc, #fff);
    z-index: -1;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.journey-guidance:hover::before {
    opacity: 1;
}

.guidance-content p {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: #ccc;
    line-height: 1.4;
    margin-bottom: 0.6rem;
    font-weight: 400;
}

.cta-section {
    text-align: center;
    background: rgba(26, 31, 58, 0.9);
    padding: 2rem;
    border: 1px solid rgba(0, 255, 240, 0.3);
    border-radius: 12px;
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 3rem auto 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, #fff, #ccc, #fff);
    z-index: -1;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cta-section:hover::before {
    opacity: 1;
}

.cta-section:hover h3 {
    color: #000;
    text-shadow: 
        0 0 8px rgba(0, 0, 0, 0.8),
        0 0 16px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
}

.cta-section:hover p {
    color: #333;
    transition: all 0.3s ease;
}

.cta-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #D4AF37;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3;
}

.cta-section p {
    color: #E0E0E0;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

/* Bold Minimalistic CTA Button */
.join-btn {
    background: #00FFF0;
    color: #0A0E27;
    padding: 1rem 2rem;
    border: 2px solid #00FFF0;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: none;
}

.join-btn:hover {
    background: #0A0E27;
    color: #00FFF0;
    border-color: #00FFF0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 240, 0.3);
}

/* Clean minimalistic button - no pseudo-elements needed */

/* Clean minimalistic button - no complex effects */

/* Course Cards Section - Sharp Squares Style */
/* Right Column - Courses Section */
.ideation-right-column h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #D4AF37;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    position: relative;
    padding: 1rem 0;
}

.ideation-right-column h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #00FFF0, #9D00FF, #D4AF37);
    border-radius: 1px;
}

/* Courses Carousel - 6 Columns */
.course-scroll-container {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(157, 0, 255, 0.4) rgba(10, 14, 39, 0.2);
    flex: 1;
    min-height: 400px;
}

.course-scroll-container::-webkit-scrollbar {
    height: 8px;
}

.course-scroll-container::-webkit-scrollbar-track {
    background: rgba(10, 14, 39, 0.2);
    border-radius: 4px;
}

.course-scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #D4AF37, #9D00FF);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.course-scroll-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #D4AF37, #9D00FF, #00FFF0);
}

/* Program Boxes - Consistent Size and Height */
.course-scroll-container .course-card {
    background: rgba(26, 31, 58, 0.9);
    border: 1px solid rgba(157, 0, 255, 0.3);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    height: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.course-scroll-container .course-card:hover {
    border-color: rgba(157, 0, 255, 0.6);
    box-shadow: 0 8px 30px rgba(157, 0, 255, 0.3);
    transform: translateY(-3px);
}

/* Program Box Image Placeholders - Increased Height */
.course-scroll-container .course-image {
    height: 120px;
    background: rgba(10, 14, 39, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(157, 0, 255, 0.2);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.course-scroll-container .course-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 255, 240, 0.1), rgba(157, 0, 255, 0.1));
    opacity: 0.3;
}

.course-scroll-container .course-logo {
    width: 50px;
    height: 50px;
    filter: brightness(0.9);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.course-scroll-container .course-card:hover .course-logo {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.course-icon {
    font-size: 2.5rem;
    filter: grayscale(100%) brightness(0.7);
    color: #888;
    transition: transform 0.3s ease;
}


/* Program Box Content - Optimized for Consistent Size */
.course-scroll-container .course-content {
    padding: 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.course-scroll-container .course-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #00FFF0;
    margin-bottom: 0.6rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-scroll-container .course-content p {
    color: #E0E0E0;
    line-height: 1.4;
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
    font-weight: 400;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bold Minimalistic Square Buttons */
.course-scroll-container .course-btn {
    background: #00FFF0;
    color: #0A0E27;
    padding: 0.8rem 1.5rem;
    border: 2px solid #00FFF0;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    position: relative;
    margin-top: auto;
    box-shadow: none;
}

.course-scroll-container .course-btn:hover {
    background: #0A0E27;
    color: #00FFF0;
    border-color: #00FFF0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 240, 0.3);
}

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

.course-btn::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #444, #666, #444);
    z-index: -1;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    transition: all 0.3s ease;
}

.course-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #777 0%, #999 50%, #aaa 100%);
}

.course-btn:hover::before {
    left: 100%;
}

.course-btn:hover::after {
    background: linear-gradient(45deg, #555, #777, #555);
}

.course-btn:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
}

/* Medium screens (1024px and below) */
@media (max-width: 1024px) {
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Global mobile improvements */
    * {
        box-sizing: border-box;
    }

    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }


    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: linear-gradient(135deg, 
            rgba(10, 14, 39, 0.95) 0%,
            rgba(20, 25, 50, 0.98) 25%,
            rgba(30, 35, 60, 0.95) 50%,
            rgba(15, 20, 45, 0.98) 75%,
            rgba(5, 10, 35, 0.95) 100%);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        width: 100%;
        text-align: center;
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        padding: 4rem 0 2rem 0;
        box-shadow: 
            0 0 50px rgba(0, 255, 240, 0.3),
            0 0 100px rgba(138, 43, 226, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border-top: 2px solid transparent;
        border-image: linear-gradient(90deg, 
            rgba(0, 255, 240, 0.8) 0%,
            rgba(138, 43, 226, 0.8) 50%,
            rgba(0, 255, 240, 0.8) 100%) 1;
        z-index: 999;
        overflow: hidden;
    }

    .nav-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent 0%,
            rgba(0, 255, 240, 1) 25%,
            rgba(138, 43, 226, 1) 50%,
            rgba(0, 255, 240, 1) 75%,
            transparent 100%);
        animation: quantum-scan 3s ease-in-out infinite;
    }

    @keyframes quantum-scan {
        0% { left: -100%; }
        100% { left: 100%; }
    }

    .nav-menu.active {
        left: 0;
        transform: translateX(0);
    }

    .nav-menu.active::before {
        animation: quantum-scan 2s ease-in-out infinite;
    }

    .nav-link {
        color: rgba(255, 255, 255, 0.9);
        padding: 1.5rem 2rem;
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border-bottom: 1px solid rgba(0, 255, 240, 0.1);
        position: relative;
        font-family: 'Audiowide', cursive;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-shadow: 0 0 10px rgba(0, 255, 240, 0.3);
        overflow: hidden;
    }

    .nav-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
            transparent 0%,
            rgba(0, 255, 240, 0.1) 50%,
            transparent 100%);
        transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .nav-link::after {
        content: '◊';
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(0, 255, 240, 0.6);
        font-size: 0.8rem;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .nav-link:last-child {
        border-bottom: none;
    }

    .nav-link:hover {
        background: linear-gradient(135deg, 
            rgba(0, 255, 240, 0.1) 0%,
            rgba(138, 43, 226, 0.1) 100%);
        color: rgba(0, 255, 240, 1);
        transform: translateX(15px) scale(1.02);
        text-shadow: 0 0 20px rgba(0, 255, 240, 0.8);
        box-shadow: inset 0 0 20px rgba(0, 255, 240, 0.1);
    }

    .nav-link:hover::before {
        left: 100%;
    }

    .nav-link:hover::after {
        opacity: 1;
        color: rgba(0, 255, 240, 1);
        text-shadow: 0 0 10px rgba(0, 255, 240, 0.8);
    }

    .nav-link.active {
        background: linear-gradient(135deg, 
            rgba(0, 255, 240, 0.15) 0%,
            rgba(138, 43, 226, 0.15) 50%,
            rgba(0, 255, 240, 0.15) 100%);
        color: rgba(0, 255, 240, 1);
        font-weight: 700;
        text-shadow: 
            0 0 20px rgba(0, 255, 240, 1),
            0 0 40px rgba(0, 255, 240, 0.6);
        text-decoration: line-through;
        text-decoration-color: rgba(0, 255, 240, 0.8);
        text-decoration-thickness: 3px;
        text-decoration-style: wavy;
        transform: translateX(15px) scale(1.02);
        position: relative;
        overflow: hidden;
    }

    .nav-link.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
            transparent 0%,
            rgba(0, 255, 240, 0.3) 25%,
            rgba(138, 43, 226, 0.3) 50%,
            rgba(0, 255, 240, 0.3) 75%,
            transparent 100%);
        animation: quantum-pulse 2s ease-in-out infinite;
    }

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

    .nav-link.active::after {
        opacity: 1;
        color: rgba(0, 255, 240, 1);
        text-shadow: 0 0 20px rgba(0, 255, 240, 1);
        animation: quantum-glow 1.5s ease-in-out infinite alternate;
    }

    @keyframes quantum-glow {
        0% { 
            color: rgba(0, 255, 240, 1);
            text-shadow: 0 0 20px rgba(0, 255, 240, 1);
        }
        100% { 
            color: rgba(138, 43, 226, 1);
            text-shadow: 0 0 25px rgba(138, 43, 226, 1);
        }
    }

    .navbar.scrolled .nav-link {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
        text-shadow: 0 0 8px rgba(0, 255, 240, 0.4);
        font-family: 'Audiowide', cursive;
        text-transform: uppercase;
    }

    .navbar.scrolled .nav-link:hover {
        color: rgba(0, 255, 240, 1);
        text-shadow: 0 0 20px rgba(0, 255, 240, 0.8);
        transform: translateX(15px) scale(1.02);
    }

    .navbar.scrolled .nav-link.active {
        color: rgba(0, 255, 240, 1);
        font-weight: 700;
        text-shadow: 
            0 0 20px rgba(0, 255, 240, 1),
            0 0 40px rgba(0, 255, 240, 0.6);
        background: linear-gradient(135deg, 
            rgba(0, 255, 240, 0.15) 0%,
            rgba(138, 43, 226, 0.15) 100%);
        text-decoration: line-through;
        text-decoration-color: rgba(0, 255, 240, 0.8);
        text-decoration-thickness: 3px;
        text-decoration-style: wavy;
        transform: translateX(15px) scale(1.02);
    }

    .navbar.scrolled .logo-img {
        filter: drop-shadow(0 0 15px rgba(0, 255, 240, 0.6)) brightness(1.2);
    }

    .navbar.scrolled .logo-img:hover {
        filter: drop-shadow(0 0 25px rgba(0, 255, 240, 0.8)) brightness(1.3);
    }

    .logo-img {
        height: 70px;
        filter: drop-shadow(0 0 15px rgba(0, 255, 240, 0.6));
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .logo-img:hover {
        filter: drop-shadow(0 0 20px rgba(0, 255, 240, 0.8)) brightness(1.2);
        transform: scale(1.05) rotate(5deg);
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        padding: 8px;
        border-radius: 8px;
        background: linear-gradient(135deg, 
            rgba(0, 255, 240, 0.1) 0%,
            rgba(138, 43, 226, 0.1) 100%);
        border: 1px solid rgba(0, 255, 240, 0.3);
        position: relative;
        overflow: hidden;
    }

    .hamburger::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
            transparent 0%,
            rgba(0, 255, 240, 0.2) 50%,
            transparent 100%);
        transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .hamburger:hover {
        transform: scale(1.1) rotate(5deg);
        background: linear-gradient(135deg, 
            rgba(0, 255, 240, 0.2) 0%,
            rgba(138, 43, 226, 0.2) 100%);
        border-color: rgba(0, 255, 240, 0.6);
        box-shadow: 0 0 20px rgba(0, 255, 240, 0.3);
    }

    .hamburger:hover::before {
        left: 100%;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
        transform: scale(0);
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        background: linear-gradient(90deg, 
            rgba(0, 255, 240, 1) 0%,
            rgba(138, 43, 226, 1) 100%);
        box-shadow: 0 0 10px rgba(0, 255, 240, 0.6);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
        background: linear-gradient(90deg, 
            rgba(0, 255, 240, 1) 0%,
            rgba(138, 43, 226, 1) 100%);
        box-shadow: 0 0 10px rgba(0, 255, 240, 0.6);
    }

    .bar {
        width: 28px;
        height: 3px;
        background: linear-gradient(90deg, 
            rgba(0, 255, 240, 0.8) 0%,
            rgba(138, 43, 226, 0.8) 100%);
        margin: 3px 0;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border-radius: 2px;
        box-shadow: 0 0 5px rgba(0, 255, 240, 0.3);
    }

    .navbar.scrolled .bar {
        background: linear-gradient(90deg, 
            rgba(0, 255, 240, 0.9) 0%,
            rgba(138, 43, 226, 0.9) 100%);
        box-shadow: 0 0 8px rgba(0, 255, 240, 0.5);
    }


    /* Mobile Hero Logo */
    .hero-logo {
        margin-bottom: 0.5rem;
        flex-shrink: 0;
    }

    .hero-logo-img {
        height: 60px;
    }

    /* Mobile Hero Slider */
    .hero-slider {
        width: 100%;
        max-width: 100%;
        margin: 0;
        flex: 1;
        min-height: 0;
    }

    .slider-container {
        min-height: 120px;
        max-height: 200px;
        border-radius: 12px;
    }

    .slider-slide {
        padding: 1.5rem 1rem;
    }

    .slider-slide p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .slider-indicators {
        margin-top: 0.8rem;
        gap: 0.6rem;
    }

    .indicator {
        width: 8px;
        height: 8px;
    }

    /* Mobile Typing Text */
    .typing-text {
        font-size: 0.9rem;
        padding: 1.5rem 1rem;
        padding-top: 5.5rem;
        min-height: 200px;
        max-height: none;
        border-radius: 12px;
        line-height: 1.4;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        flex-shrink: 0;
        overflow: visible;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    }

    .cursor {
        font-size: 1rem;
    }

    .section h2 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
        line-height: 1.3;
        text-align: center;
        padding: 0 1rem;
    }

    /* Mobile Navigation Improvements */
    .nav-container {
        padding: 0 1.5rem;
        height: 80px;
        background: linear-gradient(135deg, 
            rgba(10, 14, 39, 0.9) 0%,
            rgba(20, 25, 50, 0.95) 100%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 255, 240, 0.2);
        box-shadow: 0 2px 20px rgba(0, 255, 240, 0.1);
    }

    .nav-logo {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .logo-img {
        height: 45px;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        filter: drop-shadow(0 0 10px rgba(0, 255, 240, 0.4));
    }

    /* Mobile Section Improvements */
    .section {
        padding: 4rem 1rem;
        min-height: auto;
        overflow-x: hidden;
    }

    .container {
        padding: 0 0.5rem;
        max-width: 100%;
        width: 100%;
    }

    .section-content {
        width: 100%;
        max-width: 100%;
        padding: 0 0.5rem;
    }

    /* Mobile About Section */
    .about-split-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 0 0.5rem;
    }

    .about-text-content {
        order: 1;
        text-align: center;
        width: 100%;
        padding: 0;
        margin-bottom: 1rem;
    }

    .about-visual {
        order: 2;
        height: 220px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0.5rem 0;
    }

    .glowing-illustration {
        width: 200px;
        height: 200px;
    }

    .light-orb {
        width: 80px;
        height: 80px;
    }

    .light-orb::before {
        width: 40px;
        height: 40px;
    }

    .orb-logo {
        width: 35px;
        height: 35px;
    }

    .dot-logo {
        width: 10px;
        height: 10px;
    }

    .wave-1 {
        width: 150px;
        height: 150px;
    }

    .wave-2 {
        width: 180px;
        height: 180px;
    }

    .wave-3 {
        width: 210px;
        height: 210px;
    }

    /* Mobile Developers Section */
    .developers-grid {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        margin-top: 2rem;
        width: max-content;
        min-width: 100%;
        align-items: stretch;
        padding: 0 1rem;
    }

    .developer-card {
        padding: 1.2rem;
        margin: 0;
        max-width: 280px;
        min-width: 260px;
        width: 260px;
        text-align: left;
        box-sizing: border-box;
        min-height: 320px;
        flex-shrink: 0;
    }

    .developer-avatar {
        width: 60px;
        height: 60px;
        margin: 0 0 1rem 0;
    }

    .avatar-logo {
        width: 35px;
        height: 35px;
    }

    .developer-card h3 {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }

    .developer-title {
        font-size: 0.85rem;
        margin-bottom: 0.8rem;
    }

    .projects-list {
        text-align: left;
        margin-top: 1rem;
    }

    .projects-list h4 {
        font-size: 0.85rem;
        margin-bottom: 0.6rem;
    }

    .projects-list li {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-bottom: 0.4rem;
    }

    /* Mobile Course Cards */
    .course-cards {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-top: 2rem;
        width: 100%;
        max-width: 100%;
        align-items: center;
    }

    .course-card {
        padding: 2.5rem 2rem;
        margin: 0 auto;
        max-width: 400px;
    }

    .course-image {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .course-logo {
        width: 50px;
        height: 50px;
    }

    .course-content {
        padding: 2rem 1.5rem;
    }

    .course-content h4 {
        font-size: 1.3rem;
        margin-bottom: 1.2rem;
        line-height: 1.3;
    }

    .course-content p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .course-btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        width: 100%;
    }

    /* Mobile Timeline */
    .timeline {
        margin-top: 1.5rem;
        width: 100%;
        max-width: 100%;
    }

    .timeline::before {
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
    }

    .timeline-item {
        margin-bottom: 1.2rem;
        width: 100%;
        max-width: 100%;
    }

    .timeline-year {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
        min-width: 45px;
        margin: 0 0.8rem;
    }

    .timeline-content {
        max-width: 280px;
        padding: 0.8rem;
        font-size: 0.7rem;
    }

    .timeline-content h3 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .timeline-content h4 {
        font-size: 0.8rem;
        margin: 0.6rem 0 0.4rem 0;
    }

    .timeline-content p {
        font-size: 0.7rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }

    /* Mobile Renaissance Quantum Physics School */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 1.5rem;
        width: 100%;
        max-width: 100%;
    }

    .contact-info {
        text-align: center;
        margin-bottom: 1.5rem;
        width: 100%;
        padding: 1rem;
    }

    .contact-info h3 {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }

    .contact-item {
        margin-bottom: 0.8rem;
        padding: 0.6rem;
        width: 100%;
        box-sizing: border-box;
    }

    .contact-item h4 {
        font-size: 0.7rem;
        margin-bottom: 0.3rem;
    }

    .contact-item p {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .contact-form {
        padding: 1rem;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

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

    .form-group input,
    .form-group textarea {
        padding: 0.5rem 0.6rem;
        font-size: 0.7rem;
        width: 100%;
        box-sizing: border-box;
    }

    .submit-btn {
        padding: 0.5rem 1rem;
        font-size: 0.7rem;
        width: 100%;
        box-sizing: border-box;
    }

    .section p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    /* Improve text readability on mobile */
    .about-intro p,
    .main-project p,
    .timeline-content p,
    .scholar p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    /* Better spacing for mobile lists */
    .projects-list li,
    .goals-section li {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 0.8rem;
    }

    /* Improve mobile headings */
    .main-project h3,
    .developer-card h3,
    .timeline-content h3 {
        font-size: 1.3rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .developer-title,
    .developer-role {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* About Section Mobile */
    .about-split-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        min-height: auto;
    }

    .about-text-content {
        animation: fade-in-up 1s ease-out 0.5s forwards;
        transform: translateY(30px);
    }

    .about-visual {
        animation: fade-in-up 1s ease-out 0.8s forwards;
        transform: translateY(30px);
        height: 300px;
    }

    .glowing-illustration {
        width: 250px;
        height: 250px;
    }

    .light-orb {
        width: 80px;
        height: 80px;
    }

    .light-orb::before {
        width: 40px;
        height: 40px;
    }

    .wave-1 {
        width: 150px;
        height: 150px;
    }

    .wave-2 {
        width: 200px;
        height: 200px;
    }

    .wave-3 {
        width: 250px;
        height: 250px;
    }

    .about-intro p {
        font-size: 0.95rem;
        text-align: center;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .main-project {
        padding: 1rem;
        margin: 0.8rem 0;
    }

    .main-project h3 {
        font-size: 1.1rem;
        text-align: center;
        margin-bottom: 0.6rem;
    }

    .main-project p {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 0.6rem;
    }

    /* Book Showcase Mobile */
    .book-showcase {
        margin-top: 1.5rem;
        padding: 1rem;
    }

    .book-showcase h4 {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }

    .books-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .book-cover {
        width: 50px;
        height: 65px;
    }

    .book-spine {
        width: 5px;
    }

    .book-pages {
        left: 5px;
        width: 45px;
    }

    .book-info h5 {
        font-size: 0.75rem;
        line-height: 1.2;
    }

    .book-info p {
        font-size: 0.65rem;
        line-height: 1.3;
    }

    /* Logo Elements Mobile */
    .orb-logo {
        width: 30px;
        height: 30px;
    }

    .dot-logo {
        width: 8px;
        height: 8px;
    }

    .avatar-logo {
        width: 40px;
        height: 40px;
    }

    .course-logo {
        width: 50px;
        height: 50px;
    }

    /* Developers Section Mobile */
    .developers-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .developer-card {
        padding: 1rem;
        min-height: 260px;
        max-width: 300px;
    }

    .developer-avatar {
        width: 55px;
        height: 55px;
    }

    .avatar-initial {
        font-size: 1.2rem;
    }

    .developer-card h3 {
        font-size: 0.95rem;
    }

    .developer-title {
        font-size: 0.8rem;
    }

    .projects-list h4 {
        font-size: 0.8rem;
    }

    .projects-list li {
        font-size: 0.7rem;
    }

    /* History Section Mobile */
    .timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .timeline-item {
        margin-bottom: 1rem;
    }

    .timeline-year {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
        min-width: 40px;
        margin: 0 0.6rem;
    }

    .timeline-content {
        max-width: 250px;
        padding: 0.7rem;
    }

    .timeline-content h3 {
        font-size: 0.85rem;
    }

    .timeline-content h4 {
        font-size: 0.75rem;
    }

    .scholar {
        padding: 1.2rem;
    }

    .scholar h4 {
        font-size: 1rem;
    }

    .highlight-message {
        padding: 1.2rem;
        font-size: 0.95rem;
    }

    .goals-section {
        padding: 2rem 1rem;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    }

    .goals-section h3 {
        font-size: 1.5rem;
        letter-spacing: 2px;
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.8),
            4px 4px 8px rgba(0, 0, 0, 0.6),
            6px 6px 12px rgba(0, 0, 0, 0.4);
    }

    .goals-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    .goal-box {
        padding: 0.7rem;
        border-radius: 6px;
        min-height: 130px;
    }

    .goal-icon {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }

    .goal-text {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .goal-number {
        font-size: 0.7rem;
        margin-bottom: 0.4rem;
    }

    /* Very small screens - maintain 2x2 layout */
    @media (max-width: 480px) {
        .goals-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.6rem;
        }

        .goal-box {
            padding: 0.6rem;
            min-height: 120px;
            border-radius: 6px;
        }

        .goal-icon {
            font-size: 1.2rem;
            margin-bottom: 0.4rem;
        }

        .goal-text {
            font-size: 0.7rem;
        }

        .goal-number {
            font-size: 0.65rem;
            margin-bottom: 0.3rem;
        }
    }

    /* Contact Section Mobile */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    /* Ideation Section Mobile */
    .ideation-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .journey-stages {
        gap: 1.5rem;
    }

    .stage-accordion {
        margin-bottom: 0.6rem;
    }
    
    .stage-header {
        padding: 1rem;
    }
    
    .stage-content p {
        padding: 0.6rem 1rem 1rem 1rem;
        font-size: 0.8rem;
        text-align: left;
    }

    .stage-number {
        width: 45px;
        height: 50px;
        font-size: 1.5rem;
    }

    .stage-content h4 {
        font-size: 1.3rem;
    }

    .stage-content p {
        font-size: 1rem;
    }

    .journey-intro {
        padding: 1rem;
        max-width: 350px;
        clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    }

    .journey-intro h3 {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    .journey-intro p {
        font-size: 0.65rem;
    }

    .journey-guidance-text p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .cta-section {
        padding: 2rem;
        max-width: 450px;
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    }

    .cta-section h3 {
        font-size: 1.2rem;
        letter-spacing: 2px;
    }

    .cta-section p {
        font-size: 0.7rem;
    }

    .join-btn {
        padding: 1.2rem 2.5rem;
        font-size: 1rem;
        clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    }

    /* Course Cards Mobile */
    .course-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .course-cards-section h3 {
        font-size: 1.8rem;
    }

    .course-card {
        margin-bottom: 1rem;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    }

    .course-image {
        height: 100px;
    }

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

    .course-content {
        padding: 2rem;
    }

    .course-content h4 {
        font-size: 1.2rem;
    }

    .course-content p {
        font-size: 0.95rem;
    }

    .course-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
    }

    /* Mobile Ideation Section - Fixed Width Issues */
    .ideation-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 1.5rem 0;
        width: 100%;
        max-width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* Ensure container doesn't exceed screen width */
    .ideation-content {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .ideation-layout::before {
        display: none; /* Hide separator line on mobile */
    }

    .ideation-left-column {
        grid-column: 1 / -1; /* Take full width on mobile */
        order: 1;
        padding-right: 0;
        padding-bottom: 1rem;
        border-bottom: 2px solid rgba(0, 255, 240, 0.3);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .ideation-right-column {
        grid-column: 1 / -1; /* Take full width on mobile */
        order: 2;
        padding-left: 0;
        padding-top: 1rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .journey-intro {
        padding: 1.2rem;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .journey-intro h3 {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }

    .journey-intro p {
        font-size: 0.85rem;
        line-height: 1.4;
        margin-bottom: 0.6rem;
    }

    .stage-accordion {
        margin-bottom: 0.8rem;
    }

    .stage-header {
        padding: 0.8rem;
    }

    .stage-number {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
    }

    .stage-header h4 {
        font-size: 0.9rem;
    }

    .stage-content p {
        padding: 0.8rem;
        font-size: 0.8rem;
    }

    .ideation-right-column h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    /* Mobile Program Boxes - Fixed Width Issues */
    .course-scroll-container {
        gap: 0.8rem;
        padding: 0.8rem 0;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    /* Ensure right column doesn't exceed width */
    .ideation-right-column {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .course-scroll-container .course-card {
        width: 240px;
        min-width: 240px;
        max-width: 240px;
        height: 280px;
        flex-shrink: 0;
    }

    .course-scroll-container .course-image {
        height: 100px;
    }

    .course-scroll-container .course-logo {
        width: 40px;
        height: 40px;
    }

    .course-scroll-container .course-content {
        padding: 1rem;
    }

    .course-scroll-container .course-content h4 {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .course-scroll-container .course-content p {
        font-size: 0.75rem;
        margin-bottom: 0.6rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .course-scroll-container .course-btn {
        padding: 0.6rem 1rem;
        font-size: 0.7rem;
        border: 2px solid #00FFF0;
        border-radius: 0;
        font-weight: 700;
    }

    /* Medium Mobile Devices (481px - 600px) */
    @media (max-width: 600px) and (min-width: 481px) {
        .ideation-layout {
            padding: 0 0.8rem;
        }

        .journey-intro {
            padding: 1.1rem;
        }

        .course-scroll-container .course-card {
            width: 250px;
            min-width: 250px;
            max-width: 250px;
            height: 290px;
        }
    }

    /* Small Mobile Devices (320px - 480px) */
    @media (max-width: 480px) {
        .ideation-layout {
            padding: 0 0.5rem;
            margin: 1rem 0;
        }

        .journey-intro {
            padding: 1rem;
        }

        .journey-intro h3 {
            font-size: 1rem;
        }

        .journey-intro p {
            font-size: 0.8rem;
        }

        .course-scroll-container {
            gap: 0.6rem;
            padding: 0.6rem 0;
        }

        .course-scroll-container .course-card {
            width: 220px;
            min-width: 220px;
            max-width: 220px;
            height: 260px;
        }

        .course-scroll-container .course-image {
            height: 80px;
        }

        .course-scroll-container .course-logo {
            width: 35px;
            height: 35px;
        }

        .course-scroll-container .course-content {
            padding: 0.8rem;
        }

        .course-scroll-container .course-content h4 {
            font-size: 0.8rem;
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }

        .course-scroll-container .course-content p {
            font-size: 0.7rem;
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }

        .course-scroll-container .course-btn {
            padding: 0.5rem 0.8rem;
            font-size: 0.65rem;
        }
    }

    /* Extra Small Mobile Devices (320px and below) */
    @media (max-width: 320px) {
        .ideation-layout {
            padding: 0 0.3rem;
            margin: 0.8rem 0;
        }

        .journey-intro {
            padding: 0.8rem;
        }

        .journey-intro h3 {
            font-size: 0.95rem;
        }

        .journey-intro p {
            font-size: 0.75rem;
        }

        .course-scroll-container {
            gap: 0.5rem;
            padding: 0.5rem 0;
        }

        .course-scroll-container .course-card {
            width: 200px;
            min-width: 200px;
            max-width: 200px;
            height: 240px;
        }

        .course-scroll-container .course-image {
            height: 70px;
        }

        .course-scroll-container .course-logo {
            width: 30px;
            height: 30px;
        }

        .course-scroll-container .course-content {
            padding: 0.7rem;
        }

        .course-scroll-container .course-content h4 {
            font-size: 0.75rem;
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }

        .course-scroll-container .course-content p {
            font-size: 0.65rem;
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }

        .course-scroll-container .course-btn {
            padding: 0.4rem 0.7rem;
            font-size: 0.6rem;
        }
    }

    .cta-section {
        padding: 1.5rem;
        margin: 2rem auto 0;
    }

    .cta-section h3 {
        font-size: 1.3rem;
    }

    .cta-section p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .join-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0 0.8rem;
        height: 75px;
        background: linear-gradient(135deg, 
            rgba(10, 14, 39, 0.95) 0%,
            rgba(20, 25, 50, 0.98) 100%);
    }

    .logo-img {
        height: 65px;
        filter: drop-shadow(0 0 12px rgba(0, 255, 240, 0.7));
    }

    .hamburger {
        width: 35px;
        height: 35px;
        padding: 6px;
    }

    .bar {
        width: 24px;
        height: 2.5px;
    }

    .nav-menu {
        padding: 3.5rem 0 2rem 0;
    }

    .nav-link {
        padding: 1.3rem 1.5rem;
        font-size: 0.8rem;
    }


    /* Extra Small Mobile Hero Logo */
    .hero-logo {
        margin-bottom: 0.3rem;
    }

    .hero-logo-img {
        height: 300px;
    }

    /* Extra Small Mobile Hero Slider */
    .hero-slider {
        margin: 0;
    }

    .slider-container {
        min-height: 100px;
        max-height: 150px;
        border-radius: 8px;
    }

    .slider-slide {
        padding: 1rem 0.8rem;
    }

    .slider-slide p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .slider-indicators {
        margin-top: 0.6rem;
        gap: 0.4rem;
    }

    .indicator {
        width: 4px;
        height: 4px;
    }

    /* Extra Small Mobile Typing Text */
    .typing-text {
        font-size: 0.8rem;
        padding: 1rem 0.8rem;
        padding-top: 5rem;
        min-height: 180px;
        max-height: none;
        border-radius: 8px;
        line-height: 1.4;
        margin: 0;
        overflow: visible;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    }

    .section {
        padding: 3rem 0.8rem;
    }

    .section h2 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
        padding: 0 0.5rem;
    }

    .static-quote {
        padding: 1.5rem 1rem;
        margin-bottom: 1rem;
    }

    .static-quote p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Extra small mobile quantum logo adjustments */
    .glowing-illustration {
        width: 280px;
        height: 280px;
    }

    .light-orb {
        width: 140px;
        height: 140px;
    }

    .orb-logo {
        width: 90px !important;
        height: 90px !important;
    }

    /* Adjust orbital rings for extra small screens */
    .consciousness-dots::before {
        width: 190px;
        height: 190px;
    }

    .consciousness-dots::after {
        width: 220px;
        height: 220px;
    }

    /* Reduce particles for smaller screens */
    .consciousness-dots .dot {
        width: 16px;
        height: 16px;
    }

    .consciousness-dots .dot::before {
        width: 10px;
        height: 10px;
    }

    .typing-text {
        font-size: 0.9rem;
        padding: 1.5rem 1rem;
        line-height: 1.4;
    }

    /* Extra Small Mobile Improvements */

    .static-quote,
    .typing-text {
        padding: 1.2rem 0.8rem;
        min-height: auto;
    }

    .section {
        padding: 2.5rem 0.5rem;
    }

    .container {
        padding: 0 0.3rem;
    }

    .nav-container {
        padding: 0 0.5rem;
    }

    .logo-img {
        height: 30px;
    }

    .section h2 {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
        padding: 0 0.3rem;
    }

    .about-visual {
        height: 160px;
        padding: 0.3rem 0;
    }

    .glowing-illustration {
        width: 140px;
        height: 140px;
    }

    .light-orb {
        width: 60px;
        height: 60px;
    }

    .light-orb::before {
        width: 30px;
        height: 30px;
    }

    .orb-logo {
        width: 20px;
        height: 20px;
    }

    .dot-logo {
        width: 6px;
        height: 6px;
    }

    .wave-1 {
        width: 120px;
        height: 120px;
    }

    .wave-2 {
        width: 140px;
        height: 140px;
    }

    .wave-3 {
        width: 160px;
        height: 160px;
    }

    .dot-logo {
        width: 5px;
        height: 5px;
    }

    .developer-card,
    .course-card {
        padding: 1rem;
        min-height: 240px;
        max-width: 280px;
    }

    .developer-avatar {
        width: 50px;
        height: 50px;
    }

    .avatar-logo {
        width: 25px;
        height: 25px;
    }

    .developer-card h3 {
        font-size: 0.9rem;
    }

    .developer-title {
        font-size: 0.75rem;
    }

    .projects-list h4 {
        font-size: 0.75rem;
    }

    .projects-list li {
        font-size: 0.65rem;
    }

    .course-logo {
        width: 35px;
        height: 35px;
    }

    .timeline-content {
        padding: 1rem 0.8rem;
    }

    .contact-form {
        padding: 1.5rem 1rem;
    }

    .timeline-item {
        margin-bottom: 0.8rem;
    }

    .timeline-year {
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
        min-width: 35px;
        margin: 0 0.5rem;
    }

    .journey-intro {
        padding: 1rem;
        max-width: 350px;
    }

    .journey-intro h3 {
        font-size: 0.9rem;
    }

    .journey-intro p {
        font-size: 0.7rem;
    }

    .cta-section {
        padding: 1.2rem;
        max-width: 400px;
    }

    .cta-section h3 {
        font-size: 1.2rem;
    }

    .cta-section p {
        font-size: 0.75rem;
    }

    .join-btn {
        padding: 0.9rem 1.8rem;
        font-size: 0.9rem;
    }
}

/* Medium Mobile (425px and below) */
@media (max-width: 425px) {
    /* Base improvements for medium mobile */
    body {
        font-size: 0.9rem;
    }


    .hero-logo-img {
        height: 180px;
    }



    /* Navigation improvements */
    .nav-container {
        padding: 0 0.5rem;
        height: 65px;
    }

    .logo-img {
        height: 30px;
    }

    /* Section improvements */
    .section {
        padding: 3rem 0.5rem;
    }

    .section h2 {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }

    /* About section */
    .about-visual {
        height: 180px;
    }

    .glowing-illustration {
        width: 150px;
        height: 150px;
    }

    .light-orb {
        width: 60px;
        height: 60px;
    }

    .light-orb::before {
        width: 30px;
        height: 30px;
    }

    .orb-logo {
        width: 25px;
        height: 25px;
    }

    .dot-logo {
        width: 6px;
        height: 6px;
    }

    .wave-1 {
        width: 120px;
        height: 120px;
    }

    .wave-2 {
        width: 150px;
        height: 150px;
    }

    .wave-3 {
        width: 180px;
        height: 180px;
    }

    .about-intro p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .main-project {
        padding: 1rem;
    }

    .main-project h3 {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }

    .main-project p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* Book showcase */
    .book-showcase {
        padding: 1rem;
    }

    .book-showcase h4 {
        font-size: 0.9rem;
        margin-bottom: 0.7rem;
    }

    .book-cover {
        width: 50px;
        height: 65px;
    }

    .book-spine {
        width: 5px;
    }

    .book-pages {
        left: 5px;
        width: 45px;
    }

    .book-info h5 {
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .book-info p {
        font-size: 0.6rem;
        line-height: 1.3;
    }

    /* Developers section */
    .developer-card {
        padding: 1rem;
        min-height: 220px;
        max-width: 280px;
    }

    .developer-avatar {
        width: 50px;
        height: 50px;
    }

    .avatar-logo {
        width: 25px;
        height: 25px;
    }

    .developer-card h3 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .developer-title {
        font-size: 0.8rem;
        margin-bottom: 0.7rem;
    }

    .projects-list h4 {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    .projects-list li {
        font-size: 0.7rem;
        line-height: 1.3;
        margin-bottom: 0.4rem;
    }

    /* History section */
    .timeline::before {
        left: 50%;
        width: 1px;
        transform: translateX(-50%);
    }

    .timeline-item {
        margin-bottom: 1rem;
    }

    .timeline-year {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
        min-width: 35px;
        margin: 0 0.5rem;
    }

    .timeline-content {
        max-width: 220px;
        padding: 0.6rem;
    }

    .timeline-content h3 {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    .timeline-content h4 {
        font-size: 0.7rem;
        margin: 0.5rem 0 0.3rem 0;
    }

    .timeline-content p {
        font-size: 0.65rem;
        line-height: 1.3;
        margin-bottom: 0.4rem;
    }

    .scholar {
        padding: 1rem;
        margin: 0.8rem 0;
    }

    .scholar h4 {
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
    }

    .scholar p {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .highlight-message {
        padding: 1rem;
        font-size: 0.8rem;
    }

    /* Goals section */
    .goals-section {
        padding: 2rem 0.8rem;
    }

    .goals-section h3 {
        font-size: 1.4rem;
        letter-spacing: 1.5px;
        margin-bottom: 2rem;
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.8),
            4px 4px 8px rgba(0, 0, 0, 0.6),
            6px 6px 12px rgba(0, 0, 0, 0.4);
    }

    .goals-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    .goal-box {
        padding: 0.8rem;
        border-radius: 6px;
        min-height: 130px;
    }

    .goal-icon {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }

    .goal-number {
        font-size: 0.7rem;
        margin-bottom: 0.4rem;
    }

    .goal-text {
        font-size: 0.75rem;
        line-height: 1.35;
    }

    /* Contact section */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-info {
        padding: 2rem 1.5rem;
    }

    .contact-info h3 {
        font-size: 1.4rem;
        margin-bottom: 1.2rem;
    }

    .contact-item {
        padding: 1rem;
        margin-bottom: 1.2rem;
    }

    .contact-item h4 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .contact-item p {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .contact-form {
        padding: 2rem 1.5rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 1rem 0.8rem;
        font-size: 0.85rem;
    }

    .submit-btn {
        padding: 1rem 2rem;
        font-size: 0.85rem;
    }

    /* Ideation section */
    .ideation-section h2 {
        font-size: 2rem;
        margin-bottom: 2.5rem;
    }

    .ideation-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .journey-stages {
        gap: 1.5rem;
    }

    .stage-accordion {
        margin-bottom: 0.5rem;
    }
    
    .stage-header {
        padding: 0.8rem;
    }
    
    .stage-content p {
        padding: 0.5rem 0.8rem 0.8rem 0.8rem;
        font-size: 0.75rem;
        text-align: left;
    }

    .stage-number {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .stage-content h4 {
        font-size: 1.1rem;
        margin-bottom: 0.7rem;
    }

    .stage-content p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .journey-intro {
        padding: 1rem;
        max-width: 320px;
    }

    .journey-intro h3 {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    .journey-intro p {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .journey-guidance {
        padding: 1.2rem;
        max-width: 350px;
    }

    .guidance-content p {
        font-size: 0.7rem;
        line-height: 1.4;
    }

    .cta-section {
        padding: 2rem;
        max-width: 350px;
    }

    .cta-section h3 {
        font-size: 1.1rem;
        margin-bottom: 0.7rem;
    }

    .cta-section p {
        font-size: 0.8rem;
        margin-bottom: 1.2rem;
    }

    .join-btn {
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }

    /* Course cards */
    .course-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .course-cards-section h3 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    .course-card {
        padding: 2rem 1.5rem;
    }

    .course-image {
        height: 90px;
    }

    .course-logo {
        width: 40px;
        height: 40px;
    }

    .course-content h4 {
        font-size: 1.1rem;
        margin-bottom: 0.9rem;
    }

    .course-content p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1.2rem;
    }

    .course-btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.85rem;
    }

    /* Typography improvements */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9rem; }

    p {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Button improvements */
    .submit-btn,
    .join-btn,
    .course-btn {
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Mobile menu improvements */
    .nav-menu {
        padding: 2.5rem 0;
    }

    .nav-link {
        padding: 1.2rem 2rem;
        font-size: 0.85rem;
    }
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
    /* Base font size reduction for better readability */
    body {
        font-size: 0.85rem;
    }


    .hero-logo-img {
        height: 160px;
    }




    /* Navigation improvements */
    .nav-container {
        padding: 0 0.3rem;
        height: 70px;
        background: linear-gradient(135deg, 
            rgba(10, 14, 39, 0.98) 0%,
            rgba(20, 25, 50, 1) 100%);
    }

    .logo-img {
        height: 60px;
        filter: drop-shadow(0 0 10px rgba(0, 255, 240, 0.8));
    }

    .hamburger {
        width: 32px;
        height: 32px;
        padding: 5px;
    }

    .bar {
        width: 22px;
        height: 2px;
        background: linear-gradient(90deg, 
            rgba(0, 255, 240, 0.9) 0%,
            rgba(138, 43, 226, 0.9) 100%);
        box-shadow: 0 0 4px rgba(0, 255, 240, 0.4);
    }

    .nav-menu {
        padding: 3rem 0 1.5rem 0;
    }

    .nav-link {
        padding: 1.2rem 1rem;
        font-size: 0.75rem;
    }

    /* Section improvements */
    .section {
        padding: 2rem 0.3rem;
        min-height: auto;
    }

    .section h2 {
        font-size: 1.4rem;
        margin-bottom: 1.5rem;
        padding: 0 0.2rem;
    }

    .container {
        padding: 0 0.2rem;
    }

    /* About section */
    .about-split-layout {
        gap: 1.5rem;
    }

    .about-visual {
        height: 120px;
    }

    .glowing-illustration {
        width: 100px;
        height: 100px;
    }

    .light-orb {
        width: 40px;
        height: 40px;
    }

    .light-orb::before {
        width: 20px;
        height: 20px;
    }

    .orb-logo {
        width: 15px;
        height: 15px;
    }

    .dot-logo {
        width: 4px;
        height: 4px;
    }

    .wave-1 {
        width: 80px;
        height: 80px;
    }

    .wave-2 {
        width: 100px;
        height: 100px;
    }

    .wave-3 {
        width: 120px;
        height: 120px;
    }

    .about-intro p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .main-project {
        padding: 0.8rem;
    }

    .main-project h3 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .main-project p {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    /* Book showcase */
    .book-showcase {
        padding: 0.8rem;
        margin-top: 1rem;
    }

    .book-showcase h4 {
        font-size: 0.8rem;
        margin-bottom: 0.6rem;
    }

    .book-cover {
        width: 40px;
        height: 50px;
    }

    .book-spine {
        width: 4px;
    }

    .book-pages {
        left: 4px;
        width: 36px;
    }

    .book-info h5 {
        font-size: 0.6rem;
        line-height: 1.1;
    }

    .book-info p {
        font-size: 0.55rem;
        line-height: 1.2;
    }

    /* Developers section */
    .developer-card {
        padding: 0.8rem;
        min-height: 200px;
        max-width: 260px;
    }

    .developer-avatar {
        width: 40px;
        height: 40px;
    }

    .avatar-logo {
        width: 20px;
        height: 20px;
    }

    .developer-card h3 {
        font-size: 0.8rem;
        margin-bottom: 0.4rem;
    }

    .developer-title {
        font-size: 0.7rem;
        margin-bottom: 0.6rem;
    }

    .projects-list h4 {
        font-size: 0.7rem;
        margin-bottom: 0.4rem;
    }

    .projects-list li {
        font-size: 0.6rem;
        line-height: 1.2;
        margin-bottom: 0.3rem;
    }

    /* History section */
    .timeline::before {
        left: 50%;
        width: 1px;
        transform: translateX(-50%);
    }

    .timeline-item {
        margin-bottom: 0.8rem;
    }

    .timeline-year {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
        min-width: 30px;
        margin: 0 0.4rem;
    }

    .timeline-content {
        max-width: 200px;
        padding: 0.5rem;
    }

    .timeline-content h3 {
        font-size: 0.75rem;
        margin-bottom: 0.4rem;
    }

    .timeline-content h4 {
        font-size: 0.65rem;
        margin: 0.4rem 0 0.2rem 0;
    }

    .timeline-content p {
        font-size: 0.6rem;
        line-height: 1.2;
        margin-bottom: 0.3rem;
    }

    .scholar {
        padding: 0.8rem;
        margin: 0.6rem 0;
    }

    .scholar h4 {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    .scholar p {
        font-size: 0.7rem;
        margin-bottom: 0.4rem;
    }

    .highlight-message {
        padding: 0.8rem;
        font-size: 0.75rem;
    }

    /* Goals section */
    .goals-section {
        padding: 1.5rem 0.5rem;
    }

    .goals-section h3 {
        font-size: 1.2rem;
        letter-spacing: 1px;
        margin-bottom: 1.5rem;
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.8),
            4px 4px 8px rgba(0, 0, 0, 0.6),
            6px 6px 12px rgba(0, 0, 0, 0.4);
    }

    .goals-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem;
    }

    .goal-box {
        padding: 0.7rem;
        border-radius: 6px;
        min-height: 120px;
    }

    .goal-icon {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .goal-number {
        font-size: 0.65rem;
        margin-bottom: 0.4rem;
    }

    .goal-text {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    /* Contact section */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-info {
        padding: 1.5rem 1rem;
    }

    .contact-info h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .contact-item {
        padding: 0.8rem;
        margin-bottom: 1rem;
    }

    .contact-item h4 {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .contact-item p {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .contact-form {
        padding: 1.5rem 1rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 0.8rem 0.6rem;
        font-size: 0.8rem;
    }

    .submit-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.8rem;
    }

    /* Ideation section */
    .ideation-section h2 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    .ideation-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .journey-stages {
        gap: 1rem;
    }

    .stage-accordion {
        margin-bottom: 0.4rem;
    }
    
    .stage-header {
        padding: 0.6rem;
    }
    
    .stage-content p {
        padding: 0.4rem 0.6rem 0.6rem 0.6rem;
        font-size: 0.7rem;
        text-align: left;
    }

    .stage-number {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }

    .stage-content h4 {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }

    .stage-content p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .journey-intro {
        padding: 0.8rem;
        max-width: 280px;
    }

    .journey-intro h3 {
        font-size: 0.7rem;
        margin-bottom: 0.4rem;
    }

    .journey-intro p {
        font-size: 0.6rem;
        line-height: 1.2;
    }

    .journey-guidance {
        padding: 1rem;
        max-width: 300px;
    }

    .guidance-content p {
        font-size: 0.65rem;
        line-height: 1.3;
    }

    .cta-section {
        padding: 1.5rem;
        max-width: 300px;
    }

    .cta-section h3 {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }

    .cta-section p {
        font-size: 0.7rem;
        margin-bottom: 1rem;
    }

    .join-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.8rem;
    }

    /* Course cards */
    .course-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .course-cards-section h3 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .course-card {
        padding: 1.5rem 1rem;
    }

    .course-image {
        height: 80px;
    }

    .course-logo {
        width: 30px;
        height: 30px;
    }

    .course-content h4 {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }

    .course-content p {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 1rem;
    }

    .course-btn {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }

    /* Mobile menu improvements */
    .nav-menu {
        padding: 2rem 0;
    }

    .nav-link {
        padding: 1rem 1.5rem;
        font-size: 0.8rem;
    }

    /* Typography improvements */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.9rem; }
    h6 { font-size: 0.8rem; }

    p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* Button improvements */
    .submit-btn,
    .join-btn,
    .course-btn {
        min-height: 40px;
        touch-action: manipulation;
    }

    /* Ensure proper spacing */
    .section-content {
        padding: 0 0.2rem;
    }
}