html, body { height: 100%; margin: 0; font-family: 'DM Sans', sans-serif; }
.font-display { font-family: 'Outfit', sans-serif; }
body { box-sizing: border-box; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.anim-fade-up { animation: fadeUp 0.7s ease-out both; }
.anim-fade-up-d1 { animation: fadeUp 0.7s 0.1s ease-out both; }
.anim-fade-up-d2 { animation: fadeUp 0.7s 0.2s ease-out both; }
.anim-fade-up-d3 { animation: fadeUp 0.7s 0.3s ease-out both; }
.anim-scale { animation: scaleIn 0.6s 0.15s ease-out both; }

.gradient-text {
  background: linear-gradient(135deg, #3B4A9A 0%, #F15A24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-glow {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
  pointer-events: none;
}
.page-hero-glow {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.08;
  pointer-events: none;
}
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(59,74,154,0.12);
}
.nav-scroll {
  position: relative;
  background: rgba(255,255,255,0.48);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 28px 80px rgba(59,74,154,0.12);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
.nav-scroll::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.42), transparent 18%), radial-gradient(circle at 85% 20%, rgba(255,255,255,0.18), transparent 14%);
  pointer-events: none;
}
.nav-scroll.scrolled {
  background: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.82);
  box-shadow: 0 34px 90px rgba(59,74,154,0.14);
}
.project-card { position: relative; overflow: hidden; border-radius: 16px; }
.project-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(59,74,154,0.85) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.4s;
  display: flex; align-items: flex-end; padding: 24px;
}
.project-card:hover .overlay { opacity: 1; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s, transform 0.6s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

.nav-link-active { color: #3B4A9A !important; font-weight: 600 !important; }

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
}

/* Pricing */
.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
}
.pricing-popular {
  border: 2px solid #3B4A9A !important;
  box-shadow: 0 20px 60px rgba(59,74,154,0.15);
}

/* FAQ Accordion */
.faq-item details summary { cursor: pointer; list-style: none; }
.faq-item details summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform 0.3s ease; }
details[open] .faq-icon { transform: rotate(180deg); }

/* Service category badge */
.service-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(59,74,154,0.08);
  color: #3B4A9A;
}

/* Team card */
.team-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(59,74,154,0.12);
}