/**
 * Veřejná landing page (route `/`).
 *
 * Samostatný soubor, ne <style> v blade: stránka má přes tisíc řádků
 * pravidel a v šabloně by se needitovala. Vite se sem nezapojuje —
 * landing je jediná stránka mimo panel a build kvůli ní nedává smysl.
 *
 * Pohyb stojí na scroll-driven animacích (`animation-timeline: view()`).
 * Kde je prohlížeč neumí, doplní totéž [landing.js] přes
 * IntersectionObserver; obsah je čitelný i bez jednoho i druhého.
 */

:root {
    --bordeaux: #7C2331;
    --bordeaux-dark: #611B26;
    --bordeaux-deep: #4A141D;
    --gold: #C79B3E;
    --gold-soft: #F4EAD5;
    --gold-deep: #8F6A1E;
    --paper: #FAF7F2;
    --paper-warm: #F5EFE4;
    --ink: #241B15;
    --muted: #6E625B;
    --faint: #93867C;
    --line: #E9E0D4;
    --line-soft: #F0E9DE;
    --border-btn: #D9CDBD;
    --shadow-card: 0 1px 2px rgba(36, 27, 21, 0.04), 0 8px 24px rgba(36, 27, 21, 0.05);
    --shadow-lift: 0 2px 4px rgba(36, 27, 21, 0.05), 0 18px 48px rgba(36, 27, 21, 0.10);
    --shadow-screen: 0 4px 12px rgba(36, 27, 21, 0.08), 0 32px 80px rgba(36, 27, 21, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: var(--bordeaux); text-decoration: none; }
a:hover { color: var(--bordeaux-dark); }
img { max-width: 100%; height: auto; display: block; }

.serif { font-family: 'Playfair Display', Georgia, serif; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* Drobný orientační popisek verzálkami — pravidlo z docs/BRAND.md. */
.eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: 14px;
}
.section-head p {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 16px;
}

/* --- Tlačítka ---------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 24px;
    height: 48px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--bordeaux); color: #fff; box-shadow: 0 1px 2px rgba(74, 20, 29, 0.3); }
.btn-primary:hover { background: var(--bordeaux-dark); color: #fff; box-shadow: 0 6px 20px rgba(124, 35, 49, 0.28); }
.btn-outline { border-color: var(--border-btn); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--faint); color: var(--ink); box-shadow: var(--shadow-card); }
.btn-gold { background: var(--gold); color: #2B1D06; font-weight: 600; }
.btn-gold:hover { background: #B58A32; color: #2B1D06; box-shadow: 0 6px 20px rgba(199, 155, 62, 0.35); }
.btn-ghost { color: var(--paper); border-color: rgba(250, 247, 242, 0.35); }
.btn-ghost:hover { color: #fff; border-color: rgba(250, 247, 242, 0.7); background: rgba(250, 247, 242, 0.08); }
.btn-lg { height: 54px; padding: 0 30px; font-size: 16px; }

/* --- Hlavička ---------------------------------------------------------- */

header.top {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 247, 242, 0.82);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
header.top.je-odscrollovana {
    border-bottom-color: var(--line);
    box-shadow: 0 4px 20px rgba(36, 27, 21, 0.04);
}
.top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 76px;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: 44px; height: auto; }
.logo-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 21px;
    color: var(--ink);
}
nav.menu { display: flex; gap: 30px; font-size: 15px; }
nav.menu a { color: var(--muted); position: relative; }
nav.menu a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 1.5px;
    background: var(--bordeaux);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
}
nav.menu a:hover { color: var(--ink); }
nav.menu a:hover::after { transform: scaleX(1); }
.top-actions { display: flex; gap: 12px; }

/* --- Hero -------------------------------------------------------------- */

.hero {
    position: relative;
    text-align: center;
    padding: 76px 0 0;
    overflow: hidden;
}

/* Světlo reflektoru: měkký kužel shora, jak ho vrhá bodovka na jeviště. */
.hero::before {
    content: '';
    position: absolute;
    top: -260px; left: 50%;
    width: 1100px; height: 760px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(199, 155, 62, 0.22) 0%, rgba(199, 155, 62, 0.06) 45%, transparent 70%);
    pointer-events: none;
}

