/*
  altieri.eu
  Style System derivato da Dolomitika: stessi token e componenti, paletta ink + terracotta, titoli in serif
*/

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Design Tokens */
:root {
    /* ============================================================
       DOLOMITIKA — Paletta definitiva (seed hue teal 194.8°)
       Teal = brand primario · Orange = accento · Neutri stesso hue.
       Colori ancorati: #008080 (Teal 600) e #FA7316 (Orange 400).
       ============================================================ */

    /* Teal — brand primario */
    --teal-25:  #F3FCFC;
    --teal-50:  #E8F8F8;
    --teal-100: #CEF0EF;
    --teal-200: #A7E0DF;
    --teal-300: #7DCAC9;
    --teal-400: #54AFAF;
    --teal-500: #2A9494;
    --teal-600: #008080;   /* il tuo hex, intatto */
    --teal-700: #006262;
    --teal-800: #004A4A;
    --teal-900: #003333;
    --teal-950: #001F1F;

    /* Orange — accento */
    --orange-25:  #FFF9F6;
    --orange-50:  #FFF1EB;
    --orange-100: #FFE1D2;
    --orange-200: #FFC5A8;
    --orange-300: #FF9F6E;
    --orange-400: #FA7316;   /* il tuo hex, intatto */
    --orange-500: #D05B00;
    --orange-600: #AC4A00;
    --orange-700: #8A3A00;
    --orange-800: #692A00;
    --orange-900: #4A1B00;
    --orange-950: #2E0F00;

    /* Neutro — stesso hue del teal, croma 14% (i grigi non sono mai estranei) */
    --neutral-25:  #F9FAFA;
    --neutral-50:  #F3F5F5;
    --neutral-100: #E4E9E9;
    --neutral-200: #CED5D5;
    --neutral-300: #B3BDBC;
    --neutral-400: #96A1A1;
    --neutral-500: #7B8685;
    --neutral-600: #646E6E;
    --neutral-700: #4E5757;
    --neutral-800: #3A4141;
    --neutral-900: #272D2C;
    --neutral-950: #161A1A;

    /* ---- Token semantici (dal manuale paletta) ---- */
    /* superfici */
    --surface: #F9FAFA;
    --surface-raised: #FFFFFF;
    --surface-sunken: #F3F5F5;
    --surface-dark: #003333;
    --surface-dark-alt: #004A4A;
    --surface-deep: #001F1F;
    /* testo su chiaro */
    --text: #272D2C;
    --text-brand: #006262;
    --text-accent: #AC4A00;
    /* testo su scuro */
    --text-inv: #F9FAFA;
    --text-inv-muted: #A7E0DF;
    --text-inv-brand: #7DCAC9;
    --text-inv-accent: #FA7316;
    /* azione */
    --cta-bg: #AC4A00;
    --cta-fg: #FFFFFF;
    --cta-bg-dark: #FA7316;
    --cta-fg-dark: #001F1F;
    --focus-ring: #2A9494;
    /* bordi */
    --border: #E4E9E9;
    --border-strong: #CED5D5;
    --border-dark: #006262;
    /* logo */
    --logo-light-mark: #008080;
    --logo-light-payoff: #AC4A00;
    --logo-dark-mark: #7DCAC9;
    --logo-dark-payoff: #FA7316;

    /* ---- Alias di compatibilità: il vecchio sistema "blu" ora è teal ---- */
    --primary-blue: var(--teal-700);          /* #006262 brand scuro su chiaro (link, heading, btn) */
    --secondary-blue: var(--teal-600);        /* #008080 anchor teal — hover/gradiente, AA su bianco (4.56:1) */
    --accent-blue: var(--teal-400);           /* #54AFAF teal chiaro / glow */
    --accent-orange: var(--orange-400);       /* #FA7316 */
    --accent-orange-light: var(--orange-300); /* #FF9F6E */

    /* Neutrali (teal-tinted) — nomi gray-* del vecchio sistema mantenuti */
    --dark: var(--surface-dark);    /* #003333 superficie scura brand */
    --gray-900: var(--neutral-900); /* #272D2C */
    --gray-800: var(--neutral-800); /* #3A4141 */
    --gray-700: var(--neutral-700); /* #4E5757 */
    --gray-600: var(--neutral-600); /* #646E6E — AA su bianco (5.25:1) */
    --gray-500: var(--neutral-400); /* #96A1A1 */
    --gray-400: var(--neutral-300); /* #B3BDBC */
    --gray-300: var(--neutral-200); /* #CED5D5 */
    --gray-200: var(--neutral-100); /* #E4E9E9 */
    --gray-100: var(--neutral-50);  /* #F3F5F5 */
    --white: #ffffff;

    /* Semantic Colors */
    --text-primary: var(--neutral-900);   /* #272D2C */
    --text-secondary: var(--neutral-700); /* #4E5757 */
    --text-muted: var(--neutral-600);     /* #646E6E */
    --text-subtle: var(--neutral-500);    /* #7B8685 — solo testo grande / decorativo */
    --bg-primary: var(--white);
    --bg-secondary: var(--neutral-50);
    --bg-dark: var(--surface-dark);

    /* Success/Error/Warning */
    --success: #22c55e;
    --error: #ef4444;
    --warning: #eab308;

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

    /* Typography Scale */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* Container */
    --container-max-width: 1280px;
    --container-max-width-xl: 1440px;
    --container-max-width-2xl: 1600px;
    --container-padding: 1.5rem;

    /* Glassmorphism */
    --glass-bg-light: rgba(255, 255, 255, 0.15);
    --glass-bg-medium: rgba(255, 255, 255, 0.25);
    --glass-bg-dark: rgba(38, 54, 76, 0.15);
    --glass-border-light: rgba(255, 255, 255, 0.25);
    --glass-border-dark: rgba(38, 54, 76, 0.2);
    --glass-blur: 20px;
    --glass-blur-subtle: 10px;

    /* Layout */
    --header-height: 70px;
}

