/* Inter Tight (SIL Open Font License), ospitato sul sito invece che da Google Fonts */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("fonts/inter-tight-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --fuchsia: #E71D73;
  --blush: #F2A9C6;
  --paper: #ECEAE5;
  --ink: #0B0B0B;
  --mute: rgba(11, 11, 11, .55);
  --gut: clamp(16px, 1.6vw, 28px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ---------- Puntatore: il "60" in Helvetica Bold (sagoma vera delle cifre), con un filo bianco
   per leggersi su ogni fondo. Su link e comandi diventa fucsia. ---------- */
html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='29' viewBox='-6 -6 112.4 85.3'%3E%3Cpath d='M27.4 25.5Q36.9 25.5 42.9 31.9Q48.9 38.3 48.9 48.3Q48.9 58.2 43.0 65.8Q37.1 73.3 24.7 73.3Q11.3 73.3 4.9 62.2Q0.0 53.4 0.0 39.6Q0.0 31.5 0.7 26.4Q1.9 17.4 5.4 11.4Q8.4 6.2 13.4 3.1Q18.3 0.0 25.1 0.0Q35.0 0.0 40.8 5.1Q46.7 10.1 47.4 18.5L33.5 18.5Q33.5 16.8 32.2 14.7Q30.0 11.4 25.4 11.4Q18.7 11.4 15.8 19.0Q14.2 23.2 13.6 31.4Q16.2 28.4 19.6 27.0Q23.0 25.5 27.4 25.5ZM18.1 38.8Q14.0 42.0 14.0 49.1Q14.0 54.8 17.0 58.4Q20.1 62.0 24.9 62.0Q29.5 62.0 32.2 58.5Q34.8 55.0 34.8 49.5Q34.8 43.3 31.8 40.0Q28.8 36.7 24.4 36.7Q20.8 36.7 18.1 38.8ZM76.0 73.2Q62.5 73.2 57.1 63.8Q51.6 54.3 51.6 36.8Q51.6 19.2 57.1 9.7Q62.5 0.2 76.0 0.2Q89.6 0.2 95.0 9.7Q100.4 19.2 100.4 36.8Q100.4 54.3 95.0 63.8Q89.6 73.2 76.0 73.2ZM84.2 55.4Q86.1 49.0 86.1 36.8Q86.1 24.0 84.2 17.8Q82.2 11.7 76.0 11.7Q69.8 11.7 67.8 17.8Q65.8 24.0 65.8 36.8Q65.8 49.0 67.8 55.4Q69.8 61.9 76.0 61.9Q82.2 61.9 84.2 55.4Z' fill='%230B0B0B' stroke='%23FFFFFF' stroke-width='9' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 19 14, auto; }
a, button, .svc__head, .cmp__range, [role="button"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='29' viewBox='-6 -6 112.4 85.3'%3E%3Cpath d='M27.4 25.5Q36.9 25.5 42.9 31.9Q48.9 38.3 48.9 48.3Q48.9 58.2 43.0 65.8Q37.1 73.3 24.7 73.3Q11.3 73.3 4.9 62.2Q0.0 53.4 0.0 39.6Q0.0 31.5 0.7 26.4Q1.9 17.4 5.4 11.4Q8.4 6.2 13.4 3.1Q18.3 0.0 25.1 0.0Q35.0 0.0 40.8 5.1Q46.7 10.1 47.4 18.5L33.5 18.5Q33.5 16.8 32.2 14.7Q30.0 11.4 25.4 11.4Q18.7 11.4 15.8 19.0Q14.2 23.2 13.6 31.4Q16.2 28.4 19.6 27.0Q23.0 25.5 27.4 25.5ZM18.1 38.8Q14.0 42.0 14.0 49.1Q14.0 54.8 17.0 58.4Q20.1 62.0 24.9 62.0Q29.5 62.0 32.2 58.5Q34.8 55.0 34.8 49.5Q34.8 43.3 31.8 40.0Q28.8 36.7 24.4 36.7Q20.8 36.7 18.1 38.8ZM76.0 73.2Q62.5 73.2 57.1 63.8Q51.6 54.3 51.6 36.8Q51.6 19.2 57.1 9.7Q62.5 0.2 76.0 0.2Q89.6 0.2 95.0 9.7Q100.4 19.2 100.4 36.8Q100.4 54.3 95.0 63.8Q89.6 73.2 76.0 73.2ZM84.2 55.4Q86.1 49.0 86.1 36.8Q86.1 24.0 84.2 17.8Q82.2 11.7 76.0 11.7Q69.8 11.7 67.8 17.8Q65.8 24.0 65.8 36.8Q65.8 49.0 67.8 55.4Q69.8 61.9 76.0 61.9Q82.2 61.9 84.2 55.4Z' fill='%23E71D73' stroke='%23FFFFFF' stroke-width='9' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E") 19 14, pointer !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.label, .bar__nav, .hero__kicker, .step__text, .project__name, .project__tags {
  text-transform: uppercase; letter-spacing: .01em;
}
.label { font-size: clamp(14px, 1.15vw, 18px); font-weight: 700; }
.logo-slot svg { display: block; width: 100%; height: auto; fill: currentColor; }

/* ---------- Barra ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--gut);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__logo { width: 64px; opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .4s var(--ease); }
body.past-hero .bar__logo, body.past-hero .bar__nav { opacity: 1; transform: none; pointer-events: auto; }
.bar__nav { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .4s, transform .4s var(--ease); display: flex; gap: 1.6em; font-size: clamp(15px, 1.2vw, 19px); font-weight: 700; }
.bar__nav a { position: relative; }
.bar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.bar__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Indicatore ---------- */
.dial {
  position: fixed; right: var(--gut); top: 50%; z-index: 20;
  display: grid; gap: 10px; transform: translateY(-50%);
  opacity: 0; transition: opacity .4s;
}
body.in-method .dial { opacity: 1; }
.dial i {
  width: 10px; height: 10px; background: var(--ink); opacity: .18;
  transition: opacity .3s, background .3s, transform .4s var(--ease);
}
.dial i.on { opacity: 1; background: var(--fuchsia); transform: scale(1.5); }
.dial i.done { opacity: .9; }

/* ---------- Hero ---------- */
.intro { position: relative; height: 100svh; display: flex; flex-direction: column; padding: 0 var(--gut) 7vh; }
.intro__top {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding-top: var(--gut); padding-bottom: 5.7vh;
}
.hero__kicker { text-align: center; white-space: nowrap; font-size: clamp(13px, 1.05vw, 17px); font-weight: 700; line-height: 1.15; margin-bottom: 5.7vh; }
.hero__word { flex: 1; min-height: 0; will-change: transform, opacity; }
.hero__word .logo-slot { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
.hero__word .logo-slot svg { height: 88%; width: auto; max-width: 100%; }
.hero__line {
  position: relative; z-index: 1;
  text-align: center; white-space: nowrap;
  font-size: clamp(22px, 2.4vw, 40px); font-weight: 700; line-height: 1; letter-spacing: -.015em;
  text-transform: uppercase;
}
.m-br { display: none; }
/* entrata */
.hero__word, .hero__line, .hero__kicker { animation: rise 1s var(--ease) both; }
.hero__line { animation-delay: .25s; }
.hero__kicker { animation-delay: .4s; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }

/* ---------- Campiture fucsia ---------- */
/* Forme di colore dietro ai contenuti, mai dritte del tutto: i bordi sono spezzate
   con piccoli cambi di angolo, come tagliate a mano. */
.apertura { position: relative; isolation: isolate; }
.campo { position: absolute; z-index: -1; background: var(--fuchsia); pointer-events: none; }
/* l'apertura è alta 200svh (hero 100 + carosello 100); il riquadro va da 11 a 89svh del carosello.
   Il taglio scende da destra (all'altezza del 18% del riquadro) a sinistra (all'80%). */
.campo--hero {
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 125svh,
    82% calc(133.8svh + 5px), 63% calc(143.1svh - 7px), 47% calc(151svh + 4px),
    31% calc(158.8svh - 5px), 14% calc(167.1svh + 7px), 0 174svh);
}

/* ---------- Showreel ---------- */
.reel { position: relative; z-index: 2; }
.reel__sticky { height: 100svh; display: grid; place-items: center; padding: 0 var(--gut); }
/* fermo: niente apertura, un po' più piccolo dello schermo (78svh, centrato) */
.reel__panel { position: relative; width: min(88vw, 100%); height: 78svh; overflow: hidden; background: var(--ink); }
.reel__frames img { position: absolute; inset: 0; opacity: 0; filter: grayscale(1) contrast(1.06); }   /* i settori in bianco e nero */
.reel__frames img.on { opacity: 1; animation: settle .9s var(--ease) both; }
@keyframes settle { from { transform: scale(1.08); } }
.reel__panel::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
  background: linear-gradient(transparent, rgba(0,0,0,.45)); pointer-events: none;
}
.reel__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: clamp(14px, 1.6vw, 26px); color: #fff; text-transform: uppercase;
}
.reel__sector { max-width: 12ch; font-size: clamp(26px, 4vw, 64px); font-weight: 700; line-height: .9; letter-spacing: -.02em; }
/* indice dei settori: 01 02 … 08, acceso quello in corso */
.reel__index { list-style: none; display: flex; gap: clamp(8px, 1vw, 16px); font-size: clamp(13px, 1.1vw, 17px); font-weight: 700; font-variant-numeric: tabular-nums; }
.reel__index li { opacity: .35; transition: opacity .3s; }
.reel__index li.on { opacity: 1; }

