/* =============================================================
   armful, design systém a styly webu
   Podle Corporate Identity: tmavý indigový základ, teplá růžová
   a oranžová, Comfortaa pro nadpisy, Inter pro text.
   Rohy jen minimálně zaoblené (3 / 5 / 8 px), žádné pilulky.
   Animace jsou čisté CSS, pomalé a jemné, žádné pružinové odrazy.
   ============================================================= */

/* ── TOKENY ───────────────────────────────────────────────── */
:root {
  --indigo:   #1E293B;
  --indigo-l: #3B4A66;
  --navy:     #263357;
  --soft:     #F8FAFC;
  --pink:     #E789A3;
  --orange:   #F0A25C;
  --slate:    #64748B;
  --ivory:    #EFE8D8;

  --text:   rgba(248, 250, 252, .86);
  --muted:  rgba(248, 250, 252, .64);
  --line:   rgba(248, 250, 252, .10);
  --card:   rgba(248, 250, 252, .04);

  --f-head: 'Comfortaa', 'Nunito', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-s: 3px;
  --r-m: 5px;
  --r-l: 8px;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
}

/* ── ZÁKLAD ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  background: var(--indigo);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--indigo);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Horní záře, dřív `background-attachment:fixed` na body. Na iOS Safari se při scrollu
   zasouvá a vysouvá dolní adresní lišta, což mění výšku viditelné plochy, a fixní pozadí
   (na rozdíl od fixně POLOHOVANÉHO prvku) se při tom přepočítá špatně: zůstane vidět ostrý
   přechod, přesně tam, kde adresní lišta končí (nahlášeno 2026-09-27, screenshot z iPhonu).
   Skutečný `position:fixed` element tenhle problém nemá. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(59, 74, 102, .75), transparent 70%);
  pointer-events: none;
}

/* Jemné zrnění jako na webu ZD-foto, ale slabší. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--r-s); }
::selection { background: var(--pink); color: var(--indigo); }

.skip-link {
  position: fixed; top: -100px; left: var(--gutter); z-index: 200;
  padding: .6rem 1rem; background: var(--orange); color: var(--indigo);
  font-weight: 600; border-radius: var(--r-m);
}
.skip-link:focus { top: 1rem; }

/* ── POZADÍ: záře a kruhy ─────────────────────────────────── */
.soon__bg, .page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.soon__glow {
  position: absolute;
  border-radius: 50%;           /* jen neviditelná záře, ne tvar prvku */
  filter: blur(90px);
  will-change: transform;
}
.soon__glow--pink {
  width: 52vmax; height: 52vmax;
  left: -16vmax; bottom: -20vmax;
  background: radial-gradient(circle, rgba(231, 137, 163, .30), transparent 65%);
  translate: calc(var(--mx, 0) * -34px) calc(var(--my, 0) * -34px);
}
.soon__glow--orange {
  width: 46vmax; height: 46vmax;
  right: -14vmax; top: -18vmax;
  background: radial-gradient(circle, rgba(240, 162, 92, .26), transparent 65%);
  translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -22px);
}

.soon__ring {
  position: absolute;
  left: 50%; top: 42%;
  border: 1px solid rgba(248, 250, 252, .07);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.soon__ring--1 { width: 64vmin;  height: 64vmin; }
.soon__ring--2 { width: 96vmin;  height: 96vmin; }
.soon__ring--3 { width: 132vmin; height: 132vmin; border-color: rgba(248, 250, 252, .045); }

/* ── PŘEPÍNAČ JAZYKA ──────────────────────────────────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
}
.lang-switch__btn { color: var(--muted); padding: .25rem .1rem; transition: color .35s; }
.lang-switch__btn:hover { color: var(--pink); }
.lang-switch__btn.is-active { color: var(--soft); }
.lang-switch__sep { color: var(--slate); }

/* ── TLAČÍTKA ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.7rem;
  border-radius: var(--r-m);
  font-family: var(--f-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .4s var(--ease-out), border-color .4s, color .4s, transform .5s var(--ease-out), box-shadow .5s;
}
.btn--primary { background: var(--orange); color: var(--indigo); }
.btn--primary:hover { background: #f5b072; transform: translateY(-2px); box-shadow: 0 10px 34px -10px rgba(240, 162, 92, .55); }
.btn--ghost { border: 1px solid var(--line); color: var(--soft); }
.btn--ghost:hover { border-color: var(--pink); color: var(--pink); }

/* ── ZNAK: základní pravidla (animace jsou níže) ──────────── */
.am-logo { width: 100%; height: auto; overflow: visible; }
.am-logo--footer { width: 130px; height: auto; }


/* =============================================================
   STRÁNKA VE VÝSTAVBĚ
   ============================================================= */
.am-soon-page { display: flex; flex-direction: column; }
.soon {
  position: relative;
  z-index: 10;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem var(--gutter) 3.5rem;
}

.soon__mark {
  width: clamp(150px, 19vw, 225px);
  margin-bottom: clamp(1.6rem, 3.6vh, 2.6rem);
  transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 14px), 0);
}