/* ============================================================
   ALTIERI.EU — override della paletta e della tipografia.
   I nomi dei token restano quelli di Dolomitika (--teal-*, --orange-*,
   --neutral-*): cambiano solo i valori. Primario "ink" (blu inchiostro,
   hue 220), accento terracotta, neutri caldi. Regola di contrasto CTA
   invariata: su chiaro #9A3F12 + bianco, su scuro #D9622B + #0B121C.
   Titoli in serif di sistema (nessun font scaricato).
   ============================================================ */
:root {
    --teal-25:  #F7F8FA;
    --teal-50:  #EEF1F5;
    --teal-100: #DCE2EA;
    --teal-200: #B9C4D3;
    --teal-300: #B9C4D3;
    --teal-400: #667B99;
    --teal-500: #4A5E7C;
    --teal-600: #354761;
    --teal-700: #26364C;
    --teal-800: #1B283A;
    --teal-900: #121C2B;
    --teal-950: #0B121C;

    --orange-300: #EDA07A;
    --orange-400: #D9622B;
    --orange-500: #B84E1A;
    --orange-600: #9A3F12;

    --neutral-25:  #FBFAF8;
    --neutral-50:  #F6F4F0;
    --neutral-100: #EAE6DF;
    --neutral-200: #D6D0C5;
    --neutral-300: #BDB5A7;
    --neutral-400: #9C9384;
    --neutral-500: #7E7668;
    --neutral-600: #655E52;
    --neutral-700: #4D473E;
    --neutral-800: #38332D;
    --neutral-900: #24211C;
    --neutral-950: #151310;

    --surface: #FBFAF8;
    --surface-raised: #FFFFFF;
    --surface-sunken: #F6F4F0;
    --surface-dark: #121C2B;
    --surface-dark-alt: #1B283A;
    --surface-deep: #0B121C;
    --text: #24211C;
    --text-brand: #26364C;
    --text-accent: #9A3F12;
    --text-inv: #FBFAF8;
    --text-inv-muted: #B9C4D3;
    --text-inv-brand: #DCE2EA;
    --text-inv-accent: #D9622B;
    --cta-bg: #9A3F12;
    --cta-fg: #FFFFFF;
    --cta-bg-dark: #D9622B;
    --cta-fg-dark: #0B121C;
    --focus-ring: #D9622B;
    --border: #EAE6DF;
    --border-strong: #D6D0C5;
    --border-dark: #26364C;
    --glass-bg-dark: rgba(38, 54, 76, 0.15);
    --glass-border-dark: rgba(38, 54, 76, 0.2);

    --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
}

h1, h2, h3, .wordmark { font-family: var(--font-serif); letter-spacing: -0.01em; }
.wordmark { font-size: 1.5rem; font-weight: 700; color: var(--text-brand); text-decoration: none; gap: 0; }
/* `.logo a` mette un gap tra i figli: sul wordmark separava "altieri" da ".eu". */
.logo a.wordmark { gap: 0; }
.wordmark .tld { color: var(--text-accent); }
.wordmark-footer { color: var(--text-inv); font-size: 1.75rem; }
.wordmark-footer .tld { color: var(--text-inv-accent); }

/* Piede minimo: wordmark a sinistra, una riga legale a destra. Nessun indirizzo. */
footer.footer-min { padding: var(--space-2xl) 0; }
.footer-min .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin: 0; font-size: var(--text-sm); color: var(--text-inv-muted); }
.footer-legal a { color: var(--text-inv-muted); }
.footer-legal a:hover { color: var(--text-inv); }
.footer-linkedin { display: inline-flex; align-items: center; padding: 4px; margin: -4px; }
.footer-linkedin svg { display: block; }
.footer-piva { font-size: var(--text-xs); opacity: 0.7; }

/* Base Styles */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 10px);
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    background-size: cover;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Main Content Area - Offset per fixed header + sfondo bianco opaco */
main {
    padding-top: var(--header-height);
    background-color: var(--white);
}

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

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

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

a:hover {
    color: var(--secondary-blue);
}

/* Header & Navigation */
header {
    background: var(--white);
    box-shadow: var(--shadow-sm);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: transform var(--transition-base);
}

header.hide {
    transform: translateY(-100%);
}

.navbar {
    padding: var(--space-lg) 0;
}

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

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.logo a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
}

.logo-icon {
    height: 32px;
    width: auto;
}

/* Lockup marchio + wordmark (asset ufficiale, fondo chiaro) */
.logo-lockup {
    height: 30px;
    width: auto;
    display: block;
}

.logo h1,
.logo span {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-xl);
    align-items: center;
}

.nav-menu a {
    color: var(--text-primary);
    font-weight: 500;
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
    position: relative;
}

.nav-menu a:hover {
    color: var(--primary-blue);
}

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

.nav-menu a:hover::after {
    width: 100%;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: var(--space-sm);
    padding-left: var(--space-lg);
    border-left: 1px solid var(--gray-300);
}

.lang-switcher a {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
}

.lang-switcher a.active {
    background: var(--primary-blue);
    color: var(--white);
}

/* Mobile Menu Toggle (Hamburger) */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 44px;
    height: 44px;
    padding: 12px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    /* iOS Safari touch fix */
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--primary-blue);
    border-radius: 2px;
    transition: all var(--transition-fast);
    transform-origin: center;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-base);
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn-primary {
    background: var(--primary-blue);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--secondary-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: var(--white);
}

/* CTA: mai bianco su #FA7316 (sarebbe 2.79:1). Su chiaro = #AC4A00 + bianco (5.62:1). */
.btn-accent {
    background: var(--cta-bg);
    color: var(--cta-fg);
}

.btn-accent:hover {
    background: var(--orange-700);
    color: var(--cta-fg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* CTA su superfici scure = #FA7316 + testo scuro #001F1F (6.19:1) */
.hero .btn-accent,
.hero-home .btn-accent,
.lp-hero .btn-accent,
.campaign-hero .btn-accent,
#problema .btn-accent,
#soluzioni .btn-accent,
section.bg-dark .btn-accent,
.on-dark .btn-accent,
footer .btn-accent {
    background: var(--cta-bg-dark);
    color: var(--cta-fg-dark);
}

.hero .btn-accent:hover,
.hero-home .btn-accent:hover,
.lp-hero .btn-accent:hover,
.campaign-hero .btn-accent:hover,
#problema .btn-accent:hover,
#soluzioni .btn-accent:hover,
section.bg-dark .btn-accent:hover,
.on-dark .btn-accent:hover,
footer .btn-accent:hover {
    background: var(--orange-300);
    color: var(--cta-fg-dark);
}

/* Glass Button Variants */
.btn-glass {
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--glass-blur-subtle));
    -webkit-backdrop-filter: blur(var(--glass-blur-subtle));
    border: 1.5px solid var(--glass-border-light);
    color: var(--white);
}