/* ---------- Manifesto ---------- */
.statement {
  min-height: 100svh; display: grid; grid-template-rows: 1fr;
  background: var(--ink); color: var(--paper);
  padding: 18vh var(--gut) var(--gut);
}
.statement--short { min-height: 80svh; padding-bottom: 12vh; }
.big-copy {
  align-self: center; justify-self: center; max-width: 18ch; text-align: center;
  font-size: clamp(34px, 5.6vw, 96px); font-weight: 700; line-height: .95; letter-spacing: -.025em;
  text-transform: uppercase;
}
.big-copy .w { opacity: .14; transition: opacity .25s linear; }
.big-copy .w.lit { opacity: 1; }

/* ---------- Metodo ---------- */
.method { padding-bottom: 22vh; }
.step { padding: 22vh 0 0; }
.step:first-child { padding-top: 6vh; }   /* 01 Capire subito sotto l'onda */
/* "Il nostro metodo": lettere lungo la curva dell'onda, stesso colore carta, base dentro l'onda */
.onda-metodo__testo { font-size: 150px; font-weight: 700; letter-spacing: -.03em; }
.step__head { padding: 0 var(--gut); margin-bottom: 12vh; }   /* spazio per la fascia fucsia che spunta sopra le tessere */
.step__title {
  display: flex; flex-direction: column;
  font-size: clamp(56px, 10.4vw, 180px); font-weight: 700; line-height: .86; letter-spacing: -.035em;
  text-transform: uppercase;
}
.step__title > span { display: block; overflow: hidden; padding-bottom: .04em; }
/* il numero del passaggio: fucsia, più grande, un po' fuori dal margine */
.step__title > .num { color: var(--fuchsia); font-size: 1.45em; line-height: .8; margin-left: -.07em; }
.step__title .wd { display: inline-block; white-space: nowrap; }
.step__title .c { display: inline-block; transform: translateY(105%); transition: transform .8s var(--ease); }
.step.in .step__title .c { transform: none; }
.step__text {
  max-width: 62ch; margin-top: 2.4vh;
  font-size: clamp(14px, 1.15vw, 18px); line-height: 1.2;
  opacity: 0; transform: translateY(14px); transition: opacity .6s .35s, transform .6s .35s var(--ease);
}
.step.in .step__text { opacity: 1; transform: none; }

