/* === Stauffer Design System ===
 *
 * Breakpoint in uso (gli intervalli sono disgiunti: un valore non puo' attivare
 * insieme una regola "mobile" e una "desktop", come accadeva a 640, 768 e 1024 px
 * esatti, dove il risultato dipendeva dall'ordine dei file):
 *
 *   fino a  340 / 360 / 480 px   telefoni, in ordine di larghezza crescente
 *   fino a  559 / 639 / 659 px   aggiustamenti locali di singoli componenti
 *   fino a  639.98 px            confine con  min-width: 640px
 *   fino a  767.98 px            confine con  min-width: 768px
 *   fino a 1023.98 px            confine con  min-width: 1024px (anche in main.js)
 *   da     1024 px               desktop; poi 1200 / 1280 / 1400 / 1600 / 1920 px
 *
 * I confini a .98 px seguono lo schema di Bootstrap. Il breakpoint 1023.98 / 1024
 * e' condiviso con initFeaturesTabs in assets/js/main.js: se si cambia qui, va
 * cambiato anche li', altrimenti a quella larghezza il markup ARIA (accordion o
 * tab) non corrisponde piu' al layout mostrato.
 */

/* === Design Tokens === */
:root {
    /* Colors */
    --color-primary: #0177a4; /* AA: 4.5:1+ su bianco e sfondi chiari */
    --color-primary-dark: #015a7a;
    --color-primary-light: #33A3CD;
    --color-text: #333;
    --color-text-light: #666;
    --color-bg: #f4f4f4;
    --color-bg-alt: #f8f9fa;
    --color-white: #fff;
    --color-border: #dddddd;
    --color-border-strong: #bbbbbb;
    --color-border-soft: #e9ecef;
    --color-notice-bg: #fff3cd;
    --color-notice-text: #856404;
    --color-notice-border: #ffc107;
    --color-danger: #dc3545;
    /* Tono scuro per il testo su fondo rosato: il rosso pieno su quel fondo si ferma
       a 4.0:1, sotto il 4.5:1 richiesto dal testo normale. */
    --color-danger-dark: #b02a37;
    --color-success: #28a745;
    /* Componenti RGB del primario, da tenere allineate a --color-primary:
       servono per ombre e velature con alpha. */
    --color-primary-rgb: 1, 119, 164;

    /* Typography - scala unica dei corpi testo.
       La radice (html) scala 13 -> 18px per breakpoint, quindi i rem seguono
       automaticamente: qui restano solo i rapporti tra i livelli.
       Le dimensioni di icone, numeri decorativi e glifi non usano questi token. */
    --fs-3xs: 0.7rem;   /* micro-etichette maiuscole: badge, eyebrow */
    --fs-2xs: 0.75rem;  /* note minori, fonti, footer, label flottanti */
    --fs-xs: 0.85rem;   /* note, didascalie, controlli secondari */
    --fs-sm: 0.95rem;   /* corpo testo compatto: card, liste, form */
    --fs-base: 1rem;    /* corpo testo standard */
    --fs-md: 1.1rem;    /* corpo testo in evidenza, titoli di card piccoli */
    --fs-lg: 1.25rem;   /* titoli di card, prezzi, lead */
    --fs-xl: 1.5rem;    /* titoli di sezione minori */
    --fs-2xl: 2rem;     /* section-title */
    --fs-3xl: 2.3rem;   /* section-title su schermi larghi */
    --fs-4xl: 2.5rem;   /* hero-title */
    --fs-5xl: 3rem;     /* hero-title esteso, numeri statistica */

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

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 50%;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition: 0.3s ease;

    /* Layout */
    --header-height: 80px;
    --footer-height: 45px;
    --container-max: 64rem;
}

/* === CSS Reset & Base === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Radice in rem, non in px: sull'elemento radice 1rem vale la dimensione di testo
   scelta dall'utente nel browser (16px di default), quindi 0.9375rem rende gli stessi
   15px di prima ma chi imposta "caratteri grandi" vede il sito scalare (WCAG 1.4.4).
   Con font-size in px quella preferenza veniva ignorata. */
html {
    font-size: 0.9375rem;
    scroll-behavior: smooth;
    overflow-x: clip;
}

/* CTA centrata sotto i blocchi prezzo (siti web, software, app) */
.price-cta {
    text-align: center;
    margin-top: 2rem;
}

/* Ancore dirette (URL con #sezione, anche senza JS): la sezione non finisce sotto l'header fisso */
section[id],
[id].section {
    scroll-margin-top: calc(var(--header-height) + 0.5rem);
}

body {
    font-family: 'Montserrat', Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    cursor: default;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-md);
    /* Niente sillabazione sui titoli: un titolo spezzato dal trattino si legge male.
       break-word interviene solo quando una parola da sola non entra nella colonna
       (es. "Falegnameria" nella card portfolio a 320px), evitando che sbordi. */
    overflow-wrap: break-word;
}

/* Il giustificato senza sillabazione apre buchi tra le parole: la sillabazione
   automatica usa il dizionario della lingua dichiarata su <html lang>.
   hyphenate-limit-chars: 4 lettere minime per spezzare, 2 prima e 2 dopo il
   trattino. Limiti stretti (6 3 3) lasciano fuori quasi tutte le parole nelle
   colonne strette come le card portfolio, dove servono piu' punti di rottura
   possibili; 2 caratteri e' il minimo ammesso dalla tipografia italiana.
   Chrome 109+; Safari usa le -webkit-hyphenate-limit-*; Firefox applica i propri.
   overflow-wrap: break-word e' la rete di sicurezza per URL e parole composte
   (tedesco) piu' larghe della colonna. */
p,
li,
blockquote,
summary,
.pricing-matrix td,
.timeline-title,
.timeline-company {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 4 2 2;
    -webkit-hyphenate-limit-before: 2;
    -webkit-hyphenate-limit-after: 2;
    overflow-wrap: break-word;
}

p {
    margin-bottom: var(--space-md);
    text-align: justify;
}

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

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

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

/* === Layout === */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.section {
    padding: var(--space-2xl) 0;
    background-color: var(--color-bg);
}

.section-title {
    font-size: var(--fs-2xl);
    color: var(--color-text);
    text-align: center;
    margin-bottom: var(--space-md);
}

.section-subtitle {
    font-size: var(--fs-md);
    color: var(--color-text-light);
    text-align: center;
    max-width: 50rem;
    margin: 0 auto var(--space-md);
    line-height: 1.7;
}

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--space-sm);
}

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

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

.mb-4 {
    margin-bottom: var(--space-xl);
}

.mb-5 {
    margin-bottom: var(--space-2xl);
}

/* Testo riservato alle tecnologie assistive: fuori dallo schermo ma leggibile dagli
   screen reader. Serve dove un'icona porta il significato (es. la spunta "Incluso"
   nella tabella prezzi, con l'icona marcata aria-hidden). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* === Header === */
header {
    width: 100%;
    height: var(--header-height);
    box-sizing: border-box;
    background-color: var(--color-white);
    position: fixed;
    top: 0;
    z-index: 1000;
    padding: 0 var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

#logo {
    height: calc(var(--header-height) - 1.5rem);
    width: auto;
    flex-shrink: 0;
}

header nav {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    margin: 0 var(--space-md);
}

/* Privacy e "grazie" hanno un solo link di nav: al centro dell'header resterebbe
   isolato, quindi si allinea al gruppo comandi a destra. Sotto i 1024px la voce sta
   nel menu dell'hamburger, dove vale l'allineamento comune a tutte le pagine. */
