/* 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, summary, .svc__head, .cmp__range, [role="button"], .reel__panel { 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.a-colori { filter: none; }   /* alcuni settori restano a colori (colore: true in tiles.js) */
.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; padding: 6px 0; }   /* un po' d'area in più per il dito */
.reel__panel { -webkit-tap-highlight-color: transparent; user-select: none; }
.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; }
@media (orientation: landscape) {   /* schermi larghi: testo in alto, così sotto resta spazio prima dell'onda del metodo */
  .palco--manifesto > .statement { padding-top: 14vh; }
  .palco--manifesto > .statement .big-copy { align-self: start; }
}
.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; touch-action: pan-y; user-select: none; -webkit-user-select: none; }   /* su/giù al browser, di lato al carosello */
.strip img { -webkit-user-drag: none; }
.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); }
/* dietro alla fascia fucsia una nera, di forma un po' diversa, che spunta sotto dove il fucsia scende oltre le foto
   (sopra no: lì ci sono i testi). Stessa regola delle onde: due colori, due forme */
.strip::after {
  content: ""; position: absolute; inset: -11vh 0 -22vh; z-index: -2; background: var(--ink); 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 417 L32 406 L64 397 L95 389 L126 383 L157 378 L187 373 L217 370 L247 367 L277 365 L306 363 L336 361 L365 359 L394 357 L424 354 L453 351 L483 347 L513 342 L543 336 L573 329 L604 320 L635 310 L666 298 L698 283 L730 267 L762 250 L794 234 L825 220 L856 207 L886 194 L915 183 L945 173 L974 163 L1003 154 L1032 146 L1060 138 L1089 130 L1117 123 L1146 116 L1174 109 L1203 103 L1231 96 L1260 89 L1289 82 L1319 75 L1348 68 L1378 60 L1409 51 L1440 42 L1440 606 L1409 620 L1378 632 L1347 644 L1316 654 L1286 663 L1256 670 L1225 677 L1195 682 L1165 687 L1135 691 L1105 694 L1075 697 L1045 700 L1015 702 L985 704 L955 706 L925 709 L894 713 L864 717 L834 722 L803 729 L772 738 L741 748 L710 761 L679 774 L648 786 L618 798 L588 808 L558 818 L529 828 L499 837 L470 846 L441 855 L413 863 L384 872 L355 880 L326 889 L297 897 L269 906 L240 915 L211 924 L181 933 L152 942 L122 951 L92 961 L62 970 L31 980 L0 990Z'/%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 417 L32 406 L64 397 L95 389 L126 383 L157 378 L187 373 L217 370 L247 367 L277 365 L306 363 L336 361 L365 359 L394 357 L424 354 L453 351 L483 347 L513 342 L543 336 L573 329 L604 320 L635 310 L666 298 L698 283 L730 267 L762 250 L794 234 L825 220 L856 207 L886 194 L915 183 L945 173 L974 163 L1003 154 L1032 146 L1060 138 L1089 130 L1117 123 L1146 116 L1174 109 L1203 103 L1231 96 L1260 89 L1289 82 L1319 75 L1348 68 L1378 60 L1409 51 L1440 42 L1440 606 L1409 620 L1378 632 L1347 644 L1316 654 L1286 663 L1256 670 L1225 677 L1195 682 L1165 687 L1135 691 L1105 694 L1075 697 L1045 700 L1015 702 L985 704 L955 706 L925 709 L894 713 L864 717 L834 722 L803 729 L772 738 L741 748 L710 761 L679 774 L648 786 L618 798 L588 808 L558 818 L529 828 L499 837 L470 846 L441 855 L413 863 L384 872 L355 880 L326 889 L297 897 L269 906 L240 915 L211 924 L181 933 L152 942 L122 951 L92 961 L62 970 L31 980 L0 990Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.step:nth-of-type(even) .strip::after { 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; }
/* l'onda parte già dentro il manifesto, sotto il testo: sale con la pagina, poi il manifesto si ferma e sale solo lei.
   Così sotto il manifesto non resta mai una fascia scoperta (anche quando Safari rimpicciolisce la barra) */
.palco--manifesto > .onda-metodo { margin-top: -10svh; }
.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: 20vh;   /* respiro tra il titolo e il video */ 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: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--fuchsia); }
/* due frecce sottili, una per lato */
.cmp__line i::before, .cmp__line i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4.5px; border: solid #fff; border-width: 0 0 2px 2px; }
.cmp__line i::before { left: 11px; transform: rotate(45deg); }
.cmp__line i::after { right: 11px; transform: rotate(-135deg); }
/* invito a usarlo: piccolo, minuscolo, pulsa piano; sparisce al primo tocco */
.cmp__hint {
  position: absolute; top: calc(50% + 34px); left: var(--pos); translate: -50% 0; z-index: 2; pointer-events: none; white-space: nowrap;
  color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.6);
  animation: invito 1.8s ease-in-out infinite; transition: opacity .4s;
}
@keyframes invito { 50% { opacity: .35; } }
.cmp.usato .cmp__hint { opacity: 0; animation: none; }
.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__zona { margin-top: 1.2em; font-size: clamp(14px, 1.15vw, 18px); font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,.6); }
.foot__lingua { margin-top: .8em; font-size: clamp(14px, 1.15vw, 18px); font-weight: 700; text-transform: uppercase; }
.foot__lingua a { color: rgba(255,255,255,.6); text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .15em; }
.foot__lingua a:hover { color: var(--fuchsia); }
.bar__lang { padding-left: 1.4em; border-left: 2px solid currentColor; }   /* la lingua, staccata dalle voci del menu */
.bar__lang::after { left: 1.4em !important; }   /* la sottolineatura solo sotto la sigla */
.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 */

/* ---------- Domande frequenti ---------- */
.faq { background: var(--ink); color: #fff; padding: 12vh var(--gut) 4vh; }
.faq__title { margin-bottom: 6vh; font-size: clamp(30px, 3.6vw, 60px); font-weight: 700; line-height: .95; letter-spacing: -.025em; text-transform: uppercase; }
.faq__title span { color: var(--fuchsia); }
.faq__item { border-top: 1px solid rgba(255,255,255,.22); }
.faq__item:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.faq__q { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 2.6vh 0; list-style: none; font-size: clamp(18px, 1.8vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; flex: none; color: var(--fuchsia); font-size: 1.5em; font-weight: 500; line-height: .7; transition: transform .25s ease; }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--fuchsia); }
.faq__a { max-width: 62ch; padding-bottom: 3.4vh; font-size: clamp(16px, 1.3vw, 21px); font-weight: 500; line-height: 1.4; color: rgba(255,255,255,.75); }
.faq__a a { color: #fff; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .12em; }
.faq__a a:hover { color: var(--fuchsia); }
.faq + .foot { padding-top: 10vh; }
@media (min-width: 761px) {
  .faq { display: grid; grid-template-columns: 1fr 2fr; column-gap: 4vw; align-items: start; }
}

/* ---------- 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; }
  .palco--manifesto > .onda-metodo { margin-top: -30svh; }
  .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: 10vh; 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; }
}