/**
 * Lampo3 Base — Main CSS (caricato async)
 * Tutto quello che NON è above-the-fold critical.
 *
 * Include: pattern bonus (content-visibility), tutti i componenti,
 * animazioni reveal, hover states.
 */

/* =============================================================
   AMBIENT BACKGROUND (Metodo Lampo3 — sezione 1.6 sfumatura iniziale)
   ============================================================= */
.has-ambient-bg { position: relative; isolation: isolate; }
.has-ambient-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%, var(--accent-glow), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 70%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.has-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Cursor-aware lighting (Metodo Lampo3 — animazione bonus) */
.has-cursor-light {
  position: relative;
  isolation: isolate;
  --cursor-x: 50%;
  --cursor-y: 50%;
}
.has-cursor-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle 320px at var(--cursor-x) var(--cursor-y), var(--accent-glow), transparent 60%);
  opacity: 0;
  transition: opacity 400ms ease;
}
.has-cursor-light:hover::after { opacity: 1; }

/* =============================================================
   CONTENT VISIBILITY (Metodo Lampo3 tecnica bonus 3.B.1)
   ============================================================= */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* =============================================================
   SECTION wrapper
   ============================================================= */
.section { padding-block: var(--space-section); }
.section--alt-bg { background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 95%, var(--text)) 100%); }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-block); }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.section-head p { color: var(--text-muted); font-size: 1.125rem; }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  font-family: inherit;
  transition: transform var(--dur-base) var(--ease-spring),
              background-color var(--dur-base) ease,
              border-color var(--dur-base) ease,
              box-shadow var(--dur-base) ease,
              color var(--dur-base) ease;
  will-change: transform;
}
.btn--primary {
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 0 var(--accent-glow);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12), 0 0 0 4px var(--accent-glow);
}
.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn--ghost { background: transparent; color: var(--text); padding: 14px 8px; }
.btn--ghost:hover { color: var(--accent); }
.btn--ghost::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-out-quart);
}
.btn--ghost:hover::after { transform: translateX(4px); }
.btn--accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--accent-glow);
}
.btn--lg { padding: 18px 32px; font-size: 16px; }
.btn--magnetic { transition: transform 200ms ease-out, box-shadow var(--dur-base) ease; }

/* =============================================================
   ANIMAZIONI reveal — fade-up via [data-animate]
   ============================================================= */
[data-animate] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out-quart), transform 600ms var(--ease-out-quart);
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-animate-delay="1"] { transition-delay: 100ms; }
[data-animate-delay="2"] { transition-delay: 200ms; }
[data-animate-delay="3"] { transition-delay: 300ms; }
[data-animate-delay="4"] { transition-delay: 400ms; }

/* =============================================================
   HEADER navigation (non-critical)
   ============================================================= */
.site-header__brand { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
/* .site-header__nav e voci → vedi sezione "KK NAV — Super Tribe Menu" sotto */

/* =============================================================
   HERO — varianti complete
   ============================================================= */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.hero__eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #06b6d4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-block);
}
.hero__visual {
  margin-top: 40px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12), 0 0 0 1px var(--border);
  position: relative;
  aspect-ratio: 16 / 9;
}

.hero--split { text-align: left; }
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero--split .hero__inner { grid-template-columns: 55% 1fr; }
}
.hero--split h1 { max-width: 18ch; margin-inline: 0; }
.hero--split .hero__ctas { justify-content: flex-start; }

.hero--minimal { padding-block: clamp(100px, 14vh, 160px) clamp(40px, 6vw, 80px); }
.hero--minimal h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

/* =============================================================
   CARDS
   ============================================================= */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  padding: 32px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) ease,
              border-color var(--dur-base) ease;
  isolation: isolate;
  overflow: hidden;
}
.card--hoverable:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,0.08), 0 0 0 4px var(--accent-soft);
}
.card--service .card__icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius);
  margin-bottom: 24px;
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-spring),
              background-color var(--dur-base) ease;
}
.card--service:hover .card__icon {
  transform: rotate(-8deg) scale(1.08);
  background: var(--accent);
  color: white;
}
.card__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.card__desc { font-size: 15px; color: var(--text-muted); margin-bottom: 20px; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.card__link::after { content: "→"; transition: transform var(--dur-base) var(--ease-out-quart); }
.card--hoverable:hover .card__link::after { transform: translateX(4px); }

/* =============================================================
   SECTIONS — split, columns, bleed
   ============================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: 55% 1fr; }
  .split--reverse { grid-template-columns: 1fr 55%; }
  .split--reverse .split__text { order: 2; }
}
.split__text h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 20px; max-width: 18ch; }
.split__text p { font-size: 1.0625rem; color: var(--text-muted); margin-bottom: 24px; max-width: 55ch; }
.split__visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-elev);
  box-shadow: 0 24px 60px rgba(0,0,0,0.10), 0 0 0 1px var(--border);
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}
.split__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, var(--accent-glow), transparent 60%);
  z-index: 0;
}

/* =============================================================
   STATS GRID
   ============================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  text-align: center;
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 12px;
}
.stat__num {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(180deg, var(--text), var(--text-muted));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.stat__desc { font-size: 14px; color: var(--text-muted); }

/* =============================================================
   MARQUEE — logo cloud + press bidirectional
   ============================================================= */
.marquee {
  --gap: 64px;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  -webkit-mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}
.marquee__track {
  flex-shrink: 0;
  display: flex;
  gap: var(--gap);
  align-items: center;
  animation: scroll 35s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-subtle);
  opacity: 0.6;
  transition: opacity var(--dur-base) ease, color var(--dur-base) ease;
  white-space: nowrap;
}
.marquee__item:hover { opacity: 1; color: var(--text); }
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 42s; }
@keyframes scroll {
  to { transform: translateX(calc(-100% - var(--gap))); }
}
.marquee-stack { display: grid; gap: 20px; }
.marquee-stack .marquee__item { font-size: 18px; }
.press-marquee .marquee__item {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}
.logo-cloud {
  padding-block: var(--space-block);
  border-block: 1px solid var(--border);
  background: var(--bg-elev);
}
.logo-cloud__title {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 32px;
}

/* =============================================================
   PROCESS / TIMELINE
   ============================================================= */
.process {
  display: grid;
  gap: 24px;
  position: relative;
}
@media (min-width: 1024px) { .process { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.process-step {
  position: relative;
  padding: 32px 28px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) ease,
              box-shadow var(--dur-base) ease;
}
.process-step:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 24px 48px rgba(0,0,0,0.08), 0 0 0 4px var(--accent-soft);
}
.process-step::before {
  content: "";
  position: absolute;
  inset: -50% -50% auto auto;
  width: 200%;
  height: 100%;
  background: radial-gradient(circle at 80% 20%, var(--accent-soft), transparent 40%);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}
.process-step:hover::before { opacity: 1; }
.process-step__num {
  display: block;
  font-size: clamp(4rem, 7vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.85;
  background: linear-gradient(180deg, var(--text) 30%, transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.process-step__icon {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.process-step__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.process-step__desc { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: 1px;
  height: 24px;
  background-image: linear-gradient(180deg, var(--border-strong) 50%, transparent 50%);
  background-size: 1px 6px;
  background-repeat: repeat-y;
  transform: translateX(-50%);
}
@media (min-width: 1024px) {
  .process-step:not(:last-child)::after {
    left: auto;
    right: -20px;
    bottom: 50%;
    width: 20px;
    height: 1px;
    background-image: linear-gradient(90deg, var(--border-strong) 50%, transparent 50%);
    background-size: 6px 1px;
    background-repeat: repeat-x;
    transform: translateY(50%);
  }
}

/* =============================================================
   PRICING — toggle + 3 cards
   ============================================================= */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  margin: 0 auto 56px;
}
.pricing-toggle button {
  padding: 8px 20px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-full);
  font-family: inherit;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.pricing-toggle button[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}
.pricing-toggle__badge {
  font-size: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  margin-left: 6px;
  font-weight: 700;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 16px;
}
.pricing-card--featured {
  border-color: var(--text);
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}
.pricing-card--featured .pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}
.pricing-card__name { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pricing-card__price small { font-size: 14px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.pricing-card__desc { font-size: 15px; color: var(--text-muted); }
.pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 16px 0;
  border-block: 1px solid var(--border);
  display: grid;
  gap: 12px;
  font-size: 14px;
}
.pricing-card__features li { display: flex; align-items: center; gap: 10px; }
.pricing-card__features li::before {
  content: "";
  width: 16px; height: 16px;
  flex-shrink: 0;
  background: var(--accent-soft);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(37,99,235)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* =============================================================
   FAQ — animated, auto-close
   ============================================================= */
.faq-list { display: grid; gap: 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item__toggle {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  padding: 24px 56px 24px 0;
  position: relative;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: inherit;
  color: var(--text);
  transition: color var(--dur-base) ease;
}
.faq-item__toggle:hover { color: var(--accent); }
.faq-item__toggle::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  transform: translateY(-50%);
  transition: transform var(--dur-base) var(--ease-out-quart), background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.faq-item__toggle::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2.5' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/><line x1='12' y1='5' x2='12' y2='19'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  transition: transform 320ms var(--ease-out-quart);
  z-index: 1;
}
.faq-item[data-open="true"] .faq-item__toggle { color: var(--accent); }
.faq-item[data-open="true"] .faq-item__toggle::after { background: var(--accent-soft); border-color: var(--accent); }
.faq-item[data-open="true"] .faq-item__toggle::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(37,99,235)' stroke-width='2.5' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
  transform: translateY(-50%) rotate(180deg);
}
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--ease-out-quart);
}
.faq-item[data-open="true"] .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__panel-inner { overflow: hidden; }
.faq-item__body {
  padding: 0 56px 28px 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 70ch;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 280ms ease 80ms, transform 320ms var(--ease-out-quart) 80ms;
}
.faq-item[data-open="true"] .faq-item__body { opacity: 1; transform: translateY(0); }

/* =============================================================
   CTA BANNERS
   ============================================================= */
.cta-banner {
  background: var(--bg-dark);
  color: white;
  border-radius: var(--radius-xl);
  padding: clamp(48px, 8vw, 96px) clamp(32px, 6vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgb(var(--accent-rgb) / 0.4), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 90%, rgba(6, 182, 212, 0.25), transparent 60%);
}
.cta-banner h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
  max-width: 18ch;
  margin-inline: auto;
}
.cta-banner p {
  color: rgba(255,255,255,0.7);
  font-size: 1.0625rem;
  max-width: 50ch;
  margin: 0 auto 32px;
}
.cta-banner__ctas { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-banner .btn--primary { background: white; color: var(--text); }
.cta-banner .btn--secondary { color: white; border-color: rgba(255,255,255,0.25); }
.cta-banner .btn--secondary:hover { background: white; color: var(--text); }

/* =============================================================
   FOOTER MEGA
   ============================================================= */
.site-footer {
  background: var(--bg-dark);
  color: rgba(255,255,255,0.7);
  padding-block: var(--space-block) 32px;
}
.site-footer h4 {
  color: white;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 32px;
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer__brand p { font-size: 14px; max-width: 32ch; line-height: 1.6; }
.site-footer__brand strong {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-footer a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color var(--dur-fast) ease; }
.site-footer a:hover { color: white; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.site-footer__bottom p { font-size: 13px; margin: 0; }
.site-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer__lampo {
  width: 100%;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,0.10);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  text-align: center;
}
.site-footer__lampo a {
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  position: relative;
}
.site-footer__lampo a::after { content: " ⚡"; }
.site-footer__lampo a:hover { color: white; }

/* Footer minimal variant */
.site-footer--minimal {
  padding-block: clamp(40px, 6vw, 64px) 24px;
}
.site-footer--minimal .site-footer__minimal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer--minimal .site-footer__minimal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
}

/* =============================================================
   PATTERN SFONDI aggiuntivi
   ============================================================= */
.has-mesh-bg { position: relative; isolation: isolate; }
.has-mesh-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(at 27% 37%, var(--accent-glow) 0px, transparent 50%),
    radial-gradient(at 97% 21%, rgba(168, 85, 247, 0.18) 0px, transparent 50%),
    radial-gradient(at 52% 99%, rgba(6, 182, 212, 0.18) 0px, transparent 50%),
    radial-gradient(at 10% 29%, rgba(244, 63, 94, 0.10) 0px, transparent 50%),
    radial-gradient(at 97% 96%, rgba(16, 185, 129, 0.12) 0px, transparent 50%);
  opacity: 0.85;
}

.has-dot-pattern { position: relative; isolation: isolate; }
.has-dot-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%);
}

.has-grid-pattern { position: relative; isolation: isolate; }
.has-grid-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%);
}

/* Animated gradient border via @property — Metodo bonus 3.B.3 */
@property --lampo-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.has-gradient-border {
  position: relative;
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  isolation: isolate;
}
.has-gradient-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--lampo-angle), var(--accent), transparent 30%, var(--accent) 60%, transparent 90%);
  -webkit-mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: lampo-rotate 4s linear infinite;
}
@keyframes lampo-rotate {
  to { --lampo-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .has-gradient-border::before { animation: none; }
}

/* Card spotlight (mouse-aware) */
.card--spotlight { position: relative; isolation: isolate; }
.card--spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle 240px at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity 300ms ease;
}
.card--spotlight:hover::after { opacity: 1; }

/* =============================================================
   CARD variants — article, team, feature, testimonial, pricing
   ============================================================= */
.card--article {
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}
.card--article .card__visual {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--accent-soft), rgba(6,182,212,0.12));
}
.card--article .card__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, var(--accent-glow), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(6,182,212,0.20), transparent 60%);
  transition: transform var(--dur-slow) var(--ease-out-quart);
}
.card--article:hover .card__visual::before { transform: scale(1.06); }
.card--article .card__body { padding: 24px; display: grid; gap: 12px; align-content: start; }
.card--article .card__category {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-full);
}
.card--article .card__meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.card--team {
  text-align: center;
  padding: 32px 24px;
}
.card--team .card__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #06b6d4));
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 auto 16px;
  transition: transform var(--dur-base) var(--ease-spring);
}
.card--team:hover .card__avatar { transform: scale(1.05) rotate(-3deg); }
.card--team .card__title { font-size: 1.125rem; margin-bottom: 4px; }
.card--team .card__role { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.card--team .card__socials {
  display: inline-flex;
  gap: 12px;
  margin-top: 8px;
}
.card--team .card__socials a {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all var(--dur-base) var(--ease-out-quart);
}
.card--team .card__socials a:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
}

.card--feature .card__icon-large {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), rgba(6,182,212,0.20));
  color: var(--accent);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  transition: transform var(--dur-base) var(--ease-spring);
}
.card--feature:hover .card__icon-large { transform: rotate(-6deg) scale(1.05); }

/* =============================================================
   SECTION variants — bleed, columns, asymmetric
   ============================================================= */
.section--bleed > .container--full {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
.section--bleed .bleed-media {
  width: 100%;
  aspect-ratio: 21/9;
  background: linear-gradient(135deg, #1e293b, #334155);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.section--bleed .bleed-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, var(--accent-glow), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(6,182,212,0.30), transparent 50%);
}

.section--columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .section--columns--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .section--columns--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .section--columns--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .section--columns--4 { grid-template-columns: repeat(4, 1fr); } }

.split--asymmetric {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 1024px) {
  .split--asymmetric { grid-template-columns: 38% 1fr; }
  .split--asymmetric.split--reverse { grid-template-columns: 1fr 38%; }
}

/* =============================================================
   FORMS — floating label, inline validation, GDPR checkbox
   ============================================================= */
.form-stack {
  display: grid;
  gap: 20px;
  max-width: 560px;
}
.form-field {
  position: relative;
  display: grid;
  gap: 6px;
}
.form-field__label {
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 15px;
  color: var(--text-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) ease;
  background: var(--bg-elev);
  padding: 0 6px;
}
.form-field__input,
.form-field__textarea,
.form-field__select {
  width: 100%;
  padding: 18px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.form-field__textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}
.form-field__input:focus,
.form-field__textarea:focus,
.form-field__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Floating label trigger: when input has content or is focused */
.form-field__input:focus ~ .form-field__label,
.form-field__input:not(:placeholder-shown) ~ .form-field__label,
.form-field__textarea:focus ~ .form-field__label,
.form-field__textarea:not(:placeholder-shown) ~ .form-field__label {
  transform: translateY(-26px) scale(0.85);
  color: var(--accent);
}

/* Validation states */
.form-field__input[aria-invalid="true"],
.form-field__textarea[aria-invalid="true"] {
  border-color: #dc2626;
}
.form-field__input[aria-invalid="true"] ~ .form-field__label,
.form-field__textarea[aria-invalid="true"] ~ .form-field__label {
  color: #dc2626;
}
.form-field__error {
  font-size: 13px;
  color: #dc2626;
  display: none;
}
.form-field__input[aria-invalid="true"] ~ .form-field__error,
.form-field__textarea[aria-invalid="true"] ~ .form-field__error {
  display: block;
}

/* Layout 2-col per nome+cognome o citta+cap */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* GDPR checkbox custom */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}
.form-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.form-checkbox__box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  margin-top: 2px;
  background: var(--bg-elev);
  display: grid;
  place-items: center;
  transition: all var(--dur-base) var(--ease-out-quart);
}
.form-checkbox input:checked ~ .form-checkbox__box {
  background: var(--accent);
  border-color: var(--accent);
}
.form-checkbox__box::after {
  content: "";
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--dur-base) var(--ease-spring);
}
.form-checkbox input:checked ~ .form-checkbox__box::after {
  opacity: 1;
  transform: scale(1);
}
.form-checkbox a { color: var(--accent); text-decoration: underline; }

.form-submit {
  margin-top: 8px;
}
.form-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Newsletter inline (riga singola con input + button) */
.form-newsletter-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 540px;
}
.form-newsletter-inline input[type="email"] {
  flex: 1 1 240px;
  padding: 14px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.form-newsletter-inline input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Newsletter standalone block */
.newsletter-block {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.newsletter-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, var(--accent-soft), transparent 60%);
}
.newsletter-block h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.newsletter-block p {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 24px;
}
.newsletter-block .form-newsletter-inline {
  margin: 0 auto;
}

/* =============================================================
   CTA inline + sticky-mobile
   ============================================================= */
.cta-inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
@media (min-width: 768px) {
  .cta-inline { grid-template-columns: 1fr auto; gap: 32px; }
}
.cta-inline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 100% at 100% 50%, var(--accent-soft), transparent 60%);
}
.cta-inline h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.cta-inline p {
  font-size: 15px;
  color: var(--text-muted);
}

.cta-sticky-mobile {
  display: none;
}
@media (max-width: 767.98px) {
  .cta-sticky-mobile {
    display: block;
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 90;
    transform: translateY(100px);
    transition: transform var(--dur-base) var(--ease-out-quart);
  }
  .cta-sticky-mobile.is-visible {
    transform: translateY(0);
  }
  .cta-sticky-mobile a {
    box-shadow: 0 8px 32px rgba(0,0,0,0.20);
  }
}

/* =============================================================
   TABS / SEGMENTED CONTROL
   ============================================================= */
