:root {
    --primary: #0d2c4a;
    --accent: #0088cc;
    --accent-hover: #006699;
    --bg-light: #f4f7f9;
    --text-dark: #2c3e50;
    --text-muted: #6c757d;
    --white: #ffffff;
    --header-h: 74px;      /* altezza reale header sticky, ricalcolata via JS */
    --section-pad-y: 4rem; /* padding verticale sezioni = spazio hero -> prima sezione */
    /* Spazio da lasciare sopra il titolo all'arrivo: metà di quello che c'è
       naturalmente tra il blocco blu e la prima sezione (64px / 2 = 32px). */
    --scroll-space: calc(var(--section-pad-y) / 2);
    /* Larghezza sotto la quale la barra di navigazione passa al burger.
       1024px copre iPad Pro 11" verticale (834px), iPad Air (820px),
       iPad mini (744px) e i tablet Android più diffusi. Sopra i 768px
       originari le sei voci non ci stavano e andavano a capo. */
    --nav-breakpoint: 1024px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Scorrimento fluido tra le sezioni */
html {
    scroll-behavior: smooth;
}

/* Rispetta le preferenze di accessibilità del sistema */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
}

/* Header & Navigation */
header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.8rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo-img {
    height: 48px;
    width: auto;
    display: block;
    /* Senza flex:none il logo è un flex item comprimibile e si deforma
       quando le voci del menu chiedono più spazio del disponibile. */
    flex: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    /* La barra è una riga sola: se lo spazio manca si passa al burger,
       non si va a capo. */
    flex-wrap: nowrap;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    transition: color 0.2s;
    /* Impedisce che le voci lunghe ("Come funziona", "Oltre signomat.eu")
       si spezzino al loro interno raddoppiando l'altezza dell'header. */
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--accent);
}

.btn-login {
    background-color: var(--primary);
    color: var(--white) !important;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    transition: background-color 0.2s !important;
}

.btn-login:hover {
    background-color: var(--accent) !important;
}

/* Azioni rapide mobile: nascoste su desktop, dove il menu è già tutto visibile */
.nav-mobile-actions {
    display: none;
}

.nav-icon {
    display: flex;
    align-items: center;
    color: var(--primary);
    transition: color 0.2s ease;
}

.nav-icon:hover,
.nav-icon:focus-visible {
    color: var(--accent);
}

/* Burger Menu Button (Nascosto su Desktop) */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.burger-menu div {
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Animazione Hamburger -> X */
.burger-menu.active div:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.burger-menu.active div:nth-child(2) {
    opacity: 0;
}

.burger-menu.active div:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--primary) 0%, #1a426e 100%);
    color: var(--white);
    padding: 4rem 2rem 5rem 2rem;
    text-align: center;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Box Logo Bianco al centro del primo riquadro */
.hero-logo-box {
    display: inline-block;
    background-color: var(--white);
    padding: 1.2rem 2.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.hero-logo {
    max-height: 140px;
    width: auto;
    display: block;
}

.hero-tagline {
    display: inline-block;
    background-color: rgba(0, 136, 204, 0.2);
    color: #66c2ff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 2px;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.btn-primary {
    display: inline-block;
    background-color: var(--accent);
    color: var(--white);
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

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

/* Section Layouts */
section {
    padding: var(--section-pad-y) 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Titoli usati come ancora (es. privacy.html#cookie): stesso offset delle
   sezioni, altrimenti l'header sticky coprirebbe il titolo all'arrivo. */
h2[id],
h3[id] {
    scroll-margin-top: calc(var(--header-h) + var(--scroll-space));
}

/* Punto di arrivo dello scroll.
   L'ancora è il TITOLO, non il bordo della section: ogni sezione ha padding e
   margini interni diversi (#contatti ne ha 144px prima dell'h2 contro i 64px
   delle altre), quindi ancorando la section lo spazio d'arrivo risulterebbe
   diverso per ciascuna. Puntando al titolo, --scroll-space è lo spazio bianco
   sotto l'header, uguale per tutte e su tutte le larghezze. */
.section-title {
    text-align: center;
    margin-bottom: 3rem;
    scroll-margin-top: calc(var(--header-h) + var(--scroll-space));
}

/* Fallback per la sola navigazione gestita dal browser (hash già nell'URL,
   avanti/indietro): qui l'ancora resta la section, quindi va scalato il padding. */
section[id],
.hero[id] {
    scroll-margin-top: calc(var(--header-h) + var(--scroll-space) - var(--section-pad-y));
}

.section-title h2 {
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--accent);
}

.feature-card h3 {
    color: var(--primary);
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
}

.feature-card p {
    color: var(--text-muted);
    font-size: 0.98rem;
}

/* How it works */
.steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    counter-reset: step-counter;
}

.step-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Colonna flex: permette di spingere in basso lo spazio immagine,
       così i tre riquadri lo mostrano alla stessa altezza anche con
       testi di lunghezza diversa. */
    display: flex;
    flex-direction: column;
}

.step-card::before {
    counter-increment: step-counter;
    content: counter(step-counter);
    position: absolute;
    top: -20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background-color: var(--accent);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.step-card h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.8rem;
    color: var(--primary);
}

/* Spazio riservato all'immagine sotto il testo.
   margin-top: auto lo ancora al fondo della card; l'aspect-ratio fisso
   garantisce che i tre spazi abbiano la stessa altezza. */
.step-media {
    margin-top: auto;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--bg-light);
    border: 1px dashed #cbd6dd;
}

