/* === Imported from: ./tokens/_tokens.css === */
/* ============================================================
   TOKENS — ZETA TECNICA DESIGN SYSTEM
   All design tokens as CSS custom properties.
   Reference: qualytics.ai | Generated: 2026-06-10
   ============================================================ */

/* --- @font-face declarations --- */

@font-face {
  font-family: 'Manrope';
  src: url('../font/Manrope/static/Manrope-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../font/Manrope/static/Manrope-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../font/Manrope/static/Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../font/Manrope/static/Manrope-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../font/Manrope/static/Manrope-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../font/Manrope/static/Manrope-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../font/Manrope/static/Manrope-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../font/Space_Mono/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../font/Space_Mono/SpaceMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../font/Space_Mono/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../font/Space_Mono/SpaceMono-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* --- Color tokens --- */
:root {
  /* ---- Neutral Palette (50–950) ---- */
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-150: #f0f0f0;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #8c8c8c;    /* SECONDARY GRAY [OVERRIDE] */
  --color-neutral-600: #6b6b6b;
  --color-neutral-700: #4a4a4a;
  --color-neutral-800: #2d2d2d;
  --color-neutral-850: #1f1f1f;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  /* ---- Background ---- */
  --color-bg-primary:    #FFFFFF;
  --color-bg-secondary:  var(--color-neutral-100);
  --color-bg-tertiary:   var(--color-neutral-50);
  --color-bg-dark:       var(--color-neutral-900);
  --color-bg-dark-card:  var(--color-neutral-850);
  --color-bg-testimonial: var(--color-neutral-150);
  --color-bg-overlay:    rgba(10, 10, 10, 0.75);

  /* ---- Text ---- */
  --color-text-primary:    var(--color-neutral-950);
  --color-text-secondary:  var(--color-neutral-700);
  --color-text-tertiary:   var(--color-neutral-400);
  --color-text-inverted:   #FFFFFF;
  --color-text-inverted-muted: var(--color-neutral-300);

  /* ---- Accent — Primary ---- */
  --color-accent-primary:       #0b4286;
  --color-accent-primary-hover: #093668;
  --color-accent-primary-light: #1a5ca8;
  --color-accent-primary-subtle: rgba(11, 66, 134, 0.12);
  --color-accent-primary-text:  #FFFFFF;

  /* ---- Accent — Secondary ---- */
  --color-accent-secondary:       #c9972e;
  --color-accent-secondary-hover: #b0841f;
  --color-accent-secondary-light: #e0b95a;

  /* ---- Custom Brand Elements ---- */
  --color-whatsapp:               #25D366;
  /* Canali RGB dello stesso verde: servono per l'ombra dell'hover, che lo usa
     a opacita' ridotta — rgba(var(--color-whatsapp-rgb), 0.3). */
  --color-whatsapp-rgb:           37, 211, 102;
  --color-whatsapp-hover:         #20ba5a;
  --color-green-cta:              #16a34a;
  --color-green-cta-hover:         #15803d;

  /* ---- Borders ---- */
  --color-border:         var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);
  --color-border-dark:    var(--color-neutral-800);
  --color-border-accent:  var(--color-accent-primary);

  /* ---- Status ---- */
  --color-status-success:  #20E28B;
  --color-status-warning:  #F5A623;
  --color-status-error:    #E53E3E;
  --color-status-info:     var(--color-accent-primary);

  /* ---- Surface / Selection ---- */
  --color-surface-overlay: rgba(10, 10, 10, 0.5);
  /* Velo blu scuro steso sopra le foto di sfondo (hero con shader, CTA scure).
     Esposto a canali RGB perche' serve con opacita' diverse lungo lo stesso
     gradiente: rgba(var(--color-shader-blue-rgb), 0.95). */
  --color-shader-blue-rgb: 11, 32, 64;
  --color-text-selection-bg:   var(--color-accent-primary);
  --color-text-selection-text: #FFFFFF;
}


/* --- Typography tokens --- */
:root {
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui:      'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

  --text-xs:   0.75rem;
  --text-xs-lh: 1.4;
  --text-sm:   0.875rem;
  --text-sm-lh: 1.5;
  --text-base: 1rem;
  --text-base-lh: 1.6;
  --text-lg:   1.125rem;
  --text-lg-lh: 1.5;
  --text-xl:   1.25rem;
  --text-xl-lh: 1.4;
  --text-2xl:  1.5rem;
  --text-2xl-lh: 1.3;
  --text-3xl:  2rem;
  --text-3xl-lh: 1.2;
  --text-4xl:  2.5rem;
  --text-4xl-lh: 1.1;
  --text-5xl:  3.5rem;
  --text-5xl-lh: 1.05;

  --font-weight-extralight: 200;
  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
}


/* --- Spacing tokens --- */
:root {
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  --container-max:      1280px;
  --container-narrow:   768px;
  --container-wide:     1440px;
  --container-padding:  1.5rem;
  --section-gap:        var(--space-24);
}


/* --- Shape tokens --- */
:root {
  --radius-none: 0;
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;
}


/* --- Shadow tokens --- */
:root {
  --shadow-none: none;
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
  --shadow-xl:   0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-accent: 0 4px 14px rgba(11, 66, 134, 0.25);
}


/* --- Motion tokens --- */
:root {
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-medium: 400ms;
  --duration-slow:   600ms;
  --duration-reveal: 800ms;

  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-precise: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-enter:   cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-exit:    cubic-bezier(0.77, 0, 0.175, 1);
  --ease-bounce:  cubic-bezier(0.625, 0.05, 0, 1);
  --ease-smooth:  cubic-bezier(0.5, 0.5, 0, 1);
}


/* === Imported from: ./base/_reset.css === */
/* ============================================================
   BASE RESET — ZETA TECNICA DESIGN SYSTEM
   Global resets and element defaults.
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-accent-primary);
  color: var(--color-text-inverted);
  padding: var(--space-3) var(--space-5);
  z-index: 10000;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  transition: top var(--duration-fast) var(--ease-default);
}

.skip-link:focus-visible {
  top: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  font-weight: var(--font-weight-regular);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}

h1 {
  font-size: var(--text-5xl);
  line-height: var(--text-5xl-lh);
}

h2 {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl-lh);
}

h3 {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh);
}

h4 {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-lh);
}

h5 {
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh);
}

h6 {
  font-size: var(--text-lg);
  line-height: var(--text-lg-lh);
}

p {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
}

/* Grassetto di scansione nel body copy. Peso esplicito e non il default
   `bolder` del browser, che e' relativo: dentro un contenitore gia' a 700
   risolverebbe a 900, peso che non abbiamo come file e che il browser
   sintetizzerebbe. 700 e' Manrope-Bold.ttf, reale.
   Nessuna dichiarazione di colore, di proposito: lo <strong> eredita quello
   del suo <p>. Quattro contesti invertono il colore dei paragrafi
   (.section--dark, .card--blue, e .hero-section-custom .reveal-on-scroll in
   due stati, di cui uno al passaggio del mouse) e un colore fisso qui
   diventerebbe testo scuro su fondo scuro, in hero perfino a intermittenza.
   Ambito limitato a p/li per non toccare gli <strong> di badge e footer,
   che hanno stili propri. */
p strong,
li strong {
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--color-accent-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

a:hover {
  color: var(--color-accent-primary-hover);
}

/* Global keyboard focus indicators for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}


code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

::selection {
  background: var(--color-text-selection-bg);
  color: var(--color-text-selection-text);
}

::-moz-selection {
  background: var(--color-text-selection-bg);
  color: var(--color-text-selection-text);
}

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


/* === Imported from: ./atoms/_typography.css === */
/* ============================================================
   ATOM: TYPOGRAPHY — ZETA TECNICA DESIGN SYSTEM
   Text size utilities, font weight utilities, and overline.
   ============================================================ */

/* --- Text size utilities --- */
.text-xs      { font-size: var(--text-xs);   line-height: var(--text-xs-lh); }
.text-sm      { font-size: var(--text-sm);   line-height: var(--text-sm-lh); }
.text-base    { font-size: var(--text-base); line-height: var(--text-base-lh); }
.text-lg      { font-size: var(--text-lg);   line-height: var(--text-lg-lh); }
.text-xl      { font-size: var(--text-xl);   line-height: var(--text-xl-lh); }
.text-2xl     { font-size: var(--text-2xl);  line-height: var(--text-2xl-lh); }
.text-3xl     { font-size: var(--text-3xl);  line-height: var(--text-3xl-lh); }
.text-4xl     { font-size: var(--text-4xl);  line-height: var(--text-4xl-lh); }
.text-5xl     { font-size: var(--text-5xl);  line-height: var(--text-5xl-lh); }

/* --- Responsive heading-scale utility ---
   Da' a un elemento la scala tipografica dell'h1 a tutti i breakpoint.
   Serve dove il titolo visibile non e' l'h1 del documento: nelle pagine
   soluzione l'h1 e' l'occhiello, descrittivo e con la localita', e il
   claim grande e' un h2. Le classi .text-* qui sopra non bastano: sono
   fisse, e avendo specificita' di classe batterebbero gli override di
   UTILITY: RESPONSIVE, che agiscono sui selettori di elemento h1/h2/h3,
   lasciando il claim a 56px anche a 375px. */
.text-h1      { font-size: var(--text-5xl);  line-height: var(--text-5xl-lh); }

@media screen and (max-width: 1023px) {
  .text-h1    { font-size: var(--text-4xl);  line-height: var(--text-4xl-lh); }
}

@media screen and (max-width: 767px) {
  .text-h1    { font-size: var(--text-3xl);  line-height: var(--text-3xl-lh); }
}

.text-muted   { color: var(--color-text-secondary); }
.text-accent  { color: var(--color-accent-primary); }
.text-mono    { font-family: var(--font-mono); letter-spacing: var(--tracking-wide); }
.text-center  { text-align: center; }

/* --- Font weight utilities --- */
.font-light     { font-weight: var(--font-weight-light); }
.font-regular   { font-weight: var(--font-weight-regular); }
.font-medium    { font-weight: var(--font-weight-medium); }
.font-semibold  { font-weight: var(--font-weight-semibold); }
.font-bold      { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

/* --- Overline / Label — monospace section tags --- */
.overline {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-neutral-900);
}

.overline--accent {
  color: var(--color-accent-primary);
}

/* Dot indicator (section labels) */
.overline--dot::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--color-accent-primary);
  margin-right: var(--space-2);
  vertical-align: middle;
}

/* Scramble Eyebrow
   ─────────────────
   Overline that scrambles on viewport entry or on trigger.
   Inherits mono font + uppercase, so only color transitions.
   
   HTML:
   <span class="overline overline--accent overline--scramble"
         data-scramble="THE SOLUTION">THE SOLUTION</span>
*/
.overline--scramble .scramble-char {
  font-family: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: var(--color-neutral-400);
  opacity: 0.6;
}

.overline--scramble .scramble-char--resolved {
  color: inherit;
  opacity: 1;
}

/* On dark backgrounds */
.overline--scramble.overline--dark .scramble-char {
  color: var(--color-neutral-700);
}

.overline--scramble.overline--dark .scramble-char--resolved {
  color: var(--color-accent-primary-light);
}

/* --- Disclosure delle immagini generate con IA ---
   Componente padre delle righe che dichiarano un'immagine generata.
   Dal 2026-10-07 il sito ne ha tre famiglie: le ambientazioni del blocco
   «Soluzioni per ogni necessità», gli sfondi hero e i ritratti del team.

   Qui sta solo la tipografia, che è la parte comune: corpo, interlinea,
   colore e margini. La posizione no, perché cambia col contenitore — in
   hero la riga è ancorata al fondo, nel blocco soluzioni segue lo sticky —
   e quelle regole restano nella pagina che le usa, che però estende questa
   classe invece di ridichiarare corpo e colore.

   Il testo non è intercambiabile: dove sotto c'è davvero una gallery di
   installazioni reali la riga ci rimanda, dove non c'è si ferma prima.
   Vedi la regola in CLAUDE.md.

   HTML:
   <p class="text-ai-disclaimer">Ambientazioni illustrative realizzate con IA.</p>
*/
.text-ai-disclaimer {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
  margin-bottom: 0;
}


/* === Imported from: ./atoms/_buttons.css === */
/* ============================================================
   ATOM: BUTTONS — ZETA TECNICA DESIGN SYSTEM
   All button variants.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: scale(0.98);
}

/* Primary */
.btn--primary {
  background-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
  border-radius: var(--radius-none);
}

.btn--primary:hover {
  background-color: var(--color-accent-primary-hover);
  color: var(--color-accent-primary-text);
  box-shadow: var(--shadow-accent);
}

/* Primary White (for dark/blue backgrounds) */
.btn--primary-white {
  background-color: var(--color-bg-primary);
  color: var(--color-accent-primary);
  border-radius: var(--radius-none);
}

.btn--primary-white:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-accent-primary-hover);
  box-shadow: var(--shadow-md);
}

/* Secondary / Ghost */
.btn--secondary {
  background-color: transparent;
  color: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-none);
  padding-top: calc(var(--space-4) - 1px);
  padding-bottom: calc(var(--space-4) - 1px);
}

.btn--secondary:hover {
  background-color: #ffffff;
  color: var(--color-accent-primary-hover);
  border-color: var(--color-accent-primary-hover);
}

/* Ghost on dark bg */
.btn--ghost-dark {
  background-color: transparent;
  color: var(--color-text-inverted);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-none);
  padding-top: calc(var(--space-4) - 1px);
  padding-bottom: calc(var(--space-4) - 1px);
}

.btn--ghost-dark:hover {
  background-color: var(--color-neutral-800);
  border-color: var(--color-text-inverted);
}

/* Inline link-style */
.btn--link {
  background: none;
  color: var(--color-text-primary);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  gap: var(--space-2);
}

.btn--link:hover {
  color: var(--color-accent-primary);
}

.btn--link .btn__icon {
  transition: transform var(--duration-medium) var(--ease-enter);
}

.btn--link:hover .btn__icon {
  transform: rotate(-45deg);
}

/* Disabled State */
.btn:disabled,
.btn.btn--disabled {
  background-color: var(--color-neutral-200) !important;
  color: var(--color-neutral-400) !important;
  border-color: var(--color-neutral-200) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none;
}

/* Scramble CTA
   ─────────────
   Button with scramble-on-hover effect.
   The label text scrambles when the user hovers, then resolves.
   
   HTML:
   <button class="btn btn--primary btn--scramble" data-scramble="Schedule a demo">
     Schedule a demo
   </button>
*/
.btn--scramble {
  position: relative;
  overflow: hidden;
}

/* The scramble chars inherit the button's mono font,
   so we only shift color during the scramble phase */
.btn--scramble .scramble-char {
  font-family: inherit;
  opacity: 0.6;
}

.btn--scramble .scramble-char--resolved {
  opacity: 1;
}

/* On primary bg, scramble chars are lighter white */
.btn--primary.btn--scramble .scramble-char {
  color: rgba(255, 255, 255, 0.4);
}

.btn--primary.btn--scramble .scramble-char--resolved {
  color: var(--color-accent-primary-text);
}

/* On primary-white bg */
.btn--primary-white.btn--scramble .scramble-char {
  color: var(--color-neutral-400);
}

