/* =====================================================================
   Sentira — styles.css
   "Intelligenza che percepisce." · cyberpunk sobrio (Ghost in the Shell)
   Vanilla CSS, mobile-first, WCAG AA, prefers-reduced-motion aware.

   Indice
   00  Design tokens
   01  Reset & base
   02  Tipografia & utility
   03  Sezioni, container, motivi di sfondo
   04  Bottoni
   05  Nav + menu mobile + scroll progress
   06  Hero + stats strip
   07  Definition strip
   08  Problema
   09  Servizi (card glass)
   10  Metodo (sezione chiara)
   11  Prove: case study, stats, progetti, certificazioni
   12  Trasparenza
   13  Team
   14  FAQ
   15  CTA finale + footer
   16  Animazioni (solo no-preference) + breakpoint note
   ===================================================================== */

/* =====================================================================
   00 · DESIGN TOKENS
   Regola 60-30-10: 60% Deep Shell / superfici scure, 30% Ghost White +
   Slate (testi, sezioni chiare), 10% accenti (indigo/cyan, magenta raro).
   ===================================================================== */
:root {
  /* -- Palette brand (cap. 4.2) -- */
  --deep-shell:      #0A0E1A;   /* sfondo base, la "casa" del brand */
  --electric-indigo: #5B4BE0;   /* primario: bottoni, titoli su chiaro */
  --signal-cyan:     #12E3C4;   /* accento glow — MAI come testo su chiaro */
  --neon-magenta:    #FF3D8A;   /* accento raro, max 10% */
  --slate:           #8A96A8;   /* testi secondari su scuro */
  --ghost-white:     #F5F7FB;   /* sezioni chiare, testo su scuro */

  /* -- Derivati (necessari per contrasto WCAG AA) --
     L'indigo pieno su Deep Shell rende ~3.2:1: sotto AA per testo normale.
     Quindi: su scuro i testi/link indigo usano la variante chiara (7.2:1),
     l'indigo pieno resta per riempimenti (bottoni) e per testo su chiaro. */
  --indigo-bright:   #9D93F2;   /* link e accenti testuali su scuro */
  --indigo-soft:     #7B6CF0;   /* estremo "indigo" dei gradienti titolo */
  --shell-raised:    #101527;   /* superfici rialzate su Deep Shell */
  --shell-variant:   #0D1322;   /* sezioni scure alternative */
  --ink:             #131A2E;   /* testo principale su fondo chiaro */
  --slate-ink:       #525E74;   /* testi secondari su fondo chiaro (5.8:1) */
  --hairline:        rgba(138, 150, 168, 0.16);  /* bordi sottili su scuro */
  --hairline-light:  rgba(19, 26, 46, 0.12);     /* bordi sottili su chiaro */

  /* -- Gradienti firma -- */
  --grad-brand: linear-gradient(92deg, var(--indigo-soft) 0%, var(--signal-cyan) 100%);
  --grad-glow:  radial-gradient(ellipse at center, rgba(91, 75, 224, 0.28) 0%, rgba(18, 227, 196, 0.07) 45%, transparent 70%);

  /* -- Glow (discreto: luce, non ombra pesante) -- */
  --glow-cyan:   0 0 24px rgba(18, 227, 196, 0.25);
  --glow-indigo: 0 6px 28px rgba(91, 75, 224, 0.35);

  /* -- Stato "prima" dei case study: rosso segnale (6.35:1 su Deep Shell) -- */
  --signal-red:  #FF5A5F;
  --glow-red:    0 0 24px rgba(255, 90, 95, 0.25);
  --grad-alert:  linear-gradient(135deg, #D03A43 0%, #9E2730 100%); /* bianco ≥4.8:1 su entrambi gli estremi */

  /* -- Tipografia (cap. 4.3) -- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  /* Scala fluida: min mobile → max desktop */
  --fs-hero:    clamp(2.35rem, 1.2rem + 5.2vw, 4.35rem);   /* h1 */
  --fs-h2:      clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem);
  --fs-h4:      clamp(1.1rem, 1rem + 0.45vw, 1.25rem);
  --fs-lead:    clamp(1.06rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body:    clamp(0.97rem, 0.93rem + 0.2vw, 1.06rem);
  --fs-small:   0.875rem;
  --fs-label:   0.78rem;                                    /* Space Mono */
  --fs-stat:    clamp(2.2rem, 1.5rem + 3vw, 3.6rem);

  /* -- Spaziatura & layout -- */
  --container:    1150px;
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --section-pad:  clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --gap:          clamp(1.25rem, 2.5vw, 2rem);
  --radius:       14px;
  --radius-sm:    9px;
  --nav-h:        72px;

  /* -- Motion -- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur:       0.6s;

  /* Focus ring di default (sezioni scure lo sovrascrivono in cyan) */
  --focus-ring: var(--electric-indigo);

  color-scheme: dark;
}

/* =====================================================================
   FONT FACES — self-hosted, sottoinsieme latin (D3: zero richieste CDN)
   ===================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/space-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/space-mono-700-latin.woff2") format("woff2");
}

/* =====================================================================
   01 · RESET & BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ghost-white);
  background-color: var(--deep-shell);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, canvas, video { display: block; max-width: 100%; }

ul[class], ol[class] { list-style: none; padding: 0; }

a {
  color: var(--indigo-bright);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

strong { font-weight: 600; color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(91, 75, 224, 0.55); color: var(--ghost-white); }

/* =====================================================================
   02 · TIPOGRAFIA & UTILITY
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section__title {
  font-size: var(--fs-h2);
  max-width: 21ch;
  margin-bottom: 1.1rem;
}

.section__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--slate);
  max-width: 58ch;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Etichetta mono: il tocco cyberpunk, in piccole dosi */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal-cyan);
  margin-bottom: 1rem;
}

