/* =====================================================================
   PRONTO INTERVENTO CASA — Alessandro Sghettini · Pescara
   Statico, nessuna dipendenza esterna, nessun cookie.
   ===================================================================== */

:root{
  /* ---- Colori derivati dal logo del cliente ----
     Il sito ha UN SOLO tema, chiaro: è la condizione reale di chi cerca un pronto
     intervento (in strada, col sole, sul telefono). La versione scura è stata
     rimossa l'11/08/2026 su richiesta di Domenico. ---- */
  --c-bg:        #ffffff;
  --c-bg-2:      #f4f6fa;
  --c-bg-3:      #eaeff6;
  --c-surface:   #ffffff;
  --c-surface-2: #f7f9fc;
  --c-foot:      #eef1f6;
  --c-line:      rgba(13,21,38,.10);
  --c-line-2:    rgba(13,21,38,.17);
  --c-txt:       #0d1526;
  --c-txt-soft:  #5b6478;
  --c-red:       #c1102b;
  --c-red-deep:  #8f0d22;
  --c-accent:    #c1102b;
  --c-wa:        #25d366;
  --c-wa-deep:   #128c4a;

  --c-nav:       rgba(255,255,255,.78);
  --c-nav-2:     rgba(255,255,255,.95);
  --c-ghost:     rgba(13,21,38,.05);
  --c-ghost-h:   rgba(13,21,38,.10);
  --glow-a:      rgba(193,16,43,.13);
  --glow-b:      rgba(50,105,235,.07);
  --glow-clima:  rgba(40,120,235,.10);
  --streak-op:   .20;
  --h1-em:       #0d1526;
  /* grigio della riga in fondo: scurito l'11/08/2026 da #7d8698 perché
     su fondo #eef1f6 dava 3,2:1 e il minimo leggibile (WCAG AA) è 4,5:1.
     Adesso è 4,6:1 sul footer e 5,2:1 sul bianco. */
  --c-dim:       #646d80;

  /* tipografia */
  --f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-xs: .8125rem;
  --t-s:  .9375rem;
  --t-m:  1.0625rem;
  --t-l:  1.25rem;
  --t-xl: clamp(1.65rem, 5.2vw, 2.6rem);
  --t-hero: clamp(2.1rem, 8.4vw, 4.4rem);

  /* spazio */
  --s-1: .375rem;  --s-2: .75rem;  --s-3: 1.125rem;  --s-4: 1.75rem;
  --s-5: 2.5rem;   --s-6: 3.75rem; --s-7: 5.25rem;   --s-8: 7rem;

  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-pill: 999px;
  --om-m: 0 10px 26px rgba(13,21,38,.10);
  --om-l: 0 22px 48px rgba(13,21,38,.14);

  --dur: .55s;
  --dur-in: .72s;
  --ease: cubic-bezier(.22,.85,.3,1);
  --ease-molla: cubic-bezier(.2,1.5,.4,1);

  --wrap: 1180px;
  --gutter: clamp(1.1rem, 5vw, 2.5rem);
  --nav-h: 62px;
}


*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-ui);
  font-size:var(--t-m);
  line-height:1.62;
  color:var(--c-txt);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ line-height:1.1; margin:0; letter-spacing:-.022em; font-weight:800; }
p{ margin:0 0 var(--s-3); }
em{ font-style:normal; color:var(--c-accent); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:820px; }
.sprite{ display:none; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-red); color:#fff; padding:.7rem 1rem; border-radius:0 0 var(--r-s) 0;
}
.skip:focus{ left:0; }

:where(a,button,summary):focus-visible{
  outline:2px solid var(--c-accent); outline-offset:3px; border-radius:6px;
}

/* ---------- icone ---------- */
.i{ width:1.15em; height:1.15em; fill:currentColor; flex:0 0 auto; }
.i--lg{ width:2rem; height:2rem; }

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font:inherit; font-weight:700; font-size:var(--t-s); letter-spacing:-.01em;
  padding:.78rem 1.2rem; border-radius:var(--r-pill);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .28s var(--ease), background-color .22s;
  min-height:46px;
}
.btn--lg{ font-size:var(--t-m); padding:1rem 1.6rem; min-height:54px; }
.btn--sm{ padding:.5rem .9rem; min-height:40px; font-size:var(--t-xs); }
/* col dito servono almeno 44 px: sul telefono il pulsante resta piccolo
   ma l'area toccabile no */
