/* FILE GENERATO — non modificare a mano.
 * Lo riscrive strumenti/rifai-risorse.py unendo, in quest'ordine:
 *   icone.css, variables.css, style.css, animations.css, chatbot.css, cookie-consent.css, immersive.css, marchio.css, effetti.css
 * L'ordine e' quello originale dei <link>: due regole di pari forza
 * vincono per ultima posizione, quindi cambiarlo cambierebbe l'aspetto.
 * Modificare i file sorgenti qui accanto, poi rilanciare lo script.
 */

/* ===== icone.css ===== */
/* Icone Bootstrap — solo quelle che il sito usa davvero. FILE GENERATO.
 *
 * Non si modifica a mano: lo riscrive strumenti/rifai-risorse.py.
 *
 * Il pacchetto originale porta 2050 icone e un carattere da 130 KB. Qui ce ne
 * sono 58, e il carattere accanto e' stato ritagliato su quelle:
 * 130396 -> 5112 byte. Ogni glifo e' stato verificato dopo il ritaglio.
 *
 * Se in una pagina compare un'icona NUOVA, qui non c'e' e si vede un
 * rettangolo vuoto: va rilanciato lo script.
 *
 * `font-display: block` e non `swap`: con `swap` le icone comparirebbero
 * prima come lettere a caso del carattere di sistema, e per un'icona il
 * ripiego e' peggio di una breve attesa. Il carattere pesa cinque kilobyte:
 * quell'attesa non si vede.
 */
@font-face {
  font-family: "bootstrap-icons";
  font-display: block;
  src: url("../fonts/bootstrap-icons-58.woff2?v=18.4") format("woff2");
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bi-arrow-clockwise::before { content: "\f116"; }
.bi-arrow-down-short::before { content: "\f124"; }
.bi-arrow-left::before { content: "\f12f"; }
.bi-arrow-left-short::before { content: "\f12c"; }
.bi-arrow-repeat::before { content: "\f130"; }
.bi-arrow-right::before { content: "\f138"; }
.bi-arrow-right-short::before { content: "\f135"; }
.bi-arrow-up-short::before { content: "\f145"; }
.bi-bookmark-star-fill::before { content: "\f19e"; }
.bi-chat-dots::before { content: "\f24a"; }
.bi-chat-left-quote::before { content: "\f250"; }
.bi-chat-quote::before { content: "\f255"; }
.bi-check::before { content: "\f26e"; }
.bi-check-circle-fill::before { content: "\f26a"; }
.bi-check-lg::before { content: "\f633"; }
.bi-check2::before { content: "\f272"; }
.bi-chevron-left::before { content: "\f284"; }
.bi-chevron-right::before { content: "\f285"; }
.bi-clock::before { content: "\f293"; }
.bi-code-slash::before { content: "\f2c6"; }
.bi-cpu-fill::before { content: "\f2d5"; }
.bi-diagram-3::before { content: "\f2ee"; }
.bi-envelope::before { content: "\f32f"; }
.bi-envelope-paper::before { content: "\f73d"; }
.bi-facebook::before { content: "\f344"; }
.bi-file-earmark::before { content: "\f392"; }
.bi-file-text::before { content: "\f3b9"; }
.bi-fonts::before { content: "\f3da"; }
.bi-funnel::before { content: "\f3e1"; }
.bi-geo-alt::before { content: "\f3e8"; }
.bi-google::before { content: "\f3f0"; }
.bi-graph-up-arrow::before { content: "\f673"; }
.bi-hammer::before { content: "\f3ff"; }
.bi-images::before { content: "\f42b"; }
.bi-inbox::before { content: "\f42d"; }
.bi-instagram::before { content: "\f437"; }
.bi-kanban::before { content: "\f44d"; }
.bi-linkedin::before { content: "\f472"; }
.bi-list::before { content: "\f479"; }
.bi-palette-fill::before { content: "\f4b0"; }
.bi-paperclip::before { content: "\f4b3"; }
.bi-patch-check::before { content: "\f4b6"; }
.bi-patch-check-fill::before { content: "\f4b5"; }
.bi-patch-question::before { content: "\f4be"; }
.bi-person-workspace::before { content: "\f67a"; }
.bi-play-fill::before { content: "\f4f4"; }
.bi-send::before { content: "\f6c0"; }
.bi-shield-check::before { content: "\f52f"; }
.bi-shield-lock::before { content: "\f538"; }
.bi-star::before { content: "\f588"; }
.bi-star-fill::before { content: "\f586"; }
.bi-stars::before { content: "\f589"; }
.bi-telephone::before { content: "\f5c1"; }
.bi-tools::before { content: "\f5db"; }
.bi-twitter-x::before { content: "\f8db"; }
.bi-whatsapp::before { content: "\f618"; }
.bi-x::before { content: "\f62a"; }
.bi-x-lg::before { content: "\f659"; }

/* ===== variables.css ===== */
/* AM Solutions - Sistema di variabili visive (tema scuro, accento oro)

   Il sito era chiaro con accento blu. E' passato a fondo navy e accento oro:
   un fondo scuro fa risaltare le fotografie dei lavori e i riquadri delle
   interfacce, e l'oro - usato solo su azioni e numeri chiave, mai su interi
   blocchi - regge il tono premium meglio di un blu che su scuro diventa
   elettrico.

   I NOMI delle variabili non sono cambiati: cosi' ogni foglio di stile che le
   usa e' passato al tema nuovo senza essere riscritto. */

:root {
  /* Caratteri */
  --font-heading: 'Space Grotesk', 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'Instrument Serif', serif;

  /* Misure e tempi */
  --header-height: 80px;
  --border-radius-sm: 8px;
  --border-radius-md: 14px;
  --border-radius-lg: 24px;
  --border-radius-full: 9999px;
  --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-normal: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Fondi */
  --bg-primary: #0B1727;
  --bg-secondary: #0E1D30;
  --bg-tertiary: #122D41;
  --bg-glass: rgba(14, 29, 48, 0.72);
  --bg-glass-hover: rgba(18, 45, 65, 0.88);
  --bg-glass-nav: rgba(11, 23, 39, 0.86);
  --bg-input: #0E1D30;

  /* Sfumature */
  --gradient-primary: linear-gradient(135deg, #DAA858 0%, #E9C487 100%);
  --gradient-dark: linear-gradient(180deg, #0B1727 0%, #0E1D30 100%);
  --gradient-card: linear-gradient(135deg, rgba(18, 45, 65, 0.9) 0%, rgba(14, 29, 48, 0.55) 100%);
  --gradient-glow: linear-gradient(135deg, rgba(218, 168, 88, 0.08) 0%, rgba(233, 196, 135, 0.05) 100%);

  /* Testo */
  --text-primary: #EDF1F5;
  --text-secondary: #B4C1CE;
  --text-muted: #8695A6;
  --text-inverse: #0B1727;

  /* Accenti: l'oro e' per le azioni e i numeri chiave, non per i fondali */
  --color-primary: #DAA858;
  --color-secondary: #E9C487;
  --color-success: #61CEB6;
  --color-warning: #E9C487;
  --color-danger: #E0705F;

  /* Bordi */
  --border-color: rgba(190, 210, 230, 0.13);
  --border-color-hover: rgba(190, 210, 230, 0.3);
  --border-glass: 1px solid rgba(190, 210, 230, 0.13);
  --border-glass-hover: 1px solid rgba(190, 210, 230, 0.3);

  /* Ombre: su fondo scuro servono nere e profonde, non diffuse */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.34);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 8px 30px rgba(218, 168, 88, 0.26);
  --shadow-glow-purple: 0 8px 30px rgba(233, 196, 135, 0.22);
  --shadow-card-hover: 0 20px 48px rgba(0, 0, 0, 0.6);

  /* Varie */
  --blur-amount: blur(20px);
  --video-overlay: rgba(11, 23, 39, 0.55);

  /* Fa scurire anche le barre di scorrimento e i controlli dei moduli */
  color-scheme: dark;
}

/* ===== style.css ===== */
/* ==========================================
   AM SOLUTIONS - Main Stylesheet (style.css)
   ========================================== */

/* 1. Global Reset & Defaults */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: clip !important;
  overflow-y: visible !important;
  width: 100%;
  max-width: 100%;
}

/* Global Container Override for Full Width */
/* Il contenuto non arriva piu' a filo schermo: su un monitor largo una riga di
   testo da 95% di 1920 pixel e' una riga che l'occhio non riesce a rileggere.
   Il tetto lascia aria ai lati e tiene le righe a una lunghezza leggibile. */
.container {
  width: min(92%, 1320px) !important;
  max-width: min(92%, 1320px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 575px) {
  .container {
    width: 90% !important;
    max-width: 90% !important;
  }
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x: clip !important;
  overflow-y: visible !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: 700;
}

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

a:hover {
  filter: brightness(1.2);
}

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

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color-hover);
  border-radius: var(--border-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* 2. Glassmorphic Header & Navigation */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 999;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: height var(--transition-normal);
}

.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Era un velo bianco: sul tema scuro diventava una striscia chiara in cima
     alla pagina, l'unica cosa chiara del sito. Adesso e' lo stesso navy del
     fondo, appena piu' denso, cosi' l'intestazione si legge senza staccarsi. */
  background: rgba(8, 17, 30, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: linear-gradient(to bottom, black 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 100%);
  opacity: 0.85;
  transition: opacity var(--transition-normal), background var(--transition-normal), backdrop-filter var(--transition-normal);
  pointer-events: none;
}

.header.is-scrolled::before {
  opacity: 1;
  background: rgba(7, 15, 27, 0.92);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  mask-image: none;
  -webkit-mask-image: none;
  border-bottom: 1px solid var(--border-color);
}

.header.is-scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

.header .logo img {
  max-height: 48px;
  object-fit: contain;
}

/* Header Weather Style */
.header-weather {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 12px;
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: var(--border-radius-full);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.header-weather i {
  color: var(--color-primary);
  font-size: 1rem;
}

.header-weather:hover {
  color: var(--text-primary);
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Layout header ordering on desktop */
@media (min-width: 993px) {
  .header .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .header .logo {
    position: relative;
    left: auto;
    transform: none;
    z-index: 10;
    order: 0;
    margin-right: auto;
  }
  /* La nav occupa lo spazio libero tra logo e cluster destro e centra le voci
     al suo interno. In posizionamento assoluto finiva sotto al widget meteo
     quando le voci crescono di numero o di lunghezza. */
  .navmenu {
    position: static !important;
    left: auto !important;
    transform: none !important;
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0 24px; /* stacca le voci dal logo e dal cluster meteo/lingua */
  }
  .header .logo {
    flex-shrink: 0;
  }
  .navmenu ul {
    flex-wrap: nowrap;
  }
  .navmenu a {
    white-space: nowrap;
  }
  .header-weather {
    order: 2;
    margin-right: 16px;
    flex-shrink: 0;
  }
  .header-actions {
    order: 3;
    flex-shrink: 0;
  }
}

/* Compattamento progressivo della nav sui desktop stretti */
@media (min-width: 993px) and (max-width: 1500px) {
  .navmenu ul { gap: 16px; }
  .navmenu a { font-size: 0.88rem; }
}

@media (min-width: 993px) and (max-width: 1420px) {
  .navmenu ul { gap: 11px; }
  .navmenu a { font-size: 0.8rem; }
  .header-weather .weather-desc { display: none !important; }
  .header-weather { font-size: 0.8rem; padding: 5px 10px; }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .header-weather .weather-city { display: none !important; }
  .header-social-links { display: none !important; }
}

/* Layout header ordering on mobile */
@media (max-width: 992px) {
  .header .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
  .header-weather {
    order: 1;
  }
  .header-actions {
    order: 3;
  }
  @media (max-width: 576px) {
    .header-weather {
      padding: 4px 8px;
      font-size: 0.8rem;
    }
    .header-weather i {
      font-size: 0.85rem;
    }
    .header .logo img {
      max-height: 38px !important;
    }
  }
}

.navmenu ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.navmenu a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-secondary);
  position: relative;
  padding: 6px 0;
}

.navmenu a:hover,
.navmenu a.active {
  color: var(--text-primary);
}

.navmenu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  transition: var(--transition-fast);
}

.navmenu a:hover::after,
.navmenu a.active::after {
  width: 100%;
}

/* Header Utilities */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.theme-toggle-btn {
  background: transparent;
  border: var(--border-glass);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.theme-toggle-btn:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-color-hover);
}

.header-social-links {
  display: flex;
  gap: 12px;
}

.header-social-links a {
  color: var(--text-secondary);
  font-size: 1.1rem;
  transition: var(--transition-fast);
}

.header-social-links a:hover {
  color: var(--text-primary);
  transform: translateY(-2px);
}

/* Mobile Toggle */
.mobile-nav-toggle {
  display: none;
  font-size: 1.8rem;
  color: var(--text-primary);
  cursor: pointer;
}

/* 3. Hero Section (Premium Storyline Grid) */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 110px;
  overflow: hidden;
  background: transparent;
  width: 100%;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--bg-primary);
  background-image: url('../img/cta-bg.jpg');
  background-size: cover;
  background-position: center;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate3d(-50%, -50%, 0);
  object-fit: cover;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.video-overlay {
  display: none !important;
}

.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 110px);
  width: min(92%, 1320px) !important;
  padding-bottom: 60px;
  max-width: min(92%, 1320px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 auto;
}

.hero-title {
  align-self: flex-start;
  width: 100%;
  padding-top: 40px;
}

.hero-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 20px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--color-primary);
}

.eyebrow-orange {
  color: var(--text-secondary);
}

.eyebrow-orange::before {
  background: var(--color-warning);
}

.tracking-widget {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 320px;
  min-width: 0;
}

.tracking-input-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--border-glass);
  border-radius: var(--border-radius-full);
  padding: 4px 4px 4px 16px;
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tracking-input-group:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.hero h1 {
  font-weight: 850;
  font-size: clamp(2.4rem, 8.2vw, 7.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text-primary);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.hero h1 em {
  font-style: normal;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
}

.hero p {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 400;
}

.hero-meta {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--border-color);
  align-items: start;
  min-width: 0;
}

.hero-meta p {
  color: var(--text-secondary);
  max-width: 44ch;
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0;
}

.hero-meta .stat .num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  display: block;
  margin-bottom: 8px;
  line-height: 1;
  color: var(--text-primary);
}

.hero-meta .stat .num .unit {
  color: var(--color-primary);
}

.hero-meta .stat .label {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.hero-scroll {
  position: absolute;
  bottom: 36px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 5;
}

.hero-scroll .line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--color-primary), transparent);
  animation: scrollLine 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero-scroll span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Animations for Scroll Reveal Lines */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-line {
  display: block;
  overflow: hidden;
}

.reveal-line .inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-line.scroll-visible .inner {
  transform: translateY(0);
}

.reveal-line.delay-1 .inner {
  transition-delay: 0.1s;
}

.reveal-line.delay-2 .inner {
  transition-delay: 0.2s;
}

.reveal-line.delay-3 .inner {
  transition-delay: 0.3s;
}

/* Buttons */
.btn-get-started {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  padding: 14px 32px;
  border-radius: var(--border-radius-full);
  background: var(--gradient-primary);
  color: var(--text-inverse);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.btn-get-started:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

.btn-secondary-glass {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: var(--border-radius-full);
  background: var(--bg-glass-hover);
  color: var(--text-primary);
  border: var(--border-glass-hover);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-normal);
}

.btn-secondary-glass:hover {
  background: var(--bg-glass);
  transform: translateY(-3px);
}

/* Scroll Down Indicator */
.scroll-down {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--text-secondary);
  font-size: 1.5rem;
  animation: floatArrow 2.5s infinite ease-in-out;
  cursor: pointer;
}

/* 4. Common Section Layouts */
.section {
  padding: 100px 0;
  position: relative;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.section-title h2 em,
.about h2 em,
.about h4 em,
h2.display em {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: none;
}

.section-title p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 650px;
  margin: 0 auto;
}

.glass-card {
  background: var(--bg-glass);
  backdrop-filter: var(--blur-amount);
  -webkit-backdrop-filter: var(--blur-amount);
  border: var(--border-glass);
  border-radius: var(--border-radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
  transition: var(--transition-normal);
}

.glass-card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-lg);
}

/* 5. About Section */
.about .about-img-wrap {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about .about-img-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-glow);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.about h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.about h2 {
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: 24px;
}

.about p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 20px;
}

/* 6. Interactive Services Console Section */
.services-console {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

.console-sidebar {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.console-tab-btn {
  background: var(--bg-glass);
  border: var(--border-glass);
  color: var(--text-secondary);
  border-radius: var(--border-radius-md);
  padding: 18px 24px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition-normal);
}

.console-tab-btn i {
  font-size: 1.2rem;
  opacity: 0.5;
  transition: var(--transition-fast);
}

.console-tab-btn:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

.console-tab-btn.active {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

.console-tab-btn.active i {
  opacity: 1;
  transform: translateX(4px);
}

.console-display {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.console-pane {
  display: none;
  animation: paneReveal 0.5s ease forwards;
}

.console-pane.active {
  display: flex;
}

.pane-text {
  flex: 1;
}

.pane-text h3 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.pane-tagline {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-primary);
  margin-bottom: 24px;
}

.pane-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.detail-item-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-md);
  padding: 20px;
  transition: var(--transition-normal);
}

.detail-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.detail-item-header i {
  color: var(--color-primary);
  font-size: 1.25rem;
}

.detail-item-header h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.detail-item-card p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0;
}

.detail-item-card:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.pane-media {
  flex: 0 0 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pane-media img {
  max-height: 250px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 240, 255, 0.2));
  animation: floatMedia 5s infinite ease-in-out;
}

/* 7. Partner / Logo Ticker */
.certs {
  padding: 50px 0;
  border-top: var(--border-glass);
  border-bottom: var(--border-glass);
  background: var(--bg-secondary);
  overflow: hidden;
}

.about .certs {
  margin-top: 48px !important;
}

@media (min-width: 992px) {
  .certs {
    padding: 12px 0 !important;
  }
  .about .certs {
    margin-top: 12px !important;
  }
}

#about {
  padding-bottom: 70px !important;
  background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 600px);
}

#features {
  padding-top: 70px !important;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: var(--transition-fast);
}

.swiper-slide:hover {
  opacity: 1;
}

