/* Vedetta — sito pubblico. "Il posto di guardia".
   Una vedetta che di notte sorveglia l'orizzonte con la lanterna accesa: blu notte, carta
   chiara, luce ambra. Pensato per chi ha cinquant'anni (caratteri grandi, contrasto alto,
   un'azione per volta) senza essere noioso per chi ne ha trenta.
   Caratteri sul nostro server (la CSP permette solo 'self'):
   - Atkinson Hyperlegible Next, disegnato per chi vede meno bene;
   - IBM Plex Mono, per le voci del "registro di guardia" (orari, segnali, numeri). */

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
    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: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Atkinson Hyperlegible Next";
    font-style: italic;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/atkinson-hyperlegible-next/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2-variations");
    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: "Fraunces";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/fraunces/fraunces-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url("../fonts/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("../fonts/ibm-plex-mono/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root {
    /* La carta del registro, l'inchiostro, la notte, la lanterna. */
    --bg: #ffffff;
    --bg-soft: #f2f5f9;
    --surface: #ffffff;
    --text: #14202e;
    --muted: #4b5563;
    --border: #dbe2ea;
    --night: #0f2238;
    --night-2: #173152;
    --on-night: #ffffff;
    --on-night-muted: #b9c6d6;
    --primary: #1b4f8c;
    --primary-strong: #0f2238;
    --primary-soft: #e3ebf5;
    --lantern: #f2a900;
    --lantern-deep: #8a5d00;
    --lantern-soft: #fff4d6;
    --amber: var(--lantern);
    --accent: var(--primary);
    --danger: #b3261e;
    --danger-bg: #fbe7e4;
    --warning: #7a4f00;
    --warning-bg: #fcf0d2;
    --ok: #1e6b3a;
    --ok-bg: #e3f2e7;
    --radius: 10px;
    --shadow: none;
    --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0c1726;
        --bg-soft: #111f33;
        --surface: #142338;
        --text: #eef1f5;
        --muted: #aab6c5;
        --border: #2a3b52;
        --night: #081222;
        --night-2: #10213a;
        --primary: #9cc0ff;
        --primary-strong: #c5daff;
        --primary-soft: #1a2d49;
        --lantern: #ffc233;
        --lantern-deep: #ffc233;
        --lantern-soft: #3a2e10;
        --danger: #ff8a80;
        --danger-bg: #3a1d1b;
        --warning: #ffd180;
        --warning-bg: #3a2e12;
        --ok: #81c995;
        --ok-bg: #16301f;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 19px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--primary-strong); text-decoration-color: var(--lantern); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--lantern); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--lantern); color: #14202e; }

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 16px; }
.wrap--wide { max-width: 72rem; }
main.wrap { padding-top: 32px; padding-bottom: 64px; }

h1, h2, h3 { font-weight: 800; letter-spacing: -.012em; }
h1 { font-size: 2.2rem; line-height: 1.12; margin: 0 0 14px; }
h2 { font-size: 1.4rem; line-height: 1.22; margin: 30px 0 10px; }
h3 { font-size: 1.12rem; margin: 0 0 6px; }
p { margin: 0 0 12px; }

/* La striscia di guardia: la lanterna accesa e la promessa, su ogni pagina. */
.watch-strip { background: var(--night); color: var(--on-night); font: 500 .8rem/1.3 var(--mono); letter-spacing: .02em; }
.watch-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
.watch-strip strong { font-weight: 600; color: var(--lantern); }
.lamp { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--lantern); box-shadow: 0 0 0 3px rgba(242, 169, 0, .25), 0 0 12px rgba(242, 169, 0, .8); vertical-align: 1px; animation: lamp 2.4s ease-in-out infinite; }
@keyframes lamp { 50% { box-shadow: 0 0 0 5px rgba(242, 169, 0, .08), 0 0 4px rgba(242, 169, 0, .4); } }
.watch-strip .free { margin-left: auto; color: var(--on-night); text-decoration: none; }
.watch-strip .free:hover { color: var(--on-night); text-decoration: underline; text-decoration-color: var(--lantern); }
@media (max-width: 720px) { .watch-strip .free { margin-left: 0; } .watch-strip .when { display: none; } }

