/* ============================================================
   NEO NATIVE TERMINAL — tavolozza dell'app
   Un solo blocco comanda tutto il sito. Il tema si cambia con
   <html data-theme="dark"> (quello di casa) o "light".
   Verde e rosso sono PRENOTATI dal mercato: mai decorativi.
   ============================================================ */

/* font ospitati qui, non da Google: nessuna richiesta a terzi (e nessun IP
   del visitatore a Google) senza consenso. Solo il sottoinsieme latino, come
   lo serviva Google. Plex Sans e' variabile: un file per 300/400/500.
   Licenze OFL accanto ai file, in assets/fonts/. */
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/michroma-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

:root {
  /* --- tema chiaro: la variante --- */
  --bg:             #FFFFFF;
  --bg-elevated:    #FFFFFF;
  --border-subtle:  #EEEFF1;
  --border-strong:  #D6D8DB;

  --text-primary:   #0A0A0B;   /* obsidian — titoli */
  --text-secondary: #2B2D31;   /* gunmetal — il testo che si legge */
  --text-muted:     #4A4D52;   /* didascalie, note */
  --text-faint:     #5C6068;   /* etichette di servizio */

  --accent:         #0A0A0B;   /* pulsante primario, link */
  --on-accent:      #F2F3F4;   /* la scritta sopra l'accento */
  --accent-hover:   #2B2D31;

  /* segnali di mercato — solo direzione, mai decorazione */
  --accent-green:   #6FE0CF;   /* in salita */
  --accent-red:     #E5484D;   /* in discesa */
  --accent-gold:    #C9A26B;   /* avvisi */

  /* colore di passaggio del mouse sui collegamenti delle voci di menu.
     La tavolozza non ha un blu: ion e l'unico colore del marchio. */
  --link-hover:     var(--accent-green);

  /* terne RGB per le trasparenze */
  --bg-rgb:      255 255 255;
  --ink-rgb:      10  10  11;
  --deep-rgb:     10  10  11;
  --chip-rgb:    238 239 241;
  --accent-rgb:   10  10  11;

  /* --- alias storici: tutto il foglio di stile passa da qui --- */
  --ink:       var(--text-primary);
  --ink-80:    var(--text-secondary);
  --ink-60:    var(--text-muted);
  --ink-40:    var(--text-faint);
  --ink-12:    var(--border-subtle);
  --chip:      var(--border-subtle);
  --chip-line: var(--border-strong);
  --deep:      #0A0A0B;
  /* superficie dei pannelli "sempre scuri" (CTA finale, slide--dark): in chiaro
     coincide con --deep (forte contrasto contro il --bg bianco); in scuro
     --deep è identico al --bg della pagina, quindi lì sotto si passa al tono
     elevato — il pannello resta un riquadro visibile invece di sparire nella
     pagina. --deep stesso non si tocca: resta riservato a testo/ombre. */
  --deep-surface: var(--deep);
  /* superficie/contenuto sempre invertiti: pannelli che restano scuri (o chiari)
     a prescindere dal tema, es. il CTA finale. Stesso valore in entrambi i blocchi. */
  --on-deep:     #FFFFFF;
  --on-deep-rgb: 255 255 255;
  --paper:     var(--bg-elevated);

  /* placeholder */
  --ph-bg:   rgb(var(--ink-rgb) / .04);
  --ph-line: rgb(var(--ink-rgb) / .18);

  /* tipografia — Neo Native Terminal: Michroma (display, un solo peso 400),
     IBM Plex Sans (testo corrente) e IBM Plex Mono (dati, cifre tabulari) */
  --font-display: "Michroma", sans-serif;
  --font-ui: "IBM Plex Sans", sans-serif;
  --font-num: "IBM Plex Mono", "IBM Plex Sans", monospace;   /* cifre */
  --font-menu: "Michroma", sans-serif; /* titoli delle voci di menu */

  /* misure */
  --container: 1224px;
  --gutter: 40px;
  --nav-h: 88px;
  --r-card: 12px;   /* era 24: angoli meno rotondi */
  --r-pill: 10px;   /* era 50: i bottoni non sono piu' pillole */

  /* superfici: sfondo dell'eroe, vetri, riflessi */
  --hero-grad: linear-gradient(180deg, #FFFFFF 0%, #FAFAFE 46%, var(--bg) 100%);
  /* sfumato di testa delle sottopagine (.subhero): era un lavanda scritto a
     mano, residuo del marchio precedente — ora un grigio neutro costruito
     dai token esistenti (bordo tenue → superficie elevata → sfondo); il
     tema scuro riusa --hero-grad invece di una regola [data-theme="dark"]
     a parte sul componente. */
  --subhero-grad: linear-gradient(180deg, var(--border-subtle) 0%, var(--bg-elevated) 58%, var(--bg) 100%);
  --glass-1:   rgba(255, 255, 255, .70);
  --glass-2:   rgba(255, 255, 255, .34);
  --glass-line: rgba(255, 255, 255, .60);
  --card-fill: linear-gradient(150deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .34) 46%, rgb(var(--chip-rgb) / .38) 100%);
  --glare:     linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .06) 34%, transparent 60%);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --- tema scuro: quello di casa --- */
[data-theme="dark"] {
  --bg:             #0A0A0B;   /* obsidian — la tela */
  --bg-elevated:    #17181A;   /* graphite — schede, pannelli */
  --border-subtle:  #1F2023;
  --border-strong:  #2B2D31;   /* gunmetal */

  --text-primary:   #F2F3F4;   /* platinum */
  --text-secondary: #D6D8DB;   /* chrome */
  --text-muted:     #A9ACB2;
  --text-faint:     #8B8F96;   /* steel */

  --accent:         #F2F3F4;
  --on-accent:      #0A0A0B;
  --accent-hover:   #FFFFFF;

  --bg-rgb:       10  10  11;
  --ink-rgb:     242 243 244;
  --deep-rgb:     10  10  11;
  --chip-rgb:     23  24  26;
  --accent-rgb:  242 243 244;

  --chip:  var(--bg-elevated);
  --deep:  #0A0A0B;
  --deep-surface: var(--bg-elevated);
  --on-deep:     #FFFFFF;
  --on-deep-rgb: 255 255 255;

  --hero-grad: linear-gradient(180deg, #17181A 0%, #101113 48%, var(--bg) 100%);
  --subhero-grad: var(--hero-grad);
  --glass-1:   rgba(242, 243, 244, .055);
  --glass-2:   rgba(242, 243, 244, .040);
  --glass-line: rgba(242, 243, 244, .10);
  --card-fill: linear-gradient(150deg, rgba(242, 243, 244, .075) 0%, rgba(242, 243, 244, .035) 46%, rgba(242, 243, 244, .015) 100%);
  --glare:     linear-gradient(180deg, rgba(242, 243, 244, .10) 0%, rgba(242, 243, 244, .02) 34%, transparent 60%);
}


/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--ink); color: var(--bg); }

/* ---------- utilities ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 110px; }

h1, h2, h3 { font-family: var(--font-display); }

.title {
  font-size: clamp(34px, 4vw, 48px);
  /* Michroma ha un solo peso (400): il risalto non viene dal grassetto */
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.01em;
}
.title-xl { font-size: clamp(32px, 4.2vw, 50px); }

.sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-80);
  letter-spacing: .04em;
}

.center-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}
.center-head .sub { max-width: 560px; }

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-menu);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid var(--chip-line);
  border-radius: 8px;
  padding: 7px 22px;
}

.divider {
  height: 1px;
  background: var(--ink-12);
  border: 0;
  width: 100%;
}

/* bottoni */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-menu);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  border-radius: var(--r-pill);
  padding: 13px 32px;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), filter .2s;
  will-change: transform;
}
.btn:active { transform: scale(.97); }

/* variante compatta (bottone in nav). Piu' piccola dal 2026-11-01: accanto
   le sta «Log in» (.nav-signin) */
.btn-sm {
  font-size: 10px;
  padding: 9px 14px;
  letter-spacing: .02em;
  white-space: nowrap;     /* «Get Started» su due righe raddoppiava la barra */
}
/* sul telefono stretto (360px) marchio, «Log in», bottone e menu stanno in
   316px: meno aria ai lati del bottone */
@media (max-width: 380px) {
  .btn-sm { padding: 9px 10px; }
}

.btn-light {
  /* contorno, non pieno: il bottone e' un filo chiaro su fondo scuro,
     il testo resta quello del tema */
  color: var(--text-primary);
  background: transparent;
  border: 1px solid rgb(var(--ink-rgb) / .38);
}
.btn-light:hover { border-color: var(--text-primary); background: rgb(var(--ink-rgb) / .06); transform: translateY(-2px); }

.btn-dark {
  color: var(--text-primary);
  background: transparent;
  border: 1px solid rgb(var(--ink-rgb) / .38);
}
.btn-dark:hover { border-color: var(--text-primary); background: rgb(var(--ink-rgb) / .06); transform: translateY(-2px); }

/* ---------- placeholder system ---------- */
.ph {
  position: relative;
  background: var(--ph-bg);
  border: 1.5px dashed var(--ph-line);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-card);
}
.ph-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* era --ph-text (inchiostro al 45% di opacità): sembrava pensato per
     restare leggero sopra un riquadro quasi vuoto, ma misurato sul fondo
     REALMENTE disegnato (--ph-bg sopra la pagina) risultava 4.21:1 in scuro
     e 3.13:1 in chiaro — sotto la soglia di 4.5:1 anche nel caso più
     semplice, prima ancora di considerare vetro aurora o sfumature. Un
     livello pieno della tavolozza invece di una trasparenza: passa con
     margine ovunque (11-13:1 misurato su pagina piatta, vetro aurora e
     sfumatura del subhero). */
  color: var(--text-secondary);
  text-align: center;
  padding: 16px;
}
.ph-label svg { width: 26px; height: 26px; opacity: .7; }
.ph-label span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
/* placeholder riempito con screenshot reale */
.ph .ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ph.filled {
  border-style: solid;
  border-color: rgb(var(--ink-rgb) / .16);
  background: #0B0D1A;
}
.ph.filled .ph-label { display: none; }


