/* KomiTrade web (pub-www, fáze 1, 13. 11. 2026). Jeden soubor CSS, bez frameworku a bez skriptů.
   Barvy = tokeny design systému deníku (trade-logbook.html :root) — tmavý motiv 1 : 1, světlý odvozený se stejným významem barev:
   zelená / červená jen pro znaménko výsledku, jantarová = hlídat, oranžová plná = jednat, modrá = akce a odkazy.
   Písmo Inter (OFL) leží v assets/fonts — žádný požadavek na cizí server. Kontrast textových tokenů ≥ 4,5 : 1 hlídá tests/t_www.js. */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  color-scheme:light dark;
  --bg:#F2F5F9; --surface:#FFFFFF; --surface2:#E8EDF4; --line:rgba(18,26,39,.12); --line2:rgba(18,26,39,.22);
  --text:#121A27; --text2:#3E4B62; --text3:#56637A;
  --accent:#1F63CC; --accent-hi:#174FA6; --accent2:#6A4FD8; --on-accent:#FFFFFF;
  --pos:#0A7A50; --neg:#BF2D39;
  --watch:#7A5A00; --watch-line:#C99A12; --watch-bg:rgba(242,201,76,.22);
  --act:#FF7A1A; --ink:#0B0E14;
  --draft:#7A5A00; --draft-bg:rgba(242,201,76,.22);
  --shadow:0 1px 0 rgba(18,26,39,.04),0 18px 48px -24px rgba(18,26,39,.35);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.1875rem; --fs-h3:1.3125rem; --fs-h2:1.75rem; --fs-h1:2.375rem;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:56px; --sp-8:88px;
  --r-sm:6px; --r-md:10px; --r-lg:28px;
  --wrap:1120px; --gut:16px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121A27; --surface:#182233; --surface2:#1E2839; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
    --text:#EEF2F8; --text2:#A9B4C6; --text3:#8995AB;
    --accent:#4D9EFF; --accent-hi:#6AADFF; --accent2:#9B7CF8; --on-accent:#0B0E14;
    --pos:#00C17D; --neg:#FF5A65;
    --watch:#F2C94C; --watch-line:#F2C94C; --watch-bg:rgba(242,201,76,.10);
    --draft:#F2C94C; --draft-bg:rgba(242,201,76,.10);
    --shadow:0 0 0 1px rgba(255,255,255,.04),0 24px 60px -28px rgba(0,0,0,.7);
  }
}
@media (min-width:720px){ :root{ --gut:32px; --fs-h1:3.25rem; --fs-h2:2rem; } }
@media (min-width:1100px){ :root{ --fs-h1:3.75rem; } }

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--fs-md);line-height:1.6;font-feature-settings:"cv11" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;}
ul,ol{padding:0;}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px;}
a:hover{color:var(--accent-hi);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);color:var(--text);padding:8px 12px;border-radius:var(--r-sm);z-index:10;}
.skip:focus{left:8px;}

/* ── hlavička ─────────────────────────────────────────── */
.top{border-bottom:1px solid var(--line);}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);padding-top:var(--sp-3);padding-bottom:var(--sp-3);}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;margin-right:auto;}
.brand:hover{color:var(--text);}
.brand svg{width:28px;height:28px;flex:none;}
.brand .p{font-weight:500;color:var(--accent);}
.nav{display:flex;align-items:center;gap:var(--sp-1) var(--sp-4);flex-wrap:wrap;font-size:var(--fs-sm);}
.nav a{color:var(--text2);text-decoration:none;padding:6px 2px;}
.nav a:hover{color:var(--text);}
.nav a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent);}
.nav .nav-cta{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:6px 14px;font-weight:600;}
.nav .nav-cta:hover,.nav .nav-cta[aria-current="page"]{background:var(--accent-hi);color:var(--on-accent);box-shadow:none;}
.nav .lang{border:1px solid var(--line2);border-radius:999px;padding:4px 10px;}
@media (max-width:719px){ .top .nav{width:100%;justify-content:space-between;} }