.btn-glass:hover {
    background: var(--glass-bg-medium);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    color: var(--white);
}

.btn-primary-glass {
    background: rgba(38, 54, 76, 0.7);
    backdrop-filter: blur(var(--glass-blur-subtle));
    -webkit-backdrop-filter: blur(var(--glass-blur-subtle));
    border: 1.5px solid rgba(42, 148, 148, 0.4);
    color: var(--white);
}

.btn-primary-glass:hover {
    background: rgba(38, 54, 76, 0.85);
    border-color: rgba(42, 148, 148, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(38, 54, 76, 0.3);
    color: var(--white);
}

.btn-accent-glass {
    background: rgba(250, 115, 22, 0.92);
    backdrop-filter: blur(var(--glass-blur-subtle));
    -webkit-backdrop-filter: blur(var(--glass-blur-subtle));
    border: 1.5px solid rgba(255, 159, 110, 0.6);
    color: var(--cta-fg-dark); /* mai bianco su arancio */
}

.btn-accent-glass:hover {
    background: rgba(250, 115, 22, 1);
    border-color: rgba(255, 159, 110, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(250, 115, 22, 0.3);
    color: var(--cta-fg-dark);
}

.btn-lg {
    padding: var(--space-lg) var(--space-2xl);
    font-size: var(--text-lg);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.btn-sm {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
}

/* Navbar CTA - accent color for visibility */
.nav-menu .btn-accent {
    background: var(--cta-bg);
    color: var(--cta-fg);
}

.nav-menu .btn-accent:hover {
    background: var(--orange-700);
    color: var(--cta-fg);
}

/* Trappola di specificita': `.nav-menu a:hover` vale (0,2,1) e batte
   `.btn-secondary:hover` (0,2,0) sulla proprieta' color. Senza questa regola
   il bottone in hover prende lo sfondo teal ma tiene il testo teal, cioe'
   sparisce. Vale per qualunque .btn dentro la navbar: se ne aggiungi altri,
   la regola dedicata serve anche a loro. */
.nav-menu .btn-secondary:hover {
    background: var(--primary-blue);
    color: var(--white);
}

.nav-menu .btn::after {
    display: none;
}

/* Accent Text - for "tutti" in vision */
.accent-text {
    color: var(--text-accent); /* #AC4A00 — leggibile su chiaro (5.38:1) */
}

/* Su superfici scure l'accento diventa l'arancio brillante del brand */
.hero .accent-text,
.hero-content .accent-text,
.lp-hero .accent-text,
.campaign-hero .accent-text,
#problema .accent-text,
#soluzioni .accent-text,
section.bg-dark .accent-text,
footer .accent-text {
    color: var(--text-inv-accent); /* #FA7316 — su scuro (4.95:1) */
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--surface-dark) 0%, var(--surface-deep) 100%);
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding: var(--space-4xl) 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.1;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.hero-content h1 {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-lg);
    color: var(--white);
    line-height: 1.08;
}

/* Homepage: scala display (titolo breve, massimo impatto) */
.hero-home .hero-content h1 {
    font-size: clamp(2.75rem, 6.5vw, 5rem);
    line-height: 1.05;
}

/* Eyebrow di contesto sopra il titolo degli hero interni */
.hero-eyebrow {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-orange-light);
    margin-bottom: var(--space-md);
}

/* Eyebrow riusato su superfici chiare (card, bg-secondary): accento scuro per il contrasto */
.card .hero-eyebrow,
.bg-secondary .hero-eyebrow {
    color: var(--text-accent);
}

.hero-content h1 strong {
    color: var(--accent-orange);
}

.hero-content p {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2xl);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

/* Hero Mission - Styled with decorative underline */
.hero-mission-styled {
    position: relative;
    display: inline-block;
    font-size: var(--text-2xl);
    font-weight: 500;
    letter-spacing: 0.015em;
    color: rgba(255, 255, 255, 0.95);
    margin: var(--space-md) auto var(--space-xl);
    padding-bottom: var(--space-lg);
}

.hero-mission-styled::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-orange) 20%, var(--accent-orange) 80%, transparent 100%);
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

.hero-mission-styled:hover::after {
    width: 140px;
}

.hero-mission-styled strong {
    color: var(--accent-orange);
    font-weight: 700;
}

.hero-cta {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
}

/* Hero Stats Grid - Mini Stat Cards */
.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto var(--space-lg);
}

.hero-stats-row-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto var(--space-2xl);
}

.hero-stat-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md);
    transition: all var(--transition-fast);
}

.hero-stat-mini:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.hero-stat-value {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--accent-orange);
    line-height: 1.2;
    text-align: center;
}

.hero-stat-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--white);
    text-align: center;
    line-height: 1.3;
}

.hero-stat-desc {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.4;
    margin-top: var(--space-xs);
}

@media (max-width: 900px) {
    .hero-stats-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        gap: var(--space-md);
    }

    .hero-stats-row-2 {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .hero-stat-value {
        font-size: var(--text-lg);
    }

    .hero-stat-mini {
        padding: var(--space-md);
    }
}

/* Keyword Swap Effect - "Software" → "Soluzioni" */
.keyword-swap {
    position: relative;
    display: inline;
}

.keyword-swap .old-word {
    text-decoration: line-through;
    text-decoration-color: var(--accent-orange);
    text-decoration-thickness: 2px;
    opacity: 0.5;
    margin-right: 0.25em;
}

.keyword-swap .new-word {
    color: var(--accent-orange);
    font-weight: 600;
}

/* Hero Purpose styling */
.hero-purpose {
    font-size: var(--text-base);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-md);
    letter-spacing: 0.04em;
}

/* Sections */
section {
    padding: var(--space-4xl) 0;
}

