/* ==========================================================
   Kami — ricostruzione header + hero (rif. geometria mattter)
   Solo questi due blocchi. Nessuna dipendenza da styles.css.
   ========================================================== */

:root{
  --bg:#000;
  --pill:#141414;
  --pill-line:rgba(255,255,255,.08);
  --txt:#fff;
  --txt-dim:rgba(255,255,255,.62);
  --accent:#7A3EDB;        /* viola Kami */
  --accent-hi:#A78BFF;
  --badge:#FBBC00;
  --font:"Inter","Inter Placeholder",system-ui,-apple-system,sans-serif;
  --font-display:"Archivo",var(--font);
  /* una curva sola per tutto il movimento dell'header */
  --ease:cubic-bezier(.22,1,.36,1);
  --d-nav:.52s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:6px}

.skip{
  position:fixed;left:-9999px;top:0;z-index:100;
  background:#fff;color:#000;padding:.7em 1.1em;border-radius:0 0 10px 0;font-weight:600;
}
.skip:focus{left:0}

/* ==========================================================
   1 · HEADER — pill fissa che collassa allo scroll
   aperta: logo · link · Contatti
   chiusa: logo · tre puntini che si accendono a turno · Contatti
   ========================================================== */
.hdr{
  position:fixed;top:24px;left:50%;
  width:max-content;
  transform:translateX(-50%);
  z-index:10;
  /* rimbalzo leggero a fine corsa, come la referenza (~2%) */
  --spring:cubic-bezier(.25,1.12,.4,1);
  --d-shut:.5s;
}
.hdr__pill{
  display:flex;align-items:center;
  height:44px;
  padding:5px 5px 5px 10px;
  background:var(--pill);
  border:1px solid var(--pill-line);
  border-radius:30px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:padding var(--d-shut) var(--spring);
}

/* --- logo --- */
.hdr__logo{
  display:flex;align-items:center;
  flex:0 0 auto;
  padding-right:.9rem;
  transition:padding var(--d-shut) var(--spring);
}
/* logo reale: l'altezza comanda, la larghezza segue il ratio 3.403 */
.hdr__mark{
  height:18px;width:auto;flex:0 0 auto;
  display:block;
}

/* --- slot centrale: link e puntini occupano lo stesso posto.
   La sua larghezza (misurata in JS) è ciò che stringe la pill. --- */
.hdr__mid{
  position:relative;flex:0 0 auto;
  width:var(--mid-w,auto);height:34px;
  display:flex;align-items:center;
  transition:width var(--d-shut) var(--spring);
}
.hdr__links{
  display:flex;align-items:center;gap:1rem;
  width:max-content;
  transition:
    opacity .22s ease-out,
    filter .3s ease-out;
}
.hdr__link{
  position:relative;
  display:flex;align-items:flex-start;gap:2px;
  font-size:16px;font-weight:600;letter-spacing:-.04px;line-height:19.2px;
  white-space:nowrap;
  color:var(--txt);
  opacity:.82;
  transition:opacity .2s var(--ease);
}
.hdr__link:hover{opacity:1}
.hdr__link sup{
  font-size:9px;font-weight:600;line-height:9px;letter-spacing:-.36px;
  color:var(--badge);
  top:0;
}

/* --- puntini --- */
.hdr__dots{
  position:absolute;left:0;top:50%;
  width:24px;height:24px;margin-top:-12px;
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:0;border:0;background:none;cursor:pointer;
  border-radius:12px;
  opacity:0;visibility:hidden;
  transition:opacity .15s ease-out,visibility 0s linear .15s;
}
.hdr__dots i{
  --c:var(--accent);
  display:block;flex:0 0 auto;
  width:4px;height:4px;border-radius:24px;
  background:#fff;
  /* ciclo di 1,6s in 4 passi da 400ms: fermi → 1 → 2 → 3 */
  animation:hdrDot 1.6s linear infinite;
  animation-play-state:paused;
}
.hdr__dots i:nth-child(1){animation-delay:.4s}
.hdr__dots i:nth-child(2){animation-delay:.8s;--c:var(--badge)}
.hdr__dots i:nth-child(3){animation-delay:1.2s}
/* il puntino si allunga subito e torna giù rapido;
   il colore invece sfuma via lentamente e lascia la scia */