@media (pointer:coarse){ .btn--sm{ min-height:44px; } }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--red{
  background:linear-gradient(135deg,var(--c-red),var(--c-red-deep));
  color:#fff; box-shadow:0 10px 26px rgba(224,26,54,.34);
}
.btn--red:hover{ box-shadow:0 16px 38px rgba(224,26,54,.46); }

.btn--wa{
  background:linear-gradient(135deg,var(--c-wa),var(--c-wa-deep));
  color:#03210f; box-shadow:0 10px 26px rgba(37,211,102,.24);
}
.btn--wa:hover{ box-shadow:0 16px 38px rgba(37,211,102,.34); }

.btn--ghost{ background:var(--c-ghost); color:var(--c-txt); border-color:var(--c-line-2); }
.btn--ghost:hover{ background:var(--c-ghost-h); }

.btn--dark{ background:#0b0f17; color:#fff; box-shadow:var(--om-m); }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--c-nav);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background-color .3s;
}
.nav.is-stuck{ border-bottom-color:var(--c-line); background:var(--c-nav-2); }
.nav__in{
  display:flex; align-items:center; gap:var(--s-3); min-height:var(--nav-h);
  transition:min-height .3s var(--ease);
}
.nav.is-stuck .nav__in{ min-height:calc(var(--nav-h) - 8px); }
.nav__logo{ display:block; flex:0 0 auto; }
.nav__logo img{ height:34px; width:auto; transition:height .3s var(--ease); }
.nav.is-stuck .nav__logo img{ height:29px; }

/* barra di avanzamento della lettura, appoggiata al bordo basso della nav */
.nav__bar{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--c-red),var(--c-accent));
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
  opacity:0; transition:opacity .35s var(--ease);
  pointer-events:none;
}
.nav.is-stuck .nav__bar{ opacity:1; }
.nav__links{ display:none; margin-left:auto; gap:1.35rem; }
.nav__links a{
  text-decoration:none; font-size:var(--t-s); font-weight:600; color:var(--c-txt-soft);
  padding:.35rem 0; position:relative; transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--c-red); transition:right .28s var(--ease);
}
.nav__links a:hover{ color:var(--c-txt); }
.nav__links a:hover::after{ right:0; }
.nav__cta{ display:flex; gap:.5rem; margin-left:auto; }
.nav__cta .btn span{ display:none; }

@media (min-width:640px){
  .nav__cta .btn span{ display:inline; }
}
@media (min-width:1000px){
  :root{ --nav-h:74px; }
  .nav__logo img{ height:42px; }
  .nav.is-stuck .nav__logo img{ height:34px; }
  .nav__links{ display:flex; }
  .nav__cta{ margin-left:var(--s-4); }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--c-bg);
  padding:calc(var(--s-6) + 1rem) 0 var(--s-6);
}
.hero__glow{
  position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:radial-gradient(60% 55% at 22% 18%, var(--glow-a), transparent 70%),
             radial-gradient(50% 50% at 88% 8%, var(--glow-b), transparent 70%);
  z-index:-2;
  /* --py lo muove lo scroll: parallasse leggera, gestita da main.js */
  transform:translate3d(0,var(--py,0px),0);
}
.hero__streak{
  position:absolute; z-index:-1; pointer-events:none;
  top:14%; right:-38%; width:130%; height:46%;
  background:linear-gradient(94deg,
      transparent 0%, transparent 38%,
      rgba(224,26,54,.0) 42%,
      rgba(224,26,54,.55) 52%,
      rgba(255,120,140,.85) 55%,
      rgba(224,26,54,.45) 58%,
      transparent 72%);
  filter:blur(1.5px);
  transform:rotate(-14deg) translate3d(0,var(--py2,0px),0);
  opacity:var(--streak-op);
}
.hero__streak::after{
  content:""; position:absolute; inset:8% 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent, rgba(255,255,255,.65) 55%, transparent);
  filter:blur(1px);
}
.hero__in{ position:relative; }

