/* ── Base & Resets ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; }

/* ── Navigation ── */
.nav-link {
  @apply text-stone-600 hover:text-stone-900 text-sm font-medium px-3 py-2 rounded-lg transition-colors;
}
.mobile-link {
  @apply block py-3 text-stone-700 font-medium border-b border-stone-100 last:border-0 hover:text-terra-600 transition-colors;
}
#site-header {
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
#site-header.scrolled {
  background: rgba(253, 252, 250, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* ── Hero Blobs ── */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: blobFloat 8s ease-in-out infinite alternate;
}
.blob-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #f9c4b0, transparent 70%);
  top: -10%; left: -8%;
  animation-delay: 0s;
}
.blob-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #f3eade, transparent 70%);
  bottom: 5%; right: -5%;
  animation-delay: -3s;
}
.blob-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #fce4da, transparent 70%);
  top: 40%; left: 55%;
  animation-delay: -5s;
}
@keyframes blobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -20px) scale(1.05); }
  100% { transform: translate(-20px, 15px) scale(0.97); }
}

/* ── Scroll Indicator ── */
.scroll-line {
  width: 2px; height: 100%;
  background: linear-gradient(to bottom, transparent, #a8a29e, transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
  50%       { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}

/* ── Cards ── */
.card {
  background: white;
  border-radius: 1.25rem;
  padding: 1.5rem;
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.service-card { padding: 0; overflow: hidden; }
.service-card .card-inner { padding: 1.5rem; }

/* ── Scroll Reveal (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Fallback: content always visible if JS is disabled or prefers-reduced-motion */
@media not all and (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 1; transform: none; }
}
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.revealed { opacity: 1; transform: translateY(0); }
}