.btn--primary-white.btn--scramble .scramble-char--resolved {
  color: var(--color-accent-primary);
}

/* On secondary/ghost */
.btn--secondary.btn--scramble .scramble-char {
  color: var(--color-accent-primary);
  opacity: 0.7;
}

.btn--secondary.btn--scramble .scramble-char--resolved {
  color: var(--color-accent-primary);
}

.btn--secondary:hover.btn--scramble .scramble-char,
.btn--secondary:hover.btn--scramble .scramble-char--resolved {
  color: var(--color-accent-primary-hover);
}

/* Variant: Secondary button with blue background & white text on hover (e.g. Services section CTA) */
.btn--secondary-blue-hover:hover {
  background-color: var(--color-accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-accent-primary) !important;
}

.btn--secondary-blue-hover:hover,
.btn--secondary-blue-hover:hover * {
  color: #ffffff !important;
}

/* On ghost-dark */
.btn--ghost-dark.btn--scramble .scramble-char {
  color: var(--color-neutral-600);
}

.btn--ghost-dark.btn--scramble .scramble-char--resolved {
  color: var(--color-text-inverted);
}

/* Square Icon Button (matches standard button height of 46px) */
.btn--square {
  width: 46px;
  height: 46px;
  aspect-ratio: 1;
  flex-shrink: 0;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn--square svg,
.btn--square .icon {
  width: 20px;
  height: 20px;
}

/* Green primary CTA for H24 service card */
.btn--green {
  background-color: var(--color-green-cta);
  color: var(--color-text-inverted);
  border: 1px solid var(--color-green-cta);
  border-radius: var(--radius-none);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
  margin-top: var(--space-4);
  align-self: flex-start;
  font-weight: var(--font-weight-bold);
}

.btn--green:hover {
  background-color: var(--color-green-cta-hover);
  border-color: var(--color-green-cta-hover);
  color: var(--color-text-inverted);
  text-decoration: none;
}

/* WhatsApp branded button */
.btn--whatsapp {
  background-color: var(--color-whatsapp);
  color: var(--color-bg-dark);
  border: none;
  border-radius: var(--radius-none);
}

.btn--whatsapp:hover {
  background-color: var(--color-whatsapp-hover);
  color: var(--color-bg-dark);
  box-shadow: 0 4px 12px rgba(var(--color-whatsapp-rgb), 0.3);
}

/* Icon-only secondary green buttons (Phone / WhatsApp in header) */
.btn--green-icon {
  background-color: transparent;
  color: var(--color-green-cta);
  border: 1px solid var(--color-green-cta);
  border-radius: var(--radius-none);
  width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}

.btn--green-icon:hover {
  background-color: var(--color-green-cta);
  color: var(--color-text-inverted);
  text-decoration: none;
}

.btn--green-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Green primary CTA for H24 service card */
.btn--green-primary {
  background-color: var(--color-green-cta);
  color: var(--color-text-inverted) !important;
  border: 1px solid var(--color-green-cta);
  border-radius: var(--radius-none);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
  margin-top: var(--space-4);
  align-self: flex-start;
  font-weight: var(--font-weight-bold);
}
.btn--green-primary:hover {
  background-color: var(--color-green-cta-hover);
  border-color: var(--color-green-cta-hover);
  color: var(--color-text-inverted) !important;
  text-decoration: none;
}

/* Override aggressive selectors of .card--blue for elements inside .btn */
.card--blue .btn span,
.card--blue .btn span.scramble-target,
.card--blue .btn .scramble-char,
.card--blue .btn .scramble-char--resolved {
  color: inherit !important;
}

.card--blue .btn svg {
  color: inherit !important;
  fill: currentColor !important;
}

.card--blue .btn--primary-white span,
.card--blue .btn--primary-white span.scramble-target,
.card--blue .btn--primary-white .scramble-char--resolved {
  color: var(--color-accent-primary) !important;
}

.card--blue .btn--primary-white:hover span,
.card--blue .btn--primary-white:hover span.scramble-target,
.card--blue .btn--primary-white:hover .scramble-char--resolved {
  color: var(--color-accent-primary-hover) !important;
}

.card--blue .btn--primary-white svg {
  color: var(--color-accent-primary) !important;
  stroke: var(--color-accent-primary) !important;
}

.card--blue .btn--primary-white:hover svg {
  color: var(--color-accent-primary-hover) !important;
  stroke: var(--color-accent-primary-hover) !important;
}

.card--blue .btn--whatsapp span,
.card--blue .btn--whatsapp span.scramble-target,
.card--blue .btn--whatsapp .scramble-char--resolved {
  color: var(--color-bg-dark) !important;
}

.card--blue .btn--whatsapp svg {
  color: var(--color-bg-dark) !important;
  fill: currentColor !important;
}

/* ============================================================
   STATO DI CARICAMENTO
   Il primo ritorno dell'invio di un modulo non e' una schermata,
   e' il bottone. Usato da .form-feedback (molecules/_form-feedback.css).

   pointer-events: none non e' cosmetico: lo scramble di
   scroll-animations.js riaggancia il testo originale su mouseenter,
   e senza questa riga passare col mouse sul bottone mentre invia
   rimetterebbe «Invia richiesta» al posto di «Invio in corso».
   ============================================================ */

.btn--loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.btn--loading::after {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: var(--space-3);
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: btn-spin var(--duration-slow) linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Lo spinner gira anche con prefers-reduced-motion: non e' decorazione,
   e' l'unico segnale che l'invio e' in corso. Resta pero' l'unica cosa
   che si muove, ed e' piccola. */

/* === Imported from: ./atoms/_badges.css === */
/* ============================================================
   ATOM: BADGES — ZETA TECNICA DESIGN SYSTEM
   Badge and tag variants.
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-primary-subtle);
  color: var(--color-accent-primary);
}

.badge--dark {
  background-color: var(--color-neutral-800);
  color: var(--color-text-inverted);
}

/* Google Reviews Minimal Badge */
.google-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  background: none;
  border: none;
  text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-default);
}

.google-badge:hover {
  opacity: 0.75;
}

.google-badge__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.google-badge__stars {
  display: flex;
  align-items: center;
}

.google-badge__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}


/* === Imported from: ./atoms/_dividers.css === */
/* ============================================================
   ATOM: DIVIDERS — ZETA TECNICA DESIGN SYSTEM
   Horizontal rule variants.
   ============================================================ */

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-8);
}

.divider--dark {
  border-color: var(--color-border-dark);
}

.divider--dashed {
  border-top-style: dashed;
}


/* === Imported from: ./atoms/_links.css === */
/* ============================================================
   ATOM: LINKS — ZETA TECNICA DESIGN SYSTEM
   Link and anchor styles (beyond base reset).
   Focus ring for keyboard navigation.
   ============================================================ */

/* Focus ring for keyboard navigation */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid var(--color-accent-primary);
  outline-offset: 0.125rem;
}

/* Global Link Hover Interactivity */
a:hover {
  text-decoration: underline;
}

/* Utility to inherit parent text color and remove default underline */
.link-inherit {
  color: inherit;
  text-decoration: none;
}

/* Social Link on light background (outline) */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-accent-primary);
  color: var(--color-accent-primary);
  border-radius: var(--radius-none);
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
  text-decoration: none;
}

.social-link:hover {
  background-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
  text-decoration: none;
}


/* === Imported from: ./molecules/_input-filled.css === */
/* ============================================================
   MOLECULE: FLOATING LABEL INPUT — ZETA TECNICA DESIGN SYSTEM
   Ionic Filled style input with floating label.
   
   HTML structure:
   <div class="input-filled">
     <input type="..." id="..." class="input-filled__field" placeholder=" " />
     <label for="..." class="input-filled__label">Label text</label>
     <div class="input-filled__bar"></div>
   </div>
   
   IMPORTANT: placeholder=" " (space) is required.
   ============================================================ */

.input-filled {
  position: relative;
  width: 100%;
}

.input-filled__field {
  width: 100%;
  display: block;
  height: 3.75rem;
  padding: 1.5rem var(--space-4) 0.375rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--color-border);
  border-radius: 0;
  outline: none;
  transition: border-color var(--duration-base) var(--ease-default);
  -webkit-appearance: none;
  appearance: none;
}

textarea.input-filled__field {
  height: auto;
  min-height: 7rem;
  padding-top: 1.5rem;
  resize: vertical;
}

.input-filled__field:hover {
  border-bottom-color: var(--color-border-strong);
}

.input-filled__field:focus {
  border-bottom-color: var(--color-accent-primary);
}

.input-filled__label {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-tertiary);
  pointer-events: none;
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-enter),
              font-size var(--duration-base) var(--ease-enter),
              color var(--duration-base) var(--ease-enter),
              top var(--duration-base) var(--ease-enter);
}

textarea.input-filled__field ~ .input-filled__label {
  top: 1.125rem;
  transform: translateY(0);
}

.input-filled__field:focus ~ .input-filled__label,
.input-filled__field:not(:placeholder-shown) ~ .input-filled__label,
select.input-filled__field:valid ~ .input-filled__label {
  top: 0.5rem;
  transform: translateY(0);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.input-filled__field:focus ~ .input-filled__label {
  color: var(--color-accent-primary);
}

.input-filled__bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--color-accent-primary);
  transition: width var(--duration-medium) var(--ease-enter),
              left var(--duration-medium) var(--ease-enter);
}

.input-filled__field:focus ~ .input-filled__bar {
  width: 100%;
  left: 0;
}

/* Select / Dropdown Specific Styling */
select.input-filled__field {
  padding-right: var(--space-10);
  cursor: pointer;
}

.input-filled__arrow {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-secondary);
  transition: transform var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
  display: flex;
  align-items: center;
}

.input-filled__arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.input-filled__field:focus ~ .input-filled__arrow {
  color: var(--color-accent-primary);
  transform: translateY(-50%) rotate(-180deg);
}

/* Dark variant */
.input-filled--dark .input-filled__field {
  background-color: var(--color-neutral-850);
  border-bottom-color: var(--color-neutral-700);
  color: var(--color-text-inverted);
}

.input-filled--dark .input-filled__field:hover {
  background-color: var(--color-neutral-800);
}

.input-filled--dark .input-filled__field:focus {
  background-color: var(--color-neutral-800);
  border-bottom-color: var(--color-accent-primary-light);
}

.input-filled--dark .input-filled__label {
  color: var(--color-neutral-500);
}

.input-filled--dark .input-filled__field:focus ~ .input-filled__label {
  color: var(--color-accent-primary-light);
}

.input-filled--dark .input-filled__field:not(:placeholder-shown) ~ .input-filled__label {
  color: var(--color-neutral-400);
}

.input-filled--dark .input-filled__bar {
  background-color: var(--color-accent-primary-light);
}

/* Error state */
.input-filled--error .input-filled__field {
  border-bottom-color: var(--color-status-error);
}

.input-filled--error .input-filled__field:focus ~ .input-filled__label,
.input-filled--error .input-filled__field:not(:placeholder-shown) ~ .input-filled__label {
  color: var(--color-status-error);
}

.input-filled--error .input-filled__bar {
  background-color: var(--color-status-error);
}

.input-filled__helper {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  padding-left: var(--space-4);
}

.input-filled--error .input-filled__helper {
  color: var(--color-status-error);
}

/* Legacy simple input */
.input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-tertiary);
  border: none;
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
}

.input:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-neutral-100);
}

.input:focus,
.input:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  border-color: var(--color-accent-primary);
}

.input::placeholder {
  color: var(--color-text-tertiary);
}


/* === Imported from: ./molecules/_cards.css === */
/* ============================================================
   MOLECULE: CARDS — ZETA TECNICA DESIGN SYSTEM
   Card component and variants.
   ============================================================ */

.card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
  padding: var(--space-8);
  transition: box-shadow var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-default);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card--dark {
  background-color: var(--color-bg-dark-card);
  border-color: var(--color-border-dark);
  color: var(--color-text-inverted);
}

.card--accent-border {
  border-left: 3px solid var(--color-accent-primary);
}

/* Card with icon above eyebrow
   HTML structure:
   <div class="card card--icon">
     <div class="card__icon">
       <svg>...</svg>  or  <img>
     </div>
     <span class="card__eyebrow overline overline--accent">Label</span>
     <h5 class="card__title">Title</h5>
     <p class="card__desc">...</p>
   </div>
*/
.card--icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-primary-subtle);
  color: var(--color-accent-primary);
  margin-bottom: var(--space-5);
  transition: background-color var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-enter);
}

.card--icon:hover .card__icon {
  background-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
  transform: scale(1.08);
}

.card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.card__icon svg,
.card__icon svg * {
  stroke: currentColor;
  fill: none !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.card__title {
  margin-bottom: var(--space-3);
}

.card__desc {
  font-size: var(--text-sm);
}

/* Dark icon card */
.card--dark .card__icon {
  background-color: rgba(26, 92, 168, 0.2);
  color: var(--color-accent-primary-light);
}

.card--dark.card--icon:hover .card__icon {
  background-color: var(--color-accent-primary-light);
  color: var(--color-bg-dark);
}

.card--dark .card__eyebrow {
  color: var(--color-accent-primary-light);
}

.card--dark .card__title {
  color: var(--color-text-inverted);
}

.card--dark .card__desc {
  color: var(--color-text-inverted-muted);
}

/* Statistics / Results Card
   Used for stacking scroll animations
   HTML structure:
   <div class="card card--stat">
     <div class="card--stat__number">50+</div>
     <div class="card--stat__desc">Descrizione...</div>
   </div>
*/
.card--stat {
  background-color: var(--color-bg-primary); /* white background */
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: var(--radius-none);
  padding: var(--space-5); /* uniform padding (20px) - lateral matches top/bottom */
  position: sticky;
  top: 140px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform-origin: top center;
  transition: box-shadow var(--duration-base) var(--ease-default);
}

.card--stat__number {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-5xl);
  color: var(--color-accent-primary); /* brand blue */
  line-height: 1;
  margin-bottom: calc(4 * var(--space-5)); /* distance between data and caption is 4 times the padding */
}

.card--stat__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary); /* secondary gray */
  line-height: var(--text-sm-lh);
}

/* Card Solution Variant (with image, title, bodytext, and tertiary CTA) */
.card--solution {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-primary); /* white background */
  border: 1px solid var(--color-border);
  padding: 0;
  border-radius: var(--radius-none);
  overflow: hidden;
  max-width: 380px; /* max-width of product cards on large screens */
  min-width: 300px;
  flex: 0 0 auto;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-default);
}

.card--solution:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-4px);
  text-decoration: none;
}

.card--solution .card__img-wrapper {
  width: 100%;
  overflow: hidden;
  border-bottom: none;
  padding: var(--space-5) var(--space-5) 0 var(--space-5);
  position: relative;
}

/* scanlines + RGB overlay on hover */
.card--solution .card__img-wrapper::after {
  content: '';
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
  bottom: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.3) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.05), 
    rgba(0, 255, 0, 0.02), 
    rgba(0, 0, 255, 0.05)
  );
  background-size: 100% 4px, 6px 100%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-default);
}

.card--solution:hover .card__img-wrapper::after {
  opacity: 0.3;
}

.card--solution img,
.card--solution .card__img-placeholder {
  aspect-ratio: 4 / 3;
  height: auto !important;
  width: 100%;
  object-fit: cover;
}

