/**
 * Riselify – homepage UI (scoped pod .home-page)
 *
 * Přepsáno 2026-08-06 při UI/UX auditu (dokumenty/AUDIT-UIUX-HOMEPAGE-20260806.md):
 *  – odstraněno ~700 řádků stylů pro sekce, které v main.phtml neexistují,
 *  – opraven fokus na polích a sliderech kalkulačky (dřív outline:none = WCAG 2.4.7 fail),
 *  – kontrasty zvednuty na APCA Lc 75+ pro text, žádný text pod 12 px,
 *  – ikony kreslí self-hostovaný SVG sprite (.rl-ic), ne Font Awesome.
 */

.home-page {
    --home-max: 1140px;
    --home-section-pad: clamp(56px, 8vw, 96px);
    --home-dark: #0F172A;
    --home-surface: #F8FAFC;
    --home-on-dark: #E2E8F0;
    --home-on-dark-muted: #CBD5E1;
    --home-green: #15803D;
    --home-ease: cubic-bezier(.2, 0, .2, 1);
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════
   Sdílené komponenty
   ═══════════════════════════════════════════════════════════ */

.home-page .hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 16px 32px;
    border-radius: 16px;
    font-family: var(--rl-font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    /* `justify-content` zarovná na střed celý textový blok, ale jednotlivé řádky uvnitř
       se pořád řídí `text-align` — bez tohohle byl víceřádkový popisek na kartách ceníku
       zarovnaný doleva. `balance` k tomu vyrovná délky řádků, ať nezbyde osamělé slovo. */
    text-align: center;
    text-wrap: balance;
    transition: background-color .15s var(--home-ease), border-color .15s var(--home-ease),
                color .15s var(--home-ease), box-shadow .15s var(--home-ease);
}

.home-page .hp-btn[disabled],
.home-page .hp-btn:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* Primary CTA */
.home-page .hp-btn--primary {
    border: 0;
    background: var(--rl-primary);
    color: #fff;
    box-shadow: 0 12px 40px -12px rgba(29, 78, 216, 0.15);
}
.home-page .hp-btn--primary:hover {
    background: var(--rl-primary-hover);
    color: #fff;
}
.home-page .hp-btn--primary:active {
    background: #1E3A8A;
}

/* Secondary CTA */
.home-page .hp-btn--secondary {
    border: 2px solid var(--rl-border);
    background: #fff;
    color: var(--home-dark);
}
.home-page .hp-btn--secondary:hover {
    border-color: var(--rl-primary);
    background: var(--home-surface);
    color: var(--rl-primary);
}
.home-page .hp-btn--secondary:active {
    background: #EFF6FF;
}

/* CTA na tmavém pozadí */
.home-page .hp-btn--white {
    background: #fff;
    color: var(--home-dark);
    border: 0;
}
.home-page .hp-btn--white:hover {
    background: #F1F5F9;
    color: var(--home-dark);
}

/* Vstupní pole. POZOR: nikdy sem nedávat outline:none – globální :focus-visible
   v riselify-unified.css je jediné, co u polí kreslí viditelný fokus. */
.home-page .hp-input {
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--rl-border-strong);
    background: #fff;
    color: var(--home-dark);
    font-family: var(--rl-font-body);
    font-size: 16px;
    transition: border-color .15s var(--home-ease);
}
.home-page .hp-input:hover {
    border-color: #94A3B8;
}
.home-page .hp-input:focus {
    border-width: 2px;
    border-color: var(--rl-primary);
}
.home-page .hp-input[aria-invalid="true"] {
    border-color: #DC2626;
}

/* Kicker / štítek nad nadpisem */
.home-page .hp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    font-family: var(--rl-font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}
/* Kicker na tmavém pozadí – světlejší zelená kvůli kontrastu (APCA Lc 67 → 85). */
.home-page .hp-kicker--dark {
    background: rgba(134, 239, 172, 0.14);
    color: #86EFAC;
}

/* Ikony ze sprite – v kontextu homepage dědí velikost textu. */
.home-page .rl-ic {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

/* ─── Sekce a rytmus ──────────────────────────────────────── */

.home-page .home-section {
    padding: var(--home-section-pad) 0;
}

.home-page .home-container {
    max-width: var(--home-max);
    margin: 0 auto;
    padding: 0 20px;
}

.home-page .section-title {
    font-size: clamp(1.65rem, 3.2vw, 2.15rem);
    line-height: 1.2;
    margin-bottom: 12px;
}

.home-page .home-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--rl-text-secondary);
    max-width: 640px;
    margin: 0 auto 32px;
}

.home-page .home-lead--center {
    text-align: center;
}

.home-page .home-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.home-page .home-section-header .home-lead {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   SEKCE 1: Hero
   ═══════════════════════════════════════════════════════════ */

.home-page .hero {
    position: relative;
    padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 80px);
    max-width: none;
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, rgba(29, 78, 216, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
        var(--rl-bg);
}

.home-page .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(29, 78, 216, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    opacity: 0.6;
}

.home-page .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    max-width: var(--home-max);
    margin: 0 auto;
    padding: 0 20px;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.home-page .hero-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
}

.home-page .hero-text .hp-kicker {
    align-self: flex-start;
    margin-bottom: 20px;
    align-items: flex-start;
    text-align: left;
}

.home-page .hero-text h1 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}

.home-page .hero-text p {
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 32rem;
}

.home-page .cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

/* REG-UX-02 / REG-UX-04: vstup do registrace drží odstup od hlavních tlačítek
   a díky order zůstává pod nimi i v mobilním přeskupení hero sekce. */
.home-page .hero-register {
    margin: -8px 0 20px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--rl-text-secondary);
}

.home-page .hero-register a {
    /* REG-UX-03 / REG-UX-04: obrys byl nevýrazný; plná modrá akce a 48 px
       dávají registraci požadovanou důležitost i pohodlný cíl pro klepnutí. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 11px 24px;
    border: 1px solid #2454d6;
    border-radius: 12px;
    background: #2454d6;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.home-page .hero-register a:hover {
    background: #183fa8;
    color: #fff;
    border-color: #183fa8;
}

.home-page .hero-register a:focus-visible {
    outline: 2px solid #2454d6;
    outline-offset: 4px;
}

body.rl-showcase .home-page .hero-register {
    order: 3;
}

@media (max-width: 600px) {
    .home-page .hero-register,
    .home-page .hero-register a {
        width: 100%;
    }
}

.home-page .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-page .hero-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    /* APCA Lc 89 (dřív #64748B = Lc 68) */
    color: var(--rl-text-secondary);
    font-weight: 500;
}

.home-page .hero-trust .rl-ic {
    color: var(--home-green);
    width: 1.05em;
    height: 1.05em;
}

/* Telefon s náhledem e-shopu */
.home-page .hero-phone {
    display: flex;
    justify-content: flex-end;
}

.home-page .phone-frame {
    position: relative;
    width: 100%;
    max-width: 280px;
    padding: 12px;
    border-radius: 36px;
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.home-page .phone-frame::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, rgba(29, 78, 216, 0.18) 0%, transparent 65%);
    z-index: -1;
    pointer-events: none;
}

