/* ═══════════════════════════════════════════════════════
   ADVERTISE.CSS — H2OPEN Advertise Page
   Tutte le regole specifiche di advertise.html.
   Variabili, reset, body, cursore, grain, loader, nav,
   footer, scroll-cue → ereditati da style.css
═══════════════════════════════════════════════════════ */

/* ── Sfondo uniforme su TUTTI i section container e sticky-wrap
   Impedisce che il body (nero) emerga nel passaggio tra sezioni ── */
.scroll-section        { background: var(--deep); }
.scroll-section .sticky-wrap { background: var(--deep); }
#adv-cta               { background: var(--deep); }

/* ── Nav link attivo ── */
.nav-link--active {
  color: var(--water) !important;
}

/* ════════════════════════════════════════════════════════
   SEC A1 — HERO
════════════════════════════════════════════════════════ */
#adv-hero { height: 520vh; overflow-x: clip; }
#adv-hero .sticky-wrap { overflow: visible; background: var(--deep); }

#adv-hero-bg {
  position: absolute; inset: 0;
  /* nessun gradiente: sfondo piatto var(--deep) per transizione
     senza rotture visive con la sezione successiva */
  background: var(--deep);
}

/* Banner pubblicitario rotto */
#adv-banner-wrap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 8; gap: 18px;
  pointer-events: none;
}
/* Immagine sorgente — nascosta subito, il canvas WebGL la sostituisce senza flash */
#adv-banner-img {
  width: clamp(280px, 55vw, 780px); height: auto;
  opacity: 0;
  pointer-events: none;
  position: relative; z-index: 7;
}
/* Canvas WebGL shatter — copre tutto il viewport sticky.
   Three.js gestisce canvas.width/height del buffer;
   il CSS gestisce la visualizzazione a schermo intero. */
#shatter-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 8; pointer-events: none;
  opacity: 1;
  display: block;
}
#adv-banner-label {
  position: relative; z-index: 9;
  font-family: var(--mono); font-size: clamp(.6rem, 1.1vw, .75rem);
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.22); opacity: 0;
}

/* Bottiglia hero */
#adv-hero-bottle {
  position: absolute; bottom: -15vh; left: 50%;
  transform: translateX(-50%);
  z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  will-change: transform;
  transform-origin: center bottom;
}
#adv-hero-bottle-img {
  height: clamp(260px, 50vh, 640px); width: auto;
  opacity: 0;
  filter: drop-shadow(0 0 60px rgba(0,196,240,.45));
  will-change: opacity;
}
#adv-hero-bottle-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(ellipse 60% 60% at 50% 60%, rgba(0,196,240,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Testo hero */
#adv-hero-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 10; text-align: center;
  padding-bottom: 22vh; pointer-events: none;
  opacity: 0;
}
#adv-hero-eyebrow {
  font-family: var(--mono); font-size: clamp(.58rem, 1.1vw, .75rem);
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--water); margin-bottom: 22px;
}
#adv-hero-title {
  font-family: var(--clash); font-size: clamp(2.6rem, 7vw, 9.5rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -.02em; color: var(--ice);
}
#adv-hero-title span { display: block; overflow: hidden; }
#adv-hero-title em   { display: inline-block; font-style: normal; transform: translateY(110%); will-change: transform; }
#adv-hero-sub {
  font-family: var(--mono); font-size: clamp(.7rem, 1.4vw, .95rem);
  color: rgba(255,255,255,.38); letter-spacing: .25em; text-transform: uppercase;
  margin-top: 28px; opacity: 0;
}
.adv-hero-cta-row {
  display: flex; gap: 16px; margin-top: 36px;
  flex-wrap: wrap; justify-content: center;
  pointer-events: auto;
}
#adv-hero-cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold); color: var(--deep);
  font-family: var(--mono); font-size: .75rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 14px 32px; border-radius: 50px; text-decoration: none;
  opacity: 0; transform: translateY(20px);
  transition: box-shadow .3s, transform .2s;
}
#adv-hero-cta-primary:hover { box-shadow: 0 0 30px rgba(201,169,110,.55); transform: translateY(-2px); }
#adv-hero-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.5);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase;
  padding: 14px 28px; border-radius: 50px; text-decoration: none;
  opacity: 0; transform: translateY(20px);
  transition: border-color .3s, color .3s;
}
#adv-hero-cta-secondary:hover { border-color: rgba(0,196,240,.4); color: var(--water); }

/* ════════════════════════════════════════════════════════
   SEC A2 — BATTAGLIA / TABELLA COMPARATIVA
════════════════════════════════════════════════════════ */
#adv-battle { height: 450vh; }
/* background gestito dalla regola globale .scroll-section .sticky-wrap */

#adv-battle-bg {
  position: absolute; inset: 0;
  background: var(--deep);
}

