/* ========== CSS VARIABLES (Design System) ========== */
:root {
  /* Colors */
  --color-bg: #EBE9DB;
  /* crema */
  --color-bg-2: #EBE9DB;
  /* crema pi piena */
  --color-tint: #EBE9DB;
  /* sage tenue */
  --color-surface: #FFFFFF;
  /* card */
  --color-border: #CFC7B8;

  --color-text: #3A3530;
  --color-text-muted: #6B6258;

  --color-primary: #B8C0B7;
  /* verde principale */
  --color-primary-700: #A9B2A8;

  --color-accent: #B8C0B7;
  /* accento allineato ai bottoni */
  --color-accent-700: #A9B2A8;

  --color-star: #B89060;

  /* Typography */
  --font-heading: "ITC Avant Garde Gothic W02 Md", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Playfair Display", serif;

  /* Scale (mobile-first) */
  --fs-body: 1rem;
  /* 16px */
  --fs-h1: 2.2rem;
  /* ~35px */
  --fs-h2: 1.6rem;
  /* ~26px */
  --fs-h3: 1.15rem;
  /* ~18px */

  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* Spacing (8px grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;

  /* Radius */
  --radius-btn: 8px;
  --radius-card: 12px;

  /* Shadows */
  --shadow-card: 0 10px 24px rgba(0, 0, 0, 0.12);
  --shadow-btn: 0 10px 22px rgba(0, 0, 0, 0.18);

  /* Layout */
  --container: 1120px;
}

/* ========== BASE ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: url("/img/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

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

a {
  color: inherit;
}

.container {
  width: min(var(--container), calc(100% - 2 * var(--space-2)));
  margin-inline: auto;
}

/* Screen reader only */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  padding: 10px 12px;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  transform: translateY(-140%);
  transition: transform 150ms ease;
  z-index: 999;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Focus ring (WCAG base) */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 70%, white);
  outline-offset: 3px;
}

/* ========== HEADER / BRAND ========== */
.site-header .container {
  display: block;
}

.brand__name {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 1.35rem;
  color: var(--color-primary);
}

/* ========== NAV (MOBILE DRAWER DEFAULT) ========== */
/* Burger button */
.nav-toggle {
  --btn: 44px;
  width: var(--btn);
  height: var(--btn);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
  margin-left: auto;
  touch-action: manipulation;
  /* burger a destra */
}

.nav-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.nav-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 40%, white);
  outline-offset: 2px;
}

.nav-toggle__icon {
  width: 20px;
  height: 14px;
  display: inline-grid;
  gap: 4px;
}

.nav-toggle__icon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: var(--color-primary-700);
  transition: transform 0.22s ease, opacity 0.2s ease;
}

/* Overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 53, 48, 0.45);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer shell */
.site-nav {
  position: fixed;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: min(380px, calc(100vw - 28px));
  background: color-mix(in srgb, var(--color-surface) 92%, white);
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, white);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
  z-index: 260;

  transform: translateX(110%);
  opacity: 0;
  transition: transform 140ms ease, opacity 140ms ease;

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.site-nav[data-state="open"] {
  transform: translateX(0);
  opacity: 1;
}

/* Header dentro drawer */
.site-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 65%, white);
  background: linear-gradient(to bottom,
      color-mix(in srgb, var(--color-bg) 35%, white),
      var(--color-surface));
}

.site-nav__title {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--color-text);
}

.nav-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, white);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg));
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.nav-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
}

.nav-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 40%, white);
  outline-offset: 2px;
}

/* Links (drawer) */
.site-nav__links {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.site-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none;
  font-family: var(--font-heading);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, white);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
  font-weight: 700;
  touch-action: manipulation;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.site-nav__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
  background: var(--hover, color-mix(in srgb, var(--color-surface) 94%, var(--color-bg)));
}

.site-nav__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 40%, white);
  outline-offset: 2px;
}

/* login (drawer) */
.site-nav__link--login {
  margin-top: auto;
  justify-content: center;
}

.site-nav__link--login i {
  display: block;
  line-height: 1;
  margin: 0;
}

/* Burger morph */
body.nav-open .nav-toggle__icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

body.nav-open .nav-toggle__icon span:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle__icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ========== HERO ========== */
/* 1) Hero: niente immagine dietro al testo */
.hero {
  background: none;
  text-align: center;
  padding: var(--space-2) 0 var(--space-7);
}

.hero::before {
  content: "";
  display: block;

  height: clamp(220px, 30vw, 440px);
  margin: 0 auto var(--space-2);

  opacity: 0;
  transform: translateY(14px) scale(0.985);
  animation: heroBannerIn 700ms ease-out 120ms forwards;
  will-change: transform, opacity;

}

@keyframes heroBannerIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero__inner {
  max-width: 820px;
}

.hero__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: 0.2px;
}

.accent {
  color: var(--color-accent);
}

.hero__subtitle {
  margin: 0 auto var(--space-4);
  max-width: 640px;
  color: var(--color-text-muted);
  font-size: 1.02rem;
}

.hero__actions {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  font-weight: 700;
  min-height: 48px;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
  user-select: none;
  white-space: nowrap;
}

.btn__icon {
  display: inline-flex;
  align-items: center;
}

.btn--primary {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-btn);
  border: 1px solid transparent;
}

.btn--primary:hover {
  background: var(--color-primary-700);
  transform: translateY(-1px);
}

.btn--outline {
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  color: var(--color-primary-700);
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}

.btn--outline:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.btn--accent {
  background: var(--color-accent);
  color: white;
  border: 1px solid transparent;
  box-shadow: 0 10px 20px #00000026;
}

.btn--accent:hover {
  background: var(--color-accent-700);
  transform: translateY(-1px);
}

/* Definisci il ghost (ora non c, quindi pu risultare strano) */
.btn--ghost {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  padding: 14px 18px;
  color: var(--color-text);
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
  border-color: color-mix(in srgb, var(--color-border) 70%, white);
}

/* Wave divider
.wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 92px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23EFEADF' d='M0,64L48,74.7C96,85,192,107,288,101.3C384,96,480,64,576,64C672,64,768,96,864,101.3C960,107,1056,85,1152,80C1248,75,1344,85,1392,90.7L1440,96L1440,120L1392,120C1344,120,1248,120,1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z'/%3E%3C/svg%3E") center bottom / cover no-repeat;
}*/

/* ========== SECTIONS ========== */
.section {
  padding: var(--space-8) 0;
}

.section--how {
  background: var(--color-bg-2);
}

.section--agencies {
  background: transparent;
}

.section--guides {
  background: transparent;
  padding-top: var(--space-7);
}

.section-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  margin: 0 auto var(--space-4);
  max-width: 920px;
}

.section-title__text {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: 0.2px;
  text-align: center;
}

.section-title__line {
  height: 1px;
  background: var(--color-border);
  opacity: 0.9;
}

.section-hint {
  text-align: center;
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
}

.how-cards {
  align-items: stretch;
}

.how-card {
  height: 100%;
}

.how-card__body {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: clamp(24px, 3vw, 32px);
  text-align: center;
}

.how-card__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, white);
  color: var(--color-primary-700);
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.how-card__icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, white);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.how-card__title {
  max-width: 16ch;
  line-height: 1.25;
}


/* ========== STEPS ========== */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-2);
  align-items: center;
  position: relative;
}

.step__icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 86%, var(--color-bg-2));
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

.step__text {
  margin: 0;
  font-size: 1.03rem;
}

.step__n {
  color: var(--color-accent);
  font-weight: 800;
}

/* Desktop connector hint (dotted) will appear only in wide layout */
@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    align-items: start;
  }

  .step {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
  }

  .step__icon {
    width: 64px;
    height: 64px;
  }

  .step__text {
    max-width: 260px;
  }
}

/* ========== GRID + CARDS ========== */
.grid {
  display: grid;
  gap: var(--space-3);
}

.grid--3 {
  grid-template-columns: 1fr;
}

/* Cards */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, white);
}

.card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  height: 100%;
}

.card__media {
  background: color-mix(in srgb, var(--color-bg) 65%, var(--color-surface));
}

.card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card__body {
  padding: var(--space-3);
  text-align: center;
}

.card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
}

.card__meta {
  margin: 8px 0 10px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.card__footer {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, white);
}

/* Rating */
.rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 0;
}

.stars {
  color: var(--color-star);
  letter-spacing: 1px;
  font-size: 1.05rem;
}

/* Metric */
.metric__value {
  color: var(--color-accent);
  font-size: 1.05rem;
  font-weight: 800;
}

.metric__label {
  color: var(--color-text-muted);
}

/* Guides pager (decorativo, stile screenshot) */
.pager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-2);
}

.pager__active,
.pager__inactive {
  height: 6px;
  border-radius: 999px;
}

.pager__active {
  width: 56px;
  background: color-mix(in srgb, var(--color-primary) 70%, white);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.pager__inactive {
  width: 28px;
  background: color-mix(in srgb, var(--color-border) 70%, white);
  opacity: 0.9;
}

/* Hover micro-interactions */
.card:has(.card__link:hover) {
  transform: translateY(-1px);
  transition: transform 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}

/* CTA center */
.center {
  display: grid;
  place-items: center;
  margin-top: var(--space-4);
}

/* Footer */
.site-footer {
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(31, 38, 32, 0.12);
  background: #f3f1e8;
}

.footer__address,
.footer__copyright {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* In home il body cambia font: blocchiamo il font footer come nelle altre pagine */
body.is-home .footer__address,
body.is-home .footer__copyright {
  font-family: "Playfair Display", serif;
}

.footer__copyright {
  display: block;
  text-align: center;
  justify-self: center;
}

.footer__address {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0;
  text-align: left;
  justify-self: start;
}

/* ========== RESPONSIVE ========== */
@media (min-width: 600px) {
  :root {
    --fs-h1: 2.6rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.2rem;
  }

  .hero__actions {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: center;
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 2.75rem;
    /* ~44px */
    --fs-h2: 1.85rem;
    --fs-h3: 1.25rem;
  }

  .site-header {
    padding-top: var(--space-4);
  }

  .hero {
    padding-top: var(--space-6);
    padding-bottom: calc(var(--space-9) + 10px);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* =========================
   PAGES (add-on, non invasivo)
   ========================= */
.page {
  min-height: 60vh;
}

.page-hero {
  padding: clamp(24px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  background: var(--surface, transparent);
}

.page-hero--compact {
  padding: clamp(20px, 3vw, 40px) 0;
}

.page-hero__kicker {
  margin: 0 0 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  opacity: 0.75;
}

.page-hero__title {
  margin: 0 0 10px;
  line-height: 1.1;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.page-hero__subtitle {
  margin: 0;
  max-width: 60ch;
  opacity: 0.85;
}

.page-hero__micro,
.page-hero__filters-note {
  margin: 10px 0 0;
  font-size: 0.96rem;
  max-width: 70ch;
}

.page-hero__micro {
  opacity: 0.8;
}

.page-hero__filters-note {
  opacity: 0.9;
}

/* Small breathing room between hero and first content section
   on pages like agenzie/partner/news. */
.page > .page-hero + .section {
  margin-top: clamp(8px, 1.1vw, 14px);
}

.toolbar {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}

@media (min-width: 720px) {
  .toolbar {
    grid-template-columns: 1.3fr 1fr auto;
    align-items: end;
  }
}

.toolbar__group {
  display: grid;
  gap: 12px;
}

@media (min-width: 720px) {
  .toolbar__group {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.toolbar__group--actions {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.toolbar__group--actions .btn {
  position: relative;
  top: -8px;
  /* aumenta/diminuisci: -4 / -6 / -10 */
}

.toolbar--agencies .toolbar__group {
  grid-auto-flow: row;
}

.toolbar--agencies .toolbar__group--actions .btn {
  top: 0;
}

@media (min-width: 720px) {
  .toolbar--agencies {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 1fr) auto;
  }
}

@media (min-width: 720px) {
  .toolbar__group--actions {
    justify-content: flex-end;
  }
}

.field {
  display: grid;
  gap: 8px;
}

.field__label {
  font-weight: 600;
  font-size: 0.95rem;
}

.input,
.select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  background: var(--card, #fff);
  color: inherit;
  outline: none;
}

.input--textarea {
  resize: vertical;
}

.input:focus,
.select:focus {
  border-color: var(--focus, rgba(0, 0, 0, 0.35));
  box-shadow: 0 0 0 4px var(--focus-ring, rgba(0, 0, 0, 0.08));
}

.card-grid--3 {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Agency card */
.agency-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.10));
  background: var(--card, #fff);
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(0, 0, 0, 0.06));
}

.agency-card__media {
  aspect-ratio: 16 / 12;
  background: rgba(0, 0, 0, 0.04);
}

.agency-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agency-card__body {
  padding: 14px 14px 16px;
}

.agency-card__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.agency-card__title {
  margin: 0;
  font-size: 1.05rem;
}

.agency-card__rating {
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.9;
}

.agency-card__meta {
  margin: 6px 0 10px;
  opacity: 0.8;
}

.agency-card__desc {
  margin: 0 0 14px;
  opacity: 0.9;
}

.agency-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.agency-card__services {
  margin: 0 0 10px;
  font-size: 0.95rem;
  opacity: 0.88;
}

.agency-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.agency-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.82rem;
  opacity: 0.9;
}

.page-value__list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

/* Partner form + layout */
.split {
  display: grid;
  gap: 18px;
}

.form-shell {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.10));
  background: var(--card, #fff);
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(0, 0, 0, 0.06));
}

.form-shell__grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 720px) {
  .form-shell__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full {
    grid-column: 1 / -1;
  }
}

.form-shell__actions {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.form-shell__hint {
  margin: 0;
  opacity: 0.75;
  font-size: 0.95rem;
}

/* Article */
.article-meta {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0.85;
}

.article-meta__dot {
  opacity: 0.5;
}

.article-layout {
  display: grid;
  gap: 18px;
}

@media (min-width: 960px) {
  .article-layout {
    grid-template-columns: 1.6fr 0.9fr;
    align-items: start;
  }
}

.prose {
  line-height: 1.75;
}

.prose h2 {
  margin-top: 22px;
  line-height: 1.2;
}

.prose hr {
  margin: 22px 0;
  border: none;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.10));
}

.prose__footer {
  opacity: 0.9;
}

.callout {
  margin: 16px 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.10));
  background: rgba(0, 0, 0, 0.03);
}