@media (min-width: 1024px) {
    header nav.nav-home-only {
        justify-content: flex-end;
    }
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
}

#contact-btn {
    margin-left: auto;
    padding: 0.85rem 1.75rem;
    font-size: var(--fs-base);
}

.contact-text-desktop {
    display: inline;
}

/* Header language selector - dropdown button */
.header-lang {
    position: relative;
    margin-left: var(--space-sm);
}

.header-lang .lang-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem 0.85rem;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--fs-base);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
    letter-spacing: 0.03em;
    line-height: 1.6;
    white-space: nowrap;
    box-sizing: border-box;
    width: auto;
}

.header-lang .lang-dropdown-toggle:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.header-lang .lang-dropdown-menu {
    bottom: auto;
    top: calc(100% + 0.4rem);
    left: auto;
    right: 0;
    min-width: 130px;
}

.header-lang .lang-dropdown-menu li a {
    /* Voce di menu con bersaglio di almeno 44 px di altezza (WCAG 2.5.8 chiede 24,
       le convenzioni del sito 44): il testo resta piccolo, cresce l'area toccabile. */
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: normal;
    text-align: left;
    transition: background var(--transition);
    margin: 0;
}

.header-lang .lang-dropdown-menu li a::after {
    content: none;
}

.header-lang .lang-dropdown-menu li a:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.header-lang .lang-dropdown-menu li a.active {
    color: var(--color-primary);
    font-weight: 600;
}

/* Hamburger Menu */
#hamburger {
    display: none;
    cursor: pointer;
    z-index: 1001;
    flex-direction: column;
    gap: 6px;
    padding: 10px 8px;
    background: none;
    border: none;
}

#hamburger:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

#hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--color-text);
    transition: all 0.3s ease;
    transform-origin: center;
}

#hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

#hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Navigazione */
nav ul li a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    font-size: var(--fs-base);
    padding: var(--space-sm) 0;
    position: relative;
    transition: color var(--transition);
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition);
}

nav ul li a:hover::after,
nav ul li a.active::after {
    width: 100%;
}

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

/* === Main Content === */
main {
    padding-top: var(--header-height);
    flex: 1;
    overflow-x: hidden;
}

/* === Pulsanti === */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem var(--space-lg);
    font-size: var(--fs-base);
    font-weight: 600;
    border-radius: var(--radius);
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.button:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.button-white {
    background: white;
    color: var(--color-primary);
    border-color: white;
    white-space: normal;
    text-align: center;
    flex-wrap: wrap;
}

.button-secondary {
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
    border: 2px solid rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.button-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    border-color: var(--color-white);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.button-outline {
    background-color: transparent;
    color: var(--color-primary);
}

.button-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.button-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--fs-md);
}

/* === Cookie Banner === */
.cookie-banner {
    position: fixed;
    bottom: var(--space-md);
    right: var(--space-md);
    width: min(420px, 96vw);
    z-index: 3000;
    pointer-events: none;
    font-size: var(--fs-xs);
}

.cookie-banner.is-visible {
    pointer-events: auto;
}

.cookie-banner__panel {
    background: var(--color-white);
    border: 1px solid var(--color-border-soft);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    padding: 0.8rem 1.05rem 0.85rem;
    transform: translateY(18px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cookie-banner.is-visible .cookie-banner__panel {
    transform: translateY(0);
    opacity: 1;
}

.cookie-banner__header {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.cookie-banner__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(var(--color-primary-rgb), 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.cookie-banner__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-3xs);
    color: var(--color-text-light);
    margin: 0;
}

.cookie-banner__title {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text);
}

.cookie-banner__description {
    margin: 0;
    color: var(--color-text-light);
    font-size: var(--fs-xs);
    line-height: 1.35;
    text-align: justify;
}

.cookie-banner__categories {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cookie-category {
    border: 1px solid var(--color-border-soft);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    background: var(--color-bg-alt);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.cookie-category__title {
    font-weight: 600;
    margin: 0 0 0.15rem 0;
    font-size: var(--fs-xs);
}

.cookie-category__desc {
    margin: 0;
    font-size: var(--fs-2xs);
    color: var(--color-text-light);
    line-height: 1.3;
    text-align: justify;
}

.cookie-category__badge {
    font-size: var(--fs-3xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb), 0.18);
    color: var(--color-primary);
    white-space: nowrap;
}

.cookie-toggle {
    position: relative;
    width: 58px;
    height: 30px;
    flex-shrink: 0;
}

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

.cookie-toggle__slider {
    position: absolute;
    inset: 0;
    background: var(--color-border);
    border-radius: 999px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}

.cookie-toggle__slider::before {
    content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25);
    transition: transform 0.25s ease;
}

.cookie-toggle input:checked+.cookie-toggle__slider {
    background: var(--color-primary);
}

.cookie-toggle input:checked+.cookie-toggle__slider::before {
    transform: translateX(28px);
}

.cookie-banner__actions {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.15rem;
}

.cookie-btn {
    flex: 1;
    border-radius: var(--radius);
    font-weight: 600;
    padding: 0.55rem 0.8rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
}

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

.cookie-btn-outline {
    border-color: var(--color-border);
    color: var(--color-text);
    background: var(--color-white);
}

@media (max-width: 767.98px) {
    .cookie-banner {
        left: var(--space-md);
        right: var(--space-md);
        width: auto;
    }

    .cookie-banner__panel {
        padding: var(--space-md);
    }

    .cookie-banner__actions {
        flex-direction: column;
    }
}

/* === Card Component === */
.card-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    justify-items: center;
}

.card-container .card {
    width: 100%;
    max-width: 320px;
}

/* Home page sections con massimo 3 card per riga */
.home-services-section .card-container,
.home-why-section .card-container,
.home-process-section .card-container {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
}

.card .card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card .card-content .button {
    margin-top: auto;
    align-self: flex-start;
}

.card:hover,
.card.revealed:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card-image {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

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

.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: var(--space-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: var(--fs-lg);
    color: var(--color-text);
    margin-bottom: 0.75rem;
    text-align: center;
}

.card-description {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex-grow: 1;
    text-align: justify;
}

.card .button {
    margin-top: auto;
    width: 100%;
    text-align: center;
}

.card-no-button .card-description {
    margin-bottom: 0;
}

/* === Privacy === */
.privacy-card ol {
    margin-left: 1.25rem;
    padding-left: 0.5rem;
}

.privacy-card .privacy-update {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--color-primary-rgb), 0.08);
    border-left: 3px solid var(--color-primary);
    border-radius: 0.5rem;
    color: var(--color-text);
    font-size: var(--fs-sm);
}

/* === Footer === */
#footer {
    width: 100%;
    background-color: var(--color-bg-alt);
    padding: 0.4rem var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-2xs);
    flex-wrap: wrap;
    gap: 0.3rem;
    min-height: auto;
}

.footer-copy,
.footer-privacy {
    margin-bottom: 0;
    /* vince sul justify globale dei p: senza, quando la riga va a capo
       su schermi stretti la prima riga viene giustificata a tutta larghezza */
    text-align: center;
}

#footer a,
.footer-link-button {
    color: var(--color-text);
    text-decoration: underline;
}

/* "Preferenze cookie": bottone che sembra un link (riapre il banner) */
.footer-link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.footer-link-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.footer-sep {
    margin: 0 0.4rem;
    color: var(--color-text-light);
}