.tabs {
  display: grid;
  gap: 24px;
}
.tabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  margin: 0 auto;
}
.tabs__list[role="tablist"] {
  list-style: none;
}
.tabs__btn {
  padding: 10px 20px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.tabs__btn[aria-selected="true"] {
  background: var(--text);
  color: var(--bg);
}
.tabs__btn:not([aria-selected="true"]):hover {
  color: var(--text);
}
.tabs__panel {
  display: none;
  padding: 32px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.tabs__panel[data-active="true"] {
  display: block;
  animation: tabs-fade 280ms var(--ease-out-quart);
}
@keyframes tabs-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   MODAL / DIALOG (HTML5 native)
   ============================================================= */
dialog.lampo-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(560px, 92vw);
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
dialog.lampo-dialog::backdrop {
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
dialog.lampo-dialog[open] {
  animation: dialog-pop 320ms var(--ease-spring);
}
@keyframes dialog-pop {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.dialog-content {
  background: var(--bg-elev);
  padding: 40px 32px 32px;
  position: relative;
  border-radius: var(--radius-xl);
}
.dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: all var(--dur-base) var(--ease-out-quart);
}
.dialog-close:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  transform: rotate(90deg);
}
.dialog-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.dialog-content p {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.55;
}

/* =============================================================
   KK NAV — Super Tribe Menu (numerazione contrade + tribe-mark)
   ============================================================= */

/* DESKTOP — orientamento orizzontale, voci con numero sopra label */
.kk-nav {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.4vw, 32px);
}

.kk-nav__item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 4px 0 8px;
  text-decoration: none;
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-brand),
              transform var(--dur-base) var(--ease-brand);
}

.kk-nav__num {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
  line-height: 1;
  margin-bottom: 4px;
  transition: color var(--dur-base) var(--ease-brand),
              transform var(--dur-base) var(--ease-brand);
}

.kk-nav__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* External link icon (Shop ↗) */
.kk-nav__ext {
  width: 0.85em;
  height: 0.85em;
  margin-left: 2px;
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-brand),
              transform var(--dur-base) var(--ease-brand);
}

/* Tribe-mark sull'attiva — riusa stile compass-rotate */
.kk-nav__mark {
  width: 0.85em;
  height: 0.85em;
  color: var(--accent);
  flex-shrink: 0;
  transform-origin: center;
  animation: compass-rotate 30s linear infinite;
  filter: drop-shadow(0 0 4px rgba(230, 7, 113, 0.4));
  will-change: transform;
}

/* Underline expand-from-center */
.kk-nav__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 280ms var(--ease-brand-out);
}

/* HOVER state */
.kk-nav__item:hover {
  color: var(--text-heading);
  transform: translateY(-1px);
}
.kk-nav__item:hover .kk-nav__num {
  color: var(--text-heading);
}
.kk-nav__item:hover .kk-nav__ext {
  opacity: 1;
  transform: translate(1px, -1px);
}
.kk-nav__item:hover::after {
  transform: scaleX(1);
}
.kk-nav__item:hover .kk-nav__mark {
  animation-duration: 4s;
}

/* ACTIVE (current page) */
.kk-nav__item.is-current {
  color: var(--text-heading);
}
.kk-nav__item.is-current .kk-nav__num {
  color: var(--accent);
  font-weight: 700;
}
.kk-nav__item.is-current .kk-nav__label {
  font-weight: 700;
}
.kk-nav__item.is-current::after {
  transform: scaleX(1);
}

/* FOCUS visible */
.kk-nav__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Mostra/nascondi nav per breakpoint */
.site-header__nav {
  display: none;
}
@media (min-width: 1024px) {
  .site-header__nav { display: flex; }
}

/* Top header — niente numerazione, label+mark in linea (no flex column) */
.site-header__nav .kk-nav__num {
  display: none;
}
.site-header__nav .kk-nav__item {
  flex-direction: row;
  align-items: center;
  gap: 0.35em;
  padding: 8px 0 10px;
}
.site-header__nav .kk-nav__label {
  line-height: 1;
}
.site-header__nav .kk-nav__ext {
  display: inline-block;
  vertical-align: middle;
}

/* =============================================================
   HAMBURGER → ASTERISCO (3 lineette si trasformano in 6 raggi)
   ============================================================= */
.site-header__hamburger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 60px;
  height: 60px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 110;
  color: var(--text);
  transition: color var(--dur-base) var(--ease-brand);
}
@media (min-width: 1024px) {
  .site-header__hamburger { display: none; }
}

/* 3 lineette base — burger classico, sottile */
.site-header__hamburger span {
  display: block;
  width: 30px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 420ms var(--ease-out-quart),
              opacity 200ms ease,
              background-color 220ms ease;
  transform-origin: center center;
}
/* gap controllato dal parent flex (era margin-top con grid) */

/* Pseudo-elementi per i 3 raggi extra che formeranno l'asterisco */
.site-header__hamburger::before,
.site-header__hamburger::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: translate(-50%, -50%) scaleX(0) rotate(60deg);
  transform-origin: center center;
  transition: transform 420ms var(--ease-out-quart),
              opacity 220ms ease;
  opacity: 0;
}
.site-header__hamburger::after {
  transform: translate(-50%, -50%) scaleX(0) rotate(120deg);
}

/* OPEN state — 3 lineette ruotano + 3 pseudo appaiono = asterisco a 6 raggi */
.site-header__hamburger[aria-expanded="true"] {
  color: var(--accent);
}
.site-header__hamburger[aria-expanded="true"] span {
  background: var(--accent);
}
.site-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(0deg);
}
.site-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  transform: rotate(90deg);
}
.site-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(0deg);
}
.site-header__hamburger[aria-expanded="true"]::before,
.site-header__hamburger[aria-expanded="true"]::after {
  opacity: 1;
}
.site-header__hamburger[aria-expanded="true"]::before {
  transform: translate(-50%, -50%) scaleX(1) rotate(60deg);
}
.site-header__hamburger[aria-expanded="true"]::after {
  transform: translate(-50%, -50%) scaleX(1) rotate(120deg);
}

/* =============================================================
   DRAWER MOBILE — full-screen takeover dark
   ============================================================= */
.site-header__cta { display: none; }
@media (min-width: 1024px) {
  .site-header__cta { display: inline-flex; }
}

.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 6vw, 48px) clamp(28px, 7vw, 56px);
  background: var(--bg-dark);
  color: var(--text-inverse);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  isolation: isolate;
  transition: opacity 320ms var(--ease-out-quart),
              visibility 320ms;
}
.site-drawer[data-open="true"] {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

/* Drawer close button (top-right) */
.site-drawer__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  transition: transform 280ms var(--ease-brand);
}
.site-drawer__close:hover {
  transform: rotate(90deg);
}
.site-drawer__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* DRAWER nav — voci tipografiche giant + numerazione I-VII */
.kk-nav--drawer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.5vh, 18px);
  width: 100%;
  z-index: 2;
}
.kk-nav--drawer .kk-nav__item {
  flex-direction: row;
  align-items: baseline;
  gap: clamp(12px, 2.5vw, 28px);
  padding: clamp(8px, 1.4vh, 16px) 0;
  color: var(--text-inverse);
  transform: translateX(0);
  transition: transform 320ms var(--ease-out-quart),
              color var(--dur-base) var(--ease-brand);
}
.kk-nav--drawer .kk-nav__num {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 2.4vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(250, 250, 247, 0.4);
  margin-bottom: 0;
  min-width: clamp(36px, 6vw, 56px);
}
.kk-nav--drawer .kk-nav__label {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--text-inverse);
}
.kk-nav--drawer .kk-nav__mark {
  width: 0.6em;
  height: 0.6em;
}
.kk-nav--drawer .kk-nav__ext {
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.2em;
  vertical-align: middle;
}
.kk-nav--drawer .kk-nav__item::after {
  display: none;
}
/* Hover on drawer = drift right + lime */
.kk-nav--drawer .kk-nav__item:hover {
  color: var(--accent);
  transform: translateX(8px);
}
.kk-nav--drawer .kk-nav__item:hover .kk-nav__num {
  color: var(--accent);
}
.kk-nav--drawer .kk-nav__item:hover .kk-nav__label {
  color: var(--accent);
}
.kk-nav--drawer .kk-nav__item.is-current .kk-nav__label,
.kk-nav--drawer .kk-nav__item.is-current .kk-nav__num {
  color: var(--accent);
}

/* Stagger entrance — opacity 0 + slide-up, sfasati */
.site-drawer[data-open="true"] .kk-nav--drawer .kk-nav__item {
  animation: kkDrawerItemIn 480ms var(--ease-out-quart) backwards;
}
.site-drawer[data-open="true"] .kk-nav--drawer .kk-nav__item:nth-child(1) { animation-delay: 60ms; }
.site-drawer[data-open="true"] .kk-nav--drawer .kk-nav__item:nth-child(2) { animation-delay: 110ms; }
.site-drawer[data-open="true"] .kk-nav--drawer .kk-nav__item:nth-child(3) { animation-delay: 160ms; }
.site-drawer[data-open="true"] .kk-nav--drawer .kk-nav__item:nth-child(4) { animation-delay: 210ms; }
.site-drawer[data-open="true"] .kk-nav--drawer .kk-nav__item:nth-child(5) { animation-delay: 260ms; }
.site-drawer[data-open="true"] .kk-nav--drawer .kk-nav__item:nth-child(6) { animation-delay: 310ms; }
.site-drawer[data-open="true"] .kk-nav--drawer .kk-nav__item:nth-child(7) { animation-delay: 360ms; }
.site-drawer[data-open="true"] .kk-nav--drawer .kk-nav__item:nth-child(8) { animation-delay: 410ms; }
@keyframes kkDrawerItemIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* DRAWER footer — CTA tessera + social links */
.site-drawer__footer {
  margin-top: clamp(20px, 4vh, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 2;
}
.site-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--accent);
  color: var(--text-heading);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  width: fit-content;
  max-width: 100%;
  transition: transform var(--dur-base) var(--ease-brand),
              box-shadow var(--dur-base) var(--ease-brand);
}
.site-drawer__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(230, 7, 113, 0.45);
}
.site-drawer__cta__price {
  font-weight: 700;
  padding-left: 12px;
  border-left: 1px solid rgba(10, 10, 10, 0.25);
}
.site-drawer__social {
  display: flex;
  gap: 18px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.site-drawer__social a {
  color: rgba(250, 250, 247, 0.55);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-brand);
  padding: 4px 0;
}
.site-drawer__social a:hover {
  color: var(--accent);
}

/* DRAWER decor — monogramma rotante giant in basso-dx */
.site-drawer__decor {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: clamp(220px, 50vw, 360px);
  height: clamp(220px, 50vw, 360px);
  color: var(--accent);
  opacity: 0.18;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 32px rgba(230, 7, 113, 0.3));
}

/* No drawer su desktop ≥1024 */
@media (min-width: 1024px) {
  .site-drawer { display: none; }
}

/* =============================================================
   STICKY CAPSULE — pill-shaped nav che appare quando il top header
   esce dal viewport (IntersectionObserver lato JS).
   ============================================================= */
.site-capsule {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  padding: 6px 6px 6px 14px;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(250, 250, 247, 0.08);
  border-radius: 9999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
              0 2px 4px rgba(0, 0, 0, 0.1);
  /* Hidden by default — fade+slide-in when .is-visible */
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -16px);
  transition: opacity 350ms var(--ease-brand-out),
              transform 400ms var(--ease-brand-out);
}
.site-capsule.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Brand monogram (lime acid direttamente, no sfondo, più grande) */
.site-capsule__brand {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--accent);
  flex-shrink: 0;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-brand);
  filter: drop-shadow(0 0 8px rgba(230, 7, 113, 0.45));
}
.site-capsule__brand:hover {
  transform: scale(1.08);
}
.site-capsule__compass {
  width: 30px;
  height: 30px;
}

/* Capsule nav — same kk-nav system but compact (no number/no underline-bar) */
.site-capsule__nav {
  display: none;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
}
@media (min-width: 1024px) {
  .site-capsule__nav { display: inline-flex; }
}

.kk-nav--capsule .kk-nav__item {
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 4px 0;
  color: rgba(250, 250, 247, 0.7);
  transform: none;
}
.kk-nav--capsule .kk-nav__num {
  display: none; /* niente numerazione nella capsule */
}
.kk-nav--capsule .kk-nav__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}
.kk-nav--capsule .kk-nav__mark {
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.35em;
}
.kk-nav--capsule .kk-nav__ext {
  width: 0.7em;
  height: 0.7em;
  margin-left: 2px;
  opacity: 0.6;
}
.kk-nav--capsule .kk-nav__item::after {
  display: none;
}
.kk-nav--capsule .kk-nav__item:hover {
  color: var(--accent);
  transform: none;
}
.kk-nav--capsule .kk-nav__item.is-current {
  color: var(--accent);
}

/* Capsule CTA "Entra €30" */
.site-capsule__cta {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 14px;
  background: var(--accent);
  color: var(--text-heading);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-brand),
              box-shadow var(--dur-base) var(--ease-brand);
}
@media (min-width: 1024px) {
  .site-capsule__cta { display: inline-flex; }
}
.site-capsule__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(230, 7, 113, 0.5);
}
.site-capsule__cta__price {
  font-weight: 700;
  padding-left: 8px;
  border-left: 1px solid rgba(10, 10, 10, 0.25);
}
.site-capsule__cta .tribe-mark,
.site-capsule__cta .tribe-mark__word,
.site-capsule__cta .tribe-mark__icon {
  color: var(--text-heading);
}
.site-capsule__cta .tribe-mark {
  font-style: italic;
  font-weight: 700;
}
.site-capsule__cta .tribe-mark__icon {
  width: 0.75em;
  height: 0.75em;
}

/* Capsule hamburger (mobile only) — coerente con site-header__hamburger ma proporzionato */
.site-capsule__hamburger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: var(--text-inverse);
}
@media (min-width: 1024px) {
  .site-capsule__hamburger { display: none; }
}
.site-capsule__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 320ms var(--ease-out-quart),
              opacity 200ms ease;
}
.site-capsule__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.site-capsule__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-capsule__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile capsule = solo monogramma + hamburger (no nav, no CTA) */
@media (max-width: 1023px) {
  .site-capsule {
    padding: 5px 8px 5px 8px;
    gap: 12px;
  }
}

/* prefers-reduced-motion: niente stagger, niente rotazioni */
@media (prefers-reduced-motion: reduce) {
  .kk-nav--drawer .kk-nav__item,
  .site-drawer[data-open="true"] .kk-nav--drawer .kk-nav__item,
  .kk-nav__item,
  .kk-nav__item::after,
  .kk-nav__mark,
  .site-header__hamburger span,
  .site-header__hamburger::before,
  .site-header__hamburger::after,
  .site-drawer__close,
  .site-drawer__cta,
  .site-capsule,
  .site-capsule__brand,
  .site-capsule__cta,
  .site-capsule__hamburger span {
    animation: none !important;
    transition-duration: 100ms !important;
  }
}

/* =============================================================
   SHOWCASE meta block (per la pagina demo del template)
   ============================================================= */
.showcase-block {
  padding-block: clamp(64px, 8vw, 96px);
  border-top: 1px dashed var(--border);
}
.showcase-block:first-of-type { border-top: 0; }
.showcase-block__label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 32px;
}
.showcase-block__num {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 13px;
  color: var(--text-subtle);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.showcase-block__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.showcase-block__caption {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 400;
}

/* TOC sticky lateralmente (desktop solo) */
.showcase-toc {
  display: none;
  position: fixed;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 50;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 8px;
  font-size: 12px;
  max-height: 70vh;
  overflow-y: auto;
}
@media (min-width: 1280px) {
  .showcase-toc { display: block; }
}
.showcase-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.showcase-toc a {
  display: block;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--dur-fast) ease;
}
.showcase-toc a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.showcase-toc a[aria-current="true"] {
  background: var(--text);
  color: var(--bg);
}

/* Sample sezioni columns demo */
.showcase-col-cell {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}
.showcase-col-cell strong { display: block; color: var(--text); margin-bottom: 4px; font-size: 1rem; }

/* =============================================================
   TESTIMONIAL VARIANTI (estese da quelle base)
   ============================================================= */
/* (le base sono in critical/main core: --with-metric)
   Variante Google review */
.testimonial-card--google { padding: 24px; }
.testimonial-card--google .testimonial-card__google-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.testimonial-card--google .testimonial-card__google-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-card--google .testimonial-card__date {
  font-size: 12px;
  color: var(--text-subtle);
  margin: 0;
}
.testimonial-card--google .testimonial-card__google-logo {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: white;
  box-shadow: 0 0 0 1px var(--border);
  font-weight: 700;
  font-size: 16px;
  background-image: linear-gradient(45deg, #4285F4 0% 25%, #DB4437 25% 50%, #F4B400 50% 75%, #0F9D58 75% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.testimonial-card--google .testimonial-card__stars { display: inline-flex; gap: 2px; margin: 8px 0 12px; }
.testimonial-card--google .testimonial-card__stars .star {
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FBBC04'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.testimonial-card--google .testimonial-card__quote {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Variante Video testimonial */
.testimonial-video {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) ease,
              box-shadow var(--dur-base) ease;
}
.testimonial-video:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 24px 48px rgba(0,0,0,0.10);
}
.testimonial-video__thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  padding: 0;
}
.testimonial-video__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), transparent 50%),
    radial-gradient(circle at 70% 70%, var(--accent-glow), transparent 60%);
}
.testimonial-video__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%);
}
.testimonial-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: grid;
  place-items: center;
  z-index: 1;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.testimonial-video__play::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--text);
  margin-left: 4px;
}
.testimonial-video:hover .testimonial-video__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: white;
}
.testimonial-video__duration {
  position: absolute;
  bottom: 12px; right: 12px;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  z-index: 1;
}
.testimonial-video__body {
  padding: 24px;
  display: grid;
  gap: 16px;
}
.testimonial-video__quote {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ============================================================================
   KING KENDZE — Stili custom brand-specific
   Aggiunti dopo gli stili Lampo3 base (sovrascrivono dove serve).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   ANIMAZIONE SIGNATURE — La Bussola
   ---------------------------------------------------------------------------- */
.signature-compass {
  --rotation-speed: 30s;
  display: inline-block;
  transform-origin: center;
  contain: layout style;
  isolation: isolate;
  will-change: transform;
  line-height: 0;
  animation: compass-rotate var(--rotation-speed) linear infinite;
}
.signature-compass svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes compass-rotate {
  to { transform: rotate(360deg); }
}

/* Hover acceleration (in cards / CTA) */
.service-card:hover .signature-compass,
.btn:hover ~ .signature-compass,
.site-header__brand:hover .signature-compass {
  --rotation-speed: 4s;
}

/* Click snap + glow */
.signature-compass.is-clicked {
  animation: compass-snap 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards,
             compass-glow 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes compass-snap {
  0%   { transform: rotate(0); }
  60%  { transform: rotate(72deg) scale(1.05); }
  100% { transform: rotate(60deg) scale(1); }
}
@keyframes compass-glow {
  0%   { filter: drop-shadow(0 0 0 var(--accent)); }
  40%  { filter: drop-shadow(0 0 16px var(--accent)); }
  100% { filter: drop-shadow(0 0 0 var(--accent)); }
}

@media (prefers-reduced-motion: reduce) {
  .signature-compass {
    animation: none !important;
  }
}

/* ----------------------------------------------------------------------------
   TRIBE MARK — verbal-visual hammer (parola "tribe" + monogramma rotante inline)
   Ovunque appare la parola "tribe" in posizione prominente, viene affiancata
   dal monogramma KK animato. Cementa il legame parola↔simbolo.
   ---------------------------------------------------------------------------- */
.tribe-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  white-space: nowrap;
  font-style: italic;
  font-weight: inherit;
  color: var(--accent);
}
.tribe-mark__word {
  display: inline;
  /* Stroke nero per visibilità su sfondo chiaro (default).
     Su contesti dark/lime CTA si overridduce a 0 più sotto. */
  -webkit-text-stroke: 1px var(--text-heading);
  paint-order: stroke fill;
}
/* Override stroke per contesti dove tribe-mark è già visibile (lime su nero, nero su lime, hero dark) */
.hero-home .tribe-mark__word,
.site-capsule__cta .tribe-mark__word,
.site-header__cta .tribe-mark__word,
.section--enemy .tribe-mark__word,
.section--numbers .tribe-mark__word,
.benefit-card--wide-dark .tribe-mark__word,
.events-cta .tribe-mark__word,
.pricing-extra .tribe-mark__word,
.section--target-hero .tribe-mark__word {
  -webkit-text-stroke: 0;
}
.tribe-mark__icon {
  --rotation-speed: 30s;
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  align-self: center;
  transform-origin: center;
  color: var(--accent);
  animation: compass-rotate var(--rotation-speed) linear infinite;
  /* Bordo nero (4 drop-shadow direzionali) + glow lime — visibile su chiaro e su scuro */
  filter:
    drop-shadow(0.8px 0 0 var(--text-heading))
    drop-shadow(-0.8px 0 0 var(--text-heading))
    drop-shadow(0 0.8px 0 var(--text-heading))
    drop-shadow(0 -0.8px 0 var(--text-heading))
    drop-shadow(0 0 4px rgba(230, 7, 113, 0.35));
  will-change: transform;
}
/* Override stroke nero su contesti dove il monogram è già visibile (su nero / su lime CTA) */
.hero-home .tribe-mark__icon,
.site-capsule__cta .tribe-mark__icon,
.site-header__cta .tribe-mark__icon,
.section--enemy .tribe-mark__icon,
.section--numbers .tribe-mark__icon,
.benefit-card--wide-dark .tribe-mark__icon,
.events-cta .tribe-mark__icon,
.pricing-extra .tribe-mark__icon,
.section--target-hero .tribe-mark__icon {
  filter: drop-shadow(0 0 4px rgba(230, 7, 113, 0.35));
}
.tribe-mark:hover .tribe-mark__icon,
a:hover .tribe-mark .tribe-mark__icon,
.btn:hover .tribe-mark .tribe-mark__icon {
  --rotation-speed: 4s;
}

/* Quando appare dentro un button/CTA con sfondo lime (resting state),
   il monogramma deve essere nero per contrasto */
.btn--primary .tribe-mark,
.btn--primary .tribe-mark__icon,
.form-submit .tribe-mark,
.form-submit .tribe-mark__icon {
  color: var(--text-heading);
  filter: none;
}

/* Quando appare dentro testo già accent (es. enfasi <em> dentro hero),
   evita doppio accent — usa text-heading come contrasto */
.hero-home__heading em .tribe-mark,
.hero-home__heading em .tribe-mark__word {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .tribe-mark__icon {
    animation: none !important;
  }
}

/* ----------------------------------------------------------------------------
   ICON SET — Lucide-style line icons (sostituisce le emoji)
   Sprite caricato in header.php via kingkendze_icons_sprite()
   Use: <?php kingkendze_icon('star', ['size' => '1em']); ?>
   ---------------------------------------------------------------------------- */
.kk-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  color: currentColor;
}

