/* ============================================================================
   brand.css — DESIGN SYSTEM GOLDEN FRATELLI STAFA
   ----------------------------------------------------------------------------
   Caricato da TUTTE le pagine: index.html (landing A), lucidatura.html (B),
   grazie.html, grazie-check.html.

   🔑 Qui dentro sta tutto cio' che DEVE restare identico fra le pagine:
      variabili di brand, nav, footer, form, bottoni, GARANZIA STAFA.
      La regola (funnel-e-landing.md §5) e' che il blocco Garanzia Stafa sia
      identico parola per parola su A e B: tenendolo qui diventa
      tecnicamente impossibile che le due pagine divergano.

   ❌ Non mettere qui niente di specifico di una pagina sola:
      quello va in interni.css (A) o lucidatura.css (B).

   Estratto da index.html il 20 agosto 2026 (branch refactor-css).
   Nessuna regola e' stata modificata: solo spostata.
   ============================================================================ */

:root{
    --bg:#0a0a0a;
    --bg-lift:#141210;
    --bg-card:#181613;
    --ink:#f4f1ea;
    --ink-dim:#a39f97;
    --ink-faint:#6f6b63;
    --gold:#D4AF37;
    --gold-bright:#F5D67E;
    --gold-deep:#B8902A;
    --gold-grad:linear-gradient(135deg,#F5D67E 0%,#E7C25C 35%,#D4AF37 60%,#B8902A 100%);
    --line:rgba(212,175,55,.16);
    --maxw:1180px;
    --font-d:'Sora',system-ui,sans-serif;
    --font-b:'Manrope',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-b);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* Niente scorrimento orizzontale su mobile (16/09/2026). Su iOS Safari
     overflow-x sul solo body non basta: la pagina si trascina di lato.
     "clip" taglia senza creare un contenitore di scroll, quindi non rompe
     gli elementi fissi; "hidden" resta come ripiego per i browser vecchi. */
  html,body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
  @supports (overflow-x:clip){html,body{overflow-x:clip}}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}

  /* ---------- ATMOSPHERE ---------- */
  .grain{
    position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 20px;
    background:rgba(10,10,10,.55);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:background .3s ease,border-color .3s ease;
  }
  header.nav.scrolled{background:rgba(8,8,8,.86);border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:10px}
  .brand img{width:46px;height:46px;border-radius:8px;object-fit:cover}
  .brand .wordmark{display:flex;flex-direction:column;line-height:1.05}
  .brand .wordmark b{font-family:var(--font-d);font-weight:700;font-size:15px;letter-spacing:.04em;
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand .wordmark span{font-size:9.5px;letter-spacing:.32em;color:var(--ink-faint);text-transform:uppercase}
  .nav-links{display:flex;align-items:center;gap:10px}
  .nav-links a.home{
    font-family:var(--font-d);font-weight:600;font-size:14px;letter-spacing:.02em;
    color:var(--ink-dim);padding:10px 12px;border-radius:10px;transition:color .2s}
  .nav-links a.home:hover{color:var(--ink)}
  .nav-links a.book{
    font-family:var(--font-d);font-weight:700;font-size:13.5px;letter-spacing:.01em;
    color:#1a1407;background:var(--gold-grad);
    padding:11px 18px;border-radius:999px;
    box-shadow:0 4px 18px -6px rgba(212,175,55,.6);
    transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap}
  .nav-links a.book:hover{transform:translateY(-1px);box-shadow:0 8px 26px -6px rgba(212,175,55,.75)}
  /* la nav e' fissa: senza questo l'ancora finisce sotto la barra */
  #prezzi{scroll-margin-top:84px}
  /* Su mobile "Home" sparisce: duplica il logo (che porta gia' in cima) e lo
     spazio serve a "Prezzi", che i commenti ai video chiedono di continuo. */
  .nav-links a.home-top{display:none}
  @media(min-width:900px){
    .nav-links a.home-top{display:inline-block}
    #prezzi{scroll-margin-top:96px}
  }

  /* ---------- LAYOUT PRIMITIVES ---------- */
  section{position:relative;z-index:2}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
  .eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--font-d);font-weight:700;font-size:12.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
    margin-bottom:22px;line-height:1.4}
  .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;
    background:var(--gold);box-shadow:0 0 12px 1px var(--gold);flex:none}
  h1,h2,h3{font-family:var(--font-d);font-weight:800;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
  .lead{color:var(--ink-dim);font-size:18px;line-height:1.62;max-width:42ch;text-wrap:pretty}
  .gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* ---------- CTA BUTTON ---------- */
  .cta{
    display:inline-flex;align-items:center;gap:16px;
    font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:.005em;
    color:#1a1407;background:var(--gold-grad);
    padding:18px 22px 18px 28px;border-radius:999px;border:none;cursor:pointer;
    min-height:60px;
    box-shadow:0 10px 34px -10px rgba(212,175,55,.65);
    transition:transform .2s ease,box-shadow .2s ease;
    text-align:left;width:auto}
  .cta:hover{transform:translateY(-2px);box-shadow:0 16px 44px -12px rgba(212,175,55,.8)}
  .cta:active{transform:translateY(0)}
  .cta .arr{
    flex:none;width:42px;height:42px;border-radius:50%;background:#100c04;
    display:grid;place-items:center;transition:transform .25s ease}
  .cta:hover .arr{transform:rotate(45deg)}
  .cta .arr svg{width:18px;height:18px;stroke:var(--gold-bright);fill:none;stroke-width:2.4}

  /* ---------- ORO VIVO: il gradiente dei bottoni respira ----------
     Il gradiente resta esattamente quello di --gold-grad: cambia solo il
     PUNTO da cui lo si guarda. Allargando il background al 220% e facendo
     scorrere background-position, l'oro passa lentamente dal chiaro al
     profondo e torna indietro — come la luce che gira su una superficie
     lucida. E' il gesto giusto per un'officina di detailing: l'unica cosa
     che si guarda, su una vernice, e' come prende la luce.

     Il bottone NON si muove e NON cambia dimensione: si muove solo il
     colore. Il movimento vero (translateY) resta all'hover, dove c'era gia'.

     Regolazioni:
       --sheen-time  durata del ciclo. Piu' alto = piu' lento e discreto.
       --sheen-span  ampiezza. 220% e' morbido; 300% e' piu' marcato.
     ------------------------------------------------------------------- */
  :root{ --sheen-time:7s; --sheen-span:220%; }

  .cta,
  .pkg-btn.solid,
  #sib-container .sib-form-block__button{
    background-size:var(--sheen-span) var(--sheen-span);
    background-position:0% 50%;
    animation:goldSheen var(--sheen-time) ease-in-out infinite}

  /* all'hover il ciclo accelera: il bottone "si sveglia" quando lo punti */
  .cta:hover,
  .pkg-btn.solid:hover,
  #sib-container .sib-form-block__button:hover{
    animation-duration:calc(var(--sheen-time) / 2.6)}

  @keyframes goldSheen{
    0%  {background-position:0% 50%}
    50% {background-position:100% 50%}
    100%{background-position:0% 50%}}

  /* chi ha chiesto meno animazioni si tiene il gradiente fermo di sempre */
  @media(prefers-reduced-motion:reduce){
    .cta,
    .pkg-btn.solid,
    #sib-container .sib-form-block__button{
      animation:none;background-size:auto;background-position:0 0}}

  /* ---------- IMG SLOT (sostituisce image-slot web component) ---------- */
  .img-slot{
    display:block;width:100%;overflow:hidden;border-radius:20px;
    background:var(--bg-card)}
  .img-slot img{
    width:100%;height:100%;object-fit:cover;display:block}

  /* ---------- HERO ---------- */
  .hero{position:relative;overflow:hidden;isolation:isolate;
    min-height:100svh;display:flex;align-items:center;
    padding:54px 0 26px}
  .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .hero-photo{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 42%;
    filter:blur(1.5px) saturate(1.08) brightness(.74);transform:scale(1.05)}
  .hero-veil{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.82) 26%,rgba(10,10,10,.5) 48%,rgba(10,10,10,.42) 70%,rgba(10,10,10,.7) 90%,#0a0a0a 100%)}
  .hero-glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);
    width:120vw;height:70vh;z-index:1;pointer-events:none;
    background:radial-gradient(50% 50% at 50% 35%,rgba(212,175,55,.16),transparent 70%)}
  .hero .wrap{position:relative;z-index:2;width:100%;min-width:0}
  /* Ombra sotto il testo della hero: la foto dietro cambia luminosita' zona per
     zona, e il velo da solo non basta a staccare le lettere.
     Sull'H1 si usa drop-shadow e NON text-shadow: dentro l'H1 c'e' .gold-text,
     che e' un gradiente ritagliato sulla forma delle lettere con
     background-clip:text e colore trasparente. Una text-shadow trasparirebbe
     DENTRO le lettere d'oro e le sporcherebbe; drop-shadow lavora sul risultato
     gia' disegnato, quindi resta fuori dai glifi.
     Due ombre: una stretta per il bordo, una larga per staccare dal fondo. */
  .hero h1{filter:drop-shadow(0 1px 2px rgba(0,0,0,.72)) drop-shadow(0 3px 8px rgba(0,0,0,.55)) drop-shadow(0 10px 30px rgba(0,0,0,.62))}
  .hero .lead{text-shadow:0 1px 3px rgba(0,0,0,.66),0 5px 22px rgba(0,0,0,.55)}
  .hero .eyebrow{text-shadow:0 1px 8px rgba(0,0,0,.7)}
  .hero .eyebrow{margin-bottom:22px}
  .hero h1{font-size:clamp(24px,6.8vw,34px);margin-bottom:18px;line-height:1.08}
  .hero h1 .pct{display:inline-block}
  .hero .lead{margin-bottom:38px;max-width:38ch;font-size:15.5px;line-height:1.7}
  .hero-media{margin-top:46px}
  .hero-media .img-slot{height:clamp(260px,62vw,560px)}
  .badge-strip{display:flex;flex-wrap:nowrap;gap:10px;margin-top:20px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:-20px;margin-right:-20px;padding:0 20px}
  .badge-strip::-webkit-scrollbar{display:none}
  .badge{
    flex:none;white-space:nowrap;
    display:inline-flex;align-items:center;gap:8px;
    font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-dim);
    border:1px solid var(--line);border-radius:999px;padding:9px 15px;
    background:rgba(212,175,55,.03)}
  .badge svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:2}

  /* ---------- OFFER BADGE (coupon) ---------- */
  .lg-only{display:none}
  .sm-only{display:inline}
  .hero .cta{width:100%;justify-content:space-between;min-height:56px}
  .cta-micro{font-size:12.5px;color:var(--ink-faint);margin-top:16px;letter-spacing:.01em;text-align:center}

  /* riga Garanzia Stafa in hero: e' la terza riga del posizionamento (rischio zero),
     non un badge decorativo. Sta sopra la CTA perche' e' l'ultima obiezione. */
  .hero-guar{display:flex;align-items:flex-start;gap:10px;margin:0 0 28px;
    padding:13px 15px;border:1px solid var(--line);border-radius:14px;
    background:rgba(212,175,55,.05);text-align:left;
    font-size:13.5px;line-height:1.5;color:var(--ink-dim);max-width:44ch}
  .hero-guar strong{color:var(--gold-bright);font-weight:700}
  .hero-guar svg{flex:none;width:18px;height:18px;margin-top:1px;
    stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  @media(max-width:859px){
    .hero{display:flex;align-items:flex-end;min-height:100svh;padding:0 !important}
    .hero-photo{object-position:center 28%;filter:saturate(1.1) brightness(.86);transform:scale(1.02)}
    .hero-veil{background:linear-gradient(180deg,
      rgba(10,10,10,.70) 0%,rgba(10,10,10,.30) 22%,rgba(10,10,10,.24) 40%,
      rgba(10,10,10,.72) 58%,rgba(10,10,10,.95) 76%,#0a0a0a 100%)}
    .hero-glow{display:none}
    .hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;
      padding-top:0;padding-bottom:max(72px,env(safe-area-inset-bottom) + 62px)}
    .hero .eyebrow{margin-bottom:18px}
    .hero h1{font-size:clamp(25px,7vw,33px);line-height:1.15;margin-bottom:14px;
      max-width:19ch;text-wrap:balance}
    .hero .lead{margin-bottom:20px;max-width:32ch;font-size:15.5px;line-height:1.6;
      color:rgba(244,241,234,.86)}
    .hero-guar{margin-bottom:24px;font-size:13px;padding:12px 14px;max-width:34ch}
    .hero .hero-cta-block{margin-top:0;width:100%}
    .hero .cta{display:block;width:100%;text-align:center;min-height:60px;
      font-size:16px;line-height:1.45;padding:15px 20px}
    .hero .cta .arr{display:inline-grid;vertical-align:middle;
      width:34px;height:34px;margin-left:10px}
    .hero .cta .arr svg{width:15px;height:15px}
    .cta-micro{margin-top:14px}
  }

  /* ---------- GALLERIA PRIMA / DOPO ---------- */
  .ba-gallery{padding:64px 0 72px;border-top:1px solid rgba(255,255,255,.05);background:var(--bg-lift);overflow:hidden}
  .ba-gallery .head{margin-bottom:26px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
  .ba-gallery h2{font-size:clamp(26px,6.8vw,46px);margin-bottom:12px}
  .ba-gallery .sub{color:var(--ink-faint);font-size:13.5px;letter-spacing:.02em}
  .ba-arrows{display:none;gap:12px;flex:none;padding-bottom:6px}
  .ba-arrow{width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;
    background:var(--gold-grad);display:grid;place-items:center;
    box-shadow:0 8px 24px -8px rgba(212,175,55,.6);
    transition:transform .15s ease,opacity .2s ease}
  .ba-arrow:active{transform:scale(.93)}
  .ba-arrow[disabled]{opacity:.35;pointer-events:none}
  .ba-arrow svg{width:20px;height:20px;stroke:#1a1407;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .ba-track{display:flex;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:20px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -20px;padding:2px 20px 6px}
  .ba-track::-webkit-scrollbar{display:none}
  .ba-track.dragging{scroll-snap-type:none;cursor:grabbing}
  .ba-card{flex:0 0 86%;min-width:0;scroll-snap-align:start}
  .ba-frame{--pos:50%;position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
    border:1px solid rgba(255,255,255,.07);background:#111;isolation:isolate}
  .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    pointer-events:none;user-select:none;-webkit-user-select:none}
  .ba-after{clip-path:inset(0 0 0 var(--pos))}
  .ba-badge{position:absolute;top:12px;z-index:3;
    font-family:var(--font-d);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    border-radius:999px;padding:7px 13px;line-height:1}
  .ba-b-prima{left:12px;color:var(--ink-dim);background:rgba(10,10,10,.72);border:1px solid rgba(255,255,255,.25)}
  .ba-b-dopo{right:12px;color:#1a1407;background:var(--gold-grad);box-shadow:0 4px 14px -4px rgba(212,175,55,.6)}
  .ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:48px;margin-left:-24px;z-index:4;
    display:grid;place-items:center;cursor:ew-resize;touch-action:none}
  .ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
    background:linear-gradient(180deg,rgba(245,214,126,.95),rgba(212,175,55,.85));
    box-shadow:0 0 10px rgba(212,175,55,.55)}
  .ba-handle:focus-visible{outline:none}
  .ba-handle:focus-visible .ba-grip{box-shadow:0 0 0 3px rgba(245,214,126,.8),0 6px 18px -4px rgba(0,0,0,.6)}
  .ba-grip{position:relative;width:40px;height:40px;border-radius:50%;background:var(--gold-grad);
    display:grid;place-items:center;box-shadow:0 6px 18px -4px rgba(0,0,0,.6),0 0 0 3px rgba(10,10,10,.35)}
  .ba-grip svg{width:18px;height:18px;stroke:#1a1407;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .ba-cap{margin-top:12px;font-size:13.5px;color:var(--ink-dim);letter-spacing:.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ba-dots{display:flex;justify-content:center;gap:7px;margin-top:22px}
  .ba-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .25s,transform .25s}
  .ba-dots span.on{background:var(--gold);transform:scale(1.15)}
  .ba-cta{text-align:center;margin-top:44px}
  .ba-cta-line{font-family:var(--font-d);font-weight:700;font-size:clamp(19px,5vw,24px);letter-spacing:-.01em;margin-bottom:20px}
  @media(min-width:860px){
    .ba-gallery{padding:104px 0}
    .ba-arrows{display:flex}
    .ba-track{margin:0 -40px;padding:2px 40px 6px;gap:16px;scroll-padding-left:40px;cursor:grab}
    .ba-card{flex-basis:calc((100% - 32px)/2.6)}
  }

  /* ---------- STORY SECTIONS ---------- */
  .story{padding:72px 0;border-top:1px solid rgba(255,255,255,.05)}
  .story.lift{background:var(--bg-lift)}
  .story .grid{display:grid;gap:30px}
  .story h2{font-size:clamp(32px,8.6vw,56px);margin-bottom:20px}
  .story .lead{margin-bottom:14px}
  .story .lead.spaced{margin-bottom:26px}
  .story-media .img-slot{height:clamp(280px,72vw,440px)}
  .pull{font-family:var(--font-d);font-weight:700;color:var(--ink);font-size:19px;line-height:1.4;
    border-left:3px solid var(--gold);padding-left:16px;margin:22px 0;text-wrap:pretty}

  /* ---------- PROCESSO ---------- */
  .process{padding:78px 0;border-top:1px solid rgba(255,255,255,.05);background:var(--bg-lift)}
  .process .head{margin-bottom:14px}
  .pstep{display:grid;gap:22px;padding:44px 0;border-bottom:1px solid rgba(255,255,255,.05);
    grid-template-areas:"head" "media" "body"}
  .pstep-head{grid-area:head}
  .pstep-media{grid-area:media}
  .pstep-body{grid-area:body}
  .pstep:last-of-type{border-bottom:none;padding-bottom:0}
  .pstep-head .pn{font-family:var(--font-d);font-weight:800;font-size:clamp(44px,12vw,64px);line-height:1;
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
    margin-bottom:14px}
  .pstep-head h3{font-size:clamp(24px,6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.12;
    margin-bottom:0;color:var(--ink);text-wrap:balance}
  .pstep-body p{color:var(--ink-dim);font-size:17px;line-height:1.62;max-width:48ch;text-wrap:pretty}
  .pstep-media .img-slot{height:clamp(240px,62vw,400px)}
  .pstep.included .pn{-webkit-text-fill-color:initial;background:none;color:var(--gold)}
  .pstep .free-tag{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
    font-family:var(--font-d);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:#1a1407;background:var(--gold-grad);border-radius:999px;padding:7px 14px}

  /* ---------- SERVICES ---------- */
  .services{padding:78px 0;border-top:1px solid rgba(255,255,255,.05)}
  .services .head{margin-bottom:38px}
  .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .svc{
    background:var(--bg-card);border:1px solid rgba(255,255,255,.06);
    border-radius:18px;padding:22px 18px;
    transition:border-color .25s ease,transform .25s ease,background .25s ease}
  .svc:hover{border-color:var(--line);transform:translateY(-3px);background:#1d1a15}
  .svc .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
    background:rgba(212,175,55,.1);border:1px solid var(--line);margin-bottom:16px}
  .svc .ic svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .svc h3{font-size:15.5px;font-weight:700;line-height:1.22;letter-spacing:-.01em;color:var(--ink)}

  /* ---------- WHY ---------- */
  .why{padding:78px 0;border-top:1px solid rgba(255,255,255,.05);background:var(--bg-lift)}
  .why .grid{display:grid;gap:30px}
  .why-list{display:grid;gap:14px;margin-top:0}
  .why-item{display:flex;gap:18px;align-items:flex-start;
    padding:22px;border:1px solid rgba(255,255,255,.06);border-radius:18px;background:var(--bg-card)}
  .why-item .n{font-family:var(--font-d);font-weight:800;font-size:22px;
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
    flex:none;width:34px;line-height:1.1}
  .why-item h3{font-size:18px;font-weight:700;margin-bottom:6px;color:var(--ink)}
  .why-item p{color:var(--ink-dim);font-size:15px;line-height:1.55}

  /* ---------- PROOF ---------- */
  .proof{padding:78px 0;border-top:1px solid rgba(255,255,255,.05)}
  .proof .head{text-align:center;margin-bottom:42px}
  .proof .head h2{font-size:clamp(28px,7.4vw,46px);max-width:18ch;margin:0 auto}
  .stat-row{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;margin:30px 0 44px;text-align:center}
  .stat .num{font-family:var(--font-d);font-weight:800;font-size:clamp(34px,9vw,52px);
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
  .stat .lbl{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-top:8px}
  .reviews{display:grid;gap:16px}
  @media(max-width:859px){
    .reviews{display:flex;overflow-x:auto;gap:14px;
      scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;margin:0 -20px;padding:0 20px}
    .reviews::-webkit-scrollbar{display:none}
    .reviews .review{flex:0 0 100%;scroll-snap-align:center}
  }
  .rev-nav{display:none;justify-content:center;align-items:center;gap:18px;margin-top:22px}
  @media(max-width:859px){.rev-nav{display:flex}}
  .rev-btn{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
    background:var(--gold-grad);display:grid;place-items:center;
    box-shadow:0 8px 26px -8px rgba(212,175,55,.65);
    transition:transform .15s ease,opacity .2s ease}
  .rev-btn:active{transform:scale(.93)}
  .rev-btn[disabled]{opacity:.35;pointer-events:none}
  .rev-btn svg{width:22px;height:22px;stroke:#1a1407;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .rev-dots{display:flex;gap:7px}
  .rev-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .25s}
  .rev-dots span.on{background:var(--gold)}
  .review{border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:24px;background:var(--bg-card)}
  .stars{display:flex;gap:3px;margin-bottom:14px}
  .stars svg{width:18px;height:18px;fill:var(--gold)}
  .review p{font-size:16px;line-height:1.55;color:var(--ink);margin-bottom:16px;text-wrap:pretty}
  .review .who{display:flex;align-items:center;gap:11px}
  .review .av{width:38px;height:38px;border-radius:50%;background:var(--gold-grad);
    display:grid;place-items:center;font-family:var(--font-d);font-weight:700;color:#1a1407;font-size:14px;flex:none}
  .review .who b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
  .review .who span{font-size:12.5px;color:var(--ink-faint)}
  .maps-cta-wrap{display:flex;justify-content:center;margin-top:42px}
  .maps-cta{display:inline-flex;align-items:center;gap:16px;
    background:var(--gold-grad);color:#1a1407;
    padding:16px 26px 16px 18px;border-radius:999px;
    box-shadow:0 12px 40px -10px rgba(212,175,55,.6);
    transition:transform .2s ease,box-shadow .2s ease}
  .maps-cta:hover{transform:translateY(-2px);box-shadow:0 18px 52px -12px rgba(212,175,55,.8)}
  .maps-cta .maps-pin{flex:none;width:46px;height:46px;border-radius:50%;background:#100c04;
    display:grid;place-items:center}
  .maps-cta .maps-pin svg{width:22px;height:22px;stroke:var(--gold-bright);fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  .maps-cta .maps-txt{display:flex;flex-direction:column;line-height:1.2;text-align:left}
  .maps-cta .maps-txt b{font-family:var(--font-d);font-weight:700;font-size:16px;letter-spacing:-.01em}
  .maps-cta .maps-txt span{font-size:13px;font-weight:600;color:#3a2c08;margin-top:3px}

  /* ---------- SEZIONE PRENOTA + FORM BREVO ----------
     Il markup e' quello di Brevo: le classi sib-*, .input e .entry__* servono
     al suo script di validazione e non vanno rinominate.
     sib-styles.css NON e' caricato (vedi head): qui c'e' tutto lo stile. */

  .form-section{padding:76px 0 70px;border-top:1px solid var(--line);
    background:radial-gradient(80% 60% at 50% 0%,rgba(212,175,55,.1),transparent 60%),var(--bg-lift)}
  .form-section .head{text-align:center;margin-bottom:14px}
  .form-section .eyebrow{margin-left:auto;margin-right:auto}
  .form-section h2{font-size:clamp(32px,8.8vw,58px);margin-bottom:16px}
  .form-section .sub{color:var(--ink-dim);font-size:16px;max-width:34ch;
    margin:0 auto 34px;text-wrap:pretty;text-align:center}

  /* Slot campagna: spento. Si accende aggiungendo .on nel markup. */
  .offer-slot{display:none}
  .offer-slot.on{display:inline-flex;align-items:center;gap:8px;margin:0 auto 24px;
    font-family:var(--font-d);font-weight:700;font-size:13px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);
    border-radius:999px;padding:8px 16px;box-shadow:0 0 24px -6px rgba(212,175,55,.5)}

  /* ---------- impalcatura: una colonna sola, centrata ---------- */
  .sib-form{padding:0;background:transparent;text-align:left}
  #sib-form-container{max-width:none;padding:0}
  #sib-container{width:100%;max-width:440px;margin:0 auto;padding:0;
    background:transparent;border:0;border-radius:0;text-align:left;direction:ltr}
  #sib-form{width:100%;max-width:none;margin:0}
  #sib-form .sib-form-block{padding:0;width:100%}
  #sib-form .form__entry{margin:0 0 22px;width:100%}
  #sib-form .form__label-row{display:block;width:100%}
  #sib-form .entry__field{display:block;width:100%;margin:0;border:0;background:none}
  /* honeypot antispam: senza il CSS di Brevo va nascosto a mano, altrimenti
     diventa un campo visibile e ogni lead compilato viene marcato come spam */
  #sib-form .input--hidden{position:absolute;left:-9999px;width:1px;height:1px;
    opacity:0;pointer-events:none}

  /* ---------- i campi: tutti identici, nessuna eccezione ---------- */
  #sib-container .entry__label{display:block;font-family:var(--font-d);font-weight:600;
    font-size:13.5px;color:var(--ink);margin:0 0 8px;letter-spacing:.01em;text-align:left}
  #sib-container .entry__label[data-required]::after{content:"";display:none}
  #sib-container .input{
    display:block;width:100%;box-sizing:border-box;
    font-family:var(--font-b);font-size:16px;font-weight:500;color:var(--ink);
    background:var(--bg-card);border:1.5px solid rgba(255,255,255,.12);border-radius:13px;
    padding:0 16px;height:56px;line-height:normal;outline:none;box-shadow:none;
    transition:border-color .18s ease,box-shadow .18s ease}
  #sib-container input.input::placeholder{color:var(--ink-faint);opacity:1}
  #sib-container .input:focus,#sib-container .input:focus-visible{
    border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.13)}

  /* nota sotto il telefono: e' informazione, non decorazione del campo */
  #sib-container .fld-hint{display:flex;align-items:flex-start;gap:8px;margin-top:8px;
    font-size:13px;color:var(--ink-dim);line-height:1.45}
  #sib-container .fld-hint svg{width:15px;height:15px;stroke:var(--gold);fill:none;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}

  /* ---------- errori ---------- */
  #sib-container .entry__error{display:none}
  #sib-container .entry__error:not(:empty){display:block;background:transparent;border:0;
    border-radius:0;padding:0;margin-top:8px;font-family:var(--font-b);font-size:13px;
    font-weight:500;color:#f08a82;text-align:left}
  #sib-container .input.hasError{border-color:#e0584f;box-shadow:0 0 0 4px rgba(224,88,79,.12)}
  /* quando c'e' un errore, la nota informativa si toglie di mezzo:
     due righe di testo sotto lo stesso campo si annullano a vicenda */
  #sib-container .form__entry:has(.entry__error:not(:empty)) .fld-hint{display:none}

  /* ---------- pannelli di stato ---------- */
  #sib-form-container .sib-form-message-panel{display:none;width:100%;max-width:440px;
    margin:0 auto 16px;border-radius:14px;border:1px solid;padding:14px 16px;
    font-family:var(--font-b);font-size:14.5px;line-height:1.5;text-align:left}
  #sib-form-container .sib-form-message-panel.active{display:block}
  #error-message.sib-form-message-panel{background:rgba(224,88,79,.1);
    border-color:rgba(224,88,79,.45);color:#f5a49d}
  #success-message.sib-form-message-panel{background:rgba(212,175,55,.1);
    border-color:var(--line);color:var(--gold-bright)}
  #sib-form-container .sib-form-message-panel__text{display:flex;align-items:center;gap:10px}
  #sib-form-container .sib-notification__icon{width:19px;height:19px;fill:currentColor;flex:none}

  /* ---------- bottone ---------- */
  #sib-container .sib-form-block__button{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    width:100%;box-sizing:border-box;
    font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:.005em;
    color:#1a1407;background:var(--gold-grad);border:none;border-radius:999px;
    padding:0 20px 0 26px;height:60px;cursor:pointer;margin-top:8px;text-align:left;
    box-shadow:0 10px 34px -10px rgba(212,175,55,.65);
    transition:transform .18s ease,box-shadow .18s ease}
  #sib-container .sib-form-block__button:hover{transform:translateY(-2px);
    box-shadow:0 16px 40px -10px rgba(212,175,55,.75)}
  #sib-container .sib-form-block__button:focus-visible{outline:3px solid var(--gold-bright);
    outline-offset:3px}
  /* freccia disegnata in CSS: dentro il bottone non puo' esserci un secondo <svg>
     (vedi il commento nel markup) */
  #sib-container .sib-form-block__button .btn-txt{flex:1;text-align:left}
  #sib-container .sib-form-block__button .arr{display:block;width:34px;height:34px;
    border-radius:50%;background-color:rgba(26,20,7,.14);flex:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1407' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:17px}

  /* ---------- consenso ---------- */
  #sib-container .sib-optin .form__entry{margin:0 0 20px}
  #sib-container .gdpr{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
  #sib-container .gdpr input[type=checkbox]{appearance:none;-webkit-appearance:none;
    flex:none;width:24px;height:24px;margin:0;border:1.5px solid rgba(255,255,255,.22);
    border-radius:7px;background:var(--bg-card);cursor:pointer;position:relative;
    transition:background .18s ease,border-color .18s ease}
  #sib-container .gdpr input[type=checkbox]:checked{background:var(--gold-grad);border-color:transparent}
  #sib-container .gdpr input[type=checkbox]:checked::after{content:"";position:absolute;
    left:8px;top:4px;width:6px;height:11px;border:solid #1a1407;
    border-width:0 2.6px 2.6px 0;transform:rotate(45deg)}
  #sib-container .gdpr input[type=checkbox]:focus-visible{outline:3px solid var(--gold-bright);
    outline-offset:2px}
  #sib-container .gdpr-txt{font-size:13.5px;color:var(--ink-dim);line-height:1.5}
  #sib-container .gdpr-txt a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
  #sib-container .sib-optin .entry__error:not(:empty){margin-top:6px}
  #sib-container .sib-hide-loader-icon{display:none}
  #sib-container .progress-indicator__icon{fill:#1a1407;width:18px;height:18px;flex:none}

  /* ---------- rassicurazione + note legali ---------- */
  #sib-container .reassure{display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;margin:16px 0 0;font-size:12.5px;color:var(--ink-dim);
    text-align:center;line-height:1.45}
  #sib-container .reassure svg{width:15px;height:15px;stroke:var(--gold);fill:none;
    stroke-width:2;flex:none}
  #sib-container .sib-form__declaration{display:block;width:100%;margin:18px 0 0;
    padding:0;text-align:left}
  #sib-container .declaration-block-icon{display:none}
  #sib-container .sib-form__declaration p{font-family:var(--font-b);font-size:11.5px;
    line-height:1.5;color:var(--ink-faint);text-align:center}
  #sib-container .sib-form__declaration a{color:var(--ink-dim);text-decoration:underline;
    text-underline-offset:2px}
  #sib-container .sib-form__declaration a:hover{color:var(--gold)}

  @media(min-width:900px){
    .form-section{padding:110px 0 96px}
    #sib-container,#sib-form-container .sib-form-message-panel{max-width:460px}
  }
  @media(prefers-reduced-motion:reduce){
    #sib-container .sib-form-block__button:hover{transform:none}
  }

  /* ---------- FOOTER ---------- */
  footer{padding:62px 0 40px;border-top:1px solid var(--line);background:#070707;position:relative;z-index:2}
  .foot-grid{display:grid;gap:34px}
  .foot-brand img{width:60px;height:60px;border-radius:12px;margin-bottom:16px}
  .foot-brand .nm{font-family:var(--font-d);font-weight:700;font-size:20px;letter-spacing:.03em;
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .foot-brand .tag{color:var(--ink-faint);font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;margin-top:2px}
  .foot-brand p{color:var(--ink-dim);font-size:14.5px;line-height:1.6;margin-top:16px;max-width:34ch}
  .foot-col h4{font-family:var(--font-d);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold);margin-bottom:16px}
  .foot-col ul{list-style:none;display:grid;gap:13px}
  .foot-col li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-dim);font-size:14.5px;line-height:1.45}
  .foot-col li svg{width:17px;height:17px;stroke:var(--gold);fill:none;stroke-width:1.9;flex:none;margin-top:2px}
  .foot-col a:hover{color:var(--ink)}
  .socials{display:flex;gap:11px;margin-top:6px}
  .socials a{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);
    display:grid;place-items:center;background:rgba(212,175,55,.04);transition:background .2s,transform .2s}
  .socials a:hover{background:rgba(212,175,55,.12);transform:translateY(-2px)}
  .socials svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:1.8}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.06);margin-top:42px;padding-top:24px;
    display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;
    color:var(--ink-faint);font-size:12.5px}

  /* ---------- PACCHETTI ---------- */
  .packages{padding:78px 0;border-top:1px solid rgba(255,255,255,.05);background:var(--bg-lift)}
  .packages .head{text-align:center;margin-bottom:44px}
  .packages .head .eyebrow{margin-left:auto;margin-right:auto}
  .packages .head h2{font-size:clamp(30px,7.8vw,48px);max-width:15ch;margin:0 auto}
  .packages .head .sub{color:var(--ink-dim);font-size:16px;line-height:1.55;max-width:44ch;margin:18px auto 0;text-wrap:pretty}
  .pkg-grid{display:grid;gap:30px;padding-top:10px}
  .pkg{position:relative;background:var(--bg-card);border:1px solid var(--line);
    border-radius:22px;padding:32px 26px 30px;display:flex;flex-direction:column}
  .pkg.featured{border:2px solid var(--gold);
    background:linear-gradient(180deg,rgba(212,175,55,.07) 0%,var(--bg-card) 26%);
    box-shadow:0 0 0 1px rgba(212,175,55,.18),0 26px 64px -28px rgba(212,175,55,.4)}
  .pkg-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    font-family:var(--font-d);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:#1a1407;background:var(--gold-grad);border-radius:999px;padding:8px 18px;white-space:nowrap;
    box-shadow:0 8px 22px -8px rgba(212,175,55,.75)}
  .pkg-name{font-family:var(--font-d);font-weight:700;font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
  .pkg-price{font-family:var(--font-d);font-weight:800;font-size:clamp(42px,12vw,56px);line-height:1;margin:12px 0 0;color:var(--ink);letter-spacing:-.02em}
  .pkg-price .da{font-size:18px;font-weight:600;color:var(--ink-dim);letter-spacing:0;margin-right:7px;vertical-align:middle;text-transform:none}
  .pkg-tag{color:var(--ink-dim);font-size:15.5px;line-height:1.5;margin:14px 0 24px;text-wrap:pretty}
  .pkg-incl{font-family:var(--font-d);font-weight:600;font-size:13.5px;color:var(--ink-dim);margin:0 0 16px;letter-spacing:.01em}
  .pkg-incl strong{color:var(--gold)}
  .pkg-feats{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0 0 28px;flex:1}
  .pkg-feats li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:var(--ink)}
  .pkg-feats li svg{flex:none;width:20px;height:20px;margin-top:1px;stroke:var(--gold);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .pkg-feats li.incl{color:var(--gold-bright);font-weight:600}
  .pkg-btn{width:100%;min-height:56px;display:flex;align-items:center;justify-content:center;gap:10px;
    font-family:var(--font-d);font-weight:700;font-size:16px;letter-spacing:.005em;border-radius:14px;cursor:pointer;
    transition:transform .18s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
  .pkg-btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
  .pkg-btn.ghost:hover{border-color:var(--gold);color:var(--gold-bright)}
  .pkg-btn.solid{background:var(--gold-grad);border:none;color:#1a1407;box-shadow:0 12px 32px -12px rgba(212,175,55,.65)}
  .pkg-btn.solid:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(212,175,55,.82)}
  .pkg-note{text-align:center;color:var(--ink-faint);font-size:13.5px;line-height:1.55;margin:34px auto 0;max-width:52ch;text-wrap:pretty}

  /* ---------- GARANZIA STAFA ---------- */
  .guarantee{border-top:1px solid rgba(255,255,255,.05)}
  .guarantee .head{text-align:center;margin-bottom:34px}
  .guarantee .head .eyebrow{margin-left:auto;margin-right:auto}
  .guarantee h2{font-size:clamp(30px,7.8vw,48px);max-width:17ch;margin:0 auto}
  .guarantee .sub{color:var(--ink-dim);font-size:16px;line-height:1.6;
    max-width:50ch;margin:18px auto 0;text-wrap:pretty}
  .gsteps{list-style:none;display:grid;gap:14px;margin:0 auto;max-width:780px}
  .gstep{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;
    background:var(--bg-card);border:1px solid var(--line);border-radius:18px;
    padding:22px 20px;text-align:left}
  .gstep .gn{font-family:var(--font-d);font-weight:800;font-size:15px;line-height:1;
    width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
    background:var(--gold-grad);color:#1a1407}
  .gstep h3{font-family:var(--font-d);font-size:17px;font-weight:700;
    letter-spacing:-.01em;line-height:1.25;margin:0 0 7px;color:var(--ink)}
  .gstep p{color:var(--ink-dim);font-size:15.5px;line-height:1.55;margin:0;text-wrap:pretty}
  /* il quarto passaggio e' quello che costa soldi: si vede che e' diverso */
  .gstep.last{border-color:rgba(212,175,55,.42);
    background:linear-gradient(180deg,rgba(212,175,55,.08),rgba(212,175,55,.02))}
  .gstep.last h3{color:var(--gold-bright)}
  .gsign{text-align:center;margin:32px auto 0;max-width:52ch}
  .gsign .claim{font-family:var(--font-d);font-weight:800;
    font-size:clamp(19px,5.4vw,27px);letter-spacing:-.02em;line-height:1.22;margin:0 0 10px;
    background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .gsign p{color:var(--ink-faint);font-size:14.5px;line-height:1.6;margin:0}
  .gcta{text-align:center;margin-top:34px}
  .gcta .cta{width:100%;justify-content:space-between}

  /* ---------- REVEAL ANIMATION ---------- */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
  .reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* ---------- DESKTOP ---------- */
  @media(min-width:860px){
    body{font-size:18px}
    .wrap{padding:0 40px}
    header.nav{padding:18px 40px}
    .nav-links{gap:16px}
    .hero{min-height:94svh;display:flex;align-items:center;padding:160px 0 120px}
    /* l'H1 col benchmark e' lungo il triplo di "La tua auto come nuova":
       a 84px riempirebbe mezza pagina. Il limite in ch tiene le righe leggibili. */
    .hero h1{font-size:clamp(38px,4.3vw,57px);max-width:16ch}
    .hero .lead{font-size:18px;max-width:46ch;margin-bottom:24px}
    .hero-guar{margin-bottom:38px;font-size:14.5px;padding:15px 18px}
    .cta-micro{text-align:left;margin-top:14px}
    .lg-only{display:inline}
    .sm-only{display:none}
    .hero .cta{width:auto;min-height:0;justify-content:center}
    .badge-strip{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0;margin-top:30px}
    .hero-media .img-slot{height:540px}
    .story{padding:104px 0}
    .story .grid{grid-template-columns:1fr 1fr;column-gap:64px;row-gap:0;align-items:start;
      grid-template-areas:"head media" "body media"}
    .story.reverse .grid{grid-template-areas:"media head" "media body"}
    .story .grid.no-media{grid-template-columns:minmax(0,820px);grid-template-areas:"head" "body";justify-content:start}
    .story .grid.no-media.center{justify-content:center;text-align:center}
    .story .grid.no-media.center .story-body{margin-left:auto;margin-right:auto}
    .story .grid.no-media.center .cta{margin-left:auto;margin-right:auto}
    .story-head{grid-area:head}
    .story-body{grid-area:body}
    .story-media{grid-area:media;align-self:center}
    .story-media .img-slot{height:480px}
    .story h2{font-size:clamp(44px,4.4vw,60px)}
    .process{padding:110px 0}
    .process .head{margin-bottom:20px}
    .pstep{grid-template-columns:1fr 1fr;column-gap:64px;row-gap:18px;align-items:center;padding:58px 0;
      grid-template-areas:"head media" "body media"}
    .pstep:nth-of-type(even){grid-template-areas:"media head" "media body"}
    .pstep-media .img-slot{height:380px}
    .svc-grid{grid-template-columns:repeat(3,1fr);gap:18px}
    .services{padding:110px 0}
    .services .head{max-width:60ch}
    .why{padding:110px 0}
    .why .grid{grid-template-columns:1fr 1fr;column-gap:64px;row-gap:0;align-items:start;
      grid-template-areas:"media head" "media body"}
    .why-head{grid-area:head;margin-bottom:22px}
    .why-body{grid-area:body}
    .why-media{grid-area:media;align-self:center}
    .why-list{margin-top:0}
    .why-media .img-slot{height:520px}
    .proof{padding:110px 0}
    .reviews{grid-template-columns:repeat(3,1fr)}
    .packages{padding:110px 0}
    .pkg-grid{grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
    .pkg{padding:38px 30px 34px}
    .pkg.featured{transform:scale(1.045);transform-origin:center top;z-index:2}
    .guarantee .head{margin-bottom:44px}
    .guarantee h2{font-size:clamp(40px,4.4vw,56px)}
    .gsteps{gap:16px}
    .gstep{grid-template-columns:auto 1fr;gap:20px;padding:28px 30px}
    .gstep .gn{width:38px;height:38px;font-size:16px}
    .gstep h3{font-size:20px}
    .gstep p{font-size:16.5px;max-width:62ch}
    .gcta .cta{width:auto;justify-content:center}
    .form-section{padding:120px 0 90px}
    .foot-grid{grid-template-columns:1.6fr 1fr 1fr;gap:48px}
  }
  @media(min-width:560px) and (max-width:859px){
    .foot-grid{grid-template-columns:1fr 1fr}
  }


  /* ---------- CHI CI METTE MANO — condiviso da A e B ----------
     Spostato qui da lucidatura.css il 16/09/2026, quando il blocco e' entrato
     anche su index.html. Un posto solo, cosi' le due pagine non divergono.
     Due blocchi, due titoli: prima chi sono (foto del gesto + cinque righe),
     poi la prova (i due attestati affiancati).
     Le foto sorgente sono verticali 4:5 e vengono mostrate INTERE: nessun
     ritaglio, perche' in tutte e tre il soggetto occupa l'inquadratura da cima
     a fondo e qualsiasi taglio orizzontale toglierebbe o i volti o la cornice
     dell'attestato — cioe' l'unica cosa che le rende una prova. */
  .hands{padding:82px 0 86px}
  .hands .head{max-width:820px;margin:0 auto 26px;text-align:center}
  .hands h2{font-family:var(--font-d);font-weight:800;line-height:1.05;
    font-size:clamp(32px,6.8vw,50px);margin:10px 0 0;letter-spacing:-.02em;text-wrap:balance}
  .hands .sub{color:var(--ink-dim);font-size:16.5px;line-height:1.7;margin:16px 0 0;text-wrap:pretty}
  .hands .sub strong{color:var(--gold-bright);font-weight:700}

  /* la foto del gesto: contenuta, non a tutta pagina. E' un ritratto, e un
     ritratto a piena larghezza su desktop diventa un manifesto. */
  .hands-photo{
    margin:0 auto;max-width:480px;border-radius:22px;overflow:hidden;
    border:1px solid var(--line);
    box-shadow:0 28px 70px -38px rgba(0,0,0,.95)}
  .hands-photo img{display:block;width:100%;height:auto}

  /* le cinque righe: corte, centrate, subito sotto la foto */
  .hands-intro{
    max-width:620px;margin:28px auto 0;text-align:center;
    color:var(--ink-dim);font-size:17px;line-height:1.75;text-wrap:pretty}
  .hands-intro strong{color:var(--ink);font-weight:700}

  /* il secondo titolo: stacco netto dal blocco sopra, cosi' si legge come una
     sezione nuova e non come una didascalia lunga */
  .certs-head{margin-top:64px!important;padding-top:58px;
    border-top:1px solid var(--line)}

  /* i due attestati: SEMPRE affiancati, anche su telefono. Il punto della
     sezione e' che sono DUE, con due nomi diversi: se si impilano, quel
     confronto lo perdi e sembrano la stessa foto ripetuta. */
  .certs-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
  .certs-grid figure{
    position:relative;margin:0;border-radius:18px;overflow:hidden;
    border:1px solid var(--line);background:var(--bg-card);
    box-shadow:0 22px 56px -34px rgba(0,0,0,.95)}
  .certs-grid img{display:block;width:100%;height:auto}
  .certs-grid figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;
    font-family:var(--font-d);font-size:14px;font-weight:700;color:var(--ink);
    text-align:center;letter-spacing:.01em;
    background:linear-gradient(to top,rgba(6,5,3,.94) 0%,rgba(6,5,3,.74) 48%,transparent 100%)}

  /* la riga delle discipline: citazione letterale dell'attestato, quindi si
     comporta come una didascalia tecnica e non come un claim */
  .pm-note{
    max-width:820px;margin:16px auto 0;padding:14px 18px;border-radius:14px;
    background:rgba(212,175,55,.05);border:1px solid var(--line);
    color:var(--ink-faint);font-size:12.5px;line-height:1.6;
    text-align:center;letter-spacing:.02em;text-transform:uppercase}
  .pm-note strong{color:var(--gold-bright);font-weight:700}

  @media(min-width:860px){
  .hands{padding:110px 0}
    .hands-photo{max-width:560px}
    .hands-intro{font-size:18.5px;margin-top:34px}
    .certs-head{margin-top:84px!important;padding-top:76px}
    .certs-grid{gap:22px;margin-top:38px;max-width:940px;margin-left:auto;margin-right:auto}
    .certs-grid figcaption{font-size:16px;padding:38px 18px 16px}
    .pm-note{font-size:13px;margin-top:22px}
  }