/*
 * ============================================================================
 * Biosa Labs — Foglio di stile principale
 *
 * Stili condivisi per tutte le pagine del sito biosa-labs.com.
 * Palette Navy Obsidian + Signal. WCAG 2.2 AAA compliant.
 * Estetica squadrata ispirata a Vercel/Linear/Stripe.
 * Mobile-first, zero dipendenze esterne, fully responsive.
 *
 * Copyright © 2026 Biosa Labs — Tutti i diritti riservati
 * Autore: Biosa Labs
 * Ultimo aggiornamento: 2026-03-14
 * ============================================================================
 */

/* ===================================================================== */
/* 1. VARIABILI CUSTOM PROPERTIES                                        */
/* Palette Navy Obsidian + Signal — enterprise, squadrata                 */
/* ===================================================================== */

:root {
  /* Dark palette — toni navy per look enterprise */
  --obsidian: #0B1121;
  --gunmetal: #151D2E;
  --steel: #243046;
  --graphite: #6B7A8F;
  --slate: #334155;
  --slate-700: #4A5268;

  /* Navy palette — allineata al reference */
  --navy-50: #F0F2F5;
  --navy-100: #E2E5EA;
  --navy-200: #C5CBD5;
  --navy-250: #B0BDD0;
  --navy-300: #90A1B9;
  --navy-400: #64748B;
  --navy-950: #101D2D;

  /* Accent — Signal blue */
  --signal: #2563EB;
  --signal-900: #163B8D;
  --signal-800: #1D4FBF;
  --signal-700: #1D4ED8;
  --signal-600: #2174EA;
  --signal-400: #60A5FA;
  --signal-100: #DBEAFE;
  --signal-50: #EFF6FF;

  /* Secondary accent — Sage */
  --sage: #4A7C6F;
  --sage-900: #2E524A;
  --sage-100: #D5E6E0;

  /* Light palette — toni freddi, coerenti con navy */
  --snow: #FAFBFC;
  --stone: #90A1B9;
  --ink: #1D293D;

  /* Semantic */
  --success: #2D7A4F;
  --warning: #C48A1A;
  --danger: #B8372D;

  /* Typography — Inter per body e heading, come il reference */
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;

  /* Layout — arrotondamento minimo, estetica enterprise */
  --max-w: 72rem;
  --content-w: 640px;
  --r: 4px;
  --r-lg: 6px;
  --nav-h: 5rem;

  /* Ombre — shadow system, no bordi visibili */
  --shadow-sm: 0 1px 2px rgba(11,17,33,.06);
  --shadow-md: 0 4px 12px rgba(11,17,33,.08);
  --shadow-lg: 0 8px 24px rgba(11,17,33,.1);
  --shadow-xl: 0 12px 32px rgba(11,17,33,.14);
}

/* ===================================================================== */
/* 2. RESET E NORMALIZZAZIONE                                            */
/* ===================================================================== */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.625; color: var(--slate); background: var(--snow); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
img,svg,video { display: block; max-width: 100%; height: auto }
a { color: var(--signal-900); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color .2s }
a:hover { color: var(--signal-800) }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); color: var(--ink); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em }
h1 { font-size: clamp(2.5rem, 4vw + 1rem, 4rem); line-height: 1.15 }
h2 { font-size: clamp(1.5rem, 1.5vw + 0.75rem, 2rem); line-height: 1.25 }
h3 { font-size: clamp(1.125rem, 1vw + 0.5rem, 1.25rem); font-weight: 600; letter-spacing: -0.01em }
h4 { font-size: 1.125rem; font-weight: 600 }
p+p { margin-top: var(--space-md) }
/* Enfasi testo — strong visivamente distinguibile */
.card-text strong, .hero-sub strong, .step-body strong, .pillar strong, .audience-item strong, .about-compact-text strong, .val-text strong, .svc-item-body strong, .svc-showcase-body strong, .why-pillar strong { color: var(--ink); font-weight: 600 }
.hero-sub strong { color: var(--snow) }
.section--dark strong { color: var(--snow) }
ul,ol { padding-left: var(--space-lg) }
button { font-family: inherit }

/* ===================================================================== */
/* 3. ACCESSIBILITÀ                                                      */
/* ===================================================================== */

.skip-link { position: absolute; top: -100%; left: 1rem; background: var(--obsidian); color: var(--snow); padding: .75rem 1.5rem; font-size: .875rem; font-weight: 600; z-index: 9999; text-decoration: none; transition: top .2s }
.skip-link:focus { top: 0; outline: 3px solid var(--signal-900); outline-offset: 2px }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--signal-900); outline-offset: 2px }

/* WCAG: rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
}

.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

/* ===================================================================== */
/* 4. LAYOUT E GRIGLIA                                                   */
/* ===================================================================== */

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.5rem, 3vw, 3rem) }
.section { padding: var(--space-3xl) 0 }
.section--dark { background: var(--obsidian); color: var(--snow) }
.section--alt { background: var(--navy-50) }
.grid { display: grid; gap: var(--space-xl) }
.grid--2 { grid-template-columns: 1fr }
.grid--3 { grid-template-columns: 1fr }

/* ===================================================================== */
/* 5. COMPONENTI                                                         */
/* ===================================================================== */

