:root{
 --primary:#0f766e;
 --secondary:#16a34a;
 --accent:#d4af37;
 --bg:#f8fafc;
 --text:#1f2937;
 --radius:18px;
 --shadow:0 12px 30px rgba(0,0,0,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Poppins,Arial,sans-serif;background:var(--bg);color:var(--text)}
#progress-bar{position:fixed;top:0;left:0;height:4px;width:0;background:var(--accent);z-index:9999}
.navbar{transition:.35s;padding:18px 0}
.navbar.scrolled{
 background:rgba(255,255,255,.82);
 backdrop-filter:blur(14px);
 box-shadow:0 5px 20px rgba(0,0,0,.08)
}
.navbar-brand{color:#fff;font-weight:700}
.navbar.scrolled .navbar-brand,
.navbar.scrolled .nav-link{color:var(--primary)!important}
.nav-link{color:#fff!important;font-weight:500}
.hero{
 min-height:100vh;
 background:url("../assets/images/hero.jpg") center/cover no-repeat fixed;
 position:relative;display:flex;align-items:center
}
.hero .overlay{
 position:absolute;inset:0;
 background:linear-gradient(135deg,rgba(15,118,110,.82),rgba(22,163,74,.75))
}
.hero h1{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;line-height:1.2}
.hero p{font-size:1.15rem;max-width:650px;margin:20px 0 35px}
.btn-success{background:var(--secondary);border:none;border-radius:50px;padding:14px 30px}
section{padding:90px 0}
h2{font-weight:700;color:var(--primary);margin-bottom:35px}
.program-card{
 background:#fff;border-radius:var(--radius);
 box-shadow:var(--shadow);transition:.35s;height:100%
}
.program-card:hover{transform:translateY(-10px)}
.icon-circle{
 width:80px;height:80px;border-radius:50%;
 margin:0 auto 20px;background:linear-gradient(135deg,var(--primary),var(--secondary));
 display:grid;place-items:center;color:#fff;font-size:2rem
}
.stats{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}
.counter{font-size:3rem;font-weight:800}
.ppdb-banner{
 background:linear-gradient(135deg,var(--primary),var(--secondary));
 color:#fff;box-shadow:var(--shadow)
}
.footer{background:#083d3a;color:#fff;padding:60px 0}
.wa-float{
 position:fixed;right:25px;bottom:25px;width:60px;height:60px;border-radius:50%;
 background:#25d366;color:#fff;display:grid;place-items:center;
 text-decoration:none;font-size:30px;box-shadow:var(--shadow);
 animation:pulse 2s infinite;z-index:999
}
@keyframes pulse{
0%{transform:scale(1);box-shadow:0 0 0 0 rgba(37,211,102,.5)}
70%{transform:scale(1.08);box-shadow:0 0 0 18px rgba(37,211,102,0)}
100%{transform:scale(1)}
}
.masonry{columns:4 250px;column-gap:18px}
.masonry img{width:100%;margin-bottom:18px;border-radius:16px;transition:.3s}
.masonry img:hover{transform:scale(1.03)}