/* ==========================================================================
   NEXO AGENT — il progetto della pagina /agents.html
   --------------------------------------------------------------------------
   Stessa disciplina del resto del sito:

     - lo sfondo NON è qui: è la shell condivisa (nexo-shell.css), carta
       chiara con reticolato; le sezioni sono trasparenti;
     - i momenti forti (ero, trasparenza, cta finale) sono bande scure
       navy che poggiano sulla carta, come i capitoli di un documento;
     - il fallback statico è la condizione di partenza: nessun contenuto
       è nascosto nel CSS, ogni animazione nasce da agents.js e sotto
       prefers-reduced-motion la pagina resta identica;
     - niente nuova tinta: si usano i toni del brand (viola, lilla, cyan
       come accento). Il cyan non porta testo su bianco, mai.

   Il design delle box: pannelli "tech" — vetro bianco, filo sopra che si
       accende al passaggio, icone in capsula, spazi larghi. Niente
       finestre di sistema qui: quella è la lingua della pagina Dot.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Correzione al template: `header { position: absolute; height: 80px }`
   (templatemo, righe 234-244) vale per ogni <header>, incluse le testate
   di sezione. L'altezza fissa tagliava il testo delle testate, che
   finiva sotto le box successive: si torna al flusso e all'altezza reale.
   -------------------------------------------------------------------------- */
main header { position: static; height: auto; }

/* --------------------------------------------------------------------------
   Token
   -------------------------------------------------------------------------- */
:root {
  --ag-ink:     #0B1220;
  --ag-ink-2:   #2C3350;
  --ag-mut:     #5A5F7E;
  --ag-line:    #DEDAEF;
  --ag-brand:   #6D28D9;
  --ag-brand-d: #4C1D95;
  --ag-lilac:   #A78BFA;
  --ag-cyan:    #4AA3FF;
  --ag-mast:    #0F172A;
  --ag-mast-2:  #0A1220;
  --ag-paper:   #FFFFFF;
  --ag-max:     1200px;
  --ag-r:       16px;
  --ag-r-lg:    22px;
  --ag-shadow:  0 1px 2px rgba(11,18,32,.04), 0 12px 32px -18px rgba(11,18,32,.16);
  --ag-lift:    0 2px 4px rgba(11,18,32,.05), 0 26px 54px rgba(11,18,32,.16);
  --ag-panel:   linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.68) 100%);
}

/* --------------------------------------------------------------------------
   Impianto comune
   -------------------------------------------------------------------------- */
.ag-kicker {
  display: inline-block;
  margin: 0 0 14px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ag-brand);
}

/* --- pulsanti (compresi quelli dentro le bande scure) -------------------- */
.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .25s ease, transform .25s ease;
}
.ag-btn:focus-visible { outline: 2px solid var(--ag-brand); outline-offset: 3px; }
.ag-btn--p {
  background: var(--ag-brand); color: #fff;
  box-shadow: 0 10px 24px -12px rgba(109, 40, 217, .8);
}
.ag-btn--p:hover { background: var(--ag-brand-d); color: #fff; transform: translateY(-2px); }
.ag-btn--g {
  background: rgba(255,255,255,.82); color: var(--ag-ink);
  border-color: var(--ag-line);
}
.ag-btn--g:hover { background: #fff; border-color: var(--ag-ink); color: var(--ag-ink); }

/* dentro le bande scure il pulsante secondario cambia pelle */
.agt .ag-btn--g, .agc .ag-btn--g {
  background: rgba(255,255,255,.08); color: #EDEBFA;
  border-color: rgba(167,139,250,.35);
}
.agt .ag-btn--g:hover, .agc .ag-btn--g:hover {
  background: rgba(255,255,255,.14); border-color: var(--ag-lilac); color: #fff;
}

/* --- il pannello tech: il mattone delle box chiare ------------------------
   Vetro bianco, filo superiore che si accende, capsula per l'icona.
   È il solo componente: niente bordi doppi, niente ombre doppie. */
.agp__item, .ags__cell, .agw__item, .agv__step, .agf__item {
  position: relative;
  background: var(--ag-panel);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-r);
  box-shadow: var(--ag-shadow);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .25s ease, transform .22s ease;
}
.agp__item::before, .ags__cell::before, .agw__item::before, .agv__step::before, .agf__item::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(109,40,217,.6) 30%, rgba(74,163,255,.5) 70%, transparent 100%);
  opacity: 0;
  transition: opacity .25s ease;
}
.agp__item:hover, .ags__cell:hover, .agw__item:hover, .agv__step:hover { transform: translateY(-3px); }
.agp__item:hover, .ags__cell:hover, .agw__item:hover, .agv__step:hover, .agf__item:hover { border-color: rgba(109,40,217,.32); box-shadow: var(--ag-lift); }
.agp__item:hover::before, .ags__cell:hover::before, .agw__item:hover::before, .agv__step:hover::before, .agf__item:hover::before { opacity: 1; }

