/*
  tommasosattin.com — home
  Design tokens: ../../design-tokens.md (estratti da tstudiolab.it)
  Accento lime (--color-accent) SOLO in stato hover, mai come fill di base.
  Tipografia e spaziature: clamp() fluido, nessuna dimensione assoluta fissa.
*/

:root{
  /* ---- Colore ---- */
  --color-primary: #004839;
  --color-bg: #ffffff;
  --color-bg-neutral: #EFE8DC;
  --color-accent: #95C11F; /* SOLO hover */
  --color-eyebrow: #87A49C;
  --color-line: rgba(0,72,57,.14);
  --header-h: 4.5rem;

  /* ---- Tipografia fluida (rif. 320px → 1280px viewport) ---- */
  --fs-h1: clamp(2.75rem, 2.35rem + 2vw, 3.75rem);
  --fs-h2: clamp(1.875rem, 1.6rem + 1.4vw, 3.125rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5625rem);
  --fs-eyebrow: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --fs-stat: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-logo: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-turn: clamp(1.375rem, 1.2rem + 1vw, 2rem);
  --fs-card-text: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); /* testo dei blocchetti (card, feature-card): un filo più grande di --fs-small */

  /* ---- Spaziatura fluida ---- */
  --space-3xs: clamp(0.375rem, 0.35rem + 0.15vw, 0.5rem);
  --space-2xs: clamp(0.625rem, 0.55rem + 0.3vw, 0.875rem);
  --space-xs: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);
  --space-s: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --space-m: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --space-l: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --space-xl: clamp(3.85rem, 3.1rem + 3.3vw, 5.5rem); /* +10%, uniforme con --space-2xl */
  --space-2xl: clamp(5rem, 3.85rem + 5vw, 7.15rem); /* +10% su richiesta cliente (rif. padding sezioni tstudiolab.it) */
  --space-hero-top: clamp(6.5rem, 5.2rem + 5.5vw, 8.5rem); /* più del bottom: deve "assorbire" l'header fixed sovrapposto */

  /* ---- Forma ---- */
  --radius-img: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --radius-card: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);
  --radius-btn: 0.3125rem;

  /* ---- Contenitore ---- */
  --container-max: 87.5rem; /* 1400px — allargato su richiesta cliente, meno margine morto oltre i 1200px */
  --gutter: clamp(1.25rem, 1rem + 3vw, 3rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{ overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  font-family:"Barlow", Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  line-height:1.5;
  letter-spacing:-0.01em;
  color: var(--color-primary);
  background: var(--color-bg);
}
h1,h2,h3,h4{
  margin:0 0 var(--space-xs);
  line-height:1.15;
  letter-spacing:-0.02em;
  font-weight:700;
}
p{ margin:0 0 var(--space-s); max-width:60ch; }
.container{
  max-width: var(--container-max);
  margin-inline:auto;
  padding-inline: var(--gutter);
}
.section{ padding-block: var(--space-2xl); }
.section--tight{ padding-block: var(--space-xl); }
.section--sand{ background: var(--color-bg-neutral); }
.section--brand{ background: var(--color-primary); color:#fff; }
.section--brand h1, .section--brand h2, .section--brand h3, .section--brand p{ color:#fff; }
.section--brand .eyebrow{ color: rgba(255,255,255,.72); }
.eyebrow{
  font-size: var(--fs-eyebrow);
  font-weight:600;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--color-eyebrow);
  margin:0 0 var(--space-2xs);
}
.lead{ font-size: var(--fs-lead); }
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }

/* ---- Icone SVG ---- */
.icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.125em; fill:none; stroke:currentColor; flex-shrink:0; }
.icon--fill{ fill:currentColor; stroke:none; }