.swiper-slide img {
  max-height: 60px;
  max-width: 185px;
  object-fit: contain;
  /* Oro su trasparente: il filtro sta nelle definizioni in cima alla pagina
     e calcola l'opacita' dalla luminosita', cosi' il fondo bianco dei file
     sparisce invece di diventare un riquadro grigio. Prima qui c'era
     «grayscale + invert», che il fondo non lo toglieva: lo schiariva. */
  filter: url(#oro-da-luminanza);
  opacity: 0.78;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.swiper-slide:hover img {
  opacity: 1;
  transform: translateY(-2px);
}

/* 8. Portfolio (Gallery Grid) */
.portfolio-filters {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.portfolio-filters li {
  padding: 10px 22px;
  border-radius: var(--border-radius-full);
  background: var(--bg-glass);
  border: var(--border-glass);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.portfolio-filters li:hover,
.portfolio-filters li.filter-active {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.portfolio-item {
  margin-bottom: 24px;
}

.portfolio-card {
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: var(--border-glass);
  background: var(--bg-glass-hover);
  aspect-ratio: 1.2;
}

.portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 3, 7, 0.85);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: 2;
  text-align: center;
}

.portfolio-overlay h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.portfolio-overlay p {
  font-size: 0.82rem;
  color: var(--color-primary);
  margin-bottom: 16px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

.portfolio-preview-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: var(--shadow-glow);
  transform: translateY(15px);
  transition: transform var(--transition-normal);
}

.portfolio-card:hover img {
  transform: scale(1.06);
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-card:hover .portfolio-preview-btn {
  transform: translateY(0);
}

/* 9. Strengths Section */
.strengths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

.strength-card {
  text-align: center;
}

.strength-card .icon-box {
  width: 70px;
  height: 70px;
  border-radius: var(--border-radius-md);
  background: var(--gradient-primary);
  color: var(--text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 24px;
  box-shadow: var(--shadow-glow);
  transition: var(--transition-normal);
}

.strength-card:hover .icon-box {
  transform: translateY(-6px) rotate(8deg);
  box-shadow: 0 10px 25px rgba(0, 240, 255, 0.4);
}

.strength-card h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.strength-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* 10. Instagram Feed */
.instagram-feed {
  background: var(--bg-secondary);
}

.instagram-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.instagram-post-container blockquote {
  border-radius: var(--border-radius-md) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
}

/* 11. Call to Action (Parallax Background) */
.cta-parallax {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 120px 0;
  text-align: center;
  overflow: hidden;
}

.cta-parallax::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 3, 7, 0.75);
  z-index: 1;
}

.cta-parallax .container {
  position: relative;
  z-index: 2;
}

.cta-parallax h3 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 20px;
}

.cta-parallax p {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 750px;
  margin: 0 auto 30px;
}

/* 12. Pricing Section */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.pricing-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pricing-card.featured {
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-glow);
  transform: translateY(-8px);
}

.pricing-badge {
  position: absolute;
  top: 15px;
  right: -35px;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 35px;
  transform: rotate(45deg);
}

.pricing-header h3 {
  font-size: 1.25rem;
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.pricing-header .price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.pricing-header .price span {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-features li {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

.pricing-features li.na {
  opacity: 0.45;
  text-decoration: line-through;
}

.pricing-features li i.bi-check {
  color: var(--color-success);
  font-size: 1.2rem;
}

.pricing-features li i.bi-x {
  color: var(--color-danger);
  font-size: 1.2rem;
}

.pricing-footer {
  margin-top: auto;
}

.pricing-footer .btn-get-started,
.pricing-footer .btn-secondary-glass {
  width: 100%;
  justify-content: center;
}

/* 13. FAQ Section */
.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item-glass {
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  padding: 20px 24px;
  cursor: pointer;
  transition: var(--transition-normal);
}

.faq-question-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-question-wrap h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  color: var(--text-primary);
  /* Era un alone bianco, serviva a staccare il testo dal fondo chiaro.
     Su navy diventava una nebbia luminosa intorno alle lettere. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.faq-question-wrap i {
  color: var(--color-primary);
  font-size: 1.15rem;
  transition: var(--transition-normal);
}

.faq-answer-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer-wrap p {
  padding-top: 14px;
  font-size: 0.92rem;
  color: var(--text-primary) !important;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  /* Era un alone bianco, serviva a staccare il testo dal fondo chiaro.
     Su navy diventava una nebbia luminosa intorno alle lettere. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.faq-item-glass.active {
  border-color: var(--border-color-hover);
  background: var(--bg-glass-hover);
}

.faq-item-glass.active .faq-question-wrap i {
  transform: rotate(90deg);
  color: var(--color-secondary);
}

/* 14. Contact Section & Forms */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-info-box {
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: var(--transition-normal);
}

.contact-info-box:hover {
  border-color: var(--border-color-hover);
  transform: translateY(-3px);
}

.contact-info-box i {
  font-size: 1.5rem;
  color: var(--color-primary);
}

.contact-info-box h3 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.contact-info-box p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-primary);
}

/* Contact Form */
.php-email-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.php-email-form .form-control {
  background: var(--bg-input);
  border: var(--border-glass);
  color: var(--text-primary);
  border-radius: var(--border-radius-sm);
  padding: 14px;
  font-size: 0.95rem;
  width: 100%;
  outline: none;
  font-family: var(--font-body);
  transition: var(--transition-fast);
}

.php-email-form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.php-email-form textarea.form-control {
  resize: none;
}

.gdpr-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gdpr-wrap input {
  margin-top: 4px;
}

.gdpr-wrap label {
  font-size: 0.82rem;
  color: var(--text-primary) !important;
  font-weight: 700;
  line-height: 1.35;
  /* Era un alone bianco, serviva a staccare il testo dal fondo chiaro.
     Su navy diventava una nebbia luminosa intorno alle lettere. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.gdpr-wrap label a {
  color: var(--color-primary);
}

/* Form Submit Status Overlay */
.form-status {
  text-align: center;
  font-size: 0.95rem;
  display: none;
  padding: 12px;
  border-radius: var(--border-radius-sm);
  margin-bottom: 12px;
}

.form-status.loading {
  display: block;
  background: var(--bg-glass-hover);
  color: var(--color-primary);
}

.form-status.error {
  display: block;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

.form-status.success {
  display: block;
  background: rgba(5, 150, 105, 0.15);
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

/* 15. Footer */
.footer {
  background: var(--bg-primary) !important;
  border-top: none !important;
  padding-top: 130px !important;
  font-family: var(--font-body);
  box-shadow: none !important;
}

.footer-top {
  padding-bottom: 50px;
}

.footer-contact {
  margin-top: 24px;
}

.footer-contact p {
  margin-bottom: 8px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.footer-links h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links li {
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.footer-links a {
  color: var(--text-secondary);
}

.footer-links a:hover,
.footer-links li:hover {
  color: var(--text-primary);
  transform: translateX(3px);
}

.copyright {
  border-top: var(--border-glass);
  padding: 30px 0 12px 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.copyright .credits a {
  color: var(--color-primary);
}

.copyright .credits .sep {
  margin: 0 10px;
  color: var(--text-muted);
}

/* Telefono e mail nel piede: sono collegamenti veri, si deve vedere. */
.footer-contact a {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-contact a:hover {
  color: var(--color-primary);
}

/* 16. Scroll Top Button */
.scroll-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 998;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: var(--shadow-glow);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-normal);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.scroll-top.active {
  opacity: 1;
  pointer-events: auto;
}

.scroll-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 240, 255, 0.4);
}

/* 17. Animations Keyframes */
@keyframes paneReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatArrow {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}

@keyframes floatMedia {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ==========================================
   Responsive Adaptations
   ========================================== */
.navmenu-video-bg {
  display: none !important;
}

@media (max-width: 992px) {
  .header {
    height: 70px;
  }
  
  .hero h1 {
    font-size: 2.8rem;
  }
  
  .hero p {
    font-size: 1.1rem;
  }
  
  .services-console {
    flex-direction: column;
  }
  
  .console-sidebar {
    flex: auto;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  
  .console-tab-btn {
    white-space: nowrap;
    padding: 14px 20px;
    font-size: 0.95rem;
  }
  
  .console-tab-btn i {
    display: none;
  }
  
  .console-pane {
    flex-direction: column;
  }
  
  .pane-media {
    flex: auto;
    order: -1;
    margin-bottom: 20px;
  }
  
  .form-group-wrap {
    grid-template-columns: 1fr;
  }
  
  .navmenu {
  position: fixed !important;
  top: 85px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-15px) !important;
  width: 90vw !important;
  max-width: 420px !important;
  height: auto !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 28px !important;
  padding: 30px 24px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 10000 !important;
}

  [data-theme="dark"] .navmenu {
  background: rgba(15, 15, 20, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.72), 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

  .navmenu.active {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  .navmenu ul {
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  
  .navmenu ul li {
    width: 100% !important;
    text-align: center !important;
  }
  
  .navmenu ul li a {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #2b2b2b !important;
    text-shadow: none !important;
    transition: color 0.2s ease !important;
  }

  .navmenu ul li a:hover,
  .navmenu ul li a.active {
    color: var(--color-primary) !important;
  }

  [data-theme="dark"] .navmenu ul li a {
    color: #ffffff !important;
  }

  [data-theme="dark"] .navmenu ul li a:hover,
  [data-theme="dark"] .navmenu ul li a.active {
    color: var(--color-primary) !important;
  }
  
  .mobile-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10005 !important;
    position: relative !important;
    color: var(--text-primary) !important;
    font-size: 1.6rem !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
  }

  [data-theme="dark"] .mobile-nav-toggle {
    background: rgba(15, 15, 20, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  }
  
  .header-social-links {
    display: none;
  }

  /* Sfondo Video per Menu Hamburger Mobile */
  .navmenu-video-bg {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    z-index: -1 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    pointer-events: none !important;
  }

  .navmenu-video-bg video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    transform: translate3d(-50%, -50%, 0) !important;
    object-fit: cover !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    opacity: 0.18 !important;
  }

  .navmenu-video-overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  [data-theme="dark"] .navmenu-video-overlay {
    background: linear-gradient(135deg, rgba(15, 15, 20, 0.2) 0%, rgba(15, 15, 20, 0.6) 100%) !important;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
  }
  
  .section {
    padding: 60px 0;
  }
  
  .contact-info-grid {
    grid-template-columns: 1fr;
  }
  
  .pricing-card.featured {
    transform: translateY(0);
  }
}


/* Logo Animato Trasparenza */
.about-img-wrap-story {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-logo-gif {
  max-width: 100%;
  mix-blend-mode: multiply; /* Rende lo sfondo bianco del GIF trasparente */
}

/* Cardless Storyline Flow */
.about-text-story {
  padding: 20px 0;
}

.services-console-story {
  display: flex;
  gap: 50px;
  margin-top: 40px;
}

.console-sidebar-story {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.console-tab-btn-story {
  background: transparent;
  border: none;
  border-left: 2px solid var(--border-color);
  color: var(--text-secondary);
  padding: 12px 24px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition-fast);
}

.console-tab-btn-story i {
  font-size: 1.2rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: var(--transition-fast);
}

.console-tab-btn-story:hover {
  color: var(--text-primary);
  border-left-color: var(--text-muted);
}

.console-tab-btn-story.active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

.console-tab-btn-story.active i {
  opacity: 1;
  transform: translateX(0);
}

.console-display-story {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pane-details-grid-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 30px;
}

.detail-item-story {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 24px;
  transition: var(--transition-normal);
}

.detail-item-header-story {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.detail-item-header-story i {
  color: var(--color-primary);
  font-size: 1.4rem;
}

.detail-item-header-story h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}

.detail-item-story p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.pane-media-story {
  flex: 0 0 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Strengths Story Flow */
.strengths-grid-story {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin-top: 40px !important;
}

@media (max-width: 991px) {
  .strengths-grid-story {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 576px) {
  .strengths-grid-story {
    grid-template-columns: 1fr !important;
  }
}

.strength-item-story {
  text-align: center;
  background: var(--bg-glass-hover);
  border: var(--border-glass);
  border-radius: var(--border-radius-lg);
  padding: 35px 24px;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  position: relative;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

.strength-item-story::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.strength-item-story:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  border-color: rgba(218, 168, 88, 0.4);
}

.strength-item-story:hover::before {
  opacity: 1;
}

.icon-box-story {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(218, 168, 88, 0.08) 0%, rgba(233, 196, 135, 0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  font-size: 1.8rem;
  color: var(--color-primary);
  border: 1px solid rgba(218, 168, 88, 0.18);
  transition: transform var(--transition-normal), background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.strength-item-story:hover .icon-box-story {
  transform: scale(1.12) rotate(10deg);
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
}

.strength-item-story h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.strength-item-story p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Pricing Story Flow */
.pricing-grid-story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 50px;
}

.pricing-card-story {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-color);
  padding-top: 30px;
}

.pricing-card-story.featured {
  border-top: 3px solid var(--color-primary);
  padding-top: 28px;
}

.pricing-badge-story {
  position: absolute;
  top: 8px;
  right: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
  font-weight: 600;
}

.pricing-header-story h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.price-story {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 25px;
}

.price-story span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.pricing-features-story {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-features-story li {
  font-size: 0.92rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-features-story li.na {
  opacity: 0.45;
  text-decoration: line-through;
}

.pricing-features-story li i.bi-check {
  color: var(--color-primary);
}

.pricing-features-story li i.bi-x {
  color: var(--color-danger);
}

.pricing-footer-story {
  margin-top: auto;
}

.pricing-footer-story .btn-get-started,
.pricing-footer-story .btn-secondary-glass {
  width: 100%;
  justify-content: center;
}

/* FAQ Story Flow */
.faq-accordion-story {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.faq-item-story {
  border-bottom: 1px solid var(--border-color);
  padding: 24px 0;
  cursor: pointer;
}

.faq-item-story:first-of-type {
  border-top: 1px solid var(--border-color);
}

/* Contact Story Flow */
.contact-info-grid-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.contact-info-box-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  padding: 24px 16px;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  height: 100%;
}

.contact-info-box-story:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(218, 168, 88, 0.3);
}

.contact-info-box-story i {
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 12px;
  transition: transform var(--transition-fast);
}

.contact-info-box-story:hover i {
  transform: scale(1.15);
}

.contact-info-box-story h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

.contact-info-box-story p {
  margin: 0;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  font-size: 0.88rem;
  line-height: 1.4;
  text-shadow: none !important;
}

.contact-form-story {
  padding-left: 20px;
}

/* Google Review Modal */
.review-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(245, 245, 247, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.review-modal-wrap.hidden {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

.review-modal-card {
  background: var(--bg-secondary);
  border: var(--border-glass);
  border-radius: var(--border-radius-lg);
  width: 90%;
  max-width: 500px;
  padding: 40px;
  box-shadow: var(--shadow-lg);
  animation: reviewModalReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.review-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.review-modal-header h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
}

.btn-close-modal {
  background: var(--bg-primary);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-close-modal:hover {
  background: var(--bg-tertiary);
}

.star-rating-input {
  display: flex;
  gap: 8px;
  font-size: 1.8rem;
  margin-top: 5px;
}

.star-rating-input .star-input {
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.star-rating-input .star-input:hover,
.star-rating-input .star-input.text-warning {
  color: var(--color-warning) !important;
}

.gdpr-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

@keyframes reviewModalReveal {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 991px) {
  .services-console-story {
    flex-direction: column;
    gap: 30px;
  }
  .console-sidebar-story {
    flex-direction: row;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    width: 100%;
  }
  .console-tab-btn-story {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    white-space: nowrap;
  }
  .console-tab-btn-story.active {
    border-bottom-color: var(--color-primary);
  }
  .pane-details-grid-story {
    grid-template-columns: 1fr;
  }
  .contact-form-story {
    padding-left: 0;
  }
}

/* ==========================================================================
   Case Study & Pricing Merger CSS (V4.1)
   ========================================================================== */
.pane-case-pricing-story {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  background: var(--bg-primary);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-top: 30px;
}

.case-study-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-study-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.case-study-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.pricing-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  border-left: 1px solid var(--border-color);
  padding-left: 20px;
}

.pricing-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.pricing-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--color-primary);
  margin: 4px 0;
}

.pricing-value .period {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.pricing-subtext {
  font-size: 0.75rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .pane-case-pricing-story {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pricing-block {
    border-left: none;
    padding-left: 0;
    align-items: flex-start;
    text-align: left;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
  }
}

/* ==========================================================================
   Abstract Services Grid CSS (V4.3)
   ========================================================================== */
.services-abstract-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  position: relative;
  margin-top: 60px;
}

.service-abstract-card {
  position: relative;
  background: var(--bg-glass);
  backdrop-filter: var(--blur-amount);
  -webkit-backdrop-filter: var(--blur-amount);
  border: var(--border-glass);
  border-radius: var(--border-radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color var(--transition-normal);
  transform-style: preserve-3d;
  perspective: 1000px;
  overflow: visible;
}

/* Asymmetric Staggering */
.services-abstract-grid .service-abstract-card:nth-child(even) {
  margin-top: 60px;
}

.services-abstract-grid .service-abstract-card:nth-child(odd) {
  margin-bottom: 60px;
}

.service-abstract-card:hover {
  border-color: rgba(218, 168, 88, 0.2);
  box-shadow: var(--shadow-lg), 0 0 30px var(--glow-color, rgba(218, 168, 88, 0.1));
}

.service-abstract-number {
  position: absolute;
  top: -25px;
  left: 30px;
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 800;
  color: rgba(218, 168, 88, 0.04);
  z-index: 1;
  pointer-events: none;
  transition: color var(--transition-normal);
}

.service-abstract-card:hover .service-abstract-number {
  color: rgba(218, 168, 88, 0.08);
}

.service-abstract-content {
  position: relative;
  z-index: 2;
  transform: translateZ(30px);
}

.service-abstract-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
}

.service-abstract-header i {
  font-size: 2.2rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.service-abstract-header h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.service-abstract-tagline {
  font-size: 1.02rem;
  font-style: italic;
  color: var(--color-primary);
  margin-bottom: 24px;
}

.service-abstract-list {
  list-style: none;
  padding: 0;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-abstract-list li {
  font-size: 0.95rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-abstract-list li i {
  color: var(--color-primary);
  font-weight: bold;
}

/* ==========================================================================
   Abstract Projects Grid CSS (V4.3)
   ========================================================================== */
.projects-abstract-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 40px;
  margin-top: 60px;
  align-items: start;
}

.project-abstract-item {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
  background: var(--bg-secondary); /* Solid background to prevent overlap transparency bleed */
  border: var(--border-glass);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
}

.project-abstract-item:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.02) !important;
  box-shadow: var(--shadow-lg), 0 0 25px rgba(218, 168, 88, 0.15);
  z-index: 10;
}

/* Alternating asymmetric tilts */
.project-abstract-item.tilt-left {
  transform: rotate(-1.5deg);
  margin-top: -20px;
}

.project-abstract-item.tilt-right {
  transform: rotate(1.5deg);
  margin-top: 40px;
}

.project-abstract-item.add-project-item {
  grid-column: span 2;
  max-width: 600px;
  margin: 40px auto 0;
  transform: none;
  background-color: var(--bg-secondary); /* Solid base background to prevent bleed-through */
  background-image: linear-gradient(135deg, rgba(218, 168, 88, 0.03) 0%, rgba(0, 240, 255, 0.02) 100%);
  border: 2px dashed rgba(218, 168, 88, 0.25);
  box-shadow: none;
  text-align: center;
  padding: 40px;
}

.project-abstract-item.add-project-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md), 0 0 25px rgba(218, 168, 88, 0.10);
}

.add-project-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.add-project-icon {
  font-size: 3.5rem;
  color: var(--color-primary);
  margin-bottom: 20px;
  animation: floatMedia 4s infinite ease-in-out;
}

.add-project-item h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.add-project-item p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 380px;
  margin-bottom: 24px;
}

/* Mock Browser Styling */
.mock-browser {
  display: flex;
  flex-direction: column;
  height: 284px;
  width: 100%;
  border-radius: var(--border-radius-md);
  border: var(--border-glass);
  overflow: hidden;
  position: relative;
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

.mock-browser-header {
  height: 32px;
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 5px;
  flex-shrink: 0;
  z-index: 10;
}

.dot-btn {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dot-btn.red { background: #ff5f56; }
.dot-btn.yellow { background: #ffbd2e; }
.dot-btn.green { background: #27c93f; }

.mock-browser-url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  padding: 1px 0;
  margin: 0 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-browser-content {
  flex: 1;
  position: relative;
  width: 100%;
  height: calc(100% - 32px);
  background: #fff;
  overflow: hidden;
}

.browser-screenshot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top center;
  z-index: 1;
  pointer-events: none;
}

.mock-browser-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px !important; /* Previene l'espansione su iOS Safari */
  min-width: 100% !important;
  height: 1400px;
  border: none;
  z-index: 2;
  transform: translateY(0);
  animation: iframeScroll 35s linear infinite;
  pointer-events: none;
  background: #ffffff; /* Evita di mostrare lo screenshot statico in trasparenza */
}

.mock-browser-content iframe.no-scroll {
  animation: none !important;
}

/* Pause scroll and enable pointer events on hover - solo desktop */
@media (min-width: 993px) {
  .project-abstract-item:hover iframe {
    animation-play-state: paused;
    pointer-events: auto;
  }
}

@keyframes iframeScroll {
  0% { transform: translateY(0); }
  50% { transform: translateY(-75%); }
  100% { transform: translateY(0); }
}

.project-slide-details h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 8px;
}

.project-slide-details p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 16px;
  flex-grow: 1;
}

.project-category-tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* Premium Project Browser Overlay Styles */
.mock-browser-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
}

.browser-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-normal);
}

.mock-browser:hover .browser-overlay {
  opacity: 1;
}

.browser-overlay-content {
  text-align: center;
  transform: translateY(15px);
  transition: transform var(--transition-normal);
}

.mock-browser:hover .browser-overlay-content {
  transform: translateY(0);
}

.btn-launch-demo {
  display: inline-block;
  padding: 8px 16px;
  background: #ffffff;
  color: #1d1d1f !important;
  border-radius: var(--border-radius-full);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-launch-demo:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

/* Smooth screenshot auto-slide animation on mock browser hover */
.mock-browser .browser-screenshot {
  transition: background-position 8s ease-in-out;
}

.mock-browser:hover .browser-screenshot {
  background-position: bottom center !important;
}

/* Obsolete iframe rules cleaned up */
.mock-browser-content iframe {
  display: none !important;
}

/* 3D Robot Companion Styling removed in V4.8 - Migrated inside Chatbot Background */

/* Protezione Anti-Copia (Blocco Selezione Testo) */
body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Permetti l'interazione testuale normale sui campi input e textarea */
input, textarea, [contenteditable="true"] {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* Logo Animato inside mobile navmenu & footer (V4.8) */
.mobile-menu-logo {
  display: none;
}

.footer-logo-gif {
  max-height: 100px;
  mix-blend-mode: multiply;
  opacity: 0.95;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.footer-logo-gif:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* Utility Classes */
.fs-7 {
  font-size: 0.8rem !important;
}

@media (max-width: 992px) {
  .mobile-menu-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    padding-top: 30px;
    width: 100%;
  }
  .mobile-menu-logo-img {
    max-width: 130px;
    mix-blend-mode: multiply;
    opacity: 0.9;
  }
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Responsive mobile Hero section layout & typography */
@media (max-width: 768px) {
  .hero {
    padding-top: 75px !important; /* Compact top padding matching the 70px mobile header */
  }
  .hero-content {
    min-height: auto !important; /* Fit content naturally to prevent vertical cutoff on short viewports */
    justify-content: flex-start !important;
    padding-bottom: 20px !important;
  }
  .hero-title {
    padding-top: 10px !important; /* Minimize gap before title starts */
  }
  .hero-top-row {
    margin-bottom: 12px !important;
    gap: 10px !important;
  }
  .hero-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
  }
  .hero-meta p {
    grid-column: span 2 !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }
  .hero-meta .stat .num {
    font-size: 2.2rem !important;
  }

  /* Riduzione titoli su mobile per prevenire spezzamento e overflow */
  .section-title h2 {
    font-size: 1.75rem !important;
  }
  .about h2, h2.display {
    font-size: 1.5rem !important;
  }

  /* Services Abstract Grid mobile optimization */
  .services-abstract-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 30px !important;
  }
  
  .service-abstract-card {
    padding: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .services-abstract-grid .service-abstract-card:nth-child(even),
  .services-abstract-grid .service-abstract-card:nth-child(odd) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .service-abstract-number {
    font-size: 3.5rem !important;
    top: -15px !important;
    left: 20px !important;
  }

  /* Projects Abstract Grid mobile optimization */
  .projects-abstract-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    margin-top: 30px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  .project-abstract-item {
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 20px 16px !important; /* Minore padding laterale per evitare di essere tagliato */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .project-abstract-item.tilt-left,
  .project-abstract-item.tilt-right {
    transform: none !important;
    margin-top: 0 !important;
  }
  
  .project-abstract-item.add-project-item {
    grid-column: span 1 !important;
    margin-top: 0 !important;
    padding: 24px !important;
  }

  .mock-browser {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .mock-browser-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Spaziatura ridotta su mobile (30% reduction from 70px) */
  #about {
    padding-bottom: 45px !important;
  }
  #features {
    padding-top: 45px !important;
  }
  .about-logo-gif {
    max-width: 240px !important;
    margin: 0 auto;
  }

  /* General mobile overflow block */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }
  
  #main, .hero, .about, .features, #projects, #strengths, #contact, .footer {
    overflow-x: clip !important;
  }

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Swiper Projects Cards Stack Carousel */
.projects-cards-swiper {
  width: 300px;
  height: 520px;
  padding: 10px 0 50px 0;
  margin: 0 auto;
  overflow: visible; /* Per vedere le card sottostanti della pila di lato */
}

/* Fallback layout if Swiper JS fails to load or initialize (avoids side-by-side spill) */
.projects-cards-swiper:not(.swiper-initialized) {
  height: auto !important;
  width: 100% !important;
  max-width: 950px !important;
  overflow: visible !important;
}
.projects-cards-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
  height: auto !important;
  transform: none !important;
}
.projects-cards-swiper:not(.swiper-initialized) .swiper-slide {
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
}
.projects-cards-swiper:not(.swiper-initialized) .swiper-button-next,
.projects-cards-swiper:not(.swiper-initialized) .swiper-button-prev {
  display: none !important; /* Hide navigation arrows in fallback list layout */
}

.projects-cards-swiper .swiper-slide {
  background: transparent;
  border-radius: var(--border-radius-lg);
  height: 100%;
  opacity: 1 !important; /* Force full opacity to prevent global swiper-slide opacity inheritance */
}

.projects-cards-swiper .project-abstract-item {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  transform: none !important; /* Rimuove le inclinazioni del vecchio layout a griglia */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Modifiche layout add-project-item per il carousel */
.projects-cards-swiper .project-abstract-item.add-project-item {
  max-width: 100%;
  height: 100%;
  margin: 0 !important;
  display: flex;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box;
  padding: 30px;
}

/* Navigazione per Swiper Cards */
.projects-cards-swiper .swiper-button-next,
.projects-cards-swiper .swiper-button-prev {
  color: var(--color-primary);
  width: 44px;
  height: 44px;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--border-glass);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 20;
}

.projects-cards-swiper .swiper-button-next:hover,
.projects-cards-swiper .swiper-button-prev:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: 0 0 15px rgba(255, 149, 0, 0.4);
}

.projects-cards-swiper .swiper-button-next::after,
.projects-cards-swiper .swiper-button-prev::after {
  font-size: 1.1rem;
  font-weight: bold;
}

/* Posizionamento fuori dalla pila delle card su desktop */
@media (min-width: 768px) {
  .projects-cards-swiper {
    width: 700px;
    height: 520px;
  }
  .projects-cards-swiper .project-abstract-item {
    flex-direction: row;
    align-items: center;
    gap: 30px;
    padding: 30px;
  }
  .projects-cards-swiper .mock-browser {
    width: 50%;
    height: 380px;
    flex-shrink: 0;
  }
  .projects-cards-swiper .project-slide-details {
    width: 50%;
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .projects-cards-swiper .swiper-button-next {
    right: -60px;
  }
  .projects-cards-swiper .swiper-button-prev {
    left: -60px;
  }
}

@media (min-width: 1200px) {
  .projects-cards-swiper {
    width: 950px;
    height: 500px;
  }
  .projects-cards-swiper .project-abstract-item {
    gap: 40px;
    padding: 40px;
  }
  .projects-cards-swiper .mock-browser {
    width: 55%;
  }
  .projects-cards-swiper .project-slide-details {
    width: 45%;
  }
  .projects-cards-swiper .swiper-button-next {
    right: -80px;
  }
  .projects-cards-swiper .swiper-button-prev {
    left: -80px;
  }
}

@media (max-width: 767px) {
  .projects-cards-swiper .swiper-button-next,
  .projects-cards-swiper .swiper-button-prev {
    display: none; /* Nascondi pulsanti su mobile, lo swipe è sufficiente */
  }
}

/* Compattamento recensioni Google (Chi siamo) */
.reviews-grid-compact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-item-compact-story {
  background: var(--bg-glass-hover);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  padding: 16px;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.review-item-compact-story:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 992px) {
  .about-logo-gif {
    max-height: 180px !important;
    width: auto !important;
    margin: 0 auto !important;
  }

  .reviews-grid-compact {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .review-item-compact-story {
    padding: 10px 12px !important;
    margin-top: 0 !important;
  }

  .review-item-compact-story h5,
  .review-item-compact-story h3 {
    font-size: 0.82rem !important;
  }

  .review-item-compact-story p {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  .review-item-compact-story .text-muted.small,
  .review-item-compact-story .text-secondary.small,
  .review-item-compact-story .text-success.small {
    font-size: 0.68rem !important;
  }

  .real-reviews-feed-story {
    margin-top: 24px !important;
  }

  .google-badge-story {
    margin-top: 16px !important;
  }
}

/* Custom certs row styles for compact layout */
.certs-row {
  margin-top: 48px;
  padding-top: 24px;
  margin-bottom: 16px;
}
@media (min-width: 992px) {
  .certs-row {
    margin-top: 24px !important;
    padding-top: 0 !important;
    margin-bottom: 8px !important;
  }
}


/* Particles Canvas Position Fix */
.particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1;
  pointer-events: none;
}

/* ==========================================================================
   Solution LAB — step del programma su selezione
   ========================================================================== */
.lab-step-card {
  height: 100%;
  background: var(--bg-glass-hover);
  border: var(--border-glass);
  border-radius: var(--border-radius-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.lab-step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.lab-step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.lab-step-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px 0;
}

.lab-step-card p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}

/* ==========================================================================
   Marquee progetti realizzati (sotto la fascia certificazioni)
   ========================================================================== */
.projects-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.projects-marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: pm-scroll 70s linear infinite;
}

.projects-marquee:hover .projects-marquee-track {
  animation-play-state: paused;
}

@keyframes pm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.pm-item {
  flex: 0 0 auto;
  width: 212px;
  text-decoration: none;
  display: block;
  background: var(--bg-glass-hover);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.pm-item:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

.pm-shot {
  height: 92px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border-color);
}

.pm-meta {
  padding: 8px 10px 10px;
}

.pm-cat {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 4px;
}

/* Le schede create da JavaScript usano <h3>, non piu' <h5>: dopo il
   titolo <h2> della sezione, un <h5> e' un salto di livello, e per chi
   naviga con lo screen reader l'indice della pagina diventa bucato
   (PageSpeed, accessibilita'). Il vecchio selettore resta accanto al
   nuovo: cosi' niente cambia di aspetto, ne' qui ne' altrove. */
.pm-meta h5,
.pm-meta h3 {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.pm-meta p {
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .projects-marquee-track { animation: none; }
  .projects-marquee { overflow-x: auto; }
}

/* ==========================================================================
   Selettore lingua IT / EN (accanto al widget meteo)
   ========================================================================== */
.header-lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--bg-glass);
  border: var(--border-glass);
  border-radius: var(--border-radius-full);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  margin-right: 16px;
}

.header-lang .lang-btn {
  background: none;
  border: none;
  padding: 1px 5px;
  border-radius: var(--border-radius-full);
  font-family: var(--font-mono, var(--font-heading));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-normal), background-color var(--transition-normal);
  line-height: 1.5;
}

.header-lang .lang-btn:hover {
  color: var(--text-primary);
}

.header-lang .lang-btn.is-active {
  color: #fff;
  background: var(--color-primary);
}

.header-lang .lang-sep {
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1;
}

@media (min-width: 993px) {
  .header-lang { order: 2; }
  .header-weather { order: 2; }
}

/* Sul mobile il logo è centrato in posizione assoluta e occuperebbe lo spazio
   accanto al meteo: il selettore va quindi nel gruppo di destra, vicino al menu,
   e mostra solo la lingua verso cui si passa per stare in pochi pixel. */
@media (max-width: 992px) {
  .header-lang {
    order: 3;
    /* il container usa justify-content: space-between e senza questo il selettore
       si posiziona al centro, esattamente sotto al logo centrato in assoluto */
    margin-left: auto;
    margin-right: 6px;
    padding: 4px 6px;
    gap: 0;
  }
  .header-lang .lang-sep { display: none; }
  .header-lang .lang-btn.is-active { display: none; }
  .header-lang .lang-btn {
    font-size: 0.72rem;
    padding: 2px 6px;
    color: var(--text-primary);
  }
  .header-actions { order: 4; }
}

@media (max-width: 576px) {
  .header .logo img { max-height: 34px !important; }
}

@media (max-width: 420px) {
  .header-weather .weather-city,
  .header-weather .weather-desc { display: none !important; }
}

/* ==========================================================================
   Titoli in corsivo: Instrument Serif ha glifi più alti e sporgenti a destra
   della riga di testo. Senza questo respiro le lettere vengono tagliate
   quando la sezione entra nel suo livello di compositing durante lo scroll.
   ========================================================================== */
.section-title h2,
h2.display,
.about-text-story h2 {
  line-height: 1.3;
  padding-bottom: 0.14em;
  overflow-wrap: break-word;
}

.section-title h2 em,
h2.display em,
.about-text-story h2 em,
.hero-title h1 em {
  padding-right: 0.08em;
  padding-bottom: 0.02em;
}

/* Le righe animate dell'hero mascherano il testo: senza margine il corsivo
   perde la coda della lettera durante la rivelazione. */
.hero-title .reveal-line {
  padding-bottom: 0.06em;
}

/* ==========================================================================
   Sfondo video di sezione (usato dalla sola sezione Servizi)
   Il riquadro è più alto della sezione perché immersive.js trasla i figli
   fino a 100px in verticale durante la dissolvenza: senza margine si
   vedrebbero due bande vuote sopra e sotto.
   ========================================================================== */
.section-video-bg {
  position: absolute;
  top: -140px;
  left: 0;
  width: 100%;
  height: calc(100% + 280px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--bg-primary);
}

.section-video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate3d(-50%, -50%, 0);
  object-fit: cover;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Il filmato e' girato su fondo bianchissimo. Sul tema scuro va invertito e
     raffreddato, se no e' una lastra di luce in mezzo alla pagina e il titolo
     della sezione sopra non si legge piu'. */
  filter: invert(1) hue-rotate(180deg) brightness(0.52) contrast(1.1) saturate(0.6);
  opacity: 0.5;
}

/* Velo chiaro: senza, il testo scuro delle card diventa illeggibile sul video. */
.section-video-scrim {
  position: absolute;
  inset: 0;
  /* Il velo era chiaro, per staccare il testo scuro dal video. Adesso il testo
     e' chiaro e il fondo e' navy: il velo deve essere navy. */
  background:
    linear-gradient(180deg,
      rgba(11, 23, 39, 0.96) 0%,
      rgba(11, 23, 39, 0.72) 28%,
      rgba(11, 23, 39, 0.72) 72%,
      rgba(11, 23, 39, 0.96) 100%);
}

/* Le card devono restare davanti al video */
#features > .container {
  position: relative;
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .section-video-bg video { display: none; }
}

/* ==========================================================================
   Tipografia e spaziature fluide per le sezioni a schermo intero.
   Le misure dipendono anche da vh: su schermi bassi (portatili 768px, tablet
   in orizzontale) i testi rimpiccioliscono da soli invece di sforare.
   Il ridimensionamento finale di sicurezza lo fa autofitSezioni() in main.js.
   ========================================================================== */
@media (min-width: 992px) {
  .section .section-title h2,
  .section h2.display {
    font-size: clamp(1.55rem, 1.1vw + 1.5vh, 2.6rem);
    margin-top: clamp(6px, 1vh, 16px);
    margin-bottom: clamp(6px, 1vh, 16px);
  }

  .section .section-title p {
    font-size: clamp(0.8rem, 0.25vw + 0.55vh, 1.02rem);
    margin-bottom: clamp(4px, 0.8vh, 14px);
  }

  .section .section-title {
    margin-bottom: clamp(6px, 1.4vh, 26px);
  }

  .strength-item-story {
    padding: clamp(14px, 2.4vh, 35px) clamp(12px, 1.6vw, 24px);
  }

  .strength-item-story h3 {
    font-size: clamp(0.92rem, 0.35vw + 0.5vh, 1.15rem);
  }

  .strength-item-story p {
    font-size: clamp(0.76rem, 0.2vw + 0.42vh, 0.95rem);
  }

  .lab-step-card {
    padding: clamp(12px, 1.9vh, 20px) clamp(11px, 1.1vw, 18px);
  }

  .lab-step-card h3 { font-size: clamp(0.88rem, 0.3vw + 0.45vh, 1.05rem); }
  .lab-step-card p  { font-size: clamp(0.72rem, 0.18vw + 0.38vh, 0.82rem); }

  .pm-shot { height: clamp(72px, 10vh, 92px); }
  .pm-item { width: clamp(178px, 15vw, 212px); }

  .service-abstract-card { padding: clamp(14px, 2vh, 28px) clamp(14px, 1.2vw, 24px); }
}

/* ==========================================================================
   Landing autonoma Solutions LAB (pagina per le campagne social)
   Nessuna navigazione verso il resto del sito: chi arriva dal QR ha una sola
   strada, la candidatura. Da qui anche l'assenza di menu e di footer completo.
   ========================================================================== */
.lp-testa {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 24px 0;
}

/* Logo animato del preloader: il file è 1280x593, quindi resta nitido anche su
   schermi retina. Ha il fondo bianco e non trasparente, per questo serve
   mix-blend-mode: multiply, lo stesso trattamento usato nel resto del sito. */
.lp-logo-gif {
  flex: 0 0 auto;
  max-width: 190px;
  height: auto;
  mix-blend-mode: multiply;
}

.lp-programma {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-full);
  padding: 8px 16px;
  white-space: nowrap;
}

.lp-piede {
  position: relative;
  z-index: 5;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted, var(--text-secondary));
}

.lp-piede-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.lp-piede a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.lp-piede a:hover {
  color: var(--color-primary);
  border-bottom-color: currentColor;
}

/* La landing scorre normalmente: qui le sezioni non devono essere sticky. */
body.landing-page .section {
  position: static !important;
  height: auto !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

body.landing-page .main {
  margin-top: 8px !important;
}

@media (max-width: 576px) {
  .lp-testa { padding: 18px 18px 0; }
  .lp-logo-gif { max-width: 132px; }
  .lp-programma { font-size: 10px; padding: 6px 12px; }
}

/* ===== animations.css ===== */
/* AM Solutions - Custom Keyframes & Scroll Animations Stylesheet */

/* AOS / Intersection Observer fallback transitions */
[data-scroll] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-scroll].scroll-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom Scroll Delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* Custom Keyframe Animations */

/* 1. Neon Glowing Border animation for featured items */
.pricing-card.featured::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(90deg, var(--color-cyber-cyan), var(--color-cyber-purple), var(--color-cyber-pink), var(--color-cyber-cyan));
  background-size: 400% 400%;
  z-index: -1;
  border-radius: inherit;
  animation: borderGlow 8s linear infinite;
  opacity: 0.75;
}

@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 2. Floating dynamic circles in Background (Parallax decorative elements) */
.floating-particle-1, .floating-particle-2 {
  position: absolute;
  border-radius: var(--border-radius-full);
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.15;
  transition: background var(--transition-normal);
}

.floating-particle-1 {
  width: 350px;
  height: 350px;
  background: var(--color-cyber-cyan);
  top: 15%;
  left: -100px;
  animation: floatBackgroundCircle1 25s infinite alternate ease-in-out;
}

.floating-particle-2 {
  width: 450px;
  height: 450px;
  background: var(--color-cyber-purple);
  bottom: 10%;
  right: -150px;
  animation: floatBackgroundCircle2 30s infinite alternate ease-in-out;
}

@keyframes floatBackgroundCircle1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(80px, 40px) scale(1.15); }
  100% { transform: translate(20px, -60px) scale(0.9); }
}

@keyframes floatBackgroundCircle2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-100px, -50px) scale(0.85); }
  100% { transform: translate(-30px, 80px) scale(1.2); }
}