/* ==========================================================================
   1 · ERO — banda scura
   ========================================================================== */
.agx {
  margin-top: 24px;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(109,40,217,.38) 0%, rgba(109,40,217,0) 55%),
    radial-gradient(90% 70% at 8% 110%, rgba(74,163,255,.16) 0%, rgba(74,163,255,0) 55%),
    linear-gradient(180deg, var(--ag-mast) 0%, var(--ag-mast-2) 100%);
  color: #F4F3FC;
  border-radius: var(--ag-r-lg);
}
.agx__wrap { max-width: var(--ag-max); margin: 0 auto; padding: 60px 24px; }
@media (max-width: 767px) { .agx { margin-top: 12px; border-radius: var(--ag-r); } .agx__wrap { padding: 36px 18px; } }

.agx__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 60px;
  align-items: center;
}
@media (max-width: 991px) { .agx__grid { grid-template-columns: 1fr; gap: 40px; } }

.agx__kicker {
  margin: 0 0 16px;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ag-lilac);
}
.agx__title {
  margin: 0 0 20px;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -.03em;
  color: #fff;
  max-width: 17ch;
}
.agx__title em { font-style: normal; color: var(--ag-lilac); }
.agx__lede {
  margin: 0 0 28px;
  font-size: 1.08rem;
  line-height: 1.62;
  color: #C9C4E8;
  max-width: 52ch;
}
.agx__lede strong { color: #fff; font-weight: 600; }
.agx__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.agx__cta .ag-btn--p { background: #fff; color: var(--ag-brand-d); box-shadow: 0 14px 30px -14px rgba(255,255,255,.45); }
.agx__cta .ag-btn--p:hover { background: #F1EDFE; color: var(--ag-brand-d); }
.agx__proof {
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  margin: 0; padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid rgba(167,139,250,.22);
}
.agx__proof li { display: flex; align-items: baseline; gap: 8px; font-size: .87rem; color: #B9B2DE; }
.agx__proof b { font-size: 1.28rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }

/* --- la figura dell'ero --------------------------------------------------- */
.agx__fig {
  position: relative;
  margin: 0;
  border-radius: var(--ag-r-lg);
  overflow: hidden;
  border: 1px solid rgba(167,139,250,.28);
  box-shadow: 0 2px 0 rgba(255,255,255,.05) inset, 0 48px 100px -36px rgba(0,0,0,.65);
  will-change: transform;
}
.agx__fig img { display: block; width: 100%; height: auto; }
.agx__fig::after {
  /* un filo di luce interna, non un glow esterno */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  pointer-events: none;
}

/* ==========================================================================
   2 · IL PROBLEMA
   ========================================================================== */
.agp { padding: 104px 0 0; }
.agp__wrap { max-width: var(--ag-max); margin: 0 auto; padding: 0 24px; }
.agp__head { max-width: 720px; margin-bottom: 48px; }
.agp__title {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600; line-height: 1.12; letter-spacing: -.028em;
  color: var(--ag-ink);
}
.agp__lede { margin: 0; font-size: 1.06rem; line-height: 1.66; color: var(--ag-ink-2); max-width: 62ch; }

.agp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 991px) { .agp__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .agp__grid { grid-template-columns: 1fr; } }

.agp__item { padding: 26px 24px; }
.agp__ico, .agw__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(109,40,217,.09);
  border: 1px solid rgba(109,40,217,.16);
  color: var(--ag-brand);
  margin-bottom: 16px;
  font-size: 1.05rem;
}
.agp__item h3 { margin: 0 0 8px; font-size: 1.04rem; font-weight: 600; color: var(--ag-ink); }
.agp__item p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ag-mut); }

