/* ==========================================================================
   DOWEB - unico foglio di stile del sito (nuovo design)
   Riunisce quelli che prima erano nd.css (base comune) e i p-*.css delle singole pagine,
   nello stesso ordine in cui le pagine li caricavano, ripulito con PurgeCSS contro tutte le
   pagine del sito (settembre 2026). I blocchi restano separati e commentati con il nome del
   file di origine: le regole di ogni pagina hanno il loro prefisso (.svc-, .prj-, .blog- ...),
   quindi caricarle tutte ovunque non cambia le altre pagine.
   Dopo ogni modifica va alzato il numero di versione (?N) nei template che lo includono.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Font in locale (Sora e DM Sans, file variabili scaricati da Google Fonts, sottoinsiemi
   latin e latin-ext): nessuna richiesta a server esterni. I due "latin" sono precaricati
   nell'area Head.
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/assets/nd/fonts/sora-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/assets/nd/fonts/sora-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/nd/fonts/dm-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/nd/fonts/dm-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   nd.css
   ========================================================================== */
/* ==========================================================================
   DOWEB - nuovo design (settembre 2026)
   Foglio comune a tutte le pagine del nuovo design. Ogni pagina aggiunge il suo
   /assets/nd/css/p-<pagina>.css con i soli componenti propri.

   Regole del progetto:
   - niente attributi style="" nel markup: tutto passa da classi;
   - il contenuto di ogni fascia sta dentro .container, a tutta larghezza fino a
     --container-max-width e con --container-padding ai lati;
   - layout fluido: sotto i 1100px il menu diventa a comparsa, sotto i 900px le
     colonne vanno una sotto l'altra.

   Deroghe motivate a ~/.claude/DESIGN-RULES.md: il redesign e' stato approvato cosi'
   dal cliente, quindi restano le sfumature arancio del marchio (stessa famiglia di
   tinta, voce 1), i bagliori sfocati decorativi delle fasce (voce 8) e la freccia che
   scivola di 4px sui link al passaggio (voce 29, e' un solo spostamento, non un loop).
   L'hover con sollevamento resta solo sulle card che sono link (voce 28).
   Nessun testo sotto i 12px: le etichette piu' piccole del canvas (9-11px) sono state portate a 12
   perche' i controlli di accessibilita' le segnalavano come testo troppo piccolo.
   ========================================================================== */