/* Titolo con gradiente indigo→cyan (dettaglio firma, solo su scuro) */
.grad-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Magenta: un dato chiave per volta, mai di più */
.accent-magenta { color: var(--neon-magenta); font-weight: 600; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--electric-indigo);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; text-decoration: none; }

/* =====================================================================
   03 · SEZIONI, CONTAINER, MOTIVI DI SFONDO
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}

.section--dark {
  background-color: var(--deep-shell);
  --focus-ring: var(--signal-cyan);
}

.section--dark-variant {
  background-color: var(--shell-variant);
  border-block: 1px solid var(--hairline);
  --focus-ring: var(--signal-cyan);
}

/* Sezioni chiare: testo scuro, niente cyan come testo (contrasto) */
.section--light {
  background-color: var(--ghost-white);
  color: var(--ink);
  color-scheme: light;
}
.section--light .section__lead,
.section--light .team-card__bio,
.section--light .team-card__role { color: var(--slate-ink); }
.section--light .eyebrow { color: var(--electric-indigo); }
.section--light a { color: var(--electric-indigo); }
/* Card su sfondo chiaro: niente vetro slavato, superficie bianca solida + testo ink */
.section--light .service-card {
  background: #ffffff;
  border: 1px solid var(--hairline-light);
  box-shadow: 0 1px 2px rgba(19, 26, 46, 0.04), 0 8px 24px rgba(19, 26, 46, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.section--light .service-card:hover {
  border-color: rgba(91, 75, 224, 0.45);
  box-shadow: 0 2px 4px rgba(19, 26, 46, 0.06), 0 14px 36px rgba(91, 75, 224, 0.12);
}
.section--light .service-card__category { color: var(--electric-indigo); }
.section--light .service-card__brand { color: var(--ink); }
.section--light .service-card__desc { color: var(--ink); }
.section--light .service-card__benefit { color: var(--slate-ink); }
.section--light .service-card__price { color: var(--ink); }
.section--light .service-card__price-note { color: var(--slate-ink); }
.section--light .tags li {
  color: var(--slate-ink);
  border-color: var(--hairline-light);
}
.section--light .proof__block-title { border-bottom-color: var(--hairline-light); }
.section--light .proof__stats li,
.section--light .cert { border-color: var(--hairline-light); }
.section--light .proof__stat-label,
.section--light .cert__issuer { color: var(--slate-ink); }

/* Motivo griglia sottile: linee-segnale appena percepibili sul guscio scuro */
.section--dark::before,
.section--dark-variant::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%);
}
.section > .container { position: relative; z-index: 1; }

/* content-visibility: differisce il rendering delle sezioni fuori schermo (D6/P3) */
.problem, .services, .method, .proof, .trust, .team, .faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* Alone di luce per hero e CTA finale */
.section--glow::after {
  content: "";
  position: absolute;
  inset: -10% 0 auto;
  height: 80%;
  pointer-events: none;
  background: var(--grad-glow);
}