.card--solution:hover img {
  filter: sepia(1) saturate(3.5) hue-rotate(185deg) brightness(0.75) contrast(1.2);
}

.card--solution .card__body {
  padding: var(--space-5); /* content padding var(--space-5) */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card--solution .card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.card--solution .card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--text-sm-lh);
  margin-bottom: var(--space-4);
  flex-grow: 1;
}

.card--solution .card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  transition: color var(--duration-base) var(--ease-default);
}

.card--solution .card__cta .cta-arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-default);
}

.card--solution:hover .card__cta .cta-arrow {
  transform: translateX(4px);
}

/* Service Card Variant (with white bg, icon, title, desc, and sticky stacking support) */
.card--service {
  background-color: var(--color-bg-primary); /* white background */
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: var(--radius-none);
  padding: var(--space-6);
  position: sticky;
  top: 140px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform-origin: top center;
  transition: box-shadow var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-default);
}

.card--service .card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-primary-subtle);
  color: var(--color-accent-primary);
  margin-bottom: var(--space-4);
}

.card--service .card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  margin-bottom: var(--space-2);
  line-height: 1.2;
}

.card--service .card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--text-sm-lh);
}

/* Service Detail Card Variant (for stacking service page cards with text and image) */
.card--service-detail {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: var(--radius-none);
  padding: var(--space-8);
  position: sticky;
  top: 140px;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-8);
  align-items: center;
  transform-origin: top center;
  transition: opacity var(--duration-slow) var(--ease-enter),
              transform var(--duration-slow) var(--ease-enter),
              box-shadow var(--duration-base) var(--ease-default);
}

.card--service-detail .card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card--service-detail .card__eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-accent-primary);
}

.card--service-detail .card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.card--service-detail .card__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--text-base-lh);
  margin-bottom: var(--space-6);
}

.card--service-detail .card__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card--service-detail .card__highlight-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.card--service-detail .card__highlight-icon {
  color: var(--color-accent-primary);
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.card--service-detail .card__img-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.card--service-detail .card__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--duration-base) var(--ease-default);
}

/* scanlines + RGB overlay on hover */
.card--service-detail .card__img-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.3) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.05), 
    rgba(0, 255, 0, 0.02), 
    rgba(0, 0, 255, 0.05)
  );
  background-size: 100% 4px, 6px 100%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-default);
}

.card--service-detail:hover .card__img-wrapper::after {
  opacity: 0.3;
}

.card--service-detail:hover .card__img-wrapper img {
  filter: sepia(1) saturate(3.5) hue-rotate(185deg) brightness(0.75) contrast(1.2) !important;
}

/* Mobile responsive for card--service-detail */
@media screen and (max-width: 767px) {
  .card--service-detail {
    position: relative;
    top: auto !important;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-6);
  }
  
  .card--service-detail .card__img-wrapper {
    aspect-ratio: 4 / 3;
    order: 2; /* image below text on mobile */
  }
}

/* Brand Card Variant (eyebrow "marchi")
   Based on the solutions card layout: padding, aspect-ratio, etc.
*/
.card--brand {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-primary);
  border: none;
  padding: 0;
  border-radius: var(--radius-none);
  overflow: hidden;
}

.card--brand:hover {
  box-shadow: none;
  transform: none;
}

.card--brand .card__img-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 0;
}

.card--brand img {
  aspect-ratio: 4 / 3;
  height: auto !important;
  width: 100%;
  object-fit: contain;
  border: 1px solid var(--color-border); /* stroke img 1px */
  padding: var(--space-10); /* internal padding of the image */
  background-color: #ffffff;
}

.card--brand .card__body {
  padding: var(--space-4) 0 0 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card--brand .card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.card--brand .card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--text-sm-lh);
  margin-bottom: 0;
}

/* ============================================================
   PRODUCT & GALLERY CARDS (ADDED FOR SOLUTIONS TEMPLATE)
   ============================================================ */

/* Product Card (2-column layout component)
   HTML structure:
   <div class="product-card">
     <div class="product-card__img-wrapper">
       <img src="...">
     </div>
     <div class="product-card__title" data-scramble>Product Title</div>
   </div>
*/
.product-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: default;
  position: relative;
  background-color: var(--color-bg-primary);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--duration-base) var(--ease-default),
              outline var(--duration-base) var(--ease-default);
}

.product-card:hover {
  outline: 1px solid var(--color-accent-primary);
  z-index: 5;
}

.product-card__img-container {
  aspect-ratio: 1 / 1;
  padding: var(--space-4);
  background-color: var(--color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  overflow: hidden;
  position: relative;
  transition: border-color var(--duration-base) var(--ease-default);
}

/* scanlines + RGB overlay on hover matching card--solution */
.product-card__img-container::after,
.gallery-card__img-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.3) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.05), 
    rgba(0, 255, 0, 0.02), 
    rgba(0, 0, 255, 0.05)
  );
  background-size: 100% 4px, 6px 100%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-default);
}

.product-card:hover .product-card__img-container::after,
.gallery-card:hover .gallery-card__img-wrapper::after {
  opacity: 0.3;
}

/* Glitch Slices Container positioning inside card */
.product-card .glitch-slices-container,
.gallery-card .glitch-slices-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.product-card .glitch-slices-container {
  background-size: 0 0 !important;
  background-repeat: no-repeat !important;
}

.product-card .product-card__img-container::after {
  display: none !important;
}

.product-card .product-image-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.3) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.05), 
    rgba(0, 255, 0, 0.02), 
    rgba(0, 0, 255, 0.05)
  );
  background-size: 100% 4px, 6px 100%;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-default);
  pointer-events: none;
}

.product-card:hover .product-image-bg::after {
  opacity: 0.3;
}

.product-card .glitch-slices-container::before,
.product-card .glitch-slices-container::after {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}



/* Inner Background div styling forced to fill */
.product-image-bg,
.gallery-image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: cover !important;
  background-position: center;
  transition: filter var(--duration-base) var(--ease-default);
}

.product-card .product-image-bg {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
}

/* Blue Shader applied ONLY to inner background child */
.product-card:hover .product-image-bg,
.gallery-card:hover .gallery-image-bg,
.card--service-detail:hover .product-image-bg {
  filter: sepia(1) saturate(3.5) hue-rotate(185deg) brightness(0.75) contrast(1.2) !important;
}

.product-card__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-2) var(--space-4) var(--space-6) var(--space-4);
  margin: 0;
  transition: color var(--duration-base) var(--ease-default);
  flex-grow: 1;
}

.product-card:hover .product-card__title {
  color: var(--color-accent-primary);
}

/* Gallery Card (used in Lavori Reali) */
.gallery-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  width: 100%;
}

.gallery-card__img-wrapper {
  aspect-ratio: 1 / 1;
  background-color: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: transform var(--duration-base) var(--ease-default);
}



.gallery-card__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-sm-lh);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  text-align: center;
  margin-top: var(--space-3);
  transition: color var(--duration-base) var(--ease-default);
}

.gallery-card:hover .gallery-card__title {
  color: var(--color-accent-primary);
}

/* Card with accent primary blue background
   HTML structure:
   <div class="card card--blue">
     ...
   </div>
*/
.card--blue {
  background-color: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary-light);
  color: var(--color-text-inverted) !important;
  padding: var(--space-8);
  border-radius: var(--radius-none);
}

.card--blue .overline {
  color: var(--color-accent-secondary) !important;
}

.card--blue h2,
.card--blue h3,
.card--blue h4,
.card--blue p,
.card--blue li,
.card--blue span {
  color: var(--color-text-inverted) !important;
}

.card--blue svg {
  color: var(--color-accent-secondary) !important;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.section--products-showcase {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.products-showcase-grid {
  align-items: start;
}

.products-showcase-text {
  position: sticky !important;
  top: 120px !important;
}

.products-showcase-text .overline {
  margin-bottom: var(--space-4) !important;
  display: inline-block !important;
}

.products-showcase-text p {
  margin-top: var(--space-5) !important;
  color: var(--color-text-secondary) !important;
  line-height: var(--text-base-lh) !important;
}

@media screen and (max-width: 767px) {
  .products-showcase-text {
    position: static !important;
  }
  
  .products-grid {
    margin-inline: calc(-1 * var(--container-padding)) !important;
    width: calc(100% + 2 * var(--container-padding)) !important;
    border-left: none !important;
    border-right: none !important;
  }
  
  .product-card__img-container {
    aspect-ratio: 1 / 1 !important;
    padding: var(--space-4) !important;
  }
  
  .product-card__img-container .glitch-slices-container,
  .product-card__img-container .product-image-bg {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ============================================================
   MOLECULE: SOLUTIONS CARD ("Le nostre soluzioni")
   ============================================================ */
/* Desktop layout for Le nostre soluzioni */
@media screen and (min-width: 768px) {
  .soluzioni-grid-custom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  .soluzione-card-item {
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    background-color: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
  }
  .soluzione-card-item:hover {
    border-color: var(--color-accent-primary) !important;
    box-shadow: var(--shadow-md);
    text-decoration: none !important;
  }
  .soluzione-card-item:hover .soluzione-card-item__title {
    color: var(--color-accent-primary) !important;
    text-decoration: underline !important;
  }
  .soluzione-card-item:hover .soluzione-card-item__desc {
    text-decoration: none !important;
  }
  .soluzione-card-item__title {
    transition: color var(--duration-fast) var(--ease-default);
  }
  .soluzione-card-item__main {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-base);
  }
  .soluzione-card-item__icon {
    color: var(--color-accent-primary);
    flex-shrink: 0;
  }
  .soluzione-card-item__chevron {
    display: none;
  }
  .soluzione-card-item__desc {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
  }
}

/* Mobile layout for Le nostre soluzioni (list row: icon + text + chevron, dividers, no border) */
@media screen and (max-width: 767px) {
  .soluzioni-grid-custom {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
  .soluzione-card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    text-decoration: none;
    color: var(--color-text-primary);
    background-color: transparent;
  }
  .soluzione-card-item:last-child {
    border-bottom: none !important;
  }
  .soluzione-card-item--grey {
    background-color: var(--color-bg-secondary) !important;
  }
  /* Remove border-bottom of the first grey card to prevent double lines */
  a.soluzione-card-item--grey:nth-last-child(2) {
    border-bottom: none !important;
  }
  /* Item 9 (I nostri servizi) top border is the white separator between the two */
  a.soluzione-card-item--grey:last-child {
    border-top: 1px solid #ffffff !important;
  }
  
  /* card--blue mobile padding alignment */
  .card--blue {
    padding: var(--space-6) !important;
  }
  .card--blue .grid--2 {
    gap: var(--space-6) !important;
  }
  .soluzione-card-item__main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-base);
  }
  .soluzione-card-item__icon {
    color: var(--color-accent-primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .soluzione-card-item__desc {
    display: none; /* Hide description on mobile */
  }
  .soluzione-card-item__chevron {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
    transition: transform var(--duration-fast) var(--ease-default);
  }
  .soluzione-card-item:hover .soluzione-card-item__chevron {
    transform: translateX(4px);
  }
}

/* === Imported from: ./molecules/_marquee.css === */
/* ============================================================
   MOLECULE: MARQUEE — ZETA TECNICA DESIGN SYSTEM
   Infinite scrolling brand/client logo strip.
   
   HTML structure:
   <div class="marquee">
     <div class="marquee__track">
       <div class="marquee__item"><img src="..." alt="..."></div>
       ...
       <!-- Duplicate items for seamless loop -->
       <div class="marquee__item"><img src="..." alt="..."></div>
     </div>
   </div>
   ============================================================ */

.marquee {
  --marquee-bg: var(--color-bg-primary);
  --marquee-speed: 30s;
  
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--space-4) 0;
  background-color: transparent;
}

.marquee--dark {
  --marquee-bg: var(--color-bg-dark);
}

/* Linear scroll animation */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}

/* Pause scroll on hover */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 195px;
  height: 112px;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  padding: var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-enter);
}

.marquee--dark .marquee__item {
  background-color: var(--color-bg-dark-card);
  border-color: var(--color-border-dark);
}

.marquee__item:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
}

.marquee__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Special / Highlighted Logo Variant (bordo blu per loghi in evidenza) */
.marquee__item--special {
  border-color: var(--color-accent-primary);
  border-width: 1.5px;
  box-shadow: 0 0 10px rgba(11, 66, 134, 0.12);
}

.marquee__item--special:hover {
  border-color: var(--color-accent-primary-hover);
  box-shadow: 0 0 16px rgba(11, 66, 134, 0.25);
}

/* Left & Right gradient masks to fade items out smoothly */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--marquee-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--marquee-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

/* For dark variant gradient masks */
.marquee--dark::before {
  background: linear-gradient(to right, var(--marquee-bg) 0%, rgba(23, 23, 23, 0) 100%);
}

.marquee--dark::after {
  background: linear-gradient(to left, var(--marquee-bg) 0%, rgba(23, 23, 23, 0) 100%);
}

/* ------------------------------------------------------------
   TEXT-BASED MARQUEE MODIFIER (e.g. Partnership Eccellenti)
   ------------------------------------------------------------ */
.marquee:has(span) {
  --marquee-speed: 90s !important;
}

.marquee__track:has(span) .marquee__item,
.marquee__item:has(span) {
  width: auto !important;
  height: 60px !important;
  padding-inline: var(--space-8) !important;
  white-space: nowrap !important;
  background-color: var(--color-bg-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-none) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.marquee__item span {
  transition: color var(--duration-fast) var(--ease-default);
}

.marquee__item:hover span {
  color: var(--color-accent-primary) !important;
}


/* === Imported from: ./molecules/_accordion.css === */
/* ============================================================
   MOLECULE: ACCORDION — ZETA TECNICA DESIGN SYSTEM
   Interactive accordion panels (used in FAQs).
   Inspired by the Qualytics reference style.
   ============================================================ */

/* Accordion Columns (wrapped containers for grid FAQ layout) */
.accordion-column {
  background-color: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.accordion-column .accordion__item {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: -1px;
}

.accordion-column .accordion__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.accordion-column .accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  transition: color var(--duration-fast) var(--ease-default);
}

.accordion-column .accordion__trigger:hover {
  color: var(--color-accent-primary);
}

.accordion-column .accordion__item--open .accordion__trigger {
  color: var(--color-accent-primary);
}

/* Accordion Icons (thin chevrons) */
.accordion-column .accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-text-primary);
  transition: transform var(--duration-medium) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.accordion-column .accordion__trigger:hover .accordion__icon {
  color: var(--color-accent-primary);
}

.accordion-column .accordion__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

/* Accordion Open State classes */
.accordion-column .accordion__item--open .accordion__icon {
  transform: rotate(-180deg);
  color: var(--color-accent-primary);
}

.accordion-column .accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-medium) var(--ease-exit);
}

.accordion-column .accordion__item--open .accordion__panel {
  max-height: 500px;
  transition: max-height var(--duration-medium) var(--ease-enter);
}

.accordion-column .accordion__content {
  padding: 0 0 var(--space-6) 0;
}

.accordion-column .accordion__content p {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
}

/* Default accordion fallback style if not in columns */
.accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
  width: 100%;
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  transition: color var(--duration-fast) var(--ease-default);
}

