/*-----------------------------------------------------------------------------------

    Geminit — Bando Digitalizzazione PMI — Landing page
    Basato sulla struttura, i componenti e le animazioni del tema Bizora
    (griglia Bootstrap, header sticky, accordion, counter, scroll-progress,
    title animation GSAP/SplitText), con palette, tipografia e contenuti
    interamente Geminit.

    Palette reale: estratta dalle CSS custom properties del sito Geminit
    live (BaseLayout.U-Ju6GFN.css) e incrociata con il colore campionato
    a livello di pixel dal logo ufficiale (loghi/Geminit 2025.pdf).

    Indice
      01. variabili e font
      02. reset e base
      03. utility (container, gap, bottoni, badge, heading)
      04. header
      05. hero + form
      06. numeri del bando
      07. problema/soluzione
      08. processo
      09. servizi (tiles)
      10. destinatari
      11. urgenza
      12. partner Geminit
      13. faq
      14. cta finale
      15. footer
      16. cookie bar
      17. sticky cta mobile
      18. responsive
      19. motion & focus

-----------------------------------------------------------------------------------*/

/* 01. variabili e font ------------------------------------------------------------*/

/* Font enterprise: Manrope per i titoli (geometrico, autorevole), Inter per il body (leggibilità da interfaccia) */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@400..800&display=swap');

:root {
  /* palette Geminit reale */
  --geminit-red: #e63946;
  --geminit-red-dark: #c1121f;
  --geminit-red-light: #ff6b6b;
  --geminit-red-tint: #fdecee;
  --geminit-blue: #1767b7;
  --geminit-blue-light: #4db8ff;
  --geminit-black: #111111;
  --geminit-gray: #5b6472;
  --geminit-gray-light: #eef1f5;
  --geminit-background: #f7f9fb;
  --geminit-white: #ffffff;
  --geminit-border: #e3e7ee;

  /* tipografia */
  --font-heading: "Manrope", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  /* raggio e ombre coerenti con l'impaginazione arrotondata di Bizora */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 12px 32px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 24px 60px rgba(17, 17, 17, 0.12);
  --shadow-red: 0 16px 40px rgba(230, 57, 70, 0.25);

  --container-max: 1200px;
  --header-h: 84px;
  /* quanto la hero risale dietro l'header sticky: volutamente più dell'altezza
     reale dell'header (~85px), così non resta mai una riga di bianco visibile */
  --hero-header-overlap: 100px;
}

/* 02. reset e base -----------------------------------------------------------------*/

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--geminit-gray);
  background: var(--geminit-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; cursor: pointer; color: var(--geminit-red); }

ul { list-style: none; }

figure { margin: 0; overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--geminit-black);
  font-weight: 700;
  line-height: 1.18;
  margin: 0;
}

h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.15rem; }

p { font-size: 1rem; line-height: 1.7; margin: 0; }

.lead { font-size: 1.21rem; line-height: 1.6; color: var(--geminit-gray); }

strong, b { color: var(--geminit-black); font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--geminit-blue-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 03. utility ----------------------------------------------------------------------*/

.container { max-width: var(--container-max); }

.gap { padding: 96px 0; }
.gap.no-top { padding-top: 0; }
.gap.no-bottom { padding-bottom: 0; }
.section--alt { background: var(--geminit-gray-light); }
.section--dark {
  background: linear-gradient(120deg, #111111, #1a1a1a, #0d0d0d, #161616);
  background-size: 300% 300%;
  animation: bgFlow 18s ease infinite;
  color: rgba(255,255,255,.78);
}
.section--red {
  background: linear-gradient(120deg, var(--geminit-red), var(--geminit-red-dark), #d92d3a, var(--geminit-red));
  background-size: 300% 300%;
  animation: bgFlow 14s ease infinite;
  color: #fff;
}
.section { position: relative; overflow: hidden; }

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

/* forme decorative fluttuanti (ispirate alle sfere di Bizora, ricreate in palette Geminit) */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  animation: blobFloat 9s ease-in-out infinite;
}
.blob--red { background: radial-gradient(circle at 30% 30%, rgba(230,57,70,.35), rgba(230,57,70,0) 70%); }
.blob--blue { background: radial-gradient(circle at 30% 30%, rgba(77,184,255,.3), rgba(77,184,255,0) 70%); }
.blob--light { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), rgba(255,255,255,0) 70%); }

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -22px) scale(1.06); }
}