/* 3. Text Typing cursor glow simulation for headers */
.typing-header::after {
  content: '|';
  animation: cursorPulse 1.1s infinite step-start;
  color: var(--color-primary);
  margin-left: 2px;
}

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

/* 4. Hover 3D Tilt simulation helpers */
.hover-3d {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.hover-3d:hover {
  transform: translateY(-8px) rotateX(4deg) rotateY(-2deg);
}

/* 5. Glowing pulses */
.pulse-glow-accent {
  animation: pulseGlowAccent 3s infinite ease-in-out;
}

@keyframes pulseGlowAccent {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
  }
}

/* ===== chatbot.css ===== */
/* AM Solutions - Chatbot Glassmorphism Stylesheet */

/* Floating Trigger Button */
.chatbot-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3), var(--shadow-glow);
  transition: var(--transition-normal);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0;
}

.chatbot-trigger:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4), 0 0 25px rgba(0, 240, 255, 0.4);
}

.chatbot-trigger i {
  font-size: 1.25rem;
  animation: pulseGlow 2s infinite;
}

/* Chatbot Container */
.chatbot-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  max-width: 90vw;
  height: 550px;
  max-height: 80vh;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: var(--bg-glass);
  backdrop-filter: var(--blur-amount);
  -webkit-backdrop-filter: var(--blur-amount);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: transform var(--transition-normal), opacity var(--transition-normal), height var(--transition-normal);
  font-family: var(--font-body);
}

.chatbot-container.chatbot-minimized {
  height: 64px !important;
}

.chatbot-container.hidden {
  display: none;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
}

/* Chat Header */
.chatbot-header {
  position: relative;
  background: var(--gradient-primary);
  color: var(--text-inverse);
  padding: 16px 20px 32px 20px; /* Extra space for the wave at the bottom */
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  overflow: visible;
}

.chatbot-inline-container .chatbot-header {
  padding: 16px 20px 32px 20px;
}

.chatbot-header-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.chatbot-avatar-container {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.chatbot-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.chatbot-avatar-status-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #E9C487; /* Matches the right side of gradient header */
}

.chatbot-inline-container .chatbot-avatar-status-dot {
  border-color: #E9C487;
}

.chatbot-avatar-status-dot.online {
  background-color: #34c759;
  box-shadow: 0 0 6px #34c759;
}

.chatbot-avatar-status-dot.offline {
  background-color: #ff453a;
  box-shadow: 0 0 6px #ff453a;
}

.chatbot-profile-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
  flex: 1;
}

.chatbot-profile-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatbot-profile-status {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatbot-header-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 20px;
  z-index: 1;
  pointer-events: none;
}

.chatbot-wave-path {
  fill: #ffffff;
  stroke: none;
}

.chatbot-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
  flex-shrink: 0;
}

.chatbot-control-button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chatbot-control-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.chatbot-control-button i {
  font-size: 0.8rem;
}

/* Chat Messages Area */
.chatbot-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}

.chatbot-body::-webkit-scrollbar {
  width: 5px;
}
.chatbot-body::-webkit-scrollbar-track {
  background: transparent;
}
.chatbot-body::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--border-radius-full);
}

/* Message Bubbles */
.message {
  max-width: 80%;
  padding: 10px 14px;
  font-size: 0.88rem;
  line-height: 1.4;
  word-wrap: break-word;
  animation: messageFadeIn 0.3s ease forwards;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-message {
  background: var(--gradient-primary);
  color: #ffffff;
  align-self: flex-end;
  border-radius: 18px 18px 4px 18px; /* Tidio style */
}

.bot-message {
  background: #f4f7f9;
  color: #1d1d1f;
  align-self: flex-start;
  border-radius: 18px 18px 18px 4px; /* Tidio style */
  border: 1px solid #eef2f5;
}

/* Chatbot Feedback Rating below bot messages */
.chatbot-rating-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-left: 6px;
  margin-bottom: 8px;
  animation: messageFadeIn 0.3s ease;
  align-self: flex-start;
}

.chatbot-rating-label {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.chatbot-rating-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.chatbot-rating-btn:hover {
  background: #f4f7f9;
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.1);
}