@media (max-width: 480px) {
    #footer {
        flex-direction: column;
        text-align: center;
        gap: 0.35rem;
        padding: 0.75rem var(--space-md);
        align-items: center;
    }

    #footer a {
        margin-left: 0;
    }

    /* i due link uno sotto l'altro, senza il separatore "·" */
    .footer-sep {
        display: none;
    }

    .footer-privacy {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
    }
}

/* Nav language item - hidden on desktop, shown in mobile hamburger */
.nav-lang-item {
    display: none;
}

/* Language Dropdown Custom */
.lang-dropdown {
    position: relative;
}

.lang-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-white);
    cursor: pointer;
    font-size: var(--fs-xs);
    color: var(--color-text);
    font-family: inherit;
    transition: border-color var(--transition);
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
}

.lang-dropdown-toggle:hover {
    border-color: var(--color-primary);
}

.lang-dropdown-arrow {
    font-size: 0.55rem;
    transition: transform 0.3s ease;
}

.lang-dropdown.open .lang-dropdown-arrow {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    right: 0;
    left: 0;
    list-style: none;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.3rem 0;
    display: none;
    z-index: 100;
}

.lang-dropdown.open .lang-dropdown-menu {
    display: block;
}

.nav-lang-item .lang-dropdown-menu li a {
    /* Voce di menu con bersaglio di almeno 44 px di altezza (WCAG 2.5.8 chiede 24,
       le convenzioni del sito 44): il testo resta piccolo, cresce l'area toccabile. */
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: normal;
    text-align: left;
    transition: background var(--transition);
    margin: 0;
}

.nav-lang-item .lang-dropdown-menu li a::after {
    content: none;
}

.nav-lang-item .lang-dropdown-menu li a:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.nav-lang-item .lang-dropdown-menu li a.active {
    color: var(--color-primary);
    font-weight: 600;
}

/* === Noscript Banner (card volante) === */
#noscript-banner {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-notice-bg);
    color: var(--color-notice-text);
    border: 1px solid var(--color-notice-border);
    padding: 1rem 1.5rem;
    text-align: center;
    font-size: var(--fs-xs);
    line-height: 1.5;
    z-index: 9999;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    max-width: 600px;
    width: calc(100% - 2rem);
}

#noscript-banner p {
    margin: 0;
}

/* Hero animation done state */
.hero-anim-done {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* === Loader === */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    /* Failsafe: se il JS non viene eseguito, il loader si nasconde comunque dopo 4s */
    animation: loader-failsafe 0.4s ease 4s forwards;
}

@keyframes loader-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.loader-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader {
    border: 0.3rem solid var(--color-border-soft);
    border-top: 0.3rem solid var(--color-primary);
    border-radius: var(--radius-full);
    width: 3rem;
    height: 3rem;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================
   BREAKPOINT: Mobile & Tablet (max 1023px)
   Unico blocco per header responsive
   ========================================== */

/* === Mobile small (max 575px) === */

/* === Extra small (max 400px) === */

/* === Micro (max 360px) === */

/* === Desktop (1024px+) === */

/* === Wide (1400px+) === */

.contact-section-full .contact-box {
    transition: max-height 0.3s ease;
}

/* === Componenti riutilizzabili === */

/* === Reading Progress Bar === */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, #33A3CD 100%);
    z-index: 10001;
    transition: width 0.1s ease-out;
    pointer-events: none;
}

/* === Scroll Reveal Animations === */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* === Hero Section === */
.hero-section {
    min-height: calc(100vh - var(--header-height));
    padding: var(--space-2xl) 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    width: 100%;
}

.hero-content {
    z-index: 2;
    animation: heroSlideInLeft 0.8s ease-out both;
}

.hero-image {
    animation: heroSlideInRight 0.8s 0.2s ease-out both;
}

@keyframes heroSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroSlideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-content-wide {
    animation: heroFadeUp 0.8s ease-out both;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shared section backgrounds */
.hero-section-light {
    background: linear-gradient(135deg, #f8fcff 0%, #e6f4f9 100%);
}

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

/* Nota di chiusura centrata sotto una griglia (es. apertura ai progetti ad hoc) */
.section-footnote {
    max-width: 760px;
    margin: 1.75rem auto 0;
    text-align: center;
    color: var(--color-text-light);
    line-height: 1.6;
}

.section-footnote strong {
    color: var(--color-text);
}

.hero-title {
    font-size: var(--fs-4xl);
    font-weight: 800;
    color: #333;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-wrap: balance;
}

.hero-title span {
    color: var(--color-primary);
}

.hero-description {
    font-size: var(--fs-md);
    color: #555;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Hero Fullpage (video background) */
.hero-fullpage {
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding-top: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Riserva sotto il video: primo fotogramma come sfondo, cosi' l'avvio e la
       dissolvenza a fine loop non mostrano mai un vuoto; il colore copre
       l'attimo prima che l'immagine arrivi. L'overlay scuro sta sopra comunque. */
    background: #fdfdfd url('../images/hero-poster.webp') center / cover no-repeat;
    margin-top: calc(-1 * var(--header-height));
}

@media (max-height: 700px) {
    .hero-fullpage .hero-container {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }
}

.hero-fullpage .hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.92) 0%, rgba(0, 100, 140, 0.88) 50%, rgba(0, 80, 120, 0.9) 100%);
    z-index: 1;
}

.hero-content-wide {
    text-align: center;
    max-width: 1200px;
    padding: var(--space-xl);
    z-index: 2;
    background: rgba(40, 70, 100, 0.26);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
}

.hero-title-xl {
    font-size: var(--fs-5xl);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: var(--space-lg);
    line-height: 1.15;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.5), 0 8px 40px rgba(0, 0, 0, 0.4);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.hero-description-xl {
    font-size: var(--fs-xl);
    color: rgba(255, 255, 255, 0.98);
    margin-bottom: var(--space-xl);
    line-height: 1.6;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 3px 15px rgba(0, 0, 0, 0.45), 0 6px 30px rgba(0, 0, 0, 0.35);
}

.hero-actions-centered {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    color: white;
    font-size: var(--fs-xs);
    opacity: 0.7;
    animation: bounce 2s infinite;
    z-index: 2;
    pointer-events: none;
}

.scroll-indicator i {
    font-size: 1.2rem;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Side Navigation - Collapsabile */
.side-nav {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 999;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border-radius: 0;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 4px 0.5rem 0;
    ;
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: translateY(-50%) translateX(100%);
}

.side-nav.visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.side-nav.visible.collapsed {
    transform: translateY(-50%) translateX(calc(100% - 22px));
}

.side-nav-toggle {
    position: absolute;
    left: -22px;
    top: 0;
    bottom: 0;
    width: 22px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 6px 0 0 6px;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 0.6rem;
    transition: color 0.3s ease;
    padding: 0;
}

.side-nav-toggle:hover {
    color: var(--color-primary);
}

.side-nav-toggle i {
    transition: transform 0.3s ease;
}

.side-nav.collapsed .side-nav-toggle i {
    transform: rotate(180deg);
}

.side-nav-item {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    text-decoration: none;
    color: #666;
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-left: 2px solid transparent;
    position: relative;
}

.side-nav-item:hover {
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
}

.side-nav-item.active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
}

.side-nav-text {
    white-space: nowrap;
    transition: opacity 0.25s ease;
}

/* Barra chiusa: resta solo la linguetta, niente lettere che spuntano dal bordo */
.side-nav.collapsed .side-nav-text {
    opacity: 0;
}

.side-nav.collapsed .side-nav-item {
    pointer-events: none;
}

/* Nascondi side nav su mobile */

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

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