#adv-battle-header {
  position: absolute; top: 8vh; left: 50%;
  transform: translateX(-50%); text-align: center;
  z-index: 5; pointer-events: none; width: 90vw;
  opacity: 0;
}
#adv-battle-eyebrow {
  font-family: var(--mono); font-size: clamp(.58rem, 1vw, .72rem);
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--water); display: block; margin-bottom: 16px;
}
/* Titolo A e B: stile identico, sovrapposti */
#adv-battle-title-a,
#adv-battle-title-b {
  font-family: var(--clash); font-size: clamp(2rem, 4.5vw, 6rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -.02em;
  width: 100%; text-align: center;
}
/* A è in flusso normale (occupa spazio per definire altezza contenitore) */
#adv-battle-title-a { position: relative; }
/* B sovrapposto esattamente su A, centrato con left:0 right:0 per non dipendere da transform */
#adv-battle-title-b {
  position: absolute;
  left: 0; right: 0; top: 32px; /* 32px = margin-bottom eyebrow */
  opacity: 0;
}
#adv-battle-title-a .ln,
#adv-battle-title-b .ln { display: block; overflow: hidden; }
#adv-battle-title-a em,
#adv-battle-title-b em  { display: inline-block; font-style: normal; transform: translateY(110%); }

/* Griglia tabella — parte da sotto il titolo, non più centrata verticalmente */
#adv-battle-grid {
  position: absolute; left: 0; right: 0;
  top: clamp(160px, 36vh, 300px); bottom: 0;
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 4; pointer-events: none;
  padding: 0 4vw; overflow: hidden;
  opacity: 0;
}
#adv-battle-table {
  width: 100%; max-width: 900px;
  display: flex; flex-direction: column; gap: 0;
}
.bt-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.bt-head { margin-bottom: 4px; }
.bt-cell {
  padding: clamp(8px,1.5vh,16px) clamp(6px,1.2vw,14px);
  font-family: var(--mono); font-size: clamp(.52rem, 1vw, .72rem);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.28); opacity: 0;
  transition: none;
}
.bt-label-col { color: rgba(255,255,255,.45); font-size: clamp(.55rem, 1vw, .74rem); }
.bt-col-other { text-align: center; }
.bt-col-h2o   { text-align: center; color: var(--water); font-weight: 700; }

/* Celle negative (competitor) */
/* Dual-label helpers: mobile mostra bt-mob, desktop mostra bt-desk */
.bt-mob  { display: none; }

.bt-cell.val-bad  { color: rgba(255,59,59,.75); }
/* Celle positive (H2OPEN) */
.bt-cell.val-good {
  color: var(--water); font-weight: 700;
  text-shadow: 0 0 12px rgba(0,196,240,.6);
}
/* Highlight riga H2OPEN intera */
.bt-row:not(.bt-head) .bt-col-h2o {
  border-left: 1px solid rgba(0,196,240,.18);
  background: linear-gradient(90deg, transparent, rgba(0,196,240,.04));
}

/* Scanner PCB sulla tabella */
#adv-battle-scanner {
  position: absolute; left: 2vw; right: 2vw;
  height: 1px; top: 50%; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--water), rgba(0,196,240,.7), var(--water), transparent);
  box-shadow: 0 0 10px 2px rgba(0,196,240,.5), 0 0 32px 6px rgba(0,196,240,.1);
  z-index: 8; pointer-events: none;
}

/* ════════════════════════════════════════════════════════
   SEC A3 — ROI PIPELINE
════════════════════════════════════════════════════════ */
#adv-roi { height: 450vh; }
#adv-roi .sticky-wrap { background: var(--deep); }

#adv-roi-header {
  position: absolute; top: 8vh; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5; pointer-events: none; opacity: 0;
  max-width: 60vw;
}
#adv-roi-eyebrow {
  font-family: var(--mono); font-size: clamp(.58rem, 1vw, .72rem);
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--water); display: block; margin-bottom: 16px;
}
#adv-roi-title {
  font-family: var(--clash); font-size: clamp(2rem, 4vw, 5.5rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -.02em;
}
#adv-roi-title .ln { display: block; overflow: hidden; }
#adv-roi-title em  { display: inline-block; font-style: normal; transform: translateY(110%); }

/* SVG pipeline */
#adv-roi-svg {
  position: absolute; left: 3vw; right: 3vw;
  top: 50%; transform: translateY(-50%);
  width: 94vw; height: 160px;
  z-index: 4; overflow: visible;
}
#adv-roi-wire {
  filter: drop-shadow(0 0 4px rgba(0,196,240,.7));
}
.roi-node {
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(0,196,240,.8));
}