.chatbot-rating-btn.active-up {
  background: rgba(52, 199, 89, 0.1);
  color: #34c759;
  border-color: #34c759;
}

.chatbot-rating-btn.active-down {
  background: rgba(255, 69, 58, 0.1);
  color: #ff453a;
  border-color: #ff453a;
}

.chatbot-rating-thanks {
  font-size: 0.68rem;
  color: #34c759;
  font-weight: 500;
  animation: messageFadeIn 0.3s ease;
}

.bot-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition-fast);
}

.bot-link:hover {
  text-decoration: underline;
  filter: brightness(1.2);
}

/* Typing Indicator */
.bot-typing {
  background: var(--bg-glass-hover);
  border: var(--border-glass);
  padding: 12px 18px;
  border-radius: var(--border-radius-md);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  display: flex;
  align-items: center;
  max-width: 80px;
  box-shadow: var(--shadow-sm);
}

.typing-animation {
  display: flex;
  gap: 4px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background-color: var(--text-secondary);
  border-radius: 50%;
  opacity: 0.4;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

/* Quick Replies */
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px 0;
  align-self: flex-start;
  animation: messageFadeIn 0.4s ease forwards;
}

.quick-reply {
  background: #ffffff;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 5px 11px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.quick-reply:hover {
  background: rgba(218, 168, 88, 0.03);
  color: #DAA858;
  border-color: #DAA858;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(218, 168, 88, 0.08);
}

/* Glassmorphism Chat Form */
.contact-form-glass {
  background: rgba(255, 255, 255, 0.03);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-md);
  margin-top: 5px;
  animation: messageFadeIn 0.4s ease forwards;
}

.contact-form-glass input,
.contact-form-glass textarea {
  background: var(--bg-input);
  border: var(--border-glass);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  padding: 10px 12px;
  font-size: 0.85rem;
  outline: none;
  font-family: var(--font-body);
  transition: var(--transition-fast);
}

.contact-form-glass input:focus,
.contact-form-glass textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

.contact-form-glass textarea {
  height: 80px;
  resize: none;
}

.contact-form-glass button {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--border-radius-sm);
  padding: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: var(--transition-fast);
}

.contact-form-glass button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Footer Input Area Redesign */
.chatbot-footer-container {
  padding: 8px 12px;
  background: #ffffff;
  border-top: 1px solid #f0f0f5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.chatbot-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.chatbot-left-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.chatbot-input-row .chatbot-input {
  flex: 1;
  min-width: 0;
  background: #f4f7f9;
  border: 1px solid #eef2f5;
  border-radius: 20px;
  padding: 6px 12px;
  color: #1d1d1f;
  font-size: 0.82rem;
  outline: none;
  transition: all 0.2s ease;
  height: 34px;
}

.chatbot-input-row .chatbot-input:focus {
  background: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 3px 12px rgba(218, 168, 88, 0.08);
}

.chatbot-left-actions .chatbot-action-btn {
  background: transparent;
  border: none;
  color: #8e8e93;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: all 0.2s ease;
}

.chatbot-left-actions .chatbot-action-btn:hover {
  color: var(--color-primary);
  transform: translateY(-1px);
}

.chatbot-send {
  flex-shrink: 0;
  background: var(--gradient-primary);
  color: #ffffff;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 8px rgba(218, 168, 88, 0.2);
}

.chatbot-send:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(218, 168, 88, 0.3);
}

.chatbot-send i {
  font-size: 0.85rem;
  margin-left: 2px;
}

.chatbot-branding {
  text-align: center;
  font-size: 0.62rem;
  color: #c7c7cc;
}

.chatbot-branding a {
  color: #8e8e93;
  text-decoration: none;
  font-weight: 500;
}

.chatbot-branding a:hover {
  text-decoration: underline;
}

/* Floating Emoji Picker */
.chatbot-emoji-picker {
  position: absolute;
  bottom: 58px;
  left: 14px;
  background: #ffffff;
  border: 1px solid #eef2f5;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  z-index: 1000;
  animation: messageFadeIn 0.2s ease;
}

.chatbot-emoji-item {
  font-size: 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-emoji-item:hover {
  background: #f4f7f9;
  transform: scale(1.15);
}

.chatbot-emoji-picker.hidden {
  display: none !important;
}

/* Animations */
@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes messageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Mobile responsive adjustments (V4.8) */
@media (max-width: 768px) {
  .chatbot-trigger {
    position: fixed !important;
    display: flex !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
  }
  
  body.cookie-banner-active .chatbot-trigger {
    bottom: 110px !important;
  }
}

@media (max-width: 576px) {
  .chatbot-container {
    position: fixed !important;
    bottom: 20px !important;
    right: 16px !important;
    left: 16px !important; /* Centered layout on mobile */
    width: auto !important;
    max-width: 100% !important;
    height: 440px !important;
    max-height: calc(100vh - 120px) !important;
    border-radius: var(--border-radius-md) !important;
    z-index: 100000 !important;
    box-shadow: var(--shadow-lg), 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  }
  
  body.cookie-banner-active .chatbot-container {
    bottom: 110px !important;
    max-height: calc(100vh - 210px) !important;
  }
}

@media (max-width: 360px) {
  .chatbot-body {
    padding: 12px 14px !important;
  }
  .chatbot-footer {
    padding: 10px 12px !important;
  }
  .message {
    padding: 10px 14px !important;
    max-width: 90% !important;
  }
}


.chatbot-header,
.chatbot-body,
.chatbot-footer {
  position: relative;
  z-index: 2;
}

.chatbot-footer {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.chatbot-trigger.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Dedicated Inline Chatbot Section Styling (V8.0)
   ========================================================================== */

.chatbot-inline-section {
  padding: 80px 0;
  position: relative;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* Glowing background blobs for ambient glass reflection */
.chatbot-glow-blob-1,
.chatbot-glow-blob-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.22; /* Highlighted opacity for maximum glass reflection */
}

.chatbot-glow-blob-1 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(233, 196, 135, 0.32) 0%, rgba(233, 196, 135, 0) 70%);
  top: 15%;
  left: 15%;
  animation: floatChatBlob1 24s infinite alternate ease-in-out;
}

.chatbot-glow-blob-2 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.32) 0%, rgba(218, 168, 88, 0) 70%);
  bottom: 15%;
  right: 15%;
  animation: floatChatBlob2 28s infinite alternate ease-in-out;
}

@keyframes floatChatBlob1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, 30px) scale(1.1); }
  100% { transform: translate(-20px, -40px) scale(0.9); }
}

@keyframes floatChatBlob2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, -60px) scale(1.15); }
  100% { transform: translate(40px, 20px) scale(0.9); }
}

/* Card layout of the inline info column */
.chatbot-inline-info-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(245, 245, 250, 0.45) 100%) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: var(--border-radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all var(--transition-normal) ease;
}

.chatbot-inline-info-card:hover {
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transform: translateY(-4px);
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
}

.info-card-header i {
  font-size: 1.8rem;
  color: var(--color-primary);
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

.info-card-header h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.chatbot-inline-info-card p {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* Bullet list on the info card */
.info-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--border-radius-sm);
  padding: 6px 10px;
  transition: all var(--transition-normal) ease;
}

.info-card-list li:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(218, 168, 88, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(31, 38, 135, 0.04);
}

.info-card-list li i {
  font-size: 1.0rem;
  color: var(--color-primary) !important;
  margin-top: 1px;
  flex-shrink: 0;
}

.info-card-list li span {
  flex: 1;
}

.info-card-list li strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Status indicator dot */
.status-indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator-dot.online {
  background-color: #34c759;
  box-shadow: 0 0 10px #34c759;
  animation: pulseGreen 2s infinite;
}

.status-indicator-dot.offline {
  background-color: #ff453a;
  box-shadow: 0 0 10px #ff453a;
  animation: pulseRed 2s infinite;
}

@keyframes pulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(52, 199, 89, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
  }
}

@keyframes pulseRed {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 69, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 69, 58, 0);
  }
}

/* Inline Chat Container Card */
.chatbot-inline-container {
  width: 100%;
  max-width: 100%; /* Bounded width matching the left card */
  height: 520px; /* Fixed height on desktop to show scrollbar and prevent stretching */
  min-height: 450px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(245, 245, 250, 0.4) 100%) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  overflow: hidden;
  position: relative;
  font-family: var(--font-body);
  transition: all var(--transition-normal) ease;
}

.chatbot-inline-container:hover {
  border-color: rgba(0, 240, 255, 0.3) !important;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transform: translateY(-4px);
}

.chatbot-inline-container .chatbot-header {
  border-top-left-radius: var(--border-radius-md);
  border-top-right-radius: var(--border-radius-md);
}

/* Prevent auto-zoom on mobile text fields (iOS Safari autozooms when font-size < 16px) */
@media (max-width: 991px) {
  .chatbot-input,
  .contact-form-glass input,
  .contact-form-glass textarea,
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
  
  .chatbot-inline-container {
    height: 460px;
    max-width: 450px; /* Constrain inline chatbot width on tablets */
    margin: 0 auto; /* Center it */
  }
  
  .chatbot-inline-info-card {
    padding: 25px;
  }
}

/* Attachment Button in Footer */
.chatbot-attachment-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  transition: var(--transition-fast);
}

.chatbot-attachment-btn:hover {
  color: var(--color-primary);
  transform: scale(1.1);
}

/* Attachment Preview Panel above Footer */
.chatbot-attachment-preview {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-top: var(--border-glass);
  gap: 12px;
  position: relative;
  animation: messageFadeIn 0.3s ease forwards;
  z-index: 3;
}

.chatbot-attachment-preview.hidden {
  display: none !important;
}

.chatbot-attachment-preview img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.chatbot-attachment-preview .remove-attachment-btn {
  position: absolute;
  top: 4px;
  left: 52px;
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.65rem;
  transition: var(--transition-fast);
}

.chatbot-attachment-preview .remove-attachment-btn:hover {
  transform: scale(1.2);
  background: #ff453a;
}

/* Chat bubble styling for images sent by user */
.chat-message-image {
  display: block;
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: var(--border-radius-sm);
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Preventivatore Card Styles */
.preventivatore-card {
  background: var(--bg-glass);
  backdrop-filter: var(--blur-amount);
  -webkit-backdrop-filter: var(--blur-amount);
  border: var(--border-glass);
  border-radius: var(--border-radius-lg, 24px);
  padding: 18px 20px;
  box-shadow: var(--shadow-lg), 0 0 40px rgba(139, 92, 246, 0.1);
  margin-top: 0;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  color: var(--text-primary);
  position: relative;
  z-index: 10;
}

.preventivatore-card:hover {
  box-shadow: var(--shadow-lg), 0 0 50px rgba(0, 240, 255, 0.15);
}

.preventivatore-header {
  text-align: center;
  margin-bottom: 35px;
}

.preventivatore-header i {
  font-size: 2.5rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-bottom: 15px;
  filter: drop-shadow(0 4px 10px rgba(139, 92, 246, 0.2));
}

.preventivatore-header h3 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.preventivatore-header p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
}

.preventivatore-body-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}

/* Form configuration */
.preventivatore-config {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.preventivatore-config .form-group label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.preventivatore-config .form-select,
.preventivatore-config .form-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  border-radius: var(--border-radius-md, 12px);
  padding: 12px 16px;
  font-size: 0.95rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.preventivatore-config .form-select option {
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary);
}

.preventivatore-config .form-select:focus,
.preventivatore-config .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.btn-add-quote {
  background: var(--gradient-primary);
  color: #ffffff;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--border-radius-md, 12px);
  border: none;
  font-size: 1rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.btn-add-quote:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3), 0 0 15px rgba(0, 240, 255, 0.2);
}

.btn-add-quote:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Riepilogo Preventivo */
.preventivatore-summary {
  display: flex;
  flex-direction: column;
}

.preventivatore-summary h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.quote-table-wrapper {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-md, 12px);
  overflow: hidden;
  max-height: 250px;
  overflow-y: auto;
}

.quote-table {
  width: 100%;
  border-collapse: collapse;
}

.quote-table th {
  background: rgba(255, 255, 255, 0.05);
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quote-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.quote-item-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.quote-item-details {
  font-size: 0.8rem;
  margin-top: 2px;
}

.badge-hours {
  background: rgba(139, 92, 246, 0.15);
  color: var(--color-primary);
  border: 1px solid rgba(139, 92, 246, 0.25);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-recurring {
  background: rgba(255, 149, 0, 0.15);
  color: #ff9500;
  border: 1px solid rgba(255, 149, 0, 0.25);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 4px;
}

.btn-remove-item {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  transition: color var(--transition-fast);
}

.btn-remove-item:hover {
  color: var(--color-danger, #ff453a);
}

.quote-config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.branches-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.branches-field label {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.quote-totals-panel {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: var(--border-radius-md, 12px);
  padding: 20px;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.totals-row.final-row {
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  margin-top: 12px;
}

.discount-price {
  color: var(--color-danger, #ff453a);
  font-weight: 700;
}

.final-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
}

.negotiation-text {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ff9500;
}

.small-approx {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: normal;
}

.disclaimer-row {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.disclaimer-row i {
  margin-right: 4px;
}

/* Contact and Lead Submission */
.preventivatore-contact-section {
  margin-top: 30px;
}

.section-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 25px;
}

.preventivatore-contact-section h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.lead-inputs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lead-inputs-row .form-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  border-radius: var(--border-radius-md, 12px);
  padding: 12px 16px;
  font-size: 0.95rem;
}

.lead-gdpr-row .form-check-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.lead-actions-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.btn-send-quote {
  background: #34c759;
  color: #ffffff;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--border-radius-md, 12px);
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(52, 199, 89, 0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-send-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 199, 89, 0.3), 0 0 15px rgba(52, 199, 89, 0.2);
}

.btn-book-appointment {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--text-primary);
  font-weight: 600;
  padding: 13px 24px;
  border-radius: var(--border-radius-md, 12px);
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-book-appointment:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

.actions-or {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Specific details for On-Site intervention inside calc */
.onsite-details-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-md, 12px);
  padding: 16px;
  margin-bottom: 20px;
}

/* Responsive grid */
@media (max-width: 991px) {
  .preventivatore-card {
    padding: 24px;
  }
  
  .preventivatore-body-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .lead-inputs-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .lead-actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: center;
  }
}

/* ===== cookie-consent.css ===== */
/* AM Solutions - Custom Cookie Consent Banner Stylesheet */

.cookie-banner-glass {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 580px;
  background: var(--bg-glass);
  backdrop-filter: var(--blur-amount);
  -webkit-backdrop-filter: var(--blur-amount);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  padding: 24px;
  z-index: 10000;
  box-shadow: var(--shadow-lg), 0 0 20px rgba(0, 0, 0, 0.15);
  font-family: var(--font-body);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
  animation: cookieSlideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.cookie-banner-hide {
  transform: translateY(40px) scale(0.95);
  opacity: 0;
  pointer-events: none;
}

.cookie-banner-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cookie-banner-text h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-banner-text p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.cookie-banner-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-cookie-primary, .btn-cookie-secondary {
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-cookie-primary {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border: none;
  box-shadow: var(--shadow-sm);
}

.btn-cookie-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn-cookie-secondary {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
  border: var(--border-glass);
}

.btn-cookie-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-color-hover);
}

/* Custom Settings Panel */
.cookie-settings-panel {
  transition: max-height 0.4s ease;
  max-height: 500px;
  overflow: hidden;
}

.cookie-settings-panel.hidden {
  max-height: 0;
  padding: 0;
}

.cookie-divider {
  border-color: var(--border-color);
  margin: 16px 0;
  opacity: 0.5;
}

.cookie-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

.cookie-setting-row:last-of-type {
  border-bottom: none;
}

.cookie-setting-info {
  flex: 1;
}

.cookie-setting-info h6 {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-setting-info p {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
}

/* Toggle Switches */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-tertiary);
  transition: .4s;
  border-radius: 24px;
  border: var(--border-glass);
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-secondary);
  transition: .4s;
  border-radius: 50%;
}

.switch-toggle input:checked + .slider {
  background: var(--gradient-primary);
}

.switch-toggle input:checked + .slider:before {
  transform: translateX(20px);
  background-color: var(--text-inverse);
}

.cookie-policy-link {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-align: center;
}

.cookie-policy-link a {
  color: var(--color-primary);
  text-decoration: none;
}

.cookie-policy-link a:hover {
  text-decoration: underline;
}

@keyframes cookieSlideUp {
  from { transform: translateY(50px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 576px) {
  .cookie-banner-glass {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 16px;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  .cookie-banner-actions {
    justify-content: stretch;
  }
  
  .cookie-banner-actions button {
    flex: 1;
    text-align: center;
  }
}

/* ===== immersive.css ===== */
/* AM Solutions - Immersive 3D Scroll Background & Preloader Stylesheet (Light Theme V17.1) */

/* Body scroll lock during loading */
body.loading {
  overflow: hidden !important;
  height: 100vh !important;
}

/* Lenis Smooth Scroll Resets */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* 1. Fullscreen Preloader - Light Theme Premium */
#loading-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-primary);
  z-index: 110000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading), 'Segoe UI', Roboto, sans-serif;
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), visibility 1s;
  pointer-events: all;
}

#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.loader-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.loader-logo-gif {
  max-width: 150px;
  height: auto;
  mix-blend-mode: multiply;
  margin-bottom: 15px;
}

.loader-logo {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #1d1d1f;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #1d1d1f 30%, #6e6e73 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: logoPulse 2.5s ease-in-out infinite;
}

.loader-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary, #DAA858);
  margin-bottom: 8px;
}

.loader-percent {
  font-size: 4rem;
  font-weight: 900;
  font-family: 'Outfit', monospace;
  background: linear-gradient(135deg, #DAA858, #E9C487);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(218, 168, 88, 0.15));
  margin-bottom: 20px;
  line-height: 1;
}

.loader-bar-bg {
  width: 240px;
  height: 2px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #DAA858, #E9C487);
  box-shadow: 0 0 6px rgba(218, 168, 88, 0.5);
  transition: width 0.1s cubic-bezier(0.1, 0.8, 0.25, 1);
}

.loader-subtitle {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #86868b;
  margin-top: 16px;
}

/* 2. Particles Canvas Background */
.particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1;
  pointer-events: none;
}

/* Explicitly enforce dark charcoal text color for all headings and paragraphs in light theme sections */
.section .section-title h2,
.section h2.display,
.about h2,
.about h3,
.about h4 {
  color: var(--text-primary) !important;
}

.section .section-title p,
.about p {
  color: var(--text-secondary) !important;
}

/* Le sezioni scorrono, non si impilano.

   Prima ognuna era position: sticky e alta esattamente 100vh: restava
   agganciata finche' la successiva non le scorreva sopra. Costava caro -
   quello che non ci stava dentro uno schermo veniva rimpicciolito con lo zoom
   fino al 60%, e durante il passaggio si vedevano due sezioni sovrapposte.
   Adesso ogni sezione e' alta quanto il suo contenuto e il respiro lo da' il
   padding verticale. */
@media (min-width: 992px) {
  .section {
    position: relative !important;
    top: auto;
    height: auto !important;
    min-height: 0;
    width: 100%;
    display: block !important;
    padding-top: clamp(4rem, 2.5rem + 4vw, 7rem) !important;
    padding-bottom: clamp(4rem, 2.5rem + 4vw, 7rem) !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  /* La prima sezione dopo la hero parte piu' staccata: sopra c'e' l'intestazione
     fissa e un titolo incollato sotto di essa si legge male. */
  #problems {
    padding-top: clamp(6rem, 4rem + 5vw, 10rem) !important;
  }

  /* La coda serviva a dare spazio di scorrimento all'ultima sezione agganciata.
     Senza aggancio non serve piu' a niente. */
  .sticky-tail { display: none; }
}

@media (max-width: 991px) {
  #problems, #works, #features, #chatbot-inline-section, #solutions-lab, #strengths, #contact {
    padding-top: 130px !important; /* Increased space post-About on mobile */
  }
}

/* Laptop-height safety overrides for the chatbot section */
@media (min-width: 992px) and (max-height: 850px) {
  #chatbot-inline-section {
    padding-top: 75px !important;
    padding-bottom: 15px !important;
  }
  #chatbot-inline-section .section-title {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
  }
  #chatbot-inline-section .section-title h2 {
    font-size: 2.0rem !important;
    margin-top: 0 !important;
  }
  #chatbot-inline-section .section-title p {
    margin-bottom: 0 !important;
    font-size: 0.9rem !important;
  }
}

/* Section solid color backgrounds & Stacking context layers (with a subtle white overlay for readability and contrast) */
/* Lo z-index DEVE crescere nello stesso ordine in cui le sezioni compaiono nel DOM:
   è così che ogni sezione copre la precedente mentre si scorre. Se si aggiunge o si
   sposta una sezione, va aggiornato anche l'array sectionIds in immersive.js. */
#problems {
  background: transparent !important;
  position: relative;
  z-index: 10;
}

#about {
  background: transparent !important;
  position: relative;
  z-index: 20;
}

#works {
  background: transparent !important;
  position: relative;
  z-index: 30;
}