.soon__eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.1rem;
  padding-left: .34em;           /* vyrovná mezeru za posledním písmenem */
}

.soon__title, .hero__title {
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--ivory);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.soon__title {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  max-width: 20ch;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

/* Slova nadpisu vyjíždějí zpod hrany. Vnitřní okraje neořezávají diakritiku. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .12em 0 .16em;
  margin: -.12em 0 -.16em;
}
.w > span { display: inline-block; }

.soon__desc {
  max-width: 56ch;
  font-size: clamp(.98rem, 1.25vw, 1.1rem);
  color: var(--text);
  margin-bottom: 1.9rem;
}

.soon__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 0;
  margin-bottom: 2.4rem;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--soft);
}
.soon__features li { display: inline-flex; align-items: center; }
.soon__features li + li::before {
  content: '';
  width: 5px; height: 5px;
  margin: 0 1.05rem;
  border-radius: 1px;
  background: var(--pink);
  transform: rotate(45deg);
}
.soon__features li:nth-child(even)::before { background: var(--orange); }

.soon__status {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 400;
  color: var(--text);
  text-align: left;
  margin-bottom: 1.6rem;
}
.soon__status li { display: flex; align-items: center; gap: .75rem; }
.soon__status-dot {
  flex: none;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--orange);
}
.soon__status-dot--app { background: var(--pink); }

.soon__contact { font-size: .92rem; color: var(--muted); }
.soon__contact a {
  color: var(--soft);
  font-weight: 600;
  margin-left: .3rem;
  border-bottom: 1px solid rgba(231, 137, 163, .55);
  transition: color .35s, border-color .35s;
}
.soon__contact a:hover { color: var(--pink); border-color: var(--pink); }

.soon__foot {
  position: relative;
  z-index: 10;
  margin-top: -2.6rem;           /* zapadne do spodního odsazení, na výšku 100svh se vejde */
  padding: 0 var(--gutter) 1.2rem;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .08em;
  color: rgba(248, 250, 252, .42);
}

/* =============================================================
   ÚVODNÍ STRÁNKA
   ============================================================= */
.site-header {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 100;
  display: grid;
  /* Pravý sloupec s navigací má minimum podle obsahu, ať se odkazy (Co umí) při střední šířce okna nezalamují. */
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: .6rem 1.5rem;
  padding: 1rem var(--gutter);
  transition: background-color .5s, border-color .5s, backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(30, 41, 59, .82);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Tenká linka hloubky scrollu, přilepená ke spodní hraně hlavičky (ta je position:fixed,
   takže je to zároveň containing block, linka se posune spolu s hlavičkou i s admin lištou). */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; overflow: hidden; pointer-events: none; }
.scroll-progress__bar {
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--orange));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress__bar { transition: none; }
}
.site-header__logo img { height: 40px; width: auto; }
.site-header__logo { justify-self: start; }
/* grid-column natvrdo na 3: bez upozornění uprostřed (běžné stránky) by se navigace bez toho
   sama přesunula do prostředního sloupce mřížky (příští volný, ne poslední) a vpravo zbyl
   prázdný pruh. Stejné natvrdo umístění dělá i mobilní hamburger níž jednodušší. */
.site-header__nav { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 2rem; }

.site-header__burger {
  display: none;
  grid-column: 2;
  justify-self: center;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: var(--soft);
  border-radius: var(--r-s);
  transition: color .3s;
}
.site-header__burger svg { width: 22px; height: 22px; }
.site-header__burger:hover, .site-header__burger[aria-expanded="true"] { color: var(--orange); }

