/* Nový veřejný web SOCKOMAT. Mobil napřed, světlý i tmavý režim, podpora písma zprava doleva. */
:root { --bg:#faf9fd; --surface:#fff; --line:#e4dff1; --ink:#1b1726; --muted:#675f78; --brand:#6b3fe6; --brand-ink:#fff; --soft:#ece5ff; --err:#b42318; --ok:#15803d; }
@media (prefers-color-scheme: dark) { :root { --bg:#131019; --surface:#1c1826; --line:#352d49; --ink:#f3f0fa; --muted:#a79fbb; --brand:#a98bff; --brand-ink:#160d33; --soft:#2e2350; --err:#ff9c92; --ok:#6ee7a0; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; }
a { color:var(--brand); }
h1 { font-size:clamp(30px,6.5vw,52px); line-height:1.1; letter-spacing:-.03em; margin:0 0 14px; }
h2 { font-size:clamp(22px,4vw,30px); line-height:1.2; margin:0 0 10px; }
h3 { font-size:18px; margin:0 0 4px; }
p { margin:0; } .muted { color:var(--muted); } small { color:var(--muted); font-size:13px; display:block; }
.top { display:flex; align-items:center; gap:16px; max-width:1080px; margin:0 auto; padding:14px 16px; }
.logo { font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--brand); text-decoration:none; margin-inline-end:auto; }
.top nav { display:none; gap:18px; } .top nav a { color:var(--ink); text-decoration:none; }
.signin { color:var(--ink); text-decoration:none; font-size:15px; white-space:nowrap; } .signin:hover { text-decoration:underline; }
main { max-width:1080px; margin:0 auto; padding:0 16px 40px; }
section { padding:28px 0; }
.hero { display:grid; gap:24px; padding-top:20px; }
.lead { font-size:19px; color:var(--muted); max-width:56ch; }
.btn, button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:14px; border:0; background:var(--brand); color:var(--brand-ink); font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
.btn.small { min-height:42px; padding:0 16px; font-size:15px; }
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
form.lead { display:grid; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; max-width:520px; width:100%; }
form.lead label { font-weight:600; margin-top:6px; }
form.lead input { min-height:52px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; font-size:16px; width:100%; }
form.lead button { margin-top:10px; width:100%; }
form.lead .hp { position:absolute; inset-inline-start:-9999px; width:1px; height:1px; opacity:0; }
.err { color:var(--err); } .err:empty { display:none; }
.done { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px; max-width:520px; }
.done h3 { color:var(--ok); font-size:22px; }
.strip { display:grid; grid-auto-flow:column; grid-auto-columns:62%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:14px 0 8px; }
.strip figure { margin:0; scroll-snap-align:start; }
.strip video { display:block; width:100%; aspect-ratio:9/16; border-radius:18px; background:#0f0c16; object-fit:cover; }
.strip figcaption { font-weight:600; padding-top:8px; }
.three { display:grid; gap:12px; grid-template-columns:minmax(0,1fr); margin-top:14px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; }
.card p { color:var(--muted); }
.num { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--soft); color:var(--brand); font-weight:800; margin-bottom:10px; }
.checks { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.checks li { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; padding-inline-start:46px; position:relative; }
.checks li::before { content:"✓"; position:absolute; inset-inline-start:16px; color:var(--ok); font-weight:800; }
details { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-top:10px; }
summary { font-weight:600; cursor:pointer; } details p { color:var(--muted); margin-top:8px; }
.cta { display:grid; gap:14px; }
footer { max-width:1080px; margin:0 auto; padding:24px 16px 40px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; display:grid; gap:8px; }
footer select { min-height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; padding:0 10px; }
.legal { max-width:720px; } .legal h1 { font-size:30px; } .legal h2 { margin-top:26px; } .legal p, .legal li { margin-top:10px; }
@media (min-width:768px) {
  .top nav { display:flex; }
  .hero { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; padding-top:40px; }
  .strip { grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  .three { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .checks { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) { .strip { grid-template-columns:repeat(6,minmax(0,1fr)); } }
/* Přenesené stránky starého webu (šablona pages_build.py) */
.article { max-width:820px; padding-top:18px; }
.article h1 { font-size:clamp(28px,5.5vw,42px); margin-top:6px; }
.article h2 { margin-top:34px; } .article h3 { margin-top:22px; } .article h4 { margin:16px 0 0; }
.article p, .article ul, .article ol, .article blockquote { margin-top:10px; }
.article ul, .article ol { padding-inline-start:22px; } .article li { margin-top:4px; }
.article img { max-width:100%; height:auto; border-radius:14px; display:block; margin-top:12px; }
.article blockquote { margin-inline:0; padding:12px 16px; border-inline-start:4px solid var(--brand); background:var(--surface); border-radius:10px; }
.article .strip { margin-top:6px; }
.tablewrap { overflow-x:auto; margin-top:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.article table { border-collapse:collapse; width:100%; min-width:520px; font-size:15px; }
.article th, .article td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:start; vertical-align:top; }
.article tr:last-child td { border-bottom:0; } .article th { background:var(--soft); }
.cta.box { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px; margin-top:38px; }
nav.foot { display:flex; flex-wrap:wrap; gap:6px 16px; padding-bottom:8px; }
nav.foot a { color:var(--muted); min-height:32px; display:inline-flex; align-items:center; }
@media (min-width:1024px) { .article .strip { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.article ul.feat { list-style:none; padding:0; display:grid; gap:6px; }
.article ul.feat li { padding-inline-start:28px; position:relative; margin:0; }
.article ul.feat li::before { position:absolute; inset-inline-start:4px; font-weight:800; }
.article ul.feat li.yes::before { content:"✓"; color:var(--ok); }
.article ul.feat li.no { color:var(--muted); } .article ul.feat li.no::before { content:"✗"; }
/* Blog, lekce Academy a nástroje (content_build.py) */
.crumb { font-size:14px; color:var(--muted); margin-top:8px; } .crumb a { color:var(--muted); }
.meta { color:var(--muted); font-size:14px; }
.answer { background:var(--soft); border-radius:14px; padding:14px 16px; margin-top:16px; }
.draft { background:var(--surface); border:1px dashed var(--line); border-radius:10px; padding:8px 12px; font-size:14px; color:var(--muted); }
.posts { display:grid; gap:12px; margin-top:18px; }
a.card.post { display:block; text-decoration:none; color:var(--ink); }
a.card.post h2 { font-size:20px; margin:4px 0 6px; color:var(--brand); } a.card.post p { margin:0; }
.article ol.lessons li { margin-top:8px; }
.lessonnav { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:26px; }
form.tool { display:grid; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; margin-top:18px; max-width:560px; }
form.tool label { font-weight:600; margin-top:6px; }
form.tool input, form.tool select { min-height:52px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; font-size:16px; width:100%; }
form.tool button { margin-top:10px; width:100%; }
.toolout { margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; }
.toolout .mono { font-family:ui-monospace,Consolas,monospace; font-size:15px; overflow-wrap:anywhere; background:var(--bg); border-radius:10px; padding:12px; margin-top:0; }
.toolout ol.hooks { padding-inline-start:22px; margin-top:0; } .toolout ol.hooks li { margin-top:8px; }
.toolout th { white-space:nowrap; }
.btn.ghost, button.ghost { background:transparent; color:var(--brand); border:1px solid var(--line); }
.privacy { font-size:14px; margin-top:14px; }
nav.foot.tools { margin-top:26px; padding:0; }
@media (min-width:768px) { .posts { grid-template-columns:repeat(2,minmax(0,1fr)); } }