/* radar-ania-start/public/start.css
   Purpose: wygląd strony startowej — te same kolory i fonty co panel Radaru, żeby przejście było płynne.
   NOT for: stylów samych paneli (są w webkrasnik-radar/public/app.css). */
@font-face{font-family:Hanken;src:url('/fonts/hanken-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Hanken;src:url('/fonts/hanken-latin-ext-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:Shoulders;src:url('/fonts/big-shoulders-latin-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Shoulders;src:url('/fonts/big-shoulders-latin-ext-800.woff2') format('woff2');font-weight:800;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
:root{--bg:#202321;--card:#2b2f2c;--line:#3c423d;--text:#f4f2e9;--muted:#b8beb3;--coral:#ff775b}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100svh;display:flex;justify-content:center;background:var(--bg);color:var(--text);font:400 17px/1.5 Hanken,Arial,sans-serif}
main{width:100%;max-width:520px;padding:56px 16px 40px}
.mark{margin:0;font:800 64px/1 Shoulders,sans-serif;color:var(--coral)}
h1{margin:18px 0 0;font:800 44px/1.02 Shoulders,sans-serif;letter-spacing:.01em}
.lead{margin:14px 0 0;color:var(--muted)}
.tiles{display:grid;gap:14px;margin-top:34px}
/* WHY duże kafelki: Ania otwiera to na telefonie; cały kafelek jest celem dotyku (min. 88 px wysokości) */
.tile{display:flex;align-items:center;gap:16px;min-height:96px;padding:18px 18px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s}
.tile:hover,.tile:focus-visible{border-color:var(--coral);transform:translateY(-1px)}
.tile:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.tile img{width:72px;height:56px;object-fit:contain;flex:none;filter:brightness(0) invert(.94)}
.tile-letter{display:grid;place-items:center;width:72px;height:56px;flex:none;border-radius:12px;background:var(--coral);color:var(--bg);font:800 26px/1 Shoulders,sans-serif;letter-spacing:.04em}
.tile span:not(.tile-letter){flex:1;min-width:0}
.tile strong{display:block;font:800 28px/1.05 Shoulders,sans-serif;letter-spacing:.02em}
.tile small{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.tile b{font-weight:400;font-size:24px;color:var(--coral)}
.tip{margin:30px 0 0;font-size:14px;color:var(--muted)}