/* ============================================
   JIGNASA ARTVERSE - PREMIUM STYLESHEET
   ============================================ */

/* CSS Variables — Jignasa brochure palette (teal, lime, mustard, forest, chocolate, maroon) */
:root {
    /* Brochure primaries */
    /* Orange + yellow only */
    --color-teal: #F2A734; /* remapped to orange */
    --color-teal-bright: #FFD54A; /* remapped to yellow */
    --color-lime: #FFD54A; /* remapped to yellow */
    --color-orange: #F2A734;
    --color-ochre: #D4AF37;
    --color-yellow: #FFD54A;
    --color-yellow-soft: #FFE7A2;
    --color-maroon: #8B2332;
    --color-chocolate: #3D2B1F;
    --color-olive: #3B4A38;
    --color-white: #FFFFFF;
    --color-pastel-orange: #F7F0E0;
    --color-pastel-teal: #E8F5F3;
    --color-pastel-yellow: #F2F8E8;
    --color-dark: #2C2419;
    --color-dark-light: #3D3428;
    --color-gray: #5A5348;
    
    /* Added palette accents */
    --color-d15f16: #D15F16;
    --color-54a86a: #54A86A;
    --color-53c6c5: #53C6C5;
    --hero-text-primary: #F5F0E8;
    --hero-text-secondary: #FFD54A;
    --hero-forest: #0F1E18;
    --hero-forest-mid: #1B4D3E;
    --hero-sky-light: #FFD54A;
    --color-gray-light: #E8E4DC;
    
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Poppins', sans-serif;
    
    --shadow-sm: 0 2px 10px rgba(242, 167, 52, 0.14);
    --shadow-md: 0 4px 18px rgba(242, 167, 52, 0.18);
    --shadow-lg: 0 10px 32px rgba(255, 213, 74, 0.16);
    --shadow-xl: 0 18px 48px rgba(255, 213, 74, 0.22);
    
    --gradient-primary: linear-gradient(135deg, #D4AF37 0%, #F2A734 58%, #FFD54A 100%);
    --gradient-secondary: linear-gradient(135deg, #F2A734 0%, #FFD54A 100%);
    --gradient-hero: linear-gradient(135deg, #B57C1B 0%, #F2A734 52%, #FFD54A 100%);
    
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
    font-family: var(--font-body);
    color: var(--color-dark);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--color-white);
}

img {
    background: transparent !important;
}

/* Scroll Progress Indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg,
        var(--color-d15f16) 0%,
        var(--color-53c6c5) 55%,
        var(--color-yellow) 100%);
    z-index: 10000;
    transition: width 0.1s ease;
}

/* Interactive Character */
.interactive-character {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 9999;
    cursor: pointer;
    animation: characterFloatCTA 3.6s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.interactive-character:hover {
    transform: scale(1.1);
}

@keyframes characterFloatCTA {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.02); }
}

.character-body {
    width: 120px;
    height: 120px;
    background: var(--gradient-primary);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    box-shadow: var(--shadow-xl);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-body:hover {
    box-shadow: 0 20px 60px rgba(255, 122, 0, 0.4);
}

.character-face {
    position: relative;
    width: 80px;
    height: 80px;
}

.character-eyes {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.eye {
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

.eye::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-dark);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
}

.character-mouth {
    width: 30px;
    height: 15px;
    border: 3px solid var(--color-white);
    border-top: none;
    border-radius: 0 0 30px 30px;
    margin: 15px auto 0;
    transition: all 0.3s ease;
}

.character-body:hover .character-mouth {
    height: 20px;
    border-radius: 0 0 30px 30px;
}

.character-speech {
    position: absolute;
    bottom: 140px;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 2px solid var(--color-orange);
    border-radius: 20px;
    padding: 1rem 1.5rem;
    font-family: var(--font-accent);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    transition: all 0.3s ease;
    pointer-events: none;
}

.character-speech::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 30px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--color-orange);
}

.character-speech.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.interactive-character:hover .character-speech {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Character animations */
@keyframes characterBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.character-body.animate {
    animation: characterBounce 0.5s ease;
}

@keyframes eyeBlink {
    0%, 90%, 100% { height: 12px; }
    95% { height: 2px; }
}

.eye.blink {
    animation: eyeBlink 0.3s ease;
}

/* Responsive character */
@media (max-width: 768px) {
    .interactive-character {
        right: 1rem;
        bottom: 1rem;
        transform: scale(0.8);
    }
    
    .character-speech {
        min-width: 150px;
        font-size: 0.8rem;
        padding: 0.8rem 1.2rem;
    }
}

@media (max-width: 480px) {
    .interactive-character {
        transform: scale(0.7);
    }
    
    .character-speech {
        bottom: 120px;
        min-width: 140px;
        font-size: 0.75rem;
    }
}

/* ============================================
   HERO — brochure colours (dark teal / forest / mustard / lime)
   ============================================ */

.hero {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    /* Warm base so the hero looks punchy (like the reference screenshot) */
    background: #5A2806;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background:
        radial-gradient(ellipse 100% 76% at 50% 100%, rgba(201, 163, 58, 0.72) 0%, rgba(120, 65, 15, 0.36) 42%, transparent 58%),
        radial-gradient(ellipse 68% 54% at 14% 20%, rgba(212, 175, 55, 0.25) 0%, transparent 52%),
        radial-gradient(ellipse 58% 50% at 88% 18%, rgba(242, 167, 52, 0.24) 0%, transparent 50%),
        radial-gradient(ellipse 56% 48% at 8% 88%, rgba(229, 221, 78, 0.25) 0%, transparent 54%),
        radial-gradient(ellipse 58% 52% at 48% 40%, rgba(201, 163, 58, 0.22) 0%, transparent 56%),
        /* Boost cyan/green visibility (stronger + more contrast) */
        radial-gradient(ellipse 46% 40% at 82% 58%, rgba(83, 198, 197, 0.44) 0%, transparent 62%),
        radial-gradient(ellipse 48% 44% at 18% 58%, rgba(84, 168, 106, 0.38) 0%, transparent 62%),
        radial-gradient(ellipse 40% 34% at 10% 30%, rgba(83, 198, 197, 0.34) 0%, transparent 60%),
        radial-gradient(ellipse 38% 32% at 92% 25%, rgba(84, 168, 106, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 60% 20%, rgba(209, 95, 22, 0.16) 0%, transparent 58%),
        linear-gradient(165deg, #6A2406 0%, #B57C1B 34%, #F2A734 62%, #FFD54A 100%);
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        rgba(212, 175, 55, 0.45) 0%,
        rgba(84, 168, 106, 0.44) 18%,
        rgba(201, 163, 58, 0.33) 26%,
        rgba(242, 167, 52, 0.28) 48%,
        rgba(83, 198, 197, 0.40) 68%,
        rgba(229, 221, 78, 0.26) 72%,
        rgba(209, 95, 22, 0.22) 92%,
        rgba(201, 163, 58, 0.42) 100%
    );
    animation: gradientFlow 26s ease infinite;
    background-size: 200% 200%;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: 1;
    /* Stronger contrast + brightness (reference-like punch) */
    filter: saturate(1.42) contrast(1.24) brightness(1.12);
}

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

/* Vibrant SVG Background */
.svg-hero-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    mix-blend-mode: screen;
    opacity: 1;
    filter: saturate(1.55) contrast(1.30) brightness(1.10);
}

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

.anim-float-slow { animation: childFloat 25s infinite ease-in-out; }
.anim-float-med { animation: childFloat 20s infinite ease-in-out; }
.anim-float-1 { animation: childFloat 12s infinite ease-in-out; }
.anim-float-2 { animation: childFloat 15s infinite ease-in-out reverse; }
.anim-float-3 { animation: childFloat 18s infinite ease-in-out 2s; }
.anim-pulse { animation: pulseBg 4s infinite ease-in-out; }
.anim-spin-slow { animation: spin 40s linear infinite; transform-origin: center; }

.anim-brush { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 10s ease-in-out infinite alternate; }
.anim-brush-slow { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 15s ease-in-out infinite alternate-reverse; }

.anim-paint-arm { transform-origin: -20px -50px; animation: paintArm 3s ease-in-out infinite alternate; }
.anim-paint-brush { transform-origin: -75px -75px; animation: paintBrush 3s ease-in-out infinite alternate; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

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

@keyframes paintBrush {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-20deg); }
}

@keyframes pulseBg {
    0%, 100% { opacity: 0.62; transform: scale(1); }
    50% { opacity: 0.92; transform: scale(1.05); }
}

