:root{--brand:#00b894;--brand-2:#00cec9;--dark:#061935;--text:#e9f5f4}
html{scroll-behavior:smooth}
body{background:#0e1116;color:var(--text);animation:page-in .5s ease both}
@keyframes page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== Navbar trasparente sfumata che si fonde con l'hero ===== */
.glass-nav{
  background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0)) !important;
  backdrop-filter: blur(6px) saturate(140%);
  border: none !important;
  box-shadow: none !important;
}
.border-top-soft{border-top:1px solid rgba(255,255,255,.08)}
.badge-soft{background:rgba(0,206,201,.12);color:#baf7f2;border:1px solid rgba(0,206,201,.25)}

.hero-carousel .carousel-item{height:72vh;min-height:420px;position:relative}
.hero-carousel .carousel-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25) 40%, rgba(0,0,0,.6));}
.hero-img{object-fit:cover;width:100%;height:100%;filter:saturate(1.05) contrast(1.02);transform:scale(1.02)}
.hero-caption{position:absolute;left:0;right:0;bottom:10%;z-index:2}
.hero-badge{background:rgba(0,0,0,.35);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2)}

.btn-brand{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:#02a284;--bs-btn-hover-border-color:#02a284;--bs-btn-color:#041315;--bs-btn-font-weight:600;transition:transform .15s ease, box-shadow .2s}
.btn-brand:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,184,148,.22)}

.section-title{letter-spacing:.3px;border-left:4px solid var(--brand);padding-left:.75rem;margin-bottom:1.25rem}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

.kpi{font-size:calc(1.2rem + 1.2vw);font-weight:700}
.kpi-sub{opacity:.8}

.gallery{--gap:1rem;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:180px;gap:var(--gap)}
.gallery .tile{position:relative;overflow:hidden;border-radius:18px}
.gallery .tile img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform .5s ease, filter .5s ease}
.gallery .tile:hover img{transform:scale(1.12);filter:saturate(1.1)}
.tile.span-6{grid-column:span 6}
.tile.span-4{grid-column:span 4}
.tile.span-8{grid-column:span 8}
@media (max-width: 992px){
  .gallery{grid-auto-rows:140px;}
  .tile.span-6,.tile.span-8{grid-column:span 12}
  .tile.span-4{grid-column:span 6}
}

.card-glass{
  background: #05214c !important;
}

.card.glass{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .25s ease, box-shadow .25s ease}
.card.glass:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.45)}