/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(30px); }
.no-motion [data-reveal] { opacity: 1; transform: none; }
.no-motion .hero-shot { opacity: 1 !important; }
/* modalità cattura screenshot: niente unità viewport (la finestra headless è altissima) */
.static-capture .hero { min-height: 950px; }
.static-capture .stack-pin { min-height: 0; padding-block: 90px; }
.static-capture .phone-pin { min-height: 0; padding-block: 60px; }

/* pannelli-viaggio con screenshot montato: solo immagine, niente cornice */
.hero-glass:has(> .ph.filled) {
  padding: 0;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-glass > .ph.filled { border-radius: 8px; border: 0; }
.tilt-panel:has(> .ph.filled) { padding: 0; background: none; }
.tilt-panel > .ph.filled { border-radius: var(--r-card); border: 0; }

/* ---------- skip link: fuori vista finché non riceve il focus da tastiera ---------- */
.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 8px;
  font-family: var(--font-menu);
  font-size: 12px;
  letter-spacing: .02em;
  transition: top .25s var(--ease-out);
}
.skip-link:focus {
  top: 12px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .45s, box-shadow .45s, border-color .45s;
  border-bottom: 1px solid transparent;
}
.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;          /* la barra stretta schiacciava il logo in larghezza */
}
/* Il marchio: la N con la goccia (proprietario, 2026-11-04 — prima NNT,
   lettere di Michroma) e accanto NEO NATIVE TERMINAL su due righe. La N è
   una maschera (/brand/n-body.png, scripts/brand/build-mark.mjs) dipinta col
   colore del testo, quindi bianca al buio e ossidiana in chiaro senza un
   secondo file; la goccia è sempre il verde del disegno, #3BE4C5. Il blocco
   è aria-hidden: il nome accessibile arriva da .brand aria-label. */
.brand-n { display: inline-flex; align-items: center; gap: 12px; line-height: 1; color: var(--text-primary); transition: opacity .3s var(--ease-out); }
.brand:hover .brand-n { opacity: .82; }
.brand-n .bm { position: relative; display: block; height: 34px; aspect-ratio: 480 / 397; }
.brand-n .bm i { position: absolute; inset: 0; background: currentColor; -webkit-mask: url(/brand/n-body.png) center / contain no-repeat; mask: url(/brand/n-body.png) center / contain no-repeat; }
.brand-n .bm i + i { background: #3BE4C5; -webkit-mask-image: url(/brand/n-drop.png); mask-image: url(/brand/n-drop.png); }
.brand-n .bw { font-family: var(--font-display); font-size: 8px; letter-spacing: .32em; line-height: 1.6; color: var(--text-muted); }
/* Sotto i 1100px la dicitura non ci sta accanto a voci di menu e bottoni
   (sul telefono spingeva il bottone del menu fuori dallo schermo): resta la
   sola N. */
@media (max-width: 1100px) { .brand-n .bw { display: none; } }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-menu);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .01em;
  padding: 8px 2px;
  position: relative;
  transition: opacity .2s;
}
/* sottolineatura che cresce: rende il menu più leggibile */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }
/* Michroma ha un solo peso: la voce attiva si distingue con la sottolineatura piena */
.nav-links a.active { opacity: 1; }
.nav-links a.active::after { transform: scaleX(1); }
/* «Log in» sta accanto a «Get Started» (.nav-signin, owner 2026-11-01: «vicino
   a get started deve esserci anche login», la 1 di tre). Nella lista resta
   solo per il menu del telefono, dove sotto le voci non stona. */
@media (min-width: 901px) {
  .nav-links .nav-login { display: none; }
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* una scritta, non un bottone: l'azione principale resta «Get Started» */
.nav-signin {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;        /* da toccare */
  padding: 0 2px;
  font-family: var(--font-menu);
  font-size: 10px;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--text-primary);
}
.nav-signin::after {       /* la stessa sottolineatura che cresce delle voci */
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav-signin:hover::after,
.nav-signin:focus-visible::after { transform: scaleX(1); }

/* hero chiaro: la nav è scura fin dall'inizio */
.nav { color: var(--ink); }
/* stato dopo scroll */
.nav.scrolled {
  color: var(--ink);
  background: rgb(var(--bg-rgb) / .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--ink-12);
}

.nav-toggle { display: none; }

/* ============================================================
   HERO (cielo)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--nav-h) + 64px);
  overflow: visible; /* il pannello dashboard viaggia fuori dall'hero verso la sezione 2 */
  z-index: 3;
  color: var(--ink);
  background: var(--hero-grad);
}
/* toro: sfondo dell'hero, ancorato a destra dove la foto ha il soggetto */
/* niente z-index qui: creerebbe un livello isolato e "multiply" non
   raggiungerebbe lo sfondo dell'hero, lasciando visibile il rettangolo bianco */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-media img {
  position: absolute;
  right: -6%;
  top: calc(var(--nav-h) - 6px);   /* sotto la nav, sopra il pannello dashboard */
  width: min(48%, 790px);
  height: auto;
  mix-blend-mode: multiply;        /* il bianco della foto sparisce nello sfondo */
}
/* tema scuro: "multiply" scurisce il fondo e il toro sparirebbe nel nero.
   Si usa il ritaglio con trasparenza vera, senza fusione. */
[data-theme="dark"] .hero-media img { display: none; }
[data-theme="dark"] .hero-media::after {
  content: "";
  position: absolute;
  right: -6%;
  top: calc(var(--nav-h) - 6px);
  width: min(48%, 790px);
  aspect-ratio: 1920 / 1086;
  background: url("../assets/img/bull-cutout-mono.webp?h=6b68d344") center / contain no-repeat;
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* il testo occupa lo spazio vuoto a sinistra del toro */
  text-align: left;
  gap: 26px;
  padding-inline: var(--gutter);
}
.hero-title {
  max-width: 16ch;
  font-size: clamp(34px, 4.6vw, 60px);
  /* Michroma ha un solo peso (400): niente grassetto, il risalto viene
     dal corpo grande */
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hero-sub {
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: .02em;
  color: var(--ink-80);
}
.hero-form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(520px, 100%);
  padding: 6px 6px 6px 24px;
  border-radius: var(--r-pill);
  background: var(--glass-1);
  border: 1px solid var(--ink-12);
  box-shadow: 0 14px 34px -22px rgb(var(--deep-rgb) / .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-form input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: .02em;
}
.hero-form input::placeholder { color: var(--ink-60); }

/* dashboard glass che sale dal basso e viaggia nella sezione 2 */
.hero-shot {
  position: relative;
  z-index: 5;
  width: min(1240px, calc(100% - 2 * var(--gutter)));
  margin-top: 48px;
  margin-bottom: 90px;
}
.hero-glass {
  aspect-ratio: 2000 / 1117; /* stesse proporzioni dello screenshot reale */
  border-radius: 8px;
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 40px 90px -30px rgb(var(--deep-rgb) / .4);
  /* niente padding: l'immagine riempie il pannello invece di stare
     dentro una seconda cornice */
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform-style: preserve-3d;
}
.hero-glass .ph {
  flex: 1;
  min-height: 0;
  border-radius: inherit;
  background: none;
  border-color: rgb(var(--ink-rgb) / .2);
}
.hero-glass .ph.filled { border: 0; }

/* ============================================================
   SEZIONE 2 — Banking Anytime + dashboard inclinata
   ============================================================ */
.tilt-section { overflow: hidden; }
.tilt-grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
/* copia speculare: pannello a sinistra, testo a destra */
.tilt-grid.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }

/* ---------- sezioni "stack": si bloccano e la fila di pannelli scorre in orizzontale ---------- */
.stack { padding-block: 0; overflow: visible; }
.stack-pin {
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow-x: clip;
}
/* quando il motore JS è attivo, la sezione diventa alta e il contenuto si blocca */
.stack.stack-live { height: 400svh; }
.stack.stack-live .stack-pin {
  position: sticky;
  top: 0;
  height: 100svh;
}
.stack-pin .container { width: 100%; }
/* da ferme (telefono sotto i 520px, movimento ridotto) le file sono liste
   normali: senza questo due file vicine si toccavano (immagine contro
   immagine, testo contro il titolo dopo) */
.stack:not(.stack-live) + .stack:not(.stack-live) { padding-top: 90px; }

/* v3: filmstrip orizzontale — ogni pannello abbina un testo alla sua immagine.
   Da ferma (non "live") la fila resta un blocco normale: i pannelli restano
   una sequenza verticale, senza aggancio né trasformazioni. */
.strip-panel {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}
.strip-panel.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
/* Dove la figura e' un manifesto, la colonna del testo si stringe e lo stacco
   si accorcia: l'immagine porta gia' le proprie spiegazioni, quindi quello
   spazio rende di piu' dalla parte della figura. Misurato a 1400px: la figura
   passa da 634 a 722px di larghezza. I pannelli normali non cambiano.

   SOLO DA 1025px IN SU, e la @media non e' decorativa: `:has()` porta con se'
   la specificita' del suo argomento, quindi `.strip-panel:has(.ph--adv)` pesa
   (0,2,0) e batte il `.strip-panel { grid-template-columns: 1fr }` del blocco
   `max-width: 1024px` piu' sotto, che pesa (0,1,0). Senza questa @media il
   pannello col manifesto restava a DUE colonne mentre i suoi vicini erano a
   una: la colonna fissa da 360px si prendeva il testo e alla figura avanzava
   il resto. Misurato: 336px a 768 di finestra (i vicini 640) e 128px a 560
   (i vicini 516) — un manifesto largo 128px, cioe' l'illeggibilita' da cui
   questa regola doveva tirarlo fuori, peggiorata e su iPad. */