/* =====================================================================
   04 · BOTTONI
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;               /* touch target ≥ 44px */
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--electric-indigo);
  color: #ffffff;                  /* 6:1 su indigo */
  box-shadow: 0 4px 18px rgba(91, 75, 224, 0.28);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--glow-indigo), var(--glow-cyan);
}

.btn--ghost {
  border: 1px solid rgba(138, 150, 168, 0.6);   /* ≥3:1 sul Deep Shell (WCAG 1.4.11) */
  color: var(--ghost-white);
  background: transparent;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  transform: translateY(-2px);
  border-color: var(--signal-cyan);
  box-shadow: var(--glow-cyan);
}

.btn--sm { min-height: 44px; padding: 0.55rem 1.15rem; font-size: 0.92rem; }
.btn--lg { min-height: 54px; padding: 0.95rem 2.1rem; font-size: 1.08rem; }

.btn:active { transform: translateY(0); }

/* =====================================================================
   05 · NAV + MENU MOBILE + SCROLL PROGRESS
   ===================================================================== */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 120;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  background: var(--grad-brand);
  transform: scaleX(var(--scroll-progress, 0));  /* impostata da script.js */
  transform-origin: left;
}

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease,
              backdrop-filter 0.3s ease;
}

/* Vetro al scroll: script.js aggiunge .is-scrolled dopo ~40px */
.nav.is-scrolled,
.nav.is-open {
  background: rgba(10, 14, 26, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--hairline);
}

/* Fallback senza JS: stesso vetro pilotato dallo scroll della pagina */
@supports (animation-timeline: scroll()) {
  .nav {
    animation: nav-glass linear both;
    animation-timeline: scroll(root);
    animation-range: 0 140px;
  }
  @keyframes nav-glass {
    to {
      background: rgba(10, 14, 26, 0.78);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
      backdrop-filter: blur(14px) saturate(1.3);
      border-bottom-color: var(--hairline);
    }
  }
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-h);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ghost-white);
}
.nav__logo:hover { text-decoration: none; }

/* Il puntino della "i": punto-sorgente del Pulse */
.nav__logo-dot {
  display: inline-block;
  color: var(--signal-cyan);
  text-shadow: 0 0 10px rgba(18, 227, 196, 0.7);
}

.nav__links {
  display: none;                   /* mobile-first: visibili da 900px */
  gap: 0.25rem;
}
.nav__links a {
  padding: 0.7rem 0.85rem;         /* area cliccabile ≥ 44px */
  color: var(--slate);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease;
}
.nav__links a:hover { color: var(--ghost-white); text-decoration: none; }

.nav__cta { display: none; }

/* Hamburger */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  align-items: center;
  border-radius: var(--radius-sm);
}
.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--ghost-white);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Pannello mobile */
.nav__mobile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem var(--gutter) 1.5rem;
  background: rgba(10, 14, 26, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hairline);
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a:not(.btn) {
  padding: 0.85rem 0.5rem;         /* ≥ 44px */
  color: var(--ghost-white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}
.nav__mobile a:not(.btn):hover { color: var(--signal-cyan); text-decoration: none; }
.nav__mobile .btn { margin-top: 1rem; }

/* =====================================================================
   06 · HERO + STATS STRIP
   ===================================================================== */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + var(--section-pad) * 0.6);
  overflow: clip;
}

/* Alone indigo→cyan dietro la headline */
.hero__glow {
  position: absolute;
  top: -20%;
  left: 50%;
  translate: -50% 0;
  width: min(1100px, 140vw);
  aspect-ratio: 1.6;
  background: var(--grad-glow);
  pointer-events: none;
}

/* Contenitore del "Pulse" (canvas animato via script.js) */
.hero__pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
}
.hero__pulse canvas { width: 100%; height: 100%; }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  padding-block: clamp(2rem, 6vh, 4rem);
}

.hero__eyebrow {
  display: flex;
  flex-direction: column;      /* impilato su mobile, in riga da 640px */
  gap: 0.45rem;
  margin-bottom: 0;
}
.hero__eyebrow-payoff { color: var(--signal-cyan); }
.hero__eyebrow-sep { display: none; color: var(--slate); }
.hero__eyebrow span:last-child { color: var(--slate); }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;
  max-width: 15ch;
}

.hero__sub {
  font-size: var(--fs-lead);
  color: var(--slate);
  max-width: 44ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.5rem;
}

.hero__micro {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--slate);
}

/* Proof strip: numeri sotto la headline, separati da una linea-segnale */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--hairline);
}