.strip { position: relative; isolation: isolate; overflow-x: clip; }
.strip__track { display: flex; gap: 14px; padding: 0 var(--gut); width: max-content; will-change: transform; }
/* fascia fucsia ondulata dietro alle tessere: sale verso destra, spunta sopra a destra e sotto a sinistra;
   nei passaggi pari è specchiata, come il verso in cui scorre il carosello */
.strip::before {
  content: ""; position: absolute; inset: -11vh 0 -16vh; z-index: -1; background: var(--fuchsia); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 430C260 330 470 420 730 270S1190 110 1440 30V600C1190 700 960 610 710 760S250 900 0 975Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 430C260 330 470 420 730 270S1190 110 1440 30V600C1190 700 960 610 710 760S250 900 0 975Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.step:nth-of-type(even) .strip::before { transform: scaleX(-1); }

/* Intestazioni a due colonne, alternate: nei passaggi dispari titolo a sinistra e testo a destra,
   nei pari il contrario (zig-zag come i caroselli). Il testo si allinea al fondo del titolo. */
@media (min-width: 761px) {
  .step__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32vw); column-gap: 5vw; align-items: end; }
  .step__title { grid-column: 1; grid-row: 1 / 3; }
  .step__text { grid-column: 2; grid-row: 1; }
  .step__svc { grid-column: 2; grid-row: 2; }
  .step:nth-of-type(even) .step__head { grid-template-columns: minmax(0, 32vw) minmax(0, 1fr); }
  .step:nth-of-type(even) .step__title { grid-column: 2; align-items: flex-end; text-align: right; padding-right: 34px; }   /* non sotto l'indicatore */
  .step:nth-of-type(even) .step__title > .num { margin-left: 0; margin-right: -.05em; }
  .step:nth-of-type(even) .step__text, .step:nth-of-type(even) .step__svc { grid-column: 1; }
}

.step__svc { margin-top: 2.6vh; font-size: clamp(13px, 1.05vw, 16px); font-weight: 700; text-transform: uppercase; color: var(--fuchsia);
  opacity: 0; transform: translateY(14px); transition: opacity .6s .45s, transform .6s .45s var(--ease); }
.step__svc i { font-style: normal; color: var(--mute); margin: 0 .35em; }
.step.in .step__svc { opacity: 1; transform: none; }