/* Cards ROI */
#adv-roi-cards {
  position: absolute; left: 0; right: 0;
  top: calc(50% + 90px);
  display: flex; justify-content: space-around;
  padding: 0 3vw; z-index: 5; pointer-events: none;
}
.roi-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; opacity: 0; text-align: center;
  max-width: clamp(80px, 13vw, 140px);
}
.roi-card-icon {
  font-family: var(--mono); font-size: clamp(.48rem, .85vw, .62rem);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.28); margin-bottom: 4px;
}
.roi-card-val {
  font-family: var(--clash); font-size: clamp(1.4rem, 2.8vw, 3rem);
  font-weight: 700; color: var(--water); line-height: 1;
  text-shadow: 0 0 20px rgba(0,196,240,.6);
}
.roi-card-unit {
  font-family: var(--mono); font-size: clamp(.5rem, .85vw, .65rem);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

/* Card superiori (sopra la pipeline) */
#adv-roi-cards-top {
  position: absolute; left: 0; right: 0;
  top: calc(50% - 220px);
  display: flex; justify-content: space-around;
  padding: 0 3vw; z-index: 5; pointer-events: none;
}

#adv-roi-note {
  position: absolute; bottom: 5vh; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: clamp(.48rem, .85vw, .62rem);
  letter-spacing: .16em; color: rgba(255,255,255,.18);
  text-align: center; white-space: nowrap; opacity: 0;
  z-index: 5;
}

/* Mobile ROI timeline — nascosta su desktop */
#adv-roi-mobile { display: none; }

/* ── Layout identico a #dist-req-line-wrap ── */
#adv-roi-mob-line {
  position: absolute;
  left: 50%; top: 14%; bottom: 10%;
  width: 2px;
  background: linear-gradient(to bottom, var(--water), rgba(0,196,240,.3));
  box-shadow: 0 0 10px rgba(0,196,240,.45);
  transform: translateX(-50%);
  clip-path: inset(0 0 100% 0);
}

/* Nodi: drop allineato alla linea, contenuto a destra */
.roi-mob-node {
  position: absolute;
  left: 50%;
  transform: translateX(-14px); /* drop 28px / 2 = 14px */
  display: flex; align-items: center; gap: 20px;
  width: clamp(240px, 78vw, 440px);
  opacity: 0;
}
#rmn-0 { top: 14%; }
#rmn-1 { top: 27%; }
#rmn-2 { top: 40%; }
#rmn-3 { top: 53%; }
#rmn-4 { top: 66%; }
#rmn-5 { top: 77%; }
#rmn-6 { top: 88%; }

.rmn-dot {
  flex-shrink: 0; width: 28px; height: 28px;
  filter: drop-shadow(0 0 0px rgba(0,196,240,0));
  transition: filter .4s;
  position: relative; z-index: 2;
}
.roi-mob-node.lit .rmn-dot {
  filter: drop-shadow(0 0 10px rgba(0,196,240,.85));
}

.rmn-content { flex: 1; }
.rmn-icon {
  font-family: var(--mono); font-size: .5rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.28); margin-bottom: 2px;
  transition: color .4s;
}
.roi-mob-node.lit .rmn-icon { color: var(--water); }

.rmn-val {
  font-family: var(--clash); font-size: clamp(1.6rem, 6.5vw, 2.4rem);
  font-weight: 700; color: rgba(255,255,255,.4); line-height: 1;
  text-shadow: none;
  transition: color .4s, text-shadow .4s;
}
.roi-mob-node.lit .rmn-val {
  color: var(--water);
  text-shadow: 0 0 20px rgba(0,196,240,.55);
}

.rmn-unit {
  font-family: var(--mono); font-size: .5rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.22); margin-top: 3px;
  transition: color .4s;
}
.roi-mob-node.lit .rmn-unit { color: rgba(255,255,255,.42); }

/* ════════════════════════════════════════════════════════
   SEC A4 — FORMATI (split verticale)
════════════════════════════════════════════════════════ */
#adv-formats { height: 380vh; }
#adv-formats .sticky-wrap { background: var(--deep); }

/* Divisore orizzontale centrale */
#adv-fmt-line {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: linear-gradient(90deg, transparent, var(--water), transparent);
  z-index: 10; opacity: 0;
}

/* Metà top e bottom */
.adv-fmt-half {
  position: absolute; left: 0; right: 0;
  height: 50%; display: flex; align-items: center;
  justify-content: center; gap: clamp(30px, 6vw, 80px);
  padding: 0 8vw; overflow: hidden;
}
#adv-fmt-top    { top: 0; }
#adv-fmt-bottom { bottom: 0; }

.adv-fmt-img {
  height: clamp(140px, 28vh, 320px); width: auto;
  filter: drop-shadow(0 0 30px rgba(0,196,240,.28));
  opacity: 0; will-change: transform, opacity;
}
/* Il tetrapack unfold è landscape — override altezza */
#adv-fmt-tetra-img {
  height: auto;
  width: clamp(200px, 38vw, 520px);
}

