/* ==========================================================================
   MERCURIO STUDIO — styles.css  (v1)
   Organizzato per componenti: ogni blocco "COMPONENT" corrisponde a un
   futuro componente Next.js (vedi commento in testa a index.html).
   ========================================================================== */

/* ==========================================================================
   1. TOKENS — design system
   ========================================================================== */
:root {
  /* Brand — valori letti dal file del logo (vedi README) */
  --blue: #0257F3;      /* blu firma: segno "E" a tre lame. Sempre pieno. */
  --blue-700: #0042BD;  /* unica tinta scura: hover / pressed */
  --blue-300: #6E9DFF;  /* unica tinta chiara: link e accenti su fondo scuro */
  --blue-200: #A9C6FF;  /* v2: la stessa tinta più chiara, per testo piccolo sul mondo blu (≥4,5:1) */
  --ink: #081A2F;       /* navy del lettering del logo */

  /* Neutri (freddi, coerenti con il blu) */
  --paper: #F6F5F1;     /* off-white caldo: fondo sezioni chiare */
  --paper-2: #EDECE7;
  --white: #FCFBF9;
  --grey-700: #3D4654;
  --grey-600: #5A6472;  /* testo secondario su chiaro (5.5:1) */
  --grey-400: #97A0AE;  /* testo secondario su scuro (7.4:1) */
  --grey-200: #DADCDF;
  --night: #061433;     /* blu notte profondo (v2: non più nero), derivato dal navy del logo */
  --night-2: #0A1C42;
  --night-3: #0F2652;
  --night-line: #1C3566;
  --world: #051230;     /* fondo del mondo blu animato dietro le sezioni (.world) */

  /* Ruoli semantici — tema chiaro */
  --bg: var(--paper);
  --surface: var(--white);
  --surface-2: var(--paper-2);
  --text: var(--ink);
  --text-2: var(--grey-600);
  --border: var(--grey-200);
  --border-strong: #C2C6CC;
  --accent: var(--blue);
  --accent-hover: var(--blue-700);
  --link: var(--blue);
  --on-accent: #FFFFFF;
  --logo-mark: var(--blue);
  --edge-rgb: 2, 87, 243;   /* luce sui bordi delle card (EdgeLight) */
  color-scheme: light;

  /* Segno del logo come maschera CSS (bullet, separatori) */
  --mark-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22164.3 -29.8 200.3 200.3%22%3E%3Cg fill=%22black%22%3E%3Cpath d=%22M337.1 51.2C337 50.9 336.6 50.5 336.3 50.3C335.6 49.9 335.4 49 336.1 49C336.3 49 336.7 49.5 336.9 50.1C337.1 50.6 337.4 51 337.5 50.9C338.1 50.4 331.6 37.1 328 31.3C324.2 25.2 318.6 18.7 314.2 15C307.1 9.3 299.6 5.5 291.2 3.5L287.2 2.5L231.8 2.4C180.9 2.3 176.3 2.4 176.3 2.9C176.3 3.2 177.8 4.9 179.5 6.7C181.3 8.4 182.9 10.2 183.2 10.6C183.9 11.7 190.1 16.8 192.7 18.5C200.2 23.5 210.2 27.2 220 28.6C224.2 29.3 226.8 29.3 257.8 29.4C293.7 29.6 291.9 29.5 300.8 31.3C309.3 33.1 321.1 38.5 327.3 43.3C328.5 44.2 330.2 45.6 331.2 46.3C332.1 47 333.8 48.5 335 49.6C336.2 50.7 337.2 51.6 337.2 51.6C337.3 51.7 337.2 51.4 337.1 51.2Z%22/%3E%3Cpath d=%22M345.7 95.9C345.5 95.7 345.3 95.3 345.3 95C345.3 94.7 345.5 94.7 346 95.2C346.6 95.7 346.5 95.4 345.7 93.2C342.2 84.3 337 75.1 331.8 68.6C322.2 56.8 310.4 50 294.6 47.3C291 46.7 289.1 46.7 248 46.7C224.4 46.7 204.4 46.7 203.4 46.7C202.1 46.7 201.7 46.8 201.7 47.2C201.7 47.5 203 49 204.5 50.7C206.1 52.3 207.6 53.9 207.9 54.3C208.7 55.5 216.8 61.7 219.9 63.5C224.5 66.2 231.4 69.1 236.7 70.5C244.8 72.7 255.5 73.5 272.8 73.2C284.6 72.9 298.6 73.4 303.9 74.2C317.4 76.1 332.5 83.6 342.8 93.5C344.5 95 345.9 96.3 346 96.3C346.1 96.3 345.9 96.2 345.7 95.9Z%22/%3E%3Cpath d=%22M350.4 137.1C349.6 136.5 349.4 135.3 350.2 135.3C350.4 135.3 350.7 135.4 350.7 135.6C350.7 135.8 350.9 136.2 351.2 136.5C352.6 138.5 347 126.1 344.9 122.8C344.4 122 344 121.3 344 121.2C344 120.9 340.9 116.5 338.7 113.7C336.1 110.2 331.5 105.4 329 103.5C319.4 96.2 312.2 92.8 301.5 90.8C299.4 90.4 294.2 90.2 276.5 90C262.5 89.9 253.2 89.6 251.7 89.4C250.3 89.2 246.2 88.7 242.7 88.3C237 87.7 236.2 87.7 235.9 88.1C235.8 88.4 235.4 88.5 235.1 88.4C233.9 88 241.5 96 246.7 100.6C253.3 106.6 264.9 112.5 273.5 114.4C279 115.7 281.6 116 287.8 116.2C296.5 116.5 309.2 117.8 312.2 118.7C312.7 118.8 314.1 119.2 315.2 119.5C319.1 120.5 324.9 122.5 328.5 124C332.7 125.8 336.9 127.8 337.7 128.5C337.9 128.7 339.4 129.6 340.8 130.5C342.3 131.4 345.1 133.4 347.2 134.9C349.2 136.4 350.9 137.7 351 137.7C351.1 137.6 350.8 137.4 350.4 137.1Z%22/%3E%3C/g%3E%3C/svg%3E");

  /* Tipografia */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.625rem, 1.15rem + 6.3vw, 7rem);    /* 42 → 112 */
  --fs-h2: clamp(2.125rem, 1.2rem + 3.9vw, 4.25rem);       /* 34 → 68 */
  --fs-h3: clamp(1.25rem, 1.08rem + .65vw, 1.625rem);      /* 20 → 26 */
  --fs-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);   /* 18 → 22 */
  --fs-body: 1.0625rem;                                     /* 17 */
  --fs-small: .875rem;                                      /* 14 */
  --fs-eyebrow: .8125rem;                                   /* 13: sotto i 13px non si legge bene sul blu */

  /* Spazi — base 8 */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-y: clamp(5.5rem, 2.8rem + 9vw, 11rem);
  --page-x: clamp(1rem, -.5rem + 5vw, 4rem);                /* 16 → 64 */
  --gap: clamp(1rem, .7rem + 1vw, 1.5rem);                  /* 16 → 24 */
  --container: 82rem;                                       /* 1312 */

  /* Geometria — angoli arrotondati come le lettere del logo */
  --r-sm: 6px; --r: 10px; --r-lg: 16px;

  /* Movimento */
  --ease: cubic-bezier(.2, .7, 0, 1);        /* uscita rapida, arrivo morbido */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);        /* frenata lunga: entrate ampie */
  --spring: cubic-bezier(.34, 1.56, .64, 1);  /* rimbalzo: oltrepassa e torna */
  --dur-1: 160ms; --dur-2: 320ms; --dur-3: 800ms;

  --header-h: 88px;
  --header-h-compact: 64px;
}

/* Tema scuro: preferenza di sistema, scelta manuale, sezioni scure */
:root[data-theme="dark"],
.section--dark,
html:not(.menu-open) .site-header.on-dark {
  --bg: var(--night);
  --surface: var(--night-2);
  --surface-2: var(--night-3);
  --text: #EDEFF2;
  --text-2: var(--grey-400);
  --border: var(--night-line);
  --border-strong: #2C3A50;
  --link: var(--blue-200);
  --edge-rgb: 110, 157, 255;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--night);
    --surface: var(--night-2);
    --surface-2: var(--night-3);
    --text: #EDEFF2;
    --text-2: var(--grey-400);
    --border: var(--night-line);
    --border-strong: #2C3A50;
    --link: var(--blue-300);
    --edge-rgb: 110, 157, 255;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .section--dark { --bg: var(--night-2); --surface: var(--night-3); }
}
:root[data-theme="dark"] .section--dark { --bg: var(--night-2); --surface: var(--night-3); }

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-compact) + 16px);
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.6 var(--font-text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color var(--dur-2) var(--ease);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
p { text-wrap: pretty; }   /* niente parola sola sull'ultima riga */
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blue); color: #fff; }
/* cursore di testo nei colori del sito (la barra di scorrimento resta quella del sistema: colorarla toglie quella sottile di macOS) */
input, textarea { caret-color: var(--blue-300); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :focus-visible, :root[data-theme="dark"] :focus-visible { outline-color: #fff; }   /* il blu chiaro sul mondo blu non si vedeva (2,4:1) */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 12px 16px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent);
  transform: translateY(-160%); transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--page-x));
  margin-inline: auto;
  padding-inline: var(--page-x);
}

.section { position: relative; padding-block: var(--section-y); background: var(--bg); color: var(--text); }
.section--dark { background: var(--bg); }
.section + .section:not(.section--dark):not(.section--flush) { padding-top: 0; }

/* Segnaposto dichiarati: [DA INSERIRE] visibili ma discreti */
.ph {
  display: inline-block;
  padding: 0 .4em;
  border: 1px dashed currentColor;
  border-radius: 4px;
  font-size: max(.85em, .8125rem);   /* mai sotto i 13px, anche dentro testo piccolo */
  opacity: .75;
  white-space: nowrap;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
.display, .h2, .h3 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 560;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: .98; letter-spacing: -.035em; }
.h2 { font-size: var(--fs-h2); line-height: 1.02; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.015em; font-weight: 580; }
/* Titolo su due righe, centrato come MERCURIO / STUDIO */
.title-2l .l { display: block; }
.h2--sub { font-size: clamp(1.875rem, 1.1rem + 3vw, 3.25rem); }   /* v2: servizi, restyling, percorso, fiducia, domande */
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.small { font-size: var(--fs-small); }
.muted { color: var(--text-2); }

.eyebrow {
  display: inline-block;
  font: 600 var(--fs-eyebrow)/1 var(--font-display);
  font-stretch: 125%;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.js .reveal-scope .eyebrow { transition: letter-spacing 1200ms var(--expo), opacity 700ms var(--expo); }
.js .reveal-scope:not(.is-in) .eyebrow { letter-spacing: .6em; opacity: 0; }

.sec-head { max-width: 58rem; margin: 0 auto var(--s-9); text-align: center; }
.sec-head .eyebrow { margin-bottom: var(--s-5); }
.sec-head .lead { max-width: 42rem; margin: var(--s-5) auto 0; }

.link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-color var(--dur-1);
}
.link:hover { text-decoration-color: transparent; }

/* Elenco con micro-motivo (segno a tre lame) */
.list-mark { display: grid; gap: var(--s-3); }
.list-mark li { position: relative; padding-left: 1.75rem; }
.list-mark li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .95em; height: .95em;
  background: var(--accent);
  -webkit-mask: var(--mark-mask) center / contain no-repeat;
  mask: var(--mark-mask) center / contain no-repeat;
}
.section--dark .list-mark li::before { background: var(--blue-300); }

/* ==========================================================================
   COMPONENT: Button
   ========================================================================== */
.btn {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--border-strong);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 52px; padding: 0 1.5rem;
  border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 1rem/1 var(--font-text);
  letter-spacing: .005em;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); }
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }
.btn--ghost:hover { --btn-bd: var(--text); }
.btn--sm { min-height: 42px; padding: 0 1.1rem; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn__arrow { width: 16px; height: 16px; flex: none; transition: transform var(--dur-2) var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__arrow { transform: translateX(4px); } }

/* ==========================================================================
   COMPONENT: Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 0%, transparent);
  border-bottom: 1px solid transparent;
  transition: height var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.site-header.is-compact {
  height: var(--header-h-compact);
  background: var(--bg);
  border-bottom-color: var(--border);
}
.header__inner { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.brand { display: block; flex: none; color: var(--text); border-radius: 4px; }
.brand__logo {
  height: 38px; width: auto; aspect-ratio: 1160 / 300;
  transition: height var(--dur-2) var(--ease), opacity var(--dur-2);
}
.is-compact .brand__logo { height: 30px; }

.nav { margin-left: auto; display: none; }
.nav ul { display: flex; gap: var(--s-6); }
.nav a {
  position: relative; display: block; padding: 8px 0;
  font-size: .9375rem; font-weight: 500; color: #D3DBEA;   /* leggibile anche sopra il blu luminoso dell'hero */
  transition: color var(--dur-1);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-2) var(--ease);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--text); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

.header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.header__cta { display: none; }
@media (min-width: 640px) { .header__cta { display: inline-flex; } }