.accordion__trigger:hover {
  color: var(--color-accent-primary);
}

.accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-text-primary);
  transition: transform var(--duration-medium) var(--ease-bounce),
              color var(--duration-fast) var(--ease-default);
}

.accordion__trigger:hover .accordion__icon {
  color: var(--color-accent-primary);
}

.accordion__icon svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.accordion__item--open .accordion__icon {
  transform: rotate(135deg);
  color: var(--color-accent-primary);
}

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-medium) var(--ease-exit);
}

.accordion__item--open .accordion__panel {
  max-height: 500px;
  transition: max-height var(--duration-medium) var(--ease-enter);
}

.accordion__content {
  padding-bottom: var(--space-6);
}

.accordion__content p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}


/* === Imported from: ./molecules/_steps.css === */
/* Steps / How It Works Component
   Used for step-by-step scrolling layout
   Reference: qualytics.ai | Screenshot 2026-06-10 alle 14.20.31
*/

.steps-container {
  display: flex;
  flex-direction: column;
}

.step-item {
  padding: var(--space-12) 0;
  opacity: 0.35;
  transition: opacity var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default);
}

.step-item:first-child {
  padding-top: 0;
}

.step-item:last-child {
  padding-bottom: var(--space-20);
}

.step-item:not(:first-child) {
  border-top: 1px dashed var(--color-border);
}

.step-item--active {
  opacity: 1;
}

.step-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.step-dot {
  width: 10px;
  height: 10px;
  background-color: var(--color-border);
  border-radius: 50%;
  transition: background-color var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default);
}

.step-item--active .step-dot {
  background-color: var(--color-accent-secondary); /* active gold/orange dot */
  transform: scale(1.3);
  box-shadow: 0 0 8px var(--color-accent-secondary);
}

.step-number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  transition: color var(--duration-base) var(--ease-default);
}

.step-item--active .step-number {
  color: var(--color-accent-secondary);
}

.step-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  transition: color var(--duration-base) var(--ease-default);
}

.step-item--active .step-title {
  color: var(--color-accent-primary); /* highlight step title with brand blue */
}

.step-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--text-base-lh);
}

/* Responsive column divider inside `#chi-siamo` section grid */
@media screen and (max-width: 767px) {
  #chi-siamo .grid--2 {
    gap: var(--space-6);
  }
  #chi-siamo .step-item {
    padding-block: var(--space-6);
  }
  #chi-siamo .step-item:last-child {
    padding-bottom: var(--space-10);
  }
}

@media screen and (min-width: 768px) {
  #chi-siamo {
    padding-block: 0;
  }
  #chi-siamo .grid--2 {
    gap: 0;
  }
  #chi-siamo .grid--2 > div:first-child {
    padding-right: var(--space-12);
    padding-block: var(--space-24);
  }
  #chi-siamo .steps-container {
    border-left: 1px dashed var(--color-border);
    border-right: 1px dashed var(--color-border);
    padding-left: 0;
    padding-right: 0;
    padding-block: var(--space-24);
  }
  #chi-siamo .step-item {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }
}


/* === Imported from: ./molecules/_chips.css === */
/* Chips and Environment Selector Component
   Used for interactive environmental showcases
   Responsive single-markup layout using CSS Grid.
*/

.env-section-box {
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-none);
  overflow: hidden;
}

.env-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.env-info-panel {
  border-right: 1px solid var(--color-border);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Colonna, non riga: dal 2026-10-07 il pannello contiene l'immagine e sotto
   la riga .text-ai-disclaimer che la dichiara generata. `stretch` perche' la
   disclosure deve prendere tutta la larghezza del pannello e non centrarsi
   sulla propria misura. Era ripetuto inline su tutti e nove i pannelli del
   sito: spostarlo qui non cambia nulla a schermo. */
.env-visual-panel {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

/* Un'ambientazione che NON e' generata con IA si marca sul suo pannello con
   data-env-ai="no": finche' quel pannello e' quello visibile, la riga che
   dichiara l'IA sparisce, perche' per quell'immagine sarebbe falsa.
   Sparisce in opacita' e non in display, cosi' lo spazio resta occupato e il
   pannello non si accorcia mentre si cambia ambiente.
   Primo caso, 2026-10-12: capannoni di antifurto-perimetrale, render Ajax
   fornito dal cliente. Nessun altro pannello porta l'attributo, quindi
   nessun'altra pagina cambia. Vedi la regola sulle immagini IA in CLAUDE.md. */
.env-grid-container .text-ai-disclaimer {
  transition: opacity var(--duration-base) var(--ease-default);
}

.env-grid-container:has([data-env-panel][data-env-ai="no"]:not([hidden])) .text-ai-disclaimer {
  opacity: 0;
}

/* Environment Chips */
.env-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  list-style: none;
  padding: 0;
}

.chip {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-default);
}

.chip:not(.chip--active):hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.chip--active {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
  cursor: default;
}

.env-bodytext {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--text-base-lh);
  min-height: 100px; /* prevent layout jumping */
}

/* Image Container */
.env-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* square aspect ratio */
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.env-visual-content {
  width: 100%;
  height: 100%;
}

/* Navigation Buttons (Square box) */
.env-nav-btn {
  position: absolute;
  bottom: var(--space-4);
  width: 40px;
  height: 40px;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-default);
  z-index: 5;
}

.env-nav-btn--prev {
  left: var(--space-4);
}

.env-nav-btn--next {
  right: var(--space-4);
}

/* Button Status: Hover, Default, Active, Disabled */
.env-nav-btn:hover:not(:disabled) {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
  transform: translateY(-2px);
}

.env-nav-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.env-nav-btn:disabled {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Active Glitch and Blue Shader Transition Effect */
.glitch-active .env-visual-content {
  filter: sepia(1) saturate(3.5) hue-rotate(185deg) brightness(0.75) contrast(1.2) !important;
}

.glitch-active.env-image-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.3) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.05), 
    rgba(0, 255, 0, 0.02), 
    rgba(0, 0, 255, 0.05)
  );
  background-size: 100% 4px, 6px 100%;
  z-index: 10;
  pointer-events: none;
  opacity: var(--glitch-scanlines-opacity, 0.3);
}

/* Responsive Overrides (Mobile) */
@media screen and (max-width: 767px) {
  .env-section-box {
    border: none;
    background-color: transparent;
  }

  .env-grid-container {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
  }

  .env-info-panel {
    border-right: none;
    padding: 0;
    display: contents; /* allows children to participate in flex container */
  }

  .env-info-panel > .overline {
    order: -3 !important;
    margin-bottom: var(--space-2) !important;
    display: inline-block !important;
  }

  .env-info-panel > h2.env-main-title {
    order: -2 !important;
    margin-top: 0 !important;
    margin-bottom: var(--space-6) !important;
  }

  .env-visual-panel {
    padding: 0;
    order: -1 !important;
    margin-top: 0 !important;
    margin-bottom: var(--space-6) !important;
  }

  .env-chips {
    order: 0; /* Chips go third */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-3);
    padding: 0;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-5) !important;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    margin-right: calc(-1 * var(--container-padding));
    padding-right: var(--container-padding);
  }

  .env-chips::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari/Edge */
  }

  .env-chips .chip {
    flex: 0 0 auto;
  }

  .env-bodytext {
    order: 1; /* Description text goes fourth */
    min-height: auto;
    margin-top: 0 !important;
    margin-bottom: var(--space-6) !important;
  }

  .env-cta-group {
    order: 2; /* CTA buttons go last */
  }

  .env-image-container {
    padding: var(--space-5);
    background-color: #ffffff;
  }

  .env-nav-btn {
    bottom: var(--space-5);
  }

  .env-nav-btn--prev {
    left: var(--space-5);
  }

  .env-nav-btn--next {
    right: var(--space-5);
  }
}

/* ============================================================
   FORM CHIPS STYLING (Multi-select)
   ============================================================ */
.form-chips-group .chip--active {
  cursor: pointer;
}

.form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .form-chips {
    gap: var(--space-2);
  }
  .form-chips-group .chip {
    padding: var(--space-2) var(--space-3);
    font-size: 0.65rem;
  }
}


/* === Imported from: ./molecules/_carousel.css === */
/* ============================================================
   MOLECULE: CAROUSEL (Mobile Version for Brand Section) — ZETA TECNICA
   ============================================================ */

/* Mobile representation (under 768px) */
@media screen and (max-width: 767px) {
  .carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .carousel-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-6);
    padding-inline: var(--container-padding);
    padding-bottom: var(--space-6);
    scrollbar-width: none; /* Hide scrollbar Firefox */
  }

  .carousel-track::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari/Edge */
  }

  /* Each card in focus occupies 1.5 columns of the visible area (1 full slide and a half slide cropped) */
  .carousel-track .card--brand {
    flex: 0 0 calc((100% - (var(--space-6) * 0.5)) / 1.5);
    scroll-snap-align: start;
    min-width: 0; /* Prevent flex blowout */
  }

  /* Carousel status (status indicator for active slide) */
  .carousel-status {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .carousel-status__dot {
    width: 4px;
    height: 4px;
    border-radius: 0; /* square indicator */
    background-color: var(--color-neutral-300);
    transition: width var(--duration-base) var(--ease-default),
                background-color var(--duration-base) var(--ease-default);
    cursor: pointer;
  }

  .carousel-status__dot.active {
    width: 36px; /* longer active line */
    background-color: var(--color-accent-primary);
  }
}

/* Desktop representation (768px and up) */
@media screen and (min-width: 768px) {
  .carousel-container {
    width: 100%;
  }

  .carousel-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-6);
  }

  .carousel-status {
    display: none; /* Hide indicators on desktop */
  }
}


/* === Imported from: ./molecules/_review-card.css === */
/* ============================================================
   MOLECULE: REVIEW CARD — ZETA TECNICA DESIGN SYSTEM
   Review card component, variants (white, blue), skeletons
   and reviews navigation controls.
   ============================================================ */

/* Reviews Section — Carousel */
.reviews-carousel {
  position: relative;
}

.reviews-track {
  display: flex;
  gap: var(--space-6);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding-left: max(var(--space-6), calc((100vw - 1280px) / 2 + var(--space-6)));
  padding-right: max(var(--space-6), calc((100vw - 1280px) / 2 + var(--space-6)));
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}

/* Carousel Wrapper — bleeds to viewport right */
.reviews-carousel-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews-carousel-wrapper::-webkit-scrollbar {
  display: none;
}

/* Review Card */
.review-card {
  flex: 0 0 320px;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default);
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.review-card--white {
  background-color: var(--color-bg-primary);
}
.review-card--blue {
  background-color: var(--color-accent-primary);
}
.review-card--blue .review-card__line-skeleton {
  background-color: rgba(255, 255, 255, 0.15);
}
.review-card--blue .review-card__name-skeleton {
  background-color: rgba(255, 255, 255, 0.25);
}
.review-card--blue .review-card__date-skeleton {
  background-color: rgba(255, 255, 255, 0.12);
}
.review-card--blue .review-card__avatar {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

.review-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.review-card__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.review-card__name-skeleton {
  height: 12px;
  width: 120px;
  background-color: var(--color-border);
  border-radius: 2px;
}
.review-card__date-skeleton {
  height: 8px;
  width: 80px;
  background-color: var(--color-bg-secondary);
  border-radius: 2px;
}
.review-card__google {
  flex-shrink: 0;
  margin-left: auto;
  width: 24px;
  height: 24px;
}
.review-card__stars {
  display: flex;
  align-items: center;
}
.review-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.review-card__line-skeleton {
  height: 10px;
  background-color: var(--color-bg-secondary);
  border-radius: 2px;
}

/* Reviews Navigation */
.reviews-nav {
  display: flex;
  gap: 0;
  margin-left: auto;
}
.reviews-nav__btn {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  transition: all var(--duration-base) var(--ease-default);
}
.reviews-nav__btn:not(:first-child) {
  border-left: none;
}
.reviews-nav__btn:hover {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #ffffff;
  transform: translateY(-2px);
}
.reviews-nav__btn:active {
  transform: scale(0.95);
}
.reviews-nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  background-color: var(--color-bg-primary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* Reviews Header Row */
.reviews-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
  gap: var(--space-6);
}
.reviews-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}
.reviews-header-actions .btn {
  height: 46px;
  box-sizing: border-box;
}

/* Mobile responsive layout overrides */
@media screen and (max-width: 767px) {
  .review-card {
    flex: 0 0 280px;
    padding: var(--space-6);
  }
  .reviews-track {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .reviews-header-row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--space-6);
  }
  .reviews-header-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .reviews-mobile-actions-container {
    display: block !important;
    margin-top: var(--space-6);
    margin-bottom: var(--space-10);
  }
}


/* === Imported from: ./molecules/_video.css === */
/* ============================================================
   MOLECULE: VIDEO PLAYER — ZETA TECNICA DESIGN SYSTEM
   Cornice 16:9 per un video YouTube incorporato.

   Markup canonico — vale su ogni pagina, non va variato:

   <div class="video-player">
     <iframe class="video-player__media"
             src="https://www.youtube-nocookie.com/embed/<ID>?enablejsapi=1"
             title="<titolo del video>"
             loading="lazy" frameborder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             referrerpolicy="strict-origin-when-cross-origin"
             allowfullscreen></iframe>
     <div class="video-player__scanlines"></div>
   </div>

   Tre vincoli, tutti con un motivo:
   - dominio `youtube-nocookie.com`: nessun cookie di tracciamento finché
     l'utente non preme play;
   - `?enablejsapi=1`: senza, `initVideoEmbed()` in `js/video-embed.js` non
     riceve lo stato del player e le scanline restano sopra il video;
   - i controlli sono quelli di YouTube. La vecchia barra custom girava su un
     `<video>` locale e su uno script inline per pagina: rimossa il 2026-10-02
     insieme ai suoi stili, perché non aveva né sorgente né JS dietro.

   L'embed richiede un'origine `http(s)`: aperto da `file://` YouTube risponde
   «Errore 153».
   ============================================================ */

.video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.video-player__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

/* Scanline: danno carattere al fermo immagine. `pointer-events: none` perché
   stanno sopra l'iframe e non devono rubargli i click. */
.video-player__scanlines {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.3;
  transition: opacity var(--duration-base) var(--ease-default);
}

/* Durante la riproduzione spariscono: la classe la mette e la toglie
   `initVideoEmbed()` ascoltando lo stato del player YouTube. */
.video-player--playing .video-player__scanlines {
  opacity: 0;
}

/* === Imported from: ./molecules/_form-feedback.css === */
/* ============================================================
   FORM FEEDBACK — ZETA TECNICA DESIGN SYSTEM
   Stato di ritorno dopo l'invio del modulo contatti.

   PROTOTIPO — 2026-10-07. Montato solo in style-guide.html.
   Non è ancora in contatti.html, e non deve andarci finché il
   modulo non invia davvero: oggi js/contact-form.js fa
   e.preventDefault() e un alert(), quindi lo stato «inviata»
   affermerebbe una cosa falsa.

   Due stati, con un'asimmetria voluta:
   - .form-feedback             successo: SOSTITUISCE il form, che viene azzerato.
   - .form-feedback--error      errore: RESTA dentro il form, sopra il bottone,
                                e i dati digitati non si toccano.

   Contrasto: --color-status-success (#20E28B) su fondo chiaro sta
   sotto 2:1, quindi non tinge mai testo né tratti sottili — fa solo
   da fondo pieno alla targa dell'icona, con l'icona scura sopra.
   --color-status-error tinge bordo e icona, non il testo del corpo.
   ============================================================ */

