/* ==========================================================================
   Reibanq — Effetti e sfondi
   Tutto qui e' DECORAZIONE: nessuna parola leggibile vive in questo file.
   In Divi diventa `assets/blocks.css` + un preset di Sezione per ogni classe
   `rb-bg-*`, cosi' il cliente cambia sfondo dalla tendina del Builder.
   Regole di compatibilita' rispettate: si animano solo transform, opacity e
   background-position; niente librerie; niente build step.
   ========================================================================== */

/* ==========================================================================
   1. SFONDI — libreria di classi applicabili a qualunque sezione
   ========================================================================== */
[class*="rb-bg-"] { position: relative; isolation: isolate; }
[class*="rb-bg-"] > *:not(.rb-bg-layer) { position: relative; z-index: 2; }

/* Ogni sfondo occupa lo stesso ::before, quindi due classi rb-bg-* sullo
   stesso elemento si escludono a vicenda: ne rende una sola. Per sovrapporne
   piu' di una si aggiunge uno STRATO, un elemento vuoto che copre la sezione
   e porta la sua classe di sfondo. Regola pratica:
     un elemento = un rb-bg-* su ::before  (+ rb-bg-grain, che sta su ::after)
     ogni strato in piu' = uno <span class="rb-bg-layer rb-bg-*">
   In Divi lo strato e' un Gruppo vuoto con la classe: decorazione pura,
   nessuna parola dentro, il cliente non ci puo' sbagliare niente. */
.rb-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- 1a. Aurora: macchie sfocate lentissime. Anima solo transform. ------- */
.rb-bg-aurora { overflow: hidden; }
.rb-bg-aurora::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  background:
    radial-gradient(38% 44% at 22% 30%, rgba(233, 83, 29, 0.20), transparent 62%),
    radial-gradient(42% 38% at 78% 26%, rgba(24, 49, 83, 0.22), transparent 64%),
    radial-gradient(36% 40% at 62% 78%, rgba(108, 75, 182, 0.16), transparent 62%),
    radial-gradient(34% 36% at 18% 82%, rgba(14, 140, 140, 0.14), transparent 60%);
  filter: blur(6px);
  animation: rb-aurora 34s var(--rb-ease-inout) infinite alternate;
  will-change: transform;
}
@keyframes rb-aurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.14) rotate(4deg); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.08) rotate(-3deg); }
}
.rb-bg-aurora--dark::before {
  background:
    radial-gradient(40% 46% at 20% 28%, rgba(233, 83, 29, 0.36), transparent 62%),
    radial-gradient(44% 40% at 80% 24%, rgba(60, 110, 200, 0.28), transparent 64%),
    radial-gradient(38% 42% at 64% 80%, rgba(108, 75, 182, 0.30), transparent 62%);
}

/* --- 1b. La griglia. Una sola, in due colori --------------------------
   Fino al 28/08 ce n'erano due, `rb-bg-grid` e la sorella `rb-bg-vgrid`, nate
   in momenti diversi: fili netti al 7% con passo 56 la prima, fili sfumati al
   24,8% con passo 48 e vignettatura ellittica la seconda. Due tecniche per la
   stessa cosa, con l'effetto pratico che nessuno sapeva piu' come chiamare uno
   sfondo. Zoran ha deciso di unificarle sull'aspetto della seconda - quella
   dell'hero della home - tenendo pero' l'intensita' governabile, cosi' le
   sezioni che avevano il velo leggero non cambiano faccia.

   Restano quindi due tipi, chiaro e scuro, piu' un modificatore di forza:

     rb-bg-grid                      fili navy su fondo chiaro
     rb-bg-grid rb-bg-grid--dark     fili bianchi, per i fondi scuri
     ... rb-bg-grid--velo            gli stessi fili, quattro volte piu' tenui

   `--dark` e `--velo` cambiano solo le variabili: lo `::before` che disegna
   sta sulla classe base, che quindi non va mai omessa. Prima dell'unificazione
   tre sezioni la omettevano e non mostravano nessuna griglia.

   Il disegno viene da "Vignette Grid Background" di 21st.dev
   (@molecule-lab-rushil): le linee non sono bordi ma gradienti che passano a
   trasparente dopo 1px, ed e' il motivo per cui il filo appare sfumato invece
   che netto. La vignettatura ellittica dissolve la griglia prima del bordo,
   invece di tagliarla. */
.rb-bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--rb-grid-filo, rgba(24, 49, 83, 0.45)), transparent 1px),
    linear-gradient(to bottom, var(--rb-grid-filo, rgba(24, 49, 83, 0.45)), transparent 1px);
  background-size: var(--rb-grid-passo, 48px) var(--rb-grid-passo, 48px);
  opacity: var(--rb-grid-forza, 0.55);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
  /* La griglia sta ferma. Fino al 30/08 derivava di una cella in 48 secondi
     animando `background-position`, e il risultato non era un movimento ma un
     tremolio: 48px in 48s fanno 1px al secondo, cioe' 0,017px per fotogramma,
     e il filo non e' un bordo netto ma una rampa colore-trasparente larga 1px.
     A ogni fotogramma quella rampa veniva ricampionata a una posizione
     frazionaria diversa, quindi l'intensita' di ogni filo pulsava invece di
     scorrere. Il rumore di `rb-bg-grain` sopra, in `mix-blend-mode`, doveva
     ricomporsi a ogni fotogramma e portava il tremolio su tutta la superficie,
     non solo sui fili. Il moto tolto non si rimpiange: a 1px al secondo nessuno
     lo leggeva come movimento. Non si rimette animando `transform`, perche' la
     maschera di vignettatura sta su questo stesso pseudo-elemento e si
     sposterebbe insieme ai fili. */
}

/* Sui fondi scuri il filo diventa luce. */
.rb-bg-grid--dark { --rb-grid-filo: rgba(255, 255, 255, 0.55); }

/* Il velo: l'alpha effettivo scende da 0,248 a 0,068 sul chiaro e da 0,303 a
   0,083 sullo scuro, cioe' il 7-8% di prima. E' la forza che avevano gli hero
   delle pagine interne e le due celle con la griglia dentro, che con questa
   classe restano come sono sempre stati. */
.rb-bg-grid--velo { --rb-grid-forza: 0.15; }

/* --- 1c. Grain: sovrapponibile a tutti gli altri. E' il trucco che toglie
   piu' di ogni altro l'aria di template. SVG a data-URI, nessun file. ----- */
.rb-bg-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
.rb-bg-grain--dark::after { mix-blend-mode: overlay; opacity: 0.3; }

/* --- 1d. Raggi di luce diagonali ---------------------------------------- */
.rb-bg-beams { overflow: hidden; }
.rb-bg-beams::before {
  content: '';
  position: absolute;
  inset: -50% -20%;
  z-index: 0;
  background: repeating-linear-gradient(
    102deg,
    transparent 0 90px,
    rgba(255, 255, 255, 0.045) 90px 150px,
    transparent 150px 260px
  );
  animation: rb-beams 26s linear infinite;
}
@keyframes rb-beams { to { transform: translateX(260px); } }

/* --- 1e. Spotlight che segue il cursore (le due variabili le scrive ui.js) */
.rb-bg-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    420px circle at var(--rb-mx, 50%) var(--rb-my, 40%),
    rgba(233, 83, 29, 0.16),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 480ms var(--rb-ease);
}
.rb-bg-spot.is-lit::before { opacity: 1; }
@media (hover: none) { .rb-bg-spot::before { display: none; } }

/* --- 1f. Fondo scuro di base per gli hero e le sezioni premium ---------- */
.rb-bg-deep {
  background:
    radial-gradient(120% 100% at 50% 0%, #1d3b63 0%, var(--rb-navy-deep) 55%, #0a1626 100%);
  color: var(--rb-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .rb-bg-aurora::before,
  .rb-bg-beams::before { animation: none; }
}
/* Su telefono il blur su superfici grandi e' l'unica cosa che pesa davvero. */
@media (max-width: 780px) {
  .rb-bg-aurora::before { filter: none; animation: none; }
}

/* ==========================================================================
   2. COMPARSA IN SCROLL
   La classe che nasconde la mette il JS, mai il CSS: senza JavaScript la
   pagina resta visibile. Stessa regola gia' in vigore sul sito.
   ========================================================================== */
.rb-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms var(--rb-ease), transform 760ms var(--rb-ease);
}
.rb-reveal.rb-visible {
  opacity: 1;
  transform: none;
  /* will-change tolto appena finita l'animazione: se resta, l'elemento
     diventa contenitore per i figli in position:fixed e rompe gli sticky. */
  will-change: auto;
}
/* --- I titoli di sezione: la scaletta ------------------------------------
   Il blocco `.rb-head` con `data-reveal` non sale piu' tutto insieme: sul
   contenitore la comparsa generica si spegne e la fanno i figli, sfalsati.
   L'occhiello arriva per primo, il titolo dopo, il sommario chiude, i bottoni
   per ultimi. Ogni pezzo sale di 1,25rem sciogliendo l'opacita', niente
   altro: la sfocatura di 6px che c'era prima e' stata tolta, la comparsa e'
   un fade verso l'alto e basta. La durata e' 1150ms su --rb-ease-soft, che
   non carica la corsa sull'inizio come --rb-ease: a parita' di durata quella
   curva faceva sembrare il movimento piu' veloce di quanto fosse.

   E' deliberatamente lo STESSO meccanismo di `.rb-reveal` — stessa coppia di
   classi, stessa rete di sicurezza in `site.js`, stessa media query per chi
   chiede meno movimento — e non una tecnica nuova. Un primo tentativo con
   `clip-path` scopriva il titolo da sotto ed era piu' bello, ma non e'
   verificabile da qui: il pannello tiene la scheda in `hidden`, il ricalcolo
   degli stili e' sospeso e `getComputedStyle` restituisce valori congelati,
   quindi non c'era modo di dimostrare che il titolo tornasse scoperto. Su
   sette titoli di sezione non si rischia. */
.rb-head.rb-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.rb-head.rb-reveal > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 1150ms var(--rb-ease-soft),
              transform 1150ms var(--rb-ease-soft);
}
.rb-head.rb-reveal > h2,
.rb-head.rb-reveal > h3 { transition-delay: 160ms; }
.rb-head.rb-reveal > p { transition-delay: 340ms; }
.rb-head.rb-reveal > .rb-row { transition-delay: 500ms; }