/* Řasená opona — svislé pruhy, sotva znatelné, jen aby podklad nebyl plochý. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg,
        rgba(124, 35, 49, 0.022) 0px,
        rgba(124, 35, 49, 0.022) 2px,
        transparent 2px,
        transparent 46px);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 70%);
    pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }

.hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: clamp(40px, 6vw, 74px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 900px;
    margin: 18px auto 0;
}
.hero h1 em {
    font-style: italic;
    color: var(--bordeaux);
}
.hero .lead {
    font-size: 19.5px;
    line-height: 1.62;
    color: var(--muted);
    max-width: 640px;
    margin: 24px auto 0;
}
.hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}
.hero-note {
    margin-top: 18px;
    font-size: 14.5px;
    color: var(--faint);
}

/* Snímek aplikace: leží v perspektivě a scrollem se narovnává k divákovi. */
.hero-shot {
    position: relative;
    perspective: 1800px;
    margin: 56px auto 0;
    max-width: 1180px;
    padding: 0 32px;
}
/* Spodek snímku se rozplyne do podkladu — okno pokračuje za okraj sekce,
   místo aby končilo useknutou hranou. */
.hero-shot::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(250, 247, 242, 0), var(--paper) 88%);
    pointer-events: none;
}
.hero-shot-frame {
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-bottom: none;
    background: #fff;
    box-shadow: var(--shadow-screen);
    transform-origin: 50% 100%;
    animation: hero-narovnat linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 45%;
}
@keyframes hero-narovnat {
    from { transform: rotateX(16deg) scale(0.93); opacity: 0.55; }
    to { transform: rotateX(0deg) scale(1); opacity: 1; }
}
.hero-shot-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: var(--paper-warm);
    border-bottom: 1px solid var(--line-soft);
}
.hero-shot-bar i {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--line);
    display: block;
}
.hero-shot-bar span {
    margin-left: 10px;
    font-size: 12.5px;
    color: var(--faint);
}

/* --- Pás důkazů -------------------------------------------------------- */

.proof { padding: 64px 0 0; }
.proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}
.proof-item { background: var(--paper); padding: 28px 24px; text-align: center; }
.proof-item .value {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    color: var(--bordeaux);
    line-height: 1.1;
}
.proof-item .label {
    font-size: 14px;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.45;
}

/* --- Sezóna (časová osa) ----------------------------------------------- */

.season {
    padding: 110px 0 100px;
    background: linear-gradient(180deg, transparent, var(--paper-warm) 22%, var(--paper-warm) 78%, transparent);
    margin-top: 96px;
}
.season-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}
/* Linka pod čísly kroků: šedá dráha a přes ni bordó, která se plní scrollem. */
.season-track::before,
.season-track::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 8%;
    width: 84%;
    height: 2px;
}
.season-track::before { background: var(--line); }
.season-track::after {
    background: linear-gradient(90deg, var(--bordeaux), var(--gold));
    transform-origin: left;
    transform: scaleX(var(--postup, 0));
    animation: season-linka linear both;
    animation-timeline: view();
    animation-range: entry 60% cover 55%;
}
@keyframes season-linka {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
.season-step { position: relative; text-align: center; }
.season-step .dot {
    width: 44px; height: 44px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line);
    display: grid;
    place-items: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--bordeaux);
    position: relative;
    z-index: 1;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.season-step.je-videt .dot {
    border-color: var(--bordeaux);
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(124, 35, 49, 0.18);
}
.season-step h3 { font-size: 16.5px; font-weight: 600; }
.season-step p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
    margin-top: 7px;
}
.season-note {
    max-width: 660px;
    margin: 64px auto 0;
    text-align: center;
    font-size: 17px;
    line-height: 1.65;
    color: var(--muted);
}
.season-note strong { color: var(--ink); font-weight: 600; }

/* --- Bento mřížka funkcí ----------------------------------------------- */