/* tlačítka */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:var(--r-md);font-weight:600;font-size:var(--fs-md);text-decoration:none;border:1px solid transparent;line-height:1.2;}
.btn-p{background:var(--accent);color:var(--on-accent);}
.btn-p:hover{background:var(--accent-hi);color:var(--on-accent);}
.btn-s{border-color:var(--line2);color:var(--text);}
.btn-s:hover{border-color:var(--text3);color:var(--text);}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);}

/* ── typografie stránek ───────────────────────────────── */
h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.035em;font-weight:680;max-width:16ch;text-wrap:balance;}
h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.025em;font-weight:650;max-width:24ch;text-wrap:balance;}
h3{font-size:var(--fs-lg);line-height:1.3;letter-spacing:-.01em;font-weight:620;}
.lede{font-size:var(--fs-lg);color:var(--text2);max-width:58ch;line-height:1.55;}
.muted{color:var(--text3);}
.small{font-size:var(--fs-sm);}
.prose{max-width:66ch;}
.prose p+p{margin-top:var(--sp-3);}
main section{padding:var(--sp-7) 0;}
main section+section{border-top:1px solid var(--line);}
@media (min-width:720px){ main section{padding:var(--sp-8) 0;} }
.head{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-6);}

/* ── úvod: text + ilustrace pohledu Simple ─────────────── */
.hero{padding-top:var(--sp-6) !important;}
.hero .wrap{display:grid;gap:var(--sp-6);align-items:center;}
.hero-copy{display:grid;gap:var(--sp-5);}
.status{font-size:var(--fs-sm);color:var(--text3);display:flex;gap:var(--sp-2);align-items:center;}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--watch-line);flex:none;}
@media (min-width:960px){ .hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-7);} .hero{padding-top:var(--sp-8) !important;} }

/* Pohled Simple jako obrazovka telefonu — jediný výrazný prvek stránky */
.sv{margin:0 auto;width:100%;max-width:380px;}
.sv-screen{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-4) var(--sp-4);box-shadow:var(--shadow);display:grid;gap:var(--sp-4);}
.sv-bar{display:flex;align-items:center;justify-content:space-between;}
.sv-bar strong{font-size:var(--fs-lg);letter-spacing:-.01em;}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:2px;font-size:.75rem;font-weight:600;}
.seg span{padding:3px 10px;border-radius:999px;color:var(--text3);}
.seg .on{background:var(--surface2);color:var(--text);}
.sv-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);}
.sv-kpi div{background:var(--surface2);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);display:grid;gap:2px;min-width:0;}
.sv-kpi dt{font-size:.75rem;color:var(--text3);line-height:1.3;}
.sv-kpi dd{font-weight:650;font-size:1.0625rem;letter-spacing:-.01em;}
.sv-kpi dd small{display:block;font-weight:500;font-size:.75rem;color:var(--text3);}
.sv-list{list-style:none;display:grid;}
.sv-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--line);align-items:center;}
.sv-list b{font-weight:650;}
.sv-list .d{font-size:.8125rem;color:var(--text3);grid-column:1;}
.sv-list .pl{text-align:right;font-weight:600;font-size:.9375rem;}
.sv-list .chip{grid-column:2;grid-row:2;justify-self:end;}
.pos{color:var(--pos);} .neg{color:var(--neg);}
.chip{display:inline-block;font-size:.75rem;font-weight:600;line-height:1;padding:5px 9px;border-radius:999px;white-space:nowrap;}
.c-none{color:var(--text3);border:1px solid var(--line2);}
.c-watch{color:var(--watch);border:1px solid var(--watch-line);background:var(--watch-bg);}
.c-act{color:var(--ink);background:var(--act);border:1px solid var(--act);}
.sv-next{border-top:1px solid var(--line);padding-top:var(--sp-3);font-size:.875rem;color:var(--text2);}
.sv-next b{color:var(--text);font-weight:620;}
.sv figcaption,.cap{font-size:.8125rem;color:var(--text3);margin-top:var(--sp-3);text-align:center;}

