/* ================================================================
   HOME REDESIGN — basato su Multidialogo Design System (DS)
   Mantiene nav/tema/cookie da style.css + app.js
================================================================ */

/* --- override font a Montserrat (DS) --- */
body { font-family: var(--font-sans); font-weight: 500; }
nav#nav, .nav-inner, .nav-links a, .btn, h1, h2, h3, h4 { font-family: var(--font-sans) !important; }

/* --- bridge vars DS → vars sito --- */
:root {
  --orange: var(--accent);          /* #D96A2B */
  --navy:   var(--md-blu-multi);    /* #00244D */
  --accent-soft: var(--md-secondario-soft);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --bg-card: var(--surface);
  --text: var(--fg);
  --text-soft: var(--fg-body);
  --text-faint: var(--fg-muted);
  --shadow: var(--shadow-sm);
  --shadow-hover: var(--shadow-lg);
  --radius: var(--radius-md);
  --radius-lg: var(--radius-xl);
  --ease: var(--ease-out);
  --hero-glow: linear-gradient(180deg,#CFE2F5 0%,#E4F0FA 48%,#F4F9FD 100%);
  --page-pad: 6%;
}
[data-theme="dark"] {
  --hero-glow: linear-gradient(180deg,#0d1a2e 0%,#0a1525 48%,#08101e 100%);
}

/* ================================================================
   HERO
================================================================ */
header.hero {
  position: relative;
  padding: 150px 0 96px;
  overflow: hidden;
  background: var(--hero-glow);
}
header.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -40px;
  height: 200px;
  background:
    radial-gradient(60% 90% at 18% 100%, var(--bg,#fff) 0%, transparent 60%),
    radial-gradient(50% 80% at 50% 100%, var(--bg,#fff) 0%, transparent 62%),
    radial-gradient(60% 90% at 82% 100%, var(--bg,#fff) 0%, transparent 60%);
  pointer-events: none;
}
[data-theme="dark"] header.hero::after { display: none; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.02fr; gap: 48px; align-items: center; }
.hero-mark { width: 64px; height: 64px; margin-bottom: 20px; }
.hero h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.2rem,4.5vw,3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 18px;
}
.hero h1 .h1-sm { display: block; font-size: clamp(1.1rem,2.2vw,1.4rem); line-height: 1.2; margin-bottom: 6px; }
.hero .sub { font-size: clamp(1rem,1.8vw,1.18rem); font-weight: 500; color: var(--fg-body); margin: 0 0 30px; max-width: 40ch; line-height: 1.5; }
.hero-cta { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.hero-cta .btn { padding: 14px 28px; font-size: 1rem; }
.hero .fineprint { font-size: .82rem; color: var(--fg-muted); margin-bottom: 20px; font-weight: 600; }
.rating { display: flex; align-items: center; gap: 10px; }
.stars { color: var(--accent); display: inline-flex; gap: 2px; letter-spacing: 2px; }
.rating .rt { font-size: .85rem; color: var(--fg-body); font-weight: 600; }
.rating .rt b { color: var(--fg); font-weight: 800; }

/* hero slider */
.hero-slider { width: 100%; }
.hero-stage { position: relative; width: 100%; aspect-ratio: 2231 / 1610; }
.hero-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .7s var(--ease-out);
  filter: drop-shadow(0 24px 50px rgba(31,42,55,.22));
  pointer-events: none;
}
.hero-shot.on { opacity: 1; pointer-events: auto; }
.hero-dots { display: flex; gap: 9px; justify-content: center; margin-top: 22px; }
.hero-dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: #BCCDDD; border: 0; padding: 0;
  cursor: pointer; transition: background .2s, width .2s;
}
.hero-dot.on { background: var(--accent); width: 26px; }

/* ================================================================
   TIMELINE FEATURES
================================================================ */
.tl-sec { padding: 96px 0; }
.tl-grid { display: grid; grid-template-columns: 1fr 80px 1fr; }
.tl-row { display: contents; }
.tl-center { display: flex; flex-direction: column; align-items: center; position: relative; }
.tl-line {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: 0;
  transition: opacity .8s var(--ease-out);
}
.tl-line.in { opacity: 1; }
.tl-node {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--surface); border: 4px solid var(--accent);
  margin-top: 54px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.tl-node.in { opacity: 1; transform: scale(1); }
.tl-node::after { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--accent); }
.tl-label {
  align-self: flex-start; margin-top: 60px;
  font-family: var(--font-sans); font-weight: 900; font-size: 18px; letter-spacing: .02em;
  color: var(--fg); padding: 0 28px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease-out) .08s, transform .5s var(--ease-out) .08s;
}
.tl-label.in { opacity: 1; transform: none; }
.tl-label.right { text-align: left; }
.tl-label.left { text-align: right; align-self: flex-end; }

.fcard {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 32px 34px;
  box-shadow: 0 1px 2px rgba(31,42,55,.04), 0 12px 30px -18px rgba(31,42,55,.18);
  margin: 22px 0;
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out),
    border-color .26s, box-shadow .26s;
  text-decoration: none; color: inherit; display: block;
}
.fcard.in { opacity: 1; transform: none; }
.fcard::before {
  content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--accent); opacity: 0; transform: scaleY(.4);
  transform-origin: top; transition: opacity .26s, transform .26s;
}
.fcard:hover { transform: translateY(-6px); border-color: transparent;
  background: linear-gradient(165deg, var(--md-soft-bkg) 0%, var(--surface) 64%);
  box-shadow: 0 2px 4px rgba(31,42,55,.05), 0 26px 50px -22px rgba(217,119,87,.42); }
.fcard.in:hover { transform: translateY(-6px); }
.fcard:hover::before { opacity: 1; transform: scaleY(1); }
.fcard-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.fcard-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none; border-radius: 14px;
  background: var(--surface); color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--md-soft-bkg), 0 4px 12px -6px rgba(217,119,87,.4);
  transition: background .26s, color .26s, box-shadow .26s, transform .26s;
}
.fcard:hover .fcard-icon { background: var(--accent); color: #fff; transform: translateY(-2px);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 10px 20px -8px rgba(217,119,87,.6); }
.fcard-icon svg { width: 21px; height: 21px; stroke-width: 1.6; }
.fcard-tag {
  font-family: var(--font-sans); font-weight: 800; font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg); padding: 5px 12px; border-radius: 999px;
  background: var(--md-soft-bkg);
}
.fcard h3 {
  font-family: var(--font-sans); font-weight: 900; font-size: 21px; letter-spacing: .01em;
  text-transform: uppercase; color: var(--accent); line-height: 1.15;
}
.fcard p { font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--fg-body); margin: 14px 0 24px; }
.fcard-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-weight: 800; font-size: 14px; letter-spacing: .01em;
  color: var(--fg); text-decoration: none; transition: color .2s, gap .2s;
}
.fcard-link svg { width: 17px; height: 17px; stroke-width: 2.1; transition: transform .2s; }
.fcard:hover .fcard-link { color: var(--accent); gap: 11px; }
.fcard:hover .fcard-link svg { transform: translateX(2px); }