.icon-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--r-sm);
  color: var(--text); transition: background-color var(--dur-1);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 20px; height: 20px; }

.menu-btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 4px 0 10px; font-weight: 500; font-size: .9375rem; }
.menu-btn__lines { position: relative; width: 22px; height: 10px; }
.menu-btn__lines::before, .menu-btn__lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform var(--dur-2) var(--ease), top var(--dur-2) var(--ease);
}
.menu-btn__lines::before { top: 0; }
.menu-btn__lines::after { top: 8.5px; left: 6px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines::before { top: 4.25px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines::after { top: 4.25px; left: 0; transform: rotate(-45deg); }

/* Progresso di lettura (mobile/tablet) — la traccia blu in versione compatta */
.header__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform-origin: left; transform: scaleX(var(--progress, 0));
}

/* Menu mobile */
.mobile-nav {
  position: fixed; inset: var(--header-h-compact) 0 0; z-index: 99;
  background: var(--bg); color: var(--text);
  padding: var(--s-7) var(--page-x) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-7);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-nav ul { display: grid; gap: var(--s-2); }
.mobile-nav a.mobile-nav__link {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding: var(--s-2) 0;
  font: 560 clamp(2rem, 9vw, 3rem)/1.1 var(--font-display); font-stretch: 112%; letter-spacing: -.03em;
}
.mobile-nav__link span { font: 500 .75rem/1 var(--font-text); color: var(--text-2); letter-spacing: .08em; }
.mobile-nav__foot { margin-top: auto; display: grid; gap: var(--s-4); }
html.menu-open { overflow: hidden; }

/* ==========================================================================
   COMPONENT: Scroll rail — la linea blu che accompagna lo scroll
   ========================================================================== */
.scroll-rail { display: none; }
@media (min-width: 1280px) {
  .scroll-rail {
    display: block; position: fixed; z-index: 90;
    left: clamp(16px, calc((100vw - var(--container)) / 2 - 56px), 40px);
    top: calc(var(--header-h) + 24px); bottom: 40px; width: 14px;
    pointer-events: none;
    opacity: 0; transition: opacity var(--dur-3) var(--ease);
  }
  .scroll-rail.is-visible { opacity: 1; }
  .scroll-rail__track { position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: rgba(140, 149, 163, .32); }
  .scroll-rail__fill {
    position: absolute; inset: 0; background: var(--accent);
    transform-origin: top; transform: scaleY(var(--progress, 0));
  }
  .scroll-rail__head {
    position: absolute; left: -1px; top: 0; width: 16px; height: 16px;
    color: var(--logo-mark);
    transform: translateY(calc(var(--rail-h, 0px) * var(--progress, 0) - 8px));
  }
  .scroll-rail__head svg { width: 100%; height: 100%; }
  .scroll-rail__tick {
    position: absolute; left: 3px; width: 7px; height: 1px; background: rgba(140, 149, 163, .6);
    pointer-events: auto;
    transition: background-color var(--dur-2), width var(--dur-2) var(--ease);
  }
  .scroll-rail__tick.is-passed { background: var(--accent); width: 11px; }
  .scroll-rail__tick::before { content: ""; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -8px; }   /* area di clic più grande (era 11×1 px) */
  .scroll-rail__tick::after {
    content: attr(data-label); position: absolute; left: 20px; top: -7px;
    font: 500 11px/14px var(--font-text); color: var(--text-2); letter-spacing: .04em;
    opacity: 0; transform: translateX(-4px); white-space: nowrap;
    transition: opacity var(--dur-2), transform var(--dur-2) var(--ease);
  }
  .scroll-rail__tick::after { color: #8C95A3; }
}
/* Etichette solo dove c'è spazio fuori dalla griglia */
@media (min-width: 1680px) {
  .scroll-rail__tick.is-current::after { opacity: 1; transform: none; }
}

/* ==========================================================================
   COMPONENT: Reveal
   ========================================================================== */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity 900ms var(--expo), transform 1100ms var(--expo), filter 900ms var(--expo);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
/* Titoli su due righe: ogni riga sale da una fessura, la seconda subito dopo la prima */
.js .title-2l[data-reveal] { opacity: 1; transform: none; filter: none; }
.js .title-2l[data-reveal] .l {
  transform: translateY(110%) rotate(1.5deg); transform-origin: 50% 100%;
  clip-path: inset(-20% -8% 100% -8%);
  transition: transform 1100ms var(--expo), clip-path 1100ms var(--expo);
}
.js .title-2l[data-reveal] .l + .l { transition-delay: 120ms; }
.js .title-2l[data-reveal].is-in .l { transform: none; clip-path: inset(-20% -8% -30% -8%); }

/* ==========================================================================
   COMPONENT: EdgeLight — la luce segue il mouse lungo il bordo delle card,
   come le strisce di luce sugli smussi del logo 3D. Solo con mouse (JS).
   ========================================================================== */
.edge-light { position: relative; isolation: isolate; }
.edge-light::after,
.edge-light::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
/* filo di luce sul bordo (colore: --edge-rgb, dal tema) */
.edge-light::after {
  z-index: 2; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--edge-rgb), .95), rgba(var(--edge-rgb), .25) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* riflesso morbido sulla superficie */
.edge-light::before {
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(2, 87, 243, .1), transparent 65%);
}
.edge-light:hover::after, .edge-light:hover::before { opacity: 1; }
/* sulla card blu il blu resta pieno: solo il filo di luce, bianco */
.service--feature.edge-light { --edge-rgb: 255, 255, 255; }
.service--feature.edge-light::before { display: none; }
.edge-light[aria-disabled="true"]::before, .edge-light[aria-disabled="true"]::after { display: none; }

/* ==========================================================================
   COMPONENT: Hero 3D — logo Blender in video
   ========================================================================== */
.hero3d {
  position: relative;
  background: var(--night);            /* stesso colore dei bordi del video */
  color: var(--text);
}
.hero3d__stage { position: relative; overflow: hidden; background: var(--night); }
.hero3d__media { display: none; }

/* Base (senza JS o con "riduci movimento"): logo completo fermo + testo */
.hero3d__still { display: block; padding-top: var(--header-h); }
.hero3d__still img { width: 100%; height: auto; max-height: 76svh; object-fit: cover; }
.hero3d__copy { position: relative; margin-top: clamp(-7rem, -9vw, -2rem); padding-bottom: var(--section-y); text-align: center; }
.hero3d__title { font-size: clamp(1.75rem, 4.15vw, 3.75rem); }   /* 28 → 60: il logo resta il protagonista; due righe da 768px in su */
.hero3d__sub { max-width: 38rem; margin: var(--s-4) auto 0; }
.hero3d__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.hero3d__cue, .hero3d__skip { display: none; }

/* Video attivo — durante l'ingresso lo scroll è fermo: il primo gesto avvia la scomposizione */
html.hero-lock { overflow: hidden; }
html { scrollbar-gutter: stable; }
.js .hero3d.is-live .hero3d__stage { height: 100svh; min-height: 480px; }
.js .hero3d.is-live .hero3d__still { display: none; }
.js .hero3d.is-live .hero3d__media {
  display: block; position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;             /* dimensioni e posizione esatte le calcola il JS */
  transform-origin: 0 0; will-change: transform;
  /* bordi sfumati in trasparenza: il nero del video si fonde con la pagina su ogni browser */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.hero3d__video, .hero3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero3d__poster { opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.hero3d.is-still .hero3d__poster { opacity: 1; }
.js .hero3d.is-live .hero3d__copy {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding-bottom: clamp(1.5rem, 6svh, 4rem);
  opacity: var(--copy, 0);
  transform: translateY(calc((1 - var(--copy, 0)) * 28px));
  pointer-events: none;
}
/* velatura sotto il testo: il riflesso del logo non disturba la lettura */
.js .hero3d.is-live .hero3d__copy::before {
  content: ""; position: absolute; inset: -18% 0 0; z-index: -1;
  background: linear-gradient(to top, var(--night) 35%, rgba(5, 11, 21, .8) 70%, rgba(5, 11, 21, 0));
}
.js .hero3d.is-live .hero3d__copy { z-index: 1; isolation: isolate; }
.js .hero3d.is-live.is-copy .hero3d__copy { pointer-events: auto; }
.js .hero3d.is-live .hero3d__copy:focus-within { opacity: 1; transform: none; pointer-events: auto; }

.js .hero3d.is-live .hero3d__cue {
  display: flex; align-items: center; gap: 10px;
  position: absolute; left: 50%; bottom: clamp(20px, 4svh, 36px); transform: translateX(-50%);
  font: 500 .8125rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--grey-400);
  opacity: 0; transition: opacity var(--dur-2);
}
.js .hero3d.is-live.is-idle .hero3d__cue { opacity: 1; transition-delay: .3s; }
.js .hero3d.is-live .hero3d__skip {
  display: block; position: absolute; right: var(--page-x); bottom: clamp(16px, 3svh, 28px);
  padding: 10px 14px; border-radius: var(--r-sm);
  font-size: var(--fs-small); color: var(--grey-400);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2), visibility 0s linear var(--dur-2), color var(--dur-1);
}
.js .hero3d.is-live.is-playing .hero3d__skip { opacity: 1; visibility: visible; transition-delay: 0s; }
.hero3d__skip:hover { color: #EDEFF2; }
.hero3d__cue i { position: relative; display: block; width: 1px; height: 28px; background: rgba(237,239,242,.18); overflow: hidden; }
.hero3d__cue i::after { content: ""; position: absolute; inset: 0; background: var(--blue-300); transform: translateY(-100%); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

@media (max-width: 479.98px) {
  .hero3d__ctas .btn { width: 100%; }
}

/* ==========================================================================
   COMPONENT: Manifesto
   ========================================================================== */
/* Stesso fondo dell'hero (#050B15) in entrambi i temi: nessuno stacco all'uscita dal logo */
:root .section--dark.manifesto { --bg: var(--night); --surface: var(--night-2); overflow: clip; }

/* Frase grande: le parole passano da spente ad accese con lo scroll (JS). Senza JS è tutta accesa. */
.statement {
  position: relative; isolation: isolate; max-width: 24em; margin: 0 auto; text-align: center;
  font: 560 clamp(1.625rem, 1rem + 2.7vw, 3.25rem)/1.14 var(--font-display);
  font-stretch: 112%; letter-spacing: -.024em; text-wrap: balance;
  color: var(--text);
}
/* Alone blu dietro la frase: si accende con lei (--lit dal JS), come l'alone del logo 3D */
.statement::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: max(150%, 640px); aspect-ratio: 2 / 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(12, 63, 170, .36), rgba(12, 63, 170, .12) 55%, transparent);
  opacity: calc(.2 + var(--lit, 1) * .8);
  pointer-events: none;
}
.statement em { font-style: normal; color: var(--blue-300); }
.statement__w { transition: color 500ms var(--ease), text-shadow 500ms var(--ease); }
.statement.is-split .statement__w { color: rgba(237, 239, 242, .2); }
.statement.is-split .statement__w.is-lit { color: var(--text); }
.statement.is-split .statement__w.is-accent.is-lit { color: var(--blue-300); text-shadow: 0 0 28px rgba(2, 87, 243, .55); }

.manifesto__lead { max-width: 42rem; margin: var(--s-7) auto 0; text-align: center; color: var(--text-2); font-size: var(--fs-lead); line-height: 1.6; }
.reasons { display: grid; gap: var(--gap); margin-top: var(--s-9); counter-reset: r; }
.reason {
  position: relative; padding: var(--s-6) 0 0;
  border-top: 1px solid var(--border);
}
.reason::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px;
  background: var(--accent); transform-origin: left; transform: scaleX(0);
  transition: transform 1100ms var(--ease);
  transition-delay: calc(var(--d, 0) * 140ms + 200ms);
}
.reason.is-in::before, .no-js .reason::before { transform: scaleX(1); }
.reason__n { font: 500 .8125rem/1 var(--font-display); font-stretch: 125%; letter-spacing: .14em; color: var(--blue-300); }
.reason .h3 { margin: var(--s-5) 0 var(--s-3); }
.reason p { color: var(--text-2); }
.manifesto__close { max-width: 40rem; margin: var(--s-9) auto 0; text-align: center; font: 560 var(--fs-h3)/1.35 var(--font-display); font-stretch: 112%; letter-spacing: -.015em; }
@media (min-width: 768px) { .reasons { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); } }

/* ==========================================================================
   COMPONENT: Services — modulo quadrato
   ========================================================================== */