.features { padding: 110px 0 90px; }
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
    gap: 16px;
}
.tile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--border-btn);
}
.tile-wide { grid-column: span 4; }
.tile-half { grid-column: span 3; }
.tile-third { grid-column: span 2; }
.tile .kicker {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.tile h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 23px;
    font-weight: 600;
    margin: 12px 0 10px;
}
.tile p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.tile ul {
    list-style: none;
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tile li {
    font-size: 13.5px;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 5px 12px;
}
.tile-dark {
    background: linear-gradient(150deg, var(--bordeaux) 0%, var(--bordeaux-deep) 100%);
    border-color: transparent;
    color: var(--paper);
}
.tile-dark .kicker { color: var(--gold); }
.tile-dark p { color: rgba(250, 247, 242, 0.78); }
.tile-dark li {
    background: rgba(250, 247, 242, 0.1);
    border-color: rgba(250, 247, 242, 0.16);
    color: rgba(250, 247, 242, 0.85);
}
.tile-shot {
    margin-top: 22px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
}
.tile-dark .tile-shot { border-color: rgba(250, 247, 242, 0.14); }

/* --- Ukázky se sticky snímkem ------------------------------------------ */

.showcase { padding: 0 0 100px; }
.showcase-row {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: start;
    padding: 52px 0;
}
.showcase-row + .showcase-row { border-top: 1px solid var(--line); }
.showcase-row.obraceny .showcase-text { order: 2; }
.showcase-text { position: sticky; top: 130px; }
.showcase-text h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(26px, 2.8vw, 34px);
    font-weight: 600;
    line-height: 1.2;
    margin: 14px 0 16px;
}
.showcase-text p { font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.showcase-text ul {
    list-style: none;
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.showcase-text li {
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    padding-left: 26px;
    position: relative;
}
.showcase-text li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
}
.showcase-shot {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-lift);
    animation: shot-prijezd linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
}
@keyframes shot-prijezd {
    from { transform: translateY(48px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* --- Propagace --------------------------------------------------------- */

.promo {
    padding: 100px 0;
    background: linear-gradient(165deg, var(--bordeaux-deep) 0%, var(--bordeaux) 55%, #8E2A38 100%);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}
.promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg,
        rgba(0, 0, 0, 0.10) 0px,
        rgba(0, 0, 0, 0.10) 3px,
        transparent 3px,
        transparent 54px);
    pointer-events: none;
}
.promo > * { position: relative; }
.promo .section-head h2 { color: var(--paper); }
.promo .section-head p { color: rgba(250, 247, 242, 0.75); }
.promo .eyebrow { color: var(--gold); }
.promo-motivy {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 8px;
}
.promo-motiv {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(250, 247, 242, 0.16);
    background: rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: motiv-prijezd linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}
.promo-motiv:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.32); }
.promo-motiv img { aspect-ratio: 430 / 580; object-fit: cover; object-position: top; }
.promo-motiv .name {
    padding: 11px 14px;
    font-size: 13.5px;
    color: rgba(250, 247, 242, 0.82);
    border-top: 1px solid rgba(250, 247, 242, 0.12);
}
@keyframes motiv-prijezd {
    from { transform: translateY(36px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.promo-vysledek {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 44px;
}
.promo-vysledek span {
    font-size: 14px;
    color: rgba(250, 247, 242, 0.9);
    border: 1px solid rgba(250, 247, 242, 0.22);
    border-radius: 999px;
    padding: 8px 16px;
}

/* --- Ceník ------------------------------------------------------------- */

.pricing { padding: 110px 0; }
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
}
.plan {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.plan.highlight {
    border-color: var(--bordeaux);
    box-shadow: 0 0 0 1px var(--bordeaux), var(--shadow-card);
    position: relative;
}
.plan-badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--bordeaux);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 5px 14px;
    white-space: nowrap;
}
.plan h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 600; }
.plan .price { font-size: 30px; font-weight: 600; margin: 14px 0 2px; letter-spacing: -0.02em; }
.plan .price small { font-size: 15px; font-weight: 400; color: var(--muted); }
.plan .price-year { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.plan ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--muted);
    flex: 1;
}
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li::before {
    content: '✓';
    color: var(--bordeaux);
    font-weight: 700;
    flex-shrink: 0;
}
/* Co tarif obsahuje, ale aplikace zatím neumí — fajfka by na veřejné
   stránce slibovala hotovou funkci. */
.plan li.soon { color: var(--faint); }
.plan li.soon::before { content: '◷'; color: var(--faint); font-weight: 400; }
.plan .btn { margin-top: 26px; width: 100%; }

/* --- Časté otázky ------------------------------------------------------ */

.faq { padding: 0 0 110px; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
    border-bottom: 1px solid var(--line);
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 4px;
    font-size: 17.5px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--bordeaux); }