@keyframes childFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    33% {
        transform: translateY(-20px) translateX(15px) rotate(3deg);
    }
    66% {
        transform: translateY(15px) translateX(-10px) rotate(-3deg);
    }
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 6;
    text-align: center;
    max-width: 1000px;
    padding: 2rem;
    width: 100%;
}

.hero-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: clamp(2.2rem, 6vh, 4.2rem) auto 0.75rem;
    width: min(94vw, 860px);
    max-width: 100%;
    position: relative;
}

.hero-logo-wrap::before {
    content: '';
    position: absolute;
    inset: -1.4rem -2rem -1.2rem -2rem;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 35%,
        rgba(255, 246, 210, 0.88) 0%,
        rgba(255, 240, 190, 0.55) 38%,
        rgba(242, 167, 52, 0.18) 58%,
        rgba(255, 250, 220, 0.06) 78%,
        transparent 92%);
    filter: blur(0.25px);
    z-index: 0;
    pointer-events: none;
}

.hero-logo-img {
    width: 100%;
    max-height: 46vh;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(0 0 34px rgba(255, 240, 190, 0.72))
        drop-shadow(0 0 22px rgba(242, 167, 52, 0.30));
    transform: translateZ(0);
}

@media (min-width: 992px) and (max-width: 1440px) {
    .hero-logo-wrap {
        width: min(96vw, 1060px);
    }

    .title-location {
        width: min(94vw, 900px);
    }

    .hero-logo-img {
        max-height: 50vh;
    }
}

/* Short laptop screens (e.g. 1366x768): prevent hero crowding/cropping */
@media (min-width: 1024px) and (max-height: 820px) {
    .hero {
        min-height: 100svh;
        height: 100svh;
        padding-top: 4.6rem; /* fixed navbar clearance */
    }

    .hero-content {
        max-width: 900px;
        padding: 1.1rem 1.25rem 0.9rem;
    }

    .hero-logo-wrap {
        margin: 0.35rem auto 0.45rem;
    }

    .hero-logo-img {
        max-height: 30vh;
    }

    .title-location {
        font-size: clamp(1.65rem, 2.6vw, 2.35rem);
    }

    .hero-subtitle {
        font-size: clamp(1.05rem, 1.9vw, 1.35rem);
        margin-bottom: 1.35rem;
    }

    .hero-cta {
        margin-top: 0.1rem;
    }

    .venue-marquee {
        margin-top: 1rem;
        padding: 0.7rem 1rem;
    }

    .marquee-content {
        font-size: 1rem;
    }

    .hero-character {
        width: clamp(120px, 12.5vw, 190px);
        bottom: -0.5rem;
    }
}

.hero-title {
    font-family: var(--font-heading);
    color: var(--hero-text-primary);
    margin-bottom: 2rem;
    line-height: 1.2;
}

.title-main {
    display: block;
    font-size: clamp(2rem, 6.2vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.3s forwards;
}

.title-sub {
    display: block;
    font-size: clamp(1.25rem, 3.3vw, 2.5rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.6s forwards;
}

.title-location {
    display: block;
    font-size: clamp(1.45rem, 3.4vw, 2.8rem);
    color: var(--hero-text-primary);
    font-weight: 700;
    font-family: var(--font-accent);
    width: min(94vw, 860px);
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.3px;
    text-shadow:
        0 0 18px rgba(255, 213, 74, 0.50),
        0 0 26px rgba(242, 167, 52, 0.30),
        0 0 30px rgba(212, 175, 55, 0.22);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.9s forwards;
}

.hero-subtitle {
    font-size: clamp(1.15rem, 2.35vw, 1.9rem);
    /* Crisp readable subtitle (matches the reference screenshot) */
    color: #FFFFFF;
    margin-bottom: 3rem;
    font-weight: 800;
    position: relative;
    z-index: 10;
    mix-blend-mode: normal;
    text-shadow:
        0 1px 0 rgba(255, 213, 74, 0.22),
        0 0 12px rgba(255, 213, 74, 0.40),
        0 0 24px rgba(242, 167, 52, 0.26),
        0 0 26px rgba(83, 198, 197, 0.18),
        0 0 24px rgba(84, 168, 106, 0.14);
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 1.2s forwards;
}

/* Fade In Animations */
.fade-in-1 { animation: fadeInUp 1s ease-out 0.3s forwards; }
.fade-in-2 { animation: fadeInUp 1s ease-out 0.6s forwards; }
.fade-in-3 { animation: fadeInUp 1s ease-out 0.9s forwards; }
.fade-in-4 { animation: fadeInUp 1s ease-out 1.2s forwards; }
.fade-in-5 { animation: fadeInUp 1s ease-out 1.5s forwards; }

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

.hero-cta {
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 1.5s forwards;
}

.venue-marquee {
    margin-top: 3rem;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    background: var(--gradient-hero);
    border-radius: 50px;
    padding: 1rem 1.5rem;
    border: 3px solid var(--hero-sky-light);
    box-shadow:
        0 0 18px rgba(255, 213, 74, 0.28),
        0 0 26px rgba(242, 167, 52, 0.20),
        0 0 32px rgba(212, 175, 55, 0.16);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 1.6s forwards;
    z-index: 20;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    color: var(--color-chocolate);
    font-family: var(--font-accent);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 1px;
    animation: marquee-scroll 20s linear infinite;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    padding-left: 100%;
}

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

.btn-hero {
    display: inline-block;
    padding: 1.2rem 3.5rem;
    background: var(--gradient-primary);
    color: var(--color-white);
    border: 2px solid var(--color-yellow);
    border-radius: 50px;
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: var(--transition);
    box-shadow:
        0 0 16px rgba(255, 213, 74, 0.32),
        0 0 22px rgba(242, 167, 52, 0.22),
        0 0 28px rgba(212, 175, 55, 0.16);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

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

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

.btn-hero:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 30px rgba(242, 167, 52, 0.28),
        0 0 28px rgba(255, 213, 74, 0.22);
    filter: brightness(1.08);
    border-color: var(--color-yellow);
}

.btn-hero:active {
    transform: translateY(-2px) scale(1.02);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--color-white);
    color: var(--color-orange);
    box-shadow: var(--shadow-lg);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

/* Scroll Indicator - Cinematic */
.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    animation: fadeInUp 1s ease-out 2s forwards;
}

.scroll-text {
    color: var(--hero-sky-light);
    font-family: var(--font-accent);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow:
        0 0 12px rgba(255, 213, 74, 0.22),
        0 0 16px rgba(242, 167, 52, 0.22),
        0 0 20px rgba(212, 175, 55, 0.14);
    animation: pulseText 2s ease-in-out infinite;
}

@keyframes pulseText {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.scroll-line {
    width: 2px;
    height: 50px;
    background: linear-gradient(to bottom,
        rgba(255, 213, 74, 0.28) 0%,
        rgba(242, 167, 52, 0.14) 42%,
        rgba(242, 167, 52, 0.60) 100%);
    position: relative;
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0% {
        opacity: 0.6;
        transform: scaleY(1);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
    100% {
        opacity: 0.6;
        transform: scaleY(1);
    }
}

.scroll-arrow-down {
    color: #F2A734;
    animation: bounceArrow 2s ease-in-out infinite;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.scroll-arrow-down:hover {
    transform: translateY(5px) scale(1.2);
    color: var(--color-white);
}

@keyframes bounceArrow {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.8;
    }
    50% {
        transform: translateY(10px);
        opacity: 1;
    }
}

/* ============================================
   COMMON SECTION STYLES
   ============================================ */

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
}

section {
    padding: 6rem 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-tag {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: var(--gradient-primary);
    color: var(--color-white);
    border-radius: 50px;
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.section-description {
    font-size: 1.2rem;
    color: var(--color-gray);
    max-width: 700px;
    margin: 0 auto;
}

/* Glassmorphism Card */
.glass-card {
    /* Soft-blue glass (more visible, smoother) */
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.84) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(83, 198, 197, 0.28);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow:
        0 18px 60px rgba(83, 198, 197, 0.14),
        0 10px 30px rgba(84, 168, 106, 0.08);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}

.glass-card:hover {
    transform: translateY(-8px);
    border-color: rgba(83, 198, 197, 0.46);
    box-shadow:
        0 24px 75px rgba(83, 198, 197, 0.22),
        0 14px 40px rgba(84, 168, 106, 0.10);
}

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   ABOUT SECTION
   ============================================ */

.about {
    /* Light-blue shaded background like the reference screenshot */
    background: linear-gradient(180deg,
        rgba(83, 198, 197, 0.14) 0%,
        rgba(255, 247, 230, 1) 55%,
        rgba(84, 168, 106, 0.08) 100%);
}

.about::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 50%;
    height: 60%;
    background: radial-gradient(circle,
        rgba(83, 198, 197, 0.22) 0%,
        rgba(83, 198, 197, 0.10) 30%,
        transparent 70%);
    z-index: 0;
}

.about::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 50%;
    height: 60%;
    background: radial-gradient(circle,
        rgba(84, 168, 106, 0.18) 0%,
        rgba(83, 198, 197, 0.08) 35%,
        transparent 70%);
    z-index: 0;
}

.about .container {
    position: relative;
    z-index: 1;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-image {
    position: relative;
}

.about-image::before {
    content: '';
    position: absolute;
    inset: -60px -40px -60px -40px;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 45%,
        rgba(83, 198, 197, 0.22) 0%,
        rgba(83, 198, 197, 0.10) 35%,
        transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.about-illustration {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 22px 45px rgba(83, 198, 197, 0.24));
    transition: filter 0.35s ease;
    animation: float 6s ease-in-out infinite;
}

.about-image:hover .about-illustration {
    filter: drop-shadow(0 28px 55px rgba(83, 198, 197, 0.32));
}

.about-content {
    position: relative;
}

.about-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-dark-light);
    margin-bottom: 1.5rem;
}