/* Intestazione */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .96); border-bottom: 1.5px solid var(--border); backdrop-filter: saturate(1.2) blur(6px); }
@media (prefers-color-scheme: dark) { .site-header { background: rgba(12, 23, 38, .96); } }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.35rem; text-decoration: none; color: var(--text); line-height: 1.05; letter-spacing: -.01em; }
.brand small { display: block; font: 500 .7rem/1.3 var(--mono); color: var(--muted); letter-spacing: .03em; margin-top: 3px; }
.brand:hover { color: var(--text); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.site-nav a { padding: 8px 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1rem; border-bottom: 3px solid transparent; }
.site-nav a:hover { color: var(--text); border-bottom-color: var(--lantern); }
.site-nav a.button { margin-left: 8px; padding: 10px 16px; border-bottom: 0; color: var(--on-night); }
.site-nav a.button:hover { color: var(--on-night); }
.menu { margin-left: auto; display: none; }
.menu summary { list-style: none; cursor: pointer; font-weight: 800; padding: 9px 16px; border: 2px solid var(--text); border-radius: 8px; color: var(--text); }
.menu summary::-webkit-details-marker { display: none; }
@media (max-width: 960px) {
    .menu { display: block; }
    .site-header .wrap > .site-nav { display: none; }
    .menu .site-nav { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1.5px solid var(--border); padding: 8px 16px 16px; }
    .menu[open] .site-nav { display: flex; }
    .menu .site-nav a { padding: 14px 12px; font-size: 1.1rem; border-bottom: 1px solid var(--border); }
    .menu .site-nav a.button { margin: 12px 0 0; justify-content: center; border-bottom: 0; }
}

/* Componenti */
.card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 22px; margin: 16px 0; }
.card h2 { margin-top: 0; }
label { display: block; font-weight: 800; margin-bottom: 8px; }
textarea, select, input { width: 100%; font: inherit; color: inherit; background: var(--surface); border: 2px solid var(--border); border-radius: 8px; padding: 12px 14px; }
textarea:focus, select:focus, input:focus { border-color: var(--text); outline: none; box-shadow: 0 0 0 4px var(--lantern-soft); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px; }
.row label { width: 100%; margin: 0; }
.row select, .row input { flex: 1 1 12rem; width: auto; }
/* I pulsanti sono "accesi": blu notte con la luce della lanterna sotto. */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 800; background: var(--night); color: var(--on-night); border: 0; border-radius: 8px; padding: 13px 22px; cursor: pointer; text-decoration: none; line-height: 1.2; box-shadow: inset 0 -4px 0 var(--lantern); transition: transform .08s ease, background .15s ease; }
button:hover, .button:hover { background: var(--night-2); color: var(--on-night); }
button:active, .button:active { transform: translateY(1px); box-shadow: inset 0 -2px 0 var(--lantern); }
@media (prefers-color-scheme: dark) {
    button, .button, .site-nav a.button { background: var(--lantern); color: #14202e; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
    button:hover, .button:hover, .site-nav a.button:hover { background: #ffd060; color: #14202e; }
}
.button--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.button--ghost:hover { background: var(--bg-soft); color: var(--text); }
.button--whatsapp { background: #1f8f4e; color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.button--whatsapp:hover { background: #197a42; color: #fff; }
.button--telegram { background: #2a7fbf; color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.button--telegram:hover { background: #226ca3; color: #fff; }
.button--light { background: var(--lantern); color: #14202e; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.button--light:hover { background: #ffc233; color: #14202e; }
.hint, .muted { color: var(--muted); font-size: .92rem; }
.error { color: var(--danger); font-weight: 700; }
.notice { background: var(--ok-bg); color: var(--ok); border-radius: 8px; padding: 12px 16px; font-weight: 700; }
/* Le etichette: come una voce del registro di guardia. */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 .8rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lantern-deep); margin-bottom: 12px; }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--lantern); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.check-form textarea { min-height: 150px; font-size: 1.08rem; }
.check-form .row select { flex: 1 1 9rem; }
.check-form .row button { flex: 2 1 14rem; font-size: 1.1rem; padding: 15px 22px; }

/* Verdetti: un semaforo, perché si capisca prima ancora di leggere. */
.verdict { position: relative; border-radius: var(--radius); padding: 22px 22px 22px 76px; margin: 16px 0; background: var(--surface); border: 2px solid var(--border); }
.verdict::before { content: ""; position: absolute; left: 20px; top: 22px; width: 38px; height: 38px; border-radius: 50%; background: #8a94a3; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 5px var(--bg-soft); }
.verdict h1 { font-size: 1.8rem; }
.verdict h2 { margin-top: 0; }
.verdict--danger { background: var(--danger-bg); border-color: var(--danger); }
.verdict--danger::before { background: #d93025; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 5px rgba(217, 48, 37, .18), 0 0 22px rgba(217, 48, 37, .55); }
.verdict--danger h1, .verdict--danger h2 { color: var(--danger); }
.verdict--warning { background: var(--warning-bg); border-color: var(--lantern); }
.verdict--warning::before { background: var(--lantern); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 0 0 5px rgba(242, 169, 0, .2), 0 0 22px rgba(242, 169, 0, .6); }
.verdict--ok { background: var(--ok-bg); border-color: var(--ok); }
.verdict--ok::before { background: #2e9e57; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 0 0 5px rgba(46, 158, 87, .2), 0 0 22px rgba(46, 158, 87, .5); }
@media (max-width: 560px) { .verdict { padding: 70px 18px 18px; } .verdict::before { left: 18px; top: 18px; } }
.assessment--truffa { border-color: var(--danger); background: var(--danger-bg); }
.assessment--sospetto { border-color: var(--lantern); background: var(--warning-bg); }
.assessment--legittimo { border-color: var(--ok); background: var(--ok-bg); }
.signs li { margin-bottom: 6px; }
.official { border-left: 6px solid var(--night); }
.official ul { margin: 0; padding-left: 1.2em; }
.sample, .example { margin: 8px 0; padding: 14px 18px; background: var(--bg-soft); border: 1.5px dashed var(--border); border-radius: 8px; font-style: italic; }
.confirm .row { display: flex; gap: 10px; flex-wrap: wrap; }
.confirm input { flex: 1 1 180px; min-width: 0; }

/* Elenchi */
.campaign-list { list-style: none; padding: 0; margin: 0; }
.campaign-list li { padding: 13px 0; border-bottom: 1.5px solid var(--border); }
.campaign-list a { display: block; font-weight: 700; }
.lesson-list, .quiz { list-style: none; padding: 0; }
.lesson-list .card p { margin-bottom: 0; }
.quiz-cta { display: block; text-decoration: none; color: inherit; border-color: var(--text); }
.quiz-cta strong { display: block; color: var(--text); font-size: 1.15rem; }
details summary { cursor: pointer; font-weight: 800; color: var(--primary); }
.answer { padding: 10px 12px; border-radius: 8px; }
.answer--scam { background: var(--danger-bg); }
.answer--ok { background: var(--ok-bg); }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); text-decoration: none; font-weight: 700; color: var(--text); }
.chips a:hover { border-color: var(--text); }
.ranking { padding-left: 1.4em; }
.ranking li { padding: 4px 0; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin: 24px 0; }
.pager-next { margin-left: auto; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.spaced { margin-top: 12px; }

/* Numeri: come gli strumenti del posto di guardia. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.stats div { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px; }
.stats strong { display: block; font: 600 2rem/1.1 var(--mono); color: var(--text); }
.stats span { font-size: .9rem; color: var(--muted); }
.stats--two { grid-template-columns: repeat(2, 1fr); }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 140px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.bar-value, .bar-label { font: 500 .78rem var(--mono); color: var(--muted); }
.bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bar-fill { width: 100%; max-width: 36px; background: var(--night); border-radius: 4px 4px 0 0; min-height: 2px; box-shadow: inset 0 3px 0 var(--lantern); }
@media (prefers-color-scheme: dark) { .bar-fill { background: var(--primary); } }
.bar-fill--0 { height: 2px; } .bar-fill--1 { height: 10%; } .bar-fill--2 { height: 20%; } .bar-fill--3 { height: 30%; } .bar-fill--4 { height: 40%; } .bar-fill--5 { height: 50%; }
.bar-fill--6 { height: 60%; } .bar-fill--7 { height: 70%; } .bar-fill--8 { height: 80%; } .bar-fill--9 { height: 90%; } .bar-fill--10 { height: 100%; }

/* Sezioni a tutta larghezza */
.section { padding: 64px 0; }
.section--soft { background: var(--bg-soft); }
.section--primary, .section--night { background: var(--night); color: var(--on-night); }
.section--primary .section-head p, .section--primary p, .section--night p { color: var(--on-night-muted); }
.section--night h2, .section--night h3 { color: var(--on-night); }
.section-head { max-width: 44rem; margin-bottom: 26px; }
.section-head h2 { font-size: 2rem; margin: 0 0 8px; }
.section-head p { color: var(--muted); font-size: 1.12rem; margin: 0; }
.section-foot { margin-top: 22px; font-weight: 800; }

/* La prima schermata: una domanda, il modulo, il faro che fa luce sul mare. */
.hero { position: relative; overflow: hidden; padding: 56px 0 72px; background: var(--bg-soft); }
.hero--night { background: radial-gradient(ellipse 50% 60% at 80% 40%, rgba(242, 169, 0, .10), transparent 70%), linear-gradient(180deg, #0a1628 0%, #122a4b 100%); color: var(--on-night); padding: 52px 0 0; }
.hero--night .lead { color: var(--on-night-muted); }
.hero--night .eyebrow { color: var(--lantern); }
.hero--night a:not(.button) { color: #ffd780; }
.hero--night .card a { color: var(--primary); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: end; }
.hero h1 { font-size: 3.1rem; line-height: 1.04; margin-bottom: 12px; }
.hero h1 em { font-style: normal; color: var(--lantern); }
.hero .lead { font-size: 1.25rem; max-width: 32rem; margin-bottom: 22px; }
.hero:not(.hero--night) .lead { color: var(--muted); }
.hero:not(.hero--night) h1 em { color: var(--primary); }
.hero-main { position: relative; z-index: 4; padding-bottom: 64px; }
.hero .check-form { position: relative; margin: 0; color: var(--text); border: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.hero-form { position: relative; max-width: 36rem; }
/* Tre certezze, brevissime, sotto il modulo. */
.assurances { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 18px 0 0; font-weight: 700; color: var(--on-night); }
.assurances span { display: inline-flex; align-items: center; gap: 8px; }
.assurances span::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--lantern) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2314202e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.hero--night .assurances a { color: #ffd780; font-weight: 700; }
/* "Prova con un esempio": il messaggio si scrive da solo. */
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: .95rem; }
.examples span { color: var(--muted); font-weight: 700; }
.examples button { padding: 6px 12px; border-radius: 999px; background: var(--bg-soft); color: var(--text); font-weight: 700; font-size: .92rem; box-shadow: inset 0 0 0 1.5px var(--border); }
.examples button:hover { background: var(--lantern-soft); box-shadow: inset 0 0 0 1.5px var(--lantern); color: var(--text); }
@media (prefers-color-scheme: dark) { .examples button { background: var(--bg-soft); color: var(--text); } .examples button:hover { background: var(--lantern-soft); color: var(--text); } }
.trust { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.trust li { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; }
.trust li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--lantern) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2314202e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }

/* Il faro a granelli: una tela dietro a tutta la prima schermata (public/js/lighthouse.js). */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-side { position: relative; align-self: stretch; min-height: 520px; }
.sea { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 3; display: block; width: 100%; pointer-events: none; overflow: hidden; }
/* Mare mosso, appena: ogni onda scorre di un periodo esatto (giro senza stacchi) e respira su e giù. */
.sea__wave { animation: sea-drift 28s linear infinite; }
.sea__wave--front { animation-duration: 19s; animation-direction: reverse; }
.sea__swell { animation: sea-swell 7s ease-in-out infinite alternate; }
.sea__swell--front { animation-duration: 5.5s; animation-delay: -2s; }
.sea__wave--back { --sea-period: -720px; }
.sea__wave--front { --sea-period: -480px; }
@keyframes sea-drift { from { transform: translateX(0); } to { transform: translateX(var(--sea-period)); } }
@keyframes sea-swell { from { transform: translateY(-1.5px); } to { transform: translateY(1.5px); } }
@media (prefers-reduced-motion: reduce) { .lamp, .seal__ring, .sea__wave, .sea__swell { animation: none !important; } }
@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 0; }
    .hero h1 { font-size: 2.3rem; }
    .hero-side { min-height: 0; padding-bottom: 76px; }
    .hero--night { padding: 36px 0 0; }
    .hero-main { padding-bottom: 44px; }
}

/* In corso adesso: la vedetta sta sorvegliando queste truffe. */
.live-now { position: relative; z-index: 5; margin: 0 0 0 auto; max-width: 360px; padding: 16px 18px 14px; border-radius: 12px; background: rgba(8, 18, 34, .72); border: 1.5px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); color: var(--on-night); }
.live-now__head { margin: 0 0 10px; font: 600 .78rem/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #ffb4a8; }
.lamp--red { background: #ff5a4a; box-shadow: 0 0 0 3px rgba(255, 90, 74, .25), 0 0 12px rgba(255, 90, 74, .8); animation-name: lamp-red; }
@keyframes lamp-red { 50% { box-shadow: 0 0 0 5px rgba(255, 90, 74, .08), 0 0 4px rgba(255, 90, 74, .4); } }
.live-now__items { display: grid; }
.live-now__item { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 3px; color: var(--on-night); text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, visibility .45s; }
.live-now__item.is-active { opacity: 1; visibility: visible; transform: none; }
.hero--night a.live-now__item, .hero--night a.live-now__item:hover { color: var(--on-night); }
.live-now__item strong { font-size: 1.12rem; line-height: 1.3; }
.live-now__item:hover strong { text-decoration: underline; text-decoration-color: var(--lantern); }
.live-now__item small { font: 500 .76rem var(--mono); color: var(--on-night-muted); }
.live-now__tag { align-self: flex-start; font: 600 .7rem var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: rgba(255, 90, 74, .18); color: #ffb4a8; }
.live-now__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; font-weight: 700; }
.live-now__dots { display: flex; gap: 6px; }
.live-now__dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .3); box-shadow: none; }
.live-now__dots button[aria-current] { background: var(--lantern); }
.live-now__dots button:hover { background: rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: reduce) { .live-now__item { transition: none; } .lamp--red { animation: none; } }
@media (max-width: 960px) { .live-now { margin: 0; max-width: none; } }

/* Il sigillo: gratis, per sempre, per tutti. */
.seal { position: absolute; right: -22px; top: -46px; width: 112px; height: 112px; z-index: 2; transform: rotate(-10deg); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3)); }
.seal svg { width: 100%; height: 100%; display: block; }
.seal__ring { transform-origin: 60px 60px; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 960px) { .seal { right: -6px; top: -40px; width: 90px; height: 90px; } }

/* Iscriviti: la vedetta che ti avvisa prima. */
.alert-band { background: var(--surface); border-bottom: 1.5px solid var(--border); }
.alert-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; padding-top: 44px; padding-bottom: 44px; }
.alert-band h2 { font-size: 2rem; margin: 0 0 10px; }
.alert-band ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.alert-band li { display: flex; gap: 10px; align-items: flex-start; }
.alert-band li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 9px; border-radius: 50%; background: var(--lantern); box-shadow: 0 0 0 4px var(--lantern-soft); }
.alert-band form { background: var(--bg-soft); border-radius: var(--radius); padding: 24px; border: 1.5px solid var(--border); }
.alert-band .signup button { font-size: 1.08rem; }
.alert-preview { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1.5px solid var(--border); border-left: 5px solid var(--danger); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: .95rem; }
.alert-preview b { display: block; }
.alert-preview small { font: 500 .75rem var(--mono); color: var(--muted); }
@media (max-width: 960px) { .alert-band .wrap { grid-template-columns: 1fr; gap: 20px; } .alert-band h2 { font-size: 1.6rem; } }