.stat { display: flex; flex-direction: column; gap: 0.4rem; }

.stat__num,
.case__stat-num,
.proof__stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ghost-white);
}

.stat__label,
.case__stat-label,
.proof__stat-label {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--slate);
  max-width: 26ch;
}

/* Proof strip: nomi clienti (testo puro, niente loghi grafici) */
.proof-logos {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.proof-logos__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.85rem;
}
.proof-logos__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.5rem);
}
.proof-logos__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ghost-white);
  letter-spacing: -0.01em;
  opacity: 0.85;
}

/* =====================================================================
   07 · DEFINITION STRIP
   ===================================================================== */
.definition { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

.definition__text {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.55rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
  max-width: 34ch;
  color: var(--slate);
}
.definition__text strong { color: var(--ghost-white); font-weight: 600; }
.definition__data {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22ch), 1fr));
  max-width: 60ch;
}
.definition__data-stat {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding-block: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--signal-cyan) 25%, transparent);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--slate);
}
.definition__data-stat strong {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--signal-cyan);
  letter-spacing: -0.02em;
}

/* =====================================================================
   08 · PROBLEMA
   ===================================================================== */
.problem__grid {
  display: grid;
  gap: var(--gap);
}

.problem__card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16, 21, 39, 0.7), rgba(16, 21, 39, 0.35));
}

.problem__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-bottom: 1.1rem;
  color: var(--signal-cyan);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

.problem__card-title { font-size: var(--fs-h4); margin-bottom: 0.6rem; }
.problem__card-text { font-size: var(--fs-small); color: var(--slate); }

.problem__bridge {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: 1.25rem;
  border-left: 2px solid var(--neon-magenta);   /* l'unico magenta della sezione */
  font-size: var(--fs-lead);
  font-weight: 500;
  max-width: 52ch;
}

/* =====================================================================
   09 · SERVIZI — card con bordo sottile e glassmorphism leggero
   ===================================================================== */
.services__grid {
  display: grid;
  gap: var(--gap);
}

/* Sentira Studio: pacchetto complementare, card singola non a piena larghezza griglia */
.services__addon .service-card {
  max-width: 640px;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(16, 21, 39, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: clip;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
}

/* Linea-segnale sul bordo alto: si accende all'hover */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 227, 196, 0.35);
}
.service-card:hover::before { opacity: 1; }

.service-card__category { margin-bottom: 0; color: var(--slate); }

.service-card__name { font-size: var(--fs-h3); }
.service-card__brand { color: var(--ghost-white); }
.service-card__descriptor {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.service-card__desc { font-weight: 500; color: var(--ghost-white); }
.service-card__benefit { font-size: var(--fs-small); color: var(--slate); }
.service-card__price {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--ghost-white);
  letter-spacing: -0.01em;
}
.service-card__price-note {
  color: var(--slate);
  font-size: var(--fs-small);
  font-weight: 400;
}

/* Chip caratteristiche: etichette mono, il tocco cyberpunk in piccole dosi */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.tags li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  white-space: nowrap;
}


.service-card__link,
.team-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: auto;
  font-weight: 600;
  font-size: 0.95rem;
}

/* =====================================================================
   10 · METODO — sezione chiara
   ===================================================================== */
.method__steps {
  display: grid;
  gap: clamp(2rem, 4vw, 2.5rem);
  counter-reset: step;
}

.method__step {
  position: relative;
  padding-top: 1.4rem;
  border-top: 2px solid var(--hairline-light);
}

/* Il segmento acceso sulla linea: indica il passo attivo/percorso */
.method__step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--electric-indigo);
}

.method__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  color: var(--electric-indigo);
}

.method__step-title {
  font-size: var(--fs-h3);
  margin: 0.5rem 0 0.4rem;
  color: var(--ink);
}

.method__step-time {
  display: inline-block;
  margin-bottom: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--electric-indigo);
}

.method__step-text { font-size: var(--fs-small); line-height: 1.65; color: var(--slate-ink); }

/* =====================================================================
   11 · PROVE — case study, numeri, progetti, certificazioni
   ===================================================================== */
.proof__block-title {
  font-size: var(--fs-h3);
  margin: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
}
.proof .proof__block-title:first-of-type { margin-top: 0; }