.hero-image img {
    max-width: 100%;
    max-height: 58vh;
    width: auto;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
}

/* Hero con video background */
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* === Service Cards === */
.service-card {
    text-align: center;
}

.service-card .card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16/10;
    background: #f8f9fa;
    padding: 0;
    overflow: hidden;
}

.service-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === Feature List === */
.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    border-bottom: 1px solid #eee;
}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

/* === Pricing Table === */
.pricing-container {
    margin-top: 2rem;
}

.pricing-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0;
    position: relative;
    z-index: 2;
}

.pricing-tab-button {
    padding: 0.65rem 1.3rem;
    border: 1px solid #d0d0d0;
    border-bottom: none;
    background: #f0f0f0;
    color: #666;
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-xs);
    transition: all 0.25s ease;
    white-space: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    position: relative;
    margin-right: -1px;
    flex: 1;
    min-width: 0;
}

.pricing-tab-button i {
    font-size: 0.9rem;
}

.pricing-tab-button:hover {
    background: #e8e8e8;
    color: #333;
}

.pricing-tab-button.active {
    background: #fff;
    color: var(--color-primary);
    border-color: #ccc;
    z-index: 3;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.04);
}

/* Card che contiene il panel attivo */
.pricing-tab-panels {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    margin-top: -1px;
    position: relative;
    z-index: 1;
}

.pricing-panel-description {
    text-align: center;
    padding: 1.5rem 1.5rem 1rem;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: #555;
}

.pricing-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    min-width: 700px;
    /* Con 3–4 colonne, distribuzione equa dello spazio residuo dopo la colonna etichette */
    table-layout: fixed;
}

.pricing-matrix td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Colonne strette su telefono e tablet: le parole lunghe tedesche
       si sillabano invece di spezzarsi senza trattino */
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Etichette di riga: le parole lunghe (soprattutto in tedesco, es. Vertragsbindung)
   si sillabano o spezzano invece di uscire dalla colonna stretta. */
.pricing-matrix tbody th {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.pricing-matrix th,
.pricing-matrix td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: var(--fs-sm);
}

.pricing-matrix thead th {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}

.pricing-matrix tbody th {
    background: #f8f9fa;
    font-weight: 600;
    position: sticky;
    left: 0;
    z-index: 1;
    width: clamp(110px, 14vw, 140px);
    min-width: 110px;
    max-width: 140px;
}

.pricing-matrix thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
}

.pricing-matrix tr:hover td {
    background: #f0f7fa;
}

.feature-label {
    display: block;
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
}

.feature-note {
    display: block;
    font-weight: 400;
    font-size: var(--fs-2xs);
    color: var(--color-text-light);
    margin-top: 0.1rem;
}

.pricing-price {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-primary);
}

.check-icon {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.2rem;
}

.feature-accent-row td,
.feature-accent-row th {
    background: #f0f7fa;
}

.pricing-price-row td {
    font-weight: 600;
}

.pricing-price-row td[data-tagline]::after {
    content: attr(data-tagline);
    display: block;
    font-size: var(--fs-3xs);
    font-weight: 500;
    color: var(--color-text-light);
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pricing-price-row--secondary td[data-tagline]::after {
    content: attr(data-tagline);
}

/* <small> nelle celle: allineato alle altre note della tabella */
.pricing-matrix small {
    font-size: var(--fs-2xs);
}

.pricing-table-note-row td {
    text-align: center;
    font-style: italic;
    color: var(--color-text-light);
    font-size: var(--fs-xs);
    padding: 0.75rem;
}

@media (max-width: 639.98px) {
    /* Colonna etichette stretta: si vedono etichette, prima colonna dati e un
       pezzo della seconda, cosi' si capisce che la tabella scorre.
       Con table-layout: fixed la larghezza si applica al thead. */
    .pricing-matrix thead th:first-child {
        width: 118px;
    }
}

/* Larghezza di colonna uniforme tra i due tab.
   Sotto i 640 px la colonna etichette e' fissa a 118 px, quindi la larghezza
   delle colonne dati si ricava dalla min-width della tabella:
     abbonamento (3 piani)   118 + 3 x C
     una tantum  (4 piani)   118 + 4 x C
   Tenendo la stessa C nei due tab, passando da un tab all'altro il ritmo delle
   colonne non cambia e si vede sempre etichetta + un piano + uno scorcio del
   successivo, che segnala lo scorrimento. */

/* Telefoni: C = 147 px */
@media (max-width: 480px) {
    .pricing-matrix {
        min-width: 560px;
    }

    #panel-oneoff .pricing-matrix {
        min-width: 706px;
    }

    .pricing-matrix th,
    .pricing-matrix td {
        padding: 0.45rem 0.5rem;
        font-size: var(--fs-xs);
    }
}

/* Schermi molto stretti (es. 320 px): C = 130 px */
@media (max-width: 340px) {
    #panel-monthly .pricing-matrix {
        min-width: 508px;
    }

    #panel-oneoff .pricing-matrix {
        min-width: 638px;
    }
}

/* Tablet (768–1023 px): lo spazio utile (~686 px a 768) sta appena sotto la
   min-width di 700 px e produrrebbe uno scorrimento di pochi pixel; qui la
   tabella si comprime alla larghezza del contenitore e non scorre. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .pricing-matrix {
        min-width: 0;
    }

    /* Il tab una tantum ha 4 colonne piano (~140 px l'una): padding compatto,
       cosi' le parole lunghe spezzano meno anche senza sillabazione */
    #panel-oneoff .pricing-matrix th,
    #panel-oneoff .pricing-matrix td {
        padding: 0.6rem 0.5rem;
    }
}

/* Tab panels visibility */
.pricing-tab-panel {
    display: none;
}

.pricing-tab-panel.active {
    display: block;
    animation: pricingFadeIn 0.3s ease;
}

@keyframes pricingFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.plan-heading {
    text-align: center;
}

.plan-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.plan-heading--featured {
    position: relative;
}

/* Pricing card list alignment */
.pricing-card ul {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.pricing-card ul li {
    margin-bottom: 0.4rem;
}

/* === FAQ === */

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-border-soft);
    padding: 0;
}