/* Star — color rosa TRIBE (#e60771) by default, ma viene overridden dove serve giallo Google */
.kk-icon--star {
  color: var(--accent);
  vertical-align: -0.18em;
  /* Bordo nero su rosa per visibilità su sfondo chiaro (drop-shadow 4-direzionale).
     text-stroke non si applica a SVG fill, drop-shadow simula contorno. */
  filter:
    drop-shadow(0.8px 0 0 var(--text-heading))
    drop-shadow(-0.8px 0 0 var(--text-heading))
    drop-shadow(0 0.8px 0 var(--text-heading))
    drop-shadow(0 -0.8px 0 var(--text-heading));
}
/* Su contesti dark, niente stroke (le stelle lime sono già visibili) */
.hero-home .kk-icon--star,
.testimonial .kk-icon--star,
.section--numbers .kk-icon--star {
  filter: none;
}

/* Stars container — gruppi di 5 stelle inline, gap consistente */
.stars,
.stars--inline {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--accent);
}

/* Hero social proof — stelle bianche su sfondo dark + numero accanto */
.hero-home__social-proof__stars {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Problem section icons — placeholder narrativi (user/plane/package), nero su crema */
.problem-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-heading);
  margin-bottom: 0.6rem;
}
.problem-item__icon .kk-icon {
  color: var(--text-heading);
  opacity: 0.85;
}

/* Testimonial cite stars — più piccole, color accent */
.testimonial cite .stars--inline,
.discipline__testimonial cite .stars--inline {
  vertical-align: -0.1em;
  margin-inline: 0.2em;
}

/* ----------------------------------------------------------------------------
   HEADER — King Kendze
   ---------------------------------------------------------------------------- */
.site-header__compass {
  width: 56px;
  height: 56px;
}

/* Mobile: padding header ridotto + gap inner più stretto */
@media (max-width: 767px) {
  .site-header {
    padding-inline: 12px;
  }
  .site-header__inner {
    gap: 12px;
  }
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-heading);
}
/* Logo rosa in home page (sia monogram che wordmark "King Kendze") */
body.home .site-header__brand,
body.home .site-capsule__brand { color: var(--accent); }
.site-header__brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {
  .site-header__brand-text { display: none; }
}

/* Header CTA — "Entra nella tribe⚡ €30" — sempre nero, glow lime on hover */
.site-header__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1rem 0.55rem 1.1rem;
  background: var(--text-heading);
  color: var(--text-inverse);
  border: 0;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 220ms var(--ease-brand),
              box-shadow 320ms var(--ease-brand);
  box-shadow: 0 0 0 0 rgba(230, 7, 113, 0);
}
.site-header__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(230, 7, 113, 0.4),
              inset 0 0 0 1px rgba(230, 7, 113, 0.45);
}
.site-header__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.site-header__cta__label {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--text-inverse);
}
.site-header__cta__divider {
  display: inline-block;
  width: 1px;
  height: 1.1em;
  background: rgba(250, 250, 247, 0.3);
  align-self: center;
}
.site-header__cta__price {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-inverse);
}
.site-header__cta .tribe-mark,
.site-header__cta .tribe-mark__word,
.site-header__cta .tribe-mark__icon {
  color: var(--accent);
}
.site-header__cta .tribe-mark__icon {
  --rotation-speed: 30s;
  width: 0.85em;
  height: 0.85em;
  filter: drop-shadow(0 0 4px rgba(230, 7, 113, 0.55));
}
.site-header__cta:hover .tribe-mark__icon {
  --rotation-speed: 4s;
}
@media (max-width: 480px) {
  /* Mobile compact: mantieni "Entra nella TRIBE €30" ma riduci dimensioni */
  .site-header__cta {
    padding: 7px 10px 7px 12px;
    font-size: 0.875rem;
    gap: 6px;
  }
}

/* ----------------------------------------------------------------------------
   HERO HOMEPAGE — full-bleed cinematic (foto immersiva + copy overlay)
   ---------------------------------------------------------------------------- */
.hero-home {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport height — gestisce barra mobile */
  padding-block: 3rem clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  background: var(--bg-dark);
}

/* Foto background full-bleed */
.hero-home__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.hero-home__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
  display: block;
}
@media (max-width: 768px) {
  .hero-home__bg img { object-position: 70% 50%; }
}

/* =============================================================
   HERO CTAs — pattern fisso su tutti gli hero cinematic:
   - Primaria: lime acid stabile (no swipe verso nero)
   - Secondaria: bianca solid stabile (no glassmorphism, no hover-to-lime)
   ============================================================= */
.hero-home .btn--primary {
  background: var(--accent);
  color: var(--text-heading);
  border-color: var(--accent);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
/* Disabilita SOLO il sweep ::before (mai usato per icone) */
.hero-home .btn--primary::before {
  display: none;
}
/* Per il ::after — usato sia dal shadow-lift di btn--primary che dall'icona dei
   btn-icon-X — neutralizza il position:absolute così l'icona resta inline a destra
   del testo nel flex flow naturale. Il shadow-lift effect viene rimosso comunque. */
.hero-home .btn--primary::after {
  position: static;
  inset: auto;
  opacity: 1;
  z-index: auto;
  box-shadow: none;
}
.hero-home .btn--primary:hover::after {
  opacity: 1;
}
.hero-home .btn--primary:hover {
  background: var(--accent-light);
  color: var(--text-heading);
  border-color: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(230, 7, 113, 0.45),
              0 2px 0 rgba(0, 0, 0, 0.15);
}

.hero-home .btn--outline,
.hero-home .btn--on-dark {
  background: var(--text-inverse);
  color: var(--text-heading);
  border-color: var(--text-inverse);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
/* Disabilita sweep ::before, ma preserva ::after se è icona (btn-icon-X) */
.hero-home .btn--outline::before,
.hero-home .btn--on-dark::before {
  display: none;
}
.hero-home .btn--outline::after,
.hero-home .btn--on-dark::after {
  position: static;
  inset: auto;
  opacity: 1;
  z-index: auto;
  box-shadow: none;
}
.hero-home .btn--outline:hover,
.hero-home .btn--on-dark:hover {
  background: rgba(250, 250, 247, 0.95);
  color: var(--text-heading);
  border-color: var(--text-inverse);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28),
              0 2px 0 rgba(0, 0, 0, 0.1);
}

/* Hero CTA icons — sempre nere (compatibili sia con primaria lime che secondaria bianca).
   Forza con filter:brightness(0) — cattura sia gli SVG con stroke bianco che nero.
   Override anche su :hover per sovrascrivere eventuali cambi di background-image. */
.hero-home .btn[class*="btn-icon-"]::after,
.hero-home .btn[class*="btn-icon-"]:hover::after {
  filter: brightness(0) !important;
  -webkit-filter: brightness(0) !important;
}

/* Modifier per pagine interne — min-height 100vh come la home */
.hero-home--viaggi,
.hero-home--lezioni,
.hero-home--negozio,
.hero-home--tesseramento,
.hero-home--chi-siamo {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Hero CTA centered (es. lead magnet quiz, sezione interna del flusso) */
.hero-home--cta {
  min-height: clamp(440px, 70vh, 640px);
  text-align: center;
}
.hero-home--cta .hero-home__inner {
  display: flex;
  justify-content: center;
}
.hero-home--cta .hero-home__content {
  max-width: 720px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}
.hero-home--cta .hero-home__kicker {
  justify-content: center;
}
.hero-home--cta .hero-home__cta-group {
  justify-content: center;
  align-self: center;
}
.hero-home--cta .cta-reassurance {
  text-align: center;
}
.hero-home--cta .hero-home__bg img {
  object-position: center 50%;
}
/* Sfumatura più simmetrica per layout centrato */
.hero-home--cta::before {
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.55) 0%,
      rgba(10, 10, 10, 0.65) 50%,
      rgba(10, 10, 10, 0.75) 100%);
}

/* Object-position per ogni foto bridge (foto verticali e orizzontali diverse) */
.hero-home--viaggi .hero-home__bg img { object-position: 60% 50%; }
.hero-home--lezioni .hero-home__bg img { object-position: 65% 50%; }
.hero-home--negozio .hero-home__bg img { object-position: 50% 50%; }
.hero-home--tesseramento .hero-home__bg img { object-position: 60% 50%; }
.hero-home--chi-siamo .hero-home__bg img { object-position: 65% 50%; }
@media (max-width: 768px) {
  .hero-home--viaggi .hero-home__bg img { object-position: 65% 50%; }
  .hero-home--lezioni .hero-home__bg img { object-position: 70% 50%; }
  .hero-home--tesseramento .hero-home__bg img { object-position: 65% 50%; }
  .hero-home--chi-siamo .hero-home__bg img { object-position: 70% 50%; }
}

/* Breadcrumb in cima all'hero cinematic — su sfondo dark */
.hero-home__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(250, 250, 247, 0.65);
  text-transform: uppercase;
}
.hero-home__breadcrumb a {
  color: rgba(250, 250, 247, 0.85);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-brand);
}
.hero-home__breadcrumb a:hover {
  color: var(--accent);
}
.hero-home__breadcrumb .separator {
  opacity: 0.5;
}
.hero-home__breadcrumb [aria-current="page"] {
  color: var(--accent);
}
/* Overlay scuro per leggibilità — gradient direzionale (più scuro a sx dove c'è il copy) */
.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg,
      rgba(10, 10, 10, 0.78) 0%,
      rgba(10, 10, 10, 0.55) 45%,
      rgba(10, 10, 10, 0.30) 70%,
      rgba(10, 10, 10, 0.55) 100%),
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.20) 0%,
      transparent 30%,
      rgba(10, 10, 10, 0.50) 100%);
}
@media (max-width: 1023px) {
  .hero-home::before {
    background:
      linear-gradient(180deg,
        rgba(10, 10, 10, 0.55) 0%,
        rgba(10, 10, 10, 0.65) 50%,
        rgba(10, 10, 10, 0.85) 100%);
  }
}

/* Monogramma decorativo angolo BR */
.hero-home__compass-decor {
  position: absolute;
  right: clamp(16px, 4vw, 64px);
  bottom: clamp(16px, 4vw, 48px);
  width: clamp(72px, 12vw, 140px);
  height: clamp(72px, 12vw, 140px);
  color: var(--accent);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

/* Inner — single column con copy overlay */
.hero-home__inner {
  position: relative;
  z-index: 2;
  display: block;
}
.hero-home__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 720px;
  color: var(--text-inverse);
}

.hero-home__kicker {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.hero-home__kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--accent);
}

.hero-home__heading {
  font-size: clamp(2.25rem, 5.4vw, 4.75rem);
  line-height: 1.02;
  margin: 0;
  color: var(--text-inverse);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  letter-spacing: -0.015em;
}
.hero-home__heading strong {
  color: var(--accent);
  font-weight: inherit;
}
.hero-home__heading em {
  font-style: italic;
  color: var(--accent);
  font-weight: 800;
}
.hero-home__heading .accent-90 {
  color: rgba(250, 250, 247, 0.55);
  font-weight: 500;
}

.hero-home__sub {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
  color: rgba(250, 250, 247, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.hero-home__sub strong {
  color: var(--text-inverse);
  font-weight: 700;
}

.hero-home__cta-group {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.75rem;
}
@media (min-width: 640px) {
  .hero-home__cta-group { flex-direction: row; flex-wrap: wrap; }
}

/* Outline button su sfondo scuro: bianco + hover lime */
.btn--on-dark {
  border-color: rgba(250, 250, 247, 0.5);
  color: var(--text-inverse);
  background: rgba(250, 250, 247, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  border-color: var(--accent);
  color: var(--text-heading);
  background: var(--accent);
}

.cta-reassurance--on-dark {
  color: rgba(250, 250, 247, 0.68);
}

.hero-home__social-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(250, 250, 247, 0.85);
}
.hero-home__social-proof a {
  color: var(--text-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.hero-home__social-proof a:hover {
  color: var(--accent);
}
.hero-home__social-proof__stars {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media (max-width: 1023px) {
  .hero-home {
    min-height: clamp(520px, 78vh, 720px);
  }
  .hero-home__compass-decor {
    width: 64px;
    height: 64px;
    right: 16px;
    bottom: 16px;
  }
}
@media (max-width: 540px) {
  .hero-home__compass-decor {
    width: 52px;
    height: 52px;
  }
}

/* ----------------------------------------------------------------------------
   TRIBE SPOTS — Mini-gallery "Dove la tribe è stata" (homepage)
   ---------------------------------------------------------------------------- */
.section--tribe-spots {
  padding-block: var(--space-block);
}
.tribe-spots {
  list-style: none;
  margin: 2rem 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .tribe-spots {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2.5rem 0 2rem;
  }
  /* Layout editoriale 2/3 + 1/3 alternato:
     - riga 1: foto 1 (2/3) + foto 2 (1/3)
     - riga 2: foto 3 (1/3) + foto 4 (2/3) */
  .tribe-spots > .tribe-spot:nth-child(1) { grid-column: span 2; }
  .tribe-spots > .tribe-spot:nth-child(2) { grid-column: span 1; }
  .tribe-spots > .tribe-spot:nth-child(3) { grid-column: span 1; }
  .tribe-spots > .tribe-spot:nth-child(4) { grid-column: span 2; }
}
.tribe-spot { margin: 0; }
.tribe-spot__link {
  display: block;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
/* STICKER / GAFFER TAPE — foto naturale + numero romano + tape lime tilt */
.tribe-spot__frame {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-secondary);
  transition: transform 420ms var(--ease-brand-out),
              box-shadow 420ms var(--ease-brand-out);
}

.tribe-spot__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .tribe-spot__frame {
    height: clamp(280px, 30vw, 400px);
  }
  .tribe-spot__media {
    aspect-ratio: auto;
    height: 100%;
  }
}

.tribe-spot__media img {
  transition: transform 700ms var(--ease-brand-out),
              filter 380ms var(--ease-brand);
}

/* Numero romano (I-IV) in alto-sx — connessione al drawer mobile */
.tribe-spot__corner-num {
  position: absolute;
  top: clamp(10px, 1.3vw, 16px);
  left: clamp(10px, 1.3vw, 16px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 9px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  border-radius: 3px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  transition: transform 320ms var(--ease-brand-out);
}

/* Tape lime con scritta in basso-dx — gaffer tape feel */
.tribe-spot__tape {
  position: absolute;
  bottom: clamp(20px, 2.4vw, 30px);
  right: -10px;
  z-index: 3;
  background: var(--accent);
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.75rem, 1vw, 0.9375rem);
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 7px 16px 7px 14px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(15deg);
  transform-origin: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28),
              inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  /* Tape edges leggermente irregolari */
  clip-path: polygon(2% 6%, 98% 0%, 100% 94%, 1% 100%);
  transition: transform 360ms var(--ease-brand-out);
}

/* Tape shake animation al hover */
@keyframes tribeSpotTapeShake {
  0%   { transform: rotate(15deg); }
  25%  { transform: rotate(12.5deg) translateX(-1px); }
  50%  { transform: rotate(17deg) translateX(2px); }
  75%  { transform: rotate(14deg); }
  100% { transform: rotate(15deg); }
}
.tribe-spot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-brand-out),
              filter 380ms var(--ease-brand);
  filter: saturate(0.95);
}
.tribe-spot__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 10, 10, 0.45));
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 380ms var(--ease-brand);
}
/* Hover: zoom + rotation + bordo lime 10px netto + tape shake */
@media (hover: hover) {
  .tribe-spot__link:hover .tribe-spot__frame,
  .tribe-spot__link:focus-visible .tribe-spot__frame {
    transform: translateY(-6px) rotate(-1.5deg);
    box-shadow: 0 0 0 10px var(--accent),
                0 24px 50px -12px rgba(10, 10, 10, 0.32);
  }
  /* Spot pari (2°, 4°): rotation di segno opposto per varietà visiva */
  .tribe-spot:nth-child(even) .tribe-spot__link:hover .tribe-spot__frame,
  .tribe-spot:nth-child(even) .tribe-spot__link:focus-visible .tribe-spot__frame {
    transform: translateY(-6px) rotate(1.5deg);
  }
  .tribe-spot__link:hover .tribe-spot__media img {
    transform: scale(1.10);
    filter: saturate(1.18);
  }
}
.tribe-spot__link:hover .tribe-spot__media::after {
  opacity: 1;
}
.tribe-spot__link:hover .tribe-spot__tape {
  animation: tribeSpotTapeShake 0.45s var(--ease-brand-out);
}
.tribe-spot__link:hover .tribe-spot__corner-num {
  transform: scale(1.08);
}
.tribe-spot__link:focus-visible {
  outline: none;
}
.tribe-spot__caption {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text);
}
.tribe-spot__caption strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  display: block;
}
.tribe-spots__link {
  margin-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .tribe-spot__frame,
  .tribe-spot__media img,
  .tribe-spot__frame::before {
    transition: none !important;
  }
  .tribe-spot__link:hover .tribe-spot__frame {
    transform: none !important;
  }
  .tribe-spot__link:hover .tribe-spot__media img {
    transform: none !important;
  }
}