/* Upozornění uprostřed pruhu, aby nikdo nepovažoval web ani aplikaci za hotové. */
.site-header__notice {
  grid-column: 2;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.6;
  text-transform: uppercase;
  text-align: center;
  color: var(--soft);
}
.site-header__notice span { display: inline; }
.site-header__notice span:first-child::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: .7rem;
  vertical-align: middle;
  position: relative; top: -1px;
  border-radius: 2px;
  background: var(--orange);
}
.site-header__notice span + span::before { content: '·'; margin: 0 .8em; }
.site-header__link {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .35s;
}
.site-header__link:hover { color: var(--orange); }
.site-header__link, .site-header__links, .site-header__nav { white-space: nowrap; }
/* Užší okno, ale ještě bez hamburgeru (nad 900 px): menší mezery a prostrkání, ať se navigace vejde do jednoho řádku. */
@media (max-width: 1180px) and (min-width: 901px) {
  .site-header__nav { gap: 1.2rem; }
  .site-header__link { padding: .4rem .9rem; letter-spacing: .1em; }
  .site-header__link:first-child { padding-left: 0; }
  .site-header__link:last-child { padding-right: 0; }
}
/* Odkazy v liště: samostatné položky s tenkým svislým oddělovačem (1 px), ne věta. */
.site-header__links { display: flex; align-items: center; }
.site-header__link { position: relative; padding: .4rem 1.3rem; }
.site-header__link:first-child { padding-left: 0; }
.site-header__link:last-child { padding-right: 0; }
.site-header__link + .site-header__link::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 0; height: 14px; transform: translateY(-50%);
  border-left: 1px solid var(--pink);
}

main { position: relative; z-index: 10; }
.page-bg { position: fixed; }
.site-footer { position: relative; z-index: 10; }

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: 1240px;
  margin: 0 auto;
  padding: 8rem var(--gutter) 5rem;
}
.hero__title { font-size: clamp(2.3rem, 5.2vw, 4.4rem); margin-bottom: 1.6rem; }
.hero__desc { max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.15rem); margin-bottom: 2.2rem; }
.hero__soon {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .9rem; font-weight: 600; color: var(--orange);
}
/* ---- Odznak „Stáhnout z App Store“ ----
   Oficiální SVG od Applu zůstává beze změny (barvy ani tvar se neupravují). Kolem něj jen pomalá, jemná záře
   a nepatrné zvednutí při najetí, ve stylu značky (viz zásada: pomalé, jemné, přes záři, ne pružinové odrazy). */
.store { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.store__note { font-size: .82rem; letter-spacing: .04em; color: var(--muted); margin: 0; }
.store-badge {
  position: relative; display: inline-block; line-height: 0; border-radius: 9px;
  transition: transform .7s var(--ease-out);
}
.store-badge img { position: relative; z-index: 1; display: block; height: 56px; width: auto; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35)); }
.store-badge--sm img { height: 42px; filter: none; }
.store-badge__glow {
  position: absolute; inset: -10px; z-index: 0; border-radius: 18px; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 50%, rgba(240, 162, 92, .55), rgba(231, 137, 163, .25) 55%, transparent 75%);
  filter: blur(16px); opacity: .0; transition: opacity .9s ease;
}
.store-badge:hover, .store-badge:focus-visible { transform: translateY(-3px); }
.store-badge:hover .store-badge__glow, .store-badge:focus-visible .store-badge__glow { opacity: .85; }
.store-badge:active { transform: translateY(-1px); transition-duration: .2s; }
.site-footer__store { margin-top: 1rem; }
.store__row { display: flex; align-items: center; gap: 1.4rem; }
.store__qr { display: none; align-items: center; line-height: 0; }
.store__qr img { width: 88px; height: 88px; padding: 6px; background: #F8FAFC; border-radius: var(--r-s); display: block; flex: none; }
/* QR se ukáže jen tam, kde je myš (počítač), na telefonu stačí odznak. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) { .store__qr { display: inline-flex; } }
@keyframes am-badge-breathe { 0%, 100% { opacity: .05; } 50% { opacity: .38; } }
@media (prefers-reduced-motion: no-preference) {
  .store-badge__glow { animation: am-badge-breathe 7s ease-in-out 3.2s infinite; }
  .store-badge:hover .store-badge__glow { animation: none; }
}
@media (max-width: 900px) { .store { align-items: center; } }
.hero__mark {
  width: min(100%, 380px);
  justify-self: center;
  transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 12px), 0);
}

.section { max-width: 1240px; margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) var(--gutter); }
.section__title {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  color: var(--ivory);
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}
/* Když nadpis sekce uvádí ještě delší úvodní odstavec (.lede), zúží se mezera pod ním,
   .lede si tu mezeru drží sama, ať to není dvakrát tolik místa. Bez podpory :has() zůstane
   jen o trochu víc vzduchu navíc, nic se nerozbije. */
.section__title:has(+ .lede) { margin-bottom: 1rem; }

.lede { font-size: 1.06rem; line-height: 1.75; color: var(--text); max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Malý štítek nad nadpisem sekce (Příběh, Co umí, Otázky...), stejný vzor jako .soon__eyebrow. */
.eyebrow {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .9rem;
}

/* Drobný oddělovač mezi sekcemi na úvodní stránce, stejný kosočtverec jako u „soon__features". */
.section-divider { display: flex; align-items: center; gap: 1rem; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.section-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 45%, var(--line) 55%, transparent); }
.section-divider i { flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--pink); transform: rotate(45deg); font-style: normal; }

