/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* ── Navigation ── */
.nav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: box-shadow 0.4s ease, background 0.4s ease;
}
.nav.scrolled {
  box-shadow: 0 1px 20px rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.97);
}
.nav-logo { font-weight: 300; letter-spacing: 0.25em; }

/* ── Mobile Menu ── */
.mobile-menu { z-index: 50; }
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu-link { font-size: 0.85rem; }

/* ── Hero ── */
.hero { min-height: 100vh; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
}
.hero-eyebrow { opacity: 0; transform: translateY(16px); transition: all 0.7s cubic-bezier(0.16,1,0.3,1); }
.hero-headline { opacity: 0; transform: translateY(24px); transition: all 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s; }
.hero-sub { opacity: 0; transform: translateY(20px); transition: all 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s; }
.hero-cta { opacity: 0; transform: translateY(16px); transition: all 0.7s cubic-bezier(0.16,1,0.3,1) 0.3s; }
.hero-image { opacity: 0; transform: translateX(32px); transition: all 1s cubic-bezier(0.16,1,0.3,1) 0.15s; }
.hero.active .hero-eyebrow,
.hero.active .hero-headline,
.hero.active .hero-sub,
.hero.active .hero-cta,
.hero.active .hero-image {
  opacity: 1;
  transform: translate(0,0);
}
.hero-img { transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.hero-img-wrapper:hover .hero-img { transform: scale(1.03); }
.hero-scroll { animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, 0); }
  50% { opacity: 0.8; transform: translate(-50%, 6px); }
}

/* ── CTA Buttons ── */
.cta-primary {
  display: inline-block;
  box-shadow: 0 4px 20px rgba(13,148,136,0.25);
}
.cta-primary:hover {
  box-shadow: 0 8px 32px rgba(13,148,136,0.35);
  transform: translateY(-1px);
}
.cta-secondary {
  display: inline-block;
}
.cta-secondary:hover {
  transform: translateY(-1px);
}

/* ── Services ── */
.service-card { transition: background 0.4s ease; }
.service-card:hover { transform: translateY(-2px); transition: transform 0.3s ease, background 0.4s ease; }
.service-icon { transition: transform 0.3s ease; }
.service-card:hover .service-icon { transform: scale(1.1); }

/* ── Reveal Animations ── */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(32px);
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Gallery ── */
.gallery-item { cursor: pointer; }
.gallery-img { transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }

/* ── Testimonials ── */
.test-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.test-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.06); }

/* ── Contact Form ── */
.form-input { background: transparent; }
.form-input:focus { border-color: #0d9488 !important; }
.form-input::placeholder { color: #cbd5e1; }
.form-submit {
  position: relative;
  overflow: hidden;
}
.form-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.form-submit:hover::after { opacity: 1; }
.form-success { animation: fadeIn 0.5s ease forwards; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Footer ── */
.footer-link { transition: color 0.3s ease; }
.footer-link:hover { color: #2dd4bf; }

/* ── Utility ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

::selection { background: rgba(13,148,136,0.15); color: #0f172a; }