#features {
  background: transparent !important;
  position: relative;
  z-index: 40;
}

#chatbot-inline-section {
  background: transparent !important;
  position: relative;
  z-index: 50;
}

#solutions-lab {
  background: transparent !important;
  position: relative;
  z-index: 60;
}

#strengths {
  background: transparent !important;
  position: relative;
  z-index: 70;
}

#contact {
  background: transparent !important;
  position: relative;
  z-index: 80;
}

#footer {
  background: var(--bg-primary) !important; /* Sitting flat at body background color */
  position: relative;
  z-index: 90;
}

/* Ensure content container is in front of the wave backgrounds */
.section > .container,
.section > .container-fluid,
.footer > .footer-top,
.footer > .copyright {
  position: relative;
  z-index: 5 !important;
  will-change: transform, opacity; /* GPU acceleration to prevent layout repaints during sticky transitions */
}

.hero-content {
  will-change: transform, opacity; /* GPU acceleration for hero scroll opacity/translate transition */
}


/* Text contrast overrides removed to restore dark readable text on light glass backgrounds */

/* Make main content wrapper transparent so background layers show through */
#main {
  position: relative;
  z-index: 1; /* Page content flows at z-index 1 */
  background: transparent !important;
}

/* 3. Hero video styling overrides */
.video-background {
  /* Mantieni il comportamento originale del video */
}

/* Smooth transition fade mask at the bottom of the Hero */
.hero-bottom-fade {
  position: absolute;
  bottom: -2px; /* cover overlap perfectly */
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-primary, #f5f5f7) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Animations */
@keyframes logoPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.02); opacity: 1; }
}

/* 4. Desktop spacing optimizations for Features section to prevent vertical cutoff in 100vh viewport */
@media (min-width: 992px) {
  #features .services-abstract-grid {
    grid-template-columns: repeat(4, 1fr) !important; /* 4 columns on desktop to fit all cards in a single row */
    margin-top: 25px !important;
    gap: 16px !important;
  }
  
  #features .service-abstract-card {
    padding: 24px 20px !important; /* more compact padding */
  }
  
  #features .services-abstract-grid .service-abstract-card:nth-child(even),
  #features .services-abstract-grid .service-abstract-card:nth-child(odd) {
    margin-top: 0 !important; /* align all cards on the same horizontal row */
    margin-bottom: 0 !important;
  }

  #features .section-title {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
  }
  
  #features .section-title h2 {
    font-size: 2.2rem !important;
    margin-top: 5px !important;
  }
  
  #features .section-title p {
    margin-bottom: 0 !important;
    font-size: 0.95rem !important;
  }
  
  #features .service-abstract-header {
    margin-bottom: 10px !important;
  }
  
  #features .service-abstract-header i {
    font-size: 1.8rem !important;
  }
  
  #features .service-abstract-header h3 {
    font-size: 1.25rem !important;
  }
  
  #features .service-abstract-tagline {
    font-size: 0.92rem !important;
    margin-bottom: 12px !important;
  }
  
  #features .service-abstract-list {
    margin-bottom: 12px !important;
    gap: 6px !important;
  }
  
  #features .service-abstract-list li {
    font-size: 0.85rem !important;
  }
  
  #features .pane-case-pricing-story {
    margin-top: 12px !important;
    padding: 15px !important; /* more compact padding */
    flex-direction: column !important; /* stack study & pricing inside the narrow card */
    gap: 12px !important;
  }

  #features .pane-case-pricing-story .pricing-block {
    border-left: none !important;
    border-top: 1px solid var(--border-color) !important;
    padding-left: 0 !important;
    padding-top: 12px !important;
  }
}

/* 5. Additional laptop-height safety scaling for shorter viewports */
@media (min-width: 992px) and (max-height: 850px) {
  #features .services-abstract-grid {
    margin-top: 15px !important;
    gap: 12px !important;
  }
  
  #features .service-abstract-card {
    padding: 16px 14px !important;
  }
  
  #features .service-abstract-header h3 {
    font-size: 1.15rem !important;
  }
  
  #features .service-abstract-tagline {
    font-size: 0.85rem !important;
    margin-bottom: 8px !important;
  }
  
  #features .service-abstract-list {
    margin-bottom: 8px !important;
    gap: 4px !important;
  }
  
  #features .service-abstract-list li {
    font-size: 0.8rem !important;
  }
  
  #features .pane-case-pricing-story {
    margin-top: 8px !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  
  #features .pane-case-pricing-story .pricing-block {
    padding-top: 8px !important;
  }
}

/* La sezione Assistente contiene due card alte più il pulsante del preventivatore:
   in 100vh sforava, mandando l'occhiello sotto l'header e tagliando la didascalia
   finale. Qui viene compattata quel tanto che basta per rientrare nella schermata. */
@media (min-width: 992px) {
  #chatbot-inline-section .section-title {
    margin-bottom: 10px !important;
  }
  #chatbot-inline-section .section-title p {
    margin-bottom: 0 !important;
  }
  #chatbot-inline-section .chatbot-inline-container,
  #chatbot-inline-section .chatbot-inline-info-card {
    max-height: 440px;
  }
  #chatbot-inline-section .chatbot-body {
    min-height: 0;
  }
  #chatbot-inline-section .row.justify-content-center.mt-4 {
    margin-top: 12px !important;
  }
}

/* ===== marchio.css ===== */
/* ============================================================================
   AM Solutions — il marchio in tre dimensioni dietro al titolo della hero.

   Al suo posto c'era un video a schermo pieno (9.mp4): colori addosso al
   titolo, che diventava difficile da leggere. Il marchio dice la stessa cosa
   che dice l'azienda — un sistema che si monta pezzo per pezzo — e lascia
   leggere le parole, perche' sta a destra e il titolo arriva da sinistra.

   Senza WebGL resta il marchio fermo (a.png): la hero non si svuota.
   ========================================================================= */

.hero-marchio {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-primary);
}

/* Il fondale copre tutta la hero; il marchio sta a destra, dove non c'e' testo. */
#scena-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Il marchio sta un filo sopra la meta' esatta della hero: sotto, la fascia
   dei numeri e dei bottoni pesa, e un oggetto messo al centro geometrico
   sembra sempre scivolato in basso. */
/* Centrato nello spazio che resta, non al centro della pagina: a meta' esatta
   finirebbe addosso al titolo, che occupa quasi tutta la meta' sinistra. Il
   64% e' il centro di quello che rimane libero. */
#marchio-canvas,
.hero-marchio .ripiego {
  position: absolute;
  top: 0;
  left: 64%;
  transform: translateX(-50%);
  width: 34%;
  height: calc(100% - 150px);
  display: block;
}

@media (max-width: 1199px) {
  #marchio-canvas,
  .hero-marchio .ripiego { left: 68%; width: 42%; }
}

/* Il marchio si gira col mouse, quindi deve ricevere i puntatori: il
   contenitore resta trasparente ai clic e solo la tela del marchio li prende.
   Il riquadro del testo sopra e' anch'esso trasparente (vedi .hero-content piu'
   sotto), se no coprirebbe tutta la hero e al marchio non arriverebbe niente. */
#marchio-canvas { pointer-events: auto; cursor: grab; touch-action: pan-y; }
#marchio-canvas:active { cursor: grabbing; }

/* Il contenitore del testo e' largo quanto la hero: lasciato opaco ai clic,
   si mangerebbe ogni movimento del mouse diretto al marchio. Restano sensibili
   le parti che servono davvero: testo da selezionare, collegamenti e bottoni. */
/* «!important» perche' immersive.js, mentre fa comparire la hero, scrive
   pointer-events: auto direttamente nell'attributo style: senza, quella riga
   vincerebbe sempre su questo foglio e il marchio non sentirebbe il mouse. */
.hero-content,
.hero-content * { pointer-events: none !important; }
.hero-content a,
.hero-content button { pointer-events: auto !important; }

.hero-marchio .ripiego {
  object-fit: contain;
  padding: 10vh 5vw;
  opacity: 0.9;
}

/* Il browser nasconde [hidden] con una regola debole: display:block qui sopra
   la batterebbe, e si vedrebbero marchio fermo e marchio animato insieme. */
.hero-marchio [hidden] { display: none !important; }

/* Sul telefono il marchio non ha spazio accanto al titolo: scende in fondo
   alla hero, fuori dal testo, e il titolo resta la prima cosa che si legge. */
@media (max-width: 991px) {
  /* Sul telefono il marchio va SOPRA al titolo, non sotto: e' la prima cosa
     che si vede ed e' il marchio dell'azienda. Sta nella fascia in cima, e il
     contenuto della hero scende sotto di lui quanto basta. */
  #marchio-canvas,
  .hero-marchio .ripiego {
    top: calc(var(--header-height) + 10px);
    bottom: auto;
    left: 50%;
    width: 94%;
    /* Il marchio e' un oggetto a tre dimensioni: gira, si inclina e sporge
       oltre la propria sagoma piatta. Con un riquadro basso gli angoli
       finivano fuori e si vedeva il taglio netto del bordo. Qui ha l'altezza
       che gli serve per girare senza toccare i lati. */
    height: clamp(170px, 46vw, 210px);
    opacity: 0.95;
  }
  .hero-marchio .ripiego { padding: 2vh 4vw; }
}

/* ============================================================================
   La galleria dei lavori.

   Non e' una griglia che cresce verso il basso: ogni sezione del sito e' alta
   esattamente uno schermo, e una riga in piu' di riquadri verrebbe rimpicciolita
   finche' non si legge. E' invece una striscia che scorre di lato: aggiungendo
   lavori dall'area Admin l'altezza non cambia mai, scorre e basta.

   I riquadri sono quelli del vecchio nastro (.pm-item), solo piu' grandi.
   ========================================================================= */
.lavori-griglia {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 14px;                 /* lo spazio della barra di scorrimento */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color-hover) transparent;
  -webkit-overflow-scrolling: touch;
}

.lavori-griglia::-webkit-scrollbar { height: 6px; }
.lavori-griglia::-webkit-scrollbar-track { background: var(--bg-tertiary); border-radius: 999px; }
.lavori-griglia::-webkit-scrollbar-thumb { background: var(--border-color-hover); border-radius: 999px; }
.lavori-griglia::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

.lavori-griglia .pm-item {
  flex: 0 0 clamp(248px, 20.5vw, 330px);
  width: auto;
  scroll-snap-align: start;
}

/* Ogni sezione e' alta uno schermo: queste misure tengono la striscia dentro
   lo schermo con il titolo della sezione sopra. */
.lavori-griglia .pm-shot { height: clamp(160px, 14vw, 212px); }
.lavori-griglia .pm-meta { padding: 15px 18px 18px; }
.lavori-griglia .pm-cat { font-size: 10px; margin-bottom: 6px; }
.lavori-griglia .pm-meta h5,
.lavori-griglia .pm-meta h3 { font-size: 1.05rem; margin-bottom: 7px; }
.lavori-griglia .pm-meta p { font-size: 0.85rem; line-height: 1.45; -webkit-line-clamp: 3; }

/* I quattro programmi nostri sono la prova piu' diretta di cosa sappiamo fare:
   riquadri piu' larghi, con la descrizione intera. */
.lavori-griglia--prodotti .pm-item { flex-basis: clamp(262px, 23vw, 390px); }
.lavori-griglia--prodotti .pm-shot { height: clamp(150px, 14vw, 206px); }

@media (max-width: 575px) {
  .lavori-griglia .pm-item { flex-basis: 78vw; }
  .lavori-griglia--prodotti .pm-item { flex-basis: 78vw; }
}

/* I marchi in immagine adesso sono gia' dorati sul file (a-oro.png,
   logo-oro.png, lan-oro.gif, generati dall'originale nero tingendo i pixel e
   tenendo la trasparenza). Niente filtri: un filtro sul colore e' sempre
   un'approssimazione, e sulla GIF animata avrebbe tinto anche i fotogrammi
   intermedi in modo diverso. */
.header .logo img { opacity: 0.94; transition: opacity var(--transition-fast); }
.header .logo:hover img { opacity: 1; }
.about-logo-gif { opacity: 0.9; }

/* Lo spazio per il marchio in cima: la hero parte piu' in basso del solito,
   e il titolo comincia sotto al marchio invece che accanto. */
@media (max-width: 991px) {
  .hero { padding-top: calc(var(--header-height) + clamp(190px, 50vw, 232px)) !important; }
  .hero-content { min-height: 0 !important; }
}

/* ===== effetti.css ===== */
/* ============================================================================
   AM Solutions - Gli effetti sul testo.

   Due soli trattamenti, usati sempre allo stesso modo in tutto il sito:

   - il BIANCO non e' un bianco piatto ma una lastra: scende da bianco pieno a
     un grigio azzurrato, cosi' le lettere grandi prendono volume invece di
     restare una macchia uniforme;
   - l'ORO ha la polvere dentro: un velo di grana generato qui dentro (nessun
     file da scaricare) steso sopra una sfumatura d'oro che scorre pianissimo,
     come polvere metallica che si muove nella luce.

   Tutte e due passano per background-clip: text. Dove non e' supportato il
   testo resta del suo colore pieno - e' il motivo per cui il colore di
   ripiego e' dichiarato PRIMA, e non dopo.
   ========================================================================= */

:root {
  /* La grana: una turbolenza SVG, scritta qui per non portarsi dietro un file. */
  /* Due grane, non una. Una sola grana grigia in sovrapposizione («overlay»)
     non si vede: il grigio medio in overlay lascia il colore com'era, ed e'
     il motivo per cui la polvere non compariva. Qui una grana scurisce
     (moltiplica) e una schiarisce (schermo): si vedono sia i granelli scuri
     che i punti di luce, come polvere metallica vera. */
  --grana-scura: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='discrete' tableValues='1 1 1 1 0.42 1 1 0.68 1 1'/><feFuncG type='discrete' tableValues='1 1 1 1 0.42 1 1 0.68 1 1'/><feFuncB type='discrete' tableValues='1 1 1 1 0.42 1 1 0.68 1 1'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23s)'/></svg>");
  --grana-chiara: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='discrete' tableValues='0 0 0 0 0 0.85 0 0 0 0'/><feFuncG type='discrete' tableValues='0 0 0 0 0 0.85 0 0 0 0'/><feFuncB type='discrete' tableValues='0 0 0 0 0 0.85 0 0 0 0'/></feComponentTransfer></filter><rect width='150' height='150' filter='url(%23c)'/></svg>");
  --grana: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='discrete' tableValues='1 1 1 1 0.42 1 1 0.68 1 1'/><feFuncG type='discrete' tableValues='1 1 1 1 0.42 1 1 0.68 1 1'/><feFuncB type='discrete' tableValues='1 1 1 1 0.42 1 1 0.68 1 1'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23s)'/></svg>");
}

/* ------------------------------------------------------------- il bianco */
.testo-lastra,
.hero h1 .inner,
.hero .riga-titolo-hero .inner,
.section-title h2,
h1.display,
h2.display,
.about h2,
.about h3,
.indice-voce h3,
.lavori-griglia .pm-meta h5,
.lavori-griglia .pm-meta h3,
.faq-question-wrap h3,
.pane-title-story,
.strength-card h3,
.contact-card h4,
.footer-col h5,
.footer-col h4 {
  color: var(--text-primary);                 /* ripiego, se il ritaglio non c'e' */
  background-image: linear-gradient(176deg, #FFFFFF 0%, #F2F6FA 38%, #C6D2E0 78%, #A9B8CA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* un'ombra appena sotto: stacca le lettere dal fondo scuro senza alone */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

/* ---------------------------------------------------------------- l'oro
   Un em dentro a un titolo gia' ritagliato eredita il ritaglio del padre e
   resterebbe bianco: deve ridichiarare il proprio. Il colore e' scritto negli
   attributi style della pagina, quindi qui serve !important: senza, il colore
   pieno vincerebbe sul ritaglio e la polvere non si vedrebbe mai. */
.testo-polvere,
.hero h1 em.oro,
.hero h1 .inner em.oro,
.hero .riga-titolo-hero em.oro,
.hero .riga-titolo-hero .inner em.oro,
.section-title h2 em,
h1.display em,
h2.display em,
.about h2 em,
.about h3 em,
.strength-card h3 em,
.hero .stat .num {
  color: var(--color-primary) !important;
  background-image:
    var(--grana-chiara),
    var(--grana-scura),
    linear-gradient(168deg,
      #F6E3B4 0%,
      #E9C487 22%,
      #DAA858 48%,
      #A97C2E 68%,
      #E9C487 86%,
      #FBEFD2 100%) !important;
  background-size: 150px 150px, 180px 180px, 100% 280% !important;
  background-blend-mode: screen, multiply, normal;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
  animation: polvere-scorre 14s linear infinite;
}

/* La polvere scorre e la sfumatura sale: due velocita' diverse, se no
   sembrerebbe una sola immagine che trasla. */
@keyframes polvere-scorre {
  from { background-position: 0 0, 0 0, 0 0%; }
  to   { background-position: -150px 150px, 120px -180px, 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .testo-polvere,
  .hero h1 em.oro,
  .hero .riga-titolo-hero em.oro,
  .section-title h2 em,
  h2.display em,
  .loader-percent { animation: none; }
}

/* ------------------------------------------------------- il preloader
   Il fondale della hero gira anche qui dietro: chi arriva vede subito la
   citta' che si muove invece di un rettangolo fermo con una percentuale. */
#loading-screen {
  background-color: var(--bg-primary);
  overflow: hidden;
}

#scena-preloader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0.85;
}

/* Il velo: senza, le scritte del caricamento finirebbero sopra le finestre
   accese e diventerebbero illeggibili proprio nel momento peggiore. */
#loading-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(70% 60% at 50% 50%,
    rgba(11, 23, 39, 0.76) 0%,
    rgba(11, 23, 39, 0.5) 55%,
    rgba(11, 23, 39, 0.9) 100%);
  pointer-events: none;
}

#loading-screen .loader-container {
  position: relative;
  z-index: 2;
}