.adv-fmt-content { opacity: 0; }
.adv-fmt-label {
  font-family: var(--mono); font-size: clamp(.55rem, .95vw, .7rem);
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--water); margin-bottom: 16px; display: block;
}
.adv-fmt-title {
  font-family: var(--clash); font-size: clamp(2rem, 4vw, 5.5rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -.02em;
}
.adv-fmt-sub {
  font-family: var(--inter); font-size: clamp(.78rem, 1.3vw, .95rem);
  font-weight: 300; color: rgba(255,255,255,.48); line-height: 1.85;
  margin-top: 16px; max-width: 340px;
}
#adv-fmt-content-top { text-align: left; }
#adv-fmt-content-bottom { text-align: right; }
#adv-fmt-content-bottom .adv-fmt-sub { text-align: right; }

/* Tag finale */
#adv-fmt-tag {
  position: absolute; top: 5vh; left: 0; right: 0;
  text-align: center; z-index: 10;
  font-family: var(--mono); font-size: clamp(.6rem, 1.1vw, .78rem);
  letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,255,255,.2); opacity: 0;
}
#adv-fmt-tag strong { color: var(--water); }

/* ════════════════════════════════════════════════════════
   SEC A5 — MAPPA / RADAR
════════════════════════════════════════════════════════ */
#adv-map { height: 380vh; }
#adv-map .sticky-wrap { background: var(--deep); }

/* Sfondo radar: nascosto su desktop, visibile solo su mobile (media query) */
#adv-map-radar-bg {
  display: none;
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55; pointer-events: none;
}

#adv-map-header {
  position: absolute; left: 6vw; top: 50%;
  transform: translateY(-50%);
  z-index: 5; pointer-events: none; opacity: 0;
  max-width: clamp(360px, 34vw, 500px);
}
#adv-map-eyebrow {
  font-family: var(--mono); font-size: clamp(.55rem, 1vw, .7rem);
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--water); display: block; margin-bottom: 18px;
}
#adv-map-title {
  font-family: var(--clash); font-size: clamp(2rem, 4vw, 5rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -.02em;
}
#adv-map-title .ln { display: block; overflow: hidden; }
#adv-map-title em  { display: inline-block; font-style: normal; transform: translateY(110%); }

/* SVG radar */
#adv-map-svg {
  position: absolute; right: 12vw; top: 50%;
  transform: translateY(-50%);
  width: clamp(320px, 52vw, 680px); height: auto;
  z-index: 4; overflow: visible;
}
.adv-radar-ring {
  fill: none; stroke: rgba(0,196,240,.38); stroke-width: 2;
}
#adv-radar-center-dot {
  fill: var(--water); opacity: 0;
  filter: drop-shadow(0 0 8px rgba(0,196,240,.9));
}
#adv-radar-center-label {
  font-family: var(--mono); font-size: 8px; letter-spacing: .25em;
  text-transform: uppercase; fill: rgba(0,196,240,.6); opacity: 0;
}

/* Nodi location */
.adv-radar-node circle {
  fill: var(--deep); stroke: var(--water); stroke-width: 1.5;
  opacity: 0; filter: drop-shadow(0 0 6px rgba(0,196,240,.8));
}
.adv-radar-node.active circle { fill: var(--water); }
.adv-radar-node line {
  stroke: rgba(0,196,240,.35); stroke-width: 1;
  stroke-dasharray: 4 3; opacity: 0;
}
.adv-rn-title {
  font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  fill: var(--ice); opacity: 0;
}
.adv-rn-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 7px;
  letter-spacing: .12em; text-transform: uppercase;
  fill: rgba(0,196,240,.65); opacity: 0;
}

/* Pulse animazione nodo attivo */
.adv-radar-node.pulse circle {
  animation: radarPulse .7s ease-out forwards;
}
@keyframes radarPulse {
  0%   { r: 7; opacity: 1; }
  60%  { r: 18; opacity: .2; }
  100% { r: 7; opacity: 0; }
}

/* Card dettaglio centrale */
#adv-map-card {
  position: absolute; right: calc(12vw + clamp(320px,52vw,680px) / 2 - 90px); top: 50%;
  transform: translate(50%, -50%);
  background: rgba(5,10,20,.85); border: 1px solid rgba(0,196,240,.2);
  border-radius: 8px; padding: 14px 20px;
  z-index: 6; pointer-events: none; text-align: center;
  opacity: 0; min-width: 180px;
  backdrop-filter: blur(12px);
}
#adv-mc-target {
  font-family: var(--mono); font-size: clamp(.52rem, .85vw, .65rem);
  letter-spacing: .2em; text-transform: uppercase; color: var(--water);
  margin-bottom: 4px;
}
#adv-mc-volume {
  font-family: var(--clash); font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 700; color: var(--ice);
}