.rb-head.rb-reveal.rb-visible > * {
  opacity: 1;
  transform: none;
}

.rb-reveal-1 { transition-delay: 90ms; }
.rb-reveal-2 { transition-delay: 180ms; }
.rb-reveal-3 { transition-delay: 270ms; }
.rb-reveal-4 { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  .rb-reveal { opacity: 1; transform: none; transition: none; }
  .rb-head.rb-reveal > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.rb-hero {
  position: relative;
  /* Con min-height a governare l'altezza, il padding non deve piu' fare spazio
     da solo: se resta grande, i contenuti alti sfondano i 45rem e gli hero
     tornano di altezze diverse. */
  padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
  overflow: hidden;
  /* Altezza uguale su tutte le pagine: senza, un hero con tre righe di
     occhiello e uno con un titolo su quattro righe hanno due altezze diverse
     e passando da una pagina all'altra l'header sembra saltare.
     Il contenuto sta al centro, cosi' gli hero corti non restano in alto. */
  display: flex;
  align-items: center;
  /* 46.5rem e non 45: e' l'altezza dell'hero piu' alto (business.html, che
     tiene ancora lo stack di carte). Sotto questo valore quella pagina
     sfonderebbe e tornerebbe l'unica diversa dalle altre. */
  min-height: 46.5rem;
}
@media (max-width: 980px) { .rb-hero { min-height: 34rem; } }
/* Il contenuto dell'hero sta nel contenitore da 1200px come tutte le altre
   sezioni. La regola che stava qui, `width: 100%`, annullava il `min()` di
   `.rb-container` e portava il testo a filo della finestra, senza gutter: a
   1440px il titolo cominciava a 0px. La larghezza la governa il contenitore,
   l'altezza la governa `min-height`, e `align-items: center` sull'hero tiene
   il blocco centrato in verticale dentro quell'altezza. */
.rb-hero__grid {
  display: grid;
  /* Colonna del testo piu' larga della decorazione: a meta' e meta' il titolo
     di business.html andava su quattro righe e l'hero cresceva di 140px
     rispetto a tutti gli altri. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}
/* Hero senza seconda colonna: sulla fotografia non ci va nessun oggetto —
   il mockup della carta o il pannello di vetro coprirebbero il soggetto e
   raddoppierebbero il messaggio. Il testo si prende piu' larghezza, ma non
   tutta: oltre le ~34 parole per riga la lettura si spezza. */
.rb-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.rb-hero__grid--solo > * { max-width: 54rem; }
.rb-hero__grid--solo .rb-hero__lede { max-width: 60ch; }
/* Lo stack di carte e' quadrato: a piena colonna porta l'hero a 980px e rompe
   l'altezza comune. Niente `margin-inline: auto` qui — il contenitore ha figli
   in posizione assoluta e collasserebbe a 0x0. */
.rb-hero .rb-cardstack { max-width: 30rem; }
@media (max-width: 980px) {
  .rb-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}
/* Hero dark premium.
   L'immagine NON si dichiara qui: sta nell'attributo style della sezione, cosi'
   il cliente la cambia da solo senza toccare il CSS.
   Attenzione: non passarla attraverso una variabile CSS. Un `url()` relativo
   dentro una custom property viene risolto rispetto al FOGLIO che lo consuma
   (questo file, in assets/css/) e non rispetto alla pagina — il percorso
   diventa assets/css/assets/img/… e l'immagine non si vede.
   Il velo qui sotto e' navy e non piu' bianco: quello bianco, a opacita' 0,98,
   non attenuava la fotografia, la cancellava. */
.rb-hero--dark {
  /* Fondo profondo non piatto: il Blu di Prussia scende verso il navy-deep
     per dare corpo all'hero senza mai arrivare al nero. */
  background-image: linear-gradient(180deg, var(--rb-navy) 0%, var(--rb-navy-deep) 100%);
}

.rb-hero--photo {
  background-size: cover;
  /* Inquadratura spostata a destra: i volti finiscono nella meta' libera,
     non dietro il titolo. */
  background-position: 74% 32%;
  background-repeat: no-repeat;
}

.rb-hero--dark.rb-hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Velo navy a quattro passi: coprente a sinistra dove sta il testo,
     quasi trasparente a destra dove la fotografia deve respirare.
     I passi cominciano a scaricare dopo il 45% e non prima: la colonna di
     testo arriva al 71% della finestra quando la griglia e' `--solo`, e con
     lo scarico anticipato le ultime parole del sommario finivano su una
     fotografia scoperta. La fascia davvero libera e' oltre il 78%, che e'
     anche dove `background-position: 74%` porta il soggetto. */
  background: linear-gradient(
    100deg,
    var(--rb-veil-1) 0%,
    var(--rb-veil-1) 45%,
    var(--rb-veil-2) 62%,
    var(--rb-veil-3) 78%,
    var(--rb-veil-4) 92%
  );
}

@media (max-width: 980px) {
  .rb-hero--dark.rb-hero--photo::before {
    /* La colonna di testo occupa tutta la larghezza: il velo diventa
       verticale e piu' coprente per non far finire il titolo sui volti. */
    background: linear-gradient(
      180deg,
      var(--rb-veil-1) 0%,
      var(--rb-veil-1) 55%,
      var(--rb-veil-2) 100%
    );
  }
  .rb-hero--photo {
    background-position: center 25%;
  }
}

/* Sulla fotografia la colonna di testo si stringe. Con `--solo` il testo
   arriva altrimenti al 71% della finestra, cioe' dentro la fascia dove il velo
   ha gia' scaricato per lasciar vedere lo scatto: le ultime parole del titolo
   finivano su fotografia scoperta. Stringendo a 42rem il testo sta tutto nella
   meta' coperta e la fotografia resta libera da 78% in poi, dove sta anche il
   soggetto. */
.rb-hero--photo .rb-hero__grid--solo > * { max-width: 42rem; }
.rb-hero--photo .rb-hero__grid--solo .rb-hero__lede { max-width: 46ch; }

/* Firma visiva: linea arancione spessa sotto la parola chiave.
   Era disegnata come sfondo, con la quota fissata in `em` a partire dal bordo
   ALTO della riga: quella misura vale solo per il corpo e l'interlinea con cui
   era stata scelta, quindi negli h1 grandi delle hero la linea saliva dentro
   le lettere e nei titoli piccoli scendeva staccata.
   Ora la disegna `text-decoration`: la quota si misura dalla linea di base del
   carattere, quindi resta la stessa a ogni corpo, segue la parola se va a capo
   e non ha bisogno di `box-decoration-break`. */
.rb-mark {
  text-decoration-line: underline;
  text-decoration-color: var(--rb-orange);
  /* Misurato sull'h1 delle hero, 68px con interlinea 72: linea e stacco
     insieme scendono 15px sotto la base, dentro lo spazio dei discendenti,
     quindi su un titolo di due righe non tocca la riga sotto. */
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}

/* Il bottone primario dell'hero scuro portava un anello inteso di 2px in
   --rb-orange dentro il riempimento --rb-orange-deep, per staccarlo dal navy
   su cui il solo riempimento fa 2,63:1. L'effetto pero' era di due aranci
   concentrici, il bordo piu' chiaro del centro, e da lontano il bottone
   sembrava un arancio slavato dietro un velo. Zoran ha chiesto bottoni
   uniformi: l'anello e' tolto e nell'hero il bottone e' identico a tutti gli
   altri della pagina. Restano a staccarlo dal fondo l'ombra arancio e il
   testo bianco, che sul riempimento fa 4,98:1.
   Se si vorra' di nuovo un perimetro, lo si dia a TUTTI i primari e non al
   solo hero, altrimenti la difformita' torna. */
.rb-hero--dark .rb-btn--primary {
  box-shadow: var(--rb-shadow-orange);
}

/* Le icone di fiducia passano all'arancio chiaro: l'arancio pieno sul navy
   scenderebbe sotto la soglia. Il testo resta gestito da --rb-muted, che
   .rb-theme-dark ha gia' schiarito. */
.rb-hero--dark .rb-trust__item svg {
  color: var(--rb-orange-light);
}

/* Dove l'eroe ha una fotografia il ragionamento qui sopra non regge fino in
   fondo: il velo scarica verso destra, e sull'ultimo tratto della riga il
   bianco al 58% scende a 4,29:1. Sul navy pieno non succede, quindi la
   correzione riguarda i soli eroi con foto. */
.rb-hero--dark.rb-hero--photo .rb-trust__item {
  color: var(--rb-on-dark-soft);
}

@media print {
  .rb-hero--dark.rb-hero--photo::before { display: none; }
  .rb-hero--photo { background: none; }
  /* Il testo torna scuro su carta: il navy e' il colore di lettura. */
  .rb-hero--dark,
  .rb-hero--dark .rb-hero__lede,
  .rb-hero--dark .rb-trust__item {
    color: var(--rb-navy);
  }
  .rb-hero--dark .rb-btn--primary {
    box-shadow: none;
    color: var(--rb-navy);
  }
}

.rb-hero__panel { display: flex; align-items: center; }

.rb-hero h1 { margin-bottom: 1.25rem; }
.rb-hero__lede { font-size: var(--rb-body-lg); line-height: 1.55; max-width: 46ch; margin-bottom: 2rem; }
.rb-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.25rem; }
/* Nelle hero i bottoni stanno a sinistra come il testo. Dove il blocco porta
   anche .rb-center — le CTA finali di sezione — il testo e' centrato e i
   bottoni devono seguirlo: text-align da solo non muove un contenitore flex. */
