:root {
  --brand-green: #2d4739; /* Verde Bosco */
  --brand-gold: #c5a059; /* Oro Antico */
  --brand-gold-dark: #b38f48;
  --brand-terracotta: #7c3a23; /* Colore della terra, per scaldare */
  --bg-crema: #fdfbf7; /* Panna */
  --text-slate: #4a5568; /* Grigio Ardesia */
  --text-dark: #1a1a1a;
}

/* FIX MOBILE Bordo Bianco Orizzontale */
html,
body {
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: "Montserrat", sans-serif;
  background-color: var(--bg-crema);
  color: var(--text-slate);
  padding-top: 70px; /* Compensa l'altezza della navbar */

  /* Leggerissimo pattern a puntini per un effetto materico "carta grezza" */
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c5a059' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  color: var(--brand-green);
}

/* Helper Classes */
.text-brand {
  color: var(--brand-gold) !important;
}
.section-padding {
  padding: 80px 0;
} /* Aumentato un po' il respiro tra le sezioni */

/* Navbar FIX e Restyling */
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  -webkit-backdrop-filter: blur(10px); /* Fondamentale per iOS Safari */
  backdrop-filter: blur(10px);
  background-color: rgba(
    253,
    251,
    247,
    0.9
  ); /* Usa il color crema leggermente trasparente */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.navbar-brand {
  color: var(--brand-green) !important;
  letter-spacing: 1px;
}

.nav-link {
  color: var(--brand-green) !important;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--brand-gold) !important;
}

/* -------------------
   BOTTONI PREMIUM 3D
   ------------------- */
.btn-brand {
  background: linear-gradient(135deg, #b38f48 0%, #c5a059 100%);
  color: white !important;
  border: none;
  border-radius: 50px;
  padding: 12px 32px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(179, 143, 72, 0.8);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-brand:hover {
  background: linear-gradient(135deg, #c5a059 0%, #b38f48 100%);
  transform: translateY(-2px);
  box-shadow:
    0 8px 15px rgba(197, 160, 89, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Stile speciale per i bottoni WhatsApp nella Navbar */
.whatsapp-btn {
  background: linear-gradient(135deg, #4ade80 0%, #25d366 100%) !important;
  text-shadow: 0 1px 2px rgba(20, 100, 40, 0.8);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.whatsapp-btn:hover {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  box-shadow:
    0 8px 15px rgba(37, 211, 102, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-outline-brand {
  border: 2px solid var(--brand-green);
  color: var(--brand-green);
  font-weight: 700;
  border-radius: 50px;
  padding: 12px 32px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-outline-brand:hover {
  background-color: var(--brand-green);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(45, 71, 57, 0.35);
}

/* -------------------
   HERO SECTION FIX 
   ------------------- */
.hero-bg {
  /* Rimosso "fixed" di default per evitare bug su Safari Mobile */
  background:
    linear-gradient(rgba(45, 71, 57, 0.6), rgba(0, 0, 0, 0.4)),
    url("./public/2A5A9557-scaled.jpg") center/cover no-repeat;
  height: 100vh; /* Fallback */
  height: 100svh; /* Mantiene l'altezza statica durante lo scroll */
  margin-top: -70px; /* Compensa il padding del body per usare tutto lo schermo */
}

@media (min-width: 992px) {
  /* Ripristina l'effetto parallasse solo su desktop */
  .hero-bg {
    background-attachment: fixed;
  }
}

.hero-bg h1 {
  color: white;
}

/* -------------------
   FORME E ANIMAZIONI ORGANICHE
   ------------------- */
.icon-circle {
  font-size: 2.8rem;
  color: var(--brand-gold);
  margin-bottom: 1.5rem;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card:hover .icon-circle {
  transform: scale(1.15) rotate(8deg);
  color: var(--brand-terracotta);
}

.img-blob {
  /* Crea una forma organica a "sasso" asimmetrica */
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  box-shadow: 0 15px 35px rgba(45, 71, 57, 0.15);
  transition: border-radius 0.5s ease;
}

.img-blob:hover {
  /* Cambia leggermente forma al passaggio del mouse */
  border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
}

.img-blob-subtle {
  border-radius: 20% 5% 20% 5% / 5% 20% 5% 20%;
}

.icon-box {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background-color: rgba(197, 160, 89, 0.15);
  color: var(--brand-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* Footer */
footer {
  background-color: var(--brand-green) !important;
}
footer h3 {
  color: var(--brand-gold);
}

.hover-scale {
  display: inline-block;
  transition: transform 0.3s;
}
.hover-scale:hover {
  transform: scale(1.2);
  color: var(--brand-gold) !important;
}

/* WhatsApp Float */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: calc(30px + env(safe-area-inset-bottom));
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  text-decoration: none;
  transition:
    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    background-color 0.3s;
}

.whatsapp-float:hover {
  background-color: #128c7e;
  color: white;
  transform: scale(1.15) translateY(-5px);
}

.fa-leaf {
  color: #18a74c !important;
}

.btn-mappa-sfumato {
  /* Sfuma dal tuo Verde Bosco scuro verso un Verde Foglia più luminoso */
  background: linear-gradient(135deg, #1e3026 0%, #2d4739 50%, #456b56 100%);
  color: white !important;
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  padding: 12px 32px;
  border-radius: 50px;
  /* Ombra in tinta col verde */
  box-shadow: 0 10px 20px rgba(45, 71, 57, 0.25);
  transition: all 0.3s ease;
}

.btn-mappa-sfumato:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(45, 71, 57, 0.4);
}

/* Bottone Call to Action - Oro Antico */
.btn-cta-gold {
  background-color: var(--brand-gold);
  color: #fff !important; /* Testo bianco per contrasto */
  border: 2px solid var(--brand-gold);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-cta-gold:hover {
  /* Al passaggio del mouse si scurisce leggermente verso il brand-gold-dark */
  background-color: var(--brand-gold-dark);
  border-color: var(--brand-gold-dark);
  color: #fff;
  transform: translateY(-3px);
  /* Ombra morbida dorata che si espande */
  box-shadow: 0 12px 20px rgba(197, 160, 89, 0.4) !important;
}