/* Distanza minima tra testo e immagine */
.step-card p {
    margin-bottom: 1.5rem;
}

.step-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Quando l'immagine c'è, il segnaposto tratteggiato non serve più */
.step-media:has(img) {
    background-color: transparent;
    border: none;
}

/* Advantages List */
.advantages-wrapper {
    background-color: var(--white);
    border-radius: 8px;
    padding: 3rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.advantages-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.advantages-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
}

.advantages-list li::before {
    content: "✓";
    display: inline-block;
    background-color: #e6f4ea;
    color: #137333;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    flex-shrink: 0;
    font-weight: bold;
}

/* Testo giustificato nelle caselle.
   hyphens: auto (con lang="it" sul tag html) permette la sillabazione e riduce
   gli spazi eccessivi tra le parole nelle colonne strette. */
.feature-card p,
.step-card p,
.feature-card-wide p,
.advantages-list li {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Variante di feature-card a larghezza intera (riquadro singolo) */
.feature-card-wide {
    margin-top: 2rem;
}

/* Se il riquadro è preceduto dal suo titolo, lo stacco lo dà già .section-title */
.section-title + .feature-card-wide {
    margin-top: 0;
}

/* Stacco del secondo blocco titolo dal riquadro che lo precede */
.advantages-wrapper + .section-title {
    margin-top: 4rem;
}

.feature-card-wide p + p {
    margin-top: 1rem;
}

/* Nome di prodotto evidenziato nel testo (stesso blu del link, ma non cliccabile) */
.brand {
    color: var(--accent);
    font-weight: 600;
}

.info-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 136, 204, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.info-link:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent-hover);
}

/* Banner Consenso Cookie
   Ancorato in basso a sinistra per non sovrapporsi al pulsante "torna in cima". */
.cookie-banner {
    position: fixed;
    left: calc(20px + env(safe-area-inset-left, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 1002;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--white);
    border-radius: 10px;
    border-top: 4px solid var(--accent);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* L'attributo hidden deve prevalere su display: flex */
.cookie-banner[hidden] {
    display: none;
}

.cookie-text strong {
    display: block;
    color: var(--primary);
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.cookie-text p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.cookie-text a {
    color: var(--accent);
    font-weight: 600;
}

.cookie-btn {
    align-self: flex-start;
    font-size: 1rem;
    padding: 0.6rem 1.6rem;
}

/* Contact Section */
.contact-section {
    background-color: var(--white);
    border-radius: 12px;
    padding: 3rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.contact-form {
    max-width: 700px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group.full-width {
    grid-column: span 2;
}

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

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
}

/* Regola per pareggiare l'altezza del menu select agli altri campi */
.form-group select {
    height: 48px;
    padding: 0 0.8rem;
    background-color: var(--white);
}

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

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
}

/* Box di risposta dopo l'invio del modulo */
.response-box {
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}

.response-box.success {
    background-color: #e6f4ea;
    border: 1px solid #a8dab5;
    color: #137333;
}

.response-box.error {
    background-color: #fce8e6;
    border: 1px solid #f5c2c7;
    color: #c5221f;
}

.response-box h3 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.response-box p {
    font-size: 1.05rem;
    line-height: 1.5;
}

/* ==================================================================
   Anti-spam
   ================================================================== */

/* Honeypot: fuori dal flusso e fuori dallo schermo, ma tecnicamente
   "visibile" per il browser. I bot che filtrano display:none e
   visibility:hidden lo compilano comunque.
   Nessun display:none, altrimenti il trucco perde efficacia. */
.honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Messaggio di errore della verifica anti-spam */
.form-error {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #d64545;
}

/* Campo da correggere dopo un errore di validazione.
   L'evidenziazione non è solo il colore del bordo: chi non distingue
   il rosso deve comunque percepire la differenza, quindi si aggiunge
   lo spessore e un alone esterno. */
#contactForm .campo-errato,
#contactForm .campo-errato:focus {
    border-color: #d64545;
    box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.18);
    outline: none;
}

/* Footer */
footer {
    background-color: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 2rem;
    font-size: 0.95rem;
}

footer p {
    opacity: 0.8;
}

/* Link nel footer con cambio colore al passaggio del mouse */
footer a.footer-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

footer a.footer-link:hover {
    color: var(--accent); /* Cambia in azzurro al passaggio del mouse */
}

/* Ultima riga del footer: link legali separati da punto mediano */
.footer-links {
    margin-top: 0.8rem;
}

.footer-sep {
    margin: 0 0.6rem;
    opacity: 0.5;
}

/* "Preferenze cookie" è un pulsante (deve riaprire il pannello di consenso),
   ma va reso visivamente identico ai link accanto. */
footer .footer-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
}

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