/* decorazioni della sezione "tempistiche": il simbolo Geminit reale (non una
   forma generica), in tre varianti — rossa naturale e bianca/nera sul fondo scuro,
   stessa dissolvenza per tutte. Il movimento continuo è lo stesso simbolFloat del
   simbolo decorativo; lo scroll-parallax si aggiunge via JS (main.js). */
.tempistiche-symbol {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  aspect-ratio: 1 / 1;
  height: auto;
  animation: symbolFloat 12s ease-in-out infinite;
}
.tempistiche-symbol--red { width: 240px; opacity: .16; }
.tempistiche-symbol--white-lg { width: 620px; opacity: .10; filter: brightness(0) invert(1); }
.tempistiche-symbol--white-sm { width: 160px; opacity: .13; filter: brightness(0) invert(1); }

/* decorazione della pagina thank-you (stesso simbolo, isolato) */
.symbol-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 480px;
  aspect-ratio: 1 / 1;
  height: auto;
  opacity: .08;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--geminit-red);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--geminit-red);
  display: inline-block;
}
.section--dark .eyebrow,
.section--red .eyebrow { color: #fff; }
.section--dark .eyebrow::before,
.section--red .eyebrow::before { background: #fff; }

.heading { max-width: 720px; margin-bottom: 48px; }
.heading.text-center { margin-inline: auto; text-align: center; }
.heading p { margin-top: 16px; font-size: 1.14rem; }
.section--dark .heading h2,
.section--red .heading h2,
.section--dark h3, .section--red h3 { color: #fff; }
.section--dark p, .section--red p { color: rgba(255,255,255,.78); }

.text-red { color: var(--geminit-red); }
.text-blue { color: var(--geminit-blue); }

/* bottoni */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background: var(--geminit-red);
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  /* nessun glow rosso: l'alone si leggeva come una macchia attorno ai pulsanti.
     Il feedback resta affidato al cambio colore + lift su hover. */
  box-shadow: none;
  white-space: nowrap;
}
.btn:hover, .btn:focus-visible {
  background: var(--geminit-red-dark);
  transform: translateY(-2px);
  color: #fff;
}
.btn svg, .btn i { width: 18px; height: 18px; flex-shrink: 0; }
.btn.btn-outline {
  background: transparent;
  color: var(--geminit-black);
  border-color: var(--geminit-border);
  box-shadow: none;
}
.btn.btn-outline:hover { border-color: var(--geminit-red); color: var(--geminit-red); background: var(--geminit-red-tint); }
.section--dark .btn.btn-outline,
.section--red .btn.btn-outline { color: #fff; border-color: rgba(255,255,255,.5); }
.section--red .btn.btn-outline:hover,
.section--dark .btn.btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.section--red .btn:not(.btn-outline) { background: var(--geminit-black); }
.section--red .btn:not(.btn-outline):hover { background: #000; }
.btn-sm { padding: 11px 22px; font-size: .9rem; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--geminit-red-tint);
  color: var(--geminit-red-dark);
  font-weight: 700;
  font-size: .85rem;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
}
.badge-pill i { color: var(--geminit-red); }

.note {
  font-size: .85rem;
  color: #8a919c;
  margin-top: 18px;
}
.section--dark .note, .section--red .note { color: rgba(255,255,255,.6); }

@keyframes symbolFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-14px, 20px) rotate(6deg); }
}