.rb-hero__cta.rb-center { justify-content: center; }

/* --- 3a. Stack di carte con parallasse del mouse (le variabili le scrive
   ui.js; su touch restano a 0 e resta una composizione statica) ----------- */
.rb-cardstack {
  position: relative;
  aspect-ratio: 1 / 1;
  /* `width: 100%` e' obbligatorio: `margin-inline: auto` su un elemento di
     griglia annulla lo stretch e, con tutti i figli in posizione assoluta,
     l'altezza da aspect-ratio si calcola su una larghezza di zero. */
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.rb-cardstack__item {
  position: absolute;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--rb-shadow-xl);
  transition: transform 900ms var(--rb-ease);
  will-change: transform;
}
.rb-cardstack__item img { width: 100%; height: auto; display: block; }
.rb-cardstack__item--back {
  width: 66%;
  top: 8%; left: 2%;
  transform:
    rotate(-13deg)
    translate3d(calc(var(--rb-px, 0) * -22px), calc(var(--rb-py, 0) * -16px), 0);
}
.rb-cardstack__item--front {
  width: 72%;
  top: 34%; right: 0;
  transform:
    rotate(6deg)
    translate3d(calc(var(--rb-px, 0) * 26px), calc(var(--rb-py, 0) * 20px), 40px);
}
@media (max-width: 620px) {
  .rb-cardstack { aspect-ratio: 4 / 3; }
  .rb-cardstack__item--back { width: 68%; top: 4%; }
  .rb-cardstack__item--front { width: 72%; top: 30%; }
}

/* --- 3b. Pannello di vetro con il costo della conversione ---------------- */
.rb-glass {
  position: absolute;
  z-index: 4;
  padding: 1.15rem 1.3rem;
  /* 0,96 e non 0,9: la scheda sta sopra l'eroe navy, e al 90% il bianco
     scendeva a rgb(231,233,235). I token del testo sono tarati sul bianco —
     --rb-muted-on-light e' gia' stato scurito una volta per quello — e su quel
     grigio perdevano il margine: 4,09:1 il testo secondario, 4,08:1 l'arancio
     scuro, contro il 4,5:1 che serve sotto i 19px. Il vetro si vede ancora. */
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--rb-r);
  box-shadow: var(--rb-shadow-lg);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  animation: rb-float 7s var(--rb-ease-inout) infinite alternate;
  transform: translate3d(calc(var(--rb-px, 0) * 14px), calc(var(--rb-py, 0) * 10px), 0);
}
@keyframes rb-float { to { margin-top: -12px; } }
.rb-glass--rate { left: -2%; bottom: 12%; width: min(290px, 62%); }
/* Variante nel flusso, per stare in una colonna invece che sopra le carte. */
.rb-glass--static {
  position: static;
  width: min(330px, 100%);
  margin-left: auto;
  background: rgba(255, 255, 255, 0.94);
}
@media (max-width: 980px) { .rb-glass--static { margin-left: 0; } }
.rb-glass__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--rb-muted); }
.rb-glass__row + .rb-glass__row { margin-top: 0.55rem; }
.rb-glass__row b { font-family: var(--rb-font-display); font-size: 1.0625rem; color: var(--rb-navy); font-variant-numeric: tabular-nums; }
.rb-glass__row--total { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--rb-line); }
.rb-glass__row--total b { color: var(--rb-orange-deep); }
@media (max-width: 620px) { .rb-glass--rate { left: 0; bottom: 0; width: min(260px, 78%); } }
/* Il pannello di vetro resta chiaro anche sull'hero scuro: e' il punto di luce
   della composizione, e su navy stacca piu' di qualunque vetro fumé. Dentro
   .rb-theme-dark, pero', il testo e' bianco e sul vetro sparirebbe: qui si
   ritrovano i valori del tema chiaro, che hanno un nome proprio in tokens.css
   proprio per questo. */
.rb-hero--dark .rb-glass {
  --rb-body: var(--rb-body-on-light);
  --rb-muted: var(--rb-muted-on-light);
  --rb-line: var(--rb-line-on-light);
  color: var(--rb-navy);
}
@media (prefers-reduced-motion: reduce) { .rb-glass { animation: none; } }

/* ==========================================================================
   4. CONVERTITORE — il momento di trasparenza sul costo
   E' l'unico pezzo con logica vera. In Divi diventa un modulo Code
   dichiarato come tale: non contiene copy di prodotto, solo numeri e
   etichette brevi. Da rivalutare insieme prima del porting.
   ========================================================================== */
.rb-fx {
  display: grid;
  /* minmax(0, 1fr) e non "auto": la traccia automatica si dimensiona sul
     min-content del campo, e il min-content di <input type="number"> resta
     quello del suo attributo size (~480px) anche con min-width:0 sull'input.
     Senza questo, sotto i 480px la colonna sfonda la scatola e la pagina
     scorre in orizzontale. Succedeva anche in home. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-lg);
  box-shadow: var(--rb-shadow-lg);
}
.rb-fx__field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--rb-surface-alt);
  border: 1px solid transparent;
  border-radius: var(--rb-r);
  transition: border-color var(--rb-t) var(--rb-ease), background-color var(--rb-t) var(--rb-ease);
}
.rb-fx__field:focus-within { border-color: var(--rb-orange); background: #fff; }
.rb-fx__field label { flex: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rb-muted); }
.rb-fx__field input {
  flex: 1;
  min-width: 0;
  font-family: var(--rb-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  color: var(--rb-navy);
  background: none;
  border: 0;
  outline: none;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.rb-fx__field input::-webkit-outer-spin-button,
.rb-fx__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rb-fx__field select {
  flex: none;
  font-family: var(--rb-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--rb-navy);
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-pill);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}
.rb-fx__swap {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-block: -1.5rem;
  background: #fff;
  border: 1px solid var(--rb-line);
  border-radius: 50%;
  color: var(--rb-orange-deep);
  box-shadow: var(--rb-shadow-xs);
  z-index: 2;
  transition: transform var(--rb-t) var(--rb-ease), border-color var(--rb-t) var(--rb-ease);
}
.rb-fx__swap:hover { transform: rotate(180deg); border-color: var(--rb-orange); }
.rb-fx__swap svg { width: 20px; height: 20px; }
.rb-fx__breakdown { display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.rb-fx__line { display: flex; justify-content: space-between; gap: 1rem; color: var(--rb-body); }
.rb-fx__line b { font-family: var(--rb-font-display); color: var(--rb-navy); font-variant-numeric: tabular-nums; }
.rb-fx__line--hl { padding-top: 0.6rem; border-top: 1px dashed var(--rb-line); }
.rb-fx__line--hl b { color: var(--rb-orange-deep); }
.rb-fx__note { font-size: 0.8125rem; color: var(--rb-muted); margin: 0; }

/* ==========================================================================
   Reibanq — Bento grid
   Sistema a "ancora e fasce": una colonna alta su un fianco, tre fasce
   orizzontali sull'altro.

   Perche' non il bento classico. L'impianto precedente — due quadratini in
   alto a sinistra, una cella alta con la fotografia al centro, una pila di
   celle a destra, dodici colonne, passo 16px, raggio 20px — e' lo stesso
   che usa Finom su finom.co, e affiancando i due blocchi si vedeva. Qui
   cambiano tre cose insieme, non l'ordine delle celle:

   1. l'elemento alto non sta al centro ma **sul fianco**, e regge tutta
      l'altezza del blocco: e' un'ancora, non un mattone in mezzo agli altri;
   2. le tre righe hanno **altezze diverse** (alta, bassa, media), dove nel
      bento classico sono uguali fra loro;
   3. le fasce accanto all'ancora hanno **larghezze alternate** — 4+3, poi 7
      piena, poi 3+4 — quindi la cucitura verticale non si allinea mai da una
      riga all'altra. Nel bento classico le cuciture cadono in colonna.

   Il modificatore `--mirror` ribalta l'ancora sull'altro fianco e inverte le
   larghezze: due blocchi nella stessa pagina non si somigliano.
   ========================================================================== */

.rb-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(210px, auto) minmax(140px, auto) minmax(180px, auto);
  gap: 14px;
}