/* --- il conto delle ore ---------------------------------------------------- */
.agp__count {
  position: relative;
  margin-top: 44px;
  padding: 38px 42px;
  border-radius: var(--ag-r-lg);
  background: var(--ag-panel);
  border: 1px solid var(--ag-line);
  box-shadow: var(--ag-shadow);
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 8px 40px;
  align-items: center;
  overflow: hidden;
}
/* il righello decorativo: tacche leggere, come un pannello di misura */
.agp__count::after {
  content: "";
  position: absolute; right: 0; top: 0; bottom: 0; width: 84px;
  background:
    repeating-linear-gradient(180deg, transparent 0 17px, rgba(109,40,217,.14) 17px 18px),
    linear-gradient(90deg, transparent 0%, rgba(109,40,217,.05) 100%);
  pointer-events: none;
}
@media (max-width: 767px) { .agp__count { grid-template-columns: 1fr; padding: 28px 24px; } .agp__count::after { display: none; } .agp { padding-top: 64px; } }
.agp__count-label {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ag-mut);
}
.agp__count-num { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.03em; color: var(--ag-ink); font-variant-numeric: tabular-nums; }
.agp__count-num b { color: var(--ag-brand); font-weight: 600; }
.agp__count-note { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ag-ink-2); padding-right: 60px; }
@media (max-width: 767px) { .agp__count-note { padding-right: 0; } }

/* ==========================================================================
   3 · LA SOLUZIONE — bento
   ========================================================================== */
.ags { padding: 104px 0 0; }
.ags__wrap { max-width: var(--ag-max); margin: 0 auto; padding: 0 24px; }
.ags__head { max-width: 720px; margin-bottom: 48px; }
.ags__title { margin: 0 0 16px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; line-height: 1.12; letter-spacing: -.028em; color: var(--ag-ink); }
.ags__lede { margin: 0; font-size: 1.06rem; line-height: 1.66; color: var(--ag-ink-2); max-width: 62ch; }

.ags__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 18px;
}
@media (max-width: 991px) { .ags__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ags__grid { grid-template-columns: 1fr; } }

.ags__cell { padding: 28px 26px; }
.ags__cell--wide {
  grid-column: span 2;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(109,40,217,.1) 0%, rgba(109,40,217,0) 52%),
    var(--ag-panel);
  border-color: rgba(109,40,217,.24);
}
@media (max-width: 640px) { .ags__cell--wide { grid-column: span 1; } }
.ags__cell h3 { margin: 0 0 10px; font-size: 1.08rem; font-weight: 600; color: var(--ag-ink); }
.ags__cell p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ag-ink-2); }
.ags__cell--wide p { font-size: .97rem; }
.ags__badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(21,128,61,.1);
  color: #15803D;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

/* ==========================================================================
   4 · TRASPARENZA — banda chiara
   Nata come banda scura, ma il fondo scuro non e' mai stato applicato: i
   testi chiari risultavano illeggibili. Allineata ai token usati dal resto
   della pagina (--ag-ink / --ag-ink-2 / --ag-mut) su fondo chiaro.
   ========================================================================== */