.form-feedback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-8);
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-status-success);
}

/* Il focus ci arriva via .focus() da JS, perché chi usa tastiera o screen
   reader deve atterrare qui. Ma l'anello serve solo a chi naviga da tastiera:
   dopo un invio col mouse è solo rumore. */
.form-feedback:focus {
  outline: none;
}

.form-feedback:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.form-feedback__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  flex-shrink: 0;
  background-color: var(--color-status-success);
  color: var(--color-text-primary);
}

.form-feedback__icon svg {
  width: var(--space-6);
  height: var(--space-6);
}

.form-feedback__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--text-2xl-lh);
  color: var(--color-text-primary);
  margin: 0;
}

.form-feedback__text {
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  color: var(--color-text-secondary);
  margin: 0;
}

/* --- Riepilogo: rilegge all'utente quello che ha scritto.
       L'email ristampata è il punto: un typo lì è l'errore più
       costoso del modulo, e questo è l'unico momento in cui
       qualcuno può ancora accorgersene. --- */

.form-feedback__recap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
}

.form-feedback__recap-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-feedback__recap-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.form-feedback__recap-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  word-break: break-all;
}

/* Chip di sola lettura: riusa .chip senza toccarne il file.
   Niente hover, niente cursore a mano — non sono più cliccabili. */
.form-feedback__recap .chip {
  cursor: default;
  pointer-events: none;
}

.form-feedback__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.form-feedback__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

/* .btn--green-primary porta un margin-top suo per l'uso in colonna
   di contatti.html; qui la spaziatura la fa già il gap. */
.form-feedback__actions .btn--green-primary {
  margin-top: 0;
}

/* .btn--link da solo è testo mono senza affordance: in mezzo a una card
   nessuno capisce che si può cliccare. Qui la sottolineatura è l'unico
   segnale che resta, e non si toglie nemmeno su hover. */
.form-feedback__actions .btn--link {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- Stato di errore: compatto, orizzontale, dentro il form --- */

.form-feedback--error {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  border-left: 3px solid var(--color-status-error);
}

.form-feedback--error .form-feedback__icon {
  width: var(--space-6);
  height: var(--space-6);
  background-color: transparent;
  color: var(--color-status-error);
  margin-top: 2px;
}

.form-feedback--error .form-feedback__icon svg {
  width: var(--space-6);
  height: var(--space-6);
}

.form-feedback--error .form-feedback__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-feedback--error .form-feedback__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-base-lh);
}

.form-feedback--error .form-feedback__text {
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

/* .link-inherit porta text-decoration: none, giusto dove il contesto dice
   gia' che e' un link. Qui no: sono le due vie di scampo di chi ha appena
   visto fallire l'invio, in mezzo a una frase, e devono sembrare cliccabili.
   La specificita' basta a vincere su .link-inherit senza !important. */
.form-feedback--error .form-feedback__text a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.form-feedback--error .form-feedback__text a:hover {
  color: var(--color-accent-primary);
}

/* --- Entrata --- */

@keyframes form-feedback-in {
  from { opacity: 0; transform: translateY(var(--space-4)); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-feedback {
  animation: form-feedback-in var(--duration-medium) var(--ease-enter) both;
}

@media (prefers-reduced-motion: reduce) {
  .form-feedback {
    animation: none;
  }
}

/* === Imported from: ./organisms/_grid.css === */
/* ============================================================
   ORGANISM: GRID SYSTEM — ZETA TECNICA DESIGN SYSTEM
   Container variants, CSS Grid system, gap utilities,
   and responsive column layouts.
   
   BREAKPOINTS:
   --bp-sm:   480px   (mobile landscape)
   --bp-md:   768px   (tablet portrait)
   --bp-lg:   1024px  (tablet landscape / small desktop)
   --bp-xl:   1280px  (desktop — matches container max)
   --bp-2xl:  1440px  (wide desktop)
   ============================================================ */


/* --- Container variants --- */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container--wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container--fluid {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}


/* --- CSS Grid base --- */

.grid {
  display: grid;
  gap: var(--space-6);
}


/* --- Fixed column grids with responsive fallbacks --- */

/* 2 columns: 2 on desktop/tablet, 1 on mobile */
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 767px) {
  .grid--2 {
    grid-template-columns: 1fr;
  }
}

/* 3 columns: 3 on desktop, 2 on tablet, 1 on mobile */
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 1023px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* 4 columns: 4 on desktop, 2 on tablet, 1 on mobile */
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 1023px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Auto-fill: fills columns of min 300px */
.grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media screen and (max-width: 767px) {
  .grid--auto-fill {
    grid-template-columns: 1fr;
  }
}

/* Auto-fit: fits columns of min 280px */
.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}


/* --- Gap utilities --- */

.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }


/* --- Flex utilities --- */

.flex {
  display: flex;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--col {
  flex-direction: column;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  align-items: center;
  justify-content: space-between;
}

.flex--start {
  align-items: flex-start;
}

.flex--end {
  align-items: flex-end;
  justify-content: flex-end;
}


/* --- Responsive container padding --- */

@media screen and (max-width: 1023px) {
  .container,
  .container--narrow,
  .container--wide,
  .container--fluid {
    --container-padding: 1.25rem;  /* 20px on tablet */
  }
}

@media screen and (max-width: 479px) {
  .container,
  .container--narrow,
  .container--wide,
  .container--fluid {
    --container-padding: 1rem;  /* 16px on mobile */
  }
}

/* --- Blocchi testo/immagine alternati --- */

/* Su desktop l'alternanza immagine-sx / immagine-dx la regge l'ordine del
   markup. Sotto i 768 px le colonne si impilano e quell'ordine farebbe
   comparire l'immagine ora sopra ora sotto il testo: con .grid--media-first
   la colonna .grid__media sale sempre per prima. */
@media screen and (max-width: 767px) {
  .grid--media-first > .grid__media {
    order: -1;
  }
}


/* === Imported from: ./organisms/_sections.css === */
/* ============================================================
   ORGANISM: SECTIONS — ZETA TECNICA DESIGN SYSTEM
   Section layout patterns and dark mode section.
   ============================================================ */

.section {
  padding-block: var(--section-gap);
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverted);
}

.section--dark p {
  color: var(--color-text-inverted-muted);
}

@media screen and (max-width: 767px) {
  .servizi-cards-container {
    padding: var(--space-5) !important;
  }
}

/* Impianti di Allarme Section Parallax Background */
#impianti-allarme-bg {
  background-image: url('../asset/hero/zt-impianti-allarme.webp');
}

@media screen and (max-width: 767px) {
  #impianti-allarme-bg {
    background-image: url('../asset/hero/zt-impianti-allarme-mobile.webp');
  }
}


/* === Imported from: ./organisms/_document-band.css === */
/* ============================================================
   ORGANISM: DOCUMENT BAND — ZETA TECNICA DESIGN SYSTEM
   Fascia a tutta larghezza per un documento scaricabile.
   Stesso impianto di #ambienti-sezione: separatori orizzontali
   sui bordi della sezione, cornici verticali sul box interno.
   L'intero box e' il link (regola 11 di convenzioni-tecniche.md
   §10): il tag <a> e' il contenitore.

   HTML structure:
   <section class="section document-band">
     <div class="container">
       <a href="...pdf" target="_blank" rel="noopener noreferrer"
          class="document-band__box">
         <div class="document-band__body">
           <span class="overline overline--accent overline--dot">Attestati</span>
           <h2 class="document-band__title">Titolo</h2>
           <p class="document-band__desc">Descrizione</p>
         </div>
         <span class="document-band__icon" aria-hidden="true"><svg>...</svg></span>
       </a>
     </div>
   </section>
   ============================================================ */

.document-band {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
}

.document-band__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-8);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-default);
}

.document-band__box:hover {
  border-color: var(--color-accent-primary);
  text-decoration: none;
}

.document-band__body {
  min-width: 0;
}

.document-band__body .overline {
  display: inline-block;
  margin-bottom: var(--space-4);
}

.document-band__title {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-lh);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
  transition: color var(--duration-fast) var(--ease-default);
}

.document-band__box:hover .document-band__title {
  color: var(--color-accent-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.document-band__desc {
  font-size: var(--text-sm);
  line-height: var(--text-base-lh);
  color: var(--color-text-secondary);
  margin-bottom: 0;
  max-width: 60ch;
}

.document-band__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
  color: var(--color-accent-primary);
  transition: background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}

.document-band__box:hover .document-band__icon {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
}

.document-band__icon svg {
  width: 2rem;
  height: 2rem;
}

/* Sopra i 768 px il box tocca i due separatori, come #ambienti-sezione:
   le cornici verticali collegano la riga sopra a quella sotto. */
@media screen and (min-width: 768px) {
  .document-band {
    padding-block: 0;
  }
}

@media screen and (max-width: 767px) {
  .document-band__box {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-6);
  }
}

/* === Imported from: ./organisms/_navigation.css === */
/* ============================================================
   ORGANISM: NAVIGATION & HEADER — ZETA TECNICA
   Sticky desktop header, mega menu, mobile slider menu,
   hamburger animation, and actions overrides.
   ============================================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default),
              backdrop-filter var(--duration-base) var(--ease-default),
              -webkit-backdrop-filter var(--duration-base) var(--ease-default);
}

.header--transparent {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}

/* Transparent header styles specifically for pages with dark hero backgrounds (chi-siamo, servizi, impianti-allarme) */
:is(.page-chi-siamo, .page-servizi, .page-impianti-allarme) .header--transparent:not(:has(.nav__item--has-mega:hover)):not(:has(.nav--open)) .nav__link {
  color: #ffffff !important;
}
:is(.page-chi-siamo, .page-servizi, .page-impianti-allarme) .header--transparent:not(:has(.nav__item--has-mega:hover)):not(:has(.nav--open)) .nav__link svg {
  stroke: #ffffff !important;
}
:is(.page-chi-siamo, .page-servizi, .page-impianti-allarme) .header--transparent:not(:has(.nav__item--has-mega:hover)):not(:has(.nav--open)) .nav-toggle line {
  stroke: #ffffff !important;
}
:is(.page-chi-siamo, .page-servizi, .page-impianti-allarme) .header--transparent:not(:has(.nav__item--has-mega:hover)):not(:has(.nav--open)) .logo__img {
  filter: brightness(0) invert(1);
}
:is(.page-chi-siamo, .page-servizi, .page-impianti-allarme) .header--transparent:not(:has(.nav__item--has-mega:hover)):not(:has(.nav--open)) .nav__link:hover {
  color: var(--color-accent-secondary) !important;
}
:is(.page-chi-siamo, .page-servizi, .page-impianti-allarme) .header--transparent:not(:has(.nav__item--has-mega:hover)):not(:has(.nav--open)) .nav__link:hover svg {
  stroke: var(--color-accent-secondary) !important;
}

/* Explicit overrides for light hero pages (soluzioni, contatti) to ALWAYS keep dark header elements on transparent header */
:is(.page-soluzioni, .page-contatti) .header--transparent:not(:has(.nav__item--has-mega:hover)) .nav__link {
  color: var(--color-text-primary) !important;
}
:is(.page-soluzioni, .page-contatti) .header--transparent .logo__img {
  filter: none !important;
}
:is(.page-soluzioni, .page-contatti) .header--transparent .nav-toggle {
  color: var(--color-text-primary) !important;
}
:is(.page-soluzioni, .page-contatti) .header--transparent .nav-toggle line {
  stroke: var(--color-text-primary) !important;
}

/* Force background color on transparent header when megamenu is active/hovered */
.header--transparent:has(.nav__item--has-mega:hover) {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  transition: height var(--duration-base) var(--ease-default);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-decoration: none;
}

.logo__dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-accent-primary);
  border-radius: var(--radius-full);
}

.logo__img {
  height: 60px;
  width: auto;
  display: block;
  transition: height var(--duration-base) var(--ease-default),
              filter var(--duration-base) var(--ease-default);
}

@media screen and (min-width: 1024px) {
  .header--transparent .header__container {
    height: 100px;
  }

  .header--transparent .logo__img {
    height: 80px;
  }
}

/* Nav Menu */
.nav {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: var(--space-6);
  height: 100%;
}

.nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-2) 0;
  transition: color var(--duration-fast) var(--ease-default);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-accent-primary);
}

@media screen and (min-width: 1024px) {
  .nav__link:hover,
  .nav__link--active {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

.nav__link svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--duration-fast) var(--ease-default);
}

.nav__item:hover .nav__link svg {
  transform: translateY(2px);
}

/* Dropdown Menu (Desktop) */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  min-width: 260px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-default),
              visibility var(--duration-base);
  list-style: none;
  padding: var(--space-3) 0;
  z-index: 100;
}

.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown-item {
  width: 100%;
}

.nav__dropdown-link {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.nav__dropdown-link:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-accent-primary);
}

/* Header Actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header__actions .btn {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn--phone {
  background-color: transparent;
  color: var(--color-accent-secondary);
  border: 1px solid var(--color-accent-secondary);
}

.btn--phone:hover {
  background-color: var(--color-accent-secondary);
  color: var(--color-text-primary);
}

.header__actions-mobile {
  display: none;
}

/* Mobile Menu Toggle button */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  color: var(--color-text-primary);
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Burger to X Animation */
.nav-toggle line {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
  transform-box: fill-box;
}

.nav-toggle--open line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle--open line:nth-child(2) {
  opacity: 0;
}

.nav-toggle--open line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Chevron overrides for Soluzioni trigger */
.chevron--mobile {
  display: none !important;
}

@media screen and (max-width: 1023px) {
  .chevron--desktop {
    display: none !important;
  }
  .chevron--mobile {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: auto;
    stroke: currentColor;
  }

  .logo-white-mobile {
    filter: brightness(0) invert(1);
    transition: filter var(--duration-base) var(--ease-default);
  }
  .logo__img {
    height: 42px;
  }
}