/* Pevné 3 sloupce: přesně 6 karet funkcí, dvě čisté řady po třech, žádný osamocený
   zbytek na konci jako u auto-fill (ten by při 6 kartách na širším plátně dal 4 + 2). */
.features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.feature {
  padding: 1.8rem 1.7rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  transition: border-color .5s, transform .6s var(--ease-out), background-color .5s;
}
.feature:hover { border-color: rgba(231, 137, 163, .5); transform: translateY(-4px); background: rgba(248, 250, 252, .06); }
.feature:nth-child(even):hover { border-color: rgba(240, 162, 92, .55); }
.feature__icon { width: 26px; height: 26px; margin-bottom: 1.1rem; color: var(--pink); }
.feature:nth-child(even) .feature__icon { color: var(--orange); }
.feature__title { font-family: var(--f-head); font-weight: 700; font-size: 1.25rem; color: var(--ivory); margin-bottom: .6rem; }
.feature__text { font-size: .98rem; color: var(--muted); }

/* ── ČASTÉ OTÁZKY ─────────────────────────────────────────── */
.faq { max-width: 860px; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem .1rem;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ivory);
  transition: color .35s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ''; }
.faq__item summary:hover { color: var(--pink); }
.faq__chev { flex: none; width: 20px; height: 20px; color: var(--orange); transition: transform .45s var(--ease-out); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 .1rem 1.6rem; max-width: 64ch; font-size: .98rem; color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__a { animation: am-fade-up .5s var(--ease-out) both; }
}