.about-features {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-accent);
    font-weight: 600;
    color: var(--color-dark);
    transition: transform 0.25s ease, color 0.25s ease;
}

.feature-item:hover {
    transform: translateY(-2px);
    color: var(--color-54a86a);
}

/* ============================================
   RANDOM DECORATIVE PAGE IMAGES
   ============================================ */
.floating-stickers {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

body.show-stickers .floating-stickers {
    opacity: 1;
    visibility: visible;
}

.floating-stickers .sticker {
    position: absolute;
    width: clamp(72px, 9vw, 150px);
    height: auto;
    opacity: 1;
    filter:
        saturate(1.28)
        contrast(1.12)
        brightness(1.10)
        drop-shadow(0 10px 24px rgba(83, 198, 197, 0.30));
    animation: stickerFloat 8s ease-in-out infinite;
}

.floating-stickers .s1 { top: 12vh; left: 1.2vw; animation-delay: 0s; }
.floating-stickers .s2 { top: 24vh; right: 1.4vw; animation-delay: 1s; }
.floating-stickers .s3 { top: 40vh; left: 1.2vw; animation-delay: 1.8s; }
.floating-stickers .s4 { top: 54vh; right: 1vw; animation-delay: 2.4s; }
.floating-stickers .s5 { top: 70vh; left: 1.3vw; animation-delay: 3s; }
.floating-stickers .s6 { top: 16vh; right: 15vw; animation-delay: 3.8s; }
.floating-stickers .s7 { top: 36vh; left: 14vw; animation-delay: 4.4s; }
.floating-stickers .s8 { top: 62vh; right: 16vw; animation-delay: 5.1s; }
.floating-stickers .s9 { top: 82vh; left: 12vw; animation-delay: 5.8s; }

/* Extra interactive movement for the primary 5 stickers */
.floating-stickers .s1 { animation: stickerDriftA 7.2s ease-in-out infinite; }
.floating-stickers .s2 { animation: stickerDriftB 8.4s ease-in-out infinite; }
.floating-stickers .s3 { animation: stickerDriftC 7.8s ease-in-out infinite; }
.floating-stickers .s4 { animation: stickerDriftD 9.2s ease-in-out infinite; }
.floating-stickers .s5 { animation: stickerDriftE 8.8s ease-in-out infinite; }

@keyframes stickerFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(1.8deg); }
}

@keyframes stickerDriftA {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(10px, -10px) rotate(2deg) scale(1.03); }
}

@keyframes stickerDriftB {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(-10px, -8px) rotate(-2deg) scale(1.02); }
}

@keyframes stickerDriftC {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(8px, -12px) rotate(1.6deg) scale(1.03); }
}

@keyframes stickerDriftD {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(-8px, -9px) rotate(-1.8deg) scale(1.02); }
}

@keyframes stickerDriftE {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(9px, -7px) rotate(1.5deg) scale(1.02); }
}

.feature-icon {
    font-size: 1.5rem;
}

/* ============================================
   PHILOSOPHY SECTION
   ============================================ */

.philosophy {
    background: var(--color-white);
}

.philosophy-layout {
    display: grid;
    grid-template-columns: 1fr 450px 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.philosophy-column {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.philosophy-svg-container {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    filter: drop-shadow(0 10px 30px rgba(242, 167, 52, 0.12));
    animation: float 6s ease-in-out infinite;
}

.philosophy-circle-svg {
    width: 100%;
    height: auto;
    display: block;
}

.segment {
    transition: all 0.3s ease;
    cursor: pointer;
}

.segment:hover {
    opacity: 0.5;
}

.pillar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transition: var(--transition);
}

.pillar:hover::before {
    transform: scaleY(1);
}

.pillar:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.pillar-left {
    text-align: right;
    padding-left: 2rem;
    padding-right: 2.5rem;
}

.pillar-left::before {
    left: auto;
    right: 0;
}

.pillar-right {
    text-align: left;
    padding-left: 2.5rem;
    padding-right: 2rem;
}

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

.pillar h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.pillar p {
    color: var(--color-gray);
    line-height: 1.6;
}

/* ============================================
   TRACKS SECTION
   ============================================ */

.tracks {
    background: var(--color-pastel-teal);
}

.tracks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* ============================================
   PRICING SECTION
   ============================================ */

.pricing {
    background: linear-gradient(180deg, #ffffff 0%, #f7fffd 100%);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.pricing-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 179, 164, 0.18);
    border-radius: 20px;
    padding: 1.25rem 1.2rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 122, 0, 0.35);
}

.pricing-card-featured {
    background: linear-gradient(145deg, rgba(255, 244, 163, 0.36), rgba(240, 253, 250, 0.95));
    border-color: rgba(255, 122, 0, 0.25);
}

.pricing-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(0, 179, 164, 0.12);
    color: #0f766e;
    font-family: var(--font-accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 0.7rem;
}

.pricing-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--color-dark);
    margin-bottom: 0.6rem;
}

.pricing-amount {
    font-family: var(--font-accent);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-orange);
    margin-bottom: 0.5rem;
}

.pricing-amount .currency {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark-light);
}

.pricing-note {
    color: var(--color-gray);
    line-height: 1.55;
}

.pricing-actual {
    color: #6b7280;
    font-weight: 700;
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

.pricing-actual .currency {
    color: #6b7280;
}

.pricing-actual .price-value {
    position: relative;
    display: inline-block;
    margin-left: 0.2rem;
    font-family: var(--font-accent);
    font-size: 2rem;
    line-height: 1;
    color: #9ca3af;
    text-decoration: line-through;
    text-decoration-thickness: 3px;
    text-decoration-color: rgba(255, 122, 0, 0.8);
}

.pricing-actual .price-value::after {
    content: '';
    position: absolute;
    left: -2%;
    top: 50%;
    width: 104%;
    height: 4px;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 122, 0, 0.95), rgba(239, 68, 68, 0.9));
    animation: strikeSweep 1.3s ease 0.15s forwards;
}

.pricing-card-discount {
    position: relative;
    overflow: hidden;
    border-width: 2px;
    border-color: rgba(255, 122, 0, 0.28);
}

.pricing-card-discount::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 16%, rgba(255, 122, 0, 0.16), transparent 45%);
    pointer-events: none;
}

.offer-pill {
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 0.26rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 122, 0, 0.2), rgba(0, 179, 164, 0.18));
    color: #0f766e;
    font-family: var(--font-accent);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    animation: offerPulse 2.2s ease-in-out infinite;
}

.offer-deadline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    font-family: var(--font-accent);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18px;
    color: #7c2d12;
    background: linear-gradient(135deg, rgba(255, 237, 213, 0.95), rgba(254, 215, 170, 0.9));
    border: 1px solid rgba(251, 146, 60, 0.45);
    box-shadow: 0 6px 18px rgba(249, 115, 22, 0.2);
    animation: deadlineFlash 1.8s ease-in-out infinite;
}

.offer-deadline::before {
    content: '⏳';
    font-size: 0.82rem;
}

.pricing-early-label {
    display: inline-block;
    margin-bottom: 0.2rem;
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    font-family: var(--font-accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.25px;
    color: #065f46;
    background: rgba(16, 185, 129, 0.16);
}

.pricing-card-discount .pricing-amount {
    font-size: 2.55rem;
    line-height: 1.05;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #ff7a00 0%, #ff9b2f 45%, #00b3a4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 8px 24px rgba(255, 122, 0, 0.28);
    animation: earlyBirdPop 2.1s ease-in-out infinite;
}

.pricing-card-discount .pricing-amount .currency {
    color: var(--color-dark-light);
    -webkit-text-fill-color: var(--color-dark-light);
}

@keyframes offerPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0, 179, 164, 0);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 8px rgba(0, 179, 164, 0.08);
    }
}