/* --- Bottoni — peso 600, raggio minimo --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; font-family: var(--font-body); font-size: 1rem;
  font-weight: 600; line-height: 1; padding: .75rem 1.5rem;
  letter-spacing: normal;
  border-radius: var(--r); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  min-height: 44px; min-width: 44px;
  transition: all .2s
}
/* Icona inline nei bottoni — Lucide, currentColor */
.btn-icon { flex-shrink: 0 }
/* WCAG: Signal-700 bg + Snow text — 4.6:1 AAA large text (bold 16px) */
.btn--primary { background: var(--signal-700); color: var(--snow); border-color: var(--signal-700) }
.btn--primary:hover { background: var(--signal-800); border-color: var(--signal-800); color: var(--snow) }
/* WCAG: Signal-900 su Snow — 9.3:1 AAA */
.btn--ghost { background: transparent; color: var(--signal-900); border-color: var(--navy-400) }
.btn--ghost:hover { background: var(--navy-100); border-color: var(--navy-400); color: var(--signal-900) }
.btn--ghost-light { background: transparent; color: var(--snow); border-color: rgba(255,255,255,.5) }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); color: var(--snow) }
.btn--block { width: 100% }

/* --- Logo — inline SVG text mark con barra Signal + sottotitolo --- */
.logo { text-decoration: none; display: inline-flex; align-items: center; color: var(--snow) }
.logo:hover { color: var(--snow) }
.logo-svg { height: 2.5rem; width: auto }

/* --- Nav — dark navy con backdrop blur --- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(11,17,33,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); height: var(--nav-h); transition: background .2s, transform .3s ease-in-out }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.5rem, 3vw, 3rem) }
.nav-links { display: none; list-style: none; gap: var(--space-xl); align-items: center; padding: 0 }
/* WCAG: navy-300 (#90A1B9) su obsidian — ~6.3:1 AAA large */
.nav-links a { font-weight: 500; font-size: 1rem; color: var(--navy-300); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s }
.nav-links a:hover { color: #fff }
.nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--signal-600) }
.nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r); cursor: pointer; padding: 0; transition: border-color .2s }
.nav-toggle:hover { border-color: rgba(255,255,255,.5) }
.nav-toggle:focus-visible { outline: 3px solid var(--signal-600); outline-offset: 2px }
.nav-toggle svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2; fill: none }
/* Hamburger → X animation */
.nav-toggle line { transition: transform .25s ease, opacity .2s ease; transform-origin: center }
.nav.is-open .nav-toggle line:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.nav.is-open .nav-toggle line:nth-child(2) { opacity: 0 }
.nav.is-open .nav-toggle line:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }
.nav-right { display: flex; align-items: center; gap: var(--space-md) }

/* CTA nav — variante header, stessa dimensione testo dei nav links */
.nav-right > .btn { display: none; font-size: 1rem; padding: .5rem 1.25rem }

/* --- Nav mobile --- */
.nav-mobile { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--obsidian); z-index: 99; padding: var(--space-xl) var(--space-lg); border-top: 1px solid var(--steel); overflow-y: auto; -webkit-overflow-scrolling: touch }
.nav-mobile.is-open { display: flex; flex-direction: column; gap: 0 }
.nav-mobile a { display: block; font-size: 1.125rem; color: var(--navy-300); text-decoration: none; padding: 1rem 0; border-bottom: 1px solid var(--steel); transition: color .2s, border-color .2s }
.nav-mobile a:hover { color: #fff }
.nav-mobile a:focus-visible { outline: 3px solid var(--signal-600); outline-offset: -3px; border-radius: var(--r) }
.nav-mobile a[aria-current="page"] { color: #fff; border-bottom: 2px solid var(--signal-600) }
.nav-mobile a.btn { margin-top: auto; width: 100%; color: #fff; display: flex; align-items: center; justify-content: flex-start; gap: .625rem; border-bottom: none; padding: 1rem 1.25rem; font-size: 1.125rem; font-weight: 600; border-radius: var(--r); min-height: 52px; transition: background .2s, box-shadow .2s }
.nav-mobile a.btn:hover { background: var(--signal-800); box-shadow: 0 0 0 1px var(--signal-600) }

/* Offset per fixed nav — applicato a tutto il contenuto sotto la nav */
body { padding-top: var(--nav-h) }

/* --- Hero — split layout su desktop (60/40) --- */
/* Fallback vh per Android < 108 che non supporta dvh */
.hero { background: var(--navy-950); color: var(--snow); padding: var(--space-3xl) 0; min-height: calc(100vh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h)); display: flex; align-items: center; position: relative; overflow: hidden }
/* Variante full-bleed: l'immagine riempie 100vh e va sotto la nav */
.hero--bg { min-height: 100vh; min-height: 100dvh; margin-top: calc(-1 * var(--nav-h)); padding-top: calc(var(--nav-h) + var(--space-3xl)) }
.hero .container { width: 100%; position: relative; z-index: 2 }
.hero-split { display: flex; flex-direction: column; gap: var(--space-2xl) }
.hero-split-left { flex: 3 }
.hero-split-right { flex: 2 }
.hero-split-right .hero-bar { width: 4rem; height: 3px; background: var(--signal-600); margin-bottom: var(--space-lg) }
.hero h1 { color: var(--snow); max-width: 720px; line-height: 1.15 }
/* WCAG: navy-250 (#B0BDD0) su Obsidian — 9.9:1, su Navy-950 — 8.9:1 → AAA normal ✓ */
.hero-sub { color: var(--navy-250); font-size: clamp(1.125rem, 1vw + 0.5rem, 1.25rem); max-width: var(--content-w); margin-top: var(--space-lg); line-height: 1.6 }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl) }