:root {
    /* max-width comprende il padding: contenuto utile 1400 - 2 x 40 = 1320px */
    --container-max-width: 1400px;
    --container-padding: 40px;

    /* superfici scure */
    --nd-bg: #11161d;
    --nd-bg-header: #141a21;
    --nd-bg-band: #161d26;
    --nd-bg-card: #1a222c;
    --nd-bg-input: #1a212a;
    --nd-line: #262e37;
    --nd-line-2: #2d3a48;
    --nd-line-3: #36404c;
    --nd-on-dark: #c9cfd6;
    --nd-on-dark-soft: #d3d7dc;
    --nd-on-dark-muted: #b3bac2; /* 8:1 e oltre sui fondi scuri (AAA); era #9ba3ad, 6.6:1 */
    --nd-on-dark-faint: #a9b2bc;

    /* superfici chiare */
    --nd-light: #f7f5f2;
    --nd-card: #ffffff;
    --nd-card-line: #ebe7e1;
    --nd-light-line: #e8e3dc;
    --nd-ink: #15161a;
    --nd-text: #4a4c52;
    --nd-text-2: #4d4f55; /* 7.5:1 anche sul beige (AAA); era #55575e, 6.6:1 */
    --nd-tile: #fdf1ea;

    /* accento */
    --nd-accent: #f26a21;
    --nd-accent-on-dark: #ffa75a; /* arancione per TESTO su fondo scuro: 7.2:1 e oltre su tutti i fondi scuri (AAA) */
    --nd-accent-hover: #ffa31a;
    /* arancio scuro per testi e link su fondo chiaro: 8.5:1 su bianco, 7.9:1 sul beige
       della pagina (AAA). Prima #c94a14, che arrivava a 4.7:1 */
    --nd-accent-deep: #8a2d06;
    --nd-accent-icon: #e2551a;
    --nd-grad: linear-gradient(90deg, #f25c05 0%, #ff8c1a 50%, #f25c05 100%);
    --nd-grad-text: linear-gradient(90deg, #ffa31a 0%, #ff7a12 45%, #f5500a 100%);
    --nd-grad-text-light: linear-gradient(90deg, #ff8a1a 0%, #f6620a 45%, #e84d05 100%);
    --nd-grad-num: linear-gradient(90deg, #ff9a1f 0%, #ff6a0d 50%, #f04e05 100%);
    --nd-ok: #3ecf8e;
    --nd-ok-text: #4fe0a8;

    --nd-font-display: "Sora", "DM Sans", system-ui, sans-serif;
    --nd-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --nd-ease: cubic-bezier(.2, 0, .2, 1);
    --nd-header-h: 76px;
}

@media (max-width: 1100px) {
    :root { --container-padding: 32px; }
}

@media (max-width: 600px) {
    :root { --container-padding: 16px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

/* le ancore non finiscono sotto l'header fisso */
html { scroll-padding-top: calc(var(--nd-header-h) + 16px); }

body {
    overflow-x: hidden;
    background: var(--nd-bg);
    color: #1b1c20;
    font-family: var(--nd-font-body);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--nd-accent); text-decoration: none; }
a:hover { color: var(--nd-accent-hover); }

input::placeholder, textarea::placeholder { color: #9a9ca3; }

a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible {
    outline: 2px solid var(--nd-accent-hover);
    outline-offset: 3px;
}

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.page {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* clip e non hidden: hidden creerebbe un contenitore di scorrimento e lo header
       smetterebbe di restare fisso in alto */
    overflow-x: clip;
    background: var(--nd-bg);
}

/* landmark principale: aperto in fondo a NdHeader e chiuso in NdFooter; le fasce restano
   impilate come quando erano figlie dirette di .page */
.page__main { display: flex; flex-direction: column; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    /* invisibile, ma i validatori di contrasto lo misurano lo stesso (es. le label dei campi
       sulle fasce scure ereditavano il testo scuro su fondo scuro): nero su bianco, 21:1 */
    color: #000000; background: #ffffff;
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
.grad-text {
    background: var(--nd-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section--light .grad-text,
.grad-text--light {
    background-image: var(--nd-grad-text-light);
}

.h1 {
    margin: 0;
    font-family: var(--nd-font-display);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.h2 {
    margin: 0;
    font-family: var(--nd-font-display);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--nd-ink);
}

.section--dark .h2, .section--band .h2 { color: #ffffff; }

.h3 {
    margin: 0;
    font-family: var(--nd-font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--nd-ink);
}

.lead {
    margin: 0;
    max-width: 680px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--nd-on-dark);
}

.lead strong { color: #ffffff; }

.text {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--nd-text);
}

.text strong { color: var(--nd-ink); }

.eyebrow {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nd-accent-deep);
    background: var(--nd-grad-text-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* etichetta a pillola delle fasce scure (hero) */
.badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(242, 106, 33, 0.5);
    border-radius: 999px;
    background: rgba(242, 106, 33, 0.08);
    color: var(--nd-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge svg { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 56px;
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, filter .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn svg { flex-shrink: 0; transition: translate .25s var(--nd-ease); }
.btn:hover > svg:last-child:not(:first-child) { translate: 4px 0; }

.btn--primary { background: var(--nd-grad); color: #ffffff; }
.btn--primary:hover { color: #ffffff; translate: 0 -2px; filter: brightness(1.08); box-shadow: 0 12px 26px rgba(242, 92, 5, 0.35); }
.btn--primary:active { translate: 0 0; filter: brightness(.97); box-shadow: none; }

.btn--outline { padding: 0 28px; border: 1.5px solid var(--nd-accent); background: transparent; color: #ffffff; font-weight: 600; }
.btn--outline:hover { color: #ffffff; translate: 0 -2px; background-color: rgba(242, 106, 33, 0.12); border-color: #ff8c1a; }
.section--light .btn--outline { color: var(--nd-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* --------------------------------------------------------------------------
   Header e menu
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
    height: var(--nd-header-h);
    background: var(--nd-bg-header);
    border-bottom: 1px solid var(--nd-line);
    animation: ndFade .5s ease-out both;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 48px;
    height: 100%;
}

/* desktop: voci del menu al centro esatto dell'header, logo a sinistra e Assistenza a destra
   (due colonne laterali uguali, cosi' il centro non dipende dalla larghezza di logo e bottone) */
@media (min-width: 1101px) {
    .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; }
    .site-header__logo { justify-self: start; }
    .site-header__cta { justify-self: end; }
    .main-nav { justify-content: center; }
}

.site-header__logo { display: flex; flex-shrink: 0; }
.site-header__logo img { display: block; width: auto; height: 34px; }

.main-nav {
    display: flex;
    flex-grow: 1;
    align-items: stretch;
    gap: 28px;
    height: 100%;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.main-nav__link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #ffffff;
    transition: color .2s ease, box-shadow .2s ease;
}

.main-nav__link:hover { color: #ff8c1a; box-shadow: inset 0 -3px 0 rgba(242, 106, 33, 0.6); }

.main-nav__link[aria-current] {
    padding-top: 3px;
    border-bottom: 3px solid var(--nd-accent);
    /* testo un filo piu' chiaro dell'accento: 7.5:1 sullo sfondo dell'header (AAA) */
    color: #ff8c1a;
    box-shadow: none;
}

.main-nav__dd { position: relative; display: flex; }
.main-nav__dd > .main-nav__link svg { transition: rotate .2s var(--nd-ease); }
.main-nav__dd:hover > .main-nav__link svg,
.main-nav__dd:focus-within > .main-nav__link svg { rotate: 180deg; }

.main-nav__menu {
    position: absolute;
    top: calc(100% - 8px);
    left: -18px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 250px;
    padding: 8px;
    border: 1px solid var(--nd-line-2);
    border-radius: 14px;
    background: var(--nd-bg-card);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    translate: 0 8px;
    transition: opacity .2s ease, translate .2s var(--nd-ease), visibility .2s;
}

.main-nav__menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }

.main-nav__dd:hover .main-nav__menu,
.main-nav__dd:focus-within .main-nav__menu { opacity: 1; visibility: visible; translate: 0 0; }

.main-nav__sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 14px;
    border-radius: 10px;
    color: #e6e9ed;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.main-nav__sub:hover, .main-nav__sub:focus-visible { background: rgba(242, 106, 33, 0.12); color: var(--nd-accent-hover); }
.main-nav__sub[aria-current] { background: rgba(242, 106, 33, 0.08); color: var(--nd-accent-hover); }
.main-nav__sub svg { opacity: 0; translate: -6px 0; transition: opacity .2s ease, translate .2s var(--nd-ease); }
.main-nav__sub:hover svg, .main-nav__sub[aria-current] svg { opacity: 1; translate: 0 0; }

.site-header__cta { flex-shrink: 0; height: auto; padding: 13px 20px; gap: 8px; border-radius: 6px; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; }

.site-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--nd-line-3);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.site-header__toggle span { display: block; height: 2px; border-radius: 1px; background: #ffffff; transition: translate .2s var(--nd-ease), rotate .2s var(--nd-ease), opacity .2s; }
.site-header.is-open .site-header__toggle span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.site-header.is-open .site-header__toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .site-header__toggle span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

/* bottone che apre un sottomenu: serve solo nel menu mobile */
.main-nav__expand { display: none; }

@media (max-width: 1100px) {
    .site-header__inner { gap: 16px; }
    .site-header__logo { margin-right: auto; }
    .site-header__toggle { display: flex; order: 3; }
    /* Assistenza e menu della stessa altezza (44px) e con lo stesso raggio */
    .site-header .site-header__cta { height: 44px; padding: 0 16px; border-radius: 8px; }

    /* pannello a tutta altezza sotto l'header: e' sempre nel DOM, chiuso e' invisibile
       (visibility: hidden lo toglie anche dalla navigazione da tastiera) e si apre
       scendendo di qualche pixel con una dissolvenza */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        height: calc(100vh - var(--nd-header-h));
        height: calc(100dvh - var(--nd-header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px var(--container-padding) 32px;
        background: var(--nd-bg-header);
        border-top: 1px solid var(--nd-line);
        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        translate: 0 -12px;
        transition: opacity .22s ease, translate .28s var(--nd-ease), visibility 0s linear .28s;
    }

    .site-header.is-open .main-nav {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
        transition: opacity .22s ease, translate .28s var(--nd-ease), visibility 0s;
    }

    /* le voci entrano una dopo l'altra */
    .site-header.is-open .main-nav > * { animation: ndMenuIn .34s var(--nd-ease) both; }
    .site-header.is-open .main-nav > :nth-child(2) { animation-delay: .04s; }
    .site-header.is-open .main-nav > :nth-child(3) { animation-delay: .08s; }
    .site-header.is-open .main-nav > :nth-child(4) { animation-delay: .12s; }
    .site-header.is-open .main-nav > :nth-child(5) { animation-delay: .16s; }
    .site-header.is-open .main-nav > :nth-child(6) { animation-delay: .20s; }
    .site-header.is-open .main-nav > :nth-child(7) { animation-delay: .24s; }

    .main-nav__link { padding: 16px 0; font-size: 16px; border-bottom: 1px solid var(--nd-line); }
    .main-nav__link:hover { box-shadow: none; }
    .main-nav__link[aria-current] { padding-top: 16px; border-bottom: 1px solid var(--nd-line); }

    /* voce con sottomenu: link alla pagina a sinistra, bottone freccia a destra */
    .main-nav__dd { display: grid; grid-template-columns: 1fr auto; align-items: stretch; border-bottom: 1px solid var(--nd-line); }
    .main-nav__dd > .main-nav__link { border-bottom: 0; }
    .main-nav__dd > .main-nav__link svg { display: none; }

    .main-nav__expand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        margin: 6px 0;
        border: 0;
        border-left: 1px solid var(--nd-line);
        background: none;
        color: #ffffff;
        cursor: pointer;
    }
    .main-nav__expand svg { transition: rotate .25s var(--nd-ease); }
    .main-nav__expand[aria-expanded="true"] { color: var(--nd-accent-hover); }
    .main-nav__expand[aria-expanded="true"] svg { rotate: 180deg; }

    /* sottomenu chiusi: si aprono a fisarmonica solo quello toccato */
    .main-nav__menu {
        position: static;
        grid-column: 1 / -1;
        min-width: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0 0 0 12px;
        border: 0;
        background: none;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        translate: none;
        transition: max-height .3s var(--nd-ease), opacity .2s ease, padding .3s var(--nd-ease), visibility 0s linear .3s;
    }

    .main-nav__dd.is-expanded .main-nav__menu {
        max-height: 520px;
        padding: 0 0 12px 12px;
        opacity: 1;
        visibility: visible;
        transition: max-height .3s var(--nd-ease), opacity .2s ease .05s, padding .3s var(--nd-ease), visibility 0s;
    }

    /* niente apertura al passaggio del mouse o al focus: su mobile decide il bottone */
    .main-nav__dd:hover .main-nav__menu,
    .main-nav__dd:focus-within .main-nav__menu { translate: none; }
    .main-nav__dd:not(.is-expanded):hover .main-nav__menu,
    .main-nav__dd:not(.is-expanded):focus-within .main-nav__menu { opacity: 0; visibility: hidden; }

    .main-nav__menu::before { display: none; }
    .main-nav__sub { padding: 11px 12px; font-size: 15px; white-space: normal; }

    /* a menu aperto la pagina sotto non scorre. Solo su body: il suo overflow passa alla
       finestra e la posizione resta. Mettendolo anche su html, body diventava un contenitore
       di scorrimento a se': l'header fisso scivolava via e alla chiusura si tornava in cima */
    html.nd-menu-open body { overflow: hidden; }
}

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

@media (max-width: 480px) {
    /* resta l'icona, la scritta la leggono solo gli screen reader */
    .site-header__cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .site-header .site-header__cta { width: 44px; padding: 0; }
}

/* --------------------------------------------------------------------------
   Fasce
   -------------------------------------------------------------------------- */
.section {
    position: relative;
    flex-shrink: 0;
    /* clip e non hidden: taglia rombi e bagliori che escono dalla fascia allo stesso modo,
       ma non crea un contenitore di scorrimento, cosi' gli elementi sticky dentro funzionano */
    overflow: clip;
}

.section > .container { position: relative; }

.section--dark { background: var(--nd-bg); }
.section--band { background: var(--nd-bg-band); }
.section--light { background: var(--nd-light); }
.section--ruled { border-bottom: 1px solid var(--nd-line); }

/* hero delle pagine interne: breadcrumb, etichetta, titolo, sottotitolo */
.hero { padding: 28px 0 64px; }
.hero > .container { display: flex; flex-direction: column; gap: 20px; }

.hero > .container > * { animation: ndUp .7s var(--nd-ease) both; }
.hero > .container > :nth-child(1) { animation-delay: .10s; }
.hero > .container > :nth-child(2) { animation-delay: .20s; }
.hero > .container > :nth-child(3) { animation-delay: .30s; }
.hero > .container > :nth-child(4) { animation-delay: .40s; }
.hero > .container > :nth-child(5) { animation-delay: .50s; }
.hero > .container > :nth-child(6) { animation-delay: .60s; }
.hero > .container > :nth-child(n+7) { animation-delay: .70s; }

/* linee arancio disegnate negli angoli delle fasce */
.deco-lines { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
/* negli hero le linee coprono tutta l'altezza della fascia, cosi' arrivano fino in fondo anche
   quando il testo va a capo (tablet, telefono); lo spessore resta quello disegnato */
.hero .deco-lines { height: 100%; }
.deco-lines path { vector-effect: non-scaling-stroke; }
.hero .deco-lines path { stroke-dasharray: 1400; animation: ndDraw 2.2s var(--nd-ease) .2s both; }

/* rombi a contorno e bagliori sfocati: dimensione e posizione le da' la pagina */
.deco-diamond {
    position: absolute;
    border: 1.5px solid rgba(242, 106, 33, 0.28);
    rotate: 45deg;
    pointer-events: none;
    animation: ndTurn 20s ease-in-out infinite alternate;
}

/* hero: sotto i 1700px le due linee di sinistra (quelle che partono fuori dal bordo sinistro,
   x negativa) passano sopra breadcrumb e titolo; restano solo quelle di destra */
@media (max-width: 1700px) {
    .hero .deco-lines path[d^="M-"] { display: none; }
}

/* rombi decorativi: su tablet e telefono (fino a 1100px) finiscono sopra testi e card */
@media (max-width: 1100px) {
    .deco-diamond { display: none; }
}

/* sul telefono spariscono anche tutte le linee decorative */
@media (max-width: 600px) {
    .deco-lines { display: none; }
}

.deco-glow {
    position: absolute;
    border-radius: 50%;
    background: rgba(242, 106, 33, 0.10);
    filter: blur(90px);
    rotate: 30deg;
    pointer-events: none;
    animation: ndDrift 16s ease-in-out infinite alternate;
}

/* comparsa sfalsata dei blocchi nelle fasce successive all'hero */
.section:not(.hero) :is(.h2, .text, .eyebrow, article, li, blockquote, form, .reveal) {
    animation: ndUp .7s var(--nd-ease) .25s both;
}

/* sfalsamento breve e ciclico (0 / 0.08 / 0.16s): nelle griglie lunghe le card dalla nona in
   poi aspettavano quasi un secondo prima di comparire, e scorrendo sembravano non caricare */
.section:not(.hero) :is(article, li):nth-child(3n+1) { animation-delay: 0s; }
.section:not(.hero) :is(article, li):nth-child(3n+2) { animation-delay: .08s; }
.section:not(.hero) :is(article, li):nth-child(3n+3) { animation-delay: .16s; }
.section:not(.hero) :is(article, li) :is(.h2, .text, li, article) { animation: none; }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--nd-on-dark-muted); }
.breadcrumb a { color: var(--nd-on-dark-muted); }
.breadcrumb a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--nd-on-dark-soft); }

/* --------------------------------------------------------------------------
   Componenti ricorrenti
   -------------------------------------------------------------------------- */

/* titolo di fascia: eyebrow + h2 (+ testo) */
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }

/* riquadro icona quadrato */
.icon-tile {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--nd-tile);
    color: var(--nd-accent-icon);
    transition: scale .25s var(--nd-ease), rotate .25s var(--nd-ease);
}

.section--dark .icon-tile, .section--band .icon-tile { background: rgba(242, 106, 33, 0.12); }

/* elenco con icona, titolo e descrizione, separato da righe */
.feature-list { display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; list-style: none; }
.feature-list__item { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--nd-light-line); }
.feature-list__body { display: flex; flex-direction: column; gap: 4px; }
.feature-list__title { font-size: 16px; color: var(--nd-ink); }
.feature-list__desc { font-size: 14.5px; line-height: 1.55; color: var(--nd-text-2); }

/* card chiara */
.card {
    padding: 30px 32px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, border-color .25s ease;
}

.card__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--nd-text-2); }

/* link dentro i testi su fondo chiaro: arancio scuro e sottolineati (l'arancio del marchio
   su bianco arriva solo a 3:1, e senza sottolineatura il link si distingue solo dal colore) */
/* solo link dentro frasi (paragrafi), non le voci di elenchi e menu fatti di soli link */
.section--light :is(p, .card__text, .text) a:not([class]),
.card__text a:not([class]) {
    color: var(--nd-accent-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.section--light :is(p, .card__text, .text) a:not([class]):hover,
.card__text a:not([class]):hover { color: #6e2304; }

/* le card che portano da qualche parte salgono al passaggio */
a.card:hover, .card--link:hover {
    translate: 0 -6px;
    border-color: rgba(242, 106, 33, 0.45);
    box-shadow: 0 20px 40px rgba(40, 30, 20, 0.14);
}

a.card:hover .icon-tile, .card--link:hover .icon-tile { scale: 1.08; rotate: -4deg; }

/* card numerata (01, 02...) */
.num-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.num-card { display: flex; gap: 24px; }
.num-card__num {
    flex-shrink: 0;
    font-family: var(--nd-font-display);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    background: var(--nd-grad-num);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.num-card__body { display: flex; flex-direction: column; gap: 10px; }

/* fascia finale con invito all'azione */
.cta-band { padding: 72px 0; }
.cta-band__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    max-width: 100%;
    height: 260px;
    margin: -130px 0 0 -350px;
    border-radius: 50%;
    background: rgba(242, 106, 33, 0.14);
    filter: blur(100px);
    animation: ndDrift 16s ease-in-out infinite alternate;
}
.cta-band > .container { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.cta-band__title { margin: 0; font-family: var(--nd-font-display); font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: #ffffff; }
.cta-band__text { margin: 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--nd-on-dark); }
.cta-band .btn-row { justify-content: center; padding-top: 6px; }

/* CTA: entra con un'animazione solo il riquadro del blog e quello del test velocita'.
   Le fasce finali in fondo alle pagine (.cta-band) restano ferme, su richiesta del cliente. */
.nd-speed, .blog-cta > :not(.blog-cta__glow) {
    animation: ndUp .7s var(--nd-ease) both;
}
.blog-cta > :nth-child(3) { animation-delay: .1s; }
.blog-cta > :nth-child(4) { animation-delay: .2s; }
.blog-cta > :nth-child(5) { animation-delay: .3s; }

/* il bottone principale di queste CTA "respira" con un alone caldo, a intervalli lunghi */
.blog-cta .btn--primary, .nd-speed .btn--primary {
    animation: ndUp .7s var(--nd-ease) .24s both, ndGlow 3.2s ease-in-out 1.2s infinite;
}
@keyframes ndGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 106, 33, 0); }
    50% { box-shadow: 0 10px 30px rgba(242, 106, 33, 0.38); }
}

/* fasce CTA in fondo alle pagine: nessuna animazione, nemmeno il bagliore di sfondo */
/* selettore piu' specifico della regola di comparsa delle fasce (.section:not(.hero) ...) */
.page .section.cta-band, .page .section.cta-band * { animation: none; }


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    padding: 56px 0 28px;
    background: var(--nd-bg);
    color: var(--nd-on-dark);
}

.site-footer .deco-lines { height: 380px; }

.site-footer__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.7fr 1.15fr;
}

.site-footer__col { display: flex; flex-direction: column; gap: 16px; padding: 0 32px; border-left: 1px solid var(--nd-line); }
.site-footer__col--brand { gap: 18px; padding: 0 40px 0 0; border-left: 0; }
.site-footer__col--links { gap: 10px; font-size: 14px; }
.site-footer__col--last { gap: 14px; padding-right: 0; }

.site-footer__logo { display: flex; align-self: flex-start; }
.site-footer__logo img { display: block; width: auto; height: 38px; }
.site-footer__text { margin: 0; font-size: 13px; line-height: 1.65; }
.site-footer__title { font-size: 15px; font-weight: 700; color: #ffffff; }
.site-footer__col--links .site-footer__title { padding-bottom: 6px; }
.site-footer a { color: #ffffff; }
.site-footer a:not([aria-label]):hover { color: var(--nd-accent-hover); }

.site-footer__social { display: flex; gap: 10px; padding-top: 6px; }
.site-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--nd-line-3);
    border-radius: 50%;
    transition: translate .25s var(--nd-ease), border-color .2s ease, background-color .2s ease;
}
.site-footer__social a:hover { translate: 0 -2px; border-color: var(--nd-accent); background-color: rgba(242, 106, 33, 0.14); }

.site-footer__contact { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: #ffffff; }
.site-footer__contact svg { flex-shrink: 0; margin-top: 2px; }
.site-footer__vat { font-size: 13px; color: #ffffff; }

.site-footer__form { display: flex; gap: 6px; margin: 0; }
.site-footer__input {
    flex-grow: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--nd-line-3);
    border-radius: 8px;
    background: var(--nd-bg-input);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.site-footer__input:hover { border-color: #6b7684; }
.site-footer__input:focus { outline: none; border-color: var(--nd-accent); box-shadow: 0 0 0 4px rgba(242, 106, 33, 0.2); }
.site-footer__submit {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: var(--nd-grad);
    color: #ffffff;
    cursor: pointer;
    transition: filter .2s ease;
}
.site-footer__submit:hover { filter: brightness(1.08); }

.site-footer__bottom {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 48px;
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid var(--nd-line);
    font-size: 12px;
    color: var(--nd-on-dark-faint);
}
.site-footer__bottom a { color: var(--nd-on-dark-soft); }
.site-footer__legal-links { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 600; }
/* dati societari a sinistra, link legali a destra */
.site-footer__legal { max-width: 760px; margin: 0; line-height: 1.6; }
.site-footer__legal-links { justify-content: flex-end; }

@media (max-width: 1000px) {
    .site-footer__bottom { flex-direction: column; }
    .site-footer__legal-links { justify-content: flex-start; }
}

@media (max-width: 1000px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    .site-footer__col:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 600px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__col { padding: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   Popup Assistenza (markup nell'area Foot, condiviso col vecchio design)
   -------------------------------------------------------------------------- */
.assistenza-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(8, 11, 15, 0.7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.assistenza-overlay[hidden], .assistenza-popup[hidden] { display: none; }
.assistenza-popup { position: fixed; top: 50%; left: 50%; z-index: 9001; transform: translate(-50%, -50%); width: 90%; max-width: 420px; padding: 40px 32px 32px; border: 1px solid var(--nd-line-2); border-radius: 16px; background: var(--nd-bg-card); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); color: var(--nd-on-dark); font-family: var(--nd-font-body); }
.assistenza-popup__close { position: absolute; top: 14px; right: 14px; display: flex; padding: 6px; border: 0; border-radius: 50%; background: none; color: var(--nd-on-dark); cursor: pointer; }
.assistenza-popup__close:hover { color: var(--nd-accent-hover); background: rgba(242, 106, 33, 0.12); }
.assistenza-popup__title { margin: 0 0 6px; font-family: var(--nd-font-display); font-size: 22px; font-weight: 700; color: #ffffff; }
.assistenza-popup__subtitle { margin: 0 0 24px; font-size: 14px; }
.assistenza-popup__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.assistenza-popup__item { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--nd-line-2); border-radius: 12px; background: var(--nd-bg); color: #ffffff; }
.assistenza-popup__item:hover, .assistenza-popup__item:focus-visible { border-color: var(--nd-accent); background: rgba(242, 106, 33, 0.1); color: #ffffff; }
.assistenza-popup__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--nd-grad); }
/* span e non p: il numero in grassetto dentro un <p> veniva segnalato come "possibile titolo" */
.assistenza-popup__label { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nd-on-dark-faint); }
.assistenza-popup__number { display: block; margin: 0; font-size: 17px; font-weight: 700; color: #ffffff; }

/* --------------------------------------------------------------------------
   Layout: colonne che si impilano
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .num-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .num-card { flex-direction: column; gap: 14px; }
    .card { padding: 24px 20px; }
    .btn { height: 52px; padding: 0 24px; }
    .btn-row { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   Icona profilo al posto delle foto delle persone (recensioni, autori del blog):
   per scelta del cliente non si mostrano i volti veri. La misura la da' la classe
   del componente (es. .rev-card__avatar); span.nd-avatar vince sul suo sfondo.
   -------------------------------------------------------------------------- */
.nd-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: flex-end;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
}

span.nd-avatar { background: #dfe5e7; }

.nd-avatar svg { display: block; width: 100%; height: 100%; fill: #ffffff; }

/* --------------------------------------------------------------------------
   Blocchi condivisi delle pagine servizio e citta'
   Aree NdStorieSuccesso (.nd-cases) e NdCtaTestVelocita (.nd-speed)
   -------------------------------------------------------------------------- */
.nd-cases { padding: 96px 0; border-top: 1px solid var(--nd-line); }
.nd-cases__glow { left: -160px; top: 40%; width: 420px; height: 420px; filter: blur(110px); }
.nd-cases > .container { display: flex; flex-direction: column; gap: 48px; }
.nd-cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nd-case { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--nd-line-2); border-radius: 16px; background: var(--nd-bg-card); }
.nd-case__cat { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-accent-on-dark); }
.nd-case__title { margin: 0; font-family: var(--nd-font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: #ffffff; }
.nd-case__text { flex-grow: 1; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-on-dark); }
.nd-case__link { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--nd-line-2); font-size: 14px; font-weight: 700; color: var(--nd-accent-on-dark); }
.nd-case__link svg { flex-shrink: 0; transition: translate .2s var(--nd-ease); }
.nd-case__link:hover svg { translate: 4px 0; }
.nd-cases__all { align-self: center; height: 52px; padding: 0 26px; font-size: 15px; }

.nd-speed-band { padding: 72px 0; background: var(--nd-light); }
.nd-speed {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 32px 40px;
    border-radius: 18px;
    background: var(--nd-bg);
    box-shadow: 0 24px 60px rgba(17, 22, 29, 0.18);
}
.nd-speed__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: rgba(242, 106, 33, 0.14); }
.nd-speed__copy { display: flex; flex-grow: 1; flex-direction: column; gap: 6px; min-width: 0; }
.nd-speed__title { margin: 0; font-family: var(--nd-font-display); font-size: 21px; font-weight: 700; line-height: 1.3; color: #ffffff; }
.nd-speed__text { margin: 0; font-size: 15px; color: var(--nd-on-dark); }
.nd-speed__form { position: relative; display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 10px; width: 440px; max-width: 100%; margin: 0; }
.nd-speed__input {
    flex: 1 1 200px;
    min-width: 0;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--nd-line-2);
    border-radius: 999px;
    background: var(--nd-bg-card);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.nd-speed__input:hover { border-color: #6b7684; }
.nd-speed__input:focus { outline: none; border-color: var(--nd-accent); box-shadow: 0 0 0 4px rgba(242, 106, 33, 0.2); }
.nd-speed__input[aria-invalid="true"] { border-color: #ff8a5c; }
.nd-speed__btn { flex-shrink: 0; padding: 0 30px; font-size: 15px; }
.nd-speed__error { flex-basis: 100%; margin: 0; padding-left: 20px; font-size: 14px; color: #ffaa80; }
.nd-speed__error[hidden] { display: none; }

@media (max-width: 1100px) {
    .nd-speed { flex-wrap: wrap; }
    .nd-speed__copy { flex-basis: calc(100% - 92px); }
    .nd-speed__form { width: 100%; }
}

@media (max-width: 900px) {
    .nd-cases { padding: 64px 0 72px; }
    .nd-cases > .container { gap: 36px; }
    .nd-cases__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .nd-cases__grid { grid-template-columns: 1fr; }
    .nd-case { padding: 24px 20px; }
    .nd-cases__all { align-self: stretch; }
    .nd-speed-band { padding: 48px 0; }
    .nd-speed { gap: 18px; padding: 24px 20px; }
    .nd-speed__copy { flex-basis: auto; }
    .nd-speed__btn { flex-grow: 1; }
}

/* --------------------------------------------------------------------------
   Animazioni (dal canvas del redesign)
   -------------------------------------------------------------------------- */
@keyframes ndUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ndFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ndDraw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes ndDrift { 0% { translate: 0 0; } 100% { translate: -40px 50px; } }
@keyframes ndTurn { 0% { rotate: 45deg; } 100% { rotate: 57deg; } }
@keyframes ndZoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* piccoli indicatori animati dei pannelli illustrativi */
@keyframes dwPulse { 0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, .55); } 70% { box-shadow: 0 0 0 8px rgba(62, 207, 142, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); } }
@keyframes dwLoad { 0%, 100% { width: 52%; } 35% { width: 74%; } 65% { width: 61%; } }
@keyframes dwIdle { 0%, 100% { width: 6%; } 50% { width: 12%; } }
/* solo movimento, niente dissolvenza: a opacita' ridotta il testo scendeva sotto il 7:1 */
@keyframes dwSync { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes dwFlow { from { background-position: 0 0; } to { background-position: 0 16px; } }
@keyframes dwDrop { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
@keyframes dwDr { 0%, 70%, 100% { border-color: #2d3a48; background: #1a222c; } 78% { border-color: #f26a21; background: #2a2019; } }
@keyframes dwTick { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.dw-pulse { animation: dwPulse 1.8s ease-out infinite; }
.dw-load { animation: dwLoad 4s ease-in-out infinite; }
.dw-idle { animation: dwIdle 5s ease-in-out infinite; }
.dw-sync { animation: dwSync 1.6s ease-in-out infinite; }
.dw-flow { background-image: repeating-linear-gradient(to bottom, #f26a21 0 5px, transparent 5px 10px); background-size: 2px 16px; animation: dwFlow .8s linear infinite; }
.dw-drop { animation: dwDrop 3s cubic-bezier(.4, 0, .6, 1) infinite; }
.dw-dr { animation: dwDr 3s linear infinite; }
/* lampeggia solo il pallino, non la scritta: a opacita' ridotta il testo scendeva sotto il 7:1 */
.dw-tick > :first-child { animation: dwTick 2s ease-in-out infinite; }

/* comparsa allo scorrimento: nd.js mette .nd-wait sugli elementi con un'animazione
   di ingresso che sono ancora fuori schermo e la toglie quando entrano nella finestra.
   Senza JS le animazioni partono al caricamento come prima. */
.nd-wait { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Precedente / successivo nelle pagine di dettaglio (portfolio, case history).
   I link li riempie nd.js ([data-item-nav]); finche' sono hidden il blocco non si vede.
   -------------------------------------------------------------------------- */
.item-nav { display: flex; gap: 20px; }
.item-nav:not(:has(.item-nav__link:not([hidden]))) { display: none; }
.item-nav__link[hidden], .item-nav__img[hidden] { display: none; }
.item-nav__link:not([hidden]) { animation: ndUp .6s var(--nd-ease) both; }

.item-nav__link {
    display: flex;
    flex: 0 1 calc(50% - 10px);
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid var(--nd-card-line);
    border-radius: 14px;
    background: var(--nd-card);
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, border-color .25s ease;
}

.item-nav__link--next { flex-direction: row-reverse; margin-left: auto; text-align: right; }
.item-nav__link:hover { translate: 0 -4px; border-color: rgba(242, 106, 33, 0.45); box-shadow: 0 16px 32px rgba(40, 30, 20, 0.12); }
.item-nav__link:focus-visible { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }

.item-nav__img { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 104px; height: 68px; padding: 8px; border-radius: 10px; background: var(--nd-light); }
.item-nav__img img { display: block; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.item-nav__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item-nav__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-accent-deep); }
.item-nav__title { font-family: var(--nd-font-display); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--nd-ink); }
.item-nav__link:hover .item-nav__title { color: var(--nd-accent-deep); }

@media (max-width: 700px) {
    .item-nav { flex-direction: column; gap: 12px; }
    .item-nav__link { flex-basis: auto; }
    .item-nav__img { width: 80px; height: 56px; }
}


/* --------------------------------------------------------------------------
   Hero con illustrazione a destra (pagine dei servizi): il testo sta in
   .hero-split__text e le sue righe entrano sfalsate come nell'hero normale.
   -------------------------------------------------------------------------- */
.hero--split > .container { flex-direction: row; align-items: center; gap: 56px; }
.hero--split > .container > .hero-split__text { display: flex; flex-direction: column; flex: 0 0 56%; gap: 20px; min-width: 0; animation: none; }
.hero-split__text > * { animation: ndUp .7s var(--nd-ease) both; }
.hero-split__text > :nth-child(2) { animation-delay: .1s; }
.hero-split__text > :nth-child(3) { animation-delay: .2s; }
.hero-split__text > :nth-child(4) { animation-delay: .3s; }
.hero-split__text > :nth-child(n+5) { animation-delay: .4s; }
.hero--split > .container > .hero-split__art { flex: 1 1 auto; min-width: 0; animation: ndZoom .9s var(--nd-ease) .35s both; }
.hero-split__art img { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; }

@media (max-width: 1100px) {
    .hero--split > .container { gap: 36px; }
}

@media (max-width: 900px) {
    .hero--split > .container { flex-direction: column; align-items: stretch; }
    .hero--split > .container > .hero-split__text { flex-basis: auto; }
    .hero-split__art { max-width: 460px; }
    .hero-split__art img { margin: 0; }
}


/* ==========================================================================
   p-home.css
   ========================================================================== */
/* Home: solo i componenti propri, il resto e' in nd.css.
   Anche le viste BlogPreview, TestimonianzePreview, RecensioniHomeAvatars e ProgettiPreview
   (usate solo qui) prendono gli stili da questo file.
   Larghezze sempre relative al .container (niente misure fisse del canvas). */

/* --------------------------------------------------------------------------
   Strutture ricorrenti della pagina
   -------------------------------------------------------------------------- */
.home-stack { display: flex; flex-direction: column; gap: 48px; }

/* titolo di fascia a sinistra, testo o bottone a destra */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.home-head__text { margin: 0; max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--nd-text); }
.home-head__text strong { color: var(--nd-ink); }
.section--band .home-head__text { color: var(--nd-on-dark); }
.section--band .home-head__text strong { color: #ffffff; }

/* testo + illustrazione affiancati */
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.home-split--media-first { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
.home-split__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.home-split__text .section-head { gap: 14px; }

.home-btn { align-self: flex-start; height: 52px; padding: 0 26px; font-size: 15px; }
.section--light .btn--outline.home-btn { color: var(--nd-accent-deep); font-weight: 700; }

/* contenuto HTML ricco dei campi pagina */
.home-rich p { margin: 0 0 12px; }
.home-rich p:last-child { margin-bottom: 0; }

/* stelle delle recensioni */
.home-stars { display: inline-flex; gap: 2px; }

/* --------------------------------------------------------------------------
   Illustrazioni: immagine statica, poi svg in linea animato (p-home.js)
   -------------------------------------------------------------------------- */
.home-illo { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; animation: ndZoom .9s var(--nd-ease) .25s both; }
.home-illo > img, .home-illo > svg { display: block; width: 100%; height: auto; }
.home-illo--hero { max-width: 460px; justify-self: end; }
.home-illo--solutions { max-width: 540px; }
.home-illo--steps { max-width: 560px; justify-self: end; }
.home-illo--ai { max-width: 560px; justify-self: end; }
.home-illo--cases { justify-self: end; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.home-hero { padding: 72px 0 64px; }
.home-hero__lines { height: 700px; }
.hero > .container.home-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px; }

.home-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.home-hero__text > * { animation: ndUp .7s var(--nd-ease) both; }
.home-hero__text > :nth-child(2) { animation-delay: .1s; }
.home-hero__text > :nth-child(3) { animation-delay: .2s; }
.home-hero__text > :nth-child(4) { animation-delay: .3s; }
.home-hero__text > :nth-child(5) { animation-delay: .4s; }

/* h1 con la parola chiave, nel ruolo dell'etichetta del canvas */
.home-hero__h1 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 560px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid rgba(242, 106, 33, 0.5);
    border-radius: 18px;
    background: rgba(242, 106, 33, 0.08);
    font-family: var(--nd-font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.home-hero__h1 svg { flex-shrink: 0; margin-top: 2px; }

/* claim con la parola che si scrive da sola (script typer dell'area Foot) */
.home-hero__title {
    margin: 0;
    font-family: var(--nd-font-display);
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #ffffff;
}
.home-hero__title .hero__highlight {
    display: inline-block;
    min-height: 1.12em;
    white-space: nowrap;
    vertical-align: bottom;
    background: var(--nd-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-hero__title .hero__cursor {
    display: inline-block;
    width: 3px;
    height: 0.9em;
    margin-left: 3px;
    vertical-align: -0.08em;
    background: var(--nd-grad);
    animation: homeCaret .9s steps(1) infinite;
}

.home-hero__lead { max-width: 580px; }

.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 6px; }
.home-hero__link { padding-bottom: 2px; border-bottom: 1px solid var(--nd-accent); color: #ffffff; font-size: 15px; font-weight: 600; transition: color .2s ease; }
.home-hero__link:hover { color: var(--nd-accent-hover); }

.home-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 10px; }
.home-proof__info { display: flex; flex-direction: column; gap: 4px; }
.home-proof__stats { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nd-on-dark); }
.home-proof__stats a { color: var(--nd-on-dark); }
.home-proof__stats a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

/* vista RecensioniHomeAvatars */
.home-avatars { display: flex; }
.home-avatars__img {
    width: 40px;
    height: 40px;
    margin-left: -12px;
    border: 2px solid var(--nd-bg);
    border-radius: 50%;
    /* finche' la foto non arriva (o se manca) si vede l'icona profilo grigia, tipo WhatsApp */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23dfe5e7'/%3E%3Ccircle cx='12' cy='9.2' r='4.3' fill='%23fff'/%3E%3Cpath d='M3.6 22c.9-4.6 4.2-7.3 8.4-7.3s7.5 2.7 8.4 7.3z' fill='%23fff'/%3E%3C/svg%3E") center / cover no-repeat;
    object-fit: cover;
}
.home-avatars__img:first-child { margin-left: 0; }

/* --------------------------------------------------------------------------
   Numeri
   -------------------------------------------------------------------------- */
.home-trust { padding: 36px 0; border-top: 1px solid var(--nd-line); }
.home-trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.home-trust__item { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; border-left: 1px solid var(--nd-line); }
.home-trust__item:first-child { border-left: 0; }
.home-trust__num { font-family: var(--nd-font-display); font-size: 40px; font-weight: 800; line-height: 1.1; color: #ffffff; }
.home-trust__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-on-dark-muted); }

/* --------------------------------------------------------------------------
   Criticita'
   -------------------------------------------------------------------------- */
.home-pains { padding: 96px 0 64px; }
.home-pains__diamond { left: -100px; top: 240px; width: 300px; height: 300px; border-radius: 60px; }
.home-pains__glow { right: -200px; top: -80px; width: 420px; height: 560px; }
.home-pains__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.home-pain { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.home-pain__icon { width: 48px; height: 48px; }
.home-pain__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--nd-text); }
.home-pain__text strong { color: var(--nd-ink); }

/* --------------------------------------------------------------------------
   Soluzioni
   -------------------------------------------------------------------------- */
.home-solutions { padding: 32px 0 96px; border-bottom: 1px solid var(--nd-light-line); }
.home-solutions__glow { right: -200px; top: 200px; width: 420px; height: 560px; background: rgba(242, 106, 33, 0.08); }

/* elenco con pallino arancio */
.home-dots { align-self: stretch; margin: 0; padding: 0; list-style: none; }
.home-dots__item { position: relative; padding: 14px 0 14px 22px; border-top: 1px solid var(--nd-light-line); font-size: 15px; line-height: 1.6; color: var(--nd-text); }
.home-dots__item::before { content: ""; position: absolute; top: 22px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--nd-grad); }
.home-dots__item strong { color: var(--nd-ink); }

/* --------------------------------------------------------------------------
   Tre passi
   -------------------------------------------------------------------------- */
.home-steps { padding: 96px 0; background: #fbfaf8; }
.home-steps .text strong { color: var(--nd-ink); }
.home-steps__list { display: flex; flex-direction: column; margin: 0; padding: 6px 0 0; list-style: none; }
.home-step { display: flex; gap: 20px; }
.home-step__num {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--nd-bg);
    color: #ffffff;
    font-family: var(--nd-font-display);
    font-size: 20px;
    font-weight: 800;
}
.home-step__num--first { background: var(--nd-grad); }
/* linea tratteggiata che collega i passi */
.home-step { position: relative; }
.home-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 52px;
    bottom: 0;
    left: 25px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--nd-accent) 0 8px, transparent 8px 14px);
}
.home-step__num { align-self: flex-start; }
.home-step__body { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 28px; }
.home-step__title { font-size: 21px; }
.home-step__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--nd-text-2); }
.home-step__text strong { color: var(--nd-ink); }

/* --------------------------------------------------------------------------
   Servizi
   -------------------------------------------------------------------------- */
.home-services { padding: 96px 0; border-top: 1px solid var(--nd-line); }
.home-services__glow { left: 50%; top: -200px; width: 800px; max-width: 100%; height: 400px; margin-left: -400px; }
.home-services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.home-service {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--nd-line-2);
    border-radius: 16px;
    background: var(--nd-bg-card);
}
.home-service .icon-tile { width: 48px; height: 48px; }
.home-service__title { color: #ffffff; }
.home-service__text { flex-grow: 1; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-on-dark); }
.home-service__text strong { color: #ffffff; font-weight: 600; }
.home-service__links { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--nd-line-2); }
.home-service__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; color: var(--nd-accent-hover); /* 8:1 sulla card scura */ }
.home-service__link svg { flex-shrink: 0; transition: translate .25s var(--nd-ease); }
.home-service__link:hover svg { translate: 4px 0; }

.home-cities { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--nd-on-dark-muted); }
.home-cities a { border-bottom: 1px solid var(--nd-accent); color: #ffffff; }
.home-cities a:hover { color: var(--nd-accent-hover); }

/* --------------------------------------------------------------------------
   Intelligenza artificiale
   -------------------------------------------------------------------------- */
.home-ai { padding: 96px 0; }
.home-ai__diamond { left: -100px; top: 500px; width: 300px; height: 300px; border-radius: 60px; }
.home-ai__glow-1 { right: -200px; top: -60px; width: 420px; height: 560px; }
.home-ai__glow-2 { right: -200px; top: 500px; width: 420px; height: 560px; background: rgba(242, 106, 33, 0.08); }

/* elenco numerato 01, 02... */
.home-nums { align-self: stretch; margin: 0; padding: 0; list-style: none; counter-reset: home-nums; }
.home-nums__item { position: relative; padding: 14px 0 14px 38px; border-top: 1px solid var(--nd-light-line); font-size: 15px; line-height: 1.6; color: var(--nd-text); counter-increment: home-nums; }
.home-nums__item::before {
    content: counter(home-nums, decimal-leading-zero);
    position: absolute;
    top: 16px;
    left: 0;
    font-family: var(--nd-font-display);
    font-size: 14px;
    font-weight: 800;
    background: var(--nd-grad-num);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-nums__item strong { color: var(--nd-ink); }
.home-nums__item a { color: var(--nd-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.home-nums__item a:hover { color: var(--nd-accent); }

/* --------------------------------------------------------------------------
   Perche' DOWEB: tabella di confronto
   -------------------------------------------------------------------------- */
.home-why { padding: 96px 0; background: #fbfaf8; border-top: 1px solid var(--nd-light-line); }
.home-why__title { max-width: 420px; }
.home-why__title .why-doweb__brand {
    background: var(--nd-grad-text-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-compare__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1.15fr; }
.home-compare__cell { padding: 22px 20px; border-top: 1px solid var(--nd-light-line); font-size: 14px; line-height: 1.5; color: var(--nd-text-2); }
.home-compare__row--head .home-compare__cell { padding: 18px 20px; border-top: 0; }
.home-compare__cell--col { font-family: var(--nd-font-display); font-size: 16px; font-weight: 600; color: var(--nd-ink); text-align: center; }
.home-compare__cell--feature { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--nd-ink); }
.home-compare__cell--brand { display: flex; gap: 10px; border-top-color: var(--nd-line); background: var(--nd-bg); font-weight: 600; color: #ffffff; }
.home-compare__cell--brand svg { flex-shrink: 0; margin-top: 2px; }
.home-compare__cell--logo { align-items: center; justify-content: center; border-radius: 14px 14px 0 0; }
.home-compare__cell--logo img { display: block; width: auto; height: 26px; }
.home-compare__row--last .home-compare__cell--brand { border-radius: 0 0 14px 14px; }

/* --------------------------------------------------------------------------
   Case history
   -------------------------------------------------------------------------- */
.home-cases { padding: 96px 0; border-top: 1px solid var(--nd-line); }
.home-cases__glow { right: -120px; top: 40px; width: 500px; height: 400px; background: rgba(242, 106, 33, 0.12); }
.home-cases__text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--nd-on-dark); }
.home-cases__list { display: flex; flex-direction: column; align-self: stretch; gap: 10px; margin: 0; padding: 0; list-style: none; }
.home-case {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--nd-line-2);
    border-radius: 12px;
    background: var(--nd-bg-card);
    transition: border-color .2s ease, background-color .2s ease;
}
.home-case:hover { border-color: rgba(242, 106, 33, 0.6); background: #1f2833; }
.home-case svg { flex-shrink: 0; transition: translate .25s var(--nd-ease); }
.home-case:hover svg { translate: 4px 0; }
.home-case__body { display: flex; flex-grow: 1; flex-direction: column; gap: 4px; }
.home-case__cat {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--nd-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-case__title { font-size: 16px; font-weight: 600; color: #ffffff; }

/* --------------------------------------------------------------------------
   Testimonianze (vista TestimonianzePreview)
   -------------------------------------------------------------------------- */
.home-testimonials { padding: 96px 0; }
.home-testimonials__diamond { left: -100px; top: 300px; width: 300px; height: 300px; border-radius: 60px; }
.home-testimonials__glow { right: -200px; top: -80px; width: 420px; height: 560px; }
.home-testimonials .home-btn { margin-top: -8px; }

.home-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; color: var(--nd-text); }
.home-rating strong { color: var(--nd-ink); }
.home-rating:hover { color: var(--nd-ink); }
.home-rating:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }

.home-quotes, .home-posts, .home-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* card con un link che copre tutta la superficie: sale al passaggio */
.home-quote, .home-post { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 14px; }
.home-quote:hover, .home-post:hover { translate: 0 -6px; border-color: rgba(242, 106, 33, 0.45); box-shadow: 0 20px 40px rgba(40, 30, 20, 0.14); }
.home-quote__link::after, .home-post__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.home-quote__link:focus-visible, .home-post__link:focus-visible { outline: none; }
.home-quote:has(:focus-visible), .home-post:has(:focus-visible) { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }

.home-quote__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1b222b; }
.home-quote__img, .home-post__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--nd-ease); }
.home-quote:hover .home-quote__img, .home-post:hover .home-post__img { transform: scale(1.05); }
.home-quote__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    padding-left: 3px;
    border-radius: 50%;
    background: var(--nd-grad);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    color: #ffffff;
    transition: scale .25s var(--nd-ease);
}
.home-quote:hover .home-quote__play { scale: 1.1; }
.home-quote__body { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.home-quote__company {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--nd-grad-text-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-quote__name { margin: 0; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; }
.home-quote__link { color: var(--nd-ink); }
.home-quote__link:hover { color: var(--nd-ink); }
.section:not(.hero) .home-quote__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-text); animation: none; }
.home-quote__text::before { content: "\201C"; }
.home-quote__text::after { content: "\201D"; }

/* --------------------------------------------------------------------------
   Strumento prestazioni
   -------------------------------------------------------------------------- */
.home-perf { padding: 80px 0; }
.home-perf__glow { right: 80px; top: 50%; width: 460px; height: 300px; margin-top: -150px; background: rgba(242, 106, 33, 0.16); filter: blur(100px); }
.home-perf__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 64px; }
.home-perf__head { display: flex; flex-direction: column; gap: 14px; }
.home-perf .h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; }
.home-perf__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.home-perf__label { font-size: 13px; font-weight: 600; color: var(--nd-on-dark); }
.home-perf__row { display: flex; gap: 10px; }
.home-perf__input {
    flex-grow: 1;
    min-width: 0;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--nd-line-3);
    border-radius: 999px;
    background: var(--nd-bg-input);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.home-perf__input:hover { border-color: #6b7684; }
.home-perf__input:focus { outline: none; border-color: var(--nd-accent); box-shadow: 0 0 0 4px rgba(242, 106, 33, 0.2); }
.home-perf__input[aria-invalid="true"] { border-color: #ffaa80; }
.home-perf__btn { flex-shrink: 0; font-size: 15px; }
.home-perf__hint { margin: 0; font-size: 12px; color: var(--nd-on-dark-muted); }
.home-perf__error { margin: 0; font-size: 14px; font-weight: 600; color: #ffaa80; }
.home-perf__error[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Blog (vista BlogPreview)
   -------------------------------------------------------------------------- */
.home-blog { padding: 96px 0; }
.home-blog__diamond { left: -100px; top: 260px; width: 300px; height: 300px; border-radius: 60px; }
.home-blog__glow { right: -200px; top: -80px; width: 420px; height: 560px; }
.home-blog .home-head .home-btn { align-self: flex-end; }

.home-post__img { height: auto; aspect-ratio: 760 / 400; }
.home-post__body { display: flex; flex-grow: 1; flex-direction: column; gap: 14px; padding: 20px 22px; }
.home-post__title { flex-grow: 1; margin: 0; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; line-height: 1.32; }
.home-post__link { color: var(--nd-ink); }
.home-post__link:hover { color: var(--nd-ink); }
.home-post__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid #f0ece6; font-size: 12.5px; color: var(--nd-text-2); }
.home-post__meta svg { flex-shrink: 0; transition: translate .25s var(--nd-ease); }
.home-post:hover .home-post__meta svg { translate: 4px 0; }

/* --------------------------------------------------------------------------
   Vista ProgettiPreview (card di un progetto del portfolio)
   -------------------------------------------------------------------------- */
.home-project { display: flex; flex-direction: column; gap: 14px; }
.home-project__logo { display: flex; align-items: center; height: 56px; }
.home-project__logo img { width: auto; max-height: 56px; }
.home-project__text { flex-grow: 1; }
.home-project__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.home-project__tags li { padding: 3px 10px; border: 1px solid rgba(226, 85, 26, 0.45); border-radius: 999px; background: var(--nd-tile); color: var(--nd-accent-deep); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.home-project__tags li:empty { display: none; }
.home-project__link { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid #f0ece6; font-size: 14px; font-weight: 700; color: var(--nd-accent-deep); overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Invito finale
   -------------------------------------------------------------------------- */
.cta-band .home-cta__eyebrow { align-self: center; }
.home-cta__phone { display: inline-flex; align-items: center; gap: 10px; color: #ffffff; font-size: 16px; font-weight: 600; }
.home-cta__phone:hover { color: var(--nd-accent-hover); }
.home-cta__notes { margin: 0; font-size: 13px; color: var(--nd-on-dark-muted); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .home-pains__grid, .home-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-split { gap: 40px; }
    .home-compare__cell { padding: 18px 14px; }
}

@media (max-width: 900px) {
    .home-hero { padding: 48px 0 56px; }
    .hero > .container.home-hero__inner,
    .home-split, .home-split--media-first,
    .home-perf__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .home-illo { justify-self: center; width: 100%; max-width: 440px; }
    .home-split--media-first .home-illo { order: 2; }
    .home-head { flex-direction: column; align-items: flex-start; }
    .home-blog .home-head .home-btn { align-self: flex-start; }
    .home-quotes, .home-posts, .home-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .home-trust__item:nth-child(3) { border-left: 0; }
    .home-pains, .home-ai, .home-steps, .home-services, .home-why, .home-cases, .home-testimonials, .home-blog { padding: 72px 0; }
    .home-solutions { padding: 16px 0 72px; }

    /* la tabella diventa una scheda per riga */
    .home-compare__row { display: flex; flex-direction: column; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--nd-card-line); border-radius: 14px; background: var(--nd-card); }
    .home-compare__cell { border-top: 1px solid var(--nd-light-line); }
    .home-compare__cell--feature { order: -2; border-top: 0; }
    .home-compare__cell--brand { order: -1; border-radius: 0; }
    .home-compare__row--last .home-compare__cell--brand { border-radius: 0; }
    .home-compare__row.home-compare__row--head { display: none; }
    .home-compare__cell[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-ink); }
}

@media (max-width: 600px) {
    .home-hero__title .hero__highlight { display: block; }
    .home-hero__title .hero__cursor, .home-hero__title br { display: none; }
    .home-hero__title .hero__highlight::after { content: ""; display: inline-block; width: 3px; height: 0.9em; margin-left: 3px; vertical-align: -0.08em; background: var(--nd-grad); animation: homeCaret .9s steps(1) infinite; }
    .home-hero__h1 { font-size: 12px; }
    .home-pains__grid, .home-services__grid, .home-quotes, .home-posts, .home-projects { grid-template-columns: minmax(0, 1fr); }
    .home-trust__item { padding: 0 16px; }
    .home-trust__num { font-size: 32px; }
    .home-pain, .home-service { padding: 24px 20px; }
    .home-perf__row { flex-direction: column; }
    .home-perf__btn { width: 100%; }
    .home-btn { align-self: stretch; }
    .home-blog .home-head .home-btn { align-self: stretch; }
    .home-step { gap: 16px; }
}

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

/* ==========================================================================
   Animazioni delle illustrazioni (dal canvas, css/index.css). Valgono sull'svg
   in linea che p-home.js inserisce al posto dell'immagine statica.
   ========================================================================== */
@keyframes fr-keylit{0%,72%,100%{fill:#BCBCBC;}80%,92%{fill:#f25c05;}}
@keyframes fr-lineshow{0%,15%,100%{opacity:0;}30%,80%{opacity:1;}}
@keyframes fr-docshow{0%,20%,100%{opacity:0;}35%,85%{opacity:1;}}
@keyframes fr-arrowflow{0%,100%{fill:#D3D3D3;}8%,18%{fill:#f25c05;}}
@keyframes hc-lightSpeedRight{ from { transform: translate3d(50%, 0, 0) skewX(-20deg); opacity: 0; } 60% { transform: skewX(10deg); opacity: 1; } 80% { transform: skewX(-2deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes hc-slideLeft{ 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes hc-fadeIn{ 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hc-codeBlink{0%,100%{opacity:1}45%,55%{opacity:.25}}
@keyframes hc-keyPress{0%,74%,100%{fill:rgb(38,50,56)}79%,95%{fill:#f25c05}}
@keyframes si-slideUp{ 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: inherit; } }
@keyframes si-fadeIn{ 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes si-lightSpeedRight{ from { transform: translate3d(50%, 0, 0) skewX(-20deg); opacity: 0; } 60% { transform: skewX(10deg); opacity: 1; } 80% { transform: skewX(-2deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes si-slideDown{ 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes si-zoomIn{ 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes si-slideRight{ 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes si-slideLeft{ 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes si-lightSpeedLeft{ from { transform: translate3d(-50%, 0, 0) skewX(20deg); opacity: 0; } 60% { transform: skewX(-10deg); opacity: 1; } 80% { transform: skewX(2deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes vc-lightSpeedLeft{ from { transform: translate3d(-50%, 0, 0) skewX(20deg); opacity: 0; } 60% { transform: skewX(-10deg); opacity: 1; } 80% { transform: skewX(2deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes vc-zoomIn{ 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes vc-slideLeft{ 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes vc-zoomOut{ 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lc-lightSpeedRight{ from { transform: translate3d(50%, 0, 0) skewX(-20deg); opacity: 0; } 60% { transform: skewX(10deg); opacity: 1; } 80% { transform: skewX(-2deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes lc-slideRight{ 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes lc-lightSpeedLeft{ from { transform: translate3d(-50%, 0, 0) skewX(20deg); opacity: 0; } 60% { transform: skewX(-10deg); opacity: 1; } 80% { transform: skewX(2deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes lc-slideLeft{ 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes lc-slideUp{ 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: inherit; } }
@keyframes lc-slideDown{ 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } }
#k01{animation:fr-keylit 3.3s -0.5s infinite;}
#k02{animation:fr-keylit 4.7s -1.2s infinite;}
#k03{animation:fr-keylit 6.1s -0.3s infinite;}
#k04{animation:fr-keylit 3.3s -2.1s infinite;}
#k05{animation:fr-keylit 4.7s -3.5s infinite;}
#k06{animation:fr-keylit 6.1s -1.8s infinite;}
#k07{animation:fr-keylit 3.3s -0.9s infinite;}
#k08{animation:fr-keylit 4.7s -2.3s infinite;}
#k09{animation:fr-keylit 6.1s -4.5s infinite;}
#k10{animation:fr-keylit 3.3s -1.6s infinite;}
#k11{animation:fr-keylit 4.7s -0.6s infinite;}
#k12{animation:fr-keylit 6.1s -2.7s infinite;}
#k13{animation:fr-keylit 3.3s -2.8s infinite;}
#k14{animation:fr-keylit 4.7s -1.0s infinite;}
#k15{animation:fr-keylit 6.1s -3.9s infinite;}
#k16{animation:fr-keylit 3.3s -0.2s infinite;}
#k17{animation:fr-keylit 4.7s -4.1s infinite;}
#k18{animation:fr-keylit 6.1s -0.8s infinite;}
#k19{animation:fr-keylit 3.3s -1.4s infinite;}
#k20{animation:fr-keylit 4.7s -2.8s infinite;}
#dl01{animation:fr-lineshow 5.2s -1.1s infinite;}
#dl02{animation:fr-lineshow 7.4s -3.2s infinite;}
#dl03{animation:fr-lineshow 4.8s -0.7s infinite;}
#dl04{animation:fr-lineshow 6.3s -2.5s infinite;}
#dl05{animation:fr-lineshow 8.1s -4.0s infinite;}
#dl06{animation:fr-lineshow 5.7s -1.8s infinite;}
#pd01{animation:fr-docshow 6.1s -0.8s infinite;}
#pd02{animation:fr-docshow 4.9s -2.3s infinite;}
#pd03{animation:fr-docshow 7.3s -1.5s infinite;}
#pd04{animation:fr-docshow 5.5s -3.7s infinite;}
#pd05{animation:fr-docshow 6.7s -0.4s infinite;}
#pd06{animation:fr-docshow 4.5s -1.9s infinite;}
#pd07{animation:fr-docshow 8.1s -4.2s infinite;}
#pd08{animation:fr-docshow 5.9s -2.8s infinite;}
#fa1_01{animation:fr-arrowflow 4.0s -0.0s infinite;}
#fa1_02{animation:fr-arrowflow 4.0s -0.17s infinite;}
#fa1_03{animation:fr-arrowflow 4.0s -0.35s infinite;}
#fa1_04{animation:fr-arrowflow 4.0s -0.52s infinite;}
#fa1_05{animation:fr-arrowflow 4.0s -0.7s infinite;}
#fa1_06{animation:fr-arrowflow 4.0s -0.87s infinite;}
#fa1_07{animation:fr-arrowflow 4.0s -1.04s infinite;}
#fa1_08{animation:fr-arrowflow 4.0s -1.22s infinite;}
#fa1_09{animation:fr-arrowflow 4.0s -1.39s infinite;}
#fa1_10{animation:fr-arrowflow 4.0s -1.57s infinite;}
#fa1_11{animation:fr-arrowflow 4.0s -1.74s infinite;}
#fa1_12{animation:fr-arrowflow 4.0s -1.91s infinite;}
#fa1_13{animation:fr-arrowflow 4.0s -2.09s infinite;}
#fa1_14{animation:fr-arrowflow 4.0s -2.26s infinite;}
#fa1_15{animation:fr-arrowflow 4.0s -2.43s infinite;}
#fa1_16{animation:fr-arrowflow 4.0s -2.61s infinite;}
#fa1_17{animation:fr-arrowflow 4.0s -2.78s infinite;}
#fa1_18{animation:fr-arrowflow 4.0s -2.96s infinite;}
#fa1_19{animation:fr-arrowflow 4.0s -3.13s infinite;}
#fa1_20{animation:fr-arrowflow 4.0s -3.3s infinite;}
#fa1_21{animation:fr-arrowflow 4.0s -3.48s infinite;}
#fa1_22{animation:fr-arrowflow 4.0s -3.65s infinite;}
#fa1_23{animation:fr-arrowflow 4.0s -3.83s infinite;}
#fa2_01{animation:fr-arrowflow 4.0s -0.0s infinite;}
#fa2_02{animation:fr-arrowflow 4.0s -0.17s infinite;}
#fa2_03{animation:fr-arrowflow 4.0s -0.35s infinite;}
#fa2_04{animation:fr-arrowflow 4.0s -0.52s infinite;}
#fa2_05{animation:fr-arrowflow 4.0s -0.7s infinite;}
#fa2_06{animation:fr-arrowflow 4.0s -0.87s infinite;}
#fa2_07{animation:fr-arrowflow 4.0s -1.04s infinite;}
#fa2_08{animation:fr-arrowflow 4.0s -1.22s infinite;}
#fa2_09{animation:fr-arrowflow 4.0s -1.39s infinite;}
#fa2_10{animation:fr-arrowflow 4.0s -1.57s infinite;}
#fa2_11{animation:fr-arrowflow 4.0s -1.74s infinite;}
#fa2_12{animation:fr-arrowflow 4.0s -1.91s infinite;}
#fa2_13{animation:fr-arrowflow 4.0s -2.09s infinite;}
#fa2_14{animation:fr-arrowflow 4.0s -2.26s infinite;}
#fa2_15{animation:fr-arrowflow 4.0s -2.43s infinite;}
#fa2_16{animation:fr-arrowflow 4.0s -2.61s infinite;}
#fa2_17{animation:fr-arrowflow 4.0s -2.78s infinite;}
#fa2_18{animation:fr-arrowflow 4.0s -2.96s infinite;}
#fa2_19{animation:fr-arrowflow 4.0s -3.13s infinite;}
#fa2_20{animation:fr-arrowflow 4.0s -3.3s infinite;}
#fa2_21{animation:fr-arrowflow 4.0s -3.48s infinite;}
#fa2_22{animation:fr-arrowflow 4.0s -3.65s infinite;}
#fa2_23{animation:fr-arrowflow 4.0s -3.83s infinite;}
#fa3_01{animation:fr-arrowflow 4.0s -0.0s infinite;}
#fa3_02{animation:fr-arrowflow 4.0s -0.16s infinite;}
#fa3_03{animation:fr-arrowflow 4.0s -0.32s infinite;}
#fa3_04{animation:fr-arrowflow 4.0s -0.48s infinite;}
#fa3_05{animation:fr-arrowflow 4.0s -0.64s infinite;}
#fa3_06{animation:fr-arrowflow 4.0s -0.8s infinite;}
#fa3_07{animation:fr-arrowflow 4.0s -0.96s infinite;}
#fa3_08{animation:fr-arrowflow 4.0s -1.12s infinite;}
#fa3_09{animation:fr-arrowflow 4.0s -1.28s infinite;}
#fa3_10{animation:fr-arrowflow 4.0s -1.44s infinite;}
#fa3_11{animation:fr-arrowflow 4.0s -1.6s infinite;}
#fa3_12{animation:fr-arrowflow 4.0s -1.76s infinite;}
#fa3_13{animation:fr-arrowflow 4.0s -1.92s infinite;}
#fa3_14{animation:fr-arrowflow 4.0s -2.08s infinite;}
#fa3_15{animation:fr-arrowflow 4.0s -2.24s infinite;}
#fa3_16{animation:fr-arrowflow 4.0s -2.4s infinite;}
#fa3_17{animation:fr-arrowflow 4.0s -2.56s infinite;}
#fa3_18{animation:fr-arrowflow 4.0s -2.72s infinite;}
#fa3_19{animation:fr-arrowflow 4.0s -2.88s infinite;}
#fa3_20{animation:fr-arrowflow 4.0s -3.04s infinite;}
#fa3_21{animation:fr-arrowflow 4.0s -3.2s infinite;}
#fa3_22{animation:fr-arrowflow 4.0s -3.36s infinite;}
#fa3_23{animation:fr-arrowflow 4.0s -3.52s infinite;}
#fa3_24{animation:fr-arrowflow 4.0s -3.68s infinite;}
#fa3_25{animation:fr-arrowflow 4.0s -3.84s infinite;}
svg#freepik_stories-hand-coding:not(.animated) .animable{opacity: 0;}
svg#freepik_stories-hand-coding.animated #freepik--background-complete--inject-134{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) hc-lightSpeedRight;animation-delay: 0s;}
svg#freepik_stories-hand-coding.animated #freepik--Table--inject-134{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) hc-slideLeft;animation-delay: 0s;}
svg#freepik_stories-hand-coding.animated #freepik--Files--inject-134{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) hc-slideLeft;animation-delay: 0s;}
svg#freepik_stories-hand-coding.animated #freepik--Tabs--inject-134{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) hc-slideLeft;animation-delay: 0s;}
svg#freepik_stories-hand-coding.animated #freepik--Drink--inject-134{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) hc-fadeIn;animation-delay: 0s;}
svg#freepik_stories-hand-coding.animated #freepik--Device--inject-134{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) hc-fadeIn;animation-delay: 0s;}
svg#freepik_stories-hand-coding.animated #freepik--Character--inject-134{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) hc-slideLeft;animation-delay: 0s;}
#eltbch31k6sjq{animation:hc-codeBlink 2.8s ease-in-out infinite 1.5s}
#elzvj9bprn8t{animation:hc-codeBlink 2.8s ease-in-out infinite 1.8s}
#elymi8b5nzxbp{animation:hc-codeBlink 2.8s ease-in-out infinite 2.1s}
#elco3svxyhiv6{animation:hc-codeBlink 2.8s ease-in-out infinite 2.4s}
#elqdu8bo2c2fe{animation:hc-codeBlink 2.8s ease-in-out infinite 2.7s}
#el9389j1hoozn{animation:hc-codeBlink 2.8s ease-in-out infinite 3.0s}
#elxxhqmryrawo{animation:hc-codeBlink 2.8s ease-in-out infinite 3.3s}
#elcyvcmj8u53p{animation:hc-codeBlink 2.8s ease-in-out infinite 3.6s}
#elt4kwwb8uoo{animation:hc-codeBlink 2.8s ease-in-out infinite 3.9s}
#elkz6nxjmgcn{animation:hc-codeBlink 2.8s ease-in-out infinite 1.6s}
#eldj2lmswhqnu{animation:hc-codeBlink 2.8s ease-in-out infinite 1.9s}
#eltsh8t2jlj1n{animation:hc-codeBlink 2.8s ease-in-out infinite 2.2s}
#elnp6f0kat488{animation:hc-codeBlink 2.8s ease-in-out infinite 2.5s}
#elw6mdi9uv23{animation:hc-codeBlink 2.8s ease-in-out infinite 2.8s}
#elylx3uaiggsb{animation:hc-codeBlink 2.8s ease-in-out infinite 3.1s}
#eliyjanhg16ei{animation:hc-codeBlink 2.8s ease-in-out infinite 3.4s}
#elpoy6kg6et4{animation:hc-codeBlink 3.2s ease-in-out infinite 1.7s}
#elvcqkmbn9c2m{animation:hc-codeBlink 3.2s ease-in-out infinite 2.1s}
#elik3gcx8ym1{animation:hc-codeBlink 3.2s ease-in-out infinite 2.5s}
#eljt00sog5mjo{animation:hc-codeBlink 3.2s ease-in-out infinite 2.9s}
#el1fun70vxgqr{animation:hc-codeBlink 3.2s ease-in-out infinite 3.3s}
#elhxukvq70xji{animation:hc-codeBlink 3.2s ease-in-out infinite 3.7s}
#elgxu01fv1sab{animation:hc-codeBlink 3.2s ease-in-out infinite 4.1s}
#eldgrobtwuqz{animation:hc-codeBlink 3.2s ease-in-out infinite 4.5s}
#el8cmm5hchkgj{animation:hc-codeBlink 3.2s ease-in-out infinite 4.9s}
#eldxgy6es2x0d{animation:hc-keyPress 1.6s ease-in-out infinite 1.2s}
#elej15r9tttqi{animation:hc-keyPress 1.6s ease-in-out infinite 1.4s}
#elwa23tv98s9{animation:hc-keyPress 1.6s ease-in-out infinite 1.6s}
#ellae38s2zye{animation:hc-keyPress 1.6s ease-in-out infinite 1.8s}
#elykwi0jqdr9{animation:hc-keyPress 1.6s ease-in-out infinite 2.0s}
#el8ix7b6k99l5{animation:hc-keyPress 1.6s ease-in-out infinite 2.2s}
#elshzoh6k12w{animation:hc-codeBlink 2s ease-in-out infinite 2.0s}
#el2q5e45ehy9{animation:hc-codeBlink 2s ease-in-out infinite 2.2s}
#elyp4bpm1y908{animation:hc-codeBlink 2s ease-in-out infinite 2.4s}
#elq6vo3x7i2rc{animation:hc-codeBlink 2s ease-in-out infinite 2.6s}
#elh3ehzr4mhl6{animation:hc-codeBlink 2s ease-in-out infinite 2.8s}
#elei1573rdjs5{animation:hc-codeBlink 2s ease-in-out infinite 3.0s}
#elwdkmy1rpz2m{animation:hc-codeBlink 2s ease-in-out infinite 3.2s}
#el0vhqqmgec3rf{animation:hc-codeBlink 2s ease-in-out infinite 3.4s}
#el87wharztc6d{animation:hc-codeBlink 2s ease-in-out infinite 3.6s}
#el3b57e30woei{animation:hc-codeBlink 2s ease-in-out infinite 3.8s}
#elazvi518kfwb{animation:hc-codeBlink 2s ease-in-out infinite 4.0s}
#el06tm8q5m55z2{animation:hc-codeBlink 2s ease-in-out infinite 4.2s}
#eleji4g8mdah{animation:hc-codeBlink 2s ease-in-out infinite 4.4s}
#eljziwnp69o0a{animation:hc-codeBlink 2s ease-in-out infinite 2.1s}
#elycfkglje8z{animation:hc-codeBlink 2s ease-in-out infinite 2.4s}
#elw8awkldswjd{animation:hc-codeBlink 2s ease-in-out infinite 2.7s}
#ellcwsn76ti1c{animation:hc-codeBlink 2s ease-in-out infinite 3.0s}
#elq235se35cac{animation:hc-codeBlink 2s ease-in-out infinite 3.3s}
#el8ffsymwo0y7{animation:hc-codeBlink 2s ease-in-out infinite 3.6s}
#elqfjmy1rfucq{animation:hc-codeBlink 2s ease-in-out infinite 3.9s}
#el380ub94lcpf{animation:hc-codeBlink 2s ease-in-out infinite 2.5s}
#elwkinrezgf3{animation:hc-codeBlink 2s ease-in-out infinite 2.8s}
#elwbh5i3igevl{animation:hc-codeBlink 2s ease-in-out infinite 3.1s}
svg#freepik_stories-software-integration:not(.animated) .animable{opacity: 0;}
svg#freepik_stories-software-integration.animated #freepik--background-complete--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-slideUp;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--Icons--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-fadeIn;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--Window--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-fadeIn;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--Chart--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-slideUp;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--Search--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-lightSpeedRight;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--Cloud--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-slideUp;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--Globe--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-slideDown;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--social-media-icon--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-zoomIn;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--Device--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-zoomIn;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--Text--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-slideRight;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--Character--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-slideLeft;animation-delay: 0s;}
svg#freepik_stories-software-integration.animated #freepik--Table--inject-66{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) si-lightSpeedLeft;animation-delay: 0s;}
.animator-hidden{ display: none; }
svg#freepik_stories-version-control:not(.animated) .animable{opacity: 0;}
svg#freepik_stories-version-control.animated #freepik--background-complete--inject-148{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) vc-lightSpeedLeft;animation-delay: 0s;}
svg#freepik_stories-version-control.animated #freepik--Floor--inject-148{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) vc-zoomIn;animation-delay: 0s;}
svg#freepik_stories-version-control.animated #freepik--Plant--inject-148{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) vc-slideLeft;animation-delay: 0s;}
svg#freepik_stories-version-control.animated #freepik--Screens--inject-148{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) vc-zoomOut;animation-delay: 0s;}
svg#freepik_stories-version-control.animated #freepik--Character--inject-148{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) vc-zoomOut;animation-delay: 0s;}
svg#freepik_stories-version-control.animated #freepik--speech-bubble--inject-148{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) vc-slideLeft;animation-delay: 0s;}
svg#freepik_stories-low-code-development:not(.animated) .animable{opacity: 0;}
svg#freepik_stories-low-code-development.animated #freepik--background-complete--inject-151{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lc-lightSpeedRight;animation-delay: 0s;}
svg#freepik_stories-low-code-development.animated #freepik--Floor--inject-151{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lc-slideRight;animation-delay: 0s;}
svg#freepik_stories-low-code-development.animated #freepik--Plant--inject-151{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lc-lightSpeedLeft;animation-delay: 0s;}
svg#freepik_stories-low-code-development.animated #freepik--character-2--inject-151{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lc-slideLeft;animation-delay: 0s;}
svg#freepik_stories-low-code-development.animated #freepik--Code--inject-151{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lc-lightSpeedLeft;animation-delay: 0s;}
svg#freepik_stories-low-code-development.animated #freepik--Text--inject-151{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lc-slideLeft;animation-delay: 0s;}
svg#freepik_stories-low-code-development.animated #freepik--Tools--inject-151{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lc-slideUp;animation-delay: 0s;}
svg#freepik_stories-low-code-development.animated #freepik--Colors--inject-151{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lc-slideDown;animation-delay: 0s;}
svg#freepik_stories-low-code-development.animated #freepik--character-1--inject-151{animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lc-slideDown;animation-delay: 0s;}

/* tra 601 e 900px le anteprime stanno su due colonne: la terza resterebbe sola, la togliamo */
@media (min-width: 601px) and (max-width: 900px) {
    .home-quotes > :nth-child(3), .home-posts > :nth-child(3), .home-projects > :nth-child(3) { display: none; }
}

/* --------------------------------------------------------------------------
   Da 650 a 900px: l'illustrazione dell'hero resta a sinistra e i numeri le si
   affiancano a destra, invece di lasciare l'illustrazione sola al centro con
   due fasce vuote ai lati. La fascia dei numeri risale accanto all'illustrazione
   (margine negativo pari all'altezza dell'immagine, 512/472 della larghezza).
   -------------------------------------------------------------------------- */
@media (min-width: 650px) and (max-width: 900px) {
    .home-illo--hero { justify-self: start; width: calc(50% - 12px); max-width: none; }

    .home-trust {
        --illo-h: calc((100vw - 2 * var(--container-padding) - 24px) / 2 * 512 / 472);
        margin-top: calc(-1 * (var(--illo-h) + 56px));
        padding: 0 0 56px;
        border-top: 0;
        background: transparent;
    }
    .home-trust__list {
        height: var(--illo-h);
        margin-left: calc(50% + 12px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: center;
        row-gap: 32px;
    }
    .home-trust__item { padding: 0 16px; }
    .home-trust__num { font-size: 32px; }
}

/* linee arancio decorative dell'hero: sotto i 1700px finivano sopra testo e illustrazione */
@media (max-width: 1700px) {
    .home-hero__lines { display: none; }
}

/* ==========================================================================
   p-tecnologia.css
   ========================================================================== */
/* Pagina Tecnologia: solo i componenti propri, il resto e' in nd.css */

.tec-hero__lines { height: 369px; }

.tec-body { padding: 88px 0 96px; }
.tec-body__inner { display: flex; flex-direction: column; gap: 112px; }

.tec-body__diamond-1 { left: -110px; top: 520px; width: 300px; height: 300px; border-radius: 60px; }
.tec-body__diamond-2 { left: -60px; top: 1050px; width: 220px; height: 220px; border-color: rgba(242, 106, 33, 0.2); border-radius: 44px; }
.tec-body__glow-1 { right: -200px; top: -80px; width: 420px; height: 600px; }
.tec-body__glow-2 { right: -160px; top: 500px; width: 360px; height: 500px; background: rgba(242, 106, 33, 0.08); }
.tec-body__glow-3 { right: -200px; top: 1000px; width: 420px; height: 500px; }

/* testo a sinistra, pannello a destra */
.tec-split { display: flex; align-items: stretch; gap: 64px; }
.tec-split__text { display: flex; flex-direction: column; flex-shrink: 0; gap: 18px; width: 560px; max-width: 100%; }

.tec-benefits { display: flex; flex-direction: column; gap: 36px; }

/* pannello scuro con i due server e i backup */
.tec-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 14px;
    padding: 30px;
    border-radius: 18px;
    background: var(--nd-bg);
    box-shadow: 0 24px 60px rgba(17, 22, 29, 0.25);
    animation: ndZoom .9s var(--nd-ease) .25s both;
}

.tec-panel__head { display: flex; align-items: center; justify-content: space-between; }
.tec-panel__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nd-on-dark-muted); }
.tec-panel__online { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--nd-ok-text); }

.tec-dot { display: block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #6d7886; }
.tec-dot--lg { width: 8px; height: 8px; }
.tec-dot--ok { background: var(--nd-ok); }

.tec-panel__servers { display: flex; align-items: stretch; gap: 12px; }

.tec-server {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--nd-line-2);
    border-radius: 12px;
    background: var(--nd-bg-card);
}

.tec-server--active { border-color: var(--nd-accent); }
.tec-server__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tec-server__name { font-size: 14px; font-weight: 700; color: #ffffff; }
.tec-server__state { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--nd-on-dark-muted); }
.tec-server__state--ok { color: var(--nd-ok-text); }
.tec-server__note { font-size: 12px; color: var(--nd-on-dark-muted); }

.tec-bar { display: block; height: 6px; border-radius: 3px; background: var(--nd-line-2); }
.tec-bar__fill { display: block; height: 6px; border-radius: 3px; background: var(--nd-grad); }
.tec-bar__fill--load { width: 62%; }
.tec-bar__fill--idle { width: 8%; }

.tec-panel__sync { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--nd-accent-hover); }

.tec-panel__flow { display: flex; flex-grow: 1; align-items: stretch; justify-content: center; gap: 14px; min-height: 90px; padding: 6px 0; }
.tec-flow { position: relative; width: 2px; }
.tec-flow__line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; opacity: 0.55; }
.tec-flow__drop { position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--nd-grad); box-shadow: 0 0 12px rgba(242, 106, 33, 0.8); }
.tec-panel__flow-label { align-self: center; font-size: 12px; font-weight: 600; color: var(--nd-on-dark-muted); }

.tec-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.tec-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 4px;
    border: 1px solid var(--nd-line-2);
    border-radius: 10px;
    background: var(--nd-bg-card);
    font-size: 12px;
    font-weight: 700;
    color: var(--nd-on-dark-soft);
}

.tec-day:nth-child(2) { animation-delay: .25s; }
.tec-day:nth-child(3) { animation-delay: .50s; }
.tec-day:nth-child(4) { animation-delay: .75s; }
.tec-day:nth-child(5) { animation-delay: 1s; }
.tec-day:nth-child(6) { animation-delay: 1.25s; }
.tec-day:nth-child(7) { animation-delay: 1.5s; }

.tec-panel__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding: 14px 16px;
    border: 1px dashed #3a4654;
    border-radius: 12px;
    font-size: 13px;
    color: var(--nd-on-dark-soft);
}

.tec-panel__total-num { font-family: var(--nd-font-display); font-size: 18px; font-weight: 700; color: #ffffff; }
.tec-panel__total-num span { font-size: 12px; font-weight: 600; color: var(--nd-on-dark-muted); }

@media (max-width: 1100px) {
    .tec-split__text { width: 480px; }
    .tec-split { gap: 40px; }
}

@media (max-width: 900px) {
    .tec-body { padding: 64px 0 72px; }
    .tec-body__inner { gap: 72px; }
    .tec-split { flex-direction: column; }
    .tec-split__text { width: auto; }
}

@media (max-width: 600px) {
    .tec-panel { padding: 20px 16px; }
    .tec-panel__servers { flex-direction: column; }
    .tec-panel__sync { flex-direction: row; }
    .tec-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tec-panel__total { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   p-servizi.css
   ========================================================================== */
/* Pagina Servizi: solo i componenti propri, il resto e' in nd.css */

/* --------------------------------------------------------------------------
   Hero: testo a sinistra, illustrazione della piattaforma a destra
   -------------------------------------------------------------------------- */
.svc-hero__lines { height: 369px; }

.svc-hero > .container { flex-direction: row; align-items: center; gap: 56px; }
.svc-hero__text { display: flex; flex-direction: column; flex-shrink: 0; gap: 20px; width: 50%; }
.svc-hero__text .btn-row { padding-top: 8px; }
.svc-hero__art { flex-grow: 1; min-width: 0; }
.svc-hero__img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

/* il blocco testo entra per righe, come l'hero delle altre pagine */
.svc-hero > .container > .svc-hero__text { animation: none; }
.svc-hero__text > * { animation: ndUp .7s var(--nd-ease) both; }
.svc-hero__text > :nth-child(2) { animation-delay: .1s; }
.svc-hero__text > :nth-child(3) { animation-delay: .2s; }
.svc-hero__text > :nth-child(4) { animation-delay: .3s; }
.svc-hero__text > :nth-child(5) { animation-delay: .4s; }
.svc-hero > .container > .svc-hero__art { animation: ndZoom .9s var(--nd-ease) .35s both; }

/* --------------------------------------------------------------------------
   Numeri sotto l'hero
   -------------------------------------------------------------------------- */
.svc-stats { padding: 36px 0; }
.svc-stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.svc-stats__item { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; border-left: 1px solid var(--nd-line); }
.svc-stats__item:first-child { border-left: 0; }
.svc-stats__num { font-family: var(--nd-font-display); font-size: 40px; font-weight: 800; line-height: 1.1; color: #ffffff; }
.svc-stats__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-on-dark-muted); }

/* --------------------------------------------------------------------------
   Servizi principali: righe testo + illustrazione, alternate
   -------------------------------------------------------------------------- */
.svc-main { padding: 96px 0; }
.svc-main__inner { display: flex; flex-direction: column; gap: 48px; }
.svc-main__diamond { left: -110px; top: 260px; width: 300px; height: 300px; border-radius: 60px; }
.svc-main__glow { right: -200px; top: -80px; width: 420px; height: 560px; }

.svc-list { display: flex; flex-direction: column; }

.svc-row { display: flex; align-items: center; gap: 64px; padding: 56px 0; border-top: 1px solid var(--nd-light-line); }
.svc-row:last-child { padding-bottom: 0; }
.svc-row--reverse .svc-art { order: -1; }

.svc-row__text { display: flex; flex-direction: column; flex-shrink: 0; gap: 16px; width: 46%; }
.svc-row__label { display: flex; align-items: center; gap: 14px; }
.svc-row__icon { width: 48px; height: 48px; }
.svc-row__label .eyebrow { align-self: center; }
.svc-row__title { margin: 0; font-family: var(--nd-font-display); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: var(--nd-ink); }
.svc-row__btn { align-self: flex-start; height: 52px; padding: 0 26px; font-size: 15px; }

.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.svc-tag {
    padding: 4px 10px;
    border: 1px solid rgba(226, 85, 26, 0.45);
    border-radius: 999px;
    background: var(--nd-tile);
    color: var(--nd-accent-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* illustrazioni Storyset (Magnific, licenza premium), PNG ricolorate con l'arancione del sito e
   con lo sfondo trasparente: stanno direttamente sulla sezione chiara, senza riquadro */
.svc-art { display: block; flex-grow: 1; min-width: 0; }
/* l'illustrazione porta alla pagina del servizio come il bottone accanto: e' un doppione del
   bottone, quindi fuori dal tab e nascosta ai lettori di schermo */
a.svc-art .svc-art__img { transition: translate .35s var(--nd-ease); }
a.svc-art:hover .svc-art__img { translate: 0 -8px; }
.section:not(.hero) .svc-art { animation-name: ndZoom; animation-duration: .9s; }
.svc-art__img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Servizi complementari
   -------------------------------------------------------------------------- */
.svc-extra { padding: 96px 0; border-top: 1px solid var(--nd-light-line); background: #fbfaf8; }
.svc-extra__inner { display: flex; flex-direction: column; gap: 48px; }
.svc-extra__head { max-width: 760px; }
.svc-extra__diamond { left: -110px; top: 260px; width: 300px; height: 300px; border-radius: 60px; }
.svc-extra__glow { right: -200px; top: -80px; width: 420px; height: 560px; }

.svc-extra__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc-extra__card { display: flex; flex-direction: column; gap: 16px; padding: 30px; }
.svc-extra__icon { width: 48px; height: 48px; }
.svc-extra__text { flex-grow: 1; font-size: 14.5px; line-height: 1.6; }
.svc-extra__meta { padding-top: 14px; border-top: 1px solid var(--nd-card-line); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-text-2); }

.svc-note {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 26px 30px;
    border: 1px solid rgba(226, 85, 26, 0.3);
    border-radius: 16px;
    background: var(--nd-tile);
}

.svc-note__icon { flex-shrink: 0; margin-top: 1px; }
.svc-note__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--nd-text); }
.svc-note__text strong { color: var(--nd-ink); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .svc-hero > .container { gap: 40px; }
    .svc-row { gap: 40px; }
    .svc-row__text { width: 48%; }
}

@media (max-width: 900px) {
    .svc-hero > .container { flex-direction: column; align-items: stretch; }
    .svc-hero__text { width: auto; }
    .svc-hero__art { max-width: 480px; }

    .svc-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .svc-stats__item:nth-child(3) { border-left: 0; }

    .svc-main, .svc-extra { padding: 64px 0 72px; }
    .svc-row { flex-direction: column; align-items: stretch; gap: 32px; padding: 44px 0; }
    .svc-row--reverse .svc-art { order: 0; }
    .svc-row__text { width: auto; }

    .svc-extra__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .svc-stats { padding: 28px 0; }
    .svc-stats__item { padding: 0 16px; }
    .svc-stats__item:nth-child(odd) { padding-left: 0; }
    .svc-stats__num { font-size: 32px; }
    .svc-row__btn { align-self: stretch; }
    .svc-extra__card { padding: 24px 20px; }
    .svc-note { flex-direction: column; gap: 12px; padding: 22px 20px; }
}




/* ==========================================================================
   p-siti-web.css
   ========================================================================== */
/* Pagina Siti web: solo i componenti propri, il resto e' in nd.css.
   Deroga a DESIGN-RULES voce 21: gli elenchi dello stack e del GDPR usano un trattino arancio
   al posto della spunta del canvas. */

/* colonna verticale comune alle fasce: titolo sopra, contenuto sotto */
.sw-stack-col { display: flex; flex-direction: column; gap: 48px; }

.sw-inline-link { font-weight: 600; color: var(--nd-accent-deep); text-decoration: underline; text-decoration-color: rgba(201, 74, 20, 0.35); text-underline-offset: 3px; }
.sw-inline-link:hover { color: var(--nd-accent); text-decoration-color: currentColor; }

.sw-tile { width: 48px; height: 48px; }
.sw-btn { align-self: flex-start; height: 52px; padding: 0 26px; font-size: 15px; }
.section--light .btn--outline.sw-btn { color: var(--nd-accent-deep); font-weight: 700; }

.sw-arrow-link { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--nd-accent-deep); }
.sw-arrow-link svg { transition: translate .2s var(--nd-ease); }
.sw-arrow-link:hover svg { translate: 4px 0; }
.sw-arrow-link--dark { align-self: flex-start; color: var(--nd-accent-on-dark); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.sw-hero__lines { height: 369px; }
.sw-hero__h1 { margin: 0; font-family: var(--nd-font-body); line-height: 1.3; }
.sw-hero__lead { max-width: 720px; }
.sw-hero__actions { padding-top: 8px; }

/* --------------------------------------------------------------------------
   Numeri
   -------------------------------------------------------------------------- */
.sw-stats { padding: 36px 0; border-top: 0; }
.sw-stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sw-stats__item { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; border-left: 1px solid var(--nd-line); }
.sw-stats__item:first-child { border-left: 0; }
.sw-stats__num { display: flex; align-items: center; gap: 4px; font-family: var(--nd-font-display); font-size: 40px; font-weight: 800; line-height: 1.1; color: #ffffff; }
.sw-stats__star { flex-shrink: 0; }
.sw-stats__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-on-dark-muted); }

/* --------------------------------------------------------------------------
   Infrastruttura: quattro card 2 x 2
   -------------------------------------------------------------------------- */
.sw-infra, .sw-method, .sw-work, .sw-solutions, .sw-tech, .sw-local, .sw-faq { padding: 96px 0; }
.sw-infra__diamond, .sw-work__diamond, .sw-solutions__diamond, .sw-local__diamond { left: -110px; top: 260px; width: 300px; height: 300px; border-radius: 60px; }
.sw-infra__glow, .sw-work__glow, .sw-solutions__glow, .sw-local__glow { right: -200px; top: -80px; width: 420px; height: 560px; }

.sw-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sw-feature { display: flex; gap: 22px; padding: 30px; }
.sw-feature__body { display: flex; flex-direction: column; gap: 10px; }
.sw-feature__metric {
    padding-top: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nd-accent-deep);
}

/* --------------------------------------------------------------------------
   Metodo: quattro passi numerati su fondo scuro
   -------------------------------------------------------------------------- */
.sw-method { border-top: 1px solid var(--nd-line); }
.sw-method__glow, .sw-tech__glow { left: -160px; top: 40%; width: 420px; height: 420px; filter: blur(110px); }

.sw-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sw-step { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--nd-line-2); border-radius: 16px; background: var(--nd-bg-card); }
.sw-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--nd-grad);
    color: #ffffff;
    font-family: var(--nd-font-display);
    font-size: 20px;
    font-weight: 800;
}
.sw-step__title { margin: 0; font-family: var(--nd-font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: #ffffff; }
.sw-step__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-on-dark); }

/* --------------------------------------------------------------------------
   Lavori a Verona, recensioni
   -------------------------------------------------------------------------- */
.sw-projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sw-proj { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 14px; }
.sw-proj__place { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-text-2); }
.sw-proj__place svg { flex-shrink: 0; }
.sw-proj__title { margin: 0; font-family: var(--nd-font-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--nd-ink); }
.sw-proj__text { flex-grow: 1; margin: 0; font-size: 14px; line-height: 1.55; color: var(--nd-text); }
.sw-proj__link { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--nd-card-line); font-size: 13px; font-weight: 700; color: var(--nd-accent-deep); }
.sw-proj__link svg { flex-shrink: 0; transition: translate .2s var(--nd-ease); }
.sw-proj__link:hover svg { translate: 4px 0; }

.sw-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sw-review { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 28px; border-radius: 16px; background: var(--nd-bg); }
.sw-review__quote { flex-grow: 1; margin: 0; font-size: 15.5px; line-height: 1.6; color: #e6e9ed; }
.sw-review__who { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--nd-line); }
.sw-review__who strong { font-size: 14px; color: #ffffff; }
.sw-review__who span { font-size: 12.5px; color: var(--nd-on-dark-muted); }

.sw-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 24px; }
.sw-proof__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 15px; color: var(--nd-text); }
.sw-proof__rating strong { color: var(--nd-ink); }
.sw-proof__rating a { font-weight: 600; color: var(--nd-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.sw-proof .btn-row { gap: 12px; }

/* --------------------------------------------------------------------------
   Soluzioni
   -------------------------------------------------------------------------- */
.sw-solutions { border-top: 1px solid var(--nd-light-line); background: #fbfaf8; }
.sw-solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sw-solution { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.sw-solution__title { font-size: 19px; }
.sw-solution__text { flex-grow: 1; font-size: 14.5px; line-height: 1.6; }

.sw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sw-tag {
    padding: 4px 10px;
    border: 1px solid rgba(226, 85, 26, 0.45);
    border-radius: 999px;
    background: var(--nd-tile);
    color: var(--nd-accent-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sw-medici { display: flex; align-items: center; gap: 24px; padding: 26px 30px; border: 1px solid rgba(226, 85, 26, 0.3); border-radius: 16px; background: var(--nd-tile); }
.sw-medici__icon { width: 48px; height: 48px; background: #fbfaf8; }
.sw-medici__text { flex-grow: 1; margin: 0; font-size: 15px; line-height: 1.6; color: var(--nd-text); }
.sw-medici__text strong { color: var(--nd-ink); }

/* --------------------------------------------------------------------------
   Stack tecnologico
   -------------------------------------------------------------------------- */
.sw-tech { border-top: 1px solid var(--nd-line); }
.sw-tech__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sw-tech__card { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--nd-line-2); border-radius: 16px; background: var(--nd-bg-card); }
.sw-tech__head { display: flex; align-items: center; gap: 14px; }
.sw-tech__title { margin: 0; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; color: #ffffff; }
.sw-tech__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sw-tech__list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--nd-on-dark); }
.sw-tech__list li::before { content: ""; position: absolute; top: 10px; left: 0; width: 9px; height: 2px; border-radius: 1px; background: var(--nd-accent); }

/* --------------------------------------------------------------------------
   GDPR, sede, province
   -------------------------------------------------------------------------- */
.sw-local__inner { gap: 56px; }
.sw-local__split { display: flex; align-items: stretch; gap: 40px; }
.sw-gdpr { display: flex; flex: 1 1 0; flex-direction: column; gap: 16px; min-width: 0; }
.sw-gdpr .section-head .text { max-width: 600px; }
.sw-gdpr__list { margin: 4px 0 8px; padding: 0; list-style: none; }
.sw-gdpr__item { position: relative; padding: 16px 0 16px 26px; border-top: 1px solid var(--nd-light-line); font-size: 15px; line-height: 1.6; color: var(--nd-text); }
.sw-gdpr__item::before { content: ""; position: absolute; top: 28px; left: 0; width: 12px; height: 2px; border-radius: 1px; background: var(--nd-accent); }
.sw-gdpr__item strong { color: var(--nd-ink); }

.sw-place {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 32px;
    border-radius: 18px;
    background: var(--nd-bg);
    box-shadow: 0 24px 60px rgba(17, 22, 29, 0.22);
}

.sw-place__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nd-accent-on-dark); }
.sw-place__title { margin: 0; font-family: var(--nd-font-display); font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #ffffff; }
.sw-place__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--nd-on-dark); }
.sw-place__text strong { color: #ffffff; }

/* screenshot di Google Maps (embed) ritagliato con il segnaposto DOWEB al centro; il ritaglio
   toglie la barra in basso, quindi l'attribuzione di Google e' riscritta in sw-map__credit.
   Cliccando si apre la scheda DOWEB su Google Maps. */
.sw-map { position: relative; display: block; height: 260px; overflow: hidden; border-radius: 14px; background: #f2efe9; }
.sw-map__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: scale .5s var(--nd-ease); }
@media (max-width: 600px) { .sw-map { height: 200px; } }
.sw-map__credit { position: absolute; right: 0; bottom: 0; padding: 3px 8px; border-top-left-radius: 8px; background: rgba(255, 255, 255, 0.94); color: #1b1c20; font-size: 12px; line-height: 1.4; }
.sw-map:hover .sw-map__img { scale: 1.03; }
.sw-map:focus-visible { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }

.sw-provinces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sw-prov { display: flex; flex-direction: column; gap: 12px; padding: 26px; }
.sw-prov__head { display: flex; align-items: center; gap: 10px; }
.sw-prov__head svg { flex-shrink: 0; }
.sw-prov__title { font-size: 19px; }
.sw-prov__text { flex-grow: 1; font-size: 14.5px; line-height: 1.6; }


/* --------------------------------------------------------------------------
   FAQ e test velocita'
   -------------------------------------------------------------------------- */
.sw-faq { border-top: 1px solid var(--nd-light-line); }
.sw-faq__grid { display: flex; align-items: flex-start; gap: 64px; }
.sw-faq__head { flex: 0 0 34%; }
.sw-faq__list { flex-grow: 1; min-width: 0; border-bottom: 1px solid var(--nd-light-line); }
.sw-faq__item { padding: 22px 0; border-top: 1px solid var(--nd-light-line); }

.sw-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    list-style: none;
    cursor: pointer;
    font-family: var(--nd-font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nd-ink);
    transition: color .15s ease;
}

.sw-faq__q::-webkit-details-marker { display: none; }
.sw-faq__q:hover { color: var(--nd-accent-deep); }

.sw-faq__toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nd-tile);
    transition: rotate .2s var(--nd-ease);
}

.sw-faq__item[open] .sw-faq__toggle { rotate: 45deg; }
.sw-faq__a { max-width: 760px; margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--nd-text); }

.sw-perf {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 8px;
    padding: 32px 40px;
    border-radius: 18px;
    background: var(--nd-bg);
    box-shadow: 0 24px 60px rgba(17, 22, 29, 0.18);
}

.sw-perf__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: rgba(242, 106, 33, 0.14); }
.sw-perf__copy { display: flex; flex-grow: 1; flex-direction: column; gap: 6px; min-width: 0; }
.sw-perf__title { margin: 0; font-family: var(--nd-font-display); font-size: 21px; font-weight: 700; line-height: 1.3; color: #ffffff; }
.sw-perf__text { margin: 0; font-size: 15px; color: var(--nd-on-dark); }

.sw-perf__form { position: relative; display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 10px; width: 440px; max-width: 100%; margin: 0; }
.sw-perf__input {
    flex: 1 1 200px;
    min-width: 0;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--nd-line-2);
    border-radius: 999px;
    background: var(--nd-bg-card);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sw-perf__input:hover { border-color: #6b7684; }
.sw-perf__input:focus { outline: none; border-color: var(--nd-accent); box-shadow: 0 0 0 4px rgba(242, 106, 33, 0.2); }
.sw-perf__input[aria-invalid="true"] { border-color: #ff8a5c; }
.sw-perf__btn { flex-shrink: 0; padding: 0 30px; font-size: 15px; }
.sw-perf__error { flex-basis: 100%; margin: 0; padding-left: 20px; font-size: 14px; color: #ffaa80; }
.sw-perf__error[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Storie di successo
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .sw-projects, .sw-provinces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sw-perf { flex-wrap: wrap; }
    .sw-perf__copy { flex-basis: calc(100% - 92px); }
    .sw-perf__form { width: 100%; }
}

@media (max-width: 900px) {
    .sw-infra, .sw-method, .sw-work, .sw-solutions, .sw-tech, .sw-local, .sw-faq { padding: 64px 0 72px; }
    .sw-stack-col { gap: 36px; }

    .sw-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .sw-stats__item:nth-child(3) { border-left: 0; }

    .sw-features { grid-template-columns: 1fr; }
    .sw-projects, .sw-provinces, .sw-solution-grid, .sw-tech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sw-reviews { grid-template-columns: 1fr; }

    .sw-local__split { flex-direction: column; }
    .sw-faq__grid { flex-direction: column; gap: 28px; }
    .sw-faq__head { flex-basis: auto; }
    .sw-medici { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    .sw-stats { padding: 28px 0; }
    .sw-stats__item { padding: 0 16px; }
    .sw-stats__item:nth-child(odd) { padding-left: 0; }
    .sw-stats__num { font-size: 30px; }
    .sw-stats__star { width: 22px; height: 22px; }

    .sw-steps, .sw-projects, .sw-provinces, .sw-solution-grid, .sw-tech__grid { grid-template-columns: 1fr; }
    .sw-feature { flex-direction: column; gap: 16px; padding: 24px 20px; }
    .sw-step, .sw-tech__card, .sw-review { padding: 24px 20px; }
    .sw-proj, .sw-prov, .sw-solution { padding: 22px 20px; }
    .sw-place { padding: 24px 20px; }
    .sw-place__title { font-size: 22px; }
    .sw-medici { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; }
    .sw-btn { align-self: stretch; }
    .sw-proof { flex-direction: column; align-items: stretch; }
    .sw-faq__q { font-size: 16.5px; }
    .sw-perf { gap: 18px; padding: 24px 20px; }
    .sw-perf__copy { flex-basis: auto; }
    .sw-perf__btn { flex-grow: 1; }
}





/* ==========================================================================
   p-siti-citta.css
   ========================================================================== */
/* Pagine citta' dei siti web (Vicenza, Brescia, Mantova, Padova) e parti comuni con
   la pagina Siti web per medici, che carica questo foglio piu' p-siti-medici.css.
   Modello: pagina Siti web (p-siti-web.css). Solo i componenti propri, il resto e' in nd.css.
   Prefisso sc- (siti citta'). */

.sc-stack-col { display: flex; flex-direction: column; gap: 48px; }

.sc-inline-link { font-weight: 600; color: var(--nd-accent-deep); text-decoration: underline; text-decoration-color: rgba(201, 74, 20, 0.35); text-underline-offset: 3px; }
.sc-inline-link:hover { color: var(--nd-accent); text-decoration-color: currentColor; }
.section--dark .sc-inline-link { color: var(--nd-accent-on-dark); text-decoration-color: rgba(242, 106, 33, 0.4); }
.section--dark .sc-inline-link:hover { color: var(--nd-accent-hover); }

.sc-btn { align-self: flex-start; height: 52px; padding: 0 26px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.sc-hero__lines { height: 369px; }
.sc-hero__h1 { margin: 0; font-family: var(--nd-font-body); line-height: 1.3; }
.sc-hero__lead { max-width: 760px; }
.sc-hero__actions { padding-top: 8px; }

/* --------------------------------------------------------------------------
   Numeri
   -------------------------------------------------------------------------- */
.sc-stats { padding: 36px 0; }
.sc-stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sc-stats__item { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; border-left: 1px solid var(--nd-line); }
.sc-stats__item:first-child { padding-left: 0; border-left: 0; }
.sc-stats__num { font-family: var(--nd-font-display); font-size: 40px; font-weight: 800; line-height: 1.1; color: #ffffff; }
.sc-stats__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-on-dark-muted); }

/* --------------------------------------------------------------------------
   Fasce di testo: titolo a sinistra, paragrafi a destra
   -------------------------------------------------------------------------- */
.sc-intro, .sc-work, .sc-how { padding: 96px 0; }
.sc-intro__diamond { left: -110px; top: 260px; width: 300px; height: 300px; border-radius: 60px; }
.sc-intro__glow { right: -200px; top: -80px; width: 420px; height: 560px; }

.sc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.sc-prose { display: flex; flex-direction: column; gap: 20px; }
.sc-prose .text { font-size: 17px; line-height: 1.7; }
.sc-prose .lead { max-width: none; }

/* --------------------------------------------------------------------------
   Lavori realizzati: card scure con localita', descrizione e link al sito
   -------------------------------------------------------------------------- */
.sc-work { border-top: 1px solid var(--nd-line); }
.sc-work__glow { left: -160px; top: 40%; width: 420px; height: 420px; filter: blur(110px); }

.sc-projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sc-projects--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sc-proj { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--nd-line-2); border-radius: 14px; background: var(--nd-bg-card); }
.sc-proj__place { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-on-dark-muted); }
.sc-proj__place svg { flex-shrink: 0; }
.sc-proj__title { margin: 0; font-family: var(--nd-font-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: #ffffff; }
.sc-proj__text { flex-grow: 1; margin: 0; font-size: 14px; line-height: 1.6; color: var(--nd-on-dark); }
.sc-proj__links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 12px; border-top: 1px solid var(--nd-line-2); }
.sc-proj__link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 24px; font-size: 13px; font-weight: 700; color: var(--nd-accent-on-dark); overflow-wrap: anywhere; }
.sc-proj__link:hover { color: var(--nd-accent-hover); }
.sc-proj__link svg { flex-shrink: 0; transition: translate .2s var(--nd-ease); }
.sc-proj__link:hover svg { translate: 2px -2px; }

.sc-work__all { align-self: center; }

/* --------------------------------------------------------------------------
   Come lavoriamo (fascia chiara che prosegue nell'invito al test velocita')
   -------------------------------------------------------------------------- */
.sc-how { padding-bottom: 24px; border-top: 1px solid var(--nd-light-line); }
.sc-how__diamond { right: -170px; top: -90px; width: 260px; height: 260px; border-radius: 50px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .sc-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sc-split { gap: 48px; }
}

@media (max-width: 900px) {
    .sc-intro, .sc-work, .sc-how { padding: 64px 0 72px; }
    .sc-how { padding-bottom: 16px; }
    .sc-stack-col { gap: 36px; }

    .sc-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .sc-stats__item:nth-child(3) { padding-left: 0; border-left: 0; }

    .sc-split { grid-template-columns: 1fr; gap: 28px; }
    .sc-projects, .sc-projects--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .sc-stats { padding: 28px 0; }
    .sc-stats__item { padding: 0 16px; }
    .sc-stats__item:nth-child(odd) { padding-left: 0; }
    .sc-stats__num { font-size: 30px; }

    .sc-prose .text { font-size: 16px; }
    .sc-projects, .sc-projects--3 { grid-template-columns: 1fr; }
    .sc-proj { padding: 22px 20px; }
    .sc-btn, .sc-work__all { align-self: stretch; }
}

/* ==========================================================================
   p-siti-medici.css
   ========================================================================== */
/* Pagina Siti web per medici: si carica dopo p-siti-citta.css (hero, numeri, card dei siti,
   colonne e link in comune con le pagine citta'). Qui solo le parti proprie. Prefisso sm-.
   Deroga a DESIGN-RULES voce 21: nessuna spunta, gli elenchi usano icone o numeri. */

.sm-head { max-width: 780px; }
.sm-tile { width: 48px; height: 48px; }

/* --------------------------------------------------------------------------
   Cosa serve: otto card 4 x 2
   -------------------------------------------------------------------------- */
.sm-needs-band, .sm-start, .sm-area, .sm-faq { padding: 96px 0; }
.sm-needs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sm-need { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; }
.sm-need__title { font-size: 18px; line-height: 1.3; }
.sm-need__text { font-size: 14.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Per chi apre adesso: tre passi in progressione
   -------------------------------------------------------------------------- */
.sm-start { border-top: 1px solid var(--nd-line); }
.sm-start__glow { right: -160px; top: 30%; width: 420px; height: 420px; filter: blur(110px); }

.sm-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sm-stage { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--nd-line-2); border-radius: 16px; background: var(--nd-bg-card); }
.sm-stage__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--nd-grad);
    color: #ffffff;
    font-family: var(--nd-font-display);
    font-size: 20px;
    font-weight: 800;
}
.sm-stage__title { margin: 0; font-family: var(--nd-font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: #ffffff; }
.sm-stage__text { flex-grow: 1; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-on-dark); }

.sm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sm-tag {
    padding: 4px 10px;
    border: 1px solid rgba(242, 106, 33, 0.45);
    border-radius: 999px;
    background: rgba(242, 106, 33, 0.08);
    color: var(--nd-accent-hover);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sm-start__note { max-width: 860px; }

/* --------------------------------------------------------------------------
   Area riservata: funzioni a sinistra, pannello scuro sui dati sanitari a destra
   -------------------------------------------------------------------------- */
.sm-area__diamond { left: -110px; bottom: -60px; width: 300px; height: 300px; border-radius: 60px; }
.sm-area__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.sm-area__main { display: flex; flex-direction: column; gap: 24px; }
.sm-area__list .feature-list__title { font-size: 16px; }

.sm-data {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 36px;
    border-radius: 18px;
    background: var(--nd-bg);
    box-shadow: 0 24px 60px rgba(17, 22, 29, 0.22);
}
.sm-data__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(242, 106, 33, 0.14); }
.sm-data__title { margin: 0; font-family: var(--nd-font-display); font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: #ffffff; }
.sm-data__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--nd-on-dark); }
.sm-data__text strong { color: #ffffff; }
.sm-data__text--ruled { padding-top: 16px; border-top: 1px solid var(--nd-line-2); }
.sm-data__link { font-weight: 600; color: var(--nd-accent-on-dark); text-decoration: underline; text-decoration-color: rgba(242, 106, 33, 0.4); text-underline-offset: 3px; }
.sm-data__link:hover { color: var(--nd-accent-hover); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   Siti sanitari: gruppi con etichetta a sinistra e card a destra
   -------------------------------------------------------------------------- */
.sm-sites .sc-stack-col { gap: 40px; }
.sm-group { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding-top: 32px; border-top: 1px solid var(--nd-line); }
.sm-group__title { margin: 0; padding-top: 4px; font-family: var(--nd-font-display); font-size: 17px; font-weight: 600; line-height: 1.35; color: #ffffff; }
.sm-group__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.sm-group--featured .sm-group__title { color: var(--nd-accent-on-dark); }
.sm-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sm-featured__card { gap: 12px; padding: 30px; border-color: rgba(242, 106, 33, 0.55); background: #1e2631; }
.sm-featured__card .sc-proj__title { font-size: 21px; }
.sm-featured__card .sc-proj__text { font-size: 15px; }

.sm-dir-link { color: var(--nd-on-dark-soft); }

/* --------------------------------------------------------------------------
   FAQ (stesso disegno della pagina Siti web)
   -------------------------------------------------------------------------- */
.sm-faq { padding-bottom: 32px; border-top: 1px solid var(--nd-light-line); }
.sm-faq__grid { display: flex; align-items: flex-start; gap: 64px; }
.sm-faq__head { flex: 0 0 34%; }
.sm-faq__list { flex-grow: 1; min-width: 0; border-bottom: 1px solid var(--nd-light-line); }
.sm-faq__item { padding: 22px 0; border-top: 1px solid var(--nd-light-line); }
.sm-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    list-style: none;
    cursor: pointer;
    font-family: var(--nd-font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nd-ink);
    transition: color .15s ease;
}
.sm-faq__q::-webkit-details-marker { display: none; }
.sm-faq__q:hover { color: var(--nd-accent-deep); }
.sm-faq__toggle { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nd-tile); transition: rotate .2s var(--nd-ease); }
.sm-faq__item[open] .sm-faq__toggle { rotate: 45deg; }
.sm-faq__a { max-width: 760px; margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--nd-text); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .sm-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-group { grid-template-columns: 1fr; gap: 20px; }
    .sm-area__grid { gap: 40px; }
}

@media (max-width: 900px) {
    .sm-needs-band, .sm-start, .sm-area, .sm-faq { padding: 64px 0 72px; }
    .sm-faq { padding-bottom: 24px; }
    .sm-stages { grid-template-columns: 1fr; }
    .sm-area__grid { grid-template-columns: 1fr; }
    .sm-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-faq__grid { flex-direction: column; gap: 28px; }
    .sm-faq__head { flex-basis: auto; }
}

@media (max-width: 600px) {
    .sm-needs, .sm-featured, .sm-group__grid { grid-template-columns: 1fr; }
    .sm-need, .sm-stage { padding: 24px 20px; }
    .sm-data { padding: 24px 20px; }
    .sm-data__title { font-size: 21px; }
    .sm-featured__card { padding: 24px 20px; }
    .sm-faq__q { font-size: 16.5px; }
}

/* sito e scheda progetto uno sotto l'altro nelle card strette, in fila nelle due in evidenza */
.sm-group__grid .sc-proj__links { flex-direction: column; align-items: flex-start; }

/* ==========================================================================
   p-ecommerce-seo.css
   ========================================================================== */
/* Pagine servizio E-commerce e SEO e ADS: stessa struttura, un solo foglio con i componenti
   propri (prefisso ps-), il resto e' in nd.css. Pagine senza disegno nel canvas: il modello
   e' la pagina Siti web.
   Deroghe a DESIGN-RULES: voce 21, gli elenchi degli strumenti usano un trattino arancio
   al posto della spunta; voce 12, raggio 16px delle card per coerenza con nd.css. */

.ps-nowrap { white-space: nowrap; }
.ps-stack-col { display: flex; flex-direction: column; gap: 48px; }
.ps-band { padding: 96px 0; }
.ps-band--alt { border-top: 1px solid var(--nd-light-line); background: #fbfaf8; }
.section--dark.ps-band { border-top: 1px solid var(--nd-line); }

.ps-inline-link { font-weight: 600; color: var(--nd-accent-deep); text-decoration: underline; text-decoration-color: rgba(201, 74, 20, 0.35); text-underline-offset: 3px; }
.ps-inline-link:hover { color: var(--nd-accent); text-decoration-color: currentColor; }
.section--dark .ps-inline-link { color: var(--nd-accent-on-dark); text-decoration-color: rgba(242, 106, 33, 0.4); }
.section--dark .ps-inline-link:hover { color: var(--nd-accent-hover); }

.ps-tile { width: 48px; height: 48px; }
.ps-btn { align-self: flex-start; height: 52px; padding: 0 26px; font-size: 15px; }
.ps-btn--center { align-self: center; }
.section--light .btn--outline.ps-btn, .ps-band--alt .btn--outline.ps-btn { color: var(--nd-accent-deep); font-weight: 700; }

/* decorazioni: posizione e misura */
.ps-diamond { left: -110px; top: 260px; width: 300px; height: 300px; border-radius: 60px; }
.ps-glow { right: -200px; top: -80px; width: 420px; height: 560px; }
.ps-glow--left { right: auto; left: -160px; top: 40%; width: 420px; height: 420px; filter: blur(110px); }

/* --------------------------------------------------------------------------
   Hero e numeri
   -------------------------------------------------------------------------- */
.ps-hero__lines { height: 369px; }
.ps-hero__h1 { margin: 0; font-family: var(--nd-font-body); line-height: 1.3; }
.ps-hero__lead { max-width: 760px; }
.ps-hero__actions { padding-top: 8px; }

.ps-stats { padding: 36px 0; border-top: 0; }
.ps-stats > .container { display: flex; flex-direction: column; gap: 22px; }
.ps-stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ps-stats__item { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; border-left: 1px solid var(--nd-line); }
.ps-stats__item:first-child { padding-left: 0; border-left: 0; }
.ps-stats__num { font-family: var(--nd-font-display); font-size: 40px; font-weight: 800; line-height: 1.1; color: #ffffff; }
.ps-stats__label { font-size: 12px; font-weight: 700; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-on-dark-muted); }
.ps-stats__note { max-width: 760px; margin: 0; font-size: 13px; line-height: 1.55; color: var(--nd-on-dark-muted); }

/* --------------------------------------------------------------------------
   Quattro pilastri 2 x 2 (card chiare o scure)
   -------------------------------------------------------------------------- */
.ps-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ps-feature { display: flex; gap: 22px; padding: 30px; }
.ps-feature--dark { border: 1px solid var(--nd-line-2); border-radius: 16px; background: var(--nd-bg-card); }
.ps-feature__body { display: flex; flex-direction: column; gap: 10px; }
.ps-feature--dark .h3 { color: #ffffff; }
.ps-feature--dark .card__text { color: var(--nd-on-dark); }
.ps-feature__metric { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-accent-deep); }
.ps-feature--dark .ps-feature__metric { color: var(--nd-accent-on-dark); }

/* --------------------------------------------------------------------------
   Lavori realizzati
   -------------------------------------------------------------------------- */
.ps-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ps-proj { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 14px; }
.ps-proj__place { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-text-2); }
.ps-proj__place svg { flex-shrink: 0; }
.ps-proj__title { margin: 0; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--nd-ink); }
.ps-proj__text { flex-grow: 1; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-text); }
.ps-proj__link { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--nd-card-line); font-size: 13px; font-weight: 700; color: var(--nd-accent-deep); }
.ps-proj__link svg { flex-shrink: 0; transition: translate .2s var(--nd-ease); }
.ps-proj__link:hover svg { translate: 4px 0; }

/* --------------------------------------------------------------------------
   Dettaglio: elenco a sinistra, schema a destra
   -------------------------------------------------------------------------- */
.ps-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; gap: 64px; }
.ps-split__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.ps-flist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ps-flist__item { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--nd-light-line); }
.ps-flist__item:last-child { padding-bottom: 0; }
.ps-flist__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ps-flist__title { margin: 0; font-family: var(--nd-font-display); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--nd-ink); }
.ps-flist__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--nd-text-2); }
.section--dark .ps-flist__item { border-top-color: var(--nd-line); }
.section--dark .ps-flist__title { color: #ffffff; }
.section--dark .ps-flist__text { color: var(--nd-on-dark); }

/* schema del flusso (decorativo, ripete i contenuti dell'elenco) */
.ps-diagram {
    position: sticky;
    top: calc(var(--nd-header-h) + 32px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 30px;
    border: 1px solid var(--nd-line-2);
    border-radius: 18px;
    background: var(--nd-bg);
    box-shadow: 0 24px 60px rgba(17, 22, 29, 0.22);
}

.section--dark .ps-diagram { background: var(--nd-bg-card); box-shadow: none; }
.ps-diagram__head { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nd-on-dark-muted); }
.ps-diagram__dot { width: 8px; height: 8px; border-radius: 50%; background: #3ecf8e; }
.ps-diagram__track { position: relative; }
.ps-diagram__steps { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ps-diagram__line { position: absolute; top: 20px; bottom: 20px; left: 19px; width: 2px; opacity: 0.5; }
.ps-diagram__step { position: relative; display: flex; align-items: center; gap: 16px; }
.ps-diagram__num {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--nd-line-3);
    border-radius: 50%;
    background: var(--nd-bg-card);
    color: #ffffff;
    font-family: var(--nd-font-display);
    font-size: 15px;
    font-weight: 700;
}

.section--dark .ps-diagram__num { background: var(--nd-bg); }
.ps-diagram__step:last-child .ps-diagram__num { border: 0; background: var(--nd-grad); }
.ps-diagram__box { display: flex; flex-grow: 1; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px; border: 1px solid var(--nd-line-2); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.ps-diagram__label { font-size: 15px; font-weight: 700; color: #ffffff; }
.ps-diagram__sub { font-size: 13px; line-height: 1.45; color: var(--nd-on-dark-muted); }

/* --------------------------------------------------------------------------
   Soluzioni / servizi: card con etichette
   -------------------------------------------------------------------------- */
.ps-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ps-solution { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.ps-solution__title { font-size: 19px; }
.ps-solution__text { flex-grow: 1; font-size: 14.5px; line-height: 1.6; }

.ps-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ps-tag {
    padding: 4px 10px;
    border: 1px solid rgba(226, 85, 26, 0.45);
    border-radius: 999px;
    background: var(--nd-tile);
    color: var(--nd-accent-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Stack / strumenti
   -------------------------------------------------------------------------- */
.ps-tech__card { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--nd-line-2); border-radius: 16px; background: var(--nd-bg-card); }
.ps-tech__title { margin: 0; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; color: #ffffff; }
.ps-tech__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ps-tech__list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--nd-on-dark); }
.ps-tech__list li::before { content: ""; position: absolute; top: 10px; left: 0; width: 9px; height: 2px; border-radius: 1px; background: var(--nd-accent); }

/* --------------------------------------------------------------------------
   Tabella dei costi (Shopify o proprietario)
   -------------------------------------------------------------------------- */
.ps-cost { display: flex; flex-direction: column; gap: 24px; }
.ps-cost .section-head { max-width: 860px; }
.ps-compare { width: 100%; border: 1px solid var(--nd-card-line); border-radius: 16px; border-collapse: separate; border-spacing: 0; background: var(--nd-card); font-size: 15px; }
/* angoli arrotondati sulle celle: overflow hidden sulla tabella taglierebbe la didascalia */
.ps-compare thead th:first-child { border-top-left-radius: 15px; }
.ps-compare thead th:last-child { border-top-right-radius: 15px; }
.ps-compare tbody tr:last-child td:last-child { border-bottom-right-radius: 15px; }
.ps-compare caption { padding: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; color: var(--nd-text-2); }
.ps-compare th, .ps-compare td { padding: 18px 24px; border-top: 1px solid var(--nd-card-line); text-align: right; font-variant-numeric: tabular-nums; color: var(--nd-text); }
.ps-compare thead th { border-top: 0; background: var(--nd-bg); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nd-on-dark-soft); }
.ps-compare th:first-child { text-align: left; }
.ps-compare tbody th { font-weight: 700; color: var(--nd-ink); }
.ps-compare td:last-child { background: var(--nd-tile); }
.ps-compare td strong { font-family: var(--nd-font-display); font-size: 17px; color: var(--nd-accent-deep); }
.ps-cost__note small { font-size: inherit; }
.ps-cost__note { max-width: 860px; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--nd-text-2); }
.ps-cost__closing { max-width: 860px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.ps-faq__grid { display: flex; align-items: flex-start; gap: 64px; }
.ps-faq__head { flex: 0 0 34%; }
.ps-faq__list { flex-grow: 1; min-width: 0; border-bottom: 1px solid var(--nd-light-line); }
.ps-faq__item { padding: 22px 0; border-top: 1px solid var(--nd-light-line); }

.ps-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    list-style: none;
    cursor: pointer;
    font-family: var(--nd-font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nd-ink);
    transition: color .15s ease;
}

.ps-faq__q::-webkit-details-marker { display: none; }
.ps-faq__q:hover { color: var(--nd-accent-deep); }

.ps-faq__toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nd-tile);
    transition: rotate .2s var(--nd-ease);
}

.ps-faq__item[open] .ps-faq__toggle { rotate: 45deg; }
.ps-faq__a { max-width: 760px; margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--nd-text); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .ps-split { gap: 40px; }
    .ps-stats__item { padding: 0 20px; }
    .ps-stats__num { font-size: 34px; }
}

@media (max-width: 900px) {
    .ps-band { padding: 64px 0 72px; }
    .ps-stack-col { gap: 36px; }

    .ps-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .ps-stats__item:nth-child(odd) { padding-left: 0; border-left: 0; }

    .ps-features { grid-template-columns: 1fr; }
    .ps-projects, .ps-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-split { grid-template-columns: 1fr; }
    .ps-diagram { position: static; }
    .ps-faq__grid { flex-direction: column; gap: 28px; }
    .ps-faq__head { flex-basis: auto; }
}

@media (max-width: 600px) {
    .ps-stats { padding: 28px 0; }
    .ps-stats__item { padding: 0 16px; }
    .ps-stats__num { font-size: 30px; }

    .ps-projects, .ps-grid3 { grid-template-columns: 1fr; }
    .ps-feature { flex-direction: column; gap: 16px; padding: 24px 20px; }
    .ps-proj, .ps-solution, .ps-tech__card { padding: 22px 20px; }
    .ps-diagram { padding: 22px 18px; }
    .ps-btn, .ps-btn--center { align-self: stretch; }
    .ps-faq__q { font-size: 16.5px; }

    /* tabella: ogni riga diventa una scheda con le etichette delle colonne */
    .ps-compare, .ps-compare tbody, .ps-compare tr, .ps-compare th, .ps-compare td { display: block; }
    .ps-compare { border: 0; border-radius: 0; background: none; }
    .ps-compare tbody tr:last-child td:last-child { border-bottom-right-radius: 0; }
    .ps-compare caption { display: block; }
    .ps-compare thead { display: none; }
    .ps-compare tbody { display: flex; flex-direction: column; gap: 14px; }
    .ps-compare tr { overflow: hidden; border: 1px solid var(--nd-card-line); border-radius: 14px; background: var(--nd-card); }
    .ps-compare tbody th { padding: 14px 18px; border-top: 0; background: var(--nd-bg); color: #ffffff; }
    .ps-compare td { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; }
    .ps-compare td::before { content: attr(data-label); font-weight: 600; text-align: left; color: var(--nd-text-2); }
}

/* ==========================================================================
   p-applicativi.css
   ========================================================================== */
/* Pagine Applicativi web, Gestionale su misura, Gestionale con AI: componenti propri condivisi.
   Il resto (token, fasce, bottoni, card, cta-band, aree NdStorieSuccesso e NdCtaTestVelocita)
   e' in nd.css. Modello: pagina Siti web (p-siti-web.css).
   Deroga a DESIGN-RULES voce 21: gli elenchi dello stack usano un trattino arancio, non la spunta. */

/* colonna verticale comune alle fasce: titolo sopra, contenuto sotto */
.ap-stack-col { display: flex; flex-direction: column; gap: 48px; }

.ap-link { font-weight: 600; color: var(--nd-accent-deep); text-decoration: underline; text-decoration-color: rgba(201, 74, 20, 0.35); text-underline-offset: 3px; }
.ap-link:hover { color: var(--nd-accent); text-decoration-color: currentColor; }
.section--dark .ap-link { color: var(--nd-accent-on-dark); text-decoration-color: rgba(242, 106, 33, 0.45); }
.section--dark .ap-link:hover { color: var(--nd-accent-hover); }

.ap-tile { width: 48px; height: 48px; }
.ap-btn { align-self: flex-start; height: 52px; padding: 0 26px; font-size: 15px; }
.section--light .btn--outline.ap-btn { color: var(--nd-accent-deep); font-weight: 700; }

.ap-section { padding: 96px 0; }
.ap-section--alt { background: #fbfaf8; }
.ap-section--ruled-dark { border-top: 1px solid var(--nd-line); }
.ap-section--ruled-light { border-top: 1px solid var(--nd-light-line); }

.ap-diamond { left: -110px; top: 260px; width: 300px; height: 300px; border-radius: 60px; }
.ap-glow { right: -200px; top: -80px; width: 420px; height: 560px; }
.ap-glow--left { left: -160px; right: auto; top: 40%; width: 420px; height: 420px; filter: blur(110px); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ap-hero__lines { height: 369px; }
.ap-hero__h1 { margin: 0; font-family: var(--nd-font-body); line-height: 1.3; }
.ap-hero__lead { max-width: 760px; }
.ap-hero__actions { padding-top: 8px; }

/* hero con diagramma a destra (Gestionale con AI) */
.ap-hero--split > .container { flex-direction: row; align-items: center; gap: 56px; }
.ap-hero--split > .container > .ap-hero__text { animation: none; }
.ap-hero__text { display: flex; flex-direction: column; flex-shrink: 0; gap: 20px; width: 56%; }
.ap-hero__text > * { animation: ndUp .7s var(--nd-ease) both; }
.ap-hero__text > :nth-child(2) { animation-delay: .1s; }
.ap-hero__text > :nth-child(3) { animation-delay: .2s; }
.ap-hero__text > :nth-child(4) { animation-delay: .3s; }
.ap-hero__text > :nth-child(5) { animation-delay: .4s; }
.ap-hero__art { flex-grow: 1; min-width: 0; }
.ap-hero--split > .container > .ap-hero__art { animation: ndZoom .9s var(--nd-ease) .35s both; }

/* diagramma assistente -> MCP -> gestionale */
.ap-flow { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.ap-flow__dash { stroke-dasharray: 5 5; animation: apDash 1.2s linear infinite; }
.ap-flow__dot { animation: dwTick 2s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Numeri
   -------------------------------------------------------------------------- */
.ap-stats { padding: 36px 0; }
.ap-stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ap-stats__item { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; border-left: 1px solid var(--nd-line); }
.ap-stats__item:first-child { padding-left: 0; border-left: 0; }
.ap-stats__num { display: flex; align-items: center; gap: 4px; font-family: var(--nd-font-display); font-size: 40px; font-weight: 800; line-height: 1.1; color: #ffffff; }
.ap-stats__star { flex-shrink: 0; }
.ap-stats__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-on-dark-muted); }

/* --------------------------------------------------------------------------
   Quattro card 2 x 2 con icona e metrica (fondo chiaro)
   -------------------------------------------------------------------------- */
.ap-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ap-feature { display: flex; gap: 22px; padding: 30px; }
.ap-feature__body { display: flex; flex-direction: column; gap: 10px; }
.ap-feature__metric { padding-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-accent-deep); }

/* --------------------------------------------------------------------------
   Elenco con icona su fondo scuro (AI integrata, lettura e scrittura)
   -------------------------------------------------------------------------- */
.ap-duo { display: flex; align-items: flex-start; gap: 64px; }
.ap-duo__main { display: flex; flex: 1 1 0; flex-direction: column; gap: 32px; min-width: 0; }
.ap-duo__side { position: sticky; top: calc(var(--nd-header-h) + 32px); flex: 0 0 38%; min-width: 0; }

.ap-points { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ap-point { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--nd-line-2); }
.ap-point:last-child { border-bottom: 1px solid var(--nd-line-2); }
.ap-point__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-point__title { margin: 0; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: #ffffff; }
.ap-point__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--nd-on-dark); }

/* illustrazione a orbita (stesso disegno della pagina Servizi) */
/* illustrazione Storyset (PNG trasparente) direttamente sulla fascia scura, senza riquadro */
.ap-art { position: relative; }
.section:not(.hero) .ap-art { animation-name: ndZoom; animation-duration: .9s; }
.ap-art__img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Card che portano a una pagina (famiglie di applicativi)
   -------------------------------------------------------------------------- */
.ap-families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ap-family { display: flex; flex-direction: column; gap: 14px; padding: 30px; color: inherit; }
.ap-family:hover { color: inherit; }
.ap-family__title { font-size: 20px; }
.ap-family__text { flex-grow: 1; }
.ap-family__more { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--nd-card-line); font-size: 14px; font-weight: 700; color: var(--nd-accent-deep); }
.ap-family__more svg { flex-shrink: 0; transition: translate .2s var(--nd-ease); }
.ap-family:hover .ap-family__more svg { translate: 4px 0; }

/* etichette */
.ap-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ap-tag { padding: 4px 10px; border: 1px solid rgba(226, 85, 26, 0.45); border-radius: 999px; background: var(--nd-tile); color: var(--nd-accent-deep); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.section--dark .ap-tag { border-color: rgba(242, 106, 33, 0.4); background: rgba(242, 106, 33, 0.1); color: #ffa36b; }

.ap-center { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ap-center .text { max-width: 640px; }
.ap-center .ap-btn { align-self: center; }

/* --------------------------------------------------------------------------
   Card scure (stack, funzionalita', collegamenti)
   -------------------------------------------------------------------------- */
.ap-dcard { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--nd-line-2); border-radius: 16px; background: var(--nd-bg-card); }
.ap-dcard__head { display: flex; align-items: center; gap: 14px; }
.ap-dcard__title { margin: 0; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: #ffffff; }
.ap-dcard__text { flex-grow: 1; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-on-dark); }

.ap-tech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ap-tech__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ap-tech__list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--nd-on-dark); }
.ap-tech__list li::before { content: ""; position: absolute; top: 10px; left: 0; width: 9px; height: 2px; border-radius: 1px; background: var(--nd-accent); }

/* funzionalita' di serie: sette schede e, nell'ottava cella, l'invito a parlarne */
.ap-kit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ap-kit__cta { display: flex; align-items: center; justify-content: center; padding: 28px; border: 1px dashed var(--nd-line-3); border-radius: 16px; }
.ap-kit__cta .ap-btn { align-self: center; }

.ap-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* --------------------------------------------------------------------------
   Testo lungo su due colonne: titolo a sinistra, paragrafi a destra
   -------------------------------------------------------------------------- */
.ap-split { display: flex; align-items: flex-start; gap: 64px; }
.ap-split__head { flex: 0 0 38%; }
.ap-split__body { display: flex; flex: 1 1 0; flex-direction: column; gap: 20px; min-width: 0; }
.ap-split__body .text { max-width: 720px; font-size: 16.5px; }
.ap-split__body .ap-btn { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Segnali numerati (Gestionale su misura)
   -------------------------------------------------------------------------- */
.ap-signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ap-signal { display: flex; flex-direction: column; gap: 14px; }
.ap-signal .num-card__num { font-size: 30px; }

/* --------------------------------------------------------------------------
   Progetti con immagine (Gestionale su misura)
   -------------------------------------------------------------------------- */
.ap-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* terza cella: rimando al portfolio completo */
.ap-all { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 32px; border: 1px dashed #d9d2c8; border-radius: 16px; }
.ap-all .text { font-size: 17px; color: var(--nd-ink); }
.ap-all .ap-btn { white-space: normal; height: auto; min-height: 52px; padding: 12px 26px; text-align: left; }
.ap-proj { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 24px; color: inherit; }
.ap-proj:hover { color: inherit; }
.ap-proj__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: var(--nd-light-line); }
.ap-proj__ph { display: flex; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 16 / 10; border-radius: 10px; background: var(--nd-bg); color: #ffffff; font-family: var(--nd-font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; }
.ap-proj__ph .icon-tile { width: 56px; height: 56px; background: rgba(242, 106, 33, 0.14); }
.ap-proj__title { margin: 6px 10px 0; font-family: var(--nd-font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--nd-ink); transition: color .15s ease; }
.ap-proj:hover .ap-proj__title, .ap-proj:focus-visible .ap-proj__title { color: var(--nd-accent-deep); }
.ap-proj__text { flex-grow: 1; margin: 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--nd-text-2); }
.ap-proj .ap-tags { margin: 4px 10px 0; }

/* variante su fondo scuro */
.section--dark .ap-proj { border-color: var(--nd-line-2); background: var(--nd-bg-card); }
.section--dark .ap-proj:hover { border-color: rgba(242, 106, 33, 0.55); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }
.section--dark .ap-proj__img { background: var(--nd-bg); }
.section--dark .ap-proj__title { color: #ffffff; }
.section--dark .ap-proj:hover .ap-proj__title { color: var(--nd-accent-hover); }
.section--dark .ap-proj__text { color: var(--nd-on-dark); }

.ap-note { max-width: 860px; margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--nd-text); }
.section--dark .ap-note { color: var(--nd-on-dark); }

/* --------------------------------------------------------------------------
   Passi numerati su fondo scuro
   -------------------------------------------------------------------------- */
.ap-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ap-step { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--nd-line-2); border-radius: 16px; background: var(--nd-bg-card); }
.ap-step__num { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--nd-grad); color: #ffffff; font-family: var(--nd-font-display); font-size: 20px; font-weight: 800; }
.ap-step__title { margin: 0; font-family: var(--nd-font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: #ffffff; }
.ap-step__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-on-dark); }

/* --------------------------------------------------------------------------
   Domande all'assistente (Gestionale con AI)
   -------------------------------------------------------------------------- */
.ap-asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ap-ask { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.ap-ask__q { margin: 0; font-family: var(--nd-font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--nd-ink); }
.ap-ask .card__text { flex-grow: 1; font-size: 14.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.ap-faq__grid { display: flex; align-items: flex-start; gap: 64px; }
.ap-faq__head { flex: 0 0 34%; }
.ap-faq__list { flex-grow: 1; min-width: 0; border-bottom: 1px solid var(--nd-light-line); }
.ap-faq__item { padding: 22px 0; border-top: 1px solid var(--nd-light-line); }
.ap-faq__q { display: flex; align-items: center; min-height: 44px; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--nd-ink); transition: color .15s ease; }
.ap-faq__q::-webkit-details-marker { display: none; }
.ap-faq__q:hover { color: var(--nd-accent-deep); }
.ap-faq__toggle { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nd-tile); transition: rotate .2s var(--nd-ease); }
.ap-faq__item[open] .ap-faq__toggle { rotate: 45deg; }
.ap-faq__a { max-width: 760px; margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--nd-text); }
.ap-faq__a a { font-weight: 600; color: var(--nd-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.ap-faq__a a:hover { color: var(--nd-accent); }

/* --------------------------------------------------------------------------
   Animazioni proprie
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .ap-hero--split > .container { gap: 40px; }
    .ap-hero__text { width: 58%; }
    .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-kit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ap-duo, .ap-split { gap: 40px; }
}

@media (max-width: 900px) {
    .ap-section { padding: 64px 0 72px; }
    .ap-stack-col { gap: 36px; }

    .ap-hero--split > .container { flex-direction: column; align-items: stretch; }
    .ap-hero__text { width: auto; }
    .ap-hero__art { width: 100%; max-width: 480px; }

    .ap-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .ap-stats__item:nth-child(3) { padding-left: 0; border-left: 0; }

    .ap-features, .ap-signals { grid-template-columns: 1fr; }
    .ap-all { grid-column: 1 / -1; }
    .ap-families, .ap-tech, .ap-kit, .ap-trio, .ap-projects, .ap-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ap-duo, .ap-split, .ap-faq__grid { flex-direction: column; align-items: stretch; gap: 32px; }
    .ap-duo__side { position: static; flex-basis: auto; }
    .ap-split__head { flex-basis: auto; }
    .ap-duo__side { max-width: 480px; }
    .ap-faq__head { flex-basis: auto; }
}

@media (max-width: 600px) {
    .ap-stats { padding: 28px 0; }
    .ap-stats__item { padding: 0 16px; }
    .ap-stats__item:nth-child(odd) { padding-left: 0; }
    .ap-stats__num { font-size: 30px; }
    .ap-stats__star { width: 22px; height: 22px; }

    .ap-families, .ap-tech, .ap-kit, .ap-trio, .ap-projects, .ap-asks, .ap-steps { grid-template-columns: 1fr; }
    .ap-feature { flex-direction: column; gap: 16px; padding: 24px 20px; }
    .ap-dcard, .ap-step, .ap-ask, .ap-family { padding: 24px 20px; }
    .ap-point { flex-direction: column; gap: 14px; }
    .ap-btn, .ap-center .ap-btn { align-self: stretch; height: auto; min-height: 52px; padding: 12px 22px; white-space: normal; text-align: center; }
    .ap-faq__q { font-size: 16.5px; }
}
@keyframes apDash { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }


/* ==========================================================================
   p-soluzioni.css
   ========================================================================== */
/* Pagine soluzione/settore senza disegno nel canvas (GDPR e whistleblowing, piattaforma
   e-learning, prenotazioni online per studi medici): stessa struttura, stesso foglio.
   Modello: pagina Siti web (p-siti-web.css). Solo i componenti propri, il resto e' in nd.css.
   Deroga a DESIGN-RULES voce 14: le griglie da tre card riportano il numero reale di voci
   delle pagine precedenti (tre destinatari, tre ragioni, tre progetti), non un default. */

.sol-stack-col { display: flex; flex-direction: column; gap: 48px; }

.sol-inline-link { font-weight: 600; color: var(--nd-accent-deep); text-decoration: underline; text-decoration-color: rgba(201, 74, 20, 0.35); text-underline-offset: 3px; }
.sol-inline-link:hover { color: var(--nd-accent); text-decoration-color: currentColor; }
.section--dark .sol-inline-link { color: var(--nd-accent-on-dark); text-decoration-color: rgba(242, 106, 33, 0.45); }
.section--dark .sol-inline-link:hover { color: var(--nd-accent-hover); }

.sol-tile { width: 48px; height: 48px; }

/* --------------------------------------------------------------------------
   Hero: testo a sinistra, illustrazione dell'infrastruttura a destra
   -------------------------------------------------------------------------- */
.sol-hero__lines { height: 369px; }
.sol-hero > .container { flex-direction: row; align-items: center; gap: 56px; }
.sol-hero__text { display: flex; flex-direction: column; flex-shrink: 0; gap: 20px; width: 56%; }
.sol-hero__h1 { margin: 0; font-family: var(--nd-font-body); line-height: 1.4; }
.sol-hero__lead { max-width: 720px; }
.sol-hero__text .btn-row { padding-top: 8px; }
.sol-hero__art { flex-grow: 1; min-width: 0; }
.sol-hero__art img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

/* l'animazione d'ingresso passa dal contenitore ai singoli blocchi del testo */
.sol-hero > .container > .sol-hero__text { animation: none; }
.sol-hero__text > * { animation: ndUp .7s var(--nd-ease) both; }
.sol-hero__text > :nth-child(2) { animation-delay: .1s; }
.sol-hero__text > :nth-child(3) { animation-delay: .2s; }
.sol-hero__text > :nth-child(4) { animation-delay: .3s; }
.sol-hero__text > :nth-child(5) { animation-delay: .4s; }
.sol-hero > .container > .sol-hero__art { animation: ndZoom .9s var(--nd-ease) .35s both; }

/* --------------------------------------------------------------------------
   Numeri
   -------------------------------------------------------------------------- */
.sol-stats { padding: 36px 0; }
.sol-stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sol-stats__item { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; border-left: 1px solid var(--nd-line); }
.sol-stats__item:first-child { border-left: 0; }
.sol-stats__num { font-family: var(--nd-font-display); font-size: 40px; font-weight: 800; line-height: 1.1; color: #ffffff; }
.sol-stats__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-on-dark-muted); }

/* --------------------------------------------------------------------------
   Fasce
   -------------------------------------------------------------------------- */
.sol-band { padding: 96px 0; }
.sol-band--soft { border-top: 1px solid var(--nd-light-line); background: #fbfaf8; }
.sol-band--ruled { border-top: 1px solid var(--nd-line); }
.sol-band--light-ruled { border-top: 1px solid var(--nd-light-line); }
.sol-band__diamond { left: -110px; top: 260px; width: 300px; height: 300px; border-radius: 60px; }
.sol-band__glow { right: -200px; top: -80px; width: 420px; height: 560px; }
.sol-band__glow--left { right: auto; left: -160px; top: 40%; width: 420px; height: 420px; filter: blur(110px); }

.sol-band .section-head { max-width: 860px; }
.sol-band .section-head .text { max-width: 760px; }

/* --------------------------------------------------------------------------
   Card con icona e misura (2 x 2)
   -------------------------------------------------------------------------- */
.sol-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sol-feature { display: flex; gap: 22px; padding: 30px; }
.sol-feature__body { display: flex; flex-direction: column; gap: 10px; }
.sol-feature__metric { margin: 0; padding-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-accent-deep); }

/* --------------------------------------------------------------------------
   Punti numerati (sei voci, tre colonne)
   -------------------------------------------------------------------------- */
.sol-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sol-point { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.sol-point__num {
    font-family: var(--nd-font-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    background: var(--nd-grad-num);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sol-point__title { font-size: 19px; line-height: 1.3; }
.sol-point__text { font-size: 14.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Due colonne su fondo scuro: elenco a sinistra, illustrazione a destra
   -------------------------------------------------------------------------- */
.sol-split { display: flex; align-items: center; gap: 64px; }
.sol-split__main { display: flex; flex: 1 1 0; flex-direction: column; gap: 28px; min-width: 0; }
.sol-split__art { flex: 0 0 42%; min-width: 0; }
.sol-split__art img { display: block; width: 100%; height: auto; }

.sol-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--nd-line); }
.sol-list__item { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--nd-line); }
.sol-list__body { display: flex; flex-direction: column; gap: 6px; }
.sol-list__title { margin: 0; font-family: var(--nd-font-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: #ffffff; }
.sol-list__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-on-dark); }
.sol-list__num { flex-shrink: 0; width: 28px; padding-top: 1px; font-family: var(--nd-font-display); font-size: 15px; font-weight: 800; color: var(--nd-accent); }

/* --------------------------------------------------------------------------
   Card testuali (tre per riga), chiare o scure
   -------------------------------------------------------------------------- */
.sol-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sol-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; color: inherit; }
.sol-card__title { font-size: 19px; line-height: 1.3; }
.sol-card__text { flex-grow: 1; font-size: 14.5px; line-height: 1.6; }
a.sol-card:hover { color: inherit; }
a.sol-card:hover .sol-card__title { color: var(--nd-accent-deep); }

.sol-card--dark { border: 1px solid var(--nd-line-2); border-radius: 16px; background: var(--nd-bg-card); }
.sol-card--dark .sol-card__title { margin: 0; font-family: var(--nd-font-display); font-weight: 600; color: #ffffff; }
.sol-card--dark .sol-card__text { margin: 0; color: var(--nd-on-dark); }

.sol-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-tag {
    padding: 4px 10px;
    border: 1px solid rgba(226, 85, 26, 0.45);
    border-radius: 999px;
    background: var(--nd-tile);
    color: var(--nd-accent-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Progetti con anteprima
   -------------------------------------------------------------------------- */
.sol-projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sol-projects--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-proj { display: flex; flex-direction: column; overflow: hidden; padding: 0; color: inherit; }
.sol-proj:hover { color: inherit; }
.sol-proj__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--nd-card-line); background: #efebe5; }
.sol-proj__body { display: flex; flex-grow: 1; flex-direction: column; gap: 12px; padding: 24px; }
.sol-proj__title { font-size: 18px; line-height: 1.3; transition: color .15s ease; }
.sol-proj:hover .sol-proj__title { color: var(--nd-accent-deep); }
.sol-proj__text { flex-grow: 1; font-size: 14px; line-height: 1.6; }

/* card senza immagine nella stessa griglia (case history) */
.sol-proj--text { background: var(--nd-tile); border-color: rgba(226, 85, 26, 0.3); }
.sol-proj--text .sol-proj__body { justify-content: flex-start; padding: 30px 28px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.sol-faq__grid { display: flex; align-items: flex-start; gap: 64px; }
.sol-faq__head { flex: 0 0 34%; }
.sol-faq__head .h2 { font-size: clamp(28px, 2.8vw, 36px); }
.sol-faq__list { flex-grow: 1; min-width: 0; border-bottom: 1px solid var(--nd-light-line); }
.sol-faq__item { padding: 22px 0; border-top: 1px solid var(--nd-light-line); }

.sol-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    list-style: none;
    cursor: pointer;
    font-family: var(--nd-font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nd-ink);
    transition: color .15s ease;
}

.sol-faq__q::-webkit-details-marker { display: none; }
.sol-faq__q:hover { color: var(--nd-accent-deep); }

.sol-faq__toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nd-tile);
    transition: rotate .2s var(--nd-ease);
}

.sol-faq__item[open] .sol-faq__toggle { rotate: 45deg; }
.sol-faq__a { max-width: 760px; margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--nd-text); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .sol-hero > .container { gap: 40px; }
    .sol-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sol-split { gap: 44px; }
}

@media (max-width: 900px) {
    .sol-hero > .container { flex-direction: column; align-items: stretch; }
    .sol-hero__text { width: auto; }
    .sol-hero__art { max-width: 520px; }
    .sol-hero__art img { margin: 0; }

    .sol-band { padding: 64px 0 72px; }
    .sol-stack-col { gap: 36px; }

    .sol-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .sol-stats__item:nth-child(3) { border-left: 0; }

    .sol-features { grid-template-columns: 1fr; }
    .sol-points, .sol-projects, .sol-projects--3, .sol-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sol-split { flex-direction: column; align-items: stretch; }
    .sol-split__art { flex-basis: auto; max-width: 520px; }

    .sol-faq__grid { flex-direction: column; gap: 28px; }
    .sol-faq__head { flex-basis: auto; }
}

@media (max-width: 600px) {
    .sol-stats { padding: 28px 0; }
    .sol-stats__item { padding: 0 16px; }
    .sol-stats__item:nth-child(odd) { padding-left: 0; }
    .sol-stats__num { font-size: 26px; white-space: nowrap; }

    .sol-points, .sol-projects, .sol-projects--3, .sol-cards { grid-template-columns: 1fr; }
    .sol-feature { flex-direction: column; gap: 16px; padding: 24px 20px; }
    .sol-point, .sol-card { padding: 24px 20px; }
    .sol-proj { padding: 0; }
    .sol-proj__body { padding: 22px 20px; }
    .sol-faq__q { font-size: 16.5px; }
}



/* ==========================================================================
   p-analisi.css
   ========================================================================== */
/* Pagina Analisi prestazioni: solo i componenti propri, il resto e' in nd.css.
   Lo script della pagina non scrive stili: cambia data-state del pannello, l'attributo
   hidden e le classi di fascia (is-good / is-avg / is-bad). La barra delle metriche
   usa data-fill 0-10 (scalini del 10%) invece di una larghezza calcolata in JS. */

.pa-hero [hidden], .pa-metrics [hidden], .pa-cats [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Hero: testo, form e scelta dispositivo a sinistra, pannello punteggio a destra
   -------------------------------------------------------------------------- */
.pa-hero { padding-bottom: 72px; }
.pa-hero__lines { height: 369px; }
.pa-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: center; gap: 64px; }
.pa-hero__text { display: flex; flex-direction: column; gap: 20px; min-width: 0; max-width: 640px; }
.pa-hero__url { overflow-wrap: anywhere; }
.pa-hero__title .pa-hero__url { font-size: 0.8em; }
.pa-hero .lead { max-width: 560px; }

.pa-search { display: flex; gap: 10px; margin: 0; padding-top: 6px; }
.pa-search__input {
    flex-grow: 1;
    min-width: 0;
    height: 56px;
    padding: 0 22px;
    border: 1px solid var(--nd-line-2);
    border-radius: 999px;
    background: var(--nd-bg-card);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pa-search__input:hover { border-color: #6b7684; }
.pa-search__input:focus { outline: none; border-color: var(--nd-accent); box-shadow: 0 0 0 4px rgba(242, 106, 33, 0.2); }
.pa-search__btn { flex-shrink: 0; gap: 10px; font-size: 15px; }
.pa-search__btn:disabled { opacity: .65; cursor: progress; translate: none; box-shadow: none; filter: none; }

/* Mobile / Desktop: lo stato lo tiene aria-pressed (nd.js) */
.pa-device { align-self: flex-start; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--nd-line-2); border-radius: 999px; background: var(--nd-bg-card); }
.pa-device__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--nd-on-dark);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.pa-device__btn:hover { color: #ffffff; }
.pa-device__btn[aria-pressed="true"] { background: var(--nd-grad); color: #ffffff; }

/* pannello del punteggio con i quattro stati */
.pa-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    min-width: 0;
    min-height: 460px;
    padding: 40px 36px;
    border: 1px solid var(--nd-line-2);
    border-radius: 22px;
    background: var(--nd-bg-card);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    text-align: center;
}
.pa-panel__view { display: none; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.pa-panel[data-state="empty"] [data-view="empty"],
.pa-panel[data-state="loading"] [data-view="loading"],
.pa-panel[data-state="error"] [data-view="error"],
.pa-panel[data-state="done"] [data-view="done"] { display: flex; }
.pa-panel[data-state="done"] [data-view="done"] { gap: 22px; }
.pa-panel[data-state="loading"] .pa-legend { display: none; }

.pa-panel__title { margin: 0; font-family: var(--nd-font-display); font-size: 20px; font-weight: 700; color: #ffffff; }
.pa-panel__note { margin: 0; max-width: 400px; font-size: 13.5px; line-height: 1.55; color: var(--nd-on-dark-muted); }
.pa-panel__note a { color: var(--nd-accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.pa-panel__score-text { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pa-panel__device { display: flex; align-items: center; gap: 8px; font-family: var(--nd-font-display); font-size: 20px; color: #ffffff; }
.pa-panel__erricon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 95, 87, 0.12); color: #ff7b72; }
.pa-panel__errtext { margin: 0; max-width: 420px; padding: 12px 16px; border: 1px solid rgba(255, 95, 87, 0.4); border-radius: 12px; background: rgba(255, 95, 87, 0.08); color: #ffc9c4; font-size: 14px; line-height: 1.5; }

.pa-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding-top: 16px; border-top: 1px solid var(--nd-line-2); }
.pa-legend__item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nd-on-dark); }
.pa-legend__item strong { color: #ffffff; }

/* passi dell'analisi in corso */
.pa-steps { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; text-align: left; }
.pa-step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #6d7886; transition: color .3s ease; }
.pa-step__dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--nd-line-3); transition: background-color .3s ease; }
.pa-step.is-active { color: #ffffff; }
.pa-step.is-active .pa-step__dot { background: var(--nd-accent); animation: dwPulse 1.8s ease-out infinite; }
.pa-step.is-done { color: var(--nd-ok-text); }
.pa-step.is-done .pa-step__dot { background: var(--nd-ok); }

/* --------------------------------------------------------------------------
   Anello del punteggio (pathLength=100 sui cerchi)
   -------------------------------------------------------------------------- */
.pa-ring { position: relative; display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 104px; height: 104px; }
.pa-ring--lg { width: 220px; height: 220px; }
.pa-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.pa-ring__track { fill: none; stroke: var(--nd-line-2); }
.pa-ring__val { fill: none; stroke-linecap: round; animation: apRing 1.6s var(--nd-ease) .2s both; }
.pa-ring__spin { fill: none; stroke: var(--nd-accent); stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: apSpin 1.4s linear infinite; }
.pa-ring__num { position: relative; font-family: var(--nd-font-display); font-size: 30px; font-weight: 800; color: #ffffff; }
.pa-ring--lg .pa-ring__num { font-size: 68px; }
.pa-ring.is-wait .pa-ring__num { color: #6d7886; }
.pa-ring__num--skel { width: 96px; height: 56px; border-radius: 12px; background: var(--nd-line-2); animation: dwTick 1.6s ease-in-out infinite; }

.pa-ring.is-good .pa-ring__val { stroke: #3ecf8e; }
.pa-ring.is-avg .pa-ring__val { stroke: url(#apg); }
.pa-ring.is-bad .pa-ring__val { stroke: #ff5f57; }

@keyframes apRing { from { stroke-dashoffset: 100; } }
@keyframes apSpin { to { rotate: 360deg; } }

/* etichetta di fascia con forma diversa per colore (cerchio, quadrato, triangolo) */
.pa-status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pa-status svg { flex-shrink: 0; fill: currentColor; }
.pa-status.is-good { color: #3ecf8e; }
.pa-status.is-avg { color: #ffa31a; }
.pa-status.is-bad { color: #ff7b72; }
.pa-status--sm { font-size: 12px; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Metriche (fascia chiara, visibile solo con i risultati)
   -------------------------------------------------------------------------- */
.pa-metrics { padding: 96px 0; }
.pa-metrics__diamond { left: -110px; top: 260px; width: 300px; height: 300px; border-color: rgba(242, 106, 33, 0.25); border-radius: 60px; }
.pa-metrics__glow { right: -200px; top: -80px; width: 420px; height: 560px; }
.pa-metrics__inner { display: flex; flex-direction: column; gap: 48px; }
.pa-metrics__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }

.pa-shot { flex-shrink: 0; width: 180px; margin: 0; }
.pa-shot__img { display: block; width: 100%; border: 1px solid var(--nd-card-line); border-radius: 14px; box-shadow: 0 8px 24px rgba(40, 30, 20, 0.08); }
.pa-shot__cap { margin-top: 8px; font-size: 12px; color: var(--nd-text-2); text-align: center; }
.pa-shot__empty { display: flex; align-items: center; justify-content: center; height: 160px; padding: 12px; border: 1px dashed #d8d2c9; border-radius: 14px; color: var(--nd-text-2); font-size: 13px; text-align: center; }

.pa-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pa-metric {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
}
.pa-metric__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pa-metric__icon { width: 42px; height: 42px; }
.pa-metric__code { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #6b6d74; }
.pa-metric__name { margin: 0; font-family: var(--nd-font-display); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--nd-ink); }
.pa-metric__desc { flex-grow: 1; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--nd-text); }
.pa-metric__val { display: flex; align-items: baseline; gap: 4px; margin: 0; }
.pa-metric__num { font-family: var(--nd-font-display); font-size: 34px; font-weight: 800; line-height: 1; color: var(--nd-ink); }
.pa-metric__unit { font-size: 15px; font-weight: 700; color: var(--nd-text); }
.pa-metric__foot { display: flex; align-items: center; gap: 10px; }
.pa-metric.is-good .pa-status { color: #137a4b; }
.pa-metric.is-avg .pa-status { color: #9a4d06; }
.pa-metric.is-bad .pa-status { color: #b3261e; }
.pa-metric.is-good .pa-status svg { fill: #3ecf8e; }
.pa-metric.is-avg .pa-status svg { fill: #ffa31a; }
.pa-metric.is-bad .pa-status svg { fill: #ff5f57; }

.pa-metric-note { grid-column: 1 / -1; margin: 0; padding: 20px 24px; border: 1px dashed #d8d2c9; border-radius: 16px; color: var(--nd-text-2); font-size: 15px; line-height: 1.6; }

.pa-bar { flex-grow: 1; height: 6px; overflow: hidden; border-radius: 999px; background: #eef0ee; }
.pa-bar__fill { display: block; width: 4%; height: 100%; border-radius: 999px; transform-origin: left center; animation: apBar 1.2s var(--nd-ease) .5s both; }
.is-good .pa-bar__fill { background: #3ecf8e; }
.is-avg .pa-bar__fill { background: #ffa31a; }
.is-bad .pa-bar__fill { background: #ff5f57; }
.pa-bar__fill[data-fill="1"] { width: 10%; }
.pa-bar__fill[data-fill="2"] { width: 20%; }
.pa-bar__fill[data-fill="3"] { width: 30%; }
.pa-bar__fill[data-fill="4"] { width: 40%; }
.pa-bar__fill[data-fill="5"] { width: 50%; }
.pa-bar__fill[data-fill="6"] { width: 60%; }
.pa-bar__fill[data-fill="7"] { width: 70%; }
.pa-bar__fill[data-fill="8"] { width: 80%; }
.pa-bar__fill[data-fill="9"] { width: 90%; }
.pa-bar__fill[data-fill="10"] { width: 100%; }
@keyframes apBar { from { transform: scaleX(0); } }

/* barra di condivisione */
.pa-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 22px 28px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
}
.pa-share__title { font-family: var(--nd-font-display); font-size: 17px; color: var(--nd-ink); }
.pa-share__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pa-share__icon, .pa-share__copy {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid #e0dbd3;
    background: #ffffff;
    transition: border-color .15s ease, background-color .15s ease;
}
.pa-share__icon { width: 44px; border-radius: 50%; }
.pa-share__copy { gap: 8px; padding: 0 18px; border-radius: 999px; color: var(--nd-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.pa-share__icon:hover, .pa-share__copy:hover { border-color: var(--nd-accent); background-color: #fdf1ea; }

/* --------------------------------------------------------------------------
   Punteggi spiegati (fascia scura)
   -------------------------------------------------------------------------- */
.pa-cats { padding: 96px 0; border-top: 1px solid var(--nd-line); }
.pa-cats__glow { left: -160px; top: 40%; width: 420px; height: 420px; filter: blur(110px); }
.pa-cats__inner { display: flex; flex-direction: column; gap: 48px; }
.pa-cats .text { color: var(--nd-on-dark); }
.pa-cats .eyebrow { background-image: var(--nd-grad-text); color: var(--nd-accent); }

.pa-cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pa-cat {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    min-width: 0;
    padding: 30px;
    border: 1px solid var(--nd-line-2);
    border-radius: 18px;
    background: var(--nd-bg-card);
}
.pa-cat__score { flex-shrink: 0; }
.pa-cat__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pa-cat__head { display: flex; align-items: center; gap: 12px; }
.pa-cat__head svg { flex-shrink: 0; }
.pa-cat__name { margin: 0; font-family: var(--nd-font-display); font-size: 19px; font-weight: 600; color: #ffffff; }
.pa-cat__verdict { margin: 0; font-family: var(--nd-font-display); font-size: 22px; font-weight: 700; line-height: 1.2; }
.pa-cat__verdict.is-done {
    background: var(--nd-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pa-cat__verdict.is-wait, .pa-cat__verdict.is-loading { font-family: var(--nd-font-body); font-size: 14px; font-weight: 500; font-style: italic; color: var(--nd-on-dark-muted); }
.pa-cat__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-on-dark); }

.pa-dots span { display: inline-block; animation: apDot 1.2s infinite; opacity: .4; }
.pa-dots span:nth-child(2) { animation-delay: .2s; }
.pa-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes apDot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .pa-hero__grid { gap: 40px; }
    .pa-panel { padding: 32px 24px; }
    .pa-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .pa-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .pa-hero__text { max-width: none; }
    .pa-panel { min-height: 0; }
    .pa-metrics, .pa-cats { padding: 64px 0; }
    .pa-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pa-cat-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .pa-hero { padding-bottom: 56px; }
    .pa-search { flex-direction: column; }
    .pa-search__btn { width: 100%; }
    .pa-device { align-self: stretch; }
    .pa-device__btn { flex: 1 1 0; justify-content: center; }
    .pa-panel { padding: 28px 16px; }
    .pa-ring--lg { width: 180px; height: 180px; }
    .pa-ring--lg .pa-ring__num { font-size: 56px; }
    .pa-metrics__head { flex-direction: column; align-items: stretch; }
    .pa-shot { width: 160px; }
    .pa-metric-grid { grid-template-columns: minmax(0, 1fr); }
    .pa-share { flex-direction: column; align-items: flex-start; padding: 20px; }
    .pa-cat { flex-direction: column; gap: 18px; padding: 24px 20px; }
}

/* ==========================================================================
   p-contatti.css
   ========================================================================== */
/* Pagina Contatti: solo i componenti propri, il resto e' in nd.css.
   I colori dei testi sono scelti per il contrasto AAA (7:1) chiesto dal cliente. */

/* --------------------------------------------------------------------------
   Hero: testo a sinistra, chat illustrata a destra
   -------------------------------------------------------------------------- */
.ct-hero { padding-bottom: 72px; }
.ct-hero > .container { gap: 40px; }

.ct-hero__diamond-1 { left: -140px; top: 250px; width: 360px; height: 360px; border-color: rgba(242, 106, 33, 0.35); border-radius: 64px; }
.ct-hero__diamond-2 { left: -60px; top: 330px; width: 220px; height: 220px; border-color: rgba(242, 106, 33, 0.22); border-radius: 44px; }

.ct-hero__grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.ct-hero__text { display: flex; flex: 0 1 680px; flex-direction: column; gap: 20px; min-width: 0; }
.ct-hero__actions { padding-top: 8px; }

.ct-stats { display: flex; flex-wrap: wrap; row-gap: 16px; margin: 0; padding: 0; list-style: none; }
.ct-stat { display: flex; gap: 12px; padding: 0 18px; border-right: 1px solid #2c343d; }
.ct-stat:first-child { padding-left: 0; }
.ct-stat:last-child { padding-right: 0; border-right: 0; }
.ct-stat svg { flex-shrink: 0; }
.ct-stat__body { display: flex; flex-direction: column; gap: 6px; }
.ct-stat__value { font-family: var(--nd-font-display); font-size: 22px; font-weight: 700; line-height: 1; color: #ffffff; }
.ct-stat__label { max-width: 100px; font-size: 12px; line-height: 1.35; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-on-dark-muted); }

/* illustrazione: finestra con due messaggi che si alternano in loop */
.ct-visual { position: relative; flex-shrink: 0; width: 500px; height: 480px; margin-right: 20px; }
.ct-visual__frame {
    position: absolute; left: 0; top: 90px; width: 150px; height: 300px;
    border: 2px solid rgba(242, 106, 33, 0.55); border-radius: 22px;
    rotate: -4deg; box-shadow: 0 0 60px rgba(242, 106, 33, 0.25);
    animation: ctFade 4s ease-in-out infinite;
}
.ct-visual__glow {
    position: absolute; left: 290px; top: -10px; width: 180px; height: 440px;
    border-radius: 24px; background: var(--nd-grad); rotate: -4deg;
    animation: ctGlow 4s ease-in-out infinite;
}
.ct-win {
    position: absolute; left: 40px; top: 20px; display: flex; flex-direction: column;
    width: 400px; height: 390px; border: 1px solid #34414f; border-radius: 16px;
    background: #141c26; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    animation: ctFloatW 6s ease-in-out infinite;
}
.ct-win__bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid #253040; }
.ct-win__dot { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.ct-win__dot:nth-child(2) { background: #febc2e; }
.ct-win__dot:nth-child(3) { background: #28c840; }
.ct-win__url { margin-left: 12px; padding: 5px 14px; border-radius: 999px; background: #1f2935; color: #c2c8d0; font-size: 12px; }
.ct-win__body { display: flex; flex-direction: column; flex-grow: 1; gap: 14px; padding: 18px 20px; }
.ct-win__badge {
    align-self: center; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 22px;
    border: 1px solid #2aa37a; border-radius: 10px; background: rgba(42, 163, 122, 0.14);
    color: var(--nd-ok-text); font-size: 12px; font-weight: 700;
    animation: ctBadge 9s ease-out infinite;
}

.ct-msg { display: flex; align-items: flex-end; gap: 8px; }
.ct-msg--out { align-self: flex-end; transform-origin: right bottom; animation: ctMsg1 9s ease-out infinite; }
.ct-msg--in { animation: ctRow 9s ease-out infinite; }
.ct-msg__col { display: flex; flex-direction: column; gap: 4px; }
.ct-msg--out .ct-msg__col { align-items: flex-end; }
.ct-msg__who { font-size: 12px; font-weight: 700; color: #bcc2ca; }
.ct-msg__who--doweb { color: #ffa31a; }
.ct-msg__bubble { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.ct-msg__bubble--out { width: 220px; border: 1px solid #3a4757; border-radius: 12px 12px 2px 12px; background: #2b3645; }
.ct-msg__bubble--in { grid-area: 1 / 1; width: 250px; border: 1px solid rgba(242, 106, 33, 0.5); border-radius: 12px 12px 12px 2px; background: #1d2733; transform-origin: left bottom; animation: ctMsg2 9s ease-out infinite; }
.ct-msg__text { font-size: 12px; line-height: 1.45; color: #ffffff; }
.ct-msg__time { align-self: flex-end; font-size: 12px; color: #ffffff; }
.ct-msg__meta { display: flex; justify-content: space-between; font-size: 12px; }
.ct-msg__read { color: var(--nd-ok); }
.ct-msg__avatar { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #3a4757; color: var(--nd-on-dark-soft); }
.ct-msg__logo { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nd-grad); }
.ct-msg__logo img { display: block; width: 22px; margin-left: -2px; }
.ct-msg__stack { display: grid; }
.ct-msg__typing {
    grid-area: 1 / 1; align-self: start; justify-self: start; display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border: 1px solid rgba(242, 106, 33, 0.5); border-radius: 12px 12px 12px 2px;
    background: #1d2733; color: #ffffff; font-size: 12px;
    animation: ctTyping 9s linear infinite;
}
.ct-msg__tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--nd-grad); animation: ctDot .9s ease-in-out infinite; }
.ct-msg__tdot:nth-child(2) { animation-delay: .15s; }
.ct-msg__tdot:nth-child(3) { animation-delay: .3s; }

.ct-visual__note {
    position: absolute; left: 330px; top: 408px; display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border: 1.5px solid rgba(242, 106, 33, 0.6); border-radius: 14px;
    background: #141c26; color: #ffffff; font-size: 13px; font-weight: 600; line-height: 1.25;
    animation: ctFloatC 5s ease-in-out infinite;
}
.ct-visual__ping { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--nd-grad); animation: ctPing 1.8s ease-out infinite; }

@keyframes ctFloatW { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }
@keyframes ctFloatC { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-6px); } }
@keyframes ctGlow { 0%, 100% { box-shadow: 0 0 80px rgba(242, 106, 33, .4); } 50% { box-shadow: 0 0 130px rgba(242, 106, 33, .7); } }
@keyframes ctFade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* nelle fasi a opacita' 0 gli elementi sono anche visibility: hidden, cosi' i controlli di
   accessibilita' non misurano il contrasto di un testo trasparente */
@keyframes ctMsg1 { 0%, 3% { opacity: 0; visibility: hidden; transform: translateX(40px) scale(.92); } 10% { opacity: 1; visibility: visible; transform: translateX(-4px) scale(1.02); } 13%, 92% { opacity: 1; visibility: visible; transform: none; } 100% { opacity: 0; visibility: hidden; } }
@keyframes ctRow { 0%, 15% { opacity: 0; visibility: hidden; transform: translateX(-40px); } 21% { opacity: 1; visibility: visible; transform: translateX(4px); } 24%, 92% { opacity: 1; visibility: visible; transform: none; } 100% { opacity: 0; visibility: hidden; } }
@keyframes ctTyping { 0%, 14% { opacity: 0; visibility: hidden; } 20%, 44% { opacity: 1; visibility: visible; } 48%, 100% { opacity: 0; visibility: hidden; } }
@keyframes ctMsg2 { 0%, 46% { opacity: 0; visibility: hidden; transform: scale(.9); } 52% { opacity: 1; visibility: visible; transform: scale(1.03); } 55%, 92% { opacity: 1; visibility: visible; transform: none; } 100% { opacity: 0; visibility: hidden; } }
@keyframes ctBadge { 0%, 58% { opacity: 0; visibility: hidden; transform: scale(.9); } 64% { opacity: 1; visibility: visible; transform: scale(1.06); } 70%, 92% { opacity: 1; visibility: visible; transform: none; } 100% { opacity: 0; visibility: hidden; } }
@keyframes ctDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes ctPing { 0% { box-shadow: 0 0 0 0 rgba(242, 106, 33, .6); } 70% { box-shadow: 0 0 0 8px rgba(242, 106, 33, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 106, 33, 0); } }

/* --------------------------------------------------------------------------
   Form e recapiti
   -------------------------------------------------------------------------- */
.ct-body { padding: 56px 0 64px; }
.ct-body > .container { display: flex; flex-direction: column; gap: 56px; }
.ct-body__diamond { left: -110px; top: 240px; width: 300px; height: 300px; border-radius: 60px; }
.ct-body__glow-1 { right: -200px; top: -120px; width: 380px; height: 420px; }
.ct-body__glow-2 { right: -220px; top: 460px; width: 400px; height: 420px; }

/* titolo sopra il form, form e recapiti affiancati: il riquadro recapiti parte
   all'altezza del form e arriva in fondo al form (stessa riga della griglia) */
.ct-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "head ." "form info";
    gap: 24px;
    align-items: stretch;
}
.ct-form-head { grid-area: head; }
.ct-form-card { grid-area: form; }
.ct-info { grid-area: info; }
.ct-form-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ct-form-col .text { font-size: 15px; }
/* sovratitolo-titolo a 14px come in .section-head e nel riquadro recapiti (la colonna ha gap 20) */
.ct-form-col > .eyebrow + .h2 { margin-top: -6px; }
/* sovratitoli "Scrivici" e "Dove siamo" a 15px (in nd.css .eyebrow e' 12px) */
.ct-form-col > .eyebrow, .ct-info__head > .eyebrow { font-size: 15px; }

.ct-form-card {
    padding: 28px;
    border: 1px solid var(--nd-card-line);
    border-radius: 20px;
    background: var(--nd-card);
    box-shadow: 0 8px 24px rgba(40, 30, 20, 0.06);
}

.ct-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin: 0; }
.ct-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ct-field--full { grid-column: 1 / -1; }

.ct-label { font-size: 13px; font-weight: 600; color: #000000; }
/* 7.36:1 su bianco (AAA): l'arancio del marchio #e0561a arrivava solo a 3.8:1 */
.ct-req { color: var(--nd-accent-deep); }
.ct-label.is-error, .ct-privacy__label.is-error { color: #b3261e; }
.ct-label.is-error + .ct-input { border-color: #d33b2f; }

.ct-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e4e1dc;
    border-radius: 10px;
    background: #faf9f7;
    color: var(--nd-ink);
    font: inherit;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ct-input:hover { border-color: #b9b3aa; }
.ct-input:focus { outline: none; border-color: var(--nd-accent); box-shadow: 0 0 0 4px rgba(242, 106, 33, 0.2); }
/* il menu a tendina ha lo stesso aspetto degli altri campi: freccia disegnata dal CSS
   al posto di quella del sistema, che cambiava sfondo e bordo del campo */
.ct-select {
    padding: 0 40px 0 14px;
    -webkit-appearance: none;
    appearance: none;
    background-color: #faf9f7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a2d06' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    color: var(--nd-ink);
    cursor: pointer;
}
.ct-textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }

/* il form e' alto quanto il riquadro recapiti accanto: lo spazio in piu' va al campo
   "Informazioni aggiuntive" invece di restare vuoto sotto il bottone */
@media (min-width: 901px) {
    .ct-form-card { display: flex; flex-direction: column; }
    .ct-form { flex-grow: 1; grid-template-rows: auto auto auto 1fr auto auto; }
    .ct-field:has(> .ct-textarea) > .ct-textarea { flex-grow: 1; }
}

.ct-privacy { flex-direction: row; align-items: center; gap: 10px; }
.ct-check { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--nd-accent); cursor: pointer; }
.ct-check:focus-visible { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }
.ct-privacy__label { font-size: 13px; line-height: 1.45; color: #3a3b40; }
.ct-privacy__label a { color: var(--nd-accent-deep); text-decoration: underline; text-underline-offset: 2px; }

.ct-submit {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 50px;
    border: 0;
    border-radius: 10px;
    background: var(--nd-grad);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, filter .2s ease;
}
.ct-submit svg { flex-shrink: 0; transition: translate .25s var(--nd-ease); }
.ct-submit:hover:not(:disabled) { translate: 0 -2px; box-shadow: 0 12px 26px rgba(242, 92, 5, 0.35); }
.ct-submit:hover:not(:disabled) > svg:last-child { translate: 4px 0; }
.ct-submit:disabled { opacity: .6; cursor: progress; }

/* esito dell'invio: vuoto finche' lo script non scrive */
.ct-feedback:empty { display: none; }
.ct-feedback { padding: 14px 18px; border: 1px solid; border-radius: 12px; font-size: 14px; line-height: 1.55; }
.ct-feedback--success { border-color: #9fdcbf; background: #ecf8f1; color: #145c3b; }
.ct-feedback--error { border-color: #f1b7ae; background: #fdf0ee; color: #8f1f16; }

/* colonna recapiti */
.ct-info {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 32px 36px;
    border: 1px solid var(--nd-card-line);
    border-radius: 20px;
    background: var(--nd-card);
    box-shadow: 0 8px 24px rgba(40, 30, 20, 0.06);
    animation: ndUp .7s var(--nd-ease) .35s both;
}
.ct-info__head { display: flex; flex-direction: column; gap: 14px; }
.ct-info__title { margin: 0; font-family: var(--nd-font-display); font-size: 26px; font-weight: 700; color: var(--nd-ink); }
.ct-info__list { display: flex; flex-direction: column; gap: 26px; margin: 0; padding: 0; list-style: none; }
.ct-info__item { display: flex; }
/* tutta la voce e' cliccabile: indirizzo e orari aprono la scheda Google Maps, telefono e email l'app */
.ct-info__hit { display: flex; flex-grow: 1; gap: 20px; margin: -10px; padding: 10px; border-radius: 14px; color: inherit; transition: background-color .15s ease; }
.ct-info__hit:hover { background-color: #fdf5f0; color: inherit; }
.ct-info__hit:hover .ct-info__link, .ct-info__hit:hover .ct-info__text { text-decoration: underline; text-underline-offset: 3px; }
.ct-info__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fdeee5; color: #e0561a; }
.ct-info__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ct-info__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2b2c31; }
.ct-info__text { font-size: 16px; line-height: 1.55; color: #3a3b40; }
/* indirizzo e orari sono link come telefono ed email: stesso colore */
.ct-info__hit .ct-info__text { font-weight: 600; color: var(--nd-accent-deep); }
.ct-info__hit:hover .ct-info__text { color: #7a2806; }
.ct-info__link { display: block; font-size: 17px; font-weight: 600; color: var(--nd-accent-deep); overflow-wrap: anywhere; }
.ct-info__hit:hover .ct-info__link { color: #7a2806; }

.ct-steps { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid #ece8e2; }
.ct-steps__title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2b2c31; }
.ct-steps__list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ct-step { display: flex; align-items: center; gap: 14px; }
.ct-step__num { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nd-grad); color: #ffffff; font-size: 12px; font-weight: 700; }
.ct-step__text { font-size: 14px; line-height: 1.45; color: #3a3b40; }

/* mappa (iframe Google solo con il consenso ai cookie) */
.ct-map {
    position: relative;
    height: 340px;
    overflow: hidden;
    border: 1px solid var(--nd-card-line);
    border-radius: 20px;
    background: #eef0ea;
}
.ct-map__frame { display: block; width: 100%; height: 100%; border: 0; }
.ct-map__overlay {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    height: 100%; padding: 24px; text-align: center;
}
.ct-map__text { margin: 0; max-width: 460px; font-size: 15px; line-height: 1.55; color: #3a3b40; }
.ct-map__addr { margin: 0; font-size: 13px; font-weight: 600; color: #3f4147; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .ct-visual { display: none; }
    .ct-hero__text { flex-basis: 720px; }
}

@media (max-width: 900px) {
    .ct-grid { grid-template-columns: 1fr; grid-template-areas: "head" "form" "info"; gap: 40px; }
    .ct-form-head + .ct-form-card { margin-top: -16px; }
    .ct-body > .container { gap: 40px; }
    .ct-map { height: 300px; }
}

@media (max-width: 600px) {
    .ct-hero { padding-bottom: 56px; }
    /* tre numeri: stanno su una riga anche a 360px */
    .ct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
    .ct-stat { flex-direction: column; gap: 8px; padding: 0 10px; }
    .ct-stat__value { font-size: 20px; }
    .ct-stat__label { font-size: 12px; letter-spacing: 0.04em; }
    .ct-body { padding: 48px 0 56px; }
    .ct-form-card { padding: 20px 16px; }
    .ct-form { grid-template-columns: 1fr; gap: 16px; }
    .ct-info { padding: 24px 20px; }
    .ct-map { height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-msg--out, .ct-msg--in, .ct-msg__bubble--in, .ct-win__badge { opacity: 1; }
    .ct-msg__typing { display: none; }
}

/* ==========================================================================
   p-legale.css
   ========================================================================== */
/* Pagine legali: Privacy, Cookie, Accessibilita'.
   Il testo arriva dal CMS (campo della pagina o script esterno della cookie policy), quindi
   si stila il contenitore .legal-body e non i singoli elementi. */

.legal-hero { padding-bottom: 48px; }

.legal { padding: 72px 0 96px; }

.legal-body {
    max-width: 820px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--nd-text);
    overflow-wrap: anywhere;
}

.legal-body > :first-child { margin-top: 0; }

.legal-body h2,
.legal-body h3,
.legal-body h4 {
    margin: 40px 0 12px;
    font-family: var(--nd-font-display);
    line-height: 1.25;
    color: var(--nd-ink);
}

.legal-body h2 { font-size: 26px; }
.legal-body h3 { font-size: 21px; }
.legal-body h4 { font-size: 18px; }

/* il testo della privacy arriva con titoli preceduti da <br>: niente spazi doppi */
.legal-body h2 br:first-child,
.legal-body h3 br:first-child,
.legal-body h4 br:first-child { display: none; }

.legal-body p { margin: 0 0 16px; }
.legal-body strong, .legal-body b { color: var(--nd-ink); }

.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body li::marker { color: var(--nd-accent); }

.legal-body a { color: var(--nd-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--nd-accent); }

.legal-body table { display: block; width: 100%; max-width: 100%; margin: 0 0 24px; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.legal-body th, .legal-body td { padding: 10px 12px; border: 1px solid var(--nd-light-line); text-align: left; vertical-align: top; }
.legal-body th { background: var(--nd-card); color: var(--nd-ink); }

.legal-body__updated { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--nd-light-line); font-size: 14px; color: var(--nd-text-2); }

@media (max-width: 600px) {
    .legal { padding: 48px 0 64px; }
    .legal-body { font-size: 15px; }
    .legal-body h2 { font-size: 22px; }
}

/* ==========================================================================
   p-portfolio.css
   ========================================================================== */
/* Portfolio (elenco progetti): solo i componenti propri, il resto e' in nd.css.
   Le card sono ripetute da portfolio_ITEM; la card intera e' cliccabile tramite il link
   del titolo (::after steso sulla card), gli altri link stanno sopra con z-index. */

.prj-hero__lines { height: 369px; }

.prj-list { padding: 48px 0 72px; }

.prj-list__diamond-1 { left: -110px; top: 520px; width: 300px; height: 300px; border-radius: 60px; }
.prj-list__diamond-2 { left: -60px; top: 1900px; width: 220px; height: 220px; border-color: rgba(242, 106, 33, 0.2); border-radius: 44px; }
.prj-list__glow-1 { right: -200px; top: -80px; width: 420px; height: 700px; }
.prj-list__glow-2 { right: -160px; top: 1000px; width: 360px; height: 600px; background: rgba(242, 106, 33, 0.08); }

/* elenco a sinistra, filtri a destra */
.prj-layout { display: flex; align-items: flex-start; gap: 40px; }
.prj-layout__main { display: flex; flex-direction: column; flex: 1 1 auto; gap: 40px; min-width: 0; }
.prj-layout__side { display: flex; flex-direction: column; flex: 0 0 330px; gap: 28px; }
/* Mentre si scorrono i progetti restano fissi le categorie in alto e, subito sotto, il
   riquadro Directory; i settori scorrono via passando sotto le categorie. La colonna si
   allunga quanto l'elenco (stretch) cosi' i due blocchi restano fissi fino in fondo.
   --prj-cats-h e' l'altezza del riquadro categorie (5 voci da 46px + gap + padding + bordo):
   se si aggiunge una categoria va aggiornata. Sotto gli 880px di altezza categorie e
   Directory insieme non ci stanno: resta fisso solo il riquadro categorie. */
@media (min-width: 901px) {
    .prj-layout { align-items: stretch; }
    .prj-layout__side { --prj-cats-h: 264px; --prj-top: calc(var(--nd-header-h) + 24px); }
    /* l'ombra piena color pagina copre i 24px tra header e categorie, dove altrimenti
       si vedrebbero passare i settori */
    .prj-layout__side .prj-cats { position: sticky; top: var(--prj-top); z-index: 2; box-shadow: 0 -24px 0 8px var(--nd-light); }
}

/* In fondo alla colonna la Directory viene spinta su per prima e finiva sotto le categorie.
   Il margine sotto le categorie, lungo quanto la Directory (--prj-dir-h, lo misura lo script
   della pagina), le fa salire insieme; il margine negativo sui settori lo annulla nel layout. */
@media (min-width: 901px) and (min-height: 880px) {
    .prj-layout__side .prj-dir { position: sticky; top: calc(var(--prj-top) + var(--prj-cats-h) + 20px); }
    .prj-layout__side .prj-cats { margin-bottom: calc(var(--prj-dir-h, 0px) + 20px); }
    .prj-layout__side .prj-sectors { margin-top: calc(-1 * (var(--prj-dir-h, 0px) + 20px)); }
}

.prj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

/* --- card progetto --- */
.prj-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--nd-card-line);
    border-radius: 14px;
    background: var(--nd-card);
    box-shadow: 0 1px 2px rgba(40, 30, 20, 0.05);
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, border-color .25s ease;
}

.prj-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    padding: 14px 28px;
    border-bottom: 1px solid #f0ece6;
    background: var(--nd-card);
}

.prj-card__logo img { display: block; width: auto; max-width: 220px; max-height: 76px; object-fit: contain; }

.prj-card__body { display: flex; flex-direction: column; flex-grow: 1; gap: 12px; padding: 20px 22px; }

.prj-card__title { margin: 0; font-family: var(--nd-font-display); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--nd-ink); }
.prj-card__title a { color: var(--nd-ink); }
.prj-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.prj-card__title a:focus-visible { outline: none; }
.prj-card:has(.prj-card__title a:focus-visible) { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }

.prj-card__text { font-size: 14px; line-height: 1.6; color: var(--nd-text-2); }
.prj-card__text p { margin: 0; }
.prj-card__text p + p { margin-top: 8px; }

.prj-card__site {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nd-accent-deep);
    overflow-wrap: anywhere;
}

.prj-card__site:hover { color: var(--nd-accent); text-decoration: underline; text-underline-offset: 3px; }
.prj-card__site svg { flex-shrink: 0; }
.prj-card__site[href=""] { display: none; }

.prj-card .prj-tags { flex-grow: 1; align-content: flex-start; }

.prj-card__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid #f0ece6;
    font-size: 14px;
    font-weight: 700;
    color: var(--nd-ink);
}

.prj-card__more svg { transition: translate .25s var(--nd-ease); }
.prj-card:hover .prj-card__more svg { translate: 4px 0; }

.prj-card:hover {
    translate: 0 -6px;
    border-color: rgba(242, 106, 33, 0.45);
    box-shadow: 0 20px 40px rgba(40, 30, 20, 0.14);
}

.prj-card:hover .prj-card__title a { color: var(--nd-accent-deep); }

/* etichetta di categoria e tag */
.prj-pill {
    align-self: flex-start;
    padding: 3px 10px;
    border: 1px solid rgba(226, 85, 26, 0.45);
    border-radius: 999px;
    background: var(--nd-tile);
    color: var(--nd-accent-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.prj-pill:empty { display: none; }

.prj-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.prj-tag { padding: 4px 10px; border-radius: 6px; background: #f3f0eb; color: var(--nd-text); font-size: 12px; font-weight: 600; }
.prj-tag:empty { display: none; }

/* --- paginatore (resta per chi non ha javascript e per i motori di ricerca) --- */
.prj-pager-wrap[hidden] { display: none; }
.prj-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.prj-pager__pages { display: flex; flex-wrap: wrap; gap: 8px; }

/* il motore scrive i numeri con le classi "btn pagination__btn": qui si annulla la misura del bottone grande */
.prj-pager .btn,
.prj-pager__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--nd-card-line);
    border-radius: 10px;
    background: var(--nd-card);
    color: var(--nd-ink);
    font-size: 14px;
    font-weight: 700;
    transition: border-color .2s ease, color .2s ease;
}

.prj-pager a.btn:hover, .prj-pager__arrow:hover { translate: none; border-color: var(--nd-accent); color: var(--nd-accent-deep); box-shadow: none; }
.prj-pager .active, .prj-pager .pagination__btn--active { border-color: var(--nd-accent); background: var(--nd-tile); color: var(--nd-accent-deep); }
.prj-pager__arrow[href=""] { visibility: hidden; }

/* segnaposto mentre arrivano le schede successive */
.prj-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--nd-text-2); }
.prj-loading[hidden] { display: none; }
.prj-loading__bar { display: block; width: 100%; height: 150px; border-radius: 14px; background: linear-gradient(90deg, #efebe5 0%, #f7f4ef 50%, #efebe5 100%); background-size: 200% 100%; animation: prjShimmer 1.4s linear infinite; }

@keyframes prjShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.prj-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 32px; border: 1px dashed var(--nd-light-line); border-radius: 14px; background: var(--nd-card); }

/* --- colonna filtri --- */
.prj-cats { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--nd-card-line); border-radius: 14px; background: var(--nd-card); }

.prj-cats__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    color: #2b2c31;
    font-size: 14.5px;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease;
}

.prj-cats__link svg { flex-shrink: 0; }
.prj-cats__link:hover { background: #faf6f1; color: var(--nd-accent-deep); }
.prj-cats__link[aria-current] { background: var(--nd-tile); color: var(--nd-accent-deep); font-weight: 700; }
.prj-cats__link[aria-current] svg { stroke: url(#dwg); }

.prj-sectors { display: flex; flex-direction: column; gap: 10px; }

.prj-side-title {
    margin: 0 0 6px;
    padding-left: 12px;
    border-left: 3px solid var(--nd-accent);
    font-family: var(--nd-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--nd-ink);
}

.prj-sectors__list { display: flex; flex-direction: column; }
.prj-sectors__list a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0ece6; font-size: 14px; color: #3a3b40; transition: color .2s ease; }
.prj-sectors__list a:hover { color: var(--nd-accent-deep); }
.prj-sectors__list a[aria-current] { color: var(--nd-accent-deep); font-weight: 700; }
.prj-sectors__num { color: var(--nd-text-2); }

/* riquadro DOWEB Directory */
.prj-dir {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 28px 26px;
    border-radius: 14px;
    background: #2b2c31;
}

.prj-dir > * { position: relative; }
.prj-dir__glow { position: absolute; right: -80px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(242, 106, 33, 0.22); filter: blur(60px); }
.prj-dir__logo { display: flex; align-self: center; padding: 4px 0; }
.prj-dir__logo img { display: block; width: 170px; height: auto; filter: brightness(0) invert(1); }
.prj-dir__title { margin: 0; font-family: var(--nd-font-display); font-size: 21px; font-weight: 700; line-height: 1.25; color: #ffffff; }
.prj-dir__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--nd-on-dark); }
.prj-dir__text strong { color: #ffffff; }
.prj-dir__actions { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.prj-dir__btn { height: 46px; font-size: 14px; }
.section--light .prj-dir .btn--outline { color: #ffffff; }

/* --- responsive --- */
@media (max-width: 1100px) {
    .prj-layout { gap: 28px; }
    .prj-layout__side { flex-basis: 280px; }
    .prj-grid { gap: 20px; }
}

@media (max-width: 900px) {
    .prj-list { padding: 40px 0 64px; }
    .prj-layout { flex-direction: column; }
    .prj-layout__main { flex: 0 0 auto; width: 100%; }
    /* sotto i 900px le categorie vanno sopra le schede, settori e Directory sotto */
    .prj-layout__side { display: contents; }
    .prj-cats { order: -1; flex-direction: row; flex-wrap: wrap; width: 100%; padding: 8px; }
    .prj-sectors, .prj-dir { width: 100%; }
    .prj-cats__link { min-height: 40px; }
    .prj-sectors__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
    .prj-dir { order: 3; }
}

@media (max-width: 600px) {
    .prj-grid { grid-template-columns: 1fr; }
    .prj-sectors__list { grid-template-columns: 1fr; }
    .prj-dir__btn { height: 46px; }
}






/* ==========================================================================
   p-progetto.css
   ========================================================================== */
/* Dettaglio progetto (portfolio_ELEMENTO). Usa anche p-portfolio.css per etichette,
   tag e titoletto laterale; qui solo i componenti del dettaglio. */

.prd-lead p { margin: 0; }

.prd-body { padding: 64px 0 88px; }
.prd-body__inner { display: flex; flex-direction: column; gap: 80px; }

.prd-body__diamond-1 { left: -110px; top: 720px; width: 300px; height: 300px; border-radius: 60px; }
.prd-body__diamond-2 { left: -60px; top: 1800px; width: 220px; height: 220px; border-color: rgba(242, 106, 33, 0.2); border-radius: 44px; }
.prd-body__glow-1 { right: -200px; top: -80px; width: 420px; height: 700px; }
.prd-body__glow-2 { right: -160px; top: 1000px; width: 360px; height: 600px; background: rgba(242, 106, 33, 0.08); }

.prd-h2 { font-size: clamp(28px, 3vw, 34px); line-height: 1.15; }

/* --- foto del sito in una cornice da browser + scheda laterale --- */
.prd-top { display: flex; align-items: stretch; gap: 40px; }

.prd-shot {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #34414f;
    border-radius: 14px;
    background: var(--nd-card);
    box-shadow: 0 30px 70px rgba(17, 22, 29, 0.22);
    animation: ndZoom .9s var(--nd-ease) .2s both;
}

.prd-shot__bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #1d2530; }
.prd-shot__dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: #ff5f57; }
.prd-shot__dot:nth-child(2) { background: #febc2e; }
.prd-shot__dot:nth-child(3) { background: #28c840; }
.prd-shot__url { overflow: hidden; margin-left: 12px; padding: 4px 14px; border-radius: 999px; background: #2b3645; color: #c2c8d0; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.prd-shot__img { display: block; width: 100%; height: 500px; object-fit: cover; object-position: top; }

.prd-meta {
    display: flex;
    flex: 0 0 360px;
    flex-direction: column;
    gap: 14px;
    padding: 26px 26px 22px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
}

/* senza foto la scheda occupa tutta la riga e si dispone in orizzontale */
.prd-top:not(:has(.prd-shot)) .prd-meta { flex: 1 1 auto; }

.prd-meta__logo { display: flex; align-items: center; justify-content: center; height: 110px; padding: 12px 20px; border-radius: 12px; background: var(--nd-light); }
.prd-meta__logo img { display: block; width: auto; max-width: 220px; max-height: 70px; object-fit: contain; }

.prd-meta__list { display: flex; flex-direction: column; margin: 0; }
.prd-meta__row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #f0ece6; font-size: 14px; }
.prd-meta__row dt { color: var(--nd-text-2); font-weight: 600; }
.prd-meta__row dd { margin: 0; color: var(--nd-ink); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.prd-meta__row dd:empty, .prd-meta__row:has(dd:empty) { display: none; }
.prd-meta__row a { color: var(--nd-accent-deep); }
.prd-meta__row a:hover { color: var(--nd-accent); text-decoration: underline; text-underline-offset: 3px; }

.prd-meta__btn { margin-top: auto; height: 50px; font-size: 15px; }
.prd-meta__btn[href=""] { display: none; }

/* --- testo del progetto + case history collegate --- */
.prd-story { display: flex; align-items: flex-start; justify-content: space-between; gap: 56px; }
.prd-story__text { display: flex; flex-direction: column; flex: 1 1 auto; gap: 20px; max-width: 760px; }

/* il testo arriva dal campo Testo Completo: si stila dal contenitore */
.prd-prose { font-size: 17px; line-height: 1.75; color: #3a3b40; }
.prd-prose p { margin: 0 0 18px; }
.prd-prose p:first-child { font-size: 19px; color: #2b2c31; }
.prd-prose p:last-child { margin-bottom: 0; }
.prd-prose h2, .prd-prose h3 { margin: 28px 0 12px; font-family: var(--nd-font-display); font-size: 22px; font-weight: 600; color: var(--nd-ink); }
.prd-prose ul, .prd-prose ol { margin: 0 0 18px; padding-left: 22px; }
.prd-prose li + li { margin-top: 6px; }
.prd-prose strong { color: var(--nd-ink); }

/* colonna a destra, larga e allineata come la scheda del progetto sopra: case history
   collegate (se ci sono) e altri progetti. Resta fissa mentre si legge il testo. */
.prd-side { display: flex; flex: 0 0 360px; flex-direction: column; gap: 36px; min-width: 0; }
.prd-side:not(:has(.prd-related, .prd-others:not([hidden]))) { display: none; }

@media (min-width: 901px) {
    .prd-side { position: sticky; top: calc(var(--nd-header-h) + 24px); }
}

.prd-related { display: flex; flex-direction: column; gap: 16px; }
.prd-related .prj-side-title { margin: 0; }

.prd-case {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--nd-card-line);
    border-radius: 14px;
    background: var(--nd-card);
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, border-color .25s ease;
}

.prd-case__title { margin: 0; font-family: var(--nd-font-display); font-size: 17px; font-weight: 600; line-height: 1.3; }
.prd-case__title a { color: var(--nd-ink); }
.prd-case__title a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.prd-case__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--nd-text-2); }
.prd-case__more { display: inline-flex; align-items: center; gap: 8px; padding-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--nd-accent-deep); }
.prd-case__more svg { transition: translate .25s var(--nd-ease); }
.prd-case:hover { translate: 0 -6px; border-color: rgba(242, 106, 33, 0.45); box-shadow: 0 20px 40px rgba(40, 30, 20, 0.14); }
.prd-case:hover .prd-case__more svg { translate: 4px 0; }
.prd-case:has(a:focus-visible) { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }
.prd-case a:focus-visible { outline: none; }

/* altri progetti: righe compatte logo + titolo */
.prd-others { display: flex; flex-direction: column; gap: 14px; }
.prd-others .prj-side-title { margin: 0; }
.prd-others__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.prd-other {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border: 1px solid var(--nd-card-line);
    border-radius: 14px;
    background: var(--nd-card);
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, border-color .25s ease;
}

.prd-other__logo { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 96px; height: 64px; padding: 8px; border-radius: 10px; background: var(--nd-light); }
.prd-other__logo img { display: block; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.prd-other__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prd-other__title { font-family: var(--nd-font-display); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--nd-ink); }
.prd-other__cat { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-accent-deep); }
.prd-other:hover { translate: 0 -3px; border-color: rgba(242, 106, 33, 0.45); box-shadow: 0 14px 30px rgba(40, 30, 20, 0.12); }
.prd-other:hover .prd-other__title { color: var(--nd-accent-deep); }
.prd-other:focus-visible { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }

.prd-others__all { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--nd-accent-deep); }
.prd-others__all svg { transition: translate .25s var(--nd-ease); }
.prd-others__all:hover svg { translate: 4px 0; }

/* --- le scelte (Feature 1..5): la prima scura e alta due righe --- */
.prd-choices { display: flex; flex-direction: column; gap: 32px; }
.prd-choices:not(:has(.prd-choice__title:not(:empty))) { display: none; }

.prd-choices__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    counter-reset: scelta;
}

.prd-choice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
    counter-increment: scelta;
}

.prd-choice:has(.prd-choice__title:empty) { display: none; }

.prd-choice__num::before {
    content: counter(scelta, decimal-leading-zero);
    font-family: var(--nd-font-display);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    background: var(--nd-grad-num);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.prd-choice__title { margin: 0; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--nd-ink); }
.prd-choice__text { font-size: 14.5px; line-height: 1.6; color: var(--nd-text-2); }
.prd-choice__text p { margin: 0; }
.prd-choice__text p + p { margin-top: 8px; }

.prd-choice:first-child {
    position: relative;
    grid-row: span 2;
    gap: 16px;
    overflow: hidden;
    padding: 34px 32px;
    border-color: var(--nd-bg);
    background: var(--nd-bg);
}

.prd-choice:first-child::after { content: ""; position: absolute; right: -80px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(242, 106, 33, 0.22); filter: blur(60px); pointer-events: none; }
.prd-choice:first-child > * { position: relative; z-index: 1; }
.prd-choice:first-child .prd-choice__num::before { font-size: 44px; }
.prd-choice:first-child .prd-choice__title { font-size: 24px; font-weight: 700; line-height: 1.25; color: #ffffff; }
.prd-choice:first-child .prd-choice__text { font-size: 16px; line-height: 1.65; color: var(--nd-on-dark); }

/* --- citazione del cliente (solo se c'e') --- */
.prd-quote { display: flex; flex-direction: column; gap: 16px; max-width: 820px; margin: 0; padding: 36px 40px; border: 1px solid var(--nd-card-line); border-radius: 16px; background: var(--nd-card); }
.prd-quote__text { margin: 0; font-family: var(--nd-font-display); font-size: 22px; font-weight: 600; line-height: 1.45; color: var(--nd-ink); }
.prd-quote__text p { margin: 0; }
.prd-quote__author { margin: 0; font-size: 15px; color: var(--nd-text-2); }
.prd-quote__author strong { color: var(--nd-ink); }

.prd-back { display: flex; }
/* il bottone sta vicino a precedente/successivo, non alla distanza delle sezioni */
.item-nav + .prd-back { margin-top: -48px; }
.prd-back__btn { height: 52px; padding: 0 24px; gap: 10px; color: var(--nd-accent-deep); font-size: 15px; }
.section--light .prd-back__btn { color: var(--nd-accent-deep); }
.prd-back__btn:hover > svg:first-child { translate: -4px 0; }
.section--light .prd-back__btn:hover { color: var(--nd-accent-deep); }

/* --- responsive --- */
@media (max-width: 1100px) {
    .prd-top { gap: 28px; }
    .prd-meta { flex-basis: 320px; }
    .prd-shot__img { height: 420px; }
    .prd-story { gap: 40px; }
    .prd-side { flex-basis: 320px; }
    .prd-choices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prd-choice:first-child { grid-row: auto; grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .prd-body { padding: 48px 0 72px; }
    .prd-body__inner { gap: 64px; }
    .prd-top, .prd-story { flex-direction: column; }
    .prd-shot, .prd-meta, .prd-side { flex: 0 0 auto; width: 100%; }
    .prd-shot__img { height: auto; max-height: 520px; }
}

@media (max-width: 600px) {
    .prd-choices__grid { grid-template-columns: 1fr; }
    .prd-choice, .prd-choice:first-child { padding: 24px 20px; }
    .prd-prose { font-size: 16px; }
    .prd-prose p:first-child { font-size: 17px; }
    .prd-quote { padding: 26px 22px; }
    .prd-quote__text { font-size: 19px; }
    .prd-meta { padding: 20px 18px; }
}

/* nella prima scelta, alta due righe, il numero resta in alto e il testo scende in fondo */
@media (min-width: 1101px) {
    .prd-choice:first-child .prd-choice__title { margin-top: auto; }
}



/* ==========================================================================
   p-case-history.css
   ========================================================================== */
/* Case history (elenco): solo i componenti propri, il resto e' in nd.css.
   Le schede sono ripetute da case-history_ITEM (e dalla vista CaseHistoryLista), i bottoni
   del filtro dalla vista CaseHistoryCategorie. La scheda intera e' cliccabile tramite il
   link del titolo (::after steso sulla scheda). */

.chl-hero__lines { height: 369px; }

.chl-list { padding: 48px 0 72px; }
.chl-list__inner { display: flex; flex-direction: column; gap: 32px; }

.chl-list__diamond-1 { left: -110px; top: 520px; width: 300px; height: 300px; border-radius: 60px; }
.chl-list__diamond-2 { left: -60px; top: 1500px; width: 220px; height: 220px; border-color: rgba(242, 106, 33, 0.2); border-radius: 44px; }
.chl-list__glow-1 { right: -200px; top: -80px; width: 420px; height: 700px; }
.chl-list__glow-2 { right: -160px; top: 1000px; width: 360px; height: 600px; background: rgba(242, 106, 33, 0.08); }

/* --- filtro per categoria --- */
.chl-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.chl-filters[hidden], .chl-filter[hidden] { display: none; }

.chl-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--nd-card-line);
    border-radius: 999px;
    background: var(--nd-card);
    color: #2b2c31;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.chl-filter:hover { border-color: rgba(242, 106, 33, 0.55); color: var(--nd-accent-deep); }
.chl-filter:focus-visible { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }
.chl-filter__count { font-size: 12px; font-weight: 700; color: var(--nd-text-2); }
.chl-filter__count:empty { display: none; }
.chl-filter[aria-pressed="true"] { border-color: var(--nd-ink); background: var(--nd-ink); color: #ffffff; }
.chl-filter[aria-pressed="true"] .chl-filter__count { color: #c9cfd6; }

/* --- schede --- */
.chl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.chl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 26px 28px;
    border: 1px solid var(--nd-card-line);
    border-radius: 14px;
    background: var(--nd-card);
    box-shadow: 0 1px 2px rgba(40, 30, 20, 0.05);
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, border-color .25s ease;
}

.chl-card[hidden] { display: none; }

.chl-card__head { display: flex; align-items: center; gap: 12px; }

.chl-card__title { margin: 0; font-family: var(--nd-font-display); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--nd-ink); }
.chl-card__title a { color: var(--nd-ink); }
.chl-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.chl-card__title a:focus-visible { outline: none; }
.chl-card:has(.chl-card__title a:focus-visible) { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }

.chl-card__text { flex-grow: 1; font-size: 14.5px; line-height: 1.65; color: var(--nd-text-2); }
.chl-card__text p { margin: 0; }
.chl-card__text p + p { margin-top: 8px; }

.chl-card__more { display: inline-flex; align-items: center; gap: 8px; padding-top: 10px; font-size: 14px; font-weight: 700; color: var(--nd-accent-deep); }
.chl-card__more svg { transition: translate .25s var(--nd-ease); }

.chl-card:hover { translate: 0 -6px; border-color: rgba(242, 106, 33, 0.45); box-shadow: 0 20px 40px rgba(40, 30, 20, 0.14); }
.chl-card:hover .chl-card__more svg { translate: 4px 0; }
.chl-card:hover .chl-icon { scale: 1.08; rotate: -4deg; }

.chl-pill {
    padding: 3px 10px;
    border: 1px solid rgba(226, 85, 26, 0.45);
    border-radius: 999px;
    background: var(--nd-tile);
    color: var(--nd-accent-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chl-pill:empty { display: none; }

/* icona della categoria: la forma e' una maschera svg scelta sul nome della categoria,
   il colore e' la sfumatura del marchio. Una categoria nuova prende l'icona generica. */
.chl-icon {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--nd-tile);
    transition: scale .25s var(--nd-ease), rotate .25s var(--nd-ease);
}

.chl-icon::before {
    content: "";
    position: absolute;
    inset: 12px;
    background: var(--nd-grad-num);
    -webkit-mask: var(--chl-icon) center / contain no-repeat;
    mask: var(--chl-icon) center / contain no-repeat;
}

.chl-icon { --chl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.chl-icon[data-categoria="Sicurezza & Hack"] { --chl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5z'/%3E%3Cpolyline points='8.5 12 11 14.5 15.5 10'/%3E%3C/svg%3E"); }
.chl-icon[data-categoria="Performance"] { --chl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18a8 8 0 1 1 16 0'/%3E%3Cline x1='12' y1='18' x2='16.5' y2='11'/%3E%3Ccircle cx='12' cy='18' r='1.4' fill='black'/%3E%3C/svg%3E"); }
.chl-icon[data-categoria="Applicativi Web"] { --chl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.chl-icon[data-categoria="Migrazione"] { --chl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 3 21 7 17 11'/%3E%3Cline x1='21' y1='7' x2='8' y2='7'/%3E%3Cpolyline points='7 13 3 17 7 21'/%3E%3Cline x1='3' y1='17' x2='16' y2='17'/%3E%3C/svg%3E"); }

.chl-none { margin: 0; padding: 28px; border: 1px dashed var(--nd-light-line); border-radius: 14px; background: var(--nd-card); color: var(--nd-text-2); }
.chl-none[hidden] { display: none; }

/* --- paginatore: con dodici casi per pagina oggi ce n'e' una sola --- */
.chl-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.chl-pager__pages { display: flex; flex-wrap: wrap; gap: 8px; }
.chl-pager .btn,
.chl-pager__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--nd-card-line);
    border-radius: 10px;
    background: var(--nd-card);
    color: var(--nd-ink);
    font-size: 14px;
    font-weight: 700;
}
.chl-pager a.btn:hover, .chl-pager__arrow:hover { translate: none; border-color: var(--nd-accent); color: var(--nd-accent-deep); box-shadow: none; }
.chl-pager .active { border-color: var(--nd-accent); background: var(--nd-tile); color: var(--nd-accent-deep); }
.chl-pager__arrow[href=""] { visibility: hidden; }
/* una pagina sola: niente numeri da mostrare */
.chl-pager-wrap:not(:has(.chl-pager__pages a)) { display: none; }

@media (max-width: 1100px) {
    .chl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 900px) {
    .chl-list { padding: 40px 0 64px; }
}

@media (max-width: 600px) {
    .chl-grid { grid-template-columns: 1fr; }
    .chl-card { padding: 22px 20px 24px; }
    .chl-filters { gap: 8px; }
    .chl-filter { height: 38px; padding: 0 14px; font-size: 14px; }
}

/* ==========================================================================
   p-case-history-dettaglio.css
   ========================================================================== */
/* Dettaglio case history (case-history_ELEMENTO + vista CaseHistorySezioni).
   I testi arrivano da campi rich text: si stilano dal contenitore (.chd-prose, .chd-steps,
   .chd-phase__text...), perche' dentro non si possono mettere classi. */

.chd-hero__lines { height: 369px; }
.chd-lead p { margin: 0; }

/* etichetta con l'icona della categoria (stesse forme delle schede dell'elenco) */
.chd-badge__icon {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background: var(--nd-grad-text);
    -webkit-mask: var(--chd-icon) center / contain no-repeat;
    mask: var(--chd-icon) center / contain no-repeat;
}

.chd-badge { --chd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.chd-badge[data-categoria="Sicurezza & Hack"] { --chd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5z'/%3E%3Cpolyline points='8.5 12 11 14.5 15.5 10'/%3E%3C/svg%3E"); }
.chd-badge[data-categoria="Performance"] { --chd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18a8 8 0 1 1 16 0'/%3E%3Cline x1='12' y1='18' x2='16.5' y2='11'/%3E%3Ccircle cx='12' cy='18' r='1.4' fill='black'/%3E%3C/svg%3E"); }
.chd-badge[data-categoria="Applicativi Web"] { --chd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.chd-badge[data-categoria="Migrazione"] { --chd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 3 21 7 17 11'/%3E%3Cline x1='21' y1='7' x2='8' y2='7'/%3E%3Cpolyline points='7 13 3 17 7 21'/%3E%3Cline x1='3' y1='17' x2='16' y2='17'/%3E%3C/svg%3E"); }

.chd-body { padding: 64px 0 88px; }
.chd-body__inner { display: flex; flex-direction: column; gap: 80px; }

.chd-body__diamond-1 { left: -110px; top: 900px; width: 300px; height: 300px; border-radius: 60px; }
.chd-body__diamond-2 { left: -60px; top: 2000px; width: 220px; height: 220px; border-color: rgba(242, 106, 33, 0.2); border-radius: 44px; }
.chd-body__glow-1 { right: -200px; top: -80px; width: 420px; height: 700px; }
.chd-body__glow-2 { right: -160px; top: 1100px; width: 360px; height: 600px; background: rgba(242, 106, 33, 0.08); }

.chd-h2 { font-size: clamp(28px, 3vw, 34px); line-height: 1.15; }

.chd-prose { font-size: 16px; line-height: 1.7; color: var(--nd-text); }
.chd-prose p { margin: 0 0 14px; }
.chd-prose p:last-child { margin-bottom: 0; }
.chd-prose strong { color: var(--nd-ink); }
.chd-prose--lead { font-size: 19px; line-height: 1.7; color: #2b2c31; }

/* --- il problema (sinistra) e cosa abbiamo fatto (destra) --- */
.chd-problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.chd-problem__intro, .chd-problem__steps { display: flex; flex-direction: column; gap: 20px; }


/* elenco numerato: il campo Testo Lista a volte ha l'ul, a volte solo i li */
.chd-steps { counter-reset: passo; }
.chd-steps ul, .chd-steps ol { margin: 0; padding: 0; list-style: none; }

.chd-steps li {
    position: relative;
    min-height: 40px;
    padding: 8px 0 24px 58px;
    list-style: none;
    font-size: 16px;
    line-height: 1.6;
    color: var(--nd-text);
    counter-increment: passo;
}

.chd-steps li::before {
    content: counter(passo);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--nd-bg);
    color: #ffffff;
    font-family: var(--nd-font-display);
    font-size: 15px;
    font-weight: 800;
}

.chd-steps li::after {
    content: "";
    position: absolute;
    top: 44px;
    bottom: 4px;
    left: 19px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--nd-accent) 0 6px, transparent 6px 11px);
}

.chd-steps li:last-child { padding-bottom: 0; }
.chd-steps li:last-child::after { display: none; }
.chd-steps li:last-child::before { background: var(--nd-grad); }
.chd-steps strong { color: var(--nd-ink); }

/* --- le sezioni del caso (vista CaseHistorySezioni) --- */
.chd-phases { display: flex; flex-direction: column; gap: 32px; }
.chd-phases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: fase; }

.chd-phase {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 28px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
    counter-increment: fase;
}

.chd-phase__num::before { content: counter(fase, decimal-leading-zero); font-family: var(--nd-font-display); font-size: 34px; font-weight: 800; line-height: 1; color: #f3e6dc; }
.chd-phase__title { margin: 0; font-family: var(--nd-font-display); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--nd-ink); }
.chd-phase__text { font-size: 15px; line-height: 1.65; color: var(--nd-text-2); }
.chd-phase__text p { margin: 0; }
.chd-phase__text p + p { margin-top: 10px; }
.chd-phase__figure { margin: 6px 0 0; overflow: hidden; border-radius: 10px; }
.chd-phase__figure img { display: block; width: 100%; height: auto; }
/* sezione senza foto: il tag rende src vuoto e la figura sparisce */
.chd-phase__figure:has(img[src=""]) { display: none; }

/* la sezione centrale scura, come nel disegno (quella del "durante") */
.chd-phase:nth-child(3n+2) { border-color: var(--nd-bg); background: var(--nd-bg); }
.chd-phase:nth-child(3n+2) .chd-phase__num::before { color: rgba(242, 106, 33, 0.35); }
.chd-phase:nth-child(3n+2) .chd-phase__title { color: #ffffff; }
.chd-phase:nth-child(3n+2) .chd-phase__text { color: var(--nd-on-dark); }

/* --- il risultato --- */
.chd-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 44px 48px;
    border: 1px solid var(--nd-card-line);
    border-radius: 20px;
    background: var(--nd-card);
}

.chd-result__text { display: flex; flex-direction: column; gap: 14px; }
.chd-result__list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
/* nessun punto compilato: resta solo il testo */
.chd-result:not(:has(.chd-point__title:not(:empty), .chd-point__text:not(:empty))) { grid-template-columns: 1fr; }
.chd-result:not(:has(.chd-point__title:not(:empty), .chd-point__text:not(:empty))) .chd-result__list { display: none; }

.chd-point { display: flex; gap: 16px; padding: 20px; border-radius: 14px; background: var(--nd-tile); }
.chd-point:has(.chd-point__title:empty):has(.chd-point__text:empty) { display: none; }
.chd-point__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--nd-grad); color: #ffffff; }
.chd-point--dark .chd-point__icon { background: var(--nd-bg); }
.chd-point__body { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.6; color: #3a3b40; }
.chd-point__title { color: var(--nd-ink); }
.chd-point__title:empty { display: none; }
.chd-point__text p { margin: 0; }

/* --- progetti collegati (dal php, solo se ce ne sono) --- */
.chd-projects { display: flex; flex-direction: column; gap: 28px; }
.chd-projects__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.chd-projects__intro { max-width: 480px; font-size: 15px; }
.chd-projects__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.chd-prj {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px;
    border: 1px solid var(--nd-card-line);
    border-radius: 14px;
    background: var(--nd-card);
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, border-color .25s ease;
}

.chd-prj__title { margin: 0; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; }
.chd-prj__title a { color: var(--nd-ink); }
.chd-prj__title a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.chd-prj__text { flex-grow: 1; margin: 0; font-size: 14px; line-height: 1.55; color: var(--nd-text-2); }
.chd-prj__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chd-prj__tag { padding: 4px 10px; border-radius: 6px; background: #f3f0eb; color: var(--nd-text); font-size: 12px; font-weight: 600; }
.chd-prj__site { padding-top: 12px; border-top: 1px solid #f0ece6; font-size: 13.5px; font-weight: 600; color: var(--nd-accent-deep); overflow-wrap: anywhere; }
.chd-prj:hover { translate: 0 -6px; border-color: rgba(242, 106, 33, 0.45); box-shadow: 0 20px 40px rgba(40, 30, 20, 0.14); }
.chd-prj:has(a:focus-visible) { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }
.chd-prj a:focus-visible { outline: none; }

.chd-back { display: flex; }
/* il bottone sta vicino a precedente/successivo, non alla distanza delle sezioni */
.item-nav + .chd-back { margin-top: -48px; }
.chd-back__btn { height: 52px; padding: 0 24px; gap: 10px; font-size: 15px; }
.section--light .chd-back__btn { color: var(--nd-accent-deep); }
.chd-back__btn:hover > svg:first-child { translate: -4px 0; }

/* --- test velocita' (riprende l'area CtaTestVelocita col nuovo stile) --- */
.chd-speed { padding: 64px 0; }
.chd-speed__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.chd-speed__text { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.chd-speed__title { margin: 0; font-family: var(--nd-font-display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; line-height: 1.2; color: #ffffff; }
.chd-speed__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--nd-on-dark); }

.chd-speed__form { display: flex; flex: 0 1 560px; flex-wrap: wrap; gap: 10px; margin: 0; }
.chd-speed__input {
    flex: 1 1 260px;
    min-width: 0;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--nd-line-3);
    border-radius: 999px;
    background: var(--nd-bg-input);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.chd-speed__input:hover { border-color: #6b7684; }
.chd-speed__input:focus { outline: none; border-color: var(--nd-accent); box-shadow: 0 0 0 4px rgba(242, 106, 33, 0.2); }
.chd-speed__input[aria-invalid="true"] { border-color: #ffaa80; }
.chd-speed__error { flex-basis: 100%; margin: 0; padding-left: 20px; font-size: 14px; color: #ffaa80; }
.chd-speed__error[hidden] { display: none; }

/* --- responsive --- */
@media (max-width: 1100px) {
    .chd-problem { gap: 40px; }
    .chd-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chd-result { gap: 32px; padding: 36px; }
}

@media (max-width: 900px) {
    .chd-body { padding: 48px 0 72px; }
    .chd-body__inner { gap: 64px; }
    .chd-problem, .chd-result { grid-template-columns: 1fr; }
    .chd-phases__grid { grid-template-columns: 1fr; }
    .chd-projects__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .chd-speed__inner { flex-direction: column; align-items: stretch; gap: 24px; }
    .chd-speed__form { flex-basis: auto; }
}

@media (max-width: 600px) {
    .chd-prose--lead { font-size: 17px; }
    .chd-result { padding: 26px 20px; }
    .chd-phase { padding: 24px 20px; }
    .chd-projects__grid { grid-template-columns: 1fr; }
    .chd-speed__form { flex-direction: column; }
    .chd-speed__input { flex-basis: auto; height: 52px; }
    .chd-speed__error { padding-left: 4px; }
}


/* ==========================================================================
   p-blog.css
   ========================================================================== */
/* Blog: lista articoli, card, paginazione, barra laterale (ricerca, ultimi articoli, invito).
   Lo usa anche il dettaglio articolo, che aggiunge p-blog-articolo.css. Il resto e' in nd.css. */

.blog-hero__lines { height: 369px; }
.blog-hero__title { max-width: 1000px; }

/* --------------------------------------------------------------------------
   Fascia chiara con griglia + barra laterale
   -------------------------------------------------------------------------- */
.blog-body { padding: 48px 0 72px; }

.blog-body__diamond-1 { left: -110px; top: 520px; width: 300px; height: 300px; border-radius: 60px; }
.blog-body__diamond-2 { left: -60px; top: 1500px; width: 220px; height: 220px; border-color: rgba(242, 106, 33, 0.2); border-radius: 44px; }
.blog-body__glow-1 { right: -200px; top: -80px; width: 420px; height: 800px; }
.blog-body__glow-2 { right: -160px; top: 900px; width: 360px; height: 700px; background: rgba(242, 106, 33, 0.08); }

.blog-layout { display: flex; align-items: flex-start; gap: 40px; }
.blog-layout__main { display: flex; flex-direction: column; flex: 1 1 auto; gap: 40px; min-width: 0; }
.blog-side { display: flex; flex-direction: column; flex: 0 0 330px; gap: 32px; min-width: 0; }
/* Barra laterale fissa mentre si scorrono gli articoli (anche nel dettaglio, che carica
   questo stesso CSS). La barra e' alta circa 1000-1080px:
   - schermi alti, dove ci sta tutta: resta fissa l'intera barra;
   - altrimenti la barra scorre con la pagina e resta fisso solo il riquadro "Hai un progetto
     in mente?", che cosi' si vede sempre intero invece di finire tagliato in fondo. */
@media (min-width: 901px) {
    .blog-layout { align-items: stretch; }
    .blog-side .blog-cta { position: sticky; top: calc(var(--nd-header-h) + 24px); }
}

@media (min-width: 901px) and (min-height: 1180px) {
    .blog-layout { align-items: flex-start; }
    .blog-side { position: sticky; top: calc(var(--nd-header-h) + 24px); }
    .blog-side .blog-cta { position: relative; top: auto; }
}

/* --------------------------------------------------------------------------
   Card articolo (tutta la card porta all'articolo: link esteso dal titolo)
   -------------------------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--nd-card-line);
    border-radius: 14px;
    background: var(--nd-card);
    box-shadow: 0 1px 2px rgba(40, 30, 20, 0.05);
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, border-color .25s ease;
}

.blog-card__media { display: block; aspect-ratio: 800 / 392; background: #1b222b; }
.blog-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.blog-card__body { display: flex; flex-direction: column; flex-grow: 1; gap: 12px; padding: 20px 22px 18px; }

.blog-card__title { margin: 0; font-family: var(--nd-font-display); font-size: 18px; font-weight: 600; line-height: 1.32; color: var(--nd-ink); }
.blog-card__link { color: var(--nd-ink); }
.blog-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-card__link:hover { color: var(--nd-ink); }
.blog-card__link:focus-visible { outline: none; }
.blog-card:focus-within { outline: 2px solid var(--nd-accent-hover); outline-offset: 3px; }

.blog-card__excerpt {
    display: -webkit-box;
    margin: 0 0 auto;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 14px;
    line-height: 1.6;
    color: #4a4c52; /* 8.4:1 */
}

.blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding-top: 14px;
    border-top: 1px solid #f0ece6;
    font-size: 12.5px;
    color: #4a4c52; /* 8.4:1: data e autore erano a 5.2:1 */
}

.blog-card__date, .blog-card__author { display: flex; align-items: center; gap: 7px; }
.blog-card__author { flex-grow: 1; }
.blog-card__author svg { color: #6b6d74; }
.blog-card__arrow { flex-shrink: 0; transition: translate .2s var(--nd-ease); }
.blog-card:hover .blog-card__arrow { translate: 4px 0; }

/* --------------------------------------------------------------------------
   Paginazione (i numeri li genera il CMS con le classi btn pagination__btn)
   -------------------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pagination li { display: flex; }
.pagination li:has(> a[href=""]) { display: none; }

.pagination .pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--nd-card-line);
    border-radius: 999px;
    background: var(--nd-card);
    color: var(--nd-ink);
    font-size: 15px;
    font-weight: 600;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.pagination a.pagination__btn:hover { border-color: var(--nd-accent); color: var(--nd-accent-deep); translate: none; }
.pagination .pagination__btn--active { border-color: transparent; background: var(--nd-grad); color: #ffffff; }
.pagination .pagination__btn--arrow { color: var(--nd-accent-deep); }

/* --------------------------------------------------------------------------
   Nessun risultato
   -------------------------------------------------------------------------- */
.blog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 56px 32px;
    border: 1px solid var(--nd-card-line);
    border-radius: 14px;
    background: var(--nd-card);
    text-align: center;
}

.blog-empty__title { margin: 0; max-width: 460px; font-family: var(--nd-font-display); font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--nd-ink); }
.blog-empty__link[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Barra laterale
   -------------------------------------------------------------------------- */
.blog-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    margin: 0;
    padding: 0 8px 0 16px;
    border: 1px solid #e4e0da;
    border-radius: 10px;
    background: var(--nd-card);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.blog-search:focus-within { border-color: var(--nd-accent); box-shadow: 0 0 0 4px rgba(242, 106, 33, 0.15); }

.blog-search__input {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #2b2c31;
    font: inherit;
    font-size: 14px;
}

.blog-search__input::-webkit-search-cancel-button { cursor: pointer; }

.blog-search__btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background-color .2s ease;
}

.blog-search__btn:hover { background: var(--nd-tile); }

.blog-side__title {
    margin: 0;
    padding-left: 12px;
    border-left: 3px solid var(--nd-accent);
    font-family: var(--nd-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--nd-ink);
}

.blog-latest { display: flex; flex-direction: column; gap: 20px; }
.blog-latest__list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.blog-latest__link { display: flex; align-items: flex-start; gap: 14px; color: #2b2c31; }
.blog-latest__thumb { flex-shrink: 0; width: 92px; height: 66px; border-radius: 8px; background: #1b222b; object-fit: cover; }
.blog-latest__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.blog-latest__title { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #2b2c31; transition: color .2s ease; }
.blog-latest__link:hover .blog-latest__title { color: var(--nd-accent-deep); }
.blog-latest__date { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8a2d06; /* 7.4:1 sul fondo chiaro della barra */ }

/* riquadro scuro con invito all'analisi */
.blog-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 28px 26px;
    border-radius: 14px;
    background: #2b2c31;
}

.blog-cta > :not(.blog-cta__glow) { position: relative; }
.blog-cta__glow { position: absolute; right: -80px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(242, 106, 33, 0.22); filter: blur(60px); }
.blog-cta__logo { align-self: center; width: 170px; height: auto; }
.blog-cta__title { margin: 0; font-family: var(--nd-font-display); font-size: 21px; font-weight: 700; line-height: 1.25; color: #ffffff; }
.blog-cta__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--nd-on-dark); }
.blog-cta__actions { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.blog-cta .btn--outline { color: #ffffff; }
.blog-cta__btn { height: 46px; padding: 0 20px; gap: 10px; font-size: 14px; font-weight: 700; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .blog-layout { gap: 32px; }
    .blog-side { flex-basis: 290px; }
    .blog-grid { gap: 20px; }
}

/* bottoni della barra compatta: servono solo nell'elenco, sotto i 900px */
.blog-side__toggle, .blog-side__cta { display: none; }

@media (max-width: 900px) {
    .blog-body { padding: 40px 0 56px; }
    .blog-layout { flex-direction: column; align-items: stretch; gap: 32px; }

    /* nell'elenco la barra laterale diventa una barra in cima, fissa sotto l'header
       (nel singolo articolo invece resta sotto il testo, come colonna normale):
       ricerca sempre a portata, tendina con gli ultimi articoli e bottone di contatto */
    .blog-side:not(.post-side) {
        position: sticky;
        top: var(--nd-header-h);
        z-index: 20;
        order: -1;
        flex-basis: auto;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        /* fondo dello stesso colore della pagina, da bordo a bordo: copre il testo che ci
           scorre sotto senza disegnare un riquadro (niente ombra, niente bordo) */
        margin: 0 calc(-1 * var(--container-padding));
        padding: 10px var(--container-padding);
        background: var(--nd-light);
        border: 0;
        box-shadow: none;
    }
    .blog-side:not(.post-side) .blog-search { flex: 1 1 auto; min-width: 0; }
    .blog-side:not(.post-side) .blog-cta { display: none; }

    .blog-side__toggle {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: 8px;
        height: 46px;
        padding: 0 16px;
        border: 1px solid var(--nd-card-line);
        border-radius: 999px;
        background: var(--nd-card);
        color: var(--nd-ink);
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }
    .blog-side__toggle > svg:last-child { transition: rotate .25s var(--nd-ease); }
    .blog-side__toggle[aria-expanded="true"] { border-color: var(--nd-accent); color: #8a2d06; }
    .blog-side__toggle[aria-expanded="true"] > svg:last-child { rotate: 180deg; }
    .blog-side__toggle-icon { display: none; }

    .blog-side__cta { display: inline-flex; flex-shrink: 0; height: 46px; padding: 0 18px; gap: 8px; font-size: 14px; }

    /* tendina: si apre sotto la barra, con dissolvenza */
    .blog-side:not(.post-side) .blog-latest {
        position: absolute;
        top: 100%;
        left: var(--container-padding);
        right: var(--container-padding);
        max-height: min(70vh, 560px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 20px;
        border: 1px solid var(--nd-card-line);
        border-radius: 16px;
        background: var(--nd-card);
        box-shadow: 0 24px 50px rgba(40, 30, 20, 0.18);
        opacity: 0;
        visibility: hidden;
        translate: 0 -8px;
        transition: opacity .2s ease, translate .25s var(--nd-ease), visibility 0s linear .25s;
    }
    .blog-side:not(.post-side).is-latest-open .blog-latest {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
        transition: opacity .2s ease, translate .25s var(--nd-ease), visibility 0s;
    }
    .blog-side:not(.post-side) .blog-latest > * { animation: none; }
}

@media (max-width: 600px) {
    /* sul telefono il contatto resta come icona, la scritta la leggono gli screen reader */
    .blog-side__cta { width: 46px; padding: 0; }
    .blog-side__cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    /* e la tendina diventa un bottone icona, per lasciare spazio al campo di ricerca */
    .blog-side__toggle { width: 46px; justify-content: center; padding: 0; }
    .blog-side__toggle-icon { display: block; }
    .blog-side__toggle-text, .blog-side__toggle > svg:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-body__diamond-1, .blog-body__diamond-2 { display: none; }
    .blog-empty { padding: 40px 20px; }
}

/* --------------------------------------------------------------------------
   Scorrimento continuo: scheletro di caricamento e messaggio di fine elenco
   -------------------------------------------------------------------------- */

/* le card aggiunte scorrendo entrano a coppie, non con il ritardo lungo delle ultime della griglia */

/* ==========================================================================
   p-blog-articolo.css
   ========================================================================== */
/* Dettaglio articolo del blog. Si carica dopo p-blog.css (layout, barra laterale, card).
   Il testo dell'articolo arriva come HTML dal CMS e non ha classi: lo stile passa tutto da
   regole sul contenitore .post-body. Molti articoli vecchi hanno stili in linea (colori,
   larghezze fisse): qui si neutralizzano solo quelli che rompono il layout o la leggibilita'. */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.post-hero__lines { height: 420px; }
.post-hero__title { max-width: 1120px; font-size: clamp(30px, 4.4vw, 46px); overflow-wrap: break-word; }
.post-hero__crumb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 6px; font-size: 14px; color: var(--nd-on-dark-muted); }
.post-meta__author { display: flex; align-items: center; gap: 10px; color: var(--nd-on-dark); }
.post-meta__author strong { color: #ffffff; }
.post-meta__avatar { width: 36px; height: 36px; border: 2px solid var(--nd-accent); border-radius: 50%; background: var(--nd-bg-card); object-fit: cover; }
.post-meta__item { display: flex; align-items: center; gap: 7px; }

/* --------------------------------------------------------------------------
   Colonna principale
   -------------------------------------------------------------------------- */
.post-body-section { padding: 56px 0 80px; }
.post-body-section__diamond-1 { top: 700px; }
.post-body-section__diamond-2 { top: 2100px; }
.post-body-section__glow-2 { top: 1200px; }

.post-layout { gap: 48px; }
.post-side { flex-basis: 360px; }
.post-main { gap: 36px; }

.post-cover { display: block; width: 100%; height: auto; aspect-ratio: 1320 / 706; border-radius: 16px; background: #1b222b; object-fit: cover; }
/* immagine di copertina: compare allargandosi appena, quando entra nello schermo */
.post-cover { animation: postCoverIn 1s var(--nd-ease) .1s both; }
@keyframes postCoverIn { from { opacity: 0; transform: scale(1.04); clip-path: inset(6% 6% 6% 6% round 16px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 16px); } }

.post-card { padding: 56px 64px; border: 1px solid var(--nd-card-line); border-radius: 16px; background: var(--nd-card); }

/* --------------------------------------------------------------------------
   Testo dell'articolo (HTML dal CMS)
   -------------------------------------------------------------------------- */
.post-body {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3b40;
    overflow-wrap: break-word;
}

.post-body > :first-child { margin-top: 0; }
.post-body > :last-child { margin-bottom: 0; }
.post-body > p:first-child { font-size: 19px; line-height: 1.7; color: #2b2c31; }

.post-body p { margin: 0 0 22px; }
.post-body div { margin: 0 0 22px; }

.post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
    font-family: var(--nd-font-display);
    color: var(--nd-ink);
    scroll-margin-top: 100px;
}

.post-body h2 { margin: 44px 0 16px; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.post-body h2::before { content: ""; display: block; width: 36px; height: 3px; margin-bottom: 14px; background: var(--nd-grad); }
.post-body h3 { margin: 32px 0 12px; font-size: 21px; font-weight: 600; line-height: 1.3; }
.post-body h4, .post-body h5, .post-body h6 { margin: 28px 0 10px; font-size: 18px; font-weight: 600; line-height: 1.35; }

.post-body strong, .post-body b { color: var(--nd-ink); }
.post-body em { font-style: italic; }

.post-body a { color: #8a2d06; /* 8.5:1 su bianco (AAA) */ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-body a:hover { color: #6e2304; }

.post-body ul, .post-body ol { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.post-body ul li { position: relative; padding-left: 26px; }
.post-body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--nd-grad); }
.post-body ol { counter-reset: post-ol; }
.post-body ol li { position: relative; min-height: 32px; padding-left: 48px; counter-increment: post-ol; }
.post-body ol li::before { content: counter(post-ol); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--nd-bg); color: #ffffff; font: 700 14px/32px var(--nd-font-display); text-align: center; }
.post-body li > ul, .post-body li > ol { margin: 12px 0 0; }
.post-body li p { margin: 0; }

.post-body img, .post-body iframe, .post-body video { display: block; max-width: 100% !important; height: auto; margin: 28px auto; border-radius: 12px; }
.post-body iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

.post-body figure { margin: 32px 0; }
.post-body figure img { margin: 0 auto; }
.post-body figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--nd-text-2); text-align: center; }

.post-body blockquote {
    margin: 32px 0;
    padding: 20px 24px;
    border-left: 3px solid var(--nd-accent);
    border-radius: 0 12px 12px 0;
    background: var(--nd-tile);
    font-size: 18px;
    color: #2b2c31;
}

.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin: 28px 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.55;
}

.post-body th, .post-body td { min-width: 11em; padding: 10px 14px; border: 1px solid var(--nd-card-line); text-align: left; vertical-align: top; }
.post-body th, .post-body thead td { background: var(--nd-light); color: var(--nd-ink); font-weight: 700; }
.post-body td p, .post-body th p { margin: 0; }
.post-body :is(td, th), .post-body :is(td, th) * { overflow-wrap: normal; word-break: normal; hyphens: manual; }

.post-body hr { height: 1px; margin: 40px 0; border: 0; background: var(--nd-light-line); }

/* stili in linea dei vecchi articoli: niente larghezze fisse che sfondano la colonna */
.post-body [style*="width"] { max-width: 100% !important; }

/* --------------------------------------------------------------------------
   Torna al blog + condivisione
   -------------------------------------------------------------------------- */
.post-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; }
.post-actions__back { height: 48px; padding: 0 22px; gap: 10px; font-size: 14px; font-weight: 700; }
.section--light .post-actions__back { color: #8a2d06; }
.section--light .post-actions__back:hover { color: #8a2d06; }

.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.post-share__label { font-size: 13px; font-weight: 700; color: var(--nd-text); }
.post-share__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.post-share__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e4e0da;
    border-radius: 999px;
    background: var(--nd-card);
    color: #2b2c31;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.post-share__btn:hover { border-color: var(--nd-accent); color: var(--nd-accent-deep); }
.post-share__btn--copy { padding: 0 14px; }

/* --------------------------------------------------------------------------
   Autore
   -------------------------------------------------------------------------- */
.post-author { display: flex; gap: 22px; padding: 28px; border-radius: 16px; background: var(--nd-bg); color: #ffffff; }
.post-author__photo { flex-shrink: 0; width: 84px; height: 84px; border: 3px solid var(--nd-accent); border-radius: 50%; background: var(--nd-bg-card); object-fit: cover; }
.post-author__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.post-author__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ffa31a; /* 8.8:1 sul riquadro scuro */ }
.post-author__name { margin: 0; font-family: var(--nd-font-display); font-size: 20px; font-weight: 700; color: #ffffff; }
.post-author__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--nd-on-dark); }
.post-author__link { align-self: flex-start; padding-bottom: 2px; border-bottom: 1px solid var(--nd-accent); color: #ffffff; font-size: 13px; font-weight: 700; }
.post-author__link:hover { color: var(--nd-accent-hover); }

/* --------------------------------------------------------------------------
   Precedente / successivo (i link compaiono quando lo script li trova)
   -------------------------------------------------------------------------- */
.post-nav { display: flex; gap: 20px; }
.post-nav:not(:has(.post-nav__link:not([hidden]))) { display: none; }
.post-nav__link[hidden] { display: none; }
.post-nav__link:not([hidden]) { animation: ndUp .6s var(--nd-ease) both; }
.post-nav__link--next:not([hidden]) { animation-delay: .1s; }

.post-nav__link {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--nd-card-line);
    border-radius: 14px;
    background: var(--nd-card);
    transition: translate .25s var(--nd-ease), box-shadow .25s ease, border-color .25s ease;
}

.post-nav__link:hover { translate: 0 -4px; border-color: rgba(242, 106, 33, 0.45); box-shadow: 0 16px 32px rgba(40, 30, 20, 0.12); }
.post-nav__link--next { flex-direction: row-reverse; margin-left: auto; text-align: right; }
.post-nav__img { flex-shrink: 0; width: 84px; height: 84px; border-radius: 10px; background: #1b222b; object-fit: cover; }
.post-nav__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.post-nav__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8a2d06; }
.post-nav__title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--nd-ink); }


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .post-layout { gap: 32px; }
    .post-side { flex-basis: 290px; }
    .post-card { padding: 40px 40px; }
}

@media (max-width: 900px) {
    .post-body-section { padding: 40px 0 56px; }
    /* la barra laterale scende sotto l'articolo: niente larghezza da colonna, e tra articolo
       e barra torna lo stacco pieno */
    .post-layout { gap: 48px; }
    .post-side { flex-basis: auto; }
}

@media (max-width: 600px) {
    .post-card { padding: 28px 20px; }
    .post-body { font-size: 16px; }
    .post-body > p:first-child { font-size: 17px; }
    .post-body h2 { font-size: 23px; }
    .post-body h3 { font-size: 19px; }
    .post-cover { border-radius: 12px; }
    .post-actions { flex-direction: column; align-items: stretch; }
    .post-actions__back { align-self: flex-start; }
    .post-author { flex-direction: column; gap: 16px; padding: 24px 20px; }
    .post-nav { flex-direction: column; }
    .post-nav__img { width: 64px; height: 64px; }
}


/* il sottotitolo dell'articolo e' l'anteprima intera, che in alcuni articoli e' un paragrafo
   lungo: nell'hero si fermano tre righe (il testo completo e' comunque l'inizio dell'articolo) */
.post-hero__lead {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* ==========================================================================
   p-video.css
   ========================================================================== */
/* Testimonianze: componenti comuni a Video interviste (elenco e dettaglio) e Recensioni.
   Qui stanno le schede "Recensioni / Video interviste", la card video e il bottone play;
   p-recensioni.css e p-video-dettaglio.css aggiungono solo i loro componenti.
   Resto in nd.css. */

.testi-hero__lines { height: 369px; }

/* fascia chiara del contenuto */
.testi-body { padding: 40px 0 72px; }
.testi-body__inner { display: flex; flex-direction: column; gap: 36px; }

.testi-body__diamond-1 { left: -110px; top: 420px; width: 300px; height: 300px; border-radius: 60px; }
.testi-body__diamond-2 { left: -60px; top: 1300px; width: 220px; height: 220px; border-color: rgba(242, 106, 33, 0.2); border-radius: 44px; }
.testi-body__glow-1 { right: -200px; top: -80px; width: 420px; height: 700px; }
.testi-body__glow-2 { right: -160px; top: 700px; width: 360px; height: 600px; background: rgba(242, 106, 33, 0.08); }
.testi-body__glow-3 { right: -200px; top: 1400px; width: 420px; height: 600px; }

/* --------------------------------------------------------------------------
   Schede Recensioni / Video interviste
   -------------------------------------------------------------------------- */
.testi-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #e6e1da;
    overflow-x: auto;
    scrollbar-width: none;
}

.testi-tabs::-webkit-scrollbar { display: none; }

.testi-tabs__link {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    margin-bottom: -1px;
    padding: 14px 18px;
    border-bottom: 3px solid transparent;
    color: var(--nd-text);
    font-size: 14px;
    font-weight: 600;
    transition: color .15s ease, border-color .15s ease;
}

.testi-tabs__link:hover { color: #8a2d06; border-bottom-color: rgba(242, 106, 33, 0.35); }

.testi-tabs__link[aria-current] {
    border-bottom-color: var(--nd-accent);
    color: #8a2d06; /* 7.9:1 sul fondo chiaro (AAA): l'arancio di prima era a 4.3:1 */
    font-weight: 700;
}

.testi-tabs__count {
    padding: 2px 8px;
    border-radius: 999px;
    background: #ece8e2;
    color: #3f4147;
    font-size: 12px;
    font-weight: 700;
}

.testi-tabs__count:empty { display: none; }
.testi-tabs__link[aria-current] .testi-tabs__count { background: var(--nd-tile); color: #8a2d06; }

/* --------------------------------------------------------------------------
   Anteprima video (miniatura + bottone play)
   -------------------------------------------------------------------------- */
.vid-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #1b222b;
}

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

.vid-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: var(--nd-grad);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    color: #ffffff;
    transition: scale .18s var(--nd-ease);
}

.vid-play svg { margin-left: 3px; }

a:hover > .vid-play,
a:focus-visible > .vid-play,
a:hover > .vid-thumb > .vid-play { scale: 1.08; }

.vid-play--sm { width: 28px; height: 28px; margin: -14px 0 0 -14px; box-shadow: none; }
.vid-play--sm svg { width: 11px; height: 11px; margin-left: 2px; }

/* etichetta arancio (nome dell'azienda) */
.vid-company {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nd-accent-deep);
    background: var(--nd-grad-text-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vid-company:empty { display: none; }

/* --------------------------------------------------------------------------
   Elenco video interviste
   -------------------------------------------------------------------------- */
.vid-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.vid-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
    box-shadow: 0 1px 2px rgba(40, 30, 20, 0.05);
}

.vid-card__body { display: flex; flex-direction: column; flex-grow: 1; gap: 12px; padding: 20px 22px; }
.vid-card__head { display: flex; align-items: flex-start; gap: 12px; }
.vid-card__who { display: flex; flex-direction: column; flex-grow: 1; gap: 4px; min-width: 0; }
.vid-card__quote-mark { flex-shrink: 0; }

.vid-card__name {
    margin: 0;
    font-family: var(--nd-font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--nd-ink);
}

.vid-card__name a { color: inherit; }
.vid-card__name a:hover { color: var(--nd-accent-deep); }

.vid-card__quote {
    flex-grow: 1;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--nd-text);
}

.vid-card__quote::before { content: "\201C"; }
.vid-card__quote::after { content: "\201D"; }
.vid-card__quote p { display: inline; margin: 0; }

.vid-card__link {
    display: flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    color: var(--nd-accent-deep);
    font-size: 14px;
    font-weight: 700;
}

.vid-card__link svg { transition: translate .18s var(--nd-ease); }
.vid-card__link:hover { color: var(--nd-accent); }
.vid-card__link:hover svg { translate: 4px 0; }

.testi-empty { margin: 0; padding: 48px 0; font-size: 16px; color: var(--nd-text); text-align: center; }

/* --------------------------------------------------------------------------
   Paginatore (le liste oggi non sono paginate, resta pronto se si attiva)
   -------------------------------------------------------------------------- */
.testi-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 8px 0 0; list-style: none; }

.testi-pager a,
.testi-pager span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--nd-card-line);
    border-radius: 999px;
    background: var(--nd-card);
    color: var(--nd-ink);
    font-size: 14px;
    font-weight: 700;
}

.testi-pager a:hover { border-color: var(--nd-accent); color: var(--nd-accent-deep); }
.testi-pager [aria-current], .testi-pager .active { border-color: var(--nd-accent); background: var(--nd-tile); color: var(--nd-accent-deep); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .vid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 600px) {
    .testi-body { padding: 24px 0 56px; }
    .testi-body__inner { gap: 28px; }
    .vid-grid { grid-template-columns: 1fr; gap: 20px; }
    .testi-tabs__link { padding: 12px 12px; }
}

/* ==========================================================================
   p-recensioni.css
   ========================================================================== */
/* Recensioni: si appoggia a p-video.css (hero, fascia, schede in alto). */

/* barra Google: logo, media e numero di recensioni (dati della scheda Google, gli stessi
   scritti nei testi della pagina), link a Maps */
.rev-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    padding: 20px 28px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
}

.rev-bar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--nd-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--nd-ink);
}

.rev-bar__score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    padding-left: 28px;
    border-left: 1px solid var(--nd-light-line);
}
.rev-bar__rating { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.rev-bar__num { font-family: var(--nd-font-display); font-size: 36px; font-weight: 700; line-height: 1; color: var(--nd-ink); }
.rev-bar__of { font-size: 15px; font-weight: 600; color: var(--nd-text-2); }
/* stelle: cinque vuote sotto, cinque piene sopra tagliate al 98% (4,9 su 5) */
.rev-bar__stars { position: relative; display: inline-flex; line-height: 0; }
.rev-bar__stars-empty, .rev-bar__stars-full { display: inline-flex; gap: 2px; }
.rev-bar__stars-empty svg { fill: #e4ded5; }
.rev-bar__stars-full { position: absolute; top: 0; left: 0; width: 98%; overflow: hidden; }
.rev-bar__stars-full svg { flex-shrink: 0; fill: #f5a623; }
.rev-bar__total { margin: 0; font-size: 15px; color: var(--nd-text); }

.rev-bar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    margin-left: auto;
    padding: 0 22px;
    border: 1.5px solid var(--nd-accent);
    border-radius: 999px;
    color: var(--nd-accent-deep);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.rev-bar__link:hover { background-color: rgba(242, 106, 33, 0.08); color: var(--nd-accent-deep); }

/* colonne a cascata: le recensioni hanno lunghezze molto diverse (da una parola a
   un paragrafo), in griglia lascerebbero buchi */
.rev-grid { columns: 3; column-gap: 24px; }

.rev-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
    box-shadow: 0 1px 2px rgba(40, 30, 20, 0.05);
    break-inside: avoid;
}

.rev-card__head { display: flex; align-items: center; gap: 12px; }

.rev-card__avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* finche' la foto non arriva (o se manca) si vede l'icona profilo grigia, tipo WhatsApp */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23dfe5e7'/%3E%3Ccircle cx='12' cy='9.2' r='4.3' fill='%23fff'/%3E%3Cpath d='M3.6 22c.9-4.6 4.2-7.3 8.4-7.3s7.5 2.7 8.4 7.3z' fill='%23fff'/%3E%3C/svg%3E") center / cover no-repeat;
    object-fit: cover;
}

.rev-card__who { display: flex; flex-direction: column; flex-grow: 1; gap: 2px; min-width: 0; }
.rev-card__name { font-size: 15px; font-weight: 700; color: var(--nd-ink); overflow-wrap: anywhere; }
.rev-card__company { font-size: 13px; color: #6b6d74; }
.rev-card__company:empty { display: none; }
.rev-card__source { flex-shrink: 0; }

.rev-card__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--nd-text); overflow-wrap: anywhere; }
.rev-card__text p { margin: 0 0 .6em; }
.rev-card__text p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
    .rev-grid { columns: 2; }
}

@media (max-width: 900px) {
    .rev-bar__link { margin-left: 0; }
}

@media (max-width: 600px) {
    .rev-bar { padding: 20px; }
    .rev-bar__score { padding-left: 0; border-left: 0; }
    .rev-bar__link { justify-content: center; width: 100%; }
    .rev-grid { columns: 1; }
    .rev-card { margin-bottom: 16px; padding: 20px; }
}

/* ==========================================================================
   p-video-dettaglio.css
   ========================================================================== */
/* Dettaglio video intervista: si appoggia a p-video.css (miniature, play, etichette). */

.vdet-body { padding: 56px 0 80px; }

.vdet-body__diamond { left: -110px; top: 620px; width: 300px; height: 300px; border-radius: 60px; }
.vdet-body__glow-1 { right: -200px; top: -80px; width: 420px; height: 700px; }
.vdet-body__glow-2 { right: -160px; top: 800px; width: 360px; height: 600px; background: rgba(242, 106, 33, 0.08); }

/* colonna principale larga, colonna laterale fissa */
.vdet-layout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; align-items: start; gap: 48px; }
.vdet-main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.vdet-aside { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* Colonna fissa mentre si guarda il video e si legge il racconto (sotto i 900px scende sotto
   il contenuto e non e' fissa). La colonna e' alta circa 900px:
   - schermi alti, dove ci sta tutta: resta fissa l'intera colonna;
   - altrimenti citazione e scheda scorrono con la pagina e resta fisso solo il blocco
     "Altre video interviste", che cosi' non finisce mai tagliato. */
@media (min-width: 901px) {
    .vdet-aside { align-self: stretch; }
    .vdet-more { position: sticky; top: calc(var(--nd-header-h) + 24px); }
}

@media (min-width: 901px) and (min-height: 1040px) {
    .vdet-aside { position: sticky; top: calc(var(--nd-header-h) + 24px); align-self: start; }
    .vdet-more { position: static; }
}

/* --------------------------------------------------------------------------
   Lettore: anteprima cliccabile, il video di YouTube si carica solo al clic
   -------------------------------------------------------------------------- */
.vdet-player {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background: var(--nd-bg);
    box-shadow: 0 24px 60px rgba(17, 22, 29, 0.25);
    animation: ndZoom .9s var(--nd-ease) .2s both;
}

.vdet-player__poster { position: absolute; inset: 0; display: block; color: #ffffff; }
.vdet-player__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vdet-player__poster::after { content: ""; position: absolute; inset: 0; background: rgba(17, 22, 29, 0.25); }
.vdet-player__poster:hover { color: #ffffff; }

.vdet-player .vid-play { z-index: 1; width: 88px; height: 88px; margin: -44px 0 0 -44px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.vdet-player .vid-play svg { width: 33px; height: 33px; margin-left: 4px; }

.vdet-player__caption {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 1;
    max-width: calc(100% - 40px);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(17, 22, 29, 0.8);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vdet-player__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   Il racconto (testo dell'intervista, html dal CMS)
   -------------------------------------------------------------------------- */
.vdet-story {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 44px 52px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
}

.vdet-story__title { font-size: 30px; line-height: 1.2; }

.vdet-story__body { font-size: 17px; line-height: 1.75; color: #3a3b40; }
.vdet-story__body p { margin: 0 0 1em; }
.vdet-story__body p:last-child { margin-bottom: 0; }
.vdet-story__body strong, .vdet-story__body b { color: var(--nd-ink); }
.vdet-story__body a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Torna all'elenco + condivisione
   -------------------------------------------------------------------------- */
.vdet-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }

.vdet-back {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 22px;
    border: 1.5px solid var(--nd-accent);
    border-radius: 999px;
    color: var(--nd-accent-deep);
    font-size: 14px;
    font-weight: 700;
    transition: background-color .15s ease;
}

.vdet-back:hover { background-color: rgba(242, 106, 33, 0.08); color: var(--nd-accent-deep); }

.vdet-share { display: flex; align-items: center; gap: 10px; }
.vdet-share__label { font-size: 13px; font-weight: 700; color: var(--nd-text); }

.vdet-share__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e4e0da;
    border-radius: 50%;
    background: var(--nd-card);
    color: #2b2c31;
    transition: border-color .15s ease, color .15s ease;
}

.vdet-share__btn:hover { border-color: var(--nd-accent); color: var(--nd-accent-deep); }

/* --------------------------------------------------------------------------
   Precedente / successivo (riempiti dallo script, nascosti finche' non ci sono)
   -------------------------------------------------------------------------- */
.vdet-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vdet-nav[hidden], .vdet-nav__item[hidden], .vdet-more[hidden] { display: none; }

.vdet-nav__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
    color: var(--nd-ink);
    transition: border-color .15s ease;
}

.vdet-nav__item:hover { border-color: rgba(242, 106, 33, 0.45); color: var(--nd-ink); }
.vdet-nav__item--next { grid-column: 2; flex-direction: row-reverse; text-align: right; }

.vdet-nav .vid-thumb { flex-shrink: 0; width: 120px; border-radius: 10px; }
.vdet-nav__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vdet-nav__dir { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-accent-deep); }
.vdet-nav__name { font-size: 16px; font-weight: 600; }
.vdet-nav__company { font-size: 13px; color: var(--nd-text-2); }
.vdet-nav__company:empty { display: none; }

/* --------------------------------------------------------------------------
   Colonna laterale
   -------------------------------------------------------------------------- */
.vdet-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 30px 28px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--nd-bg);
}

.vdet-quote__glow { right: -80px; top: -60px; width: 220px; height: 220px; background: rgba(242, 106, 33, 0.22); filter: blur(60px); }
.vdet-quote > :not(.deco-glow) { position: relative; }

.vdet-quote__text {
    margin: 0;
    font-family: var(--nd-font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.45;
    color: #ffffff;
}

.vdet-quote__text p { margin: 0; }

.vdet-quote__author { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--nd-line); }
.vdet-quote__name { font-size: 15px; font-weight: 700; color: #ffffff; }
.vdet-quote__company { font-size: 13px; color: var(--nd-on-dark-muted); }
.vdet-quote__company:empty { display: none; }

/* scheda: intervistato e azienda */
.vdet-facts {
    display: flex;
    flex-direction: column;
    padding: 10px 24px;
    border: 1px solid var(--nd-card-line);
    border-radius: 16px;
    background: var(--nd-card);
}

.vdet-facts__title { margin: 0; padding: 12px 0 10px; font-family: var(--nd-font-display); font-size: 17px; font-weight: 600; color: var(--nd-ink); }
.vdet-facts__list { margin: 0; padding: 0; list-style: none; }
.vdet-facts__row { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid #f0ece6; }
.vdet-facts__row .icon-tile { width: 36px; height: 36px; border-radius: 10px; }
.vdet-facts__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vdet-facts__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nd-text-2); }
.vdet-facts__value { margin: 0; font-size: 15px; font-weight: 600; color: var(--nd-ink); }

/* altre interviste */
.vdet-more { display: flex; flex-direction: column; gap: 18px; }

.vdet-more__title {
    margin: 0;
    padding-left: 12px;
    border-left: 3px solid var(--nd-accent);
    font-family: var(--nd-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--nd-ink);
}

.vdet-more__list { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.vdet-more__item { display: flex; align-items: center; gap: 14px; color: var(--nd-ink); }
.vdet-more__item:hover { color: var(--nd-accent-deep); }
.vdet-more .vid-thumb { flex-shrink: 0; width: 112px; border-radius: 8px; }
.vdet-more__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vdet-more__name { font-size: 15px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .vdet-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
    .vdet-story { padding: 36px 36px; }
}

@media (max-width: 900px) {
    .vdet-body { padding: 40px 0 64px; }
    .vdet-layout { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
    .vdet-story { padding: 28px 20px; }
    .vdet-story__title { font-size: 24px; }
    .vdet-story__body { font-size: 16px; line-height: 1.7; }
    .vdet-player { border-radius: 12px; }
    .vdet-player .vid-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
    .vdet-player .vid-play svg { width: 24px; height: 24px; }
    .vdet-player__caption { left: 12px; bottom: 12px; max-width: calc(100% - 24px); font-size: 12px; }
    .vdet-tools { flex-direction: column; align-items: stretch; }
    .vdet-back { justify-content: center; }
    .vdet-share { justify-content: center; }
    .vdet-nav { grid-template-columns: 1fr; gap: 14px; }
    .vdet-nav__item--next { grid-column: auto; }
    .vdet-nav .vid-thumb { width: 96px; }
}


/* ==========================================================================
   Popup "Assistenza": mentre e' aperto la pagina sotto non scorre (classe messa da site.js)
   ========================================================================== */
html.nd-popup-open body { overflow: hidden; }




/* ==========================================================================
   Pagina 404 (HTML nelle impostazioni del CMS, pagina FileNotFound404)
   ========================================================================== */
/* occupa tutta l'altezza della finestra sotto l'header, contenuto centrato in verticale */
.nf-hero { display: flex; align-items: center; min-height: calc(100vh - var(--nd-header-h)); min-height: calc(100svh - var(--nd-header-h)); padding-bottom: 64px; }
.nf-hero > .container { width: 100%; }
.nf-links { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 12px; }
.nf-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--nd-on-dark); text-decoration: underline; text-decoration-color: rgba(242, 106, 33, 0.5); text-underline-offset: 4px; }
.nf-links a:hover { color: var(--nd-accent-on-dark); }