@keyframes strikeSweep {
    to {
        transform: translateY(-50%) scaleX(1);
    }
}

@keyframes earlyBirdPop {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 122, 0, 0));
    }
    50% {
        transform: scale(1.045);
        filter: drop-shadow(0 0 10px rgba(255, 122, 0, 0.25));
    }
}

@keyframes deadlineFlash {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 6px 18px rgba(249, 115, 22, 0.18);
    }
    50% {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(249, 115, 22, 0.28);
    }
}

.track-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.track-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: var(--transition);
}

.track-card:hover::before {
    transform: scaleX(1);
}

@keyframes jiggle {
    0% { transform: scale(1); }
    30% { transform: scale(1.05) rotate(2deg); }
    50% { transform: scale(1.02) rotate(-1deg); }
    70% { transform: scale(1.04) rotate(1deg); }
    100% { transform: scale(1.03) rotate(0); }
}

.track-card:hover {
    animation: jiggle 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    box-shadow: var(--shadow-xl);
}

.track-featured {
    border: 2px solid var(--color-orange);
    transform: scale(1.05);
}

.track-featured::before {
    height: 6px;
}

.featured-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--gradient-primary);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-accent);
    z-index: 2;
}

.track-illustration {
    width: 100%;
    height: 180px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.track-card:hover .track-illustration {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.track-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.track-description {
    color: var(--color-gray);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.camp-brief {
    margin-top: 1.2rem;
    margin-bottom: 2rem;
    display: grid;
    gap: 0.8rem;
}

.camp-brief p {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 179, 164, 0.14);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    color: var(--color-gray);
    line-height: 1.75;
}

.track-features {
    list-style: none;
    margin-bottom: 2rem;
    flex: 1;
}

.track-features li {
    padding: 0.5rem 0;
    color: var(--color-dark-light);
    position: relative;
    padding-left: 1.5rem;
}

.track-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-teal);
    font-weight: bold;
}

.track-cta {
    display: inline-block;
    color: var(--color-orange);
    font-weight: 600;
    text-decoration: none;
    font-family: var(--font-accent);
    transition: var(--transition);
}

.track-cta:hover {
    transform: translateX(5px);
}

.track-card-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.track-main-btn {
    display: block;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    padding: 0.9rem 1.4rem;
    background: #fff7e8;
    color: #4a3420;
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow:
        0 10px 22px rgba(209, 95, 22, 0.14),
        0 0 16px rgba(83, 198, 197, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    width: 100%;
    text-align: center;
}

.track-main-btn:hover {
    background: #ffe4bd;
    transform: translateY(-2px);
    box-shadow:
        0 16px 34px rgba(209, 95, 22, 0.22),
        0 0 20px rgba(83, 198, 197, 0.2);
}

.track-register-btn {
    padding: 0.65rem 1.35rem;
    font-size: 0.92rem;
    width: auto;
    white-space: nowrap;
}

/* ============================================
   FRAMEWORK SECTION
   ============================================ */

.framework {
    background: var(--color-white);
}

.framework-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.framework-item {
    text-align: center;
    padding: 3rem 2rem;
    border-radius: 24px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.framework-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: var(--transition);
    z-index: 0;
}

.framework-physical::before {
    background: linear-gradient(135deg, rgba(255, 122, 0, 0.1) 0%, rgba(255, 122, 0, 0.05) 100%);
}

.framework-mental::before {
    background: linear-gradient(135deg, rgba(0, 179, 164, 0.1) 0%, rgba(0, 179, 164, 0.05) 100%);
}

.framework-creative::before {
    background: linear-gradient(135deg, rgba(255, 230, 109, 0.1) 0%, rgba(255, 230, 109, 0.05) 100%);
}

.framework-item:hover::before {
    opacity: 1;
}

.framework-item:hover {
    transform: translateY(-10px);
}

.framework-icon-wrapper {
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}

.framework-icon {
    font-size: 4rem;
    display: inline-block;
}

.framework-item h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
    position: relative;
    z-index: 1;
}

.framework-item p {
    color: var(--color-gray);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.framework-activities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.activity-tag {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-dark);
    transition: var(--transition);
}

.activity-tag:hover {
    transform: scale(1.1);
}

/* ============================================
   CURRICULUM SECTION
   ============================================ */

.curriculum {
    background: var(--color-pastel-yellow);
}

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

.curriculum-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.curriculum-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: var(--transition);
    z-index: 0;
}

.curriculum-card:hover::after {
    opacity: 0.1;
}

.curriculum-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.curriculum-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    display: block;
}

.curriculum-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-dark);
    position: relative;
    z-index: 1;
}

.curriculum-card p {
    color: var(--color-gray);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* ============================================
   ALIGNMENT SECTION
   ============================================ */

.alignment {
    background: var(--color-white);
}

.alignment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.alignment-badge {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.alignment-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: var(--transition);
}

.alignment-badge:hover::before {
    opacity: 0.1;
}

.alignment-badge:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.badge-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    display: block;
}

.alignment-badge h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-dark);
    position: relative;
    z-index: 1;
}

.alignment-badge p {
    color: var(--color-gray);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* ============================================
   OUTCOMES SECTION
   ============================================ */

.outcomes {
    background: var(--color-pastel-orange);
}

.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
}

.outcome-item {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.outcome-item:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: var(--shadow-xl);
}

.outcome-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.outcome-number {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.outcome-label {
    color: var(--color-gray);
    font-weight: 500;
    font-size: 1rem;
}

/* ============================================
   TIMELINE SECTION
   ============================================ */

.timeline {
    background: var(--color-white);
}

.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 3rem;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    padding-left: 3rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.5rem;
    top: 0.5rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-orange);
    border: 3px solid var(--color-white);
    box-shadow: 0 0 0 3px var(--color-orange);
}

.timeline-time {
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-orange);
    margin-bottom: 0.5rem;
}

.timeline-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.timeline-content:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-lg);
}

.timeline-content h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.timeline-content p {
    color: var(--color-gray);
    line-height: 1.6;
}

/* ============================================
   ART CAMP MODULES SECTION
   ============================================ */

.art-modules {
    position: relative;
    background: linear-gradient(180deg, #f8fffd 0%, #f5f9ff 100%);
    overflow: hidden;
}

.art-modules::before,
.art-modules::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.art-modules::before {
    width: 280px;
    height: 280px;
    top: -80px;
    left: -80px;
    background: radial-gradient(circle, rgba(255, 122, 0, 0.12) 0%, transparent 72%);
}

.art-modules::after {
    width: 260px;
    height: 260px;
    right: -90px;
    bottom: -70px;
    background: radial-gradient(circle, rgba(0, 179, 164, 0.14) 0%, transparent 74%);
}

.art-modules .container {
    position: relative;
    z-index: 1;
}

.modules-network {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    justify-items: center;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.modules-network::before {
    content: '';
    position: absolute;
    inset: 10% 8%;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(107, 114, 128, 0.28) 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: 0.28;
}

.module-bubble {
    width: min(41vw, 190px);
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 50%;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.1);
    transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: modulePop 0.6s ease both;
}

.module-bubble:nth-child(1) { animation-delay: 0.05s; }
.module-bubble:nth-child(2) { animation-delay: 0.1s; }
.module-bubble:nth-child(3) { animation-delay: 0.15s; }
.module-bubble:nth-child(4) { animation-delay: 0.2s; }
.module-bubble:nth-child(5) { animation-delay: 0.25s; }
.module-bubble:nth-child(6) { animation-delay: 0.3s; }

.module-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent 50%);
    border-radius: 50%;
}

.module-bubble:hover,
.module-bubble:focus-visible,
.module-bubble.is-expanded {
    transform: scale(1.06);
    box-shadow: 0 18px 32px rgba(17, 24, 39, 0.16), 0 0 0 6px rgba(255, 255, 255, 0.28) inset;
    filter: saturate(1.08);
}

.module-bubble:focus-visible {
    outline: 2px solid rgba(0, 179, 164, 0.75);
    outline-offset: 4px;
}

.module-icon {
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1;
}

.module-title {
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: clamp(0.8rem, 2vw, 1rem);
    color: #1f2937;
}