/* ----------------------------------------------------------------------------
   SOCIAL PROOF BAR
   ---------------------------------------------------------------------------- */
.social-proof-bar {
  background: var(--bg-dark);
  color: var(--text-inverse);
  padding: 1rem 0;
}
.social-proof-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  justify-content: center;
  font-size: 0.875rem;
  font-family: var(--font-body);
}
.social-proof-bar strong {
  color: var(--accent);
  font-size: 1.125rem;
  font-weight: 700;
}

/* ----------------------------------------------------------------------------
   SECTION (generica) — ritmo verticale
   ---------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-section);
  position: relative;
}
.section__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.section__sub {
  font-size: 1.125rem;
  color: var(--text);
  max-width: 60ch;
  margin: 0 0 2rem;
}
.section__lead {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1.5rem;
}
.section--problem .problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-block: 2rem;
}
.problem-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.problem-item__icon {
  font-size: 2rem;
  line-height: 1;
}

/* ----------------------------------------------------------------------------
   SERVIZI (homepage)
   ---------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-auto-rows: 1fr;
  }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(28px, 3vw, 44px) clamp(28px, 2.6vw, 40px);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  isolation: isolate;
  overflow: hidden;
  transition: transform 380ms var(--ease-brand-out),
              box-shadow 380ms var(--ease-brand-out),
              border-color 380ms var(--ease-brand-out);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(10, 10, 10, 0.12),
              0 2px 6px rgba(10, 10, 10, 0.05);
  border-color: var(--border-strong);
}

/* Card "big" (Lezioni) — bg dark con accent gradient lime + monogramma signature */
.service-card--big {
  background: var(--bg-dark);
  background-image:
    radial-gradient(ellipse 70% 70% at 110% 120%, rgba(230, 7, 113, 0.18), transparent 65%),
    linear-gradient(180deg, #1A1A1A 0%, var(--bg-dark) 100%);
  border-color: transparent;
  color: var(--text-inverse);
}
.service-card--big::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
  z-index: 1;
}
.service-card--big:hover {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(230, 7, 113, 0.2),
              0 0 32px rgba(230, 7, 113, 0.12);
  border-color: transparent;
}

/* Head: title + monogramma compass in alto-dx */
.service-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.service-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--text-heading);
}
.service-card--big .service-card__title {
  color: var(--text-inverse);
}

.service-card__compass {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(230, 7, 113, 0.4));
}

/* Quote — pull quote evidenziato, italic + divider lime sotto */
.service-card__quote {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0 0 0.5rem;
  padding-bottom: 1rem;
  color: var(--text-heading);
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.service-card--big .service-card__quote {
  color: var(--accent);
  border-bottom-color: rgba(230, 7, 113, 0.25);
}

/* Body paragraph — più aria di lettura */
.service-card p:not(.service-card__quote) {
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
  color: var(--text);
}
.service-card--big p:not(.service-card__quote) {
  color: rgba(250, 250, 247, 0.78);
}

/* Link arrow "Vai a..." — pinned al fondo per baseline coerente tra card */
.service-card .link-arrow {
  margin-top: auto;
  padding-top: 1rem;
}
.service-card--big .link-arrow {
  color: var(--accent);
}
.service-card--big .link-arrow::after {
  background: var(--accent);
}

/* ----------------------------------------------------------------------------
   USP CARDS
   ---------------------------------------------------------------------------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.usp-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(24px, 2.4vw, 36px) clamp(22px, 2vw, 32px);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 350ms var(--ease-brand-out),
              box-shadow 350ms var(--ease-brand-out),
              border-color 350ms var(--ease-brand-out);
}
.usp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.10);
  border-color: var(--border-strong);
}
.usp-card__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 4.4vw, 4.25rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  -webkit-text-stroke: 3px var(--text-heading);
  paint-order: stroke fill;
  display: block;
  margin-bottom: 0.25rem;
  filter: drop-shadow(0 0 14px rgba(230, 7, 113, 0.22));
}
.usp-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.25rem;
  color: var(--text-heading);
}
.usp-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

/* ----------------------------------------------------------------------------
   TESTIMONIANZE
   ---------------------------------------------------------------------------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
  margin-block: clamp(40px, 5vw, 64px) 1.5rem;
}
@media (min-width: 640px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Card scura come .service-card--big — bg dark + accent lime + shadow layered */
.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: clamp(24px, 2.5vw, 36px) clamp(22px, 2vw, 32px);
  background: var(--bg-dark);
  background-image:
    radial-gradient(ellipse 70% 70% at 110% 120%, rgba(230, 7, 113, 0.16), transparent 65%),
    linear-gradient(180deg, #1A1A1A 0%, var(--bg-dark) 100%);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  isolation: isolate;
  overflow: hidden;
  color: var(--text-inverse);
  transition: transform 380ms var(--ease-brand-out),
              box-shadow 380ms var(--ease-brand-out);
}
.testimonial::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
  z-index: 1;
}
.testimonial:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30),
              0 0 0 1px rgba(230, 7, 113, 0.25),
              0 0 28px rgba(230, 7, 113, 0.10);
}
.testimonial p {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.5;
  font-weight: 500;
  font-style: italic;
  color: rgba(250, 250, 247, 0.92);
  margin: 0;
  letter-spacing: -0.005em;
}
.testimonial cite {
  display: block;
  margin-top: auto;
  padding-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: normal;
  color: rgba(250, 250, 247, 0.6);
  border-top: 1px solid rgba(250, 250, 247, 0.12);
}
.testimonial cite strong {
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.testimonial cite .stars,
.testimonial cite .stars--inline {
  color: var(--accent);
  vertical-align: -0.1em;
  margin-inline: 0.2em;
}
.stars {
  color: var(--accent);
  font-weight: 700;
  -webkit-text-stroke: 1px var(--text-heading);
  margin-right: 0.5rem;
}

/* ----------------------------------------------------------------------------
   LEAD MAGNET
   ---------------------------------------------------------------------------- */
.section--lead-magnet {
  background: var(--bg-secondary);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.section--lead-magnet__compass {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  opacity: 0.08;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   GIANT NUMBERS — le €30, 4, 5, ecc. del Chi Siamo / Tesseramento
   ---------------------------------------------------------------------------- */
.giant-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  -webkit-text-stroke: 4px var(--text-heading);
  paint-order: stroke fill;
  display: block;
  filter: drop-shadow(0 0 18px rgba(230, 7, 113, 0.22));
}
.section--price-hero {
  background: var(--bg-secondary);
  text-align: center;
}
.section--price-hero .kicker {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.section--price-hero .lead {
  font-size: 1.25rem;
  margin: 1rem 0 0.5rem;
}
.section--price-hero .muted {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.section--numbers {
  background: var(--bg-dark);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section--numbers::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle at center,
              rgba(230, 7, 113, 0.10) 0%,
              transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.section--numbers > .container { position: relative; z-index: 1; }
.section--numbers .section__title { color: var(--text-inverse); }
.section__sub--on-dark {
  color: rgba(250, 250, 247, 0.65);
  margin-bottom: 3rem;
  font-size: 1.0625rem;
}

/* GRID 3 colonne × 2 righe — uniforme, scoreboard style */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 2.5rem;
  border-top: 1px solid rgba(230, 7, 113, 0.18);
  border-left: 1px solid rgba(230, 7, 113, 0.18);
}
@media (max-width: 600px) {
  .numbers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.number-cell {
  position: relative;
  padding: clamp(28px, 4vw, 48px) clamp(16px, 2vw, 24px);
  text-align: center;
  border-right: 1px solid rgba(230, 7, 113, 0.18);
  border-bottom: 1px solid rgba(230, 7, 113, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  min-height: clamp(180px, 22vw, 240px);
  transition: background 0.4s ease;
}
.number-cell:hover {
  background: rgba(230, 7, 113, 0.04);
}
.number-cell .giant-number {
  /* Numero singola cifra: dimensione fissa (no clamp) per uniformità tra celle */
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  -webkit-text-stroke: 3px var(--text-heading);
  filter: drop-shadow(0 0 16px rgba(230, 7, 113, 0.28));
  margin: 0;
  line-height: 0.85;
}
.number-cell p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(250, 250, 247, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

/* PUNCH LINE FEATURE — €30 in cella separata sotto */
.number-feature {
  margin-top: 4rem;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
  text-align: center;
  background: linear-gradient(180deg,
              rgba(230, 7, 113, 0.04) 0%,
              rgba(230, 7, 113, 0.10) 100%);
  border: 1px solid rgba(230, 7, 113, 0.35);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.number-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%,
              rgba(230, 7, 113, 0.18) 0%,
              transparent 60%);
  pointer-events: none;
}
.number-feature > * { position: relative; z-index: 1; }
.number-feature__kicker {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(250, 250, 247, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 1.5rem;
}
.giant-number--feature {
  font-size: clamp(5rem, 14vw, 9rem) !important;
  -webkit-text-stroke: 5px var(--text-heading) !important;
  filter: drop-shadow(0 0 32px rgba(230, 7, 113, 0.45)) !important;
  margin: 0 auto !important;
  line-height: 0.85 !important;
}
.number-feature__label {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 700;
  color: var(--text-inverse);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.number-feature__hint {
  margin: 0;
  font-size: 1.0625rem;
  color: rgba(250, 250, 247, 0.72);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

/* ----------------------------------------------------------------------------
   DISCIPLINE (page-lezioni) — card cinematic con foto di sfondo
   ---------------------------------------------------------------------------- */
.disciplines-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 768px) {
  .disciplines-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.discipline-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, 56vh, 600px);
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  color: var(--text-inverse);
  background: var(--bg-dark);
  transition: transform 380ms var(--ease-brand-out),
              box-shadow 380ms var(--ease-brand-out);
}

/* Foto background full-bleed */
.discipline-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.discipline-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-brand-out),
              filter 380ms var(--ease-brand);
  filter: saturate(0.95);
}

/* Object-position custom per ogni foto (cropping ottimale per discipline-card) */
.discipline-card#skate .discipline-card__bg img { object-position: 50% 30%; }
.discipline-card#snow .discipline-card__bg img  { object-position: 60% 30%; }
.discipline-card#surf .discipline-card__bg img  { object-position: 65% 40%; }
.discipline-card#kite .discipline-card__bg img  { object-position: 35% 40%; }

/* Overlay scuro per leggibilità — gradient più scuro in basso (dove c'è il copy) */
.discipline-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.10) 0%,
      rgba(10, 10, 10, 0.55) 45%,
      rgba(10, 10, 10, 0.92) 100%);
}

/* Bordo verticale rimosso 2026-05-05: creava un "taglio" fastidioso, soprattutto
   sulla card surf con accent off-white. La card cinematic non ne ha bisogno. */
.discipline-card::after { display: none; }

/* Hover: zoom + rotation + bordo lime 10px netto */
@media (hover: hover) {
  .discipline-card:hover {
    transform: translateY(-6px) rotate(-1.2deg);
    box-shadow: 0 0 0 10px var(--accent),
                0 28px 56px rgba(0, 0, 0, 0.34);
  }
  /* Card pari (snow, kite): rotation opposta */
  .discipline-card:nth-child(even):hover {
    transform: translateY(-6px) rotate(1.2deg);
  }
  .discipline-card:hover .discipline-card__bg img {
    transform: scale(1.10);
    filter: saturate(1.18);
  }
}

/* Inner content — limita max-width per leggibilità */
.discipline-card__inner {
  position: relative;
  z-index: 2;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Numero romano lime — più piccolo del precedente, più editoriale */
.discipline-card__num {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* Title GIANT — Bricolage display 800 */
.discipline-card__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--text-inverse);
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* Price — pill lime piccola accanto/sotto title */
.discipline-card__price {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 10px;
  background: var(--accent);
  color: var(--text-heading);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 9999px;
  margin: 0;
}

/* Sub — italic Bricolage soft */
.discipline-card__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--accent);
  margin: 0;
}

/* Body — paragraph leggibile su dark */
.discipline-card__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(250, 250, 247, 0.82);
  margin: 0;
}
.discipline-card__body strong {
  color: var(--text-inverse);
  font-weight: 700;
}

/* Quote — pull testimonial inline */
.discipline-card__quote {
  position: relative;
  padding: 0.75rem 0 0 1rem;
  margin: 0.5rem 0 0;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  color: rgba(250, 250, 247, 0.78);
  line-height: 1.4;
}
.discipline-card__quote cite {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .discipline-card,
  .discipline-card__bg img {
    transition: none !important;
  }
  .discipline-card:hover .discipline-card__bg img {
    transform: none !important;
  }
}

/* ----------------------------------------------------------------------------
   LISTINO TABLE
   ---------------------------------------------------------------------------- */
.listino {
  width: 100%;
  max-width: 600px;
  border-collapse: collapse;
  margin-block: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.listino th, .listino td {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.listino th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.listino td {
  font-family: var(--font-body);
  font-size: 1rem;
}

/* ----------------------------------------------------------------------------
   PRICING CARDS (page-lezioni — listino visual)
   3 card con foto sport, prezzo gigante stroke lime, divider, tariffa interna
   ---------------------------------------------------------------------------- */
.pricing-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .pricing-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

.pricing-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--text-heading);
  color: var(--text-inverse);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.4s var(--ease-brand-out),
              box-shadow 0.4s ease;
}
.pricing-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pricing-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.96);
  transition: transform 700ms var(--ease-brand-out),
              filter 380ms var(--ease-brand);
}
.pricing-card--skate .pricing-card__bg img { object-position: 50% 30%; }
.pricing-card--surf  .pricing-card__bg img { object-position: 65% 40%; }
.pricing-card--kite  .pricing-card__bg img { object-position: 35% 40%; }

/* Overlay scuro per leggibilità — gradient dal basso */
.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(10, 10, 10, 0.10) 0%,
              rgba(10, 10, 10, 0.55) 45%,
              rgba(10, 10, 10, 0.94) 100%);
}
.pricing-card__inner {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Sport name (Skate, Surf, Kite) */
.pricing-card__sport {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 1rem;
}

/* "da" small label */
.pricing-card__from {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(250, 250, 247, 0.7);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* Prezzo gigante stroke lime */
.pricing-card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--accent);
  -webkit-text-stroke: 4px var(--text-heading);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 18px rgba(230, 7, 113, 0.34));
  margin: 0 0 0.375rem;
  display: block;
}

/* "/lezione · pubblico" piccola */
.pricing-card__unit {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: rgba(250, 250, 247, 0.72);
  font-weight: 500;
}

/* Divider lime sottile */
.pricing-card__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
              var(--accent) 0%,
              rgba(230, 7, 113, 0.35) 50%,
              transparent 100%);
  margin: 0.5rem 0 1rem;
}

/* Tariffa interna riga finale */
.pricing-card__tariffa {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: rgba(250, 250, 247, 0.85);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pricing-card__tariffa strong {
  color: var(--accent);
  font-weight: 700;
}
.pricing-card__lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(230, 7, 113, 0.15);
  border-radius: 50%;
  color: var(--accent);
  flex-shrink: 0;
}

/* Hover: zoom + rotation + bordo lime 10px (eredita pattern universal foto) */
@media (hover: hover) {
  .pricing-card:hover {
    transform: translateY(-6px) rotate(-1.2deg);
    box-shadow: 0 0 0 10px var(--accent),
                0 28px 56px rgba(0, 0, 0, 0.34);
    z-index: 2;
  }
  .pricing-card:nth-child(even):hover {
    transform: translateY(-6px) rotate(1.2deg);
  }
  .pricing-card:hover .pricing-card__bg img {
    transform: scale(1.10);
    filter: saturate(1.18);
  }
}

/* ---- PRICING EXTRA — card pacchetti custom (riusa events-cta + whatsapp-mock) -- */
.pricing-extra {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(32px, 5vw, 56px);
  background: var(--bg-dark);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pricing-extra::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -15%;
  width: 60%;
  height: 160%;
  background: radial-gradient(circle at center,
              rgba(230, 7, 113, 0.14) 0%,
              transparent 60%);
  z-index: 0;
  pointer-events: none;
}
.pricing-extra > * { position: relative; z-index: 1; }

@media (min-width: 880px) {
  .pricing-extra {
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
  }
}

.pricing-extra__kicker {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.75rem;
}
.pricing-extra__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--text-inverse);
}
.pricing-extra__body {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(250, 250, 247, 0.82);
  margin: 0 0 1.5rem;
  max-width: 46ch;
}
.pricing-extra__body em {
  font-style: italic;
  color: var(--accent);
}

/* ----------------------------------------------------------------------------
   SECTION WHY TRIP (page-viaggi — Perché partire con noi)
   3 reasons inline + testimonial standalone con padding generoso
   ---------------------------------------------------------------------------- */
.section--why-trip {
  padding-block: clamp(80px, 10vw, 140px);
}
.section__title--centered {
  text-align: center;
  text-wrap: balance;
}
.section--why-trip .section__title {
  margin-bottom: 3.5rem;
  max-width: 720px;
  margin-inline: auto;
}
.section--why-trip .kicker--centered {
  max-width: 720px;
  margin-inline: auto;
}

/* 3 reasons inline grid */
.reasons-inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem 0 4rem;
}
@media (min-width: 768px) {
  .reasons-inline {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.reason-card {
  position: relative;
  padding: 2.25rem 1.75rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  isolation: isolate;
  transition: transform 0.4s var(--ease-brand-out),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  overflow: hidden;
}
/* Card centrale featured: dark con accent lime — varietà visiva */
.reason-card--featured {
  background: var(--text-heading);
  border-color: var(--text-heading);
  color: var(--text-inverse);
  position: relative;
}
.reason-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 18%,
              rgba(230, 7, 113, 0.18) 0%,
              transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.reason-card--featured > * { position: relative; z-index: 1; }

/* Numero ghost stroke lime in alto-destra (decorativo) */
.reason-card__num {
  position: absolute;
  top: 0.875rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  -webkit-text-stroke: 3px var(--text-heading);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 14px rgba(230, 7, 113, 0.22));
  z-index: 1;
  pointer-events: none;
  opacity: 0.75;
}
.reason-card--featured .reason-card__num {
  -webkit-text-stroke: 3px var(--bg);
  opacity: 0.92;
  filter: drop-shadow(0 0 18px rgba(230, 7, 113, 0.4));
}

/* Icon-box quadrato (coerente col bento benefit/how-step) */
.reason-card__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--text-heading);
  color: var(--accent);
  border-radius: 12px;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-brand-out);
}
.reason-card__icon-box--lime {
  background: var(--accent);
  color: var(--text-heading);
}
.reason-card:hover .reason-card__icon-box {
  transform: rotate(-8deg) scale(1.06);
}

.reason-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: var(--text-heading);
  /* Spazio a destra per il numero ghost */
  padding-right: 3rem;
}
.reason-card--featured .reason-card__title { color: var(--bg); }