/* ---------- Tessere ---------- */
.tile {
  position: relative; flex: none; width: clamp(280px, 30vw, 540px); aspect-ratio: 4 / 5;
  overflow: hidden; background: #DCD9D2;
}
.tile--wide { width: clamp(280px, 30vw, 540px); }   /* stesse misure delle altre: strisce tutte alte uguali */
.tile img { transition: transform 1.2s var(--ease); }
.tile.pos-40 img { object-position: 40% 50%; }
/* tessera "con l'AI": in alto la richiesta, sotto il risultato */
.t-prompt { background: var(--ink); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.t-prompt__q { padding: 12px 14px; background: #1E1E1E; border-radius: 10px; color: #fff; font-size: clamp(14px, 1.05vw, 17px); font-weight: 600; line-height: 1.2; }
.t-prompt__q i { display: inline-block; width: .5em; height: 1em; margin-left: 3px; vertical-align: -.15em; background: var(--fuchsia); animation: blink 1s steps(2) infinite; }
.t-prompt img { flex: 1; min-height: 0; height: auto; border-radius: 4px; }   /* foto orizzontale: tiene la vetrina illuminata nel taglio */
.tile:hover img { transform: scale(1.04); }
.cap {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.cap--light { color: #fff; }

/* post-it */
.t-notes { background: #D7D3CB; }
.t-notes .note {
  position: absolute; width: 46%; aspect-ratio: 1; padding: 10px;
  font-size: clamp(14px, 1.15vw, 18px); font-weight: 700; line-height: 1.05;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.t-notes .n1 { left: 9%; top: 10%; background: var(--blush); transform: rotate(-4deg); }
.t-notes .n2 { right: 8%; top: 22%; background: #FFF27A; transform: rotate(3deg); }
.t-notes .n3 { left: 16%; top: 52%; background: #fff; transform: rotate(2deg); }
.t-notes .n4 { right: 12%; bottom: 8%; background: var(--fuchsia); color: #fff; transform: rotate(-3deg); }

/* chat */
.t-chat { background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 18px 14px 40px; }
.t-chat .b { max-width: 82%; padding: 10px 12px; border-radius: 16px; font-size: clamp(13px, 1vw, 16px); font-weight: 600; line-height: 1.15; }
.t-chat .in { background: #2A2A2A; align-self: flex-start; border-bottom-left-radius: 4px; }
.t-chat .out { background: var(--fuchsia); align-self: flex-end; border-bottom-right-radius: 4px; }

/* lista */
.t-list { background: #fff; padding: 18px 16px; }
.t-list h4 { font-size: 12px; text-transform: uppercase; margin-bottom: 14px; color: var(--fuchsia); }
.t-list li { list-style: none; display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(0,0,0,.12); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.15; }
.t-list li::before { content: ""; flex: none; width: 10px; height: 10px; border: 2px solid var(--ink); transform: translateY(1px); }
.t-list li.ok::before { background: var(--fuchsia); border-color: var(--fuchsia); }

/* frase */
.t-quote { background: var(--fuchsia); padding: 18px; display: flex; align-items: flex-end; }
.t-quote p { font-size: clamp(30px, 2.8vw, 48px); font-weight: 800; line-height: .92; letter-spacing: -.03em; text-transform: uppercase; }

/* palette */
.t-palette { display: grid; grid-template-rows: 3fr 2fr 1.4fr; }
.t-palette div { display: flex; align-items: flex-end; padding: 10px 12px; font-size: 12px; font-weight: 700; }
.t-palette .p1 { background: var(--fuchsia); color: #fff; }
.t-palette .p2 { background: var(--ink); color: #fff; }
.t-palette .p3 { background: #fff; }

/* feed social */
.t-social { background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.t-social .ig-top { display: flex; align-items: center; gap: 10px; }
.t-social .ig-top b { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--fuchsia), #FF8A3D, var(--fuchsia)); padding: 3px; box-shadow: inset 0 0 0 3px #fff; }
.t-social .ig-top span { flex: 1; display: grid; gap: 5px; }
.t-social .ig-top i { height: 6px; background: #E4E1DA; border-radius: 2px; }
.t-social .ig-top i:last-child { width: 60%; }
.t-social .ig-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 3px; }
.t-social .ig-grid img { aspect-ratio: 1; height: auto; }
/* miniature dei riquadri disegnati: il riquadro rifatto quadrato (432×432) e rimpicciolito, così niente viene tagliato */
.t-social .ig-mini { position: relative; aspect-ratio: 1; overflow: hidden; }
.t-social .ig-mini > .tile { position: absolute; left: 0; top: 0; width: 432px; aspect-ratio: 1; transform-origin: 0 0; transform: scale(var(--k, .4)); pointer-events: none; }
.t-social .ig-mini .t-type .aa { font-size: 170px; }

/* carattere */
.t-type { background: #fff; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.t-type .aa { font-size: clamp(120px, 11vw, 190px); font-weight: 700; line-height: .8; letter-spacing: -.05em; }
.t-type .w { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; text-transform: uppercase; }
.t-type .w span { padding: 3px 7px; border: 1.5px solid var(--ink); border-radius: 99px; }

/* moodboard */
.t-mood { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; background: var(--paper); padding: 4px; }

/* wireframe */
.t-wire { background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.t-wire .r { background: #E4E1DA; border-radius: 3px; }
.t-wire .nav { height: 12px; display: flex; justify-content: space-between; background: none; }
.t-wire .nav b { width: 30%; background: var(--ink); border-radius: 3px; }
.t-wire .nav span { width: 40%; background: #E4E1DA; border-radius: 3px; }
.t-wire .hero { flex: 2.2; position: relative; }
.t-wire .hero::after { content: "Prenota"; position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; background: var(--fuchsia); color: #fff; font-size: 11px; text-transform: uppercase; border-radius: 99px; }
.t-wire .row { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: none; }
.t-wire .row i { background: #E4E1DA; border-radius: 3px; }
.t-wire .ln { height: 8px; width: 70%; }
.t-wire .ln.s { width: 45%; }

/* browser con screenshot */
.t-browser { background: var(--ink); padding: 0; display: flex; flex-direction: column; }
.t-browser .top { flex: none; height: 26px; display: flex; gap: 5px; align-items: center; padding: 0 10px; }
.t-browser .top i { width: 7px; height: 7px; border-radius: 50%; background: #444; }
.t-browser .shot { flex: 1; overflow: hidden; }
.t-browser .shot img { object-position: center; }

/* telefono */
.t-phone { background: var(--blush); display: grid; place-items: center; }
.t-phone .ph { width: 54%; aspect-ratio: 9 / 19; background: var(--ink); border-radius: 22px; padding: 6px; }
.t-phone .scr { width: 100%; height: 100%; border-radius: 17px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.t-phone .scr img { height: 55%; }
.t-phone .scr .tx { padding: 8px; display: grid; gap: 5px; }
.t-phone .scr .tx i { height: 5px; background: #E4E1DA; border-radius: 2px; }
.t-phone .scr .tx i:nth-child(2) { width: 70%; }
.t-phone .scr .cta { margin: auto 8px 10px; padding: 7px 0; background: var(--fuchsia); color: #fff; text-align: center; font-size: 9px; text-transform: uppercase; border-radius: 99px; }

/* mirino */
.t-finder::after {
  content: ""; position: absolute; inset: 16px;
  background:
    linear-gradient(#fff, #fff) left top / 22px 2px no-repeat,
    linear-gradient(#fff, #fff) left top / 2px 22px no-repeat,
    linear-gradient(#fff, #fff) right top / 22px 2px no-repeat,
    linear-gradient(#fff, #fff) right top / 2px 22px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 22px 2px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 2px 22px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 22px 2px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 2px 22px no-repeat;
}
.t-finder .rec { position: absolute; top: 24px; left: 26px; z-index: 2; display: flex; gap: 6px; align-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.t-finder .rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #FF3B30; animation: blink 1s steps(2) infinite; }
.t-finder .fmt { position: absolute; top: 24px; right: 26px; z-index: 2; color: #fff; font-size: 12px; font-weight: 700; }
@keyframes blink { 50% { opacity: 0; } }

/* timeline */
.t-edit { background: #1A1A1A; padding: 16px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.t-edit .mon { flex: 1; margin-bottom: 10px; overflow: hidden; }
.t-edit .trk { height: 22px; position: relative; }
.t-edit .trk i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.t-edit .v i { background: #5B6CFF; }
.t-edit .v i:nth-child(2n) { background: #7E8BFF; }
.t-edit .a i { background: #2EBD85; height: 14px; top: 4px; }
.t-edit .head { position: absolute; top: 16px; bottom: 16px; width: 2px; background: var(--fuchsia); left: 30%; animation: play 6s linear infinite; }
@keyframes play { to { left: 92%; } }

/* risultato di ricerca */
.t-serp { background: #fff; padding: 16px 14px; font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
.t-serp .q { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #DADCE0; border-radius: 99px; font-size: 13px; margin-bottom: 18px; }
.t-serp .q::before { content: ""; width: 10px; height: 10px; border: 2px solid #9AA0A6; border-radius: 50%; }
.t-serp .ad { font-size: 11px; color: #202124; margin-bottom: 2px; }
.t-serp .ad b { font-weight: 700; }
.t-serp .ttl { font-size: 17px; color: #1A0DAB; line-height: 1.2; margin-bottom: 4px; }
.t-serp .ds { font-size: 12px; color: #4D5156; line-height: 1.35; }
.t-serp .ghost { margin-top: 16px; display: grid; gap: 6px; }
.t-serp .ghost i { height: 7px; background: #EEE; border-radius: 2px; }
.t-serp .ghost i:nth-child(1) { width: 40%; }
.t-serp .ghost i:nth-child(2) { width: 85%; height: 10px; background: #E3E7FB; }

/* scheda Google */
.t-map { background: #E8E4DA; }
.t-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-map .card { position: absolute; left: 10px; right: 10px; bottom: 10px; background: #fff; border-radius: 12px; padding: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: 400; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.t-map .card b { display: block; font-size: 15px; margin-bottom: 2px; }
.t-map .card small { color: #188038; font-size: 12px; }
.t-map .btns { display: flex; gap: 6px; margin-top: 10px; }
.t-map .btns span { flex: 1; text-align: center; padding: 6px 0; border: 1px solid #DADCE0; border-radius: 99px; font-size: 11px; color: #1A73E8; }
.t-map .pin { position: absolute; left: 50%; top: 32%; width: 26px; height: 26px; background: var(--fuchsia); border-radius: 50% 50% 50% 0; transform: translate(-50%, -50%) rotate(-45deg); animation: drop 2.4s var(--ease) infinite; }
.t-map .pin::after { content: ""; position: absolute; inset: 8px; background: #fff; border-radius: 50%; }
@keyframes drop { 0%, 15% { translate: 0 -30px; opacity: 0; } 35%, 85% { translate: 0 0; opacity: 1; } 100% { opacity: 0; } }

/* parole chiave */
.t-keys { background: var(--ink); color: #fff; padding: 18px 14px; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 7px; }
.t-keys span { padding: 7px 11px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 99px; font-size: clamp(13px, 1vw, 15px); }
.t-keys span.hot { background: var(--fuchsia); border-color: var(--fuchsia); }

/* grafico */
.t-chart { background: #fff; padding: 16px; display: flex; flex-direction: column; }
.t-chart h4 { font-size: 12px; text-transform: uppercase; }
.t-chart svg { flex: 1; width: 100%; margin-top: 10px; overflow: visible; }
.t-chart .grid line { stroke: #E4E1DA; stroke-width: 1; }
.t-chart .line { fill: none; stroke: var(--fuchsia); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.8s .3s var(--ease); }
.t-chart .area { fill: var(--fuchsia); opacity: 0; transition: opacity 1s 1.2s; }
.step.in .t-chart .line { stroke-dashoffset: 0; }
.step.in .t-chart .area { opacity: .1; }
.t-bars { background: var(--blush); padding: 16px; display: flex; flex-direction: column; }
.t-bars h4 { font-size: 12px; text-transform: uppercase; }
.t-bars .bs { flex: 1; display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.t-bars .bs i { flex: 1; background: var(--ink); height: 0; transition: height 1s var(--ease); }
.t-bars .bs i:last-child { background: var(--fuchsia); }
.t-bars .ax { display: flex; gap: 8px; margin-top: 6px; font-size: 11px; }
.t-bars .ax span { flex: 1; text-align: center; }

/* ---------- Reparto AI ---------- */
.ai { color: var(--ink); background: var(--fuchsia); padding: 12vh var(--gut) 20vh; position: relative; overflow: hidden; }
/* palco: il metodo, arrivato col fondo sul fondo dello schermo, resta fermo (sticky con top negativo,
   --h-metodo lo calcola main.js) e la sezione AI con l'onda gli scorre sopra */
.palco { position: relative; }
/* manifesto nero fermo; l'onda chiara e il metodo gli scorrono sopra */
.palco--manifesto > .statement { position: sticky; top: min(0px, calc(100svh - var(--h-manifesto, 100svh))); z-index: 0; }   /* mai più in basso della cima: se è più basso dello schermo si ferma in alto */
.palco--manifesto > .palco { z-index: 1; }
.palco--manifesto > .palco > .method { background: var(--paper); }
/* sotto la diagonale fucsia, intorno al carosello, è nero: si unisce al manifesto */
.apertura { background: var(--ink); }
.onda-metodo { position: relative; z-index: 1; margin-bottom: -1px; }
.onda-metodo svg { display: block; width: 100%; height: auto; fill: var(--paper); overflow: visible; }
.onda-metodo__fucsia { fill: var(--fuchsia); }   /* scala con la larghezza: la scritta resta proporzionata all'onda */
.palco > .method { position: sticky; top: min(0px, calc(100svh - var(--h-metodo, 100%))); z-index: 0; }
.palco > .ai { z-index: 1; }
/* onda: bordo alto e basso della sezione AI, due curve morbide (svg allungato sulla larghezza) */
.nuvola { --h: clamp(120px, 13.5vw, 240px); position: relative; z-index: 2; height: var(--h); pointer-events: none; }
.nuvola svg { display: block; width: 100%; height: 100%; fill: var(--fuchsia); }
.nuvola__nera { fill: var(--ink); }   /* l'onda nera che sale davanti al fucsia della sezione AI */
.palco > .method { padding-bottom: 34vh; }   /* respiro tra le ultime tessere e l'onda */
.nuvola + .ai { margin-top: -1px; }
.ai + .nuvola--sotto { margin-top: -1px; }
.ai::before { display: none; }   /* l'alone fucsia non serve sul fondo fucsia */
.ai__kicker { color: var(--ink); margin-bottom: 3vh; }
.ai__title {
  display: flex; flex-direction: column; position: relative;
  font-size: clamp(56px, 12.5vw, 220px); font-weight: 700; line-height: .84; letter-spacing: -.045em; text-transform: uppercase;
}
.ai__title sup { font-size: .32em; color: #fff; vertical-align: top; margin-left: .08em; }
.ai__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; max-width: 560px; font-size: clamp(13px, 1vw, 15px); font-weight: 700; text-transform: uppercase; }
.ai__list li { padding: 11px 0; border-top: 1px solid rgba(11,11,11,.22); }
.ai__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; margin-top: 16vh; }
.ai__card { background: #1A1A1A; border-radius: 14px; padding: 18px; min-height: clamp(300px, 30vw, 440px); display: flex; flex-direction: column; }
.ai__n { font-size: 12px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.ai__n b { color: var(--fuchsia); margin-right: .6em; }
.ai__prompt {
  flex: 1; padding: 16px; border-radius: 10px; background: #0B0B0B; border: 1px solid #333;
  font-size: clamp(18px, 1.6vw, 26px); font-weight: 600; line-height: 1.2;
}
.ai__caret { display: inline-block; width: .5em; height: 1em; background: var(--fuchsia); vertical-align: -.12em; margin-left: 2px; animation: blink 1s steps(2) infinite; }
.ai__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 12px; text-transform: uppercase; }
.ai__chips span { padding: 6px 10px; border-radius: 99px; border: 1.5px solid #444; }
.ai__gen { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai__gen i {
  position: relative; border-radius: 8px; overflow: hidden; border: 2px solid transparent;
  background: #222; transition: border-color .3s;
}
.ai__gen i::before {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(circle at 30% 35%, var(--c1, #E71D73) 0 18%, transparent 42%),
    radial-gradient(circle at 70% 65%, var(--c2, #FF8A3D) 0 16%, transparent 45%),
    radial-gradient(circle at 60% 20%, var(--c3, #3D5AFE) 0 10%, transparent 38%), #151515;
  filter: blur(calc(var(--b, 1) * 22px)); transition: filter 1.4s var(--ease);
  animation: drift 9s ease-in-out infinite alternate;
}
.ai__gen i:nth-child(2) { --c1: #FF8A3D; --c2: #F2A9C6; --c3: #E71D73; }
.ai__gen i:nth-child(3) { --c1: #3D5AFE; --c2: #E71D73; --c3: #FFE066; }
.ai__gen i:nth-child(4) { --c1: #F2A9C6; --c2: #3D5AFE; --c3: #FF8A3D; }
.ai__gen i:nth-child(2n)::before { animation-direction: alternate-reverse; }
.ai__gen.done i::before { --b: .25; }
.ai__gen i.pick { border-color: var(--fuchsia); }
.ai__gen em { position: absolute; left: 8px; bottom: 6px; font-style: normal; font-size: 12px; font-weight: 700; }
.ai__gen i.pick em::after { content: " · Scelta"; color: var(--fuchsia); }
.ai__gen i.pick { box-shadow: 0 0 0 3px rgba(231,29,115,.35); }
@keyframes drift { to { transform: translate(8%, -6%) rotate(20deg); } }
.ai__checks { list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.ai__checks li { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid #333; font-size: clamp(15px, 1.25vw, 19px); opacity: .35; transition: opacity .4s; }
.ai__checks li::before { content: ""; flex: none; width: 12px; height: 12px; border: 2px solid #fff; transition: background .3s, border-color .3s; }
.ai__checks li.ok { opacity: 1; }
.ai__checks li.ok::before { background: var(--fuchsia); border-color: var(--fuchsia); }

/* showreel AI */
.ai__reel { display: grid; grid-template-columns: minmax(0, 600px) minmax(240px, 25vw); justify-content: center; gap: clamp(40px, 6vw, 110px); align-items: center; margin-top: 8vh; position: relative; }
.ai__reel-title { max-width: 16ch; font-size: clamp(30px, 3.6vw, 60px); font-weight: 700; line-height: .95; letter-spacing: -.025em; text-transform: uppercase; }
.ai__reel-title span { color: #fff; }
.ai__reel-lead { margin: 3.2vh 0 4.4vh; max-width: 42ch; font-size: clamp(16px, 1.3vw, 21px); font-weight: 500; line-height: 1.35; color: rgba(11,11,11,.8); }
.ai__note { margin-top: 3vh; font-size: 12px; color: rgba(11,11,11,.6); }
.ai__phone { position: relative; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #1A1A1A;
  box-shadow: 0 0 0 1px #2A2A2A, 0 40px 120px -30px rgba(231,29,115,.45); }
.ai__progress { display: block; height: 3px; margin: 14px auto 0; width: 40%; border-radius: 2px; background: rgba(11,11,11,.2); overflow: hidden; }
.ai__progress i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.ai__video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Servizi ---------- */
.step--services .svc-label { padding: 0 var(--gut); margin: 2vh 0 2.4vh; color: var(--fuchsia); }
.step--services .svc-list { margin: 0 var(--gut); }
.services { padding: 18vh var(--gut) 14vh; }
.services__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5vh; }
.services__title { font-size: clamp(48px, 9vw, 160px); font-weight: 700; line-height: .86; letter-spacing: -.04em; text-transform: uppercase; }
.svc-list { list-style: none; border-bottom: 1.5px solid var(--ink); }
.svc { border-top: 1.5px solid var(--ink); }
.svc__head {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 4.5em 1.25fr 1fr 28px; gap: 2vw; align-items: center;
  padding: clamp(16px, 2.2vw, 30px) 0;
}
.svc__head:focus-visible { outline: 2px solid var(--fuchsia); outline-offset: 4px; }
.svc__n { font-size: clamp(14px, 1.15vw, 18px); font-weight: 700; font-variant-numeric: tabular-nums; transition: color .3s; }
.svc__name { font-size: clamp(22px, 3vw, 50px); font-weight: 700; line-height: .95; letter-spacing: -.025em; text-transform: uppercase; transition: transform .45s var(--ease); }
.svc__claim { font-size: clamp(14px, 1.2vw, 19px); font-weight: 600; line-height: 1.2; color: var(--mute); }
.svc__plus { position: relative; width: 22px; height: 22px; justify-self: end; }
.svc__plus::before, .svc__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .4s var(--ease); }
.svc__plus::after { transform: rotate(90deg); }
.svc:hover .svc__name { transform: translateX(10px); }
.svc.open .svc__n { color: var(--fuchsia); }
.svc.open .svc__plus::after { transform: rotate(0); }
.svc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.svc.open .svc__body { grid-template-rows: 1fr; }
.svc__inner { overflow: hidden; padding-left: calc(4.5em + 2vw); }
.svc__tags { display: flex; flex-wrap: wrap; gap: 8px; max-width: 900px; }
.svc__tags span { padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 99px; font-size: clamp(13px, 1vw, 15px); font-weight: 600; }
.svc__close { max-width: 52ch; margin: 18px 0 clamp(22px, 2.6vw, 36px); font-size: clamp(16px, 1.3vw, 21px); font-weight: 500; line-height: 1.35; }

/* ---------- Settori ---------- */
.sectors { min-height: 0; display: block; padding-top: 22vh; padding-bottom: 22vh; }
.sectors .big-copy { max-width: 18ch; margin: 0 auto; display: block; }
.sec__n { font-size: 12px; font-weight: 700; color: var(--fuchsia); }

/* prima / dopo */
.ai__compare { margin: 18vh auto 0; position: relative; width: min(100%, calc(76svh * 1807 / 1320)); }
.ai__compare .ai__reel-title { max-width: none; margin-bottom: 5vh; }
.cmp { position: relative; aspect-ratio: 1807 / 1320; overflow: hidden; background: #111; user-select: none; touch-action: pan-y; }
.cmp__img { position: absolute; inset: 0; pointer-events: none; }
.cmp__img--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.cmp__line i { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.cmp__line i::before, .cmp__line i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.cmp__line i::before { left: 8px; border-right-color: var(--ink); }
.cmp__line i::after { right: 8px; border-left-color: var(--ink); }
.cmp__tag { position: absolute; top: 16px; padding: 7px 12px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; pointer-events: none; }
.cmp__tag--l { left: 16px; }
.cmp__tag--r { right: 16px; background: var(--fuchsia); }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }

/* ---------- Lavori ---------- */
.work__label { padding: 22vh var(--gut) 5vh; }
.work {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14vh var(--gut);
  padding: 4vh var(--gut) 22vh;
  position: relative; isolation: isolate;
}
.project { display: block; }
.project--low { margin-top: 28vh; }
.project__img { aspect-ratio: 4 / 5; overflow: hidden; background: #DCD9D2; }
.project__img img { transition: transform 1.2s var(--ease); }
.project:hover .project__img img { transform: scale(1.04); }
.project__name { margin-top: 12px; font-size: clamp(14px, 1.15vw, 18px); font-weight: 700; }
.project__tags { display: flex; gap: 1.2em; font-size: clamp(12px, 1vw, 15px); color: var(--mute); }

/* ---------- Footer ---------- */
/* chiusura sul fucsia dell'hero: etichette piccole, contatti grandi, logo enorme che esce dal bordo */
.onda-foot { height: clamp(70px, 8vw, 140px); background: var(--fuchsia); margin-bottom: -1px; }
.onda-foot svg { display: block; width: 100%; height: 100%; fill: var(--ink); }
body.on-dark .bar { color: #fff; }
.foot { position: relative; overflow: hidden; min-height: 100svh; background: var(--ink); color: #fff; padding: 14vh var(--gut) var(--gut); }
.foot__block + .foot__block { margin-top: 9vh; }
.foot__label { margin-bottom: .7em; font-size: clamp(14px, 1.15vw, 18px); font-weight: 700; text-transform: uppercase; }
.foot__big { font-size: clamp(32px, 4.4vw, 72px); font-weight: 600; line-height: 1.06; letter-spacing: -.02em; }
.foot__big a:hover { color: var(--fuchsia); }
.foot__links a { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .12em; }
.foot__copy { position: absolute; left: var(--gut); bottom: var(--gut); font-size: clamp(13px, 1.05vw, 16px); font-weight: 600; }
.foot__logo { position: absolute; right: var(--gut); bottom: var(--gut); width: 48vw; color: var(--fuchsia); pointer-events: none; }   /* intero, appoggiato in basso a destra */

/* ---------- Telefono ---------- */
@media (max-width: 760px) {
  .hero__word .logo-slot svg { width: 100%; height: auto; }
  .hero__kicker { white-space: normal; }
  .hero__line { white-space: normal; font-size: 26px; }
  .m-br { display: inline; }
  .hero__line { text-align: left; }
  .tile { width: 78vw; }
  .tile--wide { width: 78vw; }
  /* telefono: niente schermo intero vuoto attorno al carosello dei settori e al manifesto */
  .reel__sticky { height: auto; padding: 6svh var(--gut); }
  /* telefono: il manifesto resta alto quanto lo schermo (così dietro l'onda c'è sempre il suo nero),
     ma il testo sta in alto invece che al centro, per non lasciare vuoto sotto il carosello */
  .statement { padding: 14vh var(--gut) var(--gut); }
  .statement .big-copy { align-self: start; }
  .reel__cap { flex-direction: column; align-items: flex-start; gap: 12px; }   /* numeri sotto il nome del settore */
  .reel__index { gap: 9px; font-size: 12px; }
  .work { grid-template-columns: 1fr; gap: 8vh; }
  .project--low { margin-top: 0; }
  .ai__flow { grid-template-columns: 1fr; }
  .ai__card { min-height: 260px; }
  .ai__reel { grid-template-columns: 1fr; margin-top: 2vh; padding-right: 0; }
  .ai__flow { margin-top: 10vh; }
  .svc__head { grid-template-columns: 2.4em 1fr 22px; row-gap: 6px; }
  .svc__claim { grid-column: 2 / 3; }
  .svc__plus { grid-row: 1; grid-column: 3; }
  .svc__inner { padding-left: calc(2.4em + 2vw); }
    .ai__player { width: min(70vw, 330px); justify-self: center; order: -1; }
  .foot { min-height: 0; padding-bottom: calc(56vw + var(--gut) * 2); }
  .foot__big { font-size: 30px; }
  .foot__logo { width: calc(100vw - var(--gut) * 2); }
  .foot__copy { position: static; margin-top: 8vh; }
  .dial { right: 8px; gap: 8px; }
  .dial i { width: 7px; height: 7px; }
}

/* ---------- Prova: testi senza effetti (per tornare indietro basta togliere questo blocco) ---------- */
.hero__word, .hero__line, .hero__kicker { animation: none; }
.step__title .c { transform: none; transition: none; }
.step__text, .step__svc { opacity: 1; transform: none; transition: none; }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .step__title .c, .step__text, .step__svc { transform: none; opacity: 1; }
  .big-copy .w { opacity: 1; }
  .t-chart .line { stroke-dashoffset: 0; }
}