/* ════════════ BASE & RESET ════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a, button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* ════════════ NAVIGATION ════════════ */
.nav-link { transition: color 0.3s ease; }
.nav-border { transition: border-color 0.3s ease; }
header.scrolled .nav-link { color: #374151; }
header.scrolled .nav-border { border-color: #e3e3e5; }
header.scrolled .nav-border .menu-line { background: #374151; }
header.scrolled .nav-link { color: #374151; }

/* ════════════ MOBILE MENU ════════════ */
#mobile-menu.open { opacity: 1; pointer-events: all; }
#mobile-menu.open .mobile-link { animation: fadeUp 0.4s ease forwards; opacity: 0; }
#mobile-menu.open .mobile-link:nth-child(1) { animation-delay: 0.05s; }
#mobile-menu.open .mobile-link:nth-child(2) { animation-delay: 0.1s; }
#mobile-menu.open .mobile-link:nth-child(3) { animation-delay: 0.15s; }
#mobile-menu.open .mobile-link:nth-child(4) { animation-delay: 0.2s; }
#mobile-menu.open .mobile-link:nth-child(5) { animation-delay: 0.25s; }

.menu-line { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; }
#menu-btn.active .menu-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#menu-btn.active .menu-line:nth-child(2) { opacity: 0; }
#menu-btn.active .menu-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 1rem; }

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

/* ════════════ BUTTONS ════════════ */
.btn-coral {
  background: #F97583;
  color: white;
  padding: 14px 28px;
  border-radius: 9999px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(249, 117, 131, 0.25);
  white-space: nowrap;
}
.btn-coral:hover {
  background: #e86472;
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(249, 117, 131, 0.35);
}
.btn-coral:active { transform: translateY(0); }

.btn-outline-white {
  background: transparent;
  color: white;
  padding: 14px 28px;
  border-radius: 9999px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}
.btn-outline-white:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}
.btn-outline-white:active { transform: translateY(0); }

/* ════════════ HERO ════════════ */
.scroll-indicator { transition: opacity 0.3s ease; }
.scroll-indicator:hover { opacity: 0.7; }

.hero-eyebrow { animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }
.hero-title { animation: fadeUpHero 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; }
.hero-subtitle { animation: fadeUpHero 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards; }
.hero-ctas { animation: fadeUpHero 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards; }

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeUpHero {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ════════════ SECTION UTILITIES ════════════ */
.section-eyebrow { margin-bottom: 1.25rem; }
.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.section-desc {
  font-size: 1.05rem;
  line-height: 1.75;
}

/* ════════════ REVEAL ANIMATIONS ════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.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; }

/* ════════════ SERVICE CARDS ════════════ */
.service-card { position: relative; }
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2rem;
  right: 2rem;
  height: 2px;
  background: #F97583;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover::after { transform: scaleX(1); }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 767px) {
  .section-title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  #hero { min-height: 100vh; min-height: 100dvh; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .section-title { font-size: clamp(2rem, 5vw, 2.5rem); }
}