section.bg-secondary {
    background: var(--bg-secondary);
}

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

section.bg-dark h2,
section.bg-dark h3,
section.bg-dark p {
    color: var(--white);
}

/* Titoli su superfici scure.
   La regola globale `h1, h2, ... { color: var(--text-primary) }` e' scura e
   si applica anche dentro un contenitore che ha `color: white`: un heading
   ha un colore proprio, quindi non eredita. Chi scrive una testata scura
   nuova si accorge del problema solo guardando la pagina, perche' il testo
   c'e' ma non si legge. Questa regola copre le superfici scure note; per una
   superficie nuova va aggiunta qui, non risolta con uno style inline. */
/* ELENCO UNICO DELLE SUPERFICI SCURE.
   Il problema non riguarda solo i titoli: anche `p { color:
   var(--text-secondary) }` e' una regola globale, quindi un paragrafo
   dentro un contenitore con `color: white` NON eredita — ha un colore
   proprio. Vale per h1-h4, p e li.
   Chi crea una nuova sezione scura ha due strade: aggiungere la sua
   classe a questo elenco, oppure — piu' semplice — mettere `on-dark`
   fra le classi dell'elemento. Non risolverlo con uno style inline sul
   singolo titolo: e' il motivo per cui il problema e' ricomparso tre
   volte su pagine diverse. */
.hero h1, .hero h2, .hero h3, .hero h4, .hero p, .hero li,
section.bg-dark h1, section.bg-dark h2, section.bg-dark h3,
section.bg-dark h4, section.bg-dark p, section.bg-dark li,
#problema h1, #problema h2, #problema h3, #problema h4, #problema p, #problema li,
#soluzioni h1, #soluzioni h2, #soluzioni h3, #soluzioni h4, #soluzioni p, #soluzioni li,
.news-header h1, .news-header h2, .news-header h3, .news-header p,
.lp-hero h1, .lp-hero h2, .lp-hero h3, .lp-hero p, .lp-hero li,
.demo-hero h1, .demo-hero h2, .demo-hero h3, .demo-hero p, .demo-hero li,
.campaign-hero h1, .campaign-hero h2, .campaign-hero h3, .campaign-hero p,
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.on-dark p, .on-dark li {
    color: var(--white);
}

/* Le stesse superfici scure per il testo corrente delle righe collaterali,
   che usano `color: inherit`: senza questo ereditano il colore di testo
   chiaro di default, cioe' scuro su scuro. */
#problema .collaterale,
#soluzioni .collaterale,
section.bg-dark .collaterale {
    color: var(--white);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
    backdrop-filter: blur(8px);
}

#problema .collaterale:hover,
#soluzioni .collaterale:hover,
section.bg-dark .collaterale:hover {
    border-color: var(--text-inv-accent);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

#problema .collaterale i, #soluzioni .collaterale i, section.bg-dark .collaterale i,
#problema .collaterale-go, #soluzioni .collaterale-go, section.bg-dark .collaterale-go {
    color: var(--text-inv-accent);
}

/* ...ma una superficie scura puo' contenere card CHIARE (.card su
   /it/soluzioni/): li' i titoli devono tornare scuri, altrimenti si finisce
   con bianco su bianco. .card-glass e' invece la variante per fondo scuro e
   tiene il testo chiaro, quindi non va toccata. */
#problema .card h1, #problema .card h2, #problema .card h3, #problema .card h4,
#problema .card p, #problema .card li,
#soluzioni .card h1, #soluzioni .card h2, #soluzioni .card h3, #soluzioni .card h4,
#soluzioni .card p, #soluzioni .card li,
section.bg-dark .card h1, section.bg-dark .card h2,
section.bg-dark .card h3, section.bg-dark .card h4,
section.bg-dark .card p, section.bg-dark .card li,
.on-dark .card h1, .on-dark .card h2, .on-dark .card h3, .on-dark .card h4,
.on-dark .card p, .on-dark .card li {
    color: var(--text-primary);
}

/* Le card chiare tengono il proprio testo secondario grigio, non nero */
#problema .card p, #soluzioni .card p,
section.bg-dark .card p, .on-dark .card p {
    color: var(--text-secondary);
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-3xl);
}

.section-header h2 {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-md);
    color: var(--primary-blue);
}

.section-header p {
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

/* Problem Section - Dark Parallax Background */
#problema {
    background: linear-gradient(135deg, rgba(11, 18, 28, 0.60) 0%, rgba(38, 54, 76, 0.55) 100%),
                none;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}

#problema .section-header h2 {
    color: var(--white);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5), 0 4px 30px rgba(0, 0, 0, 0.3);
}

#problema .section-header p {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Solutions Section - Dark Parallax Background */
#soluzioni {
    background: linear-gradient(135deg, rgba(11, 18, 28, 0.65) 0%, rgba(38, 54, 76, 0.60) 100%),
                none;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}

#soluzioni .section-header h2 {
    color: var(--white);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5), 0 4px 30px rgba(0, 0, 0, 0.3);
}

#soluzioni .section-header p {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Section Header Glass - For headers on dark backgrounds */
.section-header-glass {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

.section-header-glass h2 {
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.section-header-glass p {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

/* Grid Layouts */
.grid {
    display: grid;
    gap: var(--space-xl);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* =============================================================
   GRID RESPONSIVO AVANZATO - Ottimizzazione card-glass
   Range 1025-1440px: 2 colonne per maggiore leggibilità
   Range >1440px: 4 colonne con container espanso
   ============================================================= */

@media (min-width: 1025px) and (max-width: 1440px) {
    #problema .grid-4,
    #soluzioni .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl);
    }
}

@media (min-width: 1441px) {
    .container {
        max-width: var(--container-max-width-xl);
    }

    #problema .grid-4,
    #soluzioni .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1921px) {
    .container {
        max-width: var(--container-max-width-2xl);
    }
}

/* =============================================================
   DOLOMITIKA GLASS SYSTEM
   Unified glassmorphism design for consistent visual language
   ============================================================= */

/* Cards - Solid White with Glass Accent
   Part of Dolomitika Glass System */
.card {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.88) 100%
    );
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border: 1px solid rgba(38, 54, 76, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow:
        0 8px 32px rgba(38, 54, 76, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(38, 54, 76, 0.02);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(38, 54, 76, 0.12) 50%,
        transparent 100%
    );
}

.card:hover {
    transform: translateY(-6px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.92) 100%
    );
    border-color: rgba(38, 54, 76, 0.12);
    box-shadow:
        0 20px 50px rgba(38, 54, 76, 0.10),
        0 0 40px rgba(42, 148, 148, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.card h3 {
    color: var(--primary-blue);
    margin-bottom: var(--space-md);
}

.card p {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.card .card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-lg);
    box-shadow: 0 4px 15px rgba(38, 54, 76, 0.2);
}

/* Glass Card - Dark Background (for parallax/dark sections)
   Part of Dolomitika Glass System */
.card-glass {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.06) 100%
    );
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.card-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
}