.agt { padding: 104px 0 0; }
.agt__wrap { max-width: var(--ag-max); margin: 0 auto; padding: 0 24px; }
.agt__head { max-width: 720px; margin-bottom: 44px; }
.agt__kicker { margin: 0 0 14px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ag-brand); }
.agt__title { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; line-height: 1.12; letter-spacing: -.028em; color: var(--ag-ink); }

.agt__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 991px) { .agt__grid { grid-template-columns: 1fr; } }

.agt__col {
  position: relative;
  border-radius: var(--ag-r-lg);
  padding: 36px 34px;
  background: var(--ag-panel);
  border: 1px solid var(--ag-line);
  box-shadow: var(--ag-shadow);
  transition: border-color .22s ease;
}
.agt__col:hover { border-color: var(--ag-lilac); }
@media (max-width: 767px) { .agt__col { padding: 28px 22px; } }

.agt__brand { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.agt__badge-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  border-radius: 16px;
  background: rgba(109,40,217,.1);
  border: 1px solid rgba(109,40,217,.24);
  color: var(--ag-brand);
  font-size: 1.35rem;
}
.agt__brand-name { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ag-ink); }
.agt__brand-sub { margin: 2px 0 0; font-size: .82rem; color: var(--ag-mut); }

.agt__no, .agt__yes { margin: 0 0 12px; font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; color: var(--ag-ink); }
.agt__col p { margin: 0 0 16px; font-size: .97rem; line-height: 1.62; color: var(--ag-ink-2); }

.agt__list { margin: 0 0 18px; padding: 0; list-style: none; }
.agt__list li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; font-size: .98rem; color: var(--ag-ink-2); border-bottom: 1px dashed var(--ag-line); }
.agt__list li:last-child { border-bottom: 0; }
.agt__list i { color: #15803D; font-size: .85rem; }
.agt__note { margin: 0; font-size: .9rem; color: var(--ag-mut); }

/* ==========================================================================
   5 · ESEMPI D'USO
   ========================================================================== */
.age { padding: 104px 0 0; }
.age__wrap { max-width: var(--ag-max); margin: 0 auto; padding: 0 24px; }
.age__head { max-width: 720px; margin-bottom: 56px; }
.age__title { margin: 0 0 16px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; line-height: 1.12; letter-spacing: -.028em; color: var(--ag-ink); }
.age__lede { margin: 0; font-size: 1.06rem; line-height: 1.66; color: var(--ag-ink-2); max-width: 62ch; }

.age__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid var(--ag-line);
}
.age__row:first-of-type { border-top: 0; }
@media (max-width: 991px) { .age__row { grid-template-columns: 1fr; gap: 30px; padding: 36px 0; } }

.age__media {
  border-radius: var(--ag-r-lg);
  overflow: hidden;
  border: 1px solid var(--ag-line);
  box-shadow: var(--ag-lift);
}
.age__media img { display: block; width: 100%; height: auto; }

.age__num {
  margin: 0 0 10px;
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ag-brand);
}
.age__body h3 { margin: 0 0 12px; font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; color: var(--ag-ink); }
.age__text { margin: 0 0 22px; font-size: 1.0rem; line-height: 1.65; color: var(--ag-ink-2); max-width: 56ch; }

/* --- la chat disegnata in HTML ---------------------------------------------
    Nitida a ogni densità, pesa zero rispetto a uno screenshot, e resta
    leggibile anche con immagini disattive. è decorativa: il contenuto
    vero è nel testo accanto, quindi aria-hidden nel markup. */