/* Card info per nodo — una per punto, accumulano una volta visibili */
.adv-node-card rect {
  fill: rgba(5,10,20,.88); stroke: rgba(0,196,240,.25); stroke-width: 0.5;
}
.anc-title {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; fill: var(--water);
}
.anc-sub {
  font-family: var(--clash); font-size: 21px;
  font-weight: 700; fill: rgba(255,255,255,.9); letter-spacing: -.01em;
}

/* ════════════════════════════════════════════════════════
   SEC A6 — CASE FILES (horizontal scroll)
════════════════════════════════════════════════════════ */
#adv-cases { height: 380vh; }
#adv-cases .sticky-wrap { background: var(--deep); overflow: hidden; }

#adv-cases-header {
  position: absolute; top: 8vh; left: 50%;
  transform: translateX(-50%); text-align: center;
  z-index: 5; pointer-events: none; opacity: 0;
}
#adv-cases-eyebrow {
  font-family: var(--mono); font-size: clamp(.55rem, 1vw, .7rem);
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--water); display: block; margin-bottom: 14px;
}
#adv-cases-title {
  font-family: var(--clash); font-size: clamp(2rem, 4vw, 5.5rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -.02em;
}
#adv-cases-title .ln { display: block; overflow: hidden; }
#adv-cases-title em  { display: inline-block; font-style: normal; transform: translateY(110%); }

/* Track orizzontale */
#adv-cases-track-wrap {
  position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  overflow: hidden; z-index: 4;
  padding: 20px 0;
}
#adv-cases-track {
  display: flex; gap: 24px;
  padding: 0 8vw;
  will-change: transform;
}

/* Card intelligence file */
.adv-case-card {
  flex-shrink: 0;
  width: clamp(260px, 30vw, 380px);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(0,196,240,.12);
  border-radius: 4px;
  padding: clamp(20px, 3vh, 36px) clamp(18px, 2.5vw, 32px);
  position: relative; overflow: hidden;
  clip-path: inset(0 100% 0 0);
  /* Grid interna */
  background-image:
    linear-gradient(rgba(0,196,240,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,196,240,.025) 1px, transparent 1px);
  background-size: 28px 28px;
}
.adv-case-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  border-left: 3px solid rgba(0,196,240,.35);
  pointer-events: none;
}
.acc-badge {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .28em;
  text-transform: uppercase; display: inline-block;
  padding: 3px 8px; border-radius: 2px; margin-bottom: 18px;
}
.acc-badge--real  { background: rgba(255,59,59,.15); color: var(--red); border: 1px solid rgba(255,59,59,.3); }
.acc-badge--bench { background: rgba(139,155,180,.1); color: var(--ghost); border: 1px solid rgba(139,155,180,.2); }
.acc-sector {
  font-family: var(--mono); font-size: clamp(.52rem, .88vw, .65rem);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(201,169,110,.65); margin-bottom: 8px;
}
.acc-brand {
  font-family: var(--clash); font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -.01em;
  color: var(--ice); margin-bottom: 20px;
}
.acc-result {
  font-family: var(--clash); font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 700; color: var(--water); line-height: 1;
  text-shadow: 0 0 24px rgba(0,196,240,.5);
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px;
}
.acc-result span {
  font-family: var(--mono); font-size: clamp(.5rem, .85vw, .65rem);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.35); font-weight: 400;
  text-shadow: none;
}
.acc-desc {
  font-family: var(--inter); font-size: clamp(.75rem, 1.2vw, .88rem);
  font-weight: 300; color: rgba(255,255,255,.45); line-height: 1.75;
}

/* ════════════════════════════════════════════════════════
   SEC A7 — QR COME PIATTAFORMA
════════════════════════════════════════════════════════ */
#adv-qr { height: 340vh; }
#adv-qr .sticky-wrap { background: var(--deep); overflow: visible; }

#adv-qr-header {
  position: absolute; left: 6vw; top: 50%;
  transform: translateY(-50%);
  z-index: 8; pointer-events: none; opacity: 0;
  max-width: clamp(440px, 46vw, 740px);
  /* garantisce leggibilità sopra SVG e QR */
  isolation: isolate;
}
#adv-qr-title {
  font-family: var(--clash); font-size: clamp(2.4rem, 5vw, 7rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(5,10,20,.9), 0 0 60px rgba(5,10,20,.6);
}
#adv-qr-title .ln { display: block; overflow: hidden; }
#adv-qr-title em  { display: inline-block; font-style: normal; transform: translateY(110%); }
#adv-qr-sub {
  font-family: var(--inter); font-size: clamp(.78rem, 1.3vw, .95rem);
  font-weight: 300; color: rgba(255,255,255,.42); line-height: 1.85;
  margin-top: 24px;
}

