:root {
    --sfondo: #0f1115;
    --superficie: #1a1d24;
    --bordo: #2a2e38;
    --testo: #f2f3f5;
    --tenue: #a3a8b3;
    --accento: #7c5cff;
    --accento-scuro: #6446f0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    background: var(--sfondo);
    background-image: radial-gradient(ellipse at 50% -10%, rgba(124, 92, 255, .28), transparent 60%);
    color: var(--testo);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
header, main, footer { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 24px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; }
nav { display: flex; align-items: center; gap: 20px; }
.marchio { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; color: var(--testo); text-decoration: none; }
.marchio span { color: var(--accento); }
.accedi { color: var(--tenue); text-decoration: none; font-size: .95rem; }
.accedi:hover { color: var(--testo); }

/* Selettore della lingua, senza JavaScript */
.lingue { position: relative; font-size: .9rem; }
.lingue summary {
    list-style: none; cursor: pointer; color: var(--tenue);
    padding: 4px 10px; border: 1px solid var(--bordo); border-radius: 8px;
}
.lingue summary::-webkit-details-marker { display: none; }
.lingue summary::after { content: " \25BE"; }
.lingue summary:hover, .lingue[open] summary { color: var(--testo); }
.lingue ul {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 10;
    margin: 0; padding: 6px; list-style: none; min-width: 140px;
    background: var(--superficie); border: 1px solid var(--bordo); border-radius: 10px;
}
.lingue a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--testo); text-decoration: none; }
.lingue a:hover { background: var(--bordo); }
.lingue a[aria-current] { color: var(--accento); font-weight: 600; }

main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 48px; }
h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 20px; max-width: 14em; }
p.sotto { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--tenue); margin: 0 0 32px; max-width: 34em; }
.bottone {
    display: inline-block; align-self: flex-start;
    background: var(--accento); color: #fff; text-decoration: none; font-weight: 600;
    padding: 14px 26px; border-radius: 10px;
}
.bottone:hover { background: var(--accento-scuro); }
.nota { margin-top: 20px; font-size: .9rem; color: var(--tenue); }
footer { padding-bottom: 24px; font-size: .85rem; color: var(--tenue); }