/* HTML náhled e-shopu – modrá rodina značky (dřív fialový gradient = cizí produkt) */
.home-page .hp-shop {
    width: 100%;
    aspect-ratio: 250 / 560;
    border-radius: 24px;
    overflow: hidden;
    background: #F5F7FE;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    color: var(--home-dark);
    line-height: 1.3;
}
.home-page .hp-shop > * { flex-shrink: 0; }
.home-page .hp-shop .rl-ic { line-height: 1; }
.home-page .hp-shop__hd {
    background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
    color: #fff; padding: 13px 15px 14px; border-radius: 0 0 24px 24px;
}
.home-page .hp-shop__hdtop { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.home-page .hp-shop__brand { font-weight: 800; font-size: 15px; letter-spacing: 0.2px; }
.home-page .hp-shop__cart { position: relative; font-size: 15px; }
.home-page .hp-shop__dot { position: absolute; top: -3px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; border: 1.5px solid #fff; }
.home-page .hp-shop__hi { margin: 9px 0 9px; font-size: 14px; font-weight: 800; }
.home-page .hp-shop__field {
    display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 13px;
    padding: 10px 12px; color: #64748B; font-size: 11px; box-shadow: 0 8px 18px rgba(29, 78, 216, 0.18);
}
.home-page .hp-shop__chips { display: flex; gap: 7px; padding: 10px 13px 3px; overflow: hidden; }
.home-page .hp-shop__chip { font-size: 10.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #EAEEF7; color: #475569; white-space: nowrap; }
.home-page .hp-shop__chip.is-on { background: linear-gradient(135deg, #1D4ED8, #3B82F6); color: #fff; box-shadow: 0 6px 13px rgba(29, 78, 216, 0.30); }
.home-page .hp-shop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 9px 13px 0; }
.home-page .hp-shop__card { position: relative; background: #fff; border-radius: 17px; padding: 7px; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); }
.home-page .hp-shop__img { position: relative; border-radius: 12px; aspect-ratio: 1 / 0.8; overflow: hidden; background: #EEF2FB; }
.home-page .hp-shop__prod { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.home-page .hp-shop__like {
    position: absolute; top: 6px; right: 6px; width: 21px; height: 21px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.92); color: #CBD5E1; display: grid; place-content: center; font-size: 9px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}
.home-page .hp-shop__like.is-on { color: #EF4444; }
.home-page .hp-shop__meta { padding: 6px 3px 1px; }
.home-page .hp-shop__name { font-weight: 700; font-size: 11px; display: block; }
.home-page .hp-shop__row { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }
.home-page .hp-shop__price { font-weight: 800; font-size: 12px; color: #1D4ED8; }
.home-page .hp-shop__add {
    width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, #1D4ED8, #3B82F6);
    color: #fff; display: grid; place-content: center; font-size: 10px; box-shadow: 0 5px 11px rgba(29, 78, 216, 0.32);
}
.home-page .hp-shop__promo {
    margin: 10px 13px 8px; background: linear-gradient(135deg, #1D4ED8, #3B82F6); border-radius: 18px;
    padding: 9px 13px; display: flex; align-items: center; gap: 10px; color: #fff;
    box-shadow: 0 12px 24px rgba(29, 78, 216, 0.28); position: relative; overflow: hidden;
}
.home-page .hp-shop__promo::after { content: ''; position: absolute; right: -28px; top: -28px; width: 82px; height: 82px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.home-page .hp-shop__promo-img { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); overflow: hidden; flex: 0 0 auto; position: relative; z-index: 1; }
.home-page .hp-shop__promo-txt { flex: 1; min-width: 0; z-index: 1; }
.home-page .hp-shop__promo-txt b { font-size: 11.5px; font-weight: 800; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-page .hp-shop__promo-txt small { font-size: 9.5px; opacity: 0.9; }
.home-page .hp-shop__promo-btn { background: #fff; color: #1D4ED8; font-weight: 800; font-size: 10px; padding: 6px 11px; border-radius: 999px; z-index: 1; white-space: nowrap; position: relative; }
/* Spodní menu aplikace – margin-top: auto ho drží u dolní hrany displeje i při jiné výšce obsahu. */
.home-page .hp-shop__tabs {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-top: 1px solid #E6EAF4;
    padding: 6px 4px 7px;
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06);
}
.home-page .hp-shop__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #94A3B8;
    font-size: 12px;
}
.home-page .hp-shop__tab small { font-size: 8px; font-weight: 700; letter-spacing: 0.01em; }
.home-page .hp-shop__tab.is-on { color: #1D4ED8; }

/* ═══════════════════════════════════════════════════════════
   SEKCE 2: Loga integrací
   ═══════════════════════════════════════════════════════════ */

.home-page .hp-logos {
    padding: clamp(32px, 5vw, 48px) 0;
    background: #FAFAFA;
    border-top: 1px solid var(--rl-border);
    border-bottom: 1px solid var(--rl-border);
}
/* Je to <h2> (sekce bez nadpisu se špatně prochází odečítačem), vypadá ale jako popisek. */
.home-page .hp-logos__label {
    text-align: center;
    margin: 0 0 24px;
    font-family: var(--rl-font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* APCA Lc 83 (dřív #64748B = Lc 70) */
    color: #475569;
}
.home-page .hp-logos__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 5vw, 56px);
}
.home-page .hp-logos__list li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rl-font-head);
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    font-weight: 700;
    color: #475569;
    letter-spacing: -0.01em;
}
.home-page .hp-logos__mark {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
}
/* Značka WooCommerce vyplňuje jen prostřední pruh svého čtvercového viewBoxu – ve stejném
   rámečku jako ostatní vypadá o třetinu menší. Záporné okraje drží výšku řádku na 28px. */
.home-page .hp-logos__mark--woo {
    width: 44px;
    height: 44px;
    margin: -8px 0;
}

/* ═══════════════════════════════════════════════════════════
   SEKCE 3: Agitace problému (tmavá)
   ═══════════════════════════════════════════════════════════ */

.home-page .hp-problem {
    padding: clamp(60px, 8vw, 100px) 0;
    background: var(--home-dark);
    color: var(--home-on-dark);
}
.home-page .hp-problem .section-title {
    color: #fff;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.home-page .hp-problem .home-lead {
    color: var(--home-on-dark);
    max-width: 760px;
}
.home-page .hp-problem .home-section-header {
    margin-bottom: 40px;
}
.home-page .hp-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.home-page .hp-compare-card {
    padding: 28px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.home-page .hp-compare-card--gain {
    border-color: rgba(134, 239, 172, 0.35);
}
.home-page .hp-compare-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.25rem;
    border-radius: 12px;
}
.home-page .hp-compare-card--loss .hp-compare-card__icon {
    color: #FCA5A5;
    background: rgba(239, 68, 68, 0.16);
}
.home-page .hp-compare-card--gain .hp-compare-card__icon {
    color: #86EFAC;
    background: rgba(134, 239, 172, 0.16);
}
.home-page .hp-compare-card h3 {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.home-page .hp-compare-card p {
    /* plná barva místo 82% alfy – APCA Lc 68 → 91 */
    color: var(--home-on-dark);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   SEKCE 4: Kalkulačka
   ═══════════════════════════════════════════════════════════ */

.home-page .hp-calc__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
    border: 1px solid var(--rl-border);
    border-radius: 32px;
    background: var(--rl-bg-elevated);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: var(--rl-shadow-md);
}

.home-page .hp-calc__field {
    margin-bottom: 28px;
}
.home-page .hp-calc__field > label {
    display: block;
    font-weight: 600;
    color: var(--rl-text);
    margin-bottom: 10px;
}
.home-page .hp-calc__valrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.home-page .hp-calc__num {
    width: 160px;
    font-weight: 700;
}
.home-page .hp-calc__unit {
    /* APCA Lc 90 (dřív #64748B = Lc 73) */
    color: var(--rl-text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}

/* Slider – thumb 24×24 kvůli WCAG 2.5.8 (dřív 22 px) a viditelný fokus. */
.home-page .hp-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 24px;
    background: transparent;
    cursor: pointer;
}
.home-page .hp-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: #E2E8F0;
}
.home-page .hp-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: #E2E8F0;
}
.home-page .hp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--rl-primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}
.home-page .hp-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rl-primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}
.home-page .hp-calc__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--rl-text-secondary);
}

/* Metodika jako rozbalovací blok – ať nezabírá pozornost, ale je po ruce. */
.home-page .hp-calc__method {
    margin: 8px 0 24px;
    padding: 0;
    background: var(--home-surface);
    border: 1px solid var(--rl-border);
    border-radius: 12px;
}
.home-page .hp-calc__method > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--rl-primary);
}
.home-page .hp-calc__method > summary::-webkit-details-marker { display: none; }
.home-page .hp-calc__method > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s var(--home-ease);
}
.home-page .hp-calc__method[open] > summary::after {
    transform: rotate(225deg) translateY(-2px);
}
.home-page .hp-calc__method p {
    margin: 0;
    padding: 0 16px 14px;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--rl-text-secondary);
}

