:root {
/* Refined professional palette */
--primary: #4f46e5; /* Indigo (trust & education) */
--secondary: #020617; /* Deep navy-black */
--accent: #22d3ee; /* Cyan highlight */
--bg: #f9fafb; /* Soft light background */
--card: #ffffff; /* Clean white cards */
--text: #0f172a; /* Strong readable text */
--muted: #64748b; /* Balanced muted text */
--radius: 22px;
}


* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
background: var(--bg);
color: var(--text);
line-height: 1.7;
}


/* ---------- HEADER ---------- */
/* header {
min-height: 90vh;
background: radial-gradient(circle at top right, #6366f1, var(--primary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
}


header h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
margin-bottom: 16px;
font-weight: 800;
letter-spacing: -0.5px;
}
header p {
max-width: 720px;
font-size: 1.15rem;
opacity: 0.95;
margin: auto;
} */

header {
min-height: 20vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #4747ac, #9b3636);
color: #fff;
}


header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255,255,255,0.05);
border-radius: 50%;
animation: rotate 25s linear infinite;
z-index: 1;
}


@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}


header > div {
position: relative;
z-index: 2;
max-width: 780px;
}
header h1 {
font-size: clamp(2.8rem, 6vw, 4rem);
margin-bottom: 18px;
font-weight: 900;
letter-spacing: -1px;
line-height: 1.1;
text-shadow: 1px 1px 8px rgba(0,0,0,0.3);
}


header p {
font-size: 1.2rem;
opacity: 0.95;
line-height: 1.6;
text-shadow: 0 0 5px rgba(0,0,0,0.2);
margin: auto;
}

/* ---------- NAV ---------- */
nav {
position: sticky;
top: 0;
z-index: 1000;
background: linear-gradient(135deg, #4747ac, #9b3636);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
gap: 35px;
padding: 16px 10px;
border-bottom: 1px solid #e5e7eb;
}


nav a {
text-decoration: none;
color: var(--secondary);
font-weight: 600;
font-size: 0.95rem;
position: relative;
}


nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 2px;
background: #87ce35;
transition: width 0.3s ease;
}


nav a:hover::after {
width: 100%;
}


/* ---------- SECTIONS ---------- */
section {
padding: 90px 20px;
max-width: 1150px;
margin: auto;
}


section h2 {
font-size: 2.3rem;
text-align: center;
margin-bottom: 18px;
font-weight: 800;
}


section > p {
max-width: 820px;
margin: auto;
text-align: center;
color: var(--muted);
font-size: 1.05rem;
}


/* ---------- CARDS ---------- */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
margin-top: 55px;
}

.card {
background: linear-gradient(135deg, #4747ac, #9b3636);
padding: 35px 30px;
border-radius: var(--radius);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
transition: transform 0.01s ease, box-shadow 0.1s ease, opacity 0.6s ease;
opacity: 0;
transform: translateY(30px);
}


.card:hover {
transform: translateY(-10px);
box-shadow: 0 30px 50px rgb(155, 58, 58);
}


.card h3 {
margin-bottom: 12px;
font-size: 1.25rem;
color: #fff;
}


.card p {
color: #fff;
}

/* ---------- PROGRAM LIST ---------- */
.program-list {
max-width: 750px;
margin: 50px auto 0;
background: var(--secondary);
color: #fff;
padding: 40px;
border-radius: var(--radius);
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}


.program-list li {
margin-bottom: 14px;
font-size: 1rem;
}


/* ---------- CTA ---------- */
.cta {
background: linear-gradient(5deg, var(--secondary), #122ca0);
color: #fff;
text-align: center;
padding: 90px 20px;
border-radius: 50px 50px 0 0;
}


.cta h2 {
    font-size: 2.4rem;
margin-bottom: 16px;
}


.cta p {
max-width: 700px;
margin: auto auto 30px;
color: #cbd5f5;
font-size: 1.05rem;
}


.cta a {
display: inline-block;
background: var(--accent);
color: #020617;
padding: 16px 34px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
font-size: 1rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta a:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(34, 211, 238, 0.4);
}


/* ---------- FOOTER ---------- */
footer {
background: #020617;
color: #94a3b8;
text-align: center;
padding: 35px 15px;
border-radius: 28px 28px 0 0;
font-size: 0.9rem;
}
/* ---------- SECTION ANIMATIONS ---------- */
.reveal {
opacity: 0;
}


/* About: soft fade + slight zoom */
#about {
transform: scale(0.97);
transition: opacity 0.8s ease, transform 0.8s ease;
}


#about.active {
opacity: 1;
transform: scale(1);
}


/* Program: slide up */
#program {
transform: translateY(50px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


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


/* Approach: fade only (calm) */
#approach {
transition: opacity 0.9s ease;
}
#approach.active {
opacity: 1;
}


/* CTA: slight slide-in from bottom */
.cta {
transform: translateY(60px);
transition: opacity 0.9s ease, transform 0.9s ease;
}


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


/* Header */
.fade-in {
animation: fadeIn 1.2s ease forwards;
}


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

/* ---------- STAGGERED CARD ANIMATIONS ---------- */
.reveal.active .card {
opacity: 1;
transform: translateY(0);
}


.reveal.active .card:nth-child(1) { transition-delay: 0.12s; }
.reveal.active .card:nth-child(2) { transition-delay: 0.28s; }
.reveal.active .card:nth-child(3) { transition-delay: 0.44s; }
.reveal.active .card:nth-child(4) { transition-delay: 0.6s; }