/* 04. header -------------------------------------------------------------------*/

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* trasparente a riposo: lascia passare lo sfondo della hero, così l'header non
     stacca come una fascia bianca rispetto al resto della pagina */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
/* durante lo scroll serve comunque una superficie piena: senza, il menu (testo
   scuro) diventerebbe illeggibile sopra le sezioni scure/rosse che gli scorrono
   sotto. Colore = --geminit-gray-light con alpha, non bianco. */
.site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(17,17,17,.08);
  border-color: var(--geminit-border);
  background: rgba(238,241,245,.95);
  backdrop-filter: blur(8px);
}
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}
.logo img { height: 40px; width: auto; }

.navbar { position: static; }
.navbar-links { display: flex; align-items: center; gap: 30px; }
.navbar-links a {
  color: var(--geminit-black);
  font-weight: 600;
  font-size: .96rem;
}
.navbar-links a:hover { color: var(--geminit-red); }

.header-right { display: flex; align-items: center; gap: 20px; }
.header-right .mailnumber { display: none; }
.header-right .btn { padding: 12px 24px; font-size: .92rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--geminit-border);
  background: #fff;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--geminit-black); margin: 0 auto; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 05. hero + form ---------------------------------------------------------------*/

/* La hero si estende sotto l'header sticky (che occupa spazio proprio in flusso):
   margin-top negativo per risalire dietro l'header, padding-top che compensa
   esattamente la stessa quantità così i contenuti non si spostano. Serve perché
   l'header è trasparente: senza questo si vedrebbe il bianco del body al suo posto. */
.hero {
  margin-top: calc(-1 * var(--hero-header-overlap));
  padding: calc(64px + var(--hero-header-overlap)) 0 88px;
  background: linear-gradient(135deg, var(--geminit-gray-light) 0%, #fff 45%, var(--geminit-red-tint) 100%);
  background-size: 220% 220%;
  animation: bgFlow 16s ease infinite;
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.hero__badge { margin-bottom: 20px; }
.hero h1 { margin-bottom: 22px; }
.hero__lead { max-width: 560px; margin: 22px 0 20px; }

.hero__urgency {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--geminit-red-tint);
  border: 1px solid var(--geminit-red-light);
  color: var(--geminit-red-dark);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  max-width: 560px;
  margin-bottom: 22px;
}
.hero__urgency i { color: var(--geminit-red); margin-top: 3px; flex-shrink: 0; }

/* callout "a fondo perduto" — il primo numero che l'occhio deve trovare nella hero */
.hero__grant {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  background: linear-gradient(120deg, var(--geminit-red), var(--geminit-red-dark), #d92d3a, var(--geminit-red));
  background-size: 300% 300%;
  animation: bgFlow 10s ease infinite, grantPulse 3.2s ease-in-out infinite;
  color: #fff;
  border-radius: var(--radius-md);
  padding: 18px 24px;
  box-shadow: var(--shadow-red);
}
.hero__grant-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.hero__grant-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1;
  white-space: nowrap;
}
.hero__grant-value span { font-size: .55em; opacity: .85; }
.hero__grant-pct { font-size: .65em !important; margin-left: 1px; }
.hero__grant-text { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid rgba(255,255,255,.3); padding-left: 16px; }
.hero__grant-text strong { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; }
.hero__grant-text span { font-size: .82rem; color: rgba(255,255,255,.85); }

@keyframes grantPulse {
  0%, 100% { box-shadow: 0 16px 40px rgba(230,57,70,.25); }
  50% { box-shadow: 0 16px 48px rgba(230,57,70,.45); }
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 14px; }
.hero__microcopy { font-size: .88rem; color: #8a919c; }

.hero-visual {
  width: 100%;
  height: 100%;
  background-image: url('../images/IMG1.png');
  background-size: cover;
  background-position: center top;
}

.hero-card {
  background: #fff;
  border: 1px solid var(--geminit-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px;
  position: relative;
}
.hero-card__title { margin-bottom: 6px; }
.hero-card__text { margin-bottom: 24px; font-size: 1.02rem; }

.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--geminit-black);
  margin-bottom: 6px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--geminit-border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--geminit-black);
  background: var(--geminit-background);
  transition: border-color .15s ease, background .15s ease;
}
.form-field textarea { resize: vertical; min-height: 90px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--geminit-blue);
  background: #fff;
}
.form-field input:invalid:not(:placeholder-shown) { border-color: var(--geminit-red-light); }
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: var(--geminit-red); background: var(--geminit-red-tint); }
.form-check input[aria-invalid="true"] { outline: 2px solid var(--geminit-red); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--geminit-gray);
}
.form-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--geminit-red); flex-shrink: 0; }
.form-check a { color: var(--geminit-blue); font-weight: 600; }