/* Formulář sběru leadu */
.home-page .hp-calc__lead {
    padding: 16px 18px;
    background: var(--home-surface);
    border: 1px solid var(--rl-border);
    border-radius: 14px;
}
.home-page .hp-calc__lead-label {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--rl-text);
    margin-bottom: 8px;
}
.home-page .hp-calc__lead-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.home-page .hp-calc__lead-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.home-page .hp-calc__lead-field > span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rl-text-secondary);
}
.home-page .hp-calc__lead-input {
    width: 100%;
    min-width: 0;
}
.home-page .hp-calc__lead-btn {
    margin-top: 14px;
    min-height: 48px;
    padding: 12px 20px;
    white-space: nowrap;
}
/* Souhlas se uděluje odesláním, věta proto stojí u tlačítka místo zaškrtávátka. */
.home-page .hp-calc__lead-note {
    margin: 10px 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--rl-text-secondary);
}
.home-page .hp-calc__lead-note a {
    color: var(--rl-primary);
    text-decoration: underline;
}
/* Bez odkrytého propočtu je pravý sloupec prázdný – mřížka jede na jeden sloupec. */
.home-page .hp-calc__grid--solo {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.home-page .hp-calc__lead-msg {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    min-height: 1em;
}
.home-page .hp-calc__lead-msg.is-ok { color: #15803D; }
.home-page .hp-calc__lead-msg.is-error { color: #DC2626; }

/* Výsledkový panel */
.home-page .hp-calc__panel {
    background: var(--home-dark);
    border-radius: 24px;
    padding: clamp(24px, 3vw, 32px);
    color: var(--home-on-dark);
}
.home-page .hp-calc__panel h3 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 20px;
}
.home-page .hp-calc__stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.home-page .hp-calc__stat-value {
    font-family: var(--rl-font-head);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
}
.home-page .hp-calc__box {
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.home-page .hp-calc__box--loss {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.home-page .hp-calc__box--gain {
    background: rgba(134, 239, 172, 0.12);
    border: 1px solid rgba(134, 239, 172, 0.35);
}
.home-page .hp-calc__box-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--home-on-dark);
    margin-bottom: 4px;
}
.home-page .hp-calc__box-value {
    display: block;
    font-family: var(--rl-font-head);
    font-size: 1.75rem;
    font-weight: 800;
}
.home-page .hp-calc__box--loss .hp-calc__box-value {
    color: #FCA5A5;
}
.home-page .hp-calc__box--gain .hp-calc__box-value {
    color: #86EFAC;
}
.home-page .hp-calc__box-note {
    display: block;
    /* 12 px a APCA Lc 79 (dřív 12 px při Lc 44) */
    font-size: 0.75rem;
    color: var(--home-on-dark-muted);
    margin-top: 4px;
    line-height: 1.45;
}
.home-page .hp-calc__roi {
    margin: 18px 0 10px;
}
.home-page .hp-calc__roi-head,
.home-page .hp-calc__roi-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr;
    gap: 10px;
    align-items: center;
}
.home-page .hp-calc__roi-head {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--home-on-dark-muted);
    padding: 0 0 8px;
}
.home-page .hp-calc__roi-head span:not(:first-child),
.home-page .hp-calc__roi-cost,
.home-page .hp-calc__roi-val {
    text-align: right;
    white-space: nowrap;
}
.home-page .hp-calc__roi-row {
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.home-page .hp-calc__roi-row--reco {
    background: rgba(29, 78, 216, 0.18);
    border-radius: 10px;
    padding: 10px 8px;
    margin: 0 -8px;
}
.home-page .hp-calc__roi-name {
    font-weight: 600;
    color: #fff;
    font-size: 0.875rem;
}
.home-page .hp-calc__reco {
    display: inline-block;
    font-style: normal;
    font-size: 0.75rem;
    background: #fff;
    color: var(--rl-primary);
    padding: 1px 7px;
    border-radius: 6px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 700;
}
.home-page .hp-calc__roi-cost {
    font-size: 0.875rem;
    color: var(--home-on-dark);
}
.home-page .hp-calc__roi-val {
    font-weight: 700;
    color: #86EFAC;
    font-size: 0.9375rem;
}
.home-page .hp-calc__roi-val.is-negative {
    color: #FCA5A5;
}
.home-page .hp-calc__roi-note {
    margin: 0 0 16px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--home-on-dark-muted);
}
.home-page .hp-calc__cta {
    width: 100%;
    margin-top: 4px;
}
.home-page .hp-calc__fine {
    text-align: center;
    font-size: 0.75rem;
    color: var(--home-on-dark-muted);
    margin: 10px 0 0;
}

/* ═══════════════════════════════════════════════════════════
   SEKCE 4b: Ceny
   ═══════════════════════════════════════════════════════════ */

.home-page .hp-pricing {
    background: var(--rl-bg);
}
.home-page .hp-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.home-page .hp-price-card {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    background: var(--rl-bg-elevated);
    box-shadow: var(--rl-shadow-sm);
}
.home-page .hp-price-card--highlight {
    border-color: var(--rl-primary);
    box-shadow: 0 12px 40px -16px rgba(29, 78, 216, 0.35);
}
.home-page .hp-price-card__name {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rl-primary);
    margin: 0 0 12px;
}
.home-page .hp-price-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 4px;
}
.home-page .hp-price-card__price strong {
    font-family: var(--rl-font-head);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--rl-text);
}
.home-page .hp-price-card__price span {
    font-size: 0.875rem;
    color: var(--rl-text-secondary);
}
.home-page .hp-price-card__fee {
    margin: 0 0 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--home-green);
}
.home-page .hp-price-card__list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}
.home-page .hp-price-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--rl-text-secondary);
}
.home-page .hp-price-card__list .rl-ic {
    color: var(--home-green);
    margin-top: 0.2em;
}
.home-page .hp-price-card .hp-btn {
    width: 100%;
}
.home-page .hp-pricing__note {
    margin: 24px 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--rl-text-secondary);
}
.home-page .hp-pricing__note a {
    color: var(--rl-primary);
}

/* ═══════════════════════════════════════════════════════════
   SEKCE 5: Klíčové funkce
   ═══════════════════════════════════════════════════════════ */

.home-page .features--tools {
    background: linear-gradient(180deg, var(--rl-primary-soft) 0%, var(--rl-bg) 100%);
}
/* Zděděné `.features { margin-top: 50px }` z původního public.css se sem přeneslo přes
   shodu názvu třídy a k odsazení sekce přidávalo dalších 50 px prázdna. Rytmus tady
   drží `--home-section-pad`, nic dalšího. */