/* Responsive navigation styles */
@media screen and (max-width: 1023px) {
  :is(.page-home, .page-chi-siamo, .page-servizi, .page-impianti-allarme) .header--transparent:not(:has(.nav--open)) .logo__img {
    filter: brightness(0) invert(1) !important;
    transition: filter var(--duration-base) var(--ease-default);
  }

  :is(.page-home, .page-chi-siamo, .page-servizi, .page-impianti-allarme) .header--transparent:not(:has(.nav--open)) .nav-toggle {
    color: var(--color-text-inverted) !important;
    transition: color var(--duration-base) var(--ease-default);
  }

  .header:has(.nav--open) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--color-bg-primary) !important;
  }

  .nav-toggle {
    display: block !important;
  }
  
  .nav {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-primary);
    border-top: 1px solid var(--color-border);
    padding: 0 !important;
    display: none;
    overflow: hidden !important;
    z-index: 999;
  }
  
  .nav--open {
    display: block !important;
  }

  /* Mobile Multi-step Submenu Slider */
  .nav__slider {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform var(--duration-base) var(--ease-default);
  }

  .nav__slider--submenu-active {
    transform: translateX(-50%);
  }

  .nav__panel {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    padding: var(--space-6) var(--space-4);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  
  .nav__list {
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    gap: var(--space-4);
    height: auto;
  }
  
  .nav__item {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  
  .nav__link {
    width: 100%;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
  }
  
  .nav__item:hover .nav__link svg {
    transform: none;
  }
  
  .nav__link svg {
    margin-left: auto;
  }
  
  .nav__dropdown--desktop-only {
    display: none !important;
  }

  /* Mobile CTA spacing */
  .nav__mobile-cta {
    margin-top: var(--space-10);
    width: 100%;
  }
  .nav__mobile-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Submenu Back Button */
  .nav__back-btn {
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: var(--space-6);
    transition: color var(--duration-fast);
    text-align: left;
  }
  .nav__back-btn:hover {
    color: var(--color-accent-primary);
  }

  /* Submenu list */
  .nav__list-submenu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0;
    margin: 0;
  }
  .nav__link-submenu {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--space-2) 0;
    transition: color var(--duration-fast);
  }
  .nav__link-submenu:hover,
  .nav__link-submenu--active {
    color: var(--color-accent-primary);
  }
  
  .header__actions {
    display: none;
  }

  .header__actions-mobile {
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    margin-right: var(--space-3);
  }
  .header__actions-mobile .btn {
    height: 40px;
    width: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Mega Dropdown Desktop Styles --- */
@media screen and (min-width: 1024px) {
  .nav__slider {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
  }

  .nav__panel--main {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
  }

  .nav__panel--submenu {
    display: none !important;
  }

  .nav__mobile-cta {
    display: none !important;
  }

  .nav__item--has-mega {
    position: static !important;
  }

  .nav__dropdown--mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    padding: var(--space-8) 0;
    z-index: 100;
    transform: translateY(10px);
    transition: opacity var(--duration-base) var(--ease-default),
                transform var(--duration-base) var(--ease-default),
                visibility var(--duration-base);
  }

  .nav__item--has-mega:hover .nav__dropdown--mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__mega-container {
    display: block;
  }

  .nav__mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--space-5) var(--space-6);
  }

  .nav__mega-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    padding: var(--space-5);
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-base) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
    text-decoration: none;
  }

  .nav__mega-item:hover {
    border-color: var(--color-accent-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none !important;
  }

  /* Pagina soluzione in corso di lettura: bordo accento, senza sollevamento */
  .nav__mega-item--active {
    border-color: var(--color-accent-primary);
    box-shadow: inset 0 0 0 1px var(--color-accent-primary);
    background-color: var(--color-accent-primary-subtle);
  }

  .nav__mega-item--active:hover {
    transform: none;
  }

  .nav__mega-title {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .nav__mega-item:hover .nav__mega-title {
    color: var(--color-accent-primary);
    text-decoration: underline;
  }

  .nav__mega-item--active .nav__mega-title {
    color: var(--color-accent-primary);
  }

  .nav__mega-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--text-xs-lh);
  }
}


/* === Imported from: ./organisms/_horizontal-scroll.css === */
/* Horizontal Scroll Layout Component
   Used for pinning product solutions on desktop and scrolling them horizontally
   Reference: qualytics.ai
*/

@media screen and (min-width: 768px) {
  .horizontal-scroll-container {
    position: relative;
    /* Height controls how long the vertical scroll stays pinned to translate the track */
    height: 350vh; 
  }

  .horizontal-scroll-container .sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-bg-primary); /* background primary */
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    z-index: 1; /* stack behind subsequent sections */
  }

  .horizontal-scroll-container .horizontal-slider {
    width: 100%;
    overflow: hidden;
    padding-block: var(--space-6);
  }

  .horizontal-scroll-container .horizontal-track {
    display: flex;
    gap: var(--space-8);
    padding-inline: calc((100vw - var(--container-max)) / 2 + var(--container-padding)); /* align first card with standard container margin */
    will-change: transform;
    width: max-content;
  }
}

/* Fallback for when the viewport is wider than standard container max to prevent misalignment */
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .horizontal-scroll-container .horizontal-track {
    padding-inline: var(--container-padding);
  }
}

/* Mobile Representation (under 768px) */
@media screen and (max-width: 767px) {
  .horizontal-scroll-container {
    padding-block: var(--section-gap);
    background-color: var(--color-bg-primary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .horizontal-scroll-container .sticky-wrapper {
    position: relative;
    height: auto;
  }

  .horizontal-scroll-container .horizontal-slider {
    padding-inline: var(--container-padding);
  }

  .horizontal-scroll-container .horizontal-track {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .horizontal-scroll-container .card--solution {
    max-width: 100%; /* full width on mobile devices */
  }
}

/* ============================================================
   Variante «galleria» — .horizontal-scroll-container--gallery
   Un solo markup per desktop e mobile, come chiede la regola 4 della §10 di
   convenzioni-tecniche.md. Sopra i 768 px la sezione va in pin e la track
   scorre in orizzontale con la didascalia sotto ogni card; sotto i 768 px la
   stessa track diventa un carosello con scroll-snap, le didascalie delle card
   spariscono e il testo passa alla riga unica .gallery-nav-row, aggiornata da
   js/gallery-carousel.js.
   Markup di riferimento: style-guide.html, sezione «Gallery lavori reali».
   ============================================================ */

.gallery-header {
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  padding-inline: var(--container-padding);
  text-align: center;
}

.gallery-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-8);
  padding-inline: var(--container-padding);
}

/* Didascalia unica del carosello: due righe al massimo, poi ellissi.
   Il limite di 38 caratteri per le didascalie nasce da qui. */
.gallery-caption {
  flex-grow: 1;
  margin-right: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* I bottoni di navigazione vincono su .btn per posizione nella cascata:
   questo file viene dopo atoms/_buttons.css e la specificità è la stessa. */
.gallery-nav__btn {
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  transition: all var(--duration-base) var(--ease-default);
  cursor: pointer;
}

.gallery-nav__btn:not(:first-of-type) {
  border-left: none;
}

.gallery-nav__btn:hover {
  background-color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
  transform: translateY(-2px);
}

.gallery-nav__btn:active {
  transform: scale(0.95);
}

.gallery-nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  background-color: var(--color-bg-primary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.gallery-nav__btn svg {
  width: 20px;
  height: 20px;
}

@media screen and (min-width: 768px) {
  .horizontal-scroll-container--gallery .gallery-card {
    width: 350px;
    flex-shrink: 0;
    margin-right: var(--space-8);
  }

  /* Su desktop la didascalia sta sotto ogni card: la riga unica non serve */
  .horizontal-scroll-container--gallery .gallery-nav-row {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .horizontal-scroll-container--gallery .gallery-header {
    margin-inline: 0;
    text-align: left;
  }

  .horizontal-scroll-container--gallery .horizontal-slider {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .horizontal-scroll-container--gallery .horizontal-slider::-webkit-scrollbar {
    display: none;
  }

  .horizontal-scroll-container--gallery .horizontal-track {
    flex-direction: row;
    gap: var(--space-4);
  }

  .horizontal-scroll-container--gallery .gallery-card {
    scroll-snap-align: start;
    flex: 0 0 85%;
    max-width: 320px;
  }

  .horizontal-scroll-container--gallery .gallery-card__title {
    display: none;
  }

  .horizontal-scroll-container--gallery .gallery-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-inline: var(--container-padding);
  }

  .horizontal-scroll-container--gallery .gallery-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* === Imported from: ./organisms/_timeline-scroll.css === */
/* =============================================================
   Timeline Scroll Component
   Desktop: Immersive horizontal scroll timeline with sticky pin,
            background transitions, and glitch effects.
   Mobile:  Vertical scroll timeline with 100vh sticky pin.
            Phase 1: Header slides up & fades out while timeline stays fixed at 45vh.
            Phase 2: Timeline scrolls vertically; line starts at first dot center and extends to bottom edge.
   Rule:    Dot opacity in dark theme = 100% (Desktop & Mobile).
            Distance from last block to bottom of section = --space-20 (same as block gap).
   ============================================================= */

/* ---- Background Slides Layer ---- */
.timeline-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.timeline-bg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 800ms var(--ease-default);
  background-size: cover;
  background-position: center;
  filter: sepia(1) saturate(3.5) hue-rotate(185deg) brightness(0.45) contrast(1.15);
}

.timeline-dark-mode .timeline-bg-slide--active {
  opacity: 1;
}

/* Historical Photos for Timeline Slides (Desktop & Mobile) */
.timeline-bg-slide--mimmo-cliente {
  background-image: url('../asset/chi-siamo/timeline/zeta-tecnica-chi-siamo-mimmo-cliente.png');
}

.timeline-bg-slide--mimmo-1980 {
  background-image: url('../asset/chi-siamo/timeline/zeta-tecnica-chi-siamo-mimmo-1980.png');
}

@media screen and (max-width: 767px) {
  .timeline-bg-slide--mimmo-cliente {
    background-image: url('../asset/chi-siamo/timeline/zeta-tecnica-chi-siamo-mimmo-cliente-mobile.png');
  }

  .timeline-bg-slide--mimmo-1980 {
    background-image: url('../asset/chi-siamo/timeline/zeta-tecnica-chi-siamo-mimmo-1980-mobile.png');
  }
}

.timeline-bg-slide::before,
.timeline-bg-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  filter: inherit;
  opacity: 0;
  pointer-events: none;
}

.timeline-glitch-active .timeline-bg-slide--active::before {
  opacity: 0.85;
  animation: glitch-slice-1 0.2s infinite linear alternate-reverse;
}

.timeline-glitch-active .timeline-bg-slide--after {
  opacity: 0.85;
  animation: glitch-slice-2 0.2s infinite linear alternate-reverse;
}

.timeline-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.4) 35%,
    rgba(0, 0, 0, 0.35) 65%,
    rgba(0, 0, 0, 0.65) 100%
  );
  z-index: 1;
  opacity: 0;
  transition: opacity 600ms var(--ease-default);
}

.timeline-dark-mode .timeline-overlay {
  opacity: 1;
}

.timeline-scroll-container .sticky-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.15) 50%
  ), linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.02),
    rgba(0, 255, 0, 0.01),
    rgba(0, 0, 255, 0.02)
  );
  background-size: 100% 4px, 6px 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-default);
}

.timeline-dark-mode .sticky-wrapper::after {
  opacity: 0.4;
}

@media screen and (min-width: 768px) {
  .timeline-scroll-container {
    position: relative;
    height: 500vh;
  }

  .timeline-scroll-container .sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-bg-primary);
    transition: background-color 600ms var(--ease-default);
  }

  .timeline-dark-mode .sticky-wrapper {
    background-color: #0b131e;
  }

  .timeline-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    pointer-events: none;
  }

  .timeline-header {
    text-align: center;
    padding: calc(80px + var(--space-16)) var(--container-padding) 0;
    flex-shrink: 0;
  }

  @media screen and (min-width: 1024px) {
    .timeline-header {
      padding-top: calc(100px + var(--space-16));
    }
  }

  .timeline-header .overline--accent {
    color: var(--color-accent-primary);
    transition: color 600ms var(--ease-default);
  }

  .timeline-header .overline--dot::before {
    background-color: var(--color-accent-primary);
    transition: background-color 600ms var(--ease-default);
  }

  .timeline-dark-mode .timeline-header .overline--accent {
    color: var(--color-accent-secondary);
  }

  .timeline-dark-mode .timeline-header .overline--dot::before {
    background-color: var(--color-accent-secondary);
  }

  .timeline-header h2 {
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
    transition: color 600ms var(--ease-default);
  }

  .timeline-dark-mode .timeline-header h2 {
    color: #ffffff;
  }

  .timeline-header .timeline-subtitle {
    color: var(--color-text-primary);
    font-size: var(--text-base);
    line-height: var(--text-base-lh);
    max-width: 640px;
    margin-inline: auto;
    transition: color 600ms var(--ease-default);
  }

  .timeline-dark-mode .timeline-header .timeline-subtitle {
    color: rgba(255, 255, 255, 0.7);
  }

  .timeline-track-area {
    display: flex;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
  }

  .timeline-track-area::before {
    display: none;
  }

  .timeline-track {
    display: flex;
    align-items: stretch;
    will-change: transform;
    width: max-content;
    padding-left: calc(50vw - 450px);
    padding-right: calc(50vw - 450px);
    position: relative;
    z-index: 1;
  }

  .timeline-track::before {
    content: '';
    position: absolute;
    left: 50vw;
    right: -200vw;
    top: calc(4rem + var(--space-6) + 7px);
    height: 1px;
    background: var(--color-border);
    transition: background-color 600ms var(--ease-default);
    z-index: 0;
  }

  .timeline-dark-mode .timeline-track::before {
    background: rgba(255, 255, 255, 0.2);
  }

  .timeline-milestone {
    display: grid;
    grid-template-rows: 4rem auto auto 1fr;
    justify-items: center;
    align-content: start;
    min-width: 900px;
    padding-inline: var(--space-24);
    position: relative;
    z-index: 1;
  }

  .timeline-milestone__year,
  .timeline-milestone__title,
  .timeline-milestone__desc {
    transition: opacity 500ms var(--ease-default), color 600ms var(--ease-default);
    opacity: 0.15;
  }

  .timeline-milestone--active .timeline-milestone__year,
  .timeline-milestone--active .timeline-milestone__title,
  .timeline-milestone--active .timeline-milestone__desc {
    opacity: 1;
  }

  .timeline-milestone__year {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    line-height: 1;
    white-space: nowrap;
    display: flex;
    align-items: flex-end;
  }

  .timeline-dark-mode .timeline-milestone__year {
    color: #ffffff;
  }

  .timeline-milestone__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-accent-primary);
    border: none;
    margin-top: var(--space-6);
    opacity: 1 !important;
    transition: transform 400ms var(--ease-default),
                background-color 600ms var(--ease-default),
                border-color 600ms var(--ease-default),
                box-shadow 600ms var(--ease-default);
  }

  .timeline-dark-mode .timeline-milestone__dot {
    opacity: 1 !important;
    background-color: var(--color-accent-secondary);
    border: 2px solid #ffffff;
  }

  .timeline-milestone--active .timeline-milestone__dot {
    transform: scale(1.5);
    background-color: var(--color-accent-primary);
    border: none;
    box-shadow: 0 0 16px rgba(15, 76, 129, 0.35);
  }

  .timeline-dark-mode .timeline-milestone--active .timeline-milestone__dot {
    background-color: var(--color-accent-secondary);
    border: 2px solid #ffffff;
    box-shadow: 0 0 20px rgba(196, 167, 103, 0.5);
  }

  .timeline-milestone__title {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    color: var(--color-accent-primary);
    letter-spacing: var(--tracking-wider);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-6);
  }

  .timeline-dark-mode .timeline-milestone__title {
    color: #ffffff;
  }

  .timeline-milestone__desc {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
    text-align: center;
    max-width: 420px;
    line-height: var(--text-base-lh);
    margin-top: var(--space-2);
    align-self: start;
  }

  .timeline-dark-mode .timeline-milestone__desc {
    color: rgba(255, 255, 255, 0.7);
  }

  .timeline-dark-mode .timeline-milestone--active .timeline-milestone__desc {
    color: #ffffff;
  }
}