/* Il registro di guardia: le truffe in corso, come voci annotate. */
.live { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.live-card { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px 22px; text-decoration: none; color: var(--text); }
.live-card::before { content: ""; position: absolute; left: -1.5px; top: 14px; bottom: 14px; width: 5px; border-radius: 0 3px 3px 0; background: var(--danger); }
.live-card:hover { border-color: var(--text); color: var(--text); }
.live-card strong { font-size: 1.08rem; line-height: 1.3; }
.live-card .muted { margin-top: auto; font: 500 .8rem/1.4 var(--mono); }
.badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font: 600 .74rem/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; background: var(--danger-bg); color: var(--danger); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--official { background: var(--primary-soft); color: var(--primary); }

/* Come lavora la vedetta: tre tappe lungo una linea. */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; border-top: 2px dashed var(--border); }
.steps li { position: relative; counter-increment: step; padding: 0 8px 0 0; }
.steps li::before { content: counter(step); position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--night); color: var(--lantern); font: 600 1.2rem var(--mono); margin-bottom: 14px; box-shadow: 0 0 0 6px var(--bg-soft); }
.section:not(.section--soft) .steps li::before { box-shadow: 0 0 0 6px var(--bg); }
.steps h3 { font-size: 1.25rem; }
.steps p { margin: 0; color: var(--muted); }
@media (max-width: 960px) { .steps::before { left: 23px; right: auto; top: 24px; bottom: 24px; border-top: 0; border-left: 2px dashed var(--border); } .steps li { padding-left: 68px; } .steps li::before { position: absolute; left: 0; top: 0; } }