.rb-bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--rb-gap);
  /* Il filo di un pixel disegna il rettangolo: senza, le celle chiare si
     confondevano con il fondo della sezione e il blocco perdeva la forma.
     Dentro una cella `rb-theme-dark` la variabile vale il filo chiaro del
     tema scuro, quindi il bordo si vede su entrambi i fondi. */
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-lg);
  overflow: hidden;
  background-color: var(--rb-surface);
  transition: transform var(--rb-t) var(--rb-ease),
              box-shadow var(--rb-t) var(--rb-ease);
}

/* Nessun contenuto nascosto: l'effetto hover e' solo decorativo.
   Era `scale(1.02)`, cioe' un ingrandimento; le `.rb-card` invece si alzano
   di 4px. Due famiglie di card nella stessa pagina che rispondono al mouse in
   due modi diversi si notano: qui il gesto e' uno solo, il sollevamento. */
.rb-bento__cell:hover,
.rb-bento__cell:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--rb-shadow-lg);
}

/* ==========================================================================
   Impianto
   Il blocco resta un rettangolo pieno: tre righe, dodici colonne, nessuna
   traccia vuota. Le celle si posizionano per **ordine nel documento**, non
   per una classe di ampiezza, cosi' i bordi esterni restano allineati anche
   quando il testo di una cella e' piu' lungo di quello accanto.

   Ordine atteso nel sorgente, e non e' arbitrario: la prima cella e'
   l'ancora, cioe' quella con la fotografia, perche' sotto i 768px il blocco
   torna una colonna sola e l'ancora deve restare in testa. Le altre cinque
   sono fasce, dalla piu' importante alla meno.

       ancora   b     c        <- riga 1, alta
       ancora   d (piena)      <- riga 2, bassa
       ancora   e     f        <- riga 3, media
   ========================================================================== */

.rb-bento > .rb-bento__cell:nth-child(1) { grid-area: 1 / 1 / 4 / 6; }
.rb-bento > .rb-bento__cell:nth-child(2) { grid-area: 1 / 6 / 2 / 10; }
.rb-bento > .rb-bento__cell:nth-child(3) { grid-area: 1 / 10 / 2 / 13; }
.rb-bento > .rb-bento__cell:nth-child(4) { grid-area: 2 / 6 / 3 / 13; }
.rb-bento > .rb-bento__cell:nth-child(5) { grid-area: 3 / 6 / 4 / 9; }
.rb-bento > .rb-bento__cell:nth-child(6) { grid-area: 3 / 9 / 4 / 13; }

/* Ribaltato: ancora a destra, e le larghezze delle fasce si invertono
   (3+4 in alto, 4+3 in basso) perche' il ribaltamento da solo lascerebbe la
   stessa figura vista allo specchio. */
.rb-bento--mirror > .rb-bento__cell:nth-child(1) { grid-area: 1 / 8 / 4 / 13; }
.rb-bento--mirror > .rb-bento__cell:nth-child(2) { grid-area: 1 / 1 / 2 / 4; }
.rb-bento--mirror > .rb-bento__cell:nth-child(3) { grid-area: 1 / 4 / 2 / 8; }
.rb-bento--mirror > .rb-bento__cell:nth-child(4) { grid-area: 2 / 1 / 3 / 8; }
.rb-bento--mirror > .rb-bento__cell:nth-child(5) { grid-area: 3 / 1 / 4 / 5; }
.rb-bento--mirror > .rb-bento__cell:nth-child(6) { grid-area: 3 / 5 / 4 / 8; }

/* ==========================================================================
   Superfici
   ========================================================================== */

/* Ogni cella ha un fondo sfumato invece di un colore piatto: una luce piu'
   chiara verso un angolo e un fondo piu' scuro verso quello opposto, che e'
   quanto basta a dare profondita' a un riquadro senza metterci un'ombra.

   Due regole valgono per tutte:

   - la sfumatura resta **dentro la tinta della cella**. Non si mette arancio
     sopra al navy per "scaldarlo": due tinte dentro un riquadro piccolo
     diventano una macchia, e l'arancio e' l'accento della pagina, non un
     fondo. Chi e' navy sfuma in navy, chi e' arancio in arancio, chi e'
     chiaro in chiaro.
   - il colore pieno resta scritto in `background-color` sotto la sfumatura.
     Se `background-image` non arriva -- browser vecchio, immagine bloccata --
     la cella torna al fondo di prima e il testo si legge lo stesso.

   Gli scarti sono piccoli di proposito sulle celle chiare: li' basta un paio
   di gradini di grigio, perche' il salto forte lo fa gia' il bordo. */

