/* ===============================
   GLOBAL
================================ */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #111;
}

.section {
  padding: 110px 8%;
}

.center {
  text-align: center;
}

h1, h2, h3 {
  letter-spacing: -0.5px;
}

/* ===============================
   HERO (PREMIUM LOOK)
================================ */
.hero {
  min-height: 92vh;
  background:
    linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)),
    url('../assets/hero.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.hero-inner {
  max-width: 900px;
  text-align: center;
}

.hero h1 {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 24px;
}

.hero p {
  font-size: 20px;
  line-height: 1.7;
  opacity: 0.95;
  margin-bottom: 40px;
}

/* ===============================
   BUTTONS
================================ */
.btn-primary {
  background: #c9a24d;
  color: #000;
  padding: 16px 42px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transition: all .25s ease;
}

.btn-primary:hover {
  background: #b08c3d;
  transform: translateY(-1px);
}

/* ===============================
   BENEFITS
================================ */
.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
}

.benefit-box h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

/* ===============================
   STEPS
================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.step-number {
  font-size: 48px;
  font-weight: 700;
  color: #c9a24d;
  margin-bottom: 10px;
}

/* ===============================
   SERVICES
================================ */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.service-card {
  border: 1px solid #eee;
  padding: 45px;
  background: #fff;
  transition: all .25s ease;
}

.service-card:hover {
  box-shadow: 0 15px 35px rgba(0,0,0,.08);
  transform: translateY(-4px);
}

/* ===============================
   CTA
================================ */
.cta {
  background: #0b0b0b;
  color: #fff;
  text-align: center;
  padding: 110px 8%;
}

.cta h2 {
  margin-bottom: 15px;
}

/* ===============================
   WHATSAPP FLOAT
================================ */
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #25D366;
  color: #fff;
  padding: 14px 20px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  z-index: 999;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 900px) {
  .benefits,
  .steps,
  .services {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 42px;
  }
}