@media (min-width: 1025px) {
  .strip-panel:has(.ph--adv) {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: clamp(28px, 3vw, 48px);
  }
  .strip-panel.reverse:has(.ph--adv) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  }
}
.strip-panel + .strip-panel { margin-top: 90px; }
.stack-live .strip {
  display: flex;
  width: 100%;
  will-change: transform;
}
.stack-live .strip-panel { flex: 0 0 100%; min-width: 0; margin-top: 0; }

.strip-copy { display: flex; flex-direction: column; gap: 24px; }
.strip-media {
  position: relative;
  border-radius: var(--r-card);
  /* formato schermo invece che verticale: e' uno screenshot di un terminale */
  aspect-ratio: 16 / 10.5;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  overflow: hidden;
  background: var(--bg);   /* fondo pieno: l'etichetta non si mescola alla pagina */
}
.strip-media .ph { position: absolute; inset: 0; border-radius: var(--r-card); }
.strip-media .ph.filled { border: 0; }
/* UN MANIFESTO NON SI RITAGLIA. Le immagini pubblicitarie (.ph--adv) sono
   composizioni intere: i riquadri che spiegano stanno sui due bordi, e un
   object-fit: cover dentro il 16/10.5 della striscia li taglierebbe via.
   Qui e' il CONTENITORE a prendere la forma dell'immagine (1536x814), non il
   contrario. Gli altri pannelli della striscia restano 16/10.5. */
.strip-media:has(.ph--adv) {
  aspect-ratio: 1536 / 814;
  /* e niente tetto di 640px: quello vale per uno screenshot grezzo, che
     ingrandito non guadagna nulla. Un manifesto invece ha testo dentro, e
     i 640px lo rendevano illeggibile. Qui decide la colonna. */
  max-width: 100%;
}
/* caption sulla prima immagine della sezione news */
.shot-caption::after {
  content: "";
  position: absolute;
  inset: 55% 0 0 0;
  /* era --ink-rgb: segue il tema, quindi in scuro (dove --ink diventa chiaro)
     la sfumatura usata per scurire la foto sotto la didascalia diventava
     invece quasi bianca e il testo bianco sopra spariva (misurato: 1.42:1,
     sotto la soglia di 4.5:1). Qui la sfumatura deve restare scura a
     prescindere dal tema — esattamente ciò per cui esiste --deep-rgb,
     fisso in entrambi i blocchi :root. */
  background: linear-gradient(180deg, rgb(var(--deep-rgb) / 0) 0%, rgb(var(--deep-rgb) / .78) 100%);
  pointer-events: none;
}
.shot-caption figcaption {
  position: absolute;
  left: 34px;
  bottom: 28px;
  z-index: 1;
  /* --on-deep invece di #fff scritto a mano: stesso valore (sempre bianco),
     ma ora è la stessa variabile già usata per il testo sopra pannelli che
     restano scuri a prescindere dal tema, invece di un colore isolato. */
  color: var(--on-deep);
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 400;
  letter-spacing: 0;
}

/* palco del pannello grande che poi si accosta a sinistra */
.travel-stage {
  position: relative;
  z-index: 3;
  overflow: visible;
  padding-block: 40px 60px;
}
.big-shot {
  position: relative;
  z-index: 5;
  width: min(1240px, 100%);
  margin-inline: auto;
}
.side-copy { display: flex; flex-direction: column; gap: 24px; }
.side-copy .sub { max-width: 46ch; }

.tilt-stage { perspective: 1400px; }
.tilt-panel {
  transform-style: preserve-3d;
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: 34px 60px 90px -40px rgb(var(--deep-rgb) / .4), 0 2px 0 rgba(255, 255, 255, .8) inset;
  padding: 0;
  overflow: hidden;
  will-change: transform;
}

/* container-scroll: i box immagine partono inclinati e si raddrizzano con lo scroll */
[data-cscroll] { will-change: transform; transform-style: preserve-3d; }
.tilt-panel .ph { aspect-ratio: 2000 / 1117; border-radius: inherit; background: var(--bg); }
.tilt-panel .ph.filled { border: 0; }

/* ============================================================
   FEATURES
   ============================================================ */
/* ---------- voci di menu in aurora / liquid glass ---------- */
.menu-grid {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* una riga incompleta resta centrata */
  gap: 18px;
}
/* la sezione delle voci di menu sta in una schermata sola */
#features { padding-block: 60px; }
#features .center-head { gap: 14px; }
#features .title-xl { font-size: clamp(26px, 2.9vw, 38px); }
#features .center-head .sub { font-size: 15px; }
.menu-card {
  flex: 0 1 calc(25% - 13.5px);   /* 4 per riga, gap 18px */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 10px;
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--card-fill);
  /* bordo e riflessi vetro erano rgba(255,255,255,…) scritti a mano: stesso
     valore fisso di --on-deep-rgb (bianco in entrambi i temi), ora passano
     da lì come il resto della scheda "vetro aurora". */
  border: 1px solid rgb(var(--on-deep-rgb) / .75);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    0 18px 40px -22px rgb(var(--deep-rgb) / .3),
    inset 0 1px 0 rgb(var(--on-deep-rgb) / .9),
    inset 0 -1px 0 rgb(var(--on-deep-rgb) / .35);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
/* aurora: macchie di colore che vivono dietro il vetro */
.menu-card::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -2;
  background:
    radial-gradient(38% 44% at 22% 28%, rgb(var(--ink-rgb) / .13) 0%, transparent 62%),
    radial-gradient(34% 40% at 78% 22%, rgb(var(--ink-rgb) / .09) 0%, transparent 64%),
    radial-gradient(42% 46% at 62% 84%, rgb(var(--ink-rgb) / .11) 0%, transparent 66%),
    radial-gradient(36% 40% at 18% 82%, rgb(var(--ink-rgb) / .07) 0%, transparent 66%);
  filter: blur(26px);
  opacity: .85;
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
/* riflesso liquido sul bordo superiore */
.menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glare);
  pointer-events: none;
}
.menu-card:nth-child(4n+2)::before { animation-delay: -6s; transform: scaleX(-1); }
.menu-card:nth-child(4n+3)::before { animation-delay: -12s; transform: scaleY(-1); }
.menu-card:nth-child(4n+4)::before { animation-delay: -18s; transform: scale(-1); }

@keyframes auroraDrift {
  0%   { transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(6%, 5%, 0) rotate(8deg) scale(1.12); }
  100% { transform: translate3d(-3%, 6%, 0) rotate(-6deg) scale(1.05); }
}

.menu-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 30px 60px -26px rgb(var(--deep-rgb) / .42),
    inset 0 1px 0 rgb(var(--on-deep-rgb) / .95);
}
/* stessa ricetta aurora sui box che scorrono:
   slot immagine dei pannelli, card chiare del carosello, pannelli tab */
.strip-media .ph:not(.filled),
.slide--light,
.tab-panel {
  /* niente position qui: ogni target ha già il suo contesto */
  isolation: isolate;
  overflow: hidden;
  background: var(--card-fill);
  border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    0 18px 40px -22px rgb(var(--deep-rgb) / .3),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .35);
}
.strip-media .ph:not(.filled)::before,
.slide--light::before,
.tab-panel::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -2;
  background:
    radial-gradient(38% 44% at 22% 28%, rgb(var(--ink-rgb) / .13) 0%, transparent 62%),
    radial-gradient(34% 40% at 78% 22%, rgb(var(--ink-rgb) / .09) 0%, transparent 64%),
    radial-gradient(42% 46% at 62% 84%, rgb(var(--ink-rgb) / .11) 0%, transparent 66%),
    radial-gradient(36% 40% at 18% 82%, rgb(var(--ink-rgb) / .07) 0%, transparent 66%);
  filter: blur(30px);
  opacity: .85;
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
.strip-media .ph:not(.filled)::after,
.slide--light::after,
.tab-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glare);
  pointer-events: none;
}
/* ogni pannello ha la sua tinta: così si VEDE che cambiano scorrendo */
.strip-panel:nth-child(2) .strip-media .ph:not(.filled)::before {
  animation-delay: -9s;
  transform: scaleX(-1);
  filter: blur(30px) hue-rotate(105deg);
}
.strip-panel:nth-child(3) .strip-media .ph:not(.filled)::before {
  animation-delay: -18s;
  transform: scale(-1);
  filter: blur(30px) hue-rotate(215deg);
}
.tab-panel::before { animation-duration: 34s; }

/* numero grande dentro lo slot vuoto: rende leggibile la sequenza dei pannelli */
.strip-media .ph:not(.filled) .ph-label::before {
  content: "01";
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 68px;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  color: rgb(var(--ink-rgb) / .17);
  margin-bottom: 4px;
}
.strip-panel:nth-child(2) .strip-media .ph:not(.filled) .ph-label::before { content: "02"; }
.strip-panel:nth-child(3) .strip-media .ph:not(.filled) .ph-label::before { content: "03"; }

.menu-icon {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--deep);      /* il chip e' bianco in entrambi i temi: con --ink, di notte, icona chiara su chiaro */
  /* stesso bianco fisso di --on-deep-rgb al posto dei tre rgba(255,255,255,…)
     scritti a mano: nessun cambio visivo, solo la stessa variabile già usata
     dalla scheda che lo contiene. */
  background: rgb(var(--on-deep-rgb) / .6);
  border: 1px solid rgb(var(--on-deep-rgb) / .8);
  box-shadow: inset 0 1px 0 rgb(var(--on-deep-rgb) / .9), 0 6px 14px -8px rgb(var(--deep-rgb) / .35);
}
.menu-icon svg { width: 19px; height: 19px; }
.menu-card h3 {
  /* Michroma: carattere del logo NNT, largo di suo → corpo più piccolo */
  font-family: var(--font-menu);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.menu-card p {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-80);
}

