/* ==========================================================================
   palco.ems.srl — forma propria della pagina
   Chi arriva qui ha paura di tre cose: che il palco non entri nella sala, che
   il montaggio finisca sulle sue spalle, che qualcuno si faccia male. La
   gerarchia risponde in quest'ordine, e la colonna portante e' il REGISTRO DI
   COSA E' INCLUSO: arriva subito dopo la prima schermata, pesa piu' di ogni
   altra cosa in pagina, ed e' l'unica sezione che si legge tutta senza saltare.
   Le altre quattro pagine hanno un'altra colonna portante apposta.
   ========================================================================== */

/* ---------- Prima schermata: foto piena, testo a sinistra ---------- */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding-top: clamp(7rem, 14vw, 9.5rem);
  padding-bottom: clamp(3rem, 8vw, 5.5rem);
  overflow: hidden; isolation: isolate; color: #fff;
}
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, color-mix(in srgb, var(--navy-950) 94%, transparent) 0%, color-mix(in srgb, var(--navy-950) 74%, transparent) 46%, color-mix(in srgb, var(--navy) 44%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--navy-950) 60%, transparent) 0%, transparent 34%, color-mix(in srgb, var(--navy-950) 72%, transparent) 100%);
}
.hero-grid { width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.hero-copy { max-width: 32ch; }
.hero h1 {
  font-size: clamp(2.5rem, 5.9vw, 4.4rem);
  font-weight: 500; line-height: 0.98; letter-spacing: -0.038em;
  margin: 1.3rem 0 1.1rem; max-width: 17ch;
}
.hero h1 .accent { color: var(--cyan); }
.hero-sub { font-size: clamp(1.04rem, 1.5vw, 1.2rem); color: rgba(255,255,255,0.88); line-height: 1.5; max-width: 34ch; }
.hero-cta { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; align-items: center; }

/* La leva numero uno sta sopra la piega, in una scheda a doppio bordo che la
   stacca dal resto del testo: e' l'argomento che decide, non una nota. */
.near-shell {
  padding: 7px; border-radius: calc(var(--radius) + 7px);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 40px 90px -34px rgba(0,0,0,0.6);
}
.near-card {
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--navy-950) 68%, transparent);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
}
.near-card p { font-size: 0.98rem; color: rgba(255,255,255,0.86); line-height: 1.55; margin-top: 0.7rem; }
.near-card .trust-row { margin-top: 1.2rem; }

/* ---------- Colonna portante: il registro di cosa e' incluso ---------- */
.ledger-sec { background: var(--paper); }
.ledger-wrap { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ledger-intro h2 { font-size: clamp(2rem, 3.9vw, 2.9rem); margin: 1.1rem 0 1.1rem; }
.ledger-intro p { font-size: 1.06rem; color: var(--muted); line-height: 1.62; }
.ledger-intro .ledger-actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.ledger-shell {
  padding: 8px; border-radius: calc(var(--radius) + 8px);
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 40px 80px -46px color-mix(in srgb, var(--navy) 60%, transparent);
}
.ledger {
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-950) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  padding: clamp(1.3rem, 2.4vw, 2rem);
  color: #fff;
}
.ledger h3 { font-size: 1.15rem; letter-spacing: -0.02em; }
.ledger .microlabel { color: rgba(255,255,255,0.5); display: block; margin-bottom: 0.5rem; }
.ledger-rows { margin-top: 1.3rem; border-top: 1px solid rgba(255,255,255,0.14); }
.ledger-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem 1.2rem; flex-wrap: wrap;
  padding: 0.95rem 0; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ledger-row .lab { display: flex; align-items: baseline; gap: 0.8rem; font-size: 1rem; color: rgba(255,255,255,0.94); line-height: 1.4; }
.ledger-row .num { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; color: var(--cyan); letter-spacing: 0.02em; flex: none; }
.ledger-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); white-space: nowrap;
}
.ledger-badge svg { width: 15px; height: 15px; }
.ledger-foot { margin-top: 1.2rem; font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.55; }

