/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Hero geometric shapes ── */
.hero-shape { position: absolute; pointer-events: none; }

.shape-circle-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(212,160,23,0.12) 0%, transparent 70%);
    border-radius: 50%;
    top: -150px; right: -100px;
}
.shape-circle-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(212,160,23,0.08) 0%, transparent 70%);
    border-radius: 50%;
    bottom: 10%; left: -80px;
}
.shape-rect-1 {
    width: 200px; height: 200px;
    background: rgba(212,160,23,0.06);
    border: 1px solid rgba(212,160,23,0.15);
    transform: rotate(45deg);
    top: 20%; left: 5%;
    border-radius: 12px;
}
.shape-rect-2 {
    width: 120px; height: 120px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    transform: rotate(30deg);
    bottom: 20%; right: 15%;
    border-radius: 8px;
}
.shape-triangle {
    width: 0; height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 140px solid rgba(212,160,23,0.07);
    top: 40%; right: 8%;
    transform: rotate(-15deg);
}

/* ── About shapes ── */
.about-shape { position: absolute; pointer-events: none; }
.about-shape.shape-circle-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(212,160,23,0.08) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -100px; right: -100px;
}
.about-shape.shape-rect-1 {
    width: 160px; height: 160px;
    background: rgba(212,160,23,0.05);
    border: 1px solid rgba(212,160,23,0.12);
    transform: rotate(45deg);
    top: 10%; left: 3%;
    border-radius: 8px;
}

/* ── CTA shapes ── */
.cta-shape { position: absolute; pointer-events: none; }
.cta-shape.shape-circle-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(10,22,40,0.15) 0%, transparent 70%);
    border-radius: 50%;
    top: -100px; left: -100px;
}
.cta-shape.shape-circle-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(10,22,40,0.1) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -80px; right: -50px;
}
.cta-shape.shape-rect-1 {
    width: 100px; height: 100px;
    background: rgba(10,22,40,0.08);
    border: 1px solid rgba(10,22,40,0.15);
    transform: rotate(45deg);
    top: 20%; right: 10%;
    border-radius: 6px;
}

/* ── Program cards ── */
.program-card { cursor: default; }

/* ── Why cards ── */
.why-card { cursor: default; }

/* ── Scroll reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
}

/* ── Nav scroll state ── */
nav.scrolled {
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ── Mobile menu animation ── */
#mobile-menu {
    animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-shape, .about-shape, .cta-shape { display: none; }
    * { animation: none !important; transition: none !important; }
}