@media screen and (max-width: 767px) {
  .timeline-scroll-container {
    position: relative;
    height: 400vh;
  }

  .timeline-scroll-container .sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: block;
    overflow: hidden;
    background-color: var(--color-bg-primary);
    transition: background-color 600ms var(--ease-default);
  }

  .timeline-dark-mode .sticky-wrapper {
    background-color: #0b131e;
  }

  .timeline-content {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  .timeline-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: calc(70px + var(--space-4)) var(--container-padding) 0;
    z-index: 3;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .timeline-header .overline--accent {
    color: var(--color-accent-primary);
    transition: color 600ms var(--ease-default);
  }

  .timeline-header .overline--dot::before {
    background-color: var(--color-accent-primary);
    transition: background-color 600ms var(--ease-default);
  }

  .timeline-dark-mode .timeline-header .overline--accent {
    color: var(--color-accent-secondary);
  }

  .timeline-dark-mode .timeline-header .overline--dot::before {
    background-color: var(--color-accent-secondary);
  }

  .timeline-header h2 {
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    transition: color 600ms var(--ease-default);
  }

  .timeline-dark-mode .timeline-header h2 {
    color: #ffffff;
  }

  .timeline-header .timeline-subtitle {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    transition: color 600ms var(--ease-default);
  }

  .timeline-dark-mode .timeline-header .timeline-subtitle {
    color: rgba(255, 255, 255, 0.7);
  }

  .timeline-track-area {
    position: absolute;
    inset: 0;
    overflow: visible;
  }

  .timeline-track {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    will-change: transform;
    padding-top: 45vh;
    padding-bottom: var(--space-20);
    padding-left: calc(var(--container-padding) + 24px);
    padding-right: var(--container-padding);
    position: relative;
  }

  .timeline-track::before {
    content: '';
    position: absolute;
    top: calc(45vh + 11.5px);
    bottom: -200px;
    left: calc(var(--container-padding) + 11.5px);
    width: 1px;
    background: var(--color-border);
    transition: background-color 600ms var(--ease-default);
  }

  .timeline-dark-mode .timeline-track::before {
    background: rgba(255, 255, 255, 0.2);
  }

  .timeline-milestone {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--space-4);
    position: relative;
  }

  .timeline-milestone__year,
  .timeline-milestone__title,
  .timeline-milestone__desc {
    transition: opacity 400ms var(--ease-default), color 600ms var(--ease-default);
    opacity: 0.15;
  }

  .timeline-milestone--active .timeline-milestone__year,
  .timeline-milestone--active .timeline-milestone__title,
  .timeline-milestone--active .timeline-milestone__desc {
    opacity: 1;
  }

  .timeline-milestone__dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--color-accent-primary);
    border: none;
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    margin-top: 5px;
    margin-left: -18px;
    opacity: 1 !important;
    transition: transform 300ms var(--ease-default),
                background-color 600ms var(--ease-default),
                border-color 600ms var(--ease-default),
                box-shadow 600ms var(--ease-default);
  }

  .timeline-dark-mode .timeline-milestone__dot {
    opacity: 1 !important;
    background-color: var(--color-accent-secondary);
    border: 2px solid #ffffff;
  }

  .timeline-milestone--active .timeline-milestone__dot {
    transform: scale(1.3);
    background-color: var(--color-accent-primary);
    border: none;
  }

  .timeline-dark-mode .timeline-milestone--active .timeline-milestone__dot {
    background-color: var(--color-accent-secondary);
    border: 2px solid #ffffff;
    box-shadow: 0 0 14px rgba(196, 167, 103, 0.5);
  }

  .timeline-milestone__year {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-primary);
    line-height: 1;
    grid-column: 2;
    white-space: nowrap;
  }

  .timeline-dark-mode .timeline-milestone__year {
    color: #ffffff;
  }

  .timeline-milestone__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--color-accent-primary);
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-bold);
    margin-top: var(--space-2);
    grid-column: 2;
  }

  .timeline-dark-mode .timeline-milestone__title {
    color: #ffffff;
  }

  .timeline-milestone__desc {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: var(--text-sm-lh);
    margin-top: var(--space-2);
    grid-column: 2;
  }

  .timeline-dark-mode .timeline-milestone__desc {
    color: rgba(255, 255, 255, 0.7);
  }

  .timeline-dark-mode .timeline-milestone--active .timeline-milestone__desc {
    color: #ffffff;
  }

  .timeline-track-area::before {
    display: none;
  }
}

/* === Imported from: ./organisms/_hero.css === */
/* ============================================================
   ORGANISM: HERO SECTION — ZETA TECNICA DESIGN SYSTEM
   Hero slideshow, 3D parallax background, active glitch
   states, timer frames, and responsive styles.
   ============================================================ */

.hero-section-custom {
  position: relative;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--section-gap) + 80px);
  background-color: var(--color-bg-secondary);
}

.hero__parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__parallax-bg--blurred {
  filter: blur(10px) brightness(0.9);
  z-index: 1;
}

.hero__parallax-bg--clear {
  filter: none;
  z-index: 3;
  clip-path: inset(0px 0px 0px 0px);
}

.hero__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  background-color: var(--color-bg-secondary);
}

/* Slides background images for desktop and mobile viewports */
.hero__slide:nth-child(1) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-1-antifurto-senza-filo.webp'); }
.hero__slide:nth-child(2) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-2-antifurti-filo.webp'); }
.hero__slide:nth-child(3) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-3-perimetrale.webp'); }
.hero__slide:nth-child(4) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-5-videosorveglianza.webp'); }
.hero__slide:nth-child(5) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-4-antincedio.webp'); }
.hero__slide:nth-child(6) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-6-nebbiogeno.webp?v=1718716398'); }
.hero__slide:nth-child(7) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-7-armadio.webp'); }

@media screen and (max-width: 767px) {
  .hero__slide:nth-child(1) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-1-antifurto-senza-filo-mobile.webp'); }
  .hero__slide:nth-child(2) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-2-antifurti-filo-mobile.webp'); }
  .hero__slide:nth-child(3) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-3-perimetrale-mobile.webp'); }
  .hero__slide:nth-child(4) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-5-videosorveglianza-mobile.webp'); }
  .hero__slide:nth-child(5) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-4-antincedio-mobile.webp'); }
  .hero__slide:nth-child(6) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-6-nebbiogeno-mobile.webp?v=1718716398'); }
  .hero__slide:nth-child(7) { background-image: linear-gradient(135deg, rgba(11,66,134,0.1) 0%, rgba(0,0,0,0.4) 100%), url('../asset/hero/zt-7-armadio-mobile.webp'); }
}

.hero__slide.hero__slide--active {
  opacity: 1;
  z-index: 2;
}

/* Cream overlay for readability, blending with the warm image tones */
.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(to right, rgba(250, 249, 246, 0.95) 0%, rgba(250, 249, 246, 0.85) 45%, rgba(250, 249, 246, 0.1) 100%);
  pointer-events: none;
}

/* Column Container & Aspect Ratio Box */
.hero__timer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  gap: var(--space-4);
  position: relative;
  z-index: 4;
  transform: translate3d(var(--frame-pan-x, 0px), var(--frame-pan-y, 0px), 0px);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero__aspect-timer {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: rgba(255, 255, 255, 0.03);
}

.hero__svg-timer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__svg-timer-bg {
  stroke: var(--color-border-strong);
  opacity: 0.35;
}

.hero__svg-timer-active {
  stroke: var(--color-accent-primary);
  stroke-width: 1;
  stroke-linecap: square;
}

/* Tertiary Scramble CTA below the frame */
.hero__slide-cta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-accent-primary);
  padding: var(--space-2) 0;
  transition: color var(--duration-fast);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.hero__slide-cta:hover {
  color: var(--color-accent-primary-hover);
  text-decoration: underline;
  background-color: transparent;
}

@media screen and (max-width: 1023px) {
  .hero__overlay {
    background: rgba(250, 249, 246, 0.9);
  }
  .hero-section-custom {
    min-height: auto;
    padding-bottom: var(--space-12);
  }
  .hero__timer-box {
    margin-top: var(--space-8);
    max-width: 260px;
  }
}

/* Active Glitch Slices State (Only plays for 200ms) */
.glitch-hover-active .hero__slide--active::before {
  opacity: 0.85;
  animation: glitch-slice-1 var(--glitch-speed, 0.3s) infinite linear alternate-reverse;
}
.glitch-hover-active .hero__slide--active::after {
  opacity: 0.85;
  animation: glitch-slice-2 var(--glitch-speed, 0.3s) infinite linear alternate-reverse;
}

/* scanlines + RGB overlay */
.hero-section-custom.hover-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.3) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.05), 
    rgba(0, 255, 0, 0.02), 
    rgba(0, 0, 255, 0.05)
  );
  background-size: 100% 4px, 6px 100%;
  z-index: 10;
  pointer-events: none;
  opacity: var(--glitch-scanlines-opacity, 0.3);
}

/* Glitch variables */
:root {
  --glitch-shift-1: -40px;
  --glitch-shift-2: 40px;
  --glitch-speed: 0.3s;
  --glitch-scanlines-opacity: 0.3;
}

.hero__slide--active::before,
.hero__slide--active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* Active Blue Shader State (Stays during entire hover on the entire background) */
.hero-section-custom.hover-active .hero__parallax-bg {
  filter: sepia(1) saturate(3.5) hue-rotate(185deg) brightness(0.75) contrast(1.2);
}

/* Change the gradient overlay to a deep digital blue tint */
.hero-section-custom.hover-active .hero__overlay {
  background: linear-gradient(to right, rgba(11, 32, 64, 0.95) 0%, rgba(11, 32, 64, 0.75) 45%, rgba(11, 32, 64, 0.15) 100%);
}

/* Invert the text colors for maximum contrast over the dark blue overlay */
.hero-section-custom.hover-active .reveal-on-scroll h1,
.hero-section-custom.hover-active .reveal-on-scroll p,
.hero-section-custom.hover-active .reveal-on-scroll .overline {
  color: var(--color-text-inverted);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  transition: color var(--duration-base) var(--ease-default);
}

/* Secondary CTA -> white text */
.hero-section-custom.hover-active .btn--secondary {
  color: var(--color-text-inverted);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Primary CTA -> white bg, blue text */
.hero-section-custom.hover-active .hero__actions .btn--primary {
  background-color: var(--color-text-inverted);
  color: var(--color-accent-primary);
}

/* Timer frame border -> white */
.hero-section-custom.hover-active .hero__svg-timer-active {
  stroke: var(--color-text-inverted);
}
.hero-section-custom.hover-active .hero__svg-timer-bg {
  stroke: rgba(255, 255, 255, 0.35);
}

/* Timer slide CTA -> white */
.hero-section-custom.hover-active .hero__slide-cta {
  color: var(--color-text-inverted);
}

/* Google Reviews badge text -> white on hover */
.hero-section-custom.hover-active .google-badge__text {
  color: var(--color-text-inverted);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

/* Header menu items color -> white */
body:has(.hover-active) .header--transparent .nav__link {
  color: var(--color-text-inverted);
}
body:has(.hover-active) .header--transparent .nav__link svg {
  stroke: var(--color-text-inverted);
}
body:has(.hover-active) .header--transparent .nav-toggle line {
  stroke: var(--color-text-inverted);
}
body:has(.hover-active) .header--transparent .nav__link:hover {
  color: var(--color-accent-secondary);
}
body:has(.hover-active) .header--transparent .nav__link:hover svg {
  stroke: var(--color-accent-secondary);
}
body:has(.hover-active) .header--transparent .logo__img {
  filter: brightness(0) invert(1);
  transition: filter var(--duration-base) var(--ease-default);
}

/* Mobile-only default blue shader view (no hover required) */
@media screen and (max-width: 767px) {
  .hero-section-custom .hero__parallax-bg {
    filter: sepia(1) saturate(3.5) hue-rotate(185deg) brightness(0.75) contrast(1.2);
  }
  .hero-section-custom .hero__overlay {
    background: linear-gradient(to right, rgba(11, 32, 64, 0.95) 0%, rgba(11, 32, 64, 0.75) 45%, rgba(11, 32, 64, 0.15) 100%);
  }
  .hero-section-custom .reveal-on-scroll h1,
  .hero-section-custom .reveal-on-scroll p,
  .hero-section-custom .reveal-on-scroll .overline {
    color: var(--color-text-inverted);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  }
  .hero-section-custom .btn--secondary {
    color: var(--color-text-inverted);
    border-color: rgba(255, 255, 255, 0.4);
  }
  .hero-section-custom .hero__actions .btn--primary {
    background-color: var(--color-text-inverted);
    color: var(--color-accent-primary);
  }
  .hero-section-custom .hero__svg-timer-active {
    stroke: var(--color-text-inverted);
  }
  .hero-section-custom .hero__svg-timer-bg {
    stroke: rgba(255, 255, 255, 0.35);
  }
  .hero-section-custom .hero__slide-cta {
    color: var(--color-text-inverted);
  }
  .hero-section-custom .google-badge__text {
    color: var(--color-text-inverted);
  }
  .hero-section-custom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      rgba(18, 16, 16, 0) 50%, 
      rgba(0, 0, 0, 0.3) 50%
    ), linear-gradient(
      90deg, 
      rgba(255, 0, 0, 0.05), 
      rgba(0, 255, 0, 0.02), 
      rgba(0, 0, 255, 0.05)
    );
    background-size: 100% 4px, 6px 100%;
    z-index: 10;
    pointer-events: none;
    opacity: var(--glitch-scanlines-opacity, 0.3);
  }
}