/* ---- Bottoni ---- */
.btn{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:inherit;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  font-weight:700;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-decoration:none;
  border-radius: var(--radius-btn);
  padding: clamp(0.65rem, 0.55rem + 0.5vw, 0.875rem) clamp(1.25rem, 1rem + 1vw, 1.5625rem);
  border: 1.5px solid transparent;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
  cursor:pointer;
  margin: var(--space-3xs) var(--space-2xs) var(--space-3xs) 0;
  white-space:nowrap;
}
.btn--solid{ background: var(--color-primary); color:#fff; border-color: var(--color-primary); }
.btn--solid:hover{ background: var(--color-accent); border-color: var(--color-accent); color:#fff; }
.btn--ghost{ background:transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--ghost:hover{ color: var(--color-accent); border-color: var(--color-accent); }
.section--brand .btn--solid{ background:#fff; color: var(--color-primary); border-color:#fff; }
.section--brand .btn--solid:hover{ background: var(--color-accent); color:#fff; border-color: var(--color-accent); }
.section--brand .btn--ghost{ color:#fff; border-color:#fff; }
.section--brand .btn--ghost:hover{ color: var(--color-accent); border-color: var(--color-accent); }
/* variante compatta per il bottone in header, proporzionata alle voci di menu */
.btn--nav{
  padding: var(--space-3xs) clamp(0.875rem, 0.75rem + 0.6vw, 1.125rem);
  font-size: var(--fs-small);
  letter-spacing:.03em;
  margin:0;
}

/* ---- Header / nav ---- */
/* fixed (non sticky) e trasparente di base: l'header si integra visivamente nella hero,
   come su tstudiolab.it. Diventa verde pieno dopo un piccolo scroll (classe aggiunta da js/main.js). */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background: transparent;
  transition: background-color .3s ease;
  /* niente backdrop-filter qui: creerebbe un containing block per il menu mobile
     (position:fixed) annidato dentro l'header, rompendone il posizionamento */
}
header.site.is-solid{ background: var(--color-primary); }
header.site .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: var(--space-xs);
  gap: var(--space-m);
}
.logo-name{ font-size: var(--fs-logo); font-weight:700; font-style:italic; color:#fff; line-height:1; white-space:nowrap; }
/* "Nutrizionista" è un elemento block: va sempre a capo sotto il nome, a qualunque
   larghezza (non un wrap condizionato dallo spazio disponibile), pesa la metà del
   nome ed è meno marcato — così la larghezza del blocco logo resta quella di
   "Tommaso Sattin" (la riga più larga) e il menu desktop non si sposta. */
.logo-sub{ display:block; font-size:.6em; font-weight:600; letter-spacing:.03em; opacity:.85; margin-top:.2em; white-space:nowrap; }
/* Su viewport molto strette (es. iPhone 12/13, 390px) "Tommaso Sattin" e il gap
   standard dell'header non stanno più sulla stessa riga per pochi px: qui si stringe
   solo il gap del contenitore, quel tanto che basta a recuperare lo spazio mancante,
   senza toccare nient'altro nell'header. */
@media (max-width: 26rem){
  header.site .container{ gap: var(--space-xs); }
}
nav.anchors ul{ display:flex; gap: var(--space-s); list-style:none; margin:0; padding:0; }
nav.anchors ul a{ color:#fff; text-decoration:none; font-size: var(--fs-small); font-weight:600; }
nav.anchors ul a:hover{ color: var(--color-accent); }
.header-actions{
  display:flex; align-items:center; gap: var(--space-s);
  /* deve restare sopra all'overlay del menu mobile (z-index:40): un elemento
     senza position dipinge sempre "sotto" un discendente positioned dello
     stesso header, a prescindere dal numero di z-index */
  position:relative; z-index:41;
}
/* CTA header: su fondo verde, di base bianca/testo verde, hover verde acido (mai il contrario) */
.header-actions .btn--nav.btn--solid{ background:#fff; color: var(--color-primary); border-color:#fff; }
.header-actions .btn--nav.btn--solid:hover{ background: var(--color-accent); color:#fff; border-color: var(--color-accent); }
.nav-toggle{
  display:none;
  background:none; border:none; padding: var(--space-3xs);
  color:#fff; cursor:pointer;
}
.nav-toggle .icon{ width:1.5rem; height:1.5rem; }
.mobile-menu-cta{ display:none; }
@media (max-width: 62rem){
  nav.anchors ul{
    position:fixed; inset:0; z-index:40;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background: rgba(0,72,57,.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--space-l) var(--gutter);
    gap: var(--space-l);
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y:auto;
    height:100dvh;
  }
  nav.anchors ul.is-open{ transform:translateX(0); }
  nav.anchors ul a{
    color:#fff; font-size: var(--fs-h3); font-weight:700; font-style:italic;
    text-transform:uppercase; letter-spacing:.03em;
  }
  nav.anchors ul a:hover{ color: var(--color-accent); }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  /* WhatsApp: dentro al menu aperto, come ultima voce (in stile "su fondo scuro") */
  .mobile-menu-cta{ display:block; margin-top:var(--space-s); }
  .mobile-menu-cta .btn{ text-transform:uppercase; }
  nav.anchors ul .btn--solid{ background:#fff; color: var(--color-primary); border-color:#fff; }
  nav.anchors ul .btn--solid:hover{ background: var(--color-accent); color:#fff; border-color: var(--color-accent); }
  /* nascosto quando il menu è aperto: resta solo la X per chiudere */
  body.menu-open .header-actions .btn--nav{ display:none; }
}

/* ---- Hero: foto studio di sfondo, overlay verticale, header integrato sopra ---- */
.section--hero{
  position:relative;
  overflow:hidden;
  padding-top: var(--space-hero-top); /* > del bottom: lascia spazio all'header fixed sovrapposto */
  background-image: linear-gradient(rgba(0,72,57,1) 0%, rgba(0,72,57,.3) 100%), url(../assets/hero-studio.png);
  background-size: cover;
  background-position: center;
}
/* background-size:contain invece di <img>: la foto si adatta sempre al box (qualunque
   forma abbia, larga/stretta/alta) senza mai ritagliarsi né deformarsi — nessun cap
   di larghezza da bilanciare a mano. Il box può restare grande, il contenuto si auto-limita. */
.hero-inner{
  position:relative;
  --hero-portrait-w: clamp(18rem, 11rem + 24vw, 34rem);
  /* Gap e margine dedicati alla hero (non i token condivisi --space-m/--space-l): sotto i
     ~1200px devono restringersi molto più in fretta della spaziatura "normale" del sito,
     per cedere spazio alla colonna testo prima che sia il testo stesso a doversi rimpicciolire.
     Sopra i 1200px coincidono con --space-m/--space-l (nessuna differenza a schermi larghi). */
  --hero-gap: clamp(0.625rem, -4.25rem + 8.667vw, 2.25rem);
  --hero-right-margin: clamp(0.875rem, -7rem + 14vw, 3.5rem);
}
.hero-copy{
  position:relative; z-index:2;
  max-width: calc(100% - var(--hero-portrait-w) - var(--hero-gap) - var(--hero-right-margin));
}
.hero-portrait{
  position:absolute;
  right: var(--hero-right-margin); /* margine dal bordo destro */
  top:0;
  bottom: calc(-1 * var(--space-2xl)); /* incollata al bordo basso vero della sezione, sempre */
  width: var(--hero-portrait-w);
  z-index:1;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:bottom center;
}
/* Da 1185px in giù il ritratto cresce fino a riempire tutto lo spazio verticale
   disponibile (eyebrow in alto, fondo sezione in basso): diventando più alto deve
   anche diventare proporzionalmente più largo (aspect-ratio fisso). Il bordo SINISTRO
   resta fissato dov'era nella versione normale/larga (--hero-portrait-left, calcolato
   con la larghezza "base" non ingrandita): la crescita si vede quindi tutta verso
   destra, uscendo dalla viewport (clippata dall'overflow:hidden della sezione) invece
   di invadere lo spazio del testo a sinistra. Bottom resta l'unico ancoraggio verticale
   (vedi nota sotto). Sopra i 1185px e sotto gli 896px (mobile) resta tutto come prima.
   IMPORTANTE: l'ancoraggio deve restare sul BASSO (bottom, non top) e sul SINISTRO
   (left, non right): con entrambi i lati opposti fissi insieme ad aspect-ratio il box
   diventa sovravincolato e il browser ne ignora uno, rompendo l'ancoraggio. Qui si
   passa un'altezza esplicita (stimata via clamp su due punti misurati empiricamente in
   questa fascia, dato che l'altezza reale dipende dal reflow del testo, non da una
   formula pura) invece di lasciarla "auto": così bottom e left restano gli unici
   ancoraggi rispettati, top e right diventano auto e aspect-ratio deve risolvere solo
   la larghezza, senza conflitti. */
@media (max-width: 74.0625rem){
  .hero-inner{
    --hero-portrait-left: calc(100% - var(--hero-right-margin) - var(--hero-portrait-w) - 1.5rem);
  }
  .hero-portrait{
    top:auto;
    left: var(--hero-portrait-left);
    right:auto;
    height: clamp(35rem, 74.57rem - 46.63vw, 50rem);
    width:auto;
    aspect-ratio: 1884 / 2272;
  }
}
@media (max-width: 56rem){
  .section--hero{ padding-bottom:0; }
  .hero-copy{ max-width:none; }
  .hero-portrait{
    position:static;
    top:auto; bottom:auto;
    height:auto; /* azzera l'altezza esplicita della fascia 896-1185px, che altrimenti resta attiva
                    anche qui (stessa regola .hero-portrait, nessun max-width sulla media query
                    superiore la ferma) e produce un box sproporzionato con un vuoto sopra la foto */
    width:min(22rem, 80%);
    aspect-ratio: 1884 / 2272; /* stessa proporzione del PNG: contain riempie il box esattamente */
    margin: var(--space-m) auto 0;
  }
}

/* ---- Layout helpers ---- */
.row{ display:flex; gap: var(--space-xl); align-items:stretch; }
.row > *{ flex:1; min-width:0; }
.row.reverse{ flex-direction:row-reverse; }
@media (max-width: 56rem){
  /* column-reverse: l'immagine (sempre ultima nel markup) va sempre sopra al testo quando collassano */
  .row{ flex-direction:column-reverse; align-items:stretch; gap: var(--space-l); }
  .row.reverse{ flex-direction:column-reverse; align-items:stretch; gap: var(--space-l); }
}

/* ---- Immagini nelle sezioni a doppia colonna (hero, chi sono, tstudiolab) ---- */
.media{ position:relative; }
.media::before{
  content:"";
  position:absolute; top:-6%; right:-10%;
  width:65%; aspect-ratio:1;
  background: radial-gradient(circle, rgba(149,193,31,.14), transparent 70%);
  z-index:0;
}
/* foto reale usata come sfondo della colonna: riempie sempre l'altezza della colonna di testo affiancata */
.media-photo{
  position:relative; z-index:1;
  min-height: 20rem;
  border-radius: var(--radius-img);
  background-size:cover;
  background-position:center;
}
/* colonna "founder": foto studio con overlay verde leggero, logo bianco sopra (niente card) */
.media--tstudiolab{
  position:relative; z-index:1;
  min-height: 18rem;
  border-radius: var(--radius-img);
  background-image: linear-gradient(rgba(0,72,57,.55), rgba(0,72,57,.62)), url(../assets/tommaso-sattin-studio.jpg);
  background-size:cover;
  background-position:center;
  display:flex; align-items:center; justify-content:center;
  padding: var(--space-m);
}
.media--tstudiolab img{ display:block; width: clamp(13rem, 10rem + 13vw, 19rem); height:auto; }

@media (max-width: 56rem){
  /* in colonna, senza l'altezza della colonna di testo da eguagliare, l'immagine
     ha bisogno di un rapporto proprio invece del solo min-height (altrimenti resta bassa) */
  .media-photo, .media--tstudiolab{ min-height:0; aspect-ratio: 1/1; }
  /* il bagliore decorativo sconfina oltre il bordo destro quando la colonna è a piena larghezza: causava scroll orizzontale */
  .media::before{ display:none; }
}

/* ---- Barra fiducia ---- */
.section--stats{ position:relative; overflow:hidden; }
.section--stats::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(0,72,57,.08) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity:.6;
}
.section--stats .container{ position:relative; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap: var(--space-m); text-align:center; }
.stats .num{
  font-size: var(--fs-stat); font-weight:700; letter-spacing:-0.02em;
  display:flex; align-items:center; justify-content:center; gap:.15em;
}
.stats .num .icon{ width:.5em; height:.5em; }
.stats .lbl{ font-size: var(--fs-small); color: var(--color-eyebrow); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
@media (max-width: 40rem){ .stats{ grid-template-columns:repeat(2,1fr); row-gap: var(--space-l); } }

/* ---- Grid / card ---- */
.grid{ display:grid; gap: var(--space-m); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
@media (max-width: 56rem){ .g3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 40rem){ .g2, .g3{ grid-template-columns:1fr; } }

.card{
  background:#fff;
  border:1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  box-shadow: 0 6px 20px rgba(0,72,57,.05);
}
.card h3{ margin-bottom: var(--space-2xs); }
.card p{ font-size: var(--fs-card-text); color: var(--color-primary); opacity:.85; margin:0; max-width:none; }
.card-list{ font-size: var(--fs-card-text); line-height:1.35; color: var(--color-primary); opacity:.85; margin:0; padding-left:1.1em; }
.card-list li{ margin-bottom: var(--space-3xs); }
.card-list li:last-child{ margin-bottom:0; }
.card--positive .card-list{ color:#fff; opacity:.9; }
#servizi .card{ transition: transform .25s ease, box-shadow .25s ease; }
#servizi .card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,72,57,.12); }
.card--media{ padding:0; overflow:hidden; }
.card--media .card-media{ aspect-ratio: 3/2; background-size:cover; background-position:center; }
.card--media .card-body{ padding: var(--space-m); }
.card--media .card-body p{ margin:0; }
/* "Quello che imparerai": fondo verde scuro pieno, per farlo risaltare rispetto al negativo */
.card--positive{ background: var(--color-primary); }
.card--positive h3, .card--positive p{ color:#fff; }
.card--positive p{ opacity:.9; }
.card-flag{ display:flex; align-items:center; gap: var(--space-2xs); margin-bottom: var(--space-2xs); }
.card-flag h3{ margin:0; }
.icon-circle{
  width: clamp(1.75rem, 1.6rem + 0.5vw, 2.125rem);
  height: clamp(1.75rem, 1.6rem + 0.5vw, 2.125rem);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.icon-circle .icon{ width:55%; height:55%; }
.card--negative .icon-circle{ background: rgba(0,72,57,.08); color: var(--color-primary); }
.card--positive .icon-circle{ background:#fff; color: var(--color-primary); }

/* ---- Sezione "Perché le diete non funzionano" ---- */
.section--problem{
  background-image: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.78)), url(../assets/tommaso-sattin-approccio.jpg);
  background-size: cover;
  background-position: center;
}
.problem-block{ max-width: 44rem; margin:0 auto var(--space-xl); }
.turn-block{
  position:relative;
  max-width: 46rem; /* un filo più largo: evita che l'ultima parola del paragrafo vada isolata a capo */
  margin: 0 auto var(--space-2xl);
  background: var(--color-bg-neutral);
  border-radius: calc(var(--radius-card) * 2);
  padding: var(--space-l) var(--space-xl);
}
.turn-block::before{
  content:"“";
  display:block;
  font-size: clamp(3rem, 2.4rem + 2.5vw, 4.25rem);
  font-weight:700; font-style:italic;
  color: var(--color-primary); opacity:.35;
  line-height:1;
  margin-bottom: var(--space-3xs);
}
.turn-block h3{ font-size: var(--fs-turn); margin-bottom: var(--space-s); }
.turn-block p{ margin:0 auto; max-width:56ch; opacity:.85; }

/* ---- Chi sono — feature card (riga separata sotto le due colonne) ---- */
.feature-card{
  background:#fff;
  border:1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  box-shadow: 0 6px 20px rgba(0,72,57,.05);
}
.feature-card .icon-badge{
  width: clamp(2.5rem, 2.2rem + 1vw, 3rem);
  height: clamp(2.5rem, 2.2rem + 1vw, 3rem);
  border-radius:50%;
  background: var(--color-primary);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--space-s);
}
.feature-card .icon-badge .icon{ width:50%; height:50%; }
.feature-card h4{ margin:0 0 var(--space-3xs); font-size: var(--fs-body); }
.feature-card p{ margin:0; font-size: var(--fs-card-text); opacity:.8; }

/* ---- Reassurance (hero) / contatti con icone ---- */
/* flex-wrap:wrap (sempre) invece di un breakpoint fisso: le voci restano affiancate
   finché c'è spazio e vanno a capo una alla volta (l'ultima per prima), senza mai
   sconfinare nella colonna immagine a nessuna larghezza intermedia */
.icon-list{
  display:flex; flex-wrap:wrap; gap: var(--space-3xs) var(--space-xs);
  list-style:none; margin: var(--space-s) 0 0; padding:0;
  font-size: var(--fs-small);
}
.icon-list li{ display:flex; align-items:center; gap: var(--space-3xs); white-space:nowrap; }
.icon-list .icon{ color: var(--color-primary); width:1.1em; height:1.1em; flex-shrink:0; }
.section--brand .icon-list .icon{ color:#fff; }
.contact-list{
  display:flex; flex-direction:column; align-items:center;
  list-style:none; margin: var(--space-m) 0 0; padding:0;
  font-size: var(--fs-body); opacity:.92;
}
.contact-list li{ display:flex; align-items:flex-start; gap: var(--space-2xs); margin-bottom: var(--space-2xs); text-align:left; }
.contact-list li .icon{ margin-top:.2em; }
.contact-list a{ color:#fff; text-decoration:underline; text-underline-offset:.15em; }
.contact-list a:hover{ color: var(--color-accent); }
@media (max-width: 56rem){
  .contact-list li{ text-align:center; gap:.375rem; }
}

/* ---- Metodo — step in box arrotondati, allineati a sinistra, numero come "bullet" pieno accanto al titolo ---- */
.method-step{
  display:flex;
  align-items:flex-start;
  gap: var(--space-s);
  background: var(--color-bg-neutral);
  border-radius: calc(var(--radius-card) * 1.5);
  padding: var(--space-m) var(--space-l);
  text-align:left;
}
.method-step .n{
  flex-shrink:0;
  width: clamp(2.25rem, 2rem + 1vw, 2.75rem);
  height: clamp(2.25rem, 2rem + 1vw, 2.75rem);
  background: var(--color-primary);
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size: var(--fs-body);
}
.method-step__body h3{ margin-bottom: var(--space-2xs); }
.method-step__body p{ margin:0; opacity:.85; }

/* ---- Recensioni ---- */
.rev{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  text-align:left;
}
.rev .stars{ display:flex; gap:.15em; margin-bottom: var(--space-2xs); color:#fff; }
.rev .stars .icon{ width:.9rem; height:.9rem; opacity:.9; }
.rev q{ display:block; font-size: var(--fs-small); margin-bottom: var(--space-xs); quotes:none; opacity:.92; }
.rev .who{ font-size: var(--fs-small); font-weight:700; opacity:.75; }
.badge{
  display:inline-flex; align-items:center; gap: var(--space-2xs);
  border:1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-card);
  padding: var(--space-2xs) var(--space-s);
  font-size: var(--fs-small); font-weight:600;
  margin-top: var(--space-m);
}
.badge .icon{ color:#fff; }
.badge a{ color:#fff; }

/* ---- Footer ---- */
footer.site{ background: var(--color-bg-neutral); padding-block: var(--space-l); }
footer.site .container{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: var(--space-s);
  font-size: var(--fs-small);
}
footer.site a{ color: var(--color-primary); }
.social-list{
  display:flex; gap: var(--space-xs);
  list-style:none; margin:0; padding:0;
}
.social-list a{
  display:flex; align-items:center; justify-content:center;
  color: var(--color-primary);
  transition: color .15s ease;
}
.social-list a:hover{ color: var(--color-accent); }
.social-list .icon{ width:1.4em; height:1.4em; }
.footer-menu{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: var(--space-xs) var(--space-m);
  list-style:none; margin:0; padding:0;
}
.footer-credits{ opacity:.7; }