/* ================================================================
   Etigraph — landing page (bozza)
   Struttura: si scende lungo la linea di produzione. Sulla destra il
   nastro corre ininterrotto da una sezione all'altra, e la stazione
   montata su di esso cambia a ogni atto.
   ================================================================ */

:root{
  --blu:        #0B179C;
  --blu-chiaro: #5468ee;
  --uv:         #8b7bff;
  --notte:      #080c18;
  --notte-2:    #0e1424;
  --carta:      #f5f6f9;
  --grigio:     #8a93aa;
  --oro:        #c9a44c;
  --nero:       #101010;

  --rail-w: clamp(320px, 35vw, 500px);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(20px, 5vw, 84px);
}

*{ box-sizing:border-box; }
/* Lo scroll è quello del sistema operativo: nativo, con la sua inerzia.
   Nessun JS lo intercetta — è l'unico modo perché "sia" fluido invece
   di sembrarlo.

   La quantizzazione la fa il browser, non noi: scroll-snap aggancia
   ogni fermata a uno stato pulito usando la propria fisica. Si ottiene
   il passo scandito senza rinunciare al momentum di sistema. */
html{
  scroll-behavior:auto;
  scroll-snap-type:y mandatory;
}
/* i punti di fermata */
.hero, .numbers, .contact{ scroll-snap-align:start; }
.act{ scroll-snap-align:center; }
/* dentro le sezioni lunghe: un segnaposto per ogni stato della scena */
.snap{
  position:absolute; left:0; width:1px; height:1px;
  pointer-events:none; visibility:hidden;
  scroll-snap-align:center;
}
.reel__runway, .finale__runway, .shelf__runway{ position:relative; }