/* ---------- Come si legge un preventivo: tre variabili ---------- */
.vars-sec { background: #fff; }
.vars-head { max-width: 44rem; }
.vars-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 1.1rem 0 1rem; }
.vars-head p { font-size: 1.06rem; color: var(--muted); line-height: 1.62; }
.vars-grid { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.var-shell {
  padding: 7px; border-radius: calc(var(--radius) + 7px);
  background: var(--paper); border: 1px solid var(--line);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.var-shell:hover { transform: translateY(-8px); box-shadow: 0 34px 70px -32px color-mix(in srgb, var(--navy) 42%, transparent); border-color: var(--line-strong); }
.var-card {
  height: 100%; border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff;
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.var-card .vn {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: var(--navy); background: color-mix(in srgb, var(--cyan) 26%, #fff);
  border: 1px solid var(--line); margin-bottom: 0.4rem;
}
.var-card h3 { font-size: 1.14rem; letter-spacing: -0.02em; }
.var-card p { font-size: 0.95rem; color: var(--muted); line-height: 1.55; }

/* ---------- Modulo ---------- */
.quote-sec { position: relative; background: linear-gradient(168deg, var(--navy) 0%, var(--navy-950) 100%); color: #fff; overflow: hidden; isolation: isolate; }
.quote-sec .strip-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(96px); pointer-events: none; width: 420px; height: 420px; background: color-mix(in srgb, var(--cyan) 50%, transparent); opacity: 0.24; top: -160px; right: -110px; }
.quote-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.quote-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 1.1rem 0 1rem; }
.quote-copy p { font-size: 1.05rem; color: rgba(255,255,255,0.84); line-height: 1.6; }
.quote-steps { margin-top: 1.8rem; display: grid; gap: 0.75rem; }
.qstep { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.97rem; color: rgba(255,255,255,0.84); line-height: 1.5; }
.qstep svg { width: 19px; height: 19px; color: var(--cyan); flex: none; margin-top: 0.2rem; }

/* ---------- Apertura al resto ---------- */
.bridge-sec { background: var(--paper); }
.bridge-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bridge-wrap h2 { font-size: clamp(1.8rem, 3.3vw, 2.5rem); margin: 1.1rem 0 1rem; }
.bridge-wrap p { font-size: 1.05rem; color: var(--muted); line-height: 1.62; }
.bridge-links { display: grid; gap: 0.9rem; }
.bridge-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.3rem; border-radius: 18px;
  background: #fff; border: 1px solid var(--line);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.bridge-link:hover { transform: translateX(4px); border-color: var(--line-strong); box-shadow: 0 22px 46px -30px color-mix(in srgb, var(--navy) 55%, transparent); }
.bridge-link strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; letter-spacing: -0.02em; color: var(--navy); }
.bridge-link span.sub { font-size: 0.9rem; color: var(--muted); }
.bridge-link .ico-pill { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: none; background: color-mix(in srgb, var(--cyan) 24%, #fff); color: var(--navy); transition: transform 0.45s var(--ease), background 0.35s var(--ease); }
.bridge-link:hover .ico-pill { transform: translate(3px, -1px); background: var(--cyan); }

/* ---------- Domande ---------- */
.faq-sec { background: #fff; }
.faq-wrap { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.faq-intro h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 1.1rem 0 1rem; }
.faq-intro p { font-size: 1.03rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.4rem; }
.faq-intro .link-quiet { color: var(--navy); }
.faq-sec .faq-item { background: var(--paper); }

/* ---------- Adattamento ---------- */
@media (max-width: 980px) {
  .hero { min-height: 0; padding-top: clamp(6.5rem, 20vw, 8rem); }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .hero-copy { max-width: none; }
  .hero h1 { max-width: 20ch; }
  .ledger-wrap, .vars-grid, .quote-grid, .bridge-wrap, .faq-wrap { grid-template-columns: 1fr; }
  .vars-grid { gap: 1rem; }
}