/* ============================================================
   WHY US + split
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  margin-top: 90px;
}
.split.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); margin-top: 0; }

/* ============================================================
   EXPLORE — slider
   ============================================================ */
.explore { overflow: hidden; }
.slider {
  margin-top: 72px;
  position: relative;
}
.slider-track {
  display: flex;
  gap: 28px;
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
}
.slider-track.dragging { cursor: grabbing; }
.slide {
  flex: 0 0 min(640px, 82vw);
  border-radius: var(--r-card);
  min-height: 500px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.slide h3 {
  font-size: clamp(28px, 2.6vw, 36px);
  /* Michroma ha un solo peso (400) */
  font-weight: 400;
  letter-spacing: -.01em;
}
.slide p { max-width: 46ch; }
.slide-icon {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}
.slide-icon svg { width: 26px; height: 26px; }

.slide--photo { color: #fff; justify-content: flex-start; }
.slide--photo .slide-bg {
  position: absolute;
  inset: 0;
  border-radius: 0;
  border: 0;
  /* segnaposto foto: grigio della tavolozza, non il cielo lavanda del
     vecchio Credix (il sistema e' monocromo; verde e rosso solo per il
     mercato). Scuro in entrambi i temi, come la superficie "sempre scura". */
  background: linear-gradient(180deg, rgb(var(--on-deep-rgb) / .18) 0%, rgb(var(--on-deep-rgb) / .04) 100%), var(--deep-surface);
}
.slide--photo .slide-bg .ph-label { position: absolute; right: 20px; bottom: 18px; flex-direction: row; color: rgba(255,255,255,.85); }
.slide--photo > *:not(.slide-bg) { position: relative; z-index: 1; }
/* con uno screenshot vero (Market Pulse) titolo e testo finivano sulla mappa
   colorata, illeggibili: un velo scuro uniforme, senza sfumature */
.slide--photo .slide-bg.filled::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(var(--deep-rgb) / .9) 0%, rgb(var(--deep-rgb) / .7) 50%, rgb(var(--deep-rgb) / .15) 100%); }
.slide--photo .slide-icon { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .45); color: #fff; }
.slide--photo p { color: rgba(255, 255, 255, .92); }

.slide--light { color: var(--ink); } /* sfondo: aurora glass */
.slide--light .slide-icon { background: rgba(255, 255, 255, .75); color: var(--ink); }
.slide--light p { color: var(--ink-80); }

/* sempre scura, a prescindere dal tema pagina: lo dice il nome della classe,
   usa --deep-surface/--on-deep (fissi) e non --ink/--bg (che col tema scuro si
   invertono). --deep-surface e non --deep: in scuro --deep coincide col --bg
   della pagina stessa, quindi la card perderebbe ogni margine visibile — il
   filo di bordo è una seconda riserva, a prescindere dal tono di fondo. */
.slide--dark { background: var(--deep-surface); border: 1px solid rgb(var(--on-deep-rgb) / .12); color: var(--on-deep); }
.slide--dark .slide-icon { background: rgb(var(--on-deep-rgb) / .12); border: 1px solid rgb(var(--on-deep-rgb) / .25); color: var(--on-deep); }
.slide--dark p { color: rgb(var(--on-deep-rgb) / .85); }

.slider-nav {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.slider-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ink-40);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background .25s, color .25s, transform .25s;
}
.slider-arrow:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.slider-arrow svg { width: 18px; height: 18px; }
.slider-dots { display: flex; gap: 0; }
.slider-dots button {
  box-sizing: content-box;   /* 8px visibili, 32px da toccare */
  width: 8px;
  height: 8px;
  border: 12px solid transparent;
  border-radius: 50%;
  background: var(--ink-40);
  background-clip: content-box;   /* dopo «background»: lo scorciatoia lo riporterebbe a border-box */
  transition: transform .3s, background .3s;
}
.slider-dots button.active { background-color: var(--ink); transform: scale(1.35); }

/* ============================================================
   IPHONE — telefono importato dal Design System NNT
   Token del design system, con prefisso --np- per non toccare
   quelli della landing.
   ============================================================ */
.iphone-section {
  /* colori */
  --np-blue-400: #D6D8DB;
  --np-blue-500: #F2F3F4;
  --np-violet-500: #A9ACB2;
  --np-cyan-500: #A9ACB2;
  --np-up-400: #6FE0CF;
  --np-up-500: #6FE0CF;
  --np-up-soft: rgba(111, 224, 207, .14);
  --np-up-glow: rgba(111, 224, 207, .38);
  --np-down-400: #E5484D;
  --np-down-soft: rgba(229, 72, 77, .14);
  --np-text: #F2F3F4;
  --np-text-2: #D6D8DB;
  --np-text-3: #A9ACB2;
  --np-surface-2: #17181A;
  --np-surface-3: #1F2023;
  --np-glass: rgba(10, 10, 11, .66);
  --np-border: rgba(255, 255, 255, .10);
  --np-border-strong: rgba(255, 255, 255, .16);
  /* forme */
  --np-r-xs: 6px;
  --np-r-sm: 10px;
  --np-r-md: 14px;
  --np-r-lg: 18px;
  --np-r-device: 52px;
  --np-r-screen: 44px;
  /* profondità */
  --np-shadow-float: 0 18px 50px rgba(0, 0, 0, .55);
  --np-shadow-device: 0 40px 120px rgba(0, 0, 0, .65), 0 8px 24px rgba(0, 0, 0, .5);
  --np-inset-top: inset 0 1px 0 rgba(255, 255, 255, .06);
  --np-glow-blue: 0 0 0 1px rgba(242, 243, 244, .22), 0 10px 36px rgba(242, 243, 244, .12);
  --np-grad-blue: linear-gradient(135deg, #F2F3F4 0%, #D6D8DB 60%, #A9ACB2 100%);
  --np-grad-screen: radial-gradient(120% 80% at 50% -10%, #0C0E12 0%, #060709 55%, #030304 100%);
  --np-grad-glare: linear-gradient(125deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 30%);

  position: relative;
  /* fondo navy della landing (più chiaro del near-black del design),
     con alone blu dietro il telefono */
  background:
    radial-gradient(66% 52% at 50% 42%, rgba(242, 243, 244, .07) 0%, rgba(242, 243, 244, 0) 66%),
    linear-gradient(180deg, #17181A 0%, #0A0A0B 46%, #0A0A0B 100%);
  color: var(--on-deep);
  text-align: center;
  /* "clip" e non "hidden": hidden creerebbe un contenitore di scorrimento
     e il blocco interno non resterebbe agganciato */
  overflow: clip;
}
/* con il motore attivo la sezione si allunga e il contenuto resta agganciato */
.iphone-section.phone-live { height: 300svh; }
.phone-pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 40px;
  overflow: hidden;
}
/* testo e info a sinistra, telefono a destra */
.phone-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}
.phone-copy {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: left;
}
.phone-live .phone-pin {
  position: sticky;
  top: 0;
  height: 100svh;
}

.giant {
  position: relative;
  z-index: 0;
  font-family: var(--font-display);
  /* Michroma ha un solo peso (400) */
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -.01em;
  /* la sezione del telefono e sempre scura nei due temi: il titolo eredita
     il suo colore chiaro. Scriverlo come var(--bg) lo rendeva invisibile
     sul tema scuro, dove --bg e lo stesso nero del fondo. */
  color: var(--on-deep);
  text-wrap: balance;
  will-change: transform, opacity;
}
.giant .fade { color: rgb(var(--on-deep-rgb) / .58); }

/* ---- palco: telefono al centro, banner in orbita ---- */
.phone-stage {
  position: relative;
  z-index: 1;
  width: 760px;
  height: 640px;
  margin: 40px auto 0;          /* un po' più in basso, non attaccato al bordo */
  transform: scale(var(--np-scale, .78));
  transform-origin: center center;
  justify-self: center;
}
.phone-3d {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  margin-left: -150px;
  margin-top: -306px;
  transform-style: preserve-3d;
  will-change: transform;
}
.phone-tilt { transform-style: preserve-3d; will-change: transform; }

/* ---- scocca ---- */
.np-bezel {
  position: relative;
  width: 300px;
  height: 612px;
  border-radius: var(--np-r-device);
  background: linear-gradient(155deg, #23262E 0%, #0A0B0E 45%, #030304 100%);
  padding: 11px;
  box-shadow: var(--np-shadow-device);
  border: 1px solid rgba(255, 255, 255, .08);
}
.np-key { position: absolute; width: 3px; border-radius: 3px; background: #1a2130; }
.np-key--action { left: -3px; top: 128px; height: 30px; }
.np-key--volup  { left: -3px; top: 172px; height: 52px; }
.np-key--voldn  { left: -3px; top: 236px; height: 52px; }
.np-key--power  { right: -3px; top: 198px; height: 74px; }

.np-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--np-r-screen);
  background: var(--np-grad-screen);
  border: 1px solid rgba(255, 255, 255, .04);
  text-align: left;
}
.np-glare { position: absolute; inset: 0; background: var(--np-grad-glare); pointer-events: none; z-index: 9; }
.np-island {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 104px; height: 30px;
  border-radius: 999px;
  background: #000;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
}
.np-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--np-up-500);
  box-shadow: 0 0 8px var(--np-up-glow);
  animation: npPulse 1.8s ease-in-out infinite;
}
@keyframes npPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