.reason-card__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-body);
}
.reason-card--featured .reason-card__body { color: rgba(255, 255, 255, 0.78); }
.reason-card__body em {
  font-style: italic;
  color: var(--text-heading);
  font-weight: 600;
}
.reason-card--featured .reason-card__body em { color: var(--accent); }
.reason-card__body strong {
  color: var(--text-heading);
  font-weight: 700;
}
.reason-card--featured .reason-card__body strong { color: var(--bg); }

/* Hint footer-like — micro-detail in fondo card */
.reason-card__hint {
  margin: 0.875rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px dashed rgba(10, 10, 10, 0.18);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-display);
  /* Stroke nero su lime per leggibilità su sfondo chiaro */
  -webkit-text-stroke: 1px var(--text-heading);
  paint-order: stroke fill;
}
.reason-card--featured .reason-card__hint {
  border-top-color: rgba(230, 7, 113, 0.30);
  color: var(--accent);
  /* Su card scura: niente stroke (lime già visibile su nero) */
  -webkit-text-stroke: 0;
}

/* Hover unificato — zoom + rotation + bordo lime 10px (universal pattern) */
@media (hover: hover) {
  .reason-card:hover {
    transform: translateY(-6px) rotate(-1.5deg);
    box-shadow: 0 0 0 10px var(--accent),
                0 24px 50px -12px rgba(10, 10, 10, 0.32);
    border-color: var(--accent);
    z-index: 2;
  }
  .reason-card:nth-child(even):hover {
    transform: translateY(-6px) rotate(1.5deg);
  }
}

/* Lead quote intro al testimonial */
.why-trip__lead-quote {
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 2rem auto 1.5rem;
  max-width: 36rem;
}

/* Testimonial standalone — padding generoso e max-width controllata */
.testimonial--standalone {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  font-size: 1.125rem;
  line-height: 1.55;
}
.testimonial--standalone p {
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.testimonial--standalone cite {
  font-size: 0.9375rem;
}

/* ----------------------------------------------------------------------------
   EVENTI (page-negozio) — card "post-it"
   ---------------------------------------------------------------------------- */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-block: 2rem;
}
.event-card {
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 250ms var(--ease-brand);
}
.event-card--rotate-1 { transform: rotate(-0.5deg); }
.event-card--rotate-2 { transform: rotate(0.7deg); }
.event-card--rotate-3 { transform: rotate(-0.3deg); }
.event-card--rotate-4 { transform: rotate(0.4deg); }
.event-card:hover {
  transform: rotate(0) translateY(-3px);
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.10);
}
.event-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------------------
   EVENTS CTA — card dark cinematic con mockup WhatsApp chat
   ---------------------------------------------------------------------------- */
.events-cta {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(32px, 5vw, 56px);
  background: var(--bg-dark);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.events-cta::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -15%;
  width: 60%;
  height: 160%;
  background: radial-gradient(circle at center,
              rgba(230, 7, 113, 0.14) 0%,
              transparent 60%);
  z-index: 0;
  pointer-events: none;
}
.events-cta > * { position: relative; z-index: 1; }

@media (min-width: 880px) {
  .events-cta {
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
  }
}

.events-cta__kicker {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.75rem;
}
.events-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--text-inverse);
}
.events-cta__body {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(250, 250, 247, 0.82);
  margin: 0 0 1.5rem;
  max-width: 46ch;
}
.events-cta__body em {
  font-style: italic;
  color: var(--accent);
}
.events-cta .btn {
  margin-top: 0.25rem;
}

/* ---- WhatsApp mock chat preview --------------------------------------- */
.whatsapp-mock {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 380px;
  justify-self: center;
  position: relative;
  /* Leggera rotation per "naturale" feel screenshot */
  transform: rotate(-1deg);
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.32));
}
.whatsapp-mock__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20),
              0 0 0 2px rgba(255, 255, 255, 0.08);
  margin-top: 4px;
}
.whatsapp-mock__avatar svg {
  width: 26px;
  height: 26px;
  color: var(--text-heading);
}
.whatsapp-mock__bubble {
  position: relative;
  padding: 10px 14px 8px;
  background: #ffffff;
  color: var(--text-heading);
  border-radius: 12px 12px 12px 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10);
  max-width: 280px;
  font-family: var(--font-body);
}
/* Coda della bolla (lato top-left, come messaggio ricevuto WhatsApp) */
.whatsapp-mock__bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -7px;
  width: 12px;
  height: 14px;
  background: #ffffff;
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
  filter: drop-shadow(-1px 1px 0.5px rgba(0, 0, 0, 0.06));
}
.whatsapp-mock__author {
  margin: 0 0 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #128c7e; /* verde WhatsApp authentic */
  letter-spacing: -0.01em;
}
.whatsapp-mock__text {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-heading);
  text-wrap: pretty;
}
.whatsapp-mock__text strong {
  color: var(--text-heading);
  font-weight: 700;
}
.whatsapp-mock__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: rgba(10, 10, 10, 0.45);
  float: right;
  margin-top: 2px;
}
.whatsapp-mock__ticks {
  width: 14px;
  height: auto;
  color: #34b7f1; /* blu WhatsApp tick double-read */
}

/* Subtle entrance animation: bubble si presenta */
@keyframes whatsappMockBob {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(-1.5deg) translateY(-3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .whatsapp-mock {
    animation: whatsappMockBob 4s ease-in-out infinite;
  }
}

/* Mobile: stack verticale, mockup sotto il testo */
@media (max-width: 879px) {
  .whatsapp-mock {
    margin-top: 0.5rem;
    transform: rotate(-1deg) scale(0.95);
  }
}

/* ----------------------------------------------------------------------------
   LETTERA MARCO (chi siamo)
   ---------------------------------------------------------------------------- */
.container--narrow {
  max-width: 720px;
}
.letter-content {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--text-body);
}
.letter-content p {
  margin-bottom: 1.2em;
  text-wrap: pretty;
}

/* Drop-cap sul primo paragrafo (C di "Ciao") */
.letter-content__opening {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 1.25em !important;
  color: var(--text-heading);
}
/* Dropcap rimosso 2026-05-05: era troppo cartoon. Ora "Ciao," resta in flow,
   stile editoriale sobrio (display 700, nero). */
.letter-content__dropcap {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  -webkit-text-stroke: 0;
  filter: none;
  margin: 0;
}

/* Highlight lime "marker pen" — usato dentro la lettera per parole chiave */
.letter-content mark {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 40%,
    rgba(230, 7, 113, 0.32) 40%,
    rgba(230, 7, 113, 0.32) 92%,
    transparent 92%
  );
  color: var(--text-heading);
  padding: 0 0.15em;
  font-weight: 600;
  border-radius: 1px;
  background-position: 0 -1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Sottolineatura lime spessa con offset (sostituisce u/text-decoration default) */
.letter-content u {
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 6px;
  padding-bottom: 2px;
  font-weight: 600;
  color: var(--text-heading);
}

/* Italic distintivo: color body più scuro, tracciatura leggera */
.letter-content em {
  font-style: italic;
  color: var(--text-heading);
  letter-spacing: -0.005em;
}

/* Strong rinforzato */
.letter-content strong {
  color: var(--text-heading);
  font-weight: 700;
}

/* Paragrafo refrain ("Tutto da solo. Sempre da solo.") — più grande, bordo lime */
.letter-content__refrain {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--text-heading);
  margin-block: 2em !important;
  padding-left: 1.25rem;
  border-left: 4px solid var(--accent);
  letter-spacing: -0.02em;
}

/* Bullets della lettera — check lime ingrandito */
.letter-content__bullets {
  list-style: none;
  margin: 1.5em 0 1.8em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.625rem 1.5rem;
}
.letter-content__bullets li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.letter-content__bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
  font-size: 1.1em;
  -webkit-text-stroke: 0.7px var(--text-heading);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 6px rgba(230, 7, 113, 0.3));
}

/* Manifesto inline (Non vendiamo prodotti...) — punch line */
.letter-content__manifesto {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-heading);
  letter-spacing: -0.015em;
  padding: 1.25rem 1.5rem;
  background: var(--bg-secondary);
  border-left: 6px solid var(--accent);
  border-radius: 4px;
  margin-block: 2em !important;
}

/* Closing "Noi siamo una tribe" — finale impattante */
.letter-content__closing {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.025em;
  text-align: center;
  margin-block: 1.75em 0.8em !important;
}

/* Firma "— Marco" stile lettera */
.letter-content__signature {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--text-body);
  text-align: center;
  margin-top: 0.5em !important;
  letter-spacing: 0.01em;
}

.section--enemy {
  background: var(--bg-dark);
  color: var(--text-inverse);
  text-align: center;
}
.section--enemy .section__title { color: var(--text-inverse); }
.section--enemy p { color: rgba(250, 250, 247, 0.85); }

/* ----------------------------------------------------------------------------
   TEAM
   ---------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.team-card {
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.team-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.team-card__role {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  -webkit-text-stroke: 1px var(--text-heading);
  paint-order: stroke fill;
  margin: 0 0 0.75rem;
}
.team-card--secondary {
  background: var(--bg-secondary);
}

/* ----------------------------------------------------------------------------
   MANIFESTO — sticker post-it autentici (chi siamo)
   ---------------------------------------------------------------------------- */
.section--manifesto {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 38px,
      rgba(10, 10, 10, 0.04) 38px,
      rgba(10, 10, 10, 0.04) 39px
    ),
    var(--bg-secondary);
  position: relative;
  isolation: isolate;
}
.kicker--centered {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}
.section--manifesto .section__title {
  text-align: center;
  margin-bottom: 3.5rem;
}
.manifesto-headline-non {
  display: inline-block;
  position: relative;
  color: var(--accent);
  -webkit-text-stroke: 3px var(--text-heading);
  paint-order: stroke fill;
  font-weight: 800;
  filter: drop-shadow(0 0 12px rgba(230, 7, 113, 0.30));
  transform: rotate(-3deg);
  margin: 0 0.1em;
}

/* LAYOUT — flex wrap centered: 3 nella prima riga, 2 nella seconda centrate */
.manifesto-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1.5rem;
  max-width: 1200px;
  margin-inline: auto;
}
.manifesto-item {
  flex: 1 1 calc(33.333% - 1.5rem);
  min-width: 280px;
  max-width: 360px;
  position: relative;
  padding: 2.5rem 1.75rem 1.75rem;
  background: var(--accent);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-heading);
  /* Ombra realistica: hard close + soft far */
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.10),
    0 6px 14px -4px rgba(0, 0, 0, 0.20),
    0 22px 38px -16px rgba(0, 0, 0, 0.28);
  transition: transform 0.4s var(--ease-brand-out),
              box-shadow 0.4s ease;
}

/* Rotation diversi per ogni item — varietà sticker reale */
.manifesto-item--rotate-1 { transform: rotate(-2deg); }
.manifesto-item--rotate-2 { transform: rotate(1.5deg); }
.manifesto-item--rotate-3 { transform: rotate(-1deg); }
.manifesto-item--rotate-4 { transform: rotate(2.2deg); }
.manifesto-item--rotate-5 { transform: rotate(-1.8deg); }

/* Tape decorativo in alto (gaffer tape feel — nero semitrasparente con clip-path) */
.manifesto-item__tape {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 80px;
  height: 22px;
  background: rgba(10, 10, 10, 0.78);
  transform: translateX(-50%) rotate(-2deg);
  clip-path: polygon(2% 8%, 98% 0%, 100% 92%, 1% 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.manifesto-item--rotate-1 .manifesto-item__tape { transform: translateX(-50%) rotate(2deg); }
.manifesto-item--rotate-3 .manifesto-item__tape { transform: translateX(-50%) rotate(-3deg); width: 90px; }
.manifesto-item--rotate-4 .manifesto-item__tape { transform: translateX(-50%) rotate(1.5deg); width: 70px; }
.manifesto-item--rotate-5 .manifesto-item__tape { transform: translateX(-50%) rotate(-1deg); width: 85px; }

/* Numero 01-05 in alto a destra — display font, paint-order stroke */
.manifesto-item__num {
  position: absolute;
  top: 0.875rem;
  right: 1.125rem;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  -webkit-text-stroke: 2.5px var(--text-heading);
  paint-order: stroke fill;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(10, 10, 10, 0.15));
}

/* Rule: la regola "NON [azione]" — heading dello sticker */
.manifesto-item__rule {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 0.625rem;
}

/* "NON" enfatizzato dentro la rule */
.manifesto-item__non {
  display: inline-block;
  font-weight: 800;
  font-size: 1.05em;
  color: var(--text-heading);
  position: relative;
  padding: 0 0.05em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.manifesto-item__non::after {
  content: "";
  position: absolute;
  bottom: 0.05em;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--text-heading);
  z-index: -1;
  transform: skew(-8deg) rotate(-1deg);
}

/* Why: la spiegazione body */
.manifesto-item__why {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.78);
}

/* Hover: enfatizza rotation + lift + ombra più forte */
@media (hover: hover) {
  .manifesto-item:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.03);
    box-shadow:
      0 2px 2px rgba(0, 0, 0, 0.12),
      0 14px 28px -8px rgba(0, 0, 0, 0.28),
      0 32px 56px -22px rgba(0, 0, 0, 0.42);
    z-index: 3;
  }
}

@media (max-width: 767px) {
  .manifesto-item {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ----------------------------------------------------------------------------
   BENEFITS GRID (tesseramento)
   ---------------------------------------------------------------------------- */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.benefit {
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.benefit__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  -webkit-text-stroke: 2.5px var(--text-heading);
  paint-order: stroke fill;
  display: inline-block;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 0 10px rgba(230, 7, 113, 0.18));
}
.benefit h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}
.benefit ul {
  margin-top: 0.5rem;
  padding-left: 1rem;
}
.benefit ul li { margin-bottom: 0.25rem; font-size: 0.95rem; }

/* ----------------------------------------------------------------------------
   BENEFITS BENTO (tesseramento — 7 cards asymmetric)
   Layout 6-col: I-II-III (sp2 each) | IV wide-dark + V (sp4+sp2) | VI + VII hero-photo (sp2+sp4)
   ---------------------------------------------------------------------------- */
.section--benefits-bento {
  background: var(--bg-secondary);
}
.benefits-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.benefit-card {
  position: relative;
  padding: 2rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
  isolation: isolate;
}
.benefit-card--small      { grid-column: span 2; }
.benefit-card--wide-dark  { grid-column: span 4; }
.benefit-card--hero-photo { grid-column: span 4; }

.benefit-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 40px -12px rgba(230, 7, 113, 0.35),
              0 0 0 2px var(--accent) inset;
}

/* Icon box — quadrato 56x56 nero con icona lime stroke */
.benefit-card__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--text-heading);
  color: var(--accent);
  border-radius: 12px;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
.benefit-card__icon-box--lime {
  background: var(--accent);
  color: var(--text-heading);
}
.benefit-card__icon-box svg {
  display: block;
}

/* Numero romano — paint-order stroke fill (tipico tribe) */
.benefit-card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  -webkit-text-stroke: 2.5px var(--text-heading);
  paint-order: stroke fill;
  display: inline-block;
  margin-bottom: 0.5rem;
  margin-left: 0.25rem;
  filter: drop-shadow(0 0 10px rgba(230, 7, 113, 0.18));
}
.benefit-card__num--on-dark {
  -webkit-text-stroke: 2.5px var(--bg);
  filter: drop-shadow(0 0 14px rgba(230, 7, 113, 0.4));
}

.benefit-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.625rem;
  line-height: 1.25;
}
.benefit-card__body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}

/* ---- WIDE-DARK card (#IV — Convenzioni partner) ---------------------------- */
.benefit-card--wide-dark {
  background: var(--text-heading);
  color: var(--bg);
  border-color: var(--text-heading);
}
.benefit-card--wide-dark .benefit-card__title { color: var(--bg); }
.benefit-card--wide-dark .benefit-card__body  { color: rgba(255, 255, 255, 0.78); }
.benefit-card--wide-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 14%,
              rgba(230, 7, 113, 0.18) 0%,
              transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.benefit-card--wide-dark > * { position: relative; z-index: 1; }
.benefit-card--wide-dark:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 40px -12px rgba(230, 7, 113, 0.5),
              0 0 0 2px var(--accent) inset;
}

.benefit-card__partners {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem 1.5rem;
}
.benefit-card__partners li {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-left: 0.875rem;
  border-left: 2px solid var(--accent);
  font-size: 0.95rem;
}
.benefit-card__partners li strong {
  color: var(--bg);
  font-weight: 700;
}
.benefit-card__partners li span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
}

/* ---- HERO-PHOTO card (#VII — Community) ----------------------------------- */
.benefit-card--hero-photo {
  padding: 0;
  border-color: transparent;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
}
.benefit-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.benefit-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms var(--ease-brand-out),
              filter 380ms var(--ease-brand);
}
.benefit-card--hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, 0.15) 0%,
              rgba(0, 0, 0, 0.55) 55%,
              rgba(0, 0, 0, 0.85) 100%);
  z-index: 1;
}
.benefit-card--hero-photo .benefit-card__inner {
  position: relative;
  z-index: 2;
  padding: 2rem 1.75rem;
  width: 100%;
  color: #fff;
}
.benefit-card--hero-photo .benefit-card__title { color: #fff; }
.benefit-card--hero-photo .benefit-card__body  { color: rgba(255, 255, 255, 0.88); }
/* Hero-photo hover: zoom + rotation + bordo lime 10px netto */
@media (hover: hover) {
  .benefit-card--hero-photo:hover {
    transform: translateY(-6px) rotate(-1deg);
    border-color: var(--accent);
    box-shadow: 0 0 0 10px var(--accent),
                0 28px 56px -12px rgba(10, 10, 10, 0.42);
  }
  .benefit-card--hero-photo:hover .benefit-card__bg img {
    transform: scale(1.08);
    filter: saturate(1.15);
  }
}

/* ---- Mobile: stacking vertical ------------------------------------------- */
@media (max-width: 900px) {
  .benefits-bento {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .benefit-card--small,
  .benefit-card--wide-dark,
  .benefit-card--hero-photo {
    grid-column: span 1;
  }
  .benefit-card__partners {
    grid-template-columns: 1fr;
  }
  .benefit-card--hero-photo {
    min-height: 280px;
  }
}

/* ----------------------------------------------------------------------------
   ENTI ROW (affiliazioni)
   ---------------------------------------------------------------------------- */
.section--affiliations {
  background: var(--bg-secondary);
  text-align: center;
}
.enti-row {
  display: inline-flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--accent);
  -webkit-text-stroke: 2.5px var(--text-heading);
  paint-order: stroke fill;
}

/* ----------------------------------------------------------------------------
   HOW STEPS (tesseramento)
   ---------------------------------------------------------------------------- */
.how-steps {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}
.how-step {
  position: relative;
  padding: 2rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  isolation: isolate;
  transition: transform 0.35s var(--ease-brand-out),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.how-step__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--text-heading);
  color: var(--accent);
  border-radius: 12px;
  margin-bottom: 1.25rem;
}
.how-step__icon-box--lime {
  background: var(--accent);
  color: var(--text-heading);
}
.how-step__icon-box svg { display: block; }

/* Numero gigante stroke (decorativo, top-right) */
.how-step__num {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  -webkit-text-stroke: 3px var(--text-heading);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 12px rgba(230, 7, 113, 0.22));
  z-index: 1;
  pointer-events: none;
}
.how-step__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 0.625rem;
  padding-right: 3.5rem; /* spazio per il numero gigante */
}
.how-step__body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}