/* --- Hero con immagine di sfondo (homepage) --- */
.hero--bg { background: var(--obsidian) }
.hero-bg { position: absolute; inset: 0; z-index: 0 }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(16,29,45,.6) }
/* Variante compatta — pagine interne con immagine di sfondo.
   min-height fisso per coerenza tra tutte le pagine secondarie.
   padding-top compensa il margin-top negativo di hero--bg. */
.hero--compact { min-height: 420px; padding-top: calc(var(--nav-h) + var(--space-3xl)); padding-bottom: var(--space-2xl) }

/* --- Metriche --- */
.metrics { padding: var(--space-2xl) 0; border-bottom: 1px solid var(--navy-200) }
.metrics .grid { text-align: center }
.metric-val { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1.2 }
.metric-lbl { font-size: .875rem; color: var(--slate); margin-top: var(--space-xs) }

/* --- Section header --- */
.section-eyebrow { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--signal-700); margin-bottom: var(--space-md) }
.section--dark .section-eyebrow { color: var(--signal-400) }
.section-bar { width: 3rem; height: 3px; background: var(--signal-600); margin-bottom: var(--space-md) }
.section-title { margin-bottom: var(--space-sm) }
.section-sub { color: var(--slate); font-size: clamp(1.0625rem, 0.5vw + 0.875rem, 1.25rem); max-width: var(--content-w); margin-bottom: var(--space-2xl); line-height: 1.6 }
.section--dark .section-sub { color: var(--navy-300) }

/* --- Card — shadow-based, arrotondamento minimo --- */
.card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl) var(--space-lg);
  border-top: 2px solid transparent;
  transition: transform .2s, box-shadow .2s, border-color .2s
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); border-color: var(--signal-600) }
/* Icona con sfondo brand */
.card-icon {
  width: 48px; height: 48px;
  border-radius: var(--r);
  background: var(--signal-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-md)
}
.card-icon svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2; fill: none }
.card-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; color: var(--ink); margin-bottom: var(--space-sm) }
/* Accent line sotto il titolo — come il reference */
.card-title::after { content: ''; display: block; width: 3rem; height: 2px; background: var(--signal-600); margin-top: var(--space-sm) }
.card-text { color: var(--slate); font-size: 1rem; line-height: 1.625 }
.card-tag { display: inline-block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: .25rem .75rem; border-radius: var(--r); background: var(--signal-100); color: var(--signal-900); margin-bottom: var(--space-md) }

/* --- Card header generico — icona affiancata a tag/titolo --- */
.card-header { display: flex; align-items: flex-start; gap: var(--space-md) }
.card-header .card-icon { margin-bottom: 0; flex-shrink: 0; margin-top: .125rem }
.card-header .card-tag { margin-bottom: var(--space-xs) }
.card-header .card-title { margin-bottom: var(--space-md) }

/* --- Card variante inline — icona e titolo sulla stessa riga, senza accent line --- */
.card--inline .card-header { align-items: center; margin-bottom: var(--space-sm) }
.card--inline .card-header .card-title { margin-bottom: 0 }
.card--inline .card-title::after { display: none }

/* --- Pillar — card con accento laterale --- */
.pillar {
  padding: var(--space-xl);
  border-left: 3px solid var(--signal-600);
  background: #fff;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: 0 2px 8px rgba(11,17,33,.06);
  transition: border-left-color .2s, background .2s, box-shadow .2s
}
.pillar:hover { border-left-color: var(--signal-700); background: var(--signal-50); box-shadow: 0 4px 16px rgba(11,17,33,.1) }
.pillar-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm) }
.pillar-icon {
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--signal-100);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0
}
.pillar-icon svg { width: 20px; height: 20px; stroke: var(--signal-700); stroke-width: 2; fill: none }
.pillar h3 { margin-bottom: 0; font-size: 1.125rem }
.pillar p { color: var(--slate); line-height: 1.625 }

/* --- Showcase card — header decorativo + contenuto (pagina servizi, Soluzioni IT) --- */
.svc-showcase {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(11,17,33,.05), 0 6px 20px rgba(11,17,33,.05);
  transition: transform .25s ease, box-shadow .25s ease
}
.svc-showcase:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(11,17,33,.06), 0 16px 40px rgba(11,17,33,.1)
}
.svc-showcase-header {
  position: relative;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  background: linear-gradient(135deg, var(--signal-50) 0%, rgba(37,99,235,.06) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm)
}
.svc-showcase-tag {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--signal-700);
  opacity: .65
}
.svc-showcase-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-xl);
  right: var(--space-xl);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal-100), transparent)
}
.svc-showcase-icon {
  width: 64px; height: 64px;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.1);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, box-shadow .25s ease
}
.svc-showcase:hover .svc-showcase-icon {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(37,99,235,.16)
}
.svc-showcase-icon svg {
  width: 30px; height: 30px;
  stroke: var(--signal-700);
  stroke-width: 2;
  fill: none
}
.svc-showcase-body {
  padding: var(--space-xl)
}
.svc-showcase-body h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
  color: var(--obsidian)
}
.svc-showcase-body p {
  color: var(--slate);
  line-height: 1.625
}

/* --- Audience item — layout pulito senza card per "Chi serviamo" --- */
.audience-grid { display: flex; flex-direction: column }
.audience-item {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--navy-200);
  transition: padding-left .2s ease, border-color .2s
}
.audience-item:hover { padding-left: var(--space-sm); border-bottom-color: var(--signal-400) }
.audience-item:last-child { border-bottom: none }
/* Header audience — icona e titolo sulla stessa riga */
.audience-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm) }
.audience-icon {
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--signal-100);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .2s
}
.audience-item:hover .audience-icon { background: var(--signal-50); transform: scale(1.05) }
.audience-icon svg { width: 20px; height: 20px; stroke: var(--signal-700); fill: none }
.audience-item h3 { font-size: 1.125rem; margin-bottom: 0; color: var(--ink); transition: color .2s }
.audience-item:hover h3 { color: var(--signal-900) }
.audience-item p { color: var(--slate); line-height: 1.7; max-width: var(--content-w); font-size: 1rem }