/* -- Case study card -- */
.case {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  margin-bottom: var(--gap);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16, 21, 39, 0.85), rgba(13, 19, 34, 0.6));
}
/* Il bordo segue il pannello attivo (classe da JS). Niente transition qui:
   la shorthand di html.js .reveal la sovrascriverebbe. */
.case.is-before-active { border-color: rgba(255, 90, 95, 0.22); }

.case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.case__name { font-size: var(--fs-h4); }
.case__tagline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--slate);
  margin-top: 0.35rem;
}

.case__rating {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.8rem;
  color: var(--slate);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  white-space: nowrap;
}

.case__headline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 30ch;
  margin-bottom: 1.5rem;
}

/* Toggle prima/dopo */
.case__toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(10, 14, 26, 0.6);
}

.case__tab {
  min-height: 44px;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--slate);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.case__tab:hover { color: var(--ghost-white); }
.case__tab.is-active {
  background: var(--electric-indigo);
  color: #fff;
  box-shadow: 0 2px 14px rgba(91, 75, 224, 0.4);
}
.case__tab.is-active[data-panel="before"] {
  background: var(--grad-alert);
  box-shadow: 0 2px 14px rgba(255, 90, 95, 0.35);
}
.case__tab.is-active[data-panel="after"] {
  box-shadow: 0 2px 14px rgba(91, 75, 224, 0.4), var(--glow-cyan);
}

/* Invito al confronto: anello che pulsa sulla tab "Prima" finché non viene toccata */
html.js .case:not(.is-touched) .case__tab[data-panel="before"]:not(.is-active) {
  animation: case-tab-pulse 2.8s ease-in-out infinite;
}

.case__panels { container-type: inline-size; }
.case__panel[hidden] { display: none; }

/* Identità dei pannelli: rosso = situazione di partenza, cyan = risultato */
.case__panel {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.case__panel--before { background: rgba(255, 90, 95, 0.05);  border-color: rgba(255, 90, 95, 0.2); }
.case__panel--after  { background: rgba(18, 227, 196, 0.04); border-color: rgba(18, 227, 196, 0.16); }

.case__panel-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.case__panel--before .case__panel-label { color: var(--signal-red); }
.case__panel--after  .case__panel-label { color: var(--signal-cyan); }
.case__panel--before .case__panel-label::before { content: "✕ "; content: "✕ " / ""; }
.case__panel--after  .case__panel-label::before { content: "✓ "; content: "✓ " / ""; }

.case__panel-intro {
  font-size: var(--fs-small);
  color: var(--slate);
  max-width: 60ch;
  margin-bottom: 1rem;
}

.case__list { display: grid; gap: 0.55rem; }
.case__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-small);
  color: var(--slate);
}
.case__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  background: var(--slate);
}
.case__list--after li { color: var(--ghost-white); }
/* Marker ✓ (dopo) e ✕ (prima) disegnati in CSS: nessun rumore per gli screen reader */
.case__list--after li::before {
  width: 9px;
  height: 5px;
  top: 0.4em;
  background: transparent;
  border-left: 2px solid var(--signal-cyan);
  border-bottom: 2px solid var(--signal-cyan);
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 5px rgba(18, 227, 196, 0.55));
}
.case__panel--before .case__list li::before,
.case__panel--before .case__list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 2px;
  background: var(--signal-red);
}
.case__panel--before .case__list li::before { transform: rotate(45deg);  box-shadow: 0 0 8px rgba(255, 90, 95, 0.5); }
.case__panel--before .case__list li::after  { transform: rotate(-45deg); }

.case__stats {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.case__stat-num { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); }
.case__stats li { display: flex; flex-direction: column; gap: 0.3rem; }

/* Numeri "dopo": gradiente firma, come .proof__stat-num */
.case__stats .case__stat-num {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.case__stats--before { border-top-color: rgba(255, 90, 95, 0.28); }
.case__stats--before .case__stat-num {
  background: none;
  color: var(--signal-red);
  text-shadow: 0 0 18px rgba(255, 90, 95, 0.35);
}

@container (min-width: 560px) {
  .case__stats { grid-template-columns: repeat(3, 1fr); }
}

.case__note {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--slate);
}

/* -- Numeri di esperienza -- */
.proof__stats {
  display: grid;
  gap: var(--gap);
}
.proof__stats li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.proof__stat-num {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.proof__stat-label { max-width: 44ch; }

/* -- Certificazioni -- */
.certs { display: grid; gap: 0.75rem; margin-top: 0.5rem; }

.cert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

.cert__title { font-size: 1rem; font-weight: 600; }
.cert__issuer {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--slate);
  margin-top: 0.25rem;
}
.cert__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding-inline: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
}
.cert--badge { align-items: center; }
.cert__main { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.cert__badge-img { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-sm); object-fit: cover; }

