/* ============================================================================
   Connecting Markets — landing pubblica (Jekyll). Tema "Navy Trust" portato da
   .cm-theme dell'app (app/src/index.css). Colori di superficie in HSL (come la
   convenzione ISP), brand/gradient/ombre in oklch (fedeltà 1:1 col design).
   ============================================================================ */
:root,
.cm-theme {
  --background: hsl(227 86% 8%);
  --foreground: hsl(211 47% 95%);
  --card: hsl(223 71% 14%);
  --card-foreground: hsl(211 47% 95%);
  --primary: hsl(217 56% 50%);
  --primary-foreground: hsl(0 0% 100%);
  --muted: hsl(222 43% 17%);
  --muted-foreground: hsl(211 24% 73%);
  --accent: hsl(149 68% 23%);
  --border: hsl(217 33% 31%);

  /* Brandkit Connecting Markets (grezzi via var). */
  --cm-blue: oklch(0.55 0.15 260);
  --cm-blue-light: oklch(0.44 0.13 260);
  --cm-blue-dark: oklch(0.36 0.12 260);
  --cm-blue-soft: oklch(0.78 0.09 255);

  --gradient-navbar: linear-gradient(135deg, var(--cm-blue-dark), var(--cm-blue));
  --gradient-hero: linear-gradient(180deg, oklch(0.16 0.06 265), oklch(0.2 0.07 265) 60%, oklch(0.16 0.06 265));
  --shadow-glow: 0 20px 80px -20px oklch(0.55 0.15 260 / 0.55);
  --shadow-soft: 0 8px 30px -8px oklch(0.08 0.04 265 / 0.65);
  --shadow-elegant: 0 18px 50px -18px oklch(0.08 0.04 265 / 0.7);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;

  --content-max: 1360px;
  --scene-max: 1600px;
  --content-pad-x: clamp(1.25rem, 3.5vw, 3rem);
  --section-py: clamp(5rem, 9vw, 8.5rem);
}

/* ── Reset / base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  /* Nessuno scroll orizzontale su mobile (scene con elementi in absolute). */
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3 {
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ── Layout utilities (ex @utility) ── */
.container-page {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad-x);
}
.container-scene {
  width: 100%;
  max-width: var(--scene-max);
  margin-inline: auto;
}
.section-py {
  padding-block: var(--section-py);
}
.divider {
  position: relative;
  height: 6rem;
  width: 100%;
}
@media (min-width: 768px) {
  .divider {
    height: 8rem;
  }
}
.accent-soft {
  color: var(--cm-blue-soft);
}
.accent-soft.strong {
  font-weight: 600;
}

