/* ==========================================================
   EnerMincio – stile personalizzato (Bootstrap 5)
   Palette ricavata dal logo: modifica qui per cambiare tema
   ========================================================== */
:root {
  --em-navy:       #1d4f86;   /* "Ener" del logo */
  --em-green-dark: #0b5a36;   /* verde scuro foglie */
  --em-green:      #5fa832;   /* verde medio */
  --em-lime:       #9cc43c;   /* "Mincio" del logo */
  --em-sun:        #f2d43a;   /* giallo */
  --em-orange:     #f0a830;   /* arancio */
  --em-blue:       #1a8fd0;   /* fiume */
  --em-blue-light: #3fb4e3;
  --em-cream:      #fbfcf3;
  --em-soft:       #f1f8ec;
  --em-text:       #1e2b33;
  --em-muted:      #5a6870;

  --bs-body-font-family: 'Inter', system-ui, sans-serif;
  --bs-body-color: var(--em-text);
  --bs-link-color: var(--em-blue);
  --bs-link-hover-color: var(--em-navy);
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { background: #fff; }

h1, h2, h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--em-navy);
}

/* ---------- Navbar ---------- */
.navbar-cer {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  transition: box-shadow .3s ease, padding .3s ease;
  padding: .6rem 0;
}
.navbar-cer.scrolled { box-shadow: 0 4px 20px rgba(29, 79, 134, .1); padding: .3rem 0; }
.nav-logo { height: 64px; width: auto; transition: height .3s ease; }
.navbar-cer.scrolled .nav-logo { height: 50px; }
.navbar-cer .nav-link { color: var(--em-text); font-weight: 500; }
.navbar-cer .nav-link:hover,
.navbar-cer .nav-link.active { color: var(--em-green); }