.form-control,.form-select{background-color:#fff;border-color:#000; color:#000; padding:8px;}
.form-control:focus,.form-select:focus{border-color:var(--brand-2);box-shadow:0 0 0 .25rem rgba(0,206,201,.15)}

a{color:#7ee6de}a:hover{color:#b2fff9}


/* Navbar logo & link hover */
.navbar-brand img {
  max-height: 40px;
  transition: transform .2s ease;
}
.navbar-brand img:hover {
  transform: scale(1.05);
}
.nav-link {
  position: relative;
  margin: 0 0.5rem;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.2rem;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}


/* Navbar fantasiosa con logo e nome azienda */
.fancy-nav {
  background: linear-gradient(90deg, rgba(0,184,148,0.9), rgba(0,206,201,0.8));
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  transition: background 0.5s ease;
}
.fancy-nav .navbar-brand span {
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.fancy-nav .nav-link {
  color: #fff !important;
  position: relative;
  margin: 0 0.75rem;
  transition: color 0.25s;
}
.fancy-nav .nav-link:hover {
  color: #041315 !important;
}
.fancy-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.2rem;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.fancy-nav .nav-link:hover::after,
.fancy-nav .nav-link.active::after {
  transform: scaleX(1);
}


/* Hero slider */
.hero-slider {
  position: relative;
}
.hero-slider .carousel-item {
  height: 100vh;
  min-height: 500px;
}
.hero-slider .hero-img {
  object-fit: cover;
  height: 100%;
  filter: brightness(0.65);
}
.hero-slider .carousel-caption {
  bottom: 25%;
  text-align: center;
}
.hero-slider h1 {
  font-size: 3rem;
  font-weight: 700;
}
.hero-slider p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}


/* === Home: section styles matching the reference === */
:root{
  --soft-bg: #f5f1ed;
  --soft-text: #3e403c;
  --soft-muted: #74766f;
  --brand-green: #2e7d32;
}
.section-soft { background: var(--soft-bg); color: var(--soft-text); }
.section-soft .lead, .section-soft p { color: var(--soft-muted); }
.hr-accent { width: 64px; height: 4px; background: var(--brand); border-radius: 2px; }

/* Numbered service cards */
.service-num { color: var(--brand-green); font-weight: 700; letter-spacing: .08em; }
.service-card { background: transparent; border: 0; border-radius: 0; padding-right: 3rem;}
.service-card a { color: var(--brand-green); font-weight: 600; text-decoration: none; }
.service-card a:hover { text-decoration: underline; }

/* About split section */
.split-img { border-radius: 8px; box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.btn-soft { background: var(--brand-green); border-color: var(--brand-green); }
.btn-soft:hover { background: #256a2a; border-color: #256a2a; }

/* Why choose us */
.icon-badge {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,.08);
  margin-bottom: .75rem; color: var(--brand-green);
}



/* === Tema Scuro Professionale === */
body {
  background-color: #fff;
  color: #e6e6e6;
}
.section-soft {
  background: #1c1c1e;
  color: #e6e6e6;
}
.section-soft p, .section-soft .lead {
  color: #b0b0b0;
}
/* Navbar scura */
.navbar {
  background-color: rgba(13, 17, 23, 0.95) !important;
  backdrop-filter: blur(8px);
}
.navbar .nav-link {
  color: #e6e6e6 !important;
}
.navbar .nav-link:hover {
  color: #00b894 !important;
}
.navbar .navbar-brand span {
  color: #fff;
}
/* Hero overlay */
.hero-slider .hero-img {
  filter: brightness(0.45);
}
.hero-slider h1, .hero-slider p {
  color: #fff;
}
/* Bottoni brand */
.btn-brand, .btn-soft {
  background: #00b894;
  border: none;
  color: #fff;
}
.btn-brand:hover, .btn-soft:hover {
  background: #009f7f;
}
/* Cards e icone */
.service-card, .icon-badge {
  background: #1c1c1e;
  color: #e6e6e6;
}
.icon-badge {
  background: #2a2a2d;
  color: #00b894;
}
footer {
  background: #111;
  color: #b0b0b0;
}
footer a { color: #00b894; }



/* ===== THEME: Dark professional ===== */
:root{
  --brand:#00b894;
  --brand-2:#00cec9;
  --bg:#fff;
  --bg-2:#fff;
  --text:#e6e6e6;
  --muted:#b0b0b0;
}
body{ background-color: var(--bg); color: var(--text); }
.section-soft{ background: var(--bg-2); color: var(--text); }
.section-soft p, .section-soft .lead{ color: var(--muted); }

/* Navbar dark glass */

/* ===== Navbar trasparente sfumata che si fonde con l'hero ===== */
.glass-nav{
  background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0)) !important;
  backdrop-filter: blur(6px) saturate(140%);
  border: none !important;
  box-shadow: none !important;
}
.navbar-dark .nav-link{ color: var(--text) !important; }
.navbar-dark .nav-link:hover{ color: var(--brand-2) !important; }
.navbar-dark .navbar-brand span{ color:#fff; }

/* Hero overlay for readability */
.hero-slider .hero-img{ filter: brightness(.45) saturate(1.05); }
.hero-slider h1,.hero-slider p{ color:#fff; }

/* Cards & glass */
.card.glass{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); box-shadow: 0 12px 28px rgba(0,0,0,.5); }

/* Buttons */
.btn-brand,.btn-soft{ background: var(--brand); border:none; color:#041315; font-weight:600; }
.btn-brand:hover,.btn-soft:hover{ background:#02a284; color:#041315; }

/* Links */
a{ color:#7ee6de; } a:hover{ color:#b2fff9; }

/* Finanziamenti banner image constraints on dark */
.section-soft img{ filter:none; }



/* Navbar trasparente con sfumatura */
.glass-nav {
  background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0)) !important;
  backdrop-filter: blur(6px);
  border: none;
  box-shadow: none;
}
.glass-nav .nav-link {
  color: #fff !important;
}
.glass-nav .nav-link:hover {
  color: var(--brand-2) !important;
}
.glass-nav .navbar-brand span {
  color: #fff;
}


/* ===== Navbar bianca ===== */
.glass-nav {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.navbar-light .navbar-brand span,
.navbar-light .nav-link {
  color: #222 !important;
}
.navbar-light .nav-link:hover {
  color: var(--brand) !important;
}



/* ===== Navbar sticky + shrink on scroll ===== */
.glass-nav {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: padding .2s ease, box-shadow .25s ease, background-color .3s ease;
}
.navbar-brand img {
  max-height: 40px;
  transition: max-height .2s ease, transform .2s ease;
}
.sticky-shrink .glass-nav {
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.sticky-shrink .glass-nav .navbar-brand img {
  max-height: 32px;
}
.navbar-light .nav-link { color: #222 !important; }
.navbar-light .nav-link:hover { color: var(--brand) !important; }



/* ===== Fix: Sfondo uniforme blu scuro e accenti verde acqua ===== */
body {
  background-color: #fff !important; /* blu scuro uniforme */
  color: #e6e6e6;
}
.section-soft {
  background: #fff !important;
  color: #e6e6e6;
}
/* Rimuovere riquadri scuri */
.service-card, .card.glass {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Verde acqua per accenti */
.service-num,
.service-card a,
a,
.btn-brand,
.btn-soft,
.navbar-light .nav-link:hover {
  color: #00cec9 !important;
}
.btn-brand,
.btn-soft {
  background: #00cec9 !important;
  border: none !important;
  color: #041315 !important;
}
.btn-brand:hover,
.btn-soft:hover {
  background: #00b5ae !important;
  color: #041315 !important;
}



/* ===== Fix: rimuovere striscia sopra il menu ===== */
.glass-nav {
  border-top: none !important;
  box-shadow: none !important;
}


html, body { margin: 0 !important; padding: 0 !important; }

/* Ensure no gap above navbar */
body { padding-top: 0 !important; }
.navbar { top: 0 !important; margin-top: 0 !important; }
.glass-nav { border-top: none !important; }


/* ===== Verde logo Energetica Sicilia ===== */
:root {
  --brand: #6cb33f;
}

.service-num,
.service-card a,
a,
.btn-brand,
.btn-soft,
.navbar-light .nav-link:hover {
  color: var(--brand) !important;
}

.btn-brand,
.btn-soft {
  background: var(--brand) !important;
  border: none !important;
  color: #fff !important;
}
.btn-brand:hover,
.btn-soft:hover {
  background: #5a9834 !important;
  color: #fff !important;
}

.hr-accent {
  background: var(--brand) !important;
}



/* ===== Icone verdi dal logo ===== */
.icon-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1a1f24; /* cerchio scuro */
  color: #6cb33f !important; /* verde logo */
  margin-bottom: 1rem;
  font-size: 1.6rem;
}



/* ===== Why Us icons: green logo color and visible badge ===== */
.icon-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1a1f24; /* cerchio scuro coerente col tema */
  color: #6cb33f !important; /* verde logo */
  margin-bottom: 1rem;
  font-size: 1.6rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  border: 1px solid rgba(108,179,63,.25);
}