.faq-question {
    padding: var(--space-md) 0;
    font-weight: 600;
    font-size: var(--fs-md);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.faq-question::after {
    content: '+';
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-primary);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-question::after {
    content: '+';
    transform: rotate(45deg);
}

/* Apertura animata: solo nei browser che sanno animare verso block-size auto;
   negli altri resta l'apertura istantanea nativa di <details> */
@supports (interpolate-size: allow-keywords) {
    .faq-item {
        interpolate-size: allow-keywords;
    }

    .faq-item::details-content {
        opacity: 0;
        block-size: 0;
        overflow: hidden;
        transition: content-visibility 0.3s allow-discrete,
            opacity 0.3s ease,
            block-size 0.3s ease;
    }

    .faq-item[open]::details-content {
        opacity: 1;
        block-size: auto;
    }
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-answer {
    padding: 0 0 var(--space-md) 0;
    color: var(--color-text-light);
    line-height: 1.7;
}

.faq-answer p {
    margin: 0;
}

/* === Contact Section === */
.contact-section {
    background: white;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 80rem;
    margin: 0 auto;
}

.contact-info {
    background: var(--color-primary);
    color: white;
    padding: 2rem;
    border-radius: 1rem;
}

.contact-info h2 {
    color: white;
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-item:last-child {
    border-bottom: none;
}

.contact-icon {
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.contact-form-container {
    padding: 2rem;
}

/* === Form Styles === */
/* Il modulo di contatto usa .form-item con label flottante (vedi piu' avanti):
   il vecchio pattern .form-group e la .features-grid non compaiono in nessuna pagina. */
.form-botcheck {
    display: none !important;
}

.contact-section-full {
    padding: 2rem 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.container-full {
    width: 100%;
    max-width: 100%;
}

.contact-box {
    display: grid;
    grid-template-columns: 60% 40%;
    min-height: auto;
    border-radius: var(--radius-lg);
    overflow: visible;
    box-shadow: var(--shadow-lg);
    margin: var(--space-xl);
    position: relative;
}

.form-section {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    overflow: hidden;
}

.form-section .button {
    width: 100%;
    justify-content: center;
}

.form-section h2 {
    font-size: var(--fs-2xl);
    margin-bottom: 1.5rem;
    color: #333;
    font-weight: 700;
}

.form-item {
    position: relative;
    margin-bottom: 1.2rem;
}

.form-item input,
.form-item textarea {
    width: 100%;
    padding: 0.9rem 0.8rem 0.6rem;
    border: none;
    border-bottom: 2px solid #e0e0e0;
    font-size: var(--fs-sm);
    font-family: inherit;
    background: white;
    transition: all 0.3s ease;
    border-radius: 4px 4px 0 0;
}

.form-item textarea {
    min-height: 120px;
    resize: vertical;
    max-height: 300px;
}

.form-item label {
    position: absolute;
    left: 0.8rem;
    top: 0.9rem;
    color: var(--color-text-light);
    font-size: var(--fs-sm);
    pointer-events: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.form-item input:focus,
.form-item textarea:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
    background: #fafafa;
}

/* Focus dei campi: niente anello (sui campi di testo :focus-visible scatta anche col mouse
   e copriva l'etichetta flottante); l'indicatore e' il bordo inferiore + etichetta in blu. */

.form-item input:focus+label,
.form-item input:not(:placeholder-shown)+label,
.form-item textarea:focus+label,
.form-item textarea:not(:placeholder-shown)+label {
    top: -0.6rem;
    font-size: var(--fs-2xs);
    color: var(--color-primary);
    font-weight: 600;
}

/* Form Validation States */
.form-item.has-error input,
.form-item.has-error textarea {
    border-bottom-color: var(--color-danger);

}

.form-item.has-error label {
    color: var(--color-danger);
}

.form-item.has-success input,
.form-item.has-success textarea {
    border-bottom-color: var(--color-success);

}

.form-item.has-success label {
    color: var(--color-success);
}

.form-error-message {
    color: var(--color-danger);
    font-size: var(--fs-xs);
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    animation: shake 0.5s ease;
}

.form-error-message::before {
    content: '\f071';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
}

/* Esito dell'invio del modulo: il contenitore resta nel flusso anche da vuoto
   (e' una live region), il messaggio compare solo quando l'invio fallisce. */
.form-status:empty {
    display: none;
}

.form-message {
    grid-column: 1 / -1;
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    text-align: left;
    line-height: 1.5;
}

.form-message--error {
    color: var(--color-danger-dark);
    background: rgba(220, 53, 69, 0.08);
    border-left: 3px solid var(--color-danger);
}

/* stesso glifo di avviso usato per gli errori dei singoli campi */
.form-message--error::before {
    content: '\f071';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8em;
    margin-right: 0.45rem;
}

.form-message--error a {
    color: var(--color-danger-dark);
    font-weight: 600;
    text-decoration: underline;
}

.form-success-icon {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-success);
    font-size: 1rem;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-3px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(3px);
    }
}

.info-section {
    background: linear-gradient(145deg, var(--color-primary) 0%, #015a7a 100%);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    border-radius: var(--radius-lg);
    margin: -1.5rem -0.5rem -1.5rem 0;
    box-shadow: var(--shadow-lg);
    z-index: 1;
}

.info-section h2 {
    font-size: var(--fs-xl);
    margin-bottom: 2.5rem;
    color: white;
    font-weight: 700;
}

.nostyle-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: background var(--transition), padding-left var(--transition);
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.15);
    padding-left: 0.5rem;
    border-radius: var(--radius);
}

.contact-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: background var(--transition), transform var(--transition);
}

.contact-item:hover .contact-icon {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.contact-text p {
    margin: 0;
    color: white;
    /* Dati strutturati, non prosa: righe corte separate da <br> in una colonna di
       ~150px, cioe' una ventina di caratteri. Il giustificato globale dei p apre
       buchi tra le parole e la sillabazione automatica spezza i nomi propri
       ("Mon-drigo"); qui servono entrambi disattivati. Stesso motivo per cui
       .footer-copy e .footer-privacy tolgono il giustificato. */
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

/* === About Page Styles === */
.about-hero {
    padding: 4rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.about-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.about-profile-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 100%;
}

.about-profile-image {
    width: 200px;
    height: auto;
    border-radius: var(--radius);
    object-fit: contain;
    border: none;
    box-shadow: var(--shadow-lg);
    margin: 0 auto var(--space-lg);
    display: block;
}

.about-profile-name {
    font-size: var(--fs-4xl);
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary) 0%, #015a7a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.about-profile-title {
    font-size: var(--fs-lg);
    color: #666;
    margin-bottom: 1.5rem;
    text-align: center;
}

.about-profile-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.profile-badge {
    background: linear-gradient(135deg, var(--color-primary) 0%, #015a7a 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: var(--fs-xs);
    font-weight: 500;
}

.about-profile-bio {
    font-size: var(--fs-md);
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.25rem;
    text-align: justify;
}

.about-mission-quote {
    font-size: var(--fs-lg);
    font-style: italic;
    color: var(--color-primary);
    border-left: 4px solid var(--color-primary);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0 2rem;
    text-wrap: balance; /* righe di larghezza simile, come i sottotitoli */
    background: linear-gradient(135deg, #f0f9ff 0%, #e8f4f8 100%);
    border-radius: 0 0.5rem 0.5rem 0;
    line-height: 1.7;
}

.about-profile-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.about-profile-actions a {
    flex: 1;
    min-width: 0;
}

/* Timeline (CV): solo anno, titolo, sottotitolo e testo; niente linea ne' puntini */
.timeline {
    max-width: 60rem;
    margin: 2rem auto 0;
}

.timeline-item {
    padding-bottom: 2.25rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-date {
    font-size: var(--fs-xs);
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.timeline-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.15rem;
}

.timeline-company {
    color: #666;
    font-size: var(--fs-sm);
    margin-bottom: 0.65rem;
}

/* Tech Grid */
.tech-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
    margin: var(--space-xl) auto 0;
    max-width: calc(4 * 135px + 3 * var(--space-lg));
}

.tech-grid .tech-item {
    flex: 0 0 135px;
}

.tech-item {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.tech-item:hover {
    transform: translateY(-5px);
}

.tech-item i {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.tech-item img {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
    object-fit: contain;
}

.tech-item span {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: #333;
    word-break: break-word;
    line-height: 1.3;
    hyphens: auto;
}

/* Skip to content */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    z-index: 10000;
    font-weight: 600;
    border-radius: 0 0 var(--radius) 0;
    transition: top 0.2s ease;
    text-decoration: none;
}

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

/* ==========================
   RESPONSIVE COMPONENTS
   ========================== */

/* ==========================================
   Responsive Breakpoints
   ========================================== */
/* I blocchi max-width sono ordinati dal piu' largo al piu' stretto: a parita' di
   specificita' vince l'ultimo dichiarato, quindi le regole per gli schermi piccoli
   devono stare in fondo per non essere annullate da quelle piu' generiche. */
/* width <= 1024px */
@media (max-width: 1023.98px) {
    :root {
        --header-height: 60px;
        --footer-height: 50px;
    }

    header {
        padding: 0 0.75rem;
    }

    .contact-text-desktop {
        display: none;
    }

    .header-lang {
        display: none;
    }

    #contact-btn {
        order: 3;
        padding: 0.6rem 0.9rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        margin-left: auto;
        margin-right: var(--space-sm);
        font-size: var(--fs-md);
        border-radius: var(--radius);
    }

    #contact-btn:focus:not(:focus-visible),
    #contact-btn:active {
        outline: none;
        box-shadow: none;
    }

    #contact-btn i {
        margin: 0;
    }

    #hamburger {
        display: flex;
        order: 4;
    }

    #logo {
        order: 1;
        height: calc(var(--header-height) - 1rem);
    }

    header nav {
        order: 5;
        max-height: 0;
        overflow: hidden;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        width: auto;
        background-color: var(--color-white);
        box-shadow: var(--shadow);
        z-index: 999;
        transition: max-height 0.5s ease;
        margin: 0;
    }

    header nav.open {
        max-height: 300px;
    }

    header nav ul {
        flex-direction: column;
        padding: var(--space-xs) 0;
        gap: 0;
    }

    header nav ul li a {
        display: block;
        padding: 0.5rem var(--space-md);
        text-align: center;
    }

    .card-container {
        gap: var(--space-md);
    }

    .side-nav {
        display: none;
    }

    .pricing-matrix tbody th,
    .pricing-matrix thead th:first-child {
        box-shadow: 3px 0 8px rgba(0, 0, 0, 0.1);
    }

    .tech-grid .tech-item {
        flex: 0 0 110px;
    }

    /* Nav open: larger max-height to accommodate lang dropdown */
    header nav.open {
        max-height: 450px;
    }

    /* Language item in mobile nav */
    .nav-lang-item {
        display: flex;
        justify-content: center;
        border-top: 1px solid var(--color-border-soft);
        padding: 0.65rem var(--space-md);
    }

    /* Nav lang dropdown: styled to match desktop outline button */
    .nav-lang-item .lang-dropdown-toggle {
        width: auto;
        border: 2px solid var(--color-primary);
        border-radius: var(--radius);
        color: var(--color-primary);
        font-weight: 600;
        font-size: var(--fs-xs);
        padding: 0.4rem 0.75rem;
        background: transparent;
    }

    .nav-lang-item .lang-dropdown-menu {
        position: static;
        margin-top: 0.3rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-xl);
    }

    .hero-section {
        min-height: auto;
        padding: var(--space-xl) 0;
    }

    .hero-title {
        font-size: var(--fs-2xl);
    }

    .hero-description {
        font-size: var(--fs-base);
    }

    .hero-image {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }

    .hero-image img {
        max-height: 220px;
        max-width: 60vw;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-fullpage {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero-title-xl {
        font-size: var(--fs-2xl);
    }

    .hero-description-xl {
        font-size: var(--fs-base);
    }

    .hero-content-wide {
        padding: var(--space-lg);
    }

    .hero-actions-centered {
        flex-direction: column;
        gap: 0.75rem;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-box {
        grid-template-columns: 1fr;
    }

    .form-section {
        padding: var(--space-lg);
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    }

    .info-section {
        padding: var(--space-lg);
        margin: 0;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    .pricing-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .pricing-tab-button {
        text-align: center;
        justify-content: center;
        border-radius: 0;
        border: 1px solid #d0d0d0;
        border-bottom: none;
        margin-right: 0;
    }

    .pricing-tab-button:first-child {
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .pricing-tab-button.active {
        background: #fff;
        border-left: 3px solid var(--color-primary);
    }

    .pricing-tab-panels {
        border-radius: 0 0 0.5rem 0.5rem;
    }
}
/* Schermi intermedi (640–1023 px): hero a colonna singola con testo centrato;
   senza un tetto, titolo e descrizione si allargano su tutto il contenitore
   (~770 px a 820) e le righe diventano troppo lunghe. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .hero-content {
        max-width: 640px;
        margin-inline: auto;
    }
}

/* width <= 480px */
@media (max-width: 480px) {
    .about-profile-title .title-sep {
        display: none;
    }

    .about-profile-title .title-location {
        display: block;
    }
}

/* width <= 480px */
@media (max-width: 480px) {
    html {
        font-size: 0.875rem;
    }

    .container {
        padding: 0 var(--space-md);
    }

    .section {
        padding: var(--space-xl) 0;
    }

    .section-title {
        font-size: var(--fs-xl);
    }

    .section-subtitle {
        font-size: var(--fs-sm);
    }

    /* .lead-text e .stats-summary sono dimensionati nei CSS di pagina, che si
       caricano dopo: elencarli qui non avrebbe effetto. */
    body,
    p {
        font-size: var(--fs-sm);
        line-height: 1.55;
    }

    .card-container {
        gap: var(--space-md);
    }

    .hero-title {
        font-size: var(--fs-xl);
    }

    /* Titolo del form contatti: a --fs-2xl restava il testo piu' grande della
       pagina su mobile, sopra all'h1 e ai section-title portati qui a --fs-xl. */
    .form-section h2 {
        font-size: var(--fs-xl);
    }

    /* Il nome nella card profilo replica il ruolo di .hero-title (stessa
       dimensione da desktop in su), ma senza questa riga restava a --fs-4xl.
       Resta un gradino sopra gli altri titoli, non tre. */
    .about-profile-name {
        font-size: var(--fs-2xl);
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .about-profile-card {
        padding: var(--space-lg);
    }

    .contact-section-full .container-full {
        padding: 0 var(--space-md);
    }

    .contact-section-full .contact-box {
        margin: var(--space-lg) 0;
        width: 100%;
    }

    .about-profile-actions {
        flex-direction: column;
        gap: 0.65rem;
    }

    .about-profile-actions .button,
    .about-profile-actions .button-outline,
    .about-profile-actions a {
        width: 100%;
        display: inline-flex;
        justify-content: center;
    }

    .about-profile-image {
        max-width: 50vw;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: none;
    }

    .about-profile-image:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .hero-image img {
        max-width: 60vw;
    }

    .pricing-panel-description {
        text-align: justify;
    }
}

/* width <= 360px */
@media (max-width: 360px) {
    /* Resta a 14px come sotto i 480px: con 13px i testi secondari (celle della
       tabella prezzi, note, banner cookie) scendono sotto i 10px. */
    html {
        font-size: 0.875rem;
    }

    .container {
        padding: 0 0.75rem;
    }

    .button {
        padding: 0.6rem 1rem;
        font-size: var(--fs-sm);
    }

    /* Il titolo di sezione resta a --fs-xl come sotto i 480px: con --fs-lg
       finirebbe sullo stesso livello dei titoli di card (.card-title). */

    .hero-title {
        font-size: var(--fs-xl);
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }
}


/* height <= 700px */
@media (max-height: 700px) {
    .scroll-indicator {
        display: none;
    }
}

/* width >= 640px */
@media (min-width: 640px) {
    .card-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-services-section .card-container,
    .home-why-section .card-container,
    .home-process-section .card-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Terza card centrata su layout 2 colonne */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .card-container>.card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 320px;
        margin-inline: auto;
    }
}

/* width >= 1024px */
@media (min-width: 1024px) {

    .home-services-section .card-container,
    .home-why-section .card-container,
    .home-process-section .card-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html {
        font-size: 1rem;
    }

    .container {
        padding: 0 var(--space-xl);
    }

    .card:hover {
        transform: translateY(-8px);
    }

    .contact-section-full {
        min-height: calc(100vh - var(--header-height) - var(--footer-height));
        padding: 3rem 0;
        align-items: stretch;
    }

    .contact-section-full .container-full {
        width: 100%;
        padding: 0 var(--space-xl);
        display: flex;
        align-items: stretch;
    }

    .contact-section-full .contact-box {
        margin: 0 auto;
        max-width: 1400px;
        flex: 1;
    }

    .contact-section-full .form-section {
        justify-content: flex-start;
    }

    .contact-section-full .form-section form {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .contact-section-full .form-item-full {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-bottom: 1.2rem;
    }

    .contact-section-full .form-item-full textarea {
        flex: 1;
        max-height: none;
        min-height: 120px;
    }

    .contact-section-full .info-section {
        justify-content: flex-start;
    }
}

/* width >= 1280px */
@media (min-width: 1280px) {
    .card-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* width >= 1400px */
@media (min-width: 1400px) {
    :root {
        --header-height: 90px;
        --container-max: 80rem;
        --space-3xl: 5.5rem;
        --space-2xl: 3.5rem;
    }

    .container {
        max-width: 80rem;
    }

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

    .section-title {
        font-size: var(--fs-3xl);
        margin-bottom: var(--space-lg);
    }

    .section-subtitle {
        font-size: var(--fs-lg);
    }
}

/* width >= 1600px */
@media (min-width: 1600px) {
    .contact-section-full {
        min-height: auto;
        height: min(calc(100vh - var(--header-height) - var(--footer-height)), 900px);
        max-height: 900px;
        align-items: stretch;
    }

    .contact-section-full .container-full {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
    }

    .contact-section-full .contact-box {
        max-height: 860px;
        width: 100%;
    }
}

/* width >= 1920px — schermi molto grandi (iMac 27", QHD, 4K) */
@media (min-width: 1920px) {
    :root {
        --header-height: 100px;
        --space-3xl: 7rem;
        --space-2xl: 4.5rem;
        --space-xl: 2.5rem;
    }

    html {
        font-size: 1.125rem;
    }

    .section-title {
        font-size: var(--fs-4xl);
    }

    .section-subtitle {
        font-size: var(--fs-lg);
    }

    .card-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        justify-content: center;
    }

    .hero-image img {
        max-height: 65vh;
    }
}
/* ==========================================
   Accessibilità: video toggle e reduced motion
   ========================================== */
.video-toggle {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 3;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-white);
    opacity: 0.6; /* discreto (WCAG 2.2.2 richiede il comando, non che sia vistoso) */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    transition: background var(--transition), opacity var(--transition);
}

/* Area di tocco portata a 44x44 px senza ingrandire il bottone: il comando resta
   discreto sopra il video ma raggiunge il bersaglio minimo per l'uso con le dita. */
.video-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.video-toggle:hover,
.video-toggle:focus-visible,
.video-toggle[aria-pressed="true"] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
}

.video-toggle:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Nota privacy sotto il form di contatto */
.form-privacy-note {
    margin-top: 0.75rem;
    font-size: var(--fs-xs);
    color: var(--color-text-light);
}

.form-privacy-note a {
    color: var(--color-primary);
    text-decoration: underline;
}


/* =====================================================================
   TEMA COLORE 2026 (agosto)
   Sta in fondo di proposito: deve prevalere sulle regole precedenti.
   Vive dentro style.css, non in un file a parte: una sola fonte di verita'
   e nessuna richiesta CSS bloccante in piu'.

   Principi:
   - una sola palette: blu primario, navy, arancio secondario, giallo accento,
     rosso/verde solo semantici;
   - icone su tinta morbida con glifo colorato (niente riquadri blu pieni,
     tranne i numeri dei passi e i badge);
   - alternanza reale degli sfondi di sezione (grigio freddo / azzurro);
   - una sezione scura per pagina dove serve ritmo;
   - testo giustificato con sillabazione automatica nelle card (niente buchi);
   - le tinte delle card sono dichiarate nel markup con le classi
     .is-blue / .is-orange / .is-navy / .is-light (nessun :nth-child).

   Indice: 1 palette, 2 sfondi, 3 testo, 4 icone e tinte, 5 numeri,
   6 sezioni scure, 7 bordi card, 8 mobile.
   ===================================================================== */

/* --- 1. Palette -------------------------------------------------------- */
:root {
    --theme-navy: #003f6d;
    --theme-navy-tint: rgba(0, 63, 109, 0.12);
    --theme-orange: #f28c28;        /* decorativo: strisce, bordi, gradienti di sfondo */
    --theme-orange-mid: #d9731a;    /* decorativo */
    --theme-orange-dark: #c4650f;   /* SOLO glifi di icone: 4.0:1 su bianco, 3.6:1 sulla tinta,
                                       sopra il 3:1 richiesto per gli elementi grafici ma sotto
                                       il 4.5:1 del testo. Per un testo arancione serve un tono
                                       piu' scuro (#a85508 arriva a 5.3:1 su bianco). */
    --theme-orange-tint: rgba(242, 140, 40, 0.14);
    --theme-light-blue: #33a3cd;
    --theme-light-blue-tint: rgba(51, 163, 205, 0.16);
    --theme-blue-tint: rgba(1, 119, 164, 0.13);
    --theme-yellow: #ffc107;
    --theme-green: #28a745;
    --theme-red-tint: rgba(220, 53, 69, 0.12);
    --theme-section: #f6f9fb;
    --theme-section-alt: #e9f3f8;
    --theme-dark-from: #003f6d;
    --theme-dark-to: #0177a4;
}

/* --- 2. Sfondi di sezione: alternanza visibile ------------------------ */
.section {
    background-color: var(--theme-section);
}

.section-bg-alt {
    background-color: var(--theme-section-alt);
}

/* Home: servizi (chiaro) / perché me (azzurro) / come lavoro (chiaro) / FAQ (azzurro) */
.home-why-section,
.home-process-section + .section {
    background-color: var(--theme-section-alt);
}

/* Chi sono: formazione (chiaro) / tecnologie (azzurro) */
#tecnologie {
    background-color: var(--theme-section-alt);
}

/* Siti web: "Caratteristiche" aveva un gradiente quasi uguale allo sfondo alt: alt pieno */
.section-features {
    background: var(--theme-section-alt);
}

/* Siti web, recensioni (sezione opzionale, vedi marcatori [DEPLOY] nel contenuto):
   quando c'e', sta tra portfolio (alt) e pacchetti e i due blocchi successivi si invertono.
   Qui serve il selettore fratello, cosi' l'alternanza resta giusta sia con sia senza recensioni. */
#recensioni {
    background: var(--theme-section);
}

#recensioni + #pricing {
    background-color: var(--theme-section-alt);
}

