*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#6366f1;--dark:#0f0f0f;--light:#fafafa;--gray:#6b7280;--cream:#f8f7f4}
body{font-family:'Sora',sans-serif;color:var(--dark);background:var(--light)}
.container{max-width:1200px;margin:0 auto;padding:0 5%}

/* Nav */
.nav{position:fixed;top:0;width:100%;padding:1.5rem 5%;display:flex;justify-content:space-between;align-items:center;z-index:100;background:rgba(250,250,250,0.9);backdrop-filter:blur(10px)}
.nav-logo{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:600}
.nav-links{display:flex;gap:2rem}
.nav-links a{text-decoration:none;color:var(--gray);font-size:.85rem;font-weight:500;transition:.3s}
.nav-links a:hover{color:var(--primary)}

/* Hero - Dynamic */
.hero{min-height:100vh;position:relative;overflow:hidden;background:#0f0f0f;padding:8rem 5% 4rem}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translate(-50%,-50%);object-fit:cover;filter:saturate(1.2) sepia(0.15) brightness(0.85) contrast(1.05)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,15,15,0.4) 0%,rgba(15,15,15,0.6) 50%,rgba(15,15,15,0.85) 100%)}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:70vh}
.hero-label{font-size:.8rem;letter-spacing:3px;text-transform:uppercase;color:#fff;margin-bottom:1.5rem;font-weight:500;text-shadow:0 2px 10px rgba(0,0,0,0.5)}
.hero-title{font-family:'Fraunces',serif;font-size:clamp(3rem,7vw,5.5rem);font-weight:700;line-height:1.1;margin-bottom:1.5rem;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,0.4)}
.hero-title .highlight{background:linear-gradient(135deg,#fcd34d,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
.hero-subtitle{font-size:1.2rem;color:#fff;line-height:1.8;margin-bottom:2.5rem;max-width:650px;text-shadow:0 2px 10px rgba(0,0,0,0.5);font-weight:400}
.hero-cta-group{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn{padding:.9rem 2rem;border-radius:50px;font-size:.9rem;font-weight:500;text-decoration:none;transition:.3s}
.btn-primary{background:#fff;color:var(--dark)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.btn-outline{border:2px solid #fff;color:#fff}
.btn-outline:hover{background:#fff;color:var(--dark)}
.hero-stats{position:relative;z-index:2;display:flex;justify-content:center;gap:3rem;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.2)}
.hero-stat{text-align:center;font-size:.9rem;color:rgba(255,255,255,0.7)}
.hero-stat span{display:block;font-family:'Fraunces',serif;font-size:2.5rem;font-weight:600;color:#fff}

/* Sections */
section{padding:6rem 5%}
.section-header{margin-bottom:3rem}
.section-number{font-size:.7rem;letter-spacing:3px;color:var(--primary);font-weight:600}
.section-title{font-family:'Fraunces',serif;font-size:clamp(2rem,4vw,3rem);margin-top:.5rem}
.section-intro{color:var(--gray);max-width:600px;line-height:1.8;margin-bottom:2rem}
.lead{font-size:1.2rem;font-weight:500;line-height:1.6;margin-bottom:1.5rem}

/* ========================================
   MY SCHOOL SECTION
   ======================================== */

.my-school-section {
    padding: 5rem 5%;
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a2e 100%);
    position: relative;
    overflow: hidden;
}

.my-school-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at 100% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.school-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.school-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.school-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.school-image-wrapper:hover img {
    transform: scale(1.03);
}

.school-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.badge-year {
    font-family: 'Fraunces', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
}

.school-content {
    color: #fff;
}

.school-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    margin-bottom: 1rem;
}

.school-content h2 {
    font-family: 'Fraunces', serif;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.school-description {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.school-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.school-stat {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.school-stat svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

/* My School Responsive */
@media (max-width: 768px) {
    .school-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .school-content h2 {
        font-size: 2rem;
    }

    .school-stats {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .my-school-section {
        padding: 4rem 5%;
    }

    .school-content h2 {
        font-size: 1.75rem;
    }

    .school-description {
        font-size: 0.9rem;
    }

    .school-stat {
        font-size: 0.8rem;
    }

    .school-stat svg {
        width: 18px;
        height: 18px;
    }
}

/* About */
.about{background:var(--light)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-text p{color:var(--gray);line-height:1.9;margin-bottom:1rem}
.about-image img{width:100%;border-radius:12px}

/* PTOC Journey Section */
.ptoc-section{background:var(--cream);overflow:hidden}

/* PTOC Label with Tooltip */
.ptoc-label{position:relative;cursor:pointer;display:inline-block}
.ptoc-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(10px);background:var(--dark);color:#fff;padding:.5rem 1rem;border-radius:8px;font-size:.75rem;font-family:'Sora',sans-serif;font-weight:400;white-space:nowrap;opacity:0;visibility:hidden;transition:all .3s ease;pointer-events:none}
.ptoc-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--dark)}
.ptoc-label:hover .ptoc-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* Journey Container */
.journey-container{perspective:1000px;margin-bottom:4rem}

/* Burrow Path - Illustrated Tunnel */
.burrow{position:relative;height:420px;border-radius:20px;padding:2rem;overflow:visible;transform-style:preserve-3d;transition:transform 1s ease,opacity 0.8s ease;background:linear-gradient(180deg,#2d1810 0%,#4a2c1a 30%,#5c3a24 50%,#4a2c1a 70%,#2d1810 100%)}
/* Tunnel arch effect */
.burrow::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 120% 100% at 50% 0%,transparent 40%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,0.9) 100%);pointer-events:none;border-radius:20px}
/* Warm glow from end of tunnel */
.burrow::after{content:'';position:absolute;right:0;top:0;bottom:0;width:200px;background:radial-gradient(ellipse at 100% 50%,rgba(255,200,100,0.3) 0%,transparent 70%);pointer-events:none;border-radius:0 20px 20px 0}
/* Ground/path */
.burrow-path{position:absolute;bottom:30%;left:0;right:0;height:60px;background:linear-gradient(180deg,#3d2817 0%,#5c3a24 50%,#4a2c1a 100%);box-shadow:0 -5px 20px rgba(0,0,0,0.4),inset 0 5px 15px rgba(0,0,0,0.3)}
.burrow-path::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:repeating-linear-gradient(90deg,transparent 0px,transparent 80px,rgba(0,0,0,0.15) 80px,rgba(0,0,0,0.15) 82px);opacity:0.5}
/* Roots hanging from ceiling */
.burrow .roots{position:absolute;top:0;left:0;right:0;height:80px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cpath d='M10,0 Q15,40 10,70 M30,0 Q25,30 35,55 M50,0 Q55,35 48,60 M70,0 Q65,25 72,50 M90,0 Q95,45 88,75 M110,0 Q105,30 115,55 M130,0 Q135,40 128,65 M150,0 Q145,35 155,60 M170,0 Q175,25 168,50 M190,0 Q185,45 192,70' stroke='%234a3020' stroke-width='3' fill='none' opacity='0.6'/%3E%3C/svg%3E") repeat-x;opacity:0.7}
/* Stones on ground */
.burrow .stones{position:absolute;bottom:28%;left:0;right:0;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30'%3E%3Cellipse cx='30' cy='20' rx='12' ry='8' fill='%23665544' opacity='0.5'/%3E%3Cellipse cx='80' cy='22' rx='8' ry='5' fill='%23554433' opacity='0.4'/%3E%3Cellipse cx='150' cy='18' rx='15' ry='9' fill='%23665544' opacity='0.5'/%3E%3Cellipse cx='220' cy='21' rx='10' ry='6' fill='%23554433' opacity='0.4'/%3E%3Cellipse cx='270' cy='19' rx='13' ry='7' fill='%23665544' opacity='0.5'/%3E%3C/svg%3E") repeat-x}

/* Chibi Container */
.chibi-container{position:absolute;bottom:20%;left:2%;z-index:20;transition:left 1.2s ease-in-out}
.chibi{width:80px;height:auto;filter:drop-shadow(0 5px 20px rgba(0,0,0,.6));animation:chibiWalk 0.5s ease-in-out infinite}
@keyframes chibiWalk{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}

/* Milestones with Icons */
.milestone{position:absolute;bottom:55%;z-index:5;display:flex;flex-direction:column;align-items:center;transition:all 0.4s ease}
.milestone[data-stage="1"]{left:6%}
.milestone[data-stage="2"]{left:28%}
.milestone[data-stage="3"]{left:50%}
.milestone[data-stage="4"]{left:72%}
.milestone-icon{width:55px;height:55px;background:rgba(255,255,255,0.15);border-radius:50%;padding:8px;transition:all 0.4s ease;opacity:0.5}
.milestone-icon svg{width:100%;height:100%}
.milestone.reached .milestone-icon{opacity:1;background:rgba(255,255,255,0.25);transform:scale(1.1)}
.milestone.active .milestone-icon{opacity:1;background:rgba(252,211,77,0.3);transform:scale(1.15);box-shadow:0 0 30px rgba(252,211,77,0.5)}
.today-icon{animation:glow 2s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 5px rgba(252,211,77,0.5))}50%{filter:drop-shadow(0 0 20px rgba(252,211,77,0.8))}}
.milestone-label{margin-top:6px;font-size:0.7rem;font-weight:600;color:rgba(255,255,255,0.9);text-transform:uppercase;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,0.5)}
/* Textbox appears ABOVE the icon */
.milestone-content{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:190px;margin-bottom:10px;background:rgba(255,255,255,0.95);padding:0.85rem;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:all .3s ease;text-align:center;backdrop-filter:blur(10px)}
.milestone-content::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);border:8px solid transparent;border-top-color:rgba(255,255,255,0.95)}
.milestone-content p{font-size:.72rem;color:var(--gray);line-height:1.5;margin:0}
.milestone.active .milestone-content,.milestone:hover .milestone-content{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-5px)}
/* Keep textbox visible after passing */
.milestone.reached .milestone-content{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* Mission Scroll */
.mission-scroll{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);width:300px;background:linear-gradient(135deg,#f5e6d3 0%,#e8d5b7 100%);border-radius:8px;padding:1.5rem;box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 20px rgba(139,115,85,0.2);opacity:0;visibility:hidden;transition:all 0.6s ease;z-index:25}
.mission-scroll::before,.mission-scroll::after{content:'';position:absolute;left:0;right:0;height:15px;background:linear-gradient(90deg,#c4a574,#d4b896,#c4a574);border-radius:8px}
.mission-scroll::before{top:-5px}
.mission-scroll::after{bottom:-5px}
.mission-scroll.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.scroll-content h4{font-family:'Fraunces',serif;font-size:1.2rem;color:#5c4a32;margin-bottom:0.75rem;text-align:center}
.scroll-content p{font-size:0.8rem;color:#6b5a47;line-height:1.6;text-align:center}

/* Vision State */
.vision-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3rem;background:linear-gradient(135deg,var(--cream) 0%,#f0e6d8 100%);border-radius:20px;opacity:0;visibility:hidden;transition:all 0.8s ease;z-index:30}
.vision-state.show{opacity:1;visibility:visible}
.vision-chibi{flex-shrink:0}
.vision-chibi img{width:150px;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,0.2));animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.vision-content{max-width:500px}
.vision-content h3{font-family:'Fraunces',serif;font-size:2.5rem;color:var(--dark);margin-bottom:1rem;background:linear-gradient(135deg,var(--primary),#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.vision-content p{font-size:1.1rem;color:var(--gray);line-height:1.9}

/* Animation States */
.journey-container{position:relative;min-height:450px}
.burrow{transition:opacity 0.8s ease,transform 0.8s ease}
.journey-container.show-vision .burrow{opacity:0;visibility:hidden;transform:scale(0.95)}
.journey-container.show-vision .vision-state{opacity:1;visibility:visible}

/* Values Section - New Design */
.values-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.values-section h3 {
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
    background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.values-intro {
    text-align: center;
    color: var(--gray);
    max-width: 550px;
    margin: 0 auto 3rem;
    line-height: 1.8;
    font-size: 1rem;
}

.values-grid-new {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.value-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--primary) 0%, #a855f7 100%);
    transition: height 0.4s ease;
    border-radius: 0 0 4px 0;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.1);
}

.value-card:hover::before {
    height: 100%;
}

.value-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    color: var(--primary);
    transition: all 0.4s ease;
}

.value-card:hover .value-icon {
    transform: scale(1.1) rotate(-5deg);
    color: #a855f7;
}

.value-content {
    flex: 1;
}

.value-number {
    font-family: 'Fraunces', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    opacity: 0.6;
    letter-spacing: 1px;
}

.value-content h4 {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    margin: 0.5rem 0 0.75rem;
    color: var(--dark);
    transition: color 0.3s ease;
}

.value-card:hover .value-content h4 {
    color: var(--primary);
}

.value-content p {
    font-size: 0.95rem;
    color: var(--gray);
    line-height: 1.7;
    margin: 0;
}

/* Value card color variations */
.value-card[data-value="1"] .value-icon { color: #ec4899; }
.value-card[data-value="1"]:hover { box-shadow: 0 20px 40px rgba(236, 72, 153, 0.15); }
.value-card[data-value="1"]::before { background: linear-gradient(180deg, #ec4899 0%, #f472b6 100%); }
.value-card[data-value="1"]:hover .value-content h4 { color: #ec4899; }

.value-card[data-value="2"] .value-icon { color: #8b5cf6; }
.value-card[data-value="2"]:hover { box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15); }
.value-card[data-value="2"]::before { background: linear-gradient(180deg, #8b5cf6 0%, #a78bfa 100%); }
.value-card[data-value="2"]:hover .value-content h4 { color: #8b5cf6; }

.value-card[data-value="3"] .value-icon { color: #f59e0b; }
.value-card[data-value="3"]:hover { box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15); }
.value-card[data-value="3"]::before { background: linear-gradient(180deg, #f59e0b 0%, #fbbf24 100%); }
.value-card[data-value="3"]:hover .value-content h4 { color: #f59e0b; }

.value-card[data-value="4"] .value-icon { color: #10b981; }
.value-card[data-value="4"]:hover { box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15); }
.value-card[data-value="4"]::before { background: linear-gradient(180deg, #10b981 0%, #34d399 100%); }
.value-card[data-value="4"]:hover .value-content h4 { color: #10b981; }

/* ========================================
   GROWTH SECTION - 2 Year Progress
   ======================================== */

.growth-section {
    margin-top: 4rem;
}

.growth-section > h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.subject-tag {
    font-family: 'Sora', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    padding: 0.35rem 0.9rem;
    border-radius: 50px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.growth-subtitle {
    color: var(--gray);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

/* Growth Cards Grid */
.growth-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.growth-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.growth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.growth-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.level-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.level-dot.critical { background: #ef4444; }
.level-dot.developing { background: #f59e0b; }
.level-dot.proficient { background: #10b981; }

.level-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray);
}

.growth-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.year-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.year-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.year-value {
    font-family: 'Fraunces', serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.year-value.old {
    color: #d1d5db;
}

.year-value.new {
    color: var(--dark);
}

.year-value.highlight {
    color: #10b981;
}

.change-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.change-indicator svg {
    width: 18px;
    height: 18px;
}

.change-indicator.down {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.change-indicator.up {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.change-indicator.steady {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.growth-card-footer {
    margin-top: auto;
}

.change-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
}

.change-badge.positive {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.change-badge.neutral {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.change-badge.success {
    background: #10b981;
    color: #fff;
}

/* Growth Quote */
.growth-quote {
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    font-style: normal;
    color: var(--dark);
    text-align: center;
    padding: 1.5rem 2rem;
    margin: 0 0 2.5rem 0;
    background: var(--cream);
    border-radius: 12px;
    border-left: none;
    line-height: 1.6;
}

.quote-highlight {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

/* ========================================
   ROCKET STAT ANIMATION
   ======================================== */

.rocket-stat-container {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 20px;
    padding: 3rem 2rem;
    margin: 0 0 2.5rem 0;
    position: relative;
    overflow: hidden;
}

/* Starry background */
.rocket-stat-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?w=1200&q=80');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.rocket-journey {
    position: relative;
    height: 280px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
}

/* Track with milestones */
.rocket-track {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.milestone-marker {
    position: relative;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.milestone-marker::after {
    content: attr(data-value) '%';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    transition: all 0.3s ease;
}

.milestone-marker.passed {
    background: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}

.milestone-marker.passed::after {
    color: #10b981;
}

.milestone-final {
    width: 12px;
    height: 12px;
    background: rgba(251, 191, 36, 0.3);
}

.milestone-final::after {
    font-weight: 700;
    font-size: 0.8rem;
    color: rgba(251, 191, 36, 0.6);
}

.milestone-final.passed {
    background: #fbbf24;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.8);
}

.milestone-final.passed::after {
    color: #fbbf24;
}

/* Rocket */
.rocket {
    position: absolute;
    bottom: 45px;
    left: 10%;
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    transition: left 0.1s linear;
    z-index: 10;
}

.rocket svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 15px rgba(255, 200, 100, 0.6));
}

.rocket.hidden {
    opacity: 0;
    transform: rotate(45deg) scale(0);
}

/* Burst Effect */
.rocket-burst {
    position: absolute;
    bottom: 55px;
    right: 10%;
    width: 100px;
    height: 100px;
    pointer-events: none;
    opacity: 0;
}

.rocket-burst.active {
    opacity: 1;
}

.burst-ring {
    position: absolute;
    inset: 0;
    border: 3px solid #fbbf24;
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
}

.rocket-burst.active .burst-ring {
    animation: burstRing 0.8s ease-out forwards;
}

@keyframes burstRing {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

.burst-particles {
    position: absolute;
    inset: 0;
}

.burst-particles span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #fbbf24;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.rocket-burst.active .burst-particles span {
    animation: burstParticle 0.8s ease-out forwards;
}

.burst-particles span:nth-child(1) { --angle: 0deg; --distance: 60px; }
.burst-particles span:nth-child(2) { --angle: 45deg; --distance: 70px; }
.burst-particles span:nth-child(3) { --angle: 90deg; --distance: 55px; }
.burst-particles span:nth-child(4) { --angle: 135deg; --distance: 65px; }
.burst-particles span:nth-child(5) { --angle: 180deg; --distance: 60px; }
.burst-particles span:nth-child(6) { --angle: 225deg; --distance: 70px; }
.burst-particles span:nth-child(7) { --angle: 270deg; --distance: 55px; }
.burst-particles span:nth-child(8) { --angle: 315deg; --distance: 65px; }

@keyframes burstParticle {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance));
    }
}

/* Stat Reveal */
.stat-reveal {
    text-align: center;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.stat-reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.stat-number {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 4rem;
    font-weight: 700;
    color: #10b981;
    text-shadow:
        0 0 30px rgba(16, 185, 129, 0.6),
        0 0 60px rgba(16, 185, 129, 0.4);
    animation: none;
}

.stat-reveal.visible .stat-number {
    animation: statRevealGlow 2s ease-in-out infinite;
}

@keyframes statRevealGlow {
    0%, 100% {
        text-shadow:
            0 0 30px rgba(16, 185, 129, 0.6),
            0 0 60px rgba(16, 185, 129, 0.4);
    }
    50% {
        text-shadow:
            0 0 40px rgba(16, 185, 129, 0.8),
            0 0 80px rgba(16, 185, 129, 0.6),
            0 0 100px rgba(16, 185, 129, 0.4);
    }
}

.stat-label-text {
    display: block;
    margin-top: 0.75rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.stat-highlight {
    color: #fbbf24;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

/* Rocket Responsive */
@media (max-width: 768px) {
    .rocket-stat-container {
        padding: 2rem 1rem;
    }

    .rocket-journey {
        height: 220px;
    }

    .rocket {
        width: 50px;
        height: 50px;
    }

    .stat-number {
        font-size: 3rem;
    }

    .milestone-marker::after {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .rocket-journey {
        height: 180px;
    }

    .rocket-track {
        left: 5%;
        right: 5%;
    }

    .rocket {
        width: 45px;
        height: 45px;
        left: 5%;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-label-text {
        font-size: 0.95rem;
    }
}

/* Unit Plan Section */
.unit-plan-section {
    margin-top: 2rem;
}

.unit-plan-section h4 {
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.unit-plan-section > p {
    color: var(--gray);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.spreadsheet-embed {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.spreadsheet-embed iframe {
    width: 100%;
    height: 500px;
    display: block;
}

/* ========================================
   CLASSROOM - Bento Grid Design
   ======================================== */

.classroom-new {
    background: var(--light);
    padding: 6rem 5%;
}

.classroom-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto auto;
    gap: 1.25rem;
    margin-bottom: 4rem;
}

.bento-card {
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bento-card:hover {
    transform: translateY(-4px);
}

/* Context Card - Large left card */
.bento-context {
    grid-column: span 5;
    grid-row: span 2;
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a2e 100%);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bento-context:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.bento-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 1rem;
}

.bento-context h3 {
    font-family: 'Fraunces', serif;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.bento-context p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.context-stats {
    display: flex;
    gap: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.stat-number {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.25rem;
}

/* Image Cards */
.bento-image {
    position: relative;
}

.bento-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.bento-image:hover img {
    transform: scale(1.05);
}

.bento-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    opacity: 1;
    transition: all 0.3s ease;
}

.bento-image:hover .bento-image-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.bento-image-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.bento-image-overlay p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.25rem;
}

/* Vocab Wall - Large image */
.bento-vocab {
    grid-column: span 4;
    grid-row: span 2;
    min-height: 380px;
}

/* Smaller images */
.bento-decor {
    grid-column: span 3;
    min-height: 180px;
}

.bento-safety {
    grid-column: span 3;
    min-height: 180px;
}

/* Interventions Card */
.bento-interventions {
    grid-column: span 6;
    background: #fff;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.bento-interventions:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
}

.bento-interventions .bento-label {
    color: var(--dark);
    margin-bottom: 1.25rem;
}

.intervention-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.intervention-item {
    display: flex;
    gap: 0.875rem;
    padding: 1rem;
    background: var(--cream);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-width: 0;
}

.intervention-item > div {
    min-width: 0;
    flex: 1;
}

.intervention-item:hover {
    background: rgba(99, 102, 241, 0.08);
    transform: translateX(4px);
}

.intervention-item svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--primary);
}

.intervention-item h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 0.25rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.intervention-item p {
    font-size: 0.75rem;
    color: var(--gray);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Second Decor Image */
.bento-decor2 {
    grid-column: span 6;
    min-height: 220px;
}

/* ========================================
   DEVELOPMENT TEAM - Bento Grid
   ======================================== */

.dev-team-section {
    padding: 6rem 5%;
    background: linear-gradient(180deg, #f8f7f4 0%, var(--light) 100%);
}

.dev-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 1.25rem;
}

.dev-card {
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dev-card:hover {
    transform: translateY(-4px);
}

.dev-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 1rem;
}

/* Context Card */
.dev-context {
    grid-column: span 5;
    background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dev-context:hover {
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
}

.dev-context .dev-label {
    color: rgba(255, 255, 255, 0.7);
}

.dev-context h3 {
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.dev-context p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.dev-stats {
    display: flex;
    gap: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

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

.dev-stat-number {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.dev-stat-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.25rem;
}

/* Image Cards */
.dev-image {
    position: relative;
}

.dev-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.dev-image:hover img {
    transform: scale(1.05);
}

.dev-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
}

.dev-image-overlay span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.dev-img1 {
    grid-column: span 3;
    min-height: 260px;
}

.dev-img2 {
    grid-column: span 4;
    min-height: 220px;
}

/* Partners Card */
.dev-partners {
    grid-column: span 4;
    background: #fff;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.dev-partners:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
}

.dev-partners .dev-label {
    color: var(--dark);
    margin-bottom: 1rem;
}

.partners-logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.partner-logo {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-height: 50px;
}

.partner-logo img {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.partner-logo:hover {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

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

/* Responsibilities Card */
.dev-responsibilities {
    grid-column: span 8;
    background: #fff;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.dev-responsibilities:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.dev-responsibilities .dev-label {
    color: var(--dark);
    margin-bottom: 1.25rem;
}

.responsibility-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.responsibility-item {
    display: flex;
    gap: 0.875rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--cream) 0%, #f5f0e8 100%);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-width: 0;
}

.responsibility-item:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    transform: translateX(4px);
}

.responsibility-item > div {
    min-width: 0;
    flex: 1;
}

.responsibility-item svg {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    color: var(--primary);
}

.responsibility-item h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 0.25rem;
}

.responsibility-item p {
    font-size: 0.75rem;
    color: var(--gray);
    line-height: 1.5;
}

/* ========================================
   BREAKTHROUGH ACTIONS - Compact Grid
   ======================================== */

.impact-section {
    padding: 6rem 5%;
    background: var(--light);
}

.impact-section .impact-intro {
    color: var(--gray);
    max-width: 600px;
    margin-bottom: 3rem;
    line-height: 1.8;
}

/* BA Grid */
.ba-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

/* BA Card */
.ba-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.ba-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* Card Image */
.ba-card-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.ba-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ba-card:hover .ba-card-image img {
    transform: scale(1.08);
}

.ba-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
}

.ba-tag {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
}

/* Card Content */
.ba-card-content {
    padding: 1.5rem;
}

.ba-card-content h4 {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    color: var(--dark);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.ba-card:hover .ba-card-content h4 {
    color: var(--primary);
}

.ba-card-content p {
    font-size: 0.9rem;
    color: var(--gray);
    line-height: 1.7;
}

/* Color accents for each card */
.ba-card:nth-child(1):hover { box-shadow: 0 20px 40px rgba(236, 72, 153, 0.2); }
.ba-card:nth-child(1) .ba-tag { background: rgba(236, 72, 153, 0.8); }
.ba-card:nth-child(1):hover h4 { color: #ec4899; }

.ba-card:nth-child(2):hover { box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2); }
.ba-card:nth-child(2) .ba-tag { background: rgba(139, 92, 246, 0.8); }
.ba-card:nth-child(2):hover h4 { color: #8b5cf6; }

.ba-card:nth-child(3):hover { box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2); }
.ba-card:nth-child(3) .ba-tag { background: rgba(16, 185, 129, 0.8); }
.ba-card:nth-child(3):hover h4 { color: #10b981; }

.ba-card:nth-child(4):hover { box-shadow: 0 20px 40px rgba(245, 158, 11, 0.2); }
.ba-card:nth-child(4) .ba-tag { background: rgba(245, 158, 11, 0.8); }
.ba-card:nth-child(4):hover h4 { color: #f59e0b; }

.ba-card:nth-child(5):hover { box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2); }
.ba-card:nth-child(5) .ba-tag { background: rgba(6, 182, 212, 0.8); }
.ba-card:nth-child(5):hover h4 { color: #06b6d4; }

/* Placeholder card */
.ba-card-placeholder {
    border: 2px dashed rgba(0,0,0,0.1);
    background: var(--cream);
}

.ba-card-placeholder .ba-card-image {
    background: linear-gradient(135deg, var(--cream) 0%, #e8e4df 100%);
}

.placeholder-overlay {
    background: none;
    align-items: center;
    justify-content: center;
}

.ba-coming {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray);
    letter-spacing: 1px;
}

/* Beyond */
.beyond{background:var(--cream)}
.beyond-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.beyond-item{background:#fff;border-radius:12px;overflow:hidden}
.beyond-item img{width:100%;height:180px;object-fit:cover}
.beyond-item h4{padding:1rem 1rem .25rem;font-size:.95rem}
.beyond-item p{padding:0 1rem 1rem;font-size:.8rem;color:var(--gray)}

/* Leadership */
.leadership{background:var(--light)}
.leadership-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.leadership-card{background:var(--cream);border-radius:12px;overflow:hidden}
.leadership-card img{width:100%;height:200px;object-fit:cover}
.leadership-card h4{padding:1.5rem 1.5rem .5rem;font-size:1.1rem}
.leadership-card p{padding:0 1.5rem 1.5rem;font-size:.9rem;color:var(--gray);line-height:1.6}

/* ========================================
   MY PILLARS - Emotional Section
   ======================================== */

.pillars-section {
    position: relative;
    padding: 6rem 5%;
    background: linear-gradient(180deg, #0a0a0f 0%, #0f0f18 50%, #0a0a0f 100%);
    overflow: hidden;
}

/* Bokeh Light Effects */
.pillars-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.bokeh-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: float-bokeh 8s ease-in-out infinite;
}

.light-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.light-2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, transparent 70%);
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.light-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

.light-4 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, transparent 70%);
    top: 30%;
    right: 30%;
    animation-delay: 1s;
}

.light-5 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%);
    bottom: 10%;
    right: 10%;
    animation-delay: 3s;
}

@keyframes float-bokeh {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -20px) scale(1.1); }
    66% { transform: translate(-15px, 15px) scale(0.95); }
}

/* Content */
.pillars-content {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

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

.pillars-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(251, 191, 36, 0.9);
    margin-bottom: 1rem;
}

.pillars-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.pillars-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* Cards Container */
.pillars-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-bottom: 4rem;
}

/* Individual Card */
.pillar-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pillar-card:hover {
    transform: translateY(-8px);
    border-color: rgba(251, 191, 36, 0.3);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 100px rgba(251, 191, 36, 0.1);
}

/* Card Glow Effect */
.pillar-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(251, 191, 36, 0.08) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.pillar-card:hover .pillar-glow {
    opacity: 1;
}

/* Card Image */
.pillar-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.pillar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.pillar-card:hover .pillar-image img {
    transform: scale(1.05);
}

/* Grid layout for multiple images */
.pillar-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.pillar-image-grid img {
    height: 100%;
}

/* Card Content */
.pillar-content {
    padding: 2rem;
}

.pillar-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.pillar-content h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.pillar-content p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.pillar-highlight {
    color: rgba(255, 255, 255, 0.85) !important;
    font-style: italic;
    padding-left: 1rem;
    border-left: 2px solid rgba(251, 191, 36, 0.5);
}

/* Bottom Quote */
.pillars-quote {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
}

.quote-icon {
    width: 40px;
    height: 40px;
    color: rgba(251, 191, 36, 0.4);
    margin-bottom: 1rem;
}

.pillars-quote p {
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}

/* Pillars Responsive */
@media (max-width: 768px) {
    .pillars-cards {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .pillar-image {
        height: 220px;
    }

    .pillars-quote p {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .pillars-section {
        padding: 4rem 5%;
    }

    .pillars-header {
        margin-bottom: 3rem;
    }

    .pillar-content {
        padding: 1.5rem;
    }

    .pillar-content h3 {
        font-size: 1.2rem;
    }

    .pillar-image {
        height: 200px;
    }

    .pillars-quote p {
        font-size: 1.1rem;
    }

    .bokeh-light {
        filter: blur(40px);
        opacity: 0.3;
    }
}

/* Reflection */
.reflection{background:var(--cream)}
.reflection-content{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem;align-items:center}
.reflection-text h3{font-family:'Fraunces',serif;font-size:1.3rem;margin-bottom:1rem}
.reflection-text p{color:var(--gray);line-height:1.8;margin-bottom:2rem}
blockquote{font-family:'Fraunces',serif;font-size:1.5rem;font-style:italic;line-height:1.5;padding-left:2rem;border-left:3px solid var(--primary)}

/* Contact */
.contact{background:var(--primary);color:#fff;text-align:center;padding:5rem}
.contact h2{font-family:'Fraunces',serif;font-size:2.5rem;margin-bottom:1rem}
.contact p{opacity:.9;margin-bottom:2rem}
.btn-white{background:#fff;color:var(--dark)}
.btn-white:hover{background:var(--dark);color:#fff}

/* Footer */
.footer{background:var(--dark);color:rgba(255,255,255,.5);text-align:center;padding:2rem;font-size:.85rem}

/* Responsive */
@media(max-width:900px){
.hero-content{padding:0 1rem}
.hero-stats{flex-wrap:wrap;gap:1.5rem}
.about-grid,.reflection-content{grid-template-columns:1fr}
.values-grid-new,.interventions-grid,.beyond-grid{grid-template-columns:1fr}
.value-card{padding:1.75rem;gap:1rem}
.value-icon{width:50px;height:50px}
.value-content h4{font-size:1.15rem}
.value-content p{font-size:0.9rem}
/* Growth Section Responsive */
.growth-cards{grid-template-columns:1fr}
.growth-card{padding:1.5rem}
.year-value{font-size:2rem}
.growth-quote{padding:1.25rem;font-size:1.1rem}
.quote-highlight{font-size:1.5rem}
.spreadsheet-embed iframe{height:350px}
/* BA Grid Responsive */
.ba-grid{grid-template-columns:1fr}
.ba-card-image{height:200px}
.leadership-grid{grid-template-columns:1fr}
.classroom-gallery{grid-template-columns:1fr}
.gallery-item img,.gallery-item.large img{height:200px}
.nav-links{display:none}
/* PTOC Responsive */
.burrow{height:350px}
.chibi{width:60px}
.milestone-icon{width:45px;height:45px}
.milestone-label{font-size:0.65rem}
.milestone-content{width:160px;padding:.75rem}
.milestone-content p{font-size:.65rem}
.mission-scroll{width:220px;padding:1rem;right:2%}
.scroll-content h4{font-size:1rem}
.scroll-content p{font-size:0.7rem}
.vision-state{flex-direction:column;gap:1.5rem;padding:2rem}
.vision-chibi img{width:100px}
.vision-content h3{font-size:1.8rem}
.vision-content p{font-size:0.95rem}
}

/* ========================================
   STUDENT STORIES SECTION
   ======================================== */

.student-stories-section {
    padding: 5rem 5%;
    background: var(--cream);
}

.stories-header {
    text-align: center;
    margin-bottom: 3rem;
}

.stories-header h2 {
    font-family: 'Fraunces', serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--dark);
}

.stories-header p {
    color: var(--gray);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 1rem;
}

/* Carousel Container */
.reels-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
    padding: 2rem 0;
}

/* Navigation Buttons */
.reel-nav {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--dark);
    background: var(--light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    z-index: 10;
}

.reel-nav:hover {
    background: var(--dark);
    color: #fff;
    transform: scale(1.1);
}

.reel-nav:active {
    transform: scale(0.95);
}

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

.reel-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

/* Track Wrapper - overflow hidden */
.reels-track-wrapper {
    overflow: hidden;
    width: 100%;
    max-width: 700px;
}

/* Track - contains all cards */
.reels-track {
    display: flex;
    gap: 2rem;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 1rem 0;
}

/* Individual Reel Card */
.reel-card {
    flex-shrink: 0;
    width: 200px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0.5;
    transform: scale(0.85);
    filter: blur(2px);
}

.reel-card.active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.reel-card.adjacent {
    opacity: 0.7;
    transform: scale(0.9);
    filter: blur(1px);
}

/* Phone Frame */
.phone-frame {
    position: relative;
    background: #1a1a1a;
    border-radius: 32px;
    padding: 8px;
    box-shadow:
        0 25px 60px rgba(0,0,0,0.3),
        0 10px 20px rgba(0,0,0,0.2),
        inset 0 0 0 2px rgba(255,255,255,0.1);
    overflow: hidden;
    aspect-ratio: 9/19.5;
    cursor: pointer;
    transition: all 0.4s ease;
}

.reel-card.active .phone-frame {
    box-shadow:
        0 30px 80px rgba(99, 102, 241, 0.3),
        0 15px 30px rgba(0,0,0,0.25),
        inset 0 0 0 2px rgba(255,255,255,0.15);
}

.phone-frame:hover {
    transform: translateY(-5px);
}

/* Phone Notch */
.phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 22px;
    background: #1a1a1a;
    border-radius: 12px;
    z-index: 10;
}

.phone-notch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
}

/* Video */
.reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    background: #000;
}

/* Overlay */
.reel-overlay {
    position: absolute;
    inset: 8px;
    border-radius: 24px;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.1) 0%,
        transparent 30%,
        transparent 60%,
        rgba(0,0,0,0.7) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.reel-card.playing .reel-overlay {
    opacity: 0;
}

.reel-card.playing:hover .reel-overlay {
    opacity: 1;
}

/* Play Button */
.play-button {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.play-button svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
    color: var(--dark);
}

.phone-frame:hover .play-button {
    transform: scale(1.1);
    background: #fff;
}

.reel-card.playing .play-button svg path {
    d: path("M6 4h4v16H6V4zm8 0h4v16h-4V4z");
}

/* Reel Info */
.reel-info {
    position: absolute;
    bottom: 20px;
    left: 16px;
    right: 16px;
    z-index: 5;
    text-align: left;
}

.reel-info h4 {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.reel-info p {
    color: rgba(255,255,255,0.8);
    font-size: 0.75rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Dots Navigation */
.reels-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
}

.reel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.reel-dot:hover {
    background: rgba(0,0,0,0.4);
}

.reel-dot.active {
    background: var(--primary);
    transform: scale(1.2);
}

/* Entrance Animation */
@keyframes reelSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.reels-section.animate .reel-card {
    animation: reelSlideIn 0.6s ease forwards;
}

.reels-section.animate .reel-card:nth-child(1) { animation-delay: 0.1s; }
.reels-section.animate .reel-card:nth-child(2) { animation-delay: 0.2s; }
.reels-section.animate .reel-card:nth-child(3) { animation-delay: 0.3s; }

/* Responsive */
@media (max-width: 900px) {
    .reels-carousel {
        gap: 0.75rem;
    }

    .reel-nav {
        width: 40px;
        height: 40px;
    }

    .reel-nav svg {
        width: 20px;
        height: 20px;
    }

    .reels-track-wrapper {
        max-width: 250px;
    }

    .reel-card {
        width: 180px;
    }

    .phone-frame {
        border-radius: 24px;
    }

    .phone-notch {
        width: 60px;
        height: 18px;
        top: 10px;
    }

    .play-button {
        width: 50px;
        height: 50px;
    }

    .play-button svg {
        width: 22px;
        height: 22px;
    }

    .reel-info h4 {
        font-size: 0.85rem;
    }

    .reel-info p {
        font-size: 0.7rem;
    }
}

@media (max-width: 600px) {
    .reel-nav {
        display: none;
    }

    .reels-track-wrapper {
        max-width: 200px;
    }

    .reel-card {
        width: 160px;
    }

    .stories-header h2 {
        font-size: 1.75rem;
    }
}

/* ========================================
   VIDEO MODAL OVERLAY
   ======================================== */

.video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-close {
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.modal-close:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    transform: scale(1.1);
}

.modal-close svg {
    width: 24px;
    height: 24px;
}

.modal-phone-frame {
    position: relative;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 12px;
    box-shadow:
        0 50px 100px rgba(0,0,0,0.5),
        0 30px 60px rgba(0,0,0,0.4),
        inset 0 0 0 3px rgba(255,255,255,0.1);
    max-height: 85vh;
    aspect-ratio: 9/19.5;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.video-modal.active .modal-phone-frame {
    transform: scale(1);
}

.modal-phone-frame .phone-notch {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 28px;
    background: #1a1a1a;
    border-radius: 16px;
    z-index: 10;
}

.modal-phone-frame .phone-notch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
}

.modal-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 28px;
    background: #000;
}

/* Responsive modal */
@media (max-width: 600px) {
    .modal-close {
        top: 1rem;
        left: 1rem;
        width: 40px;
        height: 40px;
    }

    .modal-close svg {
        width: 20px;
        height: 20px;
    }

    .modal-phone-frame {
        border-radius: 32px;
        padding: 8px;
        max-height: 80vh;
    }

    .modal-phone-frame .phone-notch {
        width: 80px;
        height: 22px;
        top: 12px;
    }

    .modal-video {
        border-radius: 24px;
    }
}

/* =====================================================
   BEYOND ACADEMICS - SKILL CONSTELLATION
   ===================================================== */

.beyond-constellation {
    padding: 3rem 0;
    background: linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #0a0a0f 100%);
    position: relative;
    overflow: hidden;
}

.beyond-constellation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.2) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 10% 50%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 40%, rgba(255,255,255,0.4) 0%, transparent 100%);
    pointer-events: none;
}

.beyond-constellation .section-header,
.beyond-constellation .section-intro {
    color: #fff;
    text-align: center;
}

.beyond-constellation .section-intro {
    max-width: 600px;
    margin: 0 auto 1.5rem;
    opacity: 0.8;
}

.beyond-constellation .click-hint {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(99, 202, 255, 0.15);
    border: 1px solid rgba(99, 202, 255, 0.3);
    border-radius: 20px;
    font-size: 0.8rem;
    color: #63caff;
    animation: subtlePulse 2s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Constellation Map */
.constellation-map {
    position: relative;
    width: 100%;
    max-width: 550px;
    height: 450px;
    margin: 0 auto 1.5rem;
}

/* Orbit Rings - subtle background rings */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 400px;
    height: 400px;
    border: 1px dashed rgba(99, 202, 255, 0.06);
    border-radius: 50%;
}

.orbit-ring::before,
.orbit-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(99, 202, 255, 0.06);
    border-radius: 50%;
}

.orbit-ring::before {
    width: 270px;
    height: 270px;
}

.orbit-ring::after {
    width: 140px;
    height: 140px;
}

/* Floating Particles */
.constellation-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.constellation-particles::before,
.constellation-particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #63caff;
    border-radius: 50%;
    box-shadow: 0 0 10px #63caff, 0 0 20px #63caff;
    animation: floatParticle 8s ease-in-out infinite;
}

.constellation-particles::before {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.constellation-particles::after {
    top: 70%;
    right: 20%;
    animation-delay: 4s;
}

@keyframes floatParticle {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(10px, -20px) scale(1.2); opacity: 0.8; }
    50% { transform: translate(-5px, -10px) scale(0.8); opacity: 0.5; }
    75% { transform: translate(15px, 5px) scale(1.1); opacity: 0.7; }
}

/* Center Node */
.constellation-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.center-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(99,202,255,0.4) 0%, rgba(167,139,250,0.2) 40%, transparent 70%);
    border-radius: 50%;
    animation: centerPulse 3s ease-in-out infinite;
    pointer-events: none;
}

.center-glow::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(99,202,255,0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: centerPulse 3s ease-in-out infinite reverse;
}

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

.center-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #63caff 0%, #a78bfa 50%, #63caff 100%);
    background-size: 200% 200%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow:
        0 0 40px rgba(99, 202, 255, 0.6),
        0 0 80px rgba(167, 139, 250, 0.3),
        inset 0 0 30px rgba(255,255,255,0.4);
    position: relative;
    animation: centerShine 4s ease-in-out infinite;
}

.center-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff, #63caff, #a78bfa, #63caff, #fff);
    z-index: -1;
    animation: borderRotate 4s linear infinite;
}

.center-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0%, transparent 50%);
}

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

.center-icon svg {
    width: 32px;
    height: 32px;
    color: #1a1a2e;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.center-label {
    display: block;
    margin-top: 0.75rem;
    color: #63caff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(99,202,255,0.8);
}

/* Skill Nodes - Fixed positions with gentle floating */
.skill-node {
    position: absolute;
    cursor: pointer;
    text-align: center;
    background: none;
    border: none;
    padding: 0.5rem;
    font-family: inherit;
    z-index: 5;
    transform: translate(-50%, -50%);
}

/* Position each node in its own zone - hexagon pattern around center */
.skill-node[data-skill="critical"]   { top: 50%;  left: calc(50% + 185px); animation: floatA 7s ease-in-out infinite; }
.skill-node[data-skill="exposure"]   { top: 15%;  left: calc(50% + 100px); animation: floatB 6s ease-in-out infinite; }
.skill-node[data-skill="leadership"] { top: 15%;  left: calc(50% - 100px); animation: floatC 8s ease-in-out infinite; }
.skill-node[data-skill="innovation"] { top: 50%;  left: calc(50% - 185px); animation: floatD 6.5s ease-in-out infinite; }
.skill-node[data-skill="lifeskills"] { top: 85%;  left: calc(50% - 100px); animation: floatE 7.5s ease-in-out infinite; }
.skill-node[data-skill="physical"]   { top: 85%;  left: calc(50% + 100px); animation: floatF 5.5s ease-in-out infinite; }

@keyframes floatA {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    33% { transform: translate(-50%, -50%) translate(12px, -15px); }
    66% { transform: translate(-50%, -50%) translate(-8px, 12px); }
}

@keyframes floatB {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    33% { transform: translate(-50%, -50%) translate(-10px, 18px); }
    66% { transform: translate(-50%, -50%) translate(15px, 8px); }
}

@keyframes floatC {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    33% { transform: translate(-50%, -50%) translate(14px, 12px); }
    66% { transform: translate(-50%, -50%) translate(-12px, 20px); }
}

@keyframes floatD {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    33% { transform: translate(-50%, -50%) translate(-15px, -10px); }
    66% { transform: translate(-50%, -50%) translate(10px, -18px); }
}

@keyframes floatE {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    33% { transform: translate(-50%, -50%) translate(18px, -12px); }
    66% { transform: translate(-50%, -50%) translate(-14px, -8px); }
}

@keyframes floatF {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    33% { transform: translate(-50%, -50%) translate(-12px, -20px); }
    66% { transform: translate(-50%, -50%) translate(10px, -15px); }
}

.skill-node:hover {
    animation-play-state: paused;
    z-index: 20;
}

.skill-node:hover .node-circle {
    transform: scale(1.2);
    box-shadow:
        0 0 30px rgba(99,202,255,0.6),
        0 0 60px rgba(167,139,250,0.4),
        inset 0 0 20px rgba(99,202,255,0.2);
}

.skill-node:hover .node-label {
    color: #63caff;
    text-shadow: 0 0 15px rgba(99,202,255,0.8);
}

.skill-node.active .node-circle {
    background: linear-gradient(135deg, #63caff 0%, #a78bfa 100%);
    box-shadow:
        0 0 40px rgba(99, 202, 255, 0.7),
        0 0 80px rgba(167, 139, 250, 0.4),
        inset 0 0 30px rgba(255,255,255,0.3);
}

.skill-node.active .node-circle::before {
    opacity: 1;
}

.skill-node.active .node-circle svg {
    color: #1a1a2e;
    filter: none;
}

.skill-node.active .node-label {
    color: #63caff;
    text-shadow: 0 0 20px rgba(99,202,255,1);
}

.node-circle {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(99,202,255,0.2) 0%, rgba(167,139,250,0.15) 100%);
    border: 2px solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(8px);
    box-shadow:
        0 0 20px rgba(99,202,255,0.3),
        inset 0 0 20px rgba(167,139,250,0.1);
}

.node-circle::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #63caff, #a78bfa, #63caff);
    z-index: -1;
    opacity: 0.5;
    animation: borderRotate 4s linear infinite;
}

.node-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 60%);
    pointer-events: none;
}

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

.node-circle svg {
    width: 24px;
    height: 24px;
    color: #63caff;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 6px rgba(99,202,255,0.6));
    position: relative;
    z-index: 1;
}

.node-label {
    display: block;
    margin-top: 0.5rem;
    color: rgba(255,255,255,0.9);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(99,202,255,0.5);
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

/* Detail Panels */
.constellation-details {
    max-width: 900px;
    margin: 0 auto;
}

.detail-panel {
    display: none;
    animation: fadeInUp 0.4s ease;
}

.detail-panel.active {
    display: block;
}

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

.detail-panel h3 {
    color: #fcd34d;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
}

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

.detail-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.detail-card:hover {
    transform: translateY(-3px);
    border-color: rgba(252, 211, 77, 0.3);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.detail-card.wide {
    grid-column: 1 / -1;
}

.detail-card.highlight {
    border-color: rgba(252, 211, 77, 0.4);
    background: rgba(252, 211, 77, 0.05);
}

.detail-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.detail-card h4 {
    color: #fff;
    font-size: 1rem;
    margin: 0.75rem 1rem 0.35rem;
}

.detail-card p {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0 1rem 1rem;
}

.achievement-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    color: #1a1a2e;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.platform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 1.25rem 1.25rem;
}

.platform-tags span {
    background: rgba(252, 211, 77, 0.15);
    color: #fcd34d;
    padding: 0.3rem 0.7rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Skill Modal Overlay */
.skill-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skill-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.skill-modal {
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%);
    border: 1px solid rgba(99, 202, 255, 0.3);
    border-radius: 24px;
    width: 100%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 60px rgba(99, 202, 255, 0.15),
        0 25px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.skill-modal-overlay.active .skill-modal {
    transform: scale(1) translateY(0);
}

.skill-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.skill-modal-close:hover {
    background: rgba(99, 202, 255, 0.2);
    border-color: rgba(99, 202, 255, 0.5);
    transform: rotate(90deg);
}

.skill-modal-close svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.skill-modal-content {
    padding: 2.5rem;
}

.skill-modal-content h3 {
    color: #63caff;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
    text-shadow: 0 0 30px rgba(99, 202, 255, 0.5);
}

.skill-modal-content .detail-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.skill-modal-content .detail-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.skill-modal-content .detail-card:hover {
    border-color: rgba(99, 202, 255, 0.4);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.skill-modal-content .detail-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.skill-modal-content .detail-card h4 {
    color: #fff;
    font-size: 1.1rem;
    margin: 1rem 1.25rem 0.5rem;
}

.skill-modal-content .detail-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 1.25rem 1.25rem;
}

.skill-modal-content .detail-card.wide {
    grid-column: 1 / -1;
}

.skill-modal-content .achievement-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #63caff 0%, #a78bfa 100%);
    color: #1a1a2e;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.skill-modal-content .platform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 1.25rem 1.25rem;
}

.skill-modal-content .platform-tags span {
    background: rgba(99, 202, 255, 0.2);
    color: #63caff;
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .constellation-map {
        height: 360px;
    }

    .orbit-ring {
        width: 300px;
        height: 300px;
    }

    .orbit-ring::before {
        width: 200px;
        height: 200px;
    }

    .orbit-ring::after {
        width: 110px;
        height: 110px;
    }

    /* Fixed positions for tablet */
    .skill-node[data-skill="critical"]   { left: calc(50% + 140px); }
    .skill-node[data-skill="exposure"]   { top: 12%; left: calc(50% + 75px); }
    .skill-node[data-skill="leadership"] { top: 12%; left: calc(50% - 75px); }
    .skill-node[data-skill="innovation"] { left: calc(50% - 140px); }
    .skill-node[data-skill="lifeskills"] { top: 88%; left: calc(50% - 75px); }
    .skill-node[data-skill="physical"]   { top: 88%; left: calc(50% + 75px); }

    .node-circle {
        width: 48px;
        height: 48px;
    }

    .node-circle svg {
        width: 20px;
        height: 20px;
    }

    .node-label {
        font-size: 0.6rem;
    }

    .center-icon {
        width: 55px;
        height: 55px;
    }

    .center-icon svg {
        width: 26px;
        height: 26px;
    }

    .detail-cards {
        grid-template-columns: 1fr;
    }

    .skill-modal {
        max-width: 95%;
        border-radius: 20px;
    }

    .skill-modal-content {
        padding: 2rem 1.5rem;
    }

    .skill-modal-content .detail-cards {
        grid-template-columns: 1fr;
    }

    /* Classroom Bento - Tablet */
    .classroom-bento {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .bento-context {
        grid-column: span 2;
        grid-row: span 1;
        padding: 2rem;
    }

    .bento-context h3 {
        font-size: 2rem;
    }

    .bento-vocab {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 280px;
    }

    .bento-decor,
    .bento-safety {
        grid-column: span 1;
        min-height: 200px;
    }

    .bento-interventions {
        grid-column: span 2;
    }

    .bento-decor2 {
        grid-column: span 2;
        min-height: 200px;
    }

    /* Dev Team Bento - Tablet */
    .dev-bento {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .dev-context {
        grid-column: span 2;
        padding: 2rem;
    }

    .dev-context h3 {
        font-size: 1.75rem;
    }

    .dev-img1 {
        grid-column: span 1;
        min-height: 220px;
    }

    .dev-partners {
        grid-column: span 2;
    }

    .partners-logo-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .partner-logo {
        min-height: 45px;
        padding: 0.5rem;
    }

    .dev-img2 {
        grid-column: span 2;
        min-height: 200px;
    }

    .dev-responsibilities {
        grid-column: span 2;
    }

    .responsibility-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .constellation-map {
        height: 300px;
    }

    .orbit-ring {
        width: 230px;
        height: 230px;
    }

    .orbit-ring::before {
        width: 150px;
        height: 150px;
    }

    .orbit-ring::after {
        width: 85px;
        height: 85px;
    }

    /* Fixed positions for mobile */
    .skill-node[data-skill="critical"]   { left: calc(50% + 110px); }
    .skill-node[data-skill="exposure"]   { top: 10%; left: calc(50% + 60px); }
    .skill-node[data-skill="leadership"] { top: 10%; left: calc(50% - 60px); }
    .skill-node[data-skill="innovation"] { left: calc(50% - 110px); }
    .skill-node[data-skill="lifeskills"] { top: 90%; left: calc(50% - 60px); }
    .skill-node[data-skill="physical"]   { top: 90%; left: calc(50% + 60px); }

    .skill-node {
        padding: 0.2rem;
    }

    .node-circle {
        width: 40px;
        height: 40px;
    }

    .node-circle svg {
        width: 16px;
        height: 16px;
    }

    .node-label {
        font-size: 0.55rem;
    }

    .center-icon {
        width: 46px;
        height: 46px;
    }

    .center-icon svg {
        width: 22px;
        height: 22px;
    }

    .skill-modal-overlay {
        padding: 1rem;
    }

    .skill-modal {
        max-height: 90vh;
        border-radius: 16px;
    }

    .skill-modal-content {
        padding: 1.5rem 1rem;
    }

    .skill-modal-content h3 {
        font-size: 1.4rem;
    }

    .skill-modal-close {
        width: 36px;
        height: 36px;
        top: 1rem;
        right: 1rem;
    }

    /* Classroom Bento - Mobile */
    .classroom-bento {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .bento-context,
    .bento-vocab,
    .bento-decor,
    .bento-safety,
    .bento-interventions,
    .bento-decor2 {
        grid-column: span 1;
    }

    .bento-context {
        padding: 1.5rem;
    }

    .bento-context h3 {
        font-size: 1.75rem;
    }

    .bento-context p {
        font-size: 0.85rem;
    }

    .context-stats {
        gap: 1rem;
    }

    .stat-number {
        font-size: 1.4rem;
    }

    .bento-vocab {
        min-height: 220px;
    }

    .bento-decor,
    .bento-safety,
    .bento-decor2 {
        min-height: 180px;
    }

    .intervention-list {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .intervention-item {
        padding: 0.875rem;
    }

    .intervention-item svg {
        width: 24px;
        height: 24px;
    }

    /* Dev Team Bento - Mobile */
    .dev-bento {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .dev-context,
    .dev-img1,
    .dev-partners,
    .dev-img2,
    .dev-responsibilities {
        grid-column: span 1;
        grid-row: span 1;
    }

    .dev-context {
        padding: 1.5rem;
    }

    .dev-context h3 {
        font-size: 1.5rem;
    }

    .dev-context p {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }

    .dev-stats {
        gap: 1.25rem;
    }

    .dev-stat-number {
        font-size: 1.4rem;
    }

    .dev-img1,
    .dev-img2 {
        min-height: 200px;
    }

    .partners-logo-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
    }

    .partner-logo {
        min-height: 40px;
        padding: 0.4rem;
    }

    .responsibility-list {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .responsibility-item {
        padding: 0.875rem;
    }

    .responsibility-item svg {
        width: 22px;
        height: 22px;
    }
}

/* =====================================================
   LEADERSHIP - SEEDS OF CHANGE
   ===================================================== */

.leadership-seeds {
    padding: 6rem 5%;
    background: linear-gradient(180deg, var(--cream) 0%, #f5f0e8 100%);
    position: relative;
    overflow: hidden;
}

.leadership-seeds::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* Seeds Intro */
.seeds-intro {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.seeds-tagline {
    font-family: 'Fraunces', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #10b981;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: inline-block;
    position: relative;
}

.seeds-tagline::before,
.seeds-tagline::after {
    content: '✦';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #10b981;
    opacity: 0.5;
    font-size: 0.6rem;
}

.seeds-tagline::before { left: -1.5rem; }
.seeds-tagline::after { right: -1.5rem; }

.seeds-description {
    font-size: 1.15rem;
    color: var(--gray);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Seeds Container */
.seeds-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

/* Seed Card */
.seed-card {
    display: grid;
    grid-template-columns: 100px 1fr 280px;
    gap: 2.5rem;
    align-items: start;
    background: #fff;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.seed-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    transition: height 0.5s ease;
    border-radius: 0 0 5px 0;
}

.seed-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.seed-card:hover::before {
    height: 100%;
}

/* Color variants */
.seed-card[data-seed="sakaar"]::before { background: linear-gradient(180deg, #f59e0b 0%, #fcd34d 100%); }
.seed-card[data-seed="sakaar"] .seed-growth { color: #f59e0b; }
.seed-card[data-seed="sakaar"] .seed-label { color: #f59e0b; }
.seed-card[data-seed="sakaar"] .multiplier-item.highlight { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.seed-card[data-seed="mentorship"]::before { background: linear-gradient(180deg, #8b5cf6 0%, #a78bfa 100%); }
.seed-card[data-seed="mentorship"] .seed-growth { color: #8b5cf6; }
.seed-card[data-seed="mentorship"] .seed-label { color: #8b5cf6; }
.seed-card[data-seed="mentorship"] .multiplier-item.highlight { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

.seed-card[data-seed="clubs"]::before { background: linear-gradient(180deg, #10b981 0%, #34d399 100%); }
.seed-card[data-seed="clubs"] .seed-growth { color: #10b981; }
.seed-card[data-seed="clubs"] .seed-label { color: #10b981; }
.seed-card[data-seed="clubs"] .multiplier-item.highlight { background: rgba(16, 185, 129, 0.1); color: #10b981; }

/* Seed Growth Visual */
.seed-growth {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
}

.growth-icon {
    width: 80px;
    height: 80px;
    transition: transform 0.5s ease;
}

.seed-card:hover .growth-icon {
    transform: scale(1.15);
}

/* Seed Content */
.seed-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.seed-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.seed-content h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.75rem;
    color: var(--dark);
    margin: 0;
    line-height: 1.2;
}

/* Multiplier Chain */
.multiplier-chain {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}

.multiplier-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    min-width: 55px;
    transition: all 0.3s ease;
}

.multiplier-item.highlight {
    font-weight: 600;
}

.mult-number {
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--dark);
}

.multiplier-item.highlight .mult-number {
    color: inherit;
}

.mult-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
    margin-top: 0.25rem;
}

.mult-arrow {
    font-size: 1.25rem;
    color: var(--gray);
    opacity: 0.4;
}

/* Seed Description */
.seed-description {
    font-size: 0.95rem;
    color: var(--gray);
    line-height: 1.7;
    margin: 0;
}

/* Seed Outcome */
.seed-outcome {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--cream);
    border-radius: 12px;
    margin-top: 0.5rem;
}

.outcome-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #f59e0b;
}

.seed-card[data-seed="mentorship"] .outcome-icon { color: #8b5cf6; }
.seed-card[data-seed="clubs"] .outcome-icon { color: #10b981; }

.seed-outcome p {
    font-size: 0.9rem;
    color: var(--dark);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* Seed Image */
.seed-image {
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    min-height: 280px;
}

.seed-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.seed-card:hover .seed-image img {
    transform: scale(1.05);
}

/* Responsive - Seeds */
@media (max-width: 1100px) {
    .seed-card {
        grid-template-columns: 80px 1fr 220px;
        gap: 1.5rem;
        padding: 2rem;
    }

    .growth-icon {
        width: 65px;
        height: 65px;
    }

    .seed-content h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 900px) {
    .seed-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.75rem;
    }

    .seed-growth {
        order: -1;
        justify-content: flex-start;
    }

    .growth-icon {
        width: 60px;
        height: 60px;
    }

    .seed-image {
        min-height: 200px;
        order: 3;
    }

    .seed-content h3 {
        font-size: 1.4rem;
    }

    .multiplier-chain {
        gap: 0.4rem;
    }

    .multiplier-item {
        padding: 0.4rem 0.6rem;
        min-width: 48px;
    }

    .mult-number {
        font-size: 1.1rem;
    }

    .seeds-tagline::before,
    .seeds-tagline::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .leadership-seeds {
        padding: 4rem 5%;
    }

    .seeds-intro {
        margin-bottom: 2.5rem;
    }

    .seeds-description {
        font-size: 1rem;
    }

    .seed-card {
        padding: 1.5rem;
    }

    .seed-content h3 {
        font-size: 1.25rem;
    }

    .multiplier-item {
        padding: 0.35rem 0.5rem;
        min-width: 42px;
    }

    .mult-number {
        font-size: 1rem;
    }

    .mult-label {
        font-size: 0.6rem;
    }

    .mult-arrow {
        font-size: 1rem;
    }
}

/* =====================================================
   PLANT GROWTH TIMELINE - New Design
   ===================================================== */

.growth-timeline {
    padding: 6rem 5%;
    background: linear-gradient(180deg, #f8f7f4 0%, #f0ebe3 100%);
    position: relative;
}

.growth-intro {
    text-align: center;
    margin-bottom: 4rem;
}

.growth-tagline {
    font-family: 'Fraunces', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #10b981;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.growth-description {
    font-size: 1.1rem;
    color: var(--gray);
    max-width: 500px;
    margin: 0 auto;
}

/* Plant Timeline Container */
.plant-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Central Stem */
.plant-stem {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100px;
    transform: translateX(-50%);
    z-index: 1;
}

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

.stem-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease-out;
}

.plant-timeline.animate .stem-path {
    stroke-dashoffset: 0;
}

.stem-glow {
    filter: blur(4px);
}

/* Timeline Stages */
.timeline-stage {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 2rem;
    align-items: center;
    padding: 3rem 0;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-stage.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stage Node - Center */
.stage-node {
    display: flex;
    justify-content: center;
    align-items: center;
}

.node-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    position: relative;
}

.node-icon svg {
    width: 40px;
    height: 40px;
}

/* Node Colors */
.seed-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
    color: #b45309;
    box-shadow: 0 4px 20px rgba(252, 211, 77, 0.4);
}

.sprout-icon {
    background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%);
    color: #047857;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}

.bloom-icon {
    background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 100%);
    color: #6d28d9;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.timeline-stage.visible .node-icon {
    animation: nodePopIn 0.5s ease forwards;
}

@keyframes nodePopIn {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Stage Content */
.stage-content {
    padding: 1.5rem;
}

.stage-content.left {
    text-align: right;
}

.stage-content.right {
    text-align: left;
}

.stage-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    margin-bottom: 0.75rem;
}

[data-stage="1"] .stage-label {
    background: rgba(252, 211, 77, 0.2);
    color: #b45309;
}

[data-stage="2"] .stage-label {
    background: rgba(16, 185, 129, 0.2);
    color: #047857;
}

[data-stage="3"] .stage-label {
    background: rgba(139, 92, 246, 0.2);
    color: #6d28d9;
}

.stage-content h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    color: var(--dark);
    margin: 0 0 0.75rem 0;
}

.stage-content p {
    font-size: 0.9rem;
    color: var(--gray);
    line-height: 1.7;
    margin: 0 0 1rem 0;
}

.stage-impact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--dark);
    font-weight: 500;
}

.stage-impact span {
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    font-weight: 700;
}

[data-stage="1"] .stage-impact span { color: #b45309; }
[data-stage="2"] .stage-impact span { color: #047857; }
[data-stage="3"] .stage-impact span { color: #6d28d9; }

/* Stage Photo */
.stage-photo {
    width: 100%;
    max-width: 280px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transform: rotate(0deg);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.stage-photo.left {
    justify-self: end;
    transform: rotate(-2deg);
}

.stage-photo.right {
    justify-self: start;
    transform: rotate(2deg);
}

.stage-photo:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
}

.stage-photo img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Responsive */
@media (max-width: 900px) {
    .plant-timeline {
        padding-left: 60px;
    }
    
    .plant-stem {
        left: 30px;
        transform: none;
    }
    
    .timeline-stage {
        grid-template-columns: 60px 1fr;
        gap: 1.5rem;
    }
    
    .stage-node {
        grid-row: 1 / 3;
    }
    
    .node-icon {
        width: 50px;
        height: 50px;
    }
    
    .node-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .stage-content,
    .stage-content.left,
    .stage-content.right {
        text-align: left;
        grid-column: 2;
    }
    
    .stage-photo,
    .stage-photo.left,
    .stage-photo.right {
        grid-column: 2;
        justify-self: start;
        transform: none;
        max-width: 100%;
    }
    
    .stage-photo img {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .growth-timeline {
        padding: 4rem 5%;
    }
    
    .plant-timeline {
        padding-left: 50px;
    }
    
    .plant-stem {
        left: 20px;
    }
    
    .timeline-stage {
        grid-template-columns: 45px 1fr;
        gap: 1rem;
        padding: 2rem 0;
    }
    
    .node-icon {
        width: 40px;
        height: 40px;
    }
    
    .node-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .stage-content h3 {
        font-size: 1.25rem;
    }
    
    .stage-content p {
        font-size: 0.85rem;
    }
}