.services { display: grid; gap: var(--gap); }
.service {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.service:hover { border-color: var(--border-strong); }
.service__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.service__n { font: 500 .8125rem/1 var(--font-display); font-stretch: 125%; letter-spacing: .14em; color: var(--text-2); }
.service__mark { width: 28px; height: 28px; color: var(--accent); opacity: 0; transform: translateX(-12px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.service:hover .service__mark, .service:focus-within .service__mark { opacity: 1; transform: none; }
.service__body { margin-top: auto; }
.service .h3 { margin-bottom: var(--s-3); }
.service__desc { color: var(--text-2); }
.service__result { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); font-size: .9375rem; }
.service__result b { display: block; margin-bottom: 4px; font: 600 var(--fs-eyebrow)/1.4 var(--font-display); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }

.service--feature { background: var(--accent); border-color: var(--accent); color: #fff; }
.service--feature:hover { border-color: var(--accent); }
.service--feature .service__n, .service--feature .service__desc, .service--feature .service__result b { color: #fff; }
.service--feature .service__result { border-top-color: rgba(255,255,255,.3); }
.service--feature .service__mark { color: #fff; opacity: 1; transform: none; }
.service--feature .h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }

@media (min-width: 768px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service { aspect-ratio: 1 / 1; }
  .service--feature { grid-column: span 2; aspect-ratio: 2 / 1; }
}
@media (min-width: 1100px) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service--feature .service__body { max-width: 34rem; }
}

/* Separatore di sezione con micro-motivo */
.divider { display: flex; align-items: center; gap: var(--s-5); color: var(--accent); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.divider svg { width: 22px; height: 22px; }

/* ==========================================================================
   COMPONENT: Before / After
   ========================================================================== */
.ba {
  --pos: 50%;
  position: relative; max-width: 68rem; margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
  user-select: none; touch-action: pan-y;
}
@media (min-width: 768px) { .ba { aspect-ratio: 2 / 1; } }
.ba__layer { position: absolute; inset: 0; }
.ba__layer picture { display: block; width: 100%; height: 100%; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; }
.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; }
.ba__tag {
  position: absolute; bottom: 16px; z-index: 3;   /* in basso: in alto c'è la barra del browser */
  padding: 7px 10px; border-radius: 4px;
  font: 600 .8125rem/1 var(--font-display); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase;
  background: var(--night); color: #EDEFF2;
}
.ba__tag--before { left: 16px; }
.ba__tag--after { right: 16px; background: var(--accent); color: #fff; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4; width: 0;
  pointer-events: none;
}
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--accent); }
.ba__knob {
  position: absolute; left: 0; top: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--accent); color: #fff;
  box-shadow: 0 8px 24px rgba(5, 11, 21, .25);
  transition: transform var(--dur-2) var(--ease);
}
.ba__knob svg { width: 22px; height: 22px; }
.ba__range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.ba__range:focus-visible ~ .ba__handle .ba__knob { outline: 2px solid var(--text); outline-offset: 3px; }
.ba:active .ba__knob { transform: translate(-50%, -50%) scale(.94); }
.ba__note { max-width: 68rem; margin: var(--s-4) auto 0; text-align: center; font-size: var(--fs-small); color: var(--text-2); }