@keyframes glitch-slice-1 {
  0% {
    clip-path: inset(20% 0 70% 0);
    transform: translateX(var(--glitch-shift-1, -15px));
    filter: hue-rotate(90deg) saturate(1.5) drop-shadow(2px 0 0 #00ffff);
  }
  20% {
    clip-path: inset(45% 0 45% 0);
    transform: translateX(var(--glitch-shift-2, 12px));
    filter: hue-rotate(180deg) saturate(2) drop-shadow(-2px 0 0 #ff00ff);
  }
  40% {
    clip-path: inset(80% 0 10% 0);
    transform: translateX(calc(var(--glitch-shift-1) * 0.5));
  }
  60% {
    clip-path: inset(5% 0 85% 0);
    transform: translateX(var(--glitch-shift-2));
  }
  80% {
    clip-path: inset(35% 0 50% 0);
    transform: translateX(calc(var(--glitch-shift-1) * 0.8));
  }
  100% {
    clip-path: inset(65% 0 20% 0);
    transform: translateX(calc(var(--glitch-shift-2) * 0.6));
  }
}

@keyframes glitch-slice-2 {
  0% {
    clip-path: inset(40% 0 50% 0);
    transform: translateX(var(--glitch-shift-2));
    filter: hue-rotate(120deg) drop-shadow(2px 0 0 #ff00ff);
  }
  25% {
    clip-path: inset(10% 0 80% 0);
    transform: translateX(calc(var(--glitch-shift-1) * 0.8));
  }
  50% {
    clip-path: inset(70% 0 25% 0);
    transform: translateX(calc(var(--glitch-shift-2) * 0.5));
    filter: hue-rotate(240deg) saturate(1.8) drop-shadow(-2px 0 0 #00ffff);
  }
  75% {
    clip-path: inset(15% 0 75% 0);
    transform: translateX(var(--glitch-shift-1));
  }
  100% {
    clip-path: inset(55% 0 35% 0);
    transform: translateX(calc(var(--glitch-shift-2) * 0.8));
  }
}


/* === Imported from: ./organisms/_footer.css === */
/* ============================================================
   ORGANISM: FOOTER — ZETA TECNICA DESIGN SYSTEM
   Footer grid, responsive layouts, social media links with outline box,
   and typography styling.
   ============================================================ */

.footer-grid {
  grid-template-columns: repeat(5, 1fr);
}

.footer-grid__empty {
  display: block;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-text-inverted);
  color: var(--color-text-inverted);
  border-radius: var(--radius-none);
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
  text-decoration: none;
}

.footer-social-link:hover {
  background-color: var(--color-text-inverted);
  color: var(--color-accent-primary);
}

.footer-link {
  color: var(--color-text-inverted-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--duration-fast), text-decoration var(--duration-fast);
}

.footer-link:hover {
  color: var(--color-text-inverted);
  text-decoration: underline;
}

.footer-partner-link {
  color: var(--color-text-inverted);
  text-decoration: underline;
  font-weight: var(--font-weight-regular);
  transition: color var(--duration-fast);
}

.footer-partner-link:hover {
  color: var(--color-accent-secondary-light);
}

.footer-legal-link {
  color: var(--color-text-inverted-muted);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer-legal-link:hover {
  color: var(--color-text-inverted);
}


@media screen and (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid__empty {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
  }
  .footer-grid > div:nth-child(1) {
    grid-column: span 2;
  }
  .footer-grid > div:nth-child(2) {
    grid-column: span 1;
  }
  .footer-grid > div:nth-child(3) {
    grid-column: span 1;
  }
  .footer-grid > div:nth-child(4) {
    grid-column: span 2;
    min-height: auto !important;
  }
}


/* === Imported from: ./utilities/_layout.css === */
/* ============================================================
   UTILITY: LAYOUT — ZETA TECNICA DESIGN SYSTEM
   Hide utilities, text truncation, and layout helpers.
   ============================================================ */

/* --- Text truncation --- */
.text-wrap-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-wrap-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* --- Hide utilities --- */
.hide { display: none !important; }

@media screen and (max-width: 991px) {
  .hide-tablet { display: none !important; }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape { display: none !important; }
}

@media screen and (max-width: 479px) {
  .hide-mobile { display: none !important; }
}

/* --- Show utilities (inverse of hide) --- */
.show-mobile-only { display: none !important; }

@media screen and (max-width: 479px) {
  .show-mobile-only { display: block !important; }
}

.show-tablet-only { display: none !important; }

@media screen and (min-width: 480px) and (max-width: 1023px) {
  .show-tablet-only { display: block !important; }
}

/* --- Width utilities --- */
.w-full   { width: 100%; }
.w-auto   { width: auto; }
.max-w-sm  { max-width: 24rem; }    /* 384px */
.max-w-md  { max-width: 28rem; }    /* 448px */
.max-w-lg  { max-width: 32rem; }    /* 512px */
.max-w-xl  { max-width: 36rem; }    /* 576px */
.max-w-2xl { max-width: 42rem; }    /* 672px */
.max-w-prose { max-width: 65ch; }   /* Optimal reading width */


/* === Imported from: ./utilities/_responsive.css === */
/* ============================================================
   UTILITY: RESPONSIVE — ZETA TECNICA DESIGN SYSTEM
   Responsive overrides for typography, spacing, and section gaps.
   
   BREAKPOINT MAP:
   Desktop:   >= 1024px  (base values)
   Tablet:    768–1023px
   Mobile:    < 768px
   Small:     < 480px
   ============================================================ */


/* --- Tablet (768–1023px) --- */
@media screen and (max-width: 1023px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }

  :root {
    --section-gap: var(--space-20);   /* 80px on tablet */
  }
}


/* --- Mobile landscape / small tablet (< 768px) --- */
@media screen and (max-width: 767px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

  :root {
    --section-gap: var(--space-16);   /* 64px on mobile */
  }
}


/* --- Small mobile (< 480px) --- */
@media screen and (max-width: 479px) {
  :root {
    --container-padding: 1rem;
    --section-gap: var(--space-16);
  }
}


/* === Imported from: ./utilities/_animations.css === */
/* ============================================================
   ANIMATION UTILITIES — ZETA TECNICA DESIGN SYSTEM
   Keyframe animations, reveal on scroll, transition helpers.
   
   USAGE:
   - Keyframes: add class to element (e.g. .anim-fade-in)
   - Reveal:    add .reveal-on-scroll, JS adds .is-visible
   - Stagger:   wrap in .reveal-stagger-container, children get
                .reveal-stagger-item with --stagger-idx CSS var
   - Hover:     add .hover-lift, .hover-scale, etc.
   
   All durations/easings use design tokens.
   ============================================================ */


/* === KEYFRAME DEFINITIONS === */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-1.5rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(1.5rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}


/* === ANIMATION UTILITY CLASSES === */

.anim-fade-in {
  animation: fadeIn var(--duration-slow) var(--ease-enter) both;
}

.anim-fade-in-up {
  animation: fadeInUp var(--duration-slow) var(--ease-enter) both;
}

.anim-fade-in-down {
  animation: fadeInDown var(--duration-slow) var(--ease-enter) both;
}

.anim-fade-in-left {
  animation: fadeInLeft var(--duration-slow) var(--ease-enter) both;
}

.anim-fade-in-right {
  animation: fadeInRight var(--duration-slow) var(--ease-enter) both;
}

.anim-scale-in {
  animation: scaleIn var(--duration-medium) var(--ease-enter) both;
}

.anim-slide-in-up {
  animation: slideInUp var(--duration-medium) var(--ease-bounce) both;
}

.anim-pulse {
  animation: pulse 2s var(--ease-smooth) infinite;
}

.anim-spin {
  animation: spin 1s linear infinite;
}

.anim-shimmer {
  background: linear-gradient(90deg,
    var(--color-neutral-200) 25%,
    var(--color-neutral-100) 50%,
    var(--color-neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}


/* === ANIMATION DELAY UTILITIES === */

.anim-delay-1 { animation-delay: 100ms; }
.anim-delay-2 { animation-delay: 200ms; }
.anim-delay-3 { animation-delay: 300ms; }
.anim-delay-4 { animation-delay: 400ms; }
.anim-delay-5 { animation-delay: 500ms; }
.anim-delay-6 { animation-delay: 600ms; }


/* === HOVER TRANSITIONS === */

.hover-lift {
  transition: transform var(--duration-base) var(--ease-enter),
              box-shadow var(--duration-base) var(--ease-default);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--duration-base) var(--ease-enter);
}

.hover-scale:hover {
  transform: scale(1.04);
}

.hover-glow {
  transition: box-shadow var(--duration-base) var(--ease-default);
}

.hover-glow:hover {
  box-shadow: var(--shadow-accent);
}

.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-accent-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-precise);
}

.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* === SCROLL REVEAL === */

/* Single reveal element — add .is-visible via IntersectionObserver */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--duration-slow) var(--ease-enter),
              transform var(--duration-slow) var(--ease-enter);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Direction variants */
.reveal-on-scroll--left {
  opacity: 0;
  transform: translateX(-1.5rem);
  transition: opacity var(--duration-slow) var(--ease-enter),
              transform var(--duration-slow) var(--ease-enter);
}

.reveal-on-scroll--left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-on-scroll--right {
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity var(--duration-slow) var(--ease-enter),
              transform var(--duration-slow) var(--ease-enter);
}

.reveal-on-scroll--right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-on-scroll--scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-slow) var(--ease-enter),
              transform var(--duration-slow) var(--ease-enter);
}

.reveal-on-scroll--scale.is-visible {
  opacity: 1;
  transform: scale(1);
}


/* === STAGGERED REVEAL === */
/* Wrap children in .reveal-stagger-container.
   Each child gets .reveal-stagger-item with --stagger-idx via style or JS.
   JS adds .is-visible on parent when it enters viewport. */

.reveal-stagger-item {
  opacity: 0;
  transform: translateY(1rem);
  /* Split transition properties into longhands with !important to prevent custom component classes from overriding the reveal animations */
  transition-property: opacity, transform, box-shadow, background-color, border-color !important;
  transition-duration: var(--duration-slow), var(--duration-slow), var(--duration-base), var(--duration-base), var(--duration-base) !important;
  transition-timing-function: var(--ease-enter), var(--ease-enter), var(--ease-default), var(--ease-default), var(--ease-default) !important;
  transition-delay: calc(var(--stagger-idx, 0) * 80ms) !important;
}

.reveal-stagger-container.is-visible .reveal-stagger-item,
.reveal-stagger-item.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Fix: Disable delay when user hovers to maintain instant lift reactions */
.reveal-stagger-item:hover {
  transition-delay: 0s !important;
  transition-duration: var(--duration-base) !important;
}


/* === COMPONENT-SPECIFIC ANIMATIONS === */

/* Menu underline hover */
.header__menu a {
  position: relative;
}

.header__menu a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-accent-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-precise);
}

.header__menu a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Service card icon hover */
.card--service {
  transition: border-color var(--duration-base) var(--ease-precise),
              background-color var(--duration-base) var(--ease-precise);
}

.card--service:hover .card__icon {
  transform: translateY(-4px);
  color: var(--color-accent-primary);
}

/* Solution card arrow hover */
.card--solution {
  transition: border-color var(--duration-base) var(--ease-precise);
}

.card--solution .cta-arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-precise);
}

.card--solution:hover .cta-arrow {
  transform: translateX(4px);
}

/* Brand logo card hover */
.card--brand {
  transition: border-color var(--duration-base) var(--ease-precise);
}

.card--brand img {
  transition: opacity var(--duration-base) var(--ease-precise);
}

.card--brand:hover img {
  opacity: 1;
}

/* Scramble Text Effect
   ─────────────────────
   JS-driven text reveal: characters cycle through random glyphs
   before settling on their final value.
   
   HTML: <span class="scramble-text" data-scramble="Final Text Here">Final Text Here</span>
   
   JS replaces each char with <span class="scramble-char"> during animation.
   When resolved, char gets .scramble-char--resolved.
*/

.scramble-text {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.scramble-char {
  display: inline-block;
  min-width: 0.1em;
  color: var(--color-accent-primary);
  opacity: 0.7;
  font-family: var(--font-mono);
  transition: color var(--duration-fast) var(--ease-default),
              opacity var(--duration-fast) var(--ease-default);
}

.scramble-char--resolved {
  color: inherit;
  opacity: 1;
  font-family: inherit;
}

/* Dark background variant */
.scramble-text--dark .scramble-char {
  color: var(--color-accent-primary-light);
}

.scramble-text--dark .scramble-char--resolved {
  color: var(--color-text-inverted);
}

/* Optional blinking cursor at end */
@keyframes scrambleCaret {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.scramble-cursor::after {
  content: '▌';
  display: inline-block;
  color: var(--color-accent-primary);
  animation: scrambleCaret 800ms steps(1) infinite;
  margin-left: 1px;
  font-size: 0.9em;
}

.scramble-cursor--done::after {
  display: none;
}


/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll,
  .reveal-on-scroll--left,
  .reveal-on-scroll--right,
  .reveal-on-scroll--scale,
  .reveal-stagger-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hover-lift:hover,
  .hover-scale:hover {
    transform: none !important;
  }

  .hover-underline::after,
  .header__menu a::after {
    display: none !important;
  }
}


/* === Imported from: ./utilities/_glitch-shader.css === */
/* ============================================================
   UTILITY: GLITCH SHADER & SCANLINES
   Reusable glitch distortion and digital blue CRT shader overlay.
   ============================================================ */

:root {
  --glitch-shift-1: -40px;
  --glitch-shift-2: 40px;
  --glitch-speed: 0.3s;
  --glitch-scanlines-opacity: 0.3;
}

/* Slices Base */
.glitch-slices-container {
  position: relative;
  overflow: hidden;
}

.glitch-slices-container::before,
.glitch-slices-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 2;
  pointer-events: none !important;
}

/* Active Slices Distortion (Glitch) */
.glitch-active .glitch-slices-container::before {
  opacity: 0.85;
  animation: glitch-slice-1 var(--glitch-speed, 0.3s) infinite linear alternate-reverse;
}
.glitch-active .glitch-slices-container::after {
  opacity: 0.85;
  animation: glitch-slice-2 var(--glitch-speed, 0.3s) infinite linear alternate-reverse;
}

/* Reusable Blue digital shader filter */
.shader-blue-active {
  filter: sepia(1) saturate(3.5) hue-rotate(185deg) brightness(0.75) contrast(1.2) !important;
}

/* Reusable Scanlines overlay */
.scanlines-overlay {
  position: relative;
}
.scanlines-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.3) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.05), 
    rgba(0, 255, 0, 0.02), 
    rgba(0, 0, 255, 0.05)
  );
  background-size: 100% 4px, 6px 100%;
  z-index: 10;
  pointer-events: none;
  opacity: var(--glitch-scanlines-opacity, 0.3);
}

/* Keyframes */
@keyframes glitch-slice-1 {
  0% {
    clip-path: inset(20% 0 70% 0);
    transform: translateX(var(--glitch-shift-1, -15px));
    filter: hue-rotate(90deg) saturate(1.5) drop-shadow(2px 0 0 #00ffff);
  }
  20% {
    clip-path: inset(45% 0 45% 0);
    transform: translateX(var(--glitch-shift-2, 12px));
    filter: hue-rotate(180deg) saturate(2) drop-shadow(-2px 0 0 #ff00ff);
  }
  40% {
    clip-path: inset(80% 0 10% 0);
    transform: translateX(calc(var(--glitch-shift-1) * 0.5));
  }
  60% {
    clip-path: inset(5% 0 85% 0);
    transform: translateX(var(--glitch-shift-2));
  }
  80% {
    clip-path: inset(35% 0 50% 0);
    transform: translateX(calc(var(--glitch-shift-1) * 0.8));
  }
  100% {
    clip-path: inset(65% 0 20% 0);
    transform: translateX(calc(var(--glitch-shift-2) * 0.6));
  }
}

@keyframes glitch-slice-2 {
  0% {
    clip-path: inset(40% 0 50% 0);
    transform: translateX(var(--glitch-shift-2));
    filter: hue-rotate(120deg) drop-shadow(2px 0 0 #ff00ff);
  }
  25% {
    clip-path: inset(10% 0 80% 0);
    transform: translateX(calc(var(--glitch-shift-1) * 0.8));
  }
  50% {
    clip-path: inset(70% 0 25% 0);
    transform: translateX(calc(var(--glitch-shift-2) * 0.5));
    filter: hue-rotate(240deg) saturate(1.8) drop-shadow(-2px 0 0 #00ffff);
  }
  75% {
    clip-path: inset(15% 0 75% 0);
    transform: translateX(var(--glitch-shift-1));
  }
  100% {
    clip-path: inset(55% 0 35% 0);
    transform: translateX(calc(var(--glitch-shift-2) * 0.8));
  }
}