/* Desktop: 3 colonne + connector dashed lime orizzontale tra step */
@media (min-width: 768px) {
  .how-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
  .how-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(2rem + 28px); /* allineato verticale con il centro dell'icon-box */
    right: -3rem;
    width: 3rem;
    height: 0;
    border-top: 2px dashed var(--accent);
    z-index: 2;
  }
  /* Punta-freccia (chevron) sull'estremità destra del connettore */
  .how-step:not(:last-child) .how-step__icon-box::before {
    content: "";
    position: absolute;
    top: calc(2rem + 28px - 6px);
    right: -1.4rem;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    transform: rotate(45deg);
    z-index: 3;
  }
}

/* Mobile: connector dashed verticale tra step */
@media (max-width: 767px) {
  .how-step:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -2.25rem;
    left: calc(1.75rem + 28px); /* allineato col centro dell'icon-box */
    width: 0;
    height: 2.25rem;
    border-left: 2px dashed var(--accent);
    z-index: 2;
  }
}

/* ----------------------------------------------------------------------------
   GALLERY VIAGGI
   ---------------------------------------------------------------------------- */
.trip-past {
  margin-block: 3rem;
  padding-block: 2rem;
  border-top: 1px solid var(--border);
}
.trip-past h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.trip-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.trip-gallery picture {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
  transition: transform 420ms var(--ease-brand-out),
              box-shadow 420ms var(--ease-brand-out);
}
.trip-gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
  transition: transform 700ms var(--ease-brand-out),
              filter 380ms var(--ease-brand);
}
/* Hover: zoom + rotation + bordo lime 10px netto */
@media (hover: hover) {
  .trip-gallery picture:hover {
    transform: translateY(-6px) rotate(-1.5deg);
    box-shadow: 0 0 0 10px var(--accent),
                0 24px 50px -12px rgba(10, 10, 10, 0.32);
    z-index: 2;
  }
  .trip-gallery picture:nth-child(even):hover {
    transform: translateY(-6px) rotate(1.5deg);
  }
  .trip-gallery picture:hover img {
    transform: scale(1.10);
    filter: saturate(1.18);
  }
}
.section--zanzibar {
  background: var(--bg-secondary);
  text-align: center;
  padding-block: clamp(96px, 12vw, 160px);
}
.section--zanzibar .section__title {
  margin-bottom: 1.5rem;
}
.section--zanzibar > .container > p {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 2.5rem;
}
.section--zanzibar .badge-urgency {
  margin-bottom: 2.5rem;
}
.section--zanzibar .btn {
  margin-bottom: 2rem;
}
.section--zanzibar .cta-reassurance {
  margin-top: 0.5rem;
}
/* Scarcity indicator — chip nero compatto ad alto contrasto, NON cliccabile */
.badge-urgency {
  /* Forza riga propria sopra il CTA, centrato */
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: fit-content;
  margin: 0 auto 1.25rem;
  padding: 0.625rem 1rem 0.625rem 0.875rem;
  background: var(--text-heading);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  border-radius: 6px;
  box-shadow: 0 6px 18px -4px rgba(10, 10, 10, 0.34),
              0 0 0 1px rgba(230, 7, 113, 0.40);
  animation: none;
}
/* Numero "3" in lime gigante con stroke — focus visivo */
.badge-urgency__count {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  -webkit-text-stroke: 1px #ffffff;
  paint-order: stroke fill;
  letter-spacing: -0.02em;
}
/* Label "posti rimasti" — bianco solido + tipografia leggibile su nero */
.badge-urgency__label {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}
/* Divider verticale lime tra le due info */
.badge-urgency__sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--accent);
  opacity: 0.55;
  flex-shrink: 0;
}
/* Hint "priorità tesserati" - lime tenue (gerarchia) */
.badge-urgency__hint {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}
/* "Live" pulsante dot — prima del numero, segnale di scarsità dinamica */
.badge-urgency::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: badge-dot-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(230, 7, 113, 0.7);
}
@keyframes badge-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(230, 7, 113, 0.7); transform: scale(1); }
  70%  { box-shadow: 0 0 0 8px rgba(230, 7, 113, 0); transform: scale(1.15); }
  100% { box-shadow: 0 0 0 0 rgba(230, 7, 113, 0);   transform: scale(1); }
}

/* ----------------------------------------------------------------------------
   CHECKLIST (riusato in più pagine)
   ---------------------------------------------------------------------------- */
.checklist {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.checklist li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1.0625rem;
}
.checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
  -webkit-text-stroke: 1px var(--text-heading);
  paint-order: stroke fill;
}
/* Modifier — su sfondo scuro: testo bianco + check stroke bianco */
.checklist--on-dark { color: rgba(255, 255, 255, 0.92); }
.checklist--on-dark li::before {
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0 8px rgba(230, 7, 113, 0.35));
}

/* ----------------------------------------------------------------------------
   SECTION TARGET HERO (tesseramento — A chi è rivolto cinematic)
   Foto di sfondo + overlay scuro + testo bianco centrato.
   ---------------------------------------------------------------------------- */
.section--target-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(420px, 60vh, 620px);
  display: flex;
  align-items: center;
  padding: clamp(64px, 9vw, 120px) 0;
  color: var(--text-inverse);
}
.section--target-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.section--target-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: saturate(0.96);
}
/* Overlay gradient: più scuro a sinistra (dove c'è il testo), più rivelato a destra */
.section--target-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg,
      rgba(10, 10, 10, 0.86) 0%,
      rgba(10, 10, 10, 0.74) 40%,
      rgba(10, 10, 10, 0.42) 75%,
      rgba(10, 10, 10, 0.30) 100%);
}
.section--target-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.section--target-hero .hero-home__kicker {
  color: var(--accent);
  margin-bottom: 1rem;
}
.section__title--on-dark {
  color: var(--text-inverse);
}
.section--target-hero .checklist {
  margin-top: 1.5rem;
  font-size: 1.25rem;
}
.section--target-hero .checklist li {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.4;
  padding-left: 2.25rem;
}
.section--target-hero .checklist li::before {
  font-size: 1.25rem;
  top: 0.05em;
}
.section__lead--on-dark {
  color: var(--text-inverse);
  margin-top: 1.75rem;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.45;
  border-left: 4px solid var(--accent);
  padding-left: 1rem;
}
.section__lead--on-dark strong { color: var(--accent); }

@media (max-width: 767px) {
  .section--target-hero__bg img {
    object-position: center;
  }
  .section--target-hero::before {
    background:
      linear-gradient(180deg,
        rgba(10, 10, 10, 0.62) 0%,
        rgba(10, 10, 10, 0.85) 100%);
  }
}

/* ----------------------------------------------------------------------------
   BUTTONS — styling brand-specific overrides
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 200ms var(--ease-brand),
              color 200ms var(--ease-brand),
              border-color 200ms var(--ease-brand),
              box-shadow 200ms var(--ease-brand);
}
.btn--primary {
  background: var(--cta);
  color: var(--cta-text);
  border-color: var(--cta);
}
.btn--primary:hover {
  background: var(--cta-hover);
  color: var(--cta-text-hover);
  border-color: var(--cta-hover);
}
.btn--outline {
  background: transparent;
  color: var(--text-heading);
  border-color: var(--border-strong);
}
.btn--outline:hover {
  background: var(--text-heading);
  color: var(--text-inverse);
  border-color: var(--text-heading);
}
.btn--lg {
  padding: 1.25rem 2.5rem;
  font-size: 1.0625rem;
}

/* ----------------------------------------------------------------------------
   LINK ARROW (call to navigation)
   ---------------------------------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-heading);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(transparent calc(100% - 2px), var(--accent) 2px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: background-size 200ms var(--ease-brand);
  margin-top: 1rem;
}
.link-arrow:hover {
  background-size: 0% 100%;
}

/* ----------------------------------------------------------------------------
   CTA GROUP
   ---------------------------------------------------------------------------- */
.cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
@media (min-width: 640px) {
  .cta-group { flex-direction: row; }
}

.section--cta-final {
  background: var(--bg-secondary);
  text-align: center;
}

/* ----------------------------------------------------------------------------
   HERO INNER (pagine interne)
   ---------------------------------------------------------------------------- */
.hero-inner {
  position: relative;
  padding-block: 3rem var(--space-block);
  background: var(--bg-secondary);
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg) 100%);
  overflow: hidden;
}
.hero-inner__breadcrumb {
  margin-bottom: 1rem;
}
.hero-inner__kicker {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
}
.hero-inner__heading {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  max-width: 800px;
}
.hero-inner__sub {
  font-size: 1.125rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 640px;
}
.hero-inner__cta-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .hero-inner__cta-group { flex-direction: row; }
}
.hero-inner--centered {
  text-align: center;
}
.hero-inner--centered .hero-inner__heading,
.hero-inner--centered .hero-inner__sub {
  margin-inline: auto;
}
.hero-inner__compass {
  position: absolute;
  top: 2rem;
  right: var(--section-padding-x);
  width: 64px;
  height: 64px;
  opacity: 0.5;
}
@media (max-width: 1023px) {
  .hero-inner__compass { display: none; }
}

/* ----------------------------------------------------------------------------
   BREADCRUMB
   ---------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 200ms var(--ease-brand);
}
.breadcrumb a:hover { color: var(--text-heading); }
.breadcrumb .separator { color: var(--accent); font-weight: 700; }
.breadcrumb [aria-current="page"] {
  color: var(--text-heading);
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   CATEGORIES GRID (negozio)
   ---------------------------------------------------------------------------- */
.categories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-block: 2rem;
}
@media (min-width: 768px) {
  .categories-grid { grid-template-columns: 1fr 1fr; }
}
.cat-section h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.categories-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.categories-row li {
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------------------
   EXPERIENCE CARDS (viaggi — 3 cards cinematic con foto sport)
   ---------------------------------------------------------------------------- */
.section--experience {
  padding-block: clamp(64px, 8vw, 120px);
}
.section--experience .section__title {
  margin-bottom: 0.75rem;
}
.section--experience .section__sub {
  margin-bottom: 3rem;
  max-width: 56ch;
  margin-inline: auto;
}

.experience-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .experience-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

.experience-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--text-heading);
  color: var(--text-inverse);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.4s var(--ease-brand-out),
              box-shadow 0.4s ease;
}
.experience-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.experience-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.96);
  transition: transform 700ms var(--ease-brand-out),
              filter 380ms var(--ease-brand);
}
.experience-card--surf .experience-card__bg img { object-position: 65% 40%; }
.experience-card--snow .experience-card__bg img { object-position: 60% 30%; }
.experience-card--kite .experience-card__bg img { object-position: 35% 40%; }

/* Overlay gradient bottom */
.experience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(10, 10, 10, 0.10) 0%,
              rgba(10, 10, 10, 0.55) 45%,
              rgba(10, 10, 10, 0.94) 100%);
}

.experience-card__inner {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.experience-card__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--accent);
  color: var(--text-heading);
  border-radius: 10px;
  margin-bottom: 0.25rem;
}

.experience-card__sport {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0;
}

.experience-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-inverse);
  margin: 0;
}

.experience-card__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(250, 250, 247, 0.82);
  margin: 0;
}

/* Hover: zoom + rotation + bordo lime 10px (universal pattern foto) */
@media (hover: hover) {
  .experience-card:hover {
    transform: translateY(-6px) rotate(-1.2deg);
    box-shadow: 0 0 0 10px var(--accent),
                0 28px 56px rgba(0, 0, 0, 0.34);
    z-index: 2;
  }
  .experience-card:nth-child(even):hover {
    transform: translateY(-6px) rotate(1.2deg);
  }
  .experience-card:hover .experience-card__bg img {
    transform: scale(1.10);
    filter: saturate(1.18);
  }
}

/* ----------------------------------------------------------------------------
   CONTACT LIST
   ---------------------------------------------------------------------------- */
.contact-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 1.0625rem;
}
.contact-list a {
  color: var(--text-heading);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}
.contact-list a:hover { text-decoration-color: var(--accent); }

/* ============================================================================
   BLOG INDEX (/blog/) — hero featured + grid + pagination con istruzioni
   ============================================================================ */
.section--blog {
  padding-block: clamp(64px, 8vw, 120px);
}
.blog-grid__kicker {
  margin-top: 5rem !important;
}
.blog-grid__title {
  margin-bottom: 3rem !important;
}

/* ---- BLOG HERO (articolo più recente in evidenza) ---- */
.blog-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2.5rem;
  margin-bottom: 5rem;
  background: var(--bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  transition: transform 0.4s var(--ease-brand-out),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
  position: relative;
}
@media (min-width: 880px) {
  .blog-hero {
    grid-template-columns: 1.2fr 1fr;
  }
}
.blog-hero__visual {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
  aspect-ratio: 16 / 10;
}
@media (min-width: 880px) {
  .blog-hero__visual {
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
  }
}
.blog-hero__visual-img,
.blog-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-brand-out),
              filter 380ms var(--ease-brand);
  filter: saturate(0.96);
}
.blog-hero__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.875rem;
  background: var(--accent);
  color: var(--text-heading);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  box-shadow: 0 4px 14px -4px rgba(10, 10, 10, 0.34);
}
.blog-hero__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--text-heading);
  border-radius: 50%;
  animation: badge-dot-pulse 1.6s ease-in-out infinite;
}
.blog-hero__text {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.875rem;
}
.blog-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.25rem 0;
  color: var(--text-heading);
  text-wrap: balance;
}
.blog-hero__excerpt {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}
.blog-hero__cta {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-heading);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  width: fit-content;
  transition: gap 0.3s ease;
}
.blog-hero:hover .blog-hero__cta { gap: 0.875rem; }
.blog-hero:hover .blog-hero__visual-img,
.blog-hero:hover .blog-hero__visual img {
  transform: scale(1.05);
  filter: saturate(1.12);
}
@media (hover: hover) {
  .blog-hero:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 28px 56px -16px rgba(10, 10, 10, 0.20),
                0 0 0 2px var(--accent);
  }
}

/* ---- BLOG GRID (articoli rimanenti) ---- */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: transform 0.4s var(--ease-brand-out),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}
.blog-card__visual {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-secondary);
}
.blog-card__visual-img,
.blog-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-brand-out),
              filter 380ms var(--ease-brand);
  filter: saturate(0.96);
}
.blog-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
  position: relative;
}
.blog-card__category {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  background: var(--accent);
  color: var(--text-heading);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 3px;
  width: fit-content;
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  color: var(--text-heading);
  text-wrap: balance;
}
.blog-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
  /* Limita a 3 righe */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.blog-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.blog-card__meta-item + .blog-card__meta-item::before {
  content: "·";
  color: var(--text-muted);
  margin-right: 0.5rem;
}
.blog-card__arrow {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--text-heading);
  color: var(--accent);
  border-radius: 50%;
  font-size: 1.125rem;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-brand-out);
}
.blog-card:hover .blog-card__arrow {
  opacity: 1;
  transform: translateX(0);
}
.blog-card:hover .blog-card__visual-img,
.blog-card:hover .blog-card__visual img {
  transform: scale(1.06);
  filter: saturate(1.14);
}
@media (hover: hover) {
  .blog-card:hover {
    transform: translateY(-6px) rotate(-1deg);
    border-color: var(--accent);
    box-shadow: 0 0 0 8px var(--accent),
                0 24px 50px -12px rgba(10, 10, 10, 0.30);
    z-index: 2;
  }
  .blog-card:nth-child(even):hover {
    transform: translateY(-6px) rotate(1deg);
  }
}

/* ---- PAGINATION BLOCK ---- */
.pagination-block {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.pagination-block__status {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: 0.02em;
}
.pagination-block__status strong {
  color: var(--text-heading);
  font-weight: 700;
}
.pagination-block__total {
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 0.25rem;
}

/* Nav: WP paginate_links produce <a class="page-numbers"> + <span class="page-numbers current"> */
.pagination-block__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.pagination-block__nav .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-body);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all 0.25s ease;
}
.pagination-block__nav .page-numbers:hover {
  border-color: var(--accent);
  background: rgba(230, 7, 113, 0.10);
  color: var(--text-heading);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px rgba(10, 10, 10, 0.18);
}
.pagination-block__nav .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-heading);
  box-shadow: 0 4px 14px -4px rgba(230, 7, 113, 0.50);
  cursor: default;
}
.pagination-block__nav .page-numbers.dots {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: default;
}
.pagination-block__nav .page-numbers.prev,
.pagination-block__nav .page-numbers.next {
  padding: 0 1rem;
  gap: 0.375rem;
  background: var(--text-heading);
  color: var(--bg);
  border-color: var(--text-heading);
}
.pagination-block__nav .page-numbers.prev:hover,
.pagination-block__nav .page-numbers.next:hover {
  background: var(--accent);
  color: var(--text-heading);
  border-color: var(--accent);
}
.pagination-block__arrow {
  font-size: 1.125rem;
  line-height: 1;
}

/* ============================================================================
   ARTICLE PROSE (single post — typography respirosa per la lettura)
   ============================================================================ */
.section--article {
  padding-block: clamp(48px, 7vw, 96px);
}
.article-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 0.625rem;
  align-items: center;
  font-size: 0.9375rem;
}
.article-meta__sep {
  color: rgba(255, 255, 255, 0.45);
}
.article-meta strong {
  color: var(--accent);
  font-weight: 600;
}

/* Container content typography */
.article-prose {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--text-body);
}

/* Spaziatura tra blocchi: il problema chiave del "testo appiccicato" */
.article-prose > * + * {
  margin-top: 1.5em;
}
.article-prose p {
  margin: 0;
  text-wrap: pretty;
}

/* Heading h2/h3: respiro abbondante sopra, distintivi tipograficamente */
.article-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-heading);
  margin: 2.75em 0 0.75em !important;
  text-wrap: balance;
  position: relative;
  padding-top: 0.5rem;
  border-top: 2px solid var(--border);
}
.article-prose h2::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--accent);
}
.article-prose h2:first-child {
  margin-top: 0 !important;
  border-top: none;
  padding-top: 0;
}
.article-prose h2:first-child::before { display: none; }

.article-prose h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text-heading);
  margin: 2em 0 0.5em !important;
}

/* Strong/em coerenti con la lettera */
.article-prose strong {
  color: var(--text-heading);
  font-weight: 700;
}
.article-prose em {
  font-style: italic;
  color: var(--text-heading);
  letter-spacing: -0.005em;
}

/* Liste: ul/ol con bullet lime e padding generoso */
.article-prose ul,
.article-prose ol {
  margin: 1.25em 0 !important;
  padding-left: 1.5rem;
}
.article-prose ul {
  list-style: none;
  padding-left: 0;
}
.article-prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.625em;
  line-height: 1.65;
}
.article-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--text-heading);
}
.article-prose ol li {
  margin-bottom: 0.625em;
  line-height: 1.65;
  padding-left: 0.375rem;
}
.article-prose ol li::marker {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
}

/* Blockquote stile lettera: bordo lime + italic */
.article-prose blockquote {
  margin: 2em 0 !important;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--accent);
  background: var(--bg-secondary);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-heading);
  border-radius: 0 4px 4px 0;
  text-wrap: pretty;
}
.article-prose blockquote p { margin: 0 !important; }
.article-prose blockquote p + p { margin-top: 0.75em !important; }

/* Link inline */
.article-prose a {
  color: var(--text-heading);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 4px;
  padding-bottom: 1px;
  transition: background-size 0.25s ease;
}
.article-prose a:hover {
  background-size: 100% 100%;
}