/* Výška snímku vlevo roste a klesá s oknem (vw), šířku dopočítá poměr 3:4, takže nikdy nepřeteče. Text vpravo je svisle uprostřed. */
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.story__head { display: flex; flex-direction: column; min-height: 0; }
.story__title { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.2; color: var(--ivory); }
.story__text { align-self: center; max-width: 60ch; padding-left: clamp(1.2rem, 3vw, 2.2rem); border-left: 2px solid rgba(231, 137, 163, .5); }
.story__text p { font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.8; color: var(--text); }
.story__text p + p { margin-top: 1.3em; }
.story__shot { flex: none; height: clamp(16rem, 28vw, 30rem); position: relative; margin: 2rem 0 0; }
.story__shot img {
  position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left top;
  border-radius: var(--r-m, 8px); border: 1px solid rgba(248, 250, 252, .12); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.shots__row { display: flex; gap: clamp(.8rem, 2vw, 1.6rem); overflow-x: auto; padding: .4rem .2rem 1.4rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.shots__row::-webkit-scrollbar { display: none; }
.shots__row:focus:not(:focus-visible) { outline: none; }
.shot { flex: 0 0 auto; width: clamp(180px, 22vw, 260px); scroll-snap-align: start; }
.shot img { width: 100%; height: auto; border-radius: var(--r-l); border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55); }

.shots__hint { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: clamp(1.2rem, 3vw, 2rem); font-size: .85rem; color: var(--text-soft, var(--text)); opacity: .8; }
.shots__btn { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; color: var(--ivory, #fff); background: rgba(231, 137, 163, .14); border: 1px solid rgba(231, 137, 163, .5); border-radius: 5px; cursor: pointer; transition: background .25s, opacity .25s; }
.shots__btn:hover:not(:disabled) { background: rgba(231, 137, 163, .3); }
.shots__btn:focus-visible { outline: 2px solid var(--ivory, #fff); outline-offset: 2px; }
.shots__btn:disabled { opacity: .35; cursor: default; }
.shots__track { position: relative; width: clamp(140px, 32vw, 360px); height: 10px; border-radius: 5px; background: var(--line); cursor: pointer; touch-action: none; }
.shots__thumb { position: absolute; top: 0; left: 0; height: 100%; width: 30%; border-radius: 5px; background: rgba(231, 137, 163, .85); cursor: grab; touch-action: none; }
.shots__thumb:active { cursor: grabbing; background: rgba(231, 137, 163, 1); }
.shots__hint[hidden] { display: none; }

.statements { border-top: 1px solid var(--line); }
/* Pevné 2 sloupce: přesně 4 sdělení, čistá mřížka 2×2 místo auto-fit, který by na
   širším plátně dal 3 + 1. Vlastní obal (ne přímo .statements), ať eyebrow a nadpis
   sekce nejsou taky položky téhle mřížky, stejná past jako dřív u .story. */
.statements__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.statement__title { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--ivory); margin-bottom: 1rem; }
.statement__text { font-size: clamp(1rem, 1.2vw, 1.12rem); max-width: 44ch; }

.site-footer { border-top: 1px solid var(--line); background: rgba(24, 33, 49, .6); }
.site-footer__inner {
  max-width: 1240px; margin: 0 auto;
  padding: 3.5rem var(--gutter) 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 2.4rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.site-footer__app { margin-top: .9rem; font-size: .78rem; letter-spacing: .08em; color: var(--muted); }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2.5rem; align-items: start; }
.site-footer__menu { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.site-footer__menu a { color: var(--text); border-bottom: 1px solid transparent; transition: color .35s, border-color .35s; }
.site-footer__menu a:hover { color: var(--pink); border-color: var(--pink); }
.site-footer__contact { display: flex; flex-direction: column; gap: .55rem; font-size: .92rem; }
.site-footer__contact .site-footer__label { margin-bottom: .35rem; }
.site-footer__label { display: block; margin-bottom: .9rem; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pink); }
.site-footer__contact a { display: block; color: var(--text); overflow-wrap: anywhere; }
.site-footer__contact a:hover { color: var(--pink); }
.site-footer__disclaimer { grid-column: 1 / -1; font-size: .8rem; color: rgba(248, 250, 252, .5); border-top: 1px solid var(--line); padding-top: 1.6rem; }
.site-footer__copy { grid-column: 1 / -1; font-size: .75rem; letter-spacing: .06em; color: rgba(248, 250, 252, .42); }

/* Přihlášený redaktor má nahoře lištu WordPressu, pevné prvky se posunou pod ni. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* ── OBYČEJNÉ STRÁNKY (zásady, podmínky, podpora) ─────────── */
.doc { max-width: 820px; margin: 0 auto; padding: 9rem var(--gutter) 6rem; }
.doc--center { text-align: center; min-height: 80svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; }
.doc__meta { font-size: .75rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--orange); margin-bottom: .8rem; }
.doc__title { font-family: var(--f-head); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.15; color: var(--ivory); margin-bottom: 2rem; }
.doc__title--list { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 1rem; }
.doc__title a:hover { color: var(--pink); }
.doc__article--list { margin-bottom: 3.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }

.prose { font-size: 1.04rem; }
.prose > * + * { margin-top: 1.15em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--f-head); font-weight: 700; color: var(--ivory); line-height: 1.25; margin-top: 2.2em; }
.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.25rem; }
.prose h4 { font-size: 1.05rem; }
.prose a { color: var(--orange); border-bottom: 1px solid rgba(240, 162, 92, .4); transition: color .3s, border-color .3s; }
.prose a:hover { color: var(--pink); border-color: var(--pink); }
.prose strong { font-weight: 600; color: var(--soft); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--pink); }
.prose blockquote { border-left: 3px solid var(--pink); padding-left: 1.2rem; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.prose img { border-radius: var(--r-l); }

/* Stránkování příspěvků */
.pagination { margin-top: 2rem; font-size: .9rem; }
.pagination .nav-links { display: flex; gap: 1rem; }
.pagination a:hover { color: var(--pink); }

/* =============================================================
   JAZÝČEK: boční panel se sběrem zájemců o testování (inc/leads.php)
   Stejný vzor jako vyjížděcí panel v ZD-foto a SalonFlow: jazýček
   u levého okraje, po klepnutí vysune panel s formulářem.
   ============================================================= */
.side-panel {
  --panel-w: min(320px, 88vw);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100svh;
  /* Nad hlavičkou (100): hlavička je nahoře průhledná, dokud se nescrolluje,
     takže by jinak její text prosvítal přes panel a obojí splynulo v nečitelnou
     směs (viz nahlášené zobrazení na mobilu, panel se otevřel na samém vršku
     stránky, kde ještě není žádné pozadí za hlavičkou). Vlastní karta panelu má
     vlastní neprůhledné pozadí, takže hlavičku pod sebou čistě překryje. */
  z-index: 105;
  display: flex;
  align-items: center;
  transform: translateX(calc(-1 * var(--panel-w)));
  transition: transform .6s var(--ease-out);
}
.side-panel.is-open { transform: translateX(0); }

.side-panel__panel {
  width: var(--panel-w);
  flex-shrink: 0;
  max-height: min(90vh, calc(100vh - 160px));
  overflow-y: auto;
  position: relative;
  padding: 1.7em 1.5em 1.5em;
  border-radius: 0 var(--r-l) var(--r-l) 0;
  background: rgba(30, 41, 59, .88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line);
  border-left: none;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
  /* Stejná technika jako jazýček na SalonFlow (style.css, .side-panel__panel):
     základní velikost písma panelu se odvozuje od jeho skutečné šířky
     (--panel-w), ne pevné rem. Nadpis, text, pole i tlačítko jsou pod tím
     v "em", takže se s panelem škáluje úplně všechno uvnitř, ne jen rámeček.
     Na telefonu je --panel-w užší (viz media query níž), takže vyjde i menší
     základní písmo, stejně jako u SalonFlow (tam mobil taky dostává menší
     --panel-w, a tím i menší font-size, ne větší). */
  font-size: clamp(14px, calc(var(--panel-w, 320px) * 0.047), 18px);
}
.side-panel__close {
  position: absolute;
  top: .4rem; right: .4rem;
  /* 44px: doporučené minimum pro pohodlné klepnutí prstem, 30px bylo na malou plochu. */
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  color: var(--muted);
  transition: border-color .3s, color .3s;
}
.side-panel__close:hover { border-color: var(--line); color: var(--soft); }
.side-panel__close svg { width: 14px; height: 14px; }

.side-panel__heading {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.3;
  color: var(--ivory);
  margin: 0 .2em 1.6em 0;
  padding-right: 2.1em;
}
.side-panel__text {
  font-size: .92em;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 1.3em;
}

.side-panel__form:not([hidden]) { display: flex; flex-direction: column; gap: 1em; }
.side-panel__field label {
  display: block;
  font-size: .74em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4em;
}
.side-panel__field input,
.side-panel__field textarea {
  width: 100%;
  padding: .7em .8em;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(248, 250, 252, .06);
  color: var(--soft);
  font-family: var(--f-body);
  /* Nikdy méně než 16px: pod tuhle hranici Safari na iOS při klepnutí do pole
     celou stránku samo přiblíží (nepříjemné poskočení, viz nahlášeno). Na užším
     bočním panelu by 1em samo o sobě mohlo klesnout pod 16px, proto max(). */
  font-size: max(1em, 16px);
  transition: border-color .3s, background-color .3s;
}
.side-panel__field textarea { resize: vertical; min-height: 4.2em; }
.side-panel__field input::placeholder,
.side-panel__field textarea::placeholder { color: var(--slate); }
.side-panel__field input:focus,
.side-panel__field textarea:focus {
  outline: none;
  border-color: var(--pink);
  background: rgba(248, 250, 252, .1);
}

/* Past na roboty: mimo obrazovku, ne display:none (to by ho vyřadilo i z čteček,
   které formuláře vyplňují automaticky a na to past cílí). Lidé ho nikdy neuvidí. */
.side-panel__hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.side-panel__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .8em 1em;
  border-radius: var(--r-m);
  background: var(--orange);
  color: var(--indigo);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .92em;
  transition: background-color .3s var(--ease-out), opacity .3s;
}
.side-panel__cta:hover { background: #f5b072; }
.side-panel__cta:disabled { opacity: .6; cursor: default; }

.side-panel__status {
  min-height: 1.2em;
  font-size: .82em;
  color: var(--pink);
}

.side-panel__success:not([hidden]) { display: flex; flex-direction: column; align-items: flex-start; gap: .8em; }
.side-panel__success svg { width: 26px; height: 26px; color: var(--pink); }
.side-panel__success p { font-size: .95em; color: var(--text); line-height: 1.6; margin: 0; }

.side-panel__tab-wrap { flex-shrink: 0; align-self: center; }
.side-panel__tab {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* Bez vlastního line-height by se zdědilo 1.7 z body a ve svislém textu je to právě
     TA hodnota, co určuje šířku celého pruhu, ne font-size. Na mobilu to bez tohohle
     zásadně přesahovalo do textu vedle (nahlášeno 2026-09-27, screenshot z iPhonu). */
  line-height: 1;
  padding: .9rem .4rem;
  border-radius: var(--r-l) 0 0 var(--r-l);
  background: rgba(30, 41, 59, .88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line);
  border-right: none;
  color: var(--pink);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: -6px 0 24px -8px rgba(0, 0, 0, .5);
  transition: background-color .3s, color .3s;
}
.side-panel__tab:hover,
.side-panel.is-open .side-panel__tab { background: var(--pink); color: var(--indigo); }

@media (max-width: 600px) {
  /* Stejný tvar jako na PC (boční panel vyjíždí zleva), jen užší --panel-w.
     Díky tomu se dole (.side-panel__panel) přes clamp() přepočítá i menší
     velikost celého obsahu, stejná technika jako jazýček na SalonFlow. */
  .side-panel { --panel-w: min(300px, 84vw); }
  .side-panel__tab { padding: .65rem .28rem; font-size: .64rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .side-panel { transition: none; }
}

/* =============================================================
   ANIMACE
   Jen pro ty, kdo nemají zapnuté „omezit pohyb". Bez toho je vše
   rovnou vidět, žádná část obsahu nezůstane skrytá.
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Znak: prstenec se rozsvítí, děti vyjedou, logotyp se objeví. */
  .am-logo--soon .am-ring, .am-logo--hero .am-ring {
    transform-box: fill-box; transform-origin: 50% 50%;
    animation: am-ring-in 2.1s var(--ease-out) .25s both;
  }
  .am-logo--soon .am-kid, .am-logo--hero .am-kid { animation: am-rise 1.5s var(--ease-out) both; }
  .am-logo--soon .am-kid--l, .am-logo--hero .am-kid--l { animation-delay: 1.0s; }
  .am-logo--soon .am-kid--r, .am-logo--hero .am-kid--r { animation-delay: 1.25s; }
  .am-logo--soon .am-word, .am-logo--hero .am-word { animation: am-rise-word 1.4s var(--ease-out) 1.75s both; }

  /* Dýchání znaku, záře a kruhů v klidu. */
  .am-logo--soon, .am-logo--hero {
    animation: am-float 9s ease-in-out 3.6s infinite;
  }
  .soon__glow--pink   { animation: am-drift-a 28s ease-in-out infinite; }
  .soon__glow--orange { animation: am-drift-b 34s ease-in-out infinite; }
  .soon__ring { animation: am-ring-fade 2.4s ease-out 2.2s both, am-breathe 15s ease-in-out 4.6s infinite; }
  .soon__ring--2 { animation-delay: 2.6s, 6s; }
  .soon__ring--3 { animation-delay: 3s, 7.5s; }
  .soon__status-dot { animation: am-pulse 2.8s ease-in-out infinite; }
  .soon__status-dot--app { animation-delay: 1.4s; }

  /* Stránka ve výstavbě: text po znaku. */
  .soon__eyebrow  { animation: am-fade-up 1.2s var(--ease-out) 2.0s both; }
  .soon__title .w > span { animation: am-word-in 1.3s var(--ease-out) calc(2.15s + var(--i, 0) * .1s) both; }
  .soon__desc     { animation: am-fade-up 1.2s var(--ease-out) 2.9s both; }
  .soon__features li { animation: am-fade-up 1.1s var(--ease-out) calc(3.15s + var(--i, 0) * .12s) both; }
  .soon__status   { animation: am-fade-up 1.2s var(--ease-out) 3.75s both; }
  .soon__contact  { animation: am-fade-up 1.2s var(--ease-out) 3.95s both; }
  .site-header__notice span:first-child::before { animation: am-pulse 2.8s ease-in-out infinite; }
  .soon__foot     { animation: am-fade 2s ease-out 4.2s both; }

  /* Úvodní stránka. */
  .hero__title .w > span { animation: am-word-in 1.3s var(--ease-out) calc(.5s + var(--i, 0) * .1s) both; }
  .hero__desc { animation: am-fade-up 1.2s var(--ease-out) 1.3s both; }
  .hero__cta, .hero__soon { animation: am-fade-up 1.2s var(--ease-out) 1.6s both; }

  /* Jazýček: jemné připomenutí, ať si ho návštěvník všimne, ale nerušilo. */
  .side-panel__tab { animation: am-tab-hint 3.4s var(--ease-out) 4s 3; }

  /* Odkrytí při scrollu (třídu is-in přidává main.js). Bez JS zůstane vše vidět. */
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1.1s ease-out calc(var(--d, 0) * .12s), transform 1.2s var(--ease-out) calc(var(--d, 0) * .12s); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .feature.reveal.is-in { transition: opacity 1.1s ease-out calc(var(--d, 0) * .12s), transform 1.2s var(--ease-out) calc(var(--d, 0) * .12s), border-color .5s, background-color .5s; }
}

@keyframes am-ring-in {
  from { opacity: 0; transform: scale(.93); }
  to   { opacity: 1; transform: none; }
}
@keyframes am-rise {
  from { opacity: 0; transform: translateY(340px); }
  to   { opacity: 1; transform: none; }
}
@keyframes am-rise-word {
  from { opacity: 0; transform: translateY(180px); }
  to   { opacity: 1; transform: none; }
}
@keyframes am-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-word-in {
  /* 112 % nestačilo: háčky a čárky nad velkými písmeny (Č, Ř...) přesahují
     nad těsný line-height (1.12) nadpisu, takže při menším posunu chvíli
     trčely nad horní hranu ořezu. 165 % je bezpečná rezerva i pro ně. */
  from { transform: translateY(165%); }
  to   { transform: none; }
}
@keyframes am-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes am-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, -5vh, 0) scale(1.1); }
}
@keyframes am-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5vw, 6vh, 0) scale(1.08); }
}
@keyframes am-ring-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.035); }
}
@keyframes am-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@keyframes am-tab-hint {
  0%, 100% { box-shadow: -6px 0 24px -8px rgba(0, 0, 0, .5); }
  50%      { box-shadow: -6px 0 26px -6px rgba(231, 137, 163, .45); }
}