#recensioni + #pricing + #price-value {
    background-color: var(--theme-section);
}

/* Siti web, portfolio: le sfumature ai bordi del carousel seguono lo sfondo alt */
#portfolio .portfolio-carousel::before {
    background: linear-gradient(to right, var(--theme-section-alt), transparent);
}

#portfolio .portfolio-carousel::after {
    background: linear-gradient(to left, var(--theme-section-alt), transparent);
}

/* --- 3. Testo nelle card: giustificato senza buchi --------------------- */
/* La sillabazione automatica e' impostata una volta sola sulla regola base di p/li
   in style.css: qui restano solo gli allineamenti. Dove la colonna e' larga almeno
   ~300 px il giustificato regge; nelle colonne strette (passi del percorso,
   collaborazioni) creerebbe buchi, quindi li' il testo resta a sinistra. */
.feature-text p,
.content-box p,
.info-banner p,
.review-text,
.portfolio-card .card-description,
.card .card-description,
.hero-description,
.about-profile-bio,
.timeline-item p,
.timeline-content p {
    text-align: justify;
    text-align-last: left;
}

.step-card p,
.collab-card p,
.tech-item p {
    text-align: left;
}

/* card centrate: l'ultima riga resta centrata come le altre */
.problem-card p,
.benefit-item p,
.audience-card p {
    text-align: center;
    text-align-last: center;
}

