/* =========================================================================
   Strato "wow" condiviso da tutte le pagine del sito pubblico.
   Caricato dopo site.css e sito-pubblico.css: ridefinisce hero, card, passi, bande, pulsanti e
   aggiunge le animazioni di comparsa. Per tornare indietro basta togliere il link in _Layout.
   ========================================================================= */

:root {
  --wow-grad: linear-gradient(125deg, #6E2F77 0%, var(--color-primary) 45%, var(--color-secondary) 100%);
  --wow-grad-soft: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --wow-shadow: 0 22px 50px rgba(45, 20, 55, .16);
  --wow-shadow-hover: 0 30px 60px rgba(45, 20, 55, .24);
}
html[data-theme="dark"] {
  --wow-grad: linear-gradient(125deg, #3E1A44 0%, #7A4381 55%, #9A6DA0 100%);
  --wow-shadow: 0 22px 50px rgba(0, 0, 0, .45);
  --wow-shadow-hover: 0 30px 60px rgba(0, 0, 0, .55);
}

/* ---------- Hero (home e pagine di servizio) ---------- */
.hero-wide, .page-hero { position: relative; overflow: hidden; background: var(--wow-grad); }
.hero-wide { padding: 110px 0 120px; }
.hero-wide::before, .page-hero::before {
  content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%;
  top: -190px; left: -130px; background: rgba(255, 255, 255, .09); pointer-events: none;
}
.hero-wide::after, .page-hero::after {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  bottom: -150px; right: 8%; background: rgba(255, 255, 255, .08); pointer-events: none;
}
.hero-wide .container, .page-hero .container { position: relative; z-index: 1; }
.hero-wide h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.07; letter-spacing: -.01em; }
.page-hero { padding: 76px 0 84px; }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }

/* Bordo curvo in basso: l'hero si "scioglie" nella sezione successiva */
.hero-wide + .section, .page-hero + .section { position: relative; }
.hero-wide, .page-hero { clip-path: ellipse(120% 100% at 50% 0%); padding-bottom: 130px; }
.hero-wide + .section, .page-hero + .section { margin-top: -40px; padding-top: 110px; }

/* Link dell'hero: sottolineatura che cresce */
.hero-links a { border-bottom: 0; position: relative; padding-bottom: 5px; }
.hero-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #fff;
  transform: scaleX(.35); transform-origin: left; transition: transform .3s ease;
}
.hero-links a:hover::after { transform: scaleX(1); }

/* Fila di punti di forza nell'hero della home */
.hero-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-point {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .92rem;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); backdrop-filter: blur(4px);
}
.hero-point svg { width: 18px; height: 18px; flex: none; }

/* ---------- Titoli di sezione con barra d'accento ---------- */
.lead-block h2::after, .section-head h2::after {
  content: ""; display: block; width: 64px; height: 5px; border-radius: 4px; margin: 16px auto 0; background: var(--wow-grad-soft);
}
.lead-block { max-width: 820px; }

/* ---------- Pulsanti ---------- */
.btn { border-radius: 999px; padding: 13px 28px; }
.btn-primary { background: linear-gradient(135deg, var(--color-primary), #7B1FA2); border-color: transparent; }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(123, 31, 162, .38); }
.btn-white { box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
.btn-white:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, .28); }
.btn-outline:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-outline-onhero:hover { background: rgba(255, 255, 255, .16); }
.btn-sm { padding: 9px 20px; }

/* ---------- Card ---------- */
.card {
  position: relative; border-radius: 24px; border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--wow-grad-soft);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--wow-shadow-hover); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card-icon {
  width: 56px; height: 56px; border-radius: 18px; color: #fff; background: var(--wow-grad-soft);
  box-shadow: 0 10px 22px rgba(146, 82, 152, .32); transition: transform .3s ease;
}
.card:hover .card-icon { transform: rotate(-6deg) scale(1.08); }
.card h3 { font-size: 1.15rem; }
.choice-card { padding: 34px 32px; }
.choice-card .kicker {
  align-self: flex-start; background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.choice-card h3 { font-size: 1.45rem; }
.link-arrow { margin-top: 12px; }
.link-arrow::after { font-size: 1.2em; }
.card:hover .link-arrow::after { transform: translateX(6px); }

/* ---------- Passi numerati ---------- */
.steps-4, .steps-3 { position: relative; }
.steps-4::before, .steps-3::before {
  content: ""; position: absolute; top: 34px; left: 12%; right: 12%; height: 3px; opacity: .65;
  background: repeating-linear-gradient(90deg, var(--color-secondary) 0 10px, transparent 10px 20px);
}
.step-card { text-align: center; padding: 0 10px; position: relative; }
.step-card .step-number {
  width: 68px; height: 68px; margin: 0 auto 18px; font-size: 1.6rem; background: var(--wow-grad-soft);
  box-shadow: 0 0 0 8px var(--color-bg), 0 12px 26px rgba(146, 82, 152, .35); transition: transform .3s ease;
}
.section-grey .step-card .step-number { box-shadow: 0 0 0 8px var(--color-bg-grey), 0 12px 26px rgba(146, 82, 152, .35); }
.step-card:hover .step-number { transform: scale(1.12) rotate(-4deg); }
.step-card p { max-width: 32ch; margin: 0 auto; }

/* ---------- Strisce e pannelli ---------- */
.note-strip {
  background: var(--wow-grad-soft); color: #fff; border-radius: 999px; padding: 16px 30px; font-weight: 700;
  box-shadow: 0 14px 30px rgba(146, 82, 152, .3); max-width: 820px;
}
.media-panel {
  position: relative; overflow: hidden; border: 0; border-radius: 28px; min-height: 320px; box-shadow: var(--wow-shadow);
  background: var(--wow-grad);
  color: #fff;
}
.media-panel::before, .media-panel::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.media-panel::before { width: 240px; height: 240px; top: -90px; right: -70px; }
.media-panel::after { width: 160px; height: 160px; bottom: -60px; left: -40px; }
.media-panel svg { position: relative; z-index: 1; width: 110px; height: 110px; animation: wow-float 4.6s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .25)); }
.split h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }

/* ---------- Bande colorate ---------- */
.band { position: relative; overflow: hidden; background: var(--wow-grad); padding: 96px 0; }
.band::before, .band::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; }
.band::before { width: 380px; height: 380px; top: -170px; left: -100px; }
.band::after { width: 260px; height: 260px; bottom: -120px; right: 6%; }
.band .container { position: relative; z-index: 1; }
.band h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }

/* ---------- FAQ ---------- */
.faq-item { border-radius: 18px; transition: box-shadow .25s ease, transform .25s ease; }
.faq-item:hover { box-shadow: var(--wow-shadow); transform: translateY(-2px); }
.faq-item summary { font-weight: 700; }

/* ---------- Moduli ---------- */
.form-card { border-radius: 26px; box-shadow: var(--wow-shadow); padding: 38px; }
.form-card input:focus, .form-card textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent); }

/* ---------- Footer ---------- */
.site-footer { position: relative; }
.site-footer a { transition: color .2s ease, padding-left .2s ease; }

/* ---------- Comparsa al scorrimento ---------- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

@keyframes wow-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 960px) {
  .hero-wide { padding: 80px 0 110px; }
  .steps-4::before, .steps-3::before { display: none; }
  .note-strip { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .media-panel svg { animation: none; }
  .card, .card::before, .card-icon, .step-card .step-number, .faq-item { transition: none; }
}