.home-page .features {
    margin-top: 0;
}

/* Karet byly tři a mřížka měla natvrdo tři sloupce; se čtvrtou (predikce,
   2026-08-19) by čtvrtá zůstala sama na druhém řádku. `auto-fit` s minimem
   250 px dá na desktopu (1140 px) čtyři sloupce po 267 px, na užších oknech
   sám spadne na dva a pod 900 px platí jednosloupcové pravidlo níž. Díky tomu
   pátá karta v budoucnu nevyžádá další zásah do CSS. */
.home-page .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    max-width: var(--home-max);
    margin: 0 auto;
    padding: 0;
}

.home-page .feature-card {
    /* `public.css:690` dává kartě pevných 280 px (dědictví po původní flex verzi
       mřížky). V gridu to znamená, že karta neposlouchá šířku svého sloupce —
       při čtyřech sloupcích po 257 px každá o 23 px přetekla do mezery. */
    width: auto;
    background: var(--rl-bg-elevated);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    padding: 28px 24px;
    box-shadow: var(--rl-shadow-sm);
    color: var(--rl-text);
    transition: transform 0.2s var(--home-ease), box-shadow 0.2s var(--home-ease);
}

.home-page .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rl-shadow-md);
}

.home-page .feature-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.25rem;
    color: var(--rl-primary);
    background: var(--rl-primary-soft);
    border-radius: var(--rl-radius-md);
}