/* con meno movimento richiesto, nessun aggancio */
@media (prefers-reduced-motion: reduce){
  html{ scroll-snap-type:none; }
}
body{
  margin:0; background:var(--notte); color:var(--carta);
  font-family:var(--font); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2{ margin:0; font-weight:600; letter-spacing:-0.032em; line-height:1.03; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
b{ font-weight:600; color:#fff; }

.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grigio); font-weight:500;
}

/* ---------------- NAV ---------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad); color:var(--carta);
  transition:color .35s ease;
  isolation:isolate;
}
/* il vetro: sfoca ciò che passa sotto e sfuma verso il basso, così non
   taglia la pagina con una barra netta */
.nav::before{
  content:""; position:absolute; inset:-1px 0 0 0; z-index:-1;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  background:linear-gradient(to bottom, rgba(8,12,24,.58) 0%, rgba(8,12,24,.28) 62%, rgba(8,12,24,0) 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  pointer-events:none;
}
.nav--light{ color:var(--nero); }
.nav__brand{ display:flex; align-items:center; gap:10px; }
.nav__mark{ width:36px; height:30px; flex:0 0 auto; }
/* scendendo, il lettering si ritira e resta il solo marchio */
.nav__word{
  font-weight:600; letter-spacing:-0.02em; font-size:17px;
  overflow:hidden; white-space:nowrap; max-width:140px; opacity:1;
  transition:max-width .5s cubic-bezier(.22,.61,.36,1),
             opacity .28s ease,
             margin-left .5s cubic-bezier(.22,.61,.36,1);
}
.nav--tight .nav__word{ max-width:0; opacity:0; margin-left:-10px; }
.nav__links{ display:flex; align-items:center; gap:26px; font-size:13.5px; }
.nav__links a{ opacity:.75; transition:opacity .25s; }
.nav__links a:hover{ opacity:1; }
.nav__cta{ border:1px solid currentColor; border-radius:999px; padding:7px 16px; opacity:1 !important; }

/* "Sei un cliente?" — porta all'area riservata */
.nav__client{
  display:flex; align-items:baseline; gap:8px;
  opacity:1 !important; padding:7px 0;
}
.nav__client em{
  font-style:normal; font-size:12px; letter-spacing:.02em;
  color:rgba(255,255,255,.55);
}
.nav--light .nav__client em{ color:rgba(0,0,0,.5); }
.nav__client b{
  font-weight:600; font-size:13.5px; letter-spacing:-0.01em;
  border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:2px;
  transition:border-color .25s;
}
.nav__client:hover b{ border-color:currentColor; }
@media (max-width:1100px){ .nav__client em{ display:none; } }
@media (max-width:820px){ .nav__links a:not(.nav__cta){ display:none; } }

/* ================================================================
   IL RAIL — la linea, fissa sulla destra, continua su tutta la pagina
   ================================================================ */
.rail{
  position:fixed; top:0; right:0; z-index:20;
  width:var(--rail-w); height:100svh;
  pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity .6s ease;
  perspective:1500px;
  /* dissolvenza in alto e in basso, così la linea non finisce di netto */
  mask-image:linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
.rail--on{ opacity:1; }

/* la scena inclinata: si guarda la linea da tre quarti, leggermente dall'alto */
.rail__scene{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(7deg) rotateY(-25deg) translateZ(-30px) scale(1.2);
}
.rail__layer{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  backface-visibility:hidden;
}
/* i piani, dal fondo verso chi guarda */
.rail__layer--bg  { transform:translateZ(-120px); }
.rail__layer--web { transform:translateZ(0); }
.rail__layer--mat { transform:translateZ(38px); }
.rail__layer--st  { transform:translateZ(84px); }
.rail__defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* targhetta della stazione corrente */
.rail__tag{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:3px;
  padding:10px 0 10px 14px;
  border-left:2px solid var(--blu-chiaro);
  background:linear-gradient(90deg, rgba(8,12,24,.86), rgba(8,12,24,0));
  min-width:150px;
}
.rail__step{ font-size:10.5px; letter-spacing:.2em; color:var(--blu-chiaro); font-variant-numeric:tabular-nums; }
.rail__title{ font-size:15px; font-weight:600; letter-spacing:-0.01em; }
.rail__meta{ font-size:11.5px; color:var(--grigio); }

/* ---------------- HERO ---------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:0 var(--pad) clamp(70px,12vh,130px);
  overflow:hidden;
}
.hero__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 62%;
}
/* velo appoggiato solo dove serve leggere: la sede resta illuminata */
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(5,8,16,.9) 0%, rgba(5,8,16,.45) 34%, rgba(5,8,16,0) 66%),
    linear-gradient(to right, rgba(5,8,16,.62) 0%, rgba(5,8,16,.12) 46%, rgba(5,8,16,0) 72%);
}
.hero__body{ position:relative; max-width:min(880px, 74%); }
.hero .eyebrow{ color:rgba(255,255,255,.72); }
/* nessun titolone: il marchio l'hai appena visto grande in apertura */
.hero__line{
  font-size:clamp(24px, 3.4vw, 46px); font-weight:500;
  letter-spacing:-0.028em; line-height:1.18; margin:18px 0 0;
}
.hero__line em{ font-style:normal; color:#8ea0ff; }
.hero__scroll{
  position:absolute; left:var(--pad); bottom:26px;
  display:flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#98a1b8;
}
.hero__scroll svg{ width:11px; height:26px; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.45 } 50%{ transform:translateY(6px); opacity:1 } }

/* ================================================================
   IL REEL — il momento della stampa. Il filmato avanza con lo scroll:
   niente autoplay, è la mano dell'utente a muovere la pellicola.
   ================================================================ */
.reel{ position:relative; z-index:40; background:#05070e; }
.reel__runway{ height:300vh; }
.reel__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
}
.reel__poster,
.reel__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  filter:saturate(.82) contrast(1.08) brightness(.92);
}
.reel__poster{ transition:opacity .3s ease; }
.reel__grade{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 78% 68% at 50% 50%, transparent 32%, rgba(3,5,12,.82) 100%),
    linear-gradient(to top, rgba(3,5,12,.9) 0%, transparent 34%),
    linear-gradient(to bottom, rgba(3,5,12,.72) 0%, transparent 26%);
}
.reel__beats{
  position:relative; width:100%; max-width:1180px;
  padding:0 var(--pad); pointer-events:none;
}
.beat{
  position:absolute; left:var(--pad); bottom:0;
  transform:translateY(26px); opacity:0;
  font-size:clamp(30px, 5.2vw, 78px); font-weight:600;
  letter-spacing:-0.035em; line-height:1.02;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.beat--on{ opacity:1; transform:translateY(0); }

/* HUD: dà il tono da macchina da presa senza fare scenografia */
.reel__hud{
  position:absolute; left:var(--pad); right:var(--pad); bottom:26px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums;
}
.reel__bar{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.12);
}
.reel__bar i{ display:block; height:100%; width:0; background:var(--blu-chiaro); }