/* ================================================================
   PROBLEM SECTION
================================================================ */
.prob-sec { padding: 40px 0 80px; }
.prob {
  display: grid; grid-template-columns: 1fr 1.1fr;
  background: var(--surface-2); border-radius: 24px;
  overflow: hidden; box-shadow: var(--shadow-md);
}
.prob-photo { min-height: 430px; overflow: hidden; }
.prob-photo img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.prob-body {
  padding: 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.prob-body h2 {
  font-family: var(--font-sans); font-weight: 900; line-height: 1.12;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg);
}
.prob-body h2 .pl1 { display: block; font-size: clamp(1.2rem,2.2vw,1.5rem); }
.prob-body h2 .pl2 { display: block; font-size: clamp(1.2rem,2.2vw,1.45rem); }
.prob-body p { font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--fg-body); margin: 22px 0 30px; max-width: 440px; }

/* ================================================================
   STATS
================================================================ */
.stats-sec { padding: 40px 0 96px; }
.stats-in { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.stat-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 38px 30px 34px; text-align: center;
  box-shadow: 0 1px 2px rgba(31,42,55,.04), 0 14px 34px -22px rgba(31,42,55,.2);
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), border-color .26s, box-shadow .26s;
}
.stat-card.in { opacity: 1; transform: none; }
.stat-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), #F0A875);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.stat-card:hover { transform: translateY(-6px); border-color: transparent;
  box-shadow: 0 2px 4px rgba(31,42,55,.05), 0 26px 50px -22px rgba(217,119,87,.4); }