/* Code inline e block (se mai usati) */
.article-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-secondary);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* Immagini inline nel post */
.article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}
.article-prose figure { margin: 2em 0 !important; }
.article-prose figcaption {
  margin-top: 0.5em;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* Footer dell'articolo: separatore + CTA finale */
.article-footer {
  margin-top: 4rem;
  text-align: center;
}
.article-footer__sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.article-footer__line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--border);
}
.article-footer__cta-text {
  font-size: 1.0625rem;
  color: var(--text-body);
  margin: 0 0 1.5rem;
}

.blog-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 4rem 1rem;
  font-size: 1.125rem;
}

/* ----------------------------------------------------------------------------
   BLOG PREVIEW HOMEPAGE
   ---------------------------------------------------------------------------- */
.blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-block: 2rem;
}
.card-post {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 250ms var(--ease-brand),
              box-shadow 250ms var(--ease-brand),
              border-color 250ms var(--ease-brand);
}
.card-post__link { display: block; text-decoration: none; color: inherit; }
.card-post__media {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-secondary);
}
.card-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-brand-out);
}
.card-post:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(10,10,10,.1); border-color: var(--border-strong); }
.card-post:hover .card-post__media img { transform: scale(1.04); }
.card-post__body { padding: 1rem 1.5rem 1.5rem; }
.card-post__badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--accent);
  color: var(--text-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  margin-bottom: 0.5rem;
}
.card-post__title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.card-post__excerpt {
  font-size: 0.9375rem;
  color: var(--text);
}

/* ----------------------------------------------------------------------------
   ACCENT 90 (style helper for headline)
   ---------------------------------------------------------------------------- */
.accent-90 {
  color: var(--text-muted);
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   MUTED text
   ---------------------------------------------------------------------------- */
.muted {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* ============================================================================
   CTA POLISH — Step 14 (Tobias Ahlin / Adam Argyle / Jhey Tompkins)
   Override e raffinamento dei bottoni base con layered shadow, hover lift,
   icone contestuali, active feedback, focus-visible accessibile.
   ============================================================================ */

:root {
  /* CTA system — token raffinati */
  --btn-padding-x: 2ch;
  --btn-padding-y: 0.85ch;
  --btn-padding-x-lg: 2.5ch;
  --btn-padding-y-lg: 1ch;
  --btn-letter-spacing: 0.02em;
  --btn-transition-duration: 0.32s;
  --btn-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --btn-active-duration: 0.1s;
  --btn-hover-delay: 0.08s;

  /* Layered shadow Ahlin — depth premium */
  --btn-shadow-rest:
    0 1px 1px rgba(10, 10, 10, 0.10),
    0 2px 2px rgba(10, 10, 10, 0.08),
    0 4px 4px rgba(10, 10, 10, 0.06),
    0 8px 8px rgba(10, 10, 10, 0.04);

  --btn-shadow-hover:
    0 2px 2px rgba(10, 10, 10, 0.12),
    0 4px 4px rgba(10, 10, 10, 0.10),
    0 8px 12px rgba(10, 10, 10, 0.08),
    0 16px 24px rgba(10, 10, 10, 0.06);

  /* Glow accent per hover */
  --btn-glow-accent: 0 0 0 0 rgba(230, 7, 113, 0);
  --btn-glow-accent-hover: 0 0 24px 4px rgba(230, 7, 113, 0.32);
}

/* ----------------------------------------------------------------------------
   Base bottone — override del .btn esistente
   ---------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: var(--btn-letter-spacing);
  line-height: 1.5;

  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Transizioni Ahlin: solo composite-only */
  transition:
    transform var(--btn-transition-duration) var(--btn-transition-easing),
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  isolation: isolate;
  will-change: transform;
}

/* Active state — feedback tattile (Tompkins: snappier on press) */
.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--btn-active-duration);
}

/* Focus-visible accessibile (Argyle: outline-offset >= 3px) */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ----------------------------------------------------------------------------
   PRIMARY — nero pieno → lime hover (con shadow lift)
   ---------------------------------------------------------------------------- */
.btn--primary {
  background: var(--cta);
  color: var(--cta-text);
  border-color: var(--cta);
  box-shadow: var(--btn-shadow-rest);
}

/* Shadow lift via pseudo (Ahlin: zero repaint, only opacity) */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--btn-shadow-hover), var(--btn-glow-accent-hover);
  opacity: 0;
  transition: opacity var(--btn-transition-duration) var(--btn-transition-easing);
  transition-delay: 0s;
  pointer-events: none;
  z-index: -1;
}

.btn--primary:hover {
  background: var(--cta-hover);
  color: var(--cta-text-hover);
  border-color: var(--cta-hover);
  transform: translateY(-2px);
  transition-delay: var(--btn-hover-delay);
}
.btn--primary:hover::after {
  opacity: 1;
  transition-delay: var(--btn-hover-delay);
}

.btn--primary:active {
  transform: translateY(0) scale(0.97);
}

/* ----------------------------------------------------------------------------
   OUTLINE / GHOST — bordo → fill nero (background sweep)
   ---------------------------------------------------------------------------- */
.btn--outline,
.btn--ghost {
  background: transparent;
  color: var(--text-heading);
  border-color: var(--border-strong);
  overflow: hidden;
}

/* Sweep direzionale (Tompkins: scaleX flip) */
.btn--outline::before,
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text-heading);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--btn-transition-duration) var(--btn-transition-easing);
  z-index: -1;
}

.btn--outline:hover,
.btn--ghost:hover {
  color: var(--text-inverse);
  border-color: var(--text-heading);
}
.btn--outline:hover::before,
.btn--ghost:hover::before {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* ----------------------------------------------------------------------------
   LARGE modifier
   ---------------------------------------------------------------------------- */
.btn--lg {
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
  font-size: 1.0625rem;
}

/* ----------------------------------------------------------------------------
   HEADER CTA OVERRIDE — no lift, solo bg + shadow (regola Lampo3)
   ---------------------------------------------------------------------------- */
.site-header .btn--primary,
.site-header__cta {
  box-shadow: none;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
}
.site-header .btn--primary::after,
.site-header__cta::after {
  display: none;
}
.site-header .btn--primary:hover,
.site-header__cta:hover {
  transform: none;
}

/* ----------------------------------------------------------------------------
   ICONE CONTESTUALI — SVG inline via ::after, animate
   ---------------------------------------------------------------------------- */
.btn[class*="btn-icon-"]::after {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.3s var(--btn-transition-easing);
  /* Override shadow-lift pseudo di .btn--primary::after — l'icona deve restare
     in flex flow naturale (a destra del testo), non position:absolute inset:0 */
  position: static;
  inset: auto;
  opacity: 1;
  box-shadow: none;
  z-index: 1;
}

/* WhatsApp / Chat */
.btn-icon-chat::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.btn--outline.btn-icon-chat::after,
.btn--ghost.btn-icon-chat::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.btn--primary.btn-icon-chat:hover::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.btn--outline.btn-icon-chat:hover::after,
.btn--ghost.btn-icon-chat:hover::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* Map pin / Location */
.btn-icon-map::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.btn--outline.btn-icon-map::after,
.btn--ghost.btn-icon-map::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Sparkle / Quiz */
.btn-icon-sparkle::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/svg%3E");
}
.btn--outline.btn-icon-sparkle::after,
.btn--ghost.btn-icon-sparkle::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/svg%3E");
}

/* Shop / Cart */
.btn-icon-shop::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.btn--outline.btn-icon-shop::after,
.btn--ghost.btn-icon-shop::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

/* Check / Membership / Tesseramento */
.btn-icon-check::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAF7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.btn--outline.btn-icon-check::after,
.btn--ghost.btn-icon-check::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Animazione icona al hover (slide right + slight push) */
.btn[class*="btn-icon-"]:hover::after {
  transform: translateX(2px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after,
  .btn::before,
  .btn[class*="btn-icon-"]::after {
    transition: none !important;
    animation: none !important;
  }
  .btn:hover {
    transform: none !important;
  }
}

/* ============================================================================
   UX READABILITY POLISH — Step 15
   Riduttori d'ansia CTA, FAQ accordion (regola Lampo3), pull-quote,
   scroll-triggered reveals, sticky CTA WhatsApp mobile.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   CTA Reassurance microcopy (sotto le CTA primary)
   ---------------------------------------------------------------------------- */
.cta-reassurance {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.section--cta-final .cta-reassurance,
.hero-home .cta-reassurance {
  text-align: inherit;
}
@media (max-width: 1023px) {
  .hero-home .cta-reassurance { text-align: center; }
}

/* ----------------------------------------------------------------------------
   FAQ ACCORDION (regola Lampo3 §1.6 — animazione 320-360ms ease-out-quart, auto-close)
   ---------------------------------------------------------------------------- */
.section--faq .faq-list {
  max-width: 1100px;
  margin: 0 auto;
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}
@media (min-width: 768px) {
  .section--faq .faq-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.5rem;
  }
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 0;
  background: transparent;
}
.faq-item[open] {
  background: var(--bg-secondary);
}

.faq-item__q {
  position: relative;
  display: block;
  padding: 1.25rem 3rem 1.25rem 1rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-heading);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 200ms var(--ease-brand);
}
.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q::after {
  content: '+';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--accent);
  -webkit-text-stroke: 1px var(--text-heading);
  paint-order: stroke fill;
  font-weight: 700;
  transition: transform 340ms var(--ease-brand-out);
  line-height: 1;
}

.faq-item[open] .faq-item__q::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item__q:hover {
  color: var(--text-heading);
  background: var(--bg-secondary);
}

.faq-item__a {
  padding: 0 1rem 1.25rem;
}
.faq-item__a p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}

/* Abilita transizione height da 0 a 'auto' (necessario per animare details) */
:root {
  interpolate-size: allow-keywords;
}

/* Animazione fluida apertura/chiusura — usa ::details-content (Chrome 131+, Safari 18.4+).
   Il content è SEMPRE rendered (no display:none browser default), e height auto
   è transizionabile grazie a interpolate-size. */
.faq-item::details-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: height 460ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
              content-visibility 460ms cubic-bezier(0.22, 1, 0.36, 1) allow-discrete;
}
.faq-item[open]::details-content {
  height: auto;
  opacity: 1;
  transform: translateY(0);
  transition: height 460ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 320ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
              transform 360ms cubic-bezier(0.22, 1, 0.36, 1) 60ms,
              content-visibility 460ms cubic-bezier(0.22, 1, 0.36, 1) allow-discrete;
}
/* Starting-style: quando il browser apre details, parte da height 0 e fa la transizione
   verso height auto. Senza questo, il browser salterebbe direttamente all'altezza finale. */
@starting-style {
  .faq-item[open]::details-content {
    height: 0;
    opacity: 0;
    transform: translateY(-4px);
  }
}
/* Padding interno gestito dal wrapper .faq-item__a (resta stabile durante animazione) */

/* ----------------------------------------------------------------------------
   PULL QUOTE (Chi Siamo letter)
   ---------------------------------------------------------------------------- */
.pull-quote {
  margin: 2.5em 0;
  padding: 1.5rem 2rem;
  border-left: 6px solid var(--accent);
  background: var(--bg-secondary);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.25;
  color: var(--text-heading);
  text-wrap: balance;
}

/* ----------------------------------------------------------------------------
   SCROLL-TRIGGERED REVEALS — fade-up al primo viewport entry
   ---------------------------------------------------------------------------- */
[data-reveal],
.section,
.service-card,
.usp-card,
.testimonial,
.event-card,
.team-card,
.benefit,
.discipline {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-brand), transform 600ms var(--ease-brand-out);
  will-change: transform, opacity;
}
.is-visible,
.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Senza JS attivato (no-js fallback): tutto visibile */
.no-js .section,
.no-js .service-card,
.no-js .usp-card,
.no-js .testimonial,
.no-js .event-card,
.no-js .team-card,
.no-js .benefit,
.no-js .discipline,
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Hero: già animato dalla sequenza entry, esonerato */
.hero-home,
.hero-inner {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .section,
  .service-card,
  .usp-card,
  .testimonial,
  .event-card,
  .team-card,
  .benefit,
  .discipline {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ----------------------------------------------------------------------------
   STICKY CTA WHATSAPP MOBILE (regola Lampo3 §1.6)
   ---------------------------------------------------------------------------- */
.sticky-cta-whatsapp {
  display: none;
}

@media (max-width: 767px) {
  .sticky-cta-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    height: 56px;
    z-index: 95;
    background: var(--cta);
    color: var(--cta-text);
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.20);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 180ms var(--ease-brand), background-color 180ms var(--ease-brand);
  }
  .sticky-cta-whatsapp:active {
    transform: scale(0.97);
  }
  .sticky-cta-whatsapp::before {
    content: '';
    width: 1.25em;
    height: 1.25em;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e60771'%3E%3Cpath d='M17.6 6.32A7.85 7.85 0 0 0 12.05 4 7.94 7.94 0 0 0 5.1 15.85L4 20l4.25-1.11A7.93 7.93 0 0 0 12.05 20a7.94 7.94 0 0 0 5.55-13.68z M12.05 18.5a6.6 6.6 0 0 1-3.36-.92l-.24-.14-2.5.66.67-2.43-.16-.25a6.59 6.59 0 1 1 12.18-3.5 6.6 6.6 0 0 1-6.59 6.58z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  /* Aggiunge padding al body per non coprire content */
  body { padding-bottom: 88px; }
  /* Footer back-to-top: spazio in alto per non sovrapporsi */
  .back-to-top { bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta-whatsapp { transition: none; }
}

/* ----------------------------------------------------------------------------
   FOOTER GRID (override del footer base con specifiche wordpress-footer.md)
   ---------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--bg-dark);
  color: var(--text-inverse);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  isolation: isolate;
}
.site-footer__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width-wide);
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
}
@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
}
.site-footer .footer-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-inverse);
  margin: 0 0 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.site-footer .footer-col-brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.site-footer .footer-col-brand .tagline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-inverse);
  margin: 0;
}
.site-footer .footer-col-brand p {
  font-size: 1rem;
  color: rgba(250, 250, 247, 0.6);
  margin: 0;
}
.site-footer .footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.site-footer .footer-col ul li {
  font-size: 0.9375rem;
}
.footer-contact-item {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  color: rgba(250, 250, 247, 0.7);
}
.site-footer a {
  color: var(--text-inverse);
  text-decoration: none;
  transition: color 200ms var(--ease-brand);
}
.site-footer a:hover {
  color: var(--accent);
}
.site-footer .footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
@media (max-width: 767px) {
  .site-footer .footer-social { justify-content: center; }
}
.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(250, 250, 247, 0.1);
  color: var(--text-inverse);
  transition: background-color 200ms var(--ease-brand), color 200ms var(--ease-brand), border-color 200ms var(--ease-brand);
}
.site-footer .footer-social a:hover {
  background: var(--accent);
  color: var(--text-heading);
  border-color: var(--accent);
}
/* =============================================================
   FORM NEWSLETTER (dark theme footer) — King Kendze
   Float label + GDPR + 4-state submit + validazione inline
   ============================================================= */

.newsletter-intro {
  font-size: 0.875rem;
  color: rgba(250, 250, 247, 0.62);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.footer-newsletter fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.875rem;
}

.footer-newsletter .form-field {
  position: relative;
}

/* Wrap input + icona + float label */
.footer-newsletter .form-input-wrap {
  position: relative;
  display: block;
}

.footer-newsletter .field-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(250, 250, 247, 0.4);
  pointer-events: none;
  z-index: 2;
  transition: color 250ms var(--ease-brand);
}

/* Input email */
.footer-newsletter .form-input {
  width: 100%;
  min-height: 48px;
  padding: 1.25rem 0.875rem 0.5rem 2.5rem;
  background: rgba(250, 250, 247, 0.04);
  border: 1.5px solid rgba(250, 250, 247, 0.12);
  border-radius: var(--radius-sm);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  outline: none;
  transition: border-color 250ms var(--ease-brand),
              background-color 250ms var(--ease-brand),
              box-shadow 250ms var(--ease-brand);
}
.footer-newsletter .form-input::placeholder {
  color: transparent;
}

/* Hover progressivo */
.footer-newsletter .form-input:hover {
  border-color: rgba(230, 7, 113, 0.4);
  background: rgba(250, 250, 247, 0.06);
}

/* Focus glow lime */
.footer-newsletter .form-input:focus,
.footer-newsletter .form-input:focus-visible {
  border-color: var(--accent);
  background: rgba(250, 250, 247, 0.08);
  box-shadow: 0 0 0 3px rgba(230, 7, 113, 0.18),
              0 0 16px rgba(230, 7, 113, 0.08);
}
.footer-newsletter .form-input-wrap:focus-within .field-icon {
  color: var(--accent);
}

/* Float label */
.footer-newsletter .form-label {
  position: absolute;
  left: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(250, 250, 247, 0.5);
  font-size: 0.9375rem;
  font-weight: 400;
  pointer-events: none;
  z-index: 1;
  transition: top 220ms var(--ease-brand),
              transform 220ms var(--ease-brand),
              font-size 220ms var(--ease-brand),
              color 220ms var(--ease-brand);
}

/* Float up al focus o se compilato */
.footer-newsletter .form-input:focus ~ .form-label,
.footer-newsletter .form-input:not(:placeholder-shown) ~ .form-label,
.footer-newsletter .form-input:-webkit-autofill ~ .form-label,
.footer-newsletter .form-field.is-filled .form-label {
  top: 0.375rem;
  transform: translateY(0);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Riduttore d'ansia (hint) */
.footer-newsletter .form-hint {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  color: rgba(250, 250, 247, 0.5);
  line-height: 1.4;
}
.footer-newsletter .form-hint svg {
  flex-shrink: 0;
  color: rgba(230, 7, 113, 0.6);
}

/* Stato errore */
.footer-newsletter .form-field.is-error .form-input {
  border-color: #FF4D4D;
  background: rgba(255, 77, 77, 0.05);
  animation: kkFormShake 0.4s var(--ease-brand);
}
.footer-newsletter .form-field.is-error .form-label {
  color: #FF7878;
}
.footer-newsletter .form-field.is-error .field-icon {
  color: #FF4D4D;
}
.footer-newsletter .form-error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #FF7878;
  line-height: 1.4;
}
.footer-newsletter .form-field.is-error .form-hint {
  display: none;
}

/* Stato success */
.footer-newsletter .form-field.is-success .form-input {
  border-color: var(--accent);
}
.footer-newsletter .form-field.is-success .form-label {
  color: var(--accent);
}

/* GDPR checkbox — pulita, no card */
.footer-newsletter .form-field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.25rem;
}
.footer-newsletter .form-field--checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  margin: 2px 0 0 0;
  border: 1.5px solid rgba(250, 250, 247, 0.3);
  border-radius: 3px;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 200ms var(--ease-brand),
              background-color 200ms var(--ease-brand);
}
.footer-newsletter .form-field--checkbox input[type="checkbox"]:hover {
  border-color: rgba(230, 7, 113, 0.6);
}
.footer-newsletter .form-field--checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.footer-newsletter .form-field--checkbox input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.footer-newsletter .form-field--checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-size: 75% 75%;
  background-position: center;
  background-repeat: no-repeat;
}
.footer-newsletter .form-field--checkbox label {
  font-size: 0.75rem;
  color: rgba(250, 250, 247, 0.6);
  line-height: 1.5;
  cursor: pointer;
}
.footer-newsletter .form-field--checkbox label a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.footer-newsletter .form-field--checkbox label a:hover {
  color: var(--accent-light);
}
.footer-newsletter .form-field--checkbox.is-error input[type="checkbox"] {
  border-color: #FF4D4D;
  animation: kkFormShake 0.4s var(--ease-brand);
}
.footer-newsletter .form-field--checkbox.is-error label {
  color: #FF7878;
}