/* --- About compact (homepage) --- */
.about-compact {
  display: flex; flex-direction: column; gap: var(--space-xl);
  align-items: flex-start
}
.about-compact-text { max-width: var(--content-w) }
.about-compact-aside { width: 100% }
.about-compact-text p { color: var(--slate); font-size: 1.0625rem; line-height: 1.7 }

/* --- Service card (pagina servizi) — shadow-based --- */
.service-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xl);
  transition: transform .2s, box-shadow .2s
}
.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl) }
/* Icona brand */
.service-icon {
  width: 48px; height: 48px;
  border-radius: var(--r);
  background: var(--signal-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-md)
}
.service-icon svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2; fill: none }
.service-card h3 { font-size: 1.25rem; margin-bottom: var(--space-sm) }
.service-card p { color: var(--slate); line-height: 1.625 }
.service-card .tech-list { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-xs) }
.tech-badge { display: inline-block; font-family: var(--font-mono); font-size: .75rem; padding: .25rem .625rem; border-radius: var(--r); background: var(--navy-50); color: var(--slate); border: 1px solid var(--navy-200); transition: background .15s, border-color .15s, color .15s }
.tech-badge:hover { background: var(--signal-50); border-color: var(--signal-400); color: var(--signal-900) }

/* --- Steps — icone tonde + layout 60/40 su desktop --- */
.steps-layout { display: flex; flex-direction: column; gap: var(--space-2xl) }
.steps { flex: 3 }
.step {
  display: flex; gap: var(--space-lg); align-items: flex-start;
  position: relative;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-md);
  border-radius: var(--r-lg);
  transition: background .25s ease, box-shadow .25s ease
}
.step:hover { background: rgba(37,99,235,.04); box-shadow: var(--shadow-sm) }
.step+.step { margin-top: var(--space-sm) }
/* Connettore verticale tra step — collega esattamente i cerchi */
.step:not(:last-child)::after {
  content: ''; position: absolute;
  left: calc(var(--space-md) + 24px);
  top: calc(var(--space-md) + 52px);
  bottom: calc(-1 * var(--space-sm) - 12px);
  width: 1.5px;
  background: linear-gradient(to bottom, var(--signal-100), var(--navy-200));
  border-radius: 1px
}
/* Icona step — tonda, con ring e ombra */
.step-icon {
  flex-shrink: 0; width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--signal-700);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 4px rgba(37,99,235,.1), var(--shadow-md);
  transition: transform .25s ease, box-shadow .25s ease
}
.step:hover .step-icon {
  transform: scale(1.05);
  box-shadow: 0 0 0 5px rgba(37,99,235,.15), var(--shadow-lg)
}
.step-icon svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 1.5; fill: none }
/* Header step: numero + titolo + badge durata */
.step-header {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-sm); margin-bottom: 2px
}
.step-number {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--signal-700); opacity: .7;
  font-variant-numeric: tabular-nums
}
.step-body h3 {
  margin-bottom: 0; font-size: 1.125rem;
  transition: color .2s ease
}
.step:hover .step-body h3 { color: var(--signal-900) }
.step-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 500;
  padding: .2rem .75rem;
  background: var(--signal-50); color: var(--signal-900);
  border: 1px solid var(--signal-100);
  border-radius: 100px;
  letter-spacing: .01em;
  transition: background .2s ease, border-color .2s ease
}
.step:hover .step-badge { background: var(--signal-100); border-color: var(--signal-400) }
.step-body p {
  color: var(--slate); margin-top: 6px;
  line-height: 1.7; max-width: 540px
}
/* SVG illustrazione laterale — sticky su desktop */
.steps-sidebar { display: none; flex: 2; align-items: flex-start; max-width: 400px }
.steps-sidebar svg { width: 100%; height: auto; position: sticky; top: calc(var(--nav-h) + 2rem) }

/* --- CTA section — immagine di sfondo con overlay come l'hero --- */
.cta-section {
  text-align: center; padding: var(--space-3xl) 0;
  position: relative; overflow: hidden;
  min-height: 50vh;
  display: flex; align-items: center; justify-content: center
}
.cta-bg { position: absolute; inset: 0; z-index: 0 }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30% }
.cta-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(11,17,33,.72) }
.cta-section .container { position: relative; z-index: 2; width: 100% }
.cta-section .section-eyebrow { color: var(--signal-400) }
.cta-section .section-bar { margin: 0 auto var(--space-md) }
.cta-section h2 { color: var(--snow); margin-bottom: var(--space-md); font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem) }
.cta-section p { color: var(--navy-250); font-size: 1.125rem; max-width: var(--content-w); margin: 0 auto var(--space-xl); line-height: 1.6 }