/* rb-theme-dark ridefinisce le variabili di testo, non lo sfondo: va messo qui. */
.rb-bento__cell--ink {
  background-color: var(--rb-navy-deep);
  background-image:
    radial-gradient(105% 85% at 12% 4%, rgba(45, 84, 136, 0.55), rgba(45, 84, 136, 0) 60%),
    linear-gradient(158deg, #1d3b64 0%, #14294a 52%, #0c1b30 100%);
}

.rb-bento__cell--photo { background-color: var(--rb-navy-900); }

/* La cella dei cambi non ha una fotografia che le riempia il fondo, quindi il
   fondo se lo deve fare da sola. Stessa idea delle altre, tenuta tutta dentro
   il navy: l'alone arancio che stava qui e' uscito, perche' l'arancio in
   questa cella ce l'hanno gia' le righe che si accendono e due arancioni
   sovrapposti si annullavano a vicenda. */
.rb-bento__cell--cambi {
  background-color: var(--rb-navy-900);
  background-image:
    radial-gradient(100% 78% at 80% 6%, rgba(52, 96, 154, 0.45), rgba(52, 96, 154, 0) 58%),
    radial-gradient(120% 100% at 6% 96%, rgba(28, 74, 122, 0.50), rgba(28, 74, 122, 0) 62%),
    linear-gradient(155deg, #1c3a63 0%, #14294a 46%, #0a1626 100%);
}

/* Velo arancio: sfuma dentro l'arancio, schiarendo verso il bianco caldo. */
.rb-bento__cell--accent {
  background-color: var(--rb-orange-soft);
  background-image: linear-gradient(152deg, #fff8f4 0%, #fdefe9 48%, #f9dfd2 100%);
}

.rb-bento__cell--soft {
  background-color: var(--rb-surface-alt);
  background-image: linear-gradient(152deg, #ffffff 0%, #f6f8fb 50%, #eaeff7 100%);
}

/* Grigio vero, non il fondo della sezione. `--soft` vale --rb-surface-alt,
   cioe' lo stesso #f6f8fb di `.rb-section--alt`: dentro una sezione alternata
   la cella spariva. Qui si usa il grigio dei filetti, che stacca di un gradino
   senza diventare una superficie scura. */
.rb-bento__cell--grey {
  background-color: var(--rb-line-on-light);
  background-image: linear-gradient(152deg, #eff2f7 0%, #e4e8ef 50%, #d5dce7 100%);
}

/* Il bordo ce l'hanno ormai tutte le celle: qui resta solo il fondo. */
.rb-bento__cell--white {
  background-color: var(--rb-surface);
  background-image: linear-gradient(152deg, #ffffff 0%, #fbfcfe 46%, #f1f5fa 100%);
}

/* Arancio pieno. Si usa `--rb-orange-deep` e non `--rb-orange`: sul #e9531d
   del manuale il bianco fa 3,4:1, che basta a un titolo grande ma non al
   testo di servizio; sul #c8410f arriva a 4,9:1 e passa AA per entrambi.
   Il testo va tenuto a bianco pieno, perche' il 74% di `rb-theme-dark`
   ricadrebbe sotto la soglia.

   La sfumatura schiarisce solo verso l'angolo in alto a sinistra, dove il
   testo non arriva: il #d9541c del punto piu' chiaro col bianco fa 4,0:1, e
   sopra ci puo' passare un titolo grande ma non il testo di servizio. Il
   corpo del testo cade sul #c8410f o piu' scuro, quindi AA regge. */
.rb-bento__cell--orange {
  background-color: var(--rb-orange-deep);
  background-image:
    /* Il lampo d'angolo schiariva la cella fino a rgb(225,79,26), dove il bianco
       scende a 3,95:1 e il testo piu' piccolo e' sotto la soglia. Il fondo
       arancio deve restare abbastanza scuro da reggere il bianco: a 0,28 il
       punto piu' chiaro sta a 4,55:1 e il lampo si vede ancora. */
    radial-gradient(95% 80% at 10% 2%, rgba(233, 83, 29, 0.28), rgba(233, 83, 29, 0) 62%),
    linear-gradient(158deg, #c8410f 0%, #bb3b0c 58%, #a53309 100%);
  --rb-body: #ffffff;
}

/* ==========================================================================
   Tipografia e contenuti interni
   ========================================================================== */

.rb-bento__title {
  font-family: var(--rb-font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.5vw, 1.375rem);
  line-height: var(--rb-lh-head);
  margin: 0 0 0.5em;
}

/* L'ancora regge tutta l'altezza del blocco e porta la fotografia: il suo
   titolo e' l'unico a salire di corpo, cosi' la gerarchia si vede anche
   togliendo il colore. Le cinque fasce restano tutte alla stessa misura. */
.rb-bento__cell--anchor .rb-bento__title {
  font-size: clamp(1.25rem, 2.8vw, 1.625rem);
}

.rb-bento__text {
  font-family: var(--rb-font-text);
  font-size: var(--rb-small);
  line-height: var(--rb-lh-body);
  color: var(--rb-body);
  margin: 0;
}

.rb-bento__big {
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: var(--rb-lh-tight);
}

/* Dentro una fascia bassa il numero grande sfonderebbe: li' scende. */
.rb-bento__cell--flat .rb-bento__big {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* ==========================================================================
   Immagini decorative e media
   ========================================================================== */

/* Fig: in basso a destra, nel flusso. Era `position: absolute`, e finche' le
   figure erano segnaposto chiari la sovrapposizione col paragrafo non si
   notava; con i mockup del cliente, che sono carte scure, il testo spariva
   sotto. Nel flusso l'immagine non puo' coprire nulla: `margin-top: auto` la
   spinge in fondo alla cella (che e' gia' flex in colonna), `align-self` la
   porta a destra, il `padding-top` garantisce l'aria dal testo anche quando
   la cella e' esattamente alta quanto il suo contenuto. Il prezzo e' che ora
   la figura concorre a determinare l'altezza della riga della griglia. */
.rb-bento__fig {
  align-self: flex-end;
  margin-top: auto;
  padding-top: 1rem;
  max-width: 40%;
  height: auto;
  pointer-events: none;
}

/* Media: immagine a riempimento, solo dentro --photo */
.rb-bento__cell--photo .rb-bento__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Testo sopra la fotografia, in fondo */
.rb-bento__cell--photo,
.rb-bento__cell--cambi {
  justify-content: flex-end;
}

.rb-bento__cell--photo .rb-bento__title,
.rb-bento__cell--photo .rb-bento__text,
.rb-bento__cell--photo .rb-bento__big,
.rb-bento__cell--cambi .rb-bento__title,
.rb-bento__cell--cambi .rb-bento__text,
.rb-bento__cell--cambi .rb-bento__big {
  position: relative;
  z-index: 2;
}

/* Velatura scura per contrasto */
.rb-bento__cell--photo::after,
.rb-bento__cell--cambi::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0) 60%);
  pointer-events: none;
}

/* Cella dei conti: il tabellone dei cambi al posto della fotografia. Stessa
   idea del globo qui sotto — disegnato qui e non preso di repertorio — ma il
   soggetto e' il cambio, non un saldo tenuto in ogni valuta: il conto e' in
   euro. Il nastro scorre lento e ogni tanto una riga aggiorna la cifra: lo fa
   assets/js/cambi.js. Senza JavaScript resta una colonna ferma, che regge lo
   stesso. */
.rb-cambi {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Le righe in cima e in fondo sfumano nel fondo: senza, il nastro si vede
     tagliato di netto e si capisce il trucco. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.rb-cambi__nastro {
  list-style: none;
  margin: 0;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
  will-change: transform;
}

.rb-cambi__riga {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  /* Il respiro orizzontale e' rientrato con un margine negativo di pari
     misura: cosi' la riga accesa si illumina anche oltre le cifre, ma la
     colonna resta allineata e l'altezza non cambia, che e' quella su cui
     cambi.js calcola il giro del nastro. */
  padding: 0.7rem 0.85rem;
  margin: 0 -0.85rem;
  border-radius: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  transition: background-color 260ms ease, box-shadow 260ms ease,
              border-color 260ms ease;
}

/* Il filo verticale a sinistra della riga accesa. Sta su un pseudo-elemento
   perche' cosi' puo' crescere dall'alto verso il basso senza spostare niente
   di quello che gli sta accanto. */
.rb-cambi__riga::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--rb-cambi-tinta, var(--rb-orange));
  opacity: 0;
  transform: translateY(-50%);
  transition: height 260ms ease, opacity 260ms ease;
}

.rb-cambi__coppia {
  font-family: var(--rb-font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  /* Il bianco al 55% sul fondo della cella faceva 3,73:1 a 13px. Qui si usa il
     token gia' esistente dei testi secondari su fondo scuro invece di inventare
     un'opacita' nuova: 0,74 porta il rapporto a 5,4:1. */
  color: var(--rb-on-dark-soft);
  transition: color 260ms ease;
}

.rb-cambi__tasso {
  font-family: var(--rb-font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  /* Cifre di larghezza fissa: senza, il numero che cambia fa ballare la riga. */
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.82);
  transition: color 260ms ease;
}

/* La riga che sta aggiornando il tasso si illumina tutta: velo colorato,
   contorno sottile e filo verticale a sinistra. Il colore dice il verso —
   verde se il tasso sale, arancio se scende — e lo porta una variabile sola,
   `--rb-cambi-tinta`, cosi' le regole dell'accensione si scrivono una volta
   invece che due. Il verde non sta fra i colori di marca perche' serve qui e
   basta: e' il verso di un cambio, non un accento della pagina. */
.rb-cambi__riga--viva {
  --rb-cambi-tinta: var(--rb-orange-light);
  --rb-cambi-velo: rgba(255, 138, 92, 0.20);
  background-color: var(--rb-cambi-velo);
  border-bottom-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10),
              0 6px 20px -10px var(--rb-cambi-tinta);
}

.rb-cambi__riga--su {
  --rb-cambi-tinta: #4fd6a0;
  --rb-cambi-velo: rgba(79, 214, 160, 0.18);
}

.rb-cambi__riga--viva::before { height: 62%; opacity: 1; }
.rb-cambi__riga--viva .rb-cambi__tasso { color: #fff; }
.rb-cambi__riga--viva .rb-cambi__coppia { color: var(--rb-cambi-tinta); }

@media (prefers-reduced-motion: reduce) {
  .rb-cambi__riga,
  .rb-cambi__riga::before,
  .rb-cambi__coppia,
  .rb-cambi__tasso { transition: none; }
}

/* Cella col globo: fondo bianco, sfera a punti blu, un punto arancione per
   giurisdizione. Il globo sta nel flusso e non in posizione assoluta, cosi'
   entra tutto nella cella e non si taglia mai in basso; `margin-bottom: auto`
   spinge titolo e testo sul fondo. */
.rb-bento__cell--globe {
  background-color: #fff;
  /* Stessa sfumatura chiara delle altre celle bianche, ma piu' trattenuta:
     qui sopra ci sono i punti navy del globo, e un fondo troppo carico li
     mangerebbe. */
  background-image: linear-gradient(152deg, #ffffff 0%, #fcfdfe 52%, #f2f6fb 100%);
}

.rb-bento__cell--globe .rb-globo {
  display: block;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 1;
  margin: 0 auto auto;
  opacity: 0;
  transition: opacity 600ms ease;
}

/* Sotto i 768px la cella diventa larga e bassa: il globo si stringe per
   lasciare al testo l'altezza che gli serve. */
@media (max-width: 767px) {
  .rb-bento__cell--globe .rb-globo { width: 68%; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-bento__cell--globe .rb-globo { transition: none; }
}

/* ==========================================================================
   Responsive: sotto 768px → 4 colonne, passo 8px, span modificati
   ========================================================================== */

/* Fra 768px e 1023px l'ancora non regge: alta quanto tre fasce diventa una
   striscia stretta e la fotografia dentro si riduce a una fessura. Passa
   quindi in testa a larghezza piena, e le fasce si dispongono a due a due
   con le larghezze ancora disuguali, per non perdere il ritmo. */
@media (min-width: 768px) and (max-width: 1023px) {
  .rb-bento {
    grid-template-rows: minmax(240px, auto) repeat(3, minmax(150px, auto));
  }

  .rb-bento > .rb-bento__cell:nth-child(1),
  .rb-bento--mirror > .rb-bento__cell:nth-child(1) { grid-area: 1 / 1 / 2 / 13; }
  .rb-bento > .rb-bento__cell:nth-child(2),
  .rb-bento--mirror > .rb-bento__cell:nth-child(2) { grid-area: 2 / 1 / 3 / 8; }
  .rb-bento > .rb-bento__cell:nth-child(3),
  .rb-bento--mirror > .rb-bento__cell:nth-child(3) { grid-area: 2 / 8 / 3 / 13; }
  .rb-bento > .rb-bento__cell:nth-child(4),
  .rb-bento--mirror > .rb-bento__cell:nth-child(4) { grid-area: 3 / 1 / 4 / 13; }
  .rb-bento > .rb-bento__cell:nth-child(5),
  .rb-bento--mirror > .rb-bento__cell:nth-child(5) { grid-area: 4 / 1 / 5 / 6; }
  .rb-bento > .rb-bento__cell:nth-child(6),
  .rb-bento--mirror > .rb-bento__cell:nth-child(6) { grid-area: 4 / 6 / 5 / 13; }
}

/* ==========================================================================
   Sotto 768px: una colonna sola, nell'ordine del sorgente
   ========================================================================== */

@media (max-width: 767px) {
  .rb-bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(150px, auto);
    gap: 10px;
  }

  .rb-bento > .rb-bento__cell:nth-child(n),
  .rb-bento--mirror > .rb-bento__cell:nth-child(n) {
    grid-area: auto;
  }

  /* L'ancora tiene un'altezza propria: e' l'unica cella con la fotografia a
     riempimento e schiacciata perderebbe il soggetto. */
  .rb-bento > .rb-bento__cell--anchor {
    min-height: 300px;
  }
}

/* ==========================================================================
   Preferenze di movimento ridotto
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .rb-bento__cell {
    transition: none;
    transform: none;
    box-shadow: none;
  }
}

/* ==========================================================================
   6. MEDIA con cornice
   ========================================================================== */
/* La ricevuta del bonifico: sta dentro `.rb-media` al posto di una
   fotografia, su local-payments.html. Disegnata in caratteri veri per la
   stessa ragione del tabellone dei cambi — le fotografie di repertorio del
   .com raccontano un conto multivaluta che qui non c'e' — e vestita come le
   immagini che le stanno accanto: stesso raggio e stessa ombra di
   `.rb-media img`, cosi' la sezione non cambia peso. */
.rb-bonifico {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--rb-r-lg);
  box-shadow: var(--rb-shadow-lg);
  background: var(--rb-navy);
  color: var(--rb-on-dark);
}

.rb-bonifico__tipo {
  margin: 0;
  font-family: var(--rb-font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rb-on-dark-soft);
}

.rb-bonifico__cifra {
  margin: 0.35rem 0 0;
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.75rem);
  /* Cifre di larghezza fissa come nel tabellone dei cambi: e' lo stesso
     alfabeto di numeri, e due misure diverse si vedono. */
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.rb-bonifico__voci {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  display: grid;
  gap: 0.85rem;
}

/* Una riga per voce: etichetta a sinistra, valore a destra, come sulla
   ricevuta vera. Il filetto sopra separa senza chiudere la voce in un
   riquadro. */
.rb-bonifico__voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rb-on-dark-line);
}

.rb-bonifico__voce dt {
  font-size: 0.875rem;
  color: var(--rb-on-dark-soft);
}

.rb-bonifico__voce dd {
  margin: 0;
  font-family: var(--rb-font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: right;
}

/* L'esito e' l'unica cosa colorata della cartolina: e' quello che l'occhio
   cerca su una ricevuta. */
.rb-bonifico__esito { color: var(--rb-orange-light); }

.rb-media { position: relative; }
.rb-media img { width: 100%; border-radius: var(--rb-r-lg); box-shadow: var(--rb-shadow-lg); }
.rb-media__badge {
  position: absolute;
  left: -1.25rem; bottom: -1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.15rem;
  background: #fff;
  border-radius: var(--rb-r);
  box-shadow: var(--rb-shadow-lg);
  max-width: 78%;
}
.rb-media__badge svg { width: 30px; height: 30px; flex: none; color: var(--rb-orange-deep); }
.rb-media__badge span { font-size: 0.875rem; line-height: 1.4; color: var(--rb-body); }
.rb-media__badge b { display: block; font-family: var(--rb-font-display); font-size: 1rem; color: var(--rb-navy); }
@media (max-width: 620px) { .rb-media__badge { left: 0; bottom: -1rem; max-width: 90%; } }

/* ==========================================================================
   7. SPLIT a due mondi (People / Business)
   ========================================================================== */
.rb-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rb-gap); }
@media (max-width: 860px) { .rb-duo { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   8. MARQUEE DIAGONALE — sfondo decorativo (rb-bg-marquee)
   Righe di riquadri che scorrono in direzioni opposte dietro al contenuto.
   Lo strato porta .rb-bg-marquee; il wrapper ruotato sta DENTRO lo strato,
   cosi' l'overflow lo taglia lo strato e non si apre scroll orizzontale.

   Divi: preset di Sezione + un Gruppo vuoto con la classe. Nessun testo qui.
   ========================================================================== */
/* Copertura piena: le carte occupano TUTTO lo sfondo, da bordo a bordo.
   La maschera laterale che stava qui (`mask-image` sfumata al 14% e all'86%)
   apriva due fasce vuote a destra e a sinistra: la leggibilita' la fa il velo
   di `::after`, non un buco nel motivo. */
.rb-bg-marquee { overflow: hidden; }

/* La sezione ospite: uno sfondo di questa ampiezza non vive in una fascia bassa.
   Va SEMPRE accompagnata da .rb-theme-dark, altrimenti i titoli restano
   --rb-ink (navy) su fondo navy e sembrano solo "spenti", senza dare errore. */
.rb-bg-marquee-host { min-height: clamp(420px, 60vh, 620px); display: grid; align-items: center; }
/* Quando l'ospite e' l'hero, l'altezza e l'impaginazione restano quelle
   dell'hero: `display: grid` e la min-height piu' bassa qui sopra vincerebbero
   per ordine di sorgente e l'hero della home tornerebbe piu' corto di tutti
   gli altri, facendo saltare l'header nel passaggio da una pagina all'altra. */
.rb-hero.rb-bg-marquee-host { display: flex; min-height: 46.5rem; }
@media (max-width: 980px) { .rb-hero.rb-bg-marquee-host { min-height: 34rem; } }

/* `inset: -28%` e non -20%: ruotando di 12 gradi i quattro angoli escono, e
   con la maschera tolta un angolo scoperto si vede. Il gap fra le righe e'
   piccolo perche' le righe devono toccarsi: e' quello che rende il motivo un
   fondo pieno invece di quattro nastri su un fondo navy. */
.rb-bg-marquee .rb-marquee {
  position: absolute;
  inset: -28%;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.4rem, 0.6vw, 0.6rem);
  transform: rotate(-12deg);
}

/* Andature lente: lo sfondo sta dietro a un testo che va letto, non deve
   tirare l'occhio. Sotto i 60s diventa fastidioso. */
.rb-bg-marquee .rb-marquee__track {
  display: flex;
  width: max-content;
  animation: rb-marquee 90s linear infinite;
  will-change: transform;
}
.rb-bg-marquee .rb-marquee__track:nth-child(1) { animation-duration: 78s; }
.rb-bg-marquee .rb-marquee__track:nth-child(2) { animation-duration: 104s; }
.rb-bg-marquee .rb-marquee__track:nth-child(3) { animation-duration: 90s; }
.rb-bg-marquee .rb-marquee__track:nth-child(4) { animation-duration: 118s; }
.rb-bg-marquee .rb-marquee__track:nth-child(5) { animation-duration: 84s; }
.rb-bg-marquee .rb-marquee__track:nth-child(6) { animation-duration: 112s; }
.rb-bg-marquee .rb-marquee__track:nth-child(7) { animation-duration: 96s; }
.rb-bg-marquee .rb-marquee__track:nth-child(8) { animation-duration: 124s; }
.rb-bg-marquee .rb-marquee__track:nth-child(9) { animation-duration: 82s; }
.rb-bg-marquee .rb-marquee__track:nth-child(even) { animation-direction: reverse; }

/* Il gruppo e' la meta' ripetuta: il gap sta DENTRO il gruppo e il
   padding-right chiude l'ultimo spazio. E' questo che rende esatto il -50%
   della keyframe: senza, ogni giro salta di mezzo gap. */
.rb-bg-marquee .rb-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.8vw, 0.85rem);
  padding-right: clamp(0.5rem, 0.8vw, 0.85rem);
}

/* ALTEZZA FISSA, larghezza derivata: e' cio' che tiene le righe dritte anche
   se foto (3:2) e carte (1012:638) hanno rapporti diversi. */
.rb-bg-marquee .rb-marquee__card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: clamp(120px, 13vw, 190px);
  width: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--rb-r);
  border: 1px solid var(--rb-on-dark-line);
  background: linear-gradient(140deg, var(--rb-orange-soft), var(--rb-people-soft) 52%, var(--rb-business-soft));
  box-shadow: var(--rb-shadow-sm);
  overflow: hidden;
}
.rb-bg-marquee .rb-marquee__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(160deg, transparent 52%, rgba(24, 49, 83, 0.22));
  pointer-events: none;
}
.rb-bg-marquee .rb-marquee__card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* La carta Reibanq riempie il riquadro come una foto: stessa altezza, nessun
   bordo e nessun velo sopra, altrimenti il materiale ufficiale si spegne.
   Il rapporto e' quello vero della carta, quindi il riquadro esce un filo piu'
   largo ma alto uguale: le righe restano dritte. */