.agchat {
  max-width: 460px;
  border-radius: var(--ag-r);
  border: 1px solid var(--ag-line);
  background: rgba(255,255,255,.85);
  box-shadow: var(--ag-shadow);
  overflow: hidden;
}
.agchat__head {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 12px 16px;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ag-mut);
  background: rgba(244,243,252,.92);
  border-bottom: 1px solid var(--ag-line);
}
.agchat__head i { color: var(--ag-brand); }
.agchat__head::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: #28C840;
  box-shadow: 0 0 8px rgba(40, 200, 64, .7);
}
.agchat__flow { margin: 0; padding: 18px 16px 20px; list-style: none; display: grid; gap: 11px; }
.agchat__msg {
  position: relative;
  padding: 11px 15px 14px;
  border-radius: 15px 15px 15px 5px;
  background: rgba(109,40,217,.09);
  color: var(--ag-ink);
  font-size: .84rem; line-height: 1.5;
  max-width: 88%;
  justify-self: start;
}
.agchat__msg--me {
  border-radius: 15px 15px 5px 15px;
  background: var(--ag-mast);
  color: #F1EDFE;
  justify-self: end;
}
.agchat__msg--alert { background: rgba(74,163,255,.16); }
.agchat__me-tag {
  padding: 9px 13px;
  border-radius: 12px;
  border: 1px dashed rgba(109,40,217,.35);
  background: transparent;
  color: var(--ag-brand-d);
  font-size: .78rem;
  justify-self: start;
  max-width: 100%;
}
/* le spunte "consegnato" sui messaggi del titolare */
.agchat__msg--me::after {
  content: "\2713\2713";
  position: absolute;
  right: 10px; bottom: 3px;
  font-size: .58rem;
  letter-spacing: -.18em;
  color: rgba(196, 250, 210, .85);
}

/* il "sta scrivendo…" prima dei messaggi dell'agente: lo aggiunge
   agents.js solo quando l'animazione può davvero girare */
.agchat__typing {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 12px 15px;
  border-radius: 15px 15px 15px 5px;
  background: rgba(109,40,217,.09);
  justify-self: start;
  visibility: hidden;
}
.agchat__typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ag-brand);
  opacity: .45;
  animation: ag-typing 1s ease-in-out infinite;
}
.agchat__typing span:nth-child(2) { animation-delay: .15s; }
.agchat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ag-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .agchat__typing span { animation: none; } }

.age__cta { display: flex; flex-wrap: wrap; gap: 14px; padding: 30px 0 8px; }

/* ==========================================================================
   6 · PER CHI È
   ========================================================================== */
.agw { padding: 104px 0 0; }
.agw__wrap { max-width: var(--ag-max); margin: 0 auto; padding: 0 24px; }
.agw__head { max-width: 720px; margin-bottom: 48px; }
.agw__title { margin: 0 0 16px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; line-height: 1.12; letter-spacing: -.028em; color: var(--ag-ink); }
.agw__lede { margin: 0; font-size: 1.06rem; line-height: 1.66; color: var(--ag-ink-2); max-width: 62ch; }

.agw__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 991px) { .agw__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .agw__grid { grid-template-columns: 1fr; } }
.agw__item { padding: 28px 24px; }
.agw__item h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 600; color: var(--ag-ink); }
.agw__item p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--ag-mut); }
.agw__note {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-radius: var(--ag-r);
  background: rgba(109,40,217,.07);
  border: 1px solid rgba(109,40,217,.16);
  font-size: .97rem; font-weight: 500;
  color: var(--ag-brand-d);
}

/* ==========================================================================
   7 · PERCORSO — la rotaia che si disegna, quattro tappe
   ========================================================================== */
.agv { padding: 104px 0 0; }
.agv__wrap { max-width: var(--ag-max); margin: 0 auto; padding: 0 24px; }
.agv__head { max-width: 720px; margin-bottom: 48px; }
.agv__title { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; line-height: 1.12; letter-spacing: -.028em; color: var(--ag-ink); }

/* la rotaia: quattro nodi legati da un filo che si accende */
.agv__rail {
  position: relative;
  height: 2px;
  margin: 0 0 26px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ag-brand) 0%, var(--ag-lilac) 55%, var(--ag-cyan) 100%);
  opacity: .5;
  transform-origin: left center;
}
.agv__rail::before, .agv__rail::after {
  content: "";
  position: absolute; top: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(109,40,217,.35);
}
.agv__rail::before { left: -1px; }
.agv__rail::after { right: -1px; }