/* ---------- Pulsanti ---------- */
.btn-sun {
  background: linear-gradient(135deg, var(--em-sun), var(--em-orange));
  color: var(--em-navy);
  font-weight: 600;
  border: none;
  border-radius: 50rem;
  padding-inline: 1.5rem;
}
.btn-sun:hover, .btn-sun:focus { filter: brightness(.95); color: var(--em-navy); }
.btn-outline-cer {
  border: 2px solid var(--em-navy);
  color: var(--em-navy);
  border-radius: 50rem;
  font-weight: 600;
  padding-inline: 1.5rem;
}
.btn-outline-cer:hover { background: var(--em-navy); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 150px 0 120px;
  background:
    radial-gradient(circle at 85% 15%, rgba(242, 212, 58, .25), transparent 40%),
    linear-gradient(160deg, var(--em-soft) 0%, var(--em-cream) 100%);
  overflow: hidden;
}
.hero h1 { font-weight: 800; line-height: 1; color: var(--em-navy); }
.text-mincio { color: var(--em-lime); }
.hero-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 500;
  color: var(--em-green-dark);
  margin-top: .5rem;
}
.hero .lead { color: var(--em-muted); }
.badge-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; color: var(--em-green-dark);
  border-radius: 50rem; padding: .4rem 1rem;
  font-size: .875rem; font-weight: 600;
  box-shadow: 0 2px 10px rgba(11, 90, 54, .08);
}
.badge-pill i { color: var(--em-orange); }
.hero-img { filter: drop-shadow(0 20px 40px rgba(29, 79, 134, .15)); }
/* onda "fiume" in fondo all'hero */
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q360 0 720 35 T1440 30 V70 H0Z' fill='%233fb4e3' opacity='.35'/%3E%3Cpath d='M0 55 Q360 25 720 50 T1440 45 V70 H0Z' fill='%23ffffff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------- Sezioni ---------- */
.section { padding: 90px 0; }
.section-soft { background: var(--em-soft); }
.section-dark { background: linear-gradient(135deg, var(--em-navy) 0%, #15406e 60%, var(--em-green-dark) 100%); }
.section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .8rem; font-weight: 600;
  color: var(--em-green); margin-bottom: .5rem;
}
.eyebrow-light { color: var(--em-sun); }
.text-sun { color: var(--em-sun); }
.text-white-75 { color: rgba(255, 255, 255, .82); }
.text-muted-cer { color: var(--em-muted); }

/* ---------- Come funziona ---------- */
.mini-step {
  background: #fff; border-radius: 1rem;
  padding: 1rem .5rem; text-align: center; height: 100%;
  box-shadow: 0 4px 16px rgba(11, 90, 54, .06);
}
.mini-step i { display: block; font-size: 1.6rem; color: var(--em-blue); margin-bottom: .3rem; }
.mini-step span { font-size: .85rem; font-weight: 600; color: var(--em-navy); }

/* ---------- Incentivi ---------- */
.incentive-list { list-style: none; padding: 0; color: #fff; }
.incentive-list li { margin-bottom: .7rem; font-weight: 500; display: flex; gap: .6rem; align-items: flex-start; }
.incentive-list i { color: var(--em-lime); font-size: 1.15rem; }

/* ---------- Vantaggi ---------- */
.benefit { display: flex; gap: 1.2rem; align-items: flex-start; margin-top: 1.75rem; }
.benefit h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.benefit p { color: var(--em-muted); margin: 0; }
.feature-icon {
  flex-shrink: 0;
  width: 56px; height: 56px; border-radius: 1rem;
  display: grid; place-items: center; font-size: 1.6rem;
}
.bg-green { background: #e3f2d6; color: var(--em-green-dark); }
.bg-sun   { background: #fdf3c8; color: #a26a00; }
.bg-blue  { background: #dcf0fa; color: var(--em-blue); }

/* ---------- FAQ ---------- */
.why-card {
  background: #fff; border-radius: 1.25rem; padding: 2rem;
  border-top: 5px solid var(--em-lime);
  box-shadow: 0 8px 30px rgba(11, 90, 54, .08);
}
.why-card h3 { font-size: 1.35rem; margin-bottom: 1.25rem; }
.why-item { display: flex; gap: .9rem; margin-bottom: 1rem; }
.why-item > i { font-size: 1.5rem; color: var(--em-green); }
.why-item strong { color: var(--em-navy); }
.why-item p { color: var(--em-muted); margin: .2rem 0 0; font-size: .95rem; }
.why-card .bi-geo-alt-fill { color: var(--em-orange); }

.accordion-cer .accordion-item {
  border: 1px solid #dfeccf; border-radius: 1rem !important;
  margin-bottom: .75rem; overflow: hidden;
}
.accordion-cer .accordion-button { font-weight: 600; color: var(--em-navy); }
.accordion-cer .accordion-button:not(.collapsed) { background: #fff; color: var(--em-green-dark); box-shadow: none; }
.accordion-cer .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(95, 168, 50, .25); }

/* ---------- Contatti ---------- */
.contact-form {
  background: #fff; border-radius: 1.5rem; padding: 2rem;
  box-shadow: 0 10px 40px rgba(29, 79, 134, .1);
}
.form-control, .form-select { border-radius: .75rem; padding: .7rem 1rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--em-green);
  box-shadow: 0 0 0 .2rem rgba(95, 168, 50, .2);
}
.form-check-input:checked { background-color: var(--em-green); border-color: var(--em-green); }

/* ---------- Footer ---------- */
.footer { background: #12345a; color: rgba(255, 255, 255, .82); padding: 3.5rem 0 1.5rem; }
.footer-logo {
  background: #fff; border-radius: 1.25rem; padding: .75rem;
  display: inline-block;
}
.footer-logo img { height: 110px; width: auto; display: block; }
.footer-title { color: #fff; font-size: 1.1rem; margin-bottom: 1rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .55rem; display: flex; gap: .6rem; }
.footer-list i { color: var(--em-lime); }
.footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.footer a:hover { color: var(--em-sun); }
.footer .social a { font-size: 1.5rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  font-size: .875rem;
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080;
  max-width: 520px;
  background: #fff; border-radius: 1rem; padding: 1.1rem 1.25rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
  font-size: .9rem;
  transform: translateY(150%); transition: transform .4s ease;
}
.cookie-banner.show { transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .hero { padding: 120px 0 90px; text-align: center; }
  .hero .d-flex { justify-content: center; }
  .navbar-collapse { padding: 1rem 0; }
  .section { padding: 64px 0; }
  .nav-logo { height: 52px; }
}