/* ============================================================
   KAMI STUDIO — crema editoriale + nero/viola brand (dal logo)
   ============================================================ */
:root{
  /* --- palette brand: identica nei due temi --- */
  --viola:#7A3EDB;
  --viola-bright:#A78BFF;
  --viola-deep:#4E2793;
  --lilla:#CDB4F5;
  --menta:#9FE8CE;
  --giallo:#F5D949;
  --ink-2:#0B0B0B;         /* fondale delle scene cinematografiche: sempre scuro */
  /* raggi: tre soli valori, non quindici */
  --r-pill:999px;
  --r-lg:24px;
  --r-md:16px;
  /* movimento: una curva sola, tre durate. Tutto il sito respira allo stesso ritmo */
  --ease:cubic-bezier(.16,1,.3,1);      /* ease-out esponenziale */
  --d1:.22s;   /* micro: colore, opacità */
  --d2:.45s;   /* medio: hover, entrate */
  --d3:.9s;    /* ampio: rivelazioni */
  --font-display:"Archivo",system-ui,sans-serif;
  --font-serif:"Instrument Serif",Georgia,serif;
  --font-body:"Inter",system-ui,sans-serif;

  /* --- tema CHIARO (default) --- */
  --paper:#F3F0E9;         /* superficie delle sezioni chiare */
  --paper-2:#EBE7DD;
  --ink:#101010;           /* testo principale */
  --muted:#5f5c55;
  --card:#fff;             /* card piene sopra la superficie */
  --line:rgba(16,16,16,.08);
  --line-2:rgba(16,16,16,.14);
  --line-3:rgba(16,16,16,.25);
  --wash:rgba(16,16,16,.04);
  --shadow-card:0 1px 2px rgba(16,16,16,.06),0 8px 24px rgba(16,16,16,.08),0 24px 64px rgba(16,16,16,.10);
  --shadow-card-hover:0 2px 4px rgba(16,16,16,.08),0 16px 40px rgba(16,16,16,.14),0 40px 90px rgba(16,16,16,.16);
  --shadow-soft:0 6px 22px rgba(16,16,16,.06);
  --glass-top:rgba(255,255,255,.55);
  color-scheme:light;
}
/* --- tema NOTTE: le sezioni chiare diventano scure, le scene restano scene --- */
:root[data-theme="dark"]{
  --paper:#15131b;         /* un filo più chiaro delle scene: il ritmo resta */
  --paper-2:#1c1926;
  --ink:#F3F0E9;
  --muted:#a09cb0;
  --card:#1e1b27;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --line-3:rgba(255,255,255,.28);
  --wash:rgba(255,255,255,.06);
  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45),0 24px 64px rgba(0,0,0,.5);
  --shadow-card-hover:0 2px 4px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.5),0 40px 90px rgba(0,0,0,.55);
  --shadow-soft:0 6px 22px rgba(0,0,0,.4);
  --glass-top:rgba(255,255,255,.07);
  color-scheme:dark;
}
::selection{background:var(--viola);color:#fff}
/* focus sempre visibile: il cursore custom è nascosto, la tastiera dev'essere di casa */
:focus-visible{
  outline:2.5px solid var(--viola-bright);
  outline-offset:3px;
  border-radius:6px;
}
.svccard:focus-visible,.reelslot video:focus-visible{outline-offset:-3px}
/* salta al contenuto per chi naviga da tastiera/screen reader */
.skip{
  position:absolute;left:1rem;top:-3rem;z-index:300;
  background:var(--ink);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  padding:.7em 1.2em;border-radius:0 0 12px 12px;
  transition:top .2s ease;
}
.skip:focus{top:0}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:clip;   /* MAI hidden: creerebbe uno scroll-container e ucciderebbe position:sticky */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);line-height:1.02;letter-spacing:-.03em}
.soft{color:#98948a}
.acid{color:var(--viola-bright)}
/* accento nei titoli: viola secco, stesso font (niente più corsivo serif ovunque) */
.it{color:var(--viola)}
.only-desktop{display:inline}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;
  background:var(--ink-2);
  display:grid;place-items:center;
  transition:transform .65s cubic-bezier(.76,0,.24,1);
}
.loader.up{transform:translateY(-101%)}
.loader__logo{
  width:clamp(150px,24vw,260px);height:auto;display:block;
  opacity:0;transform:translateY(18px);
  animation:loaderIn .55s cubic-bezier(.2,.8,.2,1) .12s forwards;
}
@keyframes loaderIn{to{opacity:1;transform:none}}
@keyframes spinAst{from{transform:rotate(-180deg) scale(.4)}to{transform:rotate(0) scale(1)}}
body.locked{overflow:hidden}

/* durante il volo dei reel: metto in pausa la striscia clienti (una cosa alla volta) */
body.flying .ticker__track{animation-play-state:paused}

/* ---------- controlli: DUE soli sistemi (piena / quieta) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  padding:.95em 1.7em;border-radius:var(--r-pill);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--d1) var(--ease),box-shadow var(--d2) var(--ease),color var(--d1) var(--ease);
}
.btn svg{flex:0 0 auto}
/* riempimento che sale dal basso: il movimento è nel bottone, non addosso */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--viola-deep);
  transform:translateY(101%);
  transition:transform var(--d2) var(--ease);
}
@media (hover:hover){.btn:hover::before{transform:translateY(0)}}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--viola);color:#fff;box-shadow:0 1px 2px rgba(122,62,219,.2),0 10px 28px -12px rgba(122,62,219,.55)}
.btn--primary:hover{box-shadow:0 2px 6px rgba(122,62,219,.25),0 18px 44px -14px rgba(122,62,219,.6)}
.btn--sm{font-size:.92rem;padding:.8em 1.4em}
.btn--wa{background:var(--viola);color:#fff;padding:.72em 1.35em;font-size:.95rem}
/* quieta: sottolineatura che si disegna da sinistra */
.btn-quiet{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--ink);padding-bottom:.35em;
  transition:color var(--d1) var(--ease);
}
.btn-quiet::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:currentColor;opacity:.25;
  transform:scaleX(1);transform-origin:left;
  transition:opacity var(--d1) var(--ease);
}
.btn-quiet::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--viola);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--d2) var(--ease);
}
.btn-quiet:hover{color:var(--viola)}
@media (hover:hover){.btn-quiet:hover::before{transform:scaleX(1)}}
.btn-quiet span{display:inline-block;transition:transform var(--d2) var(--ease)}
.btn-quiet:hover span{transform:translate(2px,2px)}
/* sui fondali scuri la quieta resta chiara */
.svcscene .btn-quiet,.webs .btn-quiet,.about .btn-quiet,.diff__panel .btn-quiet{color:#fff}
.svcscene .btn-quiet:hover,.webs .btn-quiet:hover,.about .btn-quiet:hover,.diff__panel .btn-quiet:hover{color:var(--viola-bright)}
.webs .btn-quiet::before,.about .btn-quiet::before{background:var(--viola-bright)}

/* etichette sui reel: un solo trattamento, vetro neutro */
.tag{
  position:absolute;z-index:3;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.02em;
  padding:.4em .9em;border-radius:var(--r-pill);
  color:#fff;background:rgba(12,10,16,.55);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  rotate:-4deg;
}


/* indice del carosello servizi e targhetta showreel: unica famiglia, quiete */
.svcscene__count,.showreel__tag{
  font-family:var(--font-display);font-weight:700;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
}

/* usato solo dalla pagina interna siti.html */
.eyebrow{
  font-family:var(--font-display);font-weight:700;font-size:.8rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:1rem;
}
.eyebrow--acid{color:var(--viola-bright)}

/* ---------- nav ---------- */
/* capsula flottante: vetro smerigliato, staccata dai bordi */
.nav{
  position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:50;
  width:min(1180px,calc(100% - 2rem));
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:.5rem .5rem .5rem 1.5rem;
  border-radius:999px;
  background:color-mix(in srgb,var(--paper) 68%,transparent);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glass-top),0 6px 22px rgba(16,16,16,.06);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  transition:top .4s cubic-bezier(.2,.8,.2,1),padding .35s ease,box-shadow .4s ease,background .35s ease,border-color .35s ease;
}
.nav.scrolled{
  top:.6rem;padding-left:1.3rem;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  border-color:var(--line-2);
  box-shadow:inset 0 1px 0 var(--glass-top),0 10px 30px rgba(16,16,16,.1);
}
.nav__logo{display:block;transition:transform .35s cubic-bezier(.34,1.56,.44,1)}
.nav__logo img{height:30px;width:auto;display:block}
.nav__logo:hover{transform:scale(1.05) rotate(-2deg)}
.nav__links{display:flex;gap:.15rem;font-weight:500;font-size:.92rem}
.nav__links a{
  padding:.45em .8em;border-radius:999px;color:var(--ink);opacity:.62;
  transition:opacity var(--d1) var(--ease),background-color var(--d1) var(--ease),color var(--d1) var(--ease);
}
.nav__links a:hover{opacity:1;background:rgba(122,62,219,.09);color:var(--viola-deep)}
.nav__links a.active{opacity:1;color:var(--viola-deep);background:rgba(122,62,219,.1)}
/* interruttore chiaro / notte */
.nav__end{display:flex;align-items:center;gap:.5rem}
.themetog{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--ink);background:transparent;
  border:1px solid var(--line-2);
  cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.themetog:hover{background:var(--wash);border-color:var(--line-3);color:var(--viola)}
