:root {
    color-scheme: light;
    --notte: #0b1f3a;
    --notte-2: #123060;
    --blu: #1d4ed8;
    --ciano: #38bdf8;
    --ambra: #ffb020;
    --ambra-2: #ff9500;
    --sfondo: #ffffff;
    --chiaro: #f1f6fd;
    --linea: #d8e2f0;
    --testo: #16263f;
    --tenue: #4a5b75;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font: 1.125rem/1.65 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

h1, h2, h3, h4 { margin: 0; color: var(--notte); line-height: 1.15; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -.02em; }
h3 { font-size: 1.3rem; font-weight: 700; }
h4 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0; }

a { color: var(--blu); }
:focus-visible { outline: 3px solid var(--ambra-2); outline-offset: 3px; }

.contenitore { width: min(100% - 32px, 1160px); margin-inline: auto; }
.sezione { padding-block: 88px; }

.salta {
    position: absolute;
    z-index: 30;
    left: 16px;
    top: -60px;
    padding: 8px 14px;
    background: var(--notte);
    color: #fff;
}
.salta:focus { top: 8px; }

/* Barra alta */
.barra-alta { background: var(--notte); color: #cfe0f7; font-size: .875rem; }
.barra-alta .contenitore { display: flex; justify-content: space-between; gap: 24px; padding-block: 7px; }
.barra-alta a { color: #fff; }

/* Testata */
.testata {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid var(--linea);
    background: #fff;
}
.testata .contenitore {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 28px;
    padding-block: 10px;
}
.logo {
    display: inline-block;
    margin-right: auto;
    padding-block: 6px;
    color: var(--notte);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-decoration: none;
}
.logo span { color: var(--blu); }
.testata nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.testata nav a { padding-block: 11px; color: var(--notte); font-size: 1rem; font-weight: 600; text-decoration: none; }
.testata nav a:hover { color: var(--blu); }
.testata-chiama { padding: 9px 16px; font-size: 1rem; }

/* Bottoni */
.bottone {
    display: inline-block;
    padding: 14px 24px;
    border: 2px solid var(--notte);
    border-radius: 8px;
    background: transparent;
    color: var(--notte);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: transform .15s, background-color .15s, border-color .15s, color .15s;
}
.bottone:hover { transform: translateY(-2px); background: var(--notte); color: #fff; }
.primario { border-color: var(--ambra); background: var(--ambra); color: var(--notte); }
.primario:hover { border-color: var(--ambra-2); background: var(--ambra-2); color: var(--notte); }
.chiaro { border-color: #fff; color: #fff; }
.chiaro:hover { background: #fff; color: var(--notte); }

/* Parte alta scura */
.sfondo-scuro {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--notte) 0%, var(--notte-2) 100%);
    color: #e6eefb;
}
.sfondo-scuro::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(56 189 248 / .28), transparent 65%);
    animation: alone 9s ease-in-out infinite alternate;
    pointer-events: none;
}
.sfondo-scuro > * { position: relative; }
@keyframes alone { to { transform: translate(-12%, 14%) scale(1.15); } }

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    padding-block: 64px 48px;
}
.hero h1 { color: #fff; font-size: clamp(2.5rem, 5.6vw, 4.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.hero p { max-width: 34em; margin-top: 22px; font-size: 1.2rem; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-immagine { width: 100%; border-radius: 16px; box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
.hero .primario { animation: richiamo 3s ease-in-out infinite; }
@keyframes richiamo { 50% { box-shadow: 0 0 0 10px rgb(255 176 32 / .18); } }

.numeri {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-block: 0;
    padding-block: 28px 44px;
    border-top: 1px solid rgb(255 255 255 / .18);
}
.numeri > div { display: flex; flex-direction: column-reverse; }
.numeri dt { font-size: 1rem; }
.numeri dd { margin: 0; color: var(--ambra); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.2; }

.briciole {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    padding-top: 12px;
    font-size: .95rem;
}
.briciole a { padding-block: 11px; color: #fff; }
.hero-pagina { padding-block: 16px 64px; }
.hero-pagina h1 { font-size: clamp(1.9rem, 5vw, 3.6rem); overflow-wrap: anywhere; }
.hero-pagina p + p { margin-top: 14px; }

/* Scorciatoie per problema */
.problemi { padding-block: 72px 16px; }
.problemi h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.problemi ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 14px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.problemi a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
    padding: 18px 20px;
    border: 2px solid var(--linea);
    border-radius: 12px;
    color: var(--notte);
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s, border-color .15s;
}
.problemi a:hover { transform: translateY(-3px); border-color: var(--blu); }
.problemi span { color: var(--blu); font-size: 1.3rem; transition: transform .15s; }
.problemi a:hover span { transform: translateX(4px); }

/* Servizi per gruppo */
.sezione-testa { padding-top: 72px; padding-bottom: 40px; }
.introduzione { max-width: 40em; margin-top: 16px; font-size: 1.2rem; }

.gruppo { padding-block: 64px; border-top: 1px solid var(--linea); }
.gruppo:nth-of-type(odd) { background: var(--chiaro); }
.griglia-gruppo {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: 56px;
}
.gruppo-testa { position: sticky; top: 100px; }
.gruppo-testa h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
.gruppo-testa p { margin-top: 12px; color: var(--tenue); }
.gruppo-servizi { display: grid; gap: 20px; }

.riga {
    position: relative;
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 16px;
    padding-right: 24px;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: #fff;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.riga:hover { transform: translateY(-3px); border-color: var(--blu); box-shadow: 0 14px 34px rgb(11 31 58 / .12); }
.riga img { width: 100%; border-radius: 10px; }
.riga h4 a { color: inherit; text-decoration: none; }
/* Tutta la riga porta alla pagina del servizio */
.riga h4 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.riga p { margin-top: 6px; color: var(--tenue); font-size: 1.0625rem; line-height: 1.5; }
.freccia { color: var(--blu); font-size: 1.5rem; transition: transform .18s; }
.riga:hover .freccia { transform: translateX(5px); }

.altri-titolo { font-size: 1.6rem; font-weight: 800; }
.altri { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.altri li { padding: 8px 16px; border-radius: 999px; background: var(--chiaro); color: var(--notte); font-size: 1rem; font-weight: 600; }

/* Esperienza */
#esperienza { padding-top: 0; }
.griglia-esperienza { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.griglia-esperienza p { margin-top: 16px; }
.credenziali ul { margin: 10px 0 0; padding: 0; list-style: none; }
.credenziali li { padding-block: 10px; border-top: 1px solid var(--linea); font-weight: 600; }
.attestati-titolo { margin-top: 56px; font-size: 1.6rem; font-weight: 800; }
.griglia-attestati { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 24px; }
.attestato { margin: 0; }
.attestato img { width: 100%; border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 8px 22px rgb(11 31 58 / .1); transition: transform .18s; }
.attestato:hover img { transform: translateY(-4px); }
.attestato figcaption { margin-top: 12px; font-size: 1rem; line-height: 1.35; }
.attestato strong, .attestato span { display: block; }
.attestato strong { color: var(--notte); }
.attestato span { margin-top: 2px; color: var(--tenue); }

/* Pagine dei servizi */
.griglia-pagina { display: grid; grid-template-columns: 2fr 3fr; gap: 56px; }
.griglia-pagina h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.elenco-quando { margin: 20px 0 0; padding: 0; list-style: none; }
.elenco-quando li { position: relative; padding: 13px 0 13px 28px; border-top: 1px solid var(--linea); font-weight: 600; }
.elenco-quando li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 1.35em;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ambra);
}
.elenco-cosa {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 20px;
    margin-top: 20px;
}
.elenco-cosa > div { padding: 20px; border-radius: 12px; background: var(--chiaro); }
.elenco-cosa h3 { font-size: 1.125rem; }
.elenco-cosa p { margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; }
.correlati {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 24px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.correlati li { padding: 20px 22px; border: 1px solid var(--linea); border-radius: 12px; }
.correlati a { display: inline-block; padding-block: 9px; font-size: 1.125rem; font-weight: 700; text-underline-offset: 4px; }
.correlati p { margin-top: 2px; color: var(--tenue); font-size: 1.0625rem; line-height: 1.5; }

/* Come lavoriamo */
.fascia { background: var(--chiaro); }
.passi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 32px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: passo;
}
.passi li { counter-increment: passo; }
.passi li::before {
    content: counter(passo);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--notte);
    color: var(--ambra);
    font-size: 1.25rem;
    font-weight: 800;
}
.passi p { margin-top: 8px; }

/* Domande frequenti */
.domande { margin-top: 28px; }
.domande details { margin-bottom: 10px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.domande summary { padding: 16px 20px; color: var(--notte); font-size: 1.125rem; font-weight: 700; cursor: pointer; }
.domande p { max-width: 46em; padding: 0 20px 18px; }

/* Contatti */
.contatti { background: linear-gradient(135deg, var(--notte) 0%, var(--notte-2) 100%); color: #fff; }
.contatti h2 { color: #fff; }
.griglia-contatti { display: grid; grid-template-columns: 2fr 3fr; gap: 56px; }
.griglia-contatti p { margin-top: 16px; font-size: 1.2rem; }
.contatti dl { margin: 0; }
.contatti dl > div { padding-block: 14px; border-top: 1px solid rgb(255 255 255 / .22); }
.contatti dl > div:first-child { padding-top: 0; border-top: 0; }
.contatti dt { color: var(--ambra); font-size: .9375rem; font-weight: 700; }
.contatti dd {
    margin: 4px 0 0;
    font-size: clamp(1.25rem, 3.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.contatti dd.testo-piccolo { font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
.contatti dd a { display: inline-block; padding-block: 7px; color: #fff; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.contatti dd a:hover { color: var(--ambra); }

/* Piè di pagina */
.piede-servizi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 0 24px;
    padding-block: 28px 12px;
    border-bottom: 1px solid var(--linea);
    font-size: 1rem;
}
.piede-servizi a { padding-block: 11px; text-underline-offset: 4px; }
.piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-block: 18px;
    color: var(--tenue);
    font-size: 1rem;
}
.piede-link { display: flex; flex-wrap: wrap; gap: 0 20px; }
.piede-link a { padding-block: 11px; }

.barra-mobile { display: none; }

/* Comparsa allo scorrimento: se il browser non la supporta, il contenuto resta visibile */
@supports (animation-timeline: view()) {
    .rivela {
        animation: comparsa linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}
@keyframes comparsa {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
    .testata-chiama { display: none; }
    .griglia-gruppo { grid-template-columns: 1fr; gap: 24px; }
    .gruppo-testa { position: static; }
}

@media (max-width: 860px) {
    .barra-alta { display: none; }
    .hero, .griglia-contatti, .griglia-esperienza, .griglia-pagina { grid-template-columns: 1fr; }
    .hero { gap: 36px; padding-block: 44px 32px; }
    .griglia-contatti, .griglia-esperienza { gap: 28px; }
    .griglia-pagina { gap: 40px; }
    .sezione { padding-block: 60px; }
    .numeri { grid-template-columns: repeat(2, 1fr); }
    .gruppo { padding-block: 48px; }
}

@media (max-width: 640px) {
    body { padding-bottom: 76px; font-size: 1.0625rem; }
    html { scroll-padding-top: 16px; }
    .testata { position: static; }
    .menu-secondario { display: none; }
    .riga { grid-template-columns: 104px 1fr; gap: 14px; padding: 12px; }
    .riga h4 { font-size: 1.0625rem; }
    .riga p { font-size: 1rem; }
    .freccia { display: none; }
    .griglia-attestati { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .attestato figcaption { font-size: .9375rem; }
    .barra-mobile {
        position: fixed;
        inset: auto 0 0;
        z-index: 25;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 10px 16px;
        border-top: 1px solid var(--linea);
        background: #fff;
    }
    .barra-mobile .bottone { padding-block: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sfondo-scuro::before, .hero .primario, .rivela { animation: none; }
    .bottone, .riga, .problemi a, .problemi span, .freccia, .attestato img { transition: none; }
}