/* Esempi illustrativi con la barra del browser: un sito anni 2000 e uno riprogettato */
.mock { position: absolute; inset: 0; display: flex; flex-direction: column; }
.mock span { display: block; }
.mock .m-chrome { flex: none; display: flex; align-items: center; gap: 12px; height: clamp(26px, 5%, 40px); padding: 0 14px; }
.mock .m-dots { display: flex; gap: 6px; }
.m-dots span { width: 9px; height: 9px; border-radius: 50%; }
.m-url { flex: 1; max-width: 44%; height: 14px; margin-inline: auto; border-radius: 4px; }
.m-page { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* Prima: grigio, bottoni in rilievo, scritta che scorre, contatore visite */
.mock--old .m-chrome { background: linear-gradient(#EFEDE8, #CFCBC3); border-bottom: 1px solid #A9A498; }
.mock--old .m-dots span { border-radius: 2px; background: #B4AFA4; }
.mock--old .m-url { border-radius: 0; background: #fff; border: 1px solid #A9A498; }
.mock--old .m-page { display: grid; align-content: start; gap: 2.4%; padding: 2.5% 12% 0; background: #E4E2DC; }
.mock--old .m-bar { height: clamp(22px, 4.4vw, 56px); background: linear-gradient(#8296B5, #4F6487); border: 2px outset #A9B8CF; }
.mock--old .m-nav { display: flex; gap: 1.5%; }
.mock--old .m-nav span { flex: 1; height: 16px; background: #B9B4AA; border: 2px outset #D6D1C7; }
.mock--old .m-marquee { justify-self: center; width: 64%; height: 10px; background: repeating-linear-gradient(90deg, #A53A33 0 22px, transparent 22px 28px); opacity: .75; }
.mock--old .m-row { display: grid; grid-template-columns: 1fr 2.4fr; gap: 3%; }
.mock--old .m-box { aspect-ratio: 1; background: #C9C4BA; border: 2px inset #D8D3CA; }
.mock--old .m-lines { display: grid; gap: 7px; align-content: start; }
.mock--old .m-lines span { height: 7px; background: #ACA79D; }
.mock--old .m-lines span:nth-child(3n) { width: 70%; }
.mock--old .m-lines span:nth-child(5) { width: 38%; height: 6px; background: none; border-bottom: 2px solid #2F4FA8; }
.mock--old .m-counter { justify-self: center; width: 18%; height: 18px; background: repeating-linear-gradient(90deg, #1A1A1A 0 13px, #3A3A3A 13px 15px); border: 2px inset #8A867E; }

/* Dopo: scuro, titoli forti, un pulsante blu, un oggetto 3D in vetrina */
.mock--new { background: var(--ink); }
.mock--new .m-chrome { background: #0D2036; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.mock--new .m-dots span { background: rgba(255, 255, 255, .2); }
.mock--new .m-url { background: rgba(255, 255, 255, .08); }
.mock--new .m-page {
  display: grid; align-content: start; gap: 9%; padding: 4% 7% 0;
  background: radial-gradient(60% 55% at 78% 42%, rgba(12, 63, 170, .38), transparent 70%), var(--ink);
}
.mock--new .m-top { display: flex; justify-content: space-between; align-items: center; }
.mock--new .m-logo { width: 13%; height: 12px; border-radius: 2px; background: #fff; }
.mock--new .m-links { display: flex; align-items: center; gap: 12px; }
.mock--new .m-links span { width: 32px; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.mock--new .m-links .m-cta { width: 58px; height: 20px; border-radius: 4px; background: var(--blue); }
.mock--new .m-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 8%; align-items: center; }
.mock--new .m-kicker { width: 24%; height: 5px; margin-bottom: 7%; border-radius: 2px; background: var(--blue-300); }
.mock--new .m-h1 { height: clamp(12px, 2.3vw, 28px); border-radius: 4px; background: #fff; }
.mock--new .m-h1 + .m-h1 { width: 68%; margin-top: 4%; }
.mock--new .m-p { height: 5px; margin-top: 3%; border-radius: 2px; background: rgba(255, 255, 255, .38); }
.mock--new .m-h1 + .m-p { margin-top: 8%; }
.mock--new .m-p + .m-p { width: 78%; }
.mock--new .m-btns { display: flex; gap: 4%; margin-top: 9%; }
.mock--new .m-btns span { width: 32%; height: clamp(16px, 2vw, 30px); border-radius: 4px; background: var(--blue); }
.mock--new .m-btns span + span { width: 26%; background: none; border: 1px solid rgba(255, 255, 255, .4); }
.mock--new .m-img {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px;
  background: linear-gradient(160deg, #1F3354, #0A1524 78%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* sfera di metallo con riflesso blu: un render di prodotto */
.mock--new .m-img::before {
  content: ""; position: absolute; inset: 20%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #F4F6FA, #9AA6BC 22%, #3A4862 52%, #111B2C 78%);
  box-shadow: 0 26px 30px -14px rgba(0, 0, 0, .6);
}
.mock--new .m-img::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 13%; height: 6%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 87, 243, .55), transparent);
}
.mock--new .m-badge {
  position: absolute; left: -12%; bottom: 12%; width: 42%; height: 15%; z-index: 1;
  border-radius: 8px; background: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}
.mock--new .m-badge::before, .mock--new .m-badge::after { content: ""; position: absolute; left: 12%; height: 12%; border-radius: 2px; background: var(--ink); }
.mock--new .m-badge::before { top: 30%; width: 58%; }
.mock--new .m-badge::after { top: 56%; width: 36%; background: #C2C6CC; }
.mock--new .m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.mock--new .m-cards span { height: 120px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
@media (max-width: 767.98px) {
  .mock--old .m-page { padding: 3% 6% 0; }
  .mock--new .m-page { gap: 7%; }
  .mock--new .m-links span:not(.m-cta) { display: none; }
  .mock--new .m-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 6%; }
  .mock--new .m-badge { left: -16%; width: 56%; }
}

/* ==========================================================================
   COMPONENT: Work grid
   ========================================================================== */
.works { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .works { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .works { grid-template-columns: repeat(4, 1fr); } }
.work { display: flex; flex-direction: column; gap: var(--s-4); }
.work__media {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .work:hover .work__media img { transform: scale(1.03); } }
.work__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-2); }
.work__ph svg { width: 22%; color: var(--border-strong); transition: color var(--dur-2), transform var(--dur-3) var(--ease); }
@media (hover: hover) and (pointer: fine) { .work:hover .work__ph svg { color: var(--accent); transform: translateX(6%); } }
.work__ph span { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: .75rem; }
.work__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 9px; border-radius: 4px;
  font: 600 .6875rem/1 var(--font-display); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
}
.work__meta { font-size: var(--fs-small); color: var(--text-2); }
.work .h3 { font-size: 1.25rem; }
.work p { color: var(--text-2); font-size: .9375rem; }
.works__note { margin-top: var(--s-7); text-align: center; font-size: var(--fs-small); color: var(--text-2); }

/* ==========================================================================
   COMPONENT: Method — fasi collegate dalla traccia
   ========================================================================== */
.steps { position: relative; display: grid; gap: var(--s-7); padding-left: 32px; }
.steps__line { position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.steps__line::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform-origin: top; transform: scaleY(0); transition: transform 1600ms var(--ease) 200ms;
}
.steps.is-in .steps__line::after, .no-js .steps__line::after { transform: none; }
.step { position: relative; }
.step__dot {
  position: absolute; left: -32px; top: 2px; width: 11px; height: 11px; border-radius: 3px;
  background: var(--bg); border: 1px solid var(--border-strong);
  transition: background-color var(--dur-2), border-color var(--dur-2);
  transition-delay: calc(var(--d, 0) * 280ms + 300ms);
}
.steps.is-in .step__dot { background: var(--accent); border-color: var(--accent); }
.step__n { font: 500 .8125rem/1 var(--font-display); font-stretch: 125%; letter-spacing: .14em; color: var(--blue-300); }
.step .h3 { margin: var(--s-3) 0 var(--s-3); }
.step p { color: var(--text-2); font-size: .9875rem; }
.step__time {
  display: inline-block; margin-top: var(--s-4);
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px;
  font-size: .8125rem; color: var(--text);
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 2rem); padding: 32px 0 0; }
  .steps__line { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 1px; }
  .steps__line::after { transform-origin: left; transform: scaleX(0); }
  .step__dot { left: 0; top: -32px; }
}

/* ==========================================================================
   COMPONENT: Forms
   ========================================================================== */
.card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); }
.field label, .fieldset legend { font-size: .875rem; font-weight: 500; }
.field .opt { color: var(--text-2); font-weight: 400; }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.textarea { min-height: 140px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-size: 5px 5px; background-position: right 22px center, right 17px center; background-repeat: no-repeat;
}
.input::placeholder, .textarea::placeholder { color: var(--text-2); opacity: .8; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-2); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #C2341D; }
.field__error { font-size: .8125rem; color: #B42318; }
.section--dark .field__error, :root[data-theme="dark"] .field__error { color: #FF8A7A; }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend { margin-bottom: var(--s-3); padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: .9375rem;
  transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.chip span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; border: 1px solid currentColor; transition: background-color var(--dur-1); }
.chip input:checked + span { border-color: var(--accent); color: var(--text); }
.chip input:checked + span::before { background: var(--accent); border-color: var(--accent); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; color: var(--text-2); }
.check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.form__status { font-size: .9375rem; }
.form__status:empty { display: none; }
.form__status {
  padding: var(--s-4); border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2);
}
.form__status strong { display: block; margin-bottom: 4px; }

/* ==========================================================================
   COMPONENT: Audit (analisi del sito)
   ========================================================================== */
.audit { display: grid; gap: var(--s-8); align-items: start; }
.audit__intro .lead { margin: 0; }
.audit__intro .list-mark { margin-top: var(--s-6); }
.audit__intro .list-mark li b { font-weight: 600; }
@media (min-width: 1024px) { .audit { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 6vw, 7rem); } }

/* ==========================================================================
   COMPONENT: FAQ
   ========================================================================== */
.faq { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); interpolate-size: allow-keywords; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0; cursor: pointer; list-style: none;
  font: 560 clamp(1.0625rem, 1rem + .4vw, 1.25rem)/1.35 var(--font-display); font-stretch: 108%; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform var(--dur-2) var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq details[open] .faq__icon::after { transform: rotate(0); }
.faq details[open] summary { color: var(--text); }
.faq summary:hover .faq__icon { color: var(--accent); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-2) var(--ease), content-visibility var(--dur-2) allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq__a { padding: 0 0 var(--s-5); max-width: 44rem; color: var(--text-2); }

/* ==========================================================================
   COMPONENT: Contact
   ========================================================================== */
.contact { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) { .contact { grid-template-columns: 4fr 7fr; gap: clamp(3rem, 6vw, 7rem); } }
.channels { display: grid; gap: var(--s-3); align-content: start; }
.channel {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); transition: border-color var(--dur-2);
}
a.channel:hover { border-color: var(--accent); }
.channel svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.channel small { display: block; color: var(--text-2); font-size: .8125rem; }
.channel span { font-weight: 500; overflow-wrap: anywhere; }
.channels__note { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-2); }

/* ==========================================================================
   COMPONENT: Footer — logo in grande come chiusura
   ========================================================================== */
.site-footer { padding: var(--section-y) 0 var(--s-6); }
.footer__cta { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-6); padding-bottom: var(--s-8); border-bottom: 1px solid var(--border); }
.footer__cta .h2 { max-width: 20ch; text-wrap: balance; }
@media (max-width: 639.98px) { .footer__cta .h2 { font-size: clamp(1.625rem, 6.6vw, 2.125rem); } }
.footer__grid { display: grid; gap: var(--s-7); padding: var(--s-8) 0; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
.footer__col h3 { margin-bottom: var(--s-4); font: 600 var(--fs-eyebrow)/1 var(--font-display); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.footer__col ul { display: grid; gap: var(--s-2); }
.footer__col a, .footer__col button { color: var(--text); transition: color var(--dur-1); text-align: left; }
.footer__col a:hover, .footer__col button:hover { color: var(--link); }
.footer__logo { color: var(--text); padding-block: var(--s-6); }
.footer__logo svg { width: 100%; height: auto; }
.js .footer__logo svg { clip-path: inset(0 100% 0 0); transition: clip-path 1400ms var(--ease-io); }
.js .footer__logo.is-in svg { clip-path: inset(0 0 0 0); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: .8125rem; color: var(--text-2); }

/* ==========================================================================
   COMPONENT: Cookie consent
   ========================================================================== */
.cookie {
  position: fixed; z-index: 120; left: 16px; right: 16px; bottom: 16px;
  max-width: 26rem; padding: var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
  box-shadow: 0 20px 50px rgba(5, 11, 21, .16);
  transform: translateY(calc(100% + 24px)); visibility: hidden;
  transition: transform 450ms var(--ease), visibility 0s linear 450ms;
}
.cookie.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.cookie p { font-size: .8125rem; line-height: 1.55; color: var(--text-2); }
.cookie p strong { display: block; margin-bottom: 6px; font-size: 1rem; color: var(--text); }
.cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-5); }
.cookie__actions .btn { padding: 0 1rem; }
.cookie__actions .cookie__custom { grid-column: 1 / -1; min-height: 40px; border: 0; text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 640px) { .cookie { right: auto; left: 24px; bottom: 24px; } }
@media (max-width: 639.98px) {
  .cookie { left: 12px; right: 12px; bottom: 12px; padding: var(--s-4); }
  .cookie__actions { grid-template-columns: 1fr 1fr auto; margin-top: var(--s-4); }
  .cookie__actions .cookie__custom { grid-column: auto; padding: 0 .5rem; }
}

.dialog {
  width: min(36rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
}
.dialog::backdrop { background: rgba(5, 11, 21, .55); }
.dialog__inner { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); display: grid; gap: var(--s-5); }
.dialog .h3 { font-size: 1.375rem; }
.pref { display: flex; gap: var(--s-4); justify-content: space-between; align-items: flex-start; padding: var(--s-4) 0; border-top: 1px solid var(--border); }
.pref p { font-size: .875rem; color: var(--text-2); }
.pref b { display: block; margin-bottom: 4px; }
.switch { position: relative; flex: none; width: 44px; height: 26px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 6px; background: var(--border-strong); transition: background-color var(--dur-2); }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 4px; background: #fff; transition: transform var(--dur-2) var(--ease); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:disabled + span { opacity: .55; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   COMPONENT: Blade — una lama della E (simboli #blade-1..3), la guida del percorso.
   Blu pieno; la luce intorno è un'ombra luminosa, non un gradiente del colore.
   ========================================================================== */
.blade {
  display: block; width: 100%; height: auto; overflow: visible;
  color: var(--blue);
  filter: drop-shadow(0 0 10px rgba(2, 87, 243, .7)) drop-shadow(0 0 2px rgba(110, 157, 255, .55));
}

/* Consegna dall'hero al percorso: alla fine le tre lame si accendono una dopo l'altra */
.hero3d__blades { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: var(--s-6); }
.hero3d__blades .blade { width: auto; height: 14px; }
.js .hero3d.is-live:not(.is-done) .hero3d__blades .blade { opacity: .2; filter: none; }
.js .hero3d.is-live.is-done .hero3d__blades .blade { animation: hb-on 640ms var(--spring) calc(250ms + var(--i) * 300ms) both; }
@keyframes hb-on { from { opacity: .2; filter: none; transform: translateY(-8px) scale(.7); } 60% { opacity: 1; transform: scale(1.25); } }

/* ==========================================================================
   COMPONENT: Scene — un passaggio del percorso (js: Scenes).
   Le animazioni restano ferme al primo fotogramma finché la scena non è visibile
   per metà (.is-on), poi partono una volta. Senza JS o con "riduci movimento":
   stato finale. Il racconto di ogni scena si chiude entro 2 s circa.
   ========================================================================== */
:root .section--dark.scene,
:root .section--dark.interlude { --bg: var(--night); --surface: var(--night-2); --surface-2: var(--night-3); }
.scene { display: flex; align-items: center; padding-block: clamp(4.5rem, 2.5rem + 5vw, 8rem); }   /* v2: ritmo fisso tra le sezioni invece di una schermata piena ciascuna */
.scene > .container { width: 100%; }
.scene .sec-head { margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.stage { position: relative; max-width: 56rem; margin-inline: auto; }
.scene__note { max-width: 36rem; margin: var(--s-6) auto 0; text-align: center; font-size: var(--fs-small); color: var(--text-2); }
.js [data-scene]:not(.is-on) *,
.js [data-scene]:not(.is-on) *::before,
.js [data-scene]:not(.is-on) *::after { animation-play-state: paused !important; }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } }
/* lama che attraversa (servizi) e dissolvenza finale (servizi, quadrante 48h) */
@keyframes mb-sweep { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes mb-fade { to { opacity: 0; } }

/* --- 2 · Cosa facciamo: quattro render 3D, ognuno scoperto da una lama, poi un lento avvicinamento --- */
:root .section--dark.services3d { --bg: var(--night); --surface: var(--night-2); }
.sv { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); max-width: 80rem; margin-inline: auto; }
.sv__item { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) {
  .sv__item { grid-template-columns: 2fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
  .sv__item:nth-child(even) { grid-template-columns: 1fr 2fr; }
  .sv__item:nth-child(even) .sv__media { order: 2; }
}
.sv__media { position: relative; max-width: none; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); animation: sv-glow 1.8s var(--ease) both; }
@keyframes sv-glow { from { box-shadow: 0 0 0 0 rgba(2, 87, 243, 0); } 40% { box-shadow: 0 30px 120px -20px rgba(2, 87, 243, .7); } to { box-shadow: 0 40px 100px -50px rgba(2, 87, 243, .45); } }
.sv__media picture, .sv__media img { display: block; width: 100%; height: 100%; }
.sv__media picture { animation: cut-in 900ms var(--ease) both; }
@keyframes cut-in { from { clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%); } to { clip-path: polygon(0 0, 125% 0, 100% 100%, -25% 100%); } }
.sv__media img { object-fit: cover; animation: sv-zoom 5s var(--expo) both, flash 1.1s ease-out 150ms both; }
@keyframes sv-zoom { from { transform: scale(1.3) rotate(-1.5deg); } }
@keyframes flash { from { filter: brightness(2.4) saturate(1.4); } }
.sv__sweep { position: absolute; inset: 0; pointer-events: none; animation: mb-sweep 900ms var(--ease) both, mb-fade 400ms ease 760ms both; }
.sv__sweep .blade { position: absolute; right: 0; top: 50%; width: clamp(80px, 16%, 200px); transform: translate(45%, -50%); }
.sv__n { font: 600 clamp(2.75rem, 1.6rem + 3.4vw, 5rem)/1 var(--font-display); font-stretch: 112%; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(110, 157, 255, .65); animation: sv-n 900ms var(--spring) 250ms both; }
@keyframes sv-n { from { opacity: 0; transform: translateX(-48px) skewX(-14deg); } 60% { opacity: 1; } }
.sv__text .h3 { margin: var(--s-3) 0 var(--s-2); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); animation: slot 900ms var(--expo) 380ms both; }
@keyframes slot { from { transform: translateY(110%); clip-path: inset(-20% -8% 100% -8%); } to { clip-path: inset(-20% -8% -30% -8%); } }
.sv__text p:last-child { font-size: var(--fs-lead); color: var(--text-2); animation: fade-up 700ms var(--expo) 520ms both; }
.sv__note { max-width: 62ch; margin: var(--s-7) auto 0; text-align: center; font-size: var(--fs-small); color: var(--text-2); text-wrap: pretty; }
@media (max-aspect-ratio: 9/10) { .sv__media { aspect-ratio: 4 / 5; } }

/* --- 3 · I tempi: tre segmenti che si accendono, contatore fino a 48 h (js: Counter) --- */
.stage--timer { display: grid; justify-items: center; gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); max-width: 48rem; }
/* bordi sfumati nel fondo della pagina: il quadrante e il domino galleggiano, senza riquadro */
.dial, .domino {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
.dial { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; }
.dial picture, .dial img { display: block; width: 100%; height: 100%; }
.dial picture { animation: iris 1.1s var(--expo) both; }
@keyframes iris { from { clip-path: circle(0% at 50% 47%); } to { clip-path: circle(75% at 50% 47%); } }
.dial img { object-fit: cover; animation: dial-in 2.4s var(--expo) both, flash 1s ease-out both; }
@keyframes dial-in { from { transform: scale(1.35) rotate(-12deg); } }
/* lancetta di luce: un giro completo sul quadrante mentre il contatore sale */
.dial__sweep {
  position: absolute; left: 50%; top: 47%; width: 47%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  border-radius: 50%; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0 72%, rgba(110, 157, 255, .05) 80%, rgba(150, 190, 255, .55) 99.4%, transparent 99.6%);
  -webkit-mask: radial-gradient(closest-side, transparent 56%, #000 60%, #000 97%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 56%, #000 60%, #000 97%, transparent 100%);
  animation: dial-sweep 1.4s cubic-bezier(.45, .05, .25, 1) 150ms both, mb-fade 400ms ease 1.5s both;
}
@keyframes dial-sweep { from { opacity: 0; transform: rotate(0); } 8% { opacity: 1; } to { transform: rotate(360deg); } }
.dial .timer {
  position: absolute; left: 50%; top: 47%; translate: -50% -50%; margin: 0;
  font-size: clamp(2.75rem, 10.5cqi, 6rem); text-shadow: 0 0 40px rgba(2, 87, 243, .55);
  animation: tm-in 800ms var(--spring) 120ms both, tm-pop 700ms var(--ease) 1.38s both;
}
@keyframes tm-in { from { opacity: 0; transform: scale(.6); filter: blur(12px); } }
@keyframes tm-pop { 35% { transform: scale(1.14); text-shadow: 0 0 60px rgba(110, 157, 255, .95), 0 0 18px rgba(2, 87, 243, .9); } }
@media (max-aspect-ratio: 9/10) {
  .dial { aspect-ratio: 4 / 5; }
  .dial__sweep { width: 71%; }
  .dial .timer { font-size: clamp(2.5rem, 15cqi, 5rem); }
}
.timer { font: 600 clamp(4.5rem, 2.6rem + 8vw, 9.5rem)/.85 var(--font-display); font-stretch: 112%; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--text); }
.timer__u { margin-left: .06em; font-size: .38em; letter-spacing: 0; color: var(--blue-300); }
.track { display: flex; align-items: center; gap: 4%; width: 100%; max-width: 30rem; animation: tr-flash 700ms ease 1.4s both; }
.track__seg { position: relative; flex: var(--w) 1 0; }
.blade--dim { color: #17233A; filter: none; }
.blade--lit { position: absolute; inset: 0; transform-origin: left center; animation: tr-on 560ms var(--spring) var(--t) both; }
@keyframes tr-on { from { opacity: 0; transform: scaleX(0); } 55% { opacity: 1; filter: brightness(2.2) drop-shadow(0 0 14px rgba(110, 157, 255, .95)); } }
@keyframes tr-flash { 40% { filter: brightness(1.9); } }
.timer__done { font: 600 .8125rem/1 var(--font-display); font-stretch: 125%; letter-spacing: .32em; text-transform: uppercase; color: var(--blue-300); animation: tm-done 800ms var(--expo) 1.45s both; }
@keyframes tm-done { from { opacity: 0; letter-spacing: 1em; filter: blur(6px); } }

/* --- 3 · Il prezzo: cinque parti, quattro cadono, l'ultima diventa una lama --- */
.stage--price { max-width: 44rem; }
.domino { position: relative; margin: 0 0 var(--s-5); aspect-ratio: 16 / 9; overflow: hidden; animation: dm-shake 420ms ease 760ms both; }
.domino picture, .domino img { display: block; width: 100%; height: 100%; }
.domino picture { animation: cut-in 1s var(--expo) both; }
.domino img { object-fit: cover; animation: dm-in 2.2s var(--expo) both, flash 1s ease-out both; }
@keyframes dm-in { from { transform: scale(1.25) translateX(-4%); } }
@keyframes dm-shake { 20% { translate: 0 5px; } 45% { translate: 0 -3px; } 70% { translate: 0 1px; } }
/* lampo blu sul blocco che resta in piedi, quando la lama compare nella barra */
.domino__flash {
  position: absolute; left: 25%; top: 50%; width: 40%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(110, 157, 255, .55), rgba(2, 87, 243, .25) 45%, transparent);
  mix-blend-mode: screen; opacity: 0; animation: dm-flash 1.1s var(--ease) 1.15s both;
}
@keyframes dm-flash { 25% { opacity: 1; transform: scale(1.15); } to { opacity: .25; } }
@media (max-aspect-ratio: 9/10) {
  .domino { aspect-ratio: 4 / 5; }
  .domino__flash { left: 17%; top: 52%; width: 62%; }
}
.price__label { margin-bottom: var(--s-3); font: 600 var(--fs-eyebrow)/1 var(--font-display); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.price__bar { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: clamp(44px, 5vw, 60px); transform-origin: left center; animation: pr-in 900ms var(--spring) 200ms both; }
@keyframes pr-in { from { transform: scaleX(0); } }
.price__seg { border-radius: 8px; background: #22324A; }
/* il contorno della barra intera resta: a fine scena si vede ancora il confronto */
.price__bar::before { content: ""; position: absolute; inset: -1px; border: 1.5px dashed rgba(151, 160, 174, .7); border-radius: 9px; background: rgba(255, 255, 255, .03); animation: pr-ghost 500ms ease 900ms both; }
@keyframes pr-ghost { from { opacity: 0; } }
.price__seg:not(.price__seg--keep) { animation: pr-drop 640ms cubic-bezier(.5, 0, .75, .3) calc(760ms + var(--i) * 80ms) both; }
@keyframes pr-drop { 22% { transform: translateY(-14px) rotate(calc(var(--r) * -.6)); } 80% { opacity: 1; } to { opacity: 0; transform: translateY(170px) rotate(calc(var(--r) * 6)); } }
.price__seg--keep { animation: pr-fade 260ms ease 1.15s both; }
@keyframes pr-fade { to { opacity: 0; } }
.price__blade { position: absolute; left: 0; top: 50%; width: 31%; transform: translateY(-50%); animation: pr-blade 760ms var(--ease) 1.15s both; }
@keyframes pr-blade { from { opacity: 0; transform: translateY(-50%) scale(.3) rotate(-18deg); filter: brightness(3) drop-shadow(0 0 24px rgba(110, 157, 255, 1)); } 60% { opacity: 1; transform: translateY(-50%) scale(1.18) rotate(3deg); } 82% { transform: translateY(-50%) scale(.97); } }
.price__us { margin-top: var(--s-4); font: 560 var(--fs-h3)/1.2 var(--font-display); font-stretch: 112%; letter-spacing: -.015em; color: var(--text); animation: fade-up 500ms var(--ease) 1.4s both; }
.price__us span { font-weight: 500; color: var(--text-2); }

/* --- 4 · Restyling: il confronto con la E come maniglia (js: BeforeAfter.autoplay) --- */
.stage--ba { max-width: 54rem; }
.js .stage--ba .ba[data-reveal]:not(.is-in) { transform: perspective(1400px) rotateX(20deg) translateY(70px) scale(.92); }
.stage--ba + .ba__note { max-width: 54rem; }
.ba__knob svg { --logo-mark: #fff; width: 28px; height: 28px; }
.ba__hint {
  position: absolute; left: 0; top: calc(50% + 40px); transform: translateX(-50%);
  padding: 5px 8px; border-radius: 4px; background: rgba(5, 11, 21, .78); color: #EDEFF2;
  font: 600 .8125rem/1 var(--font-display); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: opacity var(--dur-2);
}
.ba.is-touched .ba__hint { opacity: 0; }

/* --- 5 · Il percorso: la linea si disegna e accende una lama per passo --- */
.path { position: relative; display: grid; gap: var(--s-7); max-width: 64rem; padding-left: 92px; }
.path__line { position: absolute; left: 40px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.path__line::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform-origin: top; animation: pa-draw-v 1.3s var(--ease) 100ms both; }
.path__line::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px 4px rgba(110, 157, 255, .9), 0 0 32px 12px rgba(2, 87, 243, .6);
  animation: pa-comet-v 1.3s var(--ease) 100ms both;
}
@keyframes pa-comet-v { from { top: 0; } 85% { opacity: 1; } to { top: 100%; opacity: 0; } }
@keyframes pa-comet-h { from { left: 0; } 85% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes pa-draw-v { from { transform: scaleY(0); } }
@keyframes pa-draw-h { from { transform: scaleX(0); } }
.path__step { position: relative; }
.path__blade { position: absolute; left: -92px; top: 2px; width: auto; height: 28px; animation: pa-pop 760ms var(--ease) calc(200ms + var(--i) * 400ms) both; }
@keyframes pa-pop { from { opacity: 0; transform: scale(.2) rotate(-35deg); } 55% { opacity: 1; transform: scale(1.25) rotate(6deg); } 78% { transform: scale(.94) rotate(-1deg); } }
.path__n, .path__step .h3, .path__step > p:last-child { animation: fade-up 500ms var(--ease) calc(350ms + var(--i) * 400ms) both; }
.path__n { font: 500 .8125rem/1 var(--font-display); font-stretch: 125%; letter-spacing: .14em; color: var(--blue-200); }
.path__step .h3 { margin: var(--s-3) 0 var(--s-2); }
.path__step > p:last-child { color: var(--text-2); }
@media (min-width: 900px) {
  .path { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); padding: 72px 0 0; }
  .path__line { left: 0; right: 0; top: 17px; bottom: auto; width: auto; height: 2px; }
  .path__line::after { transform-origin: left; animation-name: pa-draw-h; }
  .path__line::before { left: 0; top: 50%; animation-name: pa-comet-h; }
  .path__blade { left: 0; top: -72px; height: 34px; }   /* sulla linea (top 17px, centro della lama) */
}

/* ==========================================================================
   COMPONENT: Interlude — seconda animazione 3D a metà percorso (js: Interlude).
   Finché il clip non c'è: logo 3D fermo con un passaggio di luce.
   ========================================================================== */
.interlude { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 6rem); text-align: center; background: var(--bg); color: var(--text); overflow: clip; }
.interlude__stage {
  position: relative; width: min(100%, 1600px); margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.interlude__poster, .interlude__poster img, .interlude__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.interlude__poster img, .interlude__video { object-fit: cover; }
.interlude__video { opacity: 0; transition: opacity 600ms var(--ease); }
.interlude.is-playing .interlude__video { opacity: 1; }
.interlude__sweep {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(190, 215, 255, .22) 50%, transparent 65%);
  mix-blend-mode: screen;
}
.interlude.is-on .interlude__sweep { animation: il-sweep 1.8s var(--ease-io) 200ms both; }
.interlude.is-on .interlude__poster img { animation: il-zoom 2.6s var(--expo) both; }
@keyframes il-zoom { from { transform: scale(1.14); filter: brightness(.35); } }
@keyframes il-sweep { from { opacity: 1; transform: translateX(-100%); } to { opacity: 0; transform: translateX(100%); } }
.interlude__caption { max-width: 36rem; margin: var(--s-5) auto 0; padding-inline: var(--page-x); font: 560 var(--fs-h3)/1.3 var(--font-display); font-stretch: 112%; letter-spacing: -.015em; }
@media (max-aspect-ratio: 9/10) {
  .interlude__stage { aspect-ratio: 4 / 5; max-width: 36rem; }
  .interlude.is-wide .interlude__stage { aspect-ratio: 16 / 9; max-width: none; }
}

/* ==========================================================================
   COMPONENT: Funnel — modulo in tre domande (js: Funnel). Fine: WhatsApp o email.
   ========================================================================== */
.funnel { display: grid; gap: var(--s-5); max-width: 72rem; margin-inline: auto; align-items: start; }
@media (min-width: 1024px) { .funnel { grid-template-columns: 7fr 5fr; gap: var(--s-6); } }
.funnel [hidden] { display: none !important; }
.funnel__form { display: grid; gap: var(--s-5); }
.funnel__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.funnel__blades { display: flex; align-items: center; gap: 10px; }
.funnel__blades .blade { width: auto; height: 18px; color: #1E2A3D; filter: none; transition: color var(--dur-2), filter var(--dur-2); }
.funnel__blades .blade.is-done,
.funnel__blades .blade.is-current { color: var(--blue); filter: drop-shadow(0 0 8px rgba(2, 87, 243, .7)); }
.funnel__blades .blade.is-current { animation: fn-pulse 1.6s ease-in-out infinite; }
@keyframes fn-pulse { 50% { opacity: .5; } }
.funnel__count { font-size: var(--fs-small); color: var(--text-2); }
.funnel__step { display: grid; gap: var(--s-5); min-width: 0; margin: 0; padding: 0; border: 0; }
.funnel__step > legend { margin-bottom: var(--s-5); padding: 0; }
.funnel__step.is-entering { animation: fn-in 320ms var(--ease) both; }
@keyframes fn-in { from { opacity: 0; transform: translateX(24px); } }
.funnel__step .choice { animation: fade-up 600ms var(--expo) both; }
.funnel__step .choice:nth-child(2) { animation-delay: 90ms; }
.funnel__step .choice:nth-child(3) { animation-delay: 180ms; }
.choices { display: grid; gap: var(--s-3); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  position: relative; display: grid; gap: 2px; padding: 16px 20px 16px 54px;
  border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.choice span::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border: 1.5px solid var(--text-2); border-radius: 50%;
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
.choice b { font: 560 1.0625rem/1.3 var(--font-display); font-stretch: 108%; }
.choice small { font-size: .875rem; color: var(--text-2); }
.choice:hover span { border-color: var(--text-2); }
.choice input:checked + span { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.choice input:checked + span::before { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px var(--bg); }
.choice input:focus-visible + span { outline: 2px solid var(--blue-300); outline-offset: 2px; }
.funnel__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.funnel__send { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-left: auto; }
.btn__icon { width: 20px; height: 20px; flex: none; }
html:not(.js) .funnel__nav { display: none; }
.funnel__done { display: grid; justify-items: center; gap: var(--s-4); padding-block: var(--s-6); text-align: center; outline: none; }
.funnel__done p { max-width: 30rem; color: var(--text-2); }
.funnel__e { width: 96px; height: 96px; filter: drop-shadow(0 0 14px rgba(2, 87, 243, .75)); animation: fn-e 700ms var(--ease) both; }
@keyframes fn-e { from { opacity: 0; transform: translateY(-40px) scale(.5); } 70% { opacity: 1; transform: scale(1.06); } }
.funnel__noscript { padding: var(--s-4); border: 1px dashed var(--border-strong); border-radius: var(--r-sm); }
@media (max-width: 479.98px) {
  .funnel__nav .btn, .funnel__send { width: 100%; }
  .funnel__send { flex-direction: column-reverse; }
}

.wa-card { display: grid; gap: var(--s-3); }
.wa-card__eyebrow { font: 600 var(--fs-eyebrow)/1 var(--font-display); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.wa-card p { color: var(--text-2); }
.wa-card .btn { margin-top: var(--s-3); }
.wa-card__num { justify-self: start; font: 560 1.25rem/1.3 var(--font-display); font-stretch: 108%; color: var(--text); transition: color var(--dur-1); }
.wa-card__num:hover { color: var(--blue-300); }
.wa-card__zone { font-size: var(--fs-small); }

/* Pulsante WhatsApp fisso: dopo l'hero, nascosto sul modulo (js: WaFloat) */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 110;
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px;
  border-radius: 28px; background: var(--blue); color: #fff; font-weight: 500;
  box-shadow: 0 10px 30px rgba(2, 87, 243, .45), 0 6px 18px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(140%);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2), visibility 0s linear var(--dur-2), background-color var(--dur-1);
}
.wa-float.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wa-float:hover { background: var(--blue-700); }
.wa-float:active { transform: scale(.95); transition-duration: var(--dur-1); }
.wa-float svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 639.98px) {
  .wa-float { width: 56px; padding: 0; justify-content: center; }
  .wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ==========================================================================
   SLOT INTEGRAZIONI (nascosti finché non attivati in js/config.js)
   ========================================================================== */
[data-slot][hidden] { display: none !important; }

/* Modalità revisione: aggiungi ?todo all'URL per evidenziare i contenuti da confermare */
.show-todo [data-todo] { outline: 1px dashed #E5484D; outline-offset: 4px; position: relative; }
.show-todo [data-todo]::after {
  content: attr(data-todo); position: absolute; z-index: 50; left: 0; top: -14px;
  padding: 2px 6px; border-radius: 3px; background: #E5484D; color: #fff;
  font: 600 10px/1.3 var(--font-text); letter-spacing: .02em; text-transform: none; white-space: nowrap;
  pointer-events: none;
}

/* ==========================================================================
   RESPONSIVE — header
   ========================================================================== */
@media (min-width: 1024px) {
  .nav { display: block; }
  .header__actions { margin-left: 0; }
  .header__cta { display: inline-flex; }
  .menu-btn { display: none; }
  .mobile-nav { display: none; }
  .header__progress { display: none; }
}
@media (max-width: 1023.98px) {
  :root { --header-h: 72px; }
  .brand__logo { height: 32px; }
  .is-compact .brand__logo { height: 28px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .js .title-2l[data-reveal] .l { transform: none; clip-path: none; }
  .js .reveal-scope .eyebrow { letter-spacing: .18em; opacity: 1; }
}

/* Stampa */
@media print {
  .site-header, .scroll-rail, .cookie, .hero3d__media, .hero3d__cue, .hero3d__skip, .mobile-nav, .wa-float, .interlude__video { display: none !important; }
  .section--dark { --bg: #fff; --text: #000; --text-2: #333; }
}

/* ##########################################################################
   v2 — CONVERSIONE: sfondo blu animato, demo per settore, prezzo a un terzo,
   fiducia, domande frequenti, modulo in 4 campi, CTA sempre raggiungibile.
   ########################################################################## */

/* ==========================================================================
   v2 · COMPONENT: World — il mondo blu dietro a tutto il sito (js: World)
   Luce liquida (tela di pochi pixel ingrandita), la E come un'ala, scie di velocità.
   ========================================================================== */
/* solo html ha il colore di fondo: il body resta trasparente, altrimenti coprirebbe il mondo (z-index -1) */
html { background: var(--world); }
body { background: transparent; }
.world {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, #0C2C6E 0%, #07194A 42%, #041029 100%);
  contain: strict;
}
.world__glow, .world__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.world__video { object-fit: cover; opacity: 0; mix-blend-mode: screen; transition: opacity 1.2s var(--ease); }
.world.has-video .world__video { opacity: .7; }
/* la E del logo, enorme e quasi trasparente: l'ala di Mercurio che respira e segue lo scroll */
.world__wing {
  position: absolute; right: -16vmax; top: 50%; width: 96vmax; height: 96vmax; translate: 0 -50%;
  --logo-mark: #8DB3FF; opacity: .075;
  transform: translate3d(0, calc(var(--sy, 0) * -18vh), 0) rotate(calc(var(--sy, 0) * 8deg));
  animation: world-wing 24s ease-in-out infinite alternate;
}
@keyframes world-wing { to { scale: 1.07; translate: -3vmax -53%; } }
.world__lines {
  position: absolute; left: -5%; top: -10%; width: 110%; height: 120%; opacity: .6;
  transform: translate3d(0, calc(var(--sy, 0) * -10vh), 0);
  animation: world-lines 20s ease-in-out infinite alternate;
}
.world__lines path { fill: none; stroke: url(#wl); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
@keyframes world-lines { to { translate: -3% 3%; rotate: -2deg; } }
/* scie di velocità: ogni tanto una luce attraversa il cielo, come le lame del logo */
.world__streak {
  position: absolute; left: 0; top: 26%; width: 46vw; height: 1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(150, 190, 255, 0) 20%, rgba(170, 205, 255, .85) 88%, #fff);
  box-shadow: 0 0 14px rgba(110, 157, 255, .7);
  transform: translate3d(-60vw, 0, 0) rotate(-14deg);
  animation: world-streak 11s var(--ease-io) 2.5s infinite;
}
.world__streak + .world__streak { top: 62%; width: 30vw; animation-duration: 15s; animation-delay: 7s; }
@keyframes world-streak {
  0%, 84% { transform: translate3d(-60vw, 0, 0) rotate(-14deg); opacity: 0; }
  87% { opacity: 1; }
  100% { transform: translate3d(165vw, -36vh, 0) rotate(-14deg); opacity: 0; }
}
/* vignettatura + grana: niente bande nei gradienti, testo sempre leggibile */
.world__veil { position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 40%, transparent 42%, rgba(2, 8, 26, .6) 100%), rgba(4, 14, 38, .14); }   /* velo leggero: le zone più luminose restano sotto il testo */
.world__veil::after {
  content: ""; position: absolute; inset: 0; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Le sezioni diventano trasparenti: si vede il mondo blu. Superfici in vetro blu, non più nere. */
:root .section--dark, :root .section--dark.scene, :root .section--dark.interlude, :root .section--dark.services3d,
:root[data-theme="dark"] .section--dark {
  --bg: var(--night);
  --surface: rgba(12, 34, 80, .5);
  --surface-2: rgba(18, 46, 100, .6);
  --border: rgba(120, 165, 255, .16);
  --border-strong: rgba(120, 165, 255, .32);
  --text-2: #C3CDE0;     /* più chiaro del v1: resta leggibile anche sulle zone di blu più luminose */
}
.section--dark, .hero3d, .hero3d__stage, .interlude, .site-footer { background: transparent; }
.site-header.is-compact {
  background: rgba(5, 17, 44, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: rgba(120, 165, 255, .14);
}
/* i render scuri si fondono nel blu: il nero dello studio 3D diventa trasparente */
.js .hero3d.is-live .hero3d__media, .hero3d__still, .dial, .domino, .interlude__stage { mix-blend-mode: screen; }
.cookie, .dialog { background: #0A1C42; --text-2: #B9C4DA; }   /* testo secondario tinto di blu, non grigio */

/* Header: sette voci tra 1024 e 1280 px */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .header__inner { gap: var(--s-5); }
  .nav ul { gap: var(--s-5); }
  .nav a { font-size: .875rem; }
}

/* ==========================================================================
   v2 · Hero: promessa, prezzo e 48 ore visibili da subito (sopra il logo 3D)
   ========================================================================== */
.hero3d__title em { font-style: normal; color: var(--blue-300); }
.js .hero3d.is-live .hero3d__copy::before {
  background: linear-gradient(to top, rgba(4, 14, 38, .92) 30%, rgba(4, 14, 38, .68) 70%, rgba(4, 14, 38, 0));
}
.hero3d__copy .cta-note { justify-content: center; }
.hero3d__ctas { margin-top: var(--s-5); }
@media (max-width: 639.98px) {
  .hero3d__sub { font-size: 1rem; line-height: 1.5; }
  .hero3d__wa { display: none; }                      /* su telefono WhatsApp è nella barra in basso */
  .hero3d__blades { display: none; }
  .hero3d__copy .cta-note { gap: 4px 14px; }
}
@media (max-height: 760px) and (min-width: 640px) {
  .hero3d__sub { margin-top: var(--s-3); }
  .hero3d__blades { margin-top: var(--s-4); }
}

/* ==========================================================================
   v2 · CTA: stessa chiamata ovunque, con prezzo e tempi accanto
   ========================================================================== */
.btn--lg { min-height: 60px; padding: 0 2rem; font-size: 1.0625rem; }
.cta-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: var(--s-4); font-size: .8125rem; line-height: 1.4; color: var(--text-2); }
.cta-note > span { display: inline-flex; align-items: center; gap: 8px; }
.cta-note > span::before {
  content: ""; flex: none; width: .9em; height: .9em; background: var(--blue-300);
  -webkit-mask: var(--mark-mask) center / contain no-repeat; mask: var(--mark-mask) center / contain no-repeat;
}
.cta-block { display: grid; justify-items: center; text-align: center; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cta-block .cta-note { justify-content: center; }
@media (max-width: 479.98px) { .cta-block .btn { width: 100%; } }
.ph--wrap { display: inline; white-space: normal; padding: .1em .4em; line-height: 1.8; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ==========================================================================
   v2 · COMPONENT: Demo — "Vuoi un sito così?" (js: Demo · dati: js/demo-data.js)
   ========================================================================== */
.demo-sec .sec-head { margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); }
.demo { --dw: 74rem; }
.demo__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); max-width: var(--dw); margin: 0 auto clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.demo__sectors { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--border); border-radius: 14px; background: rgba(6, 20, 52, .6); }
.demo__sector {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px;
  border-radius: 10px; font-weight: 500; font-size: .9375rem; color: var(--text-2); white-space: nowrap;
  transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform var(--dur-1) var(--ease);
}
.demo__sector::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 3px rgba(255, 255, 255, .07); transition: transform var(--dur-2) var(--spring); }
.demo__sector:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
@media (hover: hover) and (pointer: fine) { .demo__sector:hover::before { transform: scale(1.35); } }
.demo__sector:active { transform: scale(.97); }
.demo__sector[aria-selected="true"] { color: #fff; background: var(--blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.demo__sector[aria-selected="true"]::before { box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); }
.demo__switch { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: rgba(6, 20, 52, .6); }
.demo__dev { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 8px; font-size: .875rem; font-weight: 500; color: var(--text-2); transition: color 200ms ease, background-color 200ms ease, transform var(--dur-1) var(--ease); }
.demo__dev svg { width: 18px; height: 18px; }
.demo__dev:hover { color: var(--text); }
.demo__dev:active { transform: scale(.97); }
.demo__dev[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, .12); }
@media (max-width: 639.98px) {
  .demo__controls { justify-content: center; }
  .demo__sectors { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .demo__sector { justify-content: center; padding: 0 8px; font-size: .875rem; }
}

/* palco: computer + smartphone, leggermente inclinati verso il mouse */
.demo__stage { position: relative; max-width: var(--dw); margin-inline: auto; }
.demo__devices {
  position: relative; display: grid; padding-bottom: 6%;
  transform: perspective(2200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 900ms var(--ease);
  animation: demo-in 1100ms var(--expo) backwards;
}
@keyframes demo-in { from { transform: perspective(1600px) rotateX(14deg) translateY(48px) scale(.95); } }
.device { grid-area: 1 / 1; min-width: 0; transition: transform 600ms var(--expo), opacity 400ms var(--ease), filter 400ms var(--ease), visibility 0s; }
.device__screen { position: relative; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.device__screen::-webkit-scrollbar { display: none; }

.device--desk {
  width: 84%; justify-self: start; overflow: hidden; border-radius: 14px; background: #0B1224;
  box-shadow: 0 0 0 1px rgba(150, 185, 255, .16), 0 70px 120px -50px rgba(0, 0, 0, .85), 0 40px 120px -40px rgba(2, 87, 243, .7);
}
.device__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: linear-gradient(#18223A, #10182B); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.device__bar > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.device__bar > i:nth-child(2) { background: #FEBC2E; }
.device__bar > i:nth-child(3) { background: #28C840; }
.device__url {
  flex: 0 1 44%; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 24px; margin-inline: auto; padding: 0 12px; border-radius: 7px; background: rgba(255, 255, 255, .07);
  font: 500 12px/1 var(--font-text); color: #C8D3E6; white-space: nowrap; overflow: hidden;
}
.device__url svg { flex: none; width: 11px; height: 11px; color: #7FD18B; }
.device__caret { flex: none; width: 1px; height: 13px; margin-left: -4px; background: #C8D3E6; animation: demo-caret 1s steps(1) infinite; }
.demo.is-live .device__caret { display: none; }
@keyframes demo-caret { 50% { opacity: 0; } }
.device__status {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px;
  background: rgba(254, 188, 46, .13); color: #FFD27A; font: 600 10.5px/1 var(--font-text); letter-spacing: .04em;
  transition: background-color var(--dur-2), color var(--dur-2);
}
.device__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: fn-pulse 1s ease-in-out infinite; }
.demo.is-live .device__status { background: rgba(40, 200, 64, .15); color: #7FE08E; }
.demo.is-live .device__status::before { animation: none; }
.device--desk .device__screen { aspect-ratio: 16 / 10; }
@media (max-width: 479.98px) { .device__status { display: none; } .device__bar { height: 30px; } .device__bar > i { width: 7px; height: 7px; } }

.device--phone { width: 23%; justify-self: end; align-self: end; margin: 0 1% -6% 0; z-index: 2; container-type: inline-size; }
.device__frame {
  position: relative; padding: 3.2cqi; border-radius: 15cqi; background: linear-gradient(150deg, #2C3753, #0A101D 60%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), inset 0 0 0 4px #05080F, 0 60px 90px -36px rgba(0, 0, 0, .85), 0 30px 90px -30px rgba(2, 87, 243, .75);
}
.device--phone .device__screen { aspect-ratio: 390 / 844; border-radius: 12cqi; background: var(--sb-bg, #fff); }
.device__island { position: absolute; z-index: 4; top: 5.4cqi; left: 50%; width: 30%; height: 7.6cqi; border-radius: 99px; background: #000; translate: -50% 0; }
.device__sb {
  position: absolute; z-index: 3; left: 3.2cqi; right: 3.2cqi; top: 3.2cqi; height: 12.6cqi;
  display: flex; align-items: center; justify-content: space-between; padding: 0 9cqi;
  border-radius: 12cqi 12cqi 0 0; background: var(--sb-bg, #fff); color: var(--sb-ink, #111);
  font: 600 4.1cqi/1 var(--font-text); pointer-events: none; transition: background-color .5s, color .5s;
}
.device__sb i { width: 15cqi; height: 3.4cqi; border-radius: 1px; background: linear-gradient(90deg, currentColor 0 22%, transparent 22% 31%, currentColor 31% 56%, transparent 56% 65%, currentColor 65% 100%); }

/* computer ↔ smartphone su schermi larghi: chi è in primo piano cresce, l'altro si allontana */
@media (min-width: 900px) {
  .demo[data-device="mobile"] .device--desk { transform: translate3d(-2%, 3%, 0) scale(.9); opacity: .3; filter: saturate(.4) brightness(.7); pointer-events: none; }
  .demo[data-device="mobile"] .device--phone { transform: translate3d(-163%, -14%, 0) scale(1.3); }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .demo[data-device="desktop"] .device--phone:hover { transform: translate3d(0, -3%, 0); }
}
/* schermi stretti: un dispositivo alla volta */
@media (max-width: 899.98px) {
  .demo__devices { padding-bottom: 0; }
  .device--desk { width: 100%; }
  .device--phone { width: min(72%, 300px); justify-self: center; align-self: start; margin: 0; }
  .demo[data-device="desktop"] .device--phone,
  .demo[data-device="mobile"] .device--desk {
    position: absolute; top: 0; visibility: hidden; opacity: 0; transform: scale(.94); pointer-events: none;
    transition: transform 500ms var(--ease), opacity 400ms var(--ease), visibility 0s linear 500ms;
  }
  .demo[data-device="desktop"] .device--phone { left: 50%; translate: -50% 0; }
  .demo[data-device="mobile"] .device--desk { left: 0; }
}

/* a sito finito una lama attraversa il palco */
.demo__flash { position: absolute; inset: 0 0 6% 0; z-index: 5; overflow: hidden; pointer-events: none; container-type: inline-size; }
.demo__flash .blade { position: absolute; left: 0; top: 34%; width: clamp(90px, 15%, 200px); opacity: 0; transform: translateX(-120%); }
.demo.is-flash .demo__flash .blade { animation: demo-fly 1100ms var(--ease-io) both; }
@keyframes demo-fly {
  0% { opacity: 0; transform: translateX(-120%) rotate(-8deg); }
  15%, 80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100cqw) rotate(4deg); }
}
.demo__hint {
  position: absolute; z-index: 6; left: 42%; bottom: 10%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px;
  background: rgba(5, 14, 36, .85); border: 1px solid rgba(150, 185, 255, .25); color: #E6EEFF;
  font-size: .8125rem; font-weight: 500; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(10px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); pointer-events: none;
}
.demo__hint svg { width: 18px; height: 18px; animation: demo-bob 1.4s ease-in-out infinite; }
@keyframes demo-bob { 50% { transform: translateY(3px); } }
.demo.is-hint .demo__hint { opacity: 1; transform: none; }
@media (min-width: 900px) { .demo[data-device="mobile"] .demo__hint { left: 50%; bottom: -2%; } }
@media (max-width: 899.98px) { .demo__hint { left: 50%; bottom: 5%; } }

.demo__steps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; max-width: var(--dw);
  margin: clamp(1.25rem, 1rem + 1vw, 2rem) auto 0;
  font: 600 .8125rem/1 var(--font-display); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}
.demo__steps li { display: inline-flex; align-items: center; gap: 9px; opacity: .62; transition: opacity 300ms var(--ease), color 300ms var(--ease); }
.demo__steps li::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--mark-mask) center / contain no-repeat; mask: var(--mark-mask) center / contain no-repeat;
  transition: background-color 400ms, transform 500ms var(--spring);
}
.demo__steps li.is-current { opacity: 1; color: #fff; }
.demo__steps li.is-current::before { background: var(--blue-300); transform: scale(1.3); }
.demo__steps li.is-done { opacity: 1; color: #C9D8F5; }
.demo__steps li.is-done::before { background: var(--blue-300); }
.demo__steps li[data-step="live"].is-done { color: #7FE08E; }
.demo__steps li[data-step="live"].is-done::before { background: #7FE08E; }
.demo .cta-block { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 3rem); }
.demo__note { margin-top: var(--s-5); text-align: center; font-size: .8125rem; color: var(--text-2); }

/* --- Il sito d'esempio: misure "vere" (1280 px computer, 390 px telefono); il JS lo adatta con zoom --- */
.ms {
  position: relative; width: 1280px; min-height: 100%;
  background: var(--d-bg); color: var(--d-ink);
  font: 400 17px/1.55 var(--font-text); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s var(--ease), color .5s var(--ease), opacity .22s var(--ease);
}
.ms--phone { width: 390px; padding-top: 52px; font-size: 15px; }
.demo.is-swapping .ms { opacity: 0; }
.ms p, .ms h3, .ms h4, .ms h5, .ms ul { margin: 0; padding: 0; list-style: none; }
.ms img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-d {
  font-family: var(--d-display); font-weight: var(--d-dw, 400); font-stretch: var(--d-dstretch, 100%);
  text-transform: var(--d-dcase, none); letter-spacing: var(--d-dtrack, -.02em); line-height: var(--d-dlh, 1.05);
  font-optical-sizing: auto; text-wrap: balance;
}
.ms-kicker { display: block; margin-bottom: 20px; font: 600 12.5px/1 var(--font-text); letter-spacing: .22em; text-transform: uppercase; color: var(--d-kicker, var(--d-accent)); }
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px;
  border-radius: var(--d-rbtn, 999px); background: var(--d-accent); color: var(--d-on-accent);
  font: 600 15px/1 var(--font-text); white-space: nowrap; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s;
}
@media (hover: hover) and (pointer: fine) { .ms-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px var(--d-accent); filter: brightness(1.08); } }
.ms-btn:active { transform: scale(.97); }
.ms-btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
@media (hover: hover) and (pointer: fine) { .ms-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px currentColor, 0 14px 28px -14px rgba(0, 0, 0, .4); filter: none; } }

.ms-head {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 36px; height: 84px; padding: 0 64px;
  background: var(--d-bg); border-bottom: 1px solid var(--d-line);
}
.ms--phone .ms-head { top: 52px; }
.ms-logo { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.ms-logo i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--d-r, 8px); background: var(--d-accent); color: var(--d-on-accent); font: 600 15px/1 var(--d-display); font-style: normal; letter-spacing: 0; }
.ms-logo b { font-size: 25px; }
.ms-logo small { font: 600 10.5px/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--d-muted); }
.ms-nav { display: flex; gap: 34px; margin-left: auto; font-size: 15px; font-weight: 500; }
.ms-nav span { position: relative; padding: 8px 0; cursor: pointer; }
.ms-nav span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--d-accent); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.ms-nav span:hover::after { transform: scaleX(1); transform-origin: left; }
.ms-head .ms-btn { height: 44px; padding: 0 20px; font-size: 14px; }
.ms-burger {
  display: none; flex: none; width: 40px; height: 40px; margin-left: auto; border-radius: var(--d-r); box-shadow: inset 0 0 0 1px var(--d-line);
  background: linear-gradient(currentColor, currentColor) center 14px / 18px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center 19px / 18px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center 24px / 12px 1.5px no-repeat;
}

.ms-hero { position: relative; overflow: hidden; }
.ms-hero__img { position: relative; overflow: hidden; background: var(--d-surface); }
.ms-h1 { margin-bottom: 22px; font-size: 76px; }
.ms-p { max-width: 30em; margin-bottom: 34px; font-size: 19px; line-height: 1.55; color: var(--d-muted); }
.ms-btns { display: flex; flex-wrap: wrap; gap: 14px; }
/* copertina a tutta foto (ristorante, palestra) */
.ms[data-layout="overlay"] .ms-hero { height: 660px; color: #fff; }
.ms[data-layout="overlay"] .ms-hero__img { position: absolute; inset: 0; }
.ms[data-layout="overlay"] .ms-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .18) 72%), linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 50%); }
.ms[data-layout="overlay"] .ms-hero__copy { position: absolute; left: 64px; bottom: 84px; max-width: 720px; }
.ms[data-layout="overlay"] .ms-p { color: rgba(255, 255, 255, .86); }
.ms[data-layout="overlay"] .ms-hero .ms-kicker { color: var(--d-kicker-on, #fff); }
/* due colonne (studio legale) */
.ms[data-layout="split"] .ms-hero { display: grid; grid-template-columns: 1.08fr 1fr; min-height: 620px; }
.ms[data-layout="split"] .ms-hero__copy { align-self: center; padding: 80px 64px; }
.ms[data-layout="split"] .ms-hero__img { order: 2; }
.ms[data-layout="split"] .ms-hero__img::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 6px; background: var(--d-kicker); }
/* arco (centro estetico) */
.ms[data-layout="arch"] .ms-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding: 56px 64px 72px; }
.ms[data-layout="arch"] .ms-hero::before { content: ""; position: absolute; right: 110px; top: 36px; width: 400px; height: 400px; border-radius: 50%; background: color-mix(in srgb, var(--d-accent) 16%, transparent); }
.ms[data-layout="arch"] .ms-hero__img { order: 2; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--d-r) var(--d-r); }

.ms-sec { padding: 100px 64px; }
.ms-sec__head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.ms-h2 { font-size: 48px; }
.ms-more { font-weight: 600; font-size: 15px; color: var(--d-kicker, var(--d-accent)); white-space: nowrap; cursor: pointer; }
.ms-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ms-card {
  overflow: hidden; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); cursor: pointer;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
@media (hover: hover) and (pointer: fine) { .ms-card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -24px rgba(0, 0, 0, .45); border-color: color-mix(in srgb, var(--d-accent) 50%, transparent); } }
.ms-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--d-line); }
.ms-card__img img { transition: transform 1s var(--ease); }
@media (hover: hover) and (pointer: fine) { .ms-card:hover .ms-card__img img { transform: scale(1.06); } }
.ms-card__body { padding: 26px 28px 30px; }
.ms-card h5 { margin-bottom: 10px; font-size: 26px; }
.ms-card p { margin-bottom: 18px; font-size: 15.5px; color: var(--d-muted); }
.ms-link { display: inline-flex; gap: 8px; font-weight: 600; font-size: 14px; color: var(--d-kicker, var(--d-accent)); }
.ms-link::after { content: "→"; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .ms-card:hover .ms-link::after { transform: translateX(4px); } }
.ms-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 64px; padding: 46px 56px; border-radius: var(--d-r); background: var(--d-accent); color: var(--d-on-accent); }
.ms-band p { max-width: 18em; font-size: 32px; }
.ms-band .ms-btn { background: var(--d-on-accent); color: var(--d-accent); }
.ms-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: stretch; }
.ms-info { display: grid; gap: 16px; margin: 30px 0 34px; }
.ms-info li { display: flex; align-items: center; gap: 14px; font-size: 16px; }
.ms-info svg { flex: none; width: 22px; height: 22px; color: var(--d-kicker, var(--d-accent)); }
.ms-map {
  position: relative; min-height: 360px; overflow: hidden; border-radius: var(--d-r); background-color: var(--d-map);
  background-image: linear-gradient(90deg, transparent 49.3%, rgba(255, 255, 255, .5) 49.3% 50.7%, transparent 50.7%), linear-gradient(0deg, transparent 49%, rgba(255, 255, 255, .5) 49% 51%, transparent 51%), linear-gradient(32deg, transparent 49.4%, rgba(255, 255, 255, .38) 49.4% 50.6%, transparent 50.6%);
  background-size: 140px 140px, 110px 110px, 260px 260px;
}
.ms-map::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -32%; height: 56%; border-radius: 50% 50% 0 0; background: var(--d-water); transform: rotate(-6deg); }
.ms-pin { position: absolute; left: 44%; top: 36%; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: var(--d-accent); transform: rotate(-45deg); box-shadow: -6px 10px 18px -6px rgba(0, 0, 0, .45); }
.ms-pin::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--d-on-accent); }
.ms-pin::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--d-accent); animation: ms-ping 2s ease-out infinite; }
@keyframes ms-ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.ms-map__label { position: absolute; left: calc(44% + 40px); top: calc(36% - 4px); padding: 9px 13px; border-radius: 8px; background: var(--d-surface); color: var(--d-ink); font: 600 13px/1.2 var(--font-text); white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
.ms-foot { display: flex; justify-content: space-between; gap: 16px; padding: 28px 64px; border-top: 1px solid var(--d-line); font-size: 13px; color: var(--d-muted); }
.ms-sticky { display: none; }
.ms-call { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--d-rbtn); background: var(--d-surface); color: var(--d-ink); box-shadow: inset 0 0 0 1.5px var(--d-line); }
.ms-call svg { width: 22px; height: 22px; }

/* telefono */
.ms--phone .ms-head { gap: 12px; height: 62px; padding: 0 18px; }
.ms--phone .ms-nav, .ms--phone .ms-head .ms-btn { display: none; }
.ms--phone .ms-burger { display: block; }
.ms--phone .ms-logo i { width: 32px; height: 32px; font-size: 13px; }
.ms--phone .ms-logo b { font-size: 21px; }
.ms--phone .ms-h1 { margin-bottom: 16px; font-size: 44px; }
.ms--phone .ms-p { margin-bottom: 24px; font-size: 16px; }
.ms--phone .ms-btns { display: grid; gap: 10px; }
.ms--phone .ms-btn { height: 52px; }
.ms--phone[data-layout="overlay"] .ms-hero { height: 600px; }
.ms--phone[data-layout="overlay"] .ms-hero__img::after { background: linear-gradient(0deg, rgba(0, 0, 0, .86) 12%, rgba(0, 0, 0, .25) 66%, rgba(0, 0, 0, .1)); }
.ms--phone[data-layout="overlay"] .ms-hero__copy { left: 20px; right: 20px; bottom: 30px; }
.ms--phone[data-layout="split"] .ms-hero,
.ms--phone[data-layout="arch"] .ms-hero { grid-template-columns: 1fr; min-height: 0; gap: 0; padding: 0; }
.ms--phone[data-layout="split"] .ms-hero__img { order: 0; height: 280px; }
.ms--phone[data-layout="split"] .ms-hero__copy { padding: 30px 20px 40px; }
.ms--phone[data-layout="arch"] .ms-hero { gap: 26px; padding: 22px 20px 40px; }
.ms--phone[data-layout="arch"] .ms-hero__img { order: 0; aspect-ratio: 1 / 1.05; }
.ms--phone[data-layout="arch"] .ms-hero::before { right: -90px; top: 6px; width: 260px; height: 260px; }
.ms--phone .ms-sec { padding: 60px 20px; }
.ms--phone .ms-sec__head { display: block; margin-bottom: 26px; }
.ms--phone .ms-more { display: none; }
.ms--phone .ms-h2 { font-size: 32px; }
.ms--phone .ms-cards { grid-template-columns: 1fr; gap: 18px; }
.ms--phone .ms-card__body { padding: 20px 22px 24px; }
.ms--phone .ms-card h5 { font-size: 22px; }
.ms--phone .ms-band { display: grid; gap: 18px; margin: 0 20px; padding: 28px 24px; }
.ms--phone .ms-band p { font-size: 23px; }
.ms--phone .ms-contact { grid-template-columns: 1fr; gap: 28px; }
.ms--phone .ms-map { min-height: 220px; }
.ms--phone .ms-foot { display: grid; gap: 4px; padding: 20px 20px 24px; }
.ms--phone .ms-sticky {
  position: sticky; bottom: 0; z-index: 9; display: flex; gap: 10px; padding: 12px 14px 18px;
  background: linear-gradient(to top, var(--d-bg) 62%, transparent);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.ms--phone .ms-sticky .ms-btn { flex: 1; height: 50px; }
.demo.is-armed:not(.is-live) .ms-sticky { opacity: 0; transform: translateY(100%); }

/* costruzione blocco per blocco: una lama di luce attraversa il blocco e lo scopre */
.ms [data-b] { position: relative; }
.ms .ms-head[data-b] { position: sticky; }
.demo.is-armed .ms [data-b]:not(.is-built) { opacity: 0; }
.ms [data-b].is-built { animation: ms-wipe 760ms var(--ease) backwards; }
.ms [data-b].is-built::after {
  content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(110, 157, 255, 0) 30%, rgba(110, 157, 255, .24) 92%, rgba(200, 222, 255, 1) 99.6%, transparent 100%);
  animation: ms-scan 760ms var(--ease) backwards;
}
@keyframes ms-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ms-scan { from { opacity: 1; transform: translateX(-100%); } 85% { opacity: 1; } to { opacity: 0; transform: translateX(0); } }
.ms-hero.is-built .ms-kicker, .ms-hero.is-built .ms-h1, .ms-hero.is-built .ms-p, .ms-hero.is-built .ms-btns { animation: ms-up 900ms var(--expo) backwards; }
.ms-hero.is-built .ms-kicker { animation-delay: 120ms; }
.ms-hero.is-built .ms-h1 { animation-delay: 220ms; }
.ms-hero.is-built .ms-p { animation-delay: 340ms; }
.ms-hero.is-built .ms-btns { animation-delay: 440ms; }
.ms-hero.is-built .ms-hero__img img { animation: ms-zoom 1800ms var(--expo) backwards; }
.ms-sec.is-built .ms-sec__head { animation: ms-up 700ms var(--expo) 80ms backwards; }
.ms-sec.is-built .ms-card { animation: ms-up 800ms var(--expo) calc(180ms + var(--i, 0) * 90ms) backwards; }
.ms-contact.is-built .ms-pin { animation: ms-drop 700ms var(--spring) 450ms backwards; }
@keyframes ms-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes ms-zoom { from { transform: scale(1.2); } }
@keyframes ms-drop { from { opacity: 0; transform: translateY(-70px) rotate(-45deg); } }

/* ==========================================================================
   v2 · Prezzo: confronto agenzia / Mercurio + i tre perché
   ========================================================================== */
.compare__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.compare__who { font: 600 var(--fs-eyebrow)/1.3 var(--font-display); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.compare__amt { font: 560 var(--fs-h3)/1.1 var(--font-display); font-stretch: 112%; color: var(--text); white-space: nowrap; }
.compare__row--us { justify-content: flex-start; gap: var(--s-5); margin: var(--s-4) 0 0; animation: fade-up 500ms var(--ease) 1.4s both; }
.compare__row--us .compare__who { color: var(--blue-200); }
.compare__row--us .compare__amt { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.why { display: grid; gap: var(--s-7); max-width: 64rem; margin: clamp(3.5rem, 2.5rem + 3vw, 6rem) auto 0; }
@media (min-width: 768px) { .why { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); } }
.why__item { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); align-items: center; padding-top: var(--s-5); border-top: 1px solid var(--border); }
/* la linea blu si disegna quando il motivo entra nello schermo, come nel primo sito */
.why__item::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 1100ms var(--ease) calc(var(--d, 0) * 140ms + 200ms); }
.why__item.is-in::before, html:not(.js) .why__item::before { transform: none; }
.why__blade { width: auto; height: 16px; }
.why__item .h3 { margin: 0; }
.why__item p { grid-column: 1 / -1; margin-top: var(--s-3); max-width: 34ch; color: var(--text-2); }

