/* ===========================================================
   Home — sezioni nuove (29/09/2026)
   Si appoggia a style.css per colori, font e classi di sempre
   (.halfBack, .backTitle, .offerta, .btnMl, .bgPrimary, .bgSecondary30).
   Qui solo quello che la home rifatta aggiunge. Ha la versione nel link.
   =========================================================== */

/* ---------- prima schermata ---------- */
/* dal 30/09/2026 l'header è fisso e trasparente (fissa solo la navbar, vedi menu.css):
   la prima schermata parte dal bordo alto dello schermo, riquadro viola compreso,
   e il testo lascia sopra lo spazio per la pillola del menu (circa 77px) */
.hero-home{display:grid;grid-template-columns:1fr;min-height:100vh;}
@media (min-width:768px){.hero-home{grid-template-columns:7fr 5fr;min-height:min(100vh,840px);}}
.hero-home__testo{display:flex;flex-direction:column;justify-content:center;padding:125px 20px 40px;}
@media (min-width:768px){.hero-home__testo{padding:125px 48px 56px max(48px, calc((100vw - 1120px) / 2 + 20px));}}
.hero-home__occhiello{font-size:.85rem;line-height:1.5;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9E75E2;margin:24px 0 8px;}
.hero-home__titolo{position:relative;padding-top:40px;}
.hero-home__titolo .backTitle{top:0;left:-4px;font-size:clamp(3rem,8vw,4.8rem);line-height:1;pointer-events:none;}
.hero-home h1{position:relative;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.12;margin:0 0 20px;max-width:640px;}
.hero-home__lead{font-size:1.1rem;line-height:1.7;color:rgba(255,255,255,.82);max-width:560px;margin:0 0 28px;}
.hero-home__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px;}
.hero-home__cta .btnMl{display:inline-flex;align-items:center;gap:9px;font-weight:700;padding:15px 22px;border-radius:12px;line-height:1.2;}
.btnMl--wa{background:#25D366;border-color:#25D366;color:#04310f !important;}
.btnMl--wa:hover{background:#1fbb59;border-color:#1fbb59;}
.hero-home__fiducia{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));max-width:600px;}
.hero-home__fiducia li{margin:0;padding-left:12px;border-left:2px solid var(--secondary);font-size:.85rem;line-height:1.4;color:rgba(255,255,255,.72);}
.hero-home__fiducia b{display:block;color:#fff;font-size:1rem;}
@media (max-width:520px){
  .hero-home__fiducia{grid-template-columns:1fr;}
  .hero-home__cta .btnMl{width:100%;justify-content:center;}
}
.hero-home__avatar{display:flex;justify-content:center;align-items:flex-end;padding-top:24px;}
.hero-home__avatar img{width:auto;max-width:min(62%,300px);height:auto;}
@media (min-width:768px){.hero-home__avatar img{max-width:min(58%,340px);}}

/* ---------- cosa posso fare per te ---------- */
.servizi-home{display:grid;gap:16px;grid-template-columns:1fr;margin-top:40px;}
@media (min-width:640px){.servizi-home{grid-template-columns:repeat(2,1fr);}}
@media (min-width:992px){.servizi-home{grid-template-columns:repeat(3,1fr);}}
.servizio-home{display:flex;flex-direction:column;height:100%;background:var(--bgLight);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:24px;transition:border-color .18s ease,transform .18s ease;}
.servizio-home:hover{border-color:rgba(140,92,221,.6);transform:translateY(-2px);}
.servizio-home h3{font-size:1.25rem;line-height:1.3;margin:0 0 10px;}
.servizio-home p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 16px;flex:1;}
.servizio-home a{color:#9E75E2;font-weight:700;text-decoration:none;}
.servizio-home a:hover{text-decoration:underline;}
.servizio-home a::after{content:" →";}
.servizio-home__nota{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.55);}

/* ---------- come lavoro ---------- */
.metodo-home{display:grid;gap:24px;grid-template-columns:1fr;}
@media (min-width:768px){.metodo-home{grid-template-columns:repeat(3,1fr);}}
.metodo-home h3{font-size:1.2rem;margin:0 0 6px;}
.metodo-home p{font-size:1rem;line-height:1.6;margin:0;}

/* ---------- lavori ---------- */
#progetti .lavoro-home{margin-top:64px;}
#progetti .lavoro-home video{width:100%;height:auto;border-radius:16px;display:block;background:#000;}
.lavoro-home__testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;}
.lavoro-home__testa h3{margin:0;}

/* le ancore del menu (#offerte, #skills…) si fermano sotto l'intestazione, non dietro */
main section[id]{scroll-margin-top:84px;}

/* le ondine (.onda) stanno in piede.css: le usa anche il footer delle altre pagine */

/* ---------- fascia sotto la prima schermata ---------- */
.fascia-home{padding:28px 0;}
.fascia-home__elenco{display:grid;gap:18px 28px;grid-template-columns:1fr;padding:0 20px;margin:0 auto;}
@media (min-width:640px){.fascia-home__elenco{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.fascia-home__elenco{grid-template-columns:repeat(4,1fr);}}
.fascia-home__elenco li{margin:0;font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.85);padding-left:14px;border-left:2px solid rgba(255,255,255,.35);}
.fascia-home__elenco b{display:block;color:#fff;font-size:1.05rem;}

/* ---------- pulsante in basso a destra che galleggia ----------
   `translate` e non `transform`: .is-hidden usa già transform per sparire, e i due
   movimenti devono potersi sommare. Lento e corto, per non distrarre. */
#fixedButton{animation:galleggia 5s ease-in-out infinite;}
@keyframes galleggia{
  0%,100%{translate:0 0;}
  50%{translate:0 -7px;}
}

/* il footer sta in piede.css: è lo stesso su tutto il sito (30/09/2026) */

/* chi ha chiesto meno movimento: niente onde che scorrono, niente pulsante che galleggia */
@media (prefers-reduced-motion:reduce){
  #fixedButton{animation:none;}
}