.loader-logo {
  color: var(--text-primary);
  background-image: linear-gradient(176deg, #FFFFFF 0%, #F2F6FA 40%, #C6D2E0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.loader-percent {
  color: var(--color-primary);
  background-image:
    var(--grana-chiara),
    var(--grana-scura),
    linear-gradient(168deg, #F6E3B4 0%, #E9C487 24%, #DAA858 52%, #A97C2E 72%, #FBEFD2 100%);
  background-size: 150px 150px, 180px 180px, 100% 280%;
  background-blend-mode: screen, multiply, normal;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: polvere-scorre 14s linear infinite;
}

.loader-bar { background: var(--gradient-primary); }
.loader-subtitle { color: var(--text-muted); }


/* ============================================================================
   Il velo fra una pagina e l'altra (vedi assets/js/transizione.js).

   Resta fuori dal flusso e invisibile finche' non serve: display:none, non
   opacita' zero, cosi' non copre i clic e non costa niente quando non c'e'.
   ========================================================================= */
.pt { display: none; }

html.pt-out .pt,
html.pt-in .pt {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 120000;
  pointer-events: none;
}

/* La lastra che sale. Non e' un rettangolo piatto: il bordo superiore e'
   ammorbidito da una sfumatura, cosi' sembra un sipario e non un blocco. */
.pt__fill {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(218, 168, 88, 0.1) 0%, rgba(11, 23, 39, 0) 60%),
    linear-gradient(180deg, #0B1727 0%, #060E19 100%);
}

/* Il marchio al centro del velo: prima si traccia il contorno, poi si
   riempie d'oro con la grana dentro. Niente 3D qui: il marchio che si
   scomponeva in polvere non si leggeva, e un passaggio fra due pagine deve
   far vedere il marchio, non un effetto.

   Disegno in SVG, quindi nitido a ogni misura e senza niente da scaricare. */
.pt__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(440px, 64vw);
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.pt__traccia {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
}

.pt__pieno {
  fill: url(#pt-oro);
  opacity: 0;
}

/* Il passaggio e' UNA cosa sola, spezzata in due pagine: si chiudono gli
   occhi sulla vecchia, si riaprono sulla nuova.

   USCENDO il velo sale e il marchio si disegna e si riempie, una volta.
   ARRIVANDO il marchio e' gia' pieno: non si ridisegna e non si riempie di
   nuovo - era quello il doppio riempimento che si vedeva - resta un attimo,
   poi lui e il velo si spengono insieme e la pagina nuova entra in
   dissolvenza sotto di loro. */
html.pt-out .pt__fill { animation: pt-entra 0.26s ease forwards; }

html.pt-in .pt__mark { animation: pt-esce 0.42s ease 0.2s forwards; }
html.pt-in .pt__fill { animation: pt-esce 0.52s ease 0.3s forwards; }

/* Chiudere e riaprire gli occhi: il contenuto si abbassa uscendo e risale
   arrivando. Solo opacita': una trasformazione su mezza pagina costringe il
   browser a rifare i livelli, e si sentirebbe. */
html.pt-out #header,
html.pt-out #main,
html.pt-out #footer { animation: pt-occhi-chiudi 0.3s ease forwards; }

html.pt-in #header,
html.pt-in #main,
html.pt-in #footer { animation: pt-occhi-apri 0.55s ease 0.34s both; }

@keyframes pt-occhi-chiudi {
  from { opacity: 1; }
  to   { opacity: 0.55; }
}

@keyframes pt-occhi-apri {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Era una lastra che saliva e scendeva: netta, e a ogni clic si notava. Una
   dissolvenza non si nota, ed e' esattamente quello che deve fare un
   passaggio fra due pagine dello stesso sito. */
@keyframes pt-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pt-esce {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pt { display: none !important; }
}

/* ============================================================================
   L'indice della home: quattro strade verso il resto del sito.
   ========================================================================= */
.indice-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.indice-voce {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 22px;
  text-decoration: none;
  background: var(--gradient-card);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.indice-voce:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.indice-eti {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.indice-voce h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.indice-voce p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  flex: 1 1 auto;
}

.indice-vai {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-primary);
}

.indice-voce:hover .indice-vai i { transform: translateX(3px); }
.indice-vai i { transition: transform var(--transition-fast); }

/* ============================================================================
   Il resto degli effetti, tenuti pochi e sempre uguali.

   La polvere d'oro sta solo sulle scritte grandi: su un'etichetta da dieci
   pixel la grana sporca invece di brillare. Le etichette piccole restano oro
   pieno, che a quella misura si legge meglio.
   ========================================================================= */
.mono.eyebrow-orange,
.indice-eti,
.lavori-griglia .pm-cat,
.pricing-label {
  color: var(--color-primary);
  -webkit-text-fill-color: var(--color-primary);
}

/* ============================================================================
   Le schede: vetro translucido, rilievo, ombra calda e il bagliore che segue
   il mouse (le coordinate arrivano da assets/js/luce.js, in --mx e --my).

   Tre strati, ognuno con un compito:
   - il VETRO e' il fondo semitrasparente piu' la sfocatura di quello che c'e'
     sotto: su un fondo scuro e' quello che da' la sensazione di spessore;
   - il BAGLIORE e' un alone caldo che si accende sotto il puntatore;
   - il RILIEVO e' una riga chiarissima in cima e una scura in fondo, come la
     luce che batte sullo spigolo alto di un oggetto reale.
   ========================================================================= */
.indice-voce,
.lavori-griglia .pm-item,
.strength-card,
.contact-card,
.pane-abstract-story,
.review-card-story,
.faq-item-story,
.service-card-abstract,
.problem-card-story,
.contact-info-box-story,
.certs .swiper-slide,
.criteri-colonna,
.info-card,
.card-glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --mx: 50%;
  --my: 0%;
  /* Qui c'era «backdrop-filter: blur(14px)», cioe' la sfocatura di quello che
     sta DIETRO alla scheda. Su una pagina ce ne sono venti, e il browser deve
     risfocare l'area dietro a ognuna a ogni fotogramma mentre si scorre: e'
     la cosa piu' cara che si possa chiedere a una pagina che scorre, e si
     paga su ogni computer dove la scheda grafica non e' generosa.

     Dietro alle schede, poi, non c'e' niente da sfocare: solo il fondo navy e
     il reticolo d'oro, appena accennato. Lo stesso aspetto si ottiene con un
     fondo semitrasparente un filo piu' denso, che non costa niente.

     La sfocatura resta dove serve davvero e dove si vede: la barra in alto e
     i due comandi in basso, che hanno il contenuto che gli scorre sotto. */
  background-color: rgba(18, 36, 58, 0.62) !important;
  border: 1px solid rgba(190, 210, 230, 0.14) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset,
    0 14px 34px rgba(0, 0, 0, 0.42);
  transition:
    transform var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

/* il bagliore: sta sotto al contenuto, se no gli schiarisce il testo */
.indice-voce::after,
.lavori-griglia .pm-item::after,
.strength-card::after,
.contact-card::after,
.pane-abstract-story::after,
.review-card-story::after,
.faq-item-story::after,
.service-card-abstract::after,
.problem-card-story::after,
.contact-info-box-story::after,
.info-card::after,
.card-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(260px circle at var(--mx) var(--my),
    rgba(218, 168, 88, 0.22) 0%,
    rgba(218, 168, 88, 0.08) 38%,
    rgba(218, 168, 88, 0) 68%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.indice-voce:hover::after,
.lavori-griglia .pm-item:hover::after,
.strength-card:hover::after,
.contact-card:hover::after,
.pane-abstract-story:hover::after,
.review-card-story:hover::after,
.faq-item-story:hover::after,
.service-card-abstract:hover::after,
.problem-card-story:hover::after,
.contact-info-box-story:hover::after,
.info-card:hover::after,
.card-glass:hover::after { opacity: 1; }

.indice-voce:hover,
.lavori-griglia .pm-item:hover,
.strength-card:hover,
.contact-card:hover,
.pane-abstract-story:hover,
.review-card-story:hover {
  transform: translateY(-4px);
  border-color: rgba(218, 168, 88, 0.42) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset,
    0 18px 42px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(218, 168, 88, 0.12),
    0 10px 40px rgba(218, 168, 88, 0.16);
}

/* La sfocatura del vetro costa: su schermi piccoli, dove le schede sono tante
   e una sotto l'altra, si spegne e resta il fondo pieno. */
@media (max-width: 767px) {
  .indice-voce,
  .lavori-griglia .pm-item,
  .strength-card,
  .contact-card,
  .pane-abstract-story,
  .review-card-story,
  .faq-item-story {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(16, 32, 52, 0.92) !important;
  }
}

/* I collegamenti del menu: la riga sotto cresce da sinistra invece di
   comparire di colpo. */
.navmenu ul li a {
  position: relative;
  transition: color var(--transition-fast);
}

.navmenu ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-normal);
}

.navmenu ul li a:hover::after,
.navmenu ul li a.active::after { transform: scaleX(1); }
.navmenu ul li a:hover { color: var(--text-primary); }

/* I numeri grandi della hero hanno la polvere: sono la cosa che si guarda
   subito dopo il titolo. L'unita' di misura resta oro pieno, e' piccola. */
.hero .stat .num { font-variant-numeric: tabular-nums; }
.hero .stat .unit {
  -webkit-text-fill-color: var(--color-primary);
  background: none;
  animation: none;
}

.hero .stat .label,
.indice-eti,
.mono { letter-spacing: 0.14em; }

/* ---------------------------------------------------------------------------
   style.css tinge con la sfumatura dell'accento OGNI <em> dentro al titolo
   della hero. Nel tema chiaro era un dettaglio blu; in oro diventa una riga
   intera d'oro, e due righe d'oro di fila tolgono forza a quella che conta.
   Qui l'oro resta solo dove e' stato chiesto: l'elemento con la classe «oro».
   ------------------------------------------------------------------------- */
.hero h1 em:not(.oro),
.hero .riga-titolo-hero em:not(.oro) {
  background-image: linear-gradient(176deg, #FFFFFF 0%, #F2F6FA 38%, #C6D2E0 78%, #A9B8CA 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: none !important;
}

/* ------------------------------------------------- le icone dei social
   Oro con la polvere dentro, come le scritte principali: sono un marchio
   anche loro. Il ritaglio sul testo funziona perche' le icone di Bootstrap
   sono caratteri tipografici, non immagini. */
.header-social-links a,
.footer-social a {
  background-image:
    var(--grana-chiara),
    var(--grana-scura),
    linear-gradient(168deg, #F6E3B4 0%, #E9C487 24%, #DAA858 52%, #A97C2E 74%, #FBEFD2 100%);
  background-size: 150px 150px, 180px 180px, 100% 280%;
  background-blend-mode: screen, multiply, normal;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: polvere-scorre 14s linear infinite;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.header-social-links a:hover,
.footer-social a:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 8px rgba(218, 168, 88, 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .header-social-links a,
  .footer-social a { animation: none; }
}

/* ============================================================================
   Le schede che si compongono dalla polvere (vedi assets/js/luce.js).

   Non e' una comparsa qualunque: e' la stessa cosa che fa il marchio nella
   hero, cioe' materia sparsa che si posa. Qui la polvere e' il velo di grana
   sopra alla scheda, che si spegne mentre la scheda sale e mette a fuoco.

   Tutto parte da «da-comporre», che la aggiunge JavaScript: senza JavaScript
   la classe non arriva e le schede restano semplicemente visibili. E' il
   motivo per cui lo stato di riposo e' quello COMPOSTO e non il contrario.
   ========================================================================= */
.da-comporre {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.21, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.21, 1);
}

.da-comporre.composta {
  opacity: 1;
  transform: none;
}

/* La tela su cui arrivano le linee da fuori (vedi «telaio» in luce.js).
   Sta sopra al contenuto e sotto alla barra in alto, non prende i clic, e
   non e' tagliata da nessun «overflow: hidden» perche' non sta dentro a
   nessuna scheda. */
.telaio-linee {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* Il reticolo di grana resta: e' la «polvere» da cui la scheda si posa.
   Le linee che la compongono, invece, non sono piu' qui: le disegna una tela
   sola per tutta la pagina (vedi .telaio-linee e «telaio» in luce.js).
   Prima era un «outline» che si stringeva, e animarne lo scostamento fa
   ridisegnare la scheda a ogni fotogramma: era li' lo scatto che si sentiva
   arrivando alle schede. */

/* Gli angoli: quattro squadrette che entrano con il riquadro e danno il
   senso di qualcosa che si incastra, non di una cornice che appare. */
.da-comporre .pm-meta,
.da-comporre > *:first-child { position: relative; z-index: 2; }

/* Le schede di una stessa fila non si posano tutte insieme: ognuna parte un
   filo dopo la precedente, e l'occhio le legge in ordine invece che in blocco. */
.lavori-griglia .pm-item:nth-child(2),
.indice-griglia > *:nth-child(2) { transition-delay: 0.06s; animation-delay: 0.06s; }
.lavori-griglia .pm-item:nth-child(3),
.indice-griglia > *:nth-child(3) { transition-delay: 0.12s; animation-delay: 0.12s; }
.lavori-griglia .pm-item:nth-child(4),
.indice-griglia > *:nth-child(4) { transition-delay: 0.18s; animation-delay: 0.18s; }
.lavori-griglia .pm-item:nth-child(n+5) { transition-delay: 0.24s; animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .da-comporre { opacity: 1; transform: none; transition: none; }
  .da-comporre.composta { animation: none; outline: none; }
}

/* La tela del fondale: sta dietro a tutto e non prende mai i clic. */
.particles-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ============================================================================
   Telefono.

   Le regole qui sotto risolvono cose viste davvero a 390 pixel, non ipotesi.
   Stanno in fondo al foglio perche' devono vincere su quelle piu' vecchie,
   che sono piene di !important.
   ========================================================================= */
@media (max-width: 767px) {

  /* La fascia sotto al titolo e' una griglia a due colonne: il blocco con il
     testo e i bottoni finiva in una colonna sola, e il secondo numero veniva
     spinto sotto i bottoni. Il blocco prende tutta la riga, i due numeri si
     mettono in fila sotto. */
  .hero-meta > div:first-child { grid-column: 1 / -1 !important; }

  .hero-cta-row { flex-direction: column !important; align-items: stretch !important; }
  .hero-cta-row .btn-get-started,
  .hero-cta-row .btn-secondary-glass {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero .stat .num { font-size: clamp(1.7rem, 9vw, 2.4rem) !important; }
  .hero .stat .label { font-size: 9px !important; }

  /* Le sezioni avevano 130px di respiro in cima: su uno schermo alto 844
     pixel e' un sesto dello schermo buttato via prima di leggere una parola. */
  .section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .section-title { margin-bottom: 32px !important; }
  .section-title h2 { font-size: clamp(1.7rem, 7.5vw, 2.2rem) !important; }
  .section-title p { font-size: 0.95rem !important; }

  /* Le strisce dei lavori scorrono col dito: il riquadro si vede quasi intero
     e si intravede il successivo, cosi' si capisce che ce n'e' ancora.

     La striscia esce dai margini del contenitore e arriva ai bordi dello
     schermo. Serve: la scheda era larga 82vw dentro a un contenitore largo
     294px, cioe' quaranta pixel piu' larga del posto che aveva, e quei
     quaranta pixel di testo erano tagliati su OGNI scheda. Il contenuto
     resta allineato al resto della pagina grazie al padding, ma lo spazio
     dove si scorre adesso e' tutto lo schermo. */
  .lavori-griglia {
    gap: 14px;
    scroll-snap-type: x mandatory;
    /* La striscia resta dentro al contenitore: cosi' la prima scheda parte
       esattamente dove parte il testo sopra. Con il bordo a tutto schermo la
       scheda partiva trentasei pixel piu' a sinistra del titolo, e si vedeva.
       La larghezza della scheda si misura sul CONTENITORE, non sullo schermo:
       prima era 78vw dentro a un contenitore piu' stretto, e la differenza
       era la parte di testo che restava tagliata fuori. */
    /* La striscia sta dentro a una colonna Bootstrap, che aggiunge mezzo
       passo di gronda per lato: senza questo rientro la prima scheda parte
       dodici pixel piu' a destra del testo che le sta sopra. */
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    padding-inline: 0;
  }
  .lavori-griglia .pm-item,
  .lavori-griglia--prodotti .pm-item { flex-basis: calc(100% - 38px); }
  .lavori-griglia .pm-shot { height: 44vw; }

  .indice-griglia { gap: 14px; }
  .indice-voce { padding: 22px 20px 20px; }

  /* Il bagliore che segue il mouse non esiste sul telefono: senza puntatore
     resterebbe acceso dove si e' toccato l'ultima volta. */
  .indice-voce::after,
  .lavori-griglia .pm-item::after,
  .strength-card::after,
  .contact-card::after { display: none; }

  /* Il marchio in fondo alla hero e il fondale non devono rubare contrasto
     al testo, che su un telefono e' piu' piccolo e piu' vicino. */
  #scena-canvas { opacity: 0.75; }
  .particles-canvas { opacity: 0.5; }

  /* Il velo del passaggio fra pagine: marchio piu' piccolo, sta nello schermo. */
  .pt__mark { width: 70vw; }
}

@media (max-width: 420px) {
  .section-title h2 { font-size: 1.55rem !important; }
  .lavori-griglia .pm-item,
  .lavori-griglia--prodotti .pm-item { flex-basis: 86vw; }
}

/* ------------------------------------------- la polvere intorno ai titoli
   La tela la crea assets/js/polvere.js. Sta dentro al blocco del titolo, lo
   copre tutto e resta sotto al testo: la polvere gira attorno alle parole, non
   davanti. Il titolo prende «position: relative» perche' la tela si misura su
   di lui. */
/* Chi ospita la polvere. «isolation» serve: la tela sta dietro al testo con
   z-index negativo, e senza un contesto di impilamento proprio scivolerebbe
   dietro allo sfondo della sezione, sparendo. */
.hero-title,
.section-title,
h1.display,
h2.display,
.about h2,
.about h3,
[data-polvere] {
  position: relative;
  isolation: isolate;
}

/* La tela sborda sopra al titolo: la polvere deve poter salire oltre le
   lettere, se no si vede il taglio netto del riquadro. Le misure devono
   essere esplicite: su una tela «inset» da solo non allarga niente, perche'
   un canvas ha una sua misura propria di 300x150 e vince lei. */
.polvere {
  position: absolute;
  top: -54px;
  left: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 64px);
  z-index: -1;
  pointer-events: none;

  /* Il bordo della tela e' un bordo vero: un granello a cavallo viene
     tagliato a meta', e si vede una riga netta di mezzelune. Qui l'opacita'
     scende a zero prima del bordo, sui tre lati da cui i granelli ESCONO:
     sopra, a sinistra e a destra. Sotto no, perche' sotto e' dove nascono e
     sfumare li' vorrebbe dire spegnerli appena accesi.

     Due sfumature sovrapposte e intersecate: una per l'asse orizzontale, una
     per quello verticale. Dove una delle due e' trasparente, il risultato e'
     trasparente. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 26px, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 26px, #000 100%);
  mask-composite: intersect;
}

/* ---- La polvere del menu ----------------------------------------------
   Una tela sola per tutta la barra, che sborda sopra: i granelli partono
   dalla riga dorata sotto alla voce e salgono davanti al vetro.
   Qui la tela resta davanti allo sfondo (z-index 0) e sono le voci ad
   alzarsi sopra di lei: con z-index negativo finirebbe dietro al vetro
   dell'intestazione e non si vedrebbe. */
#navmenu ul { position: relative; }

.polvere--menu {
  top: -38px;
  left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 52px);
  z-index: 0;
  /* Qui la tela e' bassa: la sfumatura in cima e' piu' corta, se no si
     mangia meta' della corsa dei granelli. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 18px, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 18px, #000 100%);
  mask-composite: intersect;
}

#navmenu ul li { position: relative; z-index: 1; }

/* La tela del marchio sulla schermata di caricamento: stessa misura che aveva
   l'immagine, cosi' il riquadro non salta quando il motore si accende. */
#marchio-preloader {
  display: block;
  width: min(340px, 62vw);
  aspect-ratio: 746 / 200;
  margin: 0 auto 10px;
}

/* ============================================================================
   Correzioni di misura e di trattamento (giro del 25 ottobre).
   ========================================================================= */

/* ------------------------------------------------- i marchi in immagine
   Erano dimensionati per la GIF vecchia, che era alta e stretta. Il marchio
   nuovo e' lungo sei volte quanto e' alto: con «max-height: 100px» diventava
   largo seicento pixel. Si misura sulla LARGHEZZA, che e' il lato lungo.

   Via anche «mix-blend-mode: multiply»: serviva a togliere il fondo bianco
   della GIF su una pagina chiara. Il file nuovo ha la trasparenza vera, e su
   navy il multiply lo faceva sparire. */
.footer-logo-gif,
.about-logo-gif,
.mobile-menu-logo-img,
.loader-logo-gif {
  mix-blend-mode: normal !important;
  height: auto !important;
  max-height: none !important;
}

.footer-logo-gif { width: 240px !important; max-width: 72% !important; opacity: 0.95; }
/* Il marchio fermo di «Chi siamo»: piu' piccolo, e con la polvere dentro come
   le scritte d'oro. Il file e' usato come sagoma (mask) e il colore arriva da
   sotto: cosi' la grana sta DENTRO al marchio e non sopra. */
.about-logo-gif {
  width: min(230px, 62%) !important;
  max-width: 230px !important;
  opacity: 1;
  background-image:
    var(--grana-chiara),
    var(--grana-scura),
    linear-gradient(168deg, #F6E3B4 0%, #E9C487 24%, #DAA858 52%, #A97C2E 74%, #FBEFD2 100%);
  background-size: 150px 150px, 180px 180px, 100% 280%;
  background-blend-mode: screen, multiply, normal;
  -webkit-mask-image: url("../img/a-oro.png");
  mask-image: url("../img/a-oro.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: polvere-scorre 14s linear infinite;
}
.mobile-menu-logo-img { width: 140px !important; max-width: 60% !important; opacity: 0.9; }

/* ------------------------------------------- certificazioni e tecnologie
   I sei loghi arrivano da file diversi: chi con la trasparenza, chi con il
   fondo bianco, chi con il fondo nero. Schiarirli tutti con un filtro faceva
   diventare bianco anche il rettangolo di fondo, ed e' da li' che venivano i
   riquadri neri. Ognuno sta invece sulla sua pastiglia chiara, cioe' sul
   fondo per cui e' stato disegnato. */
.certs .swiper-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 14px 20px;
  /* Niente pastiglia: adesso il fondo dei loghi lo toglie il filtro. */
  background: none;
  border-radius: var(--border-radius-md);
  transition: transform var(--transition-fast);
}

.certs .swiper-slide:hover { transform: translateY(-2px); }

.certs .swiper-slide img {
  /* Oro su trasparente. Il filtro sta nelle definizioni in cima alla pagina:
     calcola l'opacita' dalla luminosita', quindi il fondo bianco cotto dentro
     ai file sparisce. Prima c'era una pastiglia chiara sotto a ogni logo
     proprio perche' quel fondo non si riusciva a togliere; ora non serve. */
  filter: url(#oro-da-luminanza) !important;
  opacity: 0.8;
  max-height: 100% !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  mix-blend-mode: normal !important;
  transition: opacity var(--transition-fast);
}

.certs .swiper-slide:hover img { opacity: 1; }

/* ---------------------------------------------- la barra di scorrimento
   La striscia dei lavori scorre di lato, ma la barra di sistema sotto e' un
   oggetto grigio che non c'entra niente con il resto. Si toglie e si dice la
   stessa cosa in un altro modo: i bordi sfumano, cosi' si vede che il
   contenuto continua. */
.lavori-griglia {
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 42px), transparent 100%);
}

.lavori-griglia::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------- i moduli
   I bottoni di invio erano larghi quanto il modulo: un bersaglio da mille
   pixel non aiuta nessuno a premerlo, e sembra un banner. Larghezza propria,
   allineati a sinistra come il resto del modulo. */
.contact-form-story button[type="submit"],
form button[type="submit"].btn-get-started,
#lab-form button[type="submit"] {
  width: auto !important;
  min-width: 230px;
  justify-content: center;
  padding-left: 34px !important;
  padding-right: 34px !important;
}

@media (max-width: 575px) {
  .contact-form-story button[type="submit"],
  form button[type="submit"].btn-get-started,
  #lab-form button[type="submit"] { width: 100% !important; min-width: 0; }
}

/* --------------------------------------------------------- le domande
   Erano righe separate da un filo, con un alone bianco sul testo: sembravano
   di un altro sito. Adesso sono le stesse schede di vetro del resto, e la
   freccia gira aprendosi invece di restare ferma. */
.faq-item-story {
  border: 1px solid rgba(190, 210, 230, 0.14) !important;
  border-radius: var(--border-radius-md);
  background-color: rgba(18, 36, 58, 0.5);
  padding: 18px 22px !important;
  margin-bottom: 10px;
  transition: border-color var(--transition-normal), background var(--transition-normal);
}

.faq-item-story:first-of-type { border-top: 1px solid rgba(190, 210, 230, 0.14) !important; }
.faq-item-story:hover { border-color: rgba(218, 168, 88, 0.4) !important; }
.faq-item-story.attiva { border-color: rgba(218, 168, 88, 0.55) !important; }

.faq-question-wrap h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.faq-question-wrap i {
  transition: transform var(--transition-normal), color var(--transition-fast);
}

.faq-item-story.attiva .faq-question-wrap i { transform: rotate(90deg); }

.faq-answer-wrap p {
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  font-size: 0.93rem !important;
  text-shadow: none !important;
  padding-top: 12px !important;
}

/* Passando da una pagina all'altra la schermata di caricamento non si
   dissolve: non c'e' proprio. La dissolvenza da un secondo la renderebbe
   visibile per tutto quel secondo. */
#loading-screen.salta {
  display: none !important;
  transition: none !important;
}

/* ============================================================================
   Solutions LAB - i due elenchi dei criteri.

   Erano righe dentro a pastiglie con un puntino davanti: tredici pastiglie di
   fila e il contenuto spariva dentro la decorazione. Adesso sono due elenchi
   veri, separati da un filo verticale, con un segno davanti che dice da solo
   se la riga e' un si' o un no - senza bisogno di leggere il titolo sopra.
   ========================================================================= */
.criteri {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}

.criteri li {
  position: relative;
  padding: 11px 0 11px 30px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(190, 210, 230, 0.08);
}

.criteri li:last-child { border-bottom: none; }

.criteri li::before {
  position: absolute;
  left: 0;
  top: 11px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.5;
}

.criteri-si::before { content: "+"; color: var(--color-primary); }
.criteri-no::before { content: "–"; color: var(--text-muted); }

.criteri-titolo {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(190, 210, 230, 0.14);
}

.criteri-titolo--si { color: var(--color-primary); }
.criteri-titolo--no { color: var(--text-muted); }

/* Il riquadro che conteneva gli elenchi: su questa sezione non serve, i due
   elenchi si dividono da soli con il filo in mezzo. */
#criteri .contact-form-story,
.criteri-colonna {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 992px) {
  .criteri-colonna--destra { border-left: 1px solid rgba(190, 210, 230, 0.12); padding-left: 40px !important; }
}

/* ============================================================================
   «Come lavoriamo»: quattro passaggi su un filo che si traccia da solo.

   Il filo e' una riga sola in SVG; il tratteggio lungo quanto la riga la
   nasconde, e portandolo a zero la riga si disegna da sinistra a destra
   mentre la sezione entra - come il marchio che si compone. I nodi si
   accendono uno dopo l'altro sopra al filo.
   ========================================================================= */
.metodo { position: relative; }

.metodo-filo {
  position: absolute;
  top: 13px;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: visible;
}

.metodo-filo line {
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0.45;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 0.61, 0.21, 1);
}

.metodo-filo.disegnato line { stroke-dashoffset: 0; }

.metodo-passi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.metodo-passo { position: relative; padding-top: 44px; }

.metodo-nodo {
  position: absolute;
  top: 7px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--color-primary);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.21, 1), box-shadow 0.45s ease;
}

.metodo-filo.disegnato ~ .metodo-passi .metodo-nodo {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 4px rgba(218, 168, 88, 0.12);
}

/* uno dopo l'altro, nell'ordine in cui si legge */
.metodo-filo.disegnato ~ .metodo-passi .metodo-passo:nth-child(2) .metodo-nodo { transition-delay: 0.3s; }
.metodo-filo.disegnato ~ .metodo-passi .metodo-passo:nth-child(3) .metodo-nodo { transition-delay: 0.6s; }
.metodo-filo.disegnato ~ .metodo-passi .metodo-passo:nth-child(4) .metodo-nodo { transition-delay: 0.9s; }

.metodo-numero {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.metodo-passo h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text-primary);
}