.callout__title {
  margin: 0 0 6px;
}

.callout__text {
  margin: 0;
  opacity: 0.9;
}

.side-card {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.10));
  background: var(--card, #fff);
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(0, 0, 0, 0.06));
}

.side-card__title {
  margin: 0 0 10px;
}

.list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.mini-list {
  display: grid;
  gap: 10px;
}

.mini-list__item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.10));
  text-decoration: none;
  color: inherit;
}

.mini-list__item:hover {
  transform: translateY(-1px);
}

.mini-list__meta {
  opacity: 0.75;
  font-size: 0.95rem;
}

.pagination {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pagination__meta {
  opacity: 0.75;
}

.empty-state {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(0, 0, 0, 0.22);
  background: rgba(0, 0, 0, 0.02);
  opacity: 0.9;
}

/* =========================
   AUTH (Login / Register / Recovery)
   ========================= */
.auth-page {
  padding: var(--space-6) 0 var(--space-8);
}

.auth-shell {
  max-width: 520px;
  margin-inline: auto;
  padding: clamp(16px, 3.2vw, 22px);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, white);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}

.auth-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: var(--lh-tight);
  font-size: clamp(1.75rem, 3.2vw, 2.05rem);
}

.auth-subtitle {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: 1.02rem;
}

.form-row {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.label {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* help text */
.help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* inline row (remember + forgot) */
.row-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  user-select: none;
}

.checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.link {
  text-decoration: none;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
}

.link:hover {
  text-decoration: underline;
}

/* Primary button in auth */
.btn-primary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-weight: 800;
  font-family: var(--font-heading);
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-btn);
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.btn-primary:hover {
  background: var(--color-primary-700);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
}

/* footer under form */
.auth-footer {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--color-text-muted);
}

/* alerts */
.alert {
  margin: 0 0 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, white);
  background: color-mix(in srgb, var(--color-bg) 65%, white);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

.alert-success {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 10%, white);
}

/* =========================
   AUTH TABS (Privato / Azienda)
   ========================= */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 16px;
}

.auth-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, white);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.2px;
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.auth-tab:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}

.auth-tab.is-active {
  background: color-mix(in srgb, var(--color-primary) 10%, white);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
}

.auth-panel.is-hidden {
  display: none;
}

.auth-panel.is-active {
  display: block;
}


.site-header__inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (min-width: 960px) {
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ========== CONTACT PAGE ========== */
.contact-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}

.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.contact-title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.2;
}

.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  color: var(--color-text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(88, 112, 96, .18);
}

.contact-side {
  display: grid;
  gap: 16px;
}

@media (max-width: 767.98px) {
  .contact-card {
    padding: 14px;
    border-radius: 14px;
  }

  .contact-title {
    font-size: 18px;
  }

  .field {
    margin-bottom: 10px;
  }

  .field input,
  .field select,
  .field textarea {
    min-height: 44px;
    padding: 10px 11px;
  }

  .contact-list {
    padding-left: 16px;
  }
}

.field-hint {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.form-note {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* honeypot hidden */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-list {
  margin: 0;
  padding-left: 18px;
}

.muted {
  color: var(--color-text-muted);
}

/* ========== FOOTER SOCIAL ========== */
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  align-items: start;
  gap: 12px 24px;
}

.footer__address {
  justify-self: start;
}

.footer__copyright {
  justify-self: center;
  margin: 0;
}

.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: start;
  justify-self: end;
  margin-top: 0;
}

@media (min-width: 761px) {
  .footer__links {
    transform: translateX(80px);
  }
}

.footer__links-title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.footer__utility-link {
  font-family: "Playfair Display", serif;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}

.footer__utility-link:hover {
  color: var(--color-text);
  border-bottom-color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
}

.footer__utility-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 35%, white);
  outline-offset: 2px;
  border-radius: 4px;
}

.footer__utility-link[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  align-self: center;
}

.social-link {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.social-link:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, .18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.social-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(88, 112, 96, .18);
  border-color: var(--color-primary);
}

.social-ico {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 8px;
}

.footer__legal .iubenda-embed {
  margin: 0 !important;
}

/* Mobile: stack ordinato */
@media (max-width: 760px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .footer__address,
  .footer__copyright,
  .footer__links,
  .footer__social {
    justify-self: start;
  }
}

/* HERO pi vicino allheader (anche desktop) */
.hero {
  padding-top: 0;
  padding-bottom: var(--space-6);
}

@media (min-width: 1024px) {
  .hero::before {
    padding-top: 0;
    padding-bottom: var(--space-6);
    height: clamp(260px, 28vw, 520px);
  }
}

/* Sezioni: meno respiro verticale */
.section {
  padding: var(--space-6) 0;
  /* invece di --space-8 */
}

/* Titoli sezione: meno spazio sotto */
.section-title {
  margin-bottom: var(--space-3);
}

/* Riduci lo spazio SOLO tra "Trova agenzia" e "Come funziona" */
.section--search {
  padding-bottom: var(--space-3);
  /* era --space-6 */
}

.section--how {
  padding-top: var(--space-3);
  /* era --space-6 */
}

/* =========================
   HOME: HEADER TRASPARENTE (solo index)
   ========================= */

/* Scroll behavior (come backup): logo + CTA salgono quando scorre */
.brand__mark img {
  height: 68px !important;
  width: auto !important;
  display: block;
  transition: transform .42s cubic-bezier(0.4, 0, 0.2, 1), opacity .36s ease;
}

.header-cta {
  transition: transform .42s cubic-bezier(0.4, 0, 0.2, 1), opacity .36s ease;
}

.site-header.is-scrolled .brand__mark img {
  transform: translateY(-240%);
  opacity: 0;
}

.site-header.is-scrolled .header-cta {
  transform: translateY(-240%);
  opacity: 0;
  pointer-events: none;
}

/* Mobile: rendi il burger pi glass sopra al video */
body.is-home .nav-toggle {
  background: color-mix(in srgb, var(--color-surface) 65%, transparent);
  border-color: color-mix(in srgb, var(--color-border) 55%, transparent);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
}



/* 
   HEADER  login nella nav pill + layout corretto
    */

/* Separatore verticale dentro la pill */
.site-nav__sep {
  display: none; /* mobile: nascosto */
}

/* Icona login dentro .site-nav__links  nascosta su mobile, visibile solo su desktop */
.site-nav__links .site-nav__link--login {
  display: none;
}

/* Il drawer-bottom (mobile: mostra "Accedi" in fondo) */
.site-nav__drawer-bottom {
  padding: 14px 20px 22px;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, white);
  margin-top: auto;
}

/* header-right rimosso, il CTA sta gi fuori dalla nav */
.header-right { display: none; }

@media (min-width: 960px) {

  /*  Layout dell'inner: logo | nav-pill | cta  */
  .site-header__inner {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  /* Nascondi il drawer-bottom su desktop */
  .site-nav__drawer-bottom {
    display: none;
  }

  /* Separatore verticale dentro la pill */
  .site-nav__sep {
    display: block;
    width: 1px;
    height: 18px;
    background: color-mix(in srgb, var(--color-border) 80%, white);
    margin: 0 2px;
    flex-shrink: 0;
  }

  /* Icona login dentro la pill: piccola, solo icona, nessun testo */
  .site-nav__link--login {
    padding: 6px 8px;
    display: inline-grid !important;
    place-items: center;
    width: auto;
    height: auto;
    background: transparent;
    margin-top: 0;
  }

  .site-nav__link--login svg {
    display: block;
    width: 17px;
    height: 17px;
  }

  .site-nav__link--login:hover {
    background: rgba(0,0,0,.07);
    transform: none;
  }

  /* Mostra "Contattaci" nel burger mobile, non nella pill desktop */
  .site-nav__links .site-nav__link--mobile-only {
    display: none !important;
  }

  /* CTA: margine sx automatico non serve pi, il justify-content: space-between basta */
  .header-cta {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* 
   SEZIONE VALUTAZIONE HOME
    */
.section--valutazione {
  background: var(--color-bg-2);
}
.val-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .val-layout { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
}
.val-lead { font-size: 1.05rem; line-height: var(--lh-normal); margin: 0 0 var(--space-3); }
.val-steps { margin-bottom: var(--space-3); }
@media (min-width: 1024px) {
  .val-steps { grid-template-columns: 1fr; }
  .val-steps .step { grid-template-columns: 56px 1fr; justify-items: start; text-align: left; padding: 0; }
}
.val-garanzia { display:flex; gap:var(--space-2); align-items:flex-start; padding:var(--space-2) var(--space-3); border-radius:var(--radius-card); background:color-mix(in srgb,var(--color-primary) 8%,var(--color-surface)); border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--color-border)); margin-bottom:var(--space-3); }
.val-garanzia__icon { font-size:1.4rem; flex-shrink:0; margin-top:2px; }
.val-garanzia strong { display:block; font-family:var(--font-heading); font-size:.92rem; margin-bottom:3px; }
.val-garanzia span { font-size:.88rem; color:var(--color-text-muted); line-height:1.5; }
.val-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.val-card { box-shadow:0 22px 55px rgba(0,0,0,.14); }
.val-card__header { padding:12px var(--space-3); background:var(--color-primary); border-radius:var(--radius-card) var(--radius-card) 0 0; }
.val-card__badge { font-family:var(--font-heading); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.val-card__body { padding:var(--space-3); text-align:left; }
.val-card__immobile { display:flex; align-items:center; gap:var(--space-2); padding-bottom:var(--space-2); border-bottom:1px solid color-mix(in srgb,var(--color-border) 60%,white); margin-bottom:var(--space-2); }
.val-card__proposte-count { font-size:.78rem; font-weight:700; color:var(--color-primary); font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px; }
.val-card__proposta { background:color-mix(in srgb,var(--color-primary) 6%,var(--color-surface)); border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-border)); border-radius:var(--radius-card); padding:var(--space-2); }
.val-card__agenzia-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.val-card__avatar { width:38px; height:38px; border-radius:12px; background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface)); border:1px solid color-mix(in srgb,var(--color-border) 60%,white); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.val-card__agenzia-nome { display:block; font-family:var(--font-heading); font-size:.9rem; font-weight:700; margin-bottom:2px; }
.val-card__valutatore { font-size:.75rem; color:var(--color-text-muted); }
.val-card__nums { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-2); margin-bottom:10px; }
.val-card__num-label { display:block; font-size:.68rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-bottom:2px; }
.val-card__num-val { display:block; font-family:var(--font-heading); font-size:.9rem; font-weight:800; color:var(--color-primary); }
.val-card__nota { font-size:.82rem; color:var(--color-text-muted); font-style:italic; line-height:1.5; margin:0; padding:8px 12px; border-left:3px solid var(--color-primary); background:color-mix(in srgb,var(--color-primary) 5%,transparent); border-radius:0 8px 8px 0; }
@media (max-width:560px) {
  .val-card__nums { grid-template-columns:1fr 1fr; }
  .val-actions { flex-direction:column; }
  .val-actions .btn { width:100%; justify-content:center; }
}

