/* ==========================================================================
   moje-prvni-video · design systém
   Přebarvená kopie naucit.video/css/styles.css (vizuální směr Měkký) do
   barev a fontů martynkova.cz (viz navrh.css). Rozložení a komponenty
   beze změny, jen tokeny v :root a hlavička/patička.
   Mobile-first od 375px, breakpointy přes min-width.
   ========================================================================== */

:root{
  /* barvy · z navrh.css (martynkova.cz) */
  --bg:#F4EFE8;
  --bg-alt:#EDE7DE;
  --surface:#FCF8F2;
  --text:#1A1714;
  --muted:#6B635A;
  --faint:#6E665D;
  --border:#DDD4C5;
  --accent:#A9573E;
  --accent-dark:#7A3E2C;
  --on-accent:#FFFFFF;

  /* typografie */
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'DM Serif Display',Georgia,serif;
  --track:-0.01em;

  /* tvar */
  --r:14px;
  --r-sm:10px;
  --sh:0 20px 45px -22px rgba(60,38,24,.38),0 4px 14px rgba(60,38,24,.07);
  --sh-sm:0 8px 20px -12px rgba(60,38,24,.28),0 1px 3px rgba(60,38,24,.06);

  /* rám · stejná šířka jako zbytek martynkova.cz */
  --rám:1180px;
  --okraj:clamp(20px,5vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-weight:400;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}

/* ---------- rám ---------- */
.wrap{width:100%;max-width:var(--rám);margin:0 auto;padding:0 var(--okraj)}
section{padding:56px 0}
.sekce-alt{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---------- typografie ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:var(--track);line-height:1.12;margin:0 0 16px}
h1{font-size:38px}
h2{font-size:28px}
h3{font-size:20px;line-height:1.3;font-family:var(--font);font-weight:700;letter-spacing:0}
p{margin:0 0 16px}
.lede{font-size:17px;color:var(--muted);max-width:78ch}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
         color:var(--accent-dark);margin:0 0 14px}
a{color:var(--accent-dark)}
em{font-style:italic;color:var(--accent-dark)}

/* ---------- navigace (landing, minimální) ---------- */
.nav{padding:18px 0;border-bottom:1px solid var(--border);background:rgba(244,239,232,.86);
     backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:var(--font-display);font-weight:400;font-size:20px;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.logo i{color:var(--accent-dark);font-style:normal}
.nav .btn{padding:12px 22px;font-size:13px}

/* ---------- tlačítka ---------- */
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);text-decoration:none;
     font-weight:600;font-size:16px;padding:16px 30px;border-radius:var(--r-sm);
     border:none;cursor:pointer;transition:transform .15s,filter .15s;text-align:center}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-blok{display:block;width:100%}
.btn-druhy{background:transparent;color:var(--accent-dark);border:1px solid var(--border)}
.btn-druhy:hover{background:var(--bg-alt);color:var(--accent-dark)}
.pod-tlacitkem{font-size:13px;color:var(--faint);margin-top:12px}

/* ---------- karty ---------- */
.karta{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
       padding:26px 22px;box-shadow:var(--sh-sm)}
.karta-zvyraznena{box-shadow:var(--sh)}

/* ---------- mřížky ---------- */
.mrizka{display:flex;flex-direction:column;gap:18px}

/* ---------- statistiky ---------- */
.statistiky{display:flex;flex-direction:column;gap:20px;margin-top:40px;
            padding-top:30px;border-top:1px solid var(--border)}
.stat .cislo{font-family:var(--font-display);font-size:30px;font-weight:400;line-height:1;color:var(--accent-dark)}
.stat .popis{font-size:13px;color:var(--muted)}

/* ---------- seznamy ---------- */
.odrazky{list-style:none;padding:0;margin:0}
.karta .odrazky{margin-top:4px}
.odrazky li{position:relative;padding-left:24px;margin-bottom:4px;color:var(--muted);
             line-height:1.5}
