/* =====================================================================
   DigiBite · sito aziendale — sistema di base
   Grammatica: /lp-reference polo A (scuro editoriale) · brand: /digibite-brand-guidelines
   Mobile first: gli stili di base sono il telefono, i @media (min-width) aggiungono.

   IL VERDE, ACCESSIBILE (contrasti WCAG 2.x calcolati, non stimati)
   Il verde di brand #a4c631 resta identico. Cambia solo DOVE lo si usa:
     - come LUCE su fondo scuro ........ 9.44:1 su #121411, 8.60:1 su #1d1d1b  (AAA)
     - come FONDO sotto testo ink ...... #1d1d1b su #a4c631 = 8.60:1           (AAA)
     - MAI come testo su bianco ........ 1.96:1 (fallisce anche il 3:1 grafico)
     - MAI testo bianco su verde ....... 1.96:1
   Sul chiaro il verde-testo è la stessa tinta, solo più scura:
     #5f721c = 5.37:1 su bianco, 4.97:1 su mist (AA testo)
     #6c8320 = 4.28:1 su bianco, 3.96:1 su mist (AA grafico/UI, non testo corrente)
   ===================================================================== */

@font-face{font-family:"Sansation";src:url("../fonts/Sansation-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sansation";src:url("../fonts/Sansation-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("../fonts/ahn-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("../fonts/ahn-latin-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}

/* ---------- token: tema scuro (default) ---------- */
:root{
  --brand-green:#a4c631;      /* identità: non cambia mai */
  --brand-ink:#1d1d1b;

  --bg:#121411;               /* pagina */
  --bg-alt:#1d1d1b;           /* fasce alterne = ink di brand */
  --card:#22231f;
  --text:#f2f4ec;             /* 16.69 su bg · 14.25 su card */
  --muted:#a9b0a4;            /* 8.32 su bg · 7.10 su card */
  --accent:#a4c631;           /* testo/icone verdi: 9.44 su bg · 8.06 su card */
  --accent-ui:#a4c631;        /* bordi/glifi */
  --accent-fill:#a4c631;      /* fondo bottone */
  --on-accent:#1d1d1b;        /* testo su fondo verde: 8.60 */
  --antex:#a5a8f0;            /* indaco ANTEX leggibile: 8.34 su bg · 7.12 su card */
  --line:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.32);
  --glow:rgba(164,198,49,.20);
  --shade:rgba(0,0,0,.55);
  --header-bg:rgba(24,27,22,.36);   /* liquid glass: sotto si intravede il contenuto, sfocato; la sfocatura forte tiene leggibile il testo */
  --glass-tint:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 45%,rgba(255,255,255,.06));
  --glass-line:rgba(255,255,255,.16);
  --glass-shine:rgba(255,255,255,.22);

  --ff-display:"Sansation","Segoe UI",system-ui,sans-serif;
  --ff-text:"Atkinson Hyperlegible Next","Segoe UI",system-ui,sans-serif;
  --track:.12em;              /* UNICO tracking del sistema, solo maiuscoletti < 20px */
  --tilt:-16deg;              /* l'inclinazione del simbolo «D» del logo */

  --fs-hero:clamp(2.6rem,9vw,6rem);
  --fs-h2:clamp(1.9rem,5.2vw,3.5rem);
  --fs-h3:clamp(1.25rem,2.4vw,1.6rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-eyebrow:.8125rem;

  --pad-x:clamp(1rem,4vw,2.5rem);
  --section:clamp(5rem,12vw,7.5rem);   /* 80px telefono → 120px desktop */
  --container:76rem;
  --nav-full:72rem;   /* = soglia della container query del menu completo nell'header (larghezza del contenuto dell'isola) */
  --bar-h:52px;               /* altezza della barra */
  --header-h:68px;            /* barra + respiro: spazio riservato in cima ai contenuti */
  --bottom-h:64px;
  --text-scale:1;
  --antex-grad:linear-gradient(90deg,#22d3ee,#6366f1 45%,#a855f7 75%,#ec4899);
  color-scheme:dark;
}

/* ---------- tema chiaro (scelto dal pannello accessibilità) ---------- */
:root[data-theme="light"]{
  --bg:#ffffff; --bg-alt:#f5f7ee; --card:#ffffff;
  --text:#1d1d1b;            /* 16.88 su bianco · 15.61 su mist */
  --muted:#565f5f;           /* slate di brand: 6.57 · 6.07 */
  --accent:#5f721c;          /* verde-testo: 5.37 · 4.97 */
  --accent-ui:#6c8320;       /* verde grafico: 4.28 · 3.96 */
  --accent-fill:#a4c631; --on-accent:#1d1d1b;
  --antex:#4f52b8;           /* 6.50 · 6.01 */
  --line:rgba(29,29,27,.14); --line-strong:rgba(29,29,27,.34);
  --glow:rgba(164,198,49,.28); --shade:rgba(29,29,27,.08);
  --header-bg:rgba(255,255,255,.42); --glass-shine:rgba(255,255,255,.95); --glass-line:rgba(29,29,27,.12);
  --glass-tint:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.15) 45%,rgba(255,255,255,.45));
  color-scheme:light;
}
/* ---------- alto contrasto ---------- */
:root[data-theme="contrast"]{
  --bg:#000; --bg-alt:#000; --card:#000;
  --text:#fff; --muted:#fff;
  --accent:#a4c631;          /* 10.70 su nero */
  --accent-ui:#a4c631; --accent-fill:#a4c631; --on-accent:#000;
  --antex:#c3c5ff;
  --line:#fff; --line-strong:#fff; --glow:transparent; --shade:transparent;
  --header-bg:#000;
}
@media (prefers-contrast:more){
  :root:not([data-theme]){--muted:#d6dbd2;--line:rgba(255,255,255,.5);--line-strong:#fff}
}

@font-face{font-family:"Outfit";src:url("../fonts/Outfit.ttf") format("truetype");font-weight:300 800;font-style:normal;font-display:swap}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:calc(100% * var(--text-scale));-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem);
  scrollbar-color:var(--line-strong) var(--bg)}
@media (prefers-reduced-motion:no-preference){html:not([data-motion="reduce"]){scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff-text);font-size:var(--fs-body);line-height:1.75;
  padding-bottom:calc(var(--bottom-h) + env(safe-area-inset-bottom,0px));overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
p a,.prose a{color:var(--accent);text-decoration:underline}
:root[data-links="underline"] a:not(.btn):not(.bottomnav a){text-decoration:underline}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.15;margin:0;text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
::selection{background:var(--accent-fill);color:var(--on-accent)}

/* focus: doppio anello ink + verde, leggibile su qualunque fondo */
:focus-visible{outline:3px solid var(--accent-fill);outline-offset:3px;box-shadow:0 0 0 3px var(--brand-ink)}
:root[data-theme="light"] :focus-visible{outline-color:var(--brand-ink);box-shadow:0 0 0 6px var(--accent-fill)}

.skip{position:absolute;left:1rem;top:-4rem;z-index:300;background:var(--accent-fill);color:var(--on-accent);padding:.75rem 1rem;font-weight:700}
.skip:focus{top:1rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.section{padding:var(--section) 0}
.section--alt{background:var(--bg-alt)}
.section--tight{padding-top:calc(var(--section) * .5)}

/* ---------- tipografia di sezione ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--ff-text);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--accent);margin:0 0 1.25rem}
.eyebrow::before{content:"";width:2rem;height:2px;background:var(--accent-ui);transform:skewX(var(--tilt))}
.title{font-size:var(--fs-h2);letter-spacing:-.01em;margin:-.12em 0 1.25rem}
.title em{font-style:normal;color:var(--accent)}
.lead{font-size:clamp(1.0625rem,1.6vw,1.25rem);color:var(--muted);max-width:38rem}
.head{display:grid;gap:1rem;margin-bottom:clamp(2.5rem,6vw,4rem)}
@media (min-width:900px){.head--split{grid-template-columns:1.2fr 1fr;align-items:end}.head--split .lead{margin:0 0 .4rem}}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;text-align:center;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.75rem 1.4rem;
  font-family:var(--ff-text);font-size:var(--fs-small);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;border-radius:0;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn{text-transform:none;letter-spacing:0}
.btn--primary{background:var(--accent-fill);color:var(--on-accent)}
.btn--primary:hover{background:var(--text);color:var(--bg)}
.btn--ghost{border-color:var(--line-strong);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:var(--accent-ui);color:var(--accent)}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--fs-small);letter-spacing:var(--track);
  text-transform:none;letter-spacing:0;text-decoration:none;color:var(--accent)}
.link-arrow svg{width:1.1em;height:1.1em;transition:transform .3s}
.link-arrow:hover svg{transform:translateX(4px)}
.icon-btn{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--text)}
.icon-btn:hover{border-color:var(--accent-ui);color:var(--accent)}
.icon-btn svg{width:20px;height:20px}

/* ---------- header: isola liquid glass (come antex.cloud) ----------
   Sempre un'isola di vetro: sfocatura + saturazione + riflesso sul bordo alto, con fondo abbastanza
   pieno da reggere il testo sopra le linee verdi della D. In cima è larga quanto il contenuto; allo
   scroll (.is-stuck) si compatta; scendendo si ritira (.is-hidden), risalendo torna. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:calc((var(--header-h) - var(--bar-h)) / 2) var(--pad-x);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),padding .45s cubic-bezier(.2,.7,.2,1)}
.site-header .wrap{container:site-header / inline-size;height:var(--bar-h);max-width:var(--container);padding:0 .35rem 0 1.1rem;display:flex;align-items:center;gap:1rem;
  border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-tint),var(--header-bg);
  -webkit-backdrop-filter:blur(12px) saturate(200%) brightness(1.05);backdrop-filter:blur(12px) saturate(200%) brightness(1.05);
  box-shadow:0 10px 30px var(--shade),inset 0 1px 0 var(--glass-shine),inset 0 -1px 0 rgba(0,0,0,.14);
  transition:max-width .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.site-header.is-stuck{padding-top:.5rem;padding-bottom:.5rem}
/* compattandosi non scende mai sotto la soglia del menu completo (--nav-full): sotto, «Contattaci» usciva dall'isola */
.site-header.is-stuck .wrap{max-width:max(calc(var(--nav-full) + 1.45rem + 2px),calc(var(--container) - 6rem))} /* + padding e bordi dell'isola */
.site-header.is-hidden{transform:translateY(calc(-100% - 4px))}
:root[data-theme="contrast"] .site-header .wrap{background:#000;border-color:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-reduced-motion:reduce){.site-header,.site-header .wrap{transition:none}}
:root[data-motion="reduce"] .site-header,:root[data-motion="reduce"] .site-header .wrap{transition:none}
.logo{flex:none;display:flex;align-items:center;text-decoration:none;margin-right:auto}
.logo img{height:30px;width:auto}
.logo--light{display:none!important}
:root[data-theme="light"] .logo--dark{display:none!important}
:root[data-theme="light"] .logo--light{display:block!important}
.mainnav{display:none}
.header-tools{flex:none;display:flex;align-items:center;gap:.5rem}
.lang{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;text-decoration:none;
  min-height:44px;padding:0 .5rem;color:var(--text)}
.lang:hover{color:var(--accent)}
.lang svg{flex:none;width:20px;height:20px}
@media (max-width:420px){.lang svg{display:none}.header-tools{gap:.25rem}.site-header .wrap{gap:.5rem}}
.header-cta{display:none}
/* switch chiaro/scuro: sul tema scuro mostra il sole (passa al chiaro), sul chiaro la luna; il tema completo resta nel pannello accessibilità */
.theme-toggle .i-moon,:root[data-theme="light"] .theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:block}
@media (min-width:1080px){:root{--bar-h:62px;--header-h:86px}}
/* Menu completo (logo, 5 voci, lingua, tema, CTA): misurato 1140-1153px IT, 1132-1144px EN d'isola, padding compreso
   (2026-10-30, Sansation), cioè ~1130px di contenuto. La container query legge il contenuto (senza padding): soglia 72rem
   = 1152px, con margine; il valore è ripetuto in --nav-full (le container query non leggono variabili). */
@container site-header (min-width:72rem){
  .mainnav{display:flex;gap:clamp(0rem,.6vw,.75rem);margin-right:.75rem}
  .mainnav a{position:relative;white-space:nowrap;padding:.6rem .7rem;font-size:1.0625rem;font-weight:600;text-decoration:none;color:var(--text);opacity:.86}
  .mainnav a:hover,.mainnav a[aria-current="page"]{opacity:1}
  .mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--text)}
  .mainnav a[aria-current="page"]::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.2rem;height:2px;background:var(--accent-ui);transform:skewX(var(--tilt))}
  .mainnav .is-antex{color:var(--antex)}
  .menu-toggle{display:none}
  /* la CTA dell'header è una voce che invita, non un blocco che urla: niente maiuscolo, forma a pastiglia */
  .header-cta{display:inline-flex;white-space:nowrap;min-height:46px;padding:.55rem 1.3rem;border-radius:999px;text-transform:none;letter-spacing:0;font-size:1rem}
}