@keyframes hdrDot{
  0%  {height:4px; background:#fff;   animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  8%  {height:12px;background:var(--c)}
  22% {height:12px;background:var(--c);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  30% {height:4px; background:var(--c);animation-timing-function:ease-out}
  66% {height:4px; background:#fff}
  100%{height:4px; background:#fff}
}

/* --- CTA --- */
.hdr__cta{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  height:34px;padding:0 1.05rem;
  margin-left:.9rem;
  border-radius:30px;
  background:var(--accent);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:background-color .22s var(--ease),transform .22s var(--ease);
}
.hdr__cta:hover{background:var(--accent-hi);color:#14101c}
.hdr__cta:active{transform:scale(.97)}

/* ===== stato chiuso ===== */
.hdr.is-collapsed .hdr__logo{padding-right:28px}
.hdr.is-collapsed .hdr__mid{width:24px}
.hdr.is-collapsed .hdr__links{
  opacity:0;filter:blur(6px);
  pointer-events:none;
}
.hdr.is-collapsed .hdr__dots{
  opacity:1;visibility:visible;
  transition:opacity .3s ease-out .12s,visibility 0s linear 0s;
}
.hdr.is-collapsed .hdr__dots i{animation-play-state:running}

/* Mobile: stessa pill, rimpicciolita per stare nei 375px.
   "Studio" esce dal menu, resta nella pagina. */
@media (max-width:860px){
  .hdr{top:16px}
  .hdr__pill{padding:5px 5px 5px 10px}
  .hdr__mark{height:16px}
  .hdr__logo{padding-right:.75rem}
  .hdr__links{gap:.75rem}
  .hdr__link{font-size:14px;line-height:17px;letter-spacing:-.02px}
  .hdr__link sup{font-size:8px;line-height:8px;letter-spacing:-.3px}
  .hdr__link--wide{display:none}
  .hdr__cta{font-size:13px;height:30px;padding:0 .9rem;margin-left:.75rem}
  .hdr.is-collapsed .hdr__logo{padding-right:22px}
}

@media (prefers-reduced-motion:reduce){
  .hdr__pill,.hdr__logo,.hdr__mid,.hdr__links,.hdr__dots,.hdr__cta{transition:none}
  .hdr__dots i{animation:none}
}

/* ==========================================================
   2 · HERO — video full-bleed, testo in basso a sinistra,
   wordmark gigante tagliata dal bordo inferiore
   ========================================================== */
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:#000;
  display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;
}

/* --- video di fondo --- */
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media video,
.hero__media img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
/* velo: il testo deve restare leggibile su qualunque frame */
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.55) 100%);
}

/* --- contenuto --- */
.hero__in{
  position:relative;z-index:1;
  padding:0 32px;
  padding-bottom:clamp(9rem,26vh,15rem);   /* spazio per la wordmark */
}
.hero__lead{
  margin:0;
  max-width:400px;
  font-size:22px;font-weight:600;
  line-height:26.4px;letter-spacing:-.88px;
  color:var(--txt);
  text-wrap:pretty;
}
.hero__cta{
  display:inline-flex;align-items:center;
  margin-top:1.6rem;
  height:40px;padding:0 1.15rem;
  border-radius:30px;
  background:var(--accent);color:#fff;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:background-color .22s var(--ease),transform .22s var(--ease);
}
.hero__cta:hover{background:var(--accent-hi);color:#14101c}
.hero__cta:active{transform:scale(.98)}

/* --- wordmark gigante, tagliata in basso --- */
.hero__word{
  position:absolute;left:0;right:0;bottom:0;z-index:0;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(6rem,19.5vw,17.5rem);
  font-weight:900;letter-spacing:-.045em;line-height:.78;
  text-transform:uppercase;
  white-space:nowrap;
  /* affiora dal nero: quasi un rilievo, non un titolo */
  color:rgba(255,255,255,.055);
  padding:0 24px;
  transform:translateY(26%);           /* è il taglio dal bordo */
  pointer-events:none;user-select:none;
}
.hero__word sup{
  font-size:.28em;font-weight:700;letter-spacing:0;
  vertical-align:super;
}

/* placeholder temporaneo per provare l'animazione dell'header */
.spacer{min-height:140svh;background:var(--bg)}

@media (max-width:860px){
  .hero__in{padding:0 20px;padding-bottom:clamp(7rem,22vh,11rem)}
  .hero__lead{font-size:19px;line-height:23px;letter-spacing:-.6px;max-width:22ch}
  .hero__word{padding:0 14px;transform:translateY(24%)}
}

/* ==========================================================
   3 · SERVIZI — su fondo bianco, quattro schede scure che,
   scorrendo, salgono una sull'altra. Stesso nero in alto, un bagliore viola diverso
   in basso per ogni servizio. La pila (position:sticky) si accende
   da JS solo se ogni scheda entra sotto l'header: una scheda più
   alta dello schermo avrebbe il fondo coperto prima di essere letta.
   ========================================================== */
.srv{
  position:relative;
  background:#fff;color:#0b0a0f;
  padding:clamp(5.5rem,12vw,9rem) 32px clamp(6rem,14vw,10rem);
}
.srv__head{max-width:40rem;margin:0 auto clamp(2.75rem,5vw,4rem);text-align:center}
.srv__kick{margin:0 0 .75rem;font-size:14px;font-weight:500;letter-spacing:-.01em;color:rgba(11,10,15,.55)}
.srv__h{
  margin:0;
  font-size:clamp(2.2rem,4.8vw,3.6rem);font-weight:600;
  line-height:1.02;letter-spacing:-.045em;
  text-wrap:balance;
}

.srv__list{
  list-style:none;margin:0 auto;padding:0;
  max-width:1040px;
  display:grid;gap:clamp(1rem,2vw,1.5rem);
}
/* Pila accesa: il titolo della sezione resta fermo sotto la pill, così
   chi scorre legge sempre di cosa si parla; le schede si fermano sotto
   il titolo e ognuna 26px più in basso della precedente, lasciandone
   vedere il bordo. --head-top e --card-top li calcola il JS dalle
   misure vere (il titolo cambia altezza quando va a capo). */
.srv.is-stack .srv__head{
  position:sticky;top:var(--head-top,80px);z-index:2;
  max-width:none;margin-inline:-32px;padding:10px 32px 14px;
  background:#fff;
}
.srv.is-stack .scard{position:sticky;top:calc(var(--card-top,200px) + var(--i,0) * 26px)}

.scard{
  --g1:#7A3EDB;--g2:#3a1675;--gx:0%;
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,4.5vw,4rem);
  padding:clamp(1.5rem,3.4vw,2.75rem);
  border-radius:28px;
  border:1px solid rgba(255,255,255,.07);
  color:var(--txt);
  background:
    radial-gradient(115% 85% at var(--gx) 108%,
      var(--g1) 0%,
      color-mix(in oklab,var(--g1) 55%,var(--g2)) 20%,
      color-mix(in oklab,var(--g2) 55%,#040306) 44%,
      transparent 74%),
    linear-gradient(180deg,#030304 0%,#060509 50%,color-mix(in oklab,var(--g2) 45%,#040306) 100%);
  box-shadow:0 -14px 40px rgba(26,12,52,.16),0 2px 6px rgba(26,12,52,.08);
}
/* trama diagonale finissima, visibile solo dentro il bagliore */
.scard::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 1px,transparent 1px 6px);
  -webkit-mask-image:radial-gradient(80% 55% at var(--gx) 100%,#000 0%,transparent 72%);
          mask-image:radial-gradient(80% 55% at var(--gx) 100%,#000 0%,transparent 72%);
}
.scard--social{--g1:#7A3EDB;--g2:#3a1675;--gx:0%}
.scard--web   {--g1:#5b2bc2;--g2:#1f0b4a;--gx:100%}
.scard--video {--g1:#a03fd6;--g2:#46105e;--gx:45%}
.scard--id    {--g1:#A78BFF;--g2:#4a2a9e;--gx:12%}

.scard__sx,.scard__dx{display:flex;flex-direction:column;min-width:0}

.scard__ico{
  display:grid;place-items:center;
  width:50px;height:50px;border-radius:14px;
  background:#0c0b10;border:1px solid var(--pill-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 22px rgba(0,0,0,.55);
}
.scard__ico svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.scard__n{
  margin:1.7rem 0 .8rem;
  font-size:clamp(1.45rem,2.5vw,1.95rem);font-weight:600;
  line-height:1.1;letter-spacing:-.035em;
}
.scard__t{margin:0;max-width:36ch;font-size:16px;line-height:1.6;color:var(--txt-dim)}

.scard__meta{
  margin:auto 0 0;padding:2.75rem 0 .95rem;
  display:flex;justify-content:space-between;gap:1rem;
  border-bottom:1px solid rgba(255,255,255,.16);
  font-size:15px;color:var(--txt-dim);
}
.scard__meta b{font-weight:500;color:rgba(255,255,255,.8);text-align:right}

/* su una riga sola: la misura è scelta perché la frase più lunga
   («Prima di tutto il messaggio») entri nella colonna */
.scard__big{
  margin:0;
  font-size:clamp(1.4rem,2.3vw,1.75rem);font-weight:700;
  line-height:1.15;letter-spacing:-.04em;
}
.scard__big span{color:var(--accent-hi)}

.scard__rule{height:1px;margin:1.6rem 0 1.5rem;background:rgba(255,255,255,.16)}

.scard__ul{list-style:none;margin:0;padding:0;display:grid;gap:.95rem}
.scard__ul li{
  display:flex;align-items:flex-start;gap:.8rem;
  font-size:16px;line-height:1.45;color:rgba(255,255,255,.9);
}
.scard__ul li::before{
  content:"";flex:0 0 auto;
  width:25px;height:25px;margin-top:-1px;border-radius:50%;
  background:rgba(255,255,255,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") center/12px no-repeat;
}

.scard__go{
  margin-top:1.9rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:50px;padding:0 1.25rem;border-radius:30px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.12);
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:background-color .22s var(--ease),border-color .22s var(--ease);
}
.scard__go i{font-style:normal;transition:transform .35s var(--ease)}
.scard__go:hover{background:var(--accent);border-color:var(--accent)}
.scard__go:hover i{transform:translateX(3px)}
.scard__go:active{transform:scale(.98)}

@media (max-width:860px){
  .srv{padding:clamp(4.5rem,14vw,6rem) 20px clamp(5rem,16vw,7rem)}
  /* compatte: sul telefono una scheda intera deve entrare sotto la pill */
  .scard{grid-template-columns:1fr;gap:1.1rem;padding:1.25rem;border-radius:22px}
  .scard__ico{width:42px;height:42px;border-radius:12px}
  .scard__n{margin:1rem 0 .5rem;font-size:1.35rem}
  .scard__t{font-size:14.5px;line-height:1.5}
  .scard__meta{padding:1rem 0 .7rem;font-size:13.5px}
  .scard__big{font-size:1.3rem}
  .scard__rule{margin:1rem 0}
  .scard__ul{gap:.6rem}
  .scard__ul li{gap:.65rem;font-size:14.5px}
  .scard__ul li::before{width:22px;height:22px;background-size:11px}
  .scard__go{margin-top:1.1rem;min-height:44px}
  .srv.is-stack .srv__head{margin-inline:-20px;padding-inline:20px}
  .srv.is-stack .scard{top:calc(var(--card-top,160px) + var(--i,0) * 10px)}
}

@media (prefers-reduced-motion:reduce){
  .scard__go,.scard__go i{transition:none}
}

/* avviso di rifacimento, sopra la frase della hero */
.hero__nota{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0 0 .9rem;padding:.35rem .75rem;
  border:1px solid var(--pill-line);border-radius:30px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--txt);
}
.hero__nota::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent-hi);
}
.hero__sotto{margin:.7rem 0 0;max-width:400px;font-size:16px;line-height:1.5;color:var(--txt-dim)}
@media (max-width:860px){
  .hero__nota{font-size:12px}
  .hero__sotto{font-size:14.5px;max-width:26ch}
}