.stat-card.in:hover { transform: translateY(-6px); }
.stat-card:hover::before { transform: scaleX(1); }
.stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; flex: none; border-radius: 15px;
  background: var(--surface); color: var(--accent); margin-bottom: 18px;
  box-shadow: inset 0 0 0 1.5px var(--md-soft-bkg), 0 6px 14px -8px rgba(217,119,87,.45);
  transition: background .26s, color .26s, box-shadow .26s, transform .26s;
}
.stat-icon svg { width: 23px; height: 23px; stroke-width: 1.7; }
.stat-card:hover .stat-icon { background: var(--accent); color: #fff; transform: translateY(-2px);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 12px 22px -8px rgba(217,119,87,.6); }
.stat-n {
  font-family: var(--font-sans); font-weight: 900; font-size: 46px; line-height: 1;
  letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: 23px; font-weight: 800; margin-left: 3px; color: var(--accent); letter-spacing: 0; text-transform: uppercase; }
.stat-l { font-size: 14.5px; font-weight: 700; color: var(--fg-body); margin-top: 14px; letter-spacing: .01em; }

/* ================================================================
   REVIEWS (bridge con stile MDGR esistente)
================================================================ */
.reviews-sec { padding: 96px 0; background: var(--md-soft-gray); }
[data-theme="dark"] .reviews-sec { background: var(--bg-subtle, #0f1928); }
.reviews-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.h2-ds {
  font-family: var(--font-sans); font-weight: 900; font-size: clamp(1.8rem,3vw,2.4rem);
  line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg);
  margin: 14px 0 0;
}
.reviews-rating {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  font-size: 15px; font-weight: 500; color: var(--fg-body);
}
.reviews-rating b { color: var(--fg); font-weight: 800; }
.rev-stars { display: inline-flex; gap: 3px; color: var(--accent); }

/* ================================================================
   REVIEWS GRID (classi DS usate da google-reviews.php)
================================================================ */
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.rev-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 30px 30px 26px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.rev-card.in { opacity: 1; transform: none; }
.rev-stars { display: inline-flex; gap: 3px; color: var(--accent); font-size: 1.1rem; }
.rev-q { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--fg); margin: 16px 0 24px; flex: 1; }
.rev-author { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.rev-avatar {
  width: 46px; height: 46px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--md-soft-bkg); color: var(--accent);
  font-family: var(--font-sans); font-weight: 800; font-size: 15px;
}
.rev-name { display: block; font-family: var(--font-sans); font-weight: 800; font-size: 14.5px; color: var(--fg); }
.rev-role { display: block; font-size: 13px; font-weight: 500; color: var(--fg-muted); margin-top: 2px; }
@media (max-width:860px) { .reviews-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rev-card { opacity:1; transform:none; transition:none; } }

/* ================================================================
   MULTIPREMIO (mantenuto dall'attuale)
================================================================ */
#home-mp { padding: 40px 0 90px; }
.hmp-card {
  position: relative; border-radius: 32px; overflow: hidden;
  background: linear-gradient(150deg,#001233,#002a5c 55%,#01163a);
  box-shadow: 0 30px 80px rgba(0,18,51,.4);
}
.hmp-glow {
  position: absolute; inset: 0;
  background: radial-gradient(700px 380px at 88% 8%,rgba(240,88,0,.4),transparent 58%),
              radial-gradient(500px 300px at 5% 95%,rgba(255,170,80,.2),transparent 55%);
  pointer-events: none;
}
.hmp-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px;
  align-items: center; padding: 58px 56px;
}
.hmp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: .8rem; font-weight: 700;
  padding: 7px 16px; border-radius: 100px; margin-bottom: 22px;
}
.hmp-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #46e09a;
  box-shadow: 0 0 0 0 rgba(70,224,154,.7); animation: hmppulse 2s infinite;
}
@keyframes hmppulse {
  0%  { box-shadow: 0 0 0 0   rgba(70,224,154,.6); }
  70% { box-shadow: 0 0 0 10px rgba(70,224,154,0); }
  100%{ box-shadow: 0 0 0 0   rgba(70,224,154,0); }
}
.hmp-left h2 {
  font-weight: 900; font-size: clamp(2rem,4vw,3rem); line-height: 1.02;
  letter-spacing: -0.035em; color: #fff; margin-bottom: 16px;
}
.hmp-grad {
  background: linear-gradient(100deg,#ff8a3d,#F05800 60%,#ffb070);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hmp-left p { color: rgba(255,255,255,.84); font-size: 1.06rem; line-height: 1.55; max-width: 46ch; margin-bottom: 30px; }
.hmp-actions { display: flex; gap: 13px; flex-wrap: wrap; }
.hmp-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(100deg,#ff8a3d,#F05800); color: #fff; font-weight: 700;
  padding: 14px 28px; border-radius: 100px; text-decoration: none;
  box-shadow: 0 12px 36px rgba(240,88,0,.45); transition: transform .25s;
}
.hmp-btn-primary:hover { transform: translateY(-3px); }
.hmp-btn-ghost {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-weight: 700; padding: 14px 28px; border-radius: 100px;
  text-decoration: none; transition: background .25s;
}
.hmp-btn-ghost:hover { background: rgba(255,255,255,.16); }
.hmp-right { display: flex; flex-direction: column; gap: 22px; }
.hmp-stat {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; padding: 20px 26px;
}
.hmp-n {
  font-weight: 900; font-size: 2.4rem; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(100deg,#ff8a3d,#ffb070);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hmp-n.hmp-nc { font-size: 1.7rem; }
.hmp-l { color: rgba(255,255,255,.72); font-size: .9rem; margin-top: 5px; }

/* ================================================================
   CTA BAND
================================================================ */
.cta-band { text-align: center; padding: 96px 0; }
.cta-box {
  background: linear-gradient(135deg, var(--navy), #003a78);
  border-radius: var(--radius-xl); padding: 72px 40px; color: #fff;
  position: relative; overflow: hidden;
}
.cta-box::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 18%,rgba(240,88,0,.4),transparent 48%);
}
.cta-box h2 {
  font-weight: 900; color: #fff; font-size: clamp(2rem,4.2vw,3rem);
  letter-spacing: -0.04em; margin-bottom: 16px; position: relative;
}
.cta-box p { color: rgba(255,255,255,.88); font-size: 1.1rem; margin-bottom: 32px; position: relative; }
.cta-box .btn { background: var(--accent); color: #fff; padding: 16px 36px; font-size: 1.04rem; position: relative; }
.cta-box .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(240,88,0,.45); }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width:860px) {
  header.hero { padding: 120px 0 64px; }
  .hero-in { grid-template-columns: 1fr; gap: 44px; }
  .hero-mark { width: 48px; height: 48px; margin-bottom: 14px; }
  .hero h1 { text-align: center; }
  .hero .sub { text-align: center; margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero .fineprint { text-align: center; }
  .rating { justify-content: center; }

  .tl-grid { grid-template-columns: 1fr; }
  .tl-row { display: block; }
  .tl-center { display: none; }
  .tl-label { display: none; }
  .fcard { margin: 12px 0; }
  .fcard.in { opacity: 1 !important; transform: none !important; }

  .prob { grid-template-columns: 1fr; }
  .prob-photo { min-height: 280px; }
  .prob-body { padding: 36px 28px; }

  .stats-in { grid-template-columns: 1fr; }
  .stat-card.in { opacity: 1 !important; transform: none !important; }

  .hmp-inner { grid-template-columns: 1fr; padding: 40px 30px; gap: 30px; }
  .hmp-right { flex-direction: row; flex-wrap: wrap; }
  .hmp-stat { flex: 1; min-width: 120px; }

  .cta-box { padding: 48px 24px; }
}
@media (max-width:520px) {
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fcard, .stat-card, .tl-node, .tl-label, .tl-line { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* sr-only (visibile solo ai crawler, nascosto visivamente) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* footer h4 → h3 override visivo */
footer h3 { font-family: var(--font-sans); font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }

/* stars hero — ultima stella semitrasparente */
.star-half { opacity: .5; }

/* stat-card transition-delay via classe */
.stat-card--1 { transition-delay: .0s; }
.stat-card--2 { transition-delay: .1s; }
.stat-card--3 { transition-delay: .2s; }

/* container fluid allineato all'header: larghezza piena, 8% desktop / 5% mobile */
.wrap { max-width: none; padding: 0 8%; }
@media (max-width: 768px) { .wrap { padding: 0 5%; } }