.faq-item summary::after {
    content: '';
    flex-shrink: 0;
    width: 11px; height: 11px;
    border-right: 2px solid var(--faint);
    border-bottom: 2px solid var(--faint);
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq-item .answer {
    padding: 0 4px 26px;
    font-size: 16px;
    line-height: 1.68;
    color: var(--muted);
    max-width: 680px;
}
.faq-item[open] .answer { animation: faq-rozbalit 0.28s ease both; }
@keyframes faq-rozbalit {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Závěrečné CTA a patička ------------------------------------------- */

.cta-band {
    margin: 0 32px 88px;
    background: linear-gradient(150deg, var(--bordeaux) 0%, var(--bordeaux-deep) 100%);
    border-radius: 24px;
    text-align: center;
    padding: 76px 48px;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute;
    top: -140px; left: 50%;
    width: 700px; height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(199, 155, 62, 0.34) 0%, transparent 68%);
    pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 42px);
    color: #fff;
    line-height: 1.15;
}
.cta-band p { font-size: 17px; color: #E9CDD3; margin: 16px auto 0; max-width: 520px; }
.cta-band .btn { margin-top: 30px; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

footer.bottom {
    border-top: 1px solid var(--line);
    padding: 34px 0 44px;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 14.5px;
    color: var(--muted);
}
.footer-inner .links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-inner a { color: var(--muted); }
.footer-inner a:hover { color: var(--ink); }

/* --- Nabíhání sekcí ---------------------------------------------------- */

/* Základní pohyb: obsah přijede zdola, jak se dostane do záběru. */
.nabih {
    animation: nabih-vzhuru linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
}
@keyframes nabih-vzhuru {
    from { opacity: 0; transform: translateY(34px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Postupné nabíhání sourozenců — dlaždice a kroky osy jeden po druhém. */
.nabih-rada > * {
    animation: nabih-vzhuru linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
}

/*
 * Fallback pro prohlížeče bez scroll-driven animací (dnes Safari a Firefox).
 * Tam animace nahradí [landing.js] třídou `.je-videt`; než ji přidá, drží
 * prvky výchozí skrytý stav. Bez JavaScriptu (viz `<noscript>` v šabloně)
 * se skrývání vypne a obsah je vidět rovnou — nikdy nesmí zůstat prázdná
 * stránka jen proto, že nedoběhl skript.
 */
@supports not (animation-timeline: view()) {
    .nabih,
    .nabih-rada > * {
        opacity: 0;
        transform: translateY(34px);
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        animation: none;
    }
    .nabih.je-videt,
    .nabih-rada > .je-videt {
        opacity: 1;
        transform: translateY(0);
    }
    .hero-shot-frame {
        animation: none;
        transform: rotateX(9deg) scale(0.97);
        transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .hero-shot-frame.je-videt { transform: rotateX(0) scale(1); }
    .season-track::after { animation: none; transform: scaleX(var(--postup, 0)); transition: transform 0.9s ease; }
    .showcase-shot, .promo-motiv { animation: none; }
}

/* --- Responzivita ------------------------------------------------------ */

@media (max-width: 1080px) {
    .season-track { grid-template-columns: repeat(3, 1fr); gap: 36px 20px; }
    .season-track::before, .season-track::after { display: none; }
    .promo-motivy { grid-template-columns: repeat(2, 1fr); }
    .tile-wide, .tile-half, .tile-third { grid-column: span 3; }
}

@media (max-width: 900px) {
    .wrap { padding: 0 24px; }
    nav.menu { display: none; }
    .showcase-row, .showcase-row.obraceny .showcase-text { grid-template-columns: 1fr; order: 0; gap: 32px; }
    .showcase-text { position: static; }
    .proof-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-band { margin-left: 24px; margin-right: 24px; padding: 56px 28px; }
    .hero { padding-top: 56px; }
    .hero-shot { padding: 0 24px; }
}

@media (max-width: 640px) {
    .season-track { grid-template-columns: 1fr; }
    .promo-motivy { grid-template-columns: repeat(2, 1fr); }
    .bento { grid-template-columns: 1fr; }
    .tile-wide, .tile-half, .tile-third { grid-column: span 1; }
    .top-actions .btn-outline { display: none; }
    .tile { padding: 24px; }

    /* Značka se vedle tlačítka nesmí lámat na dva řádky. */
    .logo-mark { width: 36px; }
    .logo-name { font-size: 18px; white-space: nowrap; }
    .top-inner { height: 66px; }
    .top-actions .btn { height: 42px; padding: 0 16px; font-size: 14px; }
    .hero-cta .btn, .cta-actions .btn { width: 100%; }
}

/* --- Klid pro toho, kdo si ho vyžádal ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .nabih, .nabih-rada > *, .hero-shot-frame, .showcase-shot, .promo-motiv {
        opacity: 1 !important;
        transform: none !important;
    }
    .season-track::after { transform: scaleX(1); }
}