/* Úvodní (marketingová) stránka Veď to - 5. 10. 2026.
   Předloha vizual/homepage.png, styl převzatý z úvodu Připiš
   (utraty-akce, static/css/uvod.css): stejné barvy, Inter a Kalam,
   tahy štětcem, poznámky rukou - jedna rodina webů. Samostatný styl,
   stránka nenačítá app.css. Jen světlá verze, stejně jako u Připiš. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 900;font-display:swap;src:url("/static/fonts/inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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-weight:400 900;font-display:swap;src:url("/static/fonts/inter-latin.woff2") format("woff2");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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Kalam";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/kalam-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:"Kalam";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/kalam-latin.woff2") format("woff2");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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --brand:#36B3B6;          /* logo, linky, tahy štětcem */
  --accent:#1A7F82;         /* tlačítka s bílým textem, odkazy (4,8 : 1) */
  --accent-ink:#FFFFFF;
  --accent-soft:#EDF9F9;
  --ink:#0F172A;
  --head:#060B16;
  --text:#1E293B;
  --muted:#64748B;
  --line:#E6ECEF;
  --line-soft:#F0F3F4;
  --bg:#FFFFFF;
  --bg-alt:#F5FAFA;
  --card:#FFFFFF;
  --ok:#15845A;
  --ok-soft:#EDF8F3;
  --warn:#A16207;
  --warn-soft:#FEF3DA;
  --danger:#C2410C;
  --danger-soft:#FDEDE4;
  --shadow:0 20px 52px rgba(15,23,42,.09);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hand:"Kalam","Segoe Print","Comic Sans MS",cursive;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.ikona{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* --- Hlavička --- */
header.web{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;color:var(--ink);flex:none}
.brand svg{display:block;height:54px;width:auto}
.navlinks{display:flex;align-items:center;gap:26px;color:var(--text);font-size:14px;font-weight:600}
.navlinks a:hover{color:var(--accent)}

.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--brand) 45%,transparent);background:var(--card);color:var(--accent);font-weight:700;font-size:18px;transition:.16s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 22%,transparent)}
.btn.small{font-size:14px;padding:12px 16px}
.btn .ikona{width:19px;height:19px}