/* =================================================================
   MERGED: sections.css
   ================================================================= */
/* =================================================================
   TrustHome  sections.css
   Struttura sezioni ispirata a bbang.it:
   - Padding generoso direttamente sulla <section> (9rem 3.75rem)
   - Sfondo a tutta larghezza, nessun wrapper che "taglia" il colore
   - Kicker label skewato sopra ogni sezione
   - Inner max-width per il contenuto
   ================================================================= */

/*  1. VARIABILI SEZIONE  */
:root {
  --bb-pad-v:     9rem;
  --bb-pad-h:     3.75rem;
  --bb-inner-max: 1320px;
  --bb-gap:       4rem;
}

/*  2. RESET DELLE VECCHIE SECTION  */
/* Azzera il padding del vecchio .section, ora ci pensa .bb-section */
.section {
  padding: 0 !important;
  background: none !important;
}

/*  3. BLOCCO SEZIONE FULL-WIDTH  */
.bb-section {
  width: 100%;
  padding: var(--bb-pad-v) var(--bb-pad-h);
  position: relative;
  overflow: hidden;          /* contiene i numeri decorativi */
}

/*  4. SFONDI  */
.bb-section--cream  { background: var(--color-bg, #EBE9DB); }
.bb-section--white  { background: #ffffff; }
.bb-section--sage   { background: color-mix(in srgb, var(--color-primary, #587060) 9%, var(--color-bg, #EBE9DB)); }
.bb-section--dark   {
  background: #3A3530;
  color: #f5f1e9;
}

/* Testo adattivo su dark */
.bb-section--dark .bb-kicker            { color: color-mix(in srgb, var(--color-primary,#587060) 55%, #fff); }
.bb-section--dark .bb-statement         { color: #f5f1e9; }
.bb-section--dark .section-title__text  { color: #f5f1e9; }
.bb-section--dark .section-title__line  { background: rgba(255,255,255,.2); }
.bb-section--dark .val-lead             { color: rgba(255,255,255,.82); }
.bb-section--dark .step__text           { color: rgba(255,255,255,.78); }
.bb-section--dark .val-garanzia         { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.05); }
.bb-section--dark .card                 { background: #EBE9DB; border-color: rgba(255,255,255,.12); }

.section--valutazione .bb-section--dark {
  background: #EBE9DB;
  color: #3A3530;
}

.section--valutazione .bb-section--dark .bb-statement,
.section--valutazione .bb-section--dark .val-lead,
.section--valutazione .bb-section--dark .step__text,
.section--valutazione .bb-section--dark .section-title__text {
  color: #3A3530;
}

.section--valutazione .bb-section--dark .section-title__line {
  background: rgba(58, 53, 48, .18);
}

.section--valutazione .bb-section--dark .val-garanzia {
  background: rgba(88, 112, 96, .08);
  border-color: rgba(58, 53, 48, .12);
}

/*  5. INNER WRAPPER (sostituisce .container nelle sezioni)  */
.bb-inner {
  max-width: var(--bb-inner-max);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/*  6. KICKER LABEL (tag piccolo skewato  esatto bbang) 
   Corrisponde al "who" / "what" di bbang:
   font-size piccolo, uppercase, font-weight 900, rotate+skewX -5deg
    */
.bb-kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(.9rem, 1.2vw, 1.25rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1.2;
  color: var(--color-primary, #587060);
  transform: rotate(-5deg) skewX(-5deg);
  transform-origin: left center;
  margin-bottom: 2rem;
}

/*  7. STATEMENT  heading grande, lo "statement" di bbang 
   Corrisponde alle h2 di bbang: font grande, weight normale, testo
   lungo che "vende" la sezione in una frase.
    */
.bb-statement {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--color-text, #3A3530);
  margin: 0 0 var(--bb-gap);
  max-width: 860px;
}

/* Statement su sfondo scuro */
.bb-section--dark .bb-statement { color: #f5f1e9; }

/*  8. NUMERO DECORATIVO DI SFONDO (numeri in outline) 
   Come le sezioni di riferimento: numero gigante trasparente
   in basso a destra, fuori dal flow
    */
.bb-bg-num {
  position: absolute;
  bottom: -0.1em;
  right: clamp(1rem, 3vw, 3.75rem);
  font-family: var(--font-heading);
  font-size: clamp(8rem, 18vw, 22rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, currentColor 10%, transparent);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: .7;
}

/*  9. GRIGLIA 3 COLONNE 
   Gi definita in styles.css come .grid.grid--3,
   qui aggiungiamo solo il gap specifico per le bb-section
    */
.bb-section .grid--3 {
  --grid-gap: clamp(1.25rem, 2.5vw, 2rem);
}

/*  10. CTA CENTRATO  */
.bb-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 4vw, 4rem);
}

/*  11. DIVISORE TRA SEZIONI  */
.bb-section + .bb-section {
  border-top: 1px solid color-mix(in srgb, var(--color-border,#D6D0BE) 40%, transparent);
}
/* Nessun divisore quando si passa al dark */
.bb-section--dark,
.bb-section + .bb-section--dark {
  border-top: none;
}

/*  12. HERO  spazio per header fisso  */
body.is-home main      { padding-top: 0; }
body:not(.is-home) main{ padding-top: 80px; }

/*  13. RESPONSIVE  */
@media (max-width: 1100px) {
  :root { --bb-pad-h: 2.5rem; }
}
@media (max-width: 767px) {
  :root {
    --bb-pad-v: 5rem;
    --bb-pad-h: 1.25rem;
  }
  .bb-kicker      { font-size: .8rem; }
  .bb-statement   { font-size: clamp(1.7rem, 6vw, 2.4rem); margin-bottom: 2.5rem; }
  .bb-bg-num      { font-size: clamp(5rem, 22vw, 9rem); }
}
@media (max-width: 480px) {
  :root { --bb-pad-v: 4rem; --bb-pad-h: 1rem; }
}


/* 
   15. SECTION CARD CONTAINERS
   Le sezioni appaiono come card distinte su sfondo crema,
   con bordi arrotondati, ombra leggera e margine verticale.
   Ispirato al pattern bbang "box-width" con contenuto che
   sembra stare dentro un contenitore visibile.
    */

/* Sfondo pagina globale */
body {
  background-color: var(--color-bg, #EBE9DB) !important;
  background-image: url("/img/background.jpg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
html { overflow-x: hidden; }

/* Wrapper esterno: aggiunge margine laterale per far "staccare" le card.
   width: auto  essenziale per evitare overflow: width:100% + margin = > 100vw */
.bb-section {
  width: auto;
  margin: 0 clamp(12px, 2.5vw, 40px);
  border-radius: 20px;
  overflow: hidden;
}

/* Prima sezione: piccolo gap dal hero, angoli pieni (hero  sharp full-bleed) */
.section:first-of-type .bb-section,
.section--search .bb-section {
  margin-top: clamp(8px, 1.2vw, 16px);
  border-radius: 20px;
}

/* Ultima sezione: nessun margine bottom */
.section:last-of-type .bb-section {
  margin-bottom: 0;
  border-radius: 20px 20px 0 0;
}

/* Separatore tra sezioni: spazio visibile tra card */
.section + .section {
  margin-top: clamp(8px, 1.2vw, 16px);
}

/* Rimuovi il border-top che avevo messo prima */
.bb-section + .bb-section { border-top: none; }

/* Ombre card per ogni variante sfondo */
.bb-section--white {
  box-shadow: 0 4px 32px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
}
.bb-section--cream {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 16px rgba(0,0,0,.04);
}
.bb-section--sage {
  box-shadow: 0 4px 24px rgba(88,112,96,.12), 0 1px 4px rgba(88,112,96,.06);
}
.bb-section--dark {
  box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
}

/* Hero: full bleed, nessun bordo arrotondato   un elemento separato */
.hero--video {
  border-radius: 0;
  /* overflow: hidden gestito da animations.css */
}

@media (max-width: 767px) {
  .bb-section {
    margin: 0 8px;
    border-radius: 16px;
  }
  .section + .section { margin-top: 8px; }
  .hero--video { border-radius: 0 0 16px 16px; }
  .trust-grid { grid-template-columns: 1fr; }
  .esempio-layout { grid-template-columns: 1fr; }
}

/* 
   16. PAGINE NON-HOME  header leggibile su sfondo chiaro
   Su home il header  trasparente sopra il video (testo bianco ok).
   Su tutte le altre pagine (mappa, agenzie, guida) lo sfondo 
   crema chiaro  bisogna dare al header uno sfondo frosted e
   cambiare i link in scuro.
    */

/* Legacy non-home header override removed:
   use shared header behavior (same as index). */


/* 
   17. CARD MEDIA  placeholder elegante quando l'immagine manca
    */

/* Placeholder gradiente + decorazione geometrica */
.card__media {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 40%, color-mix(in srgb, var(--color-primary, #587060) 14%, var(--color-surface, #fff)) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 65%, color-mix(in srgb, var(--color-accent, #803840) 9%, var(--color-surface, #fff)) 0%, transparent 55%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-primary, #587060) 6%, var(--color-surface, #fff)),
      color-mix(in srgb, var(--color-accent, #803840) 4%, var(--color-surface, #fff))
    );
}

/* L'img mantiene l'aspect-ratio e copre il placeholder */
.card__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Quando fallisce, img collassa a 0px se non c' alt.
     Con aspect-ratio il browser riserva lo spazio corretto. */
}

/* Hover lift  pi pronunciato */
.card {
  transition: transform 180ms cubic-bezier(.16,1,.3,1), box-shadow 180ms ease;
}
.card:has(.card__link:hover),
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.07);
}

/* Agency card: sfondo media un po' pi colorato */
.card.agency .card__media {
  background:
    radial-gradient(ellipse at 25% 35%, color-mix(in srgb, var(--color-primary, #587060) 18%, #fff) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, color-mix(in srgb, var(--color-star, #B89060) 12%, #fff) 0%, transparent 50%),
    color-mix(in srgb, var(--color-primary, #587060) 5%, #fff);
}

/* Guide card: sfondo media caldo */
.card.guide .card__media {
  background:
    radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--color-accent, #803840) 12%, #fff) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 70%, color-mix(in srgb, var(--color-star, #B89060) 14%, #fff) 0%, transparent 50%),
    color-mix(in srgb, var(--color-accent, #803840) 4%, #fff);
}


/* 
   18. BLOCCO 2  TRUST GRID (grande sx + 2 piccoli dx)
    */

.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.trust-big {
  background: color-mix(in srgb, var(--color-primary, #B8C0B7) 8%, var(--color-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--color-border, #CFC7B8) 40%, transparent);
  border-radius: var(--radius-card, 12px);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trust-big__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text, #3A3530);
  margin: 0 0 var(--space-3, 24px);
}

.trust-big__text {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: var(--color-text-muted, #6B6258);
}

.trust-big__text p {
  margin: 0 0 1em;
}

.trust-big__text p:last-child {
  margin-bottom: 0;
}

.trust-side {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.trust-card {
  flex: 1;
  background: var(--color-surface, #fff);
  border: 1px solid color-mix(in srgb, var(--color-border, #CFC7B8) 50%, transparent);
  border-radius: var(--radius-card, 12px);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trust-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  color: var(--color-text, #3A3530);
  margin: 0 0 var(--space-1, 8px);
}

.trust-card__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted, #6B6258);
  margin: 0;
}

.trust-bottom {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 600;
  color: var(--color-text, #3A3530);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--color-border, #CFC7B8) 35%, transparent);
}

/* 
   19. BLOCCO 3  HOW CARD DESC (testo sotto il titolo card)
    */

.how-card__desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted, #6B6258);
  margin: var(--space-1, 8px) 0 0;
}


/* 
   20. BLOCCO 4  COSA RICEVI (griglia 2x2)
    */

.bb-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--color-text-muted, #6B6258);
  margin: -1.5rem 0 var(--bb-gap, 4rem);
  max-width: 680px;
}

.grid--2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.ricevi-box {
  background: color-mix(in srgb, var(--color-primary, #B8C0B7) 6%, var(--color-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--color-border, #CFC7B8) 40%, transparent);
  border-radius: var(--radius-card, 12px);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.ricevi-box__title {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 700;
  color: var(--color-text, #3A3530);
  margin: 0 0 var(--space-1, 8px);
}

.ricevi-box__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted, #6B6258);
  margin: 0;
}

.ricevi-nota {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted, #6B6258);
  margin-top: clamp(2rem, 3vw, 3rem);
  font-style: italic;
}

@media (max-width: 600px) {
  .grid--2 {
    grid-template-columns: 1fr;
  }
  .perche-punti {
    grid-template-columns: 1fr;
  }
}

/* 
   21. BLOCCO 5  ESEMPIO REALE (testo sx + mockup dx)
    */

.esempio-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.esempio-text__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text, #3A3530);
  margin: 0 0 var(--space-3, 24px);
}

.esempio-text__lead {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: var(--color-text-muted, #6B6258);
  margin: 0 0 1em;
}

.esempio-mockup {
  display: flex;
  justify-content: center;
}

.esempio-mockup .val-card {
  width: 100%;
  max-width: 400px;
}

/* 
   22. BLOCCO 6  PERCH TRUST HOME (testo + 4 punti)
    */

.perche-lead {
  max-width: 780px;
  margin-bottom: var(--bb-gap, 4rem);
}

.perche-lead p {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: var(--color-text-muted, #6B6258);
  margin: 0 0 1em;
}

.perche-lead p:last-child {
  margin-bottom: 0;
}

.th-compare {
  border: 1px solid color-mix(in srgb, var(--color-border, #CFC7B8) 50%, transparent);
  border-radius: var(--radius-card, 12px);
  background: color-mix(in srgb, var(--color-primary, #B8C0B7) 8%, var(--color-surface, #fff));
  overflow: auto;
}

.th-compare__table {
  width: 100%;
  min-width: 380px;
  border-collapse: collapse;
}

.th-compare__table thead th {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6B6258);
  background: color-mix(in srgb, var(--color-primary, #B8C0B7) 14%, #fff);
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border, #CFC7B8) 55%, transparent);
  white-space: nowrap;
}

.th-compare__table thead th:first-child {
  text-align: left;
  width: 56%;
}

.th-compare__table thead th:not(:first-child),
.th-compare__table tbody td {
  text-align: center;
}

.th-compare__table tbody th,
.th-compare__table tbody td {
  padding: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border, #CFC7B8) 42%, transparent);
}

.th-compare__table tbody tr:last-child th,
.th-compare__table tbody tr:last-child td {
  border-bottom: 0;
}

.th-compare__table tbody th {
  text-align: left;
  font-family: var(--font-heading);
  font-size: clamp(0.93rem, 1.1vw, 1rem);
  color: var(--color-text, #3A3530);
  font-weight: 600;
}

.th-compare__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.th-compare__badge--yes {
  background: color-mix(in srgb, var(--color-primary, #B8C0B7) 22%, #fff);
  color: #314236;
}

.th-compare__badge--no {
  background: color-mix(in srgb, #d4cbbd 58%, #fff);
  color: #6b4f37;
}

.th-posiz-table {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

.th-posiz-table__col {
  border-radius: var(--radius-card, 12px);
  border: 1px solid color-mix(in srgb, var(--color-border, #CFC7B8) 50%, transparent);
  background: color-mix(in srgb, var(--color-primary, #B8C0B7) 8%, var(--color-surface, #fff));
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  text-align: left;
}

.th-posiz-table__col--right {
  background: color-mix(in srgb, var(--color-primary, #B8C0B7) 16%, var(--color-surface, #fff));
}

.th-posiz-table__kicker {
  margin: 0 0 0.65rem;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6B6258);
}

.th-posiz-table__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.45;
  color: var(--color-text, #3A3530);
}

.perche-punti {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.perche-punto {
  display: flex;
  align-items: center;
  gap: var(--space-2, 16px);
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 600;
  color: var(--color-text, #3A3530);
  background: color-mix(in srgb, var(--color-primary, #B8C0B7) 10%, var(--color-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--color-border, #CFC7B8) 35%, transparent);
  border-radius: var(--radius-card, 12px);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.perche-punto__icon {
  color: var(--color-primary-700, #A9B2A8);
  font-size: 1.3rem;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .th-posiz-table {
    grid-template-columns: 1fr;
  }
}

/* 
   23. BLOCCO 7  POSIZIONAMENTO (testo centrato su dark)
    */

.posiz-text {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  max-width: 720px;
  margin: 0 auto;
}


/* 
   24. BLOCCO 8  CTA FINALE
    */

.cta-finale__sub {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--color-text-muted, #6B6258);
  max-width: 560px;
  margin: -1rem auto clamp(2rem, 3vw, 3rem);
}

/* =================================================================
   MERGED: animations.css
   ================================================================= */
/* ================================================================
   TRUSTHOME  Animazioni ispirate a bbang.it
   Fonte: HAR bbang.it  fadeInDown, fadeInUp, fadeIn, zoomIn,
   e-animation-grow, motion-fx, animated-headline, hover-skew
   ================================================================ */

/* ---- 1. KEYFRAMES (estratti da bbang.it Elementor) ------------ */

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -40px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale3d(0.88, 0.88, 1); }
  50%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* Linea decorativa che si "disegna" (section-title__line) */
@keyframes lineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Pulse leggero sui numeri-step */
@keyframes stepPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

/* Testo che cicla nell'hero (ispirato a elementor animated-headline) */
@keyframes wordIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wordOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}


/* ---- 2. CLASSI UTILITY SCROLL-REVEAL -------------------------- */
/* Lo stato iniziale: gli elementi sono invisibili finch JS non aggiunge .is-visible */

.reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--up    { transform: translateY(40px); }
.reveal--down  { transform: translateY(-40px); }
.reveal--zoom  { transform: scale(0.92); }
.reveal--left  { transform: translateX(-40px); }
.reveal--right { transform: translateX(40px); }

/* Quando in viewport  animato */
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger: i figli .reveal dentro un container .stagger-group si animano in sequenza */
.stagger-group .reveal:nth-child(1) { transition-delay: 0ms;   }
.stagger-group .reveal:nth-child(2) { transition-delay: 90ms;  }
.stagger-group .reveal:nth-child(3) { transition-delay: 180ms; }
.stagger-group .reveal:nth-child(4) { transition-delay: 270ms; }
.stagger-group .reveal:nth-child(5) { transition-delay: 360ms; }


/* ---- 3. HERO TITLE STAGGER ------------------------------------ */
/* Il titolo hero entra pezzo per pezzo (fadeInDown come bbang) */

.hero__title {
  opacity: 0;
  animation: fadeInDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.hero__subtitle {
  opacity: 0;
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.hero__actions {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.55s forwards;
}


/* ---- 4. ANIMATED HEADLINE (hero) ------------------------------ */
/* Parola che cicla dinamicamente via JS, stile bbang "Expanding ideas" */

.hero__animated-word {
  display: inline-block;
  color: var(--color-accent);
  position: relative;
  min-width: 2ch;        /* evita layout shift */
  vertical-align: baseline;
}

.hero__animated-word.word-enter {
  animation: wordIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero__animated-word.word-exit {
  animation: wordOut 0.35s ease-in forwards;
}


/* ---- 5. SECTION TITLE LINE-DRAW ------------------------------- */
/* Le due linee decorative si "disegnano" all'ingresso */

.section-title__line {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-title__line:last-child {
  transform-origin: right center;
}

.section-title.is-visible .section-title__line {
  transform: scaleX(1);
}

/* Il testo del titolo fa fadeIn */
.section-title__text {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease 0.2s, transform 0.55s ease 0.2s;
}

.section-title.is-visible .section-title__text {
  opacity: 1;
  transform: none;
}


/* ---- 6. CARD GROW (e-animation-grow) -------------------------- */
/* Scale 1.1 su hover: copiato 1:1 da bbang.it */

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.035);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

/* Il link interno non deve avere doppio effetto */
.card .card__link {
  transition: none;
}


/* ---- 7. BUTTON HOVER SKEW (da bbang.it post-54.css) ----------- */
/* Su hover: rotateZ(-5deg) + skewX(-5deg) + translateY(10px)
   Estratto da:
   .elementor-element > .elementor-widget-container:hover {
     --e-transform-rotateZ: -5deg; --e-transform-skewX: -5deg;
     --e-transform-translateY: 10px; }
   Adattato ai bottoni TrustHome */

.btn {
  transform-origin: left center;           /* stessa origin bbang */
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s ease,
              background-color 0.18s ease,
              border-color 0.18s ease,
              color 0.18s ease;
}

.btn:hover {
  transform: rotate(-3deg) skewX(-4deg) translateY(4px);
}

/* Ripristina per i bottoni "ghost" (reset, pi sobrio) */
.btn--ghost:hover {
  transform: none;
}

/* Il bottone icona ruota leggermente per seguire la prospettiva */
.btn:hover .btn__icon svg {
  transform: rotate(3deg) skewX(4deg);
  transition: transform 0.22s ease;
}


/* ---- 8. STEP ICON HOVER --------------------------------------- */
/* Mini pulse sull'icona step quando la card  in-viewport */

.step.is-visible .step__icon {
  animation: stepPulse 0.8s ease 0.6s 1;
}




/* ---- 11. REDUCE MOTION (accessibilit) ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .section-title__line,
  .section-title__text,
  .card,
  .btn,
  .site-nav__link,
  .site-header {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}




/* ================================================================
   HERO VIDEO  stile bbang.it
   Video fullscreen con overlay + testo centrato + animated word
   ================================================================ */

/* ---- Reset vecchio hero con ::before immagine ---------------- */
.hero--video {
  /* Annulla tutti i vecchi stili del hero con immagine */
  background: none !important;
  margin-top: 0 !important;
  padding: 0 !important;
  text-align: center;
  position: relative;
  min-height: 100svh;          /* full viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Rimuove il pseudo-elemento ::before che caricava hero1.png */
.hero--video::before {
  display: none !important;
  content: none !important;
}


/* ---- Wrapper video (posizionato assoluto dietro al testo) ---- */
.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* riempie esattamente come background-size:cover */
  object-position: center;
  display: block;
  /* Leggerissimo scale per eliminare bordi durante il loop */
  transform: scale(1.02);
}

/* ---- Overlay sfumato (leggibilit testo) -------------------- */
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Gradiente verticale: pi scuro in basso dove c' il testo,
     trasparente in alto, con velo uniforme per proteggere il testo */
  background:
    linear-gradient(
      to bottom,
      rgba(30, 20, 15, 0.22) 0%,
      rgba(30, 20, 15, 0.55) 55%,
      rgba(30, 20, 15, 0.75) 100%
    );
  /* Sfumatura radiale aggiuntiva per "vignettatura" laterale */
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%),
    linear-gradient(to bottom, rgba(20,14,10,0.18) 0%, rgba(20,14,10,0.65) 60%, rgba(20,14,10,0.80) 100%);
}


/* ---- Contenuto hero (sopra il video) ------------------------ */
.hero--video .hero__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(60px, 10vh, 120px);
}

/* Kicker  la scritta piccola sopra il titolo (come bbang "who / what") */
.hero__kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin: 0 0 var(--space-2);
  opacity: 0;
  animation: fadeInDown 0.6s ease 0.1s forwards;
}

/* ---- Titolo principale -------------------------------------- */
.hero--video .hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 var(--space-3);

  /* Sovrascrivi animazione base (gi definita sopra, ma qui la ritardiamo) */
  opacity: 0;
  animation: fadeInDown 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

/* ---- Parola animata ----------------------------------------- */
.hero--video .hero__animated-word {
  display: inline;
  color: var(--color-accent);
  /* Sottolineatura animata che segue il testo anche su piu righe */
  background-image: linear-gradient(
    color-mix(in srgb, var(--color-accent) 86%, #fff 14%),
    color-mix(in srgb, var(--color-accent) 86%, #fff 14%)
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  transition: background-size 0.32s ease;
  padding-bottom: 0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Ingresso/uscita linea in sync con il cambio parole */
.hero--video .hero__animated-word.word-enter {
  background-size: 100% 3px;
}

.hero--video .hero__animated-word.word-exit {
  background-size: 0 3px;
}

.hero--video .hero__animated-word.is-typewriter {
  background-image: none;
  padding-bottom: 0.02em;
}

.hero--video .hero__animated-word.is-typewriter::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 0.08em;
  background: color-mix(in srgb, var(--color-accent) 90%, #fff 10%);
  vertical-align: -0.08em;
  animation: typeCaretBlink 0.9s steps(1, end) infinite;
}

@keyframes typeCaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Disattiva la vecchia pseudo-linea (causava riga lunga su testi a capo) */
.hero--video .hero__animated-word::after {
  content: none;
}

.hero--video .hero__animated-word.word-enter::after,
.hero--video .hero__animated-word.word-exit::after {
  content: none;
}

/* ---- Sottotitolo -------------------------------------------- */
.hero--video .hero__subtitle {
  color: rgba(255, 255, 255, 0.80);
  font-size: clamp(1rem, 2vw, 1.18rem);
  max-width: 560px;
  margin: 0 auto var(--space-5);
  line-height: 1.65;

  opacity: 0;
  animation: fadeInUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

/* ---- Bottoni hero ------------------------------------------- */
.hero--video .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;

  opacity: 0;
  animation: fadeIn 0.55s ease 0.65s forwards;
}

/* Bottone primario hero: bianco pieno */
.btn--hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: #ffffff;
  color: var(--color-accent);
  border: 2px solid transparent;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.22s ease,
              background-color 0.18s ease;
  transform-origin: left center;
  white-space: nowrap;
  min-height: 52px;
}

.btn--hero-primary:hover {
  transform: rotate(-3deg) skewX(-4deg) translateY(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  background: var(--color-accent);
  color: #ffffff;
}

/* Bottone outline hero: bordo bianco trasparente */
.btn--hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  border: 2px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1),
              background-color 0.18s ease,
              border-color 0.18s ease;
  transform-origin: left center;
  white-space: nowrap;
  min-height: 52px;
}

.btn--hero-outline:hover {
  transform: rotate(-3deg) skewX(-4deg) translateY(4px);
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.9);
}

/* ---- Scroll hint (freccia + linea animata) ------------------- */
.hero__scroll-hint {
  position: absolute;
  bottom: clamp(20px, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeIn 0.6s ease 1.2s forwards;
}

.hero__scroll-line {
  display: block;
  width: 1.5px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0));
  border-radius: 999px;
  animation: scrollLinePulse 1.8s ease-in-out 1.4s infinite;
}

@keyframes scrollLinePulse {
  0%, 100% { opacity: 0.7; transform: scaleY(1); }
  50%       { opacity: 0.3; transform: scaleY(0.6); }
}

.hero__scroll-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}


/* ---- Reduced motion: video fermo, scroll hint off ----------- */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    animation: none !important;
  }
  .hero__scroll-line {
    animation: none !important;
  }
  .hero__kicker,
  .hero--video .hero__title,
  .hero--video .hero__subtitle,
  .hero--video .hero__actions,
  .hero__scroll-hint {
    animation: none !important;
    opacity: 1 !important;
  }
  .hero--video .hero__animated-word.is-typewriter::after {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ---- Mobile tweaks ------------------------------------------ */
@media (max-width: 767px) {
  .hero--video {
    min-height: 100svh;
  }

  .hero--video .hero__inner {
    padding-top: clamp(100px, 18vh, 160px);
    padding-bottom: clamp(80px, 14vh, 120px);
  }

  .hero--video .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn--hero-primary,
  .btn--hero-outline {
    justify-content: center;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ---- Mobile cards/layout safety (restaura responsivita') ----- */
@media (max-width: 959.98px) {
  .trust-grid,
  .grid--2,
  .esempio-layout,
  .perche-punti {
    grid-template-columns: 1fr !important;
  }

  .card,
  .ricevi-box,
  .trust-card,
  .perche-punto {
    min-width: 0;
  }
}


/* ================================================================
   TH-INVISIBLE  scroll entrance system
   ================================================================ */
.th-invisible {
  opacity: 0 !important;
  visibility: hidden;
}
.animated {
  animation-duration: 0.72s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  visibility: visible !important;
  opacity: 1 !important;
}
.animated.fadeInDown   { animation-name: fadeInDown; }
.animated.fadeInUp     { animation-name: fadeInUp; }
.animated.fadeIn       { animation-name: fadeIn; animation-duration: 0.5s; }
.animated.zoomIn       { animation-name: zoomIn; }
.animated.slideInRight { animation-name: slideInRight; }

@keyframes slideInRight {
  from { opacity: 0; transform: translate3d(48px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .th-invisible { opacity: 1 !important; visibility: visible !important; }
  .animated     { animation: none !important; }
}

/* ================================================================
   BURGER FIX LAYER
   Final safety overrides for mobile/desktop behavior.
   ================================================================ */
@media (max-width: 959.98px) {
  body.nav-open .site-header {
    z-index: 1400 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header .header-cta {
    display: none !important;
  }

  .site-header .nav-toggle {
    display: inline-flex !important;
    z-index: 1300;
  }

  .nav-overlay {
    z-index: 1300 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  .nav-overlay.is-open {
    pointer-events: auto !important;
  }

  .site-nav {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    left: auto !important;
    width: min(380px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    z-index: 1410 !important;
    transform: translateX(110%) !important;
    opacity: 0 !important;
    transition: transform 140ms ease, opacity 140ms ease !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: color-mix(in srgb, var(--color-surface) 96%, var(--color-bg)) !important;
    border: 1px solid color-mix(in srgb, var(--color-border) 75%, white) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24) !important;
    pointer-events: auto !important;
  }

  .site-nav[data-state="open"] {
    transform: translateX(0) !important;
    opacity: 1 !important;
  }

  .site-nav__header {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .site-nav__drawer-bottom {
    display: block !important;
    position: sticky;
    bottom: 0;
    z-index: 2;
  }

  .site-nav__sep,
  .site-nav__links .site-nav__link--login {
    display: none !important;
  }
}

@media (min-width: 960px) {
  .site-header .container {
    padding-left: var(--space-3, 24px) !important;
    padding-right: var(--space-3, 24px) !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .site-header__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px;
  }

  .site-header__inner > .brand {
    grid-column: 1;
    justify-self: start;
  }

  .site-header__inner > .site-nav {
    grid-column: 2;
    justify-self: center;
  }

  .site-header__inner > .header-cta {
    grid-column: 3;
    justify-self: end;
  }

  .site-header .nav-toggle {
    display: none !important;
  }

  .nav-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
  }

  .site-nav {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    align-items: center !important;
    transform: none !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    z-index: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .site-nav__header,
  .site-nav__drawer-bottom {
    display: none !important;
  }

  .site-nav__sep {
    display: block !important;
  }

  .site-nav__links .site-nav__link--login {
    display: inline-flex !important;
  }

  .site-nav__links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
  }

  .site-nav__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28) !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .site-nav__link:hover {
    background: var(--hover, rgba(255, 255, 255, 0.20)) !important;
    transform: none !important;
  }

  .site-nav__links .site-nav__link--mobile-only {
    display: none !important;
  }
}


/* ================================================================
   HOMEPAGE REDESIGN 2026 (modulare / editoriale / premium)
   Isolato su .is-home per evitare regressioni su altre pagine.
   ================================================================ */
body.is-home {
  --font-heading: "ITC Avant Garde Gothic W02 Md", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --font-display: "Playfair Display", serif;
  --th-home-bg: #f2f0e7;
  --th-home-surface: #f8f7f2;
  --th-home-paper: #ffffff;
  --th-home-line: #d9d1c2;
  --th-home-ink: #1f2620;
  --th-home-muted: #596056;
  --th-home-accent: var(--color-primary);
  --th-home-accent-soft: var(--color-primary-700);
  --th-home-space-y: clamp(4.5rem, 8vw, 8.5rem);
  --th-home-radius: 18px;

  background: linear-gradient(180deg, #eeece2 0%, #f6f4ec 35%, #f8f7f2 100%);
  color: var(--th-home-ink);
  font-family: var(--font-body);
}

body.is-home .th-home {
  overflow: clip;
}

body.is-home .th-home-shell {
  width: calc(100% - (2 * clamp(12px, 2.5vw, 40px)));
  margin-inline: auto;
}

body.is-home .site-header {
  padding: 0.9rem 0 0.7rem;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

body.is-home .site-header.is-scrolled {
  background: color-mix(in srgb, #f4f1e8 90%, transparent);
  border-bottom: 1px solid rgba(31, 38, 32, 0.1);
  box-shadow: 0 6px 24px rgba(31, 38, 32, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.is-home .site-header .site-nav__links {
  background: rgba(255, 255, 255, 0.2) !important;
}

body.is-home .site-header.is-scrolled .site-nav__links {
  background: rgba(248, 246, 238, 0.95) !important;
  border-color: rgba(31, 38, 32, 0.14) !important;
}

body.is-home .site-header.is-scrolled .site-nav__link {
  color: var(--th-home-ink) !important;
  text-shadow: none !important;
}

body.is-home .th-home-eyebrow {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--th-home-muted) 70%, #fff);
}

body.is-home .th-home-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 3.45rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--th-home-ink);
  text-wrap: balance;
}

body.is-home .section.section--home-panel {
  padding-block: var(--th-home-space-y);
  position: relative;
}

body.is-home .section.section--home-panel.is-light {
  background: var(--th-home-surface);
}

body.is-home .section.section--home-how {
  background: linear-gradient(180deg, #ece9de 0%, #f6f3ea 100%);
}

body.is-home .th-home-head {
  max-width: 840px;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
  display: grid;
  gap: 0.85rem;
}

body.is-home .th-home-head > p,
body.is-home .th-home-head > h2 {
  margin: 0;
}

body.is-home .th-home-head > p {
  max-width: 64ch;
  color: var(--th-home-muted);
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
}

body.is-home .th-home-hero {
  position: relative;
  isolation: isolate;
  min-height: min(100svh, 920px);
  display: grid;
  align-items: end;
  padding-block: clamp(7.2rem, 14vh, 11.5rem) clamp(4.2rem, 8vh, 6.8rem);
}

body.is-home .th-home-hero__media,
body.is-home .th-home-hero__video,
body.is-home .th-home-hero__overlay {
  position: absolute;
  inset: 0;
}

body.is-home .th-home-hero__media {
  /* Copertina di sicurezza: se il video non parte (codec non supportato,
     rete lenta, autoplay bloccato) resta comunque visibile l'immagine
     invece del riquadro scuro.
     L'immagine e' impostata inline in index.php: solo il file
     /img/trusthome-poster.jpg (tolta la copia incorporata come data URI,
     il file risponde regolarmente) (30/09/2026). */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.is-home .th-home-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.is-home .th-home-hero__overlay {
  background:
    linear-gradient(95deg, rgba(16, 22, 18, 0.72) 0%, rgba(16, 22, 18, 0.52) 44%, rgba(16, 22, 18, 0.35) 100%),
    linear-gradient(180deg, rgba(16, 22, 18, 0.18) 0%, rgba(16, 22, 18, 0.62) 100%);
}

body.is-home .th-home-hero__layout {
  position: relative;
  z-index: 1;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: end;
}

body.is-home .th-home-hero__content {
  grid-column: 1 / span 8;
  display: grid;
  gap: clamp(1rem, 2vw, 1.45rem);
  max-width: 760px;
}

body.is-home .th-home-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5.8vw, 5.15rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

body.is-home .th-home-hero__claim {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(1.1rem, 1.55vw, 1.35rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
}

body.is-home .th-home-hero__lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1.03rem, 1.65vw, 1.2rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.87);
}

body.is-home .th-home-hero__word-wrap {
  grid-column: 9 / -1;
  justify-self: end;
  align-self: center;
  text-align: right;
  display: grid;
  gap: 0.45rem;
}

body.is-home .th-home-hero .hero__animated-word {
  display: block;
  width: 100%;
  margin-top: 0.1em;
  line-height: 1.04;
  min-height: 1.1em;
  color: #d6ddcb;
}

body.is-home .th-home-hero__word-wrap .hero__animated-word {
  width: auto;
  margin: 0;
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

body.is-home .th-home-hero .hero__animated-word.is-typewriter::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 0.08em;
  background: #d6ddcb;
  vertical-align: -0.08em;
}

body.is-home .th-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

body.is-home .th-home-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.78rem 1.35rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  letter-spacing: 0.025em;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

body.is-home .th-home-btn:hover {
  transform: translateY(-1px);
}

body.is-home .th-home-btn--solid {
  background: var(--th-home-accent);
  color: var(--th-home-ink);
  border-color: var(--th-home-accent);
}

body.is-home .th-home-btn--solid:hover {
  background: var(--th-home-accent);
  border-color: var(--th-home-accent);
}

body.is-home .th-home-btn--outline {
  background: transparent;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 40%, transparent);
}

body.is-home .th-home-hero__panel {
  grid-column: 8 / -1;
  padding: clamp(1.2rem, 2vw, 1.7rem);
  border-radius: var(--th-home-radius);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(248, 246, 240, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  gap: 0.95rem;
  max-width: 430px;
  justify-self: end;
}

body.is-home .th-home-hero__panel-kicker {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.74);
}

body.is-home .th-home-hero__checks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.72rem;
}

body.is-home .th-home-hero__checks li {
  display: flex;
  align-items: baseline;
  gap: 0.62rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  font-size: 0.98rem;
}

body.is-home .th-home-hero__checks li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #dbe2d0;
  flex: 0 0 auto;
}

body.is-home .th-home-hero__meta {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 0.85rem;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.8);
}

body.is-home .th-home-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.8vw, 2.3rem);
  align-items: start;
}

body.is-home .th-home-intro__text {
  grid-column: 1 / span 7;
  display: grid;
  gap: 0.9rem;
}

body.is-home .th-home-intro__text > h2,
body.is-home .th-home-intro__text > p {
  margin: 0;
}

body.is-home .th-home-intro__text > p {
  max-width: 57ch;
  font-size: clamp(1.08rem, 1.34vw, 1.2rem);
  line-height: 1.7;
  color: var(--th-home-muted);
}

body.is-home .th-home-intro__facts {
  grid-column: 8 / -1;
  display: grid;
  gap: 1rem;
}

body.is-home .th-home-fact,
body.is-home .th-home-step,
body.is-home .th-home-card,
body.is-home .th-home-rel-card,
body.is-home .th-home-search-wrap {
  border-radius: var(--th-home-radius);
  border: 1px solid var(--th-home-line);
  background: var(--th-home-paper);
}

body.is-home .th-home-fact {
  padding: clamp(1.2rem, 2.1vw, 1.7rem);
}

body.is-home .th-home-fact h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 1.06rem;
}

body.is-home .th-home-fact p {
  margin: 0;
  color: var(--th-home-muted);
}

body.is-home .th-home-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

body.is-home .th-home-grid--3 > * {
  grid-column: span 4;
}

body.is-home .th-home-step {
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  display: grid;
  gap: 0.5rem;
}

body.is-home .th-home-step__n {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  color: #c8cfbe;
  line-height: 1;
}

body.is-home .th-home-step h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.18rem;
  line-height: 1.24;
}

body.is-home .th-home-step p {
  margin: 0;
  color: var(--th-home-muted);
  line-height: 1.62;
}

body.is-home .th-home-search-wrap {
  padding: clamp(1.3rem, 2.8vw, 2.4rem);
  display: grid;
  gap: clamp(1.1rem, 2.3vw, 1.7rem);
}

body.is-home .th-home-search__head {
  max-width: 820px;
  display: grid;
  gap: 0.8rem;
}

body.is-home .th-home-search__head > p,
body.is-home .th-home-search__head > h2,
body.is-home .th-home-search__head > p:last-child {
  margin: 0;
}

body.is-home .th-home-search__head > p:last-child {
  color: var(--th-home-muted);
  max-width: 62ch;
}

body.is-home .th-home-search {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: end;
}

body.is-home .th-home-field {
  display: grid;
  gap: 0.4rem;
}

body.is-home .th-home-field:first-child {
  grid-column: span 4;
}

body.is-home .th-home-field:nth-child(2),
body.is-home .th-home-field:nth-child(3) {
  grid-column: span 3;
}

body.is-home .th-home-search > button {
  grid-column: span 2;
  width: 100%;
}

body.is-home .th-home-field > span {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-home-muted);
}

body.is-home .th-home-field input,
body.is-home .th-home-field select {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--th-home-line) 92%, #fff);
  background: #ffffff;
  color: var(--th-home-ink);
  padding: 0.65rem 0.82rem;
  font: inherit;
}

body.is-home .th-home-field input::placeholder {
  color: color-mix(in srgb, var(--th-home-muted) 70%, #fff);
}

body.is-home .th-home-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

body.is-home .th-home-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

body.is-home .th-home-card__body {
  padding: clamp(1.1rem, 2.1vw, 1.55rem);
  display: grid;
  gap: 0.55rem;
  align-content: start;
  flex: 1;
}

body.is-home .th-home-card__meta {
  margin: 0;
  color: var(--th-home-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

body.is-home .th-home-card h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1.25;
}

body.is-home .th-home-card p {
  margin: 0;
  color: var(--th-home-muted);
  line-height: 1.58;
}

body.is-home .th-home-card a {
  margin-top: 0.45rem;
  font-family: var(--font-heading);
  text-decoration: none;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--th-home-ink);
}

body.is-home .th-home-relations {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

body.is-home .th-home-rel-card {
  grid-column: span 6;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  display: grid;
  gap: 0.82rem;
}

body.is-home .th-home-rel-card .th-home-eyebrow {
  color: var(--th-home-muted);
}

body.is-home .th-home-rel-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.1;
}

body.is-home .th-home-rel-card p {
  margin: 0;
  max-width: 45ch;
  color: var(--th-home-muted);
}

body.is-home .th-home-rel-card .th-home-btn {
  justify-self: start;
  color: var(--th-home-ink);
  border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

body.is-home .th-home-cta {
  padding: 0 0 clamp(4rem, 7vw, 6.8rem);
}

body.is-home .th-home-cta__inner {
  border-radius: calc(var(--th-home-radius) + 2px);
  border: 1px solid color-mix(in srgb, var(--th-home-line) 90%, #fff);
  background: linear-gradient(145deg, #ffffff 0%, #f2efe5 100%);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  gap: 0.95rem;
}

body.is-home .th-home-cta__inner > p,
body.is-home .th-home-cta__inner > h2 {
  margin: 0;
}

body.is-home .th-home-cta__inner > p:last-of-type {
  max-width: 58ch;
  color: var(--th-home-muted);
  font-size: clamp(1rem, 1.2vw, 1.13rem);
}

body.is-home .th-home-cta__inner .th-home-btn {
  justify-self: start;
}

body.is-home .site-footer {
  margin-top: 0;
}

@media (max-width: 1200px) {
  body.is-home .th-home-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.is-home .th-home-grid--3 > * {
    grid-column: span 3;
  }

  body.is-home .th-home-hero__layout,
  body.is-home .th-home-intro,
  body.is-home .th-home-search,
  body.is-home .th-home-relations {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.is-home .th-home-hero__content,
  body.is-home .th-home-intro__text {
    grid-column: span 6;
    max-width: 840px;
  }

  body.is-home .th-home-hero__word-wrap,
  body.is-home .th-home-intro__facts {
    grid-column: span 6;
    max-width: 100%;
    justify-self: stretch;
    text-align: left;
  }

  body.is-home .th-home-field:first-child {
    grid-column: span 3;
  }

  body.is-home .th-home-field:nth-child(2),
  body.is-home .th-home-field:nth-child(3),
  body.is-home .th-home-search > button {
    grid-column: span 1;
  }
}

@media (max-width: 880px) {
  body.is-home .th-home-shell {
    width: calc(100% - 2rem);
  }

  body.is-home .th-home-grid--3 > * {
    grid-column: span 6;
  }

  body.is-home .th-home-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-home .th-home-field,
  body.is-home .th-home-field:first-child,
  body.is-home .th-home-field:nth-child(2),
  body.is-home .th-home-field:nth-child(3),
  body.is-home .th-home-search > button {
    grid-column: auto;
  }

  body.is-home .th-home-search > button {
    width: 100%;
  }

  body.is-home .th-home-rel-card {
    grid-column: span 12;
  }

  body.is-home .th-home-btn {
    padding-inline: 1rem;
  }
}

@media (max-width: 640px) {
  body.is-home .section.section--home-panel {
    padding-block: clamp(3.3rem, 9vw, 4.2rem);
  }

  body.is-home .th-home-hero {
    min-height: 90svh;
    padding-block: clamp(6.2rem, 15vh, 7.4rem) clamp(3.2rem, 8vh, 4rem);
  }

  body.is-home .th-home-hero__title {
    font-size: clamp(1.95rem, 10vw, 2.65rem);
  }

  body.is-home .th-home-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.is-home .th-home-btn {
    width: 100%;
  }

  body.is-home .th-home-grid,
  body.is-home .th-home-hero__layout,
  body.is-home .th-home-intro,
  body.is-home .th-home-search,
  body.is-home .th-home-relations {
    grid-template-columns: 1fr;
  }

  body.is-home .th-home-grid--3 > *,
  body.is-home .th-home-hero__content,
  body.is-home .th-home-hero__word-wrap,
  body.is-home .th-home-intro__text,
  body.is-home .th-home-intro__facts,
  body.is-home .th-home-rel-card {
    grid-column: auto;
  }

  body.is-home .th-home-hero__word-wrap {
    justify-self: start;
    text-align: left;
  }

  body.is-home .th-home-search {
    gap: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-home .th-home-btn {
    transition: none;
  }

  body.is-home .th-home-btn:hover {
    transform: none;
  }
}

/* ================================================================
   HOMEPAGE - cluster editoriale full-width
   ================================================================ */
body.is-home .th-home-cluster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

body.is-home .th-home-cluster__main {
  border-radius: var(--th-home-radius);
  border: 1px solid var(--th-home-line);
  background: var(--th-home-paper);
}

body.is-home .th-home-cluster__main {
  grid-column: 1 / -1;
  padding: clamp(1.3rem, 2.6vw, 2rem);
}

body.is-home .th-home-cluster__main .th-home-head {
  margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
}

body.is-home .th-home-cluster__main .th-home-title {
  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
}

@media (max-width: 1200px) {
  body.is-home .th-home-cluster {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.is-home .th-home-cluster__main {
    grid-column: 1 / -1;
  }
}

@media (max-width: 880px) {
  body.is-home .th-home-cluster {
    grid-template-columns: 1fr;
  }

  body.is-home .th-home-cluster__main {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ================================================================
   HOMEPAGE - integrazione sezione esempio nel nuovo sistema
   (non tocca il mockup .val-card)
   ================================================================ */
body.is-home .section.section--esempio {
  padding-block: clamp(4.2rem, 8vw, 8rem);
  margin-top: 0;
  background: var(--th-home-surface);
}

body.is-home .section.section--esempio .bb-section {
  width: auto;
  margin: 0 clamp(12px, 2.5vw, 40px);
  margin-bottom: 0;
  padding: 0;
  border-radius: var(--th-home-radius);
  border: 1px solid var(--th-home-line);
  background: var(--th-home-paper);
  box-shadow: none;
}

body.is-home .section.section--esempio .bb-inner {
  max-width: none;
  width: 100%;
  padding: clamp(1.35rem, 2.6vw, 2.1rem);
}

body.is-home .section.section--esempio .bb-bg-num {
  top: clamp(0.8rem, 1.4vw, 1.2rem);
  right: clamp(1rem, 2vw, 1.6rem);
  font-size: clamp(2rem, 6vw, 3.8rem);
  opacity: 0.08;
  color: var(--th-home-accent);
}

body.is-home .section.section--esempio .esempio-layout {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  align-items: center;
}

body.is-home .section.section--esempio .esempio-text__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--th-home-ink);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.3rem);
}

body.is-home .section.section--esempio .esempio-text__lead {
  max-width: 52ch;
  color: var(--th-home-muted);
  font-size: clamp(1.01rem, 1.3vw, 1.12rem);
  line-height: 1.68;
  margin-bottom: 0.72em;
}

body.is-home .section.section--esempio .esempio-text__lead:last-of-type {
  margin-bottom: 0;
}

body.is-home .section.section--esempio .bb-cta {
  margin-top: clamp(1rem, 2vw, 1.45rem) !important;
}

body.is-home .section.section--esempio .bb-cta .btn.btn--accent {
  min-height: 48px;
  border-radius: 999px;
}

body.is-home .section.section--esempio + .section.section--home-panel {
  padding-top: 0;
}

@media (max-width: 880px) {
  body.is-home .section.section--esempio .bb-section {
    margin: 0 1rem;
  }

  body.is-home .section.section--esempio .esempio-layout {
    grid-template-columns: 1fr;
  }

  body.is-home .section.section--esempio .esempio-text__lead {
    max-width: none;
  }
}

@media (max-width: 767px) {
  body.is-home .th-home-shell {
    width: calc(100% - 16px);
  }

  body.is-home .section.section--esempio .bb-section {
    margin: 0 8px;
  }
}

@media (max-width: 640px) {
  body.is-home .section.section--esempio {
    padding-block: clamp(3.3rem, 9vw, 4.2rem);
  }
}

/* ================================================================
   HOMEPAGE - ritmo sezioni + card motion refinement
   ================================================================ */
body.is-home {
  --th-section-gap: clamp(12px, 1.7vw, 24px);
  --th-section-pad: clamp(3.4rem, 6.4vw, 6.2rem);
  --th-card-lift: -8px;
  --th-card-shadow: 0 24px 44px rgba(31, 38, 32, 0.14);
}

body.is-home .th-home > section:not(.th-home-hero) {
  position: relative;
}

body.is-home .th-home > section:not(.th-home-hero) + section:not(.th-home-hero) {
  margin-top: var(--th-section-gap);
}

body.is-home .section.section--home-panel:not(.section--esempio) .bb-section {
  margin: 0 clamp(12px, 2.5vw, 40px);
  padding: var(--th-section-pad) clamp(1rem, 2.4vw, 2.8rem);
  border-radius: calc(var(--th-home-radius) + 2px);
}

body.is-home .section.section--home-panel {
  margin: 0 clamp(12px, 2.5vw, 40px);
  padding: 0;
  background: transparent;
}

body.is-home .section.section--home-panel > .th-home-shell {
  width: 100%;
  max-width: var(--bb-inner-max, 1320px);
  margin-inline: auto;
  border-radius: calc(var(--th-home-radius) + 2px);
  border: 1px solid var(--th-home-line);
  background: var(--th-home-paper);
  padding: var(--th-section-pad) clamp(1rem, 2.4vw, 2.8rem);
}

body.is-home .section.section--home-how > .th-home-shell {
  background: linear-gradient(180deg, #f1eee5 0%, #f8f6ee 100%);
}

body.is-home .section.section--esempio {
  padding-block: clamp(0.9rem, 1.8vw, 1.6rem);
}

body.is-home .section.section--esempio + .section.section--home-panel {
  padding-top: 0;
}

body.is-home .trust-big,
body.is-home .trust-card,
body.is-home .th-home-step,
body.is-home .ricevi-box,
body.is-home .th-home-card,
body.is-home .perche-punto,
body.is-home .val-card {
  position: relative;
  isolation: isolate;
  transition:
    transform 0.52s cubic-bezier(0.18, 0.9, 0.2, 1),
    box-shadow 0.42s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
  will-change: transform;
}

body.is-home .trust-big::after,
body.is-home .trust-card::after,
body.is-home .th-home-step::after,
body.is-home .ricevi-box::after,
body.is-home .th-home-card::after,
body.is-home .perche-punto::after,
body.is-home .val-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%);
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.55) 50%, transparent 66%);
  transition: transform 0.78s ease, opacity 0.48s ease;
  z-index: 2;
}

@keyframes thCardReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

body.is-home .trust-big.animated,
body.is-home .trust-card.animated,
body.is-home .th-home-step.animated,
body.is-home .ricevi-box.animated,
body.is-home .th-home-card.animated,
body.is-home .perche-punto.animated {
  animation-name: thCardReveal !important;
  animation-duration: 0.8s;
}

body.is-home .th-home-card img {
  transition: transform 0.65s cubic-bezier(0.2, 0.75, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  body.is-home .trust-big:hover,
  body.is-home .trust-card:hover,
  body.is-home .th-home-step:hover,
  body.is-home .ricevi-box:hover,
  body.is-home .th-home-card:hover,
  body.is-home .perche-punto:hover,
  body.is-home .val-card:hover,
  body.is-home .th-home-card:focus-within {
    transform: translateY(var(--th-card-lift));
    box-shadow: var(--th-card-shadow);
    border-color: color-mix(in srgb, var(--th-home-accent) 40%, var(--th-home-line));
  }

  body.is-home .th-home-card:hover img,
  body.is-home .th-home-card:focus-within img {
    transform: scale(1.045);
  }

  body.is-home .trust-big:hover::after,
  body.is-home .trust-card:hover::after,
  body.is-home .th-home-step:hover::after,
  body.is-home .ricevi-box:hover::after,
  body.is-home .th-home-card:hover::after,
  body.is-home .perche-punto:hover::after,
  body.is-home .val-card:hover::after,
  body.is-home .th-home-card:focus-within::after {
    opacity: 0.95;
    transform: translateX(120%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-home .trust-big,
  body.is-home .trust-card,
  body.is-home .th-home-step,
  body.is-home .ricevi-box,
  body.is-home .th-home-card,
  body.is-home .perche-punto,
  body.is-home .val-card {
    transition: none !important;
  }

  body.is-home .trust-big::after,
  body.is-home .trust-card::after,
  body.is-home .th-home-step::after,
  body.is-home .ricevi-box::after,
  body.is-home .th-home-card::after,
  body.is-home .perche-punto::after,
  body.is-home .val-card::after {
    display: none;
  }
}

@media (max-width: 880px) {
  body.is-home .section.section--home-panel {
    margin: 0 1rem;
  }

  body.is-home .section.section--home-panel > .th-home-shell {
    padding: clamp(2.6rem, 7vw, 4rem) clamp(0.95rem, 2.8vw, 1.4rem);
  }
}

@media (max-width: 767px) {
  body.is-home .section.section--home-panel:not(.section--esempio) .bb-section,
  body.is-home .section.section--home-panel {
    margin: 0 8px;
  }

  body.is-home .section.section--home-panel:not(.section--esempio) .bb-section {
    padding: clamp(2.4rem, 8vw, 3.8rem) 0.95rem;
  }
}

/* ================================================================
   HOMEPAGE - uniforma dimensioni contenitori sezione
   ================================================================ */
body.is-home {
  --th-panel-max: 1320px;
  --th-panel-gutter: clamp(12px, 2.5vw, 40px);
  --th-panel-pad-x: clamp(1rem, 2.4vw, 2.8rem);
}

body.is-home .section.section--home-panel > .bb-section,
body.is-home .section.section--home-panel > .th-home-shell {
  width: min(var(--th-panel-max), calc(100% - (2 * var(--th-panel-gutter))));
  margin-inline: auto;
}

body.is-home .section.section--home-panel > .bb-section,
body.is-home .section.section--home-panel > .th-home-shell {
  padding-inline: var(--th-panel-pad-x);
}

body.is-home .section.section--home-panel > .bb-section,
body.is-home .section.section--home-panel > .th-home-shell {
  border-radius: calc(var(--th-home-radius) + 2px);
  border: 1px solid var(--th-home-line);
  box-shadow: none;
}

body.is-home .section.section--home-panel .bb-statement {
  margin: 0 0 clamp(0.9rem, 1.8vw, 1.35rem);
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 3.45rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--th-home-ink);
  max-width: 24ch;
}

body.is-home .section.section--home-panel .bb-subtitle,
body.is-home .section.section--home-panel .cta-finale__sub,
body.is-home .section.section--home-panel .ricevi-nota {
  margin-top: 0;
  color: var(--th-home-muted);
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  line-height: 1.62;
}

body.is-home .section.section--home-panel .bb-bg-num {
  top: clamp(0.8rem, 1.4vw, 1.2rem);
  right: clamp(1rem, 2vw, 1.6rem);
  font-size: clamp(2rem, 6vw, 3.8rem);
  opacity: 0.08;
  color: var(--th-home-accent);
  -webkit-text-stroke: 0;
}

@media (max-width: 880px) {
  body.is-home {
    --th-panel-gutter: 1rem;
    --th-panel-pad-x: clamp(0.95rem, 2.8vw, 1.4rem);
  }
}

@media (max-width: 767px) {
  body.is-home {
    --th-panel-gutter: 8px;
    --th-panel-pad-x: 0.95rem;
  }
}

/* ================================================================
   HOMEPAGE - allineamento sezione stile RealAdvisor (asse unico)
   ================================================================ */
body.is-home {
  --th-ra-max: 1240px;
  --th-ra-inner-max: 1120px;
  --th-ra-gap-y: clamp(14px, 2vw, 28px);
  --th-ra-pad-y: clamp(3.2rem, 6vw, 5.8rem);
}

body.is-home .th-home > .section.section--home-panel {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

body.is-home .th-home > .section.section--home-panel + .section.section--home-panel {
  margin-top: var(--th-ra-gap-y) !important;
}

body.is-home .th-home > .section.section--home-panel > .bb-section,
body.is-home .th-home > .section.section--home-panel > .th-home-shell {
  width: min(var(--th-ra-max), calc(100% - (2 * var(--th-panel-gutter)))) !important;
  margin-inline: auto !important;
  padding: var(--th-ra-pad-y) var(--th-panel-pad-x) !important;
  border-radius: calc(var(--th-home-radius) + 2px) !important;
}

body.is-home .th-home > .section.section--home-panel > .bb-section .bb-inner {
  max-width: var(--th-ra-inner-max) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

body.is-home .th-home > .section.section--home-panel > .th-home-shell {
  max-width: var(--th-ra-max) !important;
}

body.is-home .th-home > .section.section--home-panel.section--home-how > .th-home-shell {
  background: linear-gradient(180deg, #f3f0e7 0%, #faf7ef 100%) !important;
}

@media (max-width: 880px) {
  body.is-home {
    --th-ra-max: 100%;
    --th-ra-inner-max: 100%;
    --th-ra-gap-y: 12px;
    --th-ra-pad-y: clamp(2.6rem, 7vw, 4rem);
  }
}

/* ================================================================
   HOMEPAGE - glass cards + search agenzie section
   ================================================================ */
body.is-home {
  --th-glass-bg: color-mix(in srgb, #ffffff 64%, transparent);
  --th-glass-bg-soft: color-mix(in srgb, #ffffff 52%, transparent);
  --th-glass-line: color-mix(in srgb, var(--th-home-line) 72%, #ffffff);
  --th-glass-shadow: 0 18px 34px rgba(31, 38, 32, 0.08);
}

body.is-home .trust-big,
body.is-home .trust-card,
body.is-home .th-home-step,
body.is-home .ricevi-box,
body.is-home .th-home-card,
body.is-home .perche-punto,
body.is-home .th-home-search-wrap,
body.is-home .th-home-cluster__main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--th-glass-bg) !important;
  border-color: var(--th-glass-line) !important;
  box-shadow: var(--th-glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.is-home .trust-big::before,
body.is-home .trust-card::before,
body.is-home .th-home-step::before,
body.is-home .ricevi-box::before,
body.is-home .th-home-card::before,
body.is-home .perche-punto::before,
body.is-home .th-home-search-wrap::before,
body.is-home .th-home-cluster__main::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 58%);
  z-index: 0;
}

body.is-home .trust-big > *,
body.is-home .trust-card > *,
body.is-home .th-home-step > *,
body.is-home .ricevi-box > *,
body.is-home .th-home-card > *,
body.is-home .perche-punto > *,
body.is-home .th-home-search-wrap > *,
body.is-home .th-home-cluster__main > * {
  position: relative;
  z-index: 1;
}

body.is-home .section.section--home-search > .th-home-shell {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.72) 0%, rgba(248, 245, 236, 0.72) 100%) !important;
}

body.is-home .section.section--home-search .th-home-search-wrap {
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
}

body.is-home .section.section--home-search .th-home-search__head {
  max-width: 74ch;
}

body.is-home .section.section--home-search .th-home-search__head p:last-child {
  font-size: clamp(1rem, 1.2vw, 1.08rem);
}

body.is-home .section.section--home-search .th-home-field input,
body.is-home .section.section--home-search .th-home-field select {
  background: var(--th-glass-bg-soft);
  border-color: color-mix(in srgb, var(--th-home-line) 68%, #ffffff);
}

body.is-home .section.section--home-search .th-home-search > button {
  min-height: 48px;
}

@media (max-width: 880px) {
  body.is-home .section.section--home-search .th-home-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.is-home .section.section--home-search .th-home-search {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   HOMEPAGE - micro spaziature sotto hero e sopra footer
   ================================================================ */
body.is-home .th-home-hero + .section.section--home-panel {
  margin-top: clamp(10px, 1.6vw, 20px) !important;
}

body.is-home .th-home > .section.section--home-panel:last-of-type {
  margin-bottom: clamp(10px, 1.6vw, 20px) !important;
}

/* ================================================================
   SVG MOCKUP ILLUSTRATIONS  sezioni homepage
   ================================================================ */

/* Le .esempio-mockup nelle sezioni non-esempio non hanno max-width
   imposto dal .val-card, quindi impostiamo il limite direttamente sull'svg */
.esempio-mockup svg {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(58, 53, 48, 0.1);
}

/* Adatta l'esempio-layout nelle bb-inner section (non-esempio) */
body.is-home .bb-inner > .esempio-layout {
  align-items: flex-start;
}

/* Sezione "Come funziona": th-home-cluster__main dentro esempio-layout */
body.is-home .th-home-cluster__main[style*="grid-column:auto"] {
  grid-column: auto;
}

/* Responsive: mobile  impila SVG sotto il contenuto */
@media (max-width: 768px) {
  .esempio-mockup svg {
    max-width: 100%;
  }
}

/* ================================================================
   HEADER PARITY - stesso stile/animazione della home su tutte le pagine
   ================================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  padding: 0.9rem 0 0.7rem;
  transition: background 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.site-header.is-scrolled {
  background: color-mix(in srgb, #f4f1e8 90%, transparent);
  border-bottom: 1px solid rgba(31, 38, 32, 0.1);
  box-shadow: 0 6px 24px rgba(31, 38, 32, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header .site-nav__links {
  background: rgba(255, 255, 255, 0.2) !important;
}

.site-header.is-scrolled .site-nav__links {
  background: rgba(248, 246, 238, 0.95) !important;
  border-color: rgba(31, 38, 32, 0.14) !important;
}

.site-header.is-scrolled .site-nav__link {
  color: #1f2620 !important;
  text-shadow: none !important;
}

/* Fuori home: logo sempre bloccato e visibile */
body:not(.is-home) .site-header .brand__mark img {
  transform: none !important;
  opacity: 1 !important;
}

body:not(.is-home) .site-header.is-scrolled .header-cta {
  transform: translateY(-240%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(.is-home) .site-header:not(.is-scrolled) .header-cta {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body:not(.is-home) .nav-toggle {
  background: color-mix(in srgb, var(--color-surface) 65%, transparent) !important;
  border-color: color-mix(in srgb, var(--color-border) 55%, transparent) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14) !important;
}

/* ================================================================
   FOOTER PARITY - uniforme su tutte le pagine non-home
   ================================================================ */
body:not(.is-home) .site-footer {
  margin-top: clamp(18px, 3vw, 34px);
}

/* Header fisso (logo/CTA sempre visibili + link neri) su pagine specifiche */
@media (min-width: 960px) {
  body.header-fixed-black .site-header,
  body.header-fixed-black .site-header.is-scrolled {
    background: color-mix(in srgb, #f4f1e8 94%, transparent) !important;
    border-bottom: 1px solid rgba(31, 38, 32, 0.1) !important;
    box-shadow: 0 6px 24px rgba(31, 38, 32, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  body.header-fixed-black .site-header .site-nav__links,
  body.header-fixed-black .site-header.is-scrolled .site-nav__links {
    background: rgba(248, 246, 238, 0.95) !important;
    border-color: rgba(31, 38, 32, 0.14) !important;
  }

  body.header-fixed-black .site-header .site-nav__link,
  body.header-fixed-black .site-header.is-scrolled .site-nav__link,
  body.header-fixed-black .site-header .site-nav__link:hover {
    color: #1f2620 !important;
    text-shadow: none !important;
  }

  body.header-fixed-black .site-header .site-nav__link,
  body.header-fixed-black .site-header.is-scrolled .site-nav__link {
    background: transparent !important;
    box-shadow: none !important;
  }

  body.header-fixed-black .site-header .site-nav__link:hover,
  body.header-fixed-black .site-header .site-nav__link:focus-visible,
  body.header-fixed-black .site-header .site-nav__link[aria-current="page"] {
    background: #B8C0B7 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.header-fixed-black .site-header .brand__mark img,
  body.header-fixed-black .site-header.is-scrolled .brand__mark img,
  body.header-fixed-black .site-header .header-cta,
  body.header-fixed-black .site-header.is-scrolled .header-cta {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ============================================================
   HOMEPAGE 2026 — componenti aggiunti per le 9 sezioni nuove.
   Estendono lo stile esistente senza modificarlo: sono in coda
   al file e non sovrascrivono nessuna regola precedente.
   ============================================================ */

/* Griglia a 4 colonne (STEP 02 "Come funziona": 4 passaggi).
   Rispecchia esattamente i breakpoint di .th-home-grid--3:
   12 col -> 4 per riga | 6 col -> 2 per riga | 1 per riga sotto 880px. */
body.is-home .th-home-grid--4>* {
  grid-column: span 3;
}

/* Hero: la promessa forte e la nota sotto le CTA */
body.is-home .th-home-hero__pledge {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

body.is-home .th-home-hero__note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* Elenchi puntati dentro le card (sezione 03 Privacy) */
.th-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted, #6B6258);
}

.th-list li::marker {
  color: var(--color-primary, #B8C0B7);
}

.th-list--no li::marker {
  color: color-mix(in srgb, var(--color-text-muted, #6B6258) 40%, transparent);
}

/* Box a tutta larghezza nella griglia a 2 colonne (sezione 04) */
.ricevi-box--wide {
  grid-column: 1 / -1;
}

.ricevi-box__claim {
  margin: 0.9rem 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 700;
  color: var(--color-text, #3A3530);
}

/* Citazione grande (sezione 08: "A chi affido casa mia?") */
.th-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  color: var(--color-text, #3A3530);
  max-width: 18ch;
  margin: clamp(1.8rem, 3.5vw, 3rem) auto;
}

/* Nota sotto la CTA finale */
.th-home-note {
  margin: clamp(1.1rem, 2vw, 1.6rem) 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-muted, #6B6258);
}

@media (max-width: 1200px) {

  /* la griglia passa a 6 colonne: span 3 = 2 elementi per riga */
  body.is-home .th-home-grid--4>* {
    grid-column: span 3;
  }
}

@media (max-width: 880px) {
  body.is-home .th-home-grid--4>* {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  body.is-home .th-home-grid--4>* {
    grid-column: auto;
  }

  .th-quote {
    max-width: none;
  }
}

/* L'header è fisso: senza questo, cliccando "Scopri come funziona"
   il titolo della sezione finisce nascosto sotto la barra. */
body.is-home #how-title {
  scroll-margin-top: clamp(5rem, 9vw, 7.5rem);
}

/* .trust-card nasce dentro .trust-side (flex) e centra il contenuto:
   dentro una griglia (sezione 06) i titoli risulterebbero disallineati
   tra card di altezze diverse. Qui le allineiamo in alto. */
body.is-home .th-home-grid .trust-card {
  justify-content: flex-start;
}