@media (max-width:900px){
  .reel__runway{ height:260vh; }
  .beat{ font-size:clamp(26px,7.4vw,44px); }
}

/* ---------------- GLI ATTI ---------------- */
main{ position:relative; }
.act{
  min-height:100svh;
  display:flex; align-items:center;
  justify-content:center;                  /* il blocco sta al centro dello spazio libero */
  padding-top:clamp(96px,14vh,150px);      /* la nav non deve mai coprire il titolo */
  padding-bottom:clamp(70px,10vh,120px);
  padding-left:var(--pad);
  padding-right:calc(var(--rail-w) + clamp(20px,3vw,56px));
}
.act__inner{ width:min(620px, 100%); }
.act__kicker{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grigio); display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.act__kicker span{
  color:var(--blu-chiaro); font-variant-numeric:tabular-nums;
  border:1px solid rgba(84,104,238,.45); border-radius:3px; padding:3px 7px;
  letter-spacing:.12em;
}
.act__title{ font-size:clamp(30px, 4.4vw, 62px); }
.act__lead{
  margin-top:20px; font-size:clamp(14.5px,1.15vw,17px); line-height:1.62;
  color:#a7b0c6; max-width:52ch;
}
.act--intro .act__lead{ font-size:clamp(15px,1.25vw,19px); }

.act__fig{ margin:clamp(28px,4vh,46px) 0 0; }
.act__fig img{
  width:100%; max-width:480px; aspect-ratio:16/10; object-fit:cover; display:block;
  border-radius:2px; filter:saturate(.85) contrast(1.04);
}
.act__fig figcaption{
  margin-top:12px; font-size:12px; color:#7c85a0; letter-spacing:.01em;
}

/* diagramma della sezione del laminato */
.diagram{ width:100%; max-width:480px; margin-top:clamp(26px,4vh,44px); display:block; }

/* ================================================================
   FINALE — l'etichettatura. La bottiglia entra da sinistra, l'etichetta
   viene incollata, poi si cambiano le finiture. Tutto a pose: lo scroll
   sceglie il fermo immagine, il passaggio è un'animazione a tempo.
   ================================================================ */
.finale{
  position:relative; z-index:30;
  background:radial-gradient(ellipse 70% 60% at 42% 50%, #141c33 0%, var(--notte) 74%);
}
.finale__runway{ height:420vh; }
.finale__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(20px,4vw,72px); padding:0 var(--pad);
}
.bot{ width:min(58%, 860px); height:auto; flex:0 0 auto; will-change:transform; }
.bot__label{ will-change:opacity; }