/* una sola icona per volta: la specificità dev'essere pari, non a favore di svg */
.themetog .themetog__sun{display:block}
.themetog .themetog__moon{display:none}
:root[data-theme="dark"] .themetog .themetog__sun{display:none}
:root[data-theme="dark"] .themetog .themetog__moon{display:block}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:6.5rem clamp(1rem,4vw,3rem) 3rem;
  position:relative;
  z-index:5;               /* le card in volo passano SOPRA la sezione reel */
}
/* sfondo hero: un solo alone viola tenue, statico */
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hblob{position:absolute;border-radius:50%;filter:blur(100px)}
.hblob-a{
  width:60vw;height:60vw;max-width:760px;max-height:760px;
  left:50%;top:38%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(122,62,219,.14),transparent 62%);
}
.hero__title{
  font-size:clamp(1.9rem,7.2vw,5.6rem);
  font-weight:800;
  max-width:16ch;
}
/* parole che si scrivono */
.hero__title .w{
  display:inline-block;
  opacity:0;filter:blur(8px);transform:translateY(.35em);
  transition:opacity .55s ease,filter .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);
}
.hero__title .w.on{opacity:1;filter:blur(0);transform:none}

/* sottotitolo con gerarchia: elenco leggero, poi la battuta forte */
.hero__sub{margin-top:1.6rem;color:var(--muted);font-size:.98rem;line-height:1.55;max-width:46ch}
.hero__sub b{
  display:block;margin-top:.4rem;
  font-family:var(--font-display);font-weight:700;
  font-size:1.18rem;letter-spacing:-.01em;color:var(--ink);
}
.hero__sub b em{font-style:normal;color:var(--viola)}
.hero__cta{display:flex;gap:1.6rem;align-items:center;margin-top:2rem;flex-wrap:wrap;justify-content:center}
/* palco pulito: mentre le card volano, sottotitolo e CTA si fanno da parte */
.hero.cleared .hero__sub,
.hero.cleared .hero__cta{opacity:0;transform:translateY(30px);pointer-events:none}