/* La promessa della vedetta. */
.pledge { position: relative; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 30px 32px; }
.pledge ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; }
.pledge li { position: relative; padding-left: 50px; }
.pledge li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--night); color: var(--lantern); font-weight: 800; }
.pledge strong { display: block; font-size: 1.15rem; margin: 3px 0 4px; }
.pledge span { color: var(--muted); }
.pledge .sign { margin-top: 22px; padding-top: 16px; border-top: 1.5px dashed var(--border); font: 500 .85rem/1.5 var(--mono); color: var(--muted); }
@media (max-width: 720px) { .pledge { padding: 22px 18px; } .pledge ul { grid-template-columns: 1fr; } }

.audiences { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.audience { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 22px; }
.audience .icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--night); color: var(--lantern); margin-bottom: 12px; }
.audience .icon svg { width: 24px; height: 24px; }
.audience p { color: var(--muted); margin: 0 0 8px; }

.app-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center; }
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.store { display: inline-flex; flex-direction: column; padding: 8px 16px; border-radius: 8px; background: var(--night); color: #fff; text-decoration: none; line-height: 1.15; min-width: 150px; box-shadow: inset 0 -3px 0 var(--lantern); }
.store small { font: 500 .7rem var(--mono); opacity: .85; }
.store strong { font-size: 1.05rem; }
.phone { width: 260px; height: 520px; margin: 0 auto; border-radius: 40px; background: #0b1a2c; padding: 12px; box-shadow: 0 20px 50px rgba(15, 34, 56, .35); }
.phone-screen { height: 100%; border-radius: 30px; background: #f2f5f9; color: #14202e; padding: 34px 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: .8rem; line-height: 1.4; overflow: hidden; }
.phone-screen .p-title { font-weight: 800; font-size: 1.05rem; }
.phone-screen .p-box { border: 1.5px solid #dbe2ea; background: #fff; border-radius: 10px; padding: 10px; color: #4b5563; font-style: italic; }
.phone-screen .p-verdict { border: 2px solid #b3261e; background: #fbe7e4; border-radius: 10px; padding: 10px; }
.phone-screen .p-verdict b { color: #b3261e; display: block; font-size: .95rem; }
.phone-screen .p-button { background: #0f2238; color: #fff; border-radius: 8px; padding: 10px; text-align: center; font-weight: 800; box-shadow: inset 0 -3px 0 #f2a900; }
.phone-screen .p-tabs { margin-top: auto; display: flex; justify-content: space-around; border-top: 1.5px solid #dbe2ea; padding-top: 8px; color: #4b5563; font-weight: 700; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.business { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.business p { max-width: 44rem; margin: 0; }
.business h2 { margin: 0 0 8px; color: var(--on-night); }

.faq details { border-bottom: 1.5px solid var(--border); padding: 16px 0; }
.faq summary { color: var(--text); font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--night); color: var(--lantern); font-weight: 800; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: 10px 0 0; color: var(--muted); }

@media (max-width: 960px) {
    .live, .steps, .split { grid-template-columns: 1fr; }
    .audiences { grid-template-columns: 1fr 1fr; }
    .app-grid { grid-template-columns: 1fr; }
    .section { padding: 44px 0; }
    .section-head h2 { font-size: 1.6rem; }
}
@media (max-width: 560px) {
    body { font-size: 18px; }
    .audiences { grid-template-columns: 1fr; }
    .stats strong { font-size: 1.45rem; }
    h1 { font-size: 1.85rem; }
    .hero h1 { font-size: 2rem; }
    .hero .trust { display: none; }
    .hero .lead { font-size: 1.08rem; }
}

/* Piè di pagina: la notte, con l'orizzonte acceso. */
.site-footer { background: var(--night); color: var(--on-night-muted); font-size: .95rem; padding: 48px 0 28px; border-top: 4px solid var(--lantern); }
.site-footer a { color: var(--on-night); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--lantern); color: #fff; }
.site-footer .brand { color: var(--on-night); }
.site-footer .brand small { color: var(--on-night-muted); }
.footer-promise { display: inline-block; margin-top: 4px; padding: 6px 10px; border: 1.5px solid rgba(242, 169, 0, .5); border-radius: 6px; color: var(--lantern); font: 600 .8rem/1.3 var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.site-footer a.footer-promise { color: var(--lantern); text-decoration: none; }
.site-footer a.footer-promise:hover { color: #ffd060; border-color: var(--lantern); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.footer-grid h3 { color: var(--lantern); font: 600 .78rem var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 30px; padding-top: 16px; font-size: .88rem; }
.footer-legal p { margin: 0 0 6px; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Moduli con caselle */
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: 8px 0; }
label.check input { width: auto; margin-top: 5px; flex: none; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.signup input[type=email] { flex: 1 1 240px; width: auto; }

/* Aziende ed enti */
.cta-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 8px; max-width: 60rem; }
.cta-card { display: flex; flex-direction: column; gap: 10px; margin: 0; text-decoration: none; color: inherit; }
.cta-card strong { font-size: 1.3rem; color: var(--text); }
.cta-card span:not(.button) { color: var(--muted); flex: 1; }
.cta-card .button { align-self: flex-start; }
.cta-card:hover { border-color: var(--text); }
.org-form fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.org-form legend { font-size: 1.3rem; font-weight: 800; margin-bottom: 12px; }
.org-form label { margin-top: 12px; }
.org-form label.check { margin-top: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data th { font-size: .9rem; color: var(--muted); }
@media (max-width: 720px) { .cta-cards, .form-grid { grid-template-columns: 1fr; } }

/* Guide */
.chips a[aria-current="page"] { background: var(--night); color: var(--on-night); border-color: var(--night); }
.article-card h2 { margin: 6px 0 8px; font-size: 1.35rem; }
.article-card h2 a { text-decoration: none; }
.article-card p { margin: 0 0 6px; }
.breadcrumb { font-size: .95rem; color: var(--muted); margin-bottom: 8px; }
.article h1 { margin-bottom: 6px; }
.summary { background: var(--lantern-soft); border-left: 6px solid var(--lantern); border-radius: var(--radius); padding: 16px 20px; margin: 20px 0; }
.summary h2 { font: 600 .85rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--lantern-deep); margin: 0 0 6px; }
.summary p { margin: 0; font-size: 1.1rem; }
.toc { border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px 20px; margin: 0 0 24px; }
.toc ol { margin: 8px 0 0; padding-left: 20px; }
.toc li { margin: 4px 0; }
.prose h2 { margin-top: 32px; scroll-margin-top: 90px; }
.prose h3 { margin-top: 24px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose blockquote { margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--border); background: var(--bg-soft); border-radius: 0 10px 10px 0; font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.prose th, .prose td { border-bottom: 1px solid var(--border); padding: 8px; text-align: left; vertical-align: top; }
.sources { font-size: .95rem; }
.signup-cta { border: 2px solid var(--text); box-shadow: inset 0 -5px 0 var(--lantern); }
.signup-cta h2 { margin-top: 0; }

/* La situazione */
.hero--compact { padding-bottom: 32px; }
.hbars { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.hbars li { display: grid; grid-template-columns: minmax(120px, 38%) 1fr auto; gap: 12px; align-items: center; }
.hbars-label { font-weight: 600; overflow-wrap: anywhere; }
.hbars-bar { width: 100%; height: 12px; display: block; }
.hbars-track { fill: var(--border); opacity: .45; }
.hbars-fill { fill: var(--primary); }
.hbars-value { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 3ch; text-align: right; }
.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart-italy { fill: var(--primary); }
.chart-generic { fill: var(--primary); opacity: .3; }
.chart-label { font-size: 13px; font-weight: 700; fill: var(--text); }
.chart-axis { font-size: 11px; fill: var(--muted); }
.legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .95rem; color: var(--muted); margin-top: 8px; }
.legend-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--primary); }
.legend-key--generic { opacity: .3; }
.table-view { margin-top: 12px; }
.format-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.format-grid .card { margin: 0; }
.format-grid h3 { margin: 0 0 8px; }
.format-grid .hbars-bar { height: 8px; margin-bottom: 8px; }
.chips--static { margin: 8px 0; }
.chips--static li { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 600; }
@media (max-width: 560px) { .hbars li { grid-template-columns: 1fr auto; } .hbars-bar { grid-column: 1 / -1; grid-row: 2; } }
.stats--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .stats--four { grid-template-columns: repeat(2, 1fr); } }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi strong { font: 600 1.8rem/1.15 var(--mono); color: var(--text); }
.kpi strong.kpi-small { font-size: 1.15rem; line-height: 1.4; }
.kpi-label { font: 600 .78rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.kpi-note { font-size: .85rem; color: var(--muted); }
.kpi-delta { font-weight: 700; color: var(--text); }
.kpi--ours { border-color: var(--lantern); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.detail-grid .card { margin: 0; }
.detail-grid h3 { margin: 0 0 8px; }
.plain-list { margin: 0; padding-left: 20px; }
.plain-list li { margin: 4px 0; }
table.data--compact td { padding: 4px 6px; }

/* Avviso sui cookie, in basso a destra: solo informativo. */
.cookie-note { --art: 140px; position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: flex-end; gap: 4px; max-width: 360px; padding: 14px 0 0 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(21, 32, 46, .18); font-size: .95rem; line-height: 1.35; }
.cookie-note[hidden] { display: none; }
.cookie-note__text { padding: 0 22px 12px 0; }
.cookie-note__text p { margin: 0 0 6px; }
.cookie-note__text p:last-child { margin-bottom: 0; }
.cookie-note__title { font-weight: 700; font-size: 1rem; }
.cookie-note__title span { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
/* La bandiera sfora il bordo in alto: la tela è più alta del riquadro. */
.cookie-note__art { position: relative; flex: none; align-self: stretch; width: var(--art); min-height: 64px; }
.cookie-note__flag { position: absolute; left: 0; right: -8px; bottom: 0; top: -40px; width: calc(100% + 8px); height: calc(100% + 40px); touch-action: none; cursor: crosshair; }
.cookie-note__close { position: absolute; top: 6px; right: calc(var(--art) + 2px); z-index: 1; min-height: 0; padding: 2px 6px; background: transparent; color: var(--muted); border: 0; font-size: 1.3rem; line-height: 1; box-shadow: none; }
.cookie-note__close:hover { background: var(--bg-soft); color: var(--text); }
@media (max-width: 560px) {
    .cookie-note { --art: 112px; left: 12px; right: 12px; bottom: 12px; max-width: none; font-size: .92rem; }
}
@media print { .cookie-note { display: none !important; } }

/* "Gratis per sempre": la pagina di Siderius. La notte, le stelle, l'ottone e un serif leggero. */
.free-page { --sd-night: #05070f; --sd-night-2: #0c1122; --sd-ink: #ece9df; --sd-ink-2: #a7aec2; --sd-brass: #c9a15a; --sd-brass-hi: #ecd08a; --sd-serif: "Fraunces", Georgia, serif; }
.sd-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 90% at 80% 10%, #16203d 0%, transparent 60%), var(--sd-night); color: var(--sd-ink); padding: 84px 0 76px; }
.sd-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd-stars circle { animation: twinkle 5s ease-in-out infinite; }
.sd-stars circle:nth-child(3n) { animation-delay: -1.7s; }
.sd-stars circle:nth-child(3n+1) { animation-delay: -3.3s; }
@keyframes twinkle { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sd-stars circle { animation: none; } }
.sd-hero__text { position: relative; }
.sd-kicker { font: 600 .78rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sd-brass, #8a6a2c); margin: 0 0 14px; }
.sd-kicker b { color: var(--sd-brass-hi); font-weight: 600; }
.sd-hero h1 { font-family: var(--sd-serif); font-weight: 300; font-size: 3.6rem; line-height: 1.05; letter-spacing: -.01em; margin: 0 0 18px; }
.sd-hero h1 em { font-style: italic; color: var(--sd-brass-hi); font-weight: 400; }
.sd-lead { font-size: 1.25rem; color: var(--sd-ink-2); max-width: 36rem; margin: 0; }
.sd-quick { background: var(--sd-night-2); color: var(--sd-ink); padding: 0 0 56px; }
.sd-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; transform: translateY(-28px); }
.sd-cards li { background: rgba(255, 255, 255, .04); border: 1px solid rgba(236, 233, 223, .14); border-top: 2px solid var(--sd-brass); border-radius: 6px; padding: 22px 22px 20px; }
.sd-num { display: block; font-family: var(--sd-serif); font-size: 1.6rem; color: var(--sd-brass-hi); margin-bottom: 6px; }
.sd-cards h3 { color: var(--sd-ink); font-size: 1.2rem; margin-bottom: 8px; }
.sd-cards p { color: var(--sd-ink-2); margin: 0; }
.sd-cards strong { color: var(--sd-ink); }
.sd-section { padding: 64px 0; background: var(--bg); }
.sd-section h2 { font-family: var(--sd-serif); font-weight: 400; font-size: 2.2rem; line-height: 1.15; margin: 0 0 16px; }
.sd-section .sd-kicker { color: #8a6a2c; }
.sd-prose p { font-size: 1.1rem; }
.sd-link { font-weight: 800; color: var(--text); text-decoration-color: var(--sd-brass); text-decoration-thickness: 2px; }
.sd-section--night { background: var(--sd-night); color: var(--sd-ink); }
.sd-section--night .sd-kicker { color: var(--sd-brass); }
.sd-section--night h2 { color: var(--sd-ink); }
.sd-section--night p { color: var(--sd-ink-2); }
.sd-section--night strong { color: var(--sd-ink); }
.sd-points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.sd-points li { position: relative; padding-left: 30px; color: var(--sd-ink-2); }
.sd-points li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--sd-brass-hi); }
.sd-points b { color: var(--sd-ink); }
.sd-points--light li { color: var(--muted); }
.sd-points--light li::before { color: var(--sd-brass); }
.sd-points--light b { color: var(--text); }
.sd-cta { background: var(--bg-soft); padding: 56px 0; text-align: center; }
.sd-cta h2 { font-family: var(--sd-serif); font-weight: 400; font-size: 2rem; margin: 0 0 18px; }
.sd-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 900px) { .sd-cards { grid-template-columns: 1fr; transform: none; padding-top: 24px; } .sd-hero h1 { font-size: 2.6rem; } .sd-section h2 { font-size: 1.8rem; } .sd-hero { padding: 56px 0; } }
@media (prefers-color-scheme: dark) { .sd-section .sd-kicker { color: var(--sd-brass); } }

/* Landing "V per Vedetta" (annuncio sulla rivista USARCI Vicenza): stesso cielo, stesso faro, la V color lanterna. */
.landing-hero .sky { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 0; pointer-events: none; fill: rgba(255, 255, 255, .55); }
.landing-hero .sky__spark { fill: rgba(255, 255, 255, .8); animation: twinkle 4s ease-in-out infinite alternate; }
.landing-hero .sky__spark--red { fill: #ff5a6e; animation-duration: 5.5s; }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
.landing-title { font-size: 4.4rem !important; letter-spacing: -.02em; margin-bottom: 4px !important; }
.landing-sub { font-size: 1.9rem; font-weight: 800; line-height: 1.15; margin: 0 0 18px; color: var(--on-night); }
.landing-mark { background: none; color: var(--on-night); font-weight: 800; border-bottom: 2px solid var(--lantern); }
.landing-mark a { text-decoration: none; }
.landing-cta { border-radius: 999px; padding: 14px 28px; font-size: 1.1rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 10px 30px rgba(242, 169, 0, .25); }
.hero--night a.landing-cta, .hero--night a.landing-cta:hover { color: #14202e; }
.landing-logo { position: relative; z-index: 5; display: block; width: 200px; height: 200px; margin: 0 0 18px auto; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .45)); }
.landing-stat { position: relative; z-index: 5; display: flex; flex-direction: column; gap: 4px; margin: 0 0 0 auto; max-width: 340px; padding: 18px 20px; border-radius: 12px; background: rgba(8, 18, 34, .72); border: 1.5px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); color: var(--on-night); }
.landing-stat__kicker { font: 600 .75rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lantern); }
.landing-stat strong { font-size: 2.4rem; line-height: 1.05; }
.landing-stat__delta { font-weight: 800; color: #ffb4a8; }
.landing-stat small { margin-top: 6px; font-size: .75rem; color: var(--on-night-muted); }
.landing-foot p { margin: 0 0 8px; color: var(--muted); }
@media (max-width: 960px) { .landing-stat { margin: 0; max-width: none; } .landing-logo { display: none; } }
@media (max-width: 640px) { .landing-title { font-size: 3rem !important; } .landing-sub { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .landing-hero .sky__spark { animation: none; } }

/* Striscia per il team quando il coming soon è acceso. */
.team-strip { padding: 8px 16px; text-align: center; font: 600 .85rem/1.4 var(--mono); background: var(--lantern); color: #14202e; }
.team-strip a { color: #14202e; font-weight: 800; }

/* Radiografia di un sito ("Posso fidarmi di questo sito?" e scheda nel risultato della verifica) */
.site-form .row input { flex: 3 1 16rem; font-size: 1.08rem; }
.site-form .row button { flex: 1 1 12rem; }
.xray__summary { margin: 0 0 10px; }
.xray__list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.xray__item { background: var(--surface); border: 1.5px solid var(--border); border-left: 6px solid #8a94a3; border-radius: 8px; padding: 10px 14px; }
.xray__item strong { display: block; }
.xray__item span { display: block; color: var(--muted); font-size: .95rem; margin-top: 2px; }
.xray__item--danger { border-left-color: #d93025; }
.xray__item--danger strong { color: var(--danger); }
.xray__item--warning { border-left-color: var(--lantern); }
.xray__item--ok { border-left-color: #2e9e57; }
.xray__item--ok strong { color: var(--ok); }
.xray-card [data-xray-body] { min-height: 1.5em; }
@media (max-width: 560px) {
    .xray__item { padding: 9px 12px; }
}
.site-hint { margin: 14px 0 0; }
.hero--night .site-hint { color: var(--on-night-muted); }
.hero--night .site-hint a { color: var(--on-night); font-weight: 700; }
.reviews { margin: 4px 0 16px; }
.xray__score { margin: -4px 0 10px; color: var(--muted); font-size: .95rem; }