.np-content { position: relative; z-index: 7; padding: 54px 16px 0; }
.np-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.np-logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0;
  color: #fff;
}
.np-logo span { color: var(--np-blue-500); }
.np-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--np-grad-blue);
  /* era #fff: --np-grad-blue è un rilievo CHIARO (va da platino a grigio
     medio), quindi iniziali bianche ci sparivano sopra — misurato 1.11-2.27:1
     a seconda del punto del rilievo, sempre sotto 4.5:1. Stessa correzione
     già fatta altrove per lo stesso errore (.onode, pallina sempre chiara
     con icona sempre scura): --deep è l'inchiostro fisso scuro, qui passa
     con 8.7-17.8:1 su tutto il rilievo. */
  color: var(--deep);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  box-shadow: var(--np-glow-blue);
}
.np-greet { margin-bottom: 18px; }
.np-greet-1 { font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 1.2; color: var(--np-text); }
.np-greet-2 { font-size: 12px; font-weight: 500; color: var(--np-text-3); margin-top: 5px; }

/* ---- anello P&L ---- */
.np-ringwrap { display: flex; justify-content: center; margin-bottom: 18px; }
.np-ring { position: relative; width: 188px; height: 188px; }
.np-ring svg { transform: rotate(-90deg); filter: drop-shadow(0 0 12px var(--np-up-glow)); }
.np-ring-mid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#plCounter {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 28px;
  color: var(--np-up-400);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.np-ring-label { font-size: 11px; font-weight: 500; color: var(--np-text-3); margin-top: 7px; letter-spacing: .02em; }

/* ---- celle watchlist ---- */
.np-list { display: flex; flex-direction: column; gap: 9px; }
.np-cell {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  background: var(--np-surface-2);
  border: 1px solid var(--np-border);
  border-radius: var(--np-r-md);
  box-shadow: var(--np-inset-top);
}
.np-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--np-r-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
}
.np-glyph.up { background: var(--np-up-soft); color: var(--np-up-400); }
.np-glyph.down { background: var(--np-down-soft); color: var(--np-down-400); }
.np-cell-main { flex: 1 1 0; min-width: 0; overflow: hidden; }
.np-sym { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--np-text); }
.np-meta {
  font-size: 10px; font-weight: 500; color: var(--np-text-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-cell-num { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.np-price { font-family: var(--font-num); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--np-text); white-space: nowrap; }
.np-delta {
  font-family: var(--font-num);
  font-size: 10.5px; font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--np-r-xs);
  font-variant-numeric: tabular-nums;
}
.np-delta.up { color: var(--np-up-400); background: var(--np-up-soft); }
.np-delta.down { color: var(--np-down-400); background: var(--np-down-soft); }
.np-delta { white-space: nowrap; }
.np-spark { overflow: visible; flex-shrink: 0; }
.np-cell { gap: 9px; padding: 11px 10px; }

.np-home {
  position: absolute; bottom: 9px; left: 50%;
  transform: translateX(-50%);
  width: 108px; height: 4px;
  border-radius: 3px;
  background: var(--glass-2);
  z-index: 8;
}

/* ---- banner in orbita ---- */
.orbit { position: absolute; z-index: 20; will-change: transform, opacity; }
.orbit--toast { top: -34px; left: 50%; margin-left: -125px; }
.orbit--tl { top: 132px; left: 52px; }   /* a 76px copriva la «G» del saluto */
.orbit--tr { top: 116px; right: 76px; }
.orbit--bl { bottom: 96px; left: 76px; }
.orbit--br { bottom: 70px; right: 76px; }

.nb-badge, .nb-toast {
  background: var(--np-glass);
  border: 1px solid var(--np-border-strong);
  box-shadow: var(--np-shadow-float), var(--np-inset-top);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  text-align: left;
}
.nb-badge {
  display: inline-flex; align-items: center; gap: 11px;
  width: 200px;
  padding: 11px 15px 11px 11px;
  border-radius: var(--np-r-md);
}
.nb-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--np-r-sm);
}
.nb-ic svg { width: 18px; height: 18px; }
.nb-ic.blue   { background: rgb(var(--accent-rgb) / .18); color: var(--np-blue-400); }
.nb-ic.violet { background: rgb(var(--on-deep-rgb) / .12); color: var(--np-violet-500); }
.nb-ic.cyan   { background: rgb(var(--on-deep-rgb) / .12); color: var(--np-cyan-500); }
.nb-ic.up     { background: var(--np-up-soft); color: var(--np-up-400); }
.nb-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-label {
  font-family: var(--font-display);
  font-size: 9px; font-weight: 400;
  /* non un'etichetta "badge/occhiello": sta in un badge di 200px fisso nel
     mockup del telefono — a .3em "Learning Path" va a capo (misurato) */
  letter-spacing: .15em; text-transform: uppercase;
}
.nb-label.blue { color: var(--np-blue-400); }
.nb-label.violet { color: var(--np-violet-500); }
.nb-label.cyan { color: var(--np-cyan-500); }
.nb-label.up { color: var(--np-up-400); }
.nb-strong { font-size: 13px; font-weight: 500; color: var(--np-text); letter-spacing: -.01em; white-space: nowrap; }

.nb-toast { display: flex; gap: 12px; width: 250px; padding: 14px; border-radius: var(--np-r-lg); }
.nb-toast-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--np-r-sm);
  background: var(--np-grad-blue);
  /* stesso errore e stessa correzione di .np-avatar qui sopra: rilievo
     chiaro, "T" bianca misurata 1.35:1 — --deep passa con largo margine. */
  color: var(--deep);
  font-family: var(--font-display);
  font-weight: 400; font-size: 17px;
  box-shadow: var(--np-glow-blue);
}
.nb-toast-body { flex: 1; min-width: 0; }
.nb-toast-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nb-app {
  font-family: var(--font-display);
  font-size: 8.5px; font-weight: 400;
  /* riga stretta (toast di 250px col nome sender): a .3em tronca con l'ellissi */
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--np-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* era --np-text-muted (il livello più debole): misurato 2.81:1 sul vetro
   sfocato del toast, sotto 4.5:1. Un livello sopra, --np-text-2, passa con
   largo margine (13.6:1) sullo stesso fondo campionato. */
.nb-time { font-size: 10px; font-weight: 500; color: var(--np-text-2); flex-shrink: 0; }
.nb-sender { margin-top: 5px; font-size: 13px; font-weight: 500; color: var(--np-text); }
.nb-msg { margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; font-weight: 500; color: var(--np-text-2); }
.nb-chip {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px;
  font-family: var(--font-num);
  font-size: 10px; font-weight: 500;
  border-radius: var(--np-r-xs);
  font-variant-numeric: tabular-nums;
}
.nb-chip.up { background: var(--np-up-soft); color: var(--np-up-400); }

/* ---- testo finale ---- */
.iphone-after {
  position: relative;
  z-index: 21;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  will-change: transform, opacity;
}
.iphone-after p {
  max-width: 42ch;
  /* testo corrente: IBM Plex Sans, mai Michroma (riservato a titoli/etichette) */
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(245, 246, 247, .9);
}

/* palco rimpicciolito dove non c'è spazio.
   Con transform:scale la casella resta 640px: i margini negativi la riportano
   all'ingombro reale, così il blocco non lascia buchi. */
@media (max-height: 940px) { .phone-stage { --np-scale: .72; margin-top: -50px; margin-bottom: -90px; } }
@media (max-height: 820px) { .phone-stage { --np-scale: .62; margin-top: -80px; margin-bottom: -120px; } }
@media (max-width: 1180px) { .phone-stage { --np-scale: .66; margin-top: -60px; margin-bottom: -110px; } }
@media (max-width: 1000px) {
  /* minmax(0, 1fr) e non 1fr: .phone-stage ha width:760px fisso (lo scale
     transform non cambia il box di layout) — con "1fr" nudo la colonna non
     si restringe sotto quel minimo e spinge .giant fuori dal viewport */
  .phone-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .phone-copy { text-align: center; align-items: center; }
  .iphone-after { align-items: center; }
  .phone-stage { --np-scale: .62; margin-top: -70px; margin-bottom: -120px; }
  /* box di 760px in una colonna più stretta: i margini negativi lo
     ricentrano, così lo scale lo rimpicciolisce attorno al centro */
  .phone-stage { margin-inline: calc(50% - 380px); }
}
/* tablet: dove il viaggio è acceso (da 520px) ma la griglia è già in colonna,
   lo slot d'arrivo sta sopra il testo; prima il pannello in volo passava
   sopra titolo e paragrafo per arrivare allo slot sotto di loro */
@media (min-width: 520px) and (max-width: 1024px) {
  .tilt-grid .tilt-stage { order: -1; }
}
@media (max-width: 1024px) and (max-height: 900px) {
  /* schermo basso: l'immagine della fila agganciata si riduce per stare
     sotto la barra insieme al suo testo */
  .stack-live .strip-media { max-width: clamp(260px, (100svh - var(--nav-h) - 340px) * 1.52, 640px); }
}

@media (max-width: 519px) {
  /* qui la sezione non si aggancia (js/main.js): niente schermo intero vuoto */
  .iphone-section:not(.phone-live) .phone-pin { min-height: 0; padding-block: 76px; }
}
@media (max-width: 680px) {
  .phone-stage { --np-scale: .46; margin-top: -150px; margin-bottom: -180px; }
  .orbit--tl, .orbit--tr, .orbit--bl, .orbit--br { display: none; }
}

/* ============================================================
   TABS
   ============================================================ */
.tabs-bar {
  margin-top: 64px;
  display: flex;
  justify-content: center;
  gap: clamp(28px, 6vw, 96px);
  border-bottom: 1px solid var(--ink-12);
  position: relative;
}
.tab-btn {
  font-family: var(--font-menu);
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 400;
  color: var(--ink-60);
  padding: 14px 6px 16px;
  position: relative;
  transition: color .3s;
  letter-spacing: 0;
  /* "Calendar Suite" è due parole: senza questo va a capo a metà in Michroma,
     più largo di Manrope — un'etichetta di scheda non deve mai spezzarsi */
  white-space: nowrap;
}
/* 5 schede non ci stanno in una riga sotto i 640px: vanno su due righe
   centrate (prima la fila scorreva di lato senza segno e «Dashboard»
   restava fuori schermo) */
@media (max-width: 640px) {
  .tabs-bar { flex-wrap: wrap; justify-content: center; column-gap: 18px; row-gap: 0; }
  .tab-btn { font-size: 12px; }
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--ink); }
.tab-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--ease-out);
}
.tab-btn.active::after { transform: scaleX(1); }