.rb-bg-marquee .rb-marquee__card--mockup {
  aspect-ratio: 1012 / 638;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.rb-bg-marquee .rb-marquee__card--mockup::after { content: none; }
.rb-bg-marquee .rb-marquee__card--mockup img {
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.42));
}

/* Velo di leggibilita': la maschera sfuma solo ai lati, al centro i riquadri
   passerebbero sotto al testo. Concentrato a sinistra, dove sta la colonna. */
.rb-bg-marquee::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Overlay di sezione, da sinistra verso destra: copre da bordo a bordo,
     quindi non ha una scatola e non puo' mostrare la riga del proprio bordo —
     e' il difetto che aveva il velo locale dietro al testo, visibile sui
     desktop grandi dove il gradiente veniva tagliato dal riquadro.
     La parte piena arriva fino al 56%, che e' dove finisce la colonna di
     testo a 1280px; oltre si apre in fretta e le carte tornano nitide. */
  background:
    linear-gradient(100deg, rgba(11, 26, 46, 0.74) 0%, rgba(11, 26, 46, 0.72) 32%,
                            rgba(11, 26, 46, 0.64) 56%, rgba(11, 26, 46, 0.26) 82%,
                            rgba(11, 26, 46, 0.06) 100%),
    linear-gradient(180deg, rgba(11, 26, 46, 0.18), transparent 30%, rgba(11, 26, 46, 0.18));
}

/* Il paragrafo e' l'unica cosa che faticava: bianco al 74%, contro il titolo
   che e' bianco pieno. Qui va a bianco pieno — costa niente e toglie meta' del
   lavoro al velo, che cosi' puo' restare leggero. */
