/* Písma: Young Serif, Onest, Bebas Neue, Caveat, Inter – SIL Open Font License 1.1, hostováno lokálně (bez Google Fonts) */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-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:'Caveat';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/caveat-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/caveat-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:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../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:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/onest-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/onest-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:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/young-serif-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/young-serif-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}

/* ==========================================================================
   MenuPanel – menupanel.cz
   Barvy: lahvová zeleň, šafrán, paprika, porcelán
   ========================================================================== */

:root {
  --green: #0f3d30;
  --green-deep: #0a2e24;
  --green-2: #17513f;
  --chalk: #f3f0e6;
  --chalk-2: rgba(243, 240, 230, .76);
  --chalk-line: rgba(243, 240, 230, .16);
  --porcelain: #eef2ef;
  --white: #ffffff;
  --saffron: #ffb000;
  --saffron-hi: #ffc23d;
  --paprika: #e5482e;
  --ink: #13302a;
  --ink-2: #48605a;
  --line: rgba(19, 48, 42, .14);

  --serif: 'Young Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gutter: clamp(16px, 4vw, 32px);
  --radius: 10px;
  --focus: var(--paprika);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }

img { max-width: 100%; display: block; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: clamp(2.5rem, 1.55rem + 3.7vw, 4.5rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 1.45rem + 2.2vw, 3rem); line-height: 1.08; text-wrap: balance; }
h3 { font-size: 1.3125rem; line-height: 1.3; font-weight: 650; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--saffron); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 650;
}
.skip:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: var(--radius);
  background: var(--saffron); color: var(--ink);
  font: 650 1.0625rem/1.2 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s;
}
.btn:hover { background: var(--saffron-hi); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
.btn-ghost { background: transparent; color: var(--chalk); box-shadow: inset 0 0 0 1.5px rgba(243, 240, 230, .45); }
.btn-ghost:hover { background: rgba(243, 240, 230, .08); box-shadow: inset 0 0 0 1.5px var(--chalk); }
.btn-dark { background: var(--green); color: var(--chalk); }
.btn-dark:hover { background: var(--green-2); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.demo-note { font-size: .875rem; line-height: 1.45; color: var(--ink-2); margin: 0; }

/* ---------- Sections ---------- */
.sec { padding-block: clamp(72px, 9vw, 128px); }
.sec-light { background: var(--porcelain); }
.sec-white { background: var(--white); }
.sec-dark { background: var(--green); color: var(--chalk); --focus: var(--saffron); }
.sec-dark .demo-note { color: var(--chalk-2); }
.sec-saffron { background: var(--saffron); color: var(--ink); --focus: var(--green); }
.sec-saffron .demo-note { color: rgba(19, 48, 42, .8); }

.sec-head { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head p { margin: 16px 0 0; font-size: 1.1875rem; color: var(--ink-2); max-width: 40rem; }
.sec-dark .sec-head p { color: var(--chalk-2); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 70% at 70% 0%, rgba(255, 255, 255, .05), transparent 60%),
    var(--green);
  color: var(--chalk);
  --focus: var(--saffron);
  padding-bottom: clamp(64px, 8vw, 112px);
}

.nav { display: flex; align-items: center; gap: 24px; min-height: 76px; position: relative; z-index: 3; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-family: var(--serif); font-size: 1.375rem; line-height: 1; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.nav nav { margin-left: auto; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--chalk-2); text-decoration: none; font-size: .9375rem; font-weight: 500; }
.nav-links a:hover { color: var(--chalk); text-decoration: underline; }
@media (max-width: 879px) {
  .nav nav { display: none; }
  .nav .btn-small { margin-left: auto; }
}
@media (max-width: 359px) {
  .nav { gap: 12px; }
  .nav .brand { font-size: 1.1875rem; gap: 8px; }
  .nav .brand-mark { width: 28px; height: 28px; }
  .nav .btn-small { padding: 0 12px; font-size: .875rem; }
}

.hero-grid {
  display: grid; gap: 48px; align-items: center;
  padding-top: clamp(24px, 5vw, 64px);
  position: relative; z-index: 2;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); }
}
.hero-copy { max-width: 36rem; }
.hero h1 { text-wrap: balance; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--chalk-2); margin: 24px 0 32px; max-width: 32em; }
@media (min-width: 900px) { .lede { font-size: 1.25rem; } }
.hero-note { margin: 20px 0 0; font-size: .9375rem; color: var(--chalk-2); max-width: 30em; }

/* Demo figure */
.hero-demo { margin: 0; position: relative; min-width: 0; }
.glow { position: absolute; inset: -22% -14% -4%; pointer-events: none; z-index: 0; }
.glow i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.glow .g-d { background: radial-gradient(closest-side, rgba(255, 168, 30, .5), rgba(255, 168, 30, .16) 60%, transparent); }
.glow .g-b { background: radial-gradient(closest-side, rgba(150, 215, 190, .3), rgba(150, 215, 190, .09) 60%, transparent); }
.glow .g-a { background: radial-gradient(closest-side, rgba(235, 60, 70, .5), rgba(235, 60, 70, .14) 60%, transparent); }
.hero-demo[data-show="d"] .g-d, .hero-demo[data-show="b"] .g-b, .hero-demo[data-show="a"] .g-a { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .glow i { transition: none; } }