.form-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }

.hero-card .btn { width: 100%; }

/* form spostato in una sezione propria dopo la hero (vedi sezione C in index.html) */
.form-section { background: var(--geminit-background); }
.hero-card--standalone {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px;
}
.hero-card__intro { margin-bottom: 28px; }
.hero-card__intro .eyebrow { margin-bottom: 12px; }
.hero-card__intro h2 { margin-bottom: 12px; }
.hero-card__form-wrap .btn { width: 100%; }

.form-msg {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  display: none;
}
.form-msg.is-visible { display: block; }
.form-msg.is-error { background: var(--geminit-red-tint); color: var(--geminit-red-dark); }
.form-msg.is-success { background: #e7f4ec; color: #1c7a41; }

/* 06. numeri del bando -----------------------------------------------------------*/

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--geminit-border);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-lg);
  border-color: var(--geminit-red-light);
}
.stat-card .stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.4rem, 1.8vw, 1.7rem);
  line-height: 1.25;
  color: var(--geminit-red);
  display: flex;
  align-items: center;
  min-height: 2.5em;
  margin-bottom: 12px;
  transition: transform .3s ease;
}
.stat-card:hover .stat-value { transform: scale(1.06); }
.stat-card .stat-label { margin-top: auto; font-size: .95rem; color: var(--geminit-gray); font-weight: 500; }

/* 07. problema/soluzione ---------------------------------------------------------*/

.split-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 8px;
}
.split-col {
  border-radius: var(--radius-md);
  padding: 32px;
  border: 1px solid var(--geminit-border);
}
.split-col--from { background: var(--geminit-gray-light); }
.split-col--to { background: var(--geminit-black); color: #fff; }
.split-col h3 { margin-bottom: 20px; }
.split-col--to h3 { color: #fff; }
.split-col ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-weight: 500;
  color: var(--geminit-black);
  transition: transform .2s ease, padding-left .2s ease;
}
.split-col ul li:hover { transform: translateX(4px); }
.split-col--to ul li { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.9); }
.split-col ul li:last-child { border-bottom: none; }
.split-col ul li i { color: var(--geminit-red); margin-top: 3px; flex-shrink: 0; transition: transform .2s ease; }
.split-col ul li:hover i { transform: scale(1.25); }
.split-col--to ul li i { color: var(--geminit-blue-light); }
.problem-intro { max-width: 720px; margin-bottom: 28px; }
.problem-intro strong { display: block; margin-top: 8px; color: var(--geminit-black); font-size: 1.1rem; }

/* 08. processo --------------------------------------------------------------------*/

.process-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.process-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--geminit-border);
  position: relative;
}
.process-step:last-child { border-bottom: none; }
.process-step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--geminit-red-tint);
  color: var(--geminit-red);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease;
}
.process-step:hover .process-step__num {
  transform: scale(1.12) rotate(-6deg);
  background: var(--geminit-red);
  color: #fff;
}
.process-step h3 { margin-bottom: 6px; }
.process-step p { max-width: 620px; }
.process-cta { margin-top: 36px; }

/* 09. servizi (tiles) --------------------------------------------------------------*/