/* drawer menu (telefono/tablet) */
.drawer{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;padding:0 var(--pad-x) 1.5rem;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.drawer[hidden]{display:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);margin:0 calc(var(--pad-x) * -1);padding:0 var(--pad-x)}
.drawer nav{display:grid;margin-top:clamp(.5rem,2vh,1.5rem)}
.drawer nav a{display:flex;justify-content:space-between;align-items:center;padding:clamp(.55rem,1.8vh,1rem) 0;border-bottom:1px solid var(--line);
  font-family:var(--ff-display);font-size:clamp(1.2rem,4vh,1.6rem);font-weight:700;text-decoration:none}
.drawer nav a[aria-current="page"]{color:var(--accent)}
.drawer nav a small{font-family:var(--ff-text);font-size:var(--fs-eyebrow);font-weight:600;color:var(--muted);letter-spacing:var(--track);text-transform:uppercase}
.drawer__foot{margin-top:auto;padding-top:clamp(1rem,3vh,2rem);display:grid;gap:1rem;color:var(--muted);font-size:var(--fs-small)}

/* ---------- bottom nav (footer nav bar mobile) ---------- */
.bottomnav{position:fixed;inset:auto 0 0 0;z-index:150;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  padding-bottom:env(safe-area-inset-bottom,0px);background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.bottomnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--bottom-h);
  font-size:.75rem;font-weight:600;text-decoration:none;color:var(--muted)}
.bottomnav svg{width:22px;height:22px}
.bottomnav a[aria-current="page"]{color:var(--accent)}
.bottomnav a[aria-current="page"] svg{filter:drop-shadow(0 0 6px var(--glow))}
.bottomnav .bn-main{position:relative;color:var(--text)}
.bottomnav .bn-main i{display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;border-radius:50%;
  background:var(--accent-fill);color:var(--on-accent);box-shadow:0 0 0 5px var(--bg),0 8px 24px var(--glow)}
.bottomnav .bn-main svg{width:24px;height:24px}
@media (min-width:1080px){.bottomnav{display:none}body{padding-bottom:0}}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - var(--bottom-h));display:flex;align-items:center;
  padding:calc(var(--header-h) + clamp(1rem,3vh,3rem)) 0 clamp(1.5rem,4vh,3rem)}
@media (min-width:1080px){.hero{min-height:100svh}}
.hero__in{display:grid;gap:clamp(1.75rem,4vh,3rem);align-items:center;max-width:96rem}
.hero__copy{min-width:0;container-type:inline-size}
/* ---------- hero: scena 3D dei tre temi cardine (reference brief/reference/hero-3d-mockuphome.png) ----------
   Tre card di vetro in prospettiva, con la gobba-icona sull'angolo, legate da una linea di luce.
   Fluida: galleggiano piano e la scena si inclina seguendo il puntatore (JS: --rx/--ry).
   Sotto 1080 px e con movimento ridotto la prospettiva si spegne; sul telefono restano tre righe compatte. */
.scene{position:relative}
.scene__stage{list-style:none;display:grid;gap:.6rem;margin:0;padding:0}
.sc a{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.9rem;padding:.75rem 1rem .75rem .75rem;text-decoration:none;
  color:var(--text);background:var(--glass-card);border:1px solid var(--glass-edge);border-radius:18px;box-shadow:var(--glass-drop)}