.tab-panels {
  margin-top: 40px;
  position: relative;
}
.tab-panel {
  position: relative;
  border-radius: var(--r-card);
  min-height: clamp(340px, 46vw, 560px);
  display: none;
  place-items: center;
  padding: 40px;
}
.tab-panel.active { display: grid; }
.tab-art { width: min(920px, 100%); color: var(--ink); }
.tab-caption {
  margin-top: 28px;
  text-align: center;
  color: var(--ink-80);
  max-width: 560px;
  margin-inline: auto;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes-grid {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 40px;
}
.quote { display: flex; flex-direction: column; gap: 16px; }
.quote-author {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
}
.quote p {
  /* testo corrente: IBM Plex Sans, mai Michroma (riservato a titoli/etichette) */
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-80);
}

/* ============================================================
   CTA
   ============================================================ */
.cta-wrap { padding-block: 40px 120px; }
/* pannello sempre scuro: --deep-surface/--on-deep sono fissi, non il --ink/--bg
   del tema, altrimenti col tema scuro di casa il pannello si "disinverte" e
   diventa un rettangolo chiaro invece di restare il blocco scuro voluto.
   --deep-surface e non --deep: in scuro --deep coincide col --bg della pagina
   (stesso #0A0A0B) e senza bordo il pannello sparirebbe nella pagina — qui
   sotto in scuro vale il tono elevato, più un filo di bordo come riserva. */
.cta-box {
  background: var(--deep-surface);
  border: 1px solid rgb(var(--on-deep-rgb) / .12);
  color: var(--on-deep);
  border-radius: 8px;
  padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 88px) 0;
  overflow: hidden;
}
.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.cta-grid .title { color: var(--on-deep); }
.cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.cta-side .sub { color: rgb(var(--on-deep-rgb) / .88); font-size: 17px; }
/* il riquadro resta scuro anche nel tema chiaro: il bottone a contorno prende
   i colori del riquadro, non del tema (prima era scuro su scuro, invisibile) */
.cta-box .btn-light, .iphone-section .btn-light { color: var(--on-deep); border-color: rgb(var(--on-deep-rgb) / .38); }
.cta-box .btn-light:hover, .iphone-section .btn-light:hover { border-color: var(--on-deep); background: rgb(var(--on-deep-rgb) / .08); }
.cta-shot { margin-top: clamp(48px, 6vw, 80px); }
.cta-shot .ph {
  aspect-ratio: 16 / 8.4;
  border-radius: 20px 20px 0 0;
  border-bottom: 0;
  background: rgb(var(--on-deep-rgb) / .06);
  border-color: rgb(var(--on-deep-rgb) / .3);
}
.cta-shot .ph-label { color: rgb(var(--on-deep-rgb) / .6); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding-top: 40px; }
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  flex-wrap: wrap;
  padding-block: 48px 72px;
}
.footer-signup { display: flex; flex-direction: column; gap: 16px; width: 350px; }
.footer-title {
  font-family: var(--font-menu);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .01em;
}
/* niente newsletter (nessun backend la riceve): il blocco porta alla registrazione */
.footer-note { font-size: 15px; line-height: 1.5; color: var(--ink-60); }
.footer-cta { align-self: flex-start; padding: 11px 24px; }
.socials { display: flex; gap: 26px; margin-top: 10px; }
.socials a { color: var(--ink); opacity: .85; transition: opacity .2s, transform .2s; }
.socials a:hover { opacity: 1; transform: translateY(-2px); }
.socials svg { width: 22px; height: 22px; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 48px 72px;
}
.footer-block { display: flex; flex-direction: column; gap: 14px; }
.footer-block .footer-title { margin-bottom: 6px; }
.footer-link { font-size: 15px; color: var(--ink-80); transition: color .2s, transform .2s; }
.footer-link:hover { color: var(--ink); }

.footer-bottom {
  border-top: 1px solid var(--ink-12);
  padding-block: 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-menu);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* ============================================================
   SOTTOPAGINE (una per ogni voce di menu)
   ============================================================ */
.subhero {
  position: relative;
  padding-top: calc(var(--nav-h) + 86px);
  padding-bottom: 76px;
  text-align: center;
  /* era un gradiente lavanda scritto a mano più una regola
     [data-theme="dark"] a parte per sovrascriverlo di notte; ora
     --subhero-grad porta già il valore giusto in entrambi i temi
     (stessa coppia di colori di prima, nessun cambio visivo). */
  background: var(--subhero-grad);
}
.subhero .container { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.subhero .title-xl { max-width: 900px; text-wrap: balance; }
.subhero .sub { max-width: 620px; font-size: 17px; }
.subhero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.sub-shot { margin-top: 52px; }
.sub-shot .ph { aspect-ratio: 16 / 9; width: 100%; }

/* blocchi alternati testo / immagine */
.alt {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  align-items: start; /* il titolo parte in alto, in linea col placeholder */
  gap: clamp(40px, 6vw, 90px);
  margin-bottom: clamp(70px, 8vw, 120px);
}
.alt:last-child { margin-bottom: 0; }
.alt.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.alt.flip .alt-copy { order: 2; }
.alt-copy { display: flex; flex-direction: column; gap: 22px; }
.alt-media .ph { aspect-ratio: 16 / 11; width: 100%; }
.alt-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--ink-60);
}

/* elenco funzionalità sotto ogni blocco: etichetta + spiegazione */
.alt-list {
  list-style: none;
  display: grid;
  gap: 16px;
  margin-top: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-12);
}
.alt-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-80);
}
.alt-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--chip);
  border: 1px solid var(--chip-line);
}
.alt-list li::after {
  content: "";
  position: absolute;
  left: 4.6px;
  top: .72em;
  width: 5px;
  height: 2.5px;
  border-left: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: rotate(-45deg);
}
.alt-list b {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  /* Michroma ha un solo peso (400) */
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 2px;
}
.alt-list li { transition: color .25s; }
.alt-list li:hover { color: var(--ink); }

/* anteprima che compare al passaggio del mouse, senza click */
.feat-pop {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: calc(100% + 20px);
  width: 330px;
  /* niente padding: l'immagine arriva a filo come in ogni altro
     riquadro del sito. La didascalia si prende il suo margine da sola. */
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(-10px) scale(.96);
  transition: opacity .26s var(--ease-out), transform .42s var(--ease-out), visibility .26s;
  /* stessa ricetta "vetro aurora" di .menu-card: --card-fill segue il tema,
     prima era ricopiato a mano in chiaro e restava chiaro anche di notte.
     Bordo e riflesso interno erano scritti a mano anche loro
     (rgba(255,255,255,.75/.95)): --on-deep-rgb esiste già con lo stesso
     valore fisso, ora li usa entrambi — tutta la scheda, non solo il bordo. */
  background: var(--card-fill);
  border: 1px solid rgb(var(--on-deep-rgb) / .75);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 30px 64px -26px rgb(var(--deep-rgb) / .45), inset 0 1px 0 rgb(var(--on-deep-rgb) / .95);
}
.alt-list li:hover .feat-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0) scale(1);
}
.feat-pop .ph {
  aspect-ratio: 16 / 9;
  /* segue l'angolo della scheda in alto, taglia netto in basso dove
     comincia la didascalia */
  border-radius: 10px 10px 0 0;
  border-style: dashed;
  border-width: 0 0 1.5px 0;
}
.feat-pop .ph.filled { border: 0; }
.feat-pop .ph-label span { font-size: 10px; letter-spacing: .16em; }
.feat-pop .ph-label svg { width: 20px; height: 20px; }
.feat-pop-cap {
  display: block;
  margin-top: 0;
  padding: 9px 14px 11px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* nei blocchi specchiati l'anteprima esce a sinistra */
.alt.flip .feat-pop {
  left: auto;
  right: calc(100% + 20px);
  transform: translateY(-50%) translateX(10px) scale(.96);
}
.alt.flip .alt-list li:hover .feat-pop { transform: translateY(-50%) translateX(0) scale(1); }

/* sotto i 900px i blocchi vanno in colonna e ogni blocco mostra gia' la sua
   immagine: l'anteprima finirebbe sopra le voci successive della lista */
@media (max-width: 900px) {
  .feat-pop { display: none; }
}
/* su touch niente hover: l'anteprima non serve */
@media (hover: none) {
  .feat-pop { display: none; }
}

/* didascalia sotto il placeholder del blocco */
.alt-cap {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-60);
  text-align: center;
}

/* galleria di screenshot */
.gallery-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.gallery-grid .ph { aspect-ratio: 4 / 3; }
.gallery-cap {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-80);
  text-align: center;
}

/* barra di ritorno */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink-80);
  transition: color .2s, transform .3s var(--ease-out);
}
.back-link:hover { color: var(--ink); transform: translateX(-3px); }

@media (max-width: 900px) {
  .alt, .alt.flip { grid-template-columns: 1fr; }
  .alt.flip .alt-copy { order: -1; }   /* prima il titolo, poi l'immagine: mai due immagini di fila */
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .menu-card { flex-basis: calc(50% - 11px); }
}