/* Submit button — 4 stati: resting / loading / success / error */
.footer-newsletter .form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.875rem 1.5rem;
  background: var(--accent);
  color: var(--text-heading);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  margin-top: 0.5rem;
  transition: background-color 250ms var(--ease-brand),
              transform 200ms var(--ease-brand),
              box-shadow 250ms var(--ease-brand);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
              0 0 0 0 rgba(230, 7, 113, 0);
}
.footer-newsletter .form-submit:hover {
  background: var(--accent-light);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2),
              0 0 24px rgba(230, 7, 113, 0.25);
  transform: translateY(-1px);
}
.footer-newsletter .form-submit:active {
  transform: translateY(0);
}
.footer-newsletter .form-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* State labels (resting visibile, altri nascosti) */
.footer-newsletter .form-submit .btn-spinner,
.footer-newsletter .form-submit .btn-success,
.footer-newsletter .form-submit .btn-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-brand);
}

/* LOADING */
.footer-newsletter .form-submit.is-loading .btn-label { opacity: 0; }
.footer-newsletter .form-submit.is-loading .btn-spinner { opacity: 1; }
.footer-newsletter .form-submit.is-loading {
  background: var(--accent);
  cursor: wait;
}
.footer-newsletter .form-submit .btn-spinner .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-heading);
  animation: kkFormDot 1.2s infinite var(--ease-brand);
}
.footer-newsletter .form-submit .btn-spinner .dot:nth-child(2) { animation-delay: 0.15s; }
.footer-newsletter .form-submit .btn-spinner .dot:nth-child(3) { animation-delay: 0.3s; }

/* SUCCESS */
.footer-newsletter .form-submit.is-success {
  background: var(--accent);
  pointer-events: none;
}
.footer-newsletter .form-submit.is-success .btn-label { opacity: 0; }
.footer-newsletter .form-submit.is-success .btn-success {
  opacity: 1;
  color: var(--text-heading);
}
.footer-newsletter .form-submit.is-success .btn-success svg {
  animation: kkFormCheck 0.5s var(--ease-brand-out) backwards;
}

/* ERROR */
.footer-newsletter .form-submit.is-error {
  background: #FF4D4D;
  color: #FFFFFF;
  animation: kkFormShake 0.4s var(--ease-brand);
}
.footer-newsletter .form-submit.is-error .btn-label { opacity: 0; }
.footer-newsletter .form-submit.is-error .btn-error {
  opacity: 1;
  color: #FFFFFF;
}

/* Success state IN-PLACE (form si trasforma) */
.footer-newsletter.is-submitted fieldset {
  display: none;
}
.footer-newsletter.is-submitted .form-success-msg {
  display: flex;
}
.form-success-msg {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: rgba(230, 7, 113, 0.08);
  border: 1px solid rgba(230, 7, 113, 0.3);
  border-radius: var(--radius-sm);
  animation: kkFormSuccessIn 0.5s var(--ease-brand-out);
}
.form-success-msg__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
}
.form-success-msg__title svg {
  flex-shrink: 0;
}
.form-success-msg__body {
  font-size: 0.8125rem;
  color: rgba(250, 250, 247, 0.7);
  line-height: 1.5;
}

/* Animazioni form */
@keyframes kkFormShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
@keyframes kkFormDot {
  0%, 60%, 100% { transform: scale(0.6); opacity: 0.4; }
  30% { transform: scale(1); opacity: 1; }
}
@keyframes kkFormCheck {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(0); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes kkFormSuccessIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* prefers-reduced-motion: niente shake/check/dot */
@media (prefers-reduced-motion: reduce) {
  .footer-newsletter .form-field.is-error .form-input,
  .footer-newsletter .form-field--checkbox.is-error input[type="checkbox"],
  .footer-newsletter .form-submit.is-error,
  .form-success-msg,
  .footer-newsletter .form-submit .btn-spinner .dot,
  .footer-newsletter .form-submit.is-success .btn-success svg {
    animation: none !important;
  }
  .footer-newsletter .form-submit:hover {
    transform: none;
  }
  .footer-newsletter .form-label,
  .footer-newsletter .form-input,
  .footer-newsletter .field-icon {
    transition: none !important;
  }
}

/* =============================================================
   SEARCH FORM polish (King Kendze)
   ============================================================= */
.search-form { width: 100%; }
.search-form__wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.search-form__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 2;
  transition: color 200ms var(--ease-brand);
}
.search-form__wrap:focus-within .search-form__icon {
  color: var(--text-heading);
}
.search-form input[type="search"] {
  flex: 1;
  min-height: 48px;
  padding: 0.75rem 0.75rem 0.75rem 2.75rem;
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text);
  outline: none;
  transition: border-color 200ms var(--ease-brand),
              box-shadow 200ms var(--ease-brand);
}
.search-form input[type="search"]:hover {
  border-color: var(--border-strong);
}
.search-form input[type="search"]:focus {
  border-color: var(--text-heading);
  box-shadow: 0 0 0 3px rgba(230, 7, 113, 0.18);
}
.search-form input[type="search"]::placeholder {
  color: var(--text-subtle);
}
.footer-enti {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 250, 247, 0.1);
  flex-wrap: wrap;
}
.footer-enti-label {
  font-size: 0.75rem;
  color: rgba(250, 250, 247, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-enti-list {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(250, 250, 247, 0.1);
  font-size: 0.8125rem;
  color: rgba(250, 250, 247, 0.6);
}
@media (max-width: 767px) {
  .footer-legal {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 0.5rem;
  }
}
.footer-legal__links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-legal__credit {
  font-size: 0.75rem;
  border-top: 1px dashed rgba(250, 250, 247, 0.1);
  padding-top: 1rem;
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  opacity: 0.6;
}
.footer-legal__credit a {
  text-decoration: underline;
  text-decoration-color: rgba(250, 250, 247, 0.2);
  text-underline-offset: 2px;
}
.site-footer__decor {
  --rotation-speed: 30s;
}
@media (max-width: 767px) {
  .site-footer__decor {
    width: 160px !important;
    height: 160px !important;
    bottom: -30px !important;
    right: -30px !important;
    opacity: 0.5 !important;
  }
}

/* ----------------------------------------------------------------------------
   BACK-TO-TOP
   ---------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cta);
  color: var(--cta-text);
  border: 0;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.15);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 250ms var(--ease-brand),
              transform 250ms var(--ease-brand-out),
              background-color 200ms var(--ease-brand),
              color 200ms var(--ease-brand);
  pointer-events: none;
  z-index: 90;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--accent);
  color: var(--text-heading);
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* Hide screen reader only text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ============================================================================
   RUNTIME PERFORMANCE POLISH — Step 16
   Pause animazioni fuori viewport, touch-action, content-visibility.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. content-visibility per sezioni below-the-fold (Chrome boost)
   ---------------------------------------------------------------------------- */
.section:not(.section--first):not(.hero-home):not(.hero-inner) {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ----------------------------------------------------------------------------
   2. touch-action: manipulation — elimina 300ms tap delay su iOS
   ---------------------------------------------------------------------------- */
.btn,
.btn--primary,
.btn--outline,
.btn--ghost,
.sticky-cta-whatsapp,
.back-to-top,
.faq-item__q,
.site-header__cta,
.site-header__brand,
.nav-desktop a,
.nav-mobile a,
.footer-social a,
.link-arrow,
input[type="submit"],
button {
  touch-action: manipulation;
}

/* ----------------------------------------------------------------------------
   3. Animation pause quando fuori viewport (signature-compass + altri infinite)
   ---------------------------------------------------------------------------- */
.signature-compass {
  animation-play-state: running;
}
.signature-compass[data-paused="true"] {
  animation-play-state: paused;
}

/* Su mobile, riduci la rotation speed per preservare batteria */
@media (max-width: 767px) {
  .signature-compass {
    --rotation-speed: 60s;  /* da 30s a 60s, più discreto */
  }
}

/* Su connessioni lente / save-data, disabilita rotation */
@media (prefers-reduced-data: reduce) {
  .signature-compass {
    animation: none;
  }
}

/* ==================================================================
   UNIVERSAL CARD HOVER — zoom + rotation + bordo lime 10px netto
   Applica l'effetto "tribe" su tutte le card del sito:
   service, usp, testimonial, event, team, benefit (small + wide-dark).
   Le card-foto (tribe-spot, discipline, benefit-hero, trip-gallery)
   hanno regole dedicate altrove con zoom della foto interna.
   ================================================================== */
@media (hover: hover) {
  .service-card:hover,
  .usp-card:hover,
  .testimonial:hover,
  .testimonial-card:hover,
  .testimonial-card--google:hover,
  .team-card:hover,
  .benefit-card--small:hover,
  .benefit-card--wide-dark:hover,
  .how-step:hover {
    transform: translateY(-6px) rotate(-1.5deg);
    box-shadow: 0 0 0 10px var(--accent),
                0 24px 50px -12px rgba(10, 10, 10, 0.32);
    border-color: var(--accent);
    z-index: 2;
  }
  /* Card pari: rotation opposta per varietà visiva */
  .service-card:nth-child(even):hover,
  .usp-card:nth-child(even):hover,
  .testimonial:nth-child(even):hover,
  .testimonial-card:nth-child(even):hover,
  .testimonial-card--google:nth-child(even):hover,
  .team-card:nth-child(even):hover,
  .benefit-card--small:nth-child(even):hover,
  .benefit-card--wide-dark:nth-child(even):hover,
  .how-step:nth-child(even):hover {
    transform: translateY(-6px) rotate(1.5deg);
  }
  /* Event-card ha rotation di base (.event-card--rotate-1/2/3/4):
     su hover si raddrizza con un leggero scale-up + bordo lime. */
  .event-card:hover {
    transform: rotate(0) translateY(-6px) scale(1.02);
    box-shadow: 0 0 0 10px var(--accent),
                0 24px 50px -12px rgba(10, 10, 10, 0.32);
    z-index: 2;
  }
}

/* =============================================================
   SPORT ICONS — colorazione per disciplina (post-meet 2026-05-04)
   Le icone ufficiali brand sono fill solid e cambiano colore in base
   allo sport (rosa skate, arancio snow, azzurro kite, navy/bianco surf).
   ============================================================= */
.discipline-card__sport-icon,
.experience-card__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
  transition: transform 360ms var(--ease-brand-out);
}
.discipline-card__sport-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 0.5rem;
}

/* Discipline-card → coloring per id sport. Le foto cinematic hanno overlay scuro,
   surf usa bianco perché navy non si vedrebbe. */
#skate .discipline-card__sport-icon { color: var(--sport-skate); }
#snow  .discipline-card__sport-icon { color: var(--sport-snow); }
#kite  .discipline-card__sport-icon { color: var(--sport-kite); }
#surf  .discipline-card__sport-icon { color: #FAFAF7; }

/* Experience-card → icon-box ridisegnata: niente background pieno, solo color
   sport + bordo soft. Più editoriale. */
.experience-card__icon-box {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.experience-card--surf .experience-card__icon-box { color: #FAFAF7; }
.experience-card--snow .experience-card__icon-box { color: var(--sport-snow); }
.experience-card--kite .experience-card__icon-box { color: var(--sport-kite); }

/* Hover: icona pulsa leggera */
.discipline-card:hover .discipline-card__sport-icon,
.experience-card:hover .experience-card__icon-box {
  transform: scale(1.08) rotate(-3deg);
}

/* =============================================================
   SPORT COLORING SISTEMATICO — ogni sport il suo colore ovunque
   Memo `project_kingkendze_sport_color_mapping.md` (vincolante).
   skate=rosa · snow=arancio · surf=navy/bianco-on-dark · kite=azzurro.

   Pattern: ogni card sport setta 2 custom properties locali
     --card-sport       (es. var(--sport-skate))
     --card-sport-rgb   (es. var(--sport-skate-rgb))
   Tutti gli accent della card poi usano var(--card-sport) anziché --accent.
   ============================================================= */

/* Token per-card (cascade fa il resto) */
.discipline-card#skate, .pricing-card--skate, .experience-card--skate,
.kk-sport--skate { --card-sport: var(--sport-skate); --card-sport-rgb: var(--sport-skate-rgb); }
.discipline-card#snow, .pricing-card--snow, .experience-card--snow,
.kk-sport--snow  { --card-sport: var(--sport-snow);  --card-sport-rgb: var(--sport-snow-rgb); }
.discipline-card#kite, .pricing-card--kite, .experience-card--kite,
.kk-sport--kite  { --card-sport: var(--sport-kite);  --card-sport-rgb: var(--sport-kite-rgb); }
/* Surf su sfondo scuro: fallback bianco (navy non si vede su cinematic). */
.discipline-card#surf, .pricing-card--surf, .experience-card--surf,
.kk-sport--surf  { --card-sport: #FAFAF7; --card-sport-rgb: 250, 250, 247; }

/* Inline mention sport (es. "Skate da €20" in home) */
.kk-sport {
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--card-sport);
}
.site-footer .kk-sport--surf,
.section--dark .kk-sport--surf { color: #FAFAF7; }
/* Su sfondo chiaro (light section) il bianco surf è inutilizzabile → navy */
.section--light .kk-sport--surf,
body > main > .section:not(.section--dark) .kk-sport--surf { color: var(--sport-surf); }

/* DISCIPLINE-CARD — tutti gli accent usano il sport color */
.discipline-card[id] .discipline-card__num,
.discipline-card[id] .discipline-card__sub,
.discipline-card[id] .discipline-card__quote cite { color: var(--card-sport); }
.discipline-card[id] .discipline-card__price {
  background: var(--card-sport);
  color: var(--text-heading);
}
.discipline-card#surf .discipline-card__price { color: var(--bg-dark); }
.discipline-card[id] .discipline-card__quote { border-left-color: var(--card-sport); }
/* Bordo verticale sinistro (.discipline-card::after) → sport color */
.discipline-card#skate::after { background: var(--sport-skate); }
.discipline-card#snow::after  { background: var(--sport-snow); }
.discipline-card#kite::after  { background: var(--sport-kite); }
.discipline-card#surf::after  { background: #FAFAF7; }

/* DUOTONE EFFECT: B&N a riposo, hover diventa colorato + tinta del sport */
.discipline-card__bg {
  overflow: hidden;
}
.discipline-card__bg img {
  filter: grayscale(1) contrast(1.05) brightness(0.92);
}
.discipline-card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--card-sport-rgb));
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 600ms var(--ease-brand);
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) {
  .discipline-card:hover .discipline-card__bg img {
    filter: saturate(1.18);
    transform: scale(1.10);
  }
  .discipline-card:hover .discipline-card__bg::after { opacity: 0.55; }
  /* Hover bordo 10px del sport */
  .disciplines-grid #skate:hover { box-shadow: 0 0 0 10px var(--sport-skate), 0 28px 56px rgba(0,0,0,0.34); }
  .disciplines-grid #snow:hover  { box-shadow: 0 0 0 10px var(--sport-snow),  0 28px 56px rgba(0,0,0,0.34); }
  .disciplines-grid #kite:hover  { box-shadow: 0 0 0 10px var(--sport-kite),  0 28px 56px rgba(0,0,0,0.34); }
  .disciplines-grid #surf:hover  { box-shadow: 0 0 0 10px #FAFAF7,            0 28px 56px rgba(0,0,0,0.34); }
}

/* PRICING-CARD — tutti gli accent usano sport color */
.pricing-card[class*="pricing-card--"] .pricing-card__sport,
.pricing-card[class*="pricing-card--"] .pricing-card__num,
.pricing-card[class*="pricing-card--"] .pricing-card__tariffa strong { color: var(--card-sport); }
.pricing-card[class*="pricing-card--"] .pricing-card__num {
  filter: drop-shadow(0 0 18px rgba(var(--card-sport-rgb), 0.40));
}
.pricing-card[class*="pricing-card--"] .pricing-card__divider {
  background: linear-gradient(90deg, var(--card-sport) 0%, rgba(var(--card-sport-rgb), 0.35) 50%, transparent 100%);
}
.pricing-card[class*="pricing-card--"] .pricing-card__lock {
  background: rgba(var(--card-sport-rgb), 0.18);
  color: var(--card-sport);
}
/* Surf pricing: stroke nero per leggibilità del bianco gigante */
.pricing-card--surf .pricing-card__num { -webkit-text-stroke: 4px var(--text-heading); }

/* Pricing-card duotone (foto bg) */
.pricing-card__bg img {
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  transition: filter 600ms var(--ease-brand), transform 700ms var(--ease-brand-out);
}
.pricing-card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--card-sport-rgb));
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 600ms var(--ease-brand);
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) {
  .pricing-card[class*="pricing-card--"]:hover .pricing-card__bg img {
    filter: saturate(1.18);
    transform: scale(1.06);
  }
  .pricing-card[class*="pricing-card--"]:hover .pricing-card__bg::after { opacity: 0.55; }
}

/* EXPERIENCE-CARD — sport label + bordo hover + duotone */
.experience-card[class*="experience-card--"] .experience-card__sport { color: var(--card-sport); }
.experience-card__bg img {
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  transition: filter 600ms var(--ease-brand), transform 700ms var(--ease-brand-out);
}
.experience-card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--card-sport-rgb));
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 600ms var(--ease-brand);
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) {
  .experience-card[class*="experience-card--"]:hover .experience-card__bg img {
    filter: saturate(1.18);
    transform: scale(1.06);
  }
  .experience-card[class*="experience-card--"]:hover .experience-card__bg::after { opacity: 0.55; }
  .experience-card--surf:hover { box-shadow: 0 0 0 10px #FAFAF7,            0 24px 50px -12px rgba(10,10,10,0.32); }
  .experience-card--snow:hover { box-shadow: 0 0 0 10px var(--sport-snow), 0 24px 50px -12px rgba(10,10,10,0.32); }
  .experience-card--kite:hover { box-shadow: 0 0 0 10px var(--sport-kite), 0 24px 50px -12px rgba(10,10,10,0.32); }
}

/* =============================================================
   IKO — sezione "Certificazioni internazionali" (chi-siamo + tesseramento)
   ============================================================= */
.section--iko {
  text-align: center;
  padding-block: clamp(64px, 10vw, 128px);
  background: var(--bg-secondary);
}
.section--iko .section__title { margin-bottom: 0.5rem; }
.section--iko .section__lead {
  max-width: 700px;
  margin: 0 auto 2.5rem;
}
.iko-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  max-width: 880px;
  margin: 0 auto 2rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 600px) {
  .iko-stats { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 0; }
}
.iko-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.iko-stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--sport-kite);
  -webkit-text-stroke: 1px var(--text-heading);
  paint-order: stroke fill;
}
.iko-stat__label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
  max-width: 220px;
  line-height: 1.4;
}
.iko-verify {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0;
}
.iko-verify a {
  color: var(--text-heading);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--sport-kite);
  transition: color var(--dur-fast) var(--ease-brand);
}
.iko-verify a:hover { color: var(--sport-kite); }

/* =============================================================
   FOOTER CLAIM "JOIN THE TRIBE" — coloring ufficiale brand
   Esattamente come sticker brand: JOIN arancio · THE azzurro · TRIBE rosa.
   ============================================================= */
.footer-claim {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0.75rem 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.footer-claim__word--snow  { color: var(--sport-snow); }
.footer-claim__word--kite  { color: var(--sport-kite); }
.footer-claim__word--skate { color: var(--sport-skate); }