.tvset { position: relative; z-index: 1; }
.bezel {
  background: linear-gradient(180deg, #202322, #0e100f);
  padding: clamp(5px, 1.05%, 12px);
  border-radius: clamp(6px, 1.1%, 14px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    0 2px 0 rgba(255, 255, 255, .04),
    0 50px 70px -40px rgba(0, 0, 0, .8),
    0 22px 40px -24px rgba(0, 0, 0, .55);
}

.daybar { display: flex; gap: 14px; align-items: stretch; margin-top: 22px; position: relative; z-index: 1; }
.clock { margin: 0; flex: none; display: flex; flex-direction: column; justify-content: center; min-width: 5.4rem; }
.clock-label { font-size: .8125rem; color: var(--chalk-2); line-height: 1.2; }
.clock-time { font-weight: 600; font-size: 2.25rem; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dayparts { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dp {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .05); color: var(--chalk);
  border: 1px solid rgba(243, 240, 230, .16); border-radius: var(--radius);
  padding: 10px 12px 13px; font: inherit;
  transition: background-color .2s, border-color .2s;
}
.dp:hover { background: rgba(255, 255, 255, .09); }
.dp[aria-pressed="true"] { background: rgba(255, 176, 0, .13); border-color: rgba(255, 176, 0, .7); }
.dp-time { display: block; font-size: .8125rem; line-height: 1.3; color: var(--chalk-2); font-variant-numeric: tabular-nums; }
.dp-name { display: block; font-weight: 650; font-size: 1rem; line-height: 1.25; }
.dp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--saffron); transform: scaleX(0); transform-origin: left; }
.dp[aria-pressed="true"] .dp-bar { animation: dpFill var(--dur, 12s) linear forwards; }
@keyframes dpFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-demo.is-paused .dp-bar, .hero-demo.is-offscreen .dp-bar { animation-play-state: paused !important; }
.hero-demo.is-static .dp[aria-pressed="true"] .dp-bar { animation: none; transform: scaleX(1); }

.demo-foot { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-top: 16px; position: relative; z-index: 1; }
.hero .demo-note { color: var(--chalk-2); }

@media (max-width: 520px) {
  .daybar { flex-direction: column; gap: 10px; }
  .clock { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; }
  .clock-time { font-size: 1.75rem; }
  .dp { padding: 9px 10px 12px; }
  .dp-name { font-size: .9375rem; }
}

/* Pause / play toggle */
.tv-toggle {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: inherit; cursor: pointer;
  border: 1px solid currentColor; border-radius: 999px; opacity: .85;
  font: 600 .8125rem/1 var(--sans); padding: 8px 14px 8px 11px; min-height: 36px;
}
.tv-toggle:hover { opacity: 1; }
.tv-toggle .ic { width: 12px; height: 12px; position: relative; }
.tv-toggle .ic::before, .tv-toggle .ic::after { content: ''; position: absolute; top: 0; bottom: 0; width: 4px; background: currentColor; border-radius: 1px; }
.tv-toggle .ic::before { left: 1px; } .tv-toggle .ic::after { right: 1px; }
.tv-toggle[data-paused="true"] .ic::before { left: 2px; width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; border-radius: 0; }
.tv-toggle[data-paused="true"] .ic::after { display: none; }

/* ==========================================================================
   JAK TO FUNGUJE
   ========================================================================== */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.steps li { position: relative; }
.step-n {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--saffron); color: var(--ink);
  font-weight: 700; font-size: 1.75rem; line-height: 1; margin-bottom: 24px; font-variant-numeric: lining-nums;
  box-shadow: 0 0 0 6px var(--porcelain), 0 0 0 7px rgba(19, 48, 42, .12);
}
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--ink-2); margin: 0; max-width: 24em; }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .steps li:not(:last-child)::after {
    content: ''; position: absolute; top: 31px; left: 92px; right: -20px;
    border-top: 3px dotted rgba(19, 48, 42, .3);
  }
}
@media (max-width: 819px) {
  .steps li { padding-left: 88px; min-height: 64px; }
  .step-n { position: absolute; left: 0; top: 0; margin: 0; }
  .steps li:not(:last-child)::after {
    content: ''; position: absolute; left: 30px; top: 84px; bottom: -28px;
    border-left: 3px dotted rgba(19, 48, 42, .3);
  }
}

/* ==========================================================================
   ZADÁVÁNÍ Z MOBILU
   ========================================================================== */
.mobile-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 940px) { .mobile-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; } }
.sec-lede { font-size: 1.1875rem; margin: 18px 0 36px; max-width: 32em; color: rgba(19, 48, 42, .82); }

.ptabs { display: grid; gap: 8px; }
.ptab {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--radius);
  padding: 16px 18px 16px 22px; position: relative;
  transition: background-color .2s;
}
.ptab::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 4px; background: rgba(19, 48, 42, .22); }
.ptab:hover { background: rgba(255, 255, 255, .22); }
.ptab[aria-selected="true"] { background: rgba(255, 255, 255, .55); }
.ptab[aria-selected="true"]::before { background: var(--green); }
.ptab-t { display: block; font-weight: 700; font-size: 1.1875rem; line-height: 1.3; }
.ptab-d { display: block; margin-top: 4px; font-size: 1rem; line-height: 1.5; color: rgba(19, 48, 42, .8); }