/* ── Section heading ── */
.section-head {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.eyebrow--primary {
  color: var(--primary);
}
.eyebrow--accent {
  color: hsl(149 55% 55%);
}
.section-title {
  margin-top: 0.75rem;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 700;
  color: var(--foreground);
}
.section-title--left {
  text-align: left;
}
.section-sub {
  margin-top: 1rem;
  color: var(--muted-foreground);
}
.section-sub--left {
  text-align: left;
  max-width: 36rem;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.btn__icon {
  width: 1rem;
  height: 1rem;
}
.btn--primary {
  background: var(--cm-blue);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn--lg {
  padding: clamp(0.7rem, 0.9vw, 0.95rem) clamp(1.25rem, 1.6vw, 1.75rem);
  font-size: clamp(0.875rem, 0.95vw, 1rem);
}
.btn--xl {
  padding: 1rem 2.25rem;
  font-size: 1rem;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover {
    transform: translateY(-2px);
  }
}

/* CTA pill dell'header (outline blu istituzionale) */
.cta-pill {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 7.5rem;
  border: 1.5px solid #1a5aa7;
  border-radius: 0.5rem;
  background: transparent;
  padding: 0.375rem 1rem;
  font-size: 12px;
  font-weight: 600;
  color: #1a5aa7;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.cta-pill:hover {
  background: #1a5aa7;
  color: #fff;
}
.cta-pill__icon {
  width: 0.875rem;
  height: 0.875rem;
}
@media (min-width: 640px) {
  .cta-pill {
    min-width: 10rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
  }
  .cta-pill__icon {
    width: 1rem;
    height: 1rem;
  }
}

/* ── Header (bianco, sticky, ombra allo scroll) ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: none;
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.site-header.is-elevated {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.site-header__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  padding-block: clamp(0.75rem, 1.1vw, 1.25rem);
}
.site-header__brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  transition: opacity var(--dur-base) var(--ease-standard);
}
.site-header__brand:hover {
  opacity: 0.85;
}
.site-header__cm {
  height: clamp(1.75rem, 2.6vw, 2.75rem);
  width: auto;
  min-width: 100px;
  object-fit: contain;
}
.site-header__poweredby {
  display: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
}
.site-header__mp {
  display: none;
  height: clamp(1.1rem, 1.5vw, 1.5rem);
  width: auto;
  object-fit: contain;
}
.site-header__right {
  position: relative;
  z-index: 10;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.site-header__isp img {
  height: 28px;
  width: auto;
  object-fit: contain;
}
@media (min-width: 640px) {
  .site-header__poweredby,
  .site-header__mp {
    display: inline-block;
  }
}

/* ── Hero ── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gradient-hero);
}
.hero__globe {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  /* Riempie tutta l'altezza dell'hero (height:100% → nessuno stacco in alto/basso)
     ed è QUADRATO (aspect-ratio 1/1): così l'immagine quadrata con "cover" riempie
     ESATTAMENTE senza taglio a fascia, e — poiché l'elemento coincide col globo —
     la maschera circolare resta proporzionale (fade identico). Su schermi stretti
     il quadrato è più largo del pannello e sborda a sinistra sotto il testo (come
     l'originale), senza mai tagliarsi. */
  height: 100%;
  aspect-ratio: 1 / 1;
  background-image: url("../img/hero-globe-v2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: saturate(1.05);
  /* Maschera circolare: dissolve gli angoli verso un cerchio che racchiude il
     globo. Applicata al globo, ruota con esso: durante la rotazione resta sempre
     un disco sfumato, mai un bordo rettangolare. Gli stop dipendono da --cm-fade
     (0 = inizio, 1 = massimo): lo scroll lo alza linearmente (vedi landing.js),
     quindi il cerchio si stringe progressivamente scendendo. */
  --cm-fade: 0;
  /* Due maschere intersecate:
     1) cerchio scroll-driven (animazione, invariato);
     2) sfumatura DEDICATA e indipendente sul bordo sinistro (in % sulla larghezza
        del pannello) che fonde il globo verso la fascia navy — un filo su desktop
        (pannello ~quadrato) e di più su mobile (pannello stretto). */
  -webkit-mask-image: radial-gradient(
      circle at 50% 50%,
      #000 calc(58% - 34% * var(--cm-fade)),
      rgba(0, 0, 0, 0.4) calc(72% - 34% * var(--cm-fade)),
      transparent calc(84% - 34% * var(--cm-fade))
    ),
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 10%, #000 26%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(
      circle at 50% 50%,
      #000 calc(58% - 34% * var(--cm-fade)),
      rgba(0, 0, 0, 0.4) calc(72% - 34% * var(--cm-fade)),
      transparent calc(84% - 34% * var(--cm-fade))
    ),
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 10%, #000 26%);
  mask-composite: intersect;
  will-change: transform;
}
.hero__veil {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    to right,
    oklch(0.14 0.06 265 / 0.94) 0%,
    oklch(0.14 0.06 265 / 0.88) 40%,
    oklch(0.14 0.06 265 / 0.6) 52%,
    oklch(0.14 0.06 265 / 0.12) 65%,
    oklch(0.14 0.06 265 / 0) 85%
  );
}
.hero__glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(ellipse 58% 72% at 70% 50%, oklch(0.55 0.15 260 / 0.16), transparent 75%);
  mix-blend-mode: screen;
}
.hero__scene {
  position: relative;
  min-height: 88vh;
  max-height: 900px;
}
.hero__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88vh;
  max-height: 900px;
  padding-block: 5rem;
  padding-inline: var(--content-pad-x);
}
.hero__text {
  width: 100%;
  max-width: 640px;
}
@media (min-width: 1024px) {
  .hero__text {
    width: 52%;
  }
  .hero__content {
    padding-block: 7rem;
  }
}
.hero__title {
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  font-size: clamp(2.25rem, 4.2vw, 4.5rem);
}
.hero__lead {
  margin-top: 1.5rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.85);
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  max-width: 52ch;
}
.hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgb(255 255 255 / 0.85);
  transition: color var(--dur-base) var(--ease-standard);
}
.hero__scroll:hover {
  color: #fff;
}
.hero__scroll span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.35em;
}
.hero__scroll svg {
  width: 1.25rem;
  height: 1.25rem;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll svg {
    animation: cm-bounce 1.6s infinite;
  }
}
@keyframes cm-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.hero__fade {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  height: 6rem;
  background: linear-gradient(to bottom, transparent, var(--background));
}

