/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { overflow-x: hidden; }

/* ── Navbar ── */
#navbar { background: transparent; }
#navbar.scrolled {
  background: rgba(255, 251, 240, 0.95);
  backdrop-blur-lg;
  box-shadow: 0 2px 20px rgba(107, 47, 91, 0.08);
}

/* ── Hero ── */
.hero-bg {
  position: absolute; inset: 0;
  background: url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1920&h=1080') center center / cover no-repeat;
  z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(42, 16, 36, 0.82) 0%, rgba(107, 47, 91, 0.72) 50%, rgba(74, 31, 64, 0.80) 100%);
  z-index: 1;
}
.hero-decor {
  position: absolute; border-radius: 50%; z-index: 1; pointer-events: none;
}
.hero-decor--tl {
  width: 500px; height: 500px; top: -150px; left: -150px;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.15) 0%, transparent 70%);
}
.hero-decor--br {
  width: 600px; height: 600px; bottom: -200px; right: -200px;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.10) 0%, transparent 70%);
}

/* ── Buttons ── */
.btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  background: #F5C518; color: #4a1f40; font-weight: 800;
  padding: 15px 32px; border-radius: 60px; font-size: 15px;
  text-decoration: none; box-shadow: 0 4px 20px rgba(245, 197, 24, 0.4);
  transition: all 0.3s ease;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(245, 197, 24, 0.5); background: #ffd966; }
.btn-hero svg { transition: transform 0.3s ease; }
.btn-hero:hover svg { transform: translateX(3px); }

.btn-hero--outline {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.4);
  box-shadow: none;
}
.btn-hero--outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); transform: translateY(-2px); }

.btn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #F5C518; color: #4a1f40; font-weight: 800;
  padding: 16px 38px; border-radius: 60px; font-size: 16px;
  text-decoration: none; box-shadow: 0 4px 24px rgba(245, 197, 24, 0.35);
  transition: all 0.3s ease;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(245, 197, 24, 0.5); background: #ffd966; }

/* ── Badges ── */
.badge-label {
  display: inline-block; font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #e6a800; background: rgba(245, 197, 24, 0.15);
  padding: 6px 16px; border-radius: 40px;
}

/* ── Service Cards ── */
.service-card {
  background: #fff; border-radius: 24px; padding: 2rem;
  box-shadow: 0 4px 24px rgba(107, 47, 91, 0.06);
  border: 1px solid rgba(107, 47, 91, 0.06);
  transition: all 0.35s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(107, 47, 91, 0.12);
  border-color: rgba(245, 197, 24, 0.3);
}

/* ── About ── */
.about-img-wrapper { box-shadow: 0 20px 60px rgba(107, 47, 91, 0.15); }
.about-floating-card {
  position: absolute; bottom: -20px; left: 20px;
  background: #fff; border-radius: 20px; padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(107, 47, 91, 0.12);
  display: flex; align-items: center; gap: 12px;
}

/* ── Gallery ── */
.gallery-item { cursor: pointer; }

/* ── CTA Banner ── */
.cta-decor {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.cta-decor--1 {
  width: 400px; height: 400px; top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.15) 0%, transparent 70%);
}
.cta-decor--2 {
  width: 300px; height: 300px; bottom: -100px; left: -60px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
}

/* ── Contact ── */
.contact-info-card {
  background: #fff; border-radius: 20px; padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(107, 47, 91, 0.06);
}

/* ── Form ── */
.label {
  display: block; font-weight: 700; font-size: 13px; color: #4a1f40; margin-bottom: 6px; letter-spacing: 0.02em;
}
.input-field {
  width: 100%; border: 2px solid #f0e0ea; border-radius: 14px;
  padding: 12px 16px; font-family: 'Nunito', sans-serif; font-size: 15px;
  color: #3a1832; background: #faf5f8;
  transition: all 0.25s ease; outline: none;
}
.input-field::placeholder { color: #c4a0b8; }
.input-field:focus { border-color: #F5C518; background: #fff; box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.12); }
.input-field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B2F5B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

.btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #6B2F5B; color: #fff; font-weight: 800; font-size: 15px;
  padding: 15px 32px; border-radius: 14px; border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(107, 47, 91, 0.3);
  transition: all 0.3s ease; font-family: 'Nunito', sans-serif;
}
.btn-submit:hover { background: #5a274d; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(107, 47, 91, 0.4); }
.btn-submit:active { transform: translateY(0); }

/* ── 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; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ── Mobile Menu ── */
.mobile-link { display: block; }

/* ── Responsive ── */
@media (max-width: 640px) {
  #hero h1 { font-size: 2.75rem; }
  .about-floating-card { position: relative; bottom: auto; left: auto; margin-top: 16px; }
  .about-img-wrapper { border-radius: 20px; }
  .grid-cols-3 > div:first-child { grid-column: span 1; }
}