.module-desc {
    max-width: 95%;
    max-height: 0;
    opacity: 0;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #374151;
    transition: max-height 0.24s ease, opacity 0.24s ease, margin-top 0.24s ease;
}

.module-bubble:hover .module-desc,
.module-bubble:focus-visible .module-desc,
.module-bubble.is-expanded .module-desc {
    max-height: 80px;
    opacity: 1;
    margin-top: 0.25rem;
}

.bubble-art {
    background: linear-gradient(145deg, #ffe9f3 0%, #ffd8ec 100%);
}

.bubble-dance {
    background: linear-gradient(145deg, #fff1dd 0%, #ffe2b8 100%);
}

.bubble-music {
    background: linear-gradient(145deg, #e2f2ff 0%, #cde6ff 100%);
}

.bubble-literary {
    background: linear-gradient(145deg, #e8fbe8 0%, #cef5d0 100%);
}

.bubble-dramatics {
    background: linear-gradient(145deg, #efe6ff 0%, #decfff 100%);
}

.bubble-visits {
    background: linear-gradient(145deg, #fff7db 0%, #ffebae 100%);
}

@keyframes modulePop {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (min-width: 700px) {
    .modules-network {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.2rem 1.5rem;
    }

    .module-bubble {
        width: min(27vw, 220px);
    }
}

@media (min-width: 1024px) {
    .modules-network {
        max-width: 980px;
    }

    .module-bubble {
        width: 220px;
    }
}

/* ============================================
   LEADERSHIP MODULES - ORGANIC BUBBLES
   ============================================ */

.leadership-modules {
    position: relative;
    background: linear-gradient(180deg, #f6f8ff 0%, #f4fdfd 100%);
    overflow: hidden;
}

.leadership-modules::before,
.leadership-modules::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.leadership-modules::before {
    width: 320px;
    height: 320px;
    left: -120px;
    top: -70px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.14) 0%, transparent 72%);
}

.leadership-modules::after {
    width: 320px;
    height: 320px;
    right: -110px;
    bottom: -80px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, transparent 74%);
}

.leadership-modules .container {
    position: relative;
    z-index: 1;
}

.leadership-network {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    justify-items: center;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.leadership-network::before {
    content: '';
    position: absolute;
    inset: 4%;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(51, 65, 85, 0.24) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.24;
}

.leadership-bubble {
    border: none;
    border-radius: 50%;
    padding: 1rem 0.75rem;
    width: 140px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.1);
    transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
    animation: bubbleFloatIn 0.6s ease both;
}

.leadership-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent 50%);
    border-radius: 50%;
}

.leadership-bubble:hover,
.leadership-bubble:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 18px 32px rgba(17, 24, 39, 0.16), 0 0 0 6px rgba(255, 255, 255, 0.28) inset;
    filter: saturate(1.08);
}

.leadership-bubble:focus-visible {
    outline: 2px solid rgba(0, 179, 164, 0.75);
    outline-offset: 4px;
}

.lead-icon {
    font-size: clamp(1rem, 2.8vw, 1.5rem);
    line-height: 1;
}

.lead-title {
    font-family: var(--font-accent);
    font-weight: 700;
    color: #1f2937;
    font-size: clamp(0.72rem, 1.7vw, 0.95rem);
    line-height: 1.3;
    max-width: 94%;
}

.lead-hint {
    max-width: 95%;
    opacity: 0;
    max-height: 0;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #374151;
    transition: max-height 0.24s ease, opacity 0.24s ease, margin-top 0.24s ease;
}

.leadership-bubble:hover .lead-hint,
.leadership-bubble:focus-visible .lead-hint {
    opacity: 1;
    max-height: 80px;
    margin-top: 0.25rem;
}

.bubble-size-sm,
.bubble-size-md,
.bubble-size-lg,
.bubble-size-xl {
    width: clamp(150px, 18vw, 190px);
}

.bubble-lead {
    background: linear-gradient(145deg, #e9e6ff 0%, #daceff 100%);
}

.bubble-idea {
    background: linear-gradient(145deg, #fff3e2 0%, #ffe4c2 100%);
}

.bubble-debate {
    background: linear-gradient(145deg, #ffe8f0 0%, #ffd4e5 100%);
}

.bubble-innovation {
    background: linear-gradient(145deg, #e4f7ff 0%, #cae9ff 100%);
}

.bubble-empathy {
    background: linear-gradient(145deg, #e7fbef 0%, #cdf5dc 100%);
}

.bubble-strategy {
    background: linear-gradient(145deg, #e7f0ff 0%, #d7e5ff 100%);
}

.bubble-special {
    background: linear-gradient(145deg, #dcf9ff 0%, #c9f4f0 100%);
    box-shadow: 0 14px 32px rgba(0, 179, 164, 0.2);
}

.leadership-bubble:nth-child(odd) {
    animation-name: bubbleFloatIn, slowFloatA;
    animation-duration: 0.6s, 7s;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease, ease-in-out;
}

.leadership-bubble:nth-child(even) {
    animation-name: bubbleFloatIn, slowFloatB;
    animation-duration: 0.6s, 8s;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease, ease-in-out;
}

@keyframes bubbleFloatIn {
    from { opacity: 0; transform: scale(0.86); }
    to { opacity: 1; transform: scale(1); }
}

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

@keyframes slowFloatB {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

.leadership-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10050;
}

.leadership-modal.show {
    display: flex;
}

.leadership-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
}

.leadership-modal-card {
    position: relative;
    width: min(92vw, 520px);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 1.4rem 1.2rem;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.leadership-modal-card h3 {
    font-family: var(--font-heading);
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.leadership-modal-card p {
    color: var(--color-gray);
    line-height: 1.7;
}

.leadership-modal-close {
    position: absolute;
    right: 0.8rem;
    top: 0.7rem;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    cursor: pointer;
    color: #334155;
}

@media (min-width: 760px) {
    .leadership-network {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem 1.2rem;
    }
}

@media (min-width: 1100px) {
    .leadership-network {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

/* ============================================
   JSC 2026 DAILY SCHEDULE
   ============================================ */

.schedule-2026 {
    background: linear-gradient(180deg, #ffffff 0%, #f7fffd 100%);
}

.schedule-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.schedule-cards {
    display: grid;
    gap: 0.9rem;
}

.schedule-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 179, 164, 0.18);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    animation: scheduleFadeIn 0.45s ease both;
}

.schedule-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 122, 0, 0.35);
}

.schedule-time {
    display: inline-block;
    margin-bottom: 0.55rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 179, 164, 0.1);
    color: #0f766e;
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.4px;
}

.schedule-session {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-dark-light);
}

.schedule-icon {
    font-size: 1.05rem;
}

.schedule-rotations {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.batch-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.28rem 0.48rem;
    background: rgba(26, 26, 26, 0.04);
    font-size: 0.82rem;
    font-weight: 600;
}

.cat-chip {
    border-radius: 999px;
    padding: 0.2rem 0.56rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.cat-dance {
    background: rgba(255, 122, 0, 0.15);
    color: #b45309;
}

.cat-music {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.cat-art {
    background: rgba(168, 85, 247, 0.15);
    color: #7e22ce;
}

.cat-literary {
    background: rgba(14, 165, 233, 0.14);
    color: #0369a1;
}

.cat-activities {
    background: rgba(34, 197, 94, 0.16);
    color: #166534;
}

.schedule-break {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.45);
}

.schedule-lunch {
    background: linear-gradient(135deg, rgba(255, 244, 163, 0.45), rgba(255, 248, 240, 0.9));
}

.schedule-side-panel {
    display: grid;
    gap: 0.9rem;
}

.rotation-card,
.phase-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 179, 164, 0.18);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rotation-card:hover,
.phase-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.rotation-card h3,
.phase-card h3 {
    margin-bottom: 0.85rem;
    font-family: var(--font-heading);
    color: var(--color-dark-light);
}

.rotation-list {
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.rotation-list li {
    display: grid;
    gap: 0.2rem;
}

.batch-name {
    font-weight: 700;
    color: var(--color-orange);
}

.batch-flow {
    color: var(--color-gray);
    font-size: 0.9rem;
    line-height: 1.45;
}

.phase-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.phase-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(0, 179, 164, 0.1);
    color: #115e59;
    font-weight: 600;
    font-size: 0.84rem;
    padding: 0.38rem 0.7rem;
}

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

@media (min-width: 900px) {
    .schedule-layout {
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
        gap: 1.2rem;
        align-items: start;
    }

    .schedule-side-panel {
        position: sticky;
        top: 5.5rem;
    }
}

/* ============================================
   GALLERY SECTION
   ============================================ */

.gallery {
    background: linear-gradient(180deg, #ffffff 0%, #f7fffd 100%);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.gallery-subsection {
    margin-top: 1.3rem;
}

.gallery-subsection-title {
    font-family: var(--font-accent);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark-light);
    margin-bottom: 0.75rem;
}

.gallery-item {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    padding: 0.75rem;
    border: 1px solid rgba(0, 179, 164, 0.14);
    box-shadow: var(--shadow-sm);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.gallery-grid-images-only .gallery-item {
    padding: 0.65rem;
}

.gallery-grid-images-only .gallery-media {
    aspect-ratio: 4 / 3;
}

.gallery-grid-videos-only .gallery-media {
    aspect-ratio: auto;
    height: auto;
    min-height: 220px;
    padding: 0.4rem;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 122, 0, 0.25);
}

.gallery-media {
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, #f7fbff, #f4fffb);
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
}

.gallery-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.gallery-media video {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    border-radius: 12px;
    background: #000;
}

.gallery-media.video-frame {
    background: #000;
}

.gallery-media.media-warning {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
    padding: 1rem;
    background: #fff7ed;
}

.gallery-media.media-warning p {
    color: #7c2d12;
    font-size: 0.9rem;
    line-height: 1.4;
}

.gallery-media.media-warning a {
    color: #ea580c;
    font-weight: 700;
    text-decoration: none;
}

.gallery-item:hover .gallery-media img {
    transform: scale(1.04);
}

.gallery-caption {
    padding: 0.75rem 0.35rem 0.2rem;
    text-align: center;
    font-family: var(--font-accent);
    font-weight: 600;
    color: var(--color-dark-light);
}

.gallery-page-header {
    background: linear-gradient(135deg, rgba(255, 122, 0, 0.1), rgba(0, 179, 164, 0.12));
    padding: 2.2rem 0 1.2rem;
}

.gallery-page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gallery-page-kicker {
    font-family: var(--font-accent);
    font-weight: 600;
    color: var(--color-orange);
    margin-bottom: 0.35rem;
}

.gallery-page-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--color-dark);
}

.camp-page-header {
    background: linear-gradient(135deg, rgba(255, 122, 0, 0.12), rgba(0, 179, 164, 0.14));
    padding: 2.2rem 0 1.2rem;
}

.camp-page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.camp-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.camp-register-btn {
    white-space: nowrap;
}

.camp-register-cta-section {
    background: linear-gradient(180deg, rgba(255, 213, 74, 0.22) 0%, rgba(83, 198, 197, 0.12) 100%);
    padding: 2.5rem 0;
    text-align: center;
}

.camp-register-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}

.camp-register-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.camp-register-cta-text {
    color: var(--color-gray);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.camp-register-cta-btn {
    display: inline-block;
    padding: 0.85rem 2rem;
}

.camp-page-kicker {
    font-family: var(--font-accent);
    font-weight: 600;
    color: var(--color-orange);
    margin-bottom: 0.35rem;
}

.camp-page-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--color-dark);
}

.camp-page-subtitle {
    color: var(--color-gray);
    margin-top: 0.3rem;
}

.camp-page-intro {
    background: #f9fcfb;
    padding-top: 1.2rem;
    padding-bottom: 0.5rem;
}

.camp-page-intro-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 179, 164, 0.16);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.15rem;
}

.camp-page-intro-card h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-dark);
    margin-bottom: 0.55rem;
}