/* =====================================================================
   12 · TRASPARENZA
   ===================================================================== */
.trust__grid { display: grid; gap: var(--gap); }

.trust__card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(10, 14, 26, 0.5);
}

.trust__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-bottom: 1rem;
  color: var(--indigo-bright);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

.trust__title { font-size: var(--fs-h4); margin-bottom: 0.55rem; }
.trust__text { font-size: var(--fs-small); color: var(--slate); }

/* =====================================================================
   13 · TEAM — sezione chiara
   ===================================================================== */
.team__grid {
  display: grid;
  gap: var(--gap);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Placeholder iniziali (finché la foto reale non è disponibile) */
.team-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(18, 227, 196, 0.18), transparent 55%),
    var(--deep-shell);
  border: 1px solid var(--indigo-bright);
  color: var(--indigo-bright);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius);
  background: #ffffff;
}

.team-card__photo {
  display: block;
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  overflow: clip;
  aspect-ratio: 4 / 3;
  /* placeholder finché la foto non c'è: guscio scuro con luce cyan laterale */
  background:
    radial-gradient(ellipse at 20% 50%, rgba(18, 227, 196, 0.18), transparent 55%),
    var(--deep-shell);
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;    /* nasconde l'alt-text del placeholder src="" */
}
/* Finché la foto non c'è (src vuoto) resta solo il placeholder scuro */
.team-card__photo img[src=""] { visibility: hidden; }

.team-card__who { margin-bottom: 0.25rem; }
.team-card__name { font-size: var(--fs-h3); color: var(--ink); }
.team-card__role { font-weight: 500; }
.team-card__bio { font-size: var(--fs-small); line-height: 1.65; }
.team-card__link { margin-top: 0.5rem; }

.team-card__ic {
  display: inline-flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-bottom: 0.75rem;
  color: var(--electric-indigo);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-sm);
}

.team__note {
  margin-top: clamp(2rem, 4vw, 2.5rem);
  padding-left: 1.25rem;
  border-left: 2px solid var(--electric-indigo);
  color: var(--slate-ink);
  font-size: var(--fs-small);
  max-width: 52ch;
}

/* =====================================================================
   14 · FAQ
   ===================================================================== */
.faq__list {
  display: grid;
  gap: 0;
  max-width: 820px;
  border-top: 1px solid var(--hairline);
}

.faq-item { border-bottom: 1px solid var(--hairline); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding: 1.2rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.15rem);
  font-weight: 600;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--indigo-bright); }

/* Marcatore +/× coerente con lo stile lineare */
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--signal-cyan);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transition: transform 0.25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); border-color: var(--signal-cyan); }
.faq-item[open] summary { color: var(--indigo-bright); }

.faq-item p {
  padding: 0 3rem 1.4rem 0.25rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--slate);
  max-width: 68ch;
}

/* =====================================================================
   15 · CTA FINALE + FOOTER
   ===================================================================== */
.cta-final { text-align: center; overflow: clip; }

.cta-final__pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
}
.cta-final__pulse canvas { width: 100%; height: 100%; }

.cta-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.footer__vat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--slate);
  margin-top: 0.5rem;
}
.cta-final__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  max-width: 24ch;
}

.cta-final__sub {
  font-size: var(--fs-lead);
  color: var(--slate);
  max-width: 46ch;
}

.cta-final__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.75rem;
}

.cta-final__micro {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--slate);
  margin-top: 0.5rem;
}
.cta-final__micro a { color: var(--indigo-bright); }

/* Footer */
.footer {
  background: var(--shell-variant);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.footer__inner { display: grid; gap: 1rem; }

.footer__brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ghost-white);
}
.footer__brand strong { font-weight: 700; }

.footer__boiler {
  font-size: var(--fs-small);
  color: var(--slate);
  max-width: 60ch;
  margin-top: 0.5rem;
}

.footer__cols {
  display: grid;
  gap: 1.75rem;
  margin-top: 0.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.footer__col { display: flex; flex-direction: column; gap: 0.35rem; }
.footer__col-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.3rem;
}
.footer__col a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ghost-white);
}
.footer__col a:hover { color: var(--signal-cyan); text-decoration: none; }