/* minmax(0, 1fr) e non 1fr: con "1fr" (= minmax(auto, 1fr)) le colonne non possono
   scendere sotto il min-content dei tile — dettato dalla parola più lunga delle
   etichette — e su mobile il grid sfondava il contenitore (contenuto 404px in un
   box da 367px), con la colonna destra tagliata. */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.service-tile {
  background: #fff;
  border: 1px solid var(--geminit-border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.service-tile:hover { transform: translateY(-5px) scale(1.03); box-shadow: var(--shadow-lg); border-color: var(--geminit-red-light); }
.service-tile__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--geminit-red-tint);
  color: var(--geminit-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.service-tile:hover .service-tile__icon {
  transform: rotate(-8deg) scale(1.1);
  background: var(--geminit-red);
  color: #fff;
}
/* min-width:0 permette all'etichetta (flex item) di restringersi; break-word è la
   rete di sicurezza per le parole lunghe sui viewport più stretti */
.service-tile__label {
  font-weight: 600;
  color: var(--geminit-black);
  font-size: .95rem;
  min-width: 0;
  overflow-wrap: break-word;
}
.tile-hidden { display: none; }
.tiles-toggle { margin-top: 32px; text-align: center; }

/* 10. destinatari -------------------------------------------------------------------*/

.recipients-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.recipient-card {
  border: 1px solid var(--geminit-border);
  border-radius: var(--radius-md);
  padding: 32px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.recipient-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.recipient-card i { color: var(--geminit-blue); font-size: 1.8rem; margin-bottom: 16px; display: block; }
.recipient-card h3 { margin-bottom: 10px; }
.recipients-highlight {
  margin-top: 24px;
  background: var(--geminit-black);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
}
.recipients-highlight i { color: var(--geminit-blue-light); font-size: 1.3rem; }
.recipients-cta { margin-top: 28px; }

/* 11. urgenza --------------------------------------------------------------------*/

.urgency-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; }
.urgency-item {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  padding: 24px;
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  color: #fff;
}
.urgency-item i { color: var(--geminit-red-light); font-size: 1.4rem; flex-shrink: 0; }
.urgency-final { max-width: 680px; font-size: 1.05rem; margin-bottom: 28px; }

/* 12. partner Geminit ---------------------------------------------------------------*/

.partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.partner-box {
  background: var(--geminit-red);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-red);
}
.partner-box h3 { color: #fff; font-size: 1.4rem; line-height: 1.35; margin-bottom: 28px; font-weight: 800; }
.partner-points { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.partner-points li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.partner-points i { background: rgba(255,255,255,.18); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .95rem; }
.partner-payoff { margin-top: 28px; max-width: 260px; width: 100%; }

/* 13. faq ----------------------------------------------------------------------------*/

.faq-intro { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.faq-intro .eyebrow { margin-bottom: 12px; justify-content: center; }
.faq-body { max-width: 760px; margin: 0 auto; }
.faq-contacts {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.faq-contacts .mailnumber {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 0;
}
.faq-contacts .mailnumber i {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--geminit-gray-light);
  color: var(--geminit-red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.faq-contacts .mailnumber span { display: block; font-size: .82rem; color: #8a919c; }
.faq-contacts .mailnumber a { color: var(--geminit-black); font-weight: 700; }

.accordion-item {
  border: 1px solid var(--geminit-border);
  border-radius: var(--radius-md) !important;
  background: #fff;
  margin-bottom: 14px;
  overflow: hidden;
}
.accordion-item.active { border-color: var(--geminit-red-light); box-shadow: var(--shadow-sm); }
button.heading {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 22px 24px;
  font-family: var(--font-heading);
}
.accordion-item .title { font-weight: 700; font-size: 1.05rem; color: var(--geminit-black); padding: 0; }
.accordion-item .icon {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--geminit-gray-light);
  flex-shrink: 0;
}
.accordion-item.active .icon { background: var(--geminit-red); }
.accordion-item .icon:before, .accordion-item .icon:after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 2px;
  background: var(--geminit-black);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, background .2s ease;
}
.accordion-item .icon:after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion-item.active .icon:after { transform: translate(-50%, -50%) rotate(0deg); }
.accordion-item.active .icon:before, .accordion-item.active .icon:after { background: #fff; }
.accordion-item .content { display: none; padding: 0 24px 24px; }
.accordion-item .content p { color: var(--geminit-gray); }

/* 14. cta finale -----------------------------------------------------------------*/

.cta-final { text-align: center; }
.cta-final .heading { margin-inline: auto; }
.cta-final__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

.quick-form {
  max-width: 900px;
  margin: 32px auto 0;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-md);
  text-align: left;
}
.quick-form__fields { display: flex; align-items: flex-start; gap: 14px; }
.quick-form__field { flex: 1; margin-bottom: 0; }
.quick-form__field input {
  width: 100%;
  border: 1px solid var(--geminit-border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--geminit-black);
  background: var(--geminit-background);
  transition: border-color .15s ease, background .15s ease;
}
.quick-form__field input:focus { outline: none; border-color: var(--geminit-blue); background: #fff; }
.quick-form__field input[aria-invalid="true"] { border-color: var(--geminit-red); background: var(--geminit-red-tint); }
.quick-form__submit { flex-shrink: 0; white-space: nowrap; }
.quick-form .form-check { margin: 16px 0 0; }
.quick-form .form-msg { text-align: left; }
.cta-final__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: rgba(255,255,255,.75);
  font-weight: 600;
  font-size: .92rem;
}
.cta-final__phone:hover { color: #fff; }

@media (max-width: 768px) {
  .quick-form { padding: 22px; }
  .quick-form__fields { flex-direction: column; align-items: stretch; }
  .quick-form__submit { width: 100%; }
}

/* 15. footer -----------------------------------------------------------------------*/

.site-footer { background: var(--geminit-black); color: rgba(255,255,255,.65); padding: 72px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-logo img { height: 40px; margin-bottom: 16px; }
.footer-payoff { height: 22px; margin-top: 14px; width: auto; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,.65); }
.footer-col a:hover { color: #fff; }
.footer-col .mailnumber { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-col .mailnumber i { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-col .mailnumber a { color: #fff; font-weight: 600; }
.footer-disclaimer { font-size: .8rem; line-height: 1.6; border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; margin-bottom: 20px; color: rgba(255,255,255,.45); }
.all-rights { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.all-rights .legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.all-rights .legal-links a { color: rgba(255,255,255,.65); }
.social-media { display: flex; gap: 10px; }
.social-media a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: #fff; }
.social-media a:hover { background: var(--geminit-red); border-color: var(--geminit-red); }

/* 16. cookie bar -------------------------------------------------------------------*/

.cookie-bar {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 720px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--geminit-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
  z-index: 2000;
  display: none;
}
.cookie-bar.is-visible { display: block; }
.cookie-bar p { font-size: .88rem; margin-bottom: 14px; }
.cookie-bar a { color: var(--geminit-blue); font-weight: 600; }
.cookie-bar__categories { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.cookie-bar__categories label { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--geminit-black); }
.cookie-bar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-bar__actions .btn { padding: 11px 20px; font-size: .85rem; }

.cookie-settings-trigger {
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--geminit-black);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1900;
  border: none;
  cursor: pointer;
}
.cookie-settings-trigger.is-visible { display: flex; }

/* 17. sticky cta mobile -------------------------------------------------------------*/

.sticky-cta-mobile {
  display: none;
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 1500;
}
.fab-toggle {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--geminit-red);
  color: #fff;
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  /* ombra neutra, non il glow rosso: questo pulsante galleggia sopra contenuti di
     qualsiasi colore e gli serve profondità, non un alone colorato */
  box-shadow: 0 6px 20px rgba(17,17,17,.28);
  cursor: pointer;
  transition: transform .2s ease;
}
.fab-toggle[aria-expanded="true"] { background: var(--geminit-red-dark); }
/* icona cuffie a riposo (evoca il contatto), "X" quando il menu è aperto */
.fab-toggle__icon--open { display: none; }
.fab-toggle[aria-expanded="true"] .fab-toggle__icon--closed { display: none; }
.fab-toggle[aria-expanded="true"] .fab-toggle__icon--open { display: block; }
.fab-menu {
  position: absolute;
  right: 0; bottom: 68px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.fab-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.fab-menu__item {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  color: var(--geminit-black);
  font-weight: 700;
  font-size: .88rem;
  padding: 8px 18px 8px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--geminit-border);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.fab-menu__item i,
.fab-menu__item svg {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--geminit-red-tint);
  color: var(--geminit-red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fab-menu__item svg { padding: 8px; box-sizing: border-box; }

/* 18. responsive ---------------------------------------------------------------------*/

@media (max-width: 1199.98px) {
  .tiles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { gap: 32px; }
}

@media (max-width: 991.98px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* mantiene la compensazione dell'overlap sotto l'header (vedi regola .hero) */
  .hero { padding-top: calc(40px + var(--hero-header-overlap)); }
  .split-columns, .recipients-grid, .partner-grid { grid-template-columns: 1fr; }
  .partner-grid { direction: ltr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar-links { display: none; }
  .nav-toggle { display: flex; }
  /* a menu aperto l'header deve avere una superficie piena come il pannello che
     gli sta sotto, altrimenti resterebbe trasparente con la tendina "staccata" */
  .site-header.menu-open { background: var(--geminit-gray-light); }
  .site-header.menu-open .navbar-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--geminit-gray-light);
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--geminit-border);
    box-shadow: var(--shadow-md);
  }
  .site-header.menu-open .navbar-links a { display: block; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--geminit-border); }
  .header-right .btn { display: none; }
  .urgency-grid { grid-template-columns: 1fr; }
  .sticky-cta-mobile { display: block; }
  .hero-card--standalone { padding: 32px; }
  .hero-visual { height: 420px; margin-top: 32px; }
}

@media (max-width: 767.98px) {
  .gap { padding: 64px 0; }
  /* due colonne che stanno davvero nello schermo: colonne restringibili + tile
     più compatti (padding, icona e testo ridotti), così le etichette lunghe
     ("Marketplace", "Prenotazioni online") entrano senza tagli */
  .tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .service-tile { padding: 16px 14px; gap: 10px; }
  .service-tile__icon { width: 38px; height: 38px; border-radius: 10px; font-size: 1rem; }
  .service-tile__label { font-size: .88rem; line-height: 1.3; }
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .all-rights { flex-direction: column; align-items: flex-start; }
  .process-step { grid-template-columns: 48px 1fr; }
  .process-step__num { width: 44px; height: 44px; font-size: 1.1rem; }
  .hero-card { padding: 26px; }
  .partner-points { grid-template-columns: 1fr; }
  .symbol-decor { width: 340px; height: 340px; }
  .hero__grant { flex-wrap: wrap; max-width: 100%; }
  .hero__grant-text { border-left: none; padding-left: 0; flex-basis: 100%; }
}

@media (max-width: 399.98px) {
  /* restano due colonne (come da design), ma restringibili: prima era "1fr 1fr",
     che era sia un doppione della regola a 767px sia la causa dell'overflow */
  .tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .service-tile { padding: 14px 12px; }
  .service-tile__label { font-size: .84rem; }
  .numbers-grid { grid-template-columns: 1fr; }
  h1 { font-size: 2.1rem; }
}

/* 19. motion & focus -------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--geminit-black);
  color: #fff;
  padding: 10px 16px;
  z-index: 3000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* etichette accessibili nascoste visivamente (usate dalle label del quick-form) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}