.metodo-passo p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 991px) {
  .metodo-passi { grid-template-columns: 1fr; gap: 26px; }
  /* in colonna il filo orizzontale non ha piu' senso: sparisce e restano i
     nodi, che da soli dicono gia' che e' una sequenza */
  .metodo-filo { display: none; }
  .metodo-passo { padding-top: 0; padding-left: 30px; }
  .metodo-nodo { top: 4px; opacity: 1; transform: scale(1); }
}

/* ============================================================================
   La galleria dei lavori: una sola, uguale in tutte le pagine.
   ========================================================================= */
.galleria { position: relative; }

.galleria-comandi {
  position: absolute;
  top: -58px;
  right: 0;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.galleria-comandi[hidden] { display: none; }

.galleria-freccia {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(190, 210, 230, 0.18);
  background: rgba(18, 36, 58, 0.6);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background var(--transition-fast), transform var(--transition-fast);
}

.galleria-freccia:hover:not([disabled]) {
  color: var(--color-primary);
  border-color: rgba(218, 168, 88, 0.5);
  background: rgba(218, 168, 88, 0.08);
}

.galleria-freccia:active:not([disabled]) { transform: scale(0.94); }

/* Spenta, non nascosta: la posizione dei due bottoni non deve ballare
   mentre si scorre. */
.galleria-freccia[disabled] { opacity: 0.3; cursor: default; }

/* --------------------------------------------------- le schede della galleria
   Misure piu' generose e una proporzione fissa per la fotografia: cosi' le
   schede sono tutte uguali anche quando gli screenshot hanno formati diversi,
   che e' il motivo per cui prima la galleria sembrava sghemba. */
.lavori-griglia .pm-item {
  border-radius: var(--border-radius-md);
  scroll-snap-align: start;
}

.lavori-griglia .pm-shot {
  height: auto !important;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: top center;
  border-bottom: 1px solid rgba(190, 210, 230, 0.1);
  transition: transform var(--transition-slow);
}

.lavori-griglia .pm-item:hover .pm-shot { transform: scale(1.03); }

/* La fotografia esce dai bordi stondati mentre si ingrandisce: il contenitore
   la taglia. */
.lavori-griglia .pm-item { overflow: hidden; }

.lavori-griglia .pm-meta { padding: 16px 18px 20px; }

.lavori-griglia .pm-meta h5,
.lavori-griglia .pm-meta h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* La freccetta accanto al nome dice che la scheda si apre. */
.lavori-griglia .pm-item .pm-meta h5::after,
.lavori-griglia .pm-item .pm-meta h3::after {
  content: "→";
  font-size: 0.9em;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.lavori-griglia .pm-item:hover .pm-meta h5::after,
.lavori-griglia .pm-item:hover .pm-meta h3::after { opacity: 1; transform: none; }

@media (max-width: 767px) {
  /* Su telefono si scorre con il dito: le frecce rubano solo spazio. */
  .galleria-comandi { display: none; }
  .lavori-griglia .pm-shot { aspect-ratio: 16 / 10; }
}

/* Nessuna pastiglia sotto ai loghi: stanno sul fondo navy come tutto il
   resto, in oro, senza riquadro. */
.certs .swiper-slide {
  background-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent !important;
  box-shadow: none;
}

.certs .swiper-slide::after { display: none; }

/* ============================================================================
   Le microinterazioni della stessa famiglia, sparse su tutto il sito.

   Una sola idea ripetuta: linee d'oro che si tracciano. Sta sotto ai titoli
   di sezione, sotto all'occhiello, lungo il bordo delle fotografie. Sempre lo
   stesso gesto, sempre lo stesso colore: e' quello che tiene insieme un sito,
   non la quantita' di effetti diversi.
   ========================================================================= */

/* il filo sotto al titolo di ogni sezione */
.riga-disegnata {
  display: block;
  width: 180px;
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--color-primary) 18%, var(--color-primary) 82%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.21, 1);
}

.riga-disegnata.disegnato { transform: scaleX(1); }

/* l'occhiello: il trattino davanti cresce invece di stare li' fermo */
.section-title .eyebrow-orange::before,
.mono.eyebrow-orange::before {
  transition: width 0.7s cubic-bezier(0.22, 0.61, 0.21, 1);
}

/* La fotografia dei lavori: una linea d'oro scorre lungo il bordo basso
   quando il mouse ci passa sopra. E' la stessa linea, piu' corta. */
.lavori-griglia .pm-shot { position: relative; }

.lavori-griglia .pm-shot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.21, 1);
}

.lavori-griglia .pm-item:hover .pm-shot::after { transform: scaleX(1); }

/* I nodi della griglia di fondo si accendono sotto al titolo della sezione
   che si sta leggendo: un respiro appena percettibile. */
.section-title { --respiro: 0; }

@media (prefers-reduced-motion: reduce) {
  .riga-disegnata { transform: scaleX(1); transition: none; }
  .lavori-griglia .pm-shot::after { display: none; }
}

/* La seconda riga del titolo della hero non e' piu' un <h1> (uno per pagina),
   ma deve restare identica: eredita tutto dalle regole di .hero h1. */
.hero .riga-titolo-hero {
  font-weight: 850;
  font-size: clamp(2.4rem, 8.2vw, 7.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
}

/* ============================================================================
   I blocchi testo + raffigurazione, e i tracciati che si disegnano.

   Il tracciato e' un disegno in prospettiva fatto di sole linee e nodi: la
   stessa lingua del marchio. Si traccia da solo quando la sezione entra,
   grazie al tratteggio lungo quanto la linea portato a zero - lo stesso
   meccanismo del filo di «Come lavoriamo», qui su piu' percorsi.
   ========================================================================= */
.blocco {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.blocco--rovescio .blocco-testo { order: 2; }
.blocco--rovescio .blocco-figura { order: 1; }

.blocco-testo h2 { margin-bottom: 18px; }
.blocco-testo > p {
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 60ch;
}

.aiuto-sezione {
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* L'elenco: niente pallini di sistema, un segno d'oro e una riga sottile che
   separa. Le voci sono tante e devono restare scorribili con l'occhio. */
.elenco-oro {
  list-style: none;
  margin: 0;
  padding: 0;
}

.elenco-oro li {
  position: relative;
  padding: 11px 0 11px 26px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(190, 210, 230, 0.08);
}

.elenco-oro li:last-child { border-bottom: none; }

.elenco-oro li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 10px;
  height: 1px;
  background: var(--color-primary);
}

/* ====================================================== la frase grande
   Una sezione che non spiega niente: dice una cosa sola, grande, con il
   disegno dietro che la illustra. Serve a far rallentare chi scorre, che e'
   l'unico modo perche' qualcosa resti in testa.
   ================================================================= */
.sezione-manifesto { padding-top: clamp(60px, 9vw, 120px); padding-bottom: clamp(60px, 9vw, 120px); }

.manifesto {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 48px);
  border-radius: var(--border-radius-lg, 22px);
  border: 1px solid rgba(190, 210, 230, 0.1);
  background: linear-gradient(170deg, rgba(22, 40, 62, 0.5), rgba(12, 24, 40, 0.3));
  /* Niente «overflow: hidden»: serviva a contenere il disegno di sfondo, ma
     tagliava anche la tela della polvere, e il taglio si vedeva come una
     riga netta di mezzelune lungo il bordo del riquadro. Adesso e' il
     disegno a stare dentro da solo (vedi sotto). */
}

/* Il disegno non e' un ornamento appiccicato sopra: sta dietro, slavato,
   e porta l'occhio da sinistra (il lavoro sparso) a destra (il sistema). */
.manifesto .tracciato--largo {
  position: absolute;
  /* Piu' in basso: con il vecchio scostamento un nodo del disegno cadeva
     esattamente sulla parola «togliamo» del primo comando.
     E sta dentro al riquadro invece di sbordare: cosi' non serve tagliare
     niente, e la polvere puo' uscire libera dai bordi. I capi delle linee
     sfumano da soli con la stessa tecnica della polvere. */
  inset: auto 0 2%;
  left: 0;
  width: 100%;
  max-width: none;
  opacity: 0.62;
  pointer-events: none;
  /* Sfuma su tutti e quattro i lati invece di essere tagliato: cosi' resta
     dentro al riquadro senza che serva un «overflow: hidden», che taglierebbe
     anche la polvere. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

.manifesto .eyebrow-orange,
.manifesto-frase,
.manifesto-coda,
.manifesto-azioni { position: relative; z-index: 1; }

.manifesto-frase {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 18px auto 0;
  max-width: 20ch;
  overflow-wrap: break-word;
}

@media (min-width: 768px) { .manifesto-frase { max-width: 24ch; } }

.manifesto-coda {
  margin: 20px auto 0;
  max-width: 56ch;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
}

.manifesto-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  /* I due comandi devono stare sulla stessa riga anche DENTRO: il bottone
     pieno ha la sua imbottitura e il testo in mezzo, il collegamento no e
     il suo testo finiva in cima al riquadro, che il contenitore allungava
     all'altezza del vicino. Gli stessi due riquadri, due testi a quote
     diverse: e' quello che si vedeva. */
  align-items: center;
  margin-top: 30px;
}

.manifesto-azioni > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Il filo che da aggrovigliato diventa dritto, sopra alle quattro carte:
   e' il riassunto di tutta la sezione in una riga sola. */
.tracciato.tracciato--filo {
  display: block;
  width: 100%;
  max-width: 980px;
  margin: 0 auto clamp(18px, 3vw, 36px);
  opacity: 0.55;
}

.tracciato.tracciato--filo path { stroke-width: 1.5; }

@media (max-width: 575px) {
  .manifesto .tracciato--largo { opacity: 0.32; }
  .tracciato.tracciato--filo { display: none; }     /* su telefono ruba spazio e basta */
}

/* ------------------------------------------------------- il tracciato */
.blocco-figura { display: flex; justify-content: center; }

.tracciato {
  width: 100%;
  max-width: 420px;
  height: auto;
  overflow: visible;
}

.tracciato path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  opacity: 0.55;
  transition: stroke-dashoffset 1.9s cubic-bezier(0.22, 0.61, 0.21, 1);
}

.tracciato .tracciato-collegamenti path {
  opacity: 0.3;
  stroke-dasharray: 5 5;
  transition: opacity 0.8s ease 1.1s;
}

.tracciato circle {
  fill: var(--bg-primary);
  stroke: var(--color-primary);
  stroke-width: 1.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.3);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.21, 1);
}

.tracciato.disegnato path { stroke-dashoffset: 0; }
.tracciato.disegnato circle { opacity: 1; transform: scale(1); }

/* i nodi si accendono dopo che la linea e' arrivata */
.tracciato.disegnato circle:nth-of-type(1) { transition-delay: 1.1s; }
.tracciato.disegnato circle:nth-of-type(2) { transition-delay: 1.25s; }
.tracciato.disegnato circle:nth-of-type(3) { transition-delay: 1.4s; }
.tracciato.disegnato circle:nth-of-type(4) { transition-delay: 1.55s; }
.tracciato.disegnato circle:nth-of-type(5) { transition-delay: 1.7s; }
.tracciato.disegnato circle:nth-of-type(n+6) { transition-delay: 1.85s; }

@media (max-width: 991px) {
  .blocco { grid-template-columns: 1fr; gap: 34px; }
  /* in colonna la figura va sempre sopra al testo, anche nei blocchi
     rovesciati: alternare l'ordine su una colonna sola confonde e basta */
  .blocco--rovescio .blocco-testo,
  .blocco-testo { order: 2; }
  .blocco--rovescio .blocco-figura,
  .blocco-figura { order: 1; }
  .tracciato { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .tracciato path { stroke-dashoffset: 0; transition: none; }
  .tracciato circle { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   I tre comandi flottanti: WhatsApp, chat, ritorno in alto.

   Erano sparsi - la chat a destra, il ritorno in alto a sinistra, WhatsApp da
   nessuna parte - con misure, colori e ombre diversi. Adesso sono una colonna
   sola nell'angolo in basso a destra, nello stesso ordine di importanza in
   cui si usano: la chat in fondo, dove arriva per primo il pollice.

   Misure dichiarate una volta in variabili: cambiando --f-lato si spostano
   tutti insieme e restano allineati.
   ========================================================================= */
:root {
  --f-lato: 52px;        /* diametro dei bottoni */
  --f-passo: 62px;       /* distanza fra un bottone e il successivo */
  --f-bordo: 22px;       /* distanza dal bordo dello schermo */
}

.flottante,
.scroll-top,
.chatbot-trigger {
  position: fixed !important;
  right: var(--f-bordo) !important;
  left: auto !important;
  width: var(--f-lato) !important;
  height: var(--f-lato) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  border: 1px solid rgba(218, 168, 88, 0.35) !important;
  background: rgba(14, 29, 48, 0.86) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-primary) !important;
  font-size: 1.15rem !important;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
  transition: transform var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast), opacity var(--transition-normal);
}

.flottante:hover,
.scroll-top:hover,
.chatbot-trigger:hover {
  transform: translateY(-3px);
  background: rgba(218, 168, 88, 0.14) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
}

/* la colonna, dal basso verso l'alto */
/* Due comandi: la chat e il ritorno in alto. La chat sta sotto, perche' e'
   quella che si preme. */
.flottante--chat { bottom: var(--f-bordo) !important; z-index: 9998; }

/* Ora e' un <button>, non piu' un collegamento: il browser gli mette di suo
   un fondo grigio e un carattere di sistema, e vanno tolti. */
button.flottante {
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.scroll-top { bottom: calc(var(--f-bordo) + var(--f-passo)) !important; z-index: 9996 !important; }

/* Il ritorno in alto compare solo quando si e' scesi: la regola che lo
   nasconde sta in style.css e qui non va toccata, serve solo che il bottone
   non rubi i clic mentre e' trasparente. */
.scroll-top:not(.active) { pointer-events: none; }

/* L'etichetta esce al passaggio del mouse. Sul touch non esiste il
   passaggio, quindi non compare mai e non occupa spazio. */
.flottante-etichetta {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(14, 29, 48, 0.94);
  border: 1px solid rgba(190, 210, 230, 0.14);
  border-radius: var(--border-radius-full);
  padding: 6px 13px;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .flottante:hover .flottante-etichetta { opacity: 1; transform: none; }
}

/* Quando la fascia dei cookie e' aperta la colonna sale sopra di lei: un
   bottone mezzo coperto da un banner non si riesce a premere. */
body.cookie-banner-active .flottante--chat { bottom: calc(var(--f-bordo) + 92px) !important; }
body.cookie-banner-active .scroll-top { bottom: calc(var(--f-bordo) + 92px + var(--f-passo)) !important; }

/* In fondo alla pagina i due bottoni fissi stanno sopra alla riga del
   copyright e ne mangiano la fine. Si lascia loro la corsia a destra. */
@media (max-width: 991px) {
  .copyright .container { padding-right: 74px; }
}

@media (max-width: 575px) {
  :root { --f-lato: 46px; --f-passo: 54px; --f-bordo: 14px; }
  .flottante,
  .scroll-top,
  .chatbot-trigger { font-size: 1.02rem !important; }
  /* su telefono l'etichetta non serve: non c'e' il passaggio del mouse */
  .flottante-etichetta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .flottante, .scroll-top, .chatbot-trigger { transition: none; }
}

/* ----------------------------------------------- il marchio che si traccia
   Il contorno si disegna da sinistra a destra, poi l'oro lo riempie. Succede
   UNA volta sola, mentre si esce dalla pagina vecchia.

   Arrivando non si rifa' niente: il marchio e' gia' finito e si mostra cosi'.
   Prima la stessa animazione girava anche all'arrivo, e il risultato era un
   marchio che si riempiva due volte di fila in meno di un secondo. */
html.pt-out .pt__traccia {
  animation: pt-traccia 0.38s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
}

html.pt-out .pt__pieno {
  animation: pt-riempi 0.28s ease 0.32s forwards;
}

/* Arrivando: gia' tracciato, gia' pieno. Nessuna animazione. */
html.pt-in .pt__traccia { stroke-dashoffset: 0; opacity: 0.35; }
html.pt-in .pt__pieno { opacity: 1; }

@keyframes pt-traccia {
  from { stroke-dashoffset: 2600; opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 0.35; }
}

@keyframes pt-riempi {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================================
   Il marchio.

   Non e' piu' un PNG da 140 pixel ingrandito finche' si sgrana: e' il disegno
   originale piu' il nome scritto col carattere del sito. Resta nitido a
   qualunque misura, su qualunque schermo, e l'oro arriva dal gradiente invece
   che dai pixel di un file.

   Le definizioni (gradiente e sagoma) stanno una volta sola in cima al corpo
   della pagina, dentro a <svg class="am-defs">, e qui si richiamano con <use>.
   ========================================================================= */
.am-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.marchio-am {
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
  text-decoration: none;
  line-height: 1;
}

.marchio-am__segno {
  display: block;
  height: 1em;                     /* la misura la decide il contenitore */
  width: auto;
  flex: none;
  aspect-ratio: 746 / 123;
  overflow: visible;
}

.marchio-am__nome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18em;
}

.marchio-am__testo {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.012em;
  white-space: nowrap;
  color: var(--color-primary);
  background-image: linear-gradient(168deg, #F7E6BC 0%, #DAA858 38%, #C68F3F 72%, #9E6F2B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.marchio-am__motto {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-primary);
  opacity: 0.72;
}

/* --- nella barra in alto --- */
.marchio-am--barra { font-size: 15px; }
.marchio-am--barra .marchio-am__testo { font-size: 1.22rem; }
.marchio-am--barra .marchio-am__motto { font-size: 0.42rem; }

/* --- nel piede --- */
.marchio-am--piede { font-size: 21px; }
.marchio-am--piede .marchio-am__testo { font-size: 1.6rem; }
.marchio-am--piede .marchio-am__motto { font-size: 0.55rem; }

/* --- nel pannello del menu su telefono: solo il segno, grande ---
   Si vede solo quando il pannello c'e' davvero. Senza questo, su schermo
   grande comparirebbe un secondo marchio in mezzo alla barra: «display» di
   .marchio-am e' dichiarato dopo quello di .mobile-menu-logo e vinceva lui. */
.marchio-am--pannello { display: none; }

@media (max-width: 1199px) {
  .marchio-am--pannello {
    display: inline-flex;
    font-size: 30px;
    justify-content: center;
    width: 100%;
  }
}
.marchio-am--pannello .marchio-am__nome { display: none; }

@media (max-width: 991px) {
  .marchio-am--barra { font-size: 13px; }
  .marchio-am--barra .marchio-am__testo { font-size: 1.04rem; }
  .marchio-am--barra .marchio-am__motto { font-size: 0.38rem; }
  .marchio-am--piede { font-size: 19px; }
  .marchio-am--piede .marchio-am__testo { font-size: 1.4rem; }
}

@media (max-width: 400px) {
  /* Sotto a questa larghezza il motto fa a botte col bottone del menu. */
  .marchio-am--barra .marchio-am__motto { display: none; }
}


/* ---- La polvere sul titolo della hero ---------------------------------
   E' la scritta piu' grande della pagina e la prima che si guarda: la
   polvere le serve larga e alta, non appiccicata alle lettere. */
.hero-title .polvere,
.hero h1 .polvere {
  top: -78px;
  /* Lo sbordo laterale resta piccolo: la tela e' larga quanto il titolo, e
     un titolo largo quanto la pagina con il 110% uscirebbe dallo schermo. */
  left: -2%;
  width: 104%;
  height: calc(100% + 118px);
}

/* ---- La polvere sul bottone del menu -----------------------------------
   Qui la tela sta SOPRA al segno, non dietro: il bottone ha un fondo suo e
   una polvere dietro non si vedrebbe mai. Sopra invece sembra che sia il
   segno stesso a sprigionarla. I clic passano lo stesso: la tela non li
   prende (vedi .polvere, pointer-events: none). */
.mobile-nav-toggle {
  position: relative;
  isolation: isolate;
}

.polvere--icona {
  top: -30px;
  left: -16px;
  width: calc(100% + 32px);
  height: calc(100% + 48px);
  z-index: 1;
}

/* Il segno respira: non e' un'animazione in piu', e' la stessa luce della
   polvere che passa anche sull'icona. */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--color-primary) !important;
    animation: segno-respira 3.6s ease-in-out infinite;
  }
  .mobile-nav-toggle:hover { color: #F7E6BC !important; }
}

@keyframes segno-respira {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(218, 168, 88, 0)); }
  50%      { filter: drop-shadow(0 0 7px rgba(218, 168, 88, 0.6)); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-toggle { animation: none; }
}

