/* quantumecusti.com — tema Notte del design system. Nessuna risorsa esterna: caratteri serviti da qui. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #121110; --surface: #0b0b0a; --surface-raised: #1b1918; --line: #2c2926; --line-strong: #766e65;
  --ink: #ece6d8; --ink-muted: #9a9285; --accent: #ef6a2a; --on-accent: #1a0d05; --warning: #e8a33d; --focus-ring: #e8a33d;
  --dial-face: #0b0b0a; --dial-ink: #f1eee6; --needle: #ef6a2a; --redline: #c02a20;
  --chrome-1: #f4f4f2; --chrome-2: #8d8d8b; --chrome-3: #e2e2de; --chrome-4: #5c5c5a; --chrome-5: #cfcfcc;
  --lamp-amber: #e8a33d; --on-lamp-amber: #2a1700; --lamp-red: #d9362b; --on-lamp-red: #ffffff; --lamp-off-icon: #3f3b37;
  --walnut-1: #3b2415; --walnut-2: #5b3a21; --walnut-3: #2a190e;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-gauge: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-sans: "Archivo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wrap { max-width: 1040px; margin: 0 auto; padding-inline: 20px; }

.label { font: 600 13px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }

/* intestazione e piede */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.brand { font: 600 26px/1 var(--font-display); letter-spacing: .02em; text-decoration: none; color: var(--ink); }
.top nav { display: flex; gap: 18px; flex-wrap: wrap; }
.top nav a { font: 600 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; }
.top nav a:hover { color: var(--ink); }
footer { border-top: 1px solid var(--line); margin-top: 64px; padding-block: 28px 40px; color: var(--ink-muted); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--ink-muted); }

/* pagina principale */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 36px 24px; }
.hero h1 { margin: 12px 0 16px; font: 600 clamp(44px, 7vw, 76px)/.95 var(--font-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.hero p { margin: 0 0 12px; max-width: 46ch; color: var(--ink-muted); font-size: 18px; }
.soon { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 12px; font: 600 14px/1.2 var(--font-sans); }
.soon i { width: 9px; height: 9px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 8px var(--warning); }

.dash { background: radial-gradient(120% 90% at 50% 0%, #1b1a18 0%, var(--dial-face) 60%); border-radius: 22px 22px 10px 10px; overflow: hidden; box-shadow: inset 0 1px 0 #2a2826, 0 20px 40px -20px #000; }
.dash::after { content: ""; display: block; height: 14px; border-top: 1px solid #6d6d6a;
  background: repeating-linear-gradient(92deg, transparent 0 7px, rgba(0,0,0,.18) 7px 8px, transparent 8px 19px, rgba(255,210,160,.05) 19px 20px), linear-gradient(180deg, var(--walnut-2), var(--walnut-1) 55%, var(--walnut-3)); }
.dash-in { padding: 26px 22px 16px; display: grid; gap: 14px; }
.dash-gauge svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.7)); }
.dash-nums { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid #2c2926; padding-block: 10px; }
.dash-nums div { display: grid; justify-items: center; gap: 2px; }
.dash-nums b { font: 600 24px/1 var(--font-gauge); font-variant-numeric: tabular-nums; }
.dash-nums span { font-size: 11px; color: var(--ink-muted); }
.dash-lamps { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.note { font-size: 12.5px; color: var(--ink-muted); text-align: center; margin: 0; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px 36px; padding-top: 48px; border-top: 1px solid var(--line); margin-top: 40px; }
.features h2 { margin: 0 0 6px; font: 600 22px/1.1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.features p { margin: 0; color: var(--ink-muted); }

/* spie (dal design system) */
.qc-lamp { display: block; width: 44px; }
.qc-lamp svg { display: block; width: 100%; height: auto; }
.qc-lamp .qc-lens { fill: var(--dial-face); }
.qc-lamp .qc-ico { color: var(--lamp-off-icon); }
.qc-lamp.is-amber .qc-lens { fill: url(#qc-lens-amber); }
.qc-lamp.is-amber .qc-ico { color: var(--on-lamp-amber); }
.qc-lamp.is-amber svg { filter: drop-shadow(0 0 7px rgba(232,163,61,.75)); }
.qc-lamp.is-red .qc-lens { fill: url(#qc-lens-red); }
.qc-lamp.is-red .qc-ico { color: var(--on-lamp-red); }
.qc-lamp.is-red svg { filter: drop-shadow(0 0 7px rgba(226,68,58,.8)); }

/* pagine di testo (privacy, termini, eliminazione) */
.doc { max-width: 720px; padding-block: 24px 0; }
.doc h1 { margin: 10px 0 6px; font: 600 clamp(34px, 6vw, 48px)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.doc .updated { margin: 0 0 32px; color: var(--ink-muted); font-size: 14px; }
.doc h2 { margin: 36px 0 10px; font: 600 22px/1.15 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.doc p, .doc li { color: #d8d1c3; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc .box { border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px 18px; background: var(--surface); }
.doc .box p { margin: 0; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }