/* ==========================================================================
   FABRIZIO — COMPONENTI
   ========================================================================== */

/* ============ 1. HEADER ============ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  padding: 26px 0;
  border-bottom: 1px solid transparent;
  transition: background var(--t-norm), padding var(--t-norm), border-color var(--t-norm);
}

.site-header.is-scrolled {
  padding: 15px 0;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.header-row { display: flex; align-items: center; justify-content: space-between; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.menu-btn {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 0;
  transition: color var(--t-fast);
}

.menu-btn:hover { color: var(--ink); }

/* ============ 2. NAV ============ */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 26px var(--gutter) 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.nav-overlay.is-open { opacity: 1; visibility: visible; }

.nav-top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--shell); width: 100%; margin: 0 auto;
}

.nav-overlay nav { flex: 1; display: flex; align-items: center; width: 100%; }

.nav-list { list-style: none; margin: 0 auto; max-width: var(--shell); width: 100%; padding: 40px 0; }

.nav-list a {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 3vw, 38px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 5.6vw, 3.8rem);
  letter-spacing: -0.035em;
  line-height: 1.32;
  color: var(--ink-4);
  transition: color var(--t-fast), transform var(--t-fast);
}

.nav-list a:hover { color: var(--ink); transform: translateX(12px); }

.nav-list .idx {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-4);
}

.nav-foot {
  display: flex; flex-wrap: wrap; gap: 18px 30px;
  align-items: center; justify-content: space-between;
  max-width: var(--shell); width: 100%; margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.nav-foot a { color: var(--ink-3); }
.nav-foot a:hover { color: var(--ink); }

/* ============ 3. HERO ============ */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 112px 0 48px;
  overflow: hidden;
}

.hero-stage {
  position: relative; flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vh, 30px);
  min-height: min(58vh, 480px);
}

.sphere-holder {
  position: relative;
  width: clamp(190px, 25vw, 340px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  will-change: transform;
  pointer-events: none;
}

.sphere-holder img { width: 100%; height: 100%; object-fit: contain; opacity: 0.85; }

.hero-name {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--ink);
  line-height: 1;
}

.hero-greet {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.3vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--ink-2);
  margin-bottom: clamp(6px, 1vw, 14px);
  min-height: 1em;
}

/* le lettere del nome entrano una alla volta, sfocate e in salita */
.hero-me .lettera {
  display: inline-block;
  opacity: 0;
  animation: lettera-in 0.72s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes lettera-in {
  from { opacity: 0; transform: translateY(0.16em) scale(0.97); filter: blur(9px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* una lettera si stacca e torna al suo posto */
.hero-me .lettera.salta {
  animation: lettera-salta 1.15s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes lettera-salta {
  0%     { opacity: 0; transform: translateY(0.16em) scale(0.97); filter: blur(9px); }
  26%    { opacity: 1; transform: none; filter: blur(0); }
  47%    { opacity: 1; }
  47.01% { opacity: 0; }   /* sparisce di colpo, senza muoversi */
  56%    { opacity: 0; }
  56.01% { opacity: 1; }   /* e torna dov'era */
  100%   { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-me .lettera,
  .hero-me .lettera.salta { animation: none; opacity: 1; }
}

.hero-me {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.055em;
  min-height: 0.95em;
}

/* cursore inline per titoli e righe che si scrivono allo scroll */
.tw-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.78em;
  margin-left: 0.05em;
  background: currentColor;
  vertical-align: -0.06em;
  animation: blink 1.05s steps(1) infinite;
}

/* niente salti di altezza mentre il testo si scrive */
[data-typewriter] { min-height: var(--tw-h, auto); }

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* il piede compare quando il nome ha finito di scriversi */
.hero-foot {
  opacity: 0;
  transition: opacity 1s var(--ease) 0.15s;
}

.hero-foot.is-in { opacity: 1; }

.hero-foot {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 34px;
  max-width: var(--shell); width: 100%; margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero-claim {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 50ch;
  font-weight: 300;
}

.hero-claim b { color: var(--ink); font-weight: 500; }

.scroll-cue {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
  transition: color var(--t-fast);
  white-space: nowrap;
}

.scroll-cue:hover { color: var(--ink); }

/* finita la presentazione la scritta si fa notare: tre spinte in giu' e basta */
.scroll-cue.chiama {
  animation: scorri-chiama 1.5s cubic-bezier(.36, 0, .28, 1) 3;
}

@keyframes scorri-chiama {
  0%, 62%, 100% { transform: none; color: var(--ink-4); }
  76%           { transform: translateY(5px); color: var(--ink-2); }
  88%           { transform: translateY(0); color: var(--ink-3); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue.chiama { animation: none; }
}

/* ============ 3b. CHI SONO ============ */

.intro {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 16vh, 190px) 0;
}

.intro-bg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1500px, 132vw);
  max-width: none;
  opacity: 0.3;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, transparent 100%);
}

.intro-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
}

.intro-story {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  max-width: 46ch;
}

.intro-line {
  font-size: clamp(1.1rem, 1.85vw, 1.62rem);
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink-2);
  letter-spacing: -0.012em;
  text-shadow: 0 0 22px rgba(0, 0, 0, 0.9);
}

.intro-line b { color: var(--ink); font-weight: 500; }

@media (min-width: 1100px) {
  .intro-inner { justify-content: center; }
  .intro-story { max-width: 52ch; }
}

/* ============ 4. LE IDEE / FARFALLA ============ */

.vision {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: clip;
  padding: clamp(70px, 9vh, 110px) 0;
}

.vision-grid { display: grid; gap: clamp(30px, 6vw, 70px); align-items: center; width: 100%; }

.vision-stage {
  order: 1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: min(46vh, 420px);
  overflow: visible;
}
.vision-copy  { order: 2; width: 100%; }

@media (min-width: 900px) {
  .vision-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
  .vision-stage { order: 2; }
  .vision-copy  { order: 1; }
}

.butterfly-holder {
  width: clamp(250px, 34vw, 430px);
  aspect-ratio: 1;
  will-change: transform, opacity;
  pointer-events: none;
}

/* il fotogramma della farfalla ha il fondo nero: in "screen" il nero sparisce
   e non copre piu' il testo quando ci vola sopra */
.butterfly-holder img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}

.vision-title { font-size: var(--fs-h2); line-height: 1.0; margin-bottom: 24px; }
.vision-title em { font-style: normal; color: var(--ink-3); }

/* ============ 5. COSA COSTRUISCO ============ */

/* ============ 5b. PER CHI — settori ============ */

/* Sei affermazioni, non una tabella. Il contrasto sta dentro la riga:
   quello che succede oggi in grigio, quello che cambia in bianco. */

.shifts { list-style: none; display: grid; gap: clamp(34px, 4.4vw, 58px); }

.shift-who {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: clamp(10px, 1.2vw, 15px);
}

.shift-line {
  font-size: clamp(1.15rem, 1.95vw, 1.7rem);
  line-height: 1.45;
  font-weight: 300;
  letter-spacing: -0.015em;
  max-width: 34ch;
}

.shift-line .was { color: var(--ink-4); }

.shift-line .arrow {
  color: var(--ink-4);
  padding: 0 0.55em;
  font-weight: 400;
}

.shift-line .now { color: var(--ink); font-weight: 400; }

/* le righe si alternano leggermente: ritmo, non griglia */
@media (min-width: 900px) {
  .shifts li:nth-child(even) { padding-left: clamp(40px, 9vw, 150px); }
  .shift-line { max-width: 40ch; }
}



.fixes { list-style: none; border-top: 1px solid var(--line); }

/* quando la lista segue subito l'etichetta di sezione, la riga era doppia */
.eyebrow:has(+ .fixes) { border-bottom: none; padding-bottom: 4px; margin-bottom: clamp(20px, 2.4vw, 30px); }

.fixes li {
  display: grid;
  gap: 6px clamp(24px, 5vw, 72px);
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

@media (min-width: 800px) {
  .fixes li { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
}

.fix-who {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-3);
}

.fixes p {
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink-2);
  max-width: 52ch;
}

.fixes b { color: var(--ink); font-weight: 500; }

/* ============ 6. LAVORI — voci editoriali ============ */

.work-head { margin-bottom: clamp(46px, 6vw, 78px); }

/* i lavori come li avevamo fatti all'inizio: due colonne, immagine quadrata
   a sinistra e testo a destra. Nessuno scorrimento: si vedono tutti. */
/* i lavori: sei per volta in due colonne per tre righe, si cambia con le frecce.
   La scheda resta quella editoriale, immagine quadrata a sinistra e testo a destra. */
.entries {
  --colonne: 2;
  --gap-x: clamp(34px, 4vw, 64px);
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  grid-auto-columns: calc((100% - (var(--colonne) - 1) * var(--gap-x)) / var(--colonne));
  align-items: start;
  gap: clamp(38px, 4.4vw, 56px) var(--gap-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.entries::-webkit-scrollbar { display: none; }
.entries:focus-visible { outline: 2px solid var(--line-strong); outline-offset: 8px; }

@media (max-width: 900px) { .entries { --colonne: 1; grid-template-rows: auto; } }

.entry {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: clamp(110px, 15vw, 208px) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 26px);
  align-items: start;
}

.entry-media {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background:
    radial-gradient(120% 105% at 18% 12%, var(--g1, #1a1a1e) 0%, transparent 58%),
    radial-gradient(115% 95% at 88% 84%, var(--g2, #121216) 0%, transparent 62%),
    linear-gradient(142deg, var(--g3, #0d0d10) 0%, var(--g4, #06060a) 100%);
}

.entry-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.entry:hover .entry-media img { transform: scale(1.05); }

.entry-text { display: grid; gap: 10px; align-content: start; }

.entry-kicker {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.entry h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }

.entry p { font-size: 0.92rem; line-height: 1.62; color: var(--ink-3); }
.entry p b { color: var(--ink-2); font-weight: 500; }

.entry-meta {
  font-size: 0.76rem;
  color: var(--ink-4);
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}


.work-also { padding-top: clamp(56px, 8vw, 96px); margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }

.work-also p { font-size: var(--fs-body); color: var(--ink-3); max-width: 70ch; line-height: 1.75; }
.work-also b { color: var(--ink-2); font-weight: 500; }

/* ============ 7. COME LAVORO ============ */

.method-list { display: grid; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }

@media (min-width: 860px) { .method-list { grid-template-columns: repeat(3, 1fr); } }

.principle {
  background: var(--bg);
  padding: clamp(32px, 4vw, 48px) clamp(0px, 2.8vw, 36px);
  display: grid; gap: 16px; align-content: start;
}

.principle:first-child { padding-left: 0; }
.principle:last-child  { padding-right: 0; }

.principle h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--ink); }
.principle p  { font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); }

/* ============ 8. CONTATTO ============ */

.contact {
  min-height: 88svh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  perspective: 620px;
  perspective-origin: 50% 22%;
  contain: layout paint;
}

.contact-video {
  position: absolute;
  bottom: -6%;
  left: 50%;
  width: 190%;
  height: 112%;
  object-fit: cover;
  opacity: 0.6;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotateX(74deg);
  backface-visibility: hidden;
}

/* Il video non fa da sfondo: fa da pavimento. Ruotato sull'asse X dentro
   una prospettiva, fugge verso un orizzonte e lascia nera la meta' alta,
   dove sta la copy. */

/* il velo che dissolve il pavimento verso l'orizzonte: un livello statico,
   composto una volta, invece di una maschera ricalcolata a ogni fotogramma */
.contact-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 16%,
              rgba(0,0,0,0.22) 32%, rgba(0,0,0,0.72) 62%, #000 84%);
}

/* velo scuro sotto il testo: il video resta visibile ai bordi,
   ma al centro il nero torna a essere nero e la copy si legge */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 46% at 50% 34%,
              rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.86) 40%, transparent 76%);
}

/* linea d'orizzonte: e' quella che fa leggere la prospettiva */
.contact::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 34%;
  height: 1px;
  z-index: 1;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.14), transparent);
  pointer-events: none;
}

/* il footer cade sulla parte piu' luminosa del pavimento: gli do un fondo */
.contact .site-footer {
  background: linear-gradient(to top, rgba(0,0,0,0.95) 45%, rgba(0,0,0,0.7) 100%);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* chi ha chiesto meno animazioni resta sul fotogramma di posa */
@media (prefers-reduced-motion: reduce) {
  .contact-video { display: none; }
  .contact { background: #000 url(../assets/onde-posa.webp) center 80% / cover no-repeat; }
  .contact-fade { background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 55%, #000 88%); }
}

.ring-bg {
  position: absolute; top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1400px, 126vw);
  max-width: none;
  opacity: 0.5;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 60% 74% at 50% 50%, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 74% at 50% 50%, #000 45%, transparent 100%);
}

.contact-inner { position: relative; z-index: 3; text-align: center; display: grid; justify-items: center; gap: 26px; }

.contact-title { font-size: clamp(2.8rem, 8.5vw, 6rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.05em; }

.contact-lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 46ch; line-height: 1.55; font-weight: 300; }

/* il riquadro delle due proposte: vetro sopra il pavimento in movimento.
   Un solo strato sfocato, non due: il video sotto continua a girare fluido. */
.offer-row {
  display: grid;
  margin-top: 22px;
  width: 100%;
  max-width: 860px;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(158deg,
      rgba(255,255,255,0.085) 0%,
      rgba(255,255,255,0.028) 48%,
      rgba(255,255,255,0.052) 100%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    0 26px 64px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.17);
  contain: layout paint;
}

@media (min-width: 720px) { .offer-row { grid-template-columns: 1fr 1fr; } }

.offer {
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offer + .offer { border-top: 1px solid rgba(255,255,255,0.1); }

@media (min-width: 720px) {
  .offer + .offer { border-top: 0; border-left: 1px solid rgba(255,255,255,0.1); }
}

/* spinge le azioni al fondo della scheda: i due bottoni restano allineati
   anche se i testi sopra hanno lunghezze diverse */
.offer-act {
  margin-top: auto;
  padding-top: 18px;
  display: grid;
  gap: 12px;
  justify-items: start;
}

.offer-paid { background: rgba(255,255,255,0.022); }

.offer-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.offer h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }

.offer-price {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.offer-paid .offer-price { color: var(--ink); }

.offer p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); }
.offer p b { color: var(--ink); font-weight: 500; }

.offer .mail-primary { font-size: 0.88rem; padding: 12px 22px; }

.mail-primary {
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 15px 26px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 20px rgba(0,0,0,0.34);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

.mail-primary:hover {
  border-color: rgba(255,255,255,0.34);
  background: linear-gradient(180deg, rgba(255,255,255,0.17), rgba(255,255,255,0.07));
}

.mail-primary:active { transform: translateY(1px); }

.mail-copy {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 15px 10px;
  transition: color var(--t-fast);
}

.mail-copy:hover { color: var(--ink-2); }

/* ============ 9. FOOTER ============ */

.site-footer {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 12px 30px;
  justify-content: space-between; align-items: center;
  padding-top: 26px; padding-bottom: 40px;
  margin-top: clamp(60px, 9vw, 110px);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ============ 10. TOAST ============ */

.toast {
  position: fixed; left: 50%; bottom: 34px;
  transform: translate(-50%, 22px);
  z-index: 1200;
  background: #0b0b0c;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 0.8rem;
  padding: 13px 20px;
  border-radius: 3px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-norm), transform var(--t-norm), visibility var(--t-norm);
  max-width: calc(100vw - 40px);
}

.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ============ 11. MOBILE ============ */

@media (max-width: 859px) {
  .principle { padding-left: 0; padding-right: 0; }
}

@media (max-width: 759px) {
  .hero-foot { align-items: flex-start; flex-direction: column; gap: 26px; }
  .eyebrow span:last-child { display: none; }
}

/* ============ 12. PAGINA "UN'ORA INSIEME" ============ */

.call-hero {
  position: relative;
  overflow: hidden;
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding: clamp(150px, 20vh, 230px) 0 clamp(80px, 10vh, 120px);
}

/* l'immagine deve stare dentro la sezione, non essere ritagliata a fascia */
.call-hero /* Il video non fa da sfondo: fa da pavimento. Ruotato sull'asse X dentro
   una prospettiva, fugge verso un orizzonte e lascia nera la meta' alta,
   dove sta la copy. */

/* il velo che dissolve il pavimento verso l'orizzonte: un livello statico,
   composto una volta, invece di una maschera ricalcolata a ogni fotogramma */
.contact-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 16%,
              rgba(0,0,0,0.22) 32%, rgba(0,0,0,0.72) 62%, #000 84%);
}

/* velo scuro sotto il testo: il video resta visibile ai bordi,
   ma al centro il nero torna a essere nero e la copy si legge */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 46% at 50% 34%,
              rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.86) 40%, transparent 76%);
}

/* linea d'orizzonte: e' quella che fa leggere la prospettiva */
.contact::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 34%;
  height: 1px;
  z-index: 1;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.14), transparent);
  pointer-events: none;
}

/* il footer cade sulla parte piu' luminosa del pavimento: gli do un fondo */
.contact .site-footer {
  background: linear-gradient(to top, rgba(0,0,0,0.95) 45%, rgba(0,0,0,0.7) 100%);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* chi ha chiesto meno animazioni resta sul fotogramma di posa */
@media (prefers-reduced-motion: reduce) {
  .contact-video { display: none; }
  .contact { background: #000 url(../assets/onde-posa.webp) center 80% / cover no-repeat; }
  .contact-fade { background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 55%, #000 88%); }
}

.ring-bg {
  top: 50%;
  width: auto;
  height: 108%;
  max-height: none;
  opacity: 0.42;
}

.call-inner { position: relative; z-index: 2; display: grid; gap: 22px; justify-items: start; }

.call-title {
  font-size: clamp(3rem, 8.5vw, 6.4rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.05em;
}

.call-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 420px;
}

.call-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.04em;
  color: var(--ink);
}

.call-note {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.call-body { padding-top: 0; }

.call-cta { margin-top: clamp(70px, 9vw, 120px); display: grid; gap: 20px; justify-items: start; }
.call-cta .mail-row { margin-top: 8px; }

.site-footer a { color: var(--ink-3); }
.site-footer a:hover { color: var(--ink); }

/* ============ 13. CASI D'USO — carosello ============ */

/* le frecce stanno ai lati del box, a meta' altezza della griglia */
.uc-frame { position: relative; }

.uc-arrow {
  position: absolute;
  top: 50%;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--ink-3);
  transform: translateY(-50%);
  transition: color var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}

.uc-arrow[data-dir="-1"] { left:  calc(-1 * (var(--gutter) / 2 + 17px)); }
.uc-arrow[data-dir="1"]  { right: calc(-1 * (var(--gutter) / 2 + 17px)); }

.uc-arrow svg { width: 22px; height: 22px; }
.uc-arrow:hover:not(:disabled) { color: var(--ink); }
.uc-arrow[data-dir="-1"]:hover:not(:disabled) { transform: translate(-3px, -50%); }
.uc-arrow[data-dir="1"]:hover:not(:disabled)  { transform: translate(3px, -50%); }
.uc-arrow:disabled { opacity: 0.15; cursor: default; }
.uc-arrow:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 6px; }

/* la posizione nel carosello: sul telefono si vede una scheda per volta
   e senza questo numero nessuno sospetta che ce ne siano altre */
.uc-conta {
  display: none;
  position: absolute;
  right: 2px;
  bottom: 8px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-4);
}

@media (max-width: 760px) {
  /* niente spazio ai lati: frecce e contatore vanno sotto la griglia */
  .uc-frame { padding-bottom: 56px; }

  .uc-arrow {
    top: auto;
    bottom: 4px;
    transform: none;
    width: 38px; height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
  }

  .uc-arrow[data-dir="-1"] { left: 0; }
  .uc-arrow[data-dir="1"]  { left: 46px; right: auto; }
  .uc-arrow[data-dir="-1"]:hover:not(:disabled),
  .uc-arrow[data-dir="1"]:hover:not(:disabled) { transform: none; }

  .uc-conta { display: block; }
}

.uc-viewport { overflow: hidden; }

.usecases {
  /* due righe che scorrono in orizzontale: la griglia doppia resta,
     ma ci stanno ventiquattro casi invece di sei */
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  --colonne: 3;
  --gap-x: clamp(16px, 1.8vw, 24px);
  grid-auto-columns: calc((100% - (var(--colonne) - 1) * var(--gap-x)) / var(--colonne));
  align-items: start;
  gap: clamp(26px, 3vw, 40px) var(--gap-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

@media (max-width: 1000px) { .usecases { --colonne: 2; } }
@media (max-width: 640px)  { .usecases { --colonne: 1; grid-template-rows: auto; } }

.usecases::-webkit-scrollbar { display: none; }
.usecases:focus-visible { outline: 2px solid var(--line-strong); outline-offset: 8px; }

.uc {
  scroll-snap-align: start;
  display: grid;
  gap: 16px;
  align-content: start;
}

.uc-media {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 105% at 18% 12%, var(--g1) 0%, transparent 58%),
    radial-gradient(115% 95% at 88% 84%, var(--g2) 0%, transparent 62%),
    linear-gradient(142deg, var(--g3) 0%, var(--g4) 100%);
}

.uc-icon {
  width: clamp(44px, 4.2vw, 56px);
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
  display: grid;
  place-items: center;
  color: #16161a;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}

.uc-icon svg { width: 55%; height: 55%; }

.uc h3 {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.uc p { font-size: 0.92rem; line-height: 1.62; color: var(--ink-3); }

/* barra di avanzamento: dice quanto manca senza contare i pallini */


/* evidenziazione a pennarello su "le tue idee": arriva dopo che il titolo
   ha finito di scriversi, come se qualcuno lo sottolineasse a mano */
.vision-title em {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: var(--ink-3);
  padding: 0 0.1em;
  transition: color 0.3s var(--ease) 0.22s;
}

.vision-title em::before {
  content: "";
  position: absolute;
  inset: 0.04em 0 0.06em;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.32, 1);
  z-index: -1;
}

.vision-title.is-marked em { color: #000; }
.vision-title.is-marked em::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .vision-title em::before { transition: none; }
}


/* ============ 16. RIPRISTINI ============ */

/* il piede delle due carte: copia indirizzo, apri in gmail */
.offer-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-height: 1.75em;
  line-height: 1.6;
  font-size: 0.78rem;
  color: var(--ink-4);
}

.offer-foot > a,
.offer-foot > button {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
  padding: 0 0 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.offer-foot > a:hover,
.offer-foot > button:hover { color: var(--ink); border-bottom-color: var(--ink); }

.copy-mail {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
}

.copy-mail:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav-foot .copy-mail { border-bottom-color: transparent; }

/* marchio Gmail: si capisce dove porta il link, senza urlare */
.offer-foot a:has(.gmail-mark) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.gmail-mark {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.8;
  transition: opacity var(--t-fast);
}

.offer-foot a:hover .gmail-mark { opacity: 1; }

/* la frase subito sotto il nome */
.hero-motto {
  margin: -10px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.45vw, 1.24rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink-3);
  min-height: 1.3em;
}

/* la cornice al neon che gira una volta sola, all'ingresso */
.arcade {
  position: fixed;
  inset: 0;
  z-index: 940;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(.4, 0, .3, 1);
}

.arcade.is-on  { opacity: 1; }

/* alla fine sparisce la cornice, non tutto il disegno: le onde devono
   restare piene mentre attraversano lo schermo */
/* le due onde partono ferme e invisibili: si allargano solo alla fine della corsa */
.arcade-onda {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* un solo strato realmente sfocato per volta: e' l'operazione piu' cara
   di tutta l'animazione, moltiplicarla per nove faceva scattare i telefoni */
.arcade .alone { filter: blur(7px); opacity: 0.9; }

/* le altre onde prendono morbidezza da un tratto largo e tenue: nessun filtro */
.arcade .scia { opacity: 0.4; }

.arcade-piena { opacity: 0; transition: opacity 0.45s cubic-bezier(.4, 0, .3, 1); }
.arcade.is-piena .arcade-piena { opacity: 1; }

/* Deve stare DOPO la regola qui sopra: hanno la stessa specificita' e vince
   l'ultima scritta. Prima era sopra, quindi la cornice non sfumava affatto —
   restava accesa e spariva di colpo quando l'svg veniva tolto dalla pagina. */
.arcade.is-off .arcade-piena,
.arcade.is-off .arcade-testa {
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.16, .62, .22, 1);
}

/* il cambio pagina e' una dissolvenza, non uno scorrimento:
   il gruppo esce tutto insieme, quello nuovo rientra una carta alla volta */
.usecases,
.entries { transition: opacity 0.3s cubic-bezier(.4, 0, 1, 1); }

.usecases.is-fading,
.entries.is-fading { opacity: 0; }

@keyframes uc-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.988); }
  to   { opacity: 1; transform: none; }
}

.uc.entra,
.entry.entra { animation: uc-entra 0.66s cubic-bezier(.16, 1, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .uc.entra, .entry.entra { animation: none; }
}

/* ============ 17. AGENDA ============ */

.agenda {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
}

.agenda[hidden] { display: none; }

.agenda-velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.34s var(--ease);
}

.agenda-box {
  position: relative;
  width: 100%;
  max-width: 430px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 22px;
  background:
    linear-gradient(158deg,
      rgba(255,255,255,0.09) 0%,
      rgba(255,255,255,0.03) 48%,
      rgba(255,255,255,0.055) 100%),
    #08080a;
  box-shadow:
    0 40px 90px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.17);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.4s var(--ease), transform 0.5s cubic-bezier(.16,1,.3,1);
}

.agenda.is-in .agenda-velo { opacity: 1; }
.agenda.is-in .agenda-box  { opacity: 1; transform: none; }

.agenda-x {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--ink-4);
  border-radius: 10px;
  transition: color var(--t-fast), background var(--t-fast);
}

.agenda-x svg { width: 17px; height: 17px; }
.agenda-x:hover { color: var(--ink); background: rgba(255,255,255,0.07); }

.agenda-occhiello {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 10px;
}

.agenda-box h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

.agenda-mese {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

.agenda-nav {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink-4);
  border-radius: 9px;
  transition: color var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}

.agenda-nav svg { width: 15px; height: 15px; }
.agenda-nav:hover:not(:disabled) { color: var(--ink); background: rgba(255,255,255,0.07); }
.agenda-nav:disabled { opacity: 0.18; cursor: default; }

