/* Stile condiviso del sito di Marta: tutte le pagine partono da questi token. */
:root{
  --bg:#F2F4F1; --surface:#FFFFFF; --ink:#13201B; --muted:#5D6B64; --line:#DCE2DD;
  --accent:#1F5BFF; --accent-ink:#FFFFFF; --mint:#CFEBDD; --sun:#FFE7A8;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0F1412; --surface:#171E1B; --ink:#E9EFEB; --muted:#9AA9A1; --line:#26302C;
  --accent:#6E93FF; --accent-ink:#0B1020; --mint:#173A2B; --sun:#3F3315; color-scheme:dark}}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.page{max-width:1120px;margin:0 auto;padding:40px max(16px,env(safe-area-inset-right)) 64px max(16px,env(safe-area-inset-left));display:grid;gap:28px}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.hello{margin:0;font:800 clamp(40px,7vw,84px)/0.95 var(--display);letter-spacing:-0.03em;text-wrap:balance}
.hello em{font-style:normal;color:var(--accent)}
.sub{margin:10px 0 0;color:var(--muted);max-width:52ch;font-size:16px}
.clock{font:500 13px var(--mono);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.clock b{display:block;font:600 34px var(--display);color:var(--ink);letter-spacing:-0.02em}
.back{font:600 14px var(--body);color:var(--accent);text-decoration:none}

/* Griglia a riquadri della home */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.tile:hover{transform:translateY(-3px);border-color:var(--accent)}
.tile h2{margin:0;font:600 22px/1.1 var(--display);letter-spacing:-0.01em}
.tile p{margin:0;color:var(--muted);font-size:14px}
.k{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.go{margin-top:auto;align-self:flex-start;font:600 13px var(--body);color:var(--accent)}
.t-big{grid-column:span 2;grid-row:span 2;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.t-big p,.t-big .k{color:var(--accent-ink);opacity:.85}
.t-big h2{font-size:clamp(28px,3.4vw,40px)}
.t-big .go{color:var(--accent-ink)}
.t-big ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.t-big li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:rgb(255 255 255 / .14);font-size:14px}
.t-big li span:last-child{font-family:var(--mono);font-size:12px;opacity:.9;white-space:nowrap}
.t-mint{background:var(--mint);border-color:transparent}
.t-sun{background:var(--sun);border-color:transparent}
.t-wide{grid-column:span 2}
.prog{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);border-radius:99px}
.cfu{font:600 28px var(--display);font-variant-numeric:tabular-nums}
.foot{color:var(--muted);font-size:13px}

/* Pagine interne */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;max-width:70ch}
.panel p{margin:0;color:var(--muted)}

@media (max-width:860px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.bento{grid-template-columns:1fr}.t-big,.t-wide{grid-column:auto;grid-row:auto}.clock{text-align:left}}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}}