/* Pulsante Torna in Cima */
.btn-top {
    position: fixed;
    /* Rientra dai bordi anche su dispositivi con notch / barre di sistema */
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    right: calc(28px + env(safe-area-inset-right, 0px));
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    color: var(--white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 999;
    /* Stato nascosto di partenza */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.btn-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-top:hover {
    background-color: var(--accent-hover);
}

.btn-top:focus-visible {
    outline: 3px solid rgba(0, 136, 204, 0.4);
    outline-offset: 2px;
}

.btn-top svg {
    display: block;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn-top {
        transition: opacity 0.2s ease, visibility 0.2s ease;
        transform: none;
    }

    .btn-top.visible {
        transform: none;
    }
}

/* ==================================================================
   RESPONSIVE
   ------------------------------------------------------------------
   Tre soglie, con compiti distinti:

   ≤ 1250px  respiro della barra: gap e padding ridotti, per evitare
             che le sei voci arrivino al limite sui laptop stretti.
   ≤ 1024px  passaggio al burger. Serve prima dei 768px originari
             perché a 834px (iPad Pro 11" verticale) lo spazio utile
             è 770px mentre logo e voci ne chiedono circa 815.
   ≤ 768px   adattamenti dei contenuti: hero, modulo contatti,
             pulsante "torna in cima", banner cookie.
   ================================================================== */

/* ---------- Laptop stretti: recupero di spazio nella barra ---------- */
@media (max-width: 1250px) {
    .nav-links {
        gap: 1.4rem;
    }

    .nav-container {
        padding: 0.8rem 1.5rem;
    }
}

/* ---------- Tablet e sotto: menu a burger ---------- */
@media (max-width: 1024px) {
    .nav-container {
        flex-direction: row;
        justify-content: space-between;
    }

    .nav-mobile-actions {
        display: flex;
        align-items: center;
        gap: 1.4rem;
    }

    .burger-menu {
        display: flex;
    }

    /* Nel pannello a tendina le voci tornano su più righe: qui lo spazio
       verticale non è un problema e i titoli lunghi restano leggibili. */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--white);
        flex-direction: column;
        flex-wrap: wrap;
        gap: 1.2rem;
        padding: 1.5rem 2rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #eaeaea;
        text-align: center;
    }

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

    .nav-links a {
        white-space: normal;
    }

    .btn-login {
        display: inline-block;
        width: 100%;
    }
}

/* ---------- Mobile: adattamento dei contenuti ---------- */
@media (max-width: 768px) {
    /* --scroll-space non va ridefinito: essendo derivato da --section-pad-y
       vale già 32px anche qui, quindi l'arrivo è identico su ogni larghezza. */

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

    .hero-logo-box {
        padding: 0.8rem 1.5rem;
    }

    .hero-logo {
        max-height: 90px;
    }

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

    .form-group.full-width {
        grid-column: span 1;
    }

    .btn-top {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        right: calc(18px + env(safe-area-inset-right, 0px));
        width: 46px;
        height: 46px;
    }

    /* Su schermo stretto il banner occupa la larghezza disponibile, quindi
       coprirebbe la freccia "torna in cima": la nascondiamo mentre è aperto. */
    .cookie-banner {
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        max-width: none;
        padding: 1.25rem;
    }

    .cookie-btn {
        align-self: stretch;
        text-align: center;
    }

    body.cookie-open .btn-top {
        display: none;
    }
}