.rb-bg-marquee-host .rb-lede { color: #fff; }

@media (max-width: 768px) {
  /* Le righe NON si nascondono piu': nasconderne quattro lasciava scoperto
     mezzo sfondo, che e' proprio quello che questa versione deve evitare.
     Si rimpiccioliscono le carte, cosi' ci stanno tutte e sei. */
  .rb-bg-marquee .rb-marquee__track:nth-child(1) { animation-duration: 130s; }
  .rb-bg-marquee .rb-marquee__track:nth-child(2) { animation-duration: 160s; }
  .rb-bg-marquee .rb-marquee__track:nth-child(3) { animation-duration: 140s; }
  .rb-bg-marquee .rb-marquee__track:nth-child(4) { animation-duration: 172s; }
  .rb-bg-marquee .rb-marquee__track:nth-child(5) { animation-duration: 136s; }
  .rb-bg-marquee .rb-marquee__track:nth-child(6) { animation-duration: 166s; }
  .rb-bg-marquee .rb-marquee__track:nth-child(7) { animation-duration: 144s; }
  .rb-bg-marquee .rb-marquee__track:nth-child(8) { animation-duration: 178s; }
  .rb-bg-marquee .rb-marquee__track:nth-child(9) { animation-duration: 132s; }
  .rb-bg-marquee .rb-marquee { gap: 0.35rem; }
  .rb-bg-marquee .rb-marquee__group { gap: 0.35rem; padding-right: 0.35rem; }
  .rb-bg-marquee .rb-marquee__card { height: clamp(84px, 22vw, 118px); }
  /* su mobile il testo occupa tutta la larghezza: il velo copre ovunque */
  .rb-bg-marquee::after {
    background: linear-gradient(180deg, rgba(11, 26, 46, 0.66), rgba(11, 26, 46, 0.74));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rb-bg-marquee .rb-marquee__track { animation: none; will-change: auto; }
}

/* ==========================================================================
   9. CARTA CHE SI GIRA — fronte e retro (rb-flip)
   Usata nella pagina Debit cards. Nessun JavaScript.

   Tre modi di girarla, perche' "hover" da solo escluderebbe meta' del
   pubblico: passaggio del mouse dove c'e' un mouse, tastiera via
   :focus-within, e rotazione automatica sfalsata dove il mouse non c'e'.

   Divi: modulo Codice per il markup della carta, oppure due moduli Immagine
   dentro un Gruppo con la classe. Nessun testo di prodotto qui dentro.
   ========================================================================== */
.rb-flip {
  perspective: 1600px;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
}
/* Il markup porta tabindex="0": senza, :focus-within non ha nulla su cui
   scattare e il retro resterebbe raggiungibile solo col puntatore. */
.rb-flip:focus-visible {
  outline: 2px solid var(--rb-orange);
  outline-offset: 8px;
  border-radius: 20px;
}
.rb-flip__inner {
  position: relative;
  aspect-ratio: 1012 / 638;
  transform-style: preserve-3d;
  transition: transform 900ms var(--rb-ease);
  will-change: transform;
}
.rb-flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--rb-shadow-xl);
}
.rb-flip__face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rb-flip__face--back { transform: rotateY(180deg); }

/* Dove c'e' un mouse: si gira al passaggio. Il :focus-within fa la stessa cosa
   da tastiera, altrimenti il retro sarebbe raggiungibile solo col puntatore. */
@media (hover: hover) {
  .rb-flip:hover .rb-flip__inner,
  .rb-flip:focus-within .rb-flip__inner { transform: rotateY(180deg); }
}

/* Dove NON c'e' un mouse (telefono, tablet): gira da sola, sfalsata fra le tre
   carte, cosi' non sembrano un unico blocco che lampeggia. */
@media (hover: none) {
  .rb-flip__inner { animation: rb-flip-auto 11s var(--rb-ease-inout) infinite; }
  .rb-flip:nth-of-type(2) .rb-flip__inner { animation-delay: 1.6s; }
  .rb-flip:nth-of-type(3) .rb-flip__inner { animation-delay: 3.2s; }
}
@keyframes rb-flip-auto {
  0%, 38%   { transform: rotateY(0); }
  50%, 88%  { transform: rotateY(180deg); }
  100%      { transform: rotateY(0); }
}

/* Ingresso della pila nell'hero: le due carte arrivano da sotto ruotando.
   Solo transform e opacity, quindi niente ricalcolo di layout. */
.rb-cardstack--enter .rb-cardstack__item {
  animation: rb-card-in 1100ms var(--rb-ease) backwards;
}
.rb-cardstack--enter .rb-cardstack__item--front { animation-delay: 220ms; }
@keyframes rb-card-in {
  from { opacity: 0; transform: translate3d(0, 42px, 0) rotate(-2deg) scale(0.94); }
}

/* Fila di funzioni con la linea che si riempie al passaggio. */
.rb-feat { position: relative; padding-block: 0.25rem; }
.rb-feat::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--rb-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--rb-ease);
}
.rb-feat:hover::after, .rb-feat:focus-within::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .rb-flip__inner { animation: none; transition: none; }
  .rb-cardstack--enter .rb-cardstack__item { animation: none; }
  .rb-feat::after { transition: none; }
  /* Da fermi il retro non deve restare inaccessibile: le due facce escono dal
     3D e si impilano, cosi' si vedono entrambe senza che niente si muova. */
  .rb-flip__inner {
    transform: none;
    transform-style: flat;
    aspect-ratio: auto;
    display: grid;
    gap: 0.75rem;
  }
  .rb-flip__face {
    position: static;
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
}


/* ==========================================================================
   Reibanq - Racconto a scorrimento
   Trattamento portato da 21st.dev, "Interactive Scrolling Story Component"
   di @minhxthanh. Nell'originale lo scorrimento sta dentro un contenitore
   suo, alto quanto lo schermo: qui scorre la pagina e il pannello resta
   fermo con `position: sticky`, perche' un secondo scorrimento dentro la
   pagina ruba la rotellina e rompe la tastiera.

   Fondo CHIARO: sopra c'e' il pricing scuro e sotto la sezione calda, quindi
   il racconto e' la pausa bianca fra i due. Del modello resta l'impianto,
   non il giallo.

   Le distanze sono una scala sola, `--rb-story-rit`, cosi' i vuoti fra
   occhiello, titolo, barrette, passo e bottone restano in proporzione a
   ogni misura di schermo.
   ========================================================================== */

.rb-story {
  --rb-story-rit: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  position: relative;
  background-color: var(--rb-surface);
}

/* Senza JavaScript `is-ready` non arriva: niente sticky, niente altezze
   finte, i tre passi restano uno sotto l'altro e si leggono tutti. */
.rb-story__track { padding-block: var(--rb-section-y); }
.rb-story.is-ready .rb-story__track {
  height: calc(var(--rb-story-passi, 3) * 100vh);
  padding-block: 0;
}

.rb-story__panel { position: relative; }
.rb-story.is-ready .rb-story__panel {
  position: sticky;
  top: var(--rb-header-h-sticky);
  height: calc(100vh - var(--rb-header-h-sticky));
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* La larghezza la da' `.rb-container`, come nel resto della pagina: qui si
   dichiara solo la griglia, mai una larghezza propria. */
.rb-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--rb-story-rit) * 1.5);
}

@media (min-width: 900px) {
  .rb-story__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.rb-story__side { position: relative; }
.rb-story__head { margin: calc(var(--rb-story-rit) * 0.4) 0 0; }

/* --- Le barrette del passo ---------------------------------------------- */
.rb-story__bars {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--rb-story-rit);
}

.rb-story__bar {
  width: 26px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--rb-r-pill);
  background: rgba(24, 49, 83, 0.18);
  cursor: pointer;
  transition: width var(--rb-t) var(--rb-ease), background-color var(--rb-t) var(--rb-ease);
}

.rb-story__bar.is-current {
  width: 52px;
  background: var(--rb-orange);
}

/* --- I passi ------------------------------------------------------------
   Con `is-ready` i tre passi si sovrappongono e si scambiano in dissolvenza,
   quindi il blocco deve avere un'altezza sua: la da' il passo piu' lungo,
   che resta nel flusso invisibile invece di essere tolto. */
.rb-story__slides { margin-top: calc(var(--rb-story-rit) * 1.5); }

.rb-story.is-ready .rb-story__slides {
  position: relative;
  display: grid;
}

.rb-story.is-ready .rb-story__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(1.5rem);
  visibility: hidden;
  transition: opacity var(--rb-t-slow) var(--rb-ease),
              transform var(--rb-t-slow) var(--rb-ease);
}

.rb-story.is-ready .rb-story__slide.is-current {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.rb-story__slide + .rb-story__slide { margin-top: calc(var(--rb-story-rit) * 1.5); }
.rb-story.is-ready .rb-story__slide + .rb-story__slide { margin-top: 0; }

.rb-story__num {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--rb-orange-deep);
  margin-bottom: calc(var(--rb-story-rit) * 0.5);
}

.rb-story__slide h3 {
  font-family: var(--rb-font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: var(--rb-lh-tight);
  color: var(--rb-ink);
  margin: 0 0 calc(var(--rb-story-rit) * 0.6);
}

.rb-story__slide p {
  font-size: var(--rb-body-lg);
  line-height: var(--rb-lh-body);
  color: var(--rb-body);
  max-width: 40ch;
  margin: 0;
}

.rb-story__cta { margin-top: calc(var(--rb-story-rit) * 1.5); }

/* --- La cornice a destra ------------------------------------------------
   La bobina e' alta tre volte la cornice e scorre di un terzo per volta:
   una traslazione sola, nessuna immagine che entra ed esce. */
.rb-story__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rb-story-rit);
  border-radius: var(--rb-r-lg);
  /* Nessun fondo: le tre schermate del racconto stanno direttamente sulla
     pagina. Il riquadro grigio e la griglia a velo che c'erano qui facevano
     una scatola dentro la scatola, visto che il frame ha gia' il suo bordo e
     la sua ombra. */
  overflow: hidden;
}