.card-glass:hover {
    transform: translateY(-6px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.10) 100%
    );
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 40px rgba(84, 175, 175, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.card-glass h3 {
    color: var(--white);
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.card-glass p {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--space-lg);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Enhanced Icon System - Premium glassmorphism icons with Lucide support */
.card-glass .card-icon {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-xl);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.10) 100%
    );
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-xl);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

/* Gradient ring for dark variant */
.card-glass .card-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-xl) + 2px);
    padding: 2px;
    background: linear-gradient(
        135deg,
        rgba(84, 175, 175, 0.4) 0%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(250, 115, 22, 0.3) 70%,
        rgba(255, 255, 255, 0.15) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* Inner highlight for dark variant */
.card-glass .card-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        transparent 100%
    );
    border-radius: var(--radius-xl) var(--radius-xl) 50% 50%;
    pointer-events: none;
}

/* Lucide icon styling for dark variant */
.card-glass .card-icon svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.5;
    stroke: rgba(255, 255, 255, 0.95);
    fill: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all var(--transition-base);
    position: relative;
    z-index: 1;
}

/* Hover state for dark variant */
.card-glass:hover .card-icon {
    transform: scale(1.08) translateY(-4px);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.14) 100%
    );
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.35),
        0 0 60px rgba(84, 175, 175, 0.15),
        0 0 30px rgba(250, 115, 22, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.card-glass:hover .card-icon::before {
    opacity: 1;
}

.card-glass:hover .card-icon svg {
    stroke: var(--white);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* Glass Card - Light Background (for light/neutral sections)
   Part of Dolomitika Glass System */
.card-glass-light {
    background: linear-gradient(
        135deg,
        rgba(38, 54, 76, 0.06) 0%,
        rgba(38, 54, 76, 0.02) 50%,
        rgba(38, 54, 76, 0.04) 100%
    );
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(38, 54, 76, 0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow:
        0 8px 32px rgba(38, 54, 76, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(38, 54, 76, 0.03);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.card-glass-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(38, 54, 76, 0.2) 50%,
        transparent 100%
    );
}

.card-glass-light:hover {
    transform: translateY(-6px);
    background: linear-gradient(
        135deg,
        rgba(38, 54, 76, 0.10) 0%,
        rgba(38, 54, 76, 0.04) 50%,
        rgba(38, 54, 76, 0.08) 100%
    );
    border-color: rgba(38, 54, 76, 0.20);
    box-shadow:
        0 20px 50px rgba(38, 54, 76, 0.12),
        0 0 40px rgba(42, 148, 148, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card-glass-light h3 {
    color: var(--primary-blue);
    margin-bottom: var(--space-md);
}

.card-glass-light p {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

/* Enhanced Icon System - Light variant */
.card-glass-light .card-icon {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-xl);
    background: linear-gradient(
        145deg,
        rgba(38, 54, 76, 0.08) 0%,
        rgba(38, 54, 76, 0.03) 50%,
        rgba(42, 148, 148, 0.06) 100%
    );
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(38, 54, 76, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-xl);
    box-shadow:
        0 8px 32px rgba(38, 54, 76, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        inset 0 -1px 2px rgba(38, 54, 76, 0.03);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

/* Gradient ring for light variant */
.card-glass-light .card-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-xl) + 2px);
    padding: 2px;
    background: linear-gradient(
        135deg,
        rgba(38, 54, 76, 0.3) 0%,
        rgba(42, 148, 148, 0.15) 30%,
        rgba(250, 115, 22, 0.25) 70%,
        rgba(38, 54, 76, 0.2) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* Inner highlight for light variant */
.card-glass-light .card-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.7) 0%,
        transparent 100%
    );
    border-radius: var(--radius-xl) var(--radius-xl) 50% 50%;
    pointer-events: none;
}

/* Lucide icon styling for light variant */
.card-glass-light .card-icon svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.5;
    stroke: var(--primary-blue);
    fill: none;
    filter: drop-shadow(0 1px 2px rgba(38, 54, 76, 0.15));
    transition: all var(--transition-base);
    position: relative;
    z-index: 1;
}

/* Hover state for light variant */
.card-glass-light:hover .card-icon {
    transform: scale(1.08) translateY(-4px);
    background: linear-gradient(
        145deg,
        rgba(38, 54, 76, 0.12) 0%,
        rgba(38, 54, 76, 0.05) 50%,
        rgba(42, 148, 148, 0.10) 100%
    );
    border-color: rgba(38, 54, 76, 0.20);
    box-shadow:
        0 16px 48px rgba(38, 54, 76, 0.12),
        0 0 60px rgba(42, 148, 148, 0.08),
        0 0 30px rgba(250, 115, 22, 0.05),
        inset 0 2px 4px rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(38, 54, 76, 0.03);
}

.card-glass-light:hover .card-icon::before {
    opacity: 1;
}

.card-glass-light:hover .card-icon svg {
    stroke: var(--secondary-blue);
    filter: drop-shadow(0 0 6px rgba(42, 148, 148, 0.3));
}

/* Feature List */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
}

.feature-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.feature-item:nth-child(even) .feature-content {
    order: 2;
}

.feature-item:nth-child(even) .feature-visual {
    order: 1;
}

.feature-content h3 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
    color: var(--primary-blue);
}

