/* =========================================================
   HOME — MetaCraft (Landing chiara, conversion-first)
   ========================================================= */

/* ---------- Assunzioni variabili (se già esistono, ok) ---------- */
:root{
  --bg: #f6f8fb;
  --text: #0b1220;
  --muted: rgba(11,18,32,.68);
  --line2: rgba(11,18,32,.12);
  --brand: #1c5c9e;
  --brand2: #3492d6;
  --radius: 22px;

  /* scale spaziature (se già le hai, puoi ignorare) */
  --s1: 6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 18px;
  --s5: 22px;
  --s6: 28px;
  --s7: 40px;
}

/* HERO — Mobile-first: header height var */
:root { --header-h: 90px; }

/* ---------- Utility (se già esistono, lascia pure) ---------- */
.mt2{ margin-top: var(--s3); }
.mt3{ margin-top: var(--s4); }
.mt4{ margin-top: var(--s6); }
.mt5{ margin-top: calc(var(--s6) + var(--s3)); }
.u-fw-900{ font-weight: 900; }

/* ---------- Tipografia base (se già gestita altrove, puoi ridurre) ---------- */
.h1{
  color: var(--text);
  font-weight: 900;
  letter-spacing: -0.03em;
}
.h2{
  color: var(--text);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.h3{
  color: var(--text);
  font-weight: 900;
  letter-spacing: -0.015em;
}
.muted{ color: var(--muted); }

/* =========================================================
   HERO
   ========================================================= */
.hero--light{
  /* sfondo soft come screenshot */
  background:
    radial-gradient(900px 420px at 14% 10%, rgba(52,146,214,.18), transparent 60%),
    radial-gradient(800px 380px at 86% 18%, rgba(28,92,158,.14), transparent 55%),
    linear-gradient(180deg, #ffffff, var(--bg));
}

/* meno padding top (fix tuo) */
/* .hero--center{
  padding: clamp(10px, 1.9vw, 26px) 0 clamp(20px, 2.8vw, 50px);
} */

.hero__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}

/* ===== HERO — Mobile-first, accessibile ===== */
.hero{
  position: relative;
  z-index: 1;
}

.hero__sticky{
  /* Se usi GSAP pin, tienilo "normale" in CSS e lascia fare a JS su desktop */
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: block;
  /* padding-top: calc(var(--header-h) + var(--s6)); */
  padding-bottom: var(--s6);
}

.hero__content{
  /* testo centrato come screenshot */
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;

  /* da versione precedente: */
  height: calc(100vh - 90px);

  /* Mobile-first: flusso naturale, non “centrato forzato” */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.eyebrow{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(11,18,32,.72);
  background: rgba(52,146,214,.10);
  border: 1px solid rgba(52,146,214,.18);
  padding: 8px 16px;
  border-radius: 999px;
}

.text-accent{ color: var(--brand2); }

.hero__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(28,92,158,.95);
  background: rgba(52,146,214,.10);
  border: 1px solid rgba(52,146,214,.20);
  box-shadow: 0 12px 30px rgba(11,18,32,.06);
  margin: 0 auto;
}

.hero__badge .material-symbols-outlined{
  font-size: 18px;
  color: var(--brand);
}

.hero--center .h1{
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.lead{
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.75;
  color: var(--muted);
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

/* bullets: più compatti e “puliti” */
.hero__bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  color: rgba(11,18,32,.78);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.hero__bullets li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 12px 26px rgba(11,18,32,.06);
}

.hero__bullets .material-symbols-outlined{
  font-size: 20px;
  color: var(--brand);
  margin-top: 1px;
}

/* CTA */
.cta-row{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* CTA: su mobile impila (più accessibile e conversion-friendly) */
.cta-row{
  width: 100%;
  display: grid;
  gap: 12px;
  justify-items: stretch;
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.btn:hover{ transform: translateY(-1px); }

.cta-row .btn{
  justify-content: center;
  min-height: 44px; /* target touch */
}

.btn-primary{
  color: #fff;
  background: linear-gradient(135deg, var(--brand2), var(--brand));
  box-shadow: 0 16px 34px rgba(28,92,158,.26);
}

.btn-primary:hover{
  box-shadow: 0 18px 44px rgba(28,92,158,.30);
}

.btn-ghost{
  color: rgba(11,18,32,.92);
  background: rgba(255,255,255,.92);
  border-color: rgba(11,18,32,.14);
}

.btn-ghost:hover{
  border-color: rgba(52,146,214,.30);
  box-shadow: 0 14px 34px rgba(11,18,32,.10);
}

/* Social proof con loghi */
.hero__social-proof{
  display: grid;
  justify-items: center;
}

/* Social proof: niente margini negativi */
.hero__social-proof{
  margin-top: var(--s5);
  display: grid;
  justify-items: center;
  gap: 10px;
}

.hero__logos{
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__logo{
  height: auto;
  width: auto;
  max-width: min(320px, 100%);
  padding: 6px 10px;
  border-radius: 12px;
  user-select: none;
  object-fit: contain;
  background-color: transparent;
}

.hero__logo--big{ height: 40px; }

.hero__proof-text{
  margin: 0;
  color: rgba(11,18,32,.70);
  font-weight: 800;
  margin-top: -25px;
}

/* Social proof: niente margini negativi */
.hero__proof-text{
  margin: 0;
  color: rgba(11,18,32,.70);
  font-weight: 800;
}

/* 4 card sotto */
.hero__value-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}

.vcard{
  text-align: left;
  background: rgba(255,255,255,.80);
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 16px 36px rgba(11,18,32,.08);
}

.vcard .material-symbols-outlined{
  font-size: 22px;
  color: var(--brand);
}

.vcard__t{
  margin: 8px 0 4px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(11,18,32,.92);
}

.vcard__d{
  margin: 0;
  color: rgba(11,18,32,.68);
  line-height: 1.45;
  font-size: .95rem;
}

/* Stats */
.hero__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.stat{
  background: rgba(255,255,255,.80);
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(11,18,32,.08);
}

.stat__n{
  font-weight: 900;
  letter-spacing: -0.02em;
}

.stat__l{
  color: var(--muted);
  font-size: .95rem;
  margin-top: 4px;
}

/* Panel (destra) più “soft” e pulito */
.hero__panel{
  display: grid;
  gap: 14px;
  align-content: start;
}

.panel-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(52,146,214,.22);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: 0 22px 70px rgba(11,18,32,.12);
}

.panel-card__top{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tag{
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .9rem;
  border: 1px solid rgba(52,146,214,.22);
  background: rgba(52,146,214,.10);
}

.tag--soft{
  border-color: var(--line2);
  background: rgba(11,18,32,.04);
  color: rgba(11,18,32,.72);
}

.panel-card__title{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 12px 0 6px;
}

.panel-card__text{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.panel-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.panel-mini{
  background: rgba(255,255,255,.80);
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: var(--s4);
}

.panel-mini .material-symbols-outlined{
  font-size: 22px;
  color: var(--brand);
}

.panel-mini p{ margin: 8px 0 0; }
.panel-mini .muted{ font-size: .95rem; }

/* =========================================================
   SEZIONI SOTTO
   ========================================================= */
.section{
  padding: clamp(44px, 5vw, 84px) 0;
  background: var(--bg);
}
#first-section-homepage{
  padding-top: 0px !important;
}
.section--tight{
  padding: clamp(34px, 4vw, 64px) 0;
}

.container{
  /* se già esiste, ok — altrimenti ti serve */
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Card base */
.card{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(11,18,32,.08);
}

/* Grid base */
.grid{
  display: grid;
  gap: 16px;
}

.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

/* Steps */
.steps .step{
  padding: var(--s6);
}

.step__icon{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(52,146,214,.12);
  border: 1px solid rgba(52,146,214,.20);
}

.step__icon .material-symbols-outlined{ color: var(--brand); }

/* Servizi */
.service-card{
  padding: var(--s6);
}

.service-card__icon{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: rgba(52,146,214,.12);
  border: 1px solid rgba(52,146,214,.20);
  display: grid;
  place-items: center;
}

.service-card__icon .material-symbols-outlined{ color: var(--brand); }

.list{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,18,32,.80);
}

.list li{ margin: 6px 0; }

/* Portfolio */
.project{
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--s6);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.project:hover{
  transform: translateY(-2px);
  border-color: rgba(52,146,214,.26);
  box-shadow: 0 24px 64px rgba(11,18,32,.14);
}

/* CTA finale */
.cta-final{
  background: linear-gradient(180deg, var(--bg), #ffffff);
}

.cta-final__card{
  background: linear-gradient(135deg, rgba(52,146,214,.14), rgba(28,92,158,.10));
  border: 1px solid rgba(52,146,214,.22);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 34px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 28px 80px rgba(11,18,32,.12);
}

.cta-final__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== Fade on scroll (stile skelementor) ===== */

/* La sezione deve “durare” più di una viewport per avere spazio di fade */
.hero--fade{
  position: relative;
  min-height: 180vh; /* regola: 160-220vh a gusto */
  margin-top: -90px;
  padding-top: 90px;
}

/* Contenuto “appiccicato” mentre scrolli */
.hero--fade .hero__sticky{
  position: sticky;
  top: 0;
  min-height: calc(100vh - 90px);
  display: grid;
  align-items: center;
}

/* Default (prima dello scroll) */
.hero--fade .hero__content{
  will-change: opacity, transform, filter;
  transform: translateY(0);
  opacity: 1;
  filter: blur(0px);
  transition: opacity .08s linear, transform .08s linear, filter .08s linear;
}

/* Se vuoi far svanire anche il panel, opzionale */
.hero--fade .hero__panel{
  will-change: opacity, transform, filter;
}

/* ===== No white gap: tira su TUTTO con margin (layout) ===== */
.section--after-hero{
  /* la muoviamo via JS */
  margin-top: 0;
  will-change: margin-top;
  position: relative;
  z-index: 2;
}
.section--after-hero{ transform: none !important; }

/* =========================================================
   ✅ UPDATE (GSAP / ScrollTrigger)
   - Non togliamo nulla: sovrascriviamo solo i pezzi che causavano gap/hack
   ========================================================= */

/* Con GSAP pinniamo via JS: lo sticky CSS può interferire */
.hero--fade{
  min-height: 100vh !important; /* override: niente 180vh */
}

/* ✅ GSAP pin: evita conflitto con sticky/min-height hack */
.hero--fade .hero__sticky{
  position: relative !important; /* GSAP pin mette fixed quando serve */
  top: auto !important;
  min-height: calc(100vh - 90px);
}

/* La sezione dopo deve poter “salire sopra” senza spazi */
/* non usare più il pull-up via margin-top */
.section--after-hero{
  margin-top: 0 !important;
}

/* =========================================================
   MISC
   ========================================================= */
#lc-helper{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
#lc-helper p{
  margin-top: 12px;
}

/* =========================================================
   MEDIA QUERIES
   ========================================================= */

/* RESPONSIVE */
@media (max-width: 980px){
  .hero__grid{
    grid-template-columns: 1fr;
  }
  .hero__panel{
    display: none; /* mobile pulito e veloce */
  }

  .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3{ grid-template-columns: 1fr; }
  .hero__value-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px){
  .stat--hide-mobile{ display: none; }
  .hero__value-cards{ grid-template-columns: 1fr; }
  .hero__stats{ grid-template-columns: 1fr; }
  /* .hero__logo{ height: 60px; max-width: 160px; } */
  .hero__logo--big{ height: 34px; }
  .section{ padding: 40px 0; }
}

/* Responsive: da tablet/desktop */
@media (min-width: 900px){
  .hero__sticky{
    /* Desktop: puoi centrare */
    display: grid;
    align-items: center;
    /* padding-top: var(--header-h); */
    /* padding-bottom: var(--s7); */
    min-height: calc(100vh - var(--header-h));
  }

  .hero__content{
    justify-content: center;
  }

  .cta-row{
    width: auto;
    display: flex;
    justify-content: center;
    gap: 14px;
  }
}

/* Reduced motion: accessibilità */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn{ transition: none; }
  .hero--fade .hero__content{ transition: none; }
}

/* Override grid per breakpoint (versione tua) */
.grid-3, .grid-4{ grid-template-columns: 1fr; }

@media (min-width: 700px){
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px){
  .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile: nascondi il blocco subito dopo la hero */
@media (max-width: 899px){
  .section--after-hero{
    display: none !important;
  }
}

/* Mobile: riduci padding globale delle sezioni */
@media (max-width: 640px){
  .section{
    padding: 28px 0 !important;      /* prima era 40px */
  }

  .section--tight{
    padding: 22px 0 !important;      /* più compatta */
  }
}

@media (max-width: 640px){
  .hero__sticky{
    padding-top: calc(var(--header-h) - var(--s6)) !important; /* prima più alto */
    padding-bottom: var(--s4) !important;
  }
}

/* FIX: sotto 900px aggiungi aria sotto header (s6) */
@media (max-width: 899px){
  .hero__sticky{
    padding-top: calc(var(--header-h) - var(--s7) - var(--s5)) !important;
    padding-bottom: var(--s4) !important;
  }

  /* evita che qualche height vecchia “tiri su” */
  .hero__content{
    height: auto !important;
  }
}
/* =========================================================
   HOME HERO — Fix mobile-first (400x860)
   Metti questo BLOCCO in fondo al CSS
   ========================================================= */

@media (max-width: 480px){

  /* 1) La hero su mobile deve essere "contenuto-first", non 100vh */
  .hero__sticky{
    min-height: auto !important;                 /* evita vuoti verticali */
    padding-top: calc(var(--s4) + env(safe-area-inset-top)) !important;
    padding-bottom: var(--s5) !important;
  }

  /* 2) Togli la height rigida che forza layout non mobile-first */
  .hero__content{
    height: auto !important;
    justify-content: flex-start !important;
  }

  /* 3) Riduci spaziature verticali percepite sopra al badge */
  .eyebrow{
    margin-top: var(--s3) !important;            /* sostituisce mt3 “pesante” visivamente */
    padding: 8px 12px !important;
    font-size: 14px;
    max-width: 100%;
  }

  /* 4) Tipografia più "mobile": meno righe spezzate, più leggibile */
  .hero--center .h1{
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.08 !important;
    max-width: 20ch !important;
  }

  .lead{
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    max-width: 48ch !important;
  }

  /* 5) CTA: full width, stack già ce l’hai ma qui la rendiamo consistente */
  .cta-row{
    margin-top: var(--s5) !important;            /* compensa il mt4 */
    gap: 12px !important;
  }

  .cta-row .btn{
    width: 100%;
  }

  /* 6) Social proof: elimina “trucchi” che su mobile sballano l’equilibrio */
  .hero__social-proof{
    margin-top: var(--s5) !important;
    gap: 10px !important;
  }

  .hero__proof-text{
    margin-top: 0 !important;                    /* annulla eventuali margini negativi precedenti */
  }

  .hero__logo{
    max-width: min(260px, 100%) !important;
  }
}

/* Tablet small / mobile largo (fino a 899): mantiene coerente l’impostazione */
@media (max-width: 899px){
  .hero__content{
    height: auto !important;                     /* ulteriore sicurezza */
  }
}
/* =========================================================
   HOME HERO — Padding laterale mobile (evita testo a filo bordo)
   Metti questo BLOCCO in fondo al CSS
   ========================================================= */

@media (max-width: 899px){

  /* La hero non è dentro .container: aggiungiamo “container” via padding */
  .hero__content{
    padding-left: clamp(16px, 4.8vw, 22px) !important;
    padding-right: clamp(16px, 4.8vw, 22px) !important;
  }

  /* Se vuoi anche i bottoni/loghi perfettamente allineati al testo */
  .cta-row,
  .hero__social-proof{
    width: 100%;
  }

  /* Evita che l’eyebrow diventi troppo “larga” e sembri attaccata ai bordi */
  .eyebrow{
    max-width: 100%;
  }
}

/* opzionale: su telefoni molto stretti, ancora più “respirato” */
@media (max-width: 420px){
  .hero__content{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}
/* =========================================================
   HERO CTA — Mobile: 1 CTA primaria, centrata, senza “vuoti” laterali
   ========================================================= */
@media (max-width: 640px){

  .cta-row{
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;           /* lo spazio lo gestisce il container */
  }

  /* due bottoni metà e metà */
  .cta-row .btn-primary{
    width: calc(55% - 5px) !important;  /* 10px gap totale / 2 */
    margin: 0 !important;               /* NO margini laterali */
    justify-content: center !important;
    white-space: nowrap;
    padding: 12px 10px !important;      /* un pelo più stretto per stare comodi */
  }
  .cta-row .btn-ghost{
    width: calc(45% - 5px) !important;  /* 10px gap totale / 2 */
    margin: 0 !important;               /* NO margini laterali */
    justify-content: center !important;
    white-space: nowrap;
    padding: 12px 10px !important;      /* un pelo più stretto per stare comodi */
  }

  /* opzionale: icona più piccola sul primary se serve */
  .cta-row .btn-primary .material-symbols-outlined{
    font-size: 18px;
  }
}
/* HERO CTA: testo più piccolo su mobile */
@media (max-width: 640px){
  .hero .cta-row .btn{
    font-size: 13px !important;        /* ↓ testo */
    padding: 11px 10px !important;     /* ↓ aria, evita che “spinga” */
    gap: 8px !important;               /* ↓ distanza icona-testo */
  }

  .hero .cta-row .btn .material-symbols-outlined{
    font-size: 18px;                   /* icona leggermente più piccola */
  }
}

/* ancora più stretto su schermi molto piccoli */
@media (max-width: 380px){
  .hero .cta-row .btn{
    font-size: 13px !important;
    padding: 10px 8px !important;
  }
}
/* =========================================================
   HERO — Mobile-first “Skelementor-like”
   Incolla in fondo al CSS
   ========================================================= */

@media (max-width: 640px){

  /* HERO: niente height/centering da desktop */
  .hero__sticky{
    min-height: auto !important;
    padding-top: calc(var(--s6) + env(safe-area-inset-top)) !important;
    padding-bottom: var(--s6) !important;
  }

  .hero__content{
    height: auto !important;
    justify-content: flex-start !important;

    /* “container” laterale come screenshot */
    padding-left: clamp(18px, 5vw, 24px) !important;
    padding-right: clamp(18px, 5vw, 24px) !important;

    max-width: 560px;  /* mantiene line-length pulita */
    margin: 0 auto;
    text-align: center;
  }

  /* Badge (eyebrow) compatto e centrato */
  .eyebrow{
    margin-top: var(--s4) !important;
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.2;
    border-radius: 999px;
    max-width: 100%;
  }

  /* Titolo: grande, centrato, con line-height “tight” */
  .hero--center .h1{
    margin-top: var(--s4) !important;
    font-size: clamp(34px, 9.5vw, 48px) !important;
    line-height: 1.08 !important;
    max-width: 18ch !important;
  }

  /* Sottotitolo: più leggibile, max width simile allo screenshot */
  .lead{
    margin-top: var(--s4) !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    max-width: 48ch !important;
  }

  /* CTA: stacked come Skelementor (full width, una sotto l’altra) */
  .cta-row{
    margin-top: var(--s6) !important;
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;

    justify-items: stretch;
  }

  .cta-row .btn{
    width: 100% !important;
    max-width: 460px !important;     /* evita “barra” troppo lunga su device larghi */
    margin: 0 auto !important;

    justify-content: center !important;
    min-height: 48px;                /* touch-friendly */
    font-size: 15px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    white-space: nowrap;
  }

  .cta-row .btn .material-symbols-outlined{
    font-size: 18px;
  }

  /* Social proof: pulito, senza trucchi tipo margin-top negativo */
  .hero__social-proof{
    margin-top: var(--s6) !important;
    gap: 0px !important;
    justify-items: center;
  }

  .hero__logos{
    justify-content: center;
  }

  .hero__logo{
    max-width: min(260px, 100%) !important;
    height: auto !important;
    padding: 0 !important; /* più pulito come screenshot */
    border-radius: 12px;
  }

  .hero__proof-text{
    margin: 0 !important;
    font-weight: 800;
    font-size: 13px !important;
  }
}

/* micro-tuning telefoni piccoli */
@media (max-width: 380px){
  .hero--center .h1{
    font-size: clamp(34px, 11vw, 48px) !important;
  }
  .cta-row .btn{
    font-size: 14px !important;
    padding: 11px 12px !important;
  }
}
.hero__social-proof{ text-decoration:none; color:inherit; display:block; }