/* ==========================================================================
   v2 · Pacchetti dei siti vetrina (Listino 2026): Luna · Terra · Sole
   ========================================================================== */
.plans { max-width: 76rem; margin: clamp(4rem, 3rem + 4vw, 7rem) auto 0; }
.plans__label { margin-bottom: var(--s-6); text-align: center; font: 560 var(--fs-h3)/1.2 var(--font-display); font-stretch: 112%; letter-spacing: -.015em; }
.plans__list { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 1024px) { .plans__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--s-3); }
.plan--feature { border-color: var(--blue); background: rgba(2, 87, 243, .16); }
@media (min-width: 1024px) { .plan--feature { margin-top: -12px; } }
.plan__badge { position: absolute; top: 0; right: clamp(1.5rem, 1rem + 2vw, 2.5rem); translate: 0 -50%; padding: 6px 12px; border-radius: var(--r-sm); background: var(--blue); color: #fff; font: 600 .8125rem/1 var(--font-display); font-stretch: 112%; }
.plan__n { font: 600 var(--fs-eyebrow)/1 var(--font-display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-200); }
.plan__name { font: 560 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1 var(--font-display); font-stretch: 112%; letter-spacing: -.03em; }
.plan__tag { color: var(--text-2); }
.plan__price { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-3); }
.plan__price b { font: 600 clamp(2.25rem, 1.8rem + 1.6vw, 3rem)/1 var(--font-display); font-stretch: 112%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan__price span { font-size: var(--fs-small); color: var(--text-2); }
.plan__time { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--blue-200); }
.plan__time svg { width: 18px; height: 18px; }
.plan__desc { padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); color: var(--text-2); }
.plan__more { font-weight: 600; }
.plan__list { gap: var(--s-2); font-size: .9375rem; }
.plan__note { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: rgba(255, 255, 255, .05); font-size: var(--fs-small); color: var(--text); }
.plan__cta { margin-top: var(--s-3); }
.plans__extra { display: grid; gap: var(--s-6); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
@media (min-width: 900px) { .plans__extra { grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; } }
.plans__always .h3 { margin-bottom: var(--s-4); }
.plans__always .list-mark { gap: var(--s-2); }
@media (min-width: 640px) and (max-width: 899.98px) { .plans__always .list-mark { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); } }
.plans__side { display: grid; gap: var(--s-5); }
.plans__custom { display: grid; gap: var(--s-3); justify-items: start; }
.plans__custom p:not(.plans__k), .plans__addons p:not(.plans__k) { color: var(--text-2); }
.plans__k { font: 600 var(--fs-eyebrow)/1.3 var(--font-display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-200); }
.plans__addons { display: grid; gap: var(--s-2); }
.plans__terms { max-width: 62ch; margin: var(--s-7) auto 0; text-align: center; font-size: var(--fs-small); color: var(--text-2); }