.odrazky li:last-child{margin-bottom:0}
.odrazky li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
                    border-radius:50%;background:var(--accent)}
.odrazky.tmava li{color:var(--text)}

/* ---------- modul ---------- */
.modul{display:flex;flex-direction:column;gap:4px}
.modul .poradi{font-size:13px;font-weight:700;color:var(--faint);letter-spacing:.1em}

/* ---------- cena ---------- */
.cenovka{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
         padding:30px 24px;box-shadow:var(--sh)}
.cenovka .castka{font-family:var(--font-display);font-size:44px;font-weight:400;line-height:1;
                 color:var(--accent-dark);margin:6px 0 4px}
.cenovka .puvodni{font-size:14px;color:var(--faint)}

/* ---------- patička ---------- */
.pata{border-top:1px solid var(--border);padding:34px 0 56px;color:var(--faint);font-size:14px}
.pata a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pata a:hover{color:var(--accent-dark)}
.pata-radky{display:flex;flex-direction:column;gap:8px}

/* ---------- pomocné ---------- */
.mimo{font-size:12px;color:var(--faint)}
.stred{text-align:center}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width:720px){
  section{padding:80px 0}
  h1{font-size:58px}
  h2{font-size:36px}
  h3{font-size:22px}
  .lede{font-size:18px}
  .btn-blok{display:inline-block;width:auto}
  .karta{padding:32px 30px}
  .cenovka{padding:40px 36px}
  .cenovka .castka{font-size:56px}
  .mrizka{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .mrizka-3{grid-template-columns:repeat(3,1fr)}
  .statistiky{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .pata-radky{flex-direction:row;justify-content:space-between;align-items:center}
}

/* ==========================================================================
   Komponenty převzaté z původní prodejní stránky
   Telefon a YouTube jsou simulace cizích rozhraní. Používají barvy toho
   rozhraní (černá plocha, červená tečka nahrávání), ne paletu značky.
   Je to citace, ne druhý akcent.
   ========================================================================== */

/* ---------- telefon na šířku ---------- */
.telefon-blok{width:100%;margin:36px 0}
.telefon{width:min(600px,100%);aspect-ratio:16/9;margin:0 auto;background:#14171A;
         border-radius:30px;padding:9px;position:relative;
         box-shadow:0 18px 44px rgba(26,23,20,.22),0 0 0 1.5px rgba(181,99,74,.25)}
.telefon-obrazovka{width:100%;height:100%;border-radius:22px;overflow:hidden;
                   background:linear-gradient(130deg,#2A2622,#1B1815);position:relative}
.telefon-tlacitko{position:absolute;top:50%;left:12px;transform:translateY(-50%);
                  width:20px;height:88px;background:#14171A;border-radius:11px;z-index:6}
.mrizka-kompozice{position:absolute;inset:22px 48px 22px 56px;pointer-events:none}
.mrizka-kompozice::before,.mrizka-kompozice::after{content:"";position:absolute}
.mrizka-kompozice::before{left:33.3%;right:33.3%;top:0;bottom:0;
  border-left:1px solid rgba(244,239,232,.16);border-right:1px solid rgba(244,239,232,.16)}
.mrizka-kompozice::after{top:33.3%;bottom:33.3%;left:0;right:0;
  border-top:1px solid rgba(244,239,232,.16);border-bottom:1px solid rgba(244,239,232,.16)}
.postava{position:absolute;left:47%;top:54%;transform:translate(-50%,-50%);
         width:104px;height:124px;border-radius:52px 52px 13px 13px;
         background:linear-gradient(180deg,rgba(181,99,74,.42),rgba(181,99,74,.12));
         border:1px dashed rgba(244,239,232,.45)}
.postava::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
                 width:40px;height:40px;border-radius:50%;background:rgba(244,239,232,.24)}
.rec{position:absolute;top:15px;left:46px;display:flex;align-items:center;gap:7px;
     background:rgba(0,0,0,.42);padding:5px 10px;border-radius:18px;
     font-weight:700;font-size:11px;letter-spacing:.04em;color:#F4EFE8}
.rec-tecka{width:8px;height:8px;border-radius:50%;background:#C8262B;animation:blikani 1.4s infinite}
@keyframes blikani{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.rec-tecka{animation:none}}
.cam-badge{position:absolute;top:15px;right:46px;background:rgba(0,0,0,.42);
           padding:5px 9px;border-radius:8px;font-weight:700;font-size:10px;
           letter-spacing:.05em;color:#F4EFE8}
.spoust{position:absolute;right:24px;top:50%;transform:translateY(-50%);
        width:46px;height:46px;border-radius:50%;border:3.5px solid #F4EFE8;background:#C8262B}
.telefon-popisek{text-align:center;margin-top:16px;font-size:13px;color:var(--faint);
                 font-weight:600;letter-spacing:.04em}

/* ---------- YouTube kanál ---------- */
.yt{background:#0f0f0f;border-radius:14px;overflow:hidden;border:1px solid #2A2622;
    box-shadow:var(--sh);max-width:460px}
.yt-banner{height:64px;background:linear-gradient(130deg,var(--accent),#C4795B,#E0AF98)}
.yt-hlava{display:flex;align-items:flex-end;gap:12px;padding:0 16px 12px}
.yt-avatar{width:50px;height:50px;border-radius:50%;flex:none;margin-top:-25px;z-index:2;
           background:linear-gradient(135deg,var(--accent),#C4795B);border:3px solid #0f0f0f}
.yt-info{flex:1;padding-top:6px}
.yt-jmeno{height:9px;border-radius:5px;background:rgba(255,255,255,.8);width:108px;margin-bottom:5px}
.yt-odbery{height:7px;border-radius:4px;background:rgba(255,255,255,.3);width:62px}
.yt-btn{background:#fff;color:#0f0f0f;font-weight:800;font-size:10px;letter-spacing:.05em;
        text-transform:uppercase;padding:8px 14px;border-radius:20px;flex:none;margin-bottom:2px}
.yt-videa{display:flex;flex-direction:column;gap:10px;padding:10px 14px 14px}
.yt-video{border-radius:8px;overflow:hidden;position:relative}
.yt-nahled{aspect-ratio:16/9;position:relative;
           background:linear-gradient(135deg,rgba(181,99,74,.3),rgba(20,23,26,.75))}
.yt-video.nove .yt-nahled{background:linear-gradient(135deg,rgba(181,99,74,.6),rgba(224,175,152,.3))}
.yt-delka{position:absolute;bottom:5px;right:6px;background:rgba(0,0,0,.85);color:#fff;
          font-weight:700;font-size:9px;padding:2px 5px;border-radius:4px}
.yt-nove{position:absolute;top:5px;left:6px;background:#C8262B;color:#fff;font-weight:800;
         font-size:8px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px}
.yt-popis{padding:6px 2px 0;display:flex;gap:7px}
.yt-popis-av{width:22px;height:22px;border-radius:50%;background:var(--accent);opacity:.5;flex:none}
.yt-popis-info{flex:1}
.yt-popis-titulek{height:7px;border-radius:4px;background:rgba(255,255,255,.55);margin-bottom:4px;width:88%}
.yt-popis-sub{height:6px;border-radius:4px;background:rgba(255,255,255,.22);width:55%}
.yt-zhlednuti{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:9px;
              color:rgba(255,255,255,.45);font-weight:500}
.yt-pocet{color:rgba(255,255,255,.85);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- lektorka ---------- */
.lektorka{display:flex;flex-direction:column;gap:22px}
.lektorka-dovetek{margin-top:32px;max-width:78ch;color:var(--muted)}

/* ---------- otázky ---------- */
.otazka{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
        border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm)}
.otazka p{margin:0;color:var(--text);font-weight:600}
.otaznik{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);
         font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;font-size:15px}

/* ---------- obrázky v obsahu ---------- */
.obrazek{width:100%;border-radius:var(--r);box-shadow:var(--sh);margin:28px 0}
.obrazek-uzky{max-width:340px;margin:28px auto}
.dvojice{display:flex;flex-direction:column;gap:26px;align-items:center}
.badge-garance{width:120px;height:auto;flex:none}

@media (min-width:720px){
  .telefon-blok{margin:48px 0}
  .lektorka{flex-direction:row;gap:34px;align-items:flex-start}
  .dvojice{flex-direction:row;gap:40px;align-items:center}
  .dvojice > *{flex:1}
  .yt{max-width:100%}
}

/* ---------- <picture> se chová jako obrázek ---------- */
picture{display:block}
picture img{display:block;width:100%;height:auto}
.lektorka-foto{width:120px;height:120px;border-radius:var(--r);overflow:hidden;flex:none}
.lektorka-foto img{width:100%;height:100%;object-fit:cover}
.badge-garance{width:120px;flex:none}
.badge-garance img{width:100%}

@media (min-width:720px){
  .lektorka-foto{width:170px;height:170px}
}

/* Karta na celou šířku mřížky */
@media (min-width:720px){
  .karta-siroka{grid-column:1 / -1}
  .karta-siroka .modul-obsah{display:grid;grid-template-columns:1fr 460px;gap:40px;align-items:start}
}

/* ==========================================================================
   Příběhy klientů
   ========================================================================== */
.pribehy{display:flex;flex-direction:column;gap:24px;margin-top:30px}

.pribehy-seznam{display:flex;flex-direction:row;gap:8px;overflow-x:auto;
                padding-bottom:6px;-webkit-overflow-scrolling:touch}
.pribehy-seznam a{flex:none;font-size:14px;line-height:1.35;color:var(--muted);
                  text-decoration:none;padding:10px 14px;border:1px solid var(--border);
                  border-radius:99px;background:var(--surface);white-space:nowrap;transition:.18s}
.pribehy-seznam a.aktivni{color:var(--accent-dark);border-color:var(--accent);font-weight:700}

.pribehy-karty{display:flex;flex-direction:column;gap:20px;background:var(--bg)}
.pribeh{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
        box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column;
        scroll-margin-top:24px;transition:box-shadow .25s}
.pribeh.vidim{box-shadow:var(--sh)}
.pribeh-text{padding:26px 22px}
.pribeh-cara{display:block;width:26px;height:2px;background:var(--accent);margin-bottom:16px}
.pribeh-text h3{margin-bottom:12px}
.pribeh-text p{color:var(--muted)}
.pribeh-kdo{display:flex;align-items:center;gap:12px;margin:18px 0 0;
            padding-top:16px;border-top:1px solid var(--border);font-size:14px}

@media (min-width:900px){
  .pribehy{flex-direction:row;gap:44px;align-items:flex-start}
  .pribehy-seznam{flex-direction:column;width:260px;flex:none;gap:0;overflow:visible;
                  border-left:2px solid var(--border);position:sticky;top:28px}
  .pribehy-seznam a{border:none;background:transparent;border-radius:0;white-space:normal;
                    padding:14px 0 14px 20px;margin-left:-2px;border-left:2px solid transparent}
  .pribehy-seznam a:hover{color:var(--accent-dark)}
  .pribehy-seznam a.aktivni{border-left-color:var(--accent)}
  .pribehy-karty{flex:1;gap:26px;padding-bottom:8vh}
  .pribeh{flex-direction:row;align-items:stretch;position:sticky}
  .pribeh:nth-child(1){top:70px}
  .pribeh:nth-child(2){top:88px}
  .pribeh:nth-child(3){top:106px}
  .pribeh:nth-child(4){top:124px}
  .pribeh:nth-child(5){top:142px}
  .pribeh-text{flex:1;padding:34px 30px;display:flex;flex-direction:column}
  .pribeh-kdo{margin-top:auto}
}

/* ==========================================================================
   Cesta vzhůru
   ========================================================================== */
.vystup{display:flex;flex-direction:column;gap:34px}
.vystup-text{flex:1}

.kroky{list-style:none;padding:0;margin:26px 0 0;counter-reset:krok}
.kroky li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;line-height:1.45;
          border-bottom:1px solid var(--border);color:var(--text);opacity:.45;
          transition:opacity .5s ease}
.kroky li:last-child{border-bottom:none}
.krok-cislo{width:26px;height:26px;border-radius:50%;background:var(--bg-alt);
            color:var(--accent-dark);font-weight:700;font-size:13px;flex:none;
            display:flex;align-items:center;justify-content:center;transition:.4s}
.hora-bezi .kroky li{opacity:1}
.hora-bezi .kroky li .krok-cislo{background:var(--accent);color:var(--on-accent)}
.hora-bezi .kroky li:nth-child(1){transition-delay:.15s}
.hora-bezi .kroky li:nth-child(2){transition-delay:.4s}
.hora-bezi .kroky li:nth-child(3){transition-delay:.65s}
.hora-bezi .kroky li:nth-child(4){transition-delay:.9s}
.hora-bezi .kroky li:nth-child(5){transition-delay:1.15s}
.hora-bezi .kroky li:nth-child(6){transition-delay:1.4s}
.hora-bezi .krok-cislo{transition-delay:inherit}

.hora{margin:0;flex:1}
.hora svg{width:100%;height:auto;display:block;overflow:visible}
.hora-mlha{fill:var(--border);opacity:.45}
.hora-telo{fill:#C7B9A8}
.hora-snih{fill:#F2EBE1}

.trasa-pozadi{fill:none;stroke:var(--muted);stroke-width:2;opacity:.35;
              stroke-dasharray:1 7;stroke-linecap:round}
.trasa-postup{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;
              stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.hora-bezi .trasa-postup{transition:stroke-dashoffset 1.8s ease-out;stroke-dashoffset:0}

.bod{fill:var(--surface);stroke:var(--accent);stroke-width:2.5;opacity:0;
     transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.hora-bezi .bod{opacity:1;transform:scale(1);
                transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
                transition-delay:calc(.15s + var(--i) * .25s)}
.bod.vrchol{fill:var(--accent);stroke:var(--surface);stroke-width:3}

.stitek{fill:var(--bg-alt);stroke:var(--border);stroke-width:1;opacity:0}
.stitek-vrchol{fill:var(--accent);stroke:none}
.stitek-text{font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.1em;
             fill:var(--muted);text-anchor:middle;opacity:0}
.stitek-text-vrchol{fill:var(--on-accent)}
.hora-bezi .stitek,.hora-bezi .stitek-text{opacity:1;transition:opacity .4s ease .3s}
.hora-bezi .stitek-vrchol,.hora-bezi .stitek-text-vrchol{transition-delay:1.5s}

@media (prefers-reduced-motion:reduce){
  .kroky li,.trasa-postup,.bod,.stitek,.stitek-text{opacity:1;transform:none;transition:none}
  .trasa-postup{stroke-dashoffset:0}
  .kroky li .krok-cislo{background:var(--accent);color:var(--on-accent)}
}

@media (min-width:900px){
  .vystup{flex-direction:row;gap:56px;align-items:center}
  .vystup-text{flex:1.1}
  .hora{flex:1}
}

.sekce-zlom{border-top:1px solid var(--border)}
.sekce-zlom > .wrap > h2:first-child,
.sekce-zlom .pribehy-nadpis{margin-top:0}

/* Tlačítko Cookies v patičce · dotykový cíl aspoň 44 px.
   Tahle stránka nenačítá navrh.css, takže potřebuje vlastní pravidlo. */
.footer-cookies{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-family:inherit;
  font-size:12.5px;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.footer-cookies:hover{color:var(--accent-dark)}