/* --- Footer --- */
.footer { background: var(--obsidian); color: var(--navy-300); padding: var(--space-3xl) 0 var(--space-xl) }
.footer .logo { color: var(--snow); margin-bottom: var(--space-lg) }
.footer .logo-svg { height: 2.75rem }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); margin-bottom: var(--space-2xl) }
.footer-col-title { font-family: var(--font-heading); font-weight: 600; font-size: .875rem; color: var(--snow); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-md) }
.footer-links { list-style: none; padding: 0 }
.footer-links li+li { margin-top: var(--space-sm) }
/* WCAG: navy-300 (#90A1B9) su Obsidian (#0B1121) — ~6.3:1 AAA large / AA normal */
.footer-links a { color: var(--navy-300); text-decoration: none; font-size: .9375rem; transition: color .2s }
.footer-links a:hover { color: #fff }
.footer-bottom { border-top: 1px solid var(--steel); padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); font-size: .8125rem; color: var(--navy-300) }
.footer-bottom a { color: var(--navy-300); text-decoration: none }
.footer-bottom a:hover { color: #fff }
.footer-tagline { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--snow); margin-top: var(--space-md); letter-spacing: .02em }
.footer-desc { margin-top: var(--space-sm); font-size: .9375rem; line-height: 1.5 }

/* --- Form --- */
.form-group { margin-bottom: var(--space-lg) }
.form-label { display: block; font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: var(--space-xs) }
.form-label .req { color: var(--danger); font-weight: 400; font-size: .875rem; margin-left: .25rem }
.form-input,.form-textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); background: var(--navy-50);
  border: 1px solid var(--navy-400); border-radius: var(--r);
  padding: .75rem 1rem; min-height: 2.75rem;
  transition: all .2s
}
.form-input:hover,.form-textarea:hover { border-color: var(--slate-700) }
.form-input:focus,.form-textarea:focus { border-color: var(--signal-600); outline: 2px solid var(--signal-600); outline-offset: 2px }
.form-input::placeholder,.form-textarea::placeholder { color: var(--navy-300); font-weight: 400 }
.form-textarea { min-height: 120px; resize: vertical }
.form-hint { font-size: .875rem; color: var(--slate); margin-top: var(--space-xs) }
.form-error { font-size: .875rem; color: var(--danger); margin-top: var(--space-xs); display: none }
.form-group.has-error .form-input,.form-group.has-error .form-textarea { border-color: var(--danger) }
.form-group.has-error .form-error { display: block }
.form-checkbox { display: flex; gap: .75rem; align-items: flex-start }
.form-checkbox input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--signal) }
.form-checkbox label { font-size: .875rem; color: var(--slate); line-height: 1.5 }
/* --- Form success — animated checkmark feedback --- */
.form-success { display: none }
.form-success-inner { text-align: center; padding: var(--space-3xl) var(--space-lg); animation: successFadeIn .5s ease-out }
.success-icon { margin-bottom: var(--space-lg); display: flex; justify-content: center }

/* Cerchio che si disegna */
@keyframes successCircle {
  from { stroke-dashoffset: 151 }
  to { stroke-dashoffset: 0 }
}
/* Spunta che appare */
@keyframes successCheck {
  from { stroke-dashoffset: 36 }
  to { stroke-dashoffset: 0 }
}
/* Fade in del blocco intero */
@keyframes successFadeIn {
  from { opacity: 0; transform: translateY(12px) }
  to { opacity: 1; transform: translateY(0) }
}

.success-circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: successCircle .6s ease-out .15s forwards }
.success-check { stroke-dasharray: 36; stroke-dashoffset: 36; animation: successCheck .4s ease-out .55s forwards }
.success-title { display: block; font-size: 1.375rem; color: var(--ink); margin-bottom: var(--space-sm) }
.success-text { color: var(--slate); font-size: 1rem; line-height: 1.6; max-width: 420px; margin: 0 auto; font-weight: 400 }
.success-text strong { color: var(--ink) }

/* Honeypot anti-spam */
.hp-field { position: absolute; left: -9999px; top: -9999px }

/* Loading spinner per submit form */
@keyframes spin { to { transform: rotate(360deg) } }
.btn:disabled { opacity: .7; cursor: not-allowed }

/* --- Page content (legal, etica, accessibilità) --- */
.page-header { background: var(--navy-950); color: var(--snow); padding: var(--space-3xl) 0 var(--space-2xl) }
.page-header h1 { color: var(--snow) }
.page-header .hero-sub { color: var(--navy-250); margin-top: var(--space-md) }
.page-header .section-bar { margin-top: var(--space-md) }
.page-header .section-eyebrow { color: var(--signal-400) }
.page-content { padding: var(--space-3xl) 0 }
.page-content .container { max-width: 800px }
.page-content h2 { margin-top: var(--space-3xl); margin-bottom: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--navy-200) }
.page-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none }
.page-content h3 { margin-top: var(--space-xl); margin-bottom: var(--space-md) }
.page-content p { max-width: var(--content-w); margin-bottom: var(--space-md) }
.page-content ul,.page-content ol { margin-top: var(--space-sm); margin-bottom: var(--space-lg) }
.page-content li { margin-bottom: var(--space-xs) }
.page-content h2 + p,.page-content h3 + p { margin-top: var(--space-sm) }
.page-content li p { margin-top: 0 }
.page-content table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; font-size: .9375rem }
.page-content th,.page-content td { text-align: left; padding: .75rem; border-bottom: 1px solid var(--navy-200) }
.page-content th { font-weight: 600; color: var(--ink); background: var(--navy-50) }
.page-update { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--navy-200); font-size: .875rem; color: var(--slate) }
.page-content a { color: var(--signal-900); text-decoration: underline; text-underline-offset: 2px }
.page-content a:hover { color: var(--ink) }
code, kbd { font-family: var(--font-mono); font-size: .875em; background: var(--navy-50); color: var(--ink); padding: .125em .375em; border-radius: var(--r) }
kbd { border: 1px solid var(--navy-200); box-shadow: 0 1px 0 var(--navy-200) }