@media (max-width: 939px) {
  .ptab[aria-selected="false"] .ptab-d { display: none; }
  .ptab { padding-block: 12px; }
  .ptab::before { top: 12px; bottom: 12px; }
}
.mobile-demo { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Phone mock (scoped) */
.phone {
  width: min(300px, 100%); height: 624px; border-radius: 42px; background: #101614; padding: 10px;
  box-shadow: inset 0 0 0 1.5px #2a332f, 0 40px 60px -32px rgba(90, 45, 0, .6), 0 12px 24px -12px rgba(90, 45, 0, .35);
  position: relative;
}
.phone::before { content: ''; position: absolute; top: 18px; left: 50%; width: 76px; height: 20px; margin-left: -38px; background: #101614; border-radius: 12px; z-index: 3; }
.phone-screen {
  width: 100%; height: 100%; border-radius: 32px; background: #f4f6f3; overflow: hidden; position: relative;
  font-family: var(--sans); color: #17241f; font-size: 12px; line-height: 1.35;
}
.ps { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ps[hidden] { display: none; }
.ps-top { padding: 38px 14px 9px; background: #fff; border-bottom: 1px solid #e6e9e6; }
.ps-v { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; }
.ps-v i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: #dfe8e3; display: grid; place-items: center; font-size: 10.5px; color: #0f3d30; }
.ps-tabs { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: #7b8781; }
.ps-tabs b { color: #17241f; border-bottom: 2px solid var(--paprika); padding-bottom: 4px; }
.wk { display: flex; gap: 6px; padding: 10px 14px; background: #fff; }
.wk div { flex: 1; text-align: center; border-radius: 10px; padding: 6px 0 5px; background: #eef2ef; font-size: 10px; color: #6f7c76; }
.wk div b { display: block; font-size: 14px; color: #17241f; }
.wk div::after { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; margin: 3px auto 0; background: var(--dot, transparent); }
.wk .pub { --dot: #2f9e44; } .wk .dr { --dot: #f08c00; }
.wk .sel { background: #0f3d30; color: #b9cfc6; } .wk .sel b { color: #fff; }
.ps-body { flex: 1; overflow: hidden; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.ps .pill { align-self: flex-start; background: #fff1dc; color: #a35400; border-radius: 20px; padding: 3px 9px; font-size: 10.5px; font-weight: 600; }
.ps .grp { font-size: 10.5px; color: #6f7c76; font-weight: 700; margin-top: 2px; }
.ps .it { display: flex; gap: 9px; align-items: center; background: #fff; border-radius: 12px; padding: 6px 7px; border: 1px solid #e6e9e6; }
.ps .th { width: 40px; height: 40px; border-radius: 9px; background-size: cover; background-position: center; flex-shrink: 0; background-color: #e9ede9; }
.ps .th-empty { display: grid; place-items: center; color: #8d9893; font-size: 9.5px; text-align: center; line-height: 1.1; }
.ps .tx { flex: 1; min-width: 0; }
.ps .tx b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps .tx span { font-size: 10.5px; color: #6f7c76; }
.ps .pr { font-weight: 700; font-size: 12.5px; }
.ps .acts { display: flex; gap: 6px; margin-top: 2px; }
.ps .acts .pbtn { white-space: nowrap; font-size: 11px; padding-inline: 2px; }
#ps-week .ps-body { gap: 7px; }
#ps-week .th { width: 36px; height: 36px; }
.pbtn { flex: 1; display: block; text-align: center; border-radius: 10px; padding: 8px 4px; font-weight: 600; font-size: 11.5px; background: #fff; border: 1px solid #dde2de; }
.pbtn.pri { background: #0f3d30; color: #fff; border-color: #0f3d30; }
.pbtn.dark { background: #17241f; color: #fff; border-color: #17241f; }
.ps-foot { padding: 10px 14px 22px; background: #fff; border-top: 1px solid #e6e9e6; display: flex; gap: 8px; }
.ta { background: #fff; border: 1px solid #dde2de; border-radius: 10px; padding: 8px 9px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 9.4px; line-height: 1.5; color: #45504b; white-space: pre; overflow: hidden; }
.sum { display: flex; gap: 6px; flex-wrap: wrap; }
.sum span { font-size: 10.5px; border-radius: 20px; padding: 3px 8px; background: #e3f6e7; color: #23733a; font-weight: 600; }
.sum span.w { background: #fff1dc; color: #a35400; }
.prs { background: #fff; border: 1px solid #e6e9e6; border-radius: 12px; overflow: hidden; }
.prs .h { background: #eef2ef; padding: 5px 9px; font-weight: 700; font-size: 10.5px; }
.prs .r { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 9px; border-top: 1px solid #eef0ee; }
.prs .r b { font-size: 11.5px; font-weight: 600; }
.prs .r .p { font-weight: 700; font-size: 11.5px; }
.prs .r .m { grid-column: 1 / -1; font-size: 10px; color: #6f7c76; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.prs .tag { border-radius: 5px; padding: 1px 5px; font-size: 9.5px; font-weight: 600; background: #eef0ee; color: #56625d; }
.prs .tag.lib { background: #e2f0ff; color: #1c64b0; }
.prs .r.warn { background: #fff7ea; }
.prs .r.warn b { color: #a35400; font-weight: 500; font-style: italic; }
.inp { background: #fff; border: 2px solid #0f3d30; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.inp i { display: inline-block; width: 1px; height: 14px; background: #17241f; vertical-align: middle; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.dd { background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 61, 48, .14); border: 1px solid #e6e9e6; overflow: hidden; margin-top: -4px; }
.dd .o { display: flex; gap: 9px; align-items: center; padding: 8px; border-bottom: 1px solid #eef0ee; }
.dd .o.on { background: #fff6e0; }
.dd .o .th { width: 36px; height: 36px; border-radius: 8px; }
.dd .o b { display: block; font-size: 11.5px; }
.dd .o span { font-size: 10px; color: #6f7c76; }
.dd mark { background: #ffe1a1; color: inherit; padding: 0 1px; border-radius: 2px; }
.fld { display: flex; flex-direction: column; gap: 3px; }
.fld .lab { font-size: 10px; color: #6f7c76; font-weight: 600; }
.fld .f { background: #fff; border: 1px solid #dde2de; border-radius: 9px; padding: 7px 9px; font-size: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.alg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.alg span { text-align: center; border-radius: 7px; padding: 4px 0; background: #fff; border: 1px solid #dde2de; font-weight: 600; font-size: 11px; }
.alg span.on { background: #0f3d30; color: #fff; border-color: #0f3d30; }
.photo-row { display: flex; gap: 6px; align-items: center; }
.photo-row .th { width: 34px; height: 34px; border-radius: 8px; }
.chk { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.chk i { width: 16px; height: 16px; border-radius: 4px; background: #0f3d30; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 11px; }

/* entrance of phone content after a tab switch (user triggered) */
.ps.is-enter .ps-body > * { animation: psIn .45s cubic-bezier(.2, .7, .2, 1) both; }
.ps.is-enter .ps-body > *:nth-child(2) { animation-delay: .05s; }
.ps.is-enter .ps-body > *:nth-child(3) { animation-delay: .1s; }
.ps.is-enter .ps-body > *:nth-child(4) { animation-delay: .15s; }
.ps.is-enter .ps-body > *:nth-child(5) { animation-delay: .2s; }
.ps.is-enter .ps-body > *:nth-child(6) { animation-delay: .25s; }
.ps.is-enter .ps-body > *:nth-child(n+7) { animation-delay: .3s; }
@keyframes psIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   VZHLEDY
   ========================================================================== */
.styles { display: grid; gap: 32px; }
@media (min-width: 1000px) { .styles { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; } }

.stabs { display: grid; gap: 6px; }
@media (min-width: 600px) and (max-width: 999px) { .stabs { grid-template-columns: 1fr 1fr; } }
.stab {
  text-align: left; font: inherit; color: var(--chalk); cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  padding: 14px 16px 15px; transition: background-color .2s, border-color .2s;
}
.stab:hover { background: rgba(255, 255, 255, .05); }
.stab[aria-selected="true"] { background: rgba(255, 255, 255, .07); border-color: rgba(255, 176, 0, .65); }
.stab-t { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.stab-d { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--chalk-2); }
.stab-f { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.45; color: var(--saffron); font-weight: 600; }
@media (max-width: 599px) {
  .stabs { grid-template-columns: 1fr 1fr; }
  .stab { padding: 10px 12px; }
  .stab-t { font-size: 1.1875rem; }
  .stab-d { display: none; }
  .stab-f { font-size: .8125rem; font-weight: 500; }
}

.styles-stage { margin: 0; min-width: 0; }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.brand-label { font-size: .9375rem; font-weight: 600; }
.swatches { display: inline-flex; gap: 8px; }
.sw {
  width: 40px; height: 40px; border-radius: 50%; padding: 4px; cursor: pointer;
  background: transparent; border: 2px solid rgba(243, 240, 230, .25);
}
.sw i { display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, var(--s1) 0 50%, var(--s2) 50% 100%); }
.sw[aria-checked="true"] { border-color: var(--saffron); }
.brand-row .demo-note { flex: 1 1 14rem; }
.brand-row .tv-toggle { margin-left: auto; }

/* Multi-screen */
.multi { margin-top: clamp(72px, 9vw, 112px); display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) { .multi { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } }
.multi-copy h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); line-height: 1.15; margin-bottom: 14px; }
.multi-copy p { color: var(--chalk-2); margin: 0; }
.multi-wall { display: flex; gap: 4%; align-items: flex-end; }
.mw-row { flex: 1 1 0; display: flex; gap: .8%; min-width: 0; }
.mtv { flex: 1 1 0; min-width: 0; background: #0e100f; padding: 1.6%; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 24px 30px -22px rgba(0, 0, 0, .7); }
.mtv-p { flex: 0 0 17%; padding: 2.4%; }
.mtv-in { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(ellipse at 20% 0%, #3d0f0f, #140808 70%); color: #fff; }
.mtv-p .mtv-in { aspect-ratio: 9 / 16; }
.mp { position: absolute; inset: 0; padding: 6cqw 6cqw 5cqw; display: flex; flex-direction: column; gap: 4cqw; animation: mpFlip 9s infinite both; }
.mp1 { animation-name: mpFlipA; }
.mp b { font-family: 'Bebas Neue', var(--sans); font-weight: 400; font-size: 11cqw; line-height: .9; letter-spacing: .03em; }
.mg { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.mg1 { grid-template-columns: 1fr; }
.mg i { border-radius: 2cqw; background-size: cover; background-position: center; position: relative; }
.mg i::after { content: ''; position: absolute; top: 3cqw; left: 3cqw; width: 8cqw; height: 8cqw; border-radius: 50%; background: #e63946; }
.ml { list-style: none; margin: 1cqw 0 0; padding: 0; display: grid; gap: 2.4cqw; }
.ml li { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqw; font-family: 'Bebas Neue', var(--sans); font-size: 8.4cqw; line-height: 1; letter-spacing: .03em; border-bottom: .5cqw dashed rgba(255,255,255,.22); padding-bottom: 1.6cqw; }
.ml em { font-style: normal; color: #f1c453; }
.m2 { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, #ffd35c 0%, #ffb703 45%, #fb8500 100%); color: #1d1306; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 16cqw; text-align: center; }
.mpp-plate { position: absolute; top: 12cqw; left: 50%; width: 78cqw; height: 78cqw; margin-left: -39cqw; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 3cqw rgba(255,255,255,.35); animation: tvSpin 50s linear infinite; }
.m2 b { font-family: 'Bebas Neue', var(--sans); font-weight: 400; font-size: 30cqw; line-height: .86; position: relative; }
.m2 span { font-family: 'Bebas Neue', var(--sans); font-size: 15cqw; line-height: 1; background: #1d1306; color: #fff; padding: 1.5cqw 6cqw; border-radius: 3cqw; margin-top: 5cqw; transform: rotate(-4deg); position: relative; }
@keyframes mpFlipA { 0%, 46% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mpFlip { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
.multi-cap { display: flex; gap: 4%; margin: 14px 0 0; font-size: .875rem; line-height: 1.4; color: var(--chalk-2); }
.multi-cap span:first-child { flex: 1 1 0; }
.multi-cap span:last-child { flex: 0 0 17%; }
.multi.is-offscreen .mp, .multi.is-offscreen .mpp-plate { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .mp, .mpp-plate { animation: none !important; }
  .mp2 { opacity: 0; }
}
@media (max-width: 560px) {
  .multi-wall { flex-wrap: wrap; }
  .mw-row { flex-basis: 100%; }
  .mtv-p { flex: 0 0 32%; margin-inline: auto; }
  .multi-cap { flex-direction: column; gap: 4px; }
  .multi-cap span:first-child, .multi-cap span:last-child { flex: none; }
}

/* ==========================================================================
   CO UMÍ – lístek
   ========================================================================== */
.carte {
  background: var(--white); border-radius: 6px; position: relative;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px);
  box-shadow: 0 1px 0 rgba(19, 48, 42, .05), 0 30px 60px -40px rgba(19, 48, 42, .35);
  display: grid; gap: 8px 72px;
}
.carte::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--line); border-radius: 3px; pointer-events: none; }
@media (min-width: 900px) { .carte { grid-template-columns: 1fr 1fr; } }
.carte h3 { font-family: var(--serif); font-weight: 400; font-size: 1.625rem; margin: 0 0 14px; }
.carte-col h3:not(:first-child) { margin-top: 40px; }
@media (max-width: 899px) { .carte-col + .carte-col h3:first-child { margin-top: 40px; } }
.lead-list { list-style: none; margin: 0; padding: 0; }
.lead-list li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.lead-list li::after { content: ''; order: 2; flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted rgba(19, 48, 42, .32); transform: translateY(-.3em); }
.li-n { order: 1; font-weight: 600; }
.li-v { order: 3; text-align: right; color: var(--ink-2); max-width: 58%; }
@media (max-width: 479px) {
  .lead-list li { flex-wrap: wrap; gap: 0 10px; padding: 9px 0; }
  .lead-list li::after { display: none; }
  .li-n { flex-basis: 100%; }
  .li-v { text-align: left; max-width: none; font-size: .9375rem; }
}

/* ==========================================================================
   PRO KOHO
   ========================================================================== */
.venues { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px 64px; }
@media (min-width: 860px) { .venues { grid-template-columns: 1fr 1fr; } }
.venue { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 28px; align-items: start; }
.plate-img {
  width: 148px; height: 148px; border-radius: 50%; object-fit: cover;
  border: 9px solid var(--porcelain);
  box-shadow: 0 0 0 1px rgba(19, 48, 42, .1), 0 18px 30px -18px rgba(19, 48, 42, .55);
}
.venue h3 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.15; margin: 6px 0 10px; }
.venue p { color: var(--ink-2); margin: 0; }
.venue .fit { margin-top: 12px; color: var(--ink); font-weight: 600; font-size: .9375rem; }
@media (max-width: 479px) {
  .venue { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
  .plate-img { width: 96px; height: 96px; border-width: 6px; }
  .venue h3 { font-size: 1.4375rem; margin-top: 0; }
}

/* ==========================================================================
   PÉČE
   ========================================================================== */
.care-grid { display: grid; gap: 56px; }
@media (min-width: 1000px) { .care-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; } }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 32px 40px; }
.timeline li::before { content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 5px rgba(255, 176, 0, .18); }
.timeline li:not(:last-child)::after { content: ''; position: absolute; left: 7px; top: 30px; bottom: 4px; border-left: 2px dotted rgba(243, 240, 230, .35); }
.timeline h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.timeline p { color: var(--chalk-2); margin: 0; }

.needs { margin-top: 16px; padding: 24px 26px; border-radius: var(--radius); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--chalk-line); }
.needs h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.needs ul { margin: 0; padding: 0 0 0 1.1em; color: var(--chalk-2); }
.needs li { margin: 4px 0; }
.needs li::marker { color: var(--saffron); }

.status { background: #f4f6f3; color: #17241f; border-radius: 18px; padding: 16px; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); max-width: 560px; }
.status-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 1rem; padding: 2px 4px 12px; }
.status-v { font-weight: 500; font-size: .8125rem; color: #6f7c76; }
.status-row { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #e3e8e4; border-radius: 12px; padding: 10px; }
.status-row + .status-row { margin-top: 8px; }
.snap { flex: none; width: 104px; height: 58px; border-radius: 4px; overflow: hidden; position: relative; background: #0e100f; padding: 3px; }
.snap-b { background: #1b2521; box-shadow: inset 0 0 0 3px #5a3d24; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.snap-b span { display: block; height: 4px; border-radius: 2px; background: rgba(242, 239, 230, .75); }
.snap-b span:first-child { width: 55%; height: 6px; background: #f2efe6; }
.snap-b span:nth-child(2) { width: 82%; } .snap-b span:nth-child(3) { width: 74%; } .snap-b span:nth-child(4) { width: 64%; }
.snap-d { width: 33px; padding: 0; margin-inline: 35px 36px; background: linear-gradient(#ffd35c, #fb8500); }
.snap-d i { position: absolute; left: 50%; top: 8px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background-size: cover; background-position: center; }
.status-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .8125rem; line-height: 1.4; color: #5c6a64; }
.status-tx b { color: #17241f; font-size: .9375rem; }
.dot-on { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: #1f6f35; background: #e3f6e7; border-radius: 20px; padding: 3px 9px 3px 8px; }
.dot-on::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2f9e44; }
.care-right > .demo-note { margin-top: 10px; }
@media (max-width: 479px) {
  .status { padding: 12px; }
  .status-row { position: relative; gap: 12px; align-items: flex-start; }
  .snap { width: 80px; height: 45px; }
  .snap-b { padding: 8px 9px; gap: 4px; }
  .snap-d { width: 25px; margin-inline: 27px 28px; }
  .snap-d i { width: 20px; height: 20px; margin-left: -10px; top: 6px; }
  .status-tx b { padding-right: 58px; }
  .dot-on { position: absolute; top: 9px; right: 9px; }
}

.assure { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 28px 40px; }
@media (min-width: 640px) { .assure { grid-template-columns: 1fr 1fr; } }
.assure li { border-top: 2px solid rgba(255, 176, 0, .55); padding-top: 16px; }
.assure h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.assure p { color: var(--chalk-2); margin: 0; font-size: 1rem; }

/* ==========================================================================
   OTÁZKY
   ========================================================================== */
.faq-wrap { display: grid; gap: 32px; }
@media (min-width: 940px) { .faq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } }
@media (min-width: 940px) { .faq-wrap h2 { position: sticky; top: 32px; align-self: start; } }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 48px 20px 0; font-weight: 650; font-size: 1.125rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ''; position: absolute; right: 10px; top: 50%; width: 16px; height: 2px; margin-top: -1px;
  background: var(--ink); transition: transform .2s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--green-2); }
.faq details p { margin: -4px 0 22px; color: var(--ink-2); max-width: 40em; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ==========================================================================
   KONTAKT + FOOTER
   ========================================================================== */
.contact-in { display: grid; gap: 40px; align-items: end; }
@media (min-width: 960px) { .contact-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; } }
.contact-side { border-top: 3px dotted rgba(19, 48, 42, .35); padding-top: 20px; }
.contact-side h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.contact-side ul { margin: 0; padding: 0 0 0 1.1em; color: rgba(19, 48, 42, .85); }
.contact-side li { margin: 6px 0; }
.contact h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); line-height: 1.04; }
.contact-main p { font-size: 1.1875rem; margin: 20px 0 32px; max-width: 34em; color: rgba(19, 48, 42, .85); }
.contact-mail { font-weight: 650; font-size: 1.1875rem; padding: 8px 4px; }

.footer { background: var(--green-deep); color: var(--chalk-2); padding: 64px 0 56px; font-size: .9375rem; line-height: 1.6; --focus: var(--saffron); }
.footer-in { display: grid; gap: 32px; }
@media (min-width: 900px) { .footer-in { grid-template-columns: 4fr 4fr 4fr; gap: 48px; } }
.footer .brand { color: var(--chalk); margin-bottom: 14px; }
.footer p { margin: 0 0 12px; }
.footer strong { color: var(--chalk); font-weight: 650; }
.footer a { color: var(--chalk); }

/* ==========================================================================
   TV – živé náhledy vzhledů (z podkladu visual-directions.html, styly A, B, D)
   Všechny rozměry v cqw, takže se náhled škáluje s šířkou televize.
   ========================================================================== */
.tv { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; background: #000; border-radius: 2px; }
.tv * { box-sizing: border-box; }
.tv h4, .tv p { margin: 0; }
.scr { position: absolute; inset: 0; display: none; overflow: hidden; }
.scr.is-on, .scr.is-off { display: block; }
.scr.is-on { z-index: 2; animation: tvScrIn .6s ease both; }
.scr.is-off { z-index: 1; }
@keyframes tvScrIn { from { opacity: 0; } to { opacity: 1; } }

/* pause / off-screen / reduced motion */
.is-paused .tv *, .is-paused .tv *::before, .is-paused .tv *::after,
.is-offscreen .tv *, .is-offscreen .tv *::before, .is-offscreen .tv *::after { animation-play-state: paused !important; }

.is-static .tv *, .is-static .tv *::before, .is-static .tv *::after { animation: none !important; }
.is-static .tv .st-b .row { clip-path: none; }
.is-static .tv .st-b path { stroke-dashoffset: 0 !important; }
.is-static .tv .st-a .t:nth-child(2)::after { opacity: 1; }
.is-static .tv .st-d .plate .f:first-child, .is-static .tv .st-d .s:first-child { opacity: 1; }
.is-static .tv .st-d .prog i::after { opacity: 0; }
.is-static .tv .st-d .prog i:first-child::after { opacity: 1; }
.is-static .tv .st-d .stk { transform: rotate(-12deg); }

@keyframes tvSpin { to { transform: rotate(360deg); } }
@keyframes tvKb { from { transform: scale(1); } to { transform: scale(1.12); } }

/* ----- A · Fotomřížka ----- */
.st-a {
  --a-red: #e63946; --a-gold: #f1c453; --a-bg1: #3d0f0f; --a-bg2: #140808; --a-bg3: #0b0505;
  background: radial-gradient(ellipse at 15% 0%, var(--a-bg1) 0%, var(--a-bg2) 55%, var(--a-bg3) 100%);
  font-family: 'Inter', sans-serif; color: #fff; line-height: 1.2;
}
.st-a .hd { position: absolute; top: 3.2cqw; left: 4cqw; right: 4cqw; display: flex; justify-content: space-between; align-items: flex-end; }
.st-a .hd h4 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 5cqw; letter-spacing: .04em; line-height: 1; position: relative; }
.st-a .hd h4::after { content: ''; position: absolute; left: 0; bottom: -.7cqw; height: .55cqw; width: 70%; background: var(--a-red); transform-origin: left; animation: tvAbar 12s infinite both; }
.st-a .logo { font-family: 'Bebas Neue', sans-serif; font-size: 2.4cqw; color: var(--a-gold); letter-spacing: .25em; }
.st-a .grid { position: absolute; top: 11cqw; left: 4cqw; right: 4cqw; bottom: 6.6cqw; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1.4cqw; }
.st-a .t { position: relative; border-radius: 1cqw; overflow: hidden; background: #222; animation: tvTileIn 12s infinite both; }
.st-a .ph { position: absolute; inset: 0; background-size: cover; background-position: center; animation: tvKb 9s infinite alternate ease-in-out; }
.st-a .t::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.25) 48%, transparent 72%); }
.st-a .t::after { content: ''; position: absolute; inset: 0; z-index: 3; border: .35cqw solid var(--a-gold); border-radius: 1cqw; box-shadow: inset 0 0 3cqw color-mix(in srgb, var(--a-gold) 35%, transparent); opacity: 0; animation: tvSpot 12s infinite both; }
.st-a .num { position: absolute; top: 1cqw; left: 1cqw; z-index: 2; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: var(--a-red); font-family: 'Bebas Neue', sans-serif; font-size: 2.4cqw; display: grid; place-items: center; box-shadow: 0 .3cqw 1cqw rgba(0,0,0,.45); }
.st-a .nm { position: absolute; left: 1.2cqw; bottom: 1cqw; right: 8.5cqw; z-index: 2; font-weight: 800; font-size: 1.55cqw; line-height: 1.15; }
.st-a .nm small { display: block; font-weight: 400; font-size: 1.05cqw; opacity: .75; margin-top: .25cqw; }
.st-a .pr { position: absolute; right: 1cqw; bottom: 1cqw; z-index: 2; background: var(--a-gold); color: #1a0f00; font-weight: 800; font-size: 1.6cqw; padding: .35cqw .8cqw; border-radius: .6cqw; }
.st-a .t:nth-child(1) { animation-delay: 0s; }    .st-a .t:nth-child(1)::after { animation-delay: .9s; }
.st-a .t:nth-child(2) { animation-delay: .12s; }  .st-a .t:nth-child(2)::after { animation-delay: 2.7s; }
.st-a .t:nth-child(3) { animation-delay: .24s; }  .st-a .t:nth-child(3)::after { animation-delay: 4.5s; }
.st-a .t:nth-child(4) { animation-delay: .36s; }  .st-a .t:nth-child(4)::after { animation-delay: 6.3s; }
.st-a .t:nth-child(5) { animation-delay: .48s; }  .st-a .t:nth-child(5)::after { animation-delay: 8.1s; }
.st-a .t:nth-child(6) { animation-delay: .6s; }   .st-a .t:nth-child(6)::after { animation-delay: 9.9s; }
.st-a .tick { position: absolute; left: 0; right: 0; bottom: 0; height: 4.6cqw; background: var(--a-red); overflow: hidden; display: flex; align-items: center; }
.st-a .tick .tr { display: flex; white-space: nowrap; animation: tvMarq 22s linear infinite; }
.st-a .tick span { font-family: 'Bebas Neue', sans-serif; font-size: 2.2cqw; letter-spacing: .12em; padding-right: 4cqw; }
@keyframes tvAbar { 0% { transform: scaleX(0); } 6%, 100% { transform: scaleX(1); } }
@keyframes tvTileIn { 0% { opacity: 0; transform: translateY(3cqw) scale(.95); } 6% { opacity: 1; transform: none; } 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.98); } }
@keyframes tvSpot { 0% { opacity: 0; } 2% { opacity: 1; } 13% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes tvMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----- B · Křídová tabule ----- */
.st-b {
  --b-hi: #f6d77a; --b-acc: #9fd3c7;
  font-family: 'Caveat', cursive; color: #f2efe6; line-height: 1.2;
  background: radial-gradient(ellipse at 25% 30%, rgba(255,255,255,.08), transparent 45%), radial-gradient(ellipse at 80% 75%, rgba(255,255,255,.05), transparent 40%), #1b2521;
  box-shadow: inset 0 0 0 1.3cqw #5a3d24, inset 0 0 0 1.65cqw #2e1f12, inset 0 0 7cqw rgba(0,0,0,.65);
}
.st-b::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) .08cqw, transparent .12cqw); background-size: .8cqw .8cqw; pointer-events: none; }
.st-b .hd { position: absolute; top: 4.2cqw; left: 6cqw; display: flex; align-items: baseline; gap: 1.8cqw; }
.st-b .hd h4 { font-size: 6.6cqw; font-weight: 700; line-height: 1; text-shadow: 0 0 .25cqw rgba(255,255,255,.35); }
.st-b .hd .date { font-size: 2.8cqw; color: var(--b-hi); }
.st-b .uline { position: absolute; top: 11.2cqw; left: 5.5cqw; width: 30cqw; height: 2cqw; }
.st-b .uline path { fill: none; stroke: var(--b-hi); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tvDraw 14s infinite both .3s; }
.st-b .ls { position: absolute; top: 15cqw; left: 6cqw; width: 57cqw; }
.st-b .row { display: flex; align-items: baseline; gap: 1cqw; margin-bottom: 1.5cqw; clip-path: inset(-1cqw 100% -1cqw -1cqw); animation: tvWrite 14s infinite both; }
.st-b .row .n { font-size: 2.9cqw; font-weight: 500; line-height: 1.1; text-shadow: 0 0 .2cqw rgba(255,255,255,.3); }
.st-b .row .n b { color: var(--b-acc); font-weight: 700; margin-right: .6cqw; }
.st-b .row .al { font-size: 1.7cqw; opacity: .55; }
.st-b .row .dots { flex: 1; border-bottom: .22cqw dashed rgba(242,239,230,.3); transform: translateY(-.6cqw); }
.st-b .row .p { font-size: 3.1cqw; color: var(--b-hi); font-weight: 700; }
.st-b .row.sep { margin: .2cqw 0 1.8cqw; height: .25cqw; background: rgba(242,239,230,.25); border-radius: 1cqw; }
.st-b .row:nth-child(1) { animation-delay: .5s; } .st-b .row:nth-child(2) { animation-delay: 1.1s; }
.st-b .row:nth-child(3) { animation-delay: 1.5s; } .st-b .row:nth-child(4) { animation-delay: 2.1s; }
.st-b .row:nth-child(5) { animation-delay: 2.7s; } .st-b .row:nth-child(6) { animation-delay: 3.3s; }
.st-b .doodle { position: absolute; right: 8cqw; top: 13cqw; width: 20cqw; }
.st-b .doodle path { fill: none; stroke: #f2efe6; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tvDraw 14s infinite both; animation-delay: 1s; }
.st-b .doodle .steam path { stroke: var(--b-acc); animation-delay: 2.4s; }
.st-b .doodle .steam { animation: tvSteam 3s ease-in-out infinite alternate; }
.st-b .box { position: absolute; right: 6.5cqw; top: 33cqw; width: 23cqw; padding: 1.2cqw 1.6cqw; text-align: center; border: .28cqw solid rgba(242,239,230,.75); border-radius: 2cqw 1cqw 2.5cqw 1cqw / 1cqw 2.5cqw 1cqw 2cqw; transform: rotate(-3deg); animation: tvLate 14s infinite both; animation-delay: 4s; }
.st-b .box .k { font-size: 2cqw; color: var(--b-acc); }
.st-b .box .v { font-size: 3cqw; font-weight: 700; line-height: 1.1; }
.st-b .box .v span { color: var(--b-hi); }
.st-b .foot { position: absolute; left: 6cqw; right: 6cqw; bottom: 3.6cqw; font-size: 1.9cqw; opacity: .65; }
@keyframes tvWrite { 0% { clip-path: inset(-1cqw 100% -1cqw -1cqw); opacity: 1; } 7% { clip-path: inset(-1cqw -1cqw -1cqw -1cqw); } 90% { opacity: 1; clip-path: inset(-1cqw -1cqw -1cqw -1cqw); } 96%, 100% { opacity: 0; clip-path: inset(-1cqw -1cqw -1cqw -1cqw); } }
@keyframes tvDraw { 0% { stroke-dashoffset: 1; opacity: 1; } 12% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tvSteam { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes tvLate { 0% { opacity: 0; transform: rotate(-3deg) scale(.9); } 5% { opacity: 1; transform: rotate(-3deg) scale(1); } 88% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ----- D · Výrazný hero / promo ----- */
.st-d {
  --d-1: #ffd35c; --d-2: #ffb703; --d-3: #fb8500; --d-ink: #1d1306; --d-tag: #ffcf4a; --d-stk: #e63946; --d-stk-fg: #fff;
  background: radial-gradient(circle at 78% 50%, var(--d-1) 0%, var(--d-2) 38%, var(--d-3) 100%);
  font-family: 'Inter', sans-serif; color: var(--d-ink); line-height: 1.2;
}
.st-d .ring { position: absolute; right: -11cqw; top: 50%; width: 62cqw; height: 62cqw; margin-top: -31cqw; border-radius: 50%; border: .25cqw dashed color-mix(in srgb, var(--d-ink) 30%, transparent); animation: tvSpin 40s linear infinite reverse; }
.st-d .plate { position: absolute; right: -6cqw; top: 50%; width: 52cqw; height: 52cqw; margin-top: -26cqw; border-radius: 50%; overflow: hidden; box-shadow: 0 3cqw 6cqw rgba(90,35,0,.45), 0 0 0 1cqw rgba(255,255,255,.35); animation: tvSpin 60s linear infinite; }
.st-d .plate .f { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: tvDcf 15s infinite both; }
.st-d .plate .f:nth-child(2), .st-d .s:nth-child(2) { animation-delay: 5s; }
.st-d .plate .f:nth-child(3), .st-d .s:nth-child(3) { animation-delay: 10s; }
.st-d .txt { position: absolute; left: 5cqw; top: 0; bottom: 0; width: 44cqw; display: flex; flex-direction: column; justify-content: center; }
.st-d .tag { align-self: flex-start; background: var(--d-ink); color: var(--d-tag); font-weight: 800; font-size: 1.3cqw; letter-spacing: .2em; padding: .6cqw 1.3cqw; border-radius: 5cqw; text-transform: uppercase; }
.st-d .slides { position: relative; height: 27cqw; margin-top: 2cqw; }
.st-d .s { position: absolute; inset: 0; opacity: 0; animation: tvDs 15s infinite both; }
.st-d .s h4 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 7.4cqw; line-height: .92; }
.st-d .s p { font-size: 1.5cqw; margin-top: 1.2cqw; max-width: 34cqw; opacity: .8; line-height: 1.4; }
.st-d .s .price { display: inline-block; margin-top: 1.8cqw; background: var(--d-ink); color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 3.8cqw; padding: .3cqw 1.6cqw; border-radius: 1cqw; transform: rotate(-3deg); }
.st-d .prog { position: absolute; left: 5cqw; bottom: 4cqw; display: flex; gap: .8cqw; }
.st-d .prog i { position: relative; width: 5cqw; height: .45cqw; background: color-mix(in srgb, var(--d-ink) 22%, transparent); border-radius: 1cqw; overflow: hidden; }
.st-d .prog i::after { content: ''; position: absolute; inset: 0; background: var(--d-ink); transform-origin: left; animation: tvProg 15s linear infinite both; }
.st-d .prog i:nth-child(2)::after { animation-delay: 5s; }
.st-d .prog i:nth-child(3)::after { animation-delay: 10s; }
.st-d .stk { position: absolute; left: 47cqw; bottom: 4cqw; width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--d-stk); color: var(--d-stk-fg); display: grid; place-items: center; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 1.9cqw; line-height: 1; box-shadow: 0 1cqw 2cqw rgba(0,0,0,.25); animation: tvWob 2.4s ease-in-out infinite alternate; z-index: 2; }
.st-d .stk b { display: block; font-size: 3.6cqw; font-weight: 400; }
@keyframes tvDcf { 0% { opacity: 0; } 4% { opacity: 1; } 31% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes tvDs { 0% { opacity: 0; transform: translateY(3cqw); } 4% { opacity: 1; transform: none; } 30% { opacity: 1; transform: none; } 33.3%, 100% { opacity: 0; transform: translateY(-2cqw); } }
@keyframes tvProg { 0% { transform: scaleX(0); opacity: 1; } 33.3% { transform: scaleX(1); opacity: 1; } 34%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes tvWob { from { transform: rotate(-14deg) scale(1); } to { transform: rotate(-8deg) scale(1.06); } }

/* ----- Obrázek / PDF ----- */
.st-p { background: radial-gradient(ellipse at 50% 40%, #39443f, #1c2321 75%); }
.st-p .paper {
  position: absolute; top: 3.2cqw; left: 50%; width: 36cqw; height: 50cqw; margin-left: -18cqw;
  background: #fbf8f1; color: #2b2522; transform-origin: 50% 0;
  box-shadow: 0 2cqw 5cqw rgba(0,0,0,.55);
  animation: tvPaper 22s ease-in-out infinite alternate;
}
.st-p .paper-in { padding: 3.4cqw 3cqw; height: 100%; display: flex; flex-direction: column; }
.st-p .pp-venue { font-family: var(--sans); font-size: 1.1cqw; letter-spacing: .14em; color: #8a5a2b; text-align: center; }
.st-p .pp-title { font-family: var(--serif); font-size: 3.4cqw; line-height: 1.1; text-align: center; margin: .6cqw 0 2.4cqw; }
.st-p .pp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.st-p .pp-h { font-family: var(--serif); font-size: 1.45cqw; margin: 0 0 .8cqw; padding-bottom: .4cqw; border-bottom: .12cqw solid #d8cdbb; }
.st-p .pp-h:not(:first-child) { margin-top: 2cqw; }
.st-p .pp-i { display: flex; justify-content: space-between; gap: 1cqw; font-family: var(--sans); font-size: 1.02cqw; line-height: 1.75; }
.st-p .pp-i span:last-child { font-weight: 600; }
.st-p .pp-foot { margin-top: auto; font-family: var(--sans); font-size: .85cqw; color: #8b8178; text-align: center; }
@keyframes tvPaper {
  0%, 10% { transform: scale(1) translateY(0); }
  45%, 55% { transform: scale(1.5) translateY(0); }
  90%, 100% { transform: scale(1.5) translateY(-16cqw); }
}

/* ----- Barvy podniku (ukázka brandingu) ----- */
.tv[data-brand="teal"] .st-a { --a-red: #1f9e8c; --a-gold: #ffb38a; --a-bg1: #0d3b36; --a-bg2: #07201d; --a-bg3: #041311; }
.tv[data-brand="teal"] .st-b { --b-hi: #ffb38a; --b-acc: #7fd8c9; }
.tv[data-brand="teal"] .st-d { --d-1: #d3f5ec; --d-2: #7fd8c6; --d-3: #2bb39f; --d-ink: #062420; --d-tag: #ffb38a; --d-stk: #ff7a45; }
.tv[data-brand="plum"] .st-a { --a-red: #8e3b8a; --a-gold: #f5d547; --a-bg1: #3a1238; --a-bg2: #1a0819; --a-bg3: #0f0510; }
.tv[data-brand="plum"] .st-b { --b-hi: #f5d547; --b-acc: #e3a6df; }
.tv[data-brand="plum"] .st-d { --d-1: #fbe3f7; --d-2: #e7a9e0; --d-3: #c46fbd; --d-ink: #2a0b28; --d-tag: #f5d547; --d-stk: #f5d547; --d-stk-fg: #2a0b28; }
.tv[data-brand="teal"] .st-p .pp-venue { color: #1f9e8c; }
.tv[data-brand="plum"] .st-p .pp-venue { color: #8e3b8a; }