.feature-content p {
    font-size: var(--text-lg);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.feature-visual {
    background: var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.feature-visual img {
    max-width: 100%;
    border-radius: var(--radius-md);
}

/* Glass Feature Visual */
.feature-visual-glass {
    background: rgba(38, 54, 76, 0.06);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(38, 54, 76, 0.12);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(38, 54, 76, 0.08);
    transition: all var(--transition-base);
}

.feature-visual-glass:hover {
    background: rgba(38, 54, 76, 0.1);
    border-color: rgba(38, 54, 76, 0.2);
    box-shadow: 0 15px 50px rgba(38, 54, 76, 0.12);
}

.feature-visual-glass img {
    max-width: 100%;
    border-radius: var(--radius-md);
}

/* Screenshot variant: mockups ship on a white background, so the frame is white
   and the image runs edge-to-edge — the PNG's own margin acts as the padding.
   Pair with .feature-visual-glass to inherit its order/responsive rules. */
.feature-visual-shot {
    background: #fff;
    padding: 0;
    min-height: 0;
    overflow: hidden;
}

.feature-visual-shot:hover {
    background: #fff;
    transform: translateY(-4px);
}

.feature-visual-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Glass Feature Item */
.feature-item-glass {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    background: rgba(38, 54, 76, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(38, 54, 76, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    transition: all var(--transition-base);
}

.feature-item-glass:hover {
    background: rgba(38, 54, 76, 0.07);
    border-color: rgba(38, 54, 76, 0.15);
    box-shadow: 0 15px 50px rgba(38, 54, 76, 0.1);
}

.feature-item-glass:nth-child(even) .feature-content {
    order: 2;
}

.feature-item-glass:nth-child(even) .feature-visual,
.feature-item-glass:nth-child(even) .feature-visual-glass {
    order: 1;
}

/* Stats */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2xl);
    text-align: center;
}

.stat-item h3 {
    font-size: var(--text-5xl);
    color: var(--text-accent); /* #AC4A00 — numeri su superfici chiare (AA) */
    margin-bottom: var(--space-sm);
}

/* Sui blocchi scuri i numeri usano l'arancio brillante */
.hero .stat-item h3,
.lp-hero .stat-item h3,
.campaign-hero .stat-item h3,
#problema .stat-item h3,
#soluzioni .stat-item h3,
section.bg-dark .stat-item h3,
footer .stat-item h3 {
    color: var(--text-inv-accent); /* #FA7316 */
}

.stat-item p {
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

/* Testimonials
   Part of Dolomitika Glass System */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-xl);
}

.testimonial {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.88) 100%
    );
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
    box-shadow:
        0 8px 32px rgba(38, 54, 76, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border-left: 4px solid var(--accent-orange);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.testimonial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 4px;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(250, 115, 22, 0.3) 0%,
        rgba(38, 54, 76, 0.1) 50%,
        transparent 100%
    );
}

.testimonial:hover {
    transform: translateY(-4px);
    box-shadow:
        0 20px 50px rgba(38, 54, 76, 0.10),
        0 0 30px rgba(250, 115, 22, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.testimonial-content {
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
}

.testimonial-author-info h4 {
    font-size: var(--text-base);
    margin: 0;
}

.testimonial-author-info p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

/* Client Logos Grid */
.client-logos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2xl);
    align-items: center;
    justify-items: center;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .client-logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }
}

.client-logo {
    text-align: center;
    transition: all var(--transition-base);
}

.client-logo img {
    max-height: 60px;
    width: auto;
    max-width: 180px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all var(--transition-base);
}

.client-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.client-logo p {
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

/* Forms */
.form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-group label {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: var(--space-md);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-lg);
    background: var(--gray-100);
    border-radius: var(--radius-md);
}