/* SVG raggi */
#adv-qr-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; overflow: visible;
}
.adv-qr-ray {
  stroke: rgba(0,196,240,.5); stroke-width: 1;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  filter: drop-shadow(0 0 4px rgba(0,196,240,.5));
}

/* Bottiglia centrale */
#adv-qr-bottle {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: clamp(160px, 28vh, 320px); width: auto;
  z-index: 4; pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(0,196,240,.35));
  opacity: 0;
}

/* QR code — position: fixed, cade dall'alto del viewport cross-section */
#adv-qr-code {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -150%);
  width: clamp(80px, 10vw, 140px); height: auto;
  z-index: 200; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 0 16px rgba(0,196,240,.75));
}

/* QR code statico — prende il posto del fixed non appena la sezione è attiva */
#adv-qr-code-inner {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(80px, 10vw, 140px); height: auto;
  z-index: 6; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 0 16px rgba(0,196,240,.75));
}

/* Bubble use case */
.adv-qr-bubble {
  position: absolute; z-index: 5;
  font-family: var(--mono); font-size: clamp(.52rem, .9vw, .68rem);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--water);
  background: rgba(0,196,240,.08); border: 1px solid rgba(0,196,240,.22);
  border-radius: 30px; padding: 7px 16px;
  opacity: 0; white-space: nowrap;
  backdrop-filter: blur(8px);
}

/* Posizioni bubble (desktop) — centrate rispetto ai punti finali del SVG:
   SVG viewBox 900×600, posizionato inset:0 width/height 100%.
   I valori sono coerenti con le coordinate delle linee nel HTML. */
#qb0 { top: 12%; left: 12%; }   /* AR Experience     — x:160 y:100 */
#qb1 { top:  5%; left: 42%; }   /* Video interattivo — x:450 y:55  */
#qb2 { top: 12%; right: 10%; }  /* Coupon            — x:740 y:100 */
#qb3 { bottom:  9%; right: 10%; }/* Event Ticketing  — x:740 y:500 */
#qb4 { bottom:  5%; left: 42%; } /* HR Onboarding    — x:450 y:545 */
#qb5 { bottom:  9%; left: 12%; } /* Retargeting      — x:160 y:500 */

/* ════════════════════════════════════════════════════════
   SEC A8 — CTA FINALE
════════════════════════════════════════════════════════ */
#adv-cta {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 120px 24px; background: var(--deep); overflow: hidden;
}

#adv-rain-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; opacity: .35;
}

/* Card centrata — identica a distributori */
#adv-cta-card {
  position: relative; z-index: 5;
  width: 100%; max-width: 560px;
  background: rgba(5,10,20,.8);
  border: 1px solid rgba(0,196,240,.18);
  border-radius: 20px; padding: clamp(32px, 5vw, 60px);
  box-shadow:
    0 0 60px rgba(0,196,240,.06),
    inset 0 1px 0 rgba(0,196,240,.08);
  opacity: 0; transform: translateY(30px);
}

#adv-cta-eyebrow {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--water); margin-bottom: 14px;
}
#adv-cta-title {
  font-family: var(--clash); font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
  color: var(--ice); margin-bottom: 14px;
}
#adv-cta-sub {
  font-family: var(--inter); font-size: clamp(.8rem, 1.2vw, .95rem);
  font-weight: 300; color: var(--ghost); line-height: 1.6;
  margin-bottom: 32px;
}

/* Form */
#adv-form { display: flex; flex-direction: column; gap: 12px; }
.adv-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.adv-form-row .adv-input { flex: 1; min-width: 140px; }

.adv-input {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,196,240,.12);
  border-radius: 8px; padding: 13px 16px;
  font-family: var(--inter); font-size: .85rem;
  color: var(--ice); outline: none; width: 100%;
  transition: border-color .25s, box-shadow .25s;
  appearance: none; -webkit-appearance: none;
}
.adv-input::placeholder { color: rgba(255,255,255,.22); }
.adv-input:focus {
  border-color: rgba(0,196,240,.4);
  box-shadow: 0 0 0 3px rgba(0,196,240,.08);
}

#adv-form-btn {
  background: var(--water); color: var(--deep);
  font-family: var(--mono); font-size: .72rem;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  border: none; border-radius: 50px;
  padding: 16px 32px; cursor: pointer; width: 100%;
  margin-top: 8px;
  transition: box-shadow .25s, transform .2s;
}
#adv-form-btn:hover {
  box-shadow: 0 0 28px rgba(0,196,240,.45);
  transform: translateY(-1px);
}

/* Badges */
#adv-cta-badges {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; justify-content: center;
}
.adv-badge {
  font-family: var(--mono); font-size: .55rem;
  letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid rgba(0,196,240,.15);
  color: rgba(255,255,255,.35);
  padding: 5px 12px; border-radius: 50px;
}