/* ---------- ventaglio ---------- */
.fan{
  position:relative;
  width:min(1000px,94vw);
  height:clamp(240px,30vw,330px);
  margin-top:2rem;
  pointer-events:none;   /* le card sono decorative: mai bloccare tap/swipe sotto */
}
.fan__card{
  position:absolute;left:50%;top:50%;
  width:clamp(118px,11.5vw,168px);aspect-ratio:9/16;
  border-radius:var(--r-md);overflow:hidden;background:#141414;
  box-shadow:0 2px 6px rgba(16,16,16,.12),0 18px 40px rgba(16,16,16,.18),0 44px 90px rgba(16,16,16,.16);
  transform:translate(-50%,-50%) rotate(0deg);
  transition:transform 1s cubic-bezier(.22,1,.3,1),box-shadow .4s,opacity .3s;
  will-change:transform;
  outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;
}
.fan__card .tag{overflow:visible}
.fan__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fan__card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 38%);
  pointer-events:none;
}
.fan__meta{
  position:absolute;left:.75em;bottom:.65em;z-index:2;
  display:inline-flex;align-items:center;gap:.5em;
  color:#fff;font-family:var(--font-body);font-size:.62rem;font-weight:600;
}
.fan__meta .play{
  font-style:normal;width:2.3em;height:2.3em;border-radius:50%;
  background:rgba(255,255,255,.95);color:#111;
  display:grid;place-items:center;font-size:.8em;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.fan__card:hover{z-index:10 !important}
.fan .tag{top:8px;right:8px}
.fan .card-a .tag{right:auto;left:8px}
/* posizioni aperte (via JS: .fan.open) */
.fan.open .card-a{transform:translate(calc(-50% - 340px),calc(-50% + 60px)) rotate(-16deg)}
.fan.open .card-b{transform:translate(calc(-50% - 205px),calc(-50% + 22px)) rotate(-9deg)}
.fan.open .card-c{transform:translate(calc(-50% - 70px),calc(-50% + 2px)) rotate(-3deg)}
.fan.open .card-d{transform:translate(calc(-50% + 70px),calc(-50% + 2px)) rotate(3deg)}
.fan.open .card-e{transform:translate(calc(-50% + 205px),calc(-50% + 22px)) rotate(9deg)}
.fan.open .card-f{transform:translate(calc(-50% + 340px),calc(-50% + 60px)) rotate(16deg)}
.fan.open .fan__card:hover{transform-origin:center;scale:1.06}

/* leggero fluttuare a riposo: usa la proprietà `translate` (si compone col
   `transform` del volo), parte quando il ventaglio è pronto, si ferma nel volo */
/* il keyframe parte e finisce a 0 → nessuno scatto quando il bob si attiva;
   delay positivi per sfasare le card senza salti iniziali */
@keyframes fanbob{0%,100%{translate:0 0}25%{translate:0 -7px}75%{translate:0 6px}}
.fan.floating .fan__card{animation:fanbob 3.8s ease-in-out infinite;will-change:translate}
.fan.floating .card-b{animation-duration:4.3s;animation-delay:.25s}
.fan.floating .card-c{animation-duration:3.3s;animation-delay:.5s}
.fan.floating .card-d{animation-duration:4s;animation-delay:.15s}
.fan.floating .card-e{animation-duration:4.5s;animation-delay:.4s}
.fan.floating .card-f{animation-duration:3.5s;animation-delay:.6s}
body.flying .fan.floating .fan__card{animation-play-state:paused}

/* ---------- poster: thumbnail-reel (sostituibili con frame veri) ---------- */
.poster{
  width:100%;height:100%;border-radius:inherit;overflow:hidden;
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;
  font-family:var(--font-display);text-align:left;
  padding:.85em;font-size:1rem;
}
.poster::before{                /* riflesso vetro */
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 32%,transparent 48%);
  pointer-events:none;
}
.poster::after{                 /* vignettatura */
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 8%,transparent 55%,rgba(0,0,0,.22));
  pointer-events:none;
}
.poster>*{position:relative;z-index:1}
.poster__kind{
  align-self:flex-start;
  font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid color-mix(in srgb,currentColor 55%,transparent);
  border-radius:999px;padding:.4em 1em;opacity:.95;
  backdrop-filter:blur(2px);
}
.poster__title{line-height:.92;margin-top:auto;padding:.4em 0}
.poster__title em{display:block;font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.05em;opacity:.9;margin-bottom:.08em}
.poster__title strong{font-size:1.45em;font-weight:900;letter-spacing:-.025em;text-transform:uppercase;display:block}
.poster__meta{display:flex;align-items:center;gap:.55em;font-family:var(--font-body);font-size:.6rem;font-weight:500}
.poster__meta .play{
  width:2.4em;height:2.4em;border-radius:50%;
  background:rgba(255,255,255,.95);color:#111;
  display:grid;place-items:center;font-size:.85em;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.poster__meta .bar{flex:1;height:2.5px;border-radius:3px;background:color-mix(in srgb,currentColor 25%,transparent);overflow:hidden;font-style:normal}
.poster__meta .bar b{display:block;height:100%;width:var(--p,50%);background:currentColor;border-radius:3px}
/* mesh di gradienti per varianti */
.poster-a{
  color:#f9eede;
  background:radial-gradient(90% 70% at 85% 12%,#e8b98a 0%,transparent 50%),
             radial-gradient(80% 80% at 12% 92%,#5b3319 0%,transparent 60%),
             linear-gradient(155deg,#6d4326,#3a2113 78%);
}
.poster-b{
  color:#CBB1FF;
  background:radial-gradient(75% 60% at 82% 88%,rgba(155,107,255,.42) 0%,transparent 55%),
             radial-gradient(60% 50% at 15% 8%,rgba(255,255,255,.09) 0%,transparent 60%),
             linear-gradient(160deg,#131311,#0a0a09 70%);
}
.poster-c{
  color:#f2f1ec;
  background:radial-gradient(80% 60% at 20% 15%,#4a4a48 0%,transparent 55%),
             radial-gradient(70% 60% at 88% 90%,rgba(155,107,255,.16) 0%,transparent 55%),
             linear-gradient(150deg,#242423,#101010 75%);
}
.poster-d{
  color:#182f04;
  background:radial-gradient(90% 70% at 80% 10%,#F1E8FF 0%,transparent 55%),
             radial-gradient(80% 70% at 10% 95%,#9D6BFF 0%,transparent 60%),
             linear-gradient(160deg,#DCC9FB,#B394F0 80%);
}
.poster-e{
  color:#f4edff;
  background:radial-gradient(85% 65% at 82% 12%,#e4d2ff 0%,transparent 50%),
             radial-gradient(85% 75% at 12% 95%,#5d3aa8 0%,transparent 60%),
             linear-gradient(160deg,#a887e0,#6f4cc4 80%);
}
.poster-f{
  color:#452f03;
  background:radial-gradient(90% 70% at 82% 10%,#ffe98f 0%,transparent 55%),
             radial-gradient(80% 70% at 10% 95%,#d99a12 0%,transparent 60%),
             linear-gradient(160deg,#f3cf4e,#e5ab1a 80%);
}

/* ---------- reel: la tab dove atterrano le card della hero ---------- */
.reels{padding:3rem clamp(1.2rem,4vw,3rem) 6rem}
.reels .section-head{margin-bottom:2.2rem}
.reels__row{
  display:flex;gap:1.1rem;justify-content:center;
  max-width:1500px;margin:0 auto;
  scrollbar-width:none;      /* niente barra sotto i reel */
}
.reels__row::-webkit-scrollbar{display:none}
.reelslot{
  position:relative;flex:0 0 auto;
  width:clamp(150px,14.5vw,225px);aspect-ratio:9/16;
  border-radius:var(--r-md);overflow:hidden;background:#141414;
  /* ombra morbida e violacea, non la pozza grigia dura */
  box-shadow:0 18px 40px -18px rgba(60,30,120,.35);
  opacity:0;               /* invisibili finché le card non atterrano */
  /* niente transition sull'opacity: lo scambio card→slot è istantaneo e
     avviene NASCOSTO sotto la card in arrivo (il fade creava un doppio
     bagliore che sembrava un bug) */
  transition:box-shadow .4s ease;
}
@media (hover:hover){
  .reelslot{transition:box-shadow var(--d2) var(--ease),transform var(--d2) var(--ease)}
  .reelslot:hover{box-shadow:0 30px 60px -20px rgba(60,30,120,.5);transform:translateY(-6px)}
}
.reelslot:active{transform:scale(.985)}
.reels.landed .reelslot{opacity:1}
.reelslot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reelslot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent 32%);
  pointer-events:none;
}
.reelslot__title{
  position:absolute;left:.9em;right:.9em;bottom:.8em;z-index:2;
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:.85rem;
  letter-spacing:0;
}
.reelslot__mute{
  position:absolute;top:.6rem;right:.6rem;z-index:3;
  width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45) no-repeat center/1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");
  backdrop-filter:blur(6px);cursor:pointer;
  transition:border-color .25s,transform .25s;
}
.reelslot__mute:hover{border-color:rgba(255,255,255,.7);transform:scale(1.08)}
/* tasto play grande al centro: visibile quando il reel è in pausa */
.reelslot__play{
  position:absolute;inset:0;margin:auto;z-index:3;
  width:3.6rem;height:3.6rem;border-radius:50%;border:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:#141414;
  padding-left:3px;   /* centratura ottica del triangolo */
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.34,1.4,.4,1),opacity .25s;
}
.reelslot__play:hover{transform:scale(1.1)}
.reelslot.playing .reelslot__play{opacity:0;transform:scale(.6);pointer-events:none}
.reelslot.sound .reelslot__mute{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
  border-color:var(--viola-bright);
}

/* ---------- striscia clienti: prova sociale sobria che scorre ---------- */
.ticker{
  overflow:hidden;padding:1.9rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.ticker__track{display:flex;width:max-content;animation:scroll 38s linear infinite}
.ticker__set{
  display:flex;align-items:center;gap:1.4rem;padding-right:1.4rem;
  white-space:nowrap;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.4vw,1.9rem);color:var(--ink);
}
.ticker__lead{
  font-size:.6em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--viola);
}
.ticker__dot{color:var(--viola)}
/* loghi clienti: monocromi e uniformi sulla crema */
.tlogo{
  height:26px;width:auto;display:block;
  filter:grayscale(1) brightness(.25);
  opacity:.8;
}
/* in notturna i loghi vanno schiariti, altrimenti spariscono sul fondo scuro */
:root[data-theme="dark"] .tlogo{filter:grayscale(1) brightness(0) invert(1);opacity:.72}
.tlogo--tall{height:38px}
.tlogo--wide{height:22px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- manifesto: parole che si riempiono allo scroll ---------- */
/* atto scuro: fascia cinematografica con il "3 secondi" gigante */
.manifesto{
  position:relative;overflow:hidden;
  background:var(--ink-2);color:#fff;
  border-radius:var(--r-lg) var(--r-lg) 0 0;   /* si fonde col "Cosa facciamo" scuro sotto */
  padding:clamp(7rem,14vw,11rem) clamp(1.2rem,4vw,3rem) clamp(5rem,10vw,8rem);
}
.manifesto::before{   /* alone viola tenue, coerente con gli altri pannelli scuri */
  content:"";position:absolute;left:-10%;top:-20%;
  width:60vw;max-width:700px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(122,62,219,.16),transparent 62%);
  pointer-events:none;
}
.manifesto__three{
  position:absolute;right:-2%;top:50%;translate:0 -50%;
  font-family:var(--font-display);font-weight:900;line-height:.8;
  font-size:clamp(14rem,34vw,28rem);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(167,139,255,.26);
  pointer-events:none;user-select:none;
}
.manifesto__in{position:relative;max-width:1100px;margin:0 auto}
.manifesto__text{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,4.6vw,4.2rem);
  line-height:1.12;letter-spacing:-.025em;color:#fff;
  max-width:24ch;
}
.manifesto__text b{color:var(--viola-bright)}
/* le parole partono spente e si "inchiostrano" seguendo lo scroll */
.ws{transition:opacity .35s ease,filter .35s ease}
.ws:not(.on){opacity:.14;filter:blur(2.5px)}
@media (prefers-reduced-motion:reduce){.ws{opacity:1 !important;filter:none !important}}

/* ---------- sections base ---------- */
.section-head{max-width:1100px;margin:0 auto 3rem}
.section-head h2{font-size:clamp(1.55rem,4.2vw,3.4rem);font-weight:800}
.section-head--dark h2{color:#fff}

/* ---------- lavori ---------- */
.works{padding:7rem clamp(1.2rem,4vw,3rem)}
.works__grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
}
.work{
  background:var(--card);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
}
.work:hover{transform:translateY(-10px) rotate(-.5deg);box-shadow:var(--shadow-card-hover)}
.work__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.work__media .poster{position:absolute;inset:0;font-size:1.25rem;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.work:hover .work__media .poster{transform:scale(1.045)}
.work__hover{
  position:absolute;left:50%;bottom:1rem;translate:-50% 0;z-index:2;
  background:rgba(16,16,16,.85);color:#fff;
  backdrop-filter:blur(6px);
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
  padding:.6em 1.2em;border-radius:999px;white-space:nowrap;
  opacity:0;transform:translateY(10px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.work:hover .work__hover{opacity:1;transform:none}
.work__info{padding:1.5rem;position:relative}
.work__info .tag{top:-16px;right:1.2rem}
.work__info h3{font-size:1.35rem;margin-bottom:.5rem}
.work__info p{color:var(--muted);font-size:.95rem}

/* ---------- cosa facciamo: scena madre sticky (stile Guerzoni) ---------- */
.svcscene{position:relative;height:430svh;background:var(--ink-2)}
.svcscene__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;
}
.svcscene__bgs{position:absolute;inset:0}
.sbg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.07);
  filter:blur(11px) brightness(.5) saturate(1.05);
  transition:opacity var(--d3) var(--ease),transform 1.4s var(--ease);
}
.sbg.on{opacity:1;transform:scale(1.01)}
.svcscene__shade{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,7,11,.93) 4%,rgba(8,7,11,.5) 45%,rgba(8,7,11,.66) 100%);
}
/* numero gigante in outline: cambia col servizio, vive dietro la card */
.svcscene__num{
  position:absolute;right:2%;top:50%;translate:0 -50%;z-index:1;
  font-family:var(--font-display);font-weight:900;line-height:.8;
  font-size:clamp(11rem,24vw,22rem);letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(167,139,255,.2);
  pointer-events:none;user-select:none;
}
.svcscene__in{
  position:relative;z-index:2;width:100%;
  max-width:1240px;margin:0 auto;
  padding:clamp(5rem,10vh,7rem) clamp(1.2rem,4vw,3rem) clamp(4.6rem,10vh,6.5rem);
}
.svcscene__slides{position:relative;height:min(66svh,620px)}
/* slide = testo a sinistra + card reel nitida a destra */
.sslide{
  position:absolute;inset:0;
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
  opacity:0;pointer-events:none;
  transition:opacity var(--d2) var(--ease);
}
.sslide.on{opacity:1;pointer-events:auto}
.sslide__tx{translate:0 26px;transition:translate var(--d3) var(--ease)}
.sslide.on .sslide__tx{translate:0 0}
.sslide__title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.5rem,5.6vw,5rem);
  line-height:.96;letter-spacing:-.03em;text-transform:uppercase;color:#fff;
}
.sslide__title em{font-style:normal;color:var(--viola-bright)}
.sslide__d{margin:1rem 0 1.6rem;max-width:44ch;font-size:1.02rem;line-height:1.55;color:rgba(255,255,255,.74)}
/* la card: il materiale vero, nitido, in primo piano */
.sslide__card{
  justify-self:center;margin:0;
  height:min(60svh,560px);aspect-ratio:9/16;
  border-radius:18px;overflow:hidden;
  outline:1px solid rgba(255,255,255,.2);outline-offset:-1px;
  box-shadow:0 12px 30px rgba(0,0,0,.4),0 45px 110px rgba(0,0,0,.55);
  transform:rotate(2deg) translateY(18px) scale(.96);
  transition:transform var(--d3) var(--ease);
}
.sslide.on .sslide__card{transform:rotate(2deg) translateY(0) scale(1)}
.sslide__card img{width:100%;height:100%;object-fit:cover;display:block}
/* indice dei servizi: l'attivo si accende */
.svcscene__index{
  position:absolute;left:clamp(1.2rem,4vw,3rem);bottom:clamp(1.6rem,4vh,2.6rem);
  display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
}
.svcscene__index li{
  color:rgba(255,255,255,.38);
  display:flex;align-items:center;gap:.55em;
  transition:color var(--d1) var(--ease);
}
.svcscene__index li::before{
  content:"";width:7px;height:7px;border-radius:2px;
  background:rgba(255,255,255,.22);
  transition:background-color var(--d1) var(--ease);
}
.svcscene__index li.on{color:#fff}
.svcscene__index li.on::before{background:var(--viola-bright)}
.svcscene__count{display:none}
@media (max-width:900px){
  .svcscene{height:400svh}
  .svcscene__in{padding-top:4.6rem;padding-bottom:4.2rem}
  .svcscene__slides{height:min(74svh,700px)}
  /* mobile: card sopra, testo sotto */
  .sslide{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:1.4rem;align-items:start}
  .sslide__card{grid-row:1;height:min(34svh,320px);transform:rotate(1.5deg) translateY(14px) scale(.97)}
  .sslide.on .sslide__card{transform:rotate(1.5deg) translateY(0) scale(1)}
  .sslide__title{font-size:clamp(1.9rem,8vw,2.6rem)}
  .sslide__d{font-size:.95rem;margin:.7rem 0 1.1rem}
  .svcscene__num{right:-4%;top:30%;font-size:10rem;-webkit-text-stroke-color:rgba(167,139,255,.14)}
  .svcscene__index{display:none}
  .svcscene__count{
    display:block;position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:1.6rem;
    color:rgba(255,255,255,.5);
  }
}
@media (prefers-reduced-motion:reduce){
  .svcscene{height:auto}
  .svcscene__sticky{position:relative;height:auto;display:block;padding:5rem 0 2rem}
  .svcscene__bgs,.svcscene__shade,.svcscene__num,.svcscene__index{display:none}
  .svcscene__slides{height:auto}
  .sslide{position:static;opacity:1;pointer-events:auto;margin-bottom:3.5rem}
  .sslide__tx{translate:none}
  .sslide__card{transform:none}
  .svcscene__count{display:none}
}

@media (max-width:820px){
  .services{padding:4.5rem clamp(1rem,3vw,1.4rem)}
  .svc{grid-template-columns:1fr;gap:.7rem}
  .svccard--wide{grid-column:auto}
  .svccard{padding:1.4rem 1.5rem;gap:1rem}
}

/* ---------- siti web: scena poster + lavori veri ---------- */
.webs{
  background:var(--ink-2);color:#fff;position:relative;overflow:hidden;
  padding:7rem clamp(1.2rem,4vw,3rem) 6rem;
}
.webs::before{
  content:"";position:absolute;right:-14%;top:-10%;
  width:55vw;max-width:680px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(122,62,219,.15),transparent 62%);
  pointer-events:none;
}
.webs__grid{
  position:relative;max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
}
.webs__txt .webs__title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.1rem,4.6vw,4.2rem);
  line-height:.98;letter-spacing:-.03em;text-transform:uppercase;
  color:#fff;margin-bottom:1.3rem;
}
.webs__title em{font-style:normal;color:var(--viola-bright)}
.webs__sub{color:rgba(255,255,255,.72);max-width:46ch;font-size:1.03rem;line-height:1.6;margin-bottom:1.8rem}
.webs__sub b{color:#fff;font-weight:600}
.webs__micro{margin-top:1rem;font-size:.82rem;color:rgba(255,255,255,.45)}
.webs__stage{position:relative}
.webs__stage .mock{max-width:none;margin:0}

/* palco: browser + telefono con profondità */
.mock{
  position:relative;
  max-width:640px;margin:0 auto;
  perspective:1300px;
  transform-style:preserve-3d;
}
/* alone di luce dietro i device: li stacca dal fondo scuro */
.mock::before{
  content:"";position:absolute;z-index:0;
  left:50%;top:52%;width:118%;height:128%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(180,150,255,.20),rgba(122,62,219,.08) 55%,transparent 74%);
  pointer-events:none;
}
.mock__browser,.mock__phone{
  display:block;position:relative;overflow:hidden;
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  transition:transform .18s ease-out;
  will-change:transform;
}
.mock__browser{
  border-radius:var(--r-md);
  background:#111;
  outline:1px solid rgba(255,255,255,.22);outline-offset:-1px;
  box-shadow:0 40px 110px rgba(0,0,0,.55),0 12px 34px rgba(122,62,219,.28);
}
/* le immagini reali sono foto scure: un filo di luce per farle respirare */
.ms__shot,.ph__screen img{filter:brightness(1.12) contrast(1.04) saturate(1.06)}
.browser__bar{
  display:flex;align-items:center;gap:.45rem;
  padding:.75rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.browser__url{
  margin-left:.8rem;flex:1;text-align:center;
  background:rgba(255,255,255,.06);border-radius:8px;
  font-family:var(--font-body);font-size:.72rem;color:rgba(255,255,255,.5);
  padding:.35em 1em;
}
.ms__shot{display:block;width:100%;height:auto}
/* telefono in primo piano, più vicino alla camera */
.mock__phone{
  position:absolute;left:-11%;bottom:-10%;
  width:31%;aspect-ratio:9/18.5;
  border-radius:var(--r-md);
  border:5px solid #191919;background:#191919;
  box-shadow:0 34px 80px rgba(0,0,0,.65),0 8px 24px rgba(0,0,0,.5);
  transform:translateZ(80px) rotate(-5deg) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  z-index:2;
}
.ph__screen{
  display:block;position:absolute;inset:0;border-radius:var(--r-md);overflow:hidden;
  background:#0d0d0d;
}
.ph__screen img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- showreel: zoom scroll-linked fino a tutto schermo ---------- */
.showreel{position:relative;height:240svh;background:var(--ink-2)}
.showreel__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}
.showreel__frame{
  position:relative;width:100vw;height:100svh;
  transform:scale(.52);
  border-radius:var(--r-lg);
  overflow:hidden;background:#0d0b11;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  will-change:transform;
}
.showreel__frame video{width:100%;height:100%;object-fit:cover;display:block}
.showreel__tag{
  position:absolute;left:clamp(1.2rem,3vw,2rem);bottom:clamp(1.1rem,2.6vw,1.8rem);
  color:rgba(255,255,255,.85);
}
@media (prefers-reduced-motion:reduce){
  .showreel{height:auto}
  .showreel__sticky{position:relative;height:auto;padding:4rem clamp(1.2rem,4vw,3rem)}
  .showreel__frame{width:100%;height:auto;aspect-ratio:16/9;transform:none;border-radius:var(--r-md)}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){
  .showreel__frame{aspect-ratio:9/16}
}

.webs__more{
  display:inline-block;margin-top:1.6rem;
  font-family:var(--font-display);font-weight:700;color:rgba(255,255,255,.6);
  border-bottom:1.5px solid rgba(255,255,255,.22);
  padding-bottom:.15em;
  transition:color .25s,border-color .25s;
}
.webs__more:hover{color:#fff;border-color:var(--viola-bright)}

@media (max-width:900px){
  .webs{padding:4.5rem clamp(1rem,3vw,1.4rem) 4rem}
  .webs__grid{grid-template-columns:1fr;gap:3rem}
  .webs__stage .mock{max-width:430px;margin:0 auto}
  .mock__browser{transform:rotate(-1.3deg)}
  .mock__phone{left:-2%;bottom:-9%;width:34%;transform:translateZ(0) rotate(-6deg)}
}
@media (prefers-reduced-motion:reduce){
  .mock__browser,.mock__phone{transition:none}
}

/* ---------- come lavoriamo (stack on scroll) ---------- */
.process{
  background:var(--ink-2);
  height:380vh;               /* pista di scroll */
  position:relative;
}
.process__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:6rem clamp(1.2rem,4vw,3rem) 0;
}
.process__sticky::before{   /* alone viola tenue: il nero non è più un vuoto */
  content:"";position:absolute;right:-12%;top:8%;
  width:55vw;max-width:640px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(122,62,219,.14),transparent 62%);
  pointer-events:none;
}
/* numero gigante che segue lo step che atterra (solo schermi larghi) */
.process__big{
  position:absolute;left:1.5%;top:54%;translate:0 -50%;
  font-family:var(--font-display);font-weight:900;line-height:1;
  font-size:clamp(8rem,11vw,11rem);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(167,139,255,.24);
  pointer-events:none;user-select:none;
  display:none;
}
@media (min-width:1200px){.process__big{display:block}}
.process .section-head{text-align:center;margin-bottom:2rem}
.process__stack{
  position:relative;
  width:min(880px,94vw);
  flex:1;
  max-height:56svh;
}
.step{
  position:absolute;inset:0 0 auto;
  border-radius:var(--r-md);
  padding:1.5rem 1.9rem 1.8rem;
  transform:translateY(120vh);      /* fuori, sotto */
  will-change:transform;
  color:#fff;
  background:linear-gradient(165deg,#191320,#0e0b12 75%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 -18px 50px rgba(0,0,0,.55);
  min-height:190px;
}
.step header{display:flex;align-items:center;gap:1.1rem;margin-bottom:.7rem}
.step__num{
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  letter-spacing:.04em;
}
.step__num{color:var(--viola-bright)}
.step h3{font-size:clamp(1.3rem,2.6vw,1.7rem);color:#fff}
.step p{font-size:1rem;color:rgba(255,255,255,.68);max-width:56ch}

/* ---------- chi siamo: scena con la foto vera di Danilo ---------- */
.about{
  position:relative;overflow:hidden;
  background:#0d0b11;color:#fff;
  min-height:92svh;display:flex;align-items:flex-end;
}
.about__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 12%;
}
.about__shade{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(8,7,11,.95) 8%,rgba(8,7,11,.35) 55%,rgba(8,7,11,.5) 100%),
    linear-gradient(100deg,rgba(8,7,11,.85) 0%,rgba(8,7,11,.3) 52%,transparent 80%);
}
.about__in{
  position:relative;z-index:2;width:100%;
  max-width:1240px;margin:0 auto;
  padding:clamp(6rem,14vh,9rem) clamp(1.2rem,4vw,3rem) clamp(3rem,7vh,4.5rem);
}
.about__in .about__title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.3rem,6vw,5rem);
  line-height:.96;letter-spacing:-.03em;text-transform:uppercase;
  margin-bottom:1.2rem;
}
.about__title em{font-style:normal;color:var(--viola-bright)}
.about__lead{max-width:52ch;color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.6}
.about__stats{display:flex;gap:clamp(1.6rem,4vw,3.2rem);margin:2.2rem 0 2.4rem;flex-wrap:wrap}
.astat b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums;
}
.astat span{
  display:block;margin-top:.5rem;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
@media (max-width:820px){
  .about{min-height:100svh}
  .about__bg{object-position:60% 10%}
}

/* ---------- WhatsApp flottante: invita a scrivere sempre ---------- */
.wafab{
  position:fixed;right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);z-index:60;
  display:inline-flex;align-items:center;gap:.6em;
  background:#25D366;color:#0a2e17;
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  padding:.85em 1.3em .85em 1.05em;border-radius:999px;
  box-shadow:0 10px 30px rgba(37,211,102,.4),0 4px 12px rgba(0,0,0,.2);
  opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.4,.4,1);
}
.wafab.show{opacity:1;transform:none;pointer-events:auto}
.wafab:hover{transform:translateY(-3px) scale(1.03)}
.wafab svg{width:22px;height:22px;flex:0 0 auto}
.wafab__txt{white-space:nowrap}
@media (max-width:600px){
  .wafab__txt{display:none}
  .wafab{padding:.95em;border-radius:50%}
}
@media (prefers-reduced-motion:reduce){.wafab{transition:opacity .3s ease}}