.sc__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent-fill);color:var(--on-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-fill) 22%,transparent),0 8px 22px var(--glow)}
.sc__ico svg{width:22px;height:22px}
.sc--antex .sc__ico{background:#4f46e5;color:#fff;box-shadow:0 0 0 4px rgba(99,102,241,.22),0 8px 22px rgba(99,102,241,.4)}
.sc__body{display:grid;gap:.1rem;min-width:0}
.sc__body small{font-size:.72rem;font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}
.sc--antex .sc__body small{color:var(--antex)}
.sc__body b{font-family:var(--ff-display);font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.12}
.sc--antex .sc__body b{font-family:"Outfit",var(--ff-display);font-weight:600;letter-spacing:.02em}
.sc__txt,.sc .link-arrow,.sc__visual,.sc__chips,.scene__path{display:none}
:root{--glass-card:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03));--glass-edge:rgba(255,255,255,.14);
  --glass-drop:0 24px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);--glass-slab:rgba(255,255,255,.06)}
:root[data-theme="light"]{--glass-card:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.62));--glass-edge:rgba(255,255,255,1);
  --glass-drop:0 26px 50px rgba(70,90,20,.16),inset 0 1px 0 #fff;--glass-slab:rgba(164,198,49,.18)}
:root[data-theme="contrast"]{--glass-card:#000;--glass-edge:#fff;--glass-drop:none;--glass-slab:transparent}

@media (min-width:1080px){
  .hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(3rem,5vw,5rem);padding-inline:clamp(2.5rem,5vw,5rem)}
  /* con la scena la grande D di fondo fa solo rumore: resta un'eco */
  .hero:has(.scene) .hero__mark{opacity:.25}
  .scene{perspective:1700px;margin-right:1.5rem}
  .scene__stage{position:relative;z-index:1;display:grid;gap:2.5rem;transform-style:preserve-3d;
    transform:rotateX(calc(4deg + var(--rx,0deg))) rotateY(calc(-5deg + var(--ry,0deg))) rotateZ(1deg)}
  .sc{position:relative;transform-style:preserve-3d;translate:0 0 var(--z);animation:sc-in 1.1s cubic-bezier(.2,.7,.2,1) both}
  .sc a{height:100%;min-height:10.25rem;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch;gap:1.25rem;padding:1.1rem 1.2rem 1.1rem 2rem;
    border-radius:22px;box-shadow:var(--glass-drop),0 14px 0 -6px var(--glass-slab);transition:translate .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
  .sc a:hover,.sc a:focus-visible{translate:0 -6px 30px}
  .sc--we{justify-self:end;width:92%;--z:20px;animation-delay:.1s}
  .sc--antex{justify-self:start;width:92%;--z:35px;animation-delay:.3s}
  .sc--custom{justify-self:end;width:90%;--z:25px;animation-delay:.5s}
  .sc__ico{position:absolute;left:-24px;top:-18px;width:52px;height:52px;translate:0 0 18px}
  .sc__ico svg{width:44%;height:44%}
  .sc__body{align-content:center;gap:.25rem}
  .sc__txt{display:block;color:var(--muted);font-size:.9375rem;line-height:1.5;text-wrap:pretty}
  .sc .link-arrow{display:inline-flex;margin-top:.3rem;font-size:.875rem;color:var(--accent);letter-spacing:0;text-transform:none}
  .sc--antex .link-arrow{color:var(--antex)}
  .sc__visual{display:block;position:relative;border-radius:14px;overflow:visible}
  /* Welcome: il totem vero su un fondo di luce */
  .sc--we .sc__visual{background:radial-gradient(80% 90% at 60% 60%,var(--glow),transparent 70%)}
  .sc--we .sc__visual img{position:absolute;right:10%;bottom:0;height:108%;width:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));translate:0 0 18px}
  .sc__chips{display:none}
  .sc__chips li{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;border-radius:10px;font-size:.78rem;font-weight:700;
    background:var(--glass-card);border:1px solid var(--glass-edge);box-shadow:var(--glass-drop);color:var(--text);white-space:nowrap}
  .sc__chips svg{width:15px;height:15px;color:var(--accent)}
  /* ANTEX: la sfera della conoscenza, con le fonti attorno */
  .orb{position:absolute;left:50%;top:50%;width:min(62%,150px);aspect-ratio:1;translate:-50% -50% 30px;border-radius:50%;display:grid;place-items:center;color:#fff;
    background:radial-gradient(circle at 35% 30%,#c4b5fd,#6366f1 45%,#3b1d8f 80%);box-shadow:0 0 40px rgba(99,102,241,.6),0 0 90px rgba(168,85,247,.35)}
  .orb svg{width:38%;height:38%;filter:drop-shadow(0 0 8px #fff)}
  .orb i{position:absolute;inset:-14%;border:1px solid rgba(165,168,240,.55);border-radius:50%;transform:rotateX(70deg) rotateZ(0deg)}
  .orb i:nth-child(2){inset:-26%;transform:rotateX(70deg) rotateY(35deg);border-color:rgba(236,72,153,.35)}
  .orb i:nth-child(3){inset:-6%;transform:rotateY(70deg);border-color:rgba(34,211,238,.4)}
  .orb__src{list-style:none;margin:0;padding:0}
  .orb__src li{position:absolute;display:flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;
    background:var(--glass-card);border:1px solid var(--glass-edge);box-shadow:var(--glass-drop);color:var(--text);translate:0 0 50px}
  .orb__src svg{width:13px;height:13px;color:var(--antex)}
  .orb__src .c0{left:0;top:0}.orb__src .c1{right:0;bottom:0}.orb__src .c2,.orb__src .c3{display:none}
  /* Su misura: la finestra del codice e i tipi di progetto */
  .code{position:absolute;inset:8% 22% 8% 4%;border-radius:12px;background:#15171a;box-shadow:0 20px 40px rgba(0,0,0,.4);display:grid;align-content:center;gap:9%;padding:10% 9%;translate:0 0 30px}
  .code i{height:6px;border-radius:3px;background:#3b3f46}
  .code i:nth-child(1){width:55%;background:#a4c631}.code i:nth-child(2){width:80%;margin-left:10%}.code i:nth-child(3){width:62%;margin-left:10%;background:#a5a8f0}
  .code i:nth-child(4){width:70%;margin-left:20%}.code i:nth-child(5){width:45%;margin-left:10%;background:#a4c631}.code i:nth-child(6){width:30%}
  .sc__tiles{position:absolute;right:-4%;top:-4%;bottom:-4%;display:grid;gap:6%;align-content:center;translate:0 0 50px}
  .sc__tiles svg{width:38px;height:38px;padding:9px;border-radius:10px;background:var(--glass-card);border:1px solid var(--glass-edge);box-shadow:var(--glass-drop);color:var(--accent)}
  /* la linea di luce che lega i tre temi */
  .scene__path{display:block;position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .scene__path path{fill:none;stroke:var(--accent-ui);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.45;filter:drop-shadow(0 0 4px var(--accent-fill))}
  .scene__path .run{stroke:var(--accent-fill);stroke-width:4;opacity:1;stroke-linecap:round;stroke-dasharray:.05 .95}
}
@keyframes sc-in{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
/* Sui portatili più stretti i tre ambiti restano leggibili nella prima schermata. */
@media (min-width:1080px) and (max-width:1199px){
  .scene__stage{gap:2rem;transform:none}
  .sc a{grid-template-columns:minmax(0,1fr);min-height:0}
  .sc__visual,.sc .link-arrow{display:none}
  .sc__body b{font-size:1.25rem}
  .sc__ico{width:44px;height:44px}
}
@keyframes sc-float{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@keyframes sc-run{to{stroke-dashoffset:-1}}
@keyframes orb-spin{to{rotate:360deg}}
@media (min-width:1080px) and (prefers-reduced-motion:no-preference){
  html:not([data-motion="reduce"]) .sc a{animation:sc-float 6s ease-in-out infinite alternate}
  html:not([data-motion="reduce"]) .sc--antex a{animation-duration:7s;animation-delay:-2s}
  html:not([data-motion="reduce"]) .sc--custom a{animation-duration:6.5s;animation-delay:-4s}
  html:not([data-motion="reduce"]) .scene__path .run{animation:sc-run 6s linear infinite}
  html:not([data-motion="reduce"]) .orb i{animation:orb-spin 14s linear infinite}
  html:not([data-motion="reduce"]) .orb i:nth-child(2){animation-duration:20s;animation-direction:reverse}
}
:root[data-motion="reduce"] .sc{animation:none}
@media (prefers-reduced-motion:reduce){.sc{animation:none}}
:root[data-theme="contrast"] .scene__path,:root[data-theme="contrast"] .orb i{display:none}
.hero__mark{position:absolute;z-index:-1;right:-28vw;top:50%;width:min(110vw,980px);transform:translateY(-50%);opacity:.9;pointer-events:none}
@media (min-width:900px){.hero__mark{right:-8vw;width:min(62vw,900px)}}
.hero__mark path{fill:none;stroke:var(--accent-ui);stroke-width:.6;vector-effect:non-scaling-stroke;opacity:.55}
.hero::before{content:"";position:absolute;z-index:-1;right:-20%;top:10%;width:80%;height:90%;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
@media (prefers-reduced-motion:no-preference){html:not([data-motion="reduce"]) .hero__mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.2s cubic-bezier(.6,0,.2,1) .2s forwards}}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__grid{position:absolute;inset:0;z-index:-2;background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:22px 22px;
  mask-image:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 70%)}
.hero h1{font-size:clamp(2rem,12cqi,5.5rem);letter-spacing:-.02em;line-height:1.1;max-width:none;text-wrap:initial}
.hero h1 > span[aria-hidden="true"]{white-space:nowrap}
.hero h1 .rot{display:block;color:var(--accent);min-height:1.05em;text-shadow:0 0 40px var(--glow)}
.hero h1 .rot span{display:inline-block}
.hero__sub{font-size:clamp(1.0625rem,2vw,1.3rem);color:var(--muted);max-width:34rem;margin:clamp(1rem,2.5vh,1.75rem) 0 clamp(1.25rem,3vh,2.25rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__scroll{position:absolute;left:var(--pad-x);bottom:1.5rem;font-size:var(--fs-eyebrow);letter-spacing:var(--track);text-transform:uppercase;color:var(--muted);display:none}
@media (min-width:900px){.hero__scroll{display:block}}
.rot-pause{margin-top:1.25rem;display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--track);text-transform:uppercase;
  background:none;border:0;padding:.5rem 0;color:var(--muted);cursor:pointer;min-height:44px}
.rot-pause svg{width:16px;height:16px}
.rot-pause:hover{color:var(--accent)}

/* ---------- hero: luce che percorre la D ---------- */
.hero__mark .runner{stroke:var(--accent-fill);stroke-width:3;opacity:1;stroke-dasharray:.07 .93;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--accent-fill))}
@media (prefers-reduced-motion:no-preference){html:not([data-motion="reduce"]) .hero__mark .runner{stroke-dashoffset:0;animation:run 7s linear 3.2s infinite}}
@keyframes run{to{stroke-dashoffset:-1}}
:root[data-theme="light"] .hero__mark path{stroke-width:1.2;opacity:.9}
:root[data-theme="light"] .hero__mark .runner{stroke-width:4;filter:drop-shadow(0 0 5px rgba(164,198,49,.9))}
:root[data-theme="light"] .hero::before{background:radial-gradient(closest-side,rgba(164,198,49,.45),transparent)}
:root[data-theme="light"] .hero h1 .rot{text-shadow:none}

/* ---------- cosa facciamo: le competenze si accendono scorrendo ----------
   Senza JS è un elenco verticale. Con JS (.doing--live) il contenuto resta fisso e
   la riga di parole scorre; experience.css regola la durata del percorso e l'eccezione accessibilità. */
.doing{position:relative;background:var(--bg-alt)}
.doing__intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 2rem}
.doing__intro .title{margin-bottom:0}
.doing__list{list-style:none;margin:2.5rem 0 0;display:grid;gap:2.5rem}
.doing__item{display:grid;gap:.6rem}
.doing__tag{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}
.doing__tag b{color:var(--accent);font-weight:700;margin-right:.5rem}
.doing__item .doing__word{max-width:none;font-family:var(--ff-display);font-weight:700;font-size:clamp(2rem,11vw,9rem);line-height:1.05;letter-spacing:-.03em;margin:0;
  color:transparent;-webkit-text-stroke:1.5px var(--line-strong);white-space:nowrap;transition:color .5s,text-shadow .5s,-webkit-text-stroke-color .5s}
.doing__item p{margin:0;max-width:30rem;color:var(--muted);transition:opacity .4s}
.doing__item .doing__word--long{font-size:clamp(2rem,6.8vw,6rem);white-space:normal;text-wrap:balance;
  max-width:min(calc(var(--container) - 2 * var(--pad-x)),calc(100vw - 2 * var(--pad-x) - 1rem))}
.doing__item p:not(.doing__word){max-width:min(30rem,calc(100vw - 2 * var(--pad-x) - 1rem))}
.doing__item .link-arrow{transition:opacity .4s}
.doing__item.is-on .doing__word{opacity:1;color:var(--accent);-webkit-text-stroke-color:transparent;text-shadow:0 0 50px var(--glow),0 0 2px var(--glow)}
.doing__item--ai.is-on .doing__word{color:var(--antex);text-shadow:0 0 50px rgba(99,102,241,.45)}
.doing__item--ai .doing__tag b{color:var(--antex)}
:root[data-theme="light"] .doing__item.is-on .doing__word{color:var(--brand-ink);text-shadow:none;background:linear-gradient(transparent 62%,var(--accent-fill) 62%,var(--accent-fill) 92%,transparent 92%)}
:root[data-theme="light"] .doing__item--ai.is-on .doing__word{background:linear-gradient(transparent 62%,#c9cbf6 62%,#c9cbf6 92%,transparent 92%)}
:root[data-theme="contrast"] .doing__word{-webkit-text-stroke-color:#fff}
.doing__orb{display:none}
.doing__bar{display:none}
.doing:not(.doing--live){padding:var(--section) 0}
.doing:not(.doing--live) .doing__word{color:var(--text);-webkit-text-stroke:0}

.doing--live{height:calc(var(--n) * 75svh + 100svh)}
.doing--live .doing__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:calc(var(--header-h) + 1rem) 0 calc(var(--bottom-h) + 1.5rem)}
@media (min-width:1080px){.doing--live .doing__sticky{padding-bottom:2rem}}
.doing--live .doing__list{display:flex;gap:clamp(2rem,6vw,5rem);margin-top:clamp(2rem,6vh,4rem);width:max-content;will-change:transform;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.doing--live .doing__item{flex:none;width:max-content;min-width:max-content}
.doing--live .doing__item:not(.is-on) p:not(.doing__word),.doing--live .doing__item:not(.is-on) .link-arrow{opacity:0}
.doing--live .doing__item:not(.is-on) .doing__tag{opacity:.6}
.doing--live .doing__orb{display:block;position:absolute;z-index:0;width:min(60vw,38rem);aspect-ratio:1;left:50%;top:55%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none;transition:background .6s}
.doing--live.is-ai .doing__orb{background:radial-gradient(closest-side,rgba(99,102,241,.35),transparent)}
.doing--live .wrap{position:relative;z-index:1}
.doing--live .doing__bar{display:flex;gap:.4rem;margin-top:clamp(1.5rem,5vh,3rem)}
.doing__bar span{height:3px;flex:1;max-width:3rem;background:var(--line-strong);transition:background .4s}
.doing__bar span.is-on{background:var(--accent-fill)}
.doing--live.is-ai .doing__bar span.is-on{background:var(--antex)}

/* ---------- muro dei clienti: loghi monocromi che si avvicendano ---------- */
.wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (min-width:700px){.wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1080px){.wall{grid-template-columns:repeat(6,minmax(0,1fr))}}
.wall li{position:relative;display:grid;place-items:center;height:clamp(6rem,11vw,8.5rem);border-right:1px solid var(--line);border-bottom:1px solid var(--line);list-style:none;overflow:hidden}
.wall img{max-width:62%;max-height:42%;width:auto;height:auto;object-fit:contain;opacity:.72;transition:opacity .6s,transform .6s}
.wall li:hover img{opacity:1}
.wall li::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--accent-fill);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.wall li:hover::before{transform:scaleX(1)}
.wall img.is-out{opacity:0;transform:translateY(8px)}
/* Mobile, colonna unica: gli originali sono piccoli (il disegno è ~100-200 px di larghezza, 35-60 di
   altezza), quindi il logo resta sotto quella misura e l'aria la fa il padding della riga. */
@media (max-width:699px){
  .wall{grid-template-columns:minmax(0,1fr)}
  .wall li{height:4.5rem;padding:0 2rem}
  .wall img{width:auto;height:auto;max-width:min(45%,8rem);max-height:2.25rem}
}
/* tre file di loghi da tablet in su (4×3, poi 6×3): meno vuoto nella slide desktop */
.wall li:nth-child(n+7){display:none}
@media (min-width:700px){.wall li:nth-child(n+7){display:grid}.wall li:nth-child(n+13){display:none}}
@media (min-width:1080px){.wall li:nth-child(n+13){display:grid}.wall li:nth-child(n+19){display:none}}
:root[data-theme="light"] .wall img{filter:brightness(0);opacity:.62}
:root[data-theme="contrast"] .wall img{opacity:1}

/* ---------- due anime (cosa facciamo) ---------- */
.duo{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:900px){.duo{grid-template-columns:1fr 1fr}}
.duo__item{position:relative;background:var(--bg);padding:clamp(2rem,5vw,3.5rem);display:flex;flex-direction:column;gap:1rem;min-height:22rem;overflow:hidden}
.section--alt .duo__item{background:var(--bg-alt)}
.duo__num{font-family:var(--ff-display);font-size:clamp(4rem,10vw,7rem);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--line-strong)}
.duo__item h3{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.duo__item p{color:var(--muted);max-width:30rem;margin:0}
.duo__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:1rem;list-style:none}
.duo__tags li{font-size:var(--fs-eyebrow);font-weight:600;padding:.35rem .7rem;border:1px solid var(--line);color:var(--muted)}
.duo__item:hover .duo__num{-webkit-text-stroke-color:var(--accent-ui)}

/* ---------- ecosistema ---------- */
.eco{display:grid;gap:2.5rem 1.25rem;padding-top:1.25rem}
@media (min-width:900px){.eco{grid-template-columns:repeat(3,minmax(0,1fr))}}
.eco__card{position:relative;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.75rem,4vw,2.75rem);background:var(--card);border:1px solid var(--line);text-decoration:none;transition:border-color .3s}
.eco__card:hover{border-color:var(--accent-ui)}
.eco__card--antex:hover{border-color:var(--antex)}
.eco__kicker{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--accent)}
.eco__card--antex .eco__kicker{color:var(--antex)}
.eco__card h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.eco__card p{margin:0;color:var(--muted)}
.eco__logo{height:34px;width:auto;align-self:flex-start}
.eco__more{margin-top:auto;padding-top:1rem}
.eco__card--antex::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--antex-grad)}
.eco__card--antex .eco__logo{height:30px}
.eco__art{width:calc(100% + 2 * clamp(1.75rem,4vw,2.75rem));max-width:none;margin:0 calc(clamp(1.75rem,4vw,2.75rem) * -1) .5rem;aspect-ratio:16/9;object-fit:cover;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
:root[data-theme="contrast"] .eco__card--antex{background:#000}
.eco__visual{margin-top:.5rem}

/* Il morso della D: tre gobbe sul bordo alto della card, come i denti nel logo. La prima è il bordo
   di un livello pieno (.bite__in) ritagliato a cerchio: al passaggio (o al focus) il cerchio cresce
   fino a coprire la card e mostra il contenuto. Su touch si apre quando la card arriva a metà schermo.
   Colori: ink su verde 8,60:1; bianco su indaco #4f46e5 6,29:1. */
.bite{--r:17px;--bx:calc(100% - 7rem);display:grid;grid-template-columns:minmax(0,1fr);padding:0;gap:0;min-height:17rem;isolation:isolate}
.bite__base,.bite__in{grid-area:1 / 1}
.bite__base{display:flex;flex-direction:column;gap:1rem;padding:clamp(1.75rem,4vw,2.75rem);min-width:0}
.bite__bumps{position:absolute;z-index:1;top:calc(var(--r) * -1 - 1px);left:calc(var(--bx) - var(--r));display:flex;pointer-events:none}
.bite__bumps i{width:calc(var(--r) * 2);height:calc(var(--r) * 2);border-radius:50%;background:var(--card);border:1px solid var(--line);
  clip-path:inset(0 0 calc(50% - 1px) 0)}
.bite__bumps i:first-child{visibility:hidden}
.bite__in{position:relative;z-index:2;margin:calc(var(--r) * -1 - 1px) -1px -1px;display:flex;flex-direction:column;gap:1rem;
  padding:calc(var(--r) + clamp(1.75rem,4vw,2.75rem)) clamp(1.75rem,4vw,2.75rem) clamp(1.75rem,4vw,2.75rem);
  background:var(--accent-fill);color:var(--on-accent);clip-path:circle(var(--r) at var(--bx) var(--r));
  transition:clip-path .65s cubic-bezier(.65,0,.25,1)}
.bite__in > *{opacity:0;transition:opacity .25s}
.bite__txt{font-size:1.0625rem;line-height:1.6}
.bite__in .eco__kicker,.bite__in .link-arrow{color:inherit}
.bite__in .link-arrow{margin-top:auto}
.eco__card--antex .bite__in{background:#4f46e5;color:#fff}
.bite:is(:hover,:focus-visible,.is-open) .bite__in{clip-path:circle(150% at var(--bx) var(--r))}
.bite:is(:hover,:focus-visible,.is-open) .bite__in > *{opacity:1;transition:opacity .35s .25s}
.bite:hover{border-color:var(--line)}
@media (prefers-reduced-motion:reduce){.bite__in,.bite__in > *{transition:none!important}}
:root[data-motion="reduce"] .bite__in,:root[data-motion="reduce"] .bite__in > *{transition:none!important}
:root[data-theme="contrast"] .bite__in{background:#000;color:#fff;border:2px solid var(--accent)}

/* finta conversazione ANTEX (dimostrativa) */
.chat{border:1px solid var(--line);background:var(--bg);padding:1rem;display:grid;gap:.75rem;font-size:var(--fs-small);line-height:1.55}
.chat__q{justify-self:end;max-width:85%;background:rgba(99,102,241,.18);border:1px solid rgba(165,168,240,.35);padding:.6rem .8rem}
:root[data-theme="light"] .chat__q{background:#eef0ff;border-color:#c9cbf6}
.chat__a{max-width:92%;padding:.6rem .8rem;border-left:2px solid var(--antex)}
.chat__src{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.chat__src span{font-size:.75rem;font-weight:600;padding:.2rem .5rem;border:1px solid var(--line);color:var(--muted)}
.chat__src span b{color:var(--antex);font-weight:700}
.chat__caret{display:inline-block;width:.5em;height:1em;vertical-align:-.15em;background:var(--antex);margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- prodotti Welcome Experience (scroll orizzontale su telefono) ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(80%,20rem);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--pad-x) 1rem;margin:0 calc(var(--pad-x) * -1);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.rail > *{scroll-snap-align:start}
@media (min-width:1080px){.rail{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;margin:0;padding:0}}
@media (min-width:1080px){.rail:has(.prod--media){grid-template-columns:repeat(6,minmax(0,1fr))}.rail .prod--media{grid-column:span 2}.rail .prod--media:nth-child(-n+2){grid-column:span 3}.rail .prod--media:nth-child(-n+2) .prod__media{aspect-ratio:16/9}}
.prod{min-width:0;display:flex;flex-direction:column;gap:.75rem;padding:1.5rem;min-height:17rem;border:1px solid var(--line);background:var(--card);text-decoration:none;transition:border-color .3s,transform .3s}
.prod:hover{border-color:var(--accent-ui)}
.prod__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--accent-ui);color:var(--accent)}
.prod__icon svg{width:24px;height:24px}
.prod__verb{font-family:var(--ff-display);font-size:1.3rem;line-height:1.2;margin-top:.5rem}
.prod__name{overflow-wrap:anywhere;font-size:var(--fs-small);font-weight:700;color:var(--accent)}
.prod p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:1.6}
.prod .ext{overflow-wrap:anywhere;margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-eyebrow);font-weight:700;color:var(--muted)}
.prod .ext svg{width:14px;height:14px}

/* ---------- su misura: nastro di parole a filo pagina ---------- */
.ribbon{position:relative;border-block:1px solid var(--line);overflow:hidden;padding:clamp(1.25rem,3vw,2rem) 0;transform:skewY(-2deg);background:var(--bg-alt);margin:2rem 0}
.ribbon__track{display:flex;width:max-content;gap:3rem;animation:slide 40s linear infinite}
.ribbon__track span{display:inline-flex;align-items:center;gap:3rem;font-family:var(--ff-display);font-weight:700;font-size:clamp(2rem,6vw,4.5rem);line-height:1;white-space:nowrap}
.ribbon__track span::after{content:"";width:.5em;height:.5em;background:var(--accent-fill);transform:skewX(var(--tilt))}
.ribbon__track span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--text)}
.ribbon[data-paused] .ribbon__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ribbon__ctl{position:absolute;right:var(--pad-x);bottom:.5rem;transform:skewY(2deg)}

.types{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:3rem}
@media (min-width:700px){.types{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.types{grid-template-columns:repeat(3,minmax(0,1fr))}}
.type{background:var(--bg);padding:1.75rem;display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;align-items:start}
.section--alt .type{background:var(--bg-alt)}
.type svg{width:28px;height:28px;color:var(--accent);grid-row:span 2;margin-top:.2rem}
.type h3{font-size:1.25rem}
.type p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:1.6}
.powered{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line);color:var(--muted)}
.powered strong{color:var(--text);font-family:var(--ff-display);font-size:1.4rem}

/* ---------- numeri ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--bg);padding:2rem 1.25rem}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(2.6rem,7vw,4.5rem);line-height:1;color:var(--accent)}
.stat span{display:block;margin-top:.5rem;color:var(--muted);font-size:var(--fs-small);line-height:1.5}

/* ---------- news ---------- */
.news{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.news{grid-template-columns:1.4fr 1fr;grid-template-rows:repeat(3,auto)}.news .post--lead{grid-row:span 3}}
.post{min-width:0;display:grid;gap:1rem;text-decoration:none;align-content:start}
.post__img{overflow:hidden;border-radius:12px;aspect-ratio:3/2;background:var(--card)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.post__img--empty{border:1px solid var(--line);background:url("../img/brand/digibite-mark.svg") center/18% no-repeat,radial-gradient(closest-side,var(--glow),transparent) center/80% no-repeat,var(--card)}
.post:hover .post__img img{transform:scale(1.06)}
.post__meta{display:flex;gap:.75rem;align-items:center;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}
.post__meta .cat{color:var(--accent)}
.post h3{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.25;transition:color .25s}
.post:hover h3{color:var(--accent)}
.post--lead h3{font-size:clamp(1.6rem,3.4vw,2.4rem)}
@media (min-width:900px){
  .news .post:not(.post--lead){grid-template-columns:10rem 1fr;align-items:center}
  .news .post:not(.post--lead) .post__img{aspect-ratio:1}
}
.news-grid{display:grid;gap:2.5rem 1.5rem}
@media (min-width:700px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.filters{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:2.5rem;list-style:none}
.filters button{min-height:44px;padding:0 1rem;border:1px solid var(--line);background:transparent;cursor:pointer;white-space:nowrap;font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.filters button[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}

/* ---------- clienti ---------- */
.clients{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:900px){.clients{grid-template-columns:repeat(4,minmax(0,1fr))}}
.client{background:var(--bg);padding:1.75rem 1.25rem;display:grid;gap:.4rem;align-content:start;min-height:9rem}
.client b{font-family:var(--ff-display);font-size:1.3rem;line-height:1.2}
.client span{color:var(--muted);font-size:var(--fs-small);line-height:1.5}

/* ---------- CTA / contatto ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;z-index:-1;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.cta__grid{display:grid;gap:3rem}
@media (min-width:900px){.cta__grid{grid-template-columns:1fr 1fr;align-items:start}}
.contact-lines{display:grid;gap:1rem;margin-top:2rem;list-style:none}
.contact-lines a,.contact-lines span{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-weight:600}
.contact-lines svg{width:20px;height:20px;color:var(--accent);flex:none}
.form{display:grid;gap:1.25rem}
.field{display:grid;gap:.4rem}
.field label{font-size:var(--fs-small);font-weight:700}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:.75rem 1rem;border:1px solid var(--line-strong);border-radius:0;background:var(--card);color:var(--text);font:inherit}
.field textarea{min-height:8rem;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--accent-ui)}
.check{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.check input{width:22px;height:22px;accent-color:var(--brand-green);flex:none;margin-top:.1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;border:0;padding:0;margin:0}
.chips legend{font-size:var(--fs-small);font-weight:700;margin-bottom:.5rem;padding:0}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--line-strong);font-size:var(--fs-small);font-weight:600;cursor:pointer}
.chips input:checked + span{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.chips input:focus-visible + span{outline:3px solid var(--accent-fill);outline-offset:3px}

/* =====================================================================
   MONDO ANTEX — sotto-marchio con universo proprio (palette e font del sito ANTEX)
   I token si ridefiniscono in locale: ogni componente dentro .antex-world cambia da solo.
   Segue il tema del sito (feedback 2026-10-09: un blocco scuro dentro la pagina chiara stonava);
   le illustrazioni hanno la variante -light come su antex.cloud. Contrasti su #100a2a / #171040:
     #ffffff 19.11 / 17.73 · #c9c6ef 11.66 / 10.81 · #a5a8f0 8.61 / 7.99
     bottone #4f46e5 con testo bianco 6.29 · indaco #6366f1 e viola #8b5cf6 SOLO decorativi
   ===================================================================== */
.antex-world{
  --bg:#100a2a; --bg-alt:#171040; --card:#1b1446;
  --text:#ffffff; --muted:#c9c6ef;
  --accent:#a5a8f0; --accent-ui:#a5a8f0; --accent-fill:#4f46e5; --on-accent:#ffffff;
  --antex:#a5a8f0;
  --line:rgba(165,168,240,.22); --line-strong:rgba(165,168,240,.45);
  --glow:rgba(99,102,241,.35);
  --ff-display:"Outfit","Segoe UI",system-ui,sans-serif;
  position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(70% 60% at 85% 10%,rgba(99,102,241,.32),transparent 70%),
             radial-gradient(50% 50% at 0% 100%,rgba(168,85,247,.22),transparent 70%),var(--bg);
  color:var(--text);
}
.antex-world::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--antex-grad)}
.antex-world h1,.antex-world h2,.antex-world h3{font-weight:600;letter-spacing:-.02em}
.antex-world .eyebrow::before{background:var(--antex-grad);transform:none;height:3px}
.antex-world .title em,.antex-world h1 em{background:var(--antex-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.antex-world :focus-visible{outline-color:#a5a8f0;box-shadow:0 0 0 3px #100a2a}
.antex-world .btn--primary:hover{background:#fff;color:#100a2a}
:root[data-theme="contrast"] .antex-world{--bg:#000;--bg-alt:#000;--card:#000;--muted:#fff;--line:#fff;--line-strong:#fff;background:#000}
:root[data-theme="contrast"] .antex-world .title em,:root[data-theme="contrast"] .antex-world h1 em{background:none;color:#c3c5ff}
.section.antex-world{padding:var(--section) 0}
:root[data-theme="light"] .antex-world{
  /* chiaro, su #f7f7fe / #ffffff: vedi i rapporti calcolati in STATO (Analisi & decisioni) */
  --bg:#f7f7fe; --bg-alt:#eef0ff; --card:#ffffff;
  --text:#100a2a; --muted:#4a4568;
  --accent:#4f52b8; --accent-ui:#4f52b8; --accent-fill:#4f46e5; --on-accent:#ffffff; --antex:#4f52b8;
  --line:rgba(79,82,184,.18); --line-strong:rgba(79,82,184,.4); --glow:rgba(99,102,241,.18); --shade:rgba(16,10,42,.08);
  background:radial-gradient(70% 60% at 85% 10%,rgba(99,102,241,.12),transparent 70%),
             radial-gradient(50% 50% at 0% 100%,rgba(168,85,247,.08),transparent 70%),var(--bg)}
:root[data-theme="light"] .antex-world :focus-visible{outline-color:#4f46e5;box-shadow:0 0 0 6px #fff}
:root[data-theme="light"] .antex-world .btn--primary:hover{background:#100a2a;color:#fff}
:root[data-theme="light"] .aw__visual .chat{background:rgba(255,255,255,.94);box-shadow:0 20px 50px rgba(16,10,42,.14)}
:root[data-theme="light"] .aw .chat__q{background:#eef0ff;border-color:#c9cbf6}
:root[data-theme="light"] .aw__visual > img{box-shadow:0 30px 80px rgba(16,10,42,.12)}

.aw{display:grid;gap:3rem;align-items:center}
.section.antex-teaser{padding:clamp(3.5rem,8vw,5.5rem) 0}
.antex-teaser .aw{gap:2rem}
@media (min-width:1000px){.antex-teaser .aw{grid-template-columns:1fr 1fr;gap:4rem}}
.antex-teaser .aw__logo{height:32px;margin-bottom:1.5rem}
.antex-teaser .title{font-size:clamp(1.7rem,4vw,2.6rem)}
.antex-teaser .chat{border-radius:14px;background:var(--card);box-shadow:0 20px 50px var(--shade)}
@media (min-width:1000px){.aw{grid-template-columns:1fr 1.1fr;gap:4rem}}
.aw__logo{height:44px;width:auto;margin-bottom:2rem}
.aw__feats{display:grid;gap:1rem;list-style:none;margin:2rem 0 2.5rem}
.aw__feats li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.aw__feats i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);color:var(--accent)}
.aw__feats svg{width:20px;height:20px}
.aw__feats b{display:block;font-family:var(--ff-display);font-weight:600;font-size:1.1rem}
.aw__feats span{color:var(--muted);font-size:var(--fs-small);line-height:1.55}
.aw__visual{position:relative;padding-bottom:3rem}
.aw__visual > img{width:100%;border-radius:16px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(10,5,32,.6)}
.aw__visual .chat{position:absolute;right:-.5rem;bottom:0;width:min(86%,24rem);border-radius:14px;background:rgba(16,10,42,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
@media (min-width:1000px){.aw__visual .chat{right:-2rem}}
.aw .chat__q{background:rgba(99,102,241,.28);border-color:rgba(165,168,240,.4);border-radius:12px 12px 2px 12px}
.aw .chat__src span{border-radius:999px}
.sectors{display:grid;grid-auto-flow:column;grid-auto-columns:min(72%,17rem);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:4rem calc(var(--pad-x) * -1) 0;padding:0 var(--pad-x) 1rem;list-style:none;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.sectors li{scroll-snap-align:start}
.sectors figure{margin:0}
.sectors img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;border:1px solid var(--line);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sectors li:hover img{transform:translateY(-4px)}
.sectors figcaption{margin-top:.6rem;font-family:var(--ff-display);font-weight:600;font-size:1rem}
@media (min-width:1200px){.sectors{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin-inline:0;padding:0}}

/* ---------- loghi delle soluzioni: colori originali su targhetta bianca ---------- */
.logo-plate{display:flex;align-items:center;justify-content:flex-start;height:72px;padding:.9rem 1.1rem;background:#fff;border-radius:10px}
.logo-plate img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
/* card «prodotto vero»: ogni soluzione porta il suo colore (--brand, dal logo ufficiale) solo nella
   parte grafica — fondo tinto, filetto, alone — mai nel testo, che resta sui token del tema */
.prod--media{--brand:#a4c631;padding:0;gap:0;overflow:hidden;border-top:3px solid var(--brand)}
.prod--media:hover{border-color:var(--line);border-top-color:var(--brand)}
.prod__media{position:relative;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;padding:1.25rem 1.25rem 0;
  background:radial-gradient(75% 65% at 50% 95%,color-mix(in srgb,var(--brand) 60%,transparent),transparent 72%),
             linear-gradient(180deg,color-mix(in srgb,var(--brand) 16%,var(--card)),var(--card))}
.prod__media::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.2px);background-size:16px 16px;
  -webkit-mask-image:linear-gradient(#000,transparent 80%);mask-image:linear-gradient(#000,transparent 80%);pointer-events:none}
.prod__media img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.prod__media img.is-flat{object-fit:cover;border-radius:10px 10px 0 0;filter:none}
.prod--media:hover .prod__media img{transform:translateY(-6px) scale(1.03)}
.prod__body{display:flex;flex-direction:column;gap:.6rem;padding:1.25rem 1.25rem 1.5rem;flex:1}
.prod__logo{height:26px;width:auto;max-width:100%;object-fit:contain;object-position:left center;align-self:flex-start}
.prod__verb{margin-top:.25rem}
:root[data-theme="contrast"] .prod__media{background:#000}
.prod-visual{border-radius:14px;border-top:3px solid var(--brand);margin-bottom:2rem;aspect-ratio:16/10}
.eco__logos{display:flex;flex-wrap:wrap;gap:.5rem}
/* loghi dell'ecosistema: a colori, nella variante ufficiale per il fondo del tema (neg sullo scuro,
   positiva sul chiaro). In monocromo nero sul chiaro risultavano pesanti (feedback 2026-10-09).
   Welcome Experience: un logo alla volta, con un breve glitch (editorial.css).
   Senza JS o con movimento ridotto restano tutti e cinque in fila. */
.morph--live{position:relative;display:block;height:40px}
.morph--live img{position:absolute;left:0;top:50%;transform:translateY(-50%);height:32px!important;max-width:100%!important;opacity:0}
.morph--live img.is-on{opacity:1}
.eco__logos{gap:1rem 1.5rem;align-items:center;margin-top:.5rem}
.eco__logos img{height:22px;width:auto;max-width:min(100%,11rem);object-fit:contain}
.eco__brandlogo{height:34px;width:auto;align-self:flex-start}

/* ---------- pagine interne ---------- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--header-h) + clamp(2.5rem,8vw,5.5rem)) 0 clamp(3rem,7vw,5rem);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:min(clamp(2.25rem,6vw,4.75rem),10vw);letter-spacing:-.02em;max-width:22ch}
.page-hero h1 em{font-style:normal;color:var(--accent)}
.page-hero .lead{margin-top:1.5rem}
.page-hero::after{content:"";position:absolute;z-index:-1;right:-15rem;top:-30%;width:22rem;height:160%;border-left:1px solid var(--accent-ui);opacity:.45;transform:skewX(var(--tilt));pointer-events:none}
.page-hero--antex::after{border-color:var(--antex)}
@media (min-width:900px){.page-hero::after{right:-6rem}}
:root[data-theme="contrast"] .hero__grid,:root[data-theme="contrast"] .hero__mark,:root[data-theme="contrast"] .hero::before,:root[data-theme="contrast"] .page-hero::after{display:none}
.page-hero--antex h1 em,.page-hero--antex .eyebrow{color:var(--antex)}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;font-size:var(--fs-eyebrow);font-weight:600;color:var(--muted);margin-bottom:2rem}
.crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.6}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--accent)}

.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:s;list-style:none}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps li{background:var(--bg);padding:1.75rem;counter-increment:s;display:grid;gap:.5rem;align-content:start}
.section--alt .steps li{background:var(--bg-alt)}
.steps li::before{content:"0" counter(s);font-family:var(--ff-display);font-size:2.5rem;line-height:1;color:var(--accent)}
.steps h3{font-size:1.2rem}
.steps p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:1.6}
/* Telefono: il numero sta a sinistra, piccolo, accanto a titolo e testo (non sopra, più grande del contenuto) */
@media (max-width:699px){
  .steps li{grid-template-columns:2.6rem minmax(0,1fr);column-gap:1rem;row-gap:.3rem;padding:1.25rem}
  .steps li::before{grid-row:1/span 2;font-size:1.6rem;line-height:1.15}
  .steps li>*{grid-column:2}
  .steps h3{font-size:1.08rem;line-height:1.3}
}

.split{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:4rem}.split--rev > :first-child{order:2}}
.checks{display:grid;gap:.85rem;list-style:none}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start}
.checks svg{width:22px;height:22px;color:var(--accent);margin-top:.2rem}

.prose{max-width:44rem}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);margin:2.5rem 0 1rem}
.prose ul{padding-left:1.25rem;margin:0 0 1em}
.prose li::marker{color:var(--accent)}

.swatches{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.sw{border:1px solid var(--line);display:grid}
.sw__chip{height:6rem;display:flex;align-items:flex-end;padding:.75rem;font-family:var(--ff-display);font-weight:700;font-size:1.4rem}
.sw__body{padding:1rem;font-size:var(--fs-small);line-height:1.55}
.sw__body b{display:block;font-size:1rem}
.ratio{display:inline-block;font-weight:700;padding:.1rem .45rem;margin-top:.35rem;border:1px solid var(--line)}
.ratio--ok{color:var(--accent)}
.ratio--ko{text-decoration:line-through;color:var(--muted)}

.jobs{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);list-style:none}
.jobs a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem 0;background:var(--bg);text-decoration:none;font-family:var(--ff-display);font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700}
.jobs a:hover{color:var(--accent)}
.jobs svg{width:24px;height:24px;flex:none}

.places{display:grid;gap:1rem}
@media (min-width:700px){.places{grid-template-columns:1fr 1fr}}
.place{border:1px solid var(--line);padding:1.75rem;background:var(--card)}
.place h3{font-size:1.3rem;margin-bottom:.5rem}
.place p{margin:0;color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:4rem 0 2rem;font-size:var(--fs-small)}
.footer-grid{display:grid;gap:2.5rem}
@media (min-width:700px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.footer-grid{grid-template-columns:1.4fr repeat(3,minmax(0,1fr))}}
.footer-brand img{height:34px;width:auto;margin-bottom:1.25rem}
.footer-brand p{color:var(--muted);max-width:22rem}
.site-footer h2{font-family:var(--ff-text);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.site-footer ul{list-style:none;display:grid;gap:.25rem}
.site-footer ul a{display:inline-flex;min-height:36px;align-items:center;text-decoration:none;color:var(--text)}
.site-footer ul a:hover{color:var(--accent);text-decoration:underline}
.social{display:flex;gap:.5rem;margin-top:1rem}
.legal{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.875rem}
.legal a{color:var(--muted)}

/* toggle a forma di pillola: è un interruttore, l'unico «arrotondato» ammesso perché è un cerchio che scorre */

/* ---------- comparsa delle immagini e dei blocchi ---------- */
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="reduce"]) .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  html:not([data-motion="reduce"]) .js [data-reveal="wipe"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
  html:not([data-motion="reduce"]) .js [data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
/* movimento ridotto: dal sistema o dal pannello */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ribbon__track{animation:none!important;flex-wrap:wrap;width:auto;gap:1rem 2rem;padding:0 var(--pad-x)}
}
:root[data-motion="reduce"] *,:root[data-motion="reduce"] *::before,:root[data-motion="reduce"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
:root[data-motion="reduce"] .ribbon__track{animation:none!important;flex-wrap:wrap;width:auto;gap:1rem 2rem;padding:0 var(--pad-x)}
:root[data-motion="reduce"] .ribbon__track span[aria-hidden],:root[data-motion="reduce"] .ribbon__ctl{display:none}
@media (prefers-reduced-motion:reduce){.ribbon__track span[aria-hidden],.ribbon__ctl{display:none}}

/* ---------- stampa (le news possono finire in PDF) ---------- */
@media print{
  .site-header,.bottomnav,.drawer,.hero__mark,.hero__grid,.ribbon,.cta form,.rot-pause{display:none!important}
  :root{--bg:#fff;--bg-alt:#fff;--card:#fff;--text:#1d1d1b;--muted:#565f5f;--accent:#5f721c;--line:#ccc}
  body{padding:0}
}


/* =====================================================================
   NAVIGAZIONE A SLIDE (home): ogni sezione occupa lo schermo e lo scroll si ferma sulla successiva.
   Scroll-snap nativo: funziona con rotella, trackpad, touch e tastiera, nessuna libreria.
   Le sezioni più alte dello schermo (news, clienti su telefono) scorrono libere al loro interno.
   «Cosa facciamo» ha un punto di arresto per competenza (.doing__stop, generati da JS).
   ===================================================================== */
html:has(body.slides){scroll-snap-type:y mandatory;scroll-padding-top:0}
.slides main > section,.slides .site-footer{scroll-snap-align:start}
.slides .site-footer{scroll-snap-align:end}
.slides main > section:not(.hero):not(.doing){min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--header-h) + 1.5rem);padding-bottom:calc(var(--bottom-h) + 1.5rem)}
@media (min-width:1080px){.slides main > section:not(.hero):not(.doing){padding-bottom:2rem}}
.slides main > section > .wrap{width:100%}
.slides .doing{scroll-snap-align:none}
.slides .doing:not(.doing--live){scroll-snap-align:start}
.doing__stop{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
.slides .head{margin-bottom:clamp(1.5rem,4vh,3.5rem)}
.slides .ribbon{margin:0 0 clamp(1.5rem,4vh,3rem)}
/* indice delle slide: puntini a destra, solo desktop */
.slidedots{display:none}
@media (min-width:1080px){
  .slidedots{position:fixed;z-index:90;right:1.25rem;top:50%;translate:0 -50%;display:grid;gap:.35rem;list-style:none;margin:0;padding:.5rem;
    border-radius:999px;background:var(--header-bg);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .slidedots button{position:relative;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
  .slidedots button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:background .3s,height .3s}
  .slidedots button[aria-current="true"]::before{height:22px;border-radius:4px;background:var(--accent-fill)}
  .slidedots button span{position:absolute;right:calc(100% + .6rem);padding:.3rem .6rem;border-radius:6px;font-size:.78rem;font-weight:700;white-space:nowrap;
    background:var(--card);border:1px solid var(--line);color:var(--text);opacity:0;pointer-events:none;transition:opacity .2s}
  .slidedots button:is(:hover,:focus-visible) span{opacity:1}
}
@media print{.slidedots{display:none!important}html{scroll-snap-type:none!important}}/* slide desktop: le cinque soluzioni in una riga, così la slide sta in uno schermo da portatile */
@media (min-width:1080px){
  .slides .rail:has(.prod--media){grid-template-columns:repeat(5,minmax(0,1fr))}
  .slides .rail .prod--media,.slides .rail .prod--media:nth-child(-n+2){grid-column:auto}
  .slides .rail .prod--media .prod__media,.slides .rail .prod--media:nth-child(-n+2) .prod__media{aspect-ratio:1/1}
  .slides main > section:not(.hero):not(.doing){padding-top:calc(var(--header-h) + .75rem)}
}
/* slide su schermi bassi (portatili): titoli, immagini e griglie si misurano sull'altezza */
@media (min-width:1080px){
  .slides .title{font-size:min(var(--fs-h2),6.4svh)}
  .slides .rail .prod--media .prod__media,.slides .rail .prod--media:nth-child(-n+2) .prod__media{aspect-ratio:auto;height:min(15rem,24svh)}
  .slides .rail .prod p{font-size:.9rem;line-height:1.45}
  .slides .wall li{height:min(clamp(6rem,11vw,8.5rem),13svh)}
  .slides .news .post--lead .post__img{aspect-ratio:auto;height:min(26rem,40svh)}
  .slides .news .post:not(.post--lead){grid-template-columns:min(10rem,15svh) 1fr}
  .slides .stat{padding:min(2rem,2.5svh) 1.25rem}
  .slides .stat b{font-size:min(clamp(2.6rem,7vw,4.5rem),7svh)}
}

/* ---------- moduli: invio in corso (forms.js) ----------
   Il pulsante resta disabilitato fino al redirect a /grazie/: niente doppi invii. Lo spinner prende il posto della
   freccia e usa currentColor, cioè lo stesso colore del testo del pulsante (contrasto già verificato). */
.btn.is-loading{cursor:progress;pointer-events:none}
.btn.is-loading svg{display:none}
.btn.is-loading::after{content:"";flex:none;width:1.1em;height:1.1em;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:form-spin .7s linear infinite}
@keyframes form-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::after{animation-duration:1.8s}}
html[data-motion="reduce"] .btn.is-loading::after{animation-duration:1.8s}