/* --- Contatti — layout form + sidebar --- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: start }

/* Form wrapper — card bianca con shadow */
.contact-form-wrapper {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xl)
}
.contact-form-wrapper h2 { margin-bottom: var(--space-xs) }
.contact-form-intro { color: var(--slate); font-size: .9375rem; margin-bottom: var(--space-xl); line-height: 1.6 }

/* Griglia campi 2 colonne per nome/cognome su desktop */
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 }

/* Sidebar booking — card scura enterprise */
.contact-sidebar { display: flex; flex-direction: column; gap: var(--space-xl) }

.contact-booking {
  background: var(--navy-950);
  border-radius: var(--r-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  color: var(--snow)
}
.contact-booking h2 { color: var(--snow); font-size: 1.25rem; margin-bottom: var(--space-sm) }
.contact-booking > p { color: var(--navy-250); font-size: .9375rem; line-height: 1.6; margin-bottom: var(--space-lg) }
.contact-booking .btn { font-size: .9375rem }
.booking-note { margin-top: var(--space-md) }
.booking-note p { font-size: .8125rem; color: var(--navy-300); line-height: 1.5 }

/* Lista dettagli contatto nella sidebar */
.contact-details {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md)
}
.contact-detail {
  display: flex; align-items: flex-start; gap: var(--space-md)
}
.contact-detail-icon {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--signal-50);
  display: flex; align-items: center; justify-content: center
}
.contact-detail-icon svg { width: 18px; height: 18px; stroke: var(--signal-700); stroke-width: 2; fill: none }
.contact-detail-text { flex: 1 }
.contact-detail-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); margin-bottom: 2px }
.contact-detail-value { font-size: .9375rem; color: var(--ink); font-weight: 500 }
.contact-detail-value a { color: var(--signal-900); text-decoration: none; font-weight: 500 }
.contact-detail-value a:hover { text-decoration: underline }

/* Separatore tra dettagli */
.contact-detail + .contact-detail { padding-top: var(--space-md); border-top: 1px solid var(--navy-100) }

/* --- About page --- */
.about-illustration { width: 100%; max-width: 400px; height: auto; margin: -1rem auto 0; display: block }
/* Valori — card con numero ordinale watermark + icona inline + top bar */
.values-grid { gap: var(--space-xl) }
.val {
  position: relative;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  border-top: 3px solid var(--signal-600);
  background: transparent;
  transition: background .25s ease, border-color .25s ease
}
.val:hover { background: rgba(37,99,235,.04); border-top-color: var(--signal-700) }
.val-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md)
}
.val-num {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--signal);
  opacity: .12;
  letter-spacing: -.02em;
  user-select: none;
  transition: opacity .25s ease
}
.val:hover .val-num { opacity: .2 }
.val-icon {
  width: 28px;
  height: 28px;
  color: var(--signal-600);
  flex-shrink: 0
}
.val-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-sm)
}
.val-text {
  color: var(--slate);
  line-height: 1.625
}

/* --- Featured service block — white elevated, premium (pagina servizi) --- */
.svc-feature {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  padding: var(--space-2xl);
  box-shadow: 0 1px 3px rgba(11,17,33,.06), 0 8px 24px rgba(11,17,33,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden
}
.svc-feature::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--signal-700), var(--signal-400));
  border-radius: var(--r-lg) var(--r-lg) 0 0
}
.svc-feature:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(11,17,33,.06), 0 16px 40px rgba(11,17,33,.1) }
.svc-feature-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg)
}
.svc-feature-head h3 {
  font-size: 1.375rem;
  margin: 0;
  color: var(--obsidian)
}
.svc-feature-icon {
  width: 52px; height: 52px;
  border-radius: var(--r);
  background: var(--signal-50);
  display: flex; align-items: center; justify-content: center
}
.svc-feature-icon svg { width: 26px; height: 26px; stroke: var(--signal-700); stroke-width: 2; fill: none }
/* h3 ora dentro .svc-feature-head — stile ereditato da .svc-feature-head h3 */
.svc-feature p { color: var(--slate); line-height: 1.625 }
.svc-feature strong { color: var(--obsidian); font-weight: 600 }

/* --- Separatore decorativo tra featured e lista --- */
.svc-divider {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: var(--space-2xl) 0;
  color: var(--navy-400);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em
}
.svc-divider::before,
.svc-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--navy-200), transparent)
}
.svc-divider::after {
  background: linear-gradient(90deg, transparent, var(--navy-200))
}

/* --- Service compact list — icona + testo con separatori (pagina servizi) --- */
.svc-list { margin-top: 0 }
.svc-item {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  padding: var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--navy-100);
  border-radius: var(--r);
  transition: background .2s ease, border-color .2s ease
}
.svc-item:last-child { border-bottom: none }
.svc-item:hover { background: var(--signal-50) }
.svc-item-icon {
  width: 44px; height: 44px;
  border-radius: var(--r);
  background: var(--signal-50);
  border: 1px solid var(--signal-100);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background .2s ease, border-color .2s ease
}
.svc-item:hover .svc-item-icon { background: var(--signal-100); border-color: rgba(37,99,235,.2) }
.svc-item-icon svg { width: 22px; height: 22px; stroke: var(--signal-700); stroke-width: 2; fill: none }
.svc-item-body h3 { margin-bottom: var(--space-xs); transition: color .2s }
.svc-item:hover .svc-item-body h3 { color: var(--signal-900) }
.svc-item-body p { color: var(--slate); line-height: 1.625; max-width: var(--content-w) }