/* ── "La piattaforma" — showcase scroll-driven (porting PlatformShowcase) ── */
.platform {
  position: relative;
  background: var(--background);
}
/* Sticky split: visibile solo ≥1024px. */
.platform__sticky {
  display: none;
}
.platform__mobile {
  display: block;
}
@media (min-width: 1024px) {
  /* Altezza = data-steps × 100vh: la sezione scorre sotto lo sticky (600vh per
     6 step). Solo desktop: su mobile la sezione è alta quanto il suo contenuto. */
  .platform {
    height: 600vh;
  }
  .platform__sticky {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .platform__mobile {
    display: none;
  }
}
.platform__split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: 2.5rem;
  height: 100%;
  padding-inline: 2rem;
}
.platform__title {
  margin-top: 0.75rem;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--foreground);
}
.platform__sub {
  margin-top: 1rem;
  max-width: 28rem;
  color: var(--muted-foreground);
}

/* Pillars (left column) */
.platform__pillars {
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pillar {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  padding: 0.75rem;
  text-align: left;
  cursor: pointer;
  opacity: 0.5;
  color: inherit;
  transition: opacity var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.pillar:hover {
  opacity: 1;
}
.pillar.is-active {
  opacity: 1;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.pillar__bar {
  height: 2rem;
  width: 3px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--border);
  transition: background var(--dur-base) var(--ease-standard);
}
.pillar.is-active .pillar__bar {
  background: var(--primary);
}
.pillar__icon {
  flex-shrink: 0;
  color: var(--muted-foreground);
  transition: color var(--dur-base) var(--ease-standard);
}
.pillar__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.pillar.is-active .pillar__icon {
  color: var(--primary);
}
.pillar__text {
  min-width: 0;
}
.pillar__eyebrow {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}
.pillar__name {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scene card (right column) */
.scene-card {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--card) 40%, transparent);
  box-shadow: var(--shadow-soft);
}
.scene-card__layers {
  position: absolute;
  inset: 0;
}
.scene-card__footer {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 5;
}
.scene-card__counter {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.scene-card__track {
  position: relative;
  height: 2px;
  flex: 1;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--border);
}
.scene-card__progress {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0%;
  background: var(--primary);
}
.platform__desc {
  margin-top: 1.5rem;
}
.platform__desc h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
}
.platform__desc p {
  margin-top: 0.5rem;
  max-width: 36rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Mobile stacked cards */
.platform__mobile-inner {
  max-width: 48rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: 4rem;
}
.platform__cards {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.platform-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.platform-card__icon {
  color: var(--primary);
}
.platform-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.platform-card__eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}
.platform-card h3 {
  margin-top: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
}
.platform-card p {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.platform-card .scene {
  position: relative;
  margin-top: 1rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--card) 40%, transparent);
}

/* ── Scenes (comuni) ── */
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow, 420ms) var(--ease-standard), transform var(--dur-slow, 420ms) var(--ease-standard);
  transform: translateY(24px);
}
.scene-card__layers .scene.is-active {
  opacity: 1;
  transform: translateY(0);
}
/* Nel layout mobile ogni scena è sempre visibile nella propria card. */
.platform-card .scene {
  opacity: 1;
  transform: none;
}
.scene svg {
  display: block;
}
.scene__center {
  position: absolute;
  left: 50%;
  top: 1.5rem;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.scene__count {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 1.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.scene__count-label {
  margin-top: 0.25rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
}
.scene-fill {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
}
/* Scene fade-in dei punti mappa */
@keyframes cm-dot-in {
  from { opacity: 0; }
  to { opacity: 0.85; }
}
@keyframes cm-country-in {
  0% { opacity: 0.12; }
  40% { opacity: 1; }
  100% { opacity: 0.7; }
}
@keyframes cm-hub-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.4); }
}
@keyframes cm-ping {
  0% { transform: scale(1); opacity: 0.75; }
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes cm-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* AI search scene */
.ai-search__box {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--background) 85%, transparent);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}
.ai-search__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}
.ai-search__label svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--primary);
}
.ai-search__query {
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--foreground);
}
.ai-search__caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 2px;
  vertical-align: middle;
  background: var(--primary);
  animation: cm-blink 1s step-end infinite;
}
.ai-search__results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ai-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--card) 90%, transparent);
  padding: 0.625rem 0.75rem;
  opacity: 0;
  transform: translateX(-12px);
  animation: cm-result-in 0.35s var(--ease-standard) forwards;
}
@keyframes cm-result-in {
  to { opacity: 1; transform: translateX(0); }
}
.ai-result__mark {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background: var(--foreground);
  color: var(--background);
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
}
.ai-result__body {
  min-width: 0;
  flex: 1;
}
.ai-result__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-result__meta {
  font-size: 11px;
  color: var(--muted-foreground);
}
.ai-result__donut {
  position: relative;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
}
.ai-result__donut span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--foreground);
}

