/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

/* ===== NAVBAR ===== */
#navbar { background: transparent; }
#navbar.scrolled { background: rgba(59, 7, 100, 0.95); backdrop-filter: blur(12px); box-shadow: 0 4px 30px rgba(0,0,0,0.2); }

/* ===== HERO ===== */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: orbFloat 20s ease-in-out infinite;
}
.orb-1 { width: 500px; height: 500px; background: #a855f7; top: -10%; left: -5%; animation-delay: 0s; }
.orb-2 { width: 400px; height: 400px; background: #fbbf24; bottom: -5%; right: -5%; animation-delay: -7s; }
.orb-3 { width: 250px; height: 250px; background: #c084fc; top: 40%; right: 20%; animation-delay: -14s; }

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.05); }
  66% { transform: translate(-20px, 30px) scale(0.95); }
}

/* Hero entrance animations */
.hero-eyebrow, .hero-title, .hero-subtitle, .hero-ctas { opacity: 0; transform: translateY(24px); }
.hero-eyebrow { animation: heroIn 0.7s ease forwards; animation-delay: 0.2s; }
.hero-title { animation: heroIn 0.7s ease forwards; animation-delay: 0.4s; }
.hero-subtitle { animation: heroIn 0.7s ease forwards; animation-delay: 0.6s; }
.hero-ctas { animation: heroIn 0.7s ease forwards; animation-delay: 0.8s; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: #fbbf24;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.35);
}
.btn-primary:hover {
  box-shadow: 0 6px 28px rgba(251, 191, 36, 0.5);
  transform: translateY(-2px);
}
.btn-secondary {
  backdrop-filter: blur(4px);
}
.btn-secondary:hover {
  backdrop-filter: blur(8px);
  transform: translateY(-2px);
}

/* ===== EYEBROW ===== */
.eyebrow { letter-spacing: 0.2em; }
.eyebrow-light { color: rgba(168, 168, 255, 0.6); }

/* ===== STATS ===== */
.stats-grid { counter-reset: stat; }
.stat-num { transition: transform 0.3s ease; }
.stat-item:hover .stat-num { transform: scale(1.08); }

/* ===== ABOUT ===== */
.about-grid { display: grid; gap: 0; }

/* ===== BADGES ===== */
.badge-plum {
  display: inline-block;
  padding: 0.4em 1em;
  background: rgba(107, 33, 168, 0.08);
  color: #6b21a8;
  border: 1px solid rgba(107, 33, 168, 0.18);
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.badge-plum:hover {
  background: rgba(107, 33, 168, 0.14);
  color: #581c87;
}

/* ===== SERVICES ===== */
.services-grid { display: grid; gap: 0; }

.service-card {
  background: #fff;
  border: 1px solid rgba(107, 33, 168, 0.08);
  border-radius: 16px;
  padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(107, 33, 168, 0.12);
  border-color: rgba(107, 33, 168, 0.2);
}
.service-icon-wrap { width: 56px; height: 56px; }
.service-icon {
  width: 56px; height: 56px;
  background: rgba(107, 33, 168, 0.08);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #6b21a8;
  transition: background 0.3s, color 0.3s;
}
.service-card:hover .service-icon {
  background: #6b21a8;
  color: #fbbf24;
}
.service-icon-amber {
  background: rgba(251, 191, 36, 0.12);
  color: #b45309;
}
.service-card:hover .service-icon-amber {
  background: #b45309;
  color: #fff;
}

/* ===== AREAS ===== */
.areas-grid { display: grid; gap: 0; }
.area-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}
.area-card-img {
  transition: transform 0.5s ease;
}
.area-card:hover .area-card-img {
  transform: scale(1.08);
}
.area-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(59, 7, 100, 0.85) 0%, transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem;
  transition: background 0.3s;
}
.area-card:hover .area-card-overlay {
  background: linear-gradient(to top, rgba(59, 7, 100, 0.92) 0%, rgba(59, 7, 100, 0.3) 60%);
}

/* ===== TESTIMONIALS ===== */
.testimonials-grid { display: grid; gap: 0; }
.testimonial-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 2rem;
  transition: transform 0.3s ease, background 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
}

/* ===== CONTACT ===== */
.contact-grid { display: grid; gap: 0; }

.input-field {
  background: #fff;
  border: 1.5px solid rgba(107, 33, 168, 0.18);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: #1f2937;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.input-field:focus {
  border-color: #6b21a8;
  box-shadow: 0 0 0 3px rgba(107, 33, 168, 0.1);
}
.input-field::placeholder { color: #9ca3af; }
.input-field:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
}

/* ===== FOOTER ===== */
.footer-grid { display: grid; gap: 0; }

/* ===== REVEAL ANIMATIONS ===== */
.reveal-up, .reveal-left, .reveal-right {
  /* Default: visible (progressive enhancement) */
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-up { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.7s ease, transform 0.7s ease; }

  .reveal-up.revealed,
  .reveal-left.revealed,
  .reveal-right.revealed {
    opacity: 1;
    transform: none;
  }
}

/* ===== MOBILE MENU ===== */
#mobileMenu.open { opacity: 1; pointer-events: auto; }

.mobile-link {
  transition: color 0.2s, transform 0.2s;
}
.mobile-link:hover {
  color: #fbbf24;
  transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
  .about-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .areas-grid { grid-template-columns: repeat(4, 1fr); }
}