/* testo blu piccolo su sfondo alt: tono scuro per restare sopra 4.5:1 */
.timeline-date,
.phase-label {
    color: var(--color-primary-dark);
}

/* --- 4. Icone: tinta morbida + glifo colorato; tinte per classe -------- */
.feature-icon,
.benefit-icon,
.audience-icon,
.problem-icon {
    background: var(--theme-blue-tint);
    color: var(--color-primary);
    box-shadow: none;
}

.problem-icon {
    background: var(--theme-red-tint);
    color: var(--color-danger);
}

.problem-card:hover .problem-icon {
    transform: none;
}

/* Chi sono, "Collaborazioni": specificita' sopra Font Awesome (caricato dopo il tema),
   che imposta display e line-height su .fa-solid */
.collab-card i.collab-card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--theme-blue-tint);
    color: var(--color-primary);
    font-size: 1.5rem;
    line-height: 64px;
    text-align: center;
    display: block;
    flex-shrink: 0;
}

/* Tinte dichiarate nel markup (.is-blue e' il default, non serve una regola) */
.is-orange .feature-icon,
.is-orange .audience-icon,
.is-orange i.collab-card-icon {
    background: var(--theme-orange-tint);
    color: var(--theme-orange-dark);
}

.is-navy .feature-icon,
.is-navy .audience-icon,
.is-navy i.collab-card-icon {
    background: var(--theme-navy-tint);
    color: var(--theme-navy);
}