.eyebrow{
  display:inline-block; font-size:var(--t-xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-accent); margin:0 0 var(--s-3);
  padding:.4rem .85rem; border:1px solid rgba(224,26,54,.35); border-radius:var(--r-pill);
  background:rgba(224,26,54,.09);
}
.hero h1{
  font-size:var(--t-hero); font-weight:900; letter-spacing:-.035em;
  margin:0 0 var(--s-3); max-width:17ch; text-wrap:balance;
}
.hero h1 em{
  background:linear-gradient(100deg,var(--h1-em) 4%, var(--c-accent) 52%, var(--c-red) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{ font-size:var(--t-l); color:var(--c-txt-soft); max-width:56ch; margin-bottom:var(--s-4); }
.hero__btns{ display:flex; flex-wrap:wrap; gap:.75rem; }
.hero__btns .btn{ flex:1 1 260px; }
.hero__sign{
  margin:var(--s-4) 0 0; font-size:var(--t-s); color:var(--c-txt-soft);
  display:flex; align-items:center; gap:.6rem;
}
.hero__sign::before{ content:""; width:26px; height:2px; background:var(--c-red); }

@media (min-width:800px){
  .hero{ padding:var(--s-8) 0 var(--s-7); }
  .hero__btns .btn{ flex:0 0 auto; }
}

/* =====================================================================
   BARRA PROVE
   ===================================================================== */
.prove{
  background:linear-gradient(180deg,var(--c-bg),var(--c-bg-2));
  border-block:1px solid var(--c-line);
  padding:var(--s-5) 0;
}
.prove__grid{ display:grid; gap:var(--s-4); }
.prova h2{ font-size:var(--t-l); margin:.6rem 0 .3rem; }
.prova p{ margin:0; color:var(--c-txt-soft); font-size:var(--t-s); }
.prova .i{ color:var(--c-red); }
@media (min-width:760px){
  .prove__grid{ grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
}

/* =====================================================================
   SEZIONI GENERICHE
   ===================================================================== */
.sec{ padding:var(--s-7) 0; }
.sec--tight{ padding:var(--s-6) 0; }
.sec__head{ margin-bottom:var(--s-5); }
.h2{ font-size:var(--t-xl); font-weight:900; letter-spacing:-.03em; max-width:24ch; text-wrap:balance; }
.sub{ color:var(--c-txt-soft); font-size:var(--t-l); margin:var(--s-3) 0 0; max-width:52ch; }
.sec__cta{ margin-top:var(--s-5); }

/* ---------- cards servizi ---------- */
.cards{ display:grid; gap:var(--s-3); }
.card{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--c-surface),var(--c-bg-2));
  border:1px solid var(--c-line); border-radius:var(--r-m);
  padding:var(--s-4);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card::before{
  content:""; position:absolute; inset:0 auto auto 0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--c-red),var(--c-accent));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:var(--c-line-2); box-shadow:var(--om-m); }
.card:hover::before{ transform:scaleX(1); }

/* riflesso che segue il mouse — solo dove c'è un mouse vero */
@media (hover:hover) and (pointer:fine){
  .card::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
                               rgba(193,16,43,.10), transparent 68%);
    transition:opacity .4s var(--ease);
  }
  .card:hover::after{ opacity:1; }
}
.card .i{ color:var(--c-red); }
.card h3{ font-size:var(--t-l); margin:.8rem 0 .5rem; }
.card p{ color:var(--c-txt-soft); font-size:var(--t-s); margin:0; }
.card__note{ margin-top:.7rem !important; color:var(--c-txt) !important; }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); gap:var(--s-3); } }
@media (min-width:1000px){ .cards{ grid-template-columns:repeat(3,1fr); } }

/* =====================================================================
   FOCUS CONDIZIONATORI
   ===================================================================== */
.clima{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,var(--c-bg-2),var(--c-bg-3));
  border-block:1px solid var(--c-line);
  padding:var(--s-7) 0;
}
.clima__glow{
  position:absolute; inset:auto -20% -40% auto; width:90%; height:100%;
  background:radial-gradient(50% 50% at 70% 40%, var(--glow-clima), transparent 70%);
  z-index:-1;
}
.clima__in{ display:grid; gap:var(--s-5); align-items:center; }
.clima__marche{ font-size:var(--t-l); }
.ticks{ list-style:none; margin:0 0 var(--s-4); padding:0; display:grid; gap:.85rem; }
.ticks li{ position:relative; padding-left:2rem; color:var(--c-txt-soft); font-size:var(--t-s); }
.ticks li strong{ color:var(--c-txt); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.45em; width:1.1rem; height:.55rem;
  border-left:2.5px solid var(--c-red); border-bottom:2.5px solid var(--c-red);
  transform:rotate(-45deg);
}
.ticks--dark li::before{ border-color:var(--c-accent); }