@media (max-width: 1024px) {
  .quotes-grid { grid-template-columns: repeat(2, 1fr); }
  .tilt-grid, .tilt-grid.reverse, .split, .split.reverse, .strip-panel, .strip-panel.reverse { grid-template-columns: 1fr; }
  /* fila agganciata: centrata sotto la barra fissa, non nello schermo intero
     (a 1024x768 il titolo o l'immagine restavano sotto la barra) */
  .stack.stack-live .stack-pin { padding-top: var(--nav-h); }
  .cta-grid { grid-template-columns: 1fr; }
}

/* barra con hamburger fino a 900px: fra 769 e 900 le cinque voci, il
   marchio e i bottoni non stavano in una riga e il logo si riduceva a una
   striscia. Il menu aperto è un pannello pieno: opaco (prima passava il 3%
   della pagina, e il titolo dell'eroe si leggeva dietro le voci), alto
   quanto lo schermo (prima copriva solo le voci e sotto la pagina restava
   cliccabile), con la pagina ferma dietro (html.menu-open, js/main.js). */
@media (max-width: 900px) {
  .nav-inner { gap: 0; }   /* <nav> resta un elemento vuoto: due spazi da 24px rubavano posto al logo */
  .nav-actions { gap: 8px; }
  /* Sul telefono la barra tiene marchio, «Log in», «Get Started» e menu: il
     chiaro/scuro scende nel menu aperto, in fondo, sotto le voci. E' lo
     stesso bottone (stesso id, stesso script), solo spostato. Il selettore
     passa da .nav-actions: la regola base di .theme-toggle sta PIU' IN BASSO
     nel file, con lo stesso peso vincerebbe lei e il bottone resterebbe. */
  .nav-actions .theme-toggle { display: none; }
  .nav.open .nav-actions .theme-toggle {
    display: grid;
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 2;            /* sopra il pannello delle voci, che e' nella stessa nav */
  }
  .brand { margin-right: 12px; }
  .nav-links { display: none; }
  .nav-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .nav-toggle::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }  /* 46px da toccare */
  .nav-toggle .ic-close { display: none; }
  .nav.open .nav-toggle .ic-open { display: none; }
  .nav.open .nav-toggle .ic-close { display: block; }
  .nav.open {
    color: var(--ink);
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--ink-12);
  }
  .nav.open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    color: var(--ink);
    padding: 20px var(--gutter) 40px;
    gap: 4px;
  }
  .nav.open .nav-links a { display: inline-block; padding: 13px 8px; font-size: 14px; }  /* righe da 44px */
  .nav.open .nav-links a::after { left: 8px; right: 8px; bottom: 8px; }
}
html.menu-open { overflow: hidden; }

@media (max-width: 768px) {
  :root { --gutter: 22px; --nav-h: 72px; }
  .section { padding-block: 76px; }
  .menu-grid { gap: 16px; }
  .menu-card { flex-basis: calc(50% - 8px); }   /* tablet: due per riga, i telefoni sotto i 560px ne hanno una */
  /* fondo pagina: tre margini desktop sommati lasciavano ~210px vuoti */
  .cta-wrap { padding-bottom: 56px; }
  .footer { padding-top: 8px; }
  .footer-top { padding-top: 32px; }
  /* link del piè di pagina toccabili (prima righe di 15px senza margine) */
  .footer-block { gap: 0; }
  .footer-block .footer-title { margin-bottom: 8px; }
  .footer-link { padding-block: 10px; }
  .socials a { display: grid; place-items: center; width: 44px; height: 44px; margin: -11px; }
  .back-link { padding-block: 12px; }
  .footer-bottom { font-size: 11px; letter-spacing: .2em; }
  .quotes-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero-form { flex-direction: column; padding: 10px; gap: 10px; }
  .hero-form input { width: 100%; text-align: center; padding: 8px; }
  .hero-form .btn { width: 100%; }
}

@media (max-width: 768px) {
  /* foto alta ~210px: la didascalia cadeva sopra la parte chiara, fuori
     dalla sfumatura, e toccava il bordo destro */
  .shot-caption::after {
    inset: 30% 0 0 0;
    background: linear-gradient(180deg, rgb(var(--deep-rgb) / 0) 0%, rgb(var(--deep-rgb) / .86) 55%, rgb(var(--deep-rgb) / .9) 100%);
  }
  .shot-caption figcaption { left: 18px; right: 18px; bottom: 16px; font-size: 17px; line-height: 1.3; }
  .badge { font-size: 11px; }
}

/* il pannello delle schede ruota in 3D mentre entra (data-cscroll in
   js/main.js) e il bordo vicino sforava di qualche pixel: la pagina scorreva
   di lato. clip, non hidden: non crea un contenitore di scorrimento. */
#tabs { overflow-x: clip; }

/* senza viaggio (sotto i 520px, o con il movimento ridotto) il pannello grande
   e il suo slot d'arrivo mostravano la stessa immagine due volte: restano lo
   screenshot dell'eroe e gli slot accanto ai testi. html.no-travel lo mette
   js/main.js. */
html.no-travel .travel-stage,
html.no-travel #anytime .tilt-stage { display: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   FEATURES — griglia orbitale: card ai lati, dispositivo 3D al centro
   ============================================================ */
.menu-orbit {
  margin-top: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 440px) minmax(0, 1fr);
  align-items: stretch;          /* le due colonne hanno la stessa altezza */
  gap: clamp(10px, 1.6vw, 26px);
}
/* quattro righe uguali: tutte le card vengono identiche */
.orbit-col {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
}
.orbit-stage { align-self: center; }

/* ---- card laterale ---- */
/* stesso vetro aurora di .menu-card (--card-fill segue il tema): qui era
   rimasto un bianco scritto a mano, sempre chiaro anche sul tema scuro.
   Stessa storia per il bordo (rgba(255,255,255,.75)): passa a --on-deep-rgb,
   già definito con questo identico valore fisso. */
.ocard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  /* niente contenitore: le voci sono righe separate da un filetto,
     come su un terminale. L'ultima della colonna non ha separatore. */
  padding: 14px 2px;
  border-bottom: 1px solid var(--border-subtle);
  transition: color .3s var(--ease-out);
}
.orbit-col > .ocard:last-child { border-bottom: 0; }
.ocard:hover h3,
.ocard:focus-visible h3 { color: var(--link-hover); }
.ocard:hover .ocard-ic,
.ocard:focus-visible .ocard-ic { color: var(--link-hover); }

/* colonna di destra: specchiata, il testo parte dal bordo esterno */
.menu-orbit > .orbit-col:last-child .ocard { flex-direction: row-reverse; }
.menu-orbit > .orbit-col:last-child .ocard-txt { text-align: right; }
.ocard-ic {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--text-muted);
}
.ocard-ic svg { width: 19px; height: 19px; }
.ocard-txt { min-width: 0; }
.ocard h3 {
  font-family: var(--font-menu);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink);
}
.ocard-sub {
  margin-top: 4px;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--accent);
}
.ocard-desc {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-80);
}

/* ---- scena centrale ---- */
.orbit-stage {
  --orbit-r: 168px;      /* raggio su cui stanno i nodi */
  --core-r: 108px;       /* raggio del nucleo: da qui partono i tratteggi */
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.orbit-ring {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1px solid var(--ink-12);
  transform: translate(-50%, -50%);
}
.orbit-ring.r1 { width: calc(var(--orbit-r) * 2); height: calc(var(--orbit-r) * 2); }
.orbit-ring.r2 {
  width: calc(var(--orbit-r) * 2.42);
  height: calc(var(--orbit-r) * 2.42);
  border-color: rgb(var(--ink-rgb) / .07);
}

/* nodo + tratteggio verso il centro */
.onode-wrap {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform: rotate(var(--a));
}
.onode-wrap::before {
  content: "";
  position: absolute;
  left: var(--core-r);
  top: -.5px;
  width: calc(var(--orbit-r) - var(--core-r) - 22px);
  border-top: 1px dashed rgb(var(--ink-rgb) / .28);
}
/* pallina sempre chiara con icona sempre scura, a prescindere dal tema:
   prima l'icona usava --ink, che nel tema scuro diventa quasi bianca quanto
   il cerchio e sparisce (testo a contrasto zero) */
.onode {
  position: absolute;
  left: var(--orbit-r);
  top: 0;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--on-deep);
  border: 1px solid rgb(var(--on-deep-rgb) / .9);
  box-shadow: 0 6px 18px -8px rgb(var(--deep-rgb) / .35);
  color: var(--deep);
  transform: rotate(calc(-1 * var(--a)));   /* icona sempre dritta */
}
.onode svg { width: 17px; height: 17px; }

/* ---- dispositivo 3D che ruota ---- */
.orbit-core {
  position: relative;
  z-index: 2;
  perspective: 1400px;
  width: calc(var(--core-r) * 2);
  display: grid;
  place-items: center;
}
.device3d {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  transform-style: preserve-3d;
  animation: devSpin 22s linear infinite;
}
.orbit-core:hover .device3d { animation-play-state: paused; }
@keyframes devSpin {
  from { transform: rotateX(8deg) rotateY(0deg); }
  to   { transform: rotateX(8deg) rotateY(360deg); }
}
.dev-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 7px;
}
/* era un lavanda pallido scritto a mano, residuo della tavolozza precedente:
   restava identico in entrambi i temi mentre .dev-back, la faccia opposta
   dello stesso dispositivo, usa già var(--ink)/var(--deep) e quindi segue
   il tema. Risultato prima della correzione: davanti sempre lavanda chiaro,
   dietro scuro in chiaro e con sfumatura in scuro — due materiali diversi
   sullo stesso oggetto che ruota. Non è una scelta intenzionale "sempre
   chiaro": è una svista, corretta qui allineando la faccia frontale alla
   stessa ricetta già in uso sul retro. */