.camp-page-intro-card p {
    color: var(--color-gray);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 0.55rem;
}

.camp-page-intro-card p:last-child {
    margin-bottom: 0;
}

.camp-schedule,
.camp-roles {
    background: #f9fcfb;
}

.camp-pricing {
    background: #f9fcfb;
    padding-bottom: 1rem;
}

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

.camp-nextgen-images {
    background: #f9fcfb;
    padding-top: 0.6rem;
    padding-bottom: 1rem;
}

.nextgen-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.nextgen-image-card {
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 16px;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nextgen-image-card img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(83, 198, 197, 0.20));
}

.camp-roles {
    padding-top: 0;
}

.table-grid {
    display: grid;
    gap: 1rem;
}

.table-grid.two-col {
    grid-template-columns: 1.45fr 1fr;
}

.table-card {
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid rgba(0, 179, 164, 0.55);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.table-title {
    margin: 0;
    padding: 0.85rem 1rem;
    font-family: var(--font-accent);
    font-size: 1.02rem;
    font-weight: 700;
    background: rgba(0, 179, 164, 0.08);
    border-bottom: 1px solid rgba(0, 179, 164, 0.28);
}

.table-card table {
    width: 100%;
    border-collapse: collapse;
}

.table-card th,
.table-card td {
    text-align: left;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid rgba(0, 179, 164, 0.2);
    font-size: 0.95rem;
}

.table-card th {
    background: rgba(255, 230, 109, 0.28);
    font-family: var(--font-accent);
    font-weight: 700;
}

.table-card tbody tr:nth-child(even) {
    background: rgba(240, 253, 250, 0.55);
}

/* ============================================
   CONTACT SECTION
   ============================================ */

.contact {
    background: var(--color-pastel-teal);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    text-align: center;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.contact-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.contact-card p {
    color: var(--color-gray);
}

.contact-form-wrapper {
    position: relative;
}

.track-card-link {
    cursor: pointer;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    position: relative;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-dark);
    transition: var(--transition);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-orange);
    box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.1);
    transform: translateY(-2px);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-submit {
    width: 100%;
    margin-top: 0.5rem;
}

/* Camp city data table (replaces enrollment form block) */
.camp-city-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.camp-city-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(83, 198, 197, 0.24);
    border-radius: 20px;
    box-shadow:
        0 16px 40px rgba(83, 198, 197, 0.14),
        0 10px 28px rgba(84, 168, 106, 0.08);
    overflow: hidden;
}

.camp-city-title {
    margin: 0;
    padding: 1rem 1.15rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-dark);
    background: rgba(83, 198, 197, 0.14);
    border-bottom: 1px solid rgba(83, 198, 197, 0.2);
}

.camp-city-table-wrap {
    overflow-x: auto;
}

.camp-city-table {
    width: 100%;
    border-collapse: collapse;
}

.camp-city-table th,
.camp-city-table td {
    text-align: left;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid rgba(83, 198, 197, 0.16);
    font-size: 0.95rem;
    color: var(--color-dark-light);
    vertical-align: top;
}

.camp-city-table th {
    background: rgba(255, 213, 74, 0.22);
    color: var(--color-dark);
    font-family: var(--font-accent);
    font-weight: 700;
}

.camp-city-table tbody tr:nth-child(even) {
    background: rgba(240, 253, 250, 0.5);
}