/* mini illustrazione split (CSS puro, nessuna immagine) */
.clima__art{ display:none; }
@media (min-width:900px){
  .clima__in{ grid-template-columns:1.15fr .85fr; gap:var(--s-6); }
  .clima__art{ display:grid; place-items:center; }
  .split{ position:relative; width:min(340px,100%); }
  .split__body{
    height:112px; border-radius:14px 14px 22px 22px;
    background:linear-gradient(170deg,#f4f7fb,#c9d3e2);
    box-shadow:0 26px 60px rgba(0,0,0,.55), inset 0 -14px 22px rgba(0,0,0,.10);
    display:flex; flex-direction:column; justify-content:flex-end; gap:5px; padding:0 16px 14px;
  }
  .split__body span{ height:3px; border-radius:2px; background:rgba(10,20,40,.16); }
  .split__body span:nth-child(2){ width:80%; }
  .split__body span:nth-child(3){ width:60%; }
  .split__air{ position:absolute; inset:auto 0 -84px 0; display:flex; justify-content:center; gap:26px; }
  .split__air i{
    width:8px; height:64px; border-radius:var(--r-pill);
    background:linear-gradient(180deg,rgba(120,190,255,.9),transparent);
    animation:blow 2.6s var(--ease) infinite;
  }
  .split__air i:nth-child(2){ animation-delay:.35s; height:78px; }
  .split__air i:nth-child(3){ animation-delay:.7s; }
  @keyframes blow{
    0%{ opacity:0; transform:translateY(-12px) scaleY(.5); }
    35%{ opacity:1; }
    100%{ opacity:0; transform:translateY(16px) scaleY(1); }
  }
}

/* =====================================================================
   COME FUNZIONA
   ===================================================================== */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4); counter-reset:s; }
.step{
  position:relative; padding:var(--s-4) var(--s-4) var(--s-4) var(--s-4);
  background:linear-gradient(160deg,var(--c-surface),transparent 70%);
  border:1px solid var(--c-line); border-radius:var(--r-m);
}
.step__n{
  display:inline-grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--c-red),var(--c-red-deep)); color:#fff;
  font-weight:900; font-size:var(--t-l); box-shadow:0 8px 22px rgba(224,26,54,.35);
}
.step h3{ font-size:var(--t-l); margin:.9rem 0 .45rem; }
.step p{ margin:0; color:var(--c-txt-soft); font-size:var(--t-s); }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } }

/* =====================================================================
   CHI SONO
   ===================================================================== */
.chi{
  background:linear-gradient(180deg,var(--c-bg-2),var(--c-bg));
  border-block:1px solid var(--c-line);
  padding:var(--s-7) 0;
}
.chi__in{ display:grid; gap:var(--s-5); }
.chi__txt .h2{ margin-bottom:var(--s-4); }
.chi__txt p{ color:var(--c-txt-soft); }
.chi__txt p strong{ color:var(--c-txt); }
.chi__card{
  background:linear-gradient(160deg,var(--c-surface-2),var(--c-bg-2));
  border:1px solid var(--c-line-2); border-radius:var(--r-l);
  padding:var(--s-4); text-align:center; box-shadow:var(--om-l);
}
.chi__card img{ width:104px; height:104px; margin:0 auto var(--s-3); border-radius:var(--r-m); }
.chi__name{ font-weight:800; font-size:var(--t-l); margin:0 0 .2rem; }
.chi__role{ color:var(--c-txt-soft); font-size:var(--t-s); margin:0 0 var(--s-3); }
@media (min-width:900px){
  .chi__in{ grid-template-columns:1.5fr .85fr; gap:var(--s-6); align-items:start; }
  .chi__card{ position:sticky; top:calc(var(--nav-h) + 20px); }
}