/* ── pro koho: strategie jako definiční seznam ─────────── */
.focus{display:grid;gap:0;border-top:1px solid var(--line2);}
.focus div{display:grid;gap:var(--sp-1) var(--sp-5);padding:var(--sp-4) 0;border-bottom:1px solid var(--line);}
.focus dt{font-weight:620;}
.focus dd{color:var(--text2);max-width:60ch;}
.focus .minor dt{color:var(--text2);font-weight:560;}
@media (min-width:720px){ .focus div{grid-template-columns:14rem minmax(0,1fr);} }

/* ── přínosy ───────────────────────────────────────────── */
.gains{display:grid;gap:var(--sp-6) var(--sp-7);list-style:none;}
.gains li{display:grid;gap:var(--sp-2);align-content:start;padding-top:var(--sp-4);border-top:2px solid var(--text);}
.gains p{color:var(--text2);}
.plan{font-size:.75rem;font-weight:600;color:var(--text3);border:1px solid var(--line2);border-radius:999px;padding:2px 8px;justify-self:start;}
@media (min-width:720px){ .gains{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* ── Simple / Expert ───────────────────────────────────── */
.modes{display:grid;gap:var(--sp-5);}
.mode{border:1px solid var(--line2);border-radius:var(--r-md);padding:var(--sp-5);display:grid;gap:var(--sp-3);align-content:start;}
.mode.on{background:var(--surface);}
.mode ul{padding-left:1.1em;color:var(--text2);display:grid;gap:var(--sp-1);}
@media (min-width:720px){ .modes{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* ── co nedělá ─────────────────────────────────────────── */
.nots{list-style:none;display:grid;gap:var(--sp-3);max-width:62ch;}
.nots li{padding-left:1.6em;position:relative;color:var(--text2);}
.nots li::before{content:"";position:absolute;left:0;top:.72em;width:.9em;height:2px;background:var(--text3);}
.nots b{color:var(--text);font-weight:620;}

.cta{display:grid;gap:var(--sp-4);justify-items:start;}

/* ── soukromí, komunita, pruh čekací listiny (Pavel 13.11.2026) ── */
.priv-band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.priv{display:grid;gap:var(--sp-5);align-items:start;}
.priv h2{border-left:4px solid var(--accent);padding-left:var(--sp-3);}
.priv ul{list-style:none;display:grid;gap:var(--sp-3);}
.priv li{padding-left:1.6em;position:relative;font-weight:560;}
.priv li::before{content:"";position:absolute;left:.15em;top:.5em;width:.55em;height:.3em;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);}
@media (min-width:860px){ .priv{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);} }
.comm,.ind{list-style:none;display:grid;gap:var(--sp-5);}
.comm li,.ind li{border:1px solid var(--line2);border-radius:var(--r-md);padding:var(--sp-5);display:grid;gap:var(--sp-3);align-content:start;justify-items:start;}
.comm li.hl{border-color:var(--accent);box-shadow:inset 0 3px 0 var(--accent);background:var(--surface);}
.comm p,.ind p{color:var(--text2);}
.ind-fig{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);}
.ind-fig .f-px{fill:none;stroke:var(--text);stroke-width:2;stroke-linejoin:round;}
.ind-fig .f-t{fill:var(--text2);font-size:12px;}
.ind-fig .f-th{fill:var(--text);font-size:12px;font-weight:600;}
.ind-fig .f-ill{fill:var(--text3);font-size:11px;}
.ind-fig .f-b1{fill:var(--accent);opacity:.08;}
.ind-fig .f-b2{fill:var(--accent);opacity:.14;}
.ind-fig .f-b3{fill:var(--accent);opacity:.2;}
.ind-fig .f-up{fill:var(--pos);}
.ind-fig .f-dn{fill:var(--neg);}
.ind-fig .f-tb{fill:var(--surface);stroke:var(--line2);}
.ind-fig .f-gap{fill:var(--accent);opacity:.16;}
.ind-fig .f-mir{stroke:var(--text2);stroke-width:1.5;stroke-dasharray:6 4;}
.ind h2{font-size:var(--fs-h3);max-width:none;}
@media (min-width:860px){ .comm{grid-template-columns:repeat(3,minmax(0,1fr));} .ind{grid-template-columns:repeat(2,minmax(0,1fr));} }
.band-wl{background:var(--surface);border-top:1px solid var(--line);}
.band-wl .cta{justify-items:center;text-align:center;}
.band-wl .lede{margin:0 auto;}

/* ── ceník ─────────────────────────────────────────────── */
.tiers{display:grid;gap:var(--sp-5);align-items:start;}
.tier{border:1px solid var(--line2);border-radius:var(--r-md);padding:var(--sp-5);display:grid;gap:var(--sp-4);background:var(--surface);}
.tier.mid{border-color:var(--accent);box-shadow:inset 0 3px 0 var(--accent);}
.tier h2{font-size:var(--fs-h3);max-width:none;}
.price{font-size:2rem;font-weight:680;letter-spacing:-.03em;line-height:1.1;}
.tier ul{list-style:none;display:grid;gap:var(--sp-2);font-size:.9375rem;color:var(--text2);}
.tier li{padding-left:1.4em;position:relative;}
.tier li::before{content:"";position:absolute;left:.15em;top:.55em;width:.5em;height:.28em;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);}
.tier li.later{color:var(--text3);}
.tier li.later::before{border-color:var(--text3);border-left:0;transform:none;top:.75em;height:0;width:.6em;}
@media (min-width:960px){ .tiers{grid-template-columns:repeat(3,minmax(0,1fr));} }
.faq{display:grid;gap:var(--sp-4);max-width:66ch;}
.faq details{border-top:1px solid var(--line);padding-top:var(--sp-4);}
.faq summary{cursor:pointer;font-weight:600;}
.faq details p{color:var(--text2);margin-top:var(--sp-2);}