.form-trust p {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.form-trust p::before {
    content: '✓';
    color: var(--success);
    font-weight: bold;
}

/* Form Dark Variant - For dark backgrounds */
.form-dark {
    max-width: 800px;
}

.form-dark .form-group label {
    color: var(--accent-orange-light);
    font-weight: 500;
}

.form-dark .form-group input,
.form-dark .form-group select,
.form-dark .form-group textarea {
    background: var(--white);
    border: 2px solid transparent;
    color: var(--text-primary);
}

.form-dark .form-group input:focus,
.form-dark .form-group select:focus,
.form-dark .form-group textarea:focus {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(250, 115, 22, 0.2);
}

.form-dark .form-group input::placeholder,
.form-dark .form-group textarea::placeholder {
    color: var(--gray-500);
}

.form-dark .form-trust {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.form-dark .form-trust p {
    color: rgba(255, 255, 255, 0.9);
}

/* Form Grid Layout - 2 columns on desktop */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.form-row .form-group {
    margin: 0;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Footer */
footer {
    background: var(--surface-deep); /* #001F1F — footer del manuale paletta */
    color: var(--white);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-brand {
    margin-bottom: var(--space-2xl);
}

.footer-logo {
    height: 26px;
    width: auto;
    display: block;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.footer-section h3 {
    color: var(--white);
    margin-bottom: var(--space-lg);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: var(--space-sm);
}

.footer-section a {
    color: var(--gray-400);
    transition: color var(--transition-fast);
}

.footer-section a:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid var(--gray-700);
    padding-top: var(--space-xl);
    text-align: center;
    color: var(--gray-500);
    font-size: var(--text-sm);
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
/* La scala si fermava a 2xl mentre nel markup si usavano gia' mt-3xl/mt-4xl:
   classi inesistenti, quindi no-op. E `.section-header` usa la shorthand
   `margin: 0 auto ...`, che azzera il margine superiore: senza queste due
   utility il titolo finiva appiccicato al blocco precedente. */
.mt-3xl { margin-top: var(--space-3xl); }
.mt-4xl { margin-top: var(--space-4xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* Responsive Design */
@media (max-width: 1024px) {
    :root {
        --text-6xl: 2.5rem;
        --text-5xl: 2rem;
        --text-4xl: 1.75rem;
    }

    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }

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

    .feature-item {
        grid-template-columns: 1fr;
    }

    .feature-item:nth-child(even) .feature-content,
    .feature-item:nth-child(even) .feature-visual {
        order: initial;
    }

    .feature-item-glass {
        grid-template-columns: 1fr;
    }

    .feature-item-glass:nth-child(even) .feature-content,
    .feature-item-glass:nth-child(even) .feature-visual,
    .feature-item-glass:nth-child(even) .feature-visual-glass {
        order: initial;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Parallax to scroll on tablet */
    #problema,
    #soluzioni {
        background-attachment: scroll;
    }

    /* Mobile Menu - Tablet */
    .mobile-menu-toggle {
        display: flex;
    }

    .logo-lockup {
        height: 24px;
    }

    .navbar .container {
        position: relative;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: var(--space-lg);
        box-shadow: var(--shadow-lg);
        gap: var(--space-md);
        text-align: center;
        z-index: 1000;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a::after {
        display: none;
    }

    .lang-switcher {
        border-left: none;
        border-top: 1px solid var(--gray-300);
        padding-left: 0;
        padding-top: var(--space-md);
        justify-content: center;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
        --text-6xl: 2rem;
        --text-5xl: 1.75rem;
        --text-4xl: 1.5rem;
    }

    /* Mobile menu refinements */
    .nav-menu {
        padding: var(--space-md);
    }

    .nav-menu .btn {
        width: 100%;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-home .hero-content h1 {
        font-size: clamp(2.5rem, 11vw, 3rem);
    }

    .hero-content p {
        font-size: var(--text-base);
    }

    .hero-mission-styled {
        font-size: var(--text-lg);
        padding-bottom: var(--space-md);
    }

    .hero-mission-styled::after {
        width: 80px;
    }

    .hero-mission-styled:hover::after {
        width: 100px;
    }

    .hero-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    /* Parallax to scroll on mobile */
    #problema,
    #soluzioni {
        background-attachment: scroll;
    }

    /* Responsive icons - tablet */
    .card-glass .card-icon,
    .card-glass-light .card-icon {
        width: 72px;
        height: 72px;
        margin-bottom: var(--space-lg);
    }

    .card-glass .card-icon svg,
    .card-glass-light .card-icon svg {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    /* Responsive icons - mobile */
    .card-glass .card-icon,
    .card-glass-light .card-icon {
        width: 64px;
        height: 64px;
    }

    .card-glass .card-icon svg,
    .card-glass-light .card-icon svg {
        width: 32px;
        height: 32px;
    }
    .btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--text-sm);
    }

    .btn-lg {
        padding: var(--space-md) var(--space-xl);
        font-size: var(--text-base);
    }
}

/* ============================================================
   ICONE LUCIDE - dimensionamento nelle card chiare e feature
   ============================================================ */
.card .card-icon svg {
    width: 28px;
    height: 28px;
}

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

.feature-icon svg {
    width: 120px;
    height: 120px;
    color: var(--secondary-blue);
    stroke-width: 1.25;
}

/* ============================================================
   MOBILE: spaziature compatte + carosello card (widget)
   Il carosello viene attivato da main.js sulle griglie .grid-2/3/4
   con 3+ card: scroll-snap orizzontale, card successiva visibile
   al bordo, indicatori a puntini.
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --space-4xl: 3rem;
        --space-3xl: 2.25rem;
    }

    .hero {
        min-height: 0;
    }

    .feature-icon svg {
        width: 72px;
        height: 72px;
    }

    .mob-carousel {
        display: flex;
        gap: var(--space-md);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
        padding: var(--space-xs) var(--container-padding) var(--space-sm);
        scroll-padding-left: var(--container-padding);
        scrollbar-width: none;
    }

    .mob-carousel::-webkit-scrollbar {
        display: none;
    }

    .mob-carousel > * {
        flex: 0 0 84%;
        scroll-snap-align: center;
    }

    .mob-carousel-dots {
        display: flex;
        justify-content: center;
        gap: var(--space-sm);
        margin-top: var(--space-md);
    }

    .mob-carousel-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: var(--radius-full);
        background: rgba(84, 175, 175, 0.35);
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .mob-carousel-dots .dot.active {
        background: var(--accent-orange);
        transform: scale(1.25);
    }
}

@media (min-width: 769px) {
    .mob-carousel-dots {
        display: none;
    }
}

/* ============================================================
   CONSENSO PRIVACY NEI FORM (GDPR)
   ============================================================ */
.form-consent label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
}

.form-consent input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--primary-blue);
}

.form-consent a {
    text-decoration: underline;
}

/* ============================================================
   ACCESSIBILITA' (WCAG 2.1 AA)
   ============================================================ */

/* Peso CTA più marcato. I colori li governa il sistema teal:
   base .btn-accent = #AC4A00 + bianco su chiaro; override su scuro = #FA7316 + #001F1F. */
.btn-accent {
    font-weight: 700;
}

.btn-lg {
    font-size: 1.1875rem;            /* 19px bold = "large text" WCAG */
}

/* Testo arancio su fondi chiari: risolve la variabile sul tono AA (#AC4A00) */
.card,
.testimonial,
.bg-secondary {
    --accent-orange: var(--text-accent);
}

/* Focus visibile su tutti gli elementi interattivi */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--secondary-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip link: nascosto finche' non riceve focus da tastiera */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 10000;
    background: var(--primary-blue);
    color: var(--white);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 1rem;
}

/* Riduzione movimento: disattiva animazioni e scroll fluido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   GUIDE NORMATIVE (/it/insights/) — long-form leggibile
   Contenuto denso di tabelle e riferimenti di legge: misura di
   riga stretta, tabelle che scorrono da sole, nessun riquadro
   decorativo che rubi attenzione al testo.
   ============================================================ */

.container-narrow {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.guide {
    padding: var(--space-3xl) 0 var(--space-4xl);
}

.guide-eyebrow {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-accent);
    margin-bottom: var(--space-md);
}

.guide-eyebrow a { color: inherit; text-decoration: none; }
.guide-eyebrow a:hover { text-decoration: underline; }

.guide h1 {
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.15;
    margin-bottom: var(--space-lg);
}

/* La risposta breve: è il blocco che i motori conversazionali estraggono. */
.guide-lead {
    font-size: var(--text-xl);
    line-height: 1.65;
    color: var(--text);
    border-left: 3px solid var(--text-brand);
    padding-left: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.guide-meta {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--gray-300);
    margin-bottom: var(--space-2xl);
}

.guide-body { font-size: var(--text-lg); line-height: 1.75; }

.guide-body h2 {
    font-size: var(--text-3xl);
    line-height: 1.25;
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-md);
}

.guide-body h3 {
    font-size: var(--text-xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-sm);
}

.guide-body p { margin-bottom: var(--space-lg); }
.guide-body ul,
.guide-body ol { margin: 0 0 var(--space-lg) var(--space-lg); }
.guide-body li { margin-bottom: var(--space-sm); }

.guide-body blockquote {
    border-left: 3px solid var(--text-accent);
    background: var(--neutral-50);
    padding: var(--space-lg);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 0 0 var(--space-lg);
}
.guide-body blockquote p { margin-bottom: 0; }

/* Le tabelle sono la forma che i motori estraggono più volentieri:
   devono scorrere dentro il proprio contenitore, mai spingere la pagina. */
.table-scroll {
    overflow-x: auto;
    margin-bottom: var(--space-xl);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
}

.table-scroll table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
    min-width: 520px;
}