.zona__note{ color:var(--c-txt-soft); max-width:62ch; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{ display:grid; gap:.7rem; }
.q{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-m);
  overflow:hidden; transition:border-color .25s, background-color .25s;
}
.q[open]{ border-color:rgba(224,26,54,.4); background:var(--c-surface-2); }
.q summary{
  cursor:pointer; list-style:none; padding:1.05rem 3rem 1.05rem 1.2rem;
  font-weight:700; font-size:var(--t-m); position:relative;
}
.q summary::-webkit-details-marker{ display:none; }
.q summary::after{
  content:""; position:absolute; right:1.2rem; top:50%; width:11px; height:11px;
  border-right:2.5px solid var(--c-red); border-bottom:2.5px solid var(--c-red);
  transform:translateY(-70%) rotate(45deg); transition:transform .28s var(--ease);
}
.q[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.q__a{ padding:0 1.2rem 1.15rem; }
.q__a p{ margin:0; color:var(--c-txt-soft); font-size:var(--t-s); }
.q__a p strong{ color:var(--c-txt); }

/* =====================================================================
   BANDA CTA
   ===================================================================== */
.banda{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--c-red-deep),var(--c-red) 55%,#c2122c);
  padding:var(--s-6) 0;
}
.banda::before{
  content:""; position:absolute; inset:-50% -10% auto -10%; height:200%;
  background:radial-gradient(40% 40% at 20% 30%, rgba(255,255,255,.16), transparent 70%);
}
.banda__in{ position:relative; text-align:center; }
.banda h2{ font-size:var(--t-xl); font-weight:900; margin:0 0 var(--s-2); }
.banda h2 em{ color:#0a0d14; }
.banda p{ color:rgba(255,255,255,.9); max-width:52ch; margin:0 auto var(--s-4); }
.banda__btns{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.banda__btns .btn{ flex:1 1 250px; max-width:340px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{ background:var(--c-foot); padding:var(--s-6) 0 var(--s-3); border-top:1px solid var(--c-line); }
.foot__in{ display:grid; gap:var(--s-4); }
.foot__logo{ height:38px; width:auto; margin-bottom:var(--s-3); }
.foot h3{ font-size:var(--t-s); text-transform:uppercase; letter-spacing:.12em; color:var(--c-accent); margin:0 0 .8rem; }
.foot__who,.foot__serv{ color:var(--c-txt-soft); font-size:var(--t-s); margin:0 0 .5rem; }
.foot__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.foot__list a{ color:var(--c-txt-soft); text-decoration:none; font-size:var(--t-s); transition:color .2s; }
.foot__list a:hover{ color:var(--c-accent); }
.foot__bar{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  border-top:1px solid var(--c-line); margin-top:var(--s-5); padding-top:var(--s-3);
}
.foot__bar p{ margin:0; color:var(--c-dim); font-size:var(--t-xs); }
.foot__bar a{ color:var(--c-txt-soft); }
@media (min-width:760px){ .foot__in{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-5); } }

/* =====================================================================
   FAB WHATSAPP
   ===================================================================== */
.fab{
  position:fixed; z-index:90;
  right:16px;
  /* sugli iPhone con la barra gestuale il fondo schermo è occupato:
     `env()` tiene il pulsante sopra, dove il dito lo prende davvero */
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:56px; height:56px; border-radius:var(--r-pill);
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--c-wa),var(--c-wa-deep));
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(37,211,102,.12);
  transition:transform .22s var(--ease), box-shadow .3s;
}
.fab .i{ width:1.7rem; height:1.7rem; }
.fab:hover{ transform:scale(1.07); }
@media (min-width:1000px){ .fab{ right:26px; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); } }

/* =====================================================================
   MOVIMENTO ALLO SCROLL
   Tutto vive sotto `.js`: se lo script non parte, il contenuto è
   semplicemente visibile e fermo. Nessun effetto può nascondere nulla.
   `--d` è il ritardo dello scaglionamento, lo calcola main.js gruppo
   per gruppo, sugli elementi che entrano nello stesso momento.
   ===================================================================== */
.js .reveal{ opacity:0; transform:translate3d(0,26px,0); }
.js .reveal--l{ transform:translate3d(-30px,0,0); }
.js .reveal--r{ transform:translate3d(30px,0,0); }
.js .reveal--zoom{ transform:scale(.95) translate3d(0,20px,0); }

/* Le entrate laterali hanno senso solo dove il layout è a due colonne.
   Sotto quella soglia l'elemento è a tutta larghezza e i 30 px di
   spostamento lo spingerebbero oltre il bordo dello schermo: comparirebbe
   una barra di scorrimento orizzontale per la frazione di secondo prima
   che l'elemento entri. Qui si scende e basta. */