/* ── Learn ─────────────────────────────────────────────── */
.courses{list-style:none;display:grid;gap:var(--sp-6);counter-reset:none;}
.course{display:grid;gap:var(--sp-3);}
.course h2{font-size:var(--fs-h3);max-width:none;display:flex;gap:var(--sp-3);align-items:baseline;}
.course h2 .no{color:var(--text3);font-weight:500;}
.lessons{list-style:none;display:grid;border-top:1px solid var(--line2);}
.lessons li{display:grid;gap:2px var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--line);}
.lessons .no{color:var(--text3);font-size:var(--fs-sm);}
.lessons .t{font-weight:600;}
.lessons .g{color:var(--text2);font-size:.9375rem;}
@media (min-width:720px){ .lessons li{grid-template-columns:3rem minmax(0,1fr);} .lessons .g{grid-column:2;} }
.note{border-left:3px solid var(--line2);padding:var(--sp-2) var(--sp-4);color:var(--text2);max-width:66ch;}

/* ── čekací listina ───────────────────────────────────── */
.mailbox{display:grid;gap:var(--sp-4);border:1px solid var(--line2);border-radius:var(--r-md);padding:var(--sp-5);background:var(--surface);max-width:40rem;}
.mailbox .addr{font-size:var(--fs-h3);font-weight:620;letter-spacing:-.01em;word-break:break-all;}

/* ── právní texty ──────────────────────────────────────── */
.draft{display:grid;gap:var(--sp-2);background:var(--draft-bg);border:1px solid var(--watch-line);border-radius:var(--r-md);padding:var(--sp-4);color:var(--text);max-width:66ch;}
.draft strong{color:var(--draft);font-size:var(--fs-lg);}
.legal{display:grid;gap:var(--sp-5);max-width:66ch;}
.legal h2{font-size:var(--fs-h3);max-width:none;}
.legal section{padding:0;border:0;display:grid;gap:var(--sp-2);}
.legal p,.legal li{color:var(--text2);}
.legal ul{padding-left:1.2em;display:grid;gap:var(--sp-1);}
.todo{font-weight:600;color:var(--draft);background:var(--draft-bg);padding:0 4px;border-radius:4px;}

/* ── patička ───────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:var(--sp-6) 0 var(--sp-7);font-size:var(--fs-sm);color:var(--text3);}
.foot .wrap{display:grid;gap:var(--sp-4);}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);}
.foot nav a{color:var(--text2);}
.risk{max-width:80ch;color:var(--text2);}
.risk strong{color:var(--text);font-weight:600;}

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important;transition:none !important;animation:none !important;} }
@media print{ .top .nav,.actions{display:none;} body{background:#fff;color:#000;} }