.footer__copy {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--slate);
  margin-top: 0.75rem;
}

@media (min-width: 640px) {
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   15b · STICKY CTA — appare dopo ~40% di scroll (V9)
   ===================================================================== */
.sticky-cta {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  background: var(--electric-indigo);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: var(--glow-indigo);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
.sticky-cta:hover, .sticky-cta:focus-visible {
  text-decoration: none;
  box-shadow: var(--glow-indigo), var(--glow-cyan);
}
html.js .sticky-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: no-preference) {
  .sticky-cta { transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }

  @supports (animation-timeline: scroll()) {
    html:not(.js) .sticky-cta {
      animation: sticky-cta-in linear both;
      animation-timeline: scroll(root);
      animation-range: 40% 55%;
    }
    @keyframes sticky-cta-in { to { opacity: 1; transform: none; pointer-events: auto; } }
  }
}

/* =====================================================================
   15c · FORM DI CONTATTO
   ===================================================================== */
.cta-final__or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 640px;
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cta-final__or::before, .cta-final__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.contact-form {
  width: 100%;
  max-width: 640px;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(16, 21, 39, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: left;
}
.contact-form__intro { font-size: var(--fs-small); color: var(--slate); margin-bottom: 1.25rem; }
.contact-form__grid { display: grid; gap: 1rem; }
.contact-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
.contact-form__field label { font-size: var(--fs-small); font-weight: 500; color: var(--ghost-white); }
.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(10, 14, 26, 0.6);
  color: var(--ghost-white);
  font: inherit;
  font-size: var(--fs-body);
}
.contact-form__field textarea { resize: vertical; min-height: 100px; }
.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
  outline: 2px solid var(--signal-cyan);
  outline-offset: 2px;
}
.contact-form__consents { display: grid; gap: 0.75rem; margin: 1.5rem 0; }
.contact-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-small);
  color: var(--slate);
  cursor: pointer;
}
.contact-form__checkbox input {
  margin-top: 0.2rem;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--electric-indigo);
}
.contact-form__checkbox a { color: var(--indigo-bright); }
.contact-form__micro {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--slate);
}

@media (min-width: 640px) {
  .contact-form__grid { grid-template-columns: repeat(2, 1fr); }
  .contact-form__field--wide { grid-column: 1 / -1; }
}

/* =====================================================================
   16 · ANIMAZIONI — solo con motion consentito e JS attivo
   script.js deve: (1) aggiungere la classe `js` a <html>,
   (2) aggiungere `.is-visible` agli elementi `.reveal` via IntersectionObserver,
   (3) gestire .is-scrolled sulla nav e --scroll-progress su :root.
   Senza JS o con reduced-motion, tutto resta visibile e statico.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Stato iniziale dei reveal (solo se JS presente: niente contenuti persi) */
  html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Cascata leggera per gli elenchi con data-i */
  html.js [data-i="1"] { transition-delay: 90ms; }
  html.js [data-i="2"] { transition-delay: 180ms; }
  html.js [data-i="3"] { transition-delay: 270ms; }
  html.js [data-i="4"] { transition-delay: 360ms; }

  /* Cambio Prima/Dopo dei case study: pannello + voci in cascata.
     script.js riavvia l'animazione togliendo e rimettendo .is-entering. */
  html.js .case__panel.is-entering { animation: case-panel-in 0.4s var(--ease-out) both; }
  html.js .case__panel.is-entering .case__panel-intro,
  html.js .case__panel.is-entering .case__list li,
  html.js .case__panel.is-entering .case__stats li {
    animation: case-item-in 0.45s var(--ease-out) backwards;
  }
  html.js .case__panel.is-entering .case__panel-intro       { animation-delay: 50ms; }
  html.js .case__panel.is-entering .case__list li:nth-child(1)  { animation-delay: 90ms; }
  html.js .case__panel.is-entering .case__list li:nth-child(2)  { animation-delay: 150ms; }
  html.js .case__panel.is-entering .case__list li:nth-child(3)  { animation-delay: 210ms; }
  html.js .case__panel.is-entering .case__list li:nth-child(4)  { animation-delay: 270ms; }
  html.js .case__panel.is-entering .case__list li:nth-child(5)  { animation-delay: 330ms; }
  html.js .case__panel.is-entering .case__stats li:nth-child(1) { animation-delay: 380ms; }
  html.js .case__panel.is-entering .case__stats li:nth-child(2) { animation-delay: 440ms; }
  html.js .case__panel.is-entering .case__stats li:nth-child(3) { animation-delay: 500ms; }

  @keyframes case-panel-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes case-item-in {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes case-tab-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 90, 95, 0.35); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 90, 95, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 90, 95, 0); }
  }

  /* Il puntino del logo pulsa: il segnale che percepisce */
  .nav__logo-dot { animation: pulse-dot 2.6s ease-in-out infinite; }

  @keyframes pulse-dot {
    0%, 100% { text-shadow: 0 0 6px rgba(18, 227, 196, 0.4); }
    50%      { text-shadow: 0 0 16px rgba(18, 227, 196, 0.95); }
  }

  .scroll-progress__bar { transition: transform 0.1s linear; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .service-card { transition: none; }
}