.agenda-settimana,
.agenda-giorni {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.agenda-settimana {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  text-align: center;
}

.agenda-giorno {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.82rem;
  border-radius: 11px;
  color: var(--ink-2);
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.agenda-giorno.vuoto { visibility: hidden; }

.agenda-giorno.pieno {
  color: rgba(255,255,255,0.2);
  cursor: default;
}

/* il messaggio che segue il dito sui giorni pieni */
.agenda-tip {
  position: absolute;
  z-index: 4;
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(20,20,22,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 26px rgba(0,0,0,0.55);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

.agenda-tip.is-in { opacity: 1; transform: translate(-50%, 0); }
.agenda-tip[hidden] { display: none; }

.agenda-giorno.libero {
  color: var(--ink);
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.14);
}

.agenda-giorno.libero:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.3); }

.agenda-giorno.scelto {
  background: var(--ink);
  color: #000;
  border-color: var(--ink);
}

.agenda-ore {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.agenda-ora {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 9px 14px;
  border-radius: 11px;
  color: var(--ink-2);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.agenda-ora:hover { background: rgba(255,255,255,0.12); color: var(--ink); }
.agenda-ora.scelto { background: var(--ink); color: #000; border-color: var(--ink); }

.agenda-conferma {
  display: inline-block;
  margin-top: 20px;
  text-align: center;
}

.agenda-conferma[hidden] { display: none; }

.agenda-nota {
  margin: 16px 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ink-4);
}

.agenda-quando {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  min-height: 1.2em;
}

.agenda-mail {
  display: block;
  margin-top: 12px;
  font-size: 0.76rem;
  color: var(--ink-4);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast);
}

.agenda-mail:hover { color: var(--ink-2); }
.agenda-mail[hidden] { display: none; }

/* la luce colorata attraversa il motto: stessa tavolozza della cornice.
   Ai due estremi la sfumatura torna al grigio del testo, cosi' alla fine
   il colore e' passato e la riga resta com'era. */
.hero-motto { position: relative; }

/* lo strato colorato: stessa frase, stesso posto, sopra il testo grigio */
.motto-luce {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg,
    #3ab7ff 0%,
    #7a5cff 17%,
    #d94bd0 34%,
    #ff5f6d 50%,
    #ffab3d 67%,
    #3ae0ff 84%,
    #3ab7ff 100%);
  background-size: 200% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: motto-luce 7s linear infinite;
  opacity: 1;
  transition: opacity 1.5s cubic-bezier(.16, .62, .22, 1) 0.45s;
}

.motto-luce.is-off { opacity: 0; }

/* il colore di partenza e quello di arrivo coincidono e lo spostamento e'
   esattamente una piastrella: il giro si chiude su se stesso, senza stacco */
@keyframes motto-luce {
  from { background-position: 0 0; }
  to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .motto-luce { display: none; }
}


/* il progetto che non si puo' raccontare: stessa scheda, niente colore */
.entry-riservato .entry-media {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.26);
  background:
    radial-gradient(120% 105% at 30% 20%, rgba(255,255,255,0.05) 0%, transparent 60%),
    linear-gradient(150deg, #101013 0%, #0a0a0c 100%);
  border: 1px solid rgba(255,255,255,0.07);
}

.entry-riservato .entry-media svg { width: 26%; height: 26%; }
.entry-riservato h3 { color: var(--ink-2); }

.entry-riservato:hover .entry-media { color: rgba(255,255,255,0.42); }
.entry-riservato .entry-media { transition: color var(--t-norm); }

/* sul telefono i comandi devono essere prendibili col pollice:
   sotto i 44px di lato si sbaglia bersaglio */
@media (max-width: 760px) {
  .menu-btn {
    padding: 12px 4px 12px 14px;
    margin: -12px -4px -12px 0;
  }

  .site-header .wordmark {
    padding: 12px 14px 12px 0;
    margin: -12px 0;
  }

  .copy-mail,
  .offer-foot > a,
  .offer-foot > button {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .scroll-cue { padding: 12px 0 12px 14px; margin: -12px 0; }
}