/* Partners scene */
.partners__grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--foreground) 8%, transparent) 1px, transparent 0);
  background-size: 18px 18px;
}
.partners__radial {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, color-mix(in oklab, var(--primary) 8%, transparent), transparent 55%);
}
.partners__col {
  position: absolute;
  inset-block: 0.75rem;
  display: flex;
  width: 32%;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.partners__col--left {
  left: 1rem;
}
.partners__col--right {
  right: 1rem;
}
.service-tile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--card) 90%, transparent);
  padding: 0.375rem 0.5rem;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.service-tile:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  box-shadow: var(--shadow-elegant);
}
.partners__col--right .service-tile {
  flex-direction: row-reverse;
  text-align: right;
}
.service-tile__icon {
  display: grid;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
}
.service-tile__icon svg {
  height: 0.875rem;
  width: 0.875rem;
}
.service-tile__label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-tile__meta {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-foreground);
}
.partners__medallion {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.partners__orbit {
  position: absolute;
  inset: -1.25rem;
  animation: cm-spin 28s linear infinite;
}
@keyframes cm-spin {
  to { transform: rotate(360deg); }
}
.partners__halo {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: color-mix(in oklab, var(--primary) 25%, transparent);
  filter: blur(16px);
  animation: cm-halo 3s ease-in-out infinite;
}
@keyframes cm-halo {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.12); opacity: 0.7; }
}
.partners__mark {
  position: relative;
  display: grid;
  place-items: center;
}
.partners__logo {
  display: block;
  height: clamp(1.7rem, 3.8vw, 2.4rem);
  width: auto;
}
.partners__name {
  margin-top: 0.75rem;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--foreground);
}
.partners__role {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}

/* Live data scene */
.live__panel {
  position: relative;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--background) 60%, transparent);
  padding: 1rem;
}
.live__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.live__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
}
.live__badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--foreground);
}
.live__dot {
  position: relative;
  display: inline-flex;
  height: 0.5rem;
  width: 0.5rem;
}
.live__dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #34d399;
  animation: cm-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.live__dot::after {
  content: "";
  position: relative;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background: #10b981;
}
.live__logs {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.live__log {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--card) 60%, transparent);
  padding: 0.375rem 0.75rem;
  font-size: 11px;
  opacity: 0;
  transform: translateX(-8px);
  animation: cm-result-in 0.4s var(--ease-standard) forwards;
}
.live__log time {
  font-family: ui-monospace, monospace;
  color: var(--muted-foreground);
}
.live__log span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--foreground);
}

/* Supply chain scene */
.supply-scene__tag {
  position: absolute;
  top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}
.supply-scene__tag--left {
  left: 1rem;
}
.supply-scene__tag--right {
  right: 1rem;
  color: var(--primary);
}
.supply-scene__tag .dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 9999px;
  background: var(--primary);
}
.supply-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.supply-chip__flag {
  position: relative;
  height: 2.25rem;
  width: 3rem;
  overflow: hidden;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  background: var(--background);
  box-shadow: var(--shadow-soft);
}
.supply-chip__flag img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.supply-chip__code {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--foreground);
}
.supply-chip--hub .supply-chip__flag {
  height: 3.5rem;
  width: 5rem;
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-elegant);
}
.supply-chip__hq {
  border-radius: 0.375rem;
  background: var(--primary);
  padding: 0.1rem 0.5rem;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--primary-foreground);
}

/* ── Mobile (telefoni): adatta le scene ai card stretti. Le scene sono portate
   con dimensioni desktop; sotto i 480px vanno rimpicciolite per non
   accavallarsi/uscire dal riquadro (aspect 4/3). Il tablet (481–1023px) usa lo
   stesso layout impilato ma con spazio a sufficienza. ── */
