:root {
  --silver-50: #f7f8fb;
  --silver-100: #eef0f4;
  --silver-300: #c8ced8;
  --silver-500: #8d96a5;
  --silver-700: #4a5160;
  --black-900: #0c0f14;
  --black-800: #151a22;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  color: #f4f6f9;
  background:
    radial-gradient(circle at 10% 10%, rgba(166, 177, 192, 0.18), transparent 32%),
    radial-gradient(circle at 85% 15%, rgba(124, 132, 145, 0.17), transparent 30%),
    linear-gradient(160deg, #090b10 0%, #10141b 45%, #1b212b 100%);
  min-height: 100vh;
}

.font-display {
  font-family: "Playfair Display", serif;
}

.glass {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

.hero-overlay {
  background:
    linear-gradient(120deg, rgba(4, 7, 12, 0.85), rgba(9, 14, 20, 0.55)),
    url("https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?auto=format&fit=crop&w=1800&q=80&sat=-100") center/cover no-repeat;
}

.silver-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 213, 225, 0.75), transparent);
}

.btn-premium {
  background: linear-gradient(120deg, #f2f4f8, #cfd6e2);
  color: #10141b;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(174, 186, 204, 0.35);
}

.btn-outline {
  border: 1px solid rgba(234, 239, 248, 0.45);
  color: #eef2f8;
  transition: all 220ms ease;
}

.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
}

.card-hover {
  transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(233, 238, 246, 0.45);
  box-shadow: 0 14px 32px rgba(9, 11, 18, 0.3);
}

.fade-in {
  animation: fadeInUp 700ms ease both;
}

.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.active-link {
  color: #f5f8fe;
}

.active-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c3ccda, #ffffff);
}

.whatsapp-float {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: #25d366;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
  transition: transform 220ms ease;
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.03);
}

@media (max-width: 768px) {
  .hero-overlay {
    background-position: 60% center;
  }
}