/* --- Tech stack — etichette inline stile card-tag (sostituto tech-badge) --- */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  margin-top: var(--space-md);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--signal-900);
  line-height: 1
}
.tech-stack span {
  white-space: nowrap;
  padding: .25rem .625rem;
  border-radius: var(--r);
  background: var(--signal-50);
  border: 1px solid var(--signal-100);
  transition: background .2s ease, border-color .2s ease
}
.tech-stack span:hover {
  background: var(--signal-100);
  border-color: rgba(37,99,235,.2)
}
/* Featured cards — sfondo bianco, nessun override necessario */

/* --- Hero SVG pattern decorativo --- */
.hero-svg-pattern { width: 100%; height: 100% }

/* Hero servizi — sfondo con glow radiale visibile */
.hero--svc {
  background:
    radial-gradient(ellipse at 72% 40%, rgba(37,99,235,.14) 0%, transparent 50%),
    radial-gradient(ellipse at 25% 75%, rgba(37,99,235,.07) 0%, transparent 40%),
    var(--obsidian)
}

/* Vecchie value-card mantenute per backward compatibility */
.value-card { padding: var(--space-xl); border-left: 3px solid var(--signal-600); background: #fff; transition: border-left-color .2s, background .2s }
.value-card:hover { border-left-color: var(--signal-700); background: var(--signal-50) }
.value-card h3 { margin-bottom: var(--space-xs) }
.value-card p { color: var(--slate) }

/* --- Why constellation — Perché Biosa Labs (pagina servizi) --- */
.why-constellation {
  position: relative;
  margin-top: var(--space-2xl)
}
.why-svg {
  display: block;
  width: 100%;
  margin: 0 auto;
  height: auto
}
.why-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl)
}
.why-pillar {
  text-align: center;
  padding: var(--space-md) var(--space-lg) var(--space-lg)
}
.why-pillar-num {
  display: block;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--signal-700);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs)
}
.why-pillar h3 {
  font-size: 1.25rem;
  color: var(--obsidian);
  margin-bottom: var(--space-sm)
}
.why-pillar p {
  color: var(--slate);
  line-height: 1.625;
  max-width: 320px;
  margin: 0 auto
}
/* Mobile: hide SVG, show vertical connecting line */
@media (max-width: 47.99rem) {
  .why-svg { display: none }
  .why-pillar {
    text-align: left;
    padding-left: var(--space-xl);
    border-left: 2px solid var(--signal-100);
    position: relative
  }
  .why-pillar::before {
    content: '';
    position: absolute;
    left: -5px;
    top: var(--space-md);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal-600)
  }
  .why-pillar p { margin: 0 }
}
@media (min-width: 48rem) {
  .why-pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl)
  }
}
/* SVG node hover effects */
.why-node { cursor: pointer }
.why-node-bg {
  transition: fill .25s ease, stroke .25s ease
}
.why-node-ring {
  transition: opacity .25s ease, stroke-width .25s ease, r .3s ease
}
.why-node-icon {
  transition: stroke .25s ease
}
.why-node:hover .why-node-bg {
  fill: #DBEAFE;
  stroke: rgba(37,99,235,.35)
}
.why-node:hover .why-node-ring {
  opacity: .8;
  stroke-width: 1.5
}
.why-node:hover .why-node-icon {
  stroke: #1D4ED8
}
.why-connector-label {
  font-family: var(--font-body);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  fill: var(--navy-300)
}
.profile-card { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl); background: var(--navy-50); border-left: 3px solid var(--signal-600) }
.profile-card h3 { margin-bottom: var(--space-xs) }
.profile-card p { color: var(--slate) }

/* --- Fit description (Chi Serviamo) --- */

/* ===================================================================== */
/* 6. UTILITÀ                                                            */
/* ===================================================================== */

.u-text-center { text-align: center }
.u-mt-2xl { margin-top: var(--space-2xl) }

/* ===================================================================== */
/* 6b. SCROLL-REVEAL ANIMATIONS (IntersectionObserver)                   */
/* Elementi con .reveal partono invisibili e appaiono allo scroll.       */
/* Stagger: .reveal-d1..d6 aggiungono delay progressivo per griglie.     */
/* ===================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease-out, transform .5s ease-out
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0)
}
/* Stagger delay per card in griglia — max 6 items */
.reveal-d1 { transition-delay: .08s }
.reveal-d2 { transition-delay: .16s }
.reveal-d3 { transition-delay: .24s }
.reveal-d4 { transition-delay: .32s }
.reveal-d5 { transition-delay: .4s }
.reveal-d6 { transition-delay: .48s }

/* ===================================================================== */
/* 6c. HERO ENTRANCE ANIMATION (solo homepage con .hero--bg)             */
/* Stagger: titolo → barra + sottotitolo → CTA                          */
/* ===================================================================== */

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(20px) }
  to { opacity: 1; transform: translateY(0) }
}
.hero--bg .hero-split-left { animation: heroFadeIn .6s ease-out both }
.hero--bg .hero-split-right .hero-bar { animation: heroFadeIn .6s ease-out .2s both }
.hero--bg .hero-sub { animation: heroFadeIn .6s ease-out .25s both }
.hero--bg .hero-actions { animation: heroFadeIn .6s ease-out .4s both }

/* ===================================================================== */
/* 6d. NAV SCROLL STATE — sfondo più opaco dopo scroll                   */
/* La classe .is-scrolled è già gestita da main.js                       */
/* ===================================================================== */