/* =============================================================
   RESPONZIVITA
   ============================================================= */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 7rem; gap: 2rem; }
  body:has(.has-notice) .hero { padding-top: 10rem; }
  body:has(.has-notice) .soon { padding-top: 9rem; }
  .hero__mark { order: -1; width: 170px; }
  .hero__desc { margin-left: auto; margin-right: auto; }
  .hero__title { margin-left: auto; margin-right: auto; max-width: 16ch; }
  .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statements__grid { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; }
  .story__shot { display: none; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header { grid-template-columns: 1fr auto 1fr; }
  .site-header__notice { grid-column: 1 / -1; grid-row: 2; justify-self: center; font-size: .68rem; letter-spacing: .14em; }
  .site-header__notice span { display: block; }
  .site-header__notice span:first-child::before,
  .site-header__notice span + span::before { display: none; }

  /* Hamburger uprostřed pruhu (nahlášeno 2026-09-27: na mobilu chyběl jakýkoli způsob,
     jak se dostat na odkazy v sekcích, byly jen display:none). Otevře rozbalený seznam
     pod hlavičkou, jazykový přepínač zůstává vždy vidět vpravo, i zavřený. */
  .site-header__burger { display: flex; }
  .site-header__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column;
    max-height: 0;
    overflow: hidden;
    background: rgba(30, 41, 59, .96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: max-height .4s var(--ease-out), border-color .4s;
  }
  .site-header__links.is-open { max-height: 320px; border-bottom-color: var(--line); }
  .site-header__link { display: block; padding: 1rem var(--gutter); border-top: 1px solid var(--line); text-align: center; }
  .site-header__link:first-child, .site-header__link:last-child { padding: 1rem var(--gutter); }
  .site-header__link + .site-header__link::before { display: none; }
}

@media (max-width: 560px) {
  .site-footer__cols { grid-template-columns: 1fr; }
  .features__grid { grid-template-columns: 1fr; }
  .soon { padding-top: 5rem; }
  /* Na úzkém displeji mřížka 2 × 2 s kosočtvercem před každou položkou, aby se oddělovač nikdy nezalomil na začátek řádku. */
  .soon__features { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: .6rem 2rem; font-size: .9rem; }
  .soon__features li::before,
  .soon__features li + li::before { content: ''; width: 5px; height: 5px; margin: 0 .6rem 0 0; border-radius: 1px; background: var(--pink); transform: rotate(45deg); }
  .soon__features li:nth-child(even)::before { background: var(--orange); }
  .site-header__logo img { height: 34px; }
}

@media (max-height: 640px) and (min-width: 700px) {
  .soon { padding-top: 5rem; padding-bottom: 4rem; }
  .soon__mark { width: 130px; margin-bottom: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .soon__mark, .hero__mark { transform: none; }
  .soon__glow { translate: none; }
  .site-header__links { transition: none; }
}