.finale__hud{ width:min(360px, 34%); flex:0 0 auto; }
.finale__title{
  font-size:clamp(26px,3.4vw,50px); margin:12px 0 26px;
  letter-spacing:-0.032em; line-height:1.04;
}
.finish{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.12); }
.finish li{
  display:flex; flex-direction:column; gap:2px;
  padding:13px 0 13px 16px; border-bottom:1px solid rgba(255,255,255,.12);
  border-left:2px solid transparent;
  opacity:.34; transition:opacity .45s ease, border-color .45s ease, padding-left .45s ease;
}
.finish li b{ font-size:15px; font-weight:600; letter-spacing:-0.01em; }
.finish li span{ font-size:12px; color:var(--grigio); }
.finish li.is-on{ opacity:1; border-left-color:var(--blu-chiaro); padding-left:20px; }

/* ================================================================
   LO SCAFFALE — i lavori veri, uno alla volta
   ================================================================ */
.shelf{ position:relative; z-index:30; background:var(--notte-2); }
.shelf__runway{ height:340vh; }
.shelf__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(26px,4.4vh,56px);
}
.shelf__head{ padding:0 var(--pad); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.shelf__head h2{ font-size:clamp(28px,4vw,54px); margin-top:12px; }
.shelf__count{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--grigio);
  font-variant-numeric:tabular-nums; white-space:nowrap; padding-bottom:6px;
}
.shelf__count b{ color:var(--carta); font-weight:600; }

.shelf__track{
  display:flex; gap:clamp(18px,2.2vw,38px);
  padding-left:var(--pad); will-change:transform;
}
.shelf__track figure{
  margin:0; width:clamp(260px, 29vw, 420px); flex:0 0 auto;
  transition:opacity .5s ease;
}
.shelf__track img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border-radius:3px; filter:saturate(.92) contrast(1.03);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
/* una riga sottile sotto ogni lavoro: la stessa che corre nel rail */
.shelf__track figcaption{
  margin-top:16px; padding-top:14px; font-size:12.5px; color:#7c85a0; line-height:1.5;
  display:flex; flex-direction:column; gap:4px;
  border-top:1px solid rgba(255,255,255,.14);
}
.shelf__track figcaption b{ font-size:15px; color:var(--carta); font-weight:600; letter-spacing:-0.01em; }

/* ================================================================
   NUMERI — le cifre sono il contenuto: grandi, in colonna, con la
   riga che le sottolinea al passaggio.
   ================================================================ */