/* Il marchio dentro al pannello del menu: ospita la polvere come un titolo. */
.marchio-am--pannello { position: relative; isolation: isolate; }
.marchio-am--pannello .polvere { top: -46px; height: calc(100% + 76px); }

/* ============================================================================
   La chat del sito.

   Si apre dal bottone in basso a destra e resta dentro alla pagina: nessuno
   viene mandato altrove. Su schermo largo e' un pannello appoggiato
   nell'angolo, su telefono e' un foglio che sale dal basso e occupa quello
   che gli serve, senza coprire tutto.
   ========================================================================= */
.bolla {
  position: fixed;
  right: var(--f-bordo);
  bottom: calc(var(--f-bordo) + var(--f-passo) + 12px);
  z-index: 9999;
  width: min(372px, calc(100vw - 2 * var(--f-bordo)));
  max-height: min(600px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(190, 210, 230, 0.14);
  background: linear-gradient(172deg, rgba(20, 38, 60, 0.98), rgba(11, 22, 38, 0.98));
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transform-origin: 100% 100%;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.21, 1);
}

.bolla--aperta { opacity: 1; transform: none; }

.bolla__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 13px 16px;
  border-bottom: 1px solid rgba(190, 210, 230, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.bolla__chi { display: flex; align-items: center; gap: 11px; min-width: 0; }
.bolla__segno { width: 54px; height: auto; flex: none; }
.bolla__chi-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bolla__chi-testo b {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.bolla__chi-testo small { font-size: 0.74rem; color: var(--text-muted); line-height: 1.2; }

.bolla__chiudi {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.bolla__chiudi:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }

/* ---- il modulo -------------------------------------------------------
   Non e' piu' una chat: niente bolle, niente trascrizione. Un modulo si
   compila e si manda, e chi lo manda sa che la risposta arrivera' altrove.
   La forma deve dirlo prima delle parole. */
.bolla__modulo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 16px 18px;
  overscroll-behavior: contain;
}

.bolla__intro {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.bolla__campo { display: block; margin-bottom: 13px; }

.bolla__campo > span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bolla__campo > span i {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

.bolla__campo input,
.bolla__campo textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(190, 210, 230, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.45;
}

.bolla__campo textarea { resize: none; max-height: 180px; overflow-y: auto; }

.bolla__campo input:focus,
.bolla__campo textarea:focus {
  outline: none;
  border-color: rgba(218, 168, 88, 0.6);
  box-shadow: 0 0 0 3px rgba(218, 168, 88, 0.14);
}

.bolla__manda {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--gradient-primary, linear-gradient(140deg, #F7E6BC, #C68F3F));
  color: #0E1D30;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.96rem;
  cursor: pointer;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.bolla__manda:hover { filter: brightness(1.06); transform: translateY(-1px); }
.bolla__manda:disabled { opacity: 0.6; cursor: progress; transform: none; }

/* Il campo che vedono solo i robot. Non «display: none»: certi automi
   saltano apposta quello che e' nascosto cosi'. */
.bolla__trappola {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.bolla__stato {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
  min-height: 1.2em;
}
.bolla__stato--ok { color: #7FD6A2; }
.bolla__stato--ko { color: #F0A090; }
.bolla__stato a { color: var(--color-primary); }

.bolla__piccolo {
  margin: 10px 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.bolla__piccolo a { color: var(--color-primary); }

/* ---- dopo l'invio ----
   Il modulo sparisce e resta la conferma: cosa e' successo, a chi tornera'
   la risposta, e quando. Un riquadro vuoto sembrerebbe in attesa. */
.bolla__fatto { text-align: center; padding: 14px 4px 6px; }

.bolla__spunta {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(127, 214, 162, 0.14);
  border: 1px solid rgba(127, 214, 162, 0.4);
  color: #7FD6A2;
  font-size: 1.5rem;
}

.bolla__fatto h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.bolla__fatto p {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.bolla__fatto strong { color: var(--color-primary); overflow-wrap: anywhere; }

.bolla__ancora {
  margin-top: 14px;
  padding: 9px 18px;
  border-radius: var(--border-radius-full, 999px);
  border: 1px solid rgba(190, 210, 230, 0.2);
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.bolla__ancora:hover { border-color: var(--color-primary); color: var(--text-primary); }

/* Su telefono: un foglio che sale dal basso, largo quanto lo schermo. */
@media (max-width: 575px) {
  .bolla {
    right: 8px;
    left: 8px;
    bottom: calc(var(--f-bordo) + var(--f-passo) + 8px);
    width: auto;
    max-height: min(74vh, 560px);
    border-radius: 18px;
  }
}

/* Con la chat aperta il bottone che l'ha aperta resta visibile ma si fa da
   parte: premerlo di nuovo chiude, e si deve capire che e' lo stesso. */
body.chat-aperta .flottante--chat { transform: scale(0.92); opacity: 0.85; }
body.chat-aperta .flottante--chat .flottante-etichetta { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bolla { transition: none; }
}

/* ============================================================================
   Il «torna su»: un anello che si riempie scendendo.

   La quantita' e' una proprieta' CSS dichiarata con @property, quindi il
   browser sa che e' un numero e la puo' interpolare. Dove c'e'
   animation-timeline l'anello e' agganciato allo scorrimento e gira fuori dal
   filo principale: non puo' scattare. Dove non c'e', la aggiorna luce.js una
   volta per fotogramma.
   ========================================================================= */
@property --avanzamento {
  syntax: '<number>';
  /* Deve ereditare: il valore si anima sul bottone, ma a usarlo e' il
     cerchio dentro all'SVG. Con «inherits: false» il cerchio restava fermo
     sul valore iniziale e l'anello non si riempiva mai. */
  inherits: true;
  initial-value: 0;
}

.scroll-top {
  --avanzamento: 0;
  overflow: visible !important;
  transition: opacity 0.45s ease, transform var(--transition-fast),
              background var(--transition-fast), border-color var(--transition-fast) !important;
}

.su-anello {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  transform: rotate(-90deg);          /* si parte dall'alto, come un orologio */
  pointer-events: none;
  overflow: visible;
}

.su-traccia {
  fill: none;
  stroke: rgba(218, 168, 88, 0.2);
  stroke-width: 2;
}

.su-avanza {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  /* 2 * pi * 20 = 125.66: la circonferenza del cerchio disegnato sopra. */
  stroke-dasharray: 125.66;
  stroke-dashoffset: calc(125.66 * (1 - var(--avanzamento)));
  filter: drop-shadow(0 0 3px rgba(218, 168, 88, 0.45));
}

@supports (animation-timeline: scroll()) {
  .scroll-top {
    animation: su-riempi linear;
    animation-timeline: scroll(root block);
  }
  @keyframes su-riempi {
    from { --avanzamento: 0; }
    to   { --avanzamento: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top { animation: none; }
  .su-avanza { filter: none; }
}

/* ============================================================================
   La fascia dei numeri.

   Quattro cifre grandi, in fila, su una riga d'oro sottile. Sotto a ognuna
   due righe: che cosa e' quel numero, e perche' ci si puo' contare. Un numero
   senza la seconda riga e' un numero che non vuol dire niente.
   ========================================================================= */
.sezione-numeri { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }

.numeri {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid rgba(218, 168, 88, 0.22);
  border-bottom: 1px solid rgba(218, 168, 88, 0.22);
}

.numero { display: flex; flex-direction: column; gap: 7px; }

.numero-cifra {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.numero-cifra small { font-size: 0.46em; font-weight: 600; opacity: 0.8; }

.numero-che {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.3;
  color: var(--text-primary);
}

.numero-nota {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 991px) {
  .numeri { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}

@media (max-width: 575px) {
  /* Su telefono uno sotto l'altro: due colonne con una cifra grande e due
     righe di testo diventano due colonne strettissime. */
  .numeri { grid-template-columns: 1fr; gap: 24px; }
  .numero { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .numero-cifra { flex: none; min-width: 2.6em; }
  .numero-che { flex: 1; }
  .numero-nota { flex-basis: 100%; }
}

/* ============================================================================
   Contatti: i tre modi, e cosa succede dopo.

   Chi arriva su questa pagina ha gia' deciso di scrivere. Non va convinto:
   va messo in grado, e va rassicurato su cosa succede dopo. Per questo i tre
   modi stanno in cima e le domande frequenti stanno sotto.
   ========================================================================= */
.vie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(36px, 5vw, 64px);
}

.via {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--border-radius-lg, 18px);
  border: 1px solid rgba(190, 210, 230, 0.12);
  background: linear-gradient(168deg, rgba(22, 40, 62, 0.46), rgba(12, 24, 40, 0.3));
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast),
              background var(--transition-fast);
}

.via:hover {
  border-color: rgba(218, 168, 88, 0.5);
  transform: translateY(-3px);
  background: linear-gradient(168deg, rgba(30, 52, 78, 0.56), rgba(14, 28, 46, 0.38));
}

.via-icona {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(218, 168, 88, 0.3);
  color: var(--color-primary);
  font-size: 1.1rem;
}

.via-che {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--text-primary);
}

.via-nota { font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); }

.via-quando {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ---- cosa succede dopo ---- */
.dopo {
  padding: clamp(26px, 3.4vw, 40px) 0 clamp(30px, 4vw, 48px);
  border-top: 1px solid rgba(218, 168, 88, 0.18);
  margin-bottom: clamp(34px, 4.6vw, 56px);
}

.dopo-titolo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  color: var(--text-primary);
  margin: 0 0 clamp(20px, 2.6vw, 30px);
}

.dopo-passi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  counter-reset: passo;
}

.dopo-passi li {
  position: relative;
  padding-left: 42px;
  counter-increment: passo;
}

/* Il numero non e' una decorazione: dice che e' una sequenza e in che ordine. */
.dopo-passi li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--color-primary);
  opacity: 0.85;
}

.dopo-quando {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.dopo-passi h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text-primary);
  margin: 0 0 7px;
}

.dopo-passi p { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }

.dopo-nota {
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 14px 18px;
  border-left: 2px solid var(--color-primary);
  background: rgba(218, 168, 88, 0.06);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.dopo-nota strong { color: var(--color-primary); }

@media (max-width: 991px) {
  .vie { grid-template-columns: 1fr; }
  .dopo-passi { grid-template-columns: 1fr; gap: 22px; }
}

/* La polvere sulla striscia dei loghi: sopra ai loghi, non dietro. La
   striscia ha uno sfondo suo in certe pagine, e una polvere dietro non si
   vedrebbe. La tela non prende i clic, quindi i collegamenti funzionano. */
#dynamic-partners-wrapper { position: relative; }

/* Lo swiper DEVE tagliare quello che esce: e' cosi' che funziona uno
   scorrevole. Allora non si esce: gli si da' aria sopra e la polvere sale
   dentro al suo spazio, invece di sbordare e farsi tagliare di netto. */
.certs .swiper {
  position: relative;
  isolation: isolate;
  padding-top: 34px;
}

.polvere--loghi {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Qui la polvere sale fino al bordo alto del riquadro: la sfumatura in
     cima e' quella che evita la riga netta. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 22px, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 22px, #000 100%);
  mask-composite: intersect;
}

/* Su schermo stretto il marchio sta al centro e il bottone del menu a
   sinistra: sotto i 400 pixel i due si toccano e la X del marchio finisce
   sotto al bottone. Li' il marchio smette di stare al centro e si mette in
   fila dopo il bottone, che e' anche il posto dove lo si cerca. */
@media (max-width: 400px) {
  .header .logo {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin-left: 12px;
  }
  .header .container { justify-content: flex-start !important; gap: 0; }
  .header-actions { margin-left: auto; }
  .marchio-am--barra { font-size: 12px; }
  .marchio-am--barra .marchio-am__testo { font-size: 0.95rem; }
}

/* ============================================================================
   La recensione: il codice sta sulla pagina, non dentro a un riquadro che si
   apre. Chi arriva lo vede senza doverlo cercare, e chi vuole stamparlo o
   inquadrarlo ce l'ha li'.
   ========================================================================= */
.sezione-recensione { padding-top: clamp(50px, 7vw, 90px); padding-bottom: clamp(50px, 7vw, 90px); }

.recensione {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--border-radius-lg, 22px);
  border: 1px solid rgba(218, 168, 88, 0.22);
  background: linear-gradient(168deg, rgba(24, 43, 66, 0.55), rgba(12, 24, 40, 0.38));
}

.recensione-testo h2 { margin-bottom: 16px; }
.recensione-testo > p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 54ch;
}

.recensione-voto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px !important;
  font-family: var(--font-heading);
  color: var(--text-primary);
}
.recensione-voto strong { font-size: 1.2rem; }
.recensione-voto span { color: var(--text-muted); font-size: 0.88rem; font-weight: 400; }

.recensione-stelle { color: var(--color-primary); letter-spacing: 2px; font-size: 1.05rem; }

.recensione-vai { display: inline-flex; align-items: center; gap: 9px; }

/* Il codice su bianco: su fondo scuro molti telefoni faticano a leggerlo. */
.recensione-codice { margin: 0; text-align: center; }

.recensione-codice img {
  width: min(200px, 100%);
  height: auto;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  display: block;
  margin: 0 auto;
}

.recensione-codice figcaption {
  margin-top: 14px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 26ch;
  margin-inline: auto;
}
.recensione-codice figcaption strong { display: block; color: var(--text-secondary); margin-bottom: 3px; }

@media (max-width: 767px) {
  .recensione { grid-template-columns: 1fr; text-align: center; }
  .recensione-testo > p, .recensione-voto { margin-inline: auto; }
  .recensione-voto { justify-content: center; }
}

/* ---- l'invito che porta alla sezione ---- */

/* La valutazione nella hero e' anche un collegamento: era gia' il posto dove
   l'occhio va a cercare le recensioni. */
.stat--premibile {
  border: 0;
  background: none;
  padding: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.stat-invito {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.stat--premibile:hover .stat-invito,
.stat--premibile:focus-visible .stat-invito { opacity: 1; transform: none; }

@media (hover: none) {
  /* Senza mouse l'invito non comparirebbe mai: li' sta sempre. */
  .stat-invito { opacity: 1; transform: none; }
}

.bottone-recensione {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--border-radius-full, 999px);
  border: 1px solid rgba(218, 168, 88, 0.4);
  background: rgba(218, 168, 88, 0.08);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              transform var(--transition-fast);
}
.bottone-recensione:hover {
  background: rgba(218, 168, 88, 0.16);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.bottone-recensione,
.stat--premibile { text-decoration: none; }

/* ---- gli allegati del modulo ----------------------------------------
   Il campo file del browser non si puo' vestire: si nasconde e si usa la
   sua etichetta come bottone. I file scelti diventano una riga ciascuno,
   con il peso e una crocetta per toglierlo - perche' il campo di sistema,
   da solo, un file scelto non lo lascia togliere. */
.bolla__allega { margin: 2px 0 14px; }

.bolla__graffetta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--border-radius-full, 999px);
  border: 1px dashed rgba(218, 168, 88, 0.45);
  background: rgba(218, 168, 88, 0.06);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.84rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.bolla__graffetta:hover {
  background: rgba(218, 168, 88, 0.14);
  border-style: solid;
}

.bolla__quali {
  display: block;
  margin-top: 7px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.bolla__elenco { list-style: none; margin: 10px 0 0; padding: 0; }

.bolla__elenco li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  margin-bottom: 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.8rem;
}

.bolla__nomefile {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.bolla__pesofile { flex: none; color: var(--text-muted); font-size: 0.74rem; }

.bolla__elenco button {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.bolla__elenco button:hover { background: rgba(240, 160, 144, 0.22); color: #F0A090; }

.bolla__troppo {
  background: rgba(240, 160, 144, 0.12) !important;
  color: #F0A090;
  display: block !important;
}

/* La riga che dice dove finisce il messaggio. Non e' un dettaglio tecnico:
   sapere che qualcuno lo vede subito cambia la voglia di scrivere. */
.bolla__wa {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 6px;
  color: var(--color-primary);
}
.bolla__wa i { font-size: 0.9em; }

/* ---- gli allegati del modulo nella pagina Contatti -------------------
   Stesse idee del modulo che si apre dal bottone, misure da pagina intera.
   I nomi delle classi sono diversi perche' i due moduli vivono in posti
   diversi e non devono ereditarsi addosso le regole a vicenda. */
.allega-riga { margin-top: 18px; }

.allega-bottone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--border-radius-full, 999px);
  border: 1px dashed rgba(218, 168, 88, 0.45);
  background: rgba(218, 168, 88, 0.06);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.allega-bottone:hover { background: rgba(218, 168, 88, 0.14); border-style: solid; }

.allega-quali {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.allega-elenco { list-style: none; margin: 12px 0 0; padding: 0; }

.allega-elenco li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.86rem;
}

.allega-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.allega-peso { flex: none; color: var(--text-muted); font-size: 0.78rem; }

.allega-elenco button {
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.allega-elenco button:hover { background: rgba(240, 160, 144, 0.22); color: #F0A090; }

.allega-troppo {
  background: rgba(240, 160, 144, 0.12) !important;
  color: #F0A090;
  display: block !important;
}

/* Dove finisce il messaggio. Sapere che qualcuno lo vede subito cambia la
   voglia di scriverlo. */
.allega-wa {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0 0;
  padding: 11px 14px;
  border-left: 2px solid var(--color-primary);
  background: rgba(218, 168, 88, 0.06);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.allega-wa i { color: var(--color-primary); flex: none; }