.nav.is-scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.06) }

/* Nav auto-hide: esce verso l'alto quando CTA finale o footer sono visibili */
.nav.is-hidden { transform: translateY(-100%); pointer-events: none }

/* ===================================================================== */
/* 6e. ACCENT BAR REVEAL — larghezza da 0 a 3rem su scroll              */
/* ===================================================================== */

.reveal .section-bar,
.reveal.section-bar { width: 0; transition: width .5s ease-out .15s }
.reveal.is-visible .section-bar,
.reveal.section-bar.is-visible { width: 3rem }

/* ===================================================================== */
/* 7. MEDIA QUERY (mobile-first, fully responsive)                       */
/* ===================================================================== */

/* Tablet — 48rem (768px) */
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2,1fr) }
  .grid--3 { grid-template-columns: repeat(2,1fr) }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr }
  .contact-grid { grid-template-columns: 3fr 2fr }
  .contact-sidebar { position: sticky; top: calc(var(--nav-h) + var(--space-xl)) }
  .form-row { grid-template-columns: 1fr 1fr; gap: 0 var(--space-lg) }
  .profile-card { flex-direction: row; align-items: flex-start }
}

/* Desktop — 64rem (1024px) */
@media (min-width: 64rem) {
  .nav-links { display: flex }
  .nav-toggle { display: none }
  .nav-right > .btn { display: inline-flex }
  .grid--3 { grid-template-columns: repeat(3,1fr) }
  .hero { padding: 7rem 0 }
  .hero--bg { padding-top: calc(var(--nav-h) + 7rem) }
  .hero--compact { min-height: 480px; padding-top: calc(var(--nav-h) + 5rem); padding-bottom: var(--space-2xl) }
  .hero-split { flex-direction: row; gap: var(--space-2xl); align-items: center }
  .footer-bottom { flex-direction: row; justify-content: space-between }
  .metrics .grid { grid-template-columns: repeat(3,1fr) }
  /* Audience grid — 3 colonne su desktop */
  /* Audience subgrid — allinea header e testo tra le 3 colonne */
  .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); row-gap: 0 }
  .audience-item { border-bottom: none; padding: 0; display: grid; grid-template-rows: subgrid; grid-row: span 2 }
  .audience-item:not(:last-child) { border-right: 1px solid var(--navy-200); padding-right: var(--space-2xl) }
  .audience-item:hover { padding-left: 0 }
  .audience-header { align-self: end }
  .audience-item p { align-self: start }
  /* About compact — riga su desktop */
  .about-compact { flex-direction: row; gap: var(--space-2xl); align-items: flex-start }
  .about-compact-text { flex: 3 }
  .about-compact-aside { flex: 2 }
  /* Pillar subgrid — allinea header e testo tra le 3 colonne */
  .grid--3:has(> .pillar) { row-gap: 0 }
  .pillar { display: grid; grid-template-rows: subgrid; grid-row: span 2 }
  .pillar-header { align-self: end }
  .pillar p { align-self: start }
  /* Steps 60/40 con sidebar SVG */
  .steps-layout { flex-direction: row; gap: var(--space-2xl); align-items: flex-start }
  .steps-sidebar { display: flex }
}

/* ===================================================================== */
/* 7b. MOBILE HARDENING — fix Android (Galaxy A54 etc.) e small screens  */
/* ===================================================================== */

/* Previene overflow orizzontale su schermi stretti */
body { overflow-x: hidden }
/* Word-break per testi lunghi che possono fuoriuscire su Android */
h1, h2, h3, p, li, td, th, a { overflow-wrap: break-word; word-break: break-word }

/* Small phone — padding più stretto, touch target generosi */
@media (max-width: 23.4375rem) {
  /* 375px — iPhone SE, Galaxy A54 base viewport */
  .container { padding: 0 1rem }
  h1 { font-size: 2rem }
  .hero-sub { font-size: 1rem }
  .btn { padding: .75rem 1.25rem; font-size: .9375rem }
  .contact-form-wrapper { padding: var(--space-lg) }
  .contact-booking { padding: var(--space-lg) }
}

/* Galaxy A54 & similar Android (360-412px wide) */
@media (max-width: 25.75rem) {
  /* 412px — fix card overflow e grid gap */
  .grid { gap: var(--space-lg) }
  .card { padding: var(--space-lg) var(--space-md) }
  .footer-grid { gap: var(--space-lg) }
  /* Form: riduce padding laterale */
  .contact-form-wrapper { padding: var(--space-lg) var(--space-md) }
}

/* Touch device: target minimi 44x44 garantiti */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 48px }
  .form-input, .form-textarea { min-height: 48px }
  .form-checkbox input[type="checkbox"] { width: 24px; height: 24px }
  /* Disabilita hover effects che causano "stickiness" su Android */
  .card:hover { transform: none }
  .service-card:hover { transform: none }
  .audience-item:hover { padding-left: 0 }
}

/* Stampa */
@media print {
  .nav,.footer,.skip-link,.nav-mobile { display: none !important }
  body { color: #000; background: #fff; padding-top: 0 }
  a { color: #000; text-decoration: underline }
  .hero { background: #fff; color: #000; min-height: auto; padding: 2rem 0 }
  .hero h1,.hero-sub { color: #000 }
  .hero-bg,.hero-overlay,.cta-bg,.cta-overlay { display: none !important }
  .section--dark { background: #fff; color: #000 }
  .section--dark h2,.cta-section h2,.cta-section p { color: #000 }
}