h1,h2,h3{margin:0;color:var(--head);letter-spacing:-.045em}
h1{font-size:clamp(42px,5vw,66px);line-height:.98;font-weight:800;text-wrap:balance}
h2{font-size:clamp(32px,4vw,46px);line-height:1.04;font-weight:800;text-wrap:balance}
h3{font-size:19px;font-weight:750;letter-spacing:-.025em}
/* Ručně psané zvýraznění s tahem štětcem pod ním (jako „mi to“ v logu). */
.ruka{display:inline-block;position:relative;white-space:nowrap;font-family:var(--hand);font-weight:700;color:var(--accent);letter-spacing:-.01em;transform:rotate(-3deg);padding-bottom:6px}
.ruka svg{position:absolute;left:-4%;bottom:-10px;width:108%;height:16px;color:var(--brand)}
/* V nadpisu je ručně celá druhá věta - smí se zalomit, tah je pod ní celou. */
h1 .ruka{font-size:1.06em;white-space:normal;text-wrap:balance}
/* Název značky v běžném textu: „Veď to“ tučně, ať se odliší od věty. */
.znacka{font-weight:800;color:var(--head);white-space:nowrap}
.nadpis-tah{display:inline-block;position:relative;padding-bottom:12px}
.nadpis-tah svg{position:absolute;left:0;bottom:-2px;width:120px;height:12px;color:var(--brand)}
.sub{font-size:18px;line-height:1.62;color:var(--text);max-width:560px;margin:18px 0 0}
.odkaz{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:650;font-size:15px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.odkaz .ikona{width:18px;height:18px}

/* --- Hero --- */
.hero{padding:56px 0 72px;border-bottom:1px solid var(--line-soft)}
.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.stitek{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:7px 14px;margin-bottom:22px}
.stitek i{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.lead{max-width:540px;font-size:19px;line-height:1.58;color:var(--text);margin:30px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero-fakta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--text);font-size:14.5px;font-weight:600}
.hero-fakta li{display:flex;align-items:center;gap:8px}
.hero-fakta .ikona{width:17px;height:17px;color:var(--accent);stroke-width:2.6}

/* Monitor s náhledem docházky - čisté HTML, žádný obrázek. */
.hero-art{position:relative;padding-top:84px;padding-bottom:58px}
.poznamka{position:absolute;z-index:3;margin:0;font:700 25px/1.05 var(--hand);color:var(--ink);transform:rotate(-6deg);white-space:nowrap}
.poznamka.p1{left:50%;top:0;transform:translateX(-50%) rotate(-4deg)}
/* Druhá poznámka pod náhledem, šipka míří nahoru do docházky (jako na Připiš). */
.poznamka.p2{right:4%;bottom:4px;transform:rotate(-3deg)}
.poznamka.p2 svg{position:absolute;right:calc(100% + 8px);bottom:8px;width:54px;height:40px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sipka{position:absolute;left:calc(50% - 22px);top:34px;width:44px;height:52px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Náhled v okně prohlížeče - stejný prvek jako náhled správy na úvodu Připiš. */
.okno{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.okno-lista{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-alt)}
.okno-lista i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.okno-lista span{flex:1;min-width:0;margin-left:10px;text-align:center;font-size:12px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.obrazovka{background:#fff;display:grid;grid-template-columns:132px minmax(0,1fr);color:var(--ink);font-size:11px}
.obrazovka aside{border-right:1px solid var(--line);padding:12px 8px;display:grid;align-content:start;gap:1px;background:#FBFDFD}
.obrazovka aside .logo{color:var(--ink);padding:0 6px 12px}
.obrazovka aside .logo svg{height:24px;width:auto}
.obrazovka aside span{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;color:var(--muted);font-weight:550}
.obrazovka aside span .ikona{width:13px;height:13px}
.obrazovka aside span.akt{background:var(--accent);color:#fff}
.o-obsah{padding:14px 14px 12px;display:grid;gap:10px;min-width:0}
.o-hlava{display:flex;align-items:center;justify-content:space-between;gap:10px}
.o-hlava b{font-size:15px;letter-spacing:-.02em;color:var(--head)}
.o-hlava small{display:block;font-size:10px;color:var(--muted);font-weight:500;margin-top:1px}
.o-mesic{display:flex;align-items:center;gap:6px;font-weight:650}
.o-mesic i{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:6px;font-style:normal;color:var(--muted)}
.o-taby{display:flex;gap:16px;border-bottom:1px solid var(--line);color:var(--muted);font-weight:600}
.o-taby span{padding:0 0 7px}
.o-taby span.akt{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.o-tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.o-tab th{white-space:nowrap;font-size:9.5px;font-weight:600;color:var(--muted);text-align:center;padding:5px 4px;border-bottom:1px solid var(--line)}
.o-tab th:first-child,.o-tab td:first-child{text-align:left}
.o-tab th.prazdniny{color:var(--warn)}
.o-tab td{padding:5px 4px;border-bottom:1px solid var(--line-soft);text-align:center;white-space:nowrap}
.o-tab td.prazdniny{background:repeating-linear-gradient(-45deg,#FFF8E8 0 4px,#fff 4px 8px)}
.jm{display:flex;align-items:center;gap:6px;font-weight:550}
.jm i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-style:normal;font-size:8.5px;font-weight:750}
.st{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;color:#fff;font-size:10px;font-weight:800;line-height:1}
.st svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.st.p{background:var(--ok)}
.st.n{background:var(--danger)}
.st.o{background:#CBD5E1}
.st.na{background:var(--brand)}
.pl{display:inline-block;border-radius:999px;padding:2px 7px;font-size:9.5px;font-weight:700}
.pl.ok{background:var(--ok-soft);color:var(--ok)}
.pl.ceka{background:var(--warn-soft);color:var(--warn)}
.o-dlazdice{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.o-dlazdice div{border:1px solid var(--line);border-radius:10px;padding:7px 8px;min-width:0}
.o-dlazdice dt{font-size:9px;color:var(--muted);font-weight:600}
.o-dlazdice dd{white-space:nowrap;margin:2px 0 0;font-size:14px;font-weight:750;letter-spacing:-.02em;color:var(--head)}
.o-dlazdice div.vybrano{background:var(--accent-soft);border-color:transparent}
.o-dlazdice div.vybrano dd{color:var(--accent)}

/* --- Sekce --- */
.section{padding:84px 0;border-bottom:1px solid var(--line-soft)}
.sekce-hlava{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:44px}
.kroky{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;position:relative}
.krok{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;align-content:start}
.krok .cislo{grid-row:span 3;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:700;color:var(--muted)}
.krok .ikona{width:34px;height:34px;color:var(--accent);margin-bottom:10px}
.krok h3{margin-bottom:6px}
.krok p{margin:0;color:var(--text);font-size:15.5px;line-height:1.6;max-width:300px}

.funkce{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.funkce-mriz{display:grid;grid-template-columns:1fr 1fr;gap:28px 36px}
.fce{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr;gap:2px 14px;align-items:start;align-content:start}
.fce .bublina{grid-row:span 2;width:48px;height:48px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}
.fce h3{font-size:17px;margin-top:3px}
.fce p{margin:3px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}

.kurzy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kurz{border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px;background:var(--card);transition:.16s ease}
.kurz:hover{border-color:color-mix(in srgb,var(--brand) 50%,transparent);box-shadow:var(--shadow)}
.kurz .ikona{grid-row:span 2;width:34px;height:34px;color:var(--accent)}
.kurz h3{font-size:16.5px}
.kurz p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.kurzy-pozn{margin:22px 0 0;color:var(--text);font-size:15.5px}

.cenik-obal{background:var(--bg-alt);border-radius:28px;padding:48px;display:grid;grid-template-columns:.95fr 2.05fr;gap:40px;align-items:center}
.tarify{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tarif{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;align-content:start;gap:4px}
.tarif.hlavni{border:2px solid var(--brand);box-shadow:var(--shadow)}
.tarif .odznak{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:4px 12px;white-space:nowrap}
.tarif h3{font-size:18px}
.tarif .pro{font-size:13.5px;color:var(--muted)}
.tarif .cena{margin:14px 0 8px;font-size:36px;font-weight:800;letter-spacing:-.04em;color:var(--head)}
.tarif .cena small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.tarif ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--text)}
.tarif li{display:flex;gap:8px;align-items:flex-start}
.tarif li .ikona{width:17px;height:17px;color:var(--accent);stroke-width:2.6;margin-top:2px}
.tarif .btn{margin-top:auto;width:100%;font-size:15px;padding:12px 16px}
.cenik-pozn{grid-column:1/-1;margin:0;font-size:13.5px;color:var(--muted);text-align:right}

.dotazy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.dotazy details{border-bottom:1px solid var(--line);padding:18px 0}
.dotazy summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-weight:650;font-size:16.5px;color:var(--head)}
.dotazy summary::-webkit-details-marker{display:none}
.dotazy summary .ikona{width:20px;height:20px;color:var(--muted);transition:.16s}
.dotazy details[open] summary .ikona{transform:rotate(180deg)}
.dotazy details p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--text);max-width:520px}

.zajem{background:var(--accent);color:#fff;border-radius:28px;padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.zajem h2{color:#fff}
.zajem .ruka{color:#fff}
.zajem .ruka svg{color:#9BE3E5}
.zajem p{font-size:18px;line-height:1.6;margin:18px 0 0;color:#E6F7F7;max-width:560px}
.zajem .akce{display:grid;gap:12px;justify-items:start}
.zajem .btn{background:#fff;color:var(--accent);border-color:#fff}
.zajem small{font-size:14px;color:#D2F1F1}

footer.web{padding:44px 0 56px;color:var(--muted);font-size:14px}
.paticka{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.paticka .brand{color:var(--ink)}
.paticka .brand svg{height:64px}
.paticka p{margin:0}
.paticka a{color:var(--accent);font-weight:600}

/* --- Menší obrazovky --- */
@media(max-width:1060px){
  .hero-grid,.funkce,.cenik-obal,.zajem{grid-template-columns:1fr}
  .hero-art{max-width:720px}
  .kurzy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cenik-pozn{text-align:left}
}
@media(max-width:860px){
  .navlinks{display:none}
  .kroky,.funkce-mriz,.dotazy{grid-template-columns:1fr}
  .tarify{grid-template-columns:1fr}
  .tarif.hlavni{margin-top:8px}
  .section{padding:64px 0}
}
@media(max-width:640px){
  .container{width:calc(100% - 32px)}
  .brand svg{height:46px}
  .nav{min-height:66px}
  .nav .btn{padding:10px 14px}
  .hero{padding:36px 0 56px}
  .lead{font-size:17px}
  .hero-actions .btn{width:100%}
  .obrazovka{grid-template-columns:1fr}
  .obrazovka aside{display:none}
  .o-tab .skryt,.o-dlazdice .skryt{display:none}
  .o-obsah{padding:10px 8px}
  .jm i{display:none}
  .o-tab td,.o-tab th{padding:5px 2px}
  .o-mesic i{display:none}
  .o-dlazdice{grid-template-columns:repeat(3,minmax(0,1fr))}
  .poznamka.p1{left:50%;top:0;transform:translateX(-50%) rotate(-4deg)}
  .sipka{top:30px}
  .poznamka.p2{font-size:21px;right:2px}
  .poznamka.p2 svg{width:40px;height:30px}
  .kurzy{grid-template-columns:1fr}
  .cenik-obal,.zajem{padding:28px 20px;border-radius:22px}
}