/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'DM Sans', system-ui, sans-serif; color: #0f2b4c; background: #fafcf9; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ===== HEADER ===== */
#main-header { background: transparent; transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s; }
#main-header.scrolled { background: rgba(250, 252, 249, 0.92); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(15, 43, 76, 0.06); }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px; background: #7dd3a8; transition: width 0.3s; }
.nav-link:hover::after { width: 100%; }

/* ===== BURGER ===== */
.burger-line { transition: all 0.3s ease; }
#mobile-toggle.active .burger-line:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
#mobile-toggle.active .burger-line:nth-child(2) { opacity: 0; }
#mobile-toggle.active .burger-line:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); width: 5px; }

/* ===== HERO ===== */
.hero-badge { animation: fadeUp 0.8s ease both; }
.hero-headline { animation: fadeUp 0.8s 0.1s ease both; }
.hero-sub { animation: fadeUp 0.8s 0.2s ease both; }
.hero-cta { animation: fadeUp 0.8s 0.3s ease both; }
.hero-stats { animation: fadeUp 0.8s 0.4s ease both; }
.hero-image-wrap { animation: fadeRight 1s 0.3s ease both; }
.hero-float-card { animation: float 4s ease-in-out infinite; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ===== BLOBS ===== */
.hero-blob { will-change: transform; }
.blob-1 { animation: drift1 8s ease-in-out infinite; }
.blob-2 { animation: drift2 10s ease-in-out infinite; }
.blob-3 { animation: drift3 6s ease-in-out infinite; }
@keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -15px) scale(1.05); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-15px, 20px) scale(1.03); } }
@keyframes drift3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, 10px); } }

/* ===== SCROLL LINE ===== */
.scroll-line { animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(1); } 50% { opacity: 0.7; transform: scaleY(1.2); } }

/* ===== SCROLL ANIMATIONS ===== */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { 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; }

/* ===== SERVICE CARDS ===== */
.service-card { transition: transform 0.4s ease, box-shadow 0.4s ease; }

/* ===== COMMUNITY CARDS ===== */
.community-card { transition: transform 0.4s ease, box-shadow 0.4s ease; }

/* ===== TESTIMONIAL CARDS ===== */
.testimonial-card { transition: transform 0.4s ease, background 0.4s ease; }

/* ===== BACK TO TOP ===== */
#back-to-top.show { opacity: 1; pointer-events: auto; }

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  .hero-stats { flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .hero-float-card { position: relative; bottom: auto; left: auto; margin-top: 1rem; }
  .about-image-wrap { margin-bottom: 2rem; }
}