@media (max-width: 480px) {
  .scene-fill {
    padding: 1rem;
    gap: 0.6rem;
  }
  .scene__count {
    font-size: 1.4rem;
  }

  /* Ricerca AI — card risultati compatte */
  .ai-search__box {
    padding: 0.6rem;
  }
  .ai-search__query {
    font-size: 11px;
  }
  .ai-result {
    padding: 0.4rem 0.5rem;
    gap: 0.5rem;
  }
  .ai-result__mark {
    height: 2rem;
    width: 2rem;
    font-size: 0.65rem;
  }
  .ai-result__name {
    font-size: 11px;
  }
  .ai-result__meta {
    font-size: 9px;
  }
  .ai-result__donut {
    height: 2rem;
    width: 2rem;
  }

  /* Dati live */
  .live__log {
    padding: 0.3rem 0.5rem;
    font-size: 10px;
  }

  /* Supply chain — 8 bandiere su ~335px: riducile per non sovrapporsi */
  .supply-chip__flag {
    height: 1.5rem;
    width: 2rem;
  }
  .supply-chip--hub .supply-chip__flag {
    height: 2.25rem;
    width: 3.25rem;
  }
  .supply-chip__code {
    display: none;
  }
  .supply-chip__hq {
    font-size: 8px;
    padding: 0.05rem 0.35rem;
  }
  .supply-scene__tag {
    font-size: 8px;
    letter-spacing: 0.12em;
  }

  /* Partner — tile più piccoli */
  .partners__name {
    font-size: 9px;
  }
  .partners__role {
    font-size: 8px;
  }
  .service-tile {
    padding: 0.25rem 0.35rem;
    gap: 0.35rem;
  }
  .service-tile__icon {
    height: 1.4rem;
    width: 1.4rem;
  }
  .service-tile__label {
    font-size: 9px;
  }
  .service-tile__meta {
    display: none;
  }
}

/* ── Feature cards ── */
.feature-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feature-card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  padding: 1.75rem;
  transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--primary) 50%, transparent);
  box-shadow: var(--shadow-glow);
}
.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.6rem;
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  color: var(--primary);
}
.feature-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.feature-card h3 {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
}
.feature-card p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* ── Supply chain ── */
.supply {
  position: relative;
}
.supply__halo {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, oklch(0.55 0.15 260 / 0.1), transparent 70%);
}
.supply__grid {
  position: relative;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .supply__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}
.supply__list {
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--foreground);
}
.supply__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.supply__list .dot {
  margin-top: 0.5rem;
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: hsl(149 55% 50%);
}
.supply__panel {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--background) 60%, transparent);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.stat {
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: color-mix(in oklab, var(--card) 60%, transparent);
  padding: 1rem;
}
.stat__value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--foreground);
}
.stat__label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.supply__example {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  padding: 1.25rem;
}
.supply__example-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.supply__example p:last-child {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--foreground);
}

/* ── CTA finale ── */
.cta-section {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-section__bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
}
.cta-section__blob {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 25%;
  width: 60%;
  height: 18rem;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: color-mix(in oklab, var(--primary) 20%, transparent);
  filter: blur(64px);
}
.cta-section__inner {
  position: relative;
}
.cta-section__actions {
  margin-top: 2rem;
}

/* ── Footer (disclaimer legale) ── Fascia blu istituzionale (gradient-navbar),
   solo leggermente più stretta di prima (padding verticale ridotto) per essere
   meno invasiva. Identica al BrandedFooter dell'app. */
.site-footer {
  position: relative;
  color: var(--primary-foreground);
  background: var(--gradient-navbar);
}
.site-footer__inner {
  padding-block: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 11px;
  line-height: 1.6;
  opacity: 0.9;
}
.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.site-footer a:hover {
  opacity: 1;
}
/* Tendina note legali: chevron nell'angolo in alto a destra dello SCHERMO
   (assoluto rispetto al footer full-width → non aggiunge altezza) + pannello
   collassabile con transizione pulita (grid-template-rows 0fr↔1fr). Aperto di default. */
.site-footer__toggle {
  position: absolute;
  top: 1.5rem;
  right: var(--content-pad-x);
  display: inline-flex;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  line-height: 0;
}
.site-footer__chevron {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-base) var(--ease-standard);
}
.site-footer__toggle[aria-expanded="true"] .site-footer__chevron {
  transform: rotate(180deg);
}
.site-footer__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-base) var(--ease-standard);
}
.site-footer__panel.is-collapsed {
  grid-template-rows: 0fr;
}
.site-footer__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  overflow: hidden;
}