.home-page .feature-card__icon--purple { color: #6D28D9; background: #EDE9FE; }
.home-page .feature-card__icon--red { color: #DC2626; background: #FEE2E2; }
.home-page .feature-card__icon--green { color: #15803D; background: #DCFCE7; }

.home-page .feature-card h3 {
    color: var(--rl-text);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.home-page .feature-card p {
    color: var(--rl-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   SEKCE 6: Reference
   ═══════════════════════════════════════════════════════════ */

.home-page .hp-quote {
    padding: clamp(56px, 8vw, 96px) 0;
    background: var(--home-dark);
    color: #F8FAFC;
}
.home-page .hp-quote__heading {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--home-on-dark-muted);
    margin: 0 0 24px;
}
.home-page .hp-quote__figure {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.home-page .hp-quote__mark {
    display: block;
    font-family: var(--rl-font-head);
    font-size: 72px;
    line-height: 0.6;
    color: #60A5FA;
    margin-bottom: 8px;
}
.home-page .hp-quote__text {
    font-family: var(--rl-font-head);
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 600;
    line-height: 1.5;
    color: #F8FAFC;
    margin: 0 0 24px;
}
.home-page .hp-quote__cite {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.home-page .hp-quote__name {
    font-weight: 700;
    color: #fff;
}
.home-page .hp-quote__role {
    font-size: 0.9375rem;
    /* APCA Lc 79 (dřív 70% alfa = Lc 54) */
    color: var(--home-on-dark-muted);
}

/* ═══════════════════════════════════════════════════════════
   SEKCE 7: Ukázka administrace
   ═══════════════════════════════════════════════════════════ */

.home-page .hp-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 28px;
}
.home-page .hp-tab {
    min-height: 48px;
    padding: 0 24px;
    border-radius: 12px;
    border: 1px solid var(--rl-border);
    background: #fff;
    color: var(--rl-text);
    font-family: var(--rl-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s var(--home-ease), border-color .15s var(--home-ease), color .15s var(--home-ease);
}
.home-page .hp-tab:hover {
    border-color: var(--rl-primary);
    color: var(--rl-primary);
}
.home-page .hp-tab.is-active {
    background: var(--rl-primary);
    border-color: var(--rl-primary);
    color: #fff;
}
.home-page .hp-tabpanel {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 40px);
    align-items: center;
}
.home-page .hp-tabpanel.is-active {
    display: grid;
    animation: hp-fade .25s var(--home-ease);
}
/* Animuje se jen posun, ne průhlednost. Když prohlížeč animaci mimo viewport
   uspí (a to dělá), zůstal by panel s opacity: 0 — tedy neviditelný obsah. */
@keyframes hp-fade {
    from { transform: translateY(6px); }
    to { transform: none; }
}
.home-page .hp-tabpanel__text h3 {
    font-size: 1.375rem;
    margin-bottom: 12px;
}
.home-page .hp-tabpanel__text p {
    color: var(--rl-text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}
.home-page .hp-tab-form {
    border: 1px solid var(--rl-border);
    border-radius: 16px;
    padding: 20px;
    background: var(--home-surface);
}
.home-page .hp-tab-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* APCA Lc 83 (dřív #64748B = Lc 70) */
    color: #475569;
    margin: 0 0 6px;
}
.home-page .hp-tab-form label:not(:first-child) {
    margin-top: 16px;
}
.home-page .hp-tab-form__field {
    background: #fff;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.9375rem;
    color: var(--rl-text);
    line-height: 1.5;
}

/* HTML mockupy obrazovek administrace – nejmenší text 12 px (dřív 9 px). */
.home-page .hp-mock {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rl-border);
    box-shadow: var(--rl-shadow-md);
    font-size: 12px;
    line-height: 1.35;
    color: var(--home-dark);
}
.home-page .hp-mock__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(180deg, #EEF2FF 0%, #fff 100%);
    border-bottom: 1px solid var(--rl-border);
}
.home-page .hp-mock__logo { font-weight: 800; letter-spacing: 0.04em; font-size: 12px; color: var(--home-dark); }
.home-page .hp-mock__ham { color: #334155; }
/* Pevná výška 360 px uřízla obsah, jakmile se text uvnitř zalomil na víc řádků:
   na mobilu (mockup široký 240 px) zůstala z karty notifikace vidět půlka pole
   „Název" a pod ní prázdné místo až po konec rámečku, tlačítko „+ Vytvořit novou
   notifikaci" nebylo vidět vůbec (tester 2026-08-16). Výšku teď určuje obsah,
   360 px je jen spodní hranice, aby mockup nezdrobněl. */
.home-page .hp-mock__screen {
    min-height: 360px;
    padding: 12px;
    background: var(--home-surface);
}
.home-page .hp-mock__screen--dark { background: #1E293B; color: var(--home-on-dark); padding: 6px; }
.home-page .hp-mock__h { text-align: center; font-weight: 700; font-size: 15px; margin: 4px 0 12px; color: #334155; }
.home-page .hp-mock__stat {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid var(--rl-border); border-radius: 10px;
    padding: 8px 10px; margin-bottom: 8px; color: #475569;
}
.home-page .hp-mock__badge { background: #DCFCE7; color: #15803D; font-weight: 700; padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.home-page .hp-mock__card { background: #fff; border: 1px solid var(--rl-border); border-radius: 12px; padding: 10px; }
.home-page .hp-mock__meta { color: #475569; font-weight: 700; font-size: 12px; letter-spacing: 0.02em; margin-bottom: 6px; }
.home-page .hp-mock__cap { color: #334155; font-weight: 700; font-size: 12px; margin: 8px 0 4px; }
.home-page .hp-mock__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.home-page .hp-mock__pills span { border: 1px solid var(--rl-border); border-radius: 999px; padding: 3px 8px; color: #475569; background: #fff; }
.home-page .hp-mock__pills .is-on { border-color: var(--rl-primary); color: var(--rl-primary); font-weight: 700; }
.home-page .hp-mock__btns { display: flex; gap: 6px; margin: 8px 0; }
.home-page .hp-mock__b { flex: 1; text-align: center; border-radius: 8px; padding: 6px 4px; color: #fff; font-weight: 700; font-size: 12px; }
.home-page .hp-mock__b--blue { background: var(--rl-primary); }
.home-page .hp-mock__b--red { background: #DC2626; flex: 0 0 auto; padding: 6px 12px; }
.home-page .hp-mock__inp { background: #fff; border: 1px solid var(--rl-border); border-radius: 6px; padding: 6px 8px; color: #334155; }
.home-page .hp-mock__wide { margin-top: 10px; text-align: center; background: var(--rl-primary); color: #fff; border-radius: 999px; padding: 8px; font-weight: 700; font-size: 12px; }
.home-page .hp-mock__sec {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 8px; font-weight: 700; font-size: 12px; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--home-on-dark-muted); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.home-page .hp-mock__sec .rl-ic:first-child { width: 14px; text-align: center; }
.home-page .hp-mock__sec--open { color: #fff; }
.home-page .hp-mock__chev { margin-left: auto; font-size: 10px; }
.home-page .hp-mock__it { padding: 8px 8px 8px 26px; font-size: 12px; color: var(--home-on-dark-muted); border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.home-page .hp-mock__it.is-active { background: var(--rl-primary); color: #fff; border-radius: 6px; font-weight: 600; }
.home-page .hp-mock__acc {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--rl-primary); color: #fff; font-weight: 700; font-size: 12px;
    border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   SEKCE 8: FAQ
   ═══════════════════════════════════════════════════════════ */

.home-page .hp-faq__list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.home-page .hp-faq__item {
    border: 1px solid var(--rl-border);
    border-radius: 16px;
    background: #fff;
}
.home-page .hp-faq__item[open] {
    border-color: var(--rl-primary);
    box-shadow: inset 0 0 0 1px var(--rl-primary);
}
.home-page .hp-faq__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    font-family: var(--rl-font-head);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--rl-text);
}
.home-page .hp-faq__q::-webkit-details-marker {
    display: none;
}
/* Summary je flex, takže text otázky musí být jedna položka — jinak by se každý
   vnořený <span class="rl-nowrap"> stal vlastní položkou a otázka by se rozpadla
   do sloupců. `min-width: 0` dovolí položce se zúžit pod šířku svého obsahu,
   aby dlouhá otázka na mobilu neroztlačila šipku ven. */
.home-page .hp-faq__q-text {
    min-width: 0;
}
.home-page .hp-faq__q .rl-ic {
    color: var(--rl-primary);
    transition: transform .2s var(--home-ease);
}
.home-page .hp-faq__item[open] .hp-faq__q .rl-ic {
    transform: rotate(180deg);
}
.home-page .hp-faq__a {
    padding: 0 24px 20px;
}
.home-page .hp-faq__a p {
    color: var(--rl-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
}
.home-page .hp-faq__a a {
    color: var(--rl-primary);
}

/* ═══════════════════════════════════════════════════════════
   SEKCE 9: Finální CTA
   ═══════════════════════════════════════════════════════════ */

.home-page .hp-final-cta-wrap {
    padding: clamp(48px, 8vw, 80px) 0;
    background: var(--rl-bg);
}
.home-page .hp-final-cta {
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
    border-radius: 32px;
    background: var(--rl-cta-gradient);
    color: #fff;
    text-align: center;
}
.home-page .hp-final-cta h2 {
    font-family: var(--rl-font-head);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin: 0 auto 16px;
    max-width: 760px;
}
.home-page .hp-final-cta p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--home-on-dark);
    max-width: 620px;
    margin: 0 auto 28px;
}
.home-page .cta-row-center {
    display: flex;
    justify-content: center;
}
.home-page .hp-final-cta__trust {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
}
.home-page .hp-final-cta__trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--home-on-dark);
}
.home-page .hp-final-cta__trust .rl-ic {
    color: #86EFAC;
}

/* ═══════════════════════════════════════════════════════════
   Lepivá CTA lišta (jen mobil)
   ═══════════════════════════════════════════════════════════ */

.home-page .hp-sticky-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--rl-border);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10);
    transform: translateY(100%);
    transition: transform .25s var(--home-ease);
}
.home-page .hp-sticky-cta.is-visible {
    transform: none;
}
.home-page .hp-sticky-cta__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.home-page .hp-sticky-cta__text strong {
    font-size: 0.9375rem;
    color: var(--rl-text);
}
.home-page .hp-sticky-cta__text span {
    font-size: 0.75rem;
    color: var(--rl-text-secondary);
}
.home-page .hp-sticky-cta .hp-btn {
    min-height: 48px;
    padding: 12px 24px;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .home-page .hp-sticky-cta {
        display: flex;
    }
    /* Aby lišta nepřekryla konec stránky ani finální CTA. */
    .home-page .hp-final-cta-wrap {
        padding-bottom: calc(clamp(48px, 8vw, 80px) + 72px);
    }
}

/* ═══════════════════════════════════════════════════════════
   Responzivita
   ═══════════════════════════════════════════════════════════ */

/* Hero má vlastní hranici 1024 px (zbytek stránky se láme na 900): tablet na
   šířku má sloupec dost široký na dvousloupcové hero, ale klient chce i tam
   jednosloupcové a text na střed. Mřížky sekcí a závěrečná CTA se drží 900,
   aby se karty na tabletu zbytečně neroztáhly na jeden sloupec. */
@media (max-width: 1024px) {
    /* Mimo desktop je hero jednosloupcové a text se centruje (dřív doleva —
       přání klienta se 2026-08-11 změnilo). Bloky, které mají vlastní šířku
       (odrážky, pilulka kickeru), se středí přes margin auto, ne přes
       text-align, aby jim uvnitř zůstalo zarovnání na levou hranu. */
    .home-page .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* .hero-text nese vlastní `text-align: left` (mimo media query), takže
       samotné vycentrování .hero-grid by na řádky uvnitř nedosáhlo. */
    .home-page .hero-text {
        align-items: center;
        text-align: center;
    }

    /* Na mobilu je CTA hned pod nadpisem – dřív bylo až pod 34slovným odstavcem. */
    .home-page .hero-text .hp-kicker { order: 1; }
    .home-page .hero-text h1 { order: 2; }
    .home-page .cta-row { order: 3; margin-bottom: 20px; }
    .home-page .hero-register { order: 3; }
    .home-page .hero-text p { order: 4; margin-bottom: 20px; }
    .home-page .hero-trust { order: 5; }

    .home-page .hero-text .hp-kicker {
        align-self: center;
        text-align: left;
    }

    .home-page .hero-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .home-page .cta-row {
        justify-content: center;
    }

    .home-page .hero-trust {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        gap: 12px;
        text-align: left;
    }

    .home-page .hero-phone {
        justify-content: center;
        margin-top: clamp(24px, 4vw, 40px);
    }
}

/* Mezi 901 a 1199 px se do řádku vejdou tři karty ze čtyř a čtvrtá zůstane sama
   pod nimi. Dva sloupce z toho udělají 2 × 2 — žádná osiřelá karta a text má
   v tomhle rozsahu pohodlnější míru než ve třech úzkých sloupcích.

   Vypnuto 2026-09-04 spolu s kartou predikcí (`pohledy/main.phtml`): se třemi
   kartami dělá tohle pravidlo přesně tu osiřelou kartu, které mělo zabránit
   (2 + 1). Auto-fit z pravidla výš dá v tomhle rozsahu tři sloupce po ~300 px.
   Odkomentovat ve chvíli, kdy se čtvrtá karta vrátí.
@media (min-width: 901px) and (max-width: 1199px) {
    .home-page .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
*/

@media (max-width: 900px) {
    .home-page .home-section-header {
        text-align: center;
    }
    .home-page .home-lead,
    .home-page .home-lead--center {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .home-page .features-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    /* Závěrečná CTA se řídí stejným pravidlem jako hero — mimo desktop na střed. */
    .home-page .hp-final-cta {
        text-align: center;
    }
    .home-page .cta-row-center {
        justify-content: center;
    }
    /* Tři různě dlouhé položky se na mobilu zalomí každá na svůj řádek a vystředěné
       vytvoří roztřepený levý okraj (tester 2026-08-14). Sloupec zarovnaný doleva
       a vycentrovaný jako celek drží odrážky pod sebou. */
    .home-page .hp-final-cta__trust {
        flex-direction: column;
        align-items: flex-start;
        width: max-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .home-page .hp-final-cta p,
    .home-page .hp-final-cta h2 {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .home-page .hp-compare-grid {
        grid-template-columns: 1fr;
    }
    .home-page .hp-calc__grid {
        grid-template-columns: 1fr;
    }
    .home-page .hp-tabpanel.is-active {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /* Panel tabů je tu jednosloupcový, takže jeho nadpis stojí přímo pod
       vycentrovanou hlavičkou sekce. Doleva zarovnaný h3 pak vedle ní vypadá
       jako druhý, jinak zarovnaný nadpis — tester to 2026-08-13 nahlásil jako
       „jednou je to na střed a pak zas doleva". Na desktopu (dva sloupce
       text | mockup) zůstává vlevo, tam je to správně. */
    .home-page .hp-tabpanel__text {
        text-align: center;
    }
    .home-page .hp-tabpanel__text p {
        margin-left: auto;
        margin-right: auto;
    }
    /* Formulářová ukázka uvnitř panelu má vlastní popisky – ty patří doleva. */
    .home-page .hp-tab-form {
        text-align: left;
    }
    /* Mockup na mobilu nesmí dominovat. 240 px ale lámalo popisky uvnitř karty
       do dvou řádků („Odeslat / ihned"), proto 280 px — pořád užší než sloupec
       textu, a obsah se vejde na řádek, pro který je psaný. */
    .home-page .hp-tabpanel__media {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    .home-page .hp-calc__num {
        width: 130px;
    }
    .home-page .hp-calc__lead-grid {
        grid-template-columns: 1fr;
    }
    .home-page .hp-pricing__grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    /**
     * Svislý rytmus na mobilu. Sekce měly 56–60 px odsazení nahoře i dole, takže mezi
     * dvěma sousedními boxy zůstávalo přes 110 px prázdna a stránka působila roztrhaně
     * (tester 2026-08-16). Na úzkém displeji stačí zhruba polovina — hranice sekcí je
     * čitelná i z barvy pozadí, ne jen z mezery. Desktop zůstává beze změny.
     */
    .home-page {
        --home-section-pad: 40px;
    }
    .home-page .hero {
        padding: 36px 0 40px;
    }
    .home-page .hp-problem {
        padding: 44px 0;
    }
    .home-page .hp-logos {
        padding: 28px 0;
    }
    .home-page .hp-quote {
        padding: 40px 0;
    }
    /* Odsazení dole zůstává větší: pod ním sedí lepivá CTA lišta (72 px), která by
       jinak zakryla konec sekce. */
    .home-page .hp-final-cta-wrap {
        padding-top: 40px;
        padding-bottom: calc(40px + 72px);
    }
    .home-page .hp-final-cta {
        padding: 32px 20px;
    }
    .home-page .home-section-header {
        margin-bottom: 28px;
    }
    .home-page .hp-problem .home-section-header {
        margin-bottom: 28px;
    }
    .home-page .home-lead {
        margin-bottom: 24px;
    }
    /* Naskládané karty pod sebou nepotřebují stejnou mezeru jako vedle sebe. */
    .home-page .hp-compare-grid,
    .home-page .features-grid,
    .home-page .hp-pricing__grid,
    .home-page .hp-calc__grid {
        gap: 16px;
    }
    .home-page .cta-row {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }
    .home-page .cta-row .hp-btn {
        width: 100%;
    }
    .home-page .hp-calc__lead-btn {
        width: 100%;
    }
}

/* Respekt k systémovému nastavení omezení pohybu. */
@media (prefers-reduced-motion: reduce) {
    .home-page *,
    .home-page *::before,
    .home-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .home-page .feature-card:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   VIZUÁLNÍ MODERNIZACE (2026-08-07)
   Hero působil ploše: studené pozadí bez hloubky, nadpis přes čtyři
   řádky, rozházené trust odrážky a telefon bez vazby na produkt.
   ═══════════════════════════════════════════════════════════ */

/* ── Hero: hloubka místo plochy ────────────────────────────────────────── */
.home-page .hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60rem 40rem at 78% 8%, rgba(59, 130, 246, 0.16) 0%, transparent 60%),
        radial-gradient(40rem 30rem at 8% 85%, rgba(74, 222, 128, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 45%, var(--rl-bg) 100%);
}

/* Jemná mřížka jen v horní části – dole se rozplyne, ať nekonkuruje obsahu. */
.home-page .hero::before {
    background-image:
        linear-gradient(rgba(29, 78, 216, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 78, 216, 0.05) 1px, transparent 1px);
    background-size: 56px 56px, 56px 56px;
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}

/* ── Nadpis: kratší řádky, těsnější sazba ─────────────────────────────── */
.home-page .hero-text h1 {
    font-size: clamp(2.5rem, 4.4vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    max-width: 15ch;
    text-wrap: balance;
}

.home-page .hero-text p {
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    line-height: 1.6;
    max-width: 46ch;
    color: var(--rl-text-secondary);
}

/* ── Trust odrážky: jedna linka, oddělené tečkou ───────────────────────── */
.home-page .hero-trust {
    gap: 10px 22px;
    align-items: center;
    padding-top: 4px;
}

.home-page .hero-trust li {
    font-size: 0.875rem;
    gap: 7px;
}

/* ── Tlačítka: měkčí tvar, znatelnější hloubka ─────────────────────────── */
.home-page .hp-btn {
    border-radius: 14px;
    letter-spacing: -0.01em;
}

.home-page .hp-btn--primary {
    box-shadow: 0 10px 24px -10px rgba(29, 78, 216, 0.55), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.home-page .hp-btn--primary:hover {
    box-shadow: 0 14px 30px -12px rgba(29, 78, 216, 0.6), 0 2px 8px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.home-page .hp-btn--secondary {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.home-page .hp-btn--secondary:hover {
    transform: translateY(-1px);
}

/* ── Telefon: záře pod ním, aby neplaval na ploše ──────────────────────── */
.home-page .hero-phone {
    position: relative;
}

.home-page .phone-frame {
    box-shadow:
        0 40px 80px -32px rgba(15, 23, 42, 0.45),
        0 12px 28px -12px rgba(29, 78, 216, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* ── Push bublina u telefonu ───────────────────────────────────────────── */
.home-page .hp-push-bubble {
    position: absolute;
    left: -14px;
    top: 18%;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: min(290px, 78%);
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.45);
    animation: hp-float 6s ease-in-out infinite;
}

.home-page .hp-push-bubble__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-content: center;
    border-radius: 10px;
    background: var(--rl-primary);
    color: #fff;
    font-size: 0.8125rem;
}

.home-page .hp-push-bubble__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.home-page .hp-push-bubble__body b {
    font-size: 0.875rem;
    color: var(--home-dark);
    line-height: 1.25;
}

.home-page .hp-push-bubble__body small {
    font-size: 0.75rem;
    color: var(--rl-text-secondary);
    line-height: 1.35;
}

@keyframes hp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ── Střídání textů v ukázkách notifikací ──────────────────────────────────
   Texty se prolínají (JS přidá `is-rot-out`, po prolnutí je vymění a třídu sundá).
   Délka přechodu musí sedět s prodlevou v `initRotace()` v js/home.js. */
.home-page .hp-push-bubble__body b,
.home-page .hp-push-bubble__body small,
.home-page .hp-tab-form__field,
.home-page .hp-mock__inp {
    transition: opacity .28s var(--home-ease);
}

.home-page .is-rot-out { opacity: 0; }

/* Varianty se liší délkou. Bez rezervy na dva řádky by se bublina i políčka
   při každé výměně nadechla a stránka pod nimi poskočila. */
.home-page .hp-push-bubble__body { min-height: 46px; }
.home-page .hp-tab-form__field { min-height: 2.6em; }

/* ── Karty: měkčí rohy a vrstvený stín napříč stránkou ─────────────────── */
.home-page .feature-card,
.home-page .hp-price-card,
.home-page .hp-faq__item,
.home-page .hp-calc__grid,
.home-page .hp-mock {
    border-radius: 20px;
}

.home-page .feature-card,
.home-page .hp-price-card {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -18px rgba(15, 23, 42, 0.25);
}

.home-page .feature-card:hover,
.home-page .hp-price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 22px 44px -22px rgba(15, 23, 42, 0.35);
}

.home-page .hp-price-card {
    transition: transform .2s var(--home-ease), box-shadow .2s var(--home-ease);
}

/* ── Loga integrací: klidnější pás, barva až na najetí ─────────────────── */
.home-page .hp-logos {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
}

.home-page .hp-logos__list li {
    opacity: .78;
    transition: opacity .15s var(--home-ease), transform .15s var(--home-ease);
}

.home-page .hp-logos__list li:hover {
    opacity: 1;
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hp-push-bubble { animation: none; }
    .home-page .hp-btn--primary:hover,
    .home-page .hp-btn--secondary:hover,
    .home-page .feature-card:hover,
    .home-page .hp-price-card:hover { transform: none; }
}

@media (max-width: 900px) {
    .home-page .hp-push-bubble {
        left: 0;
        top: -6px;
        width: min(300px, 92%);
    }
    .home-page .hero-text h1 { max-width: 100%; }
}

/* ── Doladění hero podle náhledu ───────────────────────────────────────── */

/* Bublina překrývala obsah telefonu (hledací pole, kategorie). Posouvám ji
   výš a doleva, ať se dotýká jen hrany rámečku. */
.home-page .hp-push-bubble {
    left: -8%;
    top: 6%;
    width: min(280px, 70%);
}

/* Trust odrážky: dva zarovnané sloupce. Tři vedle sebe se do sloupce s textem
   nevejdou a jednotlivé položky se lámaly uprostřed. */
.home-page .hero-trust {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 10px 28px;
}

.home-page .hero-trust li {
    white-space: nowrap;
}

/* Nadpis se vejde na tři řádky místo čtyř. */
.home-page .hero-text h1 {
    font-size: clamp(2.375rem, 4vw, 3.25rem);
    max-width: 17ch;
}

/* Prohlížeč zalamoval „e-shopu“ za spojovníkem („e-“ / „shopu“ na dvou
   řádcích). Slova se spojovníkem drží pohromadě přes tuhle utilitu. */
.rl-nowrap {
    white-space: nowrap;
}

/* .hp-kicker je inline-flex s gapem — každý vnořený <span> by se stal
   samostatnou flex položkou a mezi slovy by vznikly mezery 8 px. Text je proto
   v jednom obalu, aby zůstal jednou položkou a zalamoval se normálně. */
.home-page .hp-kicker__text {
    min-width: 0;
}

/* Stejná hranice jako u zbytku hera (1024, ne 900) — jinak by si nadpis
   a odrážky na tabletu na šířku držely šířky počítané pro dvousloupcový
   desktop a v jednosloupcovém hero by seděly u levé hrany. */
@media (max-width: 1024px) {
    .home-page .hero-trust {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    /* Na mobilu je telefon uprostřed sloupce, ale bublina zůstávala u levé
       hrany. Symetrické left/right + margin auto ji vystředí a nesahá na
       transform, který si drží animace hp-float. */
    .home-page .hp-push-bubble {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: -8px;
        width: min(300px, 92%);
    }

    /* Nadpis i odstavec si v jednosloupcovém hero drží šířku počítanou pro
       dvousloupcový desktop (17ch / 46ch) — na tabletu proto text sedí u levé
       hrany a vpravo zbývá prázdno. Dřívější override na 100 % přebíjelo
       pozdější pravidlo se stejnou specificitou, tak ho opakuji až tady. */
    .home-page .hero-text h1 {
        max-width: 100%;
    }

    /* Odstavec dostane celý sloupec, ale se stropem — přes celých 689 px by
       měl přes 90 znaků na řádek a špatně by se četl. */
    .home-page .hero-text p {
        max-width: min(100%, 62ch);
    }
}

/* ═══════════════════════════════════════════════════════════
   MODERNIZACE SEKCÍ POD HERO (2026-08-07)
   Tmavé plochy působily ploše, karty splývaly s pozadím, přechod
   mezi tmavou a světlou sekcí byl tvrdý řez.
   ═══════════════════════════════════════════════════════════ */

/* ── Tmavé sekce: hloubka a měkký přechod do světlé ────────────────────── */
.home-page .hp-problem,
.home-page .hp-quote {
    position: relative;
    background-color: var(--home-dark);
    background-image:
        radial-gradient(48rem 32rem at 20% 0%, rgba(37, 99, 235, 0.22) 0%, transparent 60%),
        radial-gradient(40rem 28rem at 85% 100%, rgba(74, 222, 128, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #0B1220 0%, #101A2E 100%);
}

/* Zaoblené rohy místo prolnutí do světlé — přechod tmavá/světlá přes gradient
   nutně prochází šedou a vypadá jako špína přes obsah. */
.home-page .hp-problem,
.home-page .hp-quote {
    border-radius: 40px;
    overflow: hidden;
}

.home-page .hp-problem .section-title {
    text-wrap: balance;
}

/* ── Srovnávací karty: sklo místo plochého obdélníku ───────────────────── */
.home-page .hp-compare-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
    transition: transform .2s var(--home-ease), border-color .2s var(--home-ease), box-shadow .2s var(--home-ease);
}

.home-page .hp-compare-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}

.home-page .hp-compare-card--gain {
    border-color: rgba(134, 239, 172, 0.35);
    box-shadow: 0 0 0 1px rgba(134, 239, 172, 0.12), 0 24px 48px -30px rgba(74, 222, 128, 0.5);
}

/* ── Reference: citace v kartě s avatarem ──────────────────────────────── */
.home-page .hp-quote__figure {
    position: relative;
    padding: clamp(28px, 4vw, 44px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    backdrop-filter: blur(4px);
}

.home-page .hp-quote__text {
    font-size: clamp(1.125rem, 2.1vw, 1.5rem);
    line-height: 1.55;
}

.home-page .hp-quote__cite {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.home-page .hp-quote__avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #1D4ED8, #3B82F6);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.home-page .hp-quote__person {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* ── Ceník: odznak u doporučeného tarifu ───────────────────────────────── */
.home-page .hp-price-card--highlight {
    position: relative;
    transform: translateY(-6px);
}

.home-page .hp-price-card--highlight:hover {
    transform: translateY(-10px);
}

.home-page .hp-price-card__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--rl-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 18px -8px rgba(29, 78, 216, 0.8);
}

/* ── Slidery kalkulačky: vyplněná dráha ────────────────────────────────── */
.home-page .hp-range {
    background: linear-gradient(90deg, var(--rl-primary) 0%, var(--rl-primary) var(--rl-fill, 0%), #E2E8F0 var(--rl-fill, 0%), #E2E8F0 100%);
    height: 6px;
    border-radius: 999px;
    margin: 6px 0 2px;
}

.home-page .hp-range::-webkit-slider-runnable-track {
    background: transparent;
}

.home-page .hp-range::-moz-range-track {
    background: transparent;
}

.home-page .hp-range::-webkit-slider-thumb {
    margin-top: -9px;
}

/* ── Nadpisy sekcí: kratší řádky se čtou líp než pruh přes celou šířku ─── */
.home-page .home-section-header .section-title {
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -0.02em;
}

.home-page .hp-problem .section-title {
    max-width: 24ch;
}

/* ── Taby administrace: zřetelnější aktivní stav ───────────────────────── */
.home-page .hp-tab {
    border-radius: 999px;
    padding: 0 22px;
}

.home-page .hp-tab.is-active {
    box-shadow: 0 10px 22px -12px rgba(29, 78, 216, 0.9);
}

/* ── FAQ: klidnější rám, zvýraznění při najetí ─────────────────────────── */
.home-page .hp-faq__item {
    transition: border-color .15s var(--home-ease), box-shadow .15s var(--home-ease);
}

.home-page .hp-faq__item:hover {
    border-color: #CBD5E1;
}

.home-page .hp-faq__item[open] {
    box-shadow: 0 12px 28px -20px rgba(15, 23, 42, 0.5), inset 0 0 0 1px var(--rl-primary);
}

/* ── Finální CTA: světelný akcent v gradientu ──────────────────────────── */
.home-page .hp-final-cta {
    position: relative;
    overflow: hidden;
    background-color: var(--rl-primary);
    box-shadow: 0 30px 60px -30px rgba(29, 78, 216, 0.6);
}

.home-page .hp-final-cta::after {
    content: '';
    position: absolute;
    inset: -40% -10% auto auto;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.28) 0%, transparent 62%);
    pointer-events: none;
}

.home-page .hp-final-cta > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .home-page .hp-problem,
    .home-page .hp-quote {
        border-radius: 24px;
    }
    .home-page .hp-price-card--highlight,
    .home-page .hp-price-card--highlight:hover {
        transform: none;
    }
    .home-page .hp-quote__cite {
        flex-direction: column;
        text-align: center;
    }
    .home-page .hp-quote__person {
        text-align: center;
    }
}
/* WEB-GTM-01: čitelné kroky a cíle navigace také pod pevnou hlavičkou. */
.home-page section[id] { scroll-margin-top: 100px; }
.home-page .hp-guide__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding: 0;
    list-style: none;
    counter-reset: guide;
}
.home-page .hp-guide__steps li { counter-increment: guide; }
.home-page .hp-guide__steps li::before {
    content: "0" counter(guide);
    display: block;
    color: #6d28d9;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}
.home-page .hp-guide__steps h3 { font-size: 21px; margin: 0 0 12px; }
.home-page .hp-guide__steps p { line-height: 1.7; }
.home-page .hp-onboarding { background: #f5f3ff; border-radius: 24px; }
.home-page #pro-eshopy .hp-compare-card { background: var(--home-surface); border-color: #cbd5e1; }
.home-page #pro-eshopy .hp-compare-card h3,
.home-page #pro-eshopy .hp-compare-card p { color: var(--home-dark); }
.home-page .cta-row-center { flex-wrap: wrap; gap: 12px; }
@media (max-width: 700px) {
    .home-page .hp-guide__steps { grid-template-columns: 1fr; gap: 24px; }
    .home-page .hp-sticky-cta__text strong { font-size: 13px; }
}
/* WEB-GTM-02: barevný rytmus sekcí a čitelný scénář bez závislosti na animacích. */
.home-page { --home-section-pad: clamp(40px, 6vw, 72px); }
.home-page .hero { background: radial-gradient(ellipse at 85% 20%, #c9f4ed 0, transparent 48%), radial-gradient(ellipse at 10% 30%, #e1dcff 0, transparent 55%), #f4f7ff; }
.home-page .hero-text h1 { letter-spacing: -.045em; }
.home-page .hp-calc { background: linear-gradient(135deg, #e8f7f5, #edf1ff 70%); border-radius: 32px; }
.home-page .hp-calc__panel { border: 1px solid #a6d4ce; box-shadow: 0 18px 45px #115e5912; }
.home-page .hp-calc__lead { border-top: 2px solid #b9cbc9; padding-top: 20px; }
.home-page .hp-calc__lead-btn { background: #1d4ed8; color: #fff; }
.home-page .feature-card { border-top: 4px solid #7563c5; box-shadow: 0 8px 24px #17255409; }
.home-page .feature-card:nth-child(2) { border-top-color: #d66b52; background: #fff8f4; }
.home-page .feature-card:nth-child(3) { border-top-color: #168577; background: #effaf7; }
.home-page #jak-funguje { background: #eeeaff; border-radius: 32px; }
.home-page .hp-story-label { text-align: center; color: #58418e; font-weight: 700; margin: 0 0 24px; }
.home-page .hp-guide__steps.hp-story { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.home-page .hp-story li { position: relative; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid #ddd6f3; }
.home-page .hp-story li:nth-child(2) { background: #f8f3ff; }
.home-page .hp-story li:nth-child(3) { background: #effaf7; border-color: #b8ddd3; }
.home-page .hp-story li:nth-child(4) { background: #e2f5f0; border-color: #a0d1c2; }
.home-page .hp-story li::before { display: block; font-size: 38px; font-weight: 800; color: #6952ae; margin-bottom: 16px; }
.home-page .hp-story__tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #48546a; margin-bottom: 12px; }
.home-page .hp-story h3 { font-size: 20px; line-height: 1.3; }
.home-page .hp-story p { font-size: 15px; line-height: 1.65; }
.home-page .hp-story blockquote { margin: 18px 0 0; padding: 14px; background: #fff; border-left: 3px solid #7958b6; border-radius: 0 12px 12px 0; font-size: 14px; color: #493472; }
.home-page .hp-readiness { margin-top: 24px; padding: 22px 28px; border: 1px solid #d2c9ec; border-radius: 18px; background: #ffffffb3; color: #334155; }
.home-page .hp-readiness p { margin: 8px 0 0; line-height: 1.7; }
.home-page .hp-onboarding { background: linear-gradient(115deg, #e3f6f0, #eef4ff); margin-top: 24px; }
.home-page .hp-price-purpose { min-height: 48px; color: #475569; font-size: 15px; line-height: 1.5; }
.home-page .hp-price-card { border-top: 4px solid #64a899; }
.home-page .hp-price-card:nth-child(2) { border-top-color: #8570c8; }
.home-page .hp-price-card--highlight { border-top-color: #2454d6; }
.home-page .hp-faq { background: linear-gradient(180deg, #f5f7ff, #fff); }
@media (max-width: 1000px) {
    .home-page .hp-guide__steps.hp-story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .home-page .hp-guide__steps.hp-story { grid-template-columns: 1fr; }
    .home-page .hp-story li { padding: 22px; }
    .home-page .hp-story li::before { font-size: 30px; margin-bottom: 8px; }
    .home-page .hp-readiness { padding: 20px; }
    .home-page .hp-calc, .home-page #jak-funguje { border-radius: 20px; }
}
/* WEB-DARK-01: dekorace jsou dostupné jen v novém veřejném motivu. */
.home-page .showcase-word, .home-page .showcase-preview { display: none; }