.table-scroll th {
    background: var(--neutral-50);
    text-align: left;
    font-weight: 600;
    padding: var(--space-md);
    border-bottom: 2px solid var(--gray-300);
    vertical-align: top;
}

.table-scroll td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--gray-200);
    vertical-align: top;
}

.table-scroll tr:last-child td { border-bottom: none; }

.guide-figure { margin: var(--space-2xl) 0; }

.guide-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-300);
}

.guide-figure figcaption {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-sm);
    line-height: 1.5;
}

.guide-fonti { font-size: var(--text-base); }
.guide-fonti li { margin-bottom: var(--space-md); }

.guide-disclaimer {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    border-top: 1px solid var(--gray-300);
    padding-top: var(--space-lg);
    margin-top: var(--space-2xl);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .guide { padding: var(--space-2xl) 0 var(--space-3xl); }
    .guide-body { font-size: var(--text-base); }
    .guide-lead { font-size: var(--text-lg); padding-left: var(--space-md); }
}

/* ============================================================
   PRODOTTI COLLATERALI — trattamento compresso
   ProntoBell e Brandix non sono gestionali completi: risolvono un
   problema solo. Con una card piena come i verticali il testo lo dice
   e la grafica lo smentisce, quindi qui il peso visivo e' ridotto.
   `color: inherit` e `--text-accent` fanno funzionare la stessa riga
   sia su fondo chiaro sia su fondo scuro, dove il token e' gia'
   ridefinito dagli override di superficie.
   ============================================================ */

.collaterali {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.collaterale {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.collaterale:hover {
    border-color: var(--text-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.collaterale i {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--text-accent);
}

.collaterale-testo { display: flex; flex-direction: column; min-width: 0; }
.collaterale-nome { font-weight: 700; }
.collaterale-settore { font-size: var(--text-sm); opacity: 0.75; }

.collaterale-go {
    margin-left: auto;
    color: var(--text-accent);
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .collaterale { padding: var(--space-md); }
    .collaterale-go { display: none; }
}

/* ============================================================
   NAVBAR A DUE LIVELLI
   Dropdown puro CSS: hover sul desktop, :focus-within per la
   tastiera, elenco espanso dentro il menu hamburger sul mobile.
   Il chevron è SVG inline nella navbar perché Lucide è caricato
   solo dalle pagine con useLucide, la navbar è su tutte.
   ============================================================ */

.nav-caret {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    transition: transform var(--transition-fast);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 300px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: var(--space-sm);
    margin-top: 12px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 1200;
}

/* Ponte invisibile: senza, il puntatore "cade" nel vuoto fra voce e
   pannello e il menu si chiude prima di poterci entrare. */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
    transform: rotate(180deg);
}

.dropdown-menu a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    line-height: 1.35;
}

.dropdown-menu a:hover {
    background: var(--neutral-50);
}

.dropdown-menu a::after {
    display: none;
}

.dropdown-menu strong {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.dropdown-menu a:hover strong {
    color: var(--primary-blue);
}

.dropdown-desc {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 1px;
}

.dropdown-foot a {
    font-weight: 600;
    color: var(--text-brand);
    border-top: 1px solid var(--gray-200);
    border-radius: 0;
    margin-top: var(--space-xs);
    padding-top: var(--space-sm);
}

.dropdown-foot ~ .dropdown-foot a {
    border-top: none;
    margin-top: 0;
    padding-top: var(--space-xs);
}

@media (max-width: 1024px) {
    /* Nel menu hamburger i sottolivelli sono elencati in chiaro:
       niente hover su touch, e un menu lungo ma scorrevole è più
       onesto di un doppio tap che metà utenti non scopre. */
    .nav-menu {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    .nav-dropdown > a .nav-caret {
        display: none;
    }

    .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        border: none;
        box-shadow: none;
        padding: 0 0 var(--space-sm) 0;
        margin-top: var(--space-xs);
    }

    .dropdown-menu::before { display: none; }

    .dropdown-desc { display: none; }

    .dropdown-menu a {
        padding: var(--space-xs) 0;
        font-size: var(--text-sm);
    }

    .dropdown-menu strong {
        font-weight: 500;
        color: var(--text-secondary);
    }

    .dropdown-menu a:hover { background: transparent; }

    .dropdown-foot a {
        border-top: none;
        padding-top: var(--space-xs);
    }
}

/* ============================================================
   NAVIGAZIONE PREZZI — tessere per prodotto in testa alla pagina
   ============================================================ */

.prezzi-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-md);
}

.prezzi-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-lg);
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.prezzi-tile:hover {
    border-color: var(--text-brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.prezzi-tile strong {
    font-weight: 700;
}

.prezzi-tile .tile-prezzo {
    color: var(--text-accent);
    font-weight: 600;
    font-size: var(--text-sm);
}

.prezzi-tile .tile-desc {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

/* Nota sotto le CTA dell'hero (link terziario, testo chiaro su scuro) */
.hero-cta-note {
    margin-top: var(--space-md);
    font-size: var(--text-sm);
}

.hero-cta-note a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-cta-note a:hover {
    color: var(--white);
}