.rb-story__frame {
  position: relative;
  z-index: 1;
  width: min(340px, 72%);
  aspect-ratio: 3 / 4;
  border-radius: var(--rb-r-lg);
  overflow: hidden;
  box-shadow: var(--rb-shadow-lg);
  border: 1px solid var(--rb-line);
}

.rb-story__reel {
  display: grid;
  grid-auto-rows: 100%;
  height: 100%;
  transition: transform var(--rb-t-slow) var(--rb-ease);
  will-change: transform;
}

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

/* Sotto i 900px la cornice va sopra il testo e si misura sull'ALTEZZA dello
   schermo, non sulla larghezza: il pannello e' alto quanto la finestra e il
   passo deve starci sotto. */
@media (max-width: 899px) {
  .rb-story__stage { order: -1; }
  .rb-story__slide p { max-width: none; }
  .rb-story__slide h3 { font-size: clamp(1.5rem, 5.5vw, 2rem); }
  .rb-story__frame {
    width: auto;
    height: min(30vh, 260px);
  }
}

/* Tablet in verticale: il pannello e' alto quasi mille pixel e la cornice
   piccola ci galleggia dentro. Qui si puo' allargare. */
@media (min-width: 600px) and (max-width: 899px) {
  .rb-story__frame { height: min(38vh, 360px); }
}

/* Schermi larghi: la cornice cresce, perche' accanto a mezzo container di
   testo una fotografia da 340px sembra un francobollo. */
@media (min-width: 1200px) {
  .rb-story__frame { width: min(400px, 78%); }
}

/* Telefoni bassi (375x667 e simili): il pannello ha meno di 600px utili e
   la somma di cornice, passo e bottone li supera. Si stringe tutto insieme,
   ritmo compreso, invece di tagliare il bottone. */
@media (max-width: 899px) and (max-height: 720px) {
  .rb-story { --rb-story-rit: 0.75rem; }
  .rb-story__frame { height: min(22vh, 170px); }
  .rb-story__slide h3 { font-size: clamp(1.25rem, 4.6vw, 1.5rem); }
  .rb-story__slide p { font-size: var(--rb-small); }
}

/* Schermi bassi: quel che avanza verrebbe tagliato, quindi si stringono
   cornice e titoli invece di lasciarli fuori. */
@media (min-width: 900px) and (max-height: 760px) {
  .rb-story { --rb-story-rit: 0.875rem; }
  .rb-story__frame { width: min(260px, 62%); }
  .rb-story__slide h3 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
}

@media (prefers-reduced-motion: reduce) {
  .rb-story__bar,
  .rb-story.is-ready .rb-story__slide,
  .rb-story__reel { transition: none; }
}

/* ==========================================================================
   HERO A SCORRIMENTO — il finto schermo che si raddrizza (rb-scrollframe)
   Trattamento portato da 21st.dev, "Container Scroll Animation" di
   @manuarora700. L'originale e' React piu' Framer Motion: qui i due estremi
   stanno nelle custom property, l'interpolazione la fa `calc()` e il
   JavaScript scrive solo l'avanzamento in `--rb-scroll-avanz`.

   Lo scorrimento e' quello della PAGINA, non di un contenitore interno: un
   secondo scorrimento dentro la pagina ruba la rotellina e rompe la tastiera.
   Senza JavaScript la classe `is-ready` non arriva e il riquadro resta
   dritto, in scala 1, leggibile.
   ========================================================================== */
/* -------------------------------------------------- Hero a scorrimento
   Il tablet si raddrizza mentre si scorre.                                */

/* Hero chiaro: la griglia sfumata di fine pagina a colori rovesciati, cioe'
   il filo grigio-navy che `rb-bg-grid` ha gia' come valore di partenza, su
   fondo chiaro invece che sul navy. Il testo torna ai colori del tema chiaro
   e il corpo si scurisce di un gradino: sotto un titolo navy pieno, il grigio
   corrente di 7,1:1 sembrava sbiadito. */
.rb-hero--light {
  background: var(--rb-surface-alt);
  --rb-body: #33445c;
  color: var(--rb-body);
}
.rb-hero--light .rb-trust__item { color: var(--rb-navy); }
.rb-hero--light .rb-trust__item svg { color: var(--rb-orange-deep); }

.rb-hero--scroll {
  /* Piu' inclinato del modello: il tablet si vede di scorcio da sotto e si
     raddrizza scorrendo. Oltre i ~35 gradi il lato basso, che viene verso
     chi guarda, si proietta piu' largo del contenitore. */
  --rb-scroll-rot: 34deg;
  --rb-scroll-scala-da: 1.05;
  --rb-scroll-scala-a: 1;
  --rb-scroll-tras: -100px;
  --rb-scroll-avanz: 0;
  align-items: flex-start;
  /* L'altezza e' finestra piu' corsa: con un tetto in rem, su una finestra
     alta il tetto vinceva e la corsa scendeva a una decina di pixel, cioe' il
     riquadro passava dallo scorcio alla posizione dritta di colpo.
     I 46,5rem sono l'altezza comune di tutti gli hero e restano il minimo. */
  min-height: max(46.5rem, calc(100svh + 18rem));
}
@media (max-width: 980px) {
  .rb-hero--scroll {
    min-height: max(34rem, calc(100svh + 10rem));
  }
}

.rb-scrollframe {
  /* 1600px e non i 1000px del modello: piu' lontano l'occhio, meno si apre lo
     scorcio. Con l'inclinazione portata a 34 gradi, a 1200 il lato basso si
     proiettava un terzo piu' largo della cornice e usciva dai fianchi sotto i
     1100px di finestra; a 1600 si allarga di un quarto e rientra sempre. */
  perspective: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rb-scrollframe__lead {
  width: 100%;
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
  transform: translate3d(0, 0, 0);
}
/* Il blocco e' centrato: la lede ha una `max-width` in ch e senza margine
   automatico resterebbe incollata a sinistra dentro un testo centrato. */
.rb-scrollframe__lead .rb-hero__lede { margin-inline: auto; }
.rb-scrollframe__lead .rb-trust { justify-content: center; }

.rb-hero--scroll.is-ready .rb-scrollframe__lead {
  transform: translate3d(0, calc(var(--rb-scroll-tras) * var(--rb-scroll-avanz)), 0);
}

.rb-scrollframe__card {
  /* Il lato basso, ruotato verso chi guarda, si proietta piu' largo del
     riquadro: a 34 gradi di inclinazione si allarga di un quarto, e i 68vw
     sono la larghezza che lascia rientrare anche la proiezione. A 74vw, su
     una finestra da 1024, restavano sette pixel per parte. */
  width: min(100%, 68vw);
  /* Il PNG e' largo 800: oltre questa misura la schermata del backoffice
     dentro il vetro si ingrandisce e i suoi caratteri si impastano. */
  max-width: 52rem;
  /* Sotto il testo, staccato: prima saliva di 3rem a sovrapporsi.
     Il margine in basso non e' decorazione: inclinato, il lato basso si
     proietta piu' in giu' della scatola di impaginazione, e senza quello
     spazio l'hero, che taglia cio' che esce, gli mangiava il bordo. */
  margin: clamp(2rem, 1rem + 3vw, 4rem) auto clamp(1.5rem, 0.5rem + 2vw, 3rem);
  /* La cornice non e' disegnata col CSS: e' il mockup dell'iPad, con dentro
     la schermata del backoffice. Non ci va ne' fondo ne' bordo ne' raggio,
     che sono gia' nell'immagine. */
  position: relative;
  aspect-ratio: 800 / 578;
  /* L'ombra e' piu' chiara di quella di prima: il fondo qui non e' navy. */
  filter: drop-shadow(0 24px 44px rgb(24 49 83 / 0.28));
  transform-origin: top center;
  transform: rotateX(0) scale(1);
  will-change: transform;
}

.rb-scrollframe__device {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.rb-hero--scroll.is-ready .rb-scrollframe__card {
  transform: rotateX(calc(var(--rb-scroll-rot) * (1 - var(--rb-scroll-avanz)))) scale(calc(var(--rb-scroll-scala-da) + (var(--rb-scroll-scala-a) - var(--rb-scroll-scala-da)) * var(--rb-scroll-avanz)));
}
@media (max-width: 767px) {
  /* Sul telefono la cornice e' larga quanto il contenitore: a scala piena il
     lato basso, proiettato, arriverebbe a filo della finestra, quindi si
     ferma a 0,94. */
  .rb-hero--scroll {
    --rb-scroll-scala-da: 0.8;
    --rb-scroll-scala-a: 0.94;
  }
  /* I 74vw servono a lasciar rientrare la proiezione di una cornice alta:
     questa e' bassa, e a 74vw il vetro diventa cosi' piccolo che il
     contenuto non ci sta. */
  .rb-scrollframe__card {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rb-hero--scroll.is-ready .rb-scrollframe__lead {
    transform: translate3d(0, 0, 0);
  }
  .rb-hero--scroll.is-ready .rb-scrollframe__card {
    transform: rotateX(0) scale(1);
  }
}