.dev-front {
  background: linear-gradient(155deg, var(--ink) 0%, var(--deep) 100%);
  padding: 6px 6px 12px;
  box-shadow: 0 26px 50px -26px rgb(var(--deep-rgb) / .65);
}
.dev-screen {
  width: 100%; height: 100%;
  border-radius: 7px;
  overflow: hidden;
  background: #0B0D1A;
  border: 1px solid rgb(var(--deep-rgb) / .35);
}
.dev-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.dev-stand {
  position: absolute;
  left: 50%; bottom: -7px;
  width: 34%; height: 7px;
  transform: translateX(-50%);
  border-radius: 0 0 5px 5px;
  /* stesso lavanda residuo di .dev-front qui sopra, stessa correzione:
     il piedistallo segue ora lo stesso materiale scuro del resto del
     dispositivo invece di restare sempre chiaro. */
  background: linear-gradient(180deg, var(--ink), var(--deep));
}
.dev-back {
  transform: rotateY(180deg);
  background: linear-gradient(155deg, var(--ink) 0%, var(--deep) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 26px 50px -26px rgb(var(--deep-rgb) / .65);
}
.dev-back img { width: 34%; height: auto; opacity: .92; }

@media (prefers-reduced-motion: reduce) {
  .device3d { animation: none; transform: rotateX(6deg) rotateY(-12deg); }
}

/* responsive: il centro va sopra, le card sotto in due colonne */
@media (max-width: 1120px) {
  .menu-orbit { grid-template-columns: 1fr 1fr; }
  /* larghezza piena fino a 420px: con i soli margini automatici lo stage si
     stringeva al nucleo (216px) e anelli e nodi, misurati sul raggio, ne
     uscivano finendo sopra il sottotitolo e sopra la prima scheda */
  .orbit-stage { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 420px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .menu-orbit { grid-template-columns: 1fr; gap: 14px; }
  .orbit-stage { --orbit-r: 118px; --core-r: 76px; max-width: 320px; margin-bottom: 14px; }
  /* le 8 voci: due scaffali da quattro schede (uno per colonna del desktop)
     che scorrono col dito e si agganciano scheda per scheda. Scelta di
     Edoardo del 2026-10-21 fra lista, griglia e scaffali, misurata a 375,
     402 e 430px. Larghe il 78% cosi' la successiva fa capolino. Lo scaffale
     sborda fino ai bordi dello schermo (margine negativo) e il rientro
     riporta la prima scheda sul margine della pagina; scroll-padding fa
     agganciare anche le altre nello stesso punto. E' un contenitore di
     scorrimento suo: la pagina non scorre di lato. */
  .orbit-col {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Il dito scorre di lato QUI, e la pagina resta libera di salire.
       Senza, iOS lascia che uno scorrimento orizzontale dentro una pagina
       verticale si prenda anche il movimento su e giu': il dito scorre e la
       pagina non si muove. Stesso rimedio di .slider-track, che in questo
       file l'aveva gia' incontrato. `pinch-zoom` resta concesso: toglierlo
       impedirebbe di ingrandire la pagina con due dita. `overscroll-behavior`
       ferma la catena allo scaffale, cosi' arrivare in fondo non trascina il
       vicino ne' fa scattare il «torna indietro» del browser. */
    touch-action: pan-x pinch-zoom;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    /* la scheda entra con una dissolvenza che la sposta di 18px (data-fade):
       senza aria sotto, il contenitore di scorrimento la taglierebbe */
    padding-bottom: 24px;
    margin-bottom: -18px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .orbit-col::-webkit-scrollbar { display: none; }
  /* anche la colonna specchiata del desktop: icona sopra, testo a sinistra */
  .ocard,
  .menu-orbit > .orbit-col:last-child .ocard {
    flex: 0 0 78%;
    scroll-snap-align: start;
    /* Quando il fuoco arriva su una scheda, il browser la porta dentro: che
       si fermi col rientro della pagina e non incollata al bordo, come fa
       gia' lo scroll-padding dello scaffale per il dito. */
    scroll-margin-inline: var(--gutter);
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 18px;
    /* bordo forte e velo d'inchiostro al 3%: nel tema chiaro --bg-elevated e'
       bianco come la pagina e la scheda che fa capolino sparirebbe */
    border: 1px solid var(--border-strong);
    border-radius: var(--r-card);
    background: linear-gradient(rgb(var(--ink-rgb) / .03), rgb(var(--ink-rgb) / .03)), var(--bg-elevated);
  }
  .menu-orbit > .orbit-col:last-child .ocard-txt { text-align: left; }
  /* la cornice resta intera anche sull'ultima scheda */
  .orbit-col > .ocard:last-child { border-bottom: 1px solid var(--border-subtle); }
  .ocard-sub { font-size: 12px; }
}

/* ---------- interruttore chiaro/scuro ---------- */
.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.theme-toggle:hover,
.theme-toggle:focus-visible { color: var(--text-primary); border-color: var(--text-primary); }
.theme-toggle svg { width: 17px; height: 17px; grid-area: 1 / 1; }
.theme-toggle::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }  /* 44px da toccare, stesso disegno */
/* sul tema scuro si offre il sole, sul chiaro la luna: l'icona mostra dove si va */
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }


/* ---------- eroe: titolo con accento, occhiello e due pulsanti ---------- */
.hero-accent { color: var(--accent-green); }
/* sul bianco la menta del tema scuro non si legge (1,6:1): lo stesso Ion più
   scuro che l'app usa nel tema chiaro (src/app/ntn.css) */
[data-theme="light"] .hero-accent { color: #0B7A6B; }

.hero-kicker {
  margin-top: 18px;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-kicker span { color: var(--text-faint); margin: 0 10px; }

.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

/* pulsante pieno: l'unico della pagina, porta all'azione principale */
.btn-accent {
  color: var(--deep);
  background: var(--accent-green);
  border: 1px solid var(--accent-green);
}
.btn-accent svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.btn-accent:hover { transform: translateY(-2px); }
.btn-accent:hover svg { transform: translateX(3px); }

@media (max-width: 560px) {
  .hero-actions .btn, .subhero-actions .btn { flex: 1 1 100%; }
  .menu-card { flex-basis: 100%; }
  /* «TRADING / MARKETS / INTELLIGENCE» andava a capo lasciando una barra appesa */
  .hero-kicker { font-size: 11px; letter-spacing: .14em; }
  .hero-kicker span { margin: 0 6px; }
}


/* lo screenshot del portfolio ha un rapporto diverso da quello della
   dashboard: la coppia che viaggia lo adotta tutta e due, altrimenti il
   pannello e il suo slot di arrivo non combacerebbero durante il volo */
#bigPanel2,
#anytime-2-dock .tilt-panel .ph { aspect-ratio: 2000 / 1117; }

/* la terza coppia in viaggio (#anytime-3 -> #anytime-3-dock) e' accesa dal
   2026-10-23: ha la sua figura (il manifesto Market Pulse) e il suo testo,
   invece del segnaposto «coming soon» e del titolo copiato dalla prima
   coppia. Stessa regola delle altre due: il pannello che vola e lo slot di
   arrivo prendono la forma dell'immagine, altrimenti durante il volo non
   combaciano. */
#bigPanel3,
#anytime-3-dock .tilt-panel .ph { aspect-ratio: 1536 / 784; }

/* ---------- telefono: le tre file (community, news, insider) scorrono in
   orizzontale a pagine intere, con la rotaia sotto — frecce, barra a
   segmenti, contatore — costruita da js/main.js. Scelta di Edoardo del
   2026-10-21 fra schede con anteprima, pagine intere e "come il desktop",
   viste a 390px. La fila sborda fino ai bordi dello schermo (margine
   negativo) e il rientro riporta la pagina sul margine; con lo spazio fra
   le pagine pari al margine, la pagina dopo resta tutta fuori. E' un
   contenitore di scorrimento suo: la pagina non scorre di lato. ---------- */
.strip-rail { display: none; }
@media (max-width: 519px) {
  .stack-pin, .static-capture .stack-pin { min-height: 0; padding-block: 36px; display: block; }
  .stack:not(.stack-live) + .stack:not(.stack-live) { padding-top: 16px; }
  .strip {
    display: flex;
    gap: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Come .orbit-col qui sopra: il dito scorre di lato qui, la pagina resta
       libera di salire, e la catena si ferma a questa fila. */
    touch-action: pan-x pinch-zoom;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 8px;
    scrollbar-width: none;
  }
  .strip::-webkit-scrollbar { display: none; }
  .strip-panel {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;   /* la griglia di base centra: un testo corto resterebbe stretto in mezzo */
    gap: 16px;
    min-width: 0;
    scroll-snap-align: start;
  }
  .strip-panel + .strip-panel { margin-top: 0; }   /* in fila, non uno sotto l'altro */
  .strip-media { order: -1; max-width: none; }     /* immagine sopra in tutte e tre le file, anche in quelle specchiate */
  .strip-copy { gap: 14px; }
  .strip-copy .title { font-size: 26px; }
  .strip-copy .sub { font-size: 14.5px; line-height: 1.55; }
  .strip-rail { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
  .strip-rail .slider-arrow { width: 44px; height: 44px; flex-shrink: 0; }
  .strip-rail .slider-arrow[aria-disabled="true"] { opacity: .3; cursor: default; }
  .strip-bar { display: flex; flex: 1; gap: 6px; max-width: 150px; }
  .strip-bar i { flex: 1; height: 3px; border-radius: 3px; background: rgb(var(--ink-rgb) / .18); transition: background .3s; }
  .strip-bar i.active { background: var(--ink); }
  .strip-count { font-family: var(--font-num); font-size: 11px; letter-spacing: .14em; color: var(--ink-60); white-space: nowrap; }
}