.is-light .feature-icon,
.is-light .audience-icon,
.is-light i.collab-card-icon {
    background: var(--theme-light-blue-tint);
    color: var(--color-primary-dark);
}

/* App, "Quando un'app fa la differenza": card bianche con bordo superiore tinto */
#scenari .feature-grid .feature-item {
    border-top: 3px solid var(--color-primary);
    border-radius: 0 0 1rem 1rem;
    background: white;
}

#scenari .feature-item.is-orange { border-top-color: var(--theme-orange); }
#scenari .feature-item.is-navy   { border-top-color: var(--theme-navy); }
#scenari .feature-item.is-light  { border-top-color: var(--theme-light-blue); }

/* Siti web, "Per chi lavoro": striscia superiore tinta */
.audience-card.is-orange::before {
    background: linear-gradient(90deg, var(--theme-orange-mid) 0%, var(--theme-orange) 100%);
}

.audience-card.is-navy::before {
    background: linear-gradient(90deg, var(--theme-navy) 0%, var(--color-primary) 100%);
}

/* spunte dei fattori di prezzo: verde */
.price-factors li::before {
    color: var(--theme-green);
}

/* --- 5. Numeri di passo/fase: stesso stile su tutte le pagine ---------- */
/* navy -> blu, testo bianco (>= 5:1) */
.phase-number,
#percorso .step-number {
    background: linear-gradient(135deg, var(--theme-navy) 0%, var(--color-primary) 100%);
    color: #fff;
}

#percorso .step-number {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* --- 6. Sezioni scure (una per pagina) e pannelli scuri ---------------- */
/* Software e App: "Come lavoriamo insieme" */
#percorso {
    background: linear-gradient(135deg, var(--theme-dark-from) 0%, var(--theme-dark-to) 100%);
}

#percorso .section-title,
#percorso .section-subtitle {
    color: #fff;
}

#percorso .step-card {
    background: rgba(255, 255, 255, 0.97);
    border-color: transparent;
}

#percorso .step-card:hover {
    border-color: transparent;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
}

/* Siti web: "Perche' un sito web e' essenziale" */
.section-blue-gradient {
    background: linear-gradient(135deg, var(--theme-dark-from) 0%, var(--theme-dark-to) 100%);
}

/* Pannello "Informazioni di contatto" (tutte le pagine) */
.info-section {
    background: linear-gradient(135deg, var(--theme-dark-to) 0%, var(--theme-dark-from) 100%);
}

/* --- 7. Card: bordo tinto leggero al posto della sola ombra ------------ */
.app-card,
.step-card,
.review-card {
    border: 1px solid rgba(1, 119, 164, 0.10);
}

/* --- 8. Mobile ---------------------------------------------------------- */
/* Giustificato anche sotto i 480 px (scelta del 25 ago 2026): la sillabazione
   automatica regge su telefoni e Firefox; l'unico caso senza dizionari e'
   Chrome su desktop Linux. Per tornare al testo a sinistra su mobile,
   ripristinare qui il blocco @media con text-align: left. */

/* Home: hero su schermi molto piccoli, titolo e testo un po' piu' compatti.
   Soglia sotto i 390: gli standard diffusi (390 iPhone, 412 Android) vedono la
   dimensione piena; a 320-389 la versione compatta evita che il box della hero
   sbordi dal primo schermo sui telefoni bassi (es. 375x667). */
@media (max-width: 389.98px) {
    .hero-title-xl {
        font-size: var(--fs-xl);
        margin-bottom: 0.75rem;
    }

    .hero-description-xl {
        font-size: var(--fs-sm);
        line-height: 1.5;
    }
}

/* --- A capo bilanciato ------------------------------------------------------
   Titoli, sottotitoli e testi centrati su piu' righe: righe di lunghezza simile
   (niente ultima riga con una sola parola). Nei paragrafi "pretty" evita solo
   la parola orfana sull'ultima riga. Miglioramento progressivo: i browser che
   non lo supportano ignorano la regola. */
h1, h2, h3, h4,
.section-subtitle,
.hero-description,
.hero-description-xl,
.card-title,
.error-404-subtitle {
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

/* card con testo centrato: bilanciato (viene dopo la regola "pretty" e prevale) */
.info-banner p,
.problem-card p,
.benefit-item p,
.audience-card p {
    text-wrap: balance;
}

/* =====================================================================
   ADATTAMENTI PER IL TEDESCO
   Regole attive solo con lang=de, via :lang(de) sull'attributo di <html>:
   nessun file separato da caricare per lingua.
   Il tedesco ha parole piu' lunghe che mandano in overflow alcuni componenti.
   ===================================================================== */

/* Tabella prezzi: prima colonna piu' larga su desktop (le etichette tedesche
   sono piu' lunghe delle italiane e inglesi) */
@media (min-width: 1024px) {
    :lang(de) .pricing-matrix thead th:first-child,
    :lang(de) .pricing-matrix tbody th {
        min-width: 160px;
        width: 180px;
    }
}

@media (max-width: 480px) {
    /* Titoli come "Betreuung einer Person mit Behinderung" sbordano su schermi stretti */
    :lang(de) .timeline-title {
        font-size: var(--fs-base);
    }

    /* Termini tecnici come "DSG/DSGVO-Konformitat" sono molto lunghi */
    :lang(de) .feature-text h3,
    :lang(de) .feature-text h4 {
        font-size: var(--fs-sm);
    }
}