/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

/* ── Navigation ── */
#nav {
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
#nav.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(0,0,0,0.06);
}
#nav.scrolled .nav-logo-text { color: #1A1C23 !important; }
#nav.scrolled .nav-link { color: #4B4F58 !important; }
#nav.scrolled .mobile-nav-link { color: #272A32 !important; }

.nav-link { transition: color 0.2s ease; }

/* ── Hero ── */
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  background: linear-gradient(
    180deg,
    rgba(15,17,22,0.55) 0%,
    rgba(15,17,22,0.40) 50%,
    rgba(15,17,22,0.70) 100%
  );
}
.hero-headline {
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.hero-subtitle {
  letter-spacing: 0.25em;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}
.hero-desc { font-size: 1rem; line-height: 1.7; }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: #F97066; color: #fff;
  font-weight: 600; font-size: 0.9375rem;
  border-radius: 9999px;
  border: none; cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.btn-primary:hover { background: #E85D54; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(249,112,102,0.35); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: rgba(255,255,255,0.12); color: #fff;
  font-weight: 600; font-size: 0.9375rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255,255,255,0.3);
  cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
}
.btn-secondary:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); transform: translateY(-1px); }

/* ── Tags ── */
.tag-label {
  display: inline-block;
  padding: 0.375rem 1rem;
  background: #FFE8E6; color: #D14940;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 9999px;
}

/* ── Inputs ── */
.input-field {
  display: block; width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid #D6D7DB; border-radius: 0.75rem;
  font-size: 0.9375rem; font-family: inherit;
  color: #272A32; background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}
.input-field::placeholder { color: #A0A3AB; }
.input-field:focus { border-color: #F97066; box-shadow: 0 0 0 3px rgba(249,112,102,0.12); }

/* ── Scroll Reveal ── */
.reveal-left, .reveal-right, .reveal-up, .reveal-fade {
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left  { transform: translateX(0); }
.reveal-right { transform: translateX(0); }
.reveal-up    { transform: translateY(0); }
.reveal-fade  { transform: translateY(0); }

/* ── Scroll indicator ── */
.hero-scroll-indicator { pointer-events: none; }

/* ── Mobile menu ── */
#mobile-menu { transition: max-height 0.3s ease, opacity 0.3s ease; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal-left, .reveal-right, .reveal-up, .reveal-fade {
    opacity: 1;
    transform: none;
  }
  .hero-bg img, .reveal-up img, .reveal-left img, .reveal-right img {
    transition: none;
  }
}