/* Sample contact block (end of home page) */
.sample-contact-page {
    background: linear-gradient(180deg, #ffffff 0%, rgba(240, 253, 250, 0.65) 55%, rgba(255, 245, 230, 0.35) 100%);
    padding: 4rem 0;
}

.sample-contact-page .section-description {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

.sample-contact-inline-link {
    color: var(--color-orange);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sample-contact-inline-link:hover {
    color: var(--color-d15f16);
}

.sample-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.sample-contact-page .contact-card {
    text-align: left;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sample-contact-page .contact-card h3 {
    text-align: left;
    margin-bottom: 0.5rem;
    font-size: 1.35rem;
}

.sample-contact-lead {
    color: var(--color-gray);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.sample-contact-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sample-contact-list li {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(83, 198, 197, 0.18);
}

.sample-contact-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sample-contact-label {
    font-family: var(--font-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-teal);
}

.sample-contact-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    transition: var(--transition);
}

.sample-contact-value:hover {
    color: var(--color-orange);
}

.sample-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.sample-contact-btn {
    padding: 0.72rem 1.35rem;
    font-size: 0.92rem;
}

.sample-contact-page .sample-contact-actions .btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(209, 95, 22, 0.22);
}

.sample-contact-page .sample-contact-actions .btn-primary:hover {
    color: #fff;
}

.sample-contact-btn.sample-contact-btn--wa {
    background: transparent;
    color: var(--color-orange);
    border: 2px solid var(--color-orange);
    box-shadow: none;
}

.sample-contact-btn.sample-contact-btn--wa:hover {
    background: rgba(209, 95, 22, 0.08);
    transform: translateY(-2px);
}

.sample-contact-locations {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sample-contact-city-title {
    font-family: var(--font-accent);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 0.4rem;
}

.sample-contact-address {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-dark-light);
}

.sample-contact-address:last-child {
    margin-bottom: 0;
}

.sample-contact-quicklinks {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.sample-contact-quicklinks a {
    color: var(--color-orange);
    font-weight: 600;
    text-decoration: none;
    font-family: var(--font-accent);
    font-size: 0.98rem;
    transition: var(--transition);
}

.sample-contact-quicklinks a:hover {
    color: var(--color-d15f16);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sample-contact-note {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--color-gray);
    border-top: 1px solid rgba(83, 198, 197, 0.2);
}

@media (max-width: 768px) {
    .sample-contact-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: var(--color-pastel-orange);
    color: var(--color-dark);
    padding: 4rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.footer-brand p {
    color: var(--color-dark-light);
    line-height: 1.6;
}

.footer-column h4 {
    font-family: var(--font-accent);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.footer-column a {
    display: block;
    color: var(--color-gray);
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: var(--transition);
}

.footer-column a:hover {
    color: var(--color-orange);
    transform: translateX(5px);
}

.footer-social h4 {
    font-family: var(--font-accent);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 30, 35, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(242, 167, 52, 0.18);
    border-radius: 50%;
    text-decoration: none;
    font-size: 0;
    color: var(--color-dark);
    transition: var(--transition);
}

.social-icon-svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
}

.social-icon-svg--whatsapp {
    transform: scale(0.92);
}

.social-icon:hover {
    background: var(--gradient-primary);
    color: var(--color-white);
    transform: translateY(-5px) scale(1.1);
    border-color: transparent;
}

/* Fixed enquiry quick actions */
.enquiry-fab {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9100;
}

.enquiry-fab > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 0.8rem 1.05rem;
    border-radius: 999px;
    border: 2px solid rgba(83, 198, 197, 0.42);
    background: linear-gradient(135deg, rgba(255, 213, 74, 0.96), rgba(209, 95, 22, 0.92));
    color: #2b2118;
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow:
        0 12px 24px rgba(209, 95, 22, 0.24),
        0 0 24px rgba(83, 198, 197, 0.20);
}

.enquiry-fab > summary::-webkit-details-marker {
    display: none;
}

.enquiry-fab-menu {
    margin-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.enquiry-fab-icon {
    width: 1.12em;
    height: 1.12em;
    flex-shrink: 0;
    display: block;
}

.enquiry-fab-icon--whatsapp {
    transform: scale(0.95);
}

.enquiry-fab-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-decoration: none;
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.62rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-dark);
    border: 1px solid rgba(83, 198, 197, 0.28);
    box-shadow: 0 8px 20px rgba(83, 198, 197, 0.16);
}

.enquiry-fab-action.call:hover {
    background: rgba(255, 249, 232, 1);
}

.enquiry-fab-action.whatsapp:hover {
    background: rgba(240, 255, 247, 1);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(242, 167, 52, 0.16);
    color: var(--color-gray);
}

.footer-bottom p {
    margin-bottom: 0.5rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
    .hero-content {
        max-width: 760px;
        padding: 1.75rem 1.5rem;
    }

    .title-main {
        font-size: clamp(2.2rem, 6.8vw, 4rem);
        line-height: 1.12;
        margin-bottom: 0.8rem;
    }

    .title-sub {
        font-size: clamp(1.9rem, 4.4vw, 3rem);
    }

    .title-location {
        font-size: clamp(1.3rem, 2.8vw, 1.9rem);
    }

    .hero-subtitle {
        font-size: clamp(1rem, 2.2vw, 1.35rem);
        margin-bottom: 2.25rem;
    }

    .venue-marquee {
        max-width: 740px;
        margin-top: 2.25rem;
        padding: 0.85rem 1.2rem;
    }

    .marquee-content {
        font-size: 1.05rem;
        animation-duration: 22s;
    }

    .interactive-character {
        display: none;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .philosophy-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .philosophy-svg-container {
        grid-row: 1; /* Keep the circle at the top on mobile */
    }
    
    .pillar-left, .pillar-right {
        text-align: center;
        padding: 2rem;
    }
    
    .pillar-left::before, .pillar-right::before {
        display: none;
    }
    
    .pillar {
        position: static;
        transform: none;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .camp-city-grid {
        grid-template-columns: 1fr;
    }

    .floating-stickers .sticker {
        width: clamp(78px, 15vw, 148px);
        opacity: 0.92;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .enquiry-fab {
        right: 0.7rem;
        top: auto;
        bottom: 1rem;
        transform: none;
    }

    .enquiry-fab > summary {
        padding: 0.72rem 0.95rem;
        font-size: 0.88rem;
    }

    .enquiry-fab-action {
        font-size: 0.84rem;
        padding: 0.56rem 0.74rem;
    }
}

/* Fixed Register Now button (home only) */
.fixed-register-btn {
    position: fixed;
    left: 1rem;
    bottom: 1.1rem;
    z-index: 9050;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-orange), #ffb347);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    box-shadow:
        0 14px 30px rgba(209, 95, 22, 0.35),
        0 0 20px rgba(83, 198, 197, 0.35);
    transform: translateY(0);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.fixed-register-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 40px rgba(209, 95, 22, 0.45),
        0 0 24px rgba(83, 198, 197, 0.4);
}

@media (max-width: 768px) {
    .fixed-register-btn {
        left: 0.9rem;
        bottom: 0.9rem;
        padding: 0.75rem 1.35rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    section {
        padding: 4rem 0;
    }
    
    .container {
        padding: 0 1.5rem;
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }

    .track-card-actions .track-register-btn {
        width: 100%;
    }
    
    .tracks-grid,
    .pricing-grid,
    .framework-grid,
    .curriculum-grid,
    .gallery-grid,
    .alignment-grid,
    .outcomes-grid {
        grid-template-columns: 1fr;
    }
    
    .track-featured {
        transform: none;
    }
    
    .timeline-container {
        padding-left: 2rem;
    }
    
    .timeline-item {
        padding-left: 2rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .social-icons {
        justify-content: center;
    }
}

@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .gallery-page-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .camp-page-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .camp-header-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .camp-header-actions .camp-back-btn,
    .camp-header-actions .camp-register-btn {
        width: 100%;
        text-align: center;
    }

    .nextgen-images-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .nextgen-image-card img {
        max-height: 170px;
    }

}

@media (max-width: 900px) {
    .table-grid.two-col {
        grid-template-columns: 1fr;
    }

    .table-card {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .hero-content {
        padding: 1.5rem;
    }
    
    .title-main {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }
    
    .title-sub {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }
    
    .btn-hero {
        padding: 1rem 2.5rem;
        font-size: 1rem;
    }
    
    .shape {
        opacity: 0.2;
    }
    
    .child-illustration {
        opacity: 0.15;
    }
    
    .scroll-indicator {
        bottom: 2rem;
        display: none;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 0;
    }
    
    .hero-content {
        padding: 1rem;
    }
    
    .title-main {
        font-size: clamp(1.8rem, 10vw, 2.5rem);
        margin-bottom: 0.75rem;
    }
    
    .title-sub {
        font-size: clamp(1.3rem, 6vw, 2rem);
    }
    
    .title-location {
        font-size: clamp(1rem, 4vw, 1.4rem);
    }
    
    .hero-subtitle {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
        margin-bottom: 2rem;
    }
    
    .btn-hero {
        padding: 0.9rem 2rem;
        font-size: 0.95rem;
    }
    
    .scroll-indicator {
        bottom: 1.5rem;
        display: none;
    }
    
    .scroll-text {
        font-size: 0.75rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .glass-card {
        padding: 1.5rem;
    }
    
    .about-features {
        flex-direction: column;
        gap: 1rem;
    }

    .floating-stickers .sticker {
        width: clamp(72px, 22vw, 118px);
        opacity: 0.88;
    }

    .floating-stickers .s6,
    .floating-stickers .s7,
    .floating-stickers .s8,
    .floating-stickers .s9 {
        display: none;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* Smooth scroll reveal */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   CHILD THEME: CUSTOM CURSOR & PLAYFUL NAVBAR
   ============================================ */
.custom-cursor {
    position: fixed;
    top: -20px; left: -20px;
    width: 24px; height: 24px;
    background: var(--color-d15f16);
    border: 3px solid var(--color-white);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    box-shadow:
        0 4px 10px rgba(209, 95, 22, 0.35),
        0 0 18px rgba(83, 198, 197, 0.22);
    transition: width 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), height 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), background 0.3s;
}

/* Disable custom cursor/trail to avoid overlay dots */
.custom-cursor,
.cursor-trail {
    display: none !important;
}

.custom-cursor.hovering {
    width: 60px; height: 60px;
    background: rgba(83, 198, 197, 0.40);
    border-color: var(--color-54a86a);
    box-shadow:
        0 10px 30px rgba(83, 198, 197, 0.28),
        0 0 26px rgba(84, 168, 106, 0.18);
}

.cursor-trail {
    position: fixed;
    width: 12px; height: 12px;
    background: var(--color-yellow);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: fadeAndShrink 0.8s forwards;
    transform: translate(-50%, -50%);
}

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

/* Kids Navbar */
.kids-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1000px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(15px);
    border: 3px solid var(--color-d15f16);
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 2rem;
    box-shadow: 0 10px 30px rgba(242, 167, 52, 0.14);
    z-index: 9000;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.kids-nav.scrolled {
    top: 10px;
    border-color: var(--color-54a86a);
    box-shadow:
        0 15px 40px rgba(83, 198, 197, 0.22),
        0 0 26px rgba(209, 95, 22, 0.14);
    padding: 0.5rem 2rem;
}

/* Quick links bar */
.quick-links-bar {
    position: sticky;
    top: var(--nav-height);
    z-index: 80;
    background: rgba(255, 252, 245, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(178, 118, 39, 0.25);
}

.quick-links-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0.45rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
}

.quick-link-btn {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(139, 94, 40, 0.35);
    background: #fffdf7;
    color: #4a3420;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.quick-link-btn:hover {
    background: #ffe6b8;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.quick-link-primary {
    background: var(--color-orange);
    color: #fff;
    border-color: var(--color-orange);
}

.quick-link-primary:hover {
    background: #ff9a32;
}

@media (max-width: 768px) {
    .quick-links-inner {
        justify-content: flex-start;
        overflow-x: auto;
        padding-inline: 0.75rem;
    }

    .quick-links-bar {
        top: calc(var(--nav-height) - 4px);
    }
}

.nav-logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
    line-height: 0;
}

.nav-logo:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 4px;
    border-radius: 8px;
}

.nav-logo-img {
    height: 46px;
    width: auto;
    max-width: min(200px, 42vw);
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.nav-logo:hover {
    transform: scale(1.06) rotate(-1deg);
}

.nav-logo:hover .nav-logo-img {
    filter: drop-shadow(0 2px 8px rgba(209, 95, 22, 0.2));
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    font-family: var(--font-accent);
    font-weight: 600;
    color: var(--color-dark);
    font-size: 1.1rem;
    position: relative;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background: var(--color-pastel-yellow);
    color: var(--color-d15f16);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 0 20px rgba(83, 198, 197, 0.22);
}

.btn-enroll-nav {
    background: var(--gradient-primary);
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-family: var(--font-accent);
    font-weight: bold;
    box-shadow:
        0 4px 15px rgba(209, 95, 22, 0.28),
        0 0 22px rgba(83, 198, 197, 0.18);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-enroll-nav:hover {
    transform: scale(1.15) rotate(-3deg);
    box-shadow:
        0 8px 25px rgba(209, 95, 22, 0.46),
        0 0 34px rgba(84, 168, 106, 0.22);
    color: white;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 9001; /* Keep above mobile menu */
}

.hamburger span {
    width: 30px; height: 4px;
    background: var(--color-53c6c5);
    border-radius: 4px;
    transition: 0.3s;
}

.hamburger.toggle span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background: var(--color-d15f16);
}

.hamburger.toggle span:nth-child(2) {
    opacity: 0;
}

.hamburger.toggle span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background: var(--color-d15f16);
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 80px; left: 50%;
        transform: translateX(-50%) scale(0);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        width: 90%;
        padding: 2.5rem;
        border-radius: 24px;
        border: 4px solid var(--color-orange);
        box-shadow: 0 20px 50px rgba(255, 213, 74, 0.22);
        opacity: 0;
        transform-origin: top center;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        z-index: 9000;
    }
    .nav-links.active {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    .nav-link {
        font-size: 1.3rem;
        width: 100%;
        text-align: center;
        padding: 1rem;
    }
    .hamburger { display: flex; }
    .btn-enroll-nav { display: none; }
}

/* Hero Floating HTML Characters */
.hero-character {
    position: absolute;
    bottom: clamp(-2.5rem, 1vh, 1rem);
    width: clamp(150px, 23vw, 340px);
    z-index: 5;
    opacity: 1;
    pointer-events: none;
    filter: saturate(1.08) contrast(1.04)
        drop-shadow(0 0 14px rgba(242, 167, 52, 0.26))
        drop-shadow(0 0 18px rgba(83, 198, 197, 0.28))
        drop-shadow(0 14px 24px rgba(84, 168, 106, 0.22));
}
.hero-char-left {
    left: clamp(0.5rem, 4vw, 6rem);
}
.hero-char-right {
    right: clamp(0.5rem, 4vw, 6rem);
}
@media (max-width: 1024px) {
    .hero-character {
        display: block;
        width: clamp(110px, 22vw, 190px);
        bottom: clamp(-1.2rem, 1vh, 0.4rem);
        opacity: 0.95;
    }
}
@media (max-width: 768px) {
    .hero-character {
        width: clamp(130px, 34vw, 210px);
        bottom: -0.75rem;
    }
    .hero-char-left { left: 0.3rem; }
    .hero-char-right { right: 0.3rem; }
}
@media (max-width: 480px) {
    .hero-character {
        width: clamp(115px, 36vw, 165px);
        bottom: -0.7rem;
    }
}

/* ============================================
   GLOBAL RESPONSIVE HARDENING
   ============================================ */

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

section {
    overflow-x: clip;
}

@media (max-width: 1024px) {
    .container {
        width: min(100%, 100%);
    }

    .section-header .section-title {
        line-height: 1.2;
    }

    .track-card,
    .curriculum-card,
    .alignment-badge,
    .contact-card {
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .hero {
        min-height: 100svh;
        height: auto;
        padding: 6rem 0 3rem;
    }

    .hero-content {
        width: calc(100% - 1.5rem);
        margin: 0 auto;
    }

    .venue-marquee {
        max-width: 100%;
    }

    .marquee-content {
        font-size: 0.95rem;
    }

    .schedule-layout {
        grid-template-columns: 1fr;
    }

    .schedule-side-panel {
        position: static;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .kids-nav {
        padding: 0.65rem 0.9rem;
        gap: 0.6rem;
    }

    .nav-logo-img {
        height: 36px;
        max-width: min(160px, 48vw);
    }

    .hero-subtitle {
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-logo-img {
        width: 100%;
        max-height: 34vh;
    }

    .title-location {
        font-size: clamp(1.3rem, 4vw, 2.2rem);
    }

    .hero-subtitle {
        font-size: clamp(1.05rem, 3.3vw, 1.55rem);
    }

    /* Reserve room for larger bottom characters on mobile */
    .hero-content {
        padding-bottom: 4.5rem;
    }

    .venue-marquee {
        margin-bottom: 2.4rem;
    }

    .modules-network {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .module-bubble {
        width: min(44vw, 170px);
    }

    .leadership-network {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .bubble-size-sm,
    .bubble-size-md,
    .bubble-size-lg,
    .bubble-size-xl {
        width: min(42vw, 170px);
    }

    .lead-title {
        font-size: clamp(0.72rem, 2.5vw, 0.9rem);
    }

    .lead-hint {
        font-size: 0.68rem;
    }
}

@media (max-width: 520px) {
    html {
        font-size: 13px;
    }

    .title-main {
        line-height: 1.08;
    }

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

    .hero-logo-wrap {
        margin: 0.6rem auto 0.45rem;
    }

    .hero-logo-img {
        width: 100%;
        max-height: 28vh;
    }

    .title-location {
        font-size: clamp(1.15rem, 6vw, 1.65rem);
    }

    .hero-subtitle {
        font-size: clamp(0.98rem, 4.7vw, 1.25rem);
    }

    /* Extra clearance on very small phones */
    .hero-content {
        padding-bottom: 5.1rem;
    }

    .venue-marquee {
        margin-bottom: 2.9rem;
    }

    .modules-network,
    .leadership-network {
        grid-template-columns: 1fr;
    }

    .module-bubble,
    .bubble-size-sm,
    .bubble-size-md,
    .bubble-size-lg,
    .bubble-size-xl {
        width: min(82vw, 210px);
    }

    .schedule-card {
        padding: 0.9rem;
    }

    .batch-chip {
        font-size: 0.78rem;
    }

    .leadership-modal-card {
        width: min(94vw, 520px);
        padding: 1.1rem 1rem;
    }
}

@media (hover: none), (pointer: coarse) {
    .custom-cursor,
    .cursor-trail,
    .interactive-character {
        display: none !important;
    }

    .module-desc,
    .lead-hint {
        opacity: 1;
        max-height: 100px;
        margin-top: 0.2rem;
    }
}