/* ------------------------------------------------------------------
   Vesper Dynamics, ostrý web od 12. 10. 2026 (původně varianta /demo/)
   Světlý a vzdušný web: papír jako plocha, bílá okna ukázek,
   noc jen na pásy a rám hlavní ukázky, zlatá jako vzácný akcent.
   Bez sestavení a bez knihoven. Společné pro obě stránky.
   ------------------------------------------------------------------ */

:root {
  --paper:  #F6F5F1;
  --white:  #FFFFFF;
  --ink:    #16171C;
  --ink-2:  #3A3B44;
  --stone:  #6A6C75;
  --line:   #E4E2DC;
  --gold:   #F7B955;
  --gold-w: #FCEFD6;
  --dusk:   #E8793A;
  --dusk-t: #B4541C;
  --night:  #12131A;

  --gold-ink: #7A4A12;      /* text na světlé zlaté */
  --gold-line: #F4DDB0;     /* linka kolem světlé zlaté */
  --on-night: #A9ABB3;      /* vedlejší text na noci */
  --night-2: #1B1C25;       /* o stupeň světlejší noc */
  --hair: rgba(255,255,255,.1);
  --shell: #FAF9F6;         /* lišta okna, vnitřní plochy ukázek */

  --evening: linear-gradient(180deg, #F7B955 0%, #E8793A 100%);
  --evening-x: linear-gradient(90deg, #F7B955 0%, #E8793A 100%);

  --shadow-sm: 0 1px 2px rgba(22,23,28,.05), 0 6px 18px -8px rgba(22,23,28,.12);
  --shadow:    0 1px 2px rgba(22,23,28,.05), 0 14px 34px -12px rgba(22,23,28,.18);
  --shadow-lg: 0 2px 6px rgba(22,23,28,.05), 0 34px 70px -28px rgba(22,23,28,.34);

  --wrap: 75rem;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --sec: clamp(4.5rem, 9vw, 7.5rem);
  --display: "Space Grotesk", Arial, ui-sans-serif, system-ui, sans-serif;
  --text: "Inter Tight", Arial, ui-sans-serif, system-ui, sans-serif;

  /* čtyřcípá hvězda ze značky jako maska */
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath d='M0 -1 C.08 -.3 .3 -.08 1 0 C.3 .08 .08 .3 0 1 C-.08 .3 -.3 .08 -1 0 C-.3 -.08 -.08 -.3 0 -1Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
img { max-width: 100%; height: auto; }
svg { flex: none; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

:focus-visible { outline: 3px solid var(--dusk-t); outline-offset: 3px; border-radius: 6px; }
.on-night :focus-visible, .band-night :focus-visible, footer :focus-visible { outline-color: var(--gold); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
[id] { scroll-margin-top: 5.5rem; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 10px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ================= TYPOGRAFIE ================= */
.display { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; margin: 0; }
h1.display { font-size: clamp(2.55rem, 1.15rem + 5.9vw, 5.1rem); letter-spacing: -.045em; line-height: 1; }
h2.display { font-size: clamp(1.95rem, 1.25rem + 2.7vw, 3.1rem); }
h3.display { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); letter-spacing: -.03em; line-height: 1.1; }

/* zvýrazněné slovo v nadpisu: soumrak, čitelný i na papíru */
.hl {
  position: relative; white-space: nowrap;
  color: var(--dusk-t);
  background: linear-gradient(180deg, #D96524 8%, #B4541C 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.on-night .hl, .band-night .hl {
  background: var(--evening); -webkit-background-clip: text; background-clip: text; color: var(--gold);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dusk-t); line-height: 1.3;
}
.eyebrow::before {
  content: ""; width: .8em; height: .8em; flex: none;
  background: var(--evening); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat;
}
.band-night .eyebrow, .on-night .eyebrow { color: var(--gold); }

.lede { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.5; color: var(--ink-2); margin: 0; }

/* hlavička oddílu, vycentrovaná */
.shead { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }
.shead h2 { margin: .9rem 0 1rem; }
.shead p { margin: 0 auto; max-width: 40rem; color: var(--ink-2); font-size: 1.12rem; }

main { overflow-x: clip; }
section { padding-block: var(--sec); position: relative; }
.band-white { background: var(--white); border-block: 1px solid var(--line); }
.band-night { background: var(--night); color: #fff; }
.band-night .shead p, .band-night .lede { color: #C9CAD0; }
.tight-top { padding-top: 0; }

/* ================= TLAČÍTKA ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--text); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
  padding: .95rem 1.5rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn svg { transition: transform .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg.arrow { transform: translateX(3px); }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 16px 30px -16px rgba(232,121,58,.85), inset 0 -2px 0 rgba(232,121,58,.35); }
.btn-gold:hover { background: #F9C36C; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }
.btn-line { background: transparent; color: var(--ink); border-color: #CFCCC4; }
.btn-line:hover { border-color: var(--ink); background: #fff; }
.btn-night { background: transparent; color: #fff; border-color: rgba(255,255,255,.26); }
.btn-night:hover { border-color: rgba(255,255,255,.6); }
.btn-sm { padding: .62rem 1.1rem; font-size: .92rem; }
.btn-lg { padding: 1.1rem 1.8rem; font-size: 1.06rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.cta-note { margin: 1.1rem 0 0; font-size: .92rem; color: var(--stone); }
.cta-note a { color: var(--dusk-t); font-weight: 600; text-underline-offset: 3px; }

.more {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--ink);
  text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: .15rem;
}
.more svg { transition: transform .18s ease; color: var(--dusk-t); }
.more:hover svg { transform: translateX(3px); }
.band-night .more, .on-night .more { color: #fff; }

/* ================= LIŠTA ================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,245,241,.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(228,226,220,.9);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.4rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); padding: .3rem 0; }
.brand img { display: block; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.brand-name i { font-style: normal; font-weight: 500; color: var(--stone); }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); order: 2; margin-left: auto; }
.nav-links a:not(.btn) { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .4rem 0; white-space: nowrap; }
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { box-shadow: 0 2px 0 var(--gold); }
.nav-end { display: flex; align-items: center; gap: .6rem; order: 3; }
.nav-toggle {
  display: none; width: 2.7rem; height: 2.7rem; border-radius: 12px; border: 1px solid var(--line); background: #fff;
  align-items: center; justify-content: center; cursor: pointer; color: var(--ink); padding: 0;
}
.nav-toggle svg .x { display: none; }
.nav-toggle[aria-expanded="true"] svg .x { display: inline; }
.nav-toggle[aria-expanded="true"] svg .bars { display: none; }

@media (max-width: 61.99rem) {
  .nav .wrap { flex-wrap: wrap; }
  .js .nav-toggle { display: inline-flex; }
  .nav-end { order: 2; margin-left: auto; }
  .nav-links { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: .2rem 1.3rem; padding-bottom: .8rem; }
  .js .nav-links { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .3rem 0 1rem; }
  .js .nav-links.open { display: flex; }
  .js .nav-links a:not(.btn) { padding: .8rem .2rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav-links a[aria-current="page"] { box-shadow: none; }
}

/* ================= ÚVOD ================= */
.hero { position: relative; text-align: center; padding-block: clamp(3rem, 6.5vw, 5.6rem) 0; isolation: isolate; overflow: clip; }
.hero::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -12rem; width: min(120rem, 180vw); height: 46rem; transform: translateX(-50%);
  background:
    radial-gradient(34rem 20rem at 50% 30%, rgba(247,185,85,.34), transparent 72%),
    radial-gradient(26rem 18rem at 78% 22%, rgba(232,121,58,.12), transparent 72%),
    radial-gradient(24rem 16rem at 22% 26%, rgba(247,185,85,.14), transparent 72%);
  pointer-events: none;
}
.hero h1 { max-width: 15ch; margin: 1.3rem auto 1.4rem; }
.hero .lede { max-width: 40rem; margin-inline: auto; }
.hero .cta-row { margin-top: 2.2rem; }
.hero-stage { margin-top: clamp(2.6rem, 6vw, 4.6rem); }

.pill {
  display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .95rem .42rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.8); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}
.pill::before {
  content: ""; width: .85rem; height: .85rem; flex: none;
  background: var(--evening); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; } .rise.d4 { animation-delay: .34s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ================= RÁM HLAVNÍ UKÁZKY ================= */
.stage {
  position: relative; isolation: isolate; overflow: hidden; text-align: left;
  border-radius: clamp(20px, 3.2vw, 38px);
  padding: clamp(1rem, 3.6vw, 3.4rem);
}
.stage-night { background: var(--night); color: #fff; box-shadow: var(--shadow-lg); }
.stage-night::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 92% -8%, rgba(247,185,85,.36), transparent 68%),
    radial-gradient(40rem 28rem at -6% 108%, rgba(232,121,58,.30), transparent 68%),
    radial-gradient(30rem 20rem at 50% 120%, rgba(247,185,85,.10), transparent 70%);
}
.stage .sparkle { position: absolute; z-index: -1; background: var(--evening); opacity: .5; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }

.stage-cap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem;
  margin-top: clamp(1rem, 2.4vw, 1.6rem); font-size: .86rem; color: var(--on-night);
}
.stage-cap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.chip-night {
  display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .75rem; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(247,185,85,.28); color: #E2E2E6; font-size: .78rem; font-weight: 500;
}
.chip-night svg { color: var(--gold); }

/* ================= OKNA UKÁZEK ================= */
figure { margin: 0; }
.win {
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); text-align: left;
}
.stage-night .win { border-color: rgba(255,255,255,.14); box-shadow: 0 30px 70px -30px rgba(0,0,0,.85); }
.win-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem;
  padding: .58rem .85rem; background: var(--shell); border-bottom: 1px solid var(--line);
}
.win-dots { display: flex; gap: .42rem; }
.win-dots i { width: .7rem; height: .7rem; border-radius: 50%; background: #CFCCC4; display: block; }
.win-dots i:nth-child(1) { background: var(--dusk); }
.win-dots i:nth-child(2) { background: var(--gold); }
.win-title { font-size: .76rem; font-weight: 600; color: var(--stone); letter-spacing: .02em; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.win-tag { justify-self: end; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); border: 1px solid var(--line); border-radius: 999px; padding: .16rem .5rem; background: #fff; }

/* avatary v ukázkách */
.av {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: .78rem; font-weight: 600; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line);
}
.av.agent { border-radius: 11px; background: var(--ink); border: 0; }
.av.agent img { width: 72%; height: 72%; display: block; }

/* ----- e-mail ----- */

.role-tag { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-w); border: 1px solid var(--gold-line); padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; }
.att { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .8rem .45rem .5rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: .8rem; line-height: 1.25; min-width: 0; }
.att i { width: 2rem; height: 2.3rem; border-radius: 6px; display: grid; place-items: center; flex: none; font-style: normal; font-size: .56rem; font-weight: 700; letter-spacing: .04em; background: var(--gold-w); color: var(--gold-ink); border: 1px solid var(--gold-line); }
.att b { display: block; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.att small { color: var(--stone); font-size: .74rem; }

/* ----- chat ----- */
.chat-head { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.chat-head .who { min-width: 0; flex: 1; line-height: 1.25; }
.chat-head .who b { display: block; font-family: var(--display); font-weight: 700; font-size: .96rem; letter-spacing: -.01em; }
.chat-head .who span { font-size: .76rem; color: var(--stone); }
.chat-log { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: var(--shell); }
.bub { max-width: 88%; padding: .6rem .85rem; border-radius: 16px; font-size: .88rem; line-height: 1.45; }
.bub p { margin: 0; }
.bub p + p { margin-top: .4rem; }
.bub.you { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.bub.agent { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink-2); border-bottom-left-radius: 5px; }
.bub .att { margin-top: .55rem; }
.voice { display: flex; align-items: center; gap: .6rem; }
.bub.wide { width: 88%; }
.phone .bub.wide { width: 92%; }
.voice .play { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--gold); display: grid; place-items: center; flex: none; }
.wave { display: flex; align-items: center; gap: 2px; height: 1.5rem; flex: 1; min-width: 0; overflow: hidden; }
.wave i { width: 3px; flex: none; border-radius: 2px; background: rgba(255,255,255,.78); display: block; height: 30%; }
.wave i:nth-child(3n) { height: 70%; } .wave i:nth-child(4n+1) { height: 45%; } .wave i:nth-child(5n+2) { height: 100%; }
.wave i:nth-child(7n) { height: 20%; } .wave i:nth-child(11n+3) { height: 85%; }
.voice time { font-size: .74rem; opacity: .8; font-variant-numeric: tabular-nums; }
.transcript { margin-top: .55rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.18); font-size: .82rem; line-height: 1.45; color: #E6E6EA; }
.transcript b { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; }
.chat-compose { display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem; border-top: 1px solid var(--line); background: #fff; }
.chat-compose .field { flex: 1; min-width: 0; padding: .55rem .9rem; border-radius: 999px; background: var(--paper); color: var(--stone); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-compose .ic { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink-2); border: 1px solid var(--line); }
.chat-compose .ic.send { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ----- telefon (aplikace) ----- */
.phone {
  width: min(100%, 20.5rem); margin-inline: auto; background: var(--ink); border-radius: 2.6rem; padding: .6rem;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone-screen { background: #fff; border-radius: 2.05rem; overflow: hidden; }
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1.3rem .35rem; font-size: .72rem; font-weight: 600; color: var(--ink); }
.phone-status span { display: inline-flex; gap: .3rem; align-items: center; }
.phone-status i { display: block; width: 1.25rem; height: .6rem; border-radius: 3px; border: 1.5px solid var(--ink); position: relative; }
.phone-status i::after { content: ""; position: absolute; inset: 1px; right: 30%; background: var(--ink); border-radius: 1px; }
.phone .chat-log { padding: .9rem .8rem; }
.phone .chat-compose { padding-bottom: 1rem; }
.phone .bub { max-width: 92%; }

/* ----- přehled směny ----- */

.tag { font-size: .7rem; font-weight: 600; padding: .24rem .6rem; border-radius: 999px; white-space: nowrap; line-height: 1.3; }
.tag.done { background: #EDEBE5; color: #4A4C55; }
.tag.you { background: var(--gold); color: var(--ink); }

/* směna na noci (poloprůhledné sklo) */

/* ================= PŘÍNOSY ================= */
.benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
.benefit .ic { width: 2.8rem; height: 2.8rem; border-radius: 13px; background: var(--ink); color: var(--gold); display: grid; place-items: center; }
.benefit h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.2; margin: 1.1rem 0 .45rem; }
.benefit p { margin: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.benefits-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.benefits-5 .benefit { grid-column: span 2; }
.benefits-5 .benefit:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 62rem) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 62rem) { .benefits-5 .benefit, .benefits-5 .benefit:nth-child(n+4) { grid-column: auto; } .benefits-5 .benefit:last-child { grid-column: 1 / -1; } }
@media (max-width: 36rem) { .benefits { grid-template-columns: minmax(0, 1fr); } .benefits-5 .benefit:last-child { grid-column: auto; } .benefit { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 0 1rem; } .benefit h3 { margin-top: .1rem; } .benefit p { grid-column: 2; } }

/* ================= STŘÍDAVÉ ODDÍLY (text a ukázka) ================= */
.feature { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.feature + .feature { margin-top: clamp(4rem, 9vw, 7.5rem); }
.feature.flip .feature-text { order: 2; }
.feature + .sec-foot, .feature + .callout { margin-top: clamp(3rem, 7vw, 5rem); }
.feature-text h3 { margin: .9rem 0 .9rem; }
.feature-text p { margin: 0; color: var(--ink-2); max-width: 30rem; font-size: 1.08rem; }
.feature-text .more { margin-top: 1.6rem; }
.feature-visual { position: relative; isolation: isolate; min-width: 0; }
.feature-visual::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -4%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(247,185,85,.26), rgba(247,185,85,0) 100%);
}
@media (max-width: 56rem) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .feature.flip .feature-text { order: 0; }
  .feature-text p { max-width: 38rem; }
}

.ticks { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .6rem; }
.ticks li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .65rem; color: var(--ink-2); font-size: 1rem; line-height: 1.45; }
.ticks li::before { content: ""; width: .8rem; height: .8rem; margin-top: .32rem; background: var(--evening); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.band-night .ticks li, .on-night .ticks li { color: #D5D6DB; }

/* ================= KARTY ================= */
.grid { display: grid; gap: clamp(.9rem, 1.8vw, 1.25rem); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 68rem) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 62rem) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) {  .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.25rem, 2.2vw, 1.6rem);
  display: flex; flex-direction: column; min-width: 0;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.band-white .card { background: var(--paper); border-color: transparent; }
.card.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line); background: #fff; }
.card .ic { width: 2.7rem; height: 2.7rem; border-radius: 12px; background: var(--paper); color: var(--ink); display: grid; place-items: center; border: 1px solid var(--line); }
.band-white .card .ic { background: #fff; }
.card h3 { font-family: var(--display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.02em; line-height: 1.2; margin: 1.05rem 0 .45rem; }
.card p { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.55; }
.card .chips { margin-top: auto; padding-top: 1.1rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips li { font-size: .79rem; font-weight: 500; line-height: 1.25; background: #fff; border: 1px solid var(--line); padding: .32rem .7rem; border-radius: 999px; color: var(--ink-2); }
.card .k { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dusk-t); }

/* karta scénáře: číslo, název, co agent udělá */

.sec-foot { margin-top: clamp(1.8rem, 4vw, 2.8rem); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: center; text-align: center; }
.sec-foot p { margin: 0; color: var(--ink-2); max-width: 44rem; }

/* ================= PÁS: ZBYTEK NABÍDKY ================= */
.build .card h3 { font-size: 1.1rem; }
.build .card p { font-size: .93rem; }

/* ================= OBORY ================= */
.fineprint { max-width: 46rem; margin: clamp(1.8rem, 4vw, 2.6rem) auto 0; text-align: center; }
.fineprint p { margin: 0; color: var(--ink-2); }
.fineprint p + p { margin-top: .7rem; font-size: .93rem; color: var(--stone); }

/* ================= JAK PRACUJEME ================= */
.paths { display: grid; gap: clamp(.8rem, 1.6vw, 1.1rem); }
.path {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.6vw, 1.7rem);
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
}
.band-white .path { background: var(--paper); border-color: transparent; }
.path h3 { font-family: var(--display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.02em; margin: 0 0 .3rem; }
.path p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.chain li { display: inline-flex; align-items: center; gap: .45rem; }
.chain li + li::before { content: ""; width: 18px; height: 12px; flex: none; background: #A9A69E; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h14M11 1.5 15.5 6 11 10.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h14M11 1.5 15.5 6 11 10.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.step { font-weight: 600; font-size: .86rem; padding: .5rem .95rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; line-height: 1.2; }
.s-audit { background: var(--gold); color: var(--ink); }
.s-train { background: var(--gold-w); color: var(--gold-ink); border-color: var(--gold-line); }
.s-agent { background: var(--ink); color: #fff; }
.s-soft  { background: #fff; color: var(--ink); border-color: var(--ink); }
.s-run   { background: #fff; color: var(--stone); border-color: var(--line); }
@media (max-width: 52rem) { .path { grid-template-columns: minmax(0, 1fr); } }

/* číslované kroky (zavádění) */

/* ================= ZAKLADATELÉ ================= */
.founders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.5rem); }
.fcard { background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.fcard .photo { position: relative; background: var(--night); aspect-ratio: 900 / 860; overflow: hidden; }
.fcard .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
.fcard .photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 100% 0%, rgba(247,185,85,.22), transparent 70%); }
.fcard .rolechip {
  position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 2; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.35; color: #FBE3B8;
  padding: .42rem .78rem; border-radius: 999px; background: rgba(18,19,26,.82); border: 1px solid rgba(247,185,85,.55);
}
.fcard .rolechip::before { content: ""; width: .7rem; height: .7rem; flex: none; background: var(--evening); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.fcard .body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.fcard h3 { font-family: var(--display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.fcard h3 .ttl { font-family: var(--text); font-size: .68em; font-weight: 500; letter-spacing: 0; color: var(--stone); }
.fcard .title { color: var(--stone); font-size: .93rem; font-weight: 500; margin: .2rem 0 .95rem; }
.fcard .job { margin: 0 0 1.05rem; font-size: .97rem; line-height: 1.5; color: var(--ink); font-weight: 500; }
.fcard .ticks { margin-top: 0; gap: .5rem; }
.fcard .ticks li { font-size: .92rem; }
.fcard .bg { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .88rem; line-height: 1.5; color: var(--stone); }
.fcard .mail { margin-top: auto; padding-top: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; font-size: .93rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.fcard .mail svg { color: var(--dusk-t); }
.fcard .mail:hover { color: var(--dusk-t); }
@media (max-width: 62rem) {
  .founders { grid-template-columns: minmax(0, 1fr); }
  .fcard { flex-direction: row; }
  .fcard .photo { flex: 0 0 38%; aspect-ratio: auto; min-height: 20rem; }
}
@media (max-width: 40rem) {
  .fcard { flex-direction: column; }
  .fcard .photo { flex: none; aspect-ratio: 900 / 760; min-height: 0; }
}

/* ================= ZÁLOŽKY SCÉNÁŘŮ ================= */
.tabs-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.tab {
  font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2; padding: .7rem 1.15rem; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line); text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tabpanel { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: clamp(1.3rem, 3.4vw, 2.8rem); box-shadow: var(--shadow-sm); }
.tabpanel + .tabpanel { margin-top: 1.2rem; }
.js .tabpanel + .tabpanel { margin-top: 0; }
.tabpanel[hidden] { display: none; }
@media (max-width: 40rem) {
  .tabs-nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding: .3rem var(--pad) .6rem; scrollbar-width: none; }
  .tabs-nav::-webkit-scrollbar { display: none; }
}

/* zadání a výsledek vedle sebe */

/* ================= DEN / SMĚNA: časová osa ================= */
.day { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.day-text { position: sticky; top: 6.5rem; }
.day-text h2 { margin: .9rem 0 1rem; }
.day-text p { margin: 0; color: #C9CAD0; font-size: 1.1rem; max-width: 28rem; }
@media (max-width: 56rem) { .day { grid-template-columns: minmax(0, 1fr); } .day-text { position: static; } }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: calc(4.95rem - .5px); top: .6rem; bottom: .6rem; width: 1px; background: linear-gradient(180deg, rgba(247,185,85,.7), rgba(255,255,255,.12)); }
.timeline li { display: grid; grid-template-columns: 3.4rem 1.1rem minmax(0, 1fr); gap: .5rem 1rem; align-items: start; padding-block: .85rem; }
.timeline time { font-family: var(--display); font-weight: 500; font-size: .95rem; color: var(--on-night); font-variant-numeric: tabular-nums; padding-top: .9rem; text-align: right; }
.timeline .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--night); border: 2px solid var(--gold); margin: 1.15rem auto 0; position: relative; z-index: 1; }
.timeline .you .dot { background: var(--gold); box-shadow: 0 0 0 5px rgba(247,185,85,.18); }
.timeline .tl-card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: .9rem 1.05rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: start; }
.timeline .you .tl-card { background: rgba(247,185,85,.1); border-color: rgba(247,185,85,.32); }
.timeline h3 { margin: 0; font-family: var(--text); font-weight: 600; font-size: 1rem; line-height: 1.35; color: #fff; }
.timeline p { margin: 0; grid-column: 1 / -1; font-size: .9rem; line-height: 1.5; color: var(--on-night); }
.timeline .tag.done { background: rgba(255,255,255,.1); color: #D8D9DE; }
@media (max-width: 30rem) {
  .timeline::before { left: calc(3.8rem - .5px); }
  .timeline li { grid-template-columns: 2.6rem 1rem minmax(0, 1fr); gap: .5rem .7rem; }
  .timeline time { font-size: .82rem; }
}

/* ================= KONTROLA A BEZPEČNOST ================= */
.guard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: #fff; }
.guard > div { padding: clamp(1.3rem, 2.6vw, 1.9rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guard .ic { width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--ink); color: var(--gold); display: grid; place-items: center; }
.guard h3 { font-family: var(--display); font-weight: 700; font-size: 1.14rem; letter-spacing: -.02em; line-height: 1.2; margin: 1rem 0 .4rem; }
.guard p { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.55; }
.guard > div:nth-child(3n) { border-right: 0; }
.guard > div:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 62rem) {
  .guard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guard > div:nth-child(3n) { border-right: 1px solid var(--line); }
  .guard > div:nth-child(2n) { border-right: 0; }
  .guard > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .guard > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 40rem) {
  .guard { grid-template-columns: minmax(0, 1fr); }
  .guard > div, .guard > div:nth-child(3n) { border-right: 0; }
  .guard > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .guard > div:last-child { border-bottom: 0; }
}

/* ================= NASAZENÍ ================= */
.deploy .card { padding: clamp(1.4rem, 2.6vw, 1.9rem); }
.deploy .card h3 { font-size: 1.3rem; margin-top: .9rem; }
.deploy .card.pick { background: var(--night); color: #fff; border-color: var(--night); position: relative; overflow: hidden; isolation: isolate; }
.deploy .card.pick::before { content: ""; position: absolute; z-index: -1; width: 30rem; height: 30rem; right: -14rem; top: -18rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(247,185,85,.3), rgba(232,121,58,.08) 60%, transparent 100%); }
.deploy .card.pick p { color: #C9CAD0; }
.deploy .card.pick .k { color: var(--gold); }

/* ================= FAQ ================= */
.faq { max-width: 50rem; margin-inline: auto; display: grid; gap: .6rem; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: box-shadow .2s ease; }
.band-white .faq details { background: var(--paper); border-color: transparent; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 1.6rem; gap: 1rem; align-items: center;
  padding: 1.1rem 1.3rem; font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.015em; line-height: 1.3; border-radius: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 1.6rem; height: 1.6rem; border-radius: 50%; background-color: var(--ink);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: center;
  background-size: .7rem 2px, 2px .7rem; transition: transform .2s ease, background-size .2s ease;
}
.faq details[open] summary::after { background-size: .7rem 2px, 2px 0; background-color: var(--dusk-t); }
.faq .a { padding: 0 1.3rem 1.25rem; color: var(--ink-2); max-width: 44rem; }
.faq .a p { margin: 0; }
.faq .a p + p { margin-top: .6rem; }

/* ================= VÝZVA K AKCI ================= */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden; text-align: center; color: #fff; background: var(--night);
  border-radius: clamp(22px, 3.2vw, 38px); padding: clamp(2.6rem, 7vw, 5.5rem) clamp(1.3rem, 5vw, 4rem);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40rem 24rem at 50% -20%, rgba(247,185,85,.38), transparent 70%),
    radial-gradient(34rem 22rem at 100% 120%, rgba(232,121,58,.26), transparent 70%),
    radial-gradient(30rem 20rem at 0% 110%, rgba(232,121,58,.16), transparent 70%);
}
.cta-band .bigstar { position: absolute; z-index: -1; right: -3rem; bottom: -5rem; width: 17rem; height: 17rem; opacity: .07; background: var(--gold); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.cta-band h2 { max-width: 18ch; margin: 1rem auto 1rem; }
.cta-band p { margin: 0 auto; max-width: 36rem; color: #C9CAD0; font-size: 1.12rem; }
.cta-band .cta-row { margin-top: 2rem; }
.cta-band .cta-note { color: var(--on-night); margin-top: 1.4rem; font-size: .95rem; }
.cta-band .cta-note a { color: var(--gold); }

/* ================= PATIČKA ================= */
footer { background: var(--night); color: var(--on-night); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; margin-top: var(--sec); font-size: .94rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.45fr); gap: 2rem clamp(1.5rem, 4vw, 3rem); }
.lockup { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.lockup .brand-name { color: #fff; font-size: 1.55rem; }
.lockup .brand-name i { color: var(--on-night); }
.lockup .tagline { display: block; margin-top: .45rem; font-size: .64rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--on-night); }
.foot-about { margin: 1.2rem 0 0; max-width: 24rem; line-height: 1.6; }
footer h2 { font-family: var(--text); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin: .3rem 0 .9rem; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
footer a { color: #D8D9DE; text-decoration: none; }
footer a:hover { color: var(--gold); }
footer address { font-style: normal; line-height: 1.7; }
.foot-base { margin-top: clamp(2rem, 5vw, 3.2rem); padding-top: 1.3rem; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .86rem; }
@media (max-width: 56rem) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :first-child, .foot-grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* ================= ÚZKÉ OBRAZOVKY ================= */
@media (max-width: 40rem) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .win-bar { gap: .5rem; padding-inline: .7rem; }
  .win-tag { letter-spacing: .12em; }
}

/* ================= TŘI UKÁZKY V RÁMU ÚVODU ================= */

.stage-label { margin: 0 0 .7rem; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #D8D9DE; display: flex; gap: .6rem; align-items: center; }
.stage-label b { font-family: var(--display); font-weight: 700; letter-spacing: .04em; color: var(--gold); }

/* ================= DALŠÍ UKÁZKY ================= */
/* náhled dokumentu */

.docview { background: #EFEDE7; padding: clamp(.9rem, 2.4vw, 1.5rem); }
.sheet { background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(22,23,28,.08), 0 10px 24px -12px rgba(22,23,28,.25); padding: clamp(1rem, 2.6vw, 1.7rem); font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--ink); margin-bottom: 1.1rem; font-size: .7rem; color: var(--stone); }
.sheet-logo { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--display); font-weight: 700; font-size: .92rem; letter-spacing: -.01em; color: var(--ink); }
.sheet-logo::before { content: ""; width: .95rem; height: .95rem; border-radius: 4px; background: var(--ink); }
.sheet .sheet-title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .25rem; color: var(--ink); }
.sheet .for { margin: 0 0 .9rem; color: var(--stone); font-size: .78rem; }
.sheet table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.sheet th { text-align: left; font-weight: 600; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); padding: .4rem 0; border-bottom: 1px solid var(--line); }
.sheet td { padding: .5rem 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sheet th:last-child, .sheet td:last-child { text-align: right; width: 5.5rem; }
.skel { display: inline-block; height: .55rem; border-radius: 4px; background: #E6E3DC; vertical-align: middle; }
.sheet .lines { display: grid; gap: .45rem; margin: .2rem 0 1rem; }
.sheet .lines .skel { display: block; }
.sheet-notes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.sheet-notes span { font-size: .72rem; font-weight: 500; padding: .22rem .6rem; border-radius: 999px; background: var(--gold-w); color: var(--gold-ink); border: 1px solid var(--gold-line); }
.sheet-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .68rem; color: var(--stone); }

/* koncept odpovědi uvnitř e-mailu */
.draft { margin-top: .7rem; border: 1px dashed #CFCCC4; border-radius: 12px; padding: .75rem .9rem; background: var(--shell); }
.draft .k { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin-bottom: .35rem; }
.draft .k em { font-style: normal; letter-spacing: .04em; text-transform: none; font-size: .7rem; padding: .14rem .5rem; border-radius: 999px; background: var(--gold); color: var(--ink); white-space: nowrap; }
.draft p { font-size: .86rem; margin: 0; font-style: italic; }

/* seznam hlídaných termínů */

/* popis práce (úvod produktové stránky) */

/* složka projektu (paměť) */

/* malý štítek dostupnosti u nadpisu */
.avail { display: inline-flex; align-items: center; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--stone); white-space: nowrap; vertical-align: middle; }
.avail.std { background: var(--ink); border-color: var(--ink); color: #fff; }
.avail.opt { background: var(--gold-w); border-color: var(--gold-line); color: var(--gold-ink); }
.label-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; }
.card .avail { align-self: flex-start; margin-top: auto; }
.card p + .avail { margin-top: 1rem; }
.note { margin: 1.2rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--stone); max-width: 30rem; }

/* výčet „co to je" */
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.split-head h2 { margin: .9rem 0 1rem; }
.split-head p { margin: 0; color: var(--ink-2); font-size: 1.12rem; max-width: 26rem; }
.split-head .aside { margin-top: 1.6rem; padding: 1rem 1.15rem; border-left: 3px solid var(--gold); background: #fff; border-radius: 0 14px 14px 0; font-size: 1rem; color: var(--ink); }
.deflist { margin: 0; display: grid; }
.deflist div { display: grid; grid-template-columns: 2.6rem minmax(0, 11rem) minmax(0, 1fr); gap: .4rem 1.2rem; padding: 1.25rem 0; border-top: 1px solid var(--line); align-items: start; }
.deflist div:last-child { border-bottom: 1px solid var(--line); }
.deflist .n { font-family: var(--display); font-size: .82rem; font-weight: 500; letter-spacing: .08em; color: var(--stone); padding-top: .3rem; }
.deflist dt { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.25; }
.deflist dd { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
@media (max-width: 56rem) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .deflist div { grid-template-columns: 2rem minmax(0, 1fr); } .deflist dd { grid-column: 2; } }

/* „také umí": řádek drobných položek */
.also { margin-top: clamp(1.4rem, 3vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.also b { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-right: .4rem; }
.also span { font-size: .88rem; font-weight: 500; line-height: 1.3; padding: .42rem .85rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.band-white .also span { background: var(--paper); border-color: transparent; }

/* role: seznam vlevo, detail vpravo, vše v rámu okna */
.roles { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.roles .tabs-nav { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: .15rem; margin: 0; padding: .8rem; background: var(--shell); border-right: 1px solid var(--line); }
.roles .tabs-k { font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); padding: .5rem .7rem .6rem; }
.roles .tab { display: flex; align-items: center; gap: .7rem; text-align: left; white-space: normal; border-radius: 12px; border-color: transparent; background: transparent; padding: .62rem .7rem; font-size: .95rem; }
.roles .tab .n { font-family: var(--display); font-size: .74rem; font-weight: 500; color: var(--stone); font-variant-numeric: tabular-nums; width: 1.3rem; flex: none; }
.roles .tab:hover { background: #fff; border-color: var(--line); }
.roles .tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.roles .tab[aria-selected="true"] .n { color: var(--gold); }
.roles .tabpanel { border: 0; border-radius: 0; box-shadow: none; padding: clamp(1.3rem, 3vw, 2.4rem); margin: 0; min-width: 0; }
.roles .tabpanel + .tabpanel { border-top: 1px solid var(--line); margin-top: 0; }
.js .roles .tabpanel + .tabpanel { border-top: 0; }
.roles .panels { min-width: 0; }
.role-serves { margin: .5rem 0 0; color: var(--ink-2); font-size: 1.05rem; max-width: 40rem; }
.role-serves b { color: var(--ink); font-weight: 600; }
.role-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); margin-top: 1.5rem; align-items: start; }
.role-cols h4 { margin: 0 0 .8rem; font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.role-cols .ticks { margin-top: 0; }
.leaves { background: #FFF8EA; border: 1px solid var(--gold-line); border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem; }
.leaves h4 { color: var(--gold-ink); display: flex; align-items: center; gap: .5rem; }
.leaves p { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--ink); }
@media (max-width: 62rem) {
  .roles { grid-template-columns: minmax(0, 1fr); }
  .roles .tabs-nav { flex-direction: row; flex-wrap: wrap; overflow: visible; margin: 0; border-right: 0; border-bottom: 1px solid var(--line); gap: .4rem; padding: .8rem; }
  .roles .tabs-k { display: none; }
  .roles .tab { white-space: nowrap; border-color: var(--line); background: #fff; border-radius: 999px; padding: .5rem .9rem; font-size: .9rem; }
  .roles .tab .n { display: none; }
  .role-cols { grid-template-columns: minmax(0, 1fr); }
}

/* tým agentů: poznámka pod rolemi */
.callout { margin-top: clamp(1.2rem, 3vw, 1.8rem); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; background: var(--paper); border-radius: 20px; padding: clamp(1.1rem, 2.6vw, 1.6rem); }
section:not(.band-white) .callout { background: #fff; border: 1px solid var(--line); }
.callout .ic { width: 2.7rem; height: 2.7rem; border-radius: 12px; background: var(--ink); color: var(--gold); display: grid; place-items: center; }
.callout h3 { margin: 0 0 .3rem; font-family: var(--display); font-weight: 700; font-size: 1.14rem; letter-spacing: -.02em; }
.callout p { margin: 0; color: var(--ink-2); font-size: .98rem; max-width: 52rem; }

/* napojení: tabulka s linkami */
.links { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; }
.links li { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; gap: .4rem 1.4rem; align-items: center; padding: 1rem 1.3rem; }
.links li + li { border-top: 1px solid var(--line); }
.links b { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; }
.links span.t { color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
@media (max-width: 52rem) { .links li { grid-template-columns: minmax(0, 1fr) auto; } .links span.t { grid-column: 1 / -1; grid-row: 2; } }

.subhead { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; margin: clamp(2.4rem, 5vw, 3.4rem) 0 1.1rem; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2rem); margin-top: clamp(2rem, 4vw, 2.8rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--line); }
.facts h3 { font-family: var(--display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.015em; line-height: 1.25; margin: 0 0 .35rem; }
.facts p { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.5; }
@media (max-width: 62rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .facts { grid-template-columns: minmax(0, 1fr); } }

.faq ul { margin: .6rem 0; padding-left: 1.2rem; }
.faq li + li { margin-top: .3rem; }

/* řádky nadpisu úvodu: každá věta na svém řádku */
h1 .line { display: block; }
.hero h1.wide { max-width: 20ch; }
 .band-night .win-tag { background: transparent; border-color: rgba(255,255,255,.22); color: var(--on-night); }

/* drobne poznamky pod textem: vlastni odstup i velikost */
.split-head .note, .feature-text .note, .day-text .note { margin-top: 1.2rem; font-size: .88rem; line-height: 1.5; color: var(--stone); max-width: 30rem; }
.day-text .note { color: var(--on-night); }
.day-text .ticks { margin-top: 1.4rem; }
/* dlouhy sloupec vpravo: text vlevo jede s obrazovkou */
@media (min-width: 56.01rem) {
  .split-head { position: sticky; top: 6.5rem; }
  .feature.top { align-items: start; }
  .feature.top .feature-text { position: sticky; top: 7rem; }
}

/* lišta na telefonu: logo, tlačítko a nabídka v jednom řádku */
@media (max-width: 27rem) {
  .nav .wrap { gap: .6rem; min-height: 3.9rem; }
  .brand { gap: .45rem; }
  .brand img { width: 30px; height: 30px; }
  .brand-name { font-size: 1.1rem; }
  .nav .btn-sm { padding: .55rem .85rem; font-size: .86rem; }
  .nav-toggle { width: 2.5rem; height: 2.5rem; }
  .nav-end { gap: .4rem; }
}

/* nadpis úvodu na telefonu: věty se zalomí samy a vyváženě */
@media (max-width: 40rem) { h1.flow .line { display: inline; } }
@media (max-width: 26rem) { .links li { grid-template-columns: minmax(0, 1fr); } .links .avail { justify-self: start; grid-row: 2; } .links span.t { grid-row: 3; } }

/* ================= PŘEPÍNAČ JAZYKA ================= */
/* Leží na konci odkazů lišty: na širokém okně před tlačítkem, na úzkém v rozbalené nabídce. */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.75); flex: none; }
.nav .nav-links .lang a.lang-opt {
  padding: .26rem .6rem; border: 0; border-radius: 999px; box-shadow: none;
  font-size: .76rem; font-weight: 600; letter-spacing: .08em; line-height: 1.25; color: var(--stone); text-decoration: none;
}
.nav .nav-links .lang a.lang-opt:hover { color: var(--ink); }
.nav .nav-links .lang a.lang-opt[aria-current="true"] { background: var(--ink); color: #fff; }
@media (max-width: 61.99rem) {
  .js .nav-links .lang { align-self: flex-start; margin-top: 1rem; }
  .nav .nav-links .lang a.lang-opt { padding: .4rem .85rem; font-size: .84rem; }
}

/* Česká lišta je delší než anglická: rozbalovací nabídka nastupuje už pod 68rem. */
@media (min-width: 62rem) and (max-width: 67.99rem) {
  html[lang="cs"] .nav .wrap { flex-wrap: wrap; }
  html[lang="cs"].js .nav-toggle { display: inline-flex; }
  html[lang="cs"] .nav-end { order: 2; margin-left: auto; }
  html[lang="cs"] .nav-links { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: .2rem 1.3rem; padding-bottom: .8rem; }
  html[lang="cs"].js .nav-links { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .3rem 0 1rem; }
  html[lang="cs"].js .nav-links.open { display: flex; }
  html[lang="cs"].js .nav-links a:not(.btn) { padding: .8rem .2rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  html[lang="cs"] .nav-links a[aria-current="page"] { box-shadow: none; }
  html[lang="cs"].js .nav-links .lang { align-self: flex-start; margin-top: 1rem; }
  html[lang="cs"].js .nav .nav-links .lang a.lang-opt { padding: .4rem .85rem; font-size: .84rem; border-bottom: 0; }
}
/* Česká lišta na úzkém telefonu: delší popisek tlačítka se musí vejít vedle loga. */
@media (max-width: 24rem) {
  html[lang="cs"] .nav .wrap { gap: .4rem; }
  html[lang="cs"] .brand img { width: 26px; height: 26px; }
  html[lang="cs"] .brand-name { font-size: 1rem; }
  html[lang="cs"] .nav .btn-sm { padding: .5rem .7rem; font-size: .8rem; }
  html[lang="cs"] .nav-toggle { width: 2.3rem; height: 2.3rem; }
}
@media (max-width: 21rem) { html[lang="cs"] .nav .btn-sm { display: none; } }
/* slovo, které se nesmí zalomit uprostřed (e-mail, on-premise) */
.nw { white-space: nowrap; }
.also span.nw { padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; }

/* Česká verze: delší slova a štítky na úzkých obrazovkách */

@media (max-width: 24rem) {
  html[lang="cs"] .timeline .tl-card { grid-template-columns: minmax(0, 1fr); }
  html[lang="cs"] .timeline .tl-card .tag { justify-self: start; grid-row: 3; }
}
@media (max-width: 22rem) {
  html[lang="cs"] h1.display { font-size: 2.15rem; }
}

/* =====================================================================
   REVIZE 2 (10. 10. 2026): ukázky jen toho, co člověk opravdu uvidí.
   E-mail jako okno poštovního klienta, chat jako telefon s messengerem.
   Rozvržením se inspirují běžnými aplikacemi, barvy a písma jsou firemní.
   ===================================================================== */

/* ----- lišta okna: nástroje vpravo ----- */
.win-end { justify-self: end; display: inline-flex; align-items: center; gap: .9rem; min-width: 0; }
.win-tools { display: inline-flex; align-items: center; gap: .8rem; color: #A3A29C; }
.win-bar { background: linear-gradient(180deg, #FDFCFA 0%, #F4F2ED 100%); }
@media (max-width: 40rem) { .win-tools { display: none; } }

/* ----- e-mail: vlákno zpráv jako karty ----- */
.mail-thread { background: #F1EFEA; padding: .55rem; display: grid; gap: .45rem; }
.mail-msg { background: #fff; border: 1px solid #E6E3DC; border-radius: 11px; padding: 1rem 1.1rem 1.1rem; min-width: 0; }
.mail-head { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; column-gap: .8rem; row-gap: .08rem; align-items: baseline; }
.mail-head .av, .mail-head .av.agent { grid-row: 1 / span 3; align-self: start; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: .84rem; }
.mail-head .av.agent img { width: 62%; height: 62%; }
.mail-from { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; min-width: 0; font-size: .98rem; line-height: 1.3; }
.mail-from b { font-weight: 600; color: var(--ink); }
.mail-date { font-size: .76rem; color: var(--stone); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail-subj { grid-column: 2 / -1; font-size: .9rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.mail-to { grid-column: 2 / -1; font-size: .8rem; line-height: 1.4; color: var(--stone); }
.mail-to b { font-weight: 500; color: var(--ink-2); }
.mail-body { margin-top: .9rem; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.mail-body p { margin: 0 0 .6rem; }
.mail-body p:last-child { margin-bottom: 0; }
.mail-body b { font-weight: 600; color: var(--ink); }
.mail-body .sign { margin-top: .9rem; color: var(--ink); }
.mail-quote { margin: .7rem 0 0; padding: .15rem 0 .15rem .8rem; border-left: 3px solid var(--line); font-size: .84rem; color: var(--stone); }
.mail-atts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .95rem; }
/* příloha jako dlaždice s ikonou dokumentu */
.mail-atts .att { padding: .5rem .95rem .5rem .55rem; border-radius: 10px; background: var(--shell); }
.mail-atts .att i { width: 2.05rem; height: 2.55rem; border-radius: 4px; clip-path: polygon(0 0, 68% 0, 100% 24%, 100% 100%, 0 100%); align-content: end; padding-bottom: .3rem; }
.mail-solo { max-width: 47rem; margin-inline: auto; }
.mail-solo .mail-msg { padding: 1.15rem 1.35rem 1.3rem; }
@media (max-width: 40rem) {
  .mail-thread { padding: .4rem; gap: .35rem; }
  .mail-msg, .mail-solo .mail-msg { padding: .85rem .85rem .95rem; }
  .mail-head { grid-template-columns: 2.2rem minmax(0, 1fr) auto; column-gap: .65rem; }
  .mail-head .av, .mail-head .av.agent { width: 2.2rem; height: 2.2rem; font-size: .74rem; }
  .mail-body { font-size: .9rem; }
}

/* ----- úvod: e-mail a telefon vedle sebe ----- */
.stage-duo {
  display: grid; grid-template-columns: minmax(0, 1fr) 20.5rem; grid-template-areas: "mail chat" "cap chat"; grid-template-rows: auto 1fr;
  gap: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.6rem, 4vw, 3.4rem); align-items: start;
}
.duo-mail { grid-area: mail; min-width: 0; }
.duo-chat { grid-area: chat; min-width: 0; }
.stage-duo .stage-cap { grid-area: cap; margin-top: 0; align-self: end; }
@media (max-width: 58rem) {
  .stage-duo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "mail" "chat" "cap"; }
  .duo-chat .stage-label { justify-content: center; }
}

/* ----- telefon s chatem (varianta .ex; původní .phone zůstává pro případ návratu) ----- */
.phone.ex { width: min(100%, 20.5rem); border-radius: 2.75rem; padding: .55rem; }
.phone.ex .phone-screen { border-radius: 2.25rem; }
.phone.ex .phone-status { position: relative; padding: .8rem 1.5rem .45rem; }
.phone.ex .phone-status::after { content: ""; position: absolute; left: 50%; top: .6rem; width: 4.4rem; height: 1.2rem; margin-left: -2.2rem; border-radius: 999px; background: var(--ink); }
.phone.ex .chat-head { padding: .45rem .8rem .65rem .45rem; gap: .5rem; }
.phone.ex .chat-head .av.agent { width: 2.2rem; height: 2.2rem; border-radius: 50%; }
.phone.ex .chat-head .av.agent img { width: 62%; height: 62%; }
.phone.ex .chat-head .who b { font-size: .98rem; }
.phone.ex .chat-head .who span { display: inline-flex; align-items: center; gap: .28rem; }
.phone.ex .chat-head .who span svg { color: var(--dusk-t); }
.ex-back { color: var(--dusk-t); }
.phone.ex .chat-log { background: #fff; padding: .75rem .7rem .9rem; gap: .28rem; }
.ex-day { align-self: center; margin-bottom: .4rem; padding: .2rem .7rem; border-radius: 999px; background: var(--paper); font-size: .68rem; font-weight: 600; color: var(--stone); }
.ex-from { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; font-size: .76rem; font-weight: 600; color: var(--ink); }
.ex-from .av.agent { width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.ex-from .av.agent img { width: 62%; height: 62%; }
.phone.ex .bub { max-width: 86%; padding: .5rem .72rem .42rem; border-radius: 14px; font-size: .86rem; line-height: 1.42; }
.phone.ex .bub.agent { margin-left: 2.05rem; max-width: calc(92% - 2.05rem); background: #F1EFEA; border: 0; color: var(--ink); }
.phone.ex .bub.you { margin-top: .5rem; background: var(--gold-w); color: var(--ink); }
.phone.ex .bub.wide { width: 88%; }
.ex-time { display: block; margin-top: .18rem; text-align: right; font-size: .64rem; line-height: 1; color: var(--stone); font-variant-numeric: tabular-nums; }
.phone.ex .voice .play { background: var(--ink); color: var(--gold); }
.phone.ex .wave i { background: rgba(22,23,28,.42); }
.phone.ex .wave i:nth-child(-n+8) { background: var(--dusk); }
.phone.ex .voice time { color: var(--ink-2); opacity: 1; }
.phone.ex .transcript { border-top-color: rgba(22,23,28,.12); color: var(--ink-2); }
.phone.ex .transcript b { color: var(--dusk-t); }
.phone.ex .chat-compose { gap: .45rem; padding: .5rem .65rem .35rem; }
.phone.ex .chat-compose .ic { width: 2rem; height: 2rem; }
.phone.ex .chat-compose .ic.plain { border-color: transparent; }
.ex-home { display: block; width: 34%; height: .28rem; margin: .4rem auto .45rem; border-radius: 999px; background: var(--ink); }

/* ----- náhled PDF: název souboru v liště ----- */
.win-title.file { color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ----- patička: údaje firmy ----- */
.foot-legal { margin: .9rem 0 0; max-width: 26rem; font-size: .84rem; line-height: 1.55; color: var(--on-night); }
.phone-screen { color: var(--ink); }
.mail-solo .mail-body { font-size: .96rem; }

/* ----- úvod stránky produktu: text vlevo, představovací e-mail vpravo na papíru, bez nočního rámu ----- */
.hero-split { text-align: left; padding-block: clamp(2.4rem, 4.6vw, 4.2rem) clamp(.5rem, 2vw, 1.6rem); }
.hero-split::before {
  left: 0; top: -10rem; width: 100%; height: 66rem; transform: none;
  background:
    radial-gradient(36rem 30rem at 76% 48%, rgba(247,185,85,.42), transparent 70%),
    radial-gradient(24rem 22rem at 98% 82%, rgba(232,121,58,.17), transparent 72%),
    radial-gradient(24rem 16rem at 10% 10%, rgba(247,185,85,.14), transparent 72%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(2rem, 4.4vw, 4rem); align-items: center; }
.hero-split h1.display { font-size: clamp(2.3rem, .6rem + 3.75vw, 3.9rem); line-height: 1.02; max-width: none; margin: 1.2rem 0 1.3rem; }
.hero-split .lede { max-width: 33rem; margin-inline: 0; font-size: clamp(1.05rem, 1rem + .28vw, 1.19rem); }
.hero-split .cta-row { justify-content: flex-start; margin-top: 1.9rem; }
.hero-ticks { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.35rem; font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.hero-ticks li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-ticks svg { color: var(--dusk); flex: none; }

.hero-visual { position: relative; isolation: isolate; min-width: 0; }
.hero-shot { position: relative; }
/* list papíru pod oknem: zlatý, lehce pootočený */
.hero-shot::before {
  content: ""; position: absolute; z-index: -1; inset: 1.3rem -1rem -1.15rem 1.4rem; border-radius: 20px;
  background: linear-gradient(165deg, #FEF4DD 0%, #FADDB9 100%); border: 1px solid var(--gold-line);
  transform: rotate(2.4deg); box-shadow: 0 34px 60px -36px rgba(232,121,58,.6);
}
.hero-visual .sparkle { position: absolute; z-index: -1; background: var(--evening); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.hero-label { margin: 0 0 .8rem .2rem; display: flex; align-items: center; gap: .6rem; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.hero-label b { font-family: var(--display); font-weight: 700; letter-spacing: .08em; color: var(--dusk-t); }
.hero-label b::after { content: ""; display: inline-block; width: 1.6rem; height: 1px; margin-left: .6rem; vertical-align: middle; background: var(--gold); }
.hero-cap { margin: 2.1rem .2rem 0 0; font-size: .8rem; color: var(--stone); text-align: right; }
.hero-split .mail-solo { max-width: none; box-shadow: 0 2px 6px rgba(22,23,28,.05), 0 30px 60px -30px rgba(22,23,28,.32); }
.hero-split .mail-solo .mail-msg { padding: 1.05rem 1.2rem 1.15rem; }
.hero-split .mail-solo .mail-body { font-size: .9rem; line-height: 1.5; }
.hero-split .mail-solo .mail-body p { margin-bottom: .5rem; }
@media (max-width: 62rem) {
  .hero-split { text-align: center; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .hero-split h1.display { font-size: clamp(2.3rem, 1.2rem + 5vw, 3.6rem); margin-inline: auto; }
  .hero-split .lede { margin-inline: auto; max-width: 38rem; }
  .hero-split .cta-row, .hero-ticks { justify-content: center; }
  .hero-visual { width: 100%; max-width: 40rem; margin-inline: auto; text-align: left; }
  .hero-shot::before { inset: 1.3rem -.4rem -.9rem .6rem; }
  .hero-visual .sparkle { display: none; }
}
@media (max-width: 40rem) {
  .hero-split h1 .line { display: inline; }
  .hero-ticks { gap: .45rem 1rem; font-size: .86rem; }
  .hero-cap { text-align: center; margin-right: 0; }
}

/* =====================================================================
   REVIZE 3 (22. 10. 2026): lišta na telefonu.
   Horní řádek (logo, tlačítko, nabídka) se nikdy neláme. Rozbalená
   nabídka je panel pod lištou, ne druhý řádek lišty. Velikosti mají
   rezervu i pro Safari, které písmo vykresluje o kousek šířeji.
   ===================================================================== */
.nav-cta { display: none; }

@media (max-width: 61.99rem) {
  .js .nav .wrap { flex-wrap: nowrap; }
  .js .nav-end { flex: none; }
  .js .brand { min-width: 0; }
  .js .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; width: auto; margin: 0;
    padding: .2rem var(--pad) 1.3rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 22px 30px -22px rgba(22,23,28,.32);
    max-height: calc(100vh - 3.9rem); max-height: calc(100dvh - 3.9rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
}
@media (min-width: 62rem) and (max-width: 67.99rem) {
  html[lang="cs"].js .nav .wrap { flex-wrap: nowrap; }
  html[lang="cs"].js .nav-end { flex: none; }
  html[lang="cs"].js .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; width: auto; margin: 0;
    padding: .2rem var(--pad) 1.3rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 22px 30px -22px rgba(22,23,28,.32);
  }
}

/* telefon: zmenšená lišta pro obě jazykové verze (dřív jen česká a jen do 24rem) */
@media (max-width: 25rem) {
  .nav .wrap { gap: .4rem; }
  .brand img { width: 26px; height: 26px; }
  .brand-name { font-size: 1rem; }
  .nav .btn-sm { padding: .5rem .7rem; font-size: .8rem; }
  .nav-toggle { width: 2.3rem; height: 2.3rem; }
}
/* nejužší telefony: tlačítko z lišty přejde do rozbalené nabídky */
@media (max-width: 20.99rem) { .nav-end .btn { display: none; } }
@media (max-width: 22.49rem) { html[lang="cs"] .nav-end .btn { display: none; } }
@media (max-width: 20.99rem) { .js .nav-links .nav-cta { display: inline-flex; justify-content: center; margin-top: 1rem; } }
@media (max-width: 22.49rem) { html[lang="cs"].js .nav-links .nav-cta { display: inline-flex; justify-content: center; margin-top: 1rem; } }

/* starší Safari (iOS 15 a níž) neumí overflow: clip; bez toho by šla stránka posouvat do strany */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}