/* =====================================================================
   17 · SUPPORTO SCRIPT.JS — Lenis, nav, micro-interazioni
   ===================================================================== */

/* Lenis: disattiva lo smooth nativo quando è lui a pilotare lo scroll */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Nav più compatta dopo lo scroll (insieme al vetro di .is-scrolled) */
.nav.is-scrolled .nav__inner { min-height: 58px; }

/* Link della sezione attiva */
.nav__links a { position: relative; }
.nav__links a.is-active { color: var(--ghost-white); }
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.4rem;
  height: 1px;
  background: var(--grad-brand);
}

@media (prefers-reduced-motion: no-preference) {
  .nav__inner { transition: min-height 0.3s var(--ease-out); }

  /* CTA magnetiche: il transform lo guida GSAP, la transition CSS
     resta solo su box-shadow per non combattere con l'animazione */
  html.js .btn--magnetic { transition-property: box-shadow; }
}

/* Glow che segue il cursore sulle card — solo desktop, mai con reduced-motion */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js .has-glow { position: relative; }
  html.js .has-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
      rgba(18, 227, 196, 0.09), rgba(91, 75, 224, 0.05) 40%, transparent 65%);
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  html.js .has-glow:hover::after { opacity: 1; }
}

/* =====================================================================
   BREAKPOINT 1 · ≥ 640px — tablet portrait
   ===================================================================== */
@media (min-width: 640px) {
  .hero__eyebrow { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; }
  .hero__eyebrow-sep { display: inline; }

  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__grid    { grid-template-columns: repeat(2, 1fr); }
  .proof__stats   { grid-template-columns: repeat(2, 1fr); }
  .team__grid     { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   BREAKPOINT 2 · ≥ 900px — desktop
   ===================================================================== */
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle, .nav__mobile { display: none; }

  .stats-strip { grid-template-columns: repeat(4, 1fr); }
  .problem__grid { grid-template-columns: repeat(3, 1fr); }
  .method__steps { grid-template-columns: repeat(3, 1fr); }

  /* Tre persone, tre colonne pari: nessuna card ha trattamento privilegiato */
  .team__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   BREAKPOINT 3 · ≥ 1200px — wide: più respiro, layout definitivo
   ===================================================================== */
@media (min-width: 1200px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .trust__grid { grid-template-columns: repeat(4, 1fr); }

  .hero__title { max-width: 16ch; }
}

/* =====================================================================
   17 · PAGINE LEGALI (privacy-policy, cookie-policy)
   ===================================================================== */
.nav--simple { position: sticky; top: 0; z-index: 50; }

.legal { padding-block: var(--section-pad); }
.legal__inner { max-width: 760px; }
.legal__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1, clamp(2rem, 1.2rem + 3vw, 3rem));
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
}
.legal__updated {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--slate);
  letter-spacing: 0.06em;
  margin-top: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.legal__body { display: grid; gap: 1.25rem; }
.legal__body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  margin-top: 1rem;
  color: var(--ghost-white);
}
.legal__body p { color: var(--slate); line-height: 1.7; }
.legal__body p strong { color: var(--ghost-white); font-weight: 600; }
.legal__body a { color: var(--indigo-bright); text-decoration: underline; text-underline-offset: 2px; }
.legal__body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: var(--shell-raised);
  color: var(--signal-cyan);
}
.legal__list {
  display: grid;
  gap: 0.6rem;
  padding-left: 1.25rem;
  color: var(--slate);
  line-height: 1.65;
}
.legal__list li { list-style: disc; }
.legal__list a { color: var(--indigo-bright); }
.legal__back { margin-top: clamp(2rem, 4vw, 3rem); }