/* ---------- la differenza: confronto Kami vs gli altri ---------- */
.diff{background:var(--paper);padding:3rem clamp(1.2rem,4vw,3rem) 3rem}
.diff__panel{
  max-width:1140px;margin:0 auto;
  border-radius:var(--r-lg);
  padding:clamp(2.4rem,5vw,4rem) clamp(1.4rem,4vw,3.6rem);
  color:#fff;
  background:
    radial-gradient(60% 60% at 88% 2%,rgba(122,62,219,.20),transparent 60%),
    linear-gradient(160deg,#16131c,#0c0a10 74%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(16,16,16,.14),0 0 0 1px var(--line);
}
.diff__head{margin-bottom:clamp(2rem,4vw,3rem)}
.diff__head h2{font-size:clamp(1.55rem,4.2vw,3.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.02}
.diff__sub{margin-top:.9rem;color:rgba(255,255,255,.55);font-size:1.02rem}
.diff__grid{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.6rem);
}
.dcard{
  border-radius:var(--r-md);padding:clamp(1.6rem,3vw,2.2rem);
  display:flex;flex-direction:column;
}
.dcard--no{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.07);
}
.dcard--yes{
  background:
    radial-gradient(80% 60% at 80% 0%,rgba(122,62,219,.18),transparent 60%),
    linear-gradient(165deg,rgba(122,62,219,.12),rgba(122,62,219,.02));
  border:1px solid rgba(167,139,255,.28);
  box-shadow:0 20px 50px rgba(122,62,219,.14);
}
.dcard__lab{
  font-family:var(--font-display);font-weight:700;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:1.5rem;
}
.dcard__lab--kami{
  font-size:1.7rem;letter-spacing:-.02em;text-transform:none;color:#fff;
}
.dcard__lab--kami b{color:var(--viola-bright)}
.dlist{display:flex;flex-direction:column;gap:1.05rem}
.dlist li{
  display:flex;align-items:center;gap:.85rem;
  font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.35;
}
.dcard--no .dlist li{color:rgba(255,255,255,.4);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.dcard--yes .dlist li{color:#fff;font-weight:500}
.ic{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
}
.ic--no{background:rgba(255,255,255,.06);color:rgba(255,255,255,.45)}
.ic--yes{background:var(--viola);color:#fff;box-shadow:0 4px 12px rgba(122,62,219,.4)}
/* badge vs al centro del confronto */
.diff__vs{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.85rem;letter-spacing:.04em;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.diff__cta{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:clamp(1.6rem,3vw,2.2rem);
  padding:1.1em 1.5em;border-radius:var(--r-md);
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:#fff;
  border:1px solid rgba(255,255,255,.16);
  transition:background-color .25s ease,border-color .25s ease;
}
.diff__cta:hover{background:rgba(122,62,219,.14);border-color:rgba(167,139,255,.4)}
.diff__cta svg{transition:transform .25s ease}
.diff__cta:hover svg{transform:translate(2px,-2px)}
.diff__panel.reveal{opacity:0;transform:translateY(24px)}
.diff__panel.reveal.on{opacity:1;transform:none}

/* ---------- contatti: form conversazionale su chiaro ---------- */
.talk{
  background:var(--paper);
  padding:6rem clamp(1.2rem,4vw,3rem) 6rem;
  position:relative;overflow:hidden;
}
.talk::before{  /* alone viola tenue in alto, per legare al brand */
  content:"";position:absolute;left:50%;top:-10%;translate:-50% 0;
  width:70vw;max-width:900px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(122,62,219,.12),transparent 62%);
  pointer-events:none;
}
.talk__head{max-width:720px;margin:0 auto 2.4rem;position:relative;text-align:center}
.talk__head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;color:var(--ink);letter-spacing:-.02em}
.talk__head h2 .it.viola{color:var(--viola)}
.talk__head .soft{color:#a8a2b0}
/* ---- wizard: form classico a step, un mini tour guidato ---- */
.wiz{
  max-width:560px;margin:0 auto;position:relative;
  background:var(--card);border-radius:var(--r-lg);
  padding:clamp(1.8rem,4vw,2.6rem);
  box-shadow:0 2px 8px rgba(60,30,120,.05),0 26px 70px rgba(60,30,120,.12);
  border:1px solid rgba(122,62,219,.1);
}
.wiz__prog{display:flex;gap:.5rem;margin-bottom:1.8rem}
.wiz__prog i{
  flex:1;height:4px;border-radius:3px;background:var(--line-2);
  overflow:hidden;transition:background .3s;
}
.wiz__prog i.done{background:rgba(122,62,219,.35)}
.wiz__prog i.now{background:var(--viola)}
.wiz__view{overflow:hidden}
.wiz__track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.wstep{
  flex:0 0 100%;min-height:150px;
  display:flex;flex-direction:column;justify-content:center;gap:1rem;
  padding:.2rem;
}
.wlab{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.02em;color:var(--ink);
}
.wlab span{font-family:var(--font-body);font-weight:400;font-size:.9rem;color:var(--muted);letter-spacing:0}
.wfield{
  width:100%;
  font-family:var(--font-body);font-size:1.1rem;color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:.85em 1.05em;
  transition:border-color .25s,background .25s;
}
.wfield::placeholder{color:var(--muted)}
.wfield:focus{outline:none;border-color:var(--viola);background:var(--card)}
.wfield--area{resize:none;line-height:1.5;font-size:1.02rem}
/* nav del wizard */
.wiz__nav{display:flex;align-items:center;gap:.9rem;margin-top:1.8rem}
.wiz__back{
  flex:0 0 auto;width:2.7rem;height:2.7rem;border-radius:50%;
  border:1px solid var(--line-3);background:transparent;color:var(--ink);
  font-size:1.1rem;cursor:pointer;
  transition:border-color .25s,opacity .25s,transform .2s;
}
.wiz__back:hover{border-color:var(--viola);color:var(--viola)}
.wiz__back[hidden]{opacity:0;pointer-events:none}
.wiz__count{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--muted)}
.wiz__next{margin-left:auto}
.wiz__send{margin-left:auto;display:flex;gap:.6rem}
.wiz__send[hidden],.wiz__next[hidden]{display:none}
/* chip servizi */
.fchips{display:flex;flex-wrap:wrap;gap:.6rem}
.fchip{
  font-family:var(--font-body);font-weight:500;font-size:.95rem;
  color:#5c584f;
  background:transparent;
  border:1px solid var(--line-3);
  border-radius:999px;padding:.5em 1.1em;
  cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;
}
.fchip:hover{border-color:var(--viola);color:var(--viola)}
.fchip.on{background:var(--viola);border-color:var(--viola);color:#fff}
.contact__mail{color:var(--ink)}
.talk__micro{font-size:.82rem;color:var(--muted);margin-top:1.1rem;text-align:center}
@media (max-width:600px){
  .talk{padding:4.5rem clamp(1rem,3vw,1.2rem) 4.5rem}
  /* step invio: i due bottoni non stanno in riga col contatore → vanno a tutta larghezza sotto */
  .wiz__nav{flex-wrap:wrap;row-gap:1rem}
  .wiz__send{flex:1 1 100%;order:3;margin-left:0}
  .wiz__send .btn{flex:1;padding:.8em 1.1em;font-size:.95rem}
  .wiz__count{margin-left:auto}
  .footer__top{grid-template-columns:1fr;gap:2rem;padding:2.6rem 0 2rem}
  .footer__bottom{flex-direction:column;gap:.3rem;align-items:flex-start}
}

/* ---------- footer ---------- */
.footer{background:var(--ink-2);color:#fff;padding:0 clamp(1.2rem,4vw,3rem)}
.footer__top{
  max-width:1140px;margin:0 auto;
  padding:3.2rem 0 2.6rem;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;
  border-top:1px solid rgba(255,255,255,.09);
}
.footer__brand img{height:34px;width:auto;margin-bottom:1rem}
.footer__brand p{color:rgba(255,255,255,.5);font-size:.95rem;line-height:1.5}
.footer__nav,.footer__contacts{display:grid;gap:.7rem;align-content:start}
.footer__nav a,.footer__contacts a{
  color:rgba(255,255,255,.6);font-size:.95rem;
  transition:color .2s;width:fit-content;
}
.footer__nav a:hover,.footer__contacts a:hover{color:var(--viola-bright)}
.footer__bottom{
  max-width:1140px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2rem 0 1.6rem;
  border-top:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.4);font-size:.85rem;
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease)}
.reveal.on{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .diff__grid{grid-template-columns:1fr;gap:2.4rem}
  .diff__vs{width:48px;height:48px;font-size:.8rem}
  .works__grid{grid-template-columns:1fr;max-width:480px}
  .nav__links{display:none}
  .only-desktop{display:none}
  /* hero mobile: niente altezza forzata a tutto schermo → meno vuoto sopra/sotto */
  .hero{min-height:auto;justify-content:flex-start;padding-top:6.75rem;padding-bottom:2.5rem}
    /* CTA in colonna: bottone pieno + link sotto */
  .hero__cta{flex-direction:column;align-items:center;gap:.9rem;width:100%}
  .hero__cta .btn{width:min(100%,340px);justify-content:center}
  /* ventaglio più raccolto e centrato nel suo box: sparisce il vuoto sopra */
  .fan{height:280px;margin-top:1.1rem}
  .fan__card{width:clamp(98px,24vw,120px)}
  .hblob{filter:blur(70px)}
  .nav.scrolled{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .hblob-a{width:120vw;height:120vw}
  /* padding generoso: l'ombra delle card sfuma DENTRO il contenitore, niente taglio netto */
  .reels{padding-bottom:2.6rem}
  .reels__row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem 1.2rem 2.4rem;-webkit-overflow-scrolling:touch}
  .reelslot{width:172px;scroll-snap-align:center}
  .reels__row{gap:.85rem}
  .fan__card .poster{font-size:.78rem}
  .fan.open .card-a{transform:translate(calc(-50% - 118px),calc(-50% + 18px)) rotate(-15deg)}
  .fan.open .card-b{transform:translate(calc(-50% - 71px),calc(-50% - 6px)) rotate(-9deg)}
  .fan.open .card-c{transform:translate(calc(-50% - 24px),calc(-50% - 22px)) rotate(-3deg)}
  .fan.open .card-d{transform:translate(calc(-50% + 24px),calc(-50% - 22px)) rotate(3deg)}
  .fan.open .card-e{transform:translate(calc(-50% + 71px),calc(-50% - 6px)) rotate(9deg)}
  .fan.open .card-f{transform:translate(calc(-50% + 118px),calc(-50% + 18px)) rotate(15deg)}
  .step p{font-size:.92rem}
  .process__stack{max-height:60svh}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .loader{display:none}
  .hero__title .w,.reveal{opacity:1;filter:none;transform:none;transition:none}
  .ticker__track{animation:none}
  .fan__card{transition:none}
  .fan.floating .fan__card{animation:none;translate:none}
  .process__big{display:none !important}
  .step{transform:none;position:relative;margin-bottom:1rem}
  .process{height:auto}
  .process__sticky{position:relative;height:auto;padding-bottom:4rem}
  .process__stack{max-height:none}
}

/* ============================================================
   RITMO & MOVIMENTO — passata di raffinamento
   ============================================================ */
/* le sezioni che avevano il kicker ora partono dal titolo: recupero il respiro */
.reels .section-head,.process .section-head{margin-bottom:2.6rem}
.diff__head h2,.talk__head h2{margin-top:0}

/* rivelazioni a cascata: i gruppi entrano uno dopo l'altro, non tutti insieme */
.reveal[data-i="1"]{transition-delay:.06s}
.reveal[data-i="2"]{transition-delay:.12s}
.reveal[data-i="3"]{transition-delay:.18s}
.reveal[data-i="4"]{transition-delay:.24s}

/* titoli: una scala sola, e le righe si bilanciano da sole */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* --- DESKTOP: coreografia al puntatore --- */
@media (hover:hover) and (min-width:901px){
  /* le card dei clienti nella striscia si accendono al passaggio */
  .tlogo{transition:opacity var(--d2) var(--ease),filter var(--d2) var(--ease)}
  .ticker:hover .tlogo{opacity:.4}
  .tlogo:hover{opacity:1 !important;filter:grayscale(0) brightness(1)}
  :root[data-theme="dark"] .tlogo:hover{filter:grayscale(0) brightness(1.1)}
  /* i passi del processo reagiscono */
  .step{transition:border-color var(--d2) var(--ease)}
  .step:hover{border-color:rgba(167,139,255,.34)}
  /* il logo in nav respira */
  .nav__logo{transition:transform var(--d2) var(--ease)}
  .nav__logo:hover{transform:scale(1.04)}
}

/* --- MOBILE: niente hover, feedback al tocco e tipografia più stretta --- */
@media (max-width:900px){
  .btn:active,.btn-quiet:active{transform:scale(.97)}
  .sslide__title{letter-spacing:-.035em}
  .hero__sub{margin-top:1.3rem}
  .hero__cta{flex-direction:column;gap:1.1rem;width:100%}
  .hero__cta .btn-quiet{align-self:center}
  /* respiro verticale più contenuto: meno scroll a vuoto */
  .webs{padding-top:5rem;padding-bottom:4.5rem}
  .diff{padding-top:2rem;padding-bottom:2rem}
}

/* il movimento è un di più: chi lo rifiuta vede tutto, fermo */
@media (prefers-reduced-motion:reduce){
  .btn::before,.btn-quiet::before{transition:none}
  .reveal{transition-delay:0s !important}
}

/* =========================================================================
   TEMA CHIARO: le sezioni che restavano scure in entrambi i temi
   -------------------------------------------------------------------------
   Prima quasi tutta la pagina era nera anche col tema chiaro: misurato
   l'89% dell'altezza. Non era un tema chiaro, era una prima schermata
   chiara sopra un sito scuro.

   Qui le sezioni di CONTENUTO passano alla carta, mentre restano scure le
   due che dalla scena traggono senso — lo showreel (e' un cinema) e "chi
   siamo" (e' una foto a tutta pagina) — piu' il footer. Cosi' il tema
   chiaro respira e conserva due momenti scuri che significano qualcosa,
   invece di un unico blocco nero lungo dieci schermate.

   Nel tema notte non cambia niente: vale solo senza data-theme="dark".
   Selettori distesi, senza annidamento: questo CSS gira cosi' com'e',
   senza passare da un compilatore.
   ========================================================================= */

/* Le scene con video di sfondo (manifesto, "cosa facciamo", showreel,
   "chi siamo") restano scure anche col tema chiaro: sotto il video il
   colore non si vedrebbe comunque, e il testo bianco sopra il filmato
   e' quello che le rende leggibili. Sono la spina dorsale
   cinematografica del sito; il tema chiaro agisce sulle sezioni di
   contenuto, che si alternano alle scene invece di sommarsi. */

/* ---- siti web ---- */
:root:not([data-theme="dark"]) .webs{background:var(--paper-2);color:var(--ink)}
:root:not([data-theme="dark"]) .webs__title,
:root:not([data-theme="dark"]) .webs__txt .webs__title{color:var(--ink)}
:root:not([data-theme="dark"]) .webs__sub{color:var(--muted)}
:root:not([data-theme="dark"]) .webs__micro{color:rgba(16,16,16,.45)}
:root:not([data-theme="dark"]) .webs__more{color:var(--viola-deep);border-bottom-color:rgba(78,39,147,.3)}
/* la cornice del browser diventa chiara: dentro ci sono siti veri, e una
   cornice nera sulla carta sembrava un buco nella pagina */
:root:not([data-theme="dark"]) .mock__browser{background:#fff;outline-color:rgba(16,16,16,.14);box-shadow:var(--shadow-card)}
:root:not([data-theme="dark"]) .browser__bar{border-bottom-color:rgba(16,16,16,.08);background:var(--paper)}
:root:not([data-theme="dark"]) .browser__url{background:rgba(16,16,16,.05);color:rgba(16,16,16,.5)}

/* ---- come lavoriamo: lo sfondo si schiarisce, le card restano scure:
   sono il contenuto, e sulla carta risaltano invece di sparire ---- */
:root:not([data-theme="dark"]) .process{background:var(--paper)}
:root:not([data-theme="dark"]) .process .section-head--dark h2{color:var(--ink)}
:root:not([data-theme="dark"]) .process .section-head--dark p{color:var(--muted)}

/* i bottoni "quieti" su fondo ormai chiaro tornano scuri */
:root:not([data-theme="dark"]) .svcscene .btn-quiet,
:root:not([data-theme="dark"]) .webs .btn-quiet{color:var(--ink)}
:root:not([data-theme="dark"]) .svcscene .btn-quiet:hover,
:root:not([data-theme="dark"]) .webs .btn-quiet:hover{color:var(--viola)}

/* i loghi dei clienti dentro "siti web" non vanno piu' invertiti */
:root:not([data-theme="dark"]) .webs .tlogo{filter:none;opacity:.78}

/* =========================================================================
   RIFINITURA — i dettagli che fanno la differenza fra "fatto" e "curato"
   -------------------------------------------------------------------------
   Nessun ridisegno: si lavora su tipografia, respiro, profondita' e
   risposta al tocco. Sono le cose che non si notano una per una ma che
   insieme cambiano quanto vale il sito agli occhi di chi lo apre.
   ========================================================================= */

/* --- 1. Tipografia: il titolo non deve mai spezzarsi male --- */
h1, h2, h3, .webs__title, .sslide__title{text-wrap:balance}
p, .webs__sub, .sslide__d{text-wrap:pretty}
/* i numeri in colonna si allineano */
.svcscene__count, .showreel__tag, [class*="num"]{font-variant-numeric:tabular-nums}
/* il corpo respira: 1.6 e' la misura in cui si legge senza fatica */
body{line-height:1.6;text-rendering:optimizeLegibility}

/* --- 2. Selezione e messa a fuoco: col viola del brand, non col blu di sistema --- */
::selection{background:var(--viola);color:#fff}
:focus-visible{outline:2px solid var(--viola);outline-offset:3px;border-radius:4px}
:root[data-theme="dark"] :focus-visible{outline-color:var(--viola-bright)}

/* --- 3. Bersagli da dito: 44px e' il minimo per non sbagliare mira --- */
@media (hover:none){
  .nav__links a, .btn, .btn-quiet, .footer a, .reelslot__mute{min-height:44px;display:inline-flex;align-items:center}
  .nav__links a{padding-inline:.75rem}
}

/* --- 4. Risposta al tocco: chi preme deve vedere che ha premuto --- */
.btn, .btn--primary, .btn--wa{transition:transform var(--d1) var(--ease),box-shadow var(--d2) var(--ease),background-color var(--d1) var(--ease)}
.btn:active, .btn--primary:active, .btn--wa:active{transform:translateY(1px) scale(.985)}
.btn--primary:hover{box-shadow:0 2px 4px rgba(122,62,219,.25),0 14px 34px -10px rgba(122,62,219,.6)}

/* --- 5. Profondita': le card si sollevano appena, non saltano --- */
.sslide__card, .mock__browser, .step{transition:transform var(--d2) var(--ease),box-shadow var(--d2) var(--ease)}
@media (hover:hover){
  .sslide__card:hover, .mock__browser:hover{transform:translateY(-3px)}
}

/* --- 6. I loghi dei clienti: dal grigio al colore quando ci passi sopra.
       Sono la prova sociale: meritano di essere guardati --- */
.tlogo{transition:filter var(--d2) var(--ease),opacity var(--d2) var(--ease)}
@media (hover:hover){
  :root:not([data-theme="dark"]) .tlogo:hover{opacity:1;filter:none}
}

/* --- 7. Immagini e video: mai una scossa mentre caricano --- */
img, video{max-width:100%;height:auto}
.reelslot video, .mock__browser img{background:var(--wash)}

/* --- 8. Chi preferisce meno movimento lo ottiene davvero --- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Microcopy sotto la CTA della hero: chi arriva da un social non sa
   cosa succede dopo aver scritto. Dirlo toglie l'attrito che ferma
   la maggior parte delle persone a un passo dal contatto. */
.hero__micro{
  margin:.9rem auto 0;max-width:34ch;text-align:center;
  font-family:var(--font-body);font-size:.82rem;line-height:1.5;color:var(--muted);
}
@media (max-width:640px){ .hero__micro{font-size:.78rem;max-width:30ch} }