.agv__steps {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: step;
}
@media (max-width: 991px) { .agv__steps { grid-template-columns: repeat(2, 1fr); } .agv__rail { display: none; } }
@media (max-width: 640px)  { .agv__steps { grid-template-columns: 1fr; } }
.agv__step { padding: 26px 24px; }
.agv__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ag-brand); color: #fff;
  font-size: .95rem; font-weight: 600;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.agv__step h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 600; color: var(--ag-ink); }
.agv__step p { margin: 0; font-size: .89rem; line-height: 1.58; color: var(--ag-mut); }
.agv__step a { color: var(--ag-brand); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(109,40,217,.35); }
.agv__step a:hover { color: var(--ag-brand-d); border-color: var(--ag-brand-d); }

.agv__cross {
  margin-top: 36px;
  padding: 22px 26px;
  border-radius: var(--ag-r);
  background: rgba(255,255,255,.6);
  border: 1px dashed rgba(109,40,217,.35);
  font-size: .95rem; line-height: 1.6;
  color: var(--ag-ink-2);
}
.agv__cross a { color: var(--ag-brand); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(109,40,217,.35); }
.agv__cross a:hover { color: var(--ag-brand-d); border-color: var(--ag-brand-d); }

/* ==========================================================================
   8 · FAQ
   ========================================================================== */
.agf { padding: 104px 0 0; }
.agf__wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.agf__head { margin-bottom: 36px; }
.agf__title { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; line-height: 1.12; letter-spacing: -.028em; color: var(--ag-ink); }

.agf__list { display: grid; gap: 14px; }
.agf__item { padding: 4px 24px; }
.agf__item[open] { border-color: rgba(109,40,217,.38); }
.agf__item summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 0;
  font-size: 1.0rem; font-weight: 600;
  color: var(--ag-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.agf__item summary::-webkit-details-marker { display: none; }
.agf__item summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--ag-brand); border-bottom: 2px solid var(--ag-brand);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-right: 3px;
}
.agf__item[open] summary::after { transform: rotate(225deg); margin-top: 6px; }
.agf__item summary:focus-visible { outline: 2px solid var(--ag-brand); outline-offset: 4px; border-radius: 4px; }
.agf__item p { margin: 0 0 20px; font-size: .95rem; line-height: 1.65; color: var(--ag-ink-2); }

/* ==========================================================================
   9 · CTA FINALE — banda scura
   ========================================================================== */
.agc { padding: 104px 24px 72px; }
.agc__wrap {
  max-width: var(--ag-max);
  margin: 0 auto;
  padding: 68px 40px;
  border-radius: var(--ag-r-lg);
  background:
    radial-gradient(110% 100% at 12% 0%, rgba(109,40,217,.4) 0%, rgba(109,40,217,0) 55%),
    linear-gradient(180deg, var(--ag-mast) 0%, var(--ag-mast-2) 100%);
  color: #F4F3FC;
  text-align: center;
  box-shadow: 0 40px 90px -40px rgba(11, 18, 32, .45);
}
@media (max-width: 767px) { .agc__wrap { padding: 44px 22px; } .agc { padding: 64px 18px 48px; } }
.agc__title {
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -.025em;
  color: #fff;
  max-width: 24ch;
  margin-left: auto; margin-right: auto;
}
.agc__lede { margin: 0 0 30px; font-size: 1.02rem; line-height: 1.6; color: #C9C4E8; max-width: 52ch; margin-left: auto; margin-right: auto; }
.agc__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.agc__cta .ag-btn--p { background: #fff; color: var(--ag-brand-d); box-shadow: 0 14px 30px -14px rgba(255,255,255,.45); }
.agc__cta .ag-btn--p:hover { background: #F1EDFE; color: var(--ag-brand-d); }