.numbers{
  position:relative; z-index:30; background:var(--notte);
  padding:clamp(80px,13vh,150px) var(--pad);
}
.numbers__head h2{ font-size:clamp(28px,4vw,54px); margin-top:12px; }
.numbers__list{
  list-style:none; margin:clamp(48px,7vh,86px) 0 0; padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
}
.numbers__list li{
  padding:clamp(22px,2.6vw,34px) clamp(16px,2vw,28px) clamp(24px,3vw,38px) 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-direction:column; gap:14px;
  position:relative;
}
/* la riga che si accende, come una stazione che entra in lavorazione */
.numbers__list li::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:0;
  background:var(--blu-chiaro);
  transition:width .9s cubic-bezier(.22,.61,.36,1);
}
.numbers__list li.is-in::before{ width:100%; }
.num{
  font-size:clamp(42px,6vw,86px); font-weight:600; letter-spacing:-0.045em;
  line-height:.92; font-variant-numeric:tabular-nums;
}
.num i{
  font-style:normal; font-size:.34em; color:var(--blu-chiaro);
  margin-left:.14em; letter-spacing:0; vertical-align:baseline;
}
.lab{ font-size:13px; color:#8f98b3; line-height:1.5; max-width:22ch; }

@media (max-width:900px){
  .numbers__list{ grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
  .shelf__head{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ---------------- CONTATTI ---------------- */
.contact{ position:relative; z-index:30; background:var(--blu); color:#fff; padding:clamp(70px,12vh,150px) var(--pad); }
.contact h2{ font-size:clamp(30px,5.4vw,78px); }
.contact__cols{
  margin-top:clamp(40px,6vh,72px); display:grid; gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid rgba(255,255,255,.28); padding-top:28px;
}
.contact .k{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.6; margin-bottom:8px; }
.contact a, .contact__cols p{ font-size:17px; line-height:1.5; }
.contact a{ border-bottom:1px solid rgba(255,255,255,.4); }
.contact__note{ margin-top:56px; font-size:11.5px; opacity:.5; }

/* ================================================================
   SCHERMI STRETTI — il rail si assottiglia e resta sul bordo
   ================================================================ */
@media (max-width:900px){
  :root{ --rail-w: 108px; }
  .rail__scene{ transform:rotateX(3deg) rotateY(-12deg) scale(1.06); }
  .rail__tag{
    left:auto; right:0; top:auto; bottom:22px; transform:none;
    border-left:none; border-right:2px solid var(--blu-chiaro);
    align-items:flex-end; text-align:right;
    padding:8px 12px 8px 0; min-width:0;
    background:linear-gradient(270deg, rgba(8,12,24,.9), rgba(8,12,24,0));
  }
  .rail__title{ font-size:13px; }
  .rail__meta{ display:none; }
  .act{ padding-right:calc(var(--rail-w) + 16px); min-height:auto; padding-top:14vh; padding-bottom:14vh; }
  .hero__body{ max-width:100%; }
  .finale__stage{ flex-direction:column; gap:22px; text-align:center; }
  .bottle{ height:42vh; }
  .finale__copy{ max-width:100%; }
}

/* ---------------- accessibilità ---------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero__scroll svg{ animation:none; }
  .act{ min-height:auto; padding-top:12vh; padding-bottom:12vh; }
}

/* ================================================================
   AREA CLIENTI
   ================================================================ */
.page-cli{ background:var(--notte); }
.cli{ padding:clamp(110px,16vh,170px) var(--pad) 0; max-width:1180px; margin:0 auto; }
.cli__badge{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#a9b4ff;
  border:1px solid rgba(84,104,238,.5); border-radius:999px; padding:7px 15px;
}
.cli__badge i{ width:6px; height:6px; border-radius:50%; background:var(--blu-chiaro); }
.cli__title{ font-size:clamp(34px,5.4vw,76px); margin:22px 0 24px; }
.cli__lead{ font-size:clamp(15px,1.3vw,19px); line-height:1.62; color:#a7b0c6; max-width:56ch; }

.cli__grid{
  margin:clamp(56px,9vh,110px) 0;
  display:grid; gap:1px; background:rgba(255,255,255,.1);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border:1px solid rgba(255,255,255,.1);
}
.cli__grid article{ background:var(--notte); padding:clamp(24px,3vw,38px); }
.cli__n{ font-size:11px; letter-spacing:.2em; color:var(--blu-chiaro); font-variant-numeric:tabular-nums; }
.cli__grid h2{ font-size:19px; margin:14px 0 10px; letter-spacing:-0.02em; }
.cli__grid p{ font-size:14px; line-height:1.6; color:#98a1b8; }

.cli__login{
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(20px,3vw,48px);
  padding-bottom:clamp(60px,10vh,120px);
}
.cli__card{ background:var(--notte-2); border:1px solid rgba(255,255,255,.1); padding:clamp(26px,3.4vw,48px); }
.cli__card h2{ font-size:clamp(22px,2.6vw,34px); margin:12px 0 22px; }
.cli__notice{
  font-size:13px; line-height:1.55; color:#c3c9db;
  background:rgba(84,104,238,.1); border-left:2px solid var(--blu-chiaro);
  padding:13px 16px; margin-bottom:26px;
}
.cli__form{ display:flex; flex-direction:column; gap:16px; }
.cli__form label{ display:flex; flex-direction:column; gap:7px; }
.cli__form span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grigio); }
.cli__form input{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16);
  border-radius:2px; padding:13px 14px; color:var(--carta);
  font-family:var(--font); font-size:15px; transition:border-color .25s;
}
.cli__form input:focus{ outline:none; border-color:var(--blu-chiaro); }
.cli__btn{
  margin-top:6px; align-self:flex-start;
  background:var(--blu); color:#fff; border:none; border-radius:999px;
  padding:13px 30px; font-family:var(--font); font-size:14.5px; font-weight:600;
  cursor:pointer; transition:transform .2s ease, background .25s;
}
.cli__btn:hover{ background:#1a27b4; transform:translateY(-1px); }
.cli__msg{ font-size:13px; color:#a9b4ff; opacity:0; transition:opacity .3s; line-height:1.5; }
.cli__msg--on{ opacity:1; }
.cli__alt{ margin-top:24px; font-size:13.5px; color:#98a1b8; }
.cli__alt a{ border-bottom:1px solid rgba(255,255,255,.35); }

.cli__side{ padding:clamp(20px,2.4vw,34px) 0; display:flex; flex-direction:column; gap:20px; }
.cli__side h3{ font-size:17px; font-weight:600; letter-spacing:-0.01em; margin:0; }
.cli__side > p{ font-size:14px; color:#98a1b8; line-height:1.6; }
.cli__contact .k{ display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--grigio); margin-bottom:5px; }
.cli__contact a, .cli__contact p{ font-size:15.5px; line-height:1.5; }
.cli__contact a{ border-bottom:1px solid rgba(255,255,255,.3); }

.cli__foot{
  border-top:1px solid rgba(255,255,255,.1);
  padding:26px var(--pad); display:flex; justify-content:space-between; gap:16px;
  font-size:11.5px; color:#6f7891; flex-wrap:wrap;
}

@media (max-width:900px){
  .cli__login{ grid-template-columns:1fr; }
  .finale__stage{ flex-direction:column; gap:18px; justify-content:center; }
  .bot{ width:100%; }
  .finale__hud{ width:100%; }
  .finish li{ padding-top:10px; padding-bottom:10px; }
  .shelf__track figure{ width:76vw; }
}

/* ================================================================
   APERTURA — non uno schermo nero davanti al sito: è la sede stessa,
   tenuta in ombra. Congedandola il velo si alza, la foto si illumina e
   il marchio lascia il centro per andare a posarsi nella barra.
   ================================================================ */
.intro{
  position:fixed; inset:0; z-index:200; overflow:hidden;
  display:grid; place-items:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), visibility .9s;
}
.intro--on{ opacity:1; visibility:visible; pointer-events:auto; cursor:pointer; }

/* stessa inquadratura dell'hero: chiudendo, l'una scivola nell'altra */
.intro__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 62%;
  transform:scale(1.07);
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.intro--on .intro__photo{ transform:scale(1); }

/* il velo pesante che tiene la sede in ombra */
.intro__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 62% at 50% 48%, rgba(4,7,14,.55) 0%, rgba(4,7,14,.9) 78%),
    linear-gradient(to bottom, rgba(4,7,14,.78), rgba(4,7,14,.86));
}
.intro__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  text-align:center; padding:0 var(--pad);
  transform:translateY(12px); opacity:0;
  transition:transform .9s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}
.intro--on .intro__inner{ transform:none; opacity:1; }
.intro__logo{ width:min(44vw, 400px); color:var(--carta); display:block; }
.intro__tag{ font-size:clamp(13px,1.2vw,16px); color:#aeb7ca; }
.intro__hint{
  margin-top:16px; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:#7c86a0; animation:introPulse 2.6s ease-in-out infinite;
}
@keyframes introPulse{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

/* finché l'apertura è in scena la barra resta fuori: il marchio è già al centro */
.is-intro .nav{
  opacity:0; pointer-events:none; transform:translateY(-8px);
}
.nav{ transition:color .35s ease, opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion: reduce){
  .intro__hint{ animation:none; }
  .intro__inner, .intro__photo{ transition:none; }
}