/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; }

/* ─── Buttons ─── */
.btn-primary {
  @apply inline-flex items-center gap-2 bg-teal-600 text-white font-heading font-medium text-sm px-6 py-3 rounded-xl shadow-lg shadow-teal-600/30 hover:bg-teal-700 hover:shadow-teal-700/40 hover:-translate-y-0.5 transition-all duration-200;
}
.btn-secondary {
  @apply inline-flex items-center gap-2 bg-white/10 text-white font-heading font-medium text-sm px-6 py-3 rounded-xl border border-white/20 hover:bg-white/20 hover:-translate-y-0.5 transition-all duration-200 backdrop-blur-sm;
}
.btn-white {
  @apply inline-flex items-center gap-2 bg-white text-teal-700 font-heading font-medium text-sm px-6 py-3 rounded-xl shadow-lg hover:bg-teal-50 hover:-translate-y-0.5 transition-all duration-200;
}
.btn-outline-white {
  @apply inline-flex items-center gap-2 bg-transparent text-white font-heading font-medium text-sm px-6 py-3 rounded-xl border-2 border-white/40 hover:bg-white/10 hover:-translate-y-0.5 transition-all duration-200;
}

/* ─── Nav ─── */
.nav { transition: box-shadow 0.3s ease; }
.nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* ─── Floating Cards ─── */
.float-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 16px;
  animation: float 4s ease-in-out infinite;
}
.float-card:nth-child(2) { animation-delay: -1s; }
.float-card:nth-child(3) { animation-delay: -2s; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.card-teal { background: rgba(13,148,136,0.6); border-color: rgba(45,212,191,0.3); }
.card-slate { background: rgba(30,41,59,0.7); border-color: rgba(100,116,139,0.4); }
.card-accent { background: rgba(185,28,88,0.5); border-color: rgba(244,63,94,0.3); }

/* ─── Feature Items ─── */
.feature-item { transition: transform 0.2s ease; }
.feature-item:hover { transform: translateY(-2px); }

/* ─── Menu Cards ─── */
.menu-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.menu-card:hover {
  transform: translateY(-4px);
}

/* ─── Review Cards ─── */
.review-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

/* ─── Scroll Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Mobile Menu ─── */
.mobile-link {
  display: block;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f5f9;
  transition: color 0.2s;
}
.mobile-link:last-child { border-bottom: none; }
.mobile-link:hover { color: #0d9488; }