@media (max-width:899px){
  .js .reveal--l,
  .js .reveal--r{ transform:translate3d(0,26px,0); }
}

.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity var(--dur-in) var(--ease) var(--d,0ms),
             transform var(--dur-in) var(--ease) var(--d,0ms);
}

/* i numeri dei tre passi "scattano" dentro, con un rimbalzo appena accennato */
.js .step .step__n{ opacity:0; transform:scale(.5) rotate(-14deg); }
.js .step.is-in .step__n{
  opacity:1; transform:none;
  transition:opacity .45s var(--ease) calc(var(--d,0ms) + 140ms),
             transform .6s var(--ease-molla) calc(var(--d,0ms) + 140ms);
}

/* le icone delle tre promesse entrano un attimo dopo il testo */
.js .prova .i--lg{ opacity:0; transform:translate3d(0,10px,0) scale(.72); }
.js .prova.is-in .i--lg{
  opacity:1; transform:none;
  transition:opacity .45s var(--ease) calc(var(--d,0ms) + 90ms),
             transform .55s var(--ease-molla) calc(var(--d,0ms) + 90ms);
}

/* la spunta di ogni riga si disegna quando la riga entra */
.js .ticks li::before{ opacity:0; transform:rotate(-45deg) scale(.4); }
.js .ticks li.is-in::before{
  opacity:1; transform:rotate(-45deg) scale(1);
  transition:opacity .4s var(--ease) calc(var(--d,0ms) + 120ms),
             transform .5s var(--ease-molla) calc(var(--d,0ms) + 120ms);
}

/* la risposta della FAQ scende invece di comparire di colpo */
.q[open] .q__a{ animation:faq-giu .34s var(--ease) backwards; }
@keyframes faq-giu{
  from{ opacity:0; transform:translate3d(0,-8px,0); }
  to  { opacity:1; transform:none; }
}

/* il pulsante WhatsApp arriva a pagina disegnata, non sbatte dentro */
.fab{ animation:fab-dentro .55s var(--ease-molla) backwards .7s; }
@keyframes fab-dentro{
  from{ opacity:0; transform:scale(.4); }
  to  { opacity:1; transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .js .reveal,
  .js .step .step__n,
  .js .prova .i--lg{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .ticks li::before{ opacity:1 !important; transform:rotate(-45deg) !important; transition:none !important; }
  .split__air i,
  .q[open] .q__a,
  .fab{ animation:none; }
  .btn:hover,.card:hover,.fab:hover{ transform:none; }
  .nav__in,.nav__logo img{ transition:none; }
  .hero__glow,.hero__streak{ --py:0px; --py2:0px; }
}

/* =====================================================================
   PAGINA PRIVACY
   ===================================================================== */
.doc{ padding:var(--s-6) 0 var(--s-7); }
.doc h1{ font-size:var(--t-xl); margin-bottom:var(--s-2); }
.doc h2{ font-size:var(--t-l); margin:var(--s-5) 0 var(--s-2); }
.doc p, .doc li{ color:var(--c-txt-soft); }
.doc a{ color:var(--c-accent); }
.doc__meta{ font-size:var(--t-s); color:var(--c-dim); margin-bottom:var(--s-4); }
.doc__back{ display:inline-flex; gap:.5rem; align-items:center; margin-top:var(--s-5);
  color:var(--c-accent); text-decoration:none; font-weight:700; }

/* =====================================================================
   RITOCCHI SUL FONDO CHIARO
   (erano gli scostamenti dal tema scuro: ora sono le regole di base)
   ===================================================================== */
html{ color-scheme:light; }

.split__body{
  border:1px solid var(--c-line);
  box-shadow:0 18px 40px rgba(13,21,38,.16), inset 0 -14px 22px rgba(13,21,38,.05);
}
.hero{ background:linear-gradient(180deg,var(--c-bg),var(--c-surface-2)); }
.card:hover{ box-shadow:0 14px 34px rgba(13,21,38,.12); }
.fab{ box-shadow:0 12px 30px rgba(13,21,38,.22), 0 0 0 6px rgba(37,211,102,.14); }
.btn--dark{ background:#0d1526; }