:root {
  --primary: #9BBB59;
  --bg: #FFFFFF;
  --muted: #F2F4F5;
  --text: #1F2428;
  --subtext: #5A5F63;
  --border: rgba(0,0,0,0.06);
  --shadow: 0 14px 40px rgba(0,0,0,0.06);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Work Sans", system-ui, sans-serif;
  color: var(--text); background: var(--bg); line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.site-header, .site-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 5vw; gap:24px; border-bottom:1px solid var(--border);
}
.site-footer { border-top:1px solid var(--border); border-bottom:none; }
.logo { font-weight: 600; letter-spacing:0.4px; display:flex; align-items:center; }
.logo img { height: 42px; width:auto; display:block; }
.nav { display:flex; gap:18px; }
.nav a { font-weight:500; }
.header-contacts { display:flex; gap:12px; font-weight:500; }
.hero {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  align-items:center; padding: 80px 5vw; gap:48px;
}
.hero-text h1 { font-size: clamp(32px, 5vw, 46px); margin:12px 0; }
.hero-text .lead { color: var(--subtext); max-width: 620px; }
.eyebrow { text-transform: uppercase; letter-spacing:1px; color: var(--subtext); font-size:12px; }
.hero-cta { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.btn { padding:12px 18px; border-radius:10px; font-weight:600; display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; }
.btn.primary { background: var(--primary); color:#0F140E; box-shadow: var(--shadow); }
.btn.ghost { border-color: var(--border); background: #fff; color: var(--text); }
.hero-visual { position:relative; }
.badge { position:absolute; top:-14px; left:-14px; background: #fff; border:1px solid var(--border); padding:10px 12px; border-radius:12px; font-weight:600; box-shadow: var(--shadow); }
.placeholder-img, .card-img {
  background: linear-gradient(135deg, #dfe8d1, #9BBB59);
  border-radius:16px; min-height: 280px; box-shadow: var(--shadow);
}
.hero-photo { background-image: url("../img/hero.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 340px; }
.hero-photo { background-image: url("../img/hero.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 420px; }
.hero-tech { background-image: url("../img/hero-tech.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; }
.card-arch { background-image: url("../img/thumb-architettura.svg"); background-size: cover; background-position: center; }
.card-industriale { background-image: url("../img/thumb-industriale.svg"); background-size: cover; background-position: center; }
.card-telecom { background-image: url("../img/thumb-telecom.svg"); background-size: cover; background-position: center; }
.card-ambientale { background-image: url("../img/thumb-ambientale.svg"); background-size: cover; background-position: center; }
.carousel {
  position: relative; overflow: hidden; border-radius:16px; box-shadow: var(--shadow);
  border:1px solid var(--border); background: #0f130f;
}
.carousel-track {
  display: flex; transition: transform 0.4s ease; width:100%;
}
.carousel-track img {
  width: 100%; height: 420px; object-fit: cover; flex: 0 0 100%;
  display:block;
}
.carousel-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,0.82); border:none; width:40px; height:40px;
  border-radius:50%; display:grid; place-items:center; cursor:pointer;
  box-shadow: var(--shadow); font-size:20px; color: var(--text);
}
.carousel-btn:hover { background:#fff; }
.carousel-btn[data-prev] { left:12px; }
.carousel-btn[data-next] { right:12px; }
.carousel-dots {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; padding:6px 10px; background: rgba(0,0,0,0.35);
  border-radius:999px; backdrop-filter: blur(6px);
}
.carousel-dots .dot {
  width:10px; height:10px; border-radius:50%; border:1px solid #fff; background: transparent; cursor:pointer;
}
.carousel-dots .dot.active { background:#fff; }
.areas { padding: 60px 5vw 40px; }
.section-head { max-width:720px; }
.area-grid {
  margin-top:32px; display:grid; gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
.area-card {
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:18px; display:grid; gap:12px; box-shadow: var(--shadow);
}
.area-card h3 { margin:0; }
.area-card p { color: var(--subtext); margin:0; }
.arrow-link { font-weight:600; color: var(--text); }
.method {
  padding: 60px 5vw; display:grid; gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  background: var(--muted); border-top:1px solid var(--border);
}
.method-card {
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:24px; box-shadow: var(--shadow);
}
.method-card ul { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px; }
.method-card li { display:flex; gap:12px; align-items:flex-start; }
.method-card span { display:inline-flex; width:32px; height:32px; border-radius:10px; background: var(--primary); align-items:center; justify-content:center; font-weight:600; }
.method-side { display:grid; gap:12px; align-content:start; }
.kpi { background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow: var(--shadow); }
.kpi strong { font-size:28px; display:block; }
.contact-block { background: var(--text); color:#fff; padding:20px; border-radius:14px; display:grid; gap:10px; }
.contact-block .btn.primary { background:#fff; color: var(--text); box-shadow:none; }
.cta-band {
  padding: 46px 5vw; background: var(--text); color:#fff;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
}
.cta-actions { display:flex; gap:12px; flex-wrap:wrap; }
.cta-band .btn.ghost { background:transparent; color:#fff; border-color: rgba(255,255,255,0.2); }
.site-footer p { max-width:360px; color: var(--subtext); }
.footer-contacts { display:flex; gap:14px; flex-wrap:wrap; font-weight:600; }
.footer-address { color: var(--subtext); }

@media (max-width: 720px) {
  .site-header { flex-wrap:wrap; }
  .hero { padding-top:60px; }
  .carousel-track img { height: 300px; }
  .hero-photo { min-height: 320px; }
}