#adv-cta-email {
  display: block; text-align: center; margin-top: 20px;
  font-family: var(--mono); font-size: .65rem;
  letter-spacing: .15em; color: rgba(0,196,240,.4);
  text-decoration: none; transition: color .25s;
}
#adv-cta-email:hover { color: var(--water); }

/* ════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — max-width: 640px
════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── SEC A1: HERO ── */
  #adv-hero { height: 350vh; }
  #adv-hero-text { padding-bottom: 10vh; }
  #adv-hero-title { font-size: clamp(2.2rem, 5.5vw, 7rem); }
  #adv-hero-sub {
    font-size: .72rem; letter-spacing: .16em; margin-top: 16px;
    color: rgba(255,255,255,.6);
  }
  #adv-hero-cta-primary, #adv-hero-cta-secondary {
    padding: 12px 24px; font-size: .72rem;
  }
  #adv-banner-img { width: clamp(220px, 80vw, 380px); }
  #adv-hero-bottle-img { height: clamp(200px, 38vh, 360px); }

  /* ── SEC A2: BATTAGLIA ── */
  #adv-battle { height: 380vh; }
  #adv-battle-title { font-size: clamp(1.8rem, 5vw, 4rem); }
  #adv-battle-grid { top: clamp(130px, 28vh, 200px); padding: 0 3vw; }
  #adv-battle-table { max-width: 100%; gap: 5px; }

  /* 3 colonne: Label | Digital Ads | H2OPEN */
  .bt-desk { display: none; }
  .bt-mob  { display: inline; }
  .bt-row {
    grid-template-columns: 1.5fr 1.1fr 1.2fr;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
    border-radius: 7px;
    padding: 0;
  }
  .bt-head {
    background: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    margin-bottom: 8px;
  }
  /* Posizionamento esplicito: evita shift per via dei display:none */
  .bt-label-col                { grid-column: 1; }
  .bt-col-other[data-col="0"]  { grid-column: 2; }
  .bt-col-other[data-col="1"],
  .bt-col-other[data-col="2"]  { display: none !important; }
  .bt-col-h2o                  { grid-column: 3; }

  .bt-cell { font-size: .6rem; padding: 11px 5px; letter-spacing: .06em; }
  .bt-label-col { font-size: .58rem; color: rgba(255,255,255,.55); padding-left: 10px; }
  .bt-col-other[data-col="0"],
  .bt-col-h2o { text-align: center; }
  .bt-head .bt-cell { font-size: .52rem; color: rgba(255,255,255,.35); padding: 6px 5px; }
  .bt-head .bt-col-h2o { color: var(--water); }
  .bt-head .bt-label-col { color: transparent; }
  .bt-row:not(.bt-head) .bt-col-h2o { border-left: none; border-radius: 0 7px 7px 0; }

  /* ── SEC A3: ROI ── */
  #adv-roi { height: 450vh; }
  #adv-roi-header { left: 50%; max-width: 85vw; top: 6vh; transform: translateX(-50%); text-align: center; }
  #adv-roi-title { font-size: clamp(2rem, 6vw, 4rem); }
  /* Nascondi pipeline orizzontale desktop */
  #adv-roi-svg, #adv-roi-cards { display: none !important; }
  /* Mostra timeline verticale mobile */
  #adv-roi-mobile {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 5;
  }
  /* Linea: spostata di 8vw dal bordo sx (centro dot = 8vw + 28px) */
  #adv-roi-mob-line {
    left: calc(28px + 8vw); transform: none;
    top: 18%; bottom: 8%;
  }
  /* Nodi: left:8vw mantiene il centro del dot allineato alla linea */
  .roi-mob-node {
    left: 8vw; transform: none;
    width: auto; right: 8px;
    padding-left: 14px;
    padding-right: 16px;
    gap: 14px;
  }
  /* Riposiziona i 7 nodi distribuiti verticalmente */
  #rmn-0 { top: 18%; }
  #rmn-1 { top: 29%; }
  #rmn-2 { top: 40%; }
  #rmn-3 { top: 51%; }
  #rmn-4 { top: 62%; }
  #rmn-5 { top: 73%; }
  #rmn-6 { top: 84%; }

  /* ── SEC A4: FORMATI ── */
  #adv-formats { height: 340vh; }
  .adv-fmt-half {
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; padding: 12px 6vw 0;
  }
  #adv-fmt-content-bottom { text-align: left; }
  #adv-fmt-content-bottom .adv-fmt-sub { text-align: left; }
  .adv-fmt-title { font-size: clamp(1.6rem, 5vw, 3.5rem); }
  .adv-fmt-img { height: clamp(90px, 16vh, 180px); }
  #adv-fmt-tetra-img { width: clamp(140px, 50vw, 280px); height: auto; }
  .adv-fmt-sub { font-size: .8rem; }

  /* ── SEC A5: MAPPA ── */
  #adv-map-radar-bg { display: block; }
  #adv-map { height: 420vh; }

  /* Header: centrato in alto */
  #adv-map-header {
    left: 50%; top: 7vh; bottom: auto;
    transform: translateX(-50%);
    text-align: center; max-width: 88vw;
  }
  #adv-map-title { font-size: clamp(1.6rem, 5vw, 3rem); }

  /* SVG radar: piena larghezza (elimina clipping sinistro) e centrato
     verticalmente — scala reale = 100vw / 800 ≈ 0.4875 su 390px */
  #adv-map-svg {
    left: 0; right: 0; width: 100vw;
    top: 50%; transform: translateY(-50%);
    height: auto;
  }

  /* Font-size calibrati per scala 0.4875:
     valore × 0.4875 = px sullo schermo  */
  #adv-map-svg .anc-title              { font-size: 23px; letter-spacing: .10em; }
  #adv-map-svg .anc-sub                { font-size: 33px; }
  #adv-map-svg .adv-rn-title           { font-size: 21px; letter-spacing: .10em; }
  #adv-map-svg .adv-rn-sub             { font-size: 19px; }
  #adv-map-svg #adv-radar-center-label { font-size: 21px; }

  /* Card HTML centrale: nascosta su mobile */
  #adv-map-card { display: none; }

  /* ── SEC A6: CASE FILES ── */
  #adv-cases { height: 400vh; }
  #adv-cases-title { font-size: clamp(1.8rem, 5vw, 4rem); }
  /* Ripristino scroll orizzontale su mobile — layout identico al desktop */
  #adv-cases-track-wrap {
    top: 52%; transform: translateY(-50%);
    overflow: hidden; padding: 20px 0;
  }
  #adv-cases-track { display: flex; position: static; width: auto; height: auto; padding: 0 5vw; }
  .adv-case-card {
    position: relative; top: auto; left: auto;
    width: 80vw; opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  .acc-brand  { font-size: clamp(1.4rem, 5vw, 2.4rem); }
  .acc-result { font-size: clamp(1.6rem, 6vw, 3rem); }

  /* ── SEC A7: QR ── */
  #adv-qr { height: 320vh; }
  #adv-qr-header {
    left: 50%; top: 7vh;
    transform: translateX(-50%); text-align: center;
    max-width: 80vw;
  }
  #adv-qr-title { font-size: clamp(2rem, 6vw, 4rem); }
  #adv-qr-sub { font-size: .8rem; }
  #adv-qr-bottle { height: clamp(100px, 18vh, 200px); }

  /*
   Posizioni bubble su mobile calcolate dalla geometria reale dell'SVG:
   SVG viewBox 900×600 con preserveAspectRatio xMidYMid meet
   su portrait (360-430px wide): scala = 100vw/900, altezza = 600/900*100vw = 66.67vw
   centro verticale = 50vh; offset endpoint = (cy-300)/9 vw
   Formula: top = calc(50vh + (cy-300)vw/9), left = cx*100vw/900
   transform: translate(-50%,-50%) centra la bubble sull'endpoint del raggio
  */
  .adv-qr-bubble {
    font-size: .48rem; padding: 4px 9px;
    white-space: normal; text-align: center;
    max-width: 22vw; line-height: 1.3;
    transform: translate(-50%, -50%);
  }
  /* qb0: endpoint SVG (160, 100) */
  #qb0 { left: 17.78vw; top: calc(50vh - 22.22vw); right: auto; bottom: auto; }
  /* qb1: endpoint SVG (450, 55) */
  #qb1 { left: 50vw;    top: calc(50vh - 27.22vw); right: auto; bottom: auto; }
  /* qb2: endpoint SVG (740, 100) */
  #qb2 { left: 82.22vw; top: calc(50vh - 22.22vw); right: auto; bottom: auto; }
  /* qb3: endpoint SVG (740, 500) */
  #qb3 { left: 82.22vw; top: calc(50vh + 22.22vw); right: auto; bottom: auto; }
  /* qb4: endpoint SVG (450, 545) */
  #qb4 { left: 50vw;    top: calc(50vh + 27.22vw); right: auto; bottom: auto; }
  /* qb5: endpoint SVG (160, 500) */
  #qb5 { left: 17.78vw; top: calc(50vh + 22.22vw); right: auto; bottom: auto; }

  /* ── SEC A8: CTA ── */
  #adv-cta        { padding: 60px 5vw 90px; }
  #adv-cta-title  { font-size: clamp(1.7rem, 6vw, 2.8rem); }
  .adv-form-row   { flex-direction: column; }
}