/* ==========================================================================
   v2 · Fiducia: lavori, testimonianze, garanzia (segnaposto finché non ci sono)
   ========================================================================== */
.trust__label { max-width: 72rem; margin: 0 auto var(--s-5); font: 600 var(--fs-eyebrow)/1 var(--font-display); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.works--3 { max-width: 72rem; margin: 0 auto var(--s-8); }
@media (min-width: 1100px) { .works--3 { grid-template-columns: repeat(3, 1fr); } }
.works--3 .work__media { aspect-ratio: 4 / 3; background: var(--surface); }
.works--3 .work__ph span { left: 14px; right: 14px; bottom: 14px; white-space: normal; }
.quotes { display: grid; gap: var(--gap); max-width: 72rem; margin: 0 auto var(--s-8); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { display: grid; gap: var(--s-4); align-content: start; }
.quote__mark { width: 28px; height: 28px; color: var(--blue-300); }
.quote blockquote { margin: 0; font: 500 var(--fs-h3)/1.4 var(--font-display); font-stretch: 108%; }
.quote__who { font-size: var(--fs-small); color: var(--text-2); }
.guarantee { display: flex; align-items: center; gap: var(--s-6); max-width: 72rem; margin-inline: auto; background: linear-gradient(120deg, rgba(2, 87, 243, .38), rgba(2, 87, 243, .08)); border-color: rgba(110, 157, 255, .4); }
.guarantee__icon { flex: none; width: 56px; height: 56px; color: #fff; }
.guarantee__k { margin-bottom: var(--s-2); font: 600 var(--fs-eyebrow)/1 var(--font-display); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-200); }
.guarantee__t { font: 560 var(--fs-h3)/1.35 var(--font-display); font-stretch: 112%; }
@media (max-width: 639.98px) { .guarantee { flex-direction: column; align-items: flex-start; gap: var(--s-4); } }

/* ==========================================================================
   v2 · FAQ
   ========================================================================== */
.faq__more { max-width: 52rem; margin: var(--s-6) auto 0; text-align: center; color: var(--text-2); }

/* ==========================================================================
   v2 · COMPONENT: Lead — modulo in 4 campi (js: Lead)
   ========================================================================== */
.lead-form__fields { display: grid; gap: var(--s-5); }
.lead-form__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.lead-form__top .funnel__blades .blade { color: var(--blue); filter: drop-shadow(0 0 8px rgba(2, 87, 243, .7)); }
.lead-form__promise { font-size: var(--fs-small); font-weight: 500; color: var(--blue-200); }
.lead-form__privacy { font-size: .8125rem; color: var(--text-2); text-align: center; }
.lead-form .select option { background: var(--night); color: #EDEFF2; }
.lead-form.is-done .lead-form__fields { display: none; }
.lead-done { display: grid; justify-items: center; gap: var(--s-4); padding-block: var(--s-4); text-align: center; outline: none; }
.lead-done__text { max-width: 32rem; color: var(--text-2); }
.lead-done__k { margin-top: var(--s-2); font: 600 var(--fs-eyebrow)/1 var(--font-display); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.lead-done__next { display: grid; gap: var(--s-3); width: 100%; max-width: 30rem; text-align: left; counter-reset: n; }
.lead-done__next li { position: relative; display: grid; gap: 2px; padding: var(--s-4) var(--s-4) var(--s-4) 3.25rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); counter-increment: n; animation: fade-up 600ms var(--expo) calc(var(--i, 0) * 120ms + 200ms) both; }
.lead-done__next li:nth-child(2) { --i: 1; }
.lead-done__next li:nth-child(3) { --i: 2; }
.lead-done__next li::before { content: counter(n); position: absolute; left: var(--s-4); top: var(--s-4); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--blue); color: #fff; font: 600 .8125rem/1 var(--font-display); }
.lead-done__next b { font-weight: 600; }
.lead-done__back { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--text-2); text-decoration: underline; text-underline-offset: .2em; }
.wa-card__list { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--text-2); }

@media print { .world { display: none !important; } }