/* ============================================================
   client.css ? Premium White-Label Financial Advisor Website
   ============================================================ */

/* ??? 1. Reset ????????????????????????????????????????????? */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video { max-width: 100%; display: block; }

/* ??? 2. Variables ????????????????????????????????????????? */
:root {
    /* Brand ? p?eps?no PHP inline stylem */
    --color-primary:      #1a73e8;
    --color-secondary:    #34a853;
    --color-nav-text:     #ffffff;

    /* Povrchy */
    --color-bg:           #ffffff;
    --color-bg-alt:       #f8fafc;
    --color-bg-subtle:    #f1f5f9;
    --color-surface:      #ffffff;

    /* R?me?ky */
    --color-border:       #e2e8f0;
    --color-border-light: #f1f5f9;

    /* Text */
    --color-text:         #0f172a;
    --color-text-2:       #374151;
    --color-muted:        #64748b;

    /* St?ny */
    --sh-xs:  0 1px 2px rgba(0,0,0,.05);
    --sh-sm:  0 2px 6px -1px rgba(0,0,0,.07), 0 1px 3px -1px rgba(0,0,0,.04);
    --sh-md:  0 4px 16px -2px rgba(0,0,0,.08), 0 2px 6px -2px rgba(0,0,0,.04);
    --sh-lg:  0 12px 28px -4px rgba(0,0,0,.1),  0 4px 10px -4px rgba(0,0,0,.05);
    --sh-xl:  0 24px 56px -8px rgba(0,0,0,.12), 0 8px 18px -8px rgba(0,0,0,.05);

    /* R?diusy */
    --r-sm:   0.375rem;
    --r-md:   0.75rem;
    --r-lg:   1.25rem;
    --r-xl:   2rem;
    --r-full: 9999px;

    /* P?echody */
    --ease:   cubic-bezier(.4,0,.2,1);
    --dur:    0.2s;

    /* Nav */
    --nav-h:  70px;

    /* Font */
    --font:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ??? 3. Dark Mode tokens ??????????????????????????????????? */
[data-theme="dark"] {
    --color-bg:           #0f172a;
    --color-bg-alt:       #1e293b;
    --color-bg-subtle:    #1e293b;
    --color-surface:      #1e293b;
    --color-border:       #334155;
    --color-border-light: #1e293b;
    --color-text:         #f1f5f9;
    --color-text-2:       #cbd5e1;
    --color-muted:        #64748b;
}

/* ??? 4. Base ??????????????????????????????????????????????? */
html {
    font-size: 16px;
    scroll-behavior: auto;
    overflow-x: clip;
}
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.75;
    font-size: 1.0625rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: clip;
}
[data-theme="dark"] body { background: #0f172a; color: #f1f5f9; }

a    { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: none; }
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.contact-social-link):not([class*="mega-nav__"]):not([class*="bottom-nav__"]):not([class*="pill-"]):not(.mobile-menu-link):not(.nav-dropdown-item):not(.app-pwa-dashboard-alert--danger) { color: #93c5fd; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -.025em; line-height: 1.2; }
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 { color: #f1f5f9; }

/* ??? 5. Layout ???????????????????????????????????????????? */
.container         { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.container--narrow { max-width: 860px; }
.section           { padding: 6.5rem 0; }
.site-main         { flex: 1; }
[data-theme="dark"] .site-main { background: #0f172a; }

/* ??? 6. Navigation ???????????????????????????????????????? */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    /* Background set inline by PHP: background: var(--color-primary) */
    box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 4px 20px rgba(0,0,0,.14);
    transition: transform .28s ease, opacity .28s ease, box-shadow .28s ease;
}
.has-hero-video-nav .site-header--hero-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}
.has-hero-video-nav .site-header--hero-hidden.site-header--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.has-hero-video-nav .site-header.site-header--visible {
    background: rgba(15, 23, 42, .86) !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 10px 34px rgba(2,6,23,.32) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
html[data-header="none"] .has-hero-video-nav .site-header.site-header--visible {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.has-hero-video-nav .site-header--visible .logo-text,
.has-hero-video-nav .site-header--visible .nav-link,
.has-hero-video-nav .site-header--visible .client-dm-btn {
    color: #fff !important;
}
.has-hero-video-nav .site-header--visible .nav-link:hover,
.has-hero-video-nav .site-header--visible .nav-link--active,
.has-hero-video-nav .site-header--visible .client-dm-btn {
    background: rgba(255,255,255,.14) !important;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    flex-shrink: 0;
}
.logo-img  { height: 42px; width: auto; object-fit: contain; border-radius: .375rem; }
.logo-text {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-nav-text);
    letter-spacing: -.02em;
}

/* Nav links */
.site-nav { display: flex; align-items: center; gap: .25rem; }

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: .5rem .9375rem;
    border-radius: var(--r-full);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--color-nav-text);
    opacity: .8;
    text-decoration: none;
    transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
    white-space: nowrap;
}
.nav-link:hover      { opacity: 1; background: rgba(255,255,255,.18); text-decoration: none; }
.nav-link--active    { opacity: 1; background: rgba(255,255,255,.22); font-weight: 600; }

/* ── Nav Dropdown (Služby) ── */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    gap: .3rem;
    font-family: inherit;
}
.nav-dropdown-chevron {
    transition: transform .22s ease;
    flex-shrink: 0;
}
.nav-dropdown.open .nav-dropdown-chevron,
.nav-dropdown--active .nav-dropdown-chevron {
    transform: rotate(180deg);
}
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + .6rem);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 280px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 1rem;
    box-shadow: 0 12px 36px rgba(0,0,0,.14);
    padding: .4rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    z-index: 200;
    /* hidden by default */
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border-radius: .65rem;
    text-decoration: none;
    color: var(--text, #0f172a);
    transition: background .15s;
}
.nav-dropdown-item:hover,
.nav-dropdown-item--active {
    background: var(--surface-muted, #f1f5f9);
    text-decoration: none;
}
.nav-dd-icon { font-size: 1.15rem; flex-shrink: 0; }
.nav-dd-text  { display: flex; flex-direction: column; }
.nav-dd-label { font-size: .875rem; font-weight: 600; color: var(--text, #0f172a); }
.nav-dd-desc  { font-size: .75rem; color: var(--muted, #64748b); margin-top: .05rem; }
/* Mobile: dropdown menu inline */
@media (max-width: 768px) {
    .nav-dropdown { width: 100%; }
    .nav-dropdown-trigger { width: 100%; justify-content: space-between; border-radius: var(--r-md); padding: .75rem 1rem; }
    .nav-dropdown-menu {
        position: static;
        transform: none !important;
        box-shadow: none;
        border: none;
        background: rgba(0,0,0,.12);
        border-radius: var(--r-md);
        margin-top: .2rem;
        padding: .2rem .4rem;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
        transition: opacity .2s ease, max-height .25s ease;
    }
    .nav-dropdown.open .nav-dropdown-menu {
        opacity: 1;
        max-height: 600px;
        pointer-events: auto;
    }
    .nav-dropdown-item { color: var(--color-nav-text); }
    .nav-dd-label { color: var(--color-nav-text); }
    .nav-dd-desc  { color: rgba(255,255,255,.65); }
}
/* ────────────────────────────────────────────────── */

/* Dark mode toggle */
.client-dm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: none;
    cursor: pointer;
    color: var(--color-nav-text);
    transition: background var(--dur) var(--ease);
    flex-shrink: 0;
}
.client-dm-btn:hover { background: rgba(255,255,255,.28); }
.client-dm-btn .dm-icon-sun  { display: block; }
.client-dm-btn .dm-icon-moon { display: none; }
[data-theme="dark"] .client-dm-btn .dm-icon-sun  { display: none; }
[data-theme="dark"] .client-dm-btn .dm-icon-moon { display: block; }

/* Hamburger */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: .5rem;
    color: var(--color-nav-text);
}
.nav-toggle-bars {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle-bars span {
    display: block;
    width: 24px; height: 2px;
    background: var(--color-nav-text);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle-label {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    body.site-nav-open {
        overflow: hidden;
    }
    body.site-nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .985);
        z-index: 190;
        pointer-events: none;
    }
    body.site-nav-open .site-header {
        width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 220 !important;
        transform: none !important;
    }
    .container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .site-main,
    .hero,
    .hero-content-section,
    .section {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }
    .site-header {
        height: auto;
        min-height: var(--nav-h);
        width: 100%;
        max-width: 100%;
        padding-top: env(safe-area-inset-top, 0px);
    }
    .has-hero-video-nav .site-header--hero-hidden {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .has-hero-video-nav .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: var(--nav-h);
        border-radius: 0;
        background: rgba(15, 23, 42, .82) !important;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.16);
        box-shadow: 0 14px 42px rgba(2,6,23,.35);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    html[data-header="none"] .has-hero-video-nav .site-header {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .has-hero-video-nav .site-header .logo-text,
    .has-hero-video-nav .site-header .client-dm-btn,
    .has-hero-video-nav .site-header .nav-toggle {
        color: #fff !important;
    }
    .has-hero-video-nav .site-header .client-dm-btn,
    .has-hero-video-nav .site-header .nav-toggle.mobile-nav-menu-btn {
        background: rgba(255,255,255,.14);
    }
    .has-hero-video-nav .site-header .client-dm-btn:hover,
    .has-hero-video-nav .site-header .nav-toggle.mobile-nav-menu-btn:hover {
        background: rgba(255,255,255,.22);
    }
    .nav-container {
        gap: .55rem;
        position: relative;
        padding-left: .9rem;
        padding-right: .9rem;
    }
    .site-logo {
        min-width: 0;
        overflow: hidden;
    }
    .logo-img {
        height: 36px;
        max-width: 120px;
    }
    .logo-text {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .95rem;
    }
    .client-dm-btn {
        width: 40px;
        height: 40px;
        order: 2;
    }
    .nav-toggle {
        display: inline-flex;
        order: 3;
        flex-shrink: 0;
    }
    .nav-toggle-label {
        display: none;
    }
    .site-nav {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        flex-direction: column;
        align-items: stretch;
        background: rgba(15, 23, 42, .96);
        border: 0;
        border-radius: 0;
        padding: calc(var(--nav-h, 70px) + 1rem) 1rem 1rem;
        gap: .35rem;
        box-shadow: none;
        z-index: 200;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
    }
    .site-nav.open {
        display: flex !important;
        pointer-events: auto;
    }
    .nav-link {
        width: 100%;
        border-radius: .9rem;
        padding: .9rem 1rem;
        color: #fff !important;
        opacity: 1;
        background: rgba(255,255,255,.08);
        font-size: 1rem;
        font-weight: 700;
        justify-content: space-between;
        white-space: normal;
    }
    .nav-link:hover,
    .nav-link--active {
        background: rgba(255,255,255,.16);
    }
    .nav-dropdown-trigger {
        color: #fff !important;
        background: rgba(255,255,255,.08);
    }
    .nav-dropdown-menu {
        background: rgba(255,255,255,.08);
    }
    .nav-dropdown-item,
    .nav-dd-label {
        color: #fff !important;
    }
    .nav-dd-desc {
        color: rgba(255,255,255,.7) !important;
    }
}

/* ??? 7. Buttons ??????????????????????????????????????????? */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .875rem 1.875rem;
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                background var(--dur) var(--ease), opacity var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 16px -2px color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.btn-primary:hover {
    opacity: .9;
    box-shadow: 0 8px 24px -2px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; }
[data-theme="dark"] .btn-outline { border-color: #60a5fa; color: #93c5fd; }
[data-theme="dark"] .btn-outline:hover { background: rgba(96,165,250,.15); color: #93c5fd; }

.btn-white {
    background: #fff;
    color: var(--color-primary);
    box-shadow: var(--sh-md);
}
.btn-white:hover { box-shadow: var(--sh-lg); opacity: .95; }

.btn-outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.55);
}
.btn-outline-white:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.85); }

.btn-whatsapp {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
    box-shadow: 0 4px 18px rgba(37,211,102,.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-whatsapp:hover { background: #1da851; border-color: #1da851; box-shadow: 0 6px 24px rgba(37,211,102,.45); }

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-block { width: 100%; }
.btn-sm    { padding: .625rem 1.375rem; font-size: .875rem; }
.btn-lg    { padding: 1.0625rem 2.375rem; font-size: 1.125rem; }

/* ??? 8. HERO ?????????????????????????????????????????????? */
.hero {
    position: relative;
    overflow: hidden;
    padding: 6.5rem 0 7rem;
    /* Background set inline: background: linear-gradient(var(--primary), var(--secondary)) */
}
/* Dot pattern overlay */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.13) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
    justify-items: center;
}
.hero-text {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero-logo-wrap {
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: center;
}
.hero-logo-big {
    height: 120px;
    max-width: 300px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.35));
}
.hero-home-photo-wrap {
    display: flex;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.hero-home-photo {
    width: min(400px, 100%);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2rem;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 30px 80px rgba(0,0,0,.38);
    background: rgba(255,255,255,.08);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--r-full);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255,255,255,.85);
    padding: .375rem 1.0625rem;
    margin-bottom: 1.375rem;
}
.hero-title {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: #fff;
    margin-bottom: 1.25rem;
}
.hero-title [data-shiny-name-root],
.about-heading-row h2 [data-shiny-name-root] {
    display: inline-block;
}
.advisor-shiny-name-text {
    font: inherit;
    letter-spacing: inherit;
}
.hero-location {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .625rem;
    color: rgba(255,255,255,.8);
    font-size: .9375rem;
    margin-bottom: 1.25rem;
}
.hero-bio {
    font-size: 1.0625rem;
    color: rgba(255,255,255,.82);
    line-height: 1.75;
    max-width: 600px;
    margin-bottom: 2.25rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.hero-social-loop {
    width: min(100%, 360px);
    margin-top: 1.35rem;
    margin-left: auto;
    margin-right: auto;
    padding: .15rem 0;
    max-width: 100%;
    overflow: hidden;
}
.hero-social-loop:empty {
    display: none;
}
.social-logo-loop .logoloop__link {
    width: 46px;
    height: 46px;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    box-shadow: 0 12px 28px rgba(15,23,42,.08);
}
.social-logo-loop .logoloop__link:hover {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}
[data-theme="dark"] .social-logo-loop .logoloop__link {
    color: #bfdbfe;
    background: rgba(96,165,250,.12);
    border-color: rgba(147,197,253,.3);
    box-shadow: 0 16px 32px rgba(0,0,0,.24);
}
[data-theme="dark"] .social-logo-loop .logoloop__link:hover {
    color: #fff;
    background: rgba(96,165,250,.28);
    border-color: rgba(147,197,253,.7);
}

/* ── Hero background video ── */
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* ── Vstupní scroll video ── */
.hero-entrance {
    position: relative;
    background: #0f172a;
    margin-top: calc(-1 * var(--nav-h));
    /* Izolace: sticky/fixed pin nesmí rozbít okolní layout */
    isolation: isolate;
}
html[data-header="bottom"] .hero-entrance {
    margin-top: 0;
}
.hero-entrance__track {
    height: 280vh;
    position: relative;
}
.hero-entrance__sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    overflow: hidden;
    width: 100%;
    z-index: 2;
}
/* Mobilní pin přes JS (fixed) — spolehlivější než sticky + overflow-x na html/body */
.hero-entrance__sticky.is-fixed-pin {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--hero-entrance-vh, 100svh) !important;
    z-index: 5;
}
.hero-entrance__sticky.is-fixed-end {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--hero-entrance-vh, 100svh) !important;
}
.hero-entrance__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.hero-entrance__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}
.hero-entrance.is-frames-ready .hero-entrance__video {
    opacity: 0;
}
.hero-entrance__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(15, 23, 42, .72) 0%, rgba(15, 23, 42, .28) 42%, rgba(15, 23, 42, .35) 100%);
}
.hero-entrance__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(2.5rem, 8vh, 5rem);
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
    transition: opacity .12s linear;
    will-change: opacity;
}
.hero-entrance__eyebrow {
    margin: 0 0 .55rem;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .78;
}
.hero-entrance__title {
    margin: 0;
    font-size: clamp(1.75rem, 4.2vw, 3rem);
    line-height: 1.15;
    font-weight: 700;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero-entrance__hint {
    margin: .85rem 0 0;
    font-size: .95rem;
    opacity: .78;
}
.hero-entrance__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 1.25rem;
    pointer-events: auto;
}
.hero-entrance.is-reduced .hero-entrance__track {
    height: 100vh;
    height: 100svh;
}
@media (max-width: 768px) {
    .hero-entrance {
        margin-top: 0;
    }
    .hero-entrance__track {
        /* Kratší dráha = méně „nekonečného“ scrolování na telefonu */
        height: 170vh;
    }
    .hero-entrance__sticky {
        /* svh je na mobilu stabilnější než dvh při schovávání lišty */
        height: 100svh;
    }
    .hero-entrance__title {
        font-size: clamp(1.45rem, 7vw, 2rem);
    }
    .hero-entrance__copy {
        bottom: max(1.5rem, env(safe-area-inset-bottom, 0px) + 1.25rem);
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .hero-entrance__cta .btn {
        min-height: 44px;
    }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1;
    pointer-events: none;
}
.hero-rotating-copy {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 6vw, 5rem);
    pointer-events: none;
    text-align: center;
}
.hero-rotating-copy-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    max-width: min(980px, 92vw);
    color: #fff;
    text-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.hero-rotating-static {
    font-size: clamp(1.25rem, 2.4vw, 2.25rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--hero-rotating-static-color, #fff);
}
.hero-rotating-root {
    display: flex;
    justify-content: center;
    min-height: 1.25em;
}
.hero-rotating-text-animated {
    --hero-rotating-text-color: #fff;
    --hero-rotating-box-bg: rgba(255,255,255,.14);
    padding: .08em .42em .12em;
    border-radius: .55em;
    color: var(--hero-rotating-text-color);
    background: var(--hero-rotating-box-bg);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 14px 40px rgba(2,6,23,.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: clamp(2rem, 6vw, 5.25rem);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.055em;
}
.hero-rotating-text-word {
    line-height: 1.08;
}
.hero-rotating-under-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    margin: -.35rem auto 1.4rem;
    text-align: center;
}
.hero-rotating-under-name .hero-rotating-static {
    color: var(--color-primary);
    text-shadow: none;
    font-size: clamp(1rem, 1.6vw, 1.35rem);
}
.hero-rotating-under-name .hero-rotating-text-animated {
    color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
    font-size: clamp(1.45rem, 3.8vw, 3rem);
    box-shadow: 0 14px 36px rgba(15,23,42,.12);
}
.hero-video-section {
    padding: 1.25rem 0 1rem;
}
.hero-video-card {
    position: relative;
    overflow: hidden;
    min-height: clamp(320px, 52vw, 620px);
    border-radius: clamp(1.25rem, 3vw, 2.25rem);
    background: #0f172a;
    box-shadow: 0 28px 80px rgba(15,23,42,.24);
}
.hero-video-section-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.hero-video-section-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.38);
    pointer-events: none;
}
.hero-rotating-copy--section {
    z-index: 2;
}
.hero.hero--has-video {
    background: #0f172a !important;
    min-height: 100vh;
    margin-top: calc(-1 * var(--nav-h));
    padding: 0;
}
html[data-header="bottom"] .hero.hero--has-video {
    min-height: 100vh;
    margin-top: 0;
}
.hero--video-only {
    display: block;
}
.hero-content-section {
    position: relative;
    padding: 5rem 0 5.5rem;
    background: transparent;
}
.hero-content-section--below-video {
    border-top: none;
}
.hero-content-section .hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
}
.hero-content-section .hero-text {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.hero-content-section .hero-logo-wrap {
    justify-content: center;
}
.hero-content-section .hero-location,
.hero-content-section .hero-cta {
    justify-content: center;
}
.hero-content-section .hero-bio {
    margin-left: auto;
    margin-right: auto;
}
.hero-content-section .hero-social-loop {
    margin-left: auto;
    margin-right: auto;
}
.hero-content-section .hero-eyebrow {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.hero-content-section .hero-title {
    color: var(--color-text);
}
.hero-content-section .hero-location,
.hero-content-section .hero-bio {
    color: var(--muted, #64748b);
}
.hero-content-section .hero-bio {
    color: var(--color-text-2, #374151);
}
.hero-content-section .btn-outline-white {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.hero-content-section .btn-outline-white:hover {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}
[data-theme="dark"] .hero-content-section .hero-title {
    color: #f8fafc;
}
[data-theme="dark"] .hero-rotating-under-name .hero-rotating-static {
    color: #bfdbfe;
}
[data-theme="dark"] .hero-rotating-under-name .hero-rotating-text-animated {
    color: #dbeafe !important;
    background: rgba(96,165,250,.14) !important;
    border-color: rgba(147,197,253,.3);
}
[data-theme="dark"] .hero-eyebrow,
[data-theme="dark"] .hero-content-section .hero-eyebrow {
    color: #dbeafe;
    background: rgba(59,130,246,.16);
    border-color: rgba(147,197,253,.32);
}
[data-theme="dark"] .hero-content-section .hero-location,
[data-theme="dark"] .hero-content-section .hero-bio {
    color: #cbd5e1;
}
[data-theme="dark"] .hero-bio {
    color: #dbeafe;
    background: rgba(15,23,42,.68);
    border-color: rgba(148,163,184,.25);
    box-shadow: 0 18px 45px rgba(0,0,0,.22);
}
[data-theme="dark"] .hero-content-section .btn-outline-white {
    color: #bfdbfe;
    border-color: rgba(147,197,253,.42);
    background: rgba(96,165,250,.1);
}
[data-theme="dark"] .hero-content-section .btn-outline-white:hover {
    color: #fff;
    background: rgba(96,165,250,.22);
    border-color: rgba(147,197,253,.72);
}
.hero--has-video::before {
    z-index: 2;
}
.hero--has-video::after {
    z-index: 2;
}

@media (max-width: 800px) {
    .hero         { padding: 4rem 0 5rem; }
    .hero-inner   { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
    .hero.hero--has-video {
        min-height: 88vh;
        margin-top: 0;
    }
    .has-hero-video-nav .hero.hero--has-video {
        padding-top: 0;
    }
    .hero-rotating-copy {
        padding: 0 1rem;
        max-width: 100vw;
        overflow: hidden;
    }
    .hero-rotating-copy-inner {
        max-width: min(92vw, 430px);
    }
    .hero-rotating-static {
        font-size: clamp(1.05rem, 5.2vw, 1.55rem);
        line-height: 1.2;
    }
    .hero-rotating-text-animated {
        font-size: clamp(1.7rem, 10vw, 3.1rem);
        line-height: 1.03;
        max-width: 92vw;
        overflow-wrap: anywhere;
    }
    .hero-content-section {
        padding: 3.25rem 0 4rem;
    }
    .hero-inner {
        padding-inline: .25rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }
    .hero-text {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .hero-logo-big {
        height: 96px;
        max-width: 220px;
    }
    .hero-eyebrow {
        margin-bottom: .9rem;
        font-size: .72rem;
        padding: .32rem .8rem;
    }
    .hero-title {
        font-size: clamp(2rem, 11vw, 3rem);
        margin-bottom: .9rem;
        overflow-wrap: anywhere;
    }
    .hero-location {
        flex-wrap: wrap;
        gap: .35rem;
        font-size: .88rem;
        line-height: 1.45;
    }
    .hero-bio {
        font-size: .98rem;
        line-height: 1.65;
        padding: 1rem;
        border-radius: 1rem;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .hero-cta {
        width: 100%;
        flex-direction: column;
        gap: .7rem;
        margin-top: 1rem;
    }
    .hero-cta .btn {
        width: 100%;
        justify-content: center;
        padding: .9rem 1rem;
        min-height: 48px;
    }
    .hero-social-loop {
        width: min(420px, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem);
        overflow: hidden;
        margin-top: 1rem;
        padding: .2rem 0;
    }
    .hero-social-loop .logoloop,
    .social-logo-loop,
    .social-logo-loop .logoloop {
        width: 100% !important;
        max-width: 100%;
        overflow: hidden;
    }
    .social-logo-loop.logoloop--fade::before,
    .social-logo-loop.logoloop--fade::after {
        display: none;
    }
    .social-logo-loop .logoloop__track {
        max-width: none !important;
        overflow: visible !important;
    }
    .social-logo-loop .logoloop__link {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 430px) {
    .nav-toggle {
        width: 42px;
        padding: 0;
    }
    .logo-text {
        max-width: 48vw;
    }
    .client-dm-btn {
        width: 38px;
        height: 38px;
    }
    .hero-content-section {
        padding-top: 2.75rem;
    }
}

/* ??? 9. Features ??????????????????????????????????????????? */
.features { background: var(--color-bg-alt); padding: 5.5rem 0; }
[data-theme="dark"] .features { background: var(--color-bg-alt); }

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: 2.25rem 2rem;
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-xl);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    text-decoration: none;
    color: var(--color-text);
}
[data-theme="dark"] .feature-card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .feature-card:hover { border-color: #3b82f6; }

.feature-icon {
    width: 58px; height: 58px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.feature-card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -.015em;
}
.feature-card p {
    font-size: .9375rem;
    color: var(--color-muted);
    line-height: 1.65;
}

/* ??? 10. Page Hero Band ???????????????????????????????????? */
.page-hero {
    padding: 2.5rem 0 2.25rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.page-hero::before { display: none; }
.page-hero-title {
    position: relative;
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    /* glass pill ? no own background, sits on hero gradient */
    display: inline-block;
    background: rgba(255,255,255,.13);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: .45rem 1.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    text-align: center;
}
.page-hero-eyebrow {
    position: relative;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin: 0 0 .5rem;
}
.page-hero-sub {
    position: relative;
    margin-top: .625rem;
    font-size: 1.0625rem;
    color: var(--color-muted, #64748b);
}
[data-theme="dark"] .page-hero { filter: none; }

/* ??? 11. About ???????????????????????????????????????????? */
.about.section { padding: 6.5rem 0; }
[data-theme="dark"] .about { background: #0f172a; }

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
    position: relative;
}

.about-photo-wrap {
    position: static;
    max-width: 260px;
    margin: 2rem auto 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.about-logo-fixed {
    display: flex;
    justify-content: center;
}
.about-logo-main {
    width: min(100%, 300px);
    max-height: 150px;
    object-fit: contain;
}
.about-photo {
    width: min(35%, 220px);
    min-width: 150px;
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    border: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 18px 28px rgba(15,23,42,.28));
    display: block;
    margin: 0;
    flex-shrink: 0;
}

.about-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: .5rem;
}
.about-content h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.625rem);
    font-weight: 900;
    letter-spacing: -.04em;
    margin: 0;
    color: var(--color-text);
}
.about-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
}
.about-titles-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .5rem 0 1.5rem;
}
.about-title-badge {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
    font-size: .8125rem;
    font-weight: 700;
    border-radius: var(--r-full);
    padding: .3125rem 1rem;
}
[data-theme="dark"] .about-title-badge {
    background: rgba(96,165,250,.12);
    color: #93c5fd;
    border-color: rgba(96,165,250,.28);
}

.about-bio {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--color-text-2);
    margin-bottom: 2rem;
}
[data-theme="dark"] .about-bio { color: #cbd5e1; }
.about-bio.ql-editor,
.about-extra-text.ql-editor {
    padding: 0;
}
.about-bio img,
.about-extra-text img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    margin: .85rem 0;
    box-shadow: 0 16px 36px rgba(15,23,42,.12);
}
.about-bio blockquote,
.about-extra-text blockquote {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border-left: 4px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-radius: 0 14px 14px 0;
}
.about-bio ul,
.about-bio ol,
.about-extra-text ul,
.about-extra-text ol {
    padding-left: 1.35rem;
    margin: .8rem 0;
}
.about-placeholder {
    color: var(--color-muted);
    font-style: italic;
    margin-bottom: 2rem;
}
.about-extra {
    margin-top: 1.75rem;
    padding: 1.35rem;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 16px 44px -34px rgba(15,23,42,.35);
}
.about-extra h3 {
    margin-bottom: .7rem;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--color-text);
}
.about-extra-text {
    color: var(--color-muted);
    line-height: 1.75;
}
[data-theme="dark"] .about-extra {
    background: rgba(15,23,42,.62);
    border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .about-extra-text {
    color: #cbd5e1;
}
.about-gallery {
    margin-top: 1.75rem;
}
.about-gallery h3 {
    margin: 0 0 .9rem;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--color-text);
}
.about-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .85rem;
}
.about-gallery-item {
    display: block;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.18);
    background: var(--color-bg-alt);
    box-shadow: 0 16px 36px rgba(15,23,42,.10);
}
.about-gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    transition: transform .22s ease;
}
.about-gallery-item:hover img {
    transform: scale(1.04);
}
.about-gallery--circle,
.about-gallery--interactive {
    margin-top: 1.75rem;
}
.about-circle-gallery-host {
    position: relative;
    width: 100%;
    min-height: 420px;
    height: min(560px, 68vh);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.18);
    background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.92) 0%, rgba(248,250,252,.88) 42%, rgba(241,245,249,.82) 100%);
    box-shadow: 0 18px 42px rgba(15,23,42,.10);
}
.about-circle-gallery {
    height: 100%;
}
[data-theme="dark"] .about-circle-gallery-host {
    border-color: rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 50% 45%, rgba(30,41,59,.92) 0%, rgba(15,23,42,.88) 100%);
    box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
[data-theme="dark"] .about-gallery-item {
    border-color: rgba(255,255,255,.1);
    background: #1e293b;
}

.about-location {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    color: var(--color-muted);
    font-size: .9375rem;
    margin-bottom: .875rem;
}
.about-location svg { color: #1a73e8; flex-shrink: 0; margin-top: .1rem; }
[data-theme="dark"] .about-location svg { color: #60a5fa; }

.about-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* Tituly list */
.about-tituly {
    margin: 2.5rem 0 .5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 2rem;
}
.about-tituly-heading {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-muted);
    margin: 0 0 1.25rem;
}
.about-tituly-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.about-tituly-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg-alt);
    border-radius: var(--r-md);
    border-left: 3px solid #1a73e8;
}
[data-theme="dark"] .about-tituly-item { background: #1e293b; }
.about-tituly-label { font-weight: 700; font-size: .9375rem; color: var(--color-text); }
.about-tituly-popis { font-size: .8125rem; color: var(--color-muted); line-height: 1.55; }
[data-theme="dark"] .about-tituly-label { color: #e2e8f0; }
[data-theme="dark"] .about-tituly-popis { color: #94a3b8; }

/* Magic Bento host (O mně – specializace a tituly) */
.about-bento-host {
    margin: 2.5rem 0 .5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 2rem;
}
.about-bento-host .bento-section {
    padding: 0;
    max-width: 100%;
}

@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-photo-wrap { position: static; max-width: 320px; min-height: 0; margin: 0 auto; align-items: center; }
    .about-heading-row { align-items: flex-start; }
    .about-photo { width: 120px; min-width: 120px; aspect-ratio: 1; }
}

/* ??? 12. Kalkula?ky ??????????????????????????????????????? */
.section-title   { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; margin-bottom: .5rem; }
.section-subtitle{ color: var(--color-muted); font-size: 1rem; margin-bottom: 2.5rem; }

.calc-tabs {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}
.calc-tab {
    padding: .625rem 1.5rem;
    border: none;
    background: none;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    font-family: var(--font);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.calc-tab:hover   { color: var(--color-text); }
.calc-tab.active  { color: #1a73e8; border-bottom-color: #1a73e8; }
[data-theme="dark"] .calc-tab { color: #64748b; }
[data-theme="dark"] .calc-tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }

.calc-panel        { display: none; }
.calc-panel.active { display: block; }
.calc-panel h2     { font-size: 1.5rem; font-weight: 700; margin-bottom: 2rem; }

.calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 768px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-form label   { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .9375rem; }
.calc-form .form-group { margin-bottom: 1.25rem; }

.calc-result        { display: flex; flex-direction: column; gap: 1rem; }
.result-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--sh-md);
    display: flex;
    flex-direction: column;
    gap: .375rem;
}
[data-theme="dark"] .result-card { background: var(--color-surface); border-color: var(--color-border); }
.result-label { font-size: .875rem; color: var(--color-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.result-value { font-size: 1.875rem; font-weight: 900; color: #1a73e8; letter-spacing: -.03em; }
[data-theme="dark"] .result-value { color: #60a5fa; }

.calc-disclaimer { margin-top: 2.5rem; color: var(--color-muted); font-size: .875rem; font-style: italic; }

.calc-category {
    --category-color: #1a73e8;
    margin-bottom: 2.2rem;
}
.calc-category-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}
.calc-category-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--category-color) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--category-color) 38%, transparent);
    position: relative;
}
.calc-category-icon::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 5px;
    background: var(--category-color);
}
.calc-category-head h2 {
    margin: 0;
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    letter-spacing: -.04em;
}
.calc-category-head p {
    margin: .1rem 0 0;
    color: var(--color-muted);
    font-size: .88rem;
}
.calc-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.calc-public-sections {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-bottom: 1.5rem;
}
.calc-section-chip {
    --chip-color: #1a73e8;
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--chip-color) 32%, transparent);
    background: color-mix(in srgb, var(--chip-color) 10%, var(--color-surface));
    color: var(--chip-color);
    border-radius: 999px;
    padding: .5rem .95rem;
    font-weight: 800;
    font-size: .875rem;
    text-decoration: none;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.calc-section-chip:hover,
.calc-section-chip.is-active {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -22px var(--chip-color);
}
.calc-section-chip.is-active {
    background: var(--chip-color);
    color: #fff;
}

.calc-bubble {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #1a73e8 18%, var(--color-border));
    border-radius: 1rem;
    margin-bottom: 0;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, #1a73e8 18%, transparent), transparent 34%),
        radial-gradient(circle at 92% 8%, color-mix(in srgb, #1a73e8 14%, transparent), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 92%, #fff), var(--color-surface));
    box-shadow: 0 30px 80px -46px rgba(15,23,42,.65);
    padding: 0;
    min-height: 170px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.calc-bubble.is-open {
    padding: 0;
    border-color: color-mix(in srgb, #1a73e8 34%, var(--color-border));
}
.calc-bubble:not(.is-open):hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 64px -42px rgba(15,23,42,.75);
}
.calc-bubble::before {
    content: "";
    position: absolute;
    inset: auto -12% -35% 50%;
    height: 280px;
    background: linear-gradient(135deg, color-mix(in srgb, #1a73e8 22%, transparent), transparent);
    transform: rotate(-8deg);
    pointer-events: none;
}
.calc-bubble > * { position: relative; z-index: 1; }
.calc-bubble-toggle {
    width: 100%;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    border: 0;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    color: var(--color-text);
    padding: 1.1rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
[data-theme="dark"] .calc-bubble-toggle {
    background: rgba(15,23,42,.5);
}
.calc-bubble-text {
    display: grid;
    gap: .45rem;
    min-width: 0;
}
.calc-bubble-text strong {
    font-size: clamp(1rem, 1.8vw, 1.18rem);
    letter-spacing: -.035em;
}
.calc-bubble-labels {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.calc-bubble-label {
    --badge-color: #1a73e8;
    width: fit-content;
    color: var(--badge-color);
    border: 1px solid color-mix(in srgb, var(--badge-color) 36%, transparent);
    background: color-mix(in srgb, var(--badge-color) 10%, transparent);
    border-radius: 999px;
    padding: .26rem .62rem;
    font-size: .74rem;
    font-weight: 900;
    line-height: 1;
}
.calc-bubble-text small {
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.calc-bubble-action {
    color: #1a73e8;
    border: 1px solid color-mix(in srgb, #1a73e8 28%, transparent);
    border-radius: 999px;
    padding: .45rem .8rem;
    font-weight: 900;
    font-size: .85rem;
    background: color-mix(in srgb, #1a73e8 9%, transparent);
    margin-top: auto;
}
.calc-bubble-foot {
    display: flex;
    justify-content: flex-start;
    padding: 0 1.1rem .85rem;
    margin-top: -.35rem;
}
.calc-share-link {
    color: var(--color-text-muted, #64748b);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: .15rem 0;
    border: 0;
    background: transparent;
    font: inherit;
}
.calc-share-link:hover,
.calc-share-link:focus-visible {
    color: #1a73e8;
    outline: none;
}
.calc-share-link.is-copied {
    color: #16a34a;
    text-decoration: none;
}
[data-theme="dark"] .calc-share-link:hover,
[data-theme="dark"] .calc-share-link:focus-visible {
    color: #60a5fa;
}
[data-theme="dark"] .calc-bubble-action {
    color: #60a5fa;
    border-color: color-mix(in srgb, #60a5fa 30%, transparent);
    background: color-mix(in srgb, #60a5fa 10%, transparent);
}
.calc-bubble-body {
    margin-top: 1.35rem;
}
.calc-bubble-body[hidden],
.calc-bubble:not(.is-open) > .calc-bubble-body {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.calc-bubble:not(.is-open) .fg-original-frame,
.calc-bubble:not(.is-open) .desktop-one-frame,
.calc-bubble:not(.is-open) .desktop-two-frame {
    height: 0 !important;
    min-height: 0 !important;
}
.calc-modal {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(1120px, calc(100vw - 32px));
    max-height: min(88vh, 860px);
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-text);
}
.calc-modal::backdrop {
    background: rgba(2, 6, 23, .74);
    backdrop-filter: blur(8px);
}
.calc-modal-shell {
    position: relative;
    max-height: min(88vh, 860px);
    overflow: auto;
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 1.35rem;
    background: var(--color-surface);
    box-shadow: 0 34px 120px rgba(2,6,23,.5);
    padding: clamp(1rem, 2.4vw, 1.7rem);
}
[data-theme="dark"] .calc-modal-shell {
    background: #0f172a;
}
.calc-modal-close {
    position: sticky;
    top: 0;
    margin-left: auto;
    z-index: 5;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.calc-modal-content .calc-bubble-body {
    margin-top: 0;
}
.calc-modal--mortgage .calc-modal-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.calc-modal--mortgage .calc-modal-close {
    position: absolute;
    top: .8rem;
    right: .8rem;
    margin: 0;
    border-color: rgba(255,255,255,.18);
    background: rgba(2,6,23,.62);
    color: #fff;
    backdrop-filter: blur(12px);
}
.calc-modal.calc-modal--life-pro {
    /* 90 % viewportu, vycentrované – viditelné okolí (záložka appky) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1700px, 92vw);
    max-width: 92vw;
    height: min(94vh, 1000px);
    max-height: 94vh;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
}
.calc-modal.calc-modal--life-pro::backdrop {
    background: rgba(2, 6, 23, .82);
    backdrop-filter: blur(6px);
}
.calc-modal.calc-modal--life-pro .calc-modal-shell {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f172a);
}
[data-theme="dark"] .calc-modal.calc-modal--life-pro .calc-modal-shell {
    background: #0b1220;
    color: #f1f5f9;
}
/* Základní typografie uvnitř modalu – ať je text vždy viditelný */
.calc-modal.calc-modal--life-pro h2,
.calc-modal.calc-modal--life-pro h3,
.calc-modal.calc-modal--life-pro h4 {
    color: var(--color-text, #0f172a);
}
[data-theme="dark"] .calc-modal.calc-modal--life-pro h2,
[data-theme="dark"] .calc-modal.calc-modal--life-pro h3,
[data-theme="dark"] .calc-modal.calc-modal--life-pro h4 {
    color: #f1f5f9;
}
.calc-modal.calc-modal--life-pro .calc-modal-content {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}
.calc-modal.calc-modal--life-pro .calc-modal-content .calc-bubble-body {
    height: 100%;
    margin: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.calc-modal.calc-modal--life-pro .calc-bubble-body > .life-pro-app,
.calc-modal.calc-modal--life-pro .calc-bubble-body > .life-calc-pro-app {
    flex: 1;
    min-height: 0;
    width: 100%;
}
body.calc-modal-open {
    overflow: hidden;
}
.calc-modal.calc-modal--life-pro .calc-modal-close {
    position: absolute;
    top: .55rem;
    right: .55rem;
    margin: 0;
    z-index: 8;
    border-color: color-mix(in srgb, var(--color-border, #e2e8f0) 80%, transparent);
    background: color-mix(in srgb, var(--color-surface, #fff) 92%, transparent);
}

/* Modal pro sběr kontaktu po zavření kalkulačky */
.calc-lead-modal {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 32px));
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 1.25rem;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 34px 120px rgba(2,6,23,.5);
}
.calc-lead-modal::backdrop {
    background: rgba(2, 6, 23, .7);
    backdrop-filter: blur(6px);
}
[data-theme="dark"] .calc-lead-modal {
    background: #0f172a;
}
.calc-lead-modal h3 {
    margin: 0 0 .55rem;
    font-size: 1.2rem;
}
.calc-lead-modal p {
    margin: 0 0 1rem;
    color: var(--color-text-muted, #64748b);
    font-size: .95rem;
    line-height: 1.5;
}
.calc-lead-modal-close {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.calc-lead-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.calc-lead-fields {
    display: grid;
    gap: .6rem;
    margin-bottom: .8rem;
}
.calc-lead-fields input {
    width: 100%;
    padding: .65rem .85rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: .65rem;
    background: var(--color-bg, #fff);
    color: var(--color-text);
    font: inherit;
}
[data-theme="dark"] .calc-lead-fields input {
    background: #1e293b;
}
.calc-lead-gdpr {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .9rem;
    font-size: .82rem;
    color: var(--color-text-muted, #64748b);
    cursor: pointer;
}
.calc-lead-gdpr input {
    margin-top: .15rem;
    flex: none;
}
.calc-lead-error {
    color: #dc2626;
    font-size: .85rem;
    margin: 0 0 .8rem !important;
}
.calc-lead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.calc-lead-actions .btn {
    flex: 1 1 auto;
}
.calc-lead-modal-success {
    text-align: center;
    padding: .5rem 0;
}

/* Tlačítko „Historie" v přehledu kalkulaček – absolutně v pravém dolním rohu článku */
.calc-bubble { position: relative; }
.calc-bubble-history-btn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-primary, #16a34a) 32%, transparent);
    background: color-mix(in srgb, var(--color-surface, #fff) 92%, transparent);
    color: var(--color-primary, #16a34a);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 160ms ease;
    backdrop-filter: blur(4px);
}
.calc-bubble-history-btn:hover {
    background: var(--color-primary, #16a34a);
    color: #fff;
    border-color: var(--color-primary, #16a34a);
    transform: translateY(-1px);
}
.calc-bubble-history-btn i { font-size: .85em; }

/* Flash zvýraznění panelu (po kliknutí na Historie) */
@keyframes lifeProPanelFlash {
    0%, 100% { box-shadow: none; }
    20%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #16a34a) 35%, transparent); }
}
.life-pro-panel--flash {
    animation: lifeProPanelFlash 1.6s ease-out;
    border-radius: 14px;
}

/* Samostatný modal pro historii kalkulaček (otevřený z přehledu bez otevření celé kalkulačky) */
dialog.life-pro-history-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, 92vw);
    max-width: 92vw;
    max-height: 85vh;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f172a);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
dialog.life-pro-history-dialog::backdrop {
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(6px);
}
[data-theme="dark"] dialog.life-pro-history-dialog {
    background: #0b1220;
    color: #f1f5f9;
}
.life-pro-history-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 60%, transparent);
}
.life-pro-history-dialog-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: inherit;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.life-pro-history-dialog-head h3 i { color: var(--color-primary, #16a34a); }
.life-pro-history-dialog-close {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: 6px;
    opacity: .7;
}
.life-pro-history-dialog-close:hover { opacity: 1; background: rgba(127, 127, 127, .15); }
.life-pro-history-dialog-body {
    padding: .75rem;
    max-height: calc(85vh - 70px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.life-pro-history-dialog-body .life-pro-history-item {
    background: color-mix(in srgb, var(--color-surface, #fff) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
    padding: .65rem .85rem;
    border-radius: 10px;
}
.life-pro-history-dialog-body .life-pro-history-item strong { font-size: .9rem; }
.life-pro-history-dialog-body .life-pro-history-item small { font-size: .78rem; }
.life-pro-history-loading,
.life-pro-history-empty {
    color: var(--color-muted, #64748b);
    text-align: center;
    padding: 1.5rem .5rem;
    font-size: .88rem;
}
[data-theme="dark"] .life-pro-history-loading,
[data-theme="dark"] .life-pro-history-empty { color: #94a3b8; }
.desktop-one-frame-wrap {
    overflow: hidden;
    background: #fff;
}
.desktop-one-frame-wrap--transparent {
    background: transparent;
}
.desktop-one-frame {
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
    overflow: hidden;
}
.calc-modal .desktop-one-frame {
    min-height: 760px;
    height: 920px;
}
.desktop-one-frame-wrap--transparent .desktop-one-frame {
    background: transparent;
    min-height: 560px;
}
.calc-modal.calc-modal--desktop-one {
    width: min(1480px, calc(100vw - 18px));
}
.calc-modal.calc-modal--desktop-two {
    width: min(1180px, calc(100vw - 18px));
    max-height: calc(100dvh - 18px);
}
.calc-modal.calc-modal--desktop-one .calc-modal-shell {
    background: #fff;
}
[data-theme="dark"] .desktop-one-frame-wrap--transparent,
[data-theme="dark"] .desktop-one-frame-wrap--transparent .desktop-one-frame {
    background: transparent;
}
[data-theme="dark"] .desktop-one-frame-wrap,
[data-theme="dark"] .desktop-one-frame,
[data-theme="dark"] .calc-modal.calc-modal--desktop-one .calc-modal-shell {
    background: #0f172a;
}
.calc-modal.calc-modal--desktop-two .calc-modal-shell {
    background: #eff5f0;
    max-height: calc(100dvh - 18px);
    overflow: hidden;
}
.desktop-two-frame-wrap {
    overflow: hidden;
    background: #eff5f0;
}
.desktop-two-frame {
    display: block;
    width: 100%;
    border: 0;
    background: #eff5f0;
    overflow: auto;
}
.calc-modal .desktop-two-frame {
    height: min(760px, calc(100dvh - 120px));
    min-height: 560px;
}
@media (max-width: 760px) {
    .calc-modal .desktop-one-frame {
        min-height: 760px;
        height: 880px;
    }
    .calc-modal .desktop-two-frame {
        height: calc(100dvh - 92px);
        min-height: 520px;
    }
}
@media (max-width: 520px) {
    .calc-modal.calc-modal--desktop-two {
        width: min(420px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        inset: 8px auto auto 50%;
        margin: 0;
        transform: translateX(-50%);
    }
    .calc-modal.calc-modal--desktop-two .calc-modal-shell {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 1rem;
        overflow: hidden;
    }
    .calc-modal.calc-modal--desktop-two .calc-modal-content,
    .calc-modal.calc-modal--desktop-two .calc-bubble-body,
    .desktop-two-frame-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .calc-modal.calc-modal--desktop-two .desktop-two-frame {
        width: 100%;
        max-width: 100%;
        height: calc(100dvh - 16px);
        min-height: 0;
    }
}
.desktop-three-frame-wrap {
    overflow: hidden;
    background: transparent;
    border-radius: 1.25rem;
}
.desktop-three-frame {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    overflow: auto;
    min-height: 720px;
}
.calc-modal .desktop-three-frame {
    height: min(820px, calc(100dvh - 90px));
    min-height: 620px;
}
.calc-modal.calc-modal--desktop-three {
    width: min(1240px, calc(100vw - 18px));
    max-height: calc(100dvh - 18px);
}
.calc-modal.calc-modal--desktop-three .calc-modal-shell {
    background: transparent;
    max-height: calc(100dvh - 18px);
    overflow: auto;
    box-shadow: 0 30px 80px -32px rgba(0, 0, 0, 0.6);
}
.calc-modal.calc-modal--desktop-three .calc-modal-close {
    background: rgba(15, 23, 42, 0.86);
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.25);
}
@media (max-width: 760px) {
    .calc-modal .desktop-three-frame {
        height: calc(100dvh - 92px);
        min-height: 560px;
    }
}
@media (max-width: 520px) {
    .calc-modal.calc-modal--desktop-three {
        width: min(440px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        inset: 8px auto auto 50%;
        margin: 0;
        transform: translateX(-50%);
    }
    .calc-modal.calc-modal--desktop-three .calc-modal-shell {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 1rem;
        overflow: hidden;
    }
    .calc-modal.calc-modal--desktop-three .calc-modal-content,
    .calc-modal.calc-modal--desktop-three .calc-bubble-body,
    .desktop-three-frame-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .calc-modal.calc-modal--desktop-three .desktop-three-frame {
        width: 100%;
        max-width: 100%;
        height: calc(100dvh - 16px);
        min-height: 0;
    }
}
.life-calc-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) 220px;
    gap: 1.25rem;
    align-items: stretch;
    margin-bottom: 1.6rem;
}
.life-calc-badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.9rem; }
.life-calc-badge {
    --badge-color: var(--color-primary);
    color: var(--badge-color);
    border: 1px solid color-mix(in srgb, var(--badge-color) 36%, transparent);
    background: color-mix(in srgb, var(--badge-color) 10%, transparent);
    border-radius: 999px;
    padding: .35rem .7rem;
    font-size: .78rem;
    font-weight: 800;
}
.life-calc-kicker {
    margin: 0 0 .4rem;
    color: var(--color-primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .76rem;
}
.life-calc h2 {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 3rem);
    letter-spacing: -.055em;
}
.life-calc-hero p:not(.life-calc-kicker) {
    margin: .7rem 0 0;
    color: var(--color-muted);
    max-width: 720px;
}
.life-calc-score {
    display: grid;
    align-content: center;
    gap: .25rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    padding: 1.25rem;
    min-height: 170px;
    box-shadow: 0 24px 42px -28px var(--color-primary);
}
.life-calc-score,
.life-calc-score span,
.life-calc-score strong,
.life-calc-score small {
    color: #fff;
}
.life-calc-score span { opacity:.82; font-weight:800; text-transform:uppercase; letter-spacing:.09em; font-size:.75rem; }
.life-calc-score strong { font-size:2rem; line-height:1; letter-spacing:-.05em; }
.life-calc-score small { opacity:.86; }
.life-calc-layout {
    display: grid;
    grid-template-columns: minmax(280px,.82fr) minmax(0,1.18fr);
    gap: 1.25rem;
    align-items: start;
}
.life-calc-form,
.life-results {
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 1.5rem;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(14px);
    padding: 1.25rem;
}
[data-theme="dark"] .life-calc-form,
[data-theme="dark"] .life-results {
    background: rgba(15,23,42,.52);
}
.life-field { display:grid; gap:.45rem; margin-bottom: 1rem; }
.life-field label { font-weight:800; font-size:.92rem; }
.life-field input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    padding: .9rem 1rem;
}
.life-input-wrap { position:relative; }
.life-input-wrap input { padding-right: 5.6rem; }
.life-input-wrap span {
    position:absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    font-weight:700;
    font-size:.85rem;
}
.life-help-btn {
    justify-self: start;
    border: none;
    background: none;
    color: #2563eb;
    font-weight: 800;
    cursor: pointer;
    padding: .2rem 0;
}
[data-theme="dark"] .life-help-btn { color: #60a5fa; }
.life-field-hint { font-size: .78rem; color: var(--color-muted, #64748b); margin-top: .25rem; }
.life-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.2rem; }
.contract-review-box {
    margin-top: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
    padding: 1rem;
}
.contract-review-kicker {
    margin: 0 0 .25rem;
    color: var(--color-primary);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.contract-review-box h3 {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
}
.contract-review-box p {
    color: var(--color-muted);
    line-height: 1.5;
    margin: .25rem 0 .85rem;
}
.contract-review-fields {
    display: grid;
    gap: .65rem;
    margin-bottom: .85rem;
}
.contract-upload-label {
    display: grid;
    gap: .45rem;
    border: 1px dashed color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
    padding: .85rem;
    cursor: pointer;
    font-weight: 800;
}
.contract-upload-label input {
    font-size: .9rem;
}
.contract-review-input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: .9rem;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    padding: .75rem .85rem;
}
.contract-review-note {
    font-size: .82rem;
}
.contract-review-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(26, 115, 232, .22);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: cr-spin .75s linear infinite;
    vertical-align: middle;
    margin-left: 10px;
    flex-shrink: 0;
}
@keyframes cr-spin {
    to { transform: rotate(360deg); }
}
.contract-review-status {
    margin-top: .75rem;
    font-size: .9rem;
    font-weight: 800;
}
.contract-review-status.is-ok { color: #15803d; }
.contract-review-status.is-error { color: #b91c1c; }
.contract-review-status.is-loading { color: var(--color-primary); }
.life-results {
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:.85rem;
}
.life-result-card {
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--color-surface) 88%, #fff);
    padding: 1rem;
    box-shadow: 0 16px 38px -32px rgba(15,23,42,.5);
}
[data-theme="dark"] .life-result-card { background: rgba(30,41,59,.76); }
.life-result-card--featured {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(26,115,232,.08), var(--color-surface));
}
.life-result-card span {
    display:block;
    color: var(--color-muted);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
    font-size:.72rem;
    margin-bottom:.35rem;
}
.life-result-card strong {
    display:block;
    color: #2563eb;
    font-size: clamp(1.35rem, 3vw, 2rem);
    letter-spacing:-.05em;
    margin-bottom:.35rem;
}
[data-theme="dark"] .life-result-card strong { color: #60a5fa; }
.life-result-card small { color: var(--color-muted); line-height:1.45; }
.life-help-modal {
    width: min(560px, 92vw);
    max-height: min(82vh, 680px);
    margin: auto;
    inset: 0;
    border: none;
    border-radius: 1.2rem;
    padding: 1.4rem;
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: 0 28px 90px rgba(0,0,0,.28);
}
.life-help-modal::backdrop { background: rgba(15,23,42,.58); }
.life-help-modal h3 { margin-top:0; }
.life-help-modal p { color: var(--color-muted); line-height:1.55; }
.mortgage-calc {
    border-color: color-mix(in srgb, #2563eb 24%, var(--color-border));
}
.mortgage-calc::before {
    background: linear-gradient(135deg, rgba(37,99,235,.22), transparent);
}
.mortgage-score {
    background: linear-gradient(135deg, #1d4ed8, color-mix(in srgb, var(--color-primary) 55%, #0f172a));
}
.mortgage-results {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

/* Premium mortgage calculator */
.mortgage-premium {
    --mortgage-bg: color-mix(in srgb, var(--color-primary) 16%, #0f172a);
    --mortgage-panel: color-mix(in srgb, var(--color-primary) 8%, #071126);
    --mortgage-panel-2: color-mix(in srgb, var(--color-secondary) 7%, #0a1430);
    --mortgage-line: rgba(107, 130, 181, .18);
    --mortgage-muted: #7180a2;
    --mortgage-text: #eef4ff;
    --mortgage-orange: var(--color-secondary);
    --mortgage-blue: var(--color-primary);
    --mortgage-green: #22c55e;
    overflow: hidden;
    border: 0;
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 9% 0%, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 34%),
        radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 32%),
        var(--mortgage-bg);
    color: var(--mortgage-text);
    padding: clamp(1rem, 2vw, 1.4rem);
    box-shadow: none;
}
.mortgage-premium-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.mortgage-premium-top h2 {
    margin: 0 0 .85rem;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    letter-spacing: -.035em;
    color: #fff;
}
.mortgage-premium-top .btn {
    white-space: nowrap;
    border-color: color-mix(in srgb, var(--color-secondary) 42%, rgba(255,255,255,.16));
    color: #fff;
    background: color-mix(in srgb, var(--color-secondary) 16%, transparent);
}
.mortgage-premium-grid {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1fr);
    gap: 1.35rem;
}
.mortgage-controls,
.mortgage-output {
    border-radius: 1.1rem;
}
.mortgage-kicker {
    margin: 0 0 .9rem;
    color: #66789f;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.mortgage-controls h3 {
    margin: 0 0 1.35rem;
    color: #fff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    line-height: 1.02;
    letter-spacing: -.04em;
}
.mortgage-controls h3 em {
    color: color-mix(in srgb, var(--color-secondary) 82%, #fff);
    font-style: italic;
}
.mortgage-slider-field {
    position: relative;
    display: grid;
    gap: .55rem;
    margin-bottom: 1.25rem;
    padding-top: 2.1rem;
}
.mortgage-slider-field label {
    color: #7b8caf;
    font-size: .88rem;
    font-weight: 750;
}
.mortgage-slider-field output {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 150px;
    text-align: right;
    border-radius: .65rem;
    background: rgba(3, 9, 25, .92);
    color: #f8fafc;
    padding: .42rem .7rem;
    font-weight: 900;
}
.mortgage-slider-field small {
    color: #66789f;
    font-weight: 800;
}
.mortgage-slider-field input[type=range] {
    width: 100%;
    accent-color: var(--mortgage-orange);
}
.mortgage-slider-field input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: #1d376d;
}
.mortgage-slider-field input[type=range]::-webkit-slider-thumb {
    margin-top: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mortgage-orange);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-secondary) 18%, transparent);
}
.mortgage-ltv {
    margin-top: 1.3rem;
    border-radius: .9rem;
    background: #050d20;
    padding: 1rem;
}
.mortgage-ltv div:first-child {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: #66789f;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.mortgage-ltv strong { color: #22c55e; letter-spacing: 0; }
.mortgage-ltv-track {
    height: 8px;
    margin: .75rem 0 .55rem;
    overflow: hidden;
    border-radius: 999px;
    background: #16315f;
}
.mortgage-ltv-track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #22c55e;
    transition: width .25s ease, background .25s ease;
}
.mortgage-ltv small { color: #66789f; }
.mortgage-output {
    background: rgba(4, 10, 27, .72);
    border: 1px solid rgba(107,130,181,.13);
    padding: 1.35rem;
}
.mortgage-output-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: .8rem;
}
.mortgage-output-head p,
.mortgage-overpay p {
    margin: 0;
    color: #6f7fa0;
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .11em;
}
.mortgage-output-head small,
.mortgage-output-head span,
.mortgage-overpay span {
    display: block;
    color: #7180a2;
    font-size: .82rem;
}
#mortgagePremiumMonthly {
    display: block;
    margin: .45rem 0 .12rem;
    color: color-mix(in srgb, var(--color-secondary) 86%, #fff);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    line-height: .92;
    letter-spacing: -.06em;
}
.mortgage-overpay {
    text-align: right;
}
.mortgage-overpay strong {
    display: block;
    margin: .45rem 0 .1rem;
    color: #f8fafc;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
}
.mortgage-chart-wrap {
    border-top: 1px solid var(--mortgage-line);
    border-bottom: 1px solid var(--mortgage-line);
    margin: 1.1rem 0 .75rem;
    padding: .65rem 0;
}
.mortgage-premium-chart {
    display: block;
    width: 100%;
    min-height: 300px;
}
.mortgage-premium-chart text {
    fill: #66789f;
    font-size: 12px;
}
.mortgage-premium-chart .grid {
    stroke: rgba(107,130,181,.14);
    stroke-width: 1;
}
.mortgage-legend {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    color: #7180a2;
    font-size: .82rem;
    font-weight: 800;
}
.mortgage-legend span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.mortgage-legend i {
    width: .8rem;
    height: .8rem;
    border-radius: .25rem;
}
.mortgage-legend .principal { background: var(--color-secondary); }
.mortgage-legend .interest { background: var(--color-primary); }
.mortgage-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    margin-top: 1.4rem;
}
.mortgage-summary div {
    border: 1px solid rgba(107,130,181,.16);
    border-radius: .85rem;
    background: rgba(11,24,53,.62);
    padding: .85rem;
}
.mortgage-summary span {
    display: block;
    color: #66789f;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.mortgage-summary strong {
    display: block;
    margin-top: .4rem;
    color: #f8fafc;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.25rem;
}
.mortgage-summary div:nth-child(2) strong { color: var(--mortgage-orange); }
.mortgage-note {
    margin: 1rem 0 0;
    color: #66789f;
    font-size: .78rem;
    line-height: 1.55;
}
@media (max-width: 980px) {
    .mortgage-premium-grid,
    .mortgage-output-head,
    .mortgage-summary {
        grid-template-columns: 1fr;
    }
    .mortgage-output-head {
        display: grid;
    }
    .mortgage-overpay { text-align: left; }
}
@media (max-width: 900px) {
    .calc-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .life-calc-hero,
    .life-calc-layout { grid-template-columns: 1fr; }
    .life-calc-score { min-height: auto; }
}
@media (max-width: 640px) {
    .calc-card-grid { grid-template-columns: 1fr; }
    .life-results { grid-template-columns: 1fr; }
    .calc-bubble { border-radius: 1.35rem; }
    .calc-bubble-toggle { min-height: 150px; }
    .calc-bubble-text small { white-space: normal; }
    .calc-modal.calc-modal--mortgage {
        width: min(420px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        inset: 8px auto auto 50%;
        margin: 0;
        transform: translateX(-50%);
    }
    .calc-modal.calc-modal--mortgage .calc-modal-shell {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 1rem;
        overflow: auto;
        overflow-x: hidden;
    }
    .calc-modal--mortgage .calc-modal-close {
        top: .45rem;
        right: .45rem;
        width: 32px;
        height: 32px;
        font-size: 1.15rem;
    }
    .calc-modal--mortgage .calc-modal-content {
        min-height: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .mortgage-premium {
        min-height: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        border-radius: 1rem;
        padding: .55rem;
    }
    .mortgage-premium-top {
        display: grid;
        gap: .45rem;
        margin-bottom: .45rem;
        padding-right: 2.25rem;
    }
    .mortgage-premium-top h2 {
        margin-bottom: 0;
        font-size: 1.2rem;
    }
    .mortgage-premium-top .btn {
        width: fit-content;
        padding: .42rem .65rem;
        font-size: .72rem;
        border-radius: .7rem;
    }
    .mortgage-premium-grid {
        grid-template-columns: 1fr;
        gap: .55rem;
    }
    .mortgage-controls h3 {
        display: none;
    }
    .mortgage-kicker {
        display: none;
    }
    .mortgage-slider-field {
        gap: .22rem;
        margin-bottom: .52rem;
        padding-top: 1.42rem;
    }
    .mortgage-slider-field label {
        font-size: .72rem;
    }
    .mortgage-slider-field output {
        min-width: 0;
        max-width: 60%;
        padding: .24rem .42rem;
        font-size: .72rem;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mortgage-slider-field input[type=range]::-webkit-slider-runnable-track {
        height: 4px;
    }
    .mortgage-slider-field input[type=range]::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
        margin-top: -6px;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 16%, transparent);
    }
    .mortgage-ltv {
        margin-top: .45rem;
        padding: .55rem;
    }
    .mortgage-ltv div:first-child {
        font-size: .64rem;
        letter-spacing: .08em;
    }
    .mortgage-ltv-track {
        height: 6px;
        margin: .45rem 0 .35rem;
    }
    .mortgage-ltv small {
        font-size: .7rem;
        line-height: 1.3;
    }
    .mortgage-output {
        padding: .6rem;
        border-radius: .85rem;
    }
    .mortgage-output-head {
        gap: .45rem;
        margin-bottom: .3rem;
    }
    #mortgagePremiumMonthly {
        margin: .25rem 0 .05rem;
        font-size: clamp(1.65rem, 9vw, 2.35rem);
    }
    .mortgage-overpay strong {
        margin: .25rem 0 .05rem;
        font-size: 1rem;
    }
    .mortgage-output-head p,
    .mortgage-overpay p {
        font-size: .62rem;
        letter-spacing: .08em;
    }
    .mortgage-output-head small,
    .mortgage-output-head span,
    .mortgage-overpay span {
        font-size: .7rem;
    }
    .mortgage-chart-wrap {
        margin: .35rem 0;
        padding: .22rem 0;
    }
    .mortgage-premium-chart {
        min-height: 145px;
        max-height: 165px;
    }
    .mortgage-premium-chart text {
        font-size: 9px;
    }
    .mortgage-legend {
        gap: .55rem;
        font-size: .68rem;
    }
    .mortgage-summary {
        grid-template-columns: 1fr;
        gap: .45rem;
        margin-top: .8rem;
    }
    .mortgage-summary div {
        padding: .65rem .75rem;
        border-radius: .75rem;
    }
    .mortgage-summary span {
        font-size: .65rem;
        letter-spacing: .08em;
    }
    .mortgage-summary strong {
        margin-top: .25rem;
        font-size: 1.05rem;
    }
    .mortgage-note {
        margin-top: .5rem;
        font-size: .68rem;
        line-height: 1.35;
    }
}
@media (max-width: 430px) {
    .mortgage-chart-wrap,
    .mortgage-legend {
        display: none;
    }
    .mortgage-premium {
        padding: .45rem;
    }
    .mortgage-summary {
        margin-top: .55rem;
    }
}

/* ??? 14. Kontakt ?????????????????????????????????????????? */
.contact.section  { padding: 6.5rem 0; }
[data-theme="dark"] .contact { background: #0f172a; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 5rem;
    align-items: start;
}
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* Kontakt – ContactCard6 varianta: kontaktní info je nahrazeno kartou nad formulářem,
   takže grid se redukuje na jeden sloupec s centrovaným formulářem. */
.contact-grid--card6 {
    grid-template-columns: minmax(0, 46rem);
    justify-content: center;
    gap: 3rem;
}
@media (max-width: 768px) {
    .contact-grid--card6 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
.contact-grid--card6 .contact-form-wrap {
    max-width: 46rem;
    margin: 0 auto;
    width: 100%;
}
.contact-card6-section {
    padding: 3rem 0 0;
}
.contact-card6 {
    /* Respektuje barvy webu – paddings/fonty jdou z komponenty. */
    --contact-card6-text: var(--color-text, #0f172a);
    --contact-card6-muted: var(--color-muted, #525252);
    --contact-card6-border: color-mix(in srgb, var(--color-text, #0f172a) 10%, transparent);
    --contact-card6-panel-bg: color-mix(in srgb, var(--color-bg, #ffffff) 96%, color-mix(in srgb, var(--color-primary, #1a73e8) 8%, transparent));
    --contact-card6-icon-bg: var(--color-bg, #ffffff);
    --contact-card6-button-bg: var(--color-primary, #0a0a0a);
    --contact-card6-button-text: var(--color-on-primary, #ffffff);
    --contact-card6-button-bg-hover: color-mix(in srgb, var(--color-primary, #0a0a0a) 85%, #000);
}
[data-theme="dark"] .contact-card6 {
    --contact-card6-bg: transparent;
    --contact-card6-text: var(--color-text, #ffffff);
    --contact-card6-panel-bg: rgba(255, 255, 255, 0.04);
    --contact-card6-border: rgba(255, 255, 255, 0.12);
    --contact-card6-icon-bg: rgba(255, 255, 255, 0.06);
    --contact-card6-muted: var(--color-muted, #a3a3a3);
}

/* Kontakt – ContactCard5 varianta: dvousloupcová sekce nahrazuje kontaktní info nad formulářem.
   Formulář zůstává v jednom centrováném sloupci pod sekcí. */
.contact-grid--card5 {
    grid-template-columns: minmax(0, 72rem);
    justify-content: center;
    gap: 3rem;
}
@media (max-width: 768px) {
    .contact-grid--card5 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
.contact-grid--card5 .contact-form-wrap {
    max-width: 46rem;
    margin: 0 auto;
    width: 100%;
}
.contact-card5-section {
    padding: 3rem 0 0;
}
.contact-card5 {
    /* Napojení na barvy webu – paddings/fonty jdou z komponenty. */
    --contact-card5-bg: transparent;
    --contact-card5-text: var(--color-text, #0f172a);
    --contact-card5-muted: var(--color-muted, #525252);
    --contact-card5-label: color-mix(in srgb, var(--color-text, #0f172a) 45%, transparent);
    --contact-card5-border: color-mix(in srgb, var(--color-text, #0f172a) 10%, transparent);
    --contact-card5-border-hover: color-mix(in srgb, var(--color-text, #0f172a) 22%, transparent);
    --contact-card5-action-bg: var(--color-primary, #0a0a0a);
    --contact-card5-action-text: var(--color-on-primary, #ffffff);
    --contact-card5-action-muted: color-mix(in srgb, var(--color-on-primary, #ffffff) 70%, transparent);
    --contact-card5-action-secondary-bg: var(--color-bg, #ffffff);
    --contact-card5-action-icon-border: color-mix(in srgb, var(--color-on-primary, #ffffff) 30%, transparent);
    --contact-card5-panel-bg: color-mix(in srgb, var(--color-bg, #ffffff) 96%, color-mix(in srgb, var(--color-primary, #1a73e8) 8%, transparent));
    --contact-card5-progress-bg: color-mix(in srgb, var(--color-text, #0f172a) 30%, transparent);
    --contact-card5-progress-fill: var(--color-text, #0f172a);
}
[data-theme="dark"] .contact-card5 {
    --contact-card5-text: var(--color-text, #ffffff);
    --contact-card5-muted: var(--color-muted, #a3a3a3);
    --contact-card5-label: rgba(255, 255, 255, 0.4);
    --contact-card5-border: rgba(255, 255, 255, 0.12);
    --contact-card5-border-hover: rgba(255, 255, 255, 0.22);
    --contact-card5-action-bg: var(--color-primary, #fafafa);
    --contact-card5-action-text: var(--color-on-primary, #0a0a0a);
    --contact-card5-action-muted: color-mix(in srgb, var(--color-on-primary, #0a0a0a) 60%, transparent);
    --contact-card5-action-secondary-bg: rgba(255, 255, 255, 0.02);
    --contact-card5-action-icon-border: color-mix(in srgb, var(--color-on-primary, #0a0a0a) 30%, transparent);
    --contact-card5-panel-bg: rgba(255, 255, 255, 0.04);
    --contact-card5-progress-bg: rgba(255, 255, 255, 0.3);
    --contact-card5-progress-fill: #ffffff;
}

/* Cta5 – spodní výzva (Služby / O mně) */
.cta5-section {
    padding: 1rem 0 3rem;
}
.cta5 {
    --cta5-bg: transparent;
    --cta5-text: var(--color-text, #0f172a);
    --cta5-muted: var(--color-muted, #525252);
    --cta5-mask: var(--color-bg, #ffffff);
    --cta5-video-bg: color-mix(in srgb, var(--color-text, #0f172a) 6%, transparent);
    --cta5-button-bg: var(--color-primary, #f9a8d4);
    --cta5-button-text: var(--color-on-primary, #0a0a0a);
    --cta5-button-bg-hover: color-mix(in srgb, var(--color-primary, #f9a8d4) 88%, #000);
}
[data-theme="dark"] .cta5 {
    --cta5-mask: var(--color-bg, #0a0a0a);
    --cta5-video-bg: rgba(255, 255, 255, 0.04);
}

/* Cta4 – spodní výzva s pásem fotek (Služby / O mně) */
.cta4-section {
    padding: 1rem 0 0;
    overflow: hidden;
}
.cta4 {
    --cta4-bg: transparent;
    --cta4-text: var(--color-text, #0f172a);
    --cta4-muted: var(--color-muted, #525252);
    --cta4-thumb-bg: color-mix(in srgb, var(--color-text, #0f172a) 6%, transparent);
    --cta4-button-bg: var(--color-primary, #fde047);
    --cta4-button-text: var(--color-on-primary, #0a0a0a);
    --cta4-button-bg-hover: color-mix(in srgb, var(--color-primary, #fde047) 88%, #000);
    --cta4-button-icon-bg: var(--color-text, #0a0a0a);
    --cta4-button-icon-text: var(--color-bg, #ffffff);
}
[data-theme="dark"] .cta4 {
    --cta4-thumb-bg: rgba(255, 255, 255, 0.05);
}

/* Cta8 – spodní výzva s obřím nadpisem a světelnou maskou (Služby / O mně) */
.cta8-section {
    padding: 0;
    overflow: hidden;
}
.cta8 {
    --cta8-bg: transparent;
    --cta8-text: var(--color-text, #0f172a);
    --cta8-muted: var(--color-muted, #737373);
    --cta8-corner: color-mix(in srgb, var(--color-text, #0f172a) 18%, transparent);
    --cta8-button-bg: var(--color-text, #171717);
    --cta8-button-text: var(--color-bg, #ffffff);
}
[data-theme="dark"] .cta8 {
    --cta8-corner: color-mix(in srgb, var(--color-text, #ffffff) 24%, transparent);
    --cta8-button-bg: var(--color-bg, #ffffff);
    --cta8-button-text: var(--color-text, #171717);
}

/* Cta9 – spodní výzva v kartě s plovoucími prvky (Služby / O mně) */
.cta9-section {
    padding: 0;
}
.cta9 {
    --cta9-text: var(--color-text, #0f172a);
    --cta9-muted: var(--color-muted, #737373);
    --cta9-panel-bg: var(--color-bg, #ffffff);
    --cta9-panel-border: color-mix(in srgb, var(--color-text, #0f172a) 10%, transparent);
    --cta9-card-bg: var(--color-bg, #ffffff);
    --cta9-card-border: color-mix(in srgb, var(--color-text, #0f172a) 6%, transparent);
    --cta9-thumb-bg: color-mix(in srgb, var(--color-text, #0f172a) 8%, transparent);
    --cta9-icon-bg: var(--color-bg, #ffffff);
    --cta9-button-bg: var(--color-text, #171717);
    --cta9-button-text: var(--color-bg, #ffffff);
}
[data-theme="dark"] .cta9 {
    --cta9-panel-border: color-mix(in srgb, var(--color-text, #ffffff) 14%, transparent);
    --cta9-card-border: color-mix(in srgb, var(--color-text, #ffffff) 10%, transparent);
}

/* Cta10 – spodní sekce odběru novinek na blogu */
.blog-subscribe-section--cta10 {
    padding: 0;
    background: transparent;
}
.blog-subscribe-section--cta10 .container {
    max-width: 100%;
    padding: 0;
}
.cta10 {
    --cta10-text: var(--color-text, #0f172a);
    --cta10-muted: var(--color-muted, #737373);
    --cta10-bg: transparent;
    --cta10-panel-bg: color-mix(in srgb, var(--color-text, #0f172a) 4%, transparent);
    --cta10-panel-border: color-mix(in srgb, var(--color-text, #0f172a) 10%, transparent);
    --cta10-thumb-bg: color-mix(in srgb, var(--color-text, #0f172a) 10%, transparent);
    --cta10-input-shell-bg: var(--color-bg, #ffffff);
    --cta10-input-shell-border: color-mix(in srgb, var(--color-text, #0f172a) 12%, transparent);
    --cta10-input-bg: var(--color-bg, #ffffff);
    --cta10-input-border: color-mix(in srgb, var(--color-text, #0f172a) 12%, transparent);
    --cta10-placeholder: color-mix(in srgb, var(--color-text, #0f172a) 45%, transparent);
    --cta10-button-bg: var(--color-primary, var(--color-text, #171717));
    --cta10-button-text: var(--color-bg, #ffffff);
    --cta10-accent: var(--color-primary, var(--color-text, #0f172a));
    --cta10-success: #16a34a;
    --cta10-error: #dc2626;
}
[data-theme="dark"] .cta10 {
    --cta10-panel-bg: color-mix(in srgb, var(--color-text, #ffffff) 4%, transparent);
    --cta10-panel-border: color-mix(in srgb, var(--color-text, #ffffff) 14%, transparent);
    --cta10-input-shell-border: color-mix(in srgb, var(--color-text, #ffffff) 16%, transparent);
    --cta10-input-border: color-mix(in srgb, var(--color-text, #ffffff) 16%, transparent);
    --cta10-placeholder: color-mix(in srgb, var(--color-text, #ffffff) 45%, transparent);
    --cta10-button-bg: var(--color-primary, #ffffff);
    --cta10-button-text: var(--color-text, #171717);
}

.contact-info h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -.035em;
    margin-bottom: 1rem;
}
.contact-info > p { color: var(--color-muted); margin-bottom: 2.25rem; font-size: 1.0625rem; }

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.contact-icon {
    width: 46px; height: 46px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
[data-theme="dark"] .contact-icon { background: rgba(96,165,250,.12); color: #93c5fd; }

.contact-item strong {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-muted);
    margin-bottom: .2rem;
}
.contact-item a    { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.contact-item a:hover { color: var(--color-primary); }
.contact-item span { font-size: 1rem; font-weight: 500; color: var(--color-text); }
[data-theme="dark"] .contact-item a,
[data-theme="dark"] .contact-item span { color: #f1f5f9; }

.contact-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}
.contact-social-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border: 1.5px solid var(--color-border);
    border-radius: 99px;
    font-size: .875rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    transition: background .18s, border-color .18s;
}
.contact-social-link:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
[data-theme="dark"] .contact-social-link {
    background: rgba(59,130,246,.1);
    border-color: rgba(147,197,253,.28);
    color: #bfdbfe;
}
[data-theme="dark"] .contact-social-link:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}
.contact-social-link svg { flex-shrink: 0; }
.contact-cta { margin-top: 2.5rem; }
.contact-cta + .contact-cta { margin-top: .75rem; }
.contact-cta .btn-primary {
    background: #2563eb !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 16px -2px rgba(37,99,235,.32) !important;
}
.contact-cta .btn-primary:hover {
    background: #1d4ed8 !important;
    opacity: 1 !important;
}
.contact-cta .btn-outline {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}
.contact-cta .btn-outline:hover {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}
[data-theme="dark"] .contact-cta .btn-primary {
    background: #3b82f6 !important;
    color: #fff !important;
    box-shadow: 0 4px 16px -2px rgba(59,130,246,.35) !important;
}
[data-theme="dark"] .contact-cta .btn-primary:hover {
    background: #2563eb !important;
}
[data-theme="dark"] .contact-cta .btn-outline {
    background: rgba(59,130,246,.14) !important;
    border-color: rgba(147,197,253,.32) !important;
    color: #bfdbfe !important;
}
[data-theme="dark"] .contact-cta .btn-outline:hover {
    background: rgba(59,130,246,.22) !important;
    color: #dbeafe !important;
}

.contact-form-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    padding: 2.75rem;
    box-shadow: var(--sh-xl);
}
[data-theme="dark"] .contact-form-wrap { background: var(--color-surface); border-color: var(--color-border); }
.contact-form-wrap h3 {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 1.75rem;
}
.contact-hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.contact-check {
    padding: .9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--color-bg-alt);
}
.contact-check label {
    margin-bottom: .55rem;
}
[data-theme="dark"] .contact-check {
    background: rgba(15, 23, 42, .35);
}
/* ??? 15. Rezervace ???????????????????????????????????????? */
.calendar-embed {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-xl);
}
.calendar-embed iframe { display: block; width: 100%; min-height: 600px; border: none; }

/* ??? 16. Formul??e ???????????????????????????????????????? */
.form-group       { margin-bottom: 1.375rem; }
.form-group label {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: .4375rem;
    letter-spacing: .01em;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.form-control,
textarea,
input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]) {
    width: 100%;
    padding: .8125rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--r-md);
    font-size: .9375rem;
    font-family: var(--font);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    outline: none;
    line-height: 1.5;
}
.form-control:focus,
textarea:focus,
input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]):focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.form-control::placeholder { color: var(--color-muted); }
@media (max-width: 640px) {
    input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]),
    select,
    textarea,
    .form-control,
    .sub-input,
    .calc-lead-fields input,
    .life-field input,
    .blog-search-input,
    .inv-field input {
        font-size: 16px;
    }
}
textarea { resize: vertical; min-height: 130px; }
select.form-control { cursor: pointer; }

[data-theme="dark"] .form-control,
[data-theme="dark"] textarea,
[data-theme="dark"] input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]) {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]):focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,.15);
}
[data-theme="dark"] label { color: #e2e8f0; }

/* ??? 17. Alerts ??????????????????????????????????????????? */
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--r-md);
    font-size: .9375rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
[data-theme="dark"] .alert-success { background: rgba(34,197,94,.1); color: #86efac; border-color: rgba(34,197,94,.25); }
[data-theme="dark"] .alert-error   { background: rgba(239,68,68,.1); color: #fca5a5; border-color: rgba(239,68,68,.25); }

/* ??? 18. Footer ???????????????????????????????????????????? */
.site-footer {
    margin-top: auto;
}
.footer-inner {
    background:
        radial-gradient(560px 180px at 20% 0%, var(--brand-glow), transparent 65%),
        linear-gradient(135deg, var(--brand-primary-deep) 0%, #0f172a 58%, var(--brand-hero-b) 100%);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .75rem 0 .6rem;
    color: rgba(255,255,255,.75);
}

/* Bottom row: copyright left, vizitka right */
.footer-bottom-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

/* Legal block (úvod, O mně, Kontakt) */
.footer-registrace {
    margin-bottom: .5rem;
}
/* U React patiček (columns, studio, …) neleží legal blok na tmavém pásu,
   ale splývá s pozadím stránky – decentní karta místo černého pruhu.
   Silnější selektory přebijí !important pravidla html[data-footer=…]. */
html .site-footer.site-footer--react .footer-inner {
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0;
}
html .site-footer.site-footer--react .footer-registrace {
    max-width: 900px;
    margin: 0 auto 1.75rem;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-text, #0f172a) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text, #0f172a) 8%, transparent);
}
html .site-footer.site-footer--react .footer-registrace-company,
html .site-footer.site-footer--react .footer-registrace-row {
    color: var(--color-muted, #64748b) !important;
}
html .site-footer.site-footer--react .footer-registrace-title {
    color: color-mix(in srgb, var(--color-muted, #64748b) 80%, transparent) !important;
}
html .site-footer.site-footer--react .footer-registrace-company strong {
    color: var(--color-text, #0f172a) !important;
}
html[data-theme="dark"] .site-footer.site-footer--react .footer-registrace {
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.1);
}
html[data-theme="dark"] .site-footer.site-footer--react .footer-registrace-company,
html[data-theme="dark"] .site-footer.site-footer--react .footer-registrace-row {
    color: rgba(226,232,240,.6) !important;
}
html[data-theme="dark"] .site-footer.site-footer--react .footer-registrace-company strong {
    color: rgba(248,250,252,.9) !important;
}
.footer-registrace-company {
    font-size: .77rem; color: rgba(255,255,255,.5);
    margin: 0 0 .5rem; line-height: 1.5;
}
.footer-registrace-company strong { color: rgba(255,255,255,.7); }
.footer-registrace-title {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: rgba(255,255,255,.4); margin: 0 0 .4rem;
}
.footer-registrace-row {
    font-size: .72rem; color: rgba(255,255,255,.4);
    margin: .1rem 0; line-height: 1.5;
}
.footer-registrace-label { font-weight: 600; }

.footer-copy {
    font-size: .78rem; color: rgba(255,255,255,.35);
    margin: 0;
    justify-self: start;
}

/* Footer links */
.footer-vizitka-link {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3rem .75rem;
    font-size: .72rem;
    color: rgba(255,255,255,.42);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.footer-vizitka-link {
    justify-self: center;
}
.footer-gdpr-link {
    justify-self: end;
    font-size: .78rem;
    color: rgba(255,255,255,.35);
    text-decoration: none;
    transition: color .15s;
}
.footer-gdpr-link:hover { color: rgba(255,255,255,.75); }
.footer-vizitka-link:hover { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.3); }

@media (max-width: 640px) {
    .footer-bottom-row {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .footer-copy,
    .footer-gdpr-link,
    .footer-vizitka-link {
        justify-self: center;
    }
}

/* ── Klasické zápatí: respiro a struktura ── */
.site-footer:not(.site-footer--react) .footer-inner {
    padding: 2.5rem 0 1.5rem;
}
.site-footer:not(.site-footer--react) .footer-registrace {
    max-width: 880px;
    margin: 0 auto 1.75rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.site-footer:not(.site-footer--react) .footer-registrace-company { font-size: .82rem; }
.site-footer:not(.site-footer--react) .footer-registrace-row { font-size: .76rem; }
.site-footer:not(.site-footer--react) .footer-copy { font-size: .82rem; }
.site-footer:not(.site-footer--react) .footer-gdpr-link { font-size: .82rem; }
.site-footer:not(.site-footer--react) .footer-vizitka-link {
    font-size: .76rem;
    padding: .42rem .95rem;
    border-radius: 8px;
}

/* About page YouTube embed */
.about-video-floating {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    top: 48%;
    z-index: 80;
    pointer-events: none;
}
.about-video-toggle {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 70px;
    min-height: 54px;
    padding: .6rem .85rem;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 20px 45px rgba(15,23,42,.28);
    cursor: pointer;
    transition: transform var(--dur), box-shadow var(--dur);
}
.about-video-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 56px rgba(15,23,42,.36);
}
.about-video-toggle span {
    font-size: .82rem;
}
.about-video-popover {
    position: absolute;
    right: calc(100% + 1rem);
    top: 50%;
    pointer-events: auto;
    width: min(640px, calc(100vw - 8rem));
    transform: translate(18px, -50%) scale(.94);
    transform-origin: right center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.about-video-floating.is-open .about-video-popover {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%) scale(1);
}
.about-video-wrap {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/9;
    max-width: 100%;
    background: #000;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.about-video {
    width: 100%; height: 100%;
    border: none; display: block;
}
@media (max-width: 760px) {
    .about-video-floating {
        right: 1rem;
        left: 1rem;
        top: auto;
        bottom: 1rem;
        align-items: flex-end;
        justify-content: flex-end;
    }
    .about-video-popover {
        position: absolute;
        right: 0;
        bottom: 4.5rem;
        top: auto;
        width: min(100%, 520px);
        transform: translateY(12px) scale(.96);
    }
    .about-video-floating.is-open .about-video-popover {
        transform: translateY(0) scale(1);
    }
    .about-video-toggle {
        min-width: 62px;
        min-height: 50px;
    }
}

/* ??? 19. Empty / 404 ?????????????????????????????????????? */
.empty-state {
    text-align: center;
    padding: 6rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.empty-state h2 { font-size: 1.5rem; font-weight: 700; }
.empty-state p  { color: var(--color-muted); max-width: 400px; }

.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.error-inner { }
.error-code  { font-size: 8rem; font-weight: 900; line-height: 1; color: var(--color-primary); letter-spacing: -.06em; margin-bottom: .5rem; }
.error-page h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: .75rem; }
.error-page p  { color: var(--color-muted); margin-bottom: 2rem; }

/* ??? 20. BLOG ????????????????????????????????????????????? */
.blog-section { padding: 4rem 0 6rem; }
[data-theme="dark"] .blog-section { background: #0f172a; }

.blog-section.blog-section--featured {
    padding-top: 0;
    padding-bottom: 0;
}

.blog-section.blog-section--featured > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

#blog-layout1-root {
    width: 100%;
}

/* Search + hashtags */
.blog-search-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2.5rem;
    align-items: start;
    margin-bottom: 2.75rem;
}
.blog-search-left {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}
.blog-search-row { display: flex; align-items: center; gap: .625rem; }
.blog-search-form { flex: 1; min-width: 0; }
.blog-search-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.blog-search-icon {
    position: absolute;
    left: .875rem;
    color: var(--color-muted);
    pointer-events: none;
}
.blog-search-input {
    width: 100%;
    padding: .625rem .875rem .625rem 2.5rem;
    border: 2px solid var(--color-border);
    border-radius: var(--r-full);
    font-size: .9rem;
    font-family: var(--font);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    outline: none;
}
.blog-search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
[data-theme="dark"] .blog-search-input { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .blog-search-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.12); }

.blog-search-back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--r-full);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
    font-family: var(--font);
    white-space: nowrap;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    text-decoration: none;
    flex-shrink: 0;
}
.blog-search-back:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
[data-theme="dark"] .blog-search-back { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .blog-search-back:hover { border-color: #60a5fa; color: #60a5fa; }

.blog-results-count { font-size: .8125rem; color: var(--color-muted); }
[data-theme="dark"] .blog-results-count { color: #64748b; }

/* Hashtags column */
.blog-tags-right { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.blog-tags-label {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-muted);
    margin: 0 0 .15rem;
}
[data-theme="dark"] .blog-tags-label { color: #64748b; }
.blog-tags-count { font-weight: 500; opacity: .65; margin-left: .25rem; }
.blog-tags-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.blog-tags-row--primary { align-items: center; }
.blog-tags-extra {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    width: 100%;
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px dashed var(--color-border);
    align-items: center;
}
.blog-tags-extra--collapsed { display: none !important; }
[data-theme="dark"] .blog-tags-extra { border-top-color: #334155; }

.blog-tags-more {
    display: inline-flex;
    align-items: center;
    padding: .3rem .875rem;
    border-radius: var(--r-full);
    font-size: .8rem;
    font-weight: 700;
    border: 1.5px dashed var(--color-border);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-family: var(--font);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    white-space: nowrap;
}
.blog-tags-more:hover { border-color: var(--color-primary); color: var(--color-primary); }
[data-theme="dark"] .blog-tags-more { border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .blog-tags-more:hover { border-color: #60a5fa; color: #60a5fa; }

/* Hashtag pills */
.blog-tag {
    display: inline-flex;
    align-items: center;
    padding: .3125rem .8125rem;
    border-radius: var(--r-full);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    background: var(--color-bg-subtle);
    color: var(--color-muted);
    border: 1.5px solid var(--color-border);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    cursor: pointer;
}
.blog-tag:hover  { background: var(--color-primary); color: #fff; border-color: var(--color-primary); text-decoration: none; }
.blog-tag--active{ background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.blog-tag--article { font-size: .875rem; padding: .375rem .9375rem; }
[data-theme="dark"] .blog-tag { background: #1e293b; color: #94a3b8; border-color: #334155; }
[data-theme="dark"] .blog-tag:hover,
[data-theme="dark"] .blog-tag--active { background: #3b82f6; color: #fff; border-color: #3b82f6; }

@media (max-width: 640px) {
    .blog-search-area { grid-template-columns: 1fr; }
}

.blog-search-area--custom-layout {
    grid-template-columns: 1fr;
    margin-bottom: 2rem;
}

/* Blog grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
    margin-bottom: 3rem;
}

/* Blog card */
.blog-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-xl);
    border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
    text-decoration: none;
    color: var(--color-text);
}
[data-theme="dark"] .blog-card { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .blog-card:hover { border-color: #3b82f6; }

.blog-card-img { width: 100%; height: 210px; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-img--empty { background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--color-muted); }
[data-theme="dark"] .blog-card-img--empty { background: #263148; }

.blog-card-body {
    padding: 1.5rem 1.625rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .625rem;
}
.blog-card-date {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-muted);
}
[data-theme="dark"] .blog-card-date { color: #94a3b8; }
.blog-card-cat {
    display: inline-flex;
    align-items: center;
    padding: .2rem .7rem;
    border-radius: var(--r-full);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .125rem;
}
.blog-card-title {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.38;
    letter-spacing: -.02em;
    color: var(--color-text);
}
[data-theme="dark"] .blog-card-title { color: #f1f5f9; }
.blog-card-perex {
    font-size: .9375rem;
    color: var(--color-muted);
    line-height: 1.65;
    flex: 1;
}
[data-theme="dark"] .blog-card-perex { color: #94a3b8; }
.blog-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .625rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    transition: gap var(--dur) var(--ease);
}
.blog-card-cta:hover { gap: .625rem; text-decoration: none; }
[data-theme="dark"] .blog-card-cta { color: #60a5fa; }

.blog-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.blog-card-tag  { font-size: .75rem; color: var(--color-primary); font-weight: 700; }
[data-theme="dark"] .blog-card-tag { color: #93c5fd; }

/* Blog ? zp?t */
.blog-back {
    margin-bottom: 2rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--color-primary);
}
.blog-back:hover { text-decoration: none; opacity: .8; }

/* Blog article (single) */
.blog-article {
    max-width: 780px;
    margin: 0 auto;
    padding: 3.5rem 0 6rem;
}
[data-theme="dark"] .blog-article { background: transparent; color: #e2e8f0; }
.blog-article-hero {
    width: 100%;
    border-radius: var(--r-xl);
    margin-bottom: 2.5rem;
    object-fit: cover;
    max-height: 440px;
    box-shadow: var(--sh-xl);
}
.blog-article-body { padding: 0 .25rem; }
.blog-article-date {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: .625rem;
}
[data-theme="dark"] .blog-article-date { color: #64748b; }
.blog-article-title {
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.04em;
    margin-bottom: 1.25rem;
}
[data-theme="dark"] .blog-article-title { color: #f1f5f9; }
.blog-article-perex {
    font-size: 1.125rem;
    color: var(--color-muted);
    line-height: 1.75;
    margin-bottom: 1.75rem;
    border-left: 4px solid var(--color-primary);
    padding-left: 1.125rem;
}
[data-theme="dark"] .blog-article-perex { color: #94a3b8; }

.blog-article-content {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--color-text-2);
}
[data-theme="dark"] .blog-article-content { color: #cbd5e1; }
.blog-article-content h1,
.blog-article-content h2,
.blog-article-content h3 { margin: 1.75rem 0 .75rem; color: var(--color-text); font-weight: 700; letter-spacing: -.025em; }
[data-theme="dark"] .blog-article-content h1,
[data-theme="dark"] .blog-article-content h2,
[data-theme="dark"] .blog-article-content h3 { color: #f1f5f9; }
.blog-article-content p  { margin-bottom: 1.125rem; }
.blog-article-content ul,
.blog-article-content ol { margin: .75rem 0 1.25rem 1.625rem; }
.blog-article-content li { margin-bottom: .4rem; }
.blog-article-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    color: var(--color-muted);
    font-style: italic;
}
.blog-article-content a { color: var(--color-primary); text-decoration: underline; }
.blog-article-content strong { font-weight: 700; color: var(--color-text); }
[data-theme="dark"] .blog-article-content strong { color: #f1f5f9; }
.blog-article-content em { font-style: italic; }
.blog-article-content u  { text-decoration: underline; }
.blog-article-content s  { text-decoration: line-through; }
.blog-article-content code {
    background: var(--color-bg-subtle);
    padding: .125em .4em;
    border-radius: .3125rem;
    font-size: .9em;
}
[data-theme="dark"] .blog-article-content code { background: #263148; color: #e2e8f0; }
.blog-article-content pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.25rem 1.5rem;
    border-radius: var(--r-md);
    overflow-x: auto;
    margin: 1.25rem 0;
}
[data-theme="dark"] .blog-article-content pre { background: #0a0f1e; }

.blog-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
[data-theme="dark"] .blog-article-tags { border-top-color: #334155; }

/* Share buttons */
.blog-share {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
[data-theme="dark"] .blog-share { border-top-color: #334155; }
.blog-share-label {
    display: block;
    font-size: .8125rem;
    font-weight: 800;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .875rem;
}
.share-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: var(--r-full);
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.share-btn:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.22); text-decoration: none; }
.share-btn:active { transform: translateY(0); }
.share-btn--fb      { background: #1877f2; }
.share-btn--x       { background: #111; }
.share-btn--threads { background: #000; }
.share-btn--ig      { background: linear-gradient(135deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); }
.share-btn--tt      { background: #010101; }
.share-btn--wa      { background: #25d366; }
.share-btn--li      { background: #0a66c2; }
.share-btn--copy    { background: #64748b; }

/* Blog ? kategorie filter */
.blog-cats-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.blog-cat-chip {
    display: inline-flex;
    align-items: center;
    padding: .4375rem 1.0625rem;
    border-radius: var(--r-full);
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--color-border);
    color: var(--color-muted);
    background: transparent;
    transition: all var(--dur) var(--ease);
    letter-spacing: .02em;
}
.blog-cat-chip:hover { transform: translateY(-1px); border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }

/* Pagination */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}
.blog-page-btn {
    padding: .625rem 1.25rem;
    border-radius: var(--r-full);
    border: 2px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    background: var(--color-surface);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    font-family: var(--font);
    cursor: pointer;
}
.blog-page-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); text-decoration: none; }
[data-theme="dark"] .blog-page-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .blog-page-btn:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; }

.blog-page-numbers { display: flex; gap: .375rem; }
.blog-page-num {
    width: 2.625rem; height: 2.625rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    background: var(--color-surface);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    cursor: pointer;
    font-family: var(--font);
}
.blog-page-num:hover     { background: var(--color-primary); color: #fff; border-color: var(--color-primary); text-decoration: none; }
.blog-page-num--active   { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
[data-theme="dark"] .blog-page-num { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .blog-page-num--active { background: #3b82f6; border-color: #3b82f6; color: #fff; }

/* Blog subscription */
.blog-subscribe-section {
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        color-mix(in srgb, var(--color-primary) 68%, #000) 100%);
    padding: 4.5rem 0;
}
[data-theme="dark"] .blog-subscribe-section { background: #1e293b; }
.blog-subscribe-box {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r-xl);
    padding: 2.75rem 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
    backdrop-filter: blur(8px);
}
.blog-subscribe-icon {
    width: 68px; height: 68px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.blog-subscribe-text { flex: 1; min-width: 200px; }
.blog-subscribe-text h3 {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: .3rem;
}
.blog-subscribe-text p  { color: rgba(255,255,255,.72); font-size: .9375rem; }
.blog-subscribe-form {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
    flex: 2;
    min-width: 280px;
}
.sub-input {
    flex: 1;
    min-width: 180px;
    background: rgba(255,255,255,.94);
    border: 1.5px solid rgba(15,23,42,.18);
    color: #0f172a;
    border-radius: var(--r-full);
    padding: .8125rem 1.375rem;
    font-size: .9375rem;
    font-family: var(--font);
    outline: none;
    transition: background var(--dur), border-color var(--dur);
}
.sub-input::placeholder { color: rgba(15,23,42,.58); opacity: 1; }
.sub-input:focus { background: #fff; border-color: rgba(15,23,42,.42); }
[data-theme="dark"] .sub-input { background: rgba(255,255,255,.08); color: #e2e8f0; border-color: rgba(255,255,255,.2); }
[data-theme="dark"] .sub-input::placeholder { color: rgba(226,232,240,.62); opacity: 1; }
.sub-btn {
    background: #fff;
    color: var(--color-primary);
    font-weight: 800;
    border: none;
    border-radius: var(--r-full);
    padding: .8125rem 1.875rem;
    cursor: pointer;
    font-size: .9375rem;
    font-family: var(--font);
    transition: opacity var(--dur), transform var(--dur) var(--ease);
    white-space: nowrap;
}
.sub-btn:hover { opacity: .9; transform: translateY(-1px); }

/* No results */
.blog-no-results {
    text-align: center;
    padding: 4rem 2rem;
}
.blog-no-results p { color: var(--color-muted); margin-bottom: 1.5rem; }

/* ??? 21. Footer ? Certifikace ????????????????????????????? */
[data-theme="dark"] .footer-registrace {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
}

/* ??? 22. About ? Tituly badges ???????????????????????????? */
/* (Already defined in About section above) */

/* ============================================================
   ULTRA PREMIUM BRAND SYSTEM
   Keeps tenant colors tasteful even when users pick rough combos.
   ============================================================ */

:root {
    --brand-primary-deep:   color-mix(in srgb, var(--color-primary) 26%, #020617);
    --brand-primary-ink:    color-mix(in srgb, var(--color-primary) 14%, #0f172a);
    --brand-primary-soft:   color-mix(in srgb, var(--color-primary) 10%, transparent);
    --brand-primary-line:   color-mix(in srgb, var(--color-primary) 24%, transparent);
    --brand-secondary-soft: color-mix(in srgb, var(--color-secondary) 12%, transparent);
    --brand-accent:         color-mix(in srgb, var(--color-secondary) 35%, var(--color-primary));
    --brand-hero-a:         color-mix(in srgb, var(--color-primary) 28%, #07111f);
    --brand-hero-b:         color-mix(in srgb, var(--color-secondary) 18%, #020617);
    --brand-glow:           color-mix(in srgb, var(--color-primary) 26%, transparent);
    --lux-bg:               #f7f4ee;
    --lux-surface:          rgba(255,255,255,.86);
}

[data-theme="dark"] {
    --lux-bg:      #0b1120;
    --lux-surface: rgba(15,23,42,.78);
}

/* ??? Background styles ? applied on <html data-bg="..."> ???????????????
   Strategy: html gets the pattern; sections use var(--color-bg) which we
   override to a semi-transparent value so the html pattern shows through.
   ??????????????????????????????????????????????????????????????????????? */

/* --- default: clean white light / premium dark --- */
html[data-bg="default"] {
    background: #fff;
}
html[data-bg="default"][data-theme="dark"] {
    background:
        radial-gradient(900px 420px at 10% -10%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 62%),
        radial-gradient(740px 380px at 95%  8%,  color-mix(in srgb, var(--color-secondary) 12%, transparent), transparent 58%),
        linear-gradient(180deg, #0f172a 0%, #0b1120 50%, #0f172a 100%);
}

/* --- minimal: pure flat, no effects --- */
html[data-bg="minimal"] { background: #f8fafc; }
html[data-bg="minimal"][data-theme="dark"] { background: #0f172a; }

/* --- mesh: large color-blob mesh (sections semi-transparent) --- */
html[data-bg="mesh"] {
    background:
        radial-gradient(ellipse 80% 60% at 10% 10%, color-mix(in srgb, var(--color-primary)   22%, transparent), transparent 68%),
        radial-gradient(ellipse 70% 55% at 90% 80%, color-mix(in srgb, var(--color-secondary) 18%, transparent), transparent 65%),
        radial-gradient(ellipse 55% 45% at 50% 45%, color-mix(in srgb, var(--color-primary)   10%, transparent), transparent 70%),
        #f4f7ff;
    --color-bg:     rgba(255,255,255,.82);
    --color-bg-alt: rgba(248,250,252,.88);
}
html[data-bg="mesh"][data-theme="dark"] {
    background:
        radial-gradient(ellipse 80% 60% at 10% 10%, color-mix(in srgb, var(--color-primary)   28%, transparent), transparent 68%),
        radial-gradient(ellipse 70% 55% at 90% 80%, color-mix(in srgb, var(--color-secondary) 20%, transparent), transparent 65%),
        radial-gradient(ellipse 55% 45% at 50% 45%, color-mix(in srgb, var(--color-primary)   14%, transparent), transparent 70%),
        #080d1a;
    --color-bg:     rgba(15,23,42,.84);
    --color-bg-alt: rgba(30,41,59,.88);
}

/* --- dots: dot grid pattern --- */
html[data-bg="dots"] {
    background-color: #fff;
    background-image: radial-gradient(circle, rgba(0,0,0,.11) 1px, transparent 1px);
    background-size: 22px 22px;
    --color-bg:     rgba(255,255,255,.88);
    --color-bg-alt: rgba(248,250,252,.92);
}
html[data-bg="dots"][data-theme="dark"] {
    background-color: #0b1120;
    background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size: 22px 22px;
    --color-bg:     rgba(15,23,42,.88);
    --color-bg-alt: rgba(30,41,59,.92);
}

/* --- lines: diagonal line grid --- */
html[data-bg="lines"] {
    background-color: #fff;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(0,0,0,.055) 0px, rgba(0,0,0,.055) 1px,
        transparent 1px, transparent 16px
    );
    --color-bg:     rgba(255,255,255,.9);
    --color-bg-alt: rgba(248,250,252,.93);
}
html[data-bg="lines"][data-theme="dark"] {
    background-color: #0b1120;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.055) 0px, rgba(255,255,255,.055) 1px,
        transparent 1px, transparent 16px
    );
    --color-bg:     rgba(15,23,42,.9);
    --color-bg-alt: rgba(30,41,59,.93);
}

/* In pattern modes, force ALL hardcoded section backgrounds transparent
   so the html-level pattern shows through. */
html[data-bg="mesh"]  body, html[data-bg="dots"]  body, html[data-bg="lines"] body,
html[data-bg="mesh"]  .site-main, html[data-bg="dots"]  .site-main, html[data-bg="lines"] .site-main,
html[data-bg="mesh"]  .about, html[data-bg="dots"]  .about, html[data-bg="lines"] .about,
html[data-bg="mesh"]  .about.section, html[data-bg="dots"]  .about.section, html[data-bg="lines"] .about.section,
html[data-bg="mesh"]  .contact, html[data-bg="dots"]  .contact, html[data-bg="lines"] .contact,
html[data-bg="mesh"]  .contact.section, html[data-bg="dots"]  .contact.section, html[data-bg="lines"] .contact.section,
html[data-bg="mesh"]  .blog-section, html[data-bg="dots"]  .blog-section, html[data-bg="lines"] .blog-section,
html[data-bg="mesh"]  .features, html[data-bg="dots"]  .features, html[data-bg="lines"] .features,
html[data-bg="mesh"]  .page-hero, html[data-bg="dots"]  .page-hero, html[data-bg="lines"] .page-hero {
    background: transparent !important;
}

/* Minimal mode: pure flat (no pattern) but ensure no leftover gradients leak */
html[data-bg="minimal"] body,
html[data-bg="minimal"] .site-main { background: transparent; }
html[data-bg="minimal"][data-theme="dark"] body,
html[data-bg="minimal"][data-theme="dark"] .site-main { background: transparent; }

/* Fallback */
body { background: #fff; }
[data-theme="dark"] body { background: #0f172a; }

/* Header: dark premium shell with brand glow, never a raw full-color bar. */
.site-header {
    background:
        linear-gradient(135deg, var(--brand-primary-deep) 0%, #0f172a 58%, var(--brand-primary-ink) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 34px rgba(2,6,23,.32);
}
.logo-text,
.nav-link,
.client-dm-btn {
    color: var(--brand-on-primary, #fff);
}
.site-logo {
    min-height: 42px;
}
.logo-img {
    max-height: 44px;
}
.nav-link {
    color: rgba(255,255,255,.82);
    opacity: 1;
}
.nav-link:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}
.nav-link--active {
    background: rgba(255,255,255,.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    color: #fff;
}
.client-dm-btn {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
}
.client-dm-btn:hover { background: rgba(255,255,255,.16); }
@media (max-width: 768px) {
    .site-nav {
        background:
            linear-gradient(135deg, var(--brand-primary-deep) 0%, #0f172a 100%) !important;
        border-top: 1px solid rgba(255,255,255,.08);
    }
}

/* Home hero: brand colors become cinematic light, not harsh blocks. */
.hero {
    background:
        radial-gradient(780px 360px at 18% 10%, var(--brand-glow), transparent 68%),
        radial-gradient(660px 360px at 92% 18%, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 66%),
        linear-gradient(135deg, var(--brand-hero-a) 0%, #0f172a 52%, var(--brand-hero-b) 100%) !important;
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    align-items: center;
}
.hero::before {
    opacity: .75;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 20%, black 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 85% 70% at 50% 20%, black 0%, transparent 72%);
}
.hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 160px;
    background: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);
    pointer-events: none;
}
.hero-inner { width: 100%; }
.hero-eyebrow {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
}
.hero-title {
    max-width: 760px;
    text-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.hero-bio {
    max-width: 620px;
}
.hero-avatar {
    border-radius: 2.25rem;
    border-color: rgba(255,255,255,.18);
    box-shadow:
        0 30px 80px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.12),
        0 0 0 10px rgba(255,255,255,.035);
}
.hero-photo { position: relative; }
.hero-photo::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 2.75rem;
    background: linear-gradient(135deg, var(--color-primary), var(--brand-accent));
    opacity: .22;
    filter: blur(16px);
    z-index: -1;
}

/* ── Hero: moderní split layout (text vlevo, fotka vpravo) ── */
.hero-inner--split,
.hero-content-section .hero-inner--split {
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    justify-items: stretch;
}
.hero--split .hero-text,
.hero-content-section.hero--split .hero-text {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 640px;
}
.hero--split .hero-logo-wrap { justify-content: flex-start; margin-bottom: 1.75rem; }
.hero--split .hero-logo-big { height: 56px; max-width: 220px; }
.hero--split .hero-location,
.hero-content-section.hero--split .hero-location { justify-content: flex-start; }
.hero--split .hero-bio { margin-left: 0; margin-right: 0; }
.hero--split .hero-cta,
.hero-content-section.hero--split .hero-cta { justify-content: flex-start; }
.hero--split .hero-social-loop { margin-left: 0; margin-right: 0; }
.hero-photo-side {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.hero-photo-side .hero-home-photo-wrap { margin: 0; position: relative; }
.hero-photo-side .hero-home-photo-wrap::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 2.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--brand-accent, var(--color-secondary)));
    opacity: .25;
    filter: blur(22px);
    z-index: -1;
}
/* Primární CTA v hero – lead gen akce má vždy přednost */
.hero-cta-primary {
    padding: .95rem 1.9rem;
    font-weight: 700;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.hero-cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--color-primary) 55%, transparent);
}
@media (max-width: 900px) {
    /* Stejná specificita jako desktop pravidla výše (.hero-content-section …),
       jinak pod hero videem/3D zůstane na mobilu dvoukolonový split. */
    .hero-inner--split,
    .hero-content-section .hero-inner--split {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .hero-photo-side { order: -1; }
    .hero-photo-side .hero-home-photo { width: min(300px, 78vw); }
    .hero--split .hero-text,
    .hero-content-section.hero--split .hero-text {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .hero--split .hero-logo-wrap,
    .hero-content-section.hero--split .hero-logo-wrap { justify-content: center; }
    .hero--split .hero-location,
    .hero-content-section.hero--split .hero-location { justify-content: center; }
    .hero--split .hero-cta,
    .hero-content-section.hero--split .hero-cta { justify-content: center; }
    .hero--split .hero-social-loop,
    .hero-content-section.hero--split .hero-social-loop { margin-left: auto; margin-right: auto; }
}

/* ── Hero ve světlém režimu ────────────────────────────────
   Dark hero (výše) je výchozí; bez data-theme="dark" přepneme
   pozadí i texty na světlou brand variantu. */
html:not([data-theme="dark"]) .hero:not(.hero--has-video) {
    background:
        radial-gradient(780px 360px at 12% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 64%),
        radial-gradient(660px 340px at 92% 12%, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent 62%),
        linear-gradient(165deg, #ffffff 0%, color-mix(in srgb, var(--color-primary) 5%, #ffffff) 58%, color-mix(in srgb, var(--color-secondary) 9%, #ffffff) 100%) !important;
}
html:not([data-theme="dark"]) .hero:not(.hero--has-video)::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-primary) 9%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 9%, transparent) 1px, transparent 1px);
    background-size: 58px 58px;
    opacity: .55;
}
html:not([data-theme="dark"]) .hero:not(.hero--has-video)::after {
    background: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);
}
html:not([data-theme="dark"]) .hero:not(.hero--has-video) .hero-title {
    color: var(--color-text, #0f172a);
    text-shadow: none;
}
html:not([data-theme="dark"]) .hero:not(.hero--has-video) .hero-eyebrow {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
}
html:not([data-theme="dark"]) .hero:not(.hero--has-video) .hero-location {
    color: var(--color-muted, #64748b);
}
html:not([data-theme="dark"]) .hero:not(.hero--has-video) .hero-bio {
    color: var(--color-text-2, #3f4a5f);
}
html:not([data-theme="dark"]) .hero:not(.hero--has-video) .hero-home-photo {
    border-color: rgba(15,23,42,.08);
    box-shadow: 0 30px 70px rgba(15,23,42,.16);
}
html:not([data-theme="dark"]) .hero:not(.hero--has-video) .btn-outline-white {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
html:not([data-theme="dark"]) .hero:not(.hero--has-video) .btn-outline-white:hover {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Buttons are always readable and coherent. */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--brand-accent));
    color: var(--brand-on-primary, #fff);
    border-color: transparent;
}
.btn-outline {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    border-color: var(--brand-primary-line);
}
.btn-outline:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--brand-accent));
    border-color: transparent;
    color: var(--brand-on-primary, #fff);
}
.btn-white {
    color: var(--brand-primary-ink);
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.12);
}
.btn-outline-white {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.22);
    backdrop-filter: blur(10px);
}

/* Subpage hero: matches page background; nadpis řeší editorial blok níže. */
.page-hero {
    background: var(--color-bg, #fff) !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
[data-theme="dark"] .page-hero {
    background: #0f172a !important;
    border-bottom-color: rgba(255,255,255,.07);
}

/* Public content cards: polished surfaces. */
.features {
    background: var(--color-bg, #fff);
}
.feature-card,
.contact-form-wrap,
.calendar-embed,
.result-card,
.blog-card {
    background: var(--lux-surface);
    border-color: rgba(15,23,42,.08);
    box-shadow: 0 20px 54px -28px rgba(15,23,42,.35), 0 1px 0 rgba(255,255,255,.8) inset;
    backdrop-filter: blur(10px);
}
[data-theme="dark"] .feature-card,
[data-theme="dark"] .contact-form-wrap,
[data-theme="dark"] .calendar-embed,
[data-theme="dark"] .result-card,
[data-theme="dark"] .blog-card {
    background: rgba(30,41,59,.72);
    border-color: rgba(148,163,184,.14);
    box-shadow: 0 20px 54px -28px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;
}
.feature-card:hover,
.blog-card:hover {
    border-color: var(--brand-primary-line);
    box-shadow: 0 26px 72px -32px rgba(15,23,42,.45), 0 0 0 1px var(--brand-primary-line);
}
.feature-icon,
.feature-icon--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--brand-accent));
}
.feature-icon--secondary {
    background: linear-gradient(135deg, var(--brand-accent), var(--color-secondary));
}

/* About page refinement. */
.about.section,
.contact.section,
.blog-section {
    background: var(--color-bg, #fff);
}
.about-photo {
    border: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 18px 28px rgba(15,23,42,.28));
}
.about-title {
    color: var(--color-primary);
}
.about-tituly-item {
    background:
        linear-gradient(135deg, var(--brand-primary-soft), transparent 65%),
        var(--color-bg-alt);
    border-left: none;
    border: 1px solid var(--color-border);
    box-shadow: var(--sh-sm);
}
.about-tituly-label::before {
    content: '';
    display: inline-block;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--color-primary);
    margin-right: .5rem;
    vertical-align: .08em;
}

/* Contact icons and form focus inherit brand gracefully. */
.contact-icon {
    background: var(--brand-primary-soft);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--brand-primary-line);
}
.form-control:focus,
textarea:focus,
input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]):focus,
.blog-search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-soft);
}

/* Blog polish. */
.blog-card-img {
    background:
        linear-gradient(135deg, var(--brand-primary-soft), var(--brand-secondary-soft)),
        var(--color-bg-subtle);
}
.blog-card-title,
.blog-article-title {
    color: var(--color-text);
}
.blog-card-cta {
    border: 0;
    padding: 0;
}
.blog-tag:hover,
.blog-tag--active,
.blog-page-btn:hover,
.blog-page-num:hover,
.blog-page-num--active {
    background: linear-gradient(135deg, var(--color-primary), var(--brand-accent));
    border-color: transparent;
    color: var(--brand-on-primary, #fff);
}

/* (duplicate footer overrides removed ? see section 18 above) */

@media (max-width: 800px) {
    .hero { min-height: auto; }
    .hero-title { max-width: 100%; }
    .footer-registrace-row { font-size: .64rem; }
}

/* ============================================================
   REFERENCE ? verejn? str?nka (carousel + formul?r)
   ============================================================ */
.ref-section { padding: 3rem 0 4rem; }

/* -- Notice -- */
.ref-notice {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1.1rem; border-radius: 10px;
    margin-bottom: 2rem; font-size: .95rem; font-weight: 500;
}
.ref-notice--success { background: #d1fae5; color: #065f46; }
.ref-notice--error   { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .ref-notice--success { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .ref-notice--error   { background: #7f1d1d; color: #fca5a5; }

/* -- Carousel -- */
.ref-carousel {
    position: relative; min-height: 200px;
    perspective: 800px;
}
.ref-card {
    display: none; opacity: 0;
    animation: refFadeIn .45s ease forwards;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, rgba(0,0,0,.09));
    border-radius: 16px; padding: 2rem 2.2rem 1.8rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    max-width: 720px; margin: 0 auto;
    transition: box-shadow .2s;
}
[data-theme="dark"] .ref-card {
    background: #1e293b; border-color: rgba(255,255,255,.1);
    box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.ref-card--active { display: block; }
@keyframes refFadeIn {
    from { opacity:0; transform: translateY(10px); }
    to   { opacity:1; transform: translateY(0); }
}

.ref-stars { display: flex; gap: 3px; margin-bottom: .9rem; color: #f59e0b; }
.ref-star--filled { color: #f59e0b; }
.ref-star:not(.ref-star--filled) { color: #cbd5e1; }
[data-theme="dark"] .ref-star:not(.ref-star--filled) { color: #475569; }

.ref-text {
    font-size: 1.08rem; line-height: 1.7;
    color: var(--body-text, #1e293b); margin: 0 0 1.4rem;
    font-style: italic; position: relative;
}
[data-theme="dark"] .ref-text { color: #e2e8f0; }
.ref-quote-mark {
    font-size: 2rem; line-height: 0; vertical-align: -.35em;
    color: var(--color-primary, #1a73e8); opacity: .35;
    font-style: normal;
}

.ref-author { display: flex; align-items: center; gap: .85rem; }
.ref-author-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--color-primary, #1a73e8);
    color: #fff; font-weight: 700; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ref-author-name  { font-weight: 600; font-size: .97rem; margin: 0; }
.ref-author-firma { font-size: .83rem; color: var(--muted-text,#64748b); margin: .1rem 0 0; }
[data-theme="dark"] .ref-author-firma { color: #94a3b8; }

/* -- Carousel controls -- */
.ref-controls {
    display: flex; align-items: center; justify-content: center;
    gap: .8rem; margin-top: 1.4rem;
}
.ref-arrow {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid var(--border-color, rgba(0,0,0,.15));
    background: var(--card-bg,#fff); color: var(--body-text,#1e293b);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, transform .1s;
}
.ref-arrow:hover { background: var(--color-primary,#1a73e8); color:#fff; border-color: var(--color-primary,#1a73e8); transform: scale(1.06); }
[data-theme="dark"] .ref-arrow { background: #1e293b; border-color: rgba(255,255,255,.18); color:#e2e8f0; }
[data-theme="dark"] .ref-arrow:hover { background: var(--color-primary,#1a73e8); color:#fff; }

.ref-dots { display: flex; gap: .45rem; }
.ref-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--border-color, #cbd5e1); border: none; cursor: pointer;
    transition: background .2s, transform .2s;
    padding: 0;
}
.ref-dot--active {
    background: var(--color-primary, #1a73e8);
    transform: scale(1.25);
}
[data-theme="dark"] .ref-dot { background: #475569; }
[data-theme="dark"] .ref-dot--active { background: var(--color-primary,#1a73e8); }

.ref-counter { text-align:center; font-size:.82rem; color:var(--muted-text,#94a3b8); margin:.5rem 0 0; }

/* -- Empty state -- */
.ref-empty {
    text-align: center; padding: 3rem 1rem;
    color: var(--muted-text, #94a3b8);
    display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
[data-theme="dark"] .ref-empty { color: #475569; }

/* -- Submit area -- */
.ref-submit-wrap { margin-top: 2.5rem; }
.ref-submit-toggle {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 auto;
}

/* -- Form -- */
.ref-form {
    max-width: 640px; margin: 1.5rem auto 0;
    background: var(--card-bg,#fff);
    border: 1px solid var(--border-color, rgba(0,0,0,.09));
    border-radius: 14px; padding: 1.8rem 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
[data-theme="dark"] .ref-form { background: #1e293b; border-color: rgba(255,255,255,.1); }
.ref-form-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 1.3rem; }
.ref-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 500px) { .ref-form-row { grid-template-columns: 1fr; } }
.ref-form-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.ref-form-group label { font-size: .88rem; font-weight: 500; }
.req { color: #ef4444; }
.ref-input {
    padding: .6rem .85rem; border-radius: 8px;
    border: 1.5px solid var(--border-color,rgba(0,0,0,.15));
    background: var(--input-bg,#f8fafc); color: var(--body-text,#1e293b);
    font-size: .95rem; transition: border-color .15s;
    font-family: inherit; width: 100%; box-sizing: border-box;
}
.ref-input:focus { outline: none; border-color: var(--color-primary,#1a73e8); }
[data-theme="dark"] .ref-input { background: #0f172a; border-color: rgba(255,255,255,.15); color: #e2e8f0; }
.ref-textarea { resize: vertical; min-height: 110px; }
.ref-char-count { text-align: right; font-size: .78rem; color: var(--muted-text,#94a3b8); }
.ref-form-error {
    background: #fee2e2; color: #991b1b;
    border: 1px solid #fca5a5; border-radius: .6rem;
    padding: .7rem 1rem; font-size: .9rem;
    margin-bottom: .8rem;
}
[data-theme="dark"] .ref-form-error { background: #7f1d1d; color: #fca5a5; border-color: #b91c1c; }

/* Star rating input */
.ref-rating-input { display: flex; gap: 4px; }
.ref-rating-star {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: #f59e0b; transition: transform .1s;
}
.ref-rating-star:hover { transform: scale(1.15); }

.ref-form-actions { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }

.ref-privacy-note {
    display: flex; align-items: center; gap: 4px;
    font-size: .77rem; color: var(--muted-text,#94a3b8);
    margin-top: .25rem; line-height: 1.4;
}
[data-theme="dark"] .ref-privacy-note { color: #64748b; }

/* Google OAuth sign-in flow */
.ref-step { text-align: center; padding: 1.5rem 0 .5rem; }
.ref-step-label { font-size: .95rem; margin-bottom: 1rem; color: var(--body-text,#334155); }
[data-theme="dark"] .ref-step-label { color: #cbd5e1; }
.ref-google-note {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .78rem; color: var(--muted-text,#94a3b8); margin-top: .8rem;
}
[data-theme="dark"] .ref-google-note { color: #64748b; }
#refGoogleBtn { display: flex; justify-content: center; }

.google-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    background: #fff;
    color: #3c4043 !important;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: .25px;
    box-shadow: none;
    text-decoration: none;
    transform: none;
}
.google-auth-btn:hover {
    background: #f8faff;
    border-color: #d2e3fc;
    color: #3c4043 !important;
    box-shadow: 0 1px 2px rgba(60,64,67,.18), 0 1px 3px rgba(60,64,67,.12);
    opacity: 1;
    text-decoration: none;
    transform: none;
}
.google-auth-btn:active {
    background: #f1f3f4;
    transform: none;
}
.google-auth-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
[data-theme="dark"] .google-auth-btn,
[data-theme="dark"] .google-auth-btn:hover {
    background: #fff !important;
    border-color: #dadce0 !important;
    color: #3c4043 !important;
    box-shadow: none !important;
}

.ref-google-signed {
    display: flex; align-items: center; gap: .7rem;
    background: var(--surface2,#f1f5f9); border-radius: 10px;
    padding: .65rem .9rem; margin-bottom: 1.2rem;
}
[data-theme="dark"] .ref-google-signed { background: #0f172a; }
.ref-google-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ref-google-name  { display: block; font-weight: 600; font-size: .88rem; }
.ref-google-email { display: block; font-size: .78rem; color: var(--muted-text,#94a3b8); }
[data-theme="dark"] .ref-google-email { color: #64748b; }
.ref-google-logout {
    margin-left: auto; background: none; border: none; cursor: pointer;
    font-size: .82rem; color: var(--muted-text,#94a3b8); padding: 4px 6px;
    border-radius: 4px; transition: background .15s;
}
.ref-google-logout:hover { background: rgba(0,0,0,.07); }
[data-theme="dark"] .ref-google-logout:hover { background: rgba(255,255,255,.07); }

/* Verified badge on public carousel */
.ref-verified-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: #22c55e; color: #fff; margin-left: 4px;
    vertical-align: middle; flex-shrink: 0;
}

/* Badge "recenze z Google" u importovaných recenzí */
.ref-google-source-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .1rem .5rem; margin-left: 6px; border-radius: 999px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    color: var(--muted-text, #64748b);
    vertical-align: middle;
}
[data-theme="dark"] .ref-google-source-badge { background: #1e293b; border-color: #334155; color: #94a3b8; }

/* Výzva "vložte recenzi i na Google" po odeslání reference */
.ref-google-cta {
    max-width: 620px; margin: -0.75rem auto 2rem;
    padding: 1.2rem 1.4rem; border-radius: 14px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, rgba(0,0,0,.09));
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
}
.ref-google-cta-head {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1.05rem; margin-bottom: .35rem;
}
.ref-google-cta p { margin: 0 0 .8rem; font-size: .92rem; color: var(--muted-text, #64748b); }
.ref-google-cta-text {
    margin: 0 0 .9rem; padding: .6rem .9rem;
    border-left: 3px solid #4285F4; border-radius: 6px;
    background: rgba(66,133,244,.06);
    font-size: .88rem; font-style: italic;
    max-height: 120px; overflow: auto;
}
.ref-google-cta-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.ref-google-cta-hint {
    margin: .7rem 0 0 !important; font-size: .8rem !important;
    color: #16a34a !important; font-weight: 600;
}
[data-theme="dark"] .ref-google-cta { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .ref-google-cta-text { background: rgba(66,133,244,.12); }

/* Souhrnné hodnocení propojené Google firmy */
.ref-google-summary {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: .55rem; margin: 0 auto 2rem; padding: .8rem 1.3rem;
    max-width: 620px; border-radius: 12px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, rgba(0,0,0,.09));
    font-size: .95rem;
}
.ref-google-summary strong { font-size: 1.15rem; }
.ref-google-summary-stars { display: inline-flex; gap: 1px; }
.ref-google-summary a { font-weight: 600; text-decoration: underline; }
[data-theme="dark"] .ref-google-summary { background: #1e293b; border-color: #334155; }

/* Pending state message */
.ref-oauth-pending {
    text-align: center; padding: 2rem 1rem;
    color: var(--muted-text,#94a3b8);
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    font-size: .9rem;
}

/* Photo checkbox option in reference form */
.ref-photo-opt { margin-top: -.2rem; }
.ref-photo-label {
    display: flex; align-items: center; gap: .65rem;
    cursor: pointer; font-size: .9rem; user-select: none;
}
.ref-photo-preview-wrap {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    flex-shrink: 0; border: 2px solid var(--border-color,rgba(0,0,0,.12));
}
.ref-photo-preview { width: 100%; height: 100%; object-fit: cover; }

/* Author photo in carousel */
.ref-author-photo {
    width: 42px; height: 42px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--border-color,rgba(0,0,0,.08));
}

/* ==========================================================================
   FINAL PUBLIC BACKGROUND SYSTEM
   These rules intentionally live at the end of the file so older backgrounds
   cannot hide the selected advisor background style.
   ========================================================================== */

html[data-bg] {
    --advisor-bg: #ffffff;
    min-height: 100%;
    background: var(--advisor-bg) !important;
    background-attachment: fixed !important;
}

html[data-bg] body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--advisor-bg) !important;
    background-attachment: fixed !important;
}

html[data-bg] .site-main {
    flex: 1 0 auto;
    background: transparent !important;
}

html[data-bg] .site-footer {
    margin-top: auto;
    flex-shrink: 0;
}

html[data-bg] .page-hero,
html[data-bg] .features,
html[data-bg] .about.section,
html[data-bg] .contact.section,
html[data-bg] .blog-section,
html[data-bg] .reference-section,
html[data-bg] .section {
    background: var(--advisor-section-bg, rgba(255,255,255,.88)) !important;
}

/* The homepage hero has its own old gradient. Keep text readable, but let
   selected background style show through as the underlying graphic layer. */
html[data-bg] .hero {
    background:
        linear-gradient(135deg, rgba(15,23,42,.82), rgba(15,23,42,.66)),
        var(--advisor-bg) !important;
}

html[data-theme="dark"][data-bg] .hero {
    background:
        linear-gradient(135deg, rgba(2,6,23,.78), rgba(15,23,42,.64)),
        var(--advisor-bg) !important;
}

html[data-bg] .hero.hero--has-video,
html[data-theme="dark"][data-bg] .hero.hero--has-video {
    background: #0f172a !important;
}

/* Keep the page background continuous between top and footer.
   Content cards stay readable, but the large section fog is removed. */
html[data-bg] .page-hero,
html[data-bg] .about-video-section,
html[data-bg] .features,
html[data-bg] .about.section,
html[data-bg] .contact.section,
html[data-bg] .blog-section,
html[data-bg] .reference-section,
html[data-bg] .section {
    background: transparent !important;
}

html[data-theme="dark"][data-bg] .page-hero,
html[data-theme="dark"][data-bg] .about-video-section,
html[data-theme="dark"][data-bg] .features,
html[data-theme="dark"][data-bg] .about.section,
html[data-theme="dark"][data-bg] .contact.section,
html[data-theme="dark"][data-bg] .blog-section,
html[data-theme="dark"][data-bg] .reference-section,
html[data-theme="dark"][data-bg] .section {
    background: transparent !important;
}

/* Remove only large section fades/fog. Keep photo glow effects intact. */
html[data-bg] .hero::after {
    display: none !important;
}

/* Homepage had a hardcoded grid overlay that stayed visible over every
   selected background style. Let the chosen background show cleanly. */
html[data-bg] .hero::before {
    display: none !important;
}

/* Page hero nadpisy podstránek jsou stylované v editorial bloku níže
   (ř. ~10517) – čistý typografický nadpis místo bubliny. */

/* ==========================================================================
   HEADER / FOOTER STYLE SYSTEM
   Advisor can choose visual style for top navigation and bottom footer.
   ========================================================================== */

/* Header styles */
html[data-header="gradient"] .site-header {
    background:
        radial-gradient(560px 180px at 20% 0%, var(--brand-glow), transparent 65%),
        linear-gradient(135deg, var(--brand-primary-deep) 0%, #0f172a 58%, var(--brand-primary-ink) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 34px rgba(2,6,23,.32);
}

html[data-header="solid"] .site-header {
    background: var(--color-primary) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 74%, #000);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

html[data-header="glass"] .site-header {
    background: color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
    border-bottom: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 10px 30px rgba(2,6,23,.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-header="light"] .site-header {
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
html[data-header="light"] .logo-text,
html[data-header="light"] .nav-link,
html[data-header="light"] .client-dm-btn {
    color: #0f172a !important;
}
html[data-header="light"] .nav-link:hover,
html[data-header="light"] .nav-link--active,
html[data-header="light"] .client-dm-btn {
    background: rgba(15,23,42,.06);
}

html[data-header="minimal"] .site-header {
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-header="none"] .site-header {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Footer styles */
html[data-footer="gradient"] .footer-inner {
    background:
        radial-gradient(560px 180px at 20% 0%, var(--brand-glow), transparent 65%),
        linear-gradient(135deg, var(--brand-primary-deep) 0%, #0f172a 58%, var(--brand-hero-b) 100%) !important;
    border-top: 1px solid rgba(255,255,255,.08);
}

html[data-footer="solid"] .footer-inner {
    background: var(--color-primary) !important;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 74%, #000);
}

html[data-footer="glass"] .footer-inner {
    background: color-mix(in srgb, var(--color-primary) 18%, rgba(15,23,42,.48)) !important;
    border-top: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-footer="light"] .footer-inner {
    background: rgba(255,255,255,.94) !important;
    border-top: 1px solid rgba(15,23,42,.08);
    color: rgba(15,23,42,.7);
}
html[data-footer="light"] .footer-copy,
html[data-footer="light"] .footer-registrace-company,
html[data-footer="light"] .footer-registrace-row,
html[data-footer="light"] .footer-registrace-title,
html[data-footer="light"] .footer-gdpr-link,
html[data-footer="light"] .footer-vizitka-link {
    color: rgba(15,23,42,.68);
}
html[data-footer="light"] .footer-registrace-company strong { color: #0f172a; }
html[data-footer="light"] .footer-vizitka-link {
    border-color: rgba(15,23,42,.18);
}

html[data-footer="minimal"] .footer-inner {
    background: transparent !important;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    color: var(--color-text);
}
html[data-footer="minimal"] .footer-copy,
html[data-footer="minimal"] .footer-registrace-company,
html[data-footer="minimal"] .footer-registrace-row,
html[data-footer="minimal"] .footer-registrace-title,
html[data-footer="minimal"] .footer-gdpr-link,
html[data-footer="minimal"] .footer-vizitka-link {
    color: var(--color-muted);
}
html[data-footer="minimal"] .footer-registrace-company strong { color: var(--color-text); }

html[data-footer="none"] .footer-inner {
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
    color: var(--color-text);
}
html[data-footer="none"] .footer-copy,
html[data-footer="none"] .footer-registrace-company,
html[data-footer="none"] .footer-registrace-row,
html[data-footer="none"] .footer-registrace-title,
html[data-footer="none"] .footer-gdpr-link,
html[data-footer="none"] .footer-vizitka-link {
    color: var(--color-muted);
}
html[data-footer="none"] .footer-registrace-company strong { color: var(--color-text); }

/* MegaNav manages its own header/footer surface, independent from visual edge styles. */
html[data-header="mega"] .site-header {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
html[data-header="mega"] .nav-container {
    align-items: flex-start;
    gap: .75rem;
}
html[data-header="mega"] #mega-nav-root {
    flex: 1;
    min-width: 0;
}
html[data-header="mega"] .client-dm-btn {
    flex-shrink: 0;
    margin-top: .45rem;
    color: #fff !important;
    background: rgba(15,23,42,.9) !important;
    border: 1px solid rgba(148,163,184,.22);
}
html[data-header="mega"] .client-dm-btn:hover {
    background: rgba(15,23,42,1) !important;
}
html[data-header="bottom"] .site-header {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
html[data-header="bottom"] .site-header .nav-container {
    display: none;
}
html[data-header="bottom"] #bottom-nav-root {
    position: relative;
    z-index: 500;
}
html[data-header="bottom"] body {
    padding-bottom: 7rem;
}
html[data-footer="bottom"] .footer-inner,
html[data-footer="mega"] .footer-inner {
    background: rgba(15,23,42,.96) !important;
    border-top: 1px solid rgba(148,163,184,.18);
    color: rgba(226,232,240,.78);
}
html[data-footer="bottom"] .footer-copy,
html[data-footer="bottom"] .footer-registrace-company,
html[data-footer="bottom"] .footer-registrace-row,
html[data-footer="bottom"] .footer-registrace-title,
html[data-footer="bottom"] .footer-gdpr-link,
html[data-footer="bottom"] .footer-vizitka-link,
html[data-footer="mega"] .footer-copy,
html[data-footer="mega"] .footer-registrace-company,
html[data-footer="mega"] .footer-registrace-row,
html[data-footer="mega"] .footer-registrace-title,
html[data-footer="mega"] .footer-gdpr-link,
html[data-footer="mega"] .footer-vizitka-link {
    color: rgba(226,232,240,.78);
}
html[data-footer="bottom"] .footer-registrace-company strong,
html[data-footer="mega"] .footer-registrace-company strong {
    color: #fff;
}

/* Default: Wealth Management Premium */
html[data-bg="default"] {
    --classic-light-bg: #ffffff;
    --classic-light-bg-mid: #f8fafc;
    --classic-dark-start: #0f172a;
    --classic-dark-mid: #0b1120;
    --classic-dark-end: #0f172a;
    --classic-primary-glow-light: 14;
    --classic-primary-glow-dark: 22;
    --classic-secondary-glow-light: 10;
    --classic-secondary-glow-dark: 16;
    --classic-section-opacity: 0.92;
    --advisor-bg:
        radial-gradient(900px 420px at 8% -8%, color-mix(in srgb, var(--color-primary) calc(var(--classic-primary-glow-light) * 1%), transparent), transparent 62%),
        radial-gradient(760px 360px at 94% 0%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-secondary-glow-light) * 1%), transparent), transparent 58%),
        linear-gradient(180deg, var(--classic-light-bg) 0%, color-mix(in srgb, var(--classic-light-bg-mid) 92%, var(--classic-light-bg-mid)) 52%, var(--classic-light-bg) 100%);
    --advisor-section-bg: color-mix(in srgb, var(--classic-light-bg) calc(var(--classic-section-opacity) * 100%), transparent);
}
html[data-theme="dark"][data-bg="default"] {
    --advisor-bg:
        radial-gradient(900px 420px at 8% -8%, color-mix(in srgb, var(--color-primary) calc(var(--classic-primary-glow-dark) * 1%), transparent), transparent 62%),
        radial-gradient(760px 360px at 94% 0%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-secondary-glow-dark) * 1%), transparent), transparent 58%),
        linear-gradient(180deg, var(--classic-dark-start) 0%, var(--classic-dark-mid) 52%, var(--classic-dark-end) 100%);
    --advisor-section-bg: color-mix(in srgb, var(--classic-dark-start) calc(var(--classic-section-opacity) * 100%), transparent);
}

html[data-bg="minimal"] {
    --classic-light-bg: #ffffff;
    --classic-dark-bg: #0f172a;
    --classic-section-opacity: 0.92;
    --advisor-bg: var(--classic-light-bg);
    --advisor-section-bg: color-mix(in srgb, var(--classic-light-bg) calc(var(--classic-section-opacity) * 100%), transparent);
}
html[data-theme="dark"][data-bg="minimal"] {
    --advisor-bg: var(--classic-dark-bg);
    --advisor-section-bg: color-mix(in srgb, var(--classic-dark-bg) calc(var(--classic-section-opacity) * 100%), transparent);
}

/* Squared financial grid */
html[data-bg="grid"] {
    --classic-light-bg: #ffffff;
    --classic-dark-bg: #0b1120;
    --classic-grid-size: 34;
    --classic-grid-opacity-light: 0.075;
    --classic-grid-opacity-dark: 0.06;
    --classic-primary-glow-light: 10;
    --classic-primary-glow-dark: 20;
    --classic-section-opacity: 0.86;
    --advisor-bg:
        linear-gradient(rgba(15,23,42,var(--classic-grid-opacity-light)) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,var(--classic-grid-opacity-light)) 1px, transparent 1px),
        radial-gradient(680px 300px at 15% 0%, color-mix(in srgb, var(--color-primary) calc(var(--classic-primary-glow-light) * 1%), transparent), transparent 65%),
        var(--classic-light-bg);
    background-size: calc(var(--classic-grid-size) * 1px) calc(var(--classic-grid-size) * 1px), calc(var(--classic-grid-size) * 1px) calc(var(--classic-grid-size) * 1px), auto, auto !important;
    --advisor-section-bg: color-mix(in srgb, var(--classic-light-bg) calc(var(--classic-section-opacity) * 100%), transparent);
}
html[data-theme="dark"][data-bg="grid"] {
    --advisor-bg:
        linear-gradient(rgba(255,255,255,var(--classic-grid-opacity-dark)) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,var(--classic-grid-opacity-dark)) 1px, transparent 1px),
        radial-gradient(680px 300px at 15% 0%, color-mix(in srgb, var(--color-primary) calc(var(--classic-primary-glow-dark) * 1%), transparent), transparent 65%),
        var(--classic-dark-bg);
}

/* Calm premium waves */
html[data-bg="waves"] {
    --classic-light-bg: #ffffff;
    --classic-light-bg-mid: #f8fafc;
    --classic-dark-start: #0f172a;
    --classic-dark-end: #0b1120;
    --classic-primary-glow-light: 16;
    --classic-primary-glow-dark: 22;
    --classic-wave-opacity-light: 0.075;
    --classic-wave-opacity-dark: 0.06;
    --classic-wave-spacing: 22;
    --classic-section-opacity: 0.88;
    --advisor-bg:
        radial-gradient(900px 260px at 10% -10%, color-mix(in srgb, var(--color-primary) calc(var(--classic-primary-glow-light) * 1%), transparent), transparent 70%),
        repeating-radial-gradient(ellipse at 50% 120%, rgba(15,23,42,var(--classic-wave-opacity-light)) 0 2px, transparent 2px calc(var(--classic-wave-spacing) * 1px)),
        linear-gradient(180deg, var(--classic-light-bg), color-mix(in srgb, var(--classic-light-bg-mid) 90%, var(--classic-light-bg-mid)));
    --advisor-section-bg: color-mix(in srgb, var(--classic-light-bg) calc(var(--classic-section-opacity) * 100%), transparent);
}
html[data-theme="dark"][data-bg="waves"] {
    --advisor-bg:
        radial-gradient(900px 260px at 10% -10%, color-mix(in srgb, var(--color-primary) calc(var(--classic-primary-glow-dark) * 1%), transparent), transparent 70%),
        repeating-radial-gradient(ellipse at 50% 120%, rgba(255,255,255,var(--classic-wave-opacity-dark)) 0 2px, transparent 2px calc(var(--classic-wave-spacing) * 1px)),
        linear-gradient(180deg, var(--classic-dark-start), var(--classic-dark-end));
}

/* Growth chart lines */
html[data-bg="growth"] {
    --classic-light-bg: #ffffff;
    --classic-dark-bg: #0b1120;
    --classic-primary-line-light: 22;
    --classic-primary-line-dark: 28;
    --classic-secondary-line-light: 28;
    --classic-secondary-line-dark: 26;
    --classic-secondary-glow-light: 12;
    --classic-secondary-glow-dark: 20;
    --classic-section-opacity: 0.88;
    --advisor-bg:
        linear-gradient(135deg, transparent 0 42%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-secondary-line-light) * 1%), transparent) 43% 44%, transparent 45%),
        linear-gradient(158deg, transparent 0 56%, color-mix(in srgb, var(--color-primary) calc(var(--classic-primary-line-light) * 1%), transparent) 57% 58%, transparent 59%),
        radial-gradient(760px 340px at 90% 12%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-secondary-glow-light) * 1%), transparent), transparent 65%),
        var(--classic-light-bg);
    --advisor-section-bg: color-mix(in srgb, var(--classic-light-bg) calc(var(--classic-section-opacity) * 100%), transparent);
}
html[data-theme="dark"][data-bg="growth"] {
    --advisor-bg:
        linear-gradient(135deg, transparent 0 42%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-secondary-line-dark) * 1%), transparent) 43% 44%, transparent 45%),
        linear-gradient(158deg, transparent 0 56%, color-mix(in srgb, var(--color-primary) calc(var(--classic-primary-line-dark) * 1%), transparent) 57% 58%, transparent 59%),
        radial-gradient(760px 340px at 90% 12%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-secondary-glow-dark) * 1%), transparent), transparent 65%),
        var(--classic-dark-bg);
}

/* Client figures: abstract people silhouettes */
html[data-bg="figures"] {
    --classic-light-bg: #ffffff;
    --classic-light-bg-mid: #f8fafc;
    --classic-dark-start: #0f172a;
    --classic-dark-end: #0b1120;
    --classic-figure-primary-light: 20;
    --classic-figure-primary-dark: 26;
    --classic-figure-body-light: 10;
    --classic-figure-body-dark: 14;
    --classic-section-opacity: 0.9;
    --advisor-bg:
        radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--color-primary) calc(var(--classic-figure-primary-light) * 1%), transparent) 0 22px, transparent 23px),
        radial-gradient(ellipse at 10% 42%, color-mix(in srgb, var(--color-primary) calc(var(--classic-figure-body-light) * 1%), transparent) 0 46px, transparent 47px),
        radial-gradient(circle at 92% 24%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-figure-primary-light) * 1%), transparent) 0 20px, transparent 21px),
        radial-gradient(ellipse at 92% 48%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-figure-body-light) * 1%), transparent) 0 42px, transparent 43px),
        linear-gradient(180deg, var(--classic-light-bg), color-mix(in srgb, var(--classic-light-bg-mid) 90%, var(--classic-light-bg-mid)));
    --advisor-section-bg: color-mix(in srgb, var(--classic-light-bg) calc(var(--classic-section-opacity) * 100%), transparent);
}
html[data-theme="dark"][data-bg="figures"] {
    --advisor-bg:
        radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--color-primary) calc(var(--classic-figure-primary-dark) * 1%), transparent) 0 22px, transparent 23px),
        radial-gradient(ellipse at 10% 42%, color-mix(in srgb, var(--color-primary) calc(var(--classic-figure-body-dark) * 1%), transparent) 0 46px, transparent 47px),
        radial-gradient(circle at 92% 24%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-figure-primary-dark) * 1%), transparent) 0 20px, transparent 21px),
        radial-gradient(ellipse at 92% 48%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-figure-body-dark) * 1%), transparent) 0 42px, transparent 43px),
        linear-gradient(180deg, var(--classic-dark-start), var(--classic-dark-end));
}

html[data-bg="mesh"] {
    --classic-light-bg: #f4f7ff;
    --classic-dark-bg: #080d1a;
    --classic-blob1-light: 24;
    --classic-blob1-dark: 30;
    --classic-blob2-light: 20;
    --classic-blob2-dark: 24;
    --classic-blob3-light: 12;
    --classic-blob3-dark: 14;
    --classic-section-opacity: 0.84;
    --advisor-bg:
        radial-gradient(ellipse 80% 60% at 10% 10%, color-mix(in srgb, var(--color-primary) calc(var(--classic-blob1-light) * 1%), transparent), transparent 68%),
        radial-gradient(ellipse 70% 55% at 90% 80%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-blob2-light) * 1%), transparent), transparent 65%),
        radial-gradient(ellipse 55% 45% at 50% 45%, color-mix(in srgb, var(--color-primary) calc(var(--classic-blob3-light) * 1%), transparent), transparent 70%),
        var(--classic-light-bg);
    --advisor-section-bg: color-mix(in srgb, var(--classic-light-bg) calc(var(--classic-section-opacity) * 100%), transparent);
}
html[data-theme="dark"][data-bg="mesh"] {
    --advisor-bg:
        radial-gradient(ellipse 80% 60% at 10% 10%, color-mix(in srgb, var(--color-primary) calc(var(--classic-blob1-dark) * 1%), transparent), transparent 68%),
        radial-gradient(ellipse 70% 55% at 90% 80%, color-mix(in srgb, var(--color-secondary) calc(var(--classic-blob2-dark) * 1%), transparent), transparent 65%),
        var(--classic-dark-bg);
}

html[data-bg="dots"] {
    --classic-light-bg: #ffffff;
    --classic-dark-bg: #0b1120;
    --classic-dot-spacing: 24;
    --classic-dot-opacity-light: 0.13;
    --classic-dot-opacity-dark: 0.11;
    --classic-section-opacity: 0.88;
    --advisor-bg:
        radial-gradient(circle, rgba(15,23,42,var(--classic-dot-opacity-light)) 1.2px, transparent 1.3px),
        var(--classic-light-bg);
    background-size: calc(var(--classic-dot-spacing) * 1px) calc(var(--classic-dot-spacing) * 1px), auto !important;
    --advisor-section-bg: color-mix(in srgb, var(--classic-light-bg) calc(var(--classic-section-opacity) * 100%), transparent);
}
html[data-theme="dark"][data-bg="dots"] {
    --advisor-bg:
        radial-gradient(circle, rgba(255,255,255,var(--classic-dot-opacity-dark)) 1.2px, transparent 1.3px),
        var(--classic-dark-bg);
}

html[data-bg="lines"] {
    --classic-light-bg: #ffffff;
    --classic-dark-bg: #0b1120;
    --classic-line-spacing: 18;
    --classic-line-opacity-light: 0.07;
    --classic-line-opacity-dark: 0.07;
    --classic-line-angle: -45;
    --classic-section-opacity: 0.9;
    --advisor-bg:
        repeating-linear-gradient(calc(var(--classic-line-angle) * 1deg), rgba(15,23,42,var(--classic-line-opacity-light)) 0 1px, transparent 1px calc(var(--classic-line-spacing) * 1px)),
        var(--classic-light-bg);
    --advisor-section-bg: color-mix(in srgb, var(--classic-light-bg) calc(var(--classic-section-opacity) * 100%), transparent);
}
html[data-theme="dark"][data-bg="lines"] {
    --advisor-bg:
        repeating-linear-gradient(calc(var(--classic-line-angle) * 1deg), rgba(255,255,255,var(--classic-line-opacity-dark)) 0 1px, transparent 1px calc(var(--classic-line-spacing) * 1px)),
        var(--classic-dark-bg);
}

html[data-bg="paper"] {
    --paper-accent-r: 212;
    --paper-accent-g: 175;
    --paper-accent-b: 55;
    --paper-accent-intensity: 0.18;
    --paper-accent-x: 18%;
    --paper-accent-y: 10%;
    --paper-vignette-x: 85%;
    --paper-vignette-y: 82%;
    --paper-vignette-light: 0.08;
    --paper-vignette-dark: 0.05;
    --paper-light-start: #fffaf0;
    --paper-light-end: #f7efe0;
    --paper-dark-start: #111827;
    --paper-dark-end: #0b1120;
    --paper-gradient-angle: 135deg;
    --paper-section-opacity: 0.88;
    --advisor-bg:
        radial-gradient(circle at var(--paper-accent-x) var(--paper-accent-y), rgb(var(--paper-accent-r) var(--paper-accent-g) var(--paper-accent-b) / var(--paper-accent-intensity)), transparent 26%),
        radial-gradient(circle at var(--paper-vignette-x) var(--paper-vignette-y), rgb(15 23 42 / var(--paper-vignette-light)), transparent 25%),
        linear-gradient(var(--paper-gradient-angle), var(--paper-light-start), var(--paper-light-end));
    --advisor-section-bg: color-mix(in srgb, var(--paper-light-start) calc(var(--paper-section-opacity) * 100%), transparent);
}
html[data-theme="dark"][data-bg="paper"] {
    --advisor-bg:
        radial-gradient(circle at var(--paper-accent-x) var(--paper-accent-y), rgb(var(--paper-accent-r) var(--paper-accent-g) var(--paper-accent-b) / var(--paper-accent-intensity)), transparent 26%),
        radial-gradient(circle at var(--paper-vignette-x) var(--paper-vignette-y), rgb(255 255 255 / var(--paper-vignette-dark)), transparent 25%),
        linear-gradient(var(--paper-gradient-angle), var(--paper-dark-start), var(--paper-dark-end));
    --advisor-section-bg: color-mix(in srgb, var(--paper-dark-start) calc(var(--paper-section-opacity) * 100%), transparent);
}

html[data-bg="silk"] {
    --advisor-bg: transparent;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="silk"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="silk"],
html[data-bg="silk"] body {
    background: transparent !important;
}

html.has-silk-bg .site-header,
html.has-silk-bg .site-main,
html.has-silk-bg .site-footer,
html.has-silk-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-silk-bg #page-silk-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="darkveil"] {
    --advisor-bg: transparent;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="darkveil"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="darkveil"],
html[data-bg="darkveil"] body {
    background: transparent !important;
}

html.has-darkveil-bg .site-header,
html.has-darkveil-bg .site-main,
html.has-darkveil-bg .site-footer,
html.has-darkveil-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-darkveil-bg #page-darkveil-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="linewaves"] {
    --advisor-bg: transparent;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="linewaves"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="linewaves"],
html[data-bg="linewaves"] body {
    background: transparent !important;
}

html.has-linewaves-bg .site-header,
html.has-linewaves-bg .site-main,
html.has-linewaves-bg .site-footer,
html.has-linewaves-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-linewaves-bg #page-linewaves-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="aurora"] {
    --advisor-bg: transparent;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="aurora"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="aurora"],
html[data-bg="aurora"] body {
    background: transparent !important;
}

html.has-aurora-bg .site-header,
html.has-aurora-bg .site-main,
html.has-aurora-bg .site-footer,
html.has-aurora-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-aurora-bg #page-aurora-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="grainient"] {
    --advisor-bg: transparent;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="grainient"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="grainient"],
html[data-bg="grainient"] body {
    background: transparent !important;
}

html.has-grainient-bg .site-header,
html.has-grainient-bg .site-main,
html.has-grainient-bg .site-footer,
html.has-grainient-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-grainient-bg #page-grainient-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="iridescence"] {
    --advisor-bg: transparent;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="iridescence"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="iridescence"],
html[data-bg="iridescence"] body {
    background: transparent !important;
}

html.has-iridescence-bg .site-header,
html.has-iridescence-bg .site-main,
html.has-iridescence-bg .site-footer,
html.has-iridescence-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-iridescence-bg #page-iridescence-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="starswipe"] {
    --advisor-bg: #000000;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="starswipe"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="starswipe"],
html[data-bg="starswipe"] body {
    background: #000000 !important;
}

html.has-starswipe-bg .site-header,
html.has-starswipe-bg .site-main,
html.has-starswipe-bg .site-footer,
html.has-starswipe-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-starswipe-bg #page-star-swipe-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="shadowbars"] {
    --advisor-bg: #0b0b0b;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="shadowbars"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="shadowbars"],
html[data-bg="shadowbars"] body {
    background: #0b0b0b !important;
}

html.has-shadowbars-bg .site-header,
html.has-shadowbars-bg .site-main,
html.has-shadowbars-bg .site-footer,
html.has-shadowbars-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-shadowbars-bg #page-shadow-bars-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="fogsphere"] {
    --advisor-bg: #0a0a0a;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="fogsphere"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="fogsphere"],
html[data-bg="fogsphere"] body {
    background: #0a0a0a !important;
}

html.has-fogsphere-bg .site-header,
html.has-fogsphere-bg .site-main,
html.has-fogsphere-bg .site-footer,
html.has-fogsphere-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-fogsphere-bg #page-fog-sphere-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="warptwister"] {
    --advisor-bg: #0b0b0b;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="warptwister"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="warptwister"],
html[data-bg="warptwister"] body {
    background: #0b0b0b !important;
}

html.has-warptwister-bg .site-header,
html.has-warptwister-bg .site-main,
html.has-warptwister-bg .site-footer,
html.has-warptwister-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-warptwister-bg #page-warp-twister-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="starburst"] {
    --advisor-bg: #0b0b0b;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="starburst"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="starburst"],
html[data-bg="starburst"] body {
    background: #0b0b0b !important;
}

html.has-starburst-bg .site-header,
html.has-starburst-bg .site-main,
html.has-starburst-bg .site-footer,
html.has-starburst-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-starburst-bg #page-star-burst-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="aurorablur"] {
    --advisor-bg: #0b0b0b;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="aurorablur"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="aurorablur"],
html[data-bg="aurorablur"] body {
    background: #0b0b0b !important;
}

html.has-aurorablur-bg .site-header,
html.has-aurorablur-bg .site-main,
html.has-aurorablur-bg .site-footer,
html.has-aurorablur-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-aurorablur-bg #page-aurora-blur-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="silkwaves"] {
    --advisor-bg: #0b0b0b;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="silkwaves"] {
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="silkwaves"],
html[data-bg="silkwaves"] body {
    background: #0b0b0b !important;
}

html.has-silkwaves-bg .site-header,
html.has-silkwaves-bg .site-main,
html.has-silkwaves-bg .site-footer,
html.has-silkwaves-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-silkwaves-bg #page-silk-waves-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-bg="grainwave"] {
    --advisor-bg: #ffffff;
    --advisor-section-bg: rgba(255,255,255,.84);
}
html[data-theme="dark"][data-bg="grainwave"] {
    --advisor-bg: #000000;
    --advisor-section-bg: rgba(15,23,42,.78);
}

html[data-bg="grainwave"],
html[data-bg="grainwave"] body {
    background: #ffffff !important;
}
html[data-theme="dark"][data-bg="grainwave"],
html[data-theme="dark"][data-bg="grainwave"] body {
    background: #000000 !important;
}

html.has-grainwave-bg .site-header,
html.has-grainwave-bg .site-main,
html.has-grainwave-bg .site-footer,
html.has-grainwave-bg #bottom-nav-root {
    position: relative;
    z-index: 1;
}

html.has-grainwave-bg #page-grain-wave-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Animovaná pozadí sjednotí header/main na z-index:1 — hero video na úvodu by jinak překrylo navigaci */
html[class*="has-"][class$="-bg"] .site-header {
    position: sticky;
    top: 0;
    z-index: 200;
}

/* ==========================================================================
   HEADER / FOOTER CONTRAST SAFETY
   Final overrides so every edge style is readable in light and dark mode.
   ========================================================================== */

/* Header: gradient is always a dark surface, so text must be white.
   Solid uses advisor's computed nav text because the surface is exactly primary color. */
html[data-header="gradient"] .logo-text,
html[data-header="gradient"] .nav-link,
html[data-header="gradient"] .client-dm-btn {
    color: #fff !important;
}
html[data-header="solid"] .logo-text,
html[data-header="solid"] .nav-link,
html[data-header="solid"] .client-dm-btn {
    color: var(--color-nav-text, #fff) !important;
}

/* Header: glass gets a readable surface depending on mode */
html[data-header="glass"] .site-header {
    background: rgba(255,255,255,.78) !important;
    border-bottom-color: rgba(15,23,42,.1) !important;
}
html[data-header="glass"] .logo-text,
html[data-header="glass"] .nav-link,
html[data-header="glass"] .client-dm-btn {
    color: #0f172a !important;
}
html[data-theme="dark"][data-header="glass"] .site-header {
    background: rgba(15,23,42,.76) !important;
    border-bottom-color: rgba(255,255,255,.14) !important;
}
html[data-theme="dark"][data-header="glass"] .logo-text,
html[data-theme="dark"][data-header="glass"] .nav-link,
html[data-theme="dark"][data-header="glass"] .client-dm-btn {
    color: #f8fafc !important;
}

/* Header: light and minimal */
html[data-header="light"] .logo-text,
html[data-header="light"] .nav-link,
html[data-header="light"] .client-dm-btn,
html[data-header="minimal"] .logo-text,
html[data-header="minimal"] .nav-link,
html[data-header="minimal"] .client-dm-btn {
    color: #0f172a !important;
}
html[data-theme="dark"][data-header="minimal"] .logo-text,
html[data-theme="dark"][data-header="minimal"] .nav-link,
html[data-theme="dark"][data-header="minimal"] .client-dm-btn {
    color: #f8fafc !important;
}

/* Header active/hover states must remain visible with both text colors */
html[data-header="light"] .nav-link:hover,
html[data-header="light"] .nav-link--active,
html[data-header="minimal"] .nav-link:hover,
html[data-header="minimal"] .nav-link--active,
html[data-header="glass"] .nav-link:hover,
html[data-header="glass"] .nav-link--active {
    background: rgba(15,23,42,.08) !important;
}
html[data-header="gradient"] .nav-link:hover,
html[data-header="gradient"] .nav-link--active {
    background: rgba(255,255,255,.18) !important;
}
html[data-header="solid"] .nav-link:hover,
html[data-header="solid"] .nav-link--active,
html[data-header="solid"] .client-dm-btn {
    background: color-mix(in srgb, var(--color-nav-text) 16%, transparent) !important;
}
html[data-theme="dark"][data-header="minimal"] .nav-link:hover,
html[data-theme="dark"][data-header="minimal"] .nav-link--active,
html[data-theme="dark"][data-header="glass"] .nav-link:hover,
html[data-theme="dark"][data-header="glass"] .nav-link--active {
    background: rgba(255,255,255,.12) !important;
}

/* Custom per-link nav colors assume a dark header. On light surfaces in site light mode,
   restore readable text even when inline tenant overrides still say #fff. */
html:not([data-theme="dark"]):is([data-header="glass"], [data-header="light"], [data-header="minimal"], [data-header="none"])
body .site-header .site-nav .nav-link[data-nav-key] {
    color: #0f172a !important;
}
html:not([data-theme="dark"]):is([data-header="glass"], [data-header="light"], [data-header="minimal"], [data-header="none"])
body .site-header .site-nav .nav-link[data-nav-key]:hover,
html:not([data-theme="dark"]):is([data-header="glass"], [data-header="light"], [data-header="minimal"], [data-header="none"])
body .site-header .site-nav .nav-link[data-nav-key].nav-link--active {
    color: #0f172a !important;
}

/* Footer: gradient is always dark; solid follows primary color contrast. */
html[data-footer="gradient"] .footer-inner {
    color: rgba(255,255,255,.78) !important;
}
html[data-footer="gradient"] .footer-copy,
html[data-footer="gradient"] .footer-registrace-company,
html[data-footer="gradient"] .footer-registrace-row,
html[data-footer="gradient"] .footer-registrace-title,
html[data-footer="gradient"] .footer-gdpr-link,
html[data-footer="gradient"] .footer-vizitka-link {
    color: rgba(255,255,255,.78) !important;
}
html[data-footer="gradient"] .footer-registrace-company strong {
    color: #fff !important;
}
html[data-footer="gradient"] .footer-vizitka-link {
    border-color: rgba(255,255,255,.24) !important;
}

html[data-footer="solid"] .footer-inner {
    color: var(--color-nav-text) !important;
}
html[data-footer="solid"] .footer-copy,
html[data-footer="solid"] .footer-registrace-company,
html[data-footer="solid"] .footer-registrace-row,
html[data-footer="solid"] .footer-registrace-title,
html[data-footer="solid"] .footer-gdpr-link,
html[data-footer="solid"] .footer-vizitka-link {
    color: var(--color-nav-text) !important;
}
html[data-footer="solid"] .footer-registrace-company strong {
    color: var(--color-nav-text) !important;
}
html[data-footer="solid"] .footer-vizitka-link {
    border-color: color-mix(in srgb, var(--color-nav-text) 24%, transparent) !important;
}

/* Footer: glass readable surface */
html[data-footer="glass"] .footer-inner {
    background: rgba(255,255,255,.78) !important;
    border-top-color: rgba(15,23,42,.1) !important;
    color: rgba(15,23,42,.76) !important;
}
html[data-footer="glass"] .footer-copy,
html[data-footer="glass"] .footer-registrace-company,
html[data-footer="glass"] .footer-registrace-row,
html[data-footer="glass"] .footer-registrace-title,
html[data-footer="glass"] .footer-gdpr-link,
html[data-footer="glass"] .footer-vizitka-link {
    color: rgba(15,23,42,.74) !important;
}
html[data-footer="glass"] .footer-registrace-company strong { color: #0f172a !important; }
html[data-footer="glass"] .footer-vizitka-link { border-color: rgba(15,23,42,.2) !important; }
html[data-theme="dark"][data-footer="glass"] .footer-inner {
    background: rgba(15,23,42,.78) !important;
    border-top-color: rgba(255,255,255,.14) !important;
    color: rgba(248,250,252,.78) !important;
}
html[data-theme="dark"][data-footer="glass"] .footer-copy,
html[data-theme="dark"][data-footer="glass"] .footer-registrace-company,
html[data-theme="dark"][data-footer="glass"] .footer-registrace-row,
html[data-theme="dark"][data-footer="glass"] .footer-registrace-title,
html[data-theme="dark"][data-footer="glass"] .footer-gdpr-link,
html[data-theme="dark"][data-footer="glass"] .footer-vizitka-link {
    color: rgba(248,250,252,.76) !important;
}
html[data-theme="dark"][data-footer="glass"] .footer-registrace-company strong { color: #fff !important; }
html[data-theme="dark"][data-footer="glass"] .footer-vizitka-link { border-color: rgba(255,255,255,.24) !important; }

/* Footer: light */
html[data-footer="light"] .footer-inner {
    color: rgba(15,23,42,.76) !important;
}
html[data-footer="light"] .footer-copy,
html[data-footer="light"] .footer-registrace-company,
html[data-footer="light"] .footer-registrace-row,
html[data-footer="light"] .footer-registrace-title,
html[data-footer="light"] .footer-gdpr-link,
html[data-footer="light"] .footer-vizitka-link {
    color: rgba(15,23,42,.74) !important;
}
html[data-footer="light"] .footer-registrace-company strong { color: #0f172a !important; }

/* Footer: minimal follows current mode */
html[data-footer="minimal"] .footer-copy,
html[data-footer="minimal"] .footer-registrace-company,
html[data-footer="minimal"] .footer-registrace-row,
html[data-footer="minimal"] .footer-registrace-title,
html[data-footer="minimal"] .footer-gdpr-link,
html[data-footer="minimal"] .footer-vizitka-link {
    color: rgba(15,23,42,.74) !important;
}
html[data-footer="minimal"] .footer-registrace-company strong { color: #0f172a !important; }
html[data-theme="dark"][data-footer="minimal"] .footer-copy,
html[data-theme="dark"][data-footer="minimal"] .footer-registrace-company,
html[data-theme="dark"][data-footer="minimal"] .footer-registrace-row,
html[data-theme="dark"][data-footer="minimal"] .footer-registrace-title,
html[data-theme="dark"][data-footer="minimal"] .footer-gdpr-link,
html[data-theme="dark"][data-footer="minimal"] .footer-vizitka-link {
    color: rgba(248,250,252,.76) !important;
}
html[data-theme="dark"][data-footer="minimal"] .footer-registrace-company strong { color: #fff !important; }

/* Generic text safety for transparent public sections over graphic backgrounds. */
html[data-bg] .about-content,
html[data-bg] .contact-info,
html[data-bg] .blog-article,
html[data-bg] .reference-section,
html[data-bg] .calculator-section {
    color: var(--color-text);
}
html[data-theme="dark"][data-bg] .about-content,
html[data-theme="dark"][data-bg] .contact-info,
html[data-theme="dark"][data-bg] .blog-article,
html[data-theme="dark"][data-bg] .reference-section,
html[data-theme="dark"][data-bg] .calculator-section {
    color: #f1f5f9;
}

/* Blog newsletter must stay readable even when page sections are transparent. */
html[data-bg] .blog-subscribe-section {
    background: transparent !important;
}
html[data-bg] .blog-subscribe-box {
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(15,23,42,.1) !important;
    box-shadow: 0 18px 54px -34px rgba(15,23,42,.35);
    color: #0f172a !important;
}
html[data-bg] .blog-subscribe-text h3 {
    color: #0f172a !important;
}
html[data-bg] .blog-subscribe-text p {
    color: rgba(15,23,42,.68) !important;
}
html[data-bg] .blog-subscribe-icon {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
    color: var(--color-primary) !important;
}
html[data-bg] .blog-subscribe-form .form-control,
html[data-bg] .sub-input {
    background: #fff !important;
    color: #0f172a !important;
    border-color: rgba(15,23,42,.16) !important;
}
html[data-bg] .blog-subscribe-form .form-control::placeholder,
html[data-bg] .sub-input::placeholder {
    color: rgba(15,23,42,.6) !important;
    opacity: 1 !important;
}
html[data-theme="dark"][data-bg] .blog-subscribe-box {
    background: rgba(15,23,42,.88) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 54px -34px rgba(0,0,0,.75);
    color: #f8fafc !important;
}
html[data-theme="dark"][data-bg] .blog-subscribe-text h3 {
    color: #f8fafc !important;
}
html[data-theme="dark"][data-bg] .blog-subscribe-text p {
    color: rgba(248,250,252,.72) !important;
}
html[data-theme="dark"][data-bg] .blog-subscribe-icon {
    background: rgba(255,255,255,.1) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"][data-bg] .blog-subscribe-form .form-control,
html[data-theme="dark"][data-bg] .sub-input {
    background: rgba(15,23,42,.92) !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.16) !important;
}
html[data-theme="dark"][data-bg] .blog-subscribe-form .form-control::placeholder,
html[data-theme="dark"][data-bg] .sub-input::placeholder {
    color: rgba(248,250,252,.62) !important;
    opacity: 1 !important;
}

/* ============================================================
   VIDEA – grid, card, modal
   ============================================================ */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.75rem;
    margin-bottom: 3rem;
}

.video-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    border-color: var(--color-primary);
}
[data-theme="dark"] .video-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .video-card:hover { border-color: #3b82f6; }

.video-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}
.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.video-card:hover .video-thumb img { transform: scale(1.04); }
.video-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
    min-height: 160px;
}
.video-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
}
.video-thumb:hover .video-play-btn { opacity: 1; }
.video-play-btn svg circle { fill: var(--color-primary); }

.video-info {
    padding: 1.125rem 1.25rem 1.375rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}
.video-cat {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.video-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
    margin: 0;
}
.video-perex {
    font-size: .875rem;
    color: var(--color-muted);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
.video-yt-link {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: .25rem;
}
.video-yt-link:hover { text-decoration: underline; }

.blog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.75rem;
}
.blog-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--color-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Video modal */
.video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.82);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.video-modal-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.video-modal-embed { width: 100%; height: 100%; }
.video-modal-close {
    position: absolute;
    top: .625rem;
    right: .75rem;
    z-index: 10;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.video-modal-close:hover { background: rgba(0,0,0,.85); }

@media (max-width: 640px) {
    .video-grid { grid-template-columns: 1fr; }
    .blog-toolbar { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   REZERVACE – custom booking calendar
   ============================================================ */
.booking-wrap {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 2rem;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto;
}
@media (max-width: 768px) { .booking-wrap { grid-template-columns: 1fr; } }

.booking-calendar-col {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
}
.booking-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.25rem;
    background: #1a73e8;
    color: #fff;
}
[data-theme="dark"] .booking-cal-header { background: #1d4ed8; }
.booking-cal-month {
    font-weight: 700;
    font-size: 1rem;
}
.booking-nav-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 .25rem;
    opacity: .85;
    transition: opacity .15s;
}
.booking-nav-btn:hover { opacity: 1; }

.booking-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    padding: .5rem;
}
.booking-cal-dow {
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-muted);
    padding: .375rem 0;
}
.booking-cal-day {
    text-align: center;
    padding: .5rem 0;
    font-size: .875rem;
    border-radius: .5rem;
    transition: background .15s;
    user-select: none;
}
.booking-cal-day--empty { visibility: hidden; }
.booking-cal-day--past { color: var(--color-muted); opacity: .45; }
.booking-cal-day--none { color: var(--color-muted); }

.booking-cal-legend {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .625rem 1rem .875rem;
    font-size: .78rem;
    color: var(--color-muted);
}
.booking-legend-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.booking-legend-dot--avail { background: #1a73e8; }
.booking-legend-dot--none  { background: #e2e8f0; }

.booking-right-col {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1.5rem;
    min-height: 300px;
}
.booking-slots-title, .booking-form-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text);
}
.booking-form-slot {
    font-size: .9rem;
    color: var(--color-muted);
    margin-bottom: 1rem;
    font-weight: 600;
}
.booking-slots-list {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}
.booking-slot-btn {
    padding: .5rem 1rem;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: .5rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.booking-empty-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--color-muted);
    text-align: center;
}
[data-theme="dark"] .booking-calendar-col,
[data-theme="dark"] .booking-right-col {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .booking-slot-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .booking-legend-dot--none { background: #334155; }

/* Booking Google auth */
.booking-auth-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    padding: 2rem 1.5rem;
    border: 1.5px dashed var(--color-border, #e2e8f0);
    border-radius: .75rem;
    margin-bottom: 1.25rem;
}
.booking-auth-box p { margin: 0; font-size: .95rem; }
.booking-auth-note { font-size: .8rem; color: var(--color-muted); }
.booking-google-user {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--color-surface-alt, #f8fafc);
    border-radius: .625rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}
.booking-google-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* ── Dark mode: tlačítka s pevnou barvou (nezávislá na custom barvě poradce) ──
   V light mode je custom barva záměrná (branding). V dark mode ale custom barvy
   (světlá žlutá, neon, růžová…) mohou být nečitelné – proto pevná modrá. */
[data-theme="dark"] .btn-primary {
    background: #3b82f6 !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 16px -2px rgba(59,130,246,.35) !important;
}
[data-theme="dark"] .btn-primary:hover {
    background: #2563eb !important;
    opacity: 1 !important;
    box-shadow: 0 8px 24px -2px rgba(59,130,246,.45) !important;
}
[data-theme="dark"] .btn-outline {
    background: transparent !important;
    border-color: #60a5fa !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .btn-outline:hover {
    background: rgba(96,165,250,.15) !important;
    border-color: #60a5fa !important;
    color: #93c5fd !important;
}

/* ── Kontakt – digitální vizitka ── */
.contact-vizitka-wrap {
    margin-top: 2.5rem;
}
.contact-vizitka-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface, #fff);
    border: 1.5px solid var(--color-border, #e2e8f0);
    border-radius: 1rem;
    flex-wrap: wrap;
}
.contact-vizitka-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-primary, #1a73e8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}
.contact-vizitka-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contact-vizitka-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.contact-vizitka-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-vizitka-role {
    font-size: .875rem;
    color: var(--color-muted, #64748b);
}
.contact-vizitka-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-primary, #1a73e8);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .15rem;
}
.contact-vizitka-actions {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
    align-items: center;
}
.contact-vizitka-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
[data-theme="dark"] .contact-vizitka-card {
    background: #1e293b;
    border-color: #334155;
}

/* ── GDPR souhlas checkbox ── */
.form-group--checkbox {
    margin-top: .25rem;
}
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    cursor: pointer;
    font-size: .9rem;
    color: var(--color-text, #1e293b);
    line-height: 1.5;
}
.checkbox-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: .2rem;
    accent-color: var(--color-primary, #1a73e8);
    cursor: pointer;
}
.checkbox-label a {
    color: var(--color-primary, #1a73e8);
    text-decoration: underline;
}

/* ── Stránka GDPR ── */
.gdpr-section .gdpr-content {
    max-width: 800px;
    margin: 0 auto;
}
.gdpr-content h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 2rem 0 .5rem;
    color: var(--color-text, #1e293b);
}
.gdpr-content h2:first-child {
    margin-top: 0;
}
.gdpr-content p,
.gdpr-content ul {
    font-size: .97rem;
    color: var(--color-muted, #475569);
    line-height: 1.75;
    margin-bottom: .5rem;
}
.gdpr-content ul {
    padding-left: 1.5rem;
}
.gdpr-content ul li {
    margin-bottom: .35rem;
}
.gdpr-content a {
    color: var(--color-primary, #1a73e8);
}
.gdpr-updated {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border, #e2e8f0);
    color: var(--color-muted, #64748b) !important;
}

/* ── PWA Fixed Install Button ── */
.pwa-fixed-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(135deg, #1a73e8, #0d47a1);
    color: #fff;
    border-radius: 999px;
    padding: .7rem 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(26,115,232,.45);
    font-size: .875rem;
    font-weight: 600;
    transition: transform .18s, box-shadow .18s, background .15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.pwa-fixed-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(26,115,232,.55);
}
.pwa-fixed-btn:active { transform: scale(.96); }
.pwa-fixed-icon { font-size: 1.2rem; line-height: 1; }
.pwa-fixed-label { white-space: nowrap; }
@media (min-width: 769px) {
    .pwa-fixed-btn { padding: .55rem 1rem; font-size: .8rem; opacity: .85; }
    .pwa-fixed-btn:hover { opacity: 1; }
}

/* ── PWA standalone (after install) – hide chrome, respect iOS notch ── */
@media all and (display-mode: standalone) {
    html, body {
        /* Push content below the iOS status bar / notch (handled by safe-area-inset-top) */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        background: #0f172a;
    }
    /* The fixed install button is pointless inside the installed app */
    .pwa-fixed-btn { display: none !important; }
    /* Disable text selection / iOS callouts so it feels like a native app */
    body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    /* Re-enable selection where the user actually needs it (inputs / textareas / results) */
    input, textarea, [contenteditable], .calc-result, .calc-result *, .blog-post-content, .blog-post-content * {
        -webkit-user-select: text; user-select: text;
    }
}
/* iOS-specific: same as above for older iOS that reports navigator.standalone instead of display-mode */
@supports (-webkit-touch-callout: none) {
    body.pwa-standalone {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ── iOS PWA fallback hint (shown when Web Share API is unavailable) ── */
.pwa-ios-hint {
    position: fixed;
    left: 50%;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 12px);
    z-index: 1001;
    display: none;
    align-items: center;
    gap: .5rem;
    max-width: calc(100vw - 2rem);
    background: #1e293b;
    color: #fff;
    padding: .65rem 2.25rem .65rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    line-height: 1.35;
    box-shadow: 0 12px 32px rgba(15,23,42,.35);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.pwa-ios-hint--show {
    display: inline-flex;
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.pwa-ios-hint strong { color: #fde68a; font-weight: 700; }
.pwa-ios-hint svg { flex-shrink: 0; }
.pwa-ios-hint button {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.pwa-ios-hint button:hover { background: rgba(255,255,255,.08); color: #fff; }
.pwa-ios-hint .pwa-hint-ios,
.pwa-ios-hint .pwa-hint-desktop { display: none; align-items: center; gap: .35rem; }
.pwa-ios-hint.pwa-hint-mode-ios .pwa-hint-ios { display: inline-flex; }
.pwa-ios-hint.pwa-hint-mode-desktop .pwa-hint-desktop { display: inline-flex; }
.pwa-ios-hint.pwa-hint-mode-desktop { bottom: 1.5rem; }

/* ── "S čím vám mohu pomoci?" – homepage section ── */
.pomoci-section {
    padding: 4rem 0 5rem;
}
.pomoci-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.pomoci-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 .5rem;
    color: var(--color-text, #1e293b);
}
.pomoci-sub {
    font-size: 1rem;
    color: var(--color-muted, #64748b);
    margin: 0;
}

/* ── Pomoci: čistý styl karet (ikony, bez fotek) ── */
.pomoci-clean-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
.pomoci-clean-card {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1.5rem 1.5rem 1.35rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e6eaf2);
    border-radius: 20px;
    text-decoration: none;
    color: var(--color-text, #0f172a);
    box-shadow: 0 6px 24px rgba(15,23,42,.05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pomoci-clean-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    box-shadow: 0 18px 44px rgba(15,23,42,.11);
}
.pomoci-clean-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    margin-bottom: .25rem;
}
.pomoci-clean-icon svg { width: 22px; height: 22px; }
.pomoci-clean-card h3 {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: inherit;
}
.pomoci-clean-card p {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--color-muted, #64748b);
    margin: 0;
    flex: 1;
}
.pomoci-clean-link {
    font-size: .875rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: .35rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
/* Highlight karta (důchodová analýza) – plný brand gradient */
.pomoci-clean-card--highlight {
    background: linear-gradient(150deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 62%, #1e1b4b));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 18px 48px color-mix(in srgb, var(--color-primary) 38%, transparent);
}
.pomoci-clean-card--highlight p { color: rgba(255,255,255,.85); }
.pomoci-clean-card--highlight .pomoci-clean-icon {
    color: #fff;
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.28);
}
.pomoci-clean-card--highlight .pomoci-clean-link { color: #fff; }
.pomoci-clean-card--highlight:hover {
    border-color: rgba(255,255,255,.35);
    box-shadow: 0 24px 56px color-mix(in srgb, var(--color-primary) 48%, transparent);
}
/* Reveal animace (sdílená s images stylem) */
.pomoci-grid[data-cards-reveal] .pomoci-clean-card {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .5s ease, transform .5s ease, border-color .18s ease, box-shadow .18s ease;
    transition-delay: calc(var(--i, 0) * 60ms);
}
.pomoci-grid[data-cards-reveal].is-revealed .pomoci-clean-card {
    opacity: 1;
    transform: translateY(0);
}
.pomoci-grid[data-cards-reveal].is-revealed .pomoci-clean-card:hover {
    transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
    .pomoci-grid[data-cards-reveal] .pomoci-clean-card { opacity: 1; transform: none; }
}
/* ---------- Hero entrance (jen úvodní stránka) ---------- */
@keyframes hero-enter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero .hero-text > * {
    animation: hero-enter .7s cubic-bezier(.22,.61,.36,1) both;
}
.hero .hero-text > :nth-child(1) { animation-delay: .05s; }
.hero .hero-text > :nth-child(2) { animation-delay: .13s; }
.hero .hero-text > :nth-child(3) { animation-delay: .21s; }
.hero .hero-text > :nth-child(4) { animation-delay: .29s; }
.hero .hero-text > :nth-child(5) { animation-delay: .37s; }
.hero .hero-text > :nth-child(6) { animation-delay: .45s; }
.hero .hero-text > :nth-child(7) { animation-delay: .53s; }
.hero .hero-text > :nth-child(8) { animation-delay: .61s; }
@media (prefers-reduced-motion: reduce) {
    .hero .hero-text > * { animation: none; }
}

/* ---------- Scroll reveal karet služeb ---------- */
.pomoci-grid[data-cards-reveal] .pomoci-card {
    opacity: 0;
    transform: translateY(22px);
}
.pomoci-grid[data-cards-reveal].is-revealed .pomoci-card {
    animation: career-rise .6s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(var(--i, 0) * 90ms);
}
@media (prefers-reduced-motion: reduce) {
    .pomoci-grid[data-cards-reveal] .pomoci-card { opacity: 1; transform: none; animation: none !important; }
}

/* ---------- Čísla / sliby (count-up pás) ---------- */
.home-stats-section { padding-top: 0 !important; }
.home-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.2rem, 4vw, 3rem);
    border-radius: 22px;
    background: color-mix(in srgb, var(--color-primary, #1a73e8) 4%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary, #1a73e8) 14%, transparent);
    position: relative;
    overflow: hidden;
}
.home-stats::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--color-primary, #1a73e8) 10%, transparent), transparent 46%);
    pointer-events: none;
}
.home-stats__item {
    position: relative;
    text-align: center;
    padding: .35rem 1rem;
}
.home-stats__item + .home-stats__item {
    border-left: 1px solid color-mix(in srgb, var(--color-primary, #1a73e8) 14%, transparent);
}
.home-stats__value {
    display: block;
    font-size: clamp(2rem, 4.4vw, 2.9rem);
    font-weight: 850;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--color-primary, #1a73e8);
    font-variant-numeric: tabular-nums;
}
.home-stats__suffix { font-size: .62em; font-weight: 800; margin-left: .14em; }
.home-stats__label {
    display: block;
    margin-top: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-muted, #64748b);
    line-height: 1.45;
}
[data-theme="dark"] .home-stats {
    background: color-mix(in srgb, var(--color-primary, #1a73e8) 12%, rgba(15,23,42,.65));
    border-color: color-mix(in srgb, var(--color-primary, #1a73e8) 30%, transparent);
}
[data-theme="dark"] .home-stats__value { color: color-mix(in srgb, var(--color-primary, #1a73e8) 55%, #fff); }
[data-theme="dark"] .home-stats__label { color: rgba(226,232,240,.75); }
@media (max-width: 700px) {
    .home-stats { grid-template-columns: 1fr 1fr; }
    .home-stats__item + .home-stats__item { border-left: 0; }
}
@media (max-width: 420px) {
    .home-stats { grid-template-columns: 1fr; }
}

.pomoci-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
/* Při 2 nebo 4 kartách vyvážená mřížka 2×N místo osiřelé karty na druhém řádku */
.pomoci-grid:has(> :nth-child(2):last-child),
.pomoci-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
}
.pomoci-card {
    display: block;
    min-height: 220px;
    padding: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform .18s, box-shadow .18s, border-color .18s;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.pomoci-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(15,23,42,.18);
    border-color: color-mix(in srgb, var(--color-primary, #1a73e8) 55%, #fff);
    text-decoration: none;
    color: inherit;
}
.pomoci-card--highlight {
    border-color: #f59e0b;
}
.pomoci-card--highlight:hover { border-color: #d97706; }
.pomoci-card--no-bg .pomoci-card-bg {
    display: none;
}
.pomoci-card--no-bg .pomoci-card-overlay {
    background: transparent;
}
.pomoci-card--no-bg .pomoci-card-body h3 {
    color: var(--color-text, #0f172a);
    text-shadow: none;
}
.pomoci-card--no-bg .pomoci-card-body p {
    color: var(--color-muted, #64748b);
}
.pomoci-card--no-bg .pomoci-card-link {
    color: var(--color-primary, #1a73e8);
    background: color-mix(in srgb, var(--color-primary, #1a73e8) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-primary, #1a73e8) 24%, transparent);
    backdrop-filter: none;
}
.pomoci-card--no-bg.pomoci-card--highlight .pomoci-card-link {
    color: #b45309;
    background: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.28);
}
.pomoci-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.pomoci-card-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .35s ease;
}
.pomoci-card:hover .pomoci-card-bg-img {
    transform: scale(1.08);
}
.pomoci-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(15,23,42,.18) 0%, rgba(15,23,42,.72) 58%, rgba(15,23,42,.88) 100%),
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.14), transparent 42%);
    transition: background .25s ease;
}
.pomoci-card--highlight .pomoci-card-overlay {
    background:
        linear-gradient(180deg, rgba(120,53,15,.22) 0%, rgba(15,23,42,.74) 58%, rgba(15,23,42,.9) 100%),
        radial-gradient(circle at 88% 12%, rgba(251,191,36,.22), transparent 44%);
}
.pomoci-card:hover .pomoci-card-overlay {
    background:
        linear-gradient(180deg, rgba(15,23,42,.12) 0%, rgba(15,23,42,.66) 58%, rgba(15,23,42,.84) 100%),
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.18), transparent 42%);
}
.pomoci-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-height: 220px;
    padding: 1.35rem 1.4rem 1.25rem;
}
.pomoci-card-body { flex: 1; }
.pomoci-card-body h3 {
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -.01em;
    margin: 0 0 .4rem;
    color: #fff;
    line-height: 1.35;
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.pomoci-card-body p {
    font-size: .855rem;
    color: rgba(241,245,249,.92);
    margin: 0;
    line-height: 1.55;
}
.pension-countup-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    margin: .65rem 0 .75rem;
}
.pension-countup-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: .48rem .42rem;
    border-radius: 14px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.24);
    text-align: center;
}
.pension-countup-item strong {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    font-size: clamp(1rem, 2.5vw, 1.28rem);
    line-height: 1;
    font-weight: 850;
    color: #b45309;
    white-space: nowrap;
}
.pension-countup-item small {
    display: block;
    margin-top: .28rem;
    font-size: .62rem;
    line-height: 1.15;
    font-weight: 750;
    color: var(--color-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pomoci-card-link {
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    margin-top: auto;
    width: fit-content;
    padding: .42rem .78rem;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.pomoci-card:hover .pomoci-card-link {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.42);
    transform: translateX(2px);
}
.pomoci-card--highlight .pomoci-card-link {
    background: rgba(245,158,11,.24);
    border-color: rgba(251,191,36,.45);
    color: #fffbeb;
}
[data-theme="dark"] .pomoci-card {
    border-color: var(--border-dark, #334155);
}
[data-theme="dark"] .pomoci-card--highlight {
    border-color: rgba(245,158,11,.42);
}
[data-theme="dark"] .pension-countup-item {
    background: rgba(245,158,11,.11);
    border-color: rgba(245,158,11,.28);
}
[data-theme="dark"] .pension-countup-item strong { color: #fbbf24; }
[data-theme="dark"] .pension-countup-item small { color: #cbd5e1; }
.pension-global-stats {
    padding: clamp(1.25rem, 3vw, 2rem) 0 0;
}
.pension-global-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.75rem, 2vw, 1rem);
}
.pension-global-stat {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 132px;
    container-type: inline-size;
    border-radius: 24px;
    padding: clamp(1.15rem, 2.8vw, 1.65rem);
    background:
        radial-gradient(circle at top right, rgba(251,191,36,.32), transparent 42%),
        linear-gradient(135deg, rgba(245,158,11,.18), rgba(255,255,255,.72));
    border: 1px solid rgba(245,158,11,.36);
    color: #92400e;
    backdrop-filter: blur(12px);
    box-shadow: 0 22px 55px rgba(146,64,14,.14);
}
.pension-global-stat::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    inset: auto -8% -18% 35%;
    height: 72px;
    border-radius: 999px;
    background: rgba(245,158,11,.14);
    transform: rotate(-8deg);
}
.pension-global-stat > span {
    display: block;
    position: relative;
    z-index: 1;
    font-size: .82rem;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9a3412;
    opacity: .95;
}
.pension-global-stat strong {
    display: block;
    position: relative;
    z-index: 1;
    margin-top: .55rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: clamp(1.65rem, min(10.5cqi, 7.5vw), 3.35rem);
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -.04em;
    color: #78350f;
    font-variant-numeric: tabular-nums;
}
.pension-global-stat-amount {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: .06em;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .1rem;
}
.pension-global-stat-amount::-webkit-scrollbar {
    display: none;
}
.pension-global-stat strong .js-count-up {
    display: inline;
    font-size: 1em;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
}
.pension-global-stat strong small {
    flex-shrink: 0;
    margin-left: .06em;
    font-size: .28em;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.01em;
}
.pension-global-stat em {
    flex-shrink: 0;
    font-style: normal;
    font-size: .62em;
    letter-spacing: -.04em;
}
.pension-global-stat-note {
    position: relative;
    z-index: 1;
    margin: .45rem 0 0;
    font-size: .78rem;
    line-height: 1.35;
    font-weight: 650;
    letter-spacing: .01em;
    text-transform: none;
    color: #9a3412;
    opacity: .95;
}
[data-theme="dark"] .pension-global-stat {
    background:
        radial-gradient(circle at top right, rgba(251,191,36,.26), transparent 42%),
        linear-gradient(135deg, rgba(245,158,11,.16), rgba(15,23,42,.42));
    border-color: rgba(245,158,11,.32);
    color: #fef3c7;
    box-shadow: 0 24px 65px rgba(0,0,0,.28);
}
[data-theme="dark"] .pension-global-stat > span { color: #fde68a; }
[data-theme="dark"] .pension-global-stat strong { color: #fbbf24; }
.pension-global-stat--green strong,
.pension-global-stat--green .pension-global-stat-amount,
.pension-global-stat--green strong .js-count-up,
.pension-global-stat--green strong small,
.pension-global-stat--green em {
    color: #16a34a;
}
[data-theme="dark"] .pension-global-stat--green strong,
[data-theme="dark"] .pension-global-stat--green .pension-global-stat-amount,
[data-theme="dark"] .pension-global-stat--green strong .js-count-up,
[data-theme="dark"] .pension-global-stat--green strong small,
[data-theme="dark"] .pension-global-stat--green em {
    color: #4ade80;
}
[data-theme="dark"] .pension-global-stat-note {
    color: #fde68a;
    opacity: .95;
}
@media (max-width: 900px) {
    .pomoci-grid { grid-template-columns: repeat(2, 1fr); }
    .pension-global-stats-grid { grid-template-columns: 1fr; }
    .pension-global-stat strong {
        font-size: clamp(2.7rem, 12vw, 4.2rem);
    }
}
@media (max-width: 540px) {
    .pomoci-grid { grid-template-columns: 1fr; }
    .pomoci-card,
    .pomoci-card-content { min-height: 200px; }
    .pension-countup-strip { grid-template-columns: 1fr; }
}
@media (min-width: 1100px) {
    .pension-global-stats-grid {
        grid-template-columns: repeat(3, minmax(280px, 1fr));
    }
}

/* ═══════════════════════════════════════════════════
   Pension comparison slider (před / po doplnění doby)
   Společné styly pro variantu A (React+GSAP) i B (vanilla)
   ═══════════════════════════════════════════════════ */
.pension-comparison-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-primary, #1a73e8) 4%, transparent), transparent);
}
.pension-comparison-section__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1.25rem;
    text-align: center;
}
.pension-comparison-section__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-primary, #1a73e8);
    background: color-mix(in srgb, var(--color-primary, #1a73e8) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #1a73e8) 22%, transparent);
    padding: .35rem .9rem;
    border-radius: var(--r-full, 999px);
    margin-bottom: 1rem;
}
.pension-comparison-section__title {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--color-text, #0f172a);
    margin: 0 0 .75rem;
    line-height: 1.15;
}
.pension-comparison-section__subtitle {
    color: var(--color-muted, #64748b);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto 2rem;
}
.pension-comparison-section__hint {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    color: var(--color-muted, #64748b);
    font-size: .85rem;
}
.pension-comparison-section__hint svg {
    width: 16px; height: 16px;
}

/* ═══════════════════════════════════════════════════
   Pension analysis price block (cena důchodové analýzy)
   ═══════════════════════════════════════════════════ */
.pension-price {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.pension-price__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    border-radius: var(--r-xl, 24px);
    background:
        radial-gradient(900px 380px at 100% 0%, color-mix(in srgb, var(--color-primary, #1a73e8) 12%, transparent), transparent 60%),
        linear-gradient(160deg, color-mix(in srgb, var(--color-surface, #fff) 96%, transparent), color-mix(in srgb, var(--color-primary, #1a73e8) 6%, var(--color-surface, #fff)));
    border: 1px solid color-mix(in srgb, var(--color-primary, #1a73e8) 18%, transparent);
    box-shadow: 0 28px 70px -28px rgba(15, 23, 42, .28);
}
[data-theme="dark"] .pension-price__inner {
    background:
        radial-gradient(900px 380px at 100% 0%, color-mix(in srgb, var(--color-primary, #1a73e8) 22%, transparent), transparent 60%),
        linear-gradient(160deg, rgba(15, 23, 42, .9), rgba(2, 6, 23, .9));
    border-color: color-mix(in srgb, var(--color-primary, #1a73e8) 30%, transparent);
    box-shadow: 0 32px 80px -28px rgba(0, 0, 0, .55);
}
.pension-price__text { min-width: 0; }
.pension-price__eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-primary, #1a73e8);
    background: color-mix(in srgb, var(--color-primary, #1a73e8) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #1a73e8) 22%, transparent);
    padding: .35rem .9rem;
    border-radius: var(--r-full, 999px);
    margin-bottom: .9rem;
}
.pension-price__title {
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--color-text, #0f172a);
    margin: 0 0 .65rem;
}
.pension-price__lead {
    color: var(--color-muted, #64748b);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 48ch;
    margin: 0 0 1.1rem;
}
.pension-price__list {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.pension-price__list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: var(--color-text, #0f172a);
    font-size: .94rem;
    line-height: 1.45;
    font-weight: 550;
}
.pension-price__list li svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: .12rem;
    color: var(--color-primary, #1a73e8);
    background: color-mix(in srgb, var(--color-primary, #1a73e8) 12%, transparent);
    border-radius: 50%;
    padding: 3px;
    box-sizing: content-box;
}
.pension-price__discount {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    padding: .8rem .95rem;
    border-radius: var(--r-md, 14px);
    background: color-mix(in srgb, var(--color-secondary, #34a853) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-secondary, #34a853) 22%, transparent);
    color: var(--color-muted, #64748b);
    font-size: .9rem;
    line-height: 1.45;
    font-weight: 600;
}
[data-theme="dark"] .pension-price__discount { color: #cbd5e1; }
.pension-price__discount svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: .05rem;
    color: var(--color-secondary, #34a853);
}

.pension-price__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2.2vw, 1.8rem);
    border-radius: var(--r-lg, 22px);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--color-primary, #1a73e8) 18%, transparent), transparent 65%),
        color-mix(in srgb, var(--color-primary, #1a73e8) 4%, var(--color-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary, #1a73e8) 24%, transparent);
    box-shadow: 0 22px 50px -22px rgba(15, 23, 42, .25);
}
[data-theme="dark"] .pension-price__card {
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--color-primary, #1a73e8) 26%, transparent), transparent 65%),
        rgba(15, 23, 42, .65);
    box-shadow: 0 24px 55px -22px rgba(0, 0, 0, .55);
}
.pension-price__amount {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .25rem;
    color: var(--color-primary, #1a73e8);
    line-height: 1;
}
.pension-price__value {
    font-size: clamp(3rem, 6.5vw, 4.4rem);
    font-weight: 950;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}
.pension-price__currency {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
}
[data-theme="dark"] .pension-price__amount { color: color-mix(in srgb, var(--color-primary, #1a73e8) 80%, #ffffff 20%); }
.pension-price__amount-note {
    margin: .5rem 0 0;
    color: var(--color-muted, #64748b);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.4;
}
.pension-price__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 1.15rem 0 .6rem;
    padding: .85rem 1.6rem;
    min-width: 70%;
    border-radius: var(--r-full, 999px);
    background: linear-gradient(135deg, var(--color-primary, #1a73e8), color-mix(in srgb, var(--color-primary, #1a73e8) 70%, var(--color-secondary, #34a853)));
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-decoration: none;
    box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--color-primary, #1a73e8) 70%, transparent);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pension-price__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 18px 34px -10px color-mix(in srgb, var(--color-primary, #1a73e8) 75%, transparent);
}
.pension-price__cta:active { transform: translateY(0); }
.pension-price__cta:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary, #1a73e8) 50%, transparent);
    outline-offset: 3px;
}
.pension-price__cta svg {
    width: 18px;
    height: 18px;
}
.pension-price__hint {
    margin: 0;
    color: var(--color-muted, #64748b);
    font-size: .82rem;
    line-height: 1.4;
    max-width: 24ch;
}

@media (max-width: 820px) {
    .pension-price__inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        text-align: left;
    }
    .pension-price__card { order: -1; }
}
@media (max-width: 480px) {
    .pension-price__cta { width: 100%; }
}

/* Slider container – musí mít fixní poměr, ať clip-path funguje při resize */
.pension-comparison-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 40 / 27;
    max-height: 580px;
    margin: 0 auto;
    border-radius: var(--r-xl, 20px);
    background: var(--color-surface, #fff);
    box-shadow: 0 30px 70px -22px rgba(15, 23, 42, .35);
    overflow: hidden;
}
[data-theme="dark"] .pension-comparison-frame {
    box-shadow: 0 30px 70px -22px rgba(0, 0, 0, .55);
}

/* React root z Varianty A */
[data-pension-comparison-root] {
    width: 100%;
    height: 100%;
}
/* Vanilla root z Varianty B – starting state opacity */
[data-pension-comparison-vanilla] {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .3s ease;
}
[data-pension-comparison-vanilla].is-ready { opacity: 1; }

/* ── Slider internals (platí pro obě varianty) ── */
.pension-cmp {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    background: transparent;
    opacity: 0;
    transition: opacity .3s ease;
}
.pension-cmp.is-ready { opacity: 1; }
.pension-cmp-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: ew-resize;
}
.pension-cmp-inner.is-hover-mode { cursor: crosshair; }
.pension-cmp-inner.is-grabbing { cursor: grabbing; }
.pension-cmp-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: clip-path;
    transform: translateZ(0);
    pointer-events: none;
}
.pension-cmp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    display: block;
}
/* Wrapper pro inline SVG (přímo v DOMu, ne přes <img>). */
.pension-cmp-img-wrap {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    pointer-events: none;
}
.pension-cmp-img-wrap > svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Fallback noscript (když je JS vypnutý) – zobraz alespoň „před" stav. */
.pension-cmp-noscript {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}
.pension-cmp-noscript > svg {
    width: 100%;
    height: 100%;
    display: block;
}
.pension-cmp-label {
    position: absolute;
    font-size: .75rem;
    font-weight: 700;
    padding: .35rem .85rem;
    border-radius: var(--r-full, 999px);
    color: #fff;
    backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 10;
    letter-spacing: .02em;
}
.pension-cmp-label--before {
    top: 1rem; left: 1rem;
    background: rgba(100, 116, 139, .82);
    border: 1px solid rgba(255, 255, 255, .2);
}
.pension-cmp-label--after {
    top: 1rem; right: 1rem;
    background: rgba(22, 163, 74, .88);
    border: 1px solid rgba(187, 247, 208, .5);
}
.pension-cmp-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    margin-left: -1px;
    will-change: transform;
    z-index: 10;
    cursor: inherit;
    outline: none;
    pointer-events: none;
}
.pension-cmp-slider--h { height: 100%; }
.pension-cmp-slider:focus-visible {
    outline: none;
}
.pension-cmp-slider:focus-visible .pension-cmp-handle {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #1a73e8) 60%, transparent), 0 0 60px var(--divider-color, #fff);
}
.pension-cmp-divider {
    position: absolute;
    top: 0; left: 50%;
    width: 3px;
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
}
.pension-cmp-handle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s var(--ease, cubic-bezier(.22, 1, .36, 1));
    pointer-events: none;
}
.pension-cmp-handle.is-active {
    transform: translate(-50%, -50%) scale(1.08);
}
.pension-cmp-percent {
    position: absolute;
    bottom: 1rem; left: 50%;
    transform: translateX(-50%);
    padding: .25rem .75rem;
    border-radius: var(--r-full, 999px);
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 20;
}

@media (max-width: 600px) {
    .pension-comparison-frame { aspect-ratio: 4 / 5; max-height: none; }
    .pension-cmp-handle { width: 46px; height: 46px; }
    .pension-cmp-label { font-size: .68rem; padding: .3rem .7rem; }
}


/* ── Service Pages (Služby) ── */
/* ═══════════════════════════════════════════════════
   Služby – index page (/sluzby)
   ═══════════════════════════════════════════════════ */
.sluzby-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto 3rem;
}
.sluzby-index-card {
    display: block;
    min-height: 118px;
    padding: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.sluzby-index-card:hover {
    border-color: color-mix(in srgb, var(--color-primary, #1a73e8) 55%, #fff);
    box-shadow: 0 10px 28px rgba(15,23,42,.16);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.sluzby-index-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--sluzby-card-bg);
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform .35s ease;
}
.sluzby-index-card:hover .sluzby-index-bg {
    transform: scale(1.06);
}
.sluzby-index-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(15,23,42,.78) 0%, rgba(15,23,42,.52) 55%, rgba(15,23,42,.34) 100%),
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.12), transparent 42%);
    transition: background .25s ease;
}
.sluzby-index-card:hover .sluzby-index-overlay {
    background:
        linear-gradient(90deg, rgba(15,23,42,.7) 0%, rgba(15,23,42,.46) 55%, rgba(15,23,42,.28) 100%),
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.16), transparent 42%);
}
.sluzby-index-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 118px;
    padding: 1.1rem 1.25rem;
}
.sluzby-index-body {
    flex: 1;
    min-width: 0;
}
.sluzby-index-body strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .2rem;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.sluzby-index-body span {
    font-size: .825rem;
    color: rgba(241,245,249,.92);
    line-height: 1.4;
}
.sluzby-index-arrow {
    font-size: 1.4rem;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform .15s;
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.sluzby-index-card:hover .sluzby-index-arrow {
    transform: translateX(3px);
}
.sluzby-index-cta {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(135deg, rgba(26,115,232,.06), transparent);
    border: 1px solid rgba(26,115,232,.15);
    border-radius: 1.25rem;
    padding: 2.25rem 2rem;
}
/* Když je uvnitř aktivní Cta5, Cta4, Cta8 nebo Cta9 komponenta, resetujeme obal – žádný obdélník. */
.sluzby-index-cta:has(.cta5, .cta4, .cta8, .cta9) {
    max-width: none;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}
/* Když je nová komponenta vybraná, ale pro tuto stránku vypnutá, je obal prázdný – skryjeme ho úplně. */
.sluzby-index-cta:not(:has(> *)) {
    display: none;
}
.about-cta:has(.cta5, .cta4, .cta8, .cta9) {
    display: block;
    margin-top: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.about-cta:has(.cta5, .cta4, .cta8, .cta9)::before {
    content: none;
}
.about-cta:not(:has(> *)) {
    display: none;
}
.sluzby-index-cta h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}
.sluzby-index-cta p {
    font-size: .925rem;
    color: var(--color-muted, #475569);
    margin: 0 0 1.25rem;
}
.sluzby-index-cta-btns {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}
[data-theme="dark"] .sluzby-index-card {
    border-color: #334155;
}
[data-theme="dark"] .sluzby-index-card:hover {
    border-color: #60a5fa;
    box-shadow: 0 10px 28px rgba(96,165,250,.18);
}
@media (max-width: 640px) {
    .sluzby-index-grid { grid-template-columns: 1fr; }
    .sluzby-index-cta  { padding: 1.75rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════
   Služby – split layout (left=questions, right=sections)
   ═══════════════════════════════════════════════════ */
.sluzby-split {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3.5rem;
    align-items: start;
}
.sluzby-split-heading {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    color: var(--color-text, #1e293b);
}

/* LEFT: Q&A items */
.sluzby-q-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.sluzby-q-item:last-of-type { border-bottom: none; }
.sluzby-q-item h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .45rem;
    color: var(--color-text, #1e293b);
}
.sluzby-q-item p {
    font-size: .925rem;
    color: var(--color-muted, #475569);
    line-height: 1.65;
    margin: 0;
}
.sluzby-split-cta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Steps list (hlaseni-pu) */
.sluzby-steps-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: .5rem;
}
.sluzby-step-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.sluzby-step-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    background: var(--color-primary, #1a73e8);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .875rem;
    margin-top: 2px;
}
.sluzby-step-item strong {
    display: block;
    font-size: .975rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--color-text, #1e293b);
}
.sluzby-step-item p {
    font-size: .875rem;
    color: var(--color-muted, #475569);
    margin: 0;
    line-height: 1.55;
}

/* RIGHT: Sticky sidebar */
.sluzby-split-right {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.sluzby-split-right-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted, #64748b);
    margin: 0 0 .25rem;
}

/* Section link cards */
.sluzby-section-link {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .875rem;
    text-decoration: none;
    color: var(--color-text, #1e293b);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.sluzby-section-link:hover {
    border-color: var(--color-primary, #1a73e8);
    box-shadow: 0 4px 14px rgba(26,115,232,.12);
    transform: translateY(-1px);
}
.sluzby-section-link--featured {
    border-color: var(--color-primary, #1a73e8);
    background: rgba(26,115,232,.04);
}
.sluzby-section-link--urgent {
    border-color: rgba(239,68,68,.35);
}
.sluzby-section-link--urgent:hover {
    border-color: rgb(239,68,68);
    box-shadow: 0 4px 14px rgba(239,68,68,.12);
}
.sluzby-section-link-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
}
.sluzby-section-link-body {
    flex: 1;
    min-width: 0;
}
.sluzby-section-link-body strong {
    display: block;
    font-size: .925rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .15rem;
}
.sluzby-section-link-body span {
    font-size: .8rem;
    color: var(--color-muted, #64748b);
    line-height: 1.3;
}
.sluzby-section-link-arrow {
    font-size: 1.2rem;
    color: var(--color-primary, #1a73e8);
    font-weight: 700;
    flex-shrink: 0;
    transition: transform .15s;
}
.sluzby-section-link:hover .sluzby-section-link-arrow {
    transform: translateX(3px);
}

/* Tip box in sidebar */
.sluzby-split-tip {
    background: rgba(26,115,232,.05);
    border: 1px solid rgba(26,115,232,.15);
    border-radius: .875rem;
    padding: 1rem;
    margin-top: .4rem;
}
.sluzby-split-tip-icon {
    display: block;
    font-size: 1.4rem;
    margin-bottom: .4rem;
}
.sluzby-split-tip p {
    font-size: .825rem;
    color: var(--color-muted, #475569);
    margin: 0;
    line-height: 1.55;
}
.sluzby-split-tip-link {
    display: inline-block;
    margin-top: .6rem;
    font-size: .825rem;
    font-weight: 600;
    color: var(--color-primary, #1a73e8);
    text-decoration: none;
}
.sluzby-split-tip-link:hover { text-decoration: underline; }
.sluzby-split-tip--urgent {
    background: rgba(239,68,68,.05);
    border-color: rgba(239,68,68,.2);
}
.sluzby-split-tip--featured {
    background: rgba(34,197,94,.05);
    border-color: rgba(34,197,94,.25);
}

/* Shared utility (kept for legacy use) */
.sluzby-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.sluzby-list li {
    padding-left: 1.4rem;
    position: relative;
    font-size: .9rem;
    color: var(--color-muted, #475569);
    line-height: 1.5;
}
.sluzby-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary, #1a73e8);
    font-weight: 700;
}

/* Dark mode */
[data-theme="dark"] .sluzby-q-item {
    border-color: #334155;
}
[data-theme="dark"] .sluzby-q-item h3 { color: #f1f5f9; }
[data-theme="dark"] .sluzby-q-item p  { color: #94a3b8; }
[data-theme="dark"] .sluzby-step-item strong { color: #f1f5f9; }
[data-theme="dark"] .sluzby-step-item p { color: #94a3b8; }
[data-theme="dark"] .sluzby-section-link {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
[data-theme="dark"] .sluzby-section-link:hover {
    border-color: var(--color-primary, #60a5fa);
    box-shadow: 0 4px 14px rgba(96,165,250,.15);
}
[data-theme="dark"] .sluzby-section-link--featured {
    border-color: rgba(96,165,250,.4);
    background: rgba(96,165,250,.08);
}
[data-theme="dark"] .sluzby-section-link-body span { color: #64748b; }
[data-theme="dark"] .sluzby-split-tip {
    background: rgba(96,165,250,.08);
    border-color: rgba(96,165,250,.2);
}
[data-theme="dark"] .sluzby-split-tip p { color: #94a3b8; }
[data-theme="dark"] .sluzby-split-right-label { color: #64748b; }
[data-theme="dark"] .sluzby-split-heading { color: #f1f5f9; }
[data-theme="dark"] .sluzby-list li { color: #94a3b8; }

/* Responsive */
@media (max-width: 860px) {
    .sluzby-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .sluzby-split-right {
        position: static;
        order: -1;
    }
    .sluzby-split-right-label { margin-bottom: .1rem; }
}

/* ============================================================
   Uzamčená (skrytá) kalkulačka na webu
   - Zobrazuje pouze název + popis + ikonu zámku + výzvu k přihlášení
   - Nelze ji rozbalit ani s ní pracovat
   ============================================================ */
.calc-bubble.calc-bubble--locked {
    cursor: default;
    padding: 1rem;
    min-height: 170px;
    border: 1px dashed color-mix(in srgb, #94a3b8 38%, var(--color-border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 96%, #fff), var(--color-surface));
    box-shadow: none;
    transition: border-color .18s, transform .18s;
}
.calc-bubble.calc-bubble--locked:hover {
    transform: none;
    border-color: color-mix(in srgb, #3b82f6 50%, var(--color-border));
    box-shadow: 0 6px 18px -10px rgba(59,130,246,.35);
}
.calc-bubble.calc-bubble--locked::before { display: none; }
.calc-locked-inner {
    min-height: 138px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.calc-locked-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #3b82f6 12%, transparent);
    color: #3b82f6;
    flex-shrink: 0;
}
.calc-locked-text { display: grid; gap: .25rem; min-width: 0; }
.calc-locked-text strong {
    font-size: clamp(1rem, 2vw, 1.2rem);
    letter-spacing: -.02em;
}
.calc-locked-text small {
    color: var(--color-muted);
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.calc-locked-hint {
    margin: .35rem 0 0;
    font-size: .82rem;
    color: var(--color-muted);
}
.calc-locked-hint a {
    color: #3b82f6;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.calc-locked-hint a:hover { color: #1d4ed8; }
.calc-locked-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: auto;
    border: none;
    cursor: pointer;
    font: inherit;
}
@media (max-width: 600px) {
    .calc-locked-inner {
        min-height: auto;
    }
    .calc-locked-btn { justify-content: center; margin-top: .5rem; }
}

[data-theme="dark"] .calc-bubble.calc-bubble--locked {
    border-color: color-mix(in srgb, #94a3b8 30%, #1e293b);
    background: linear-gradient(135deg, #0f172a, #1e293b);
}
[data-theme="dark"] .calc-locked-icon {
    background: rgba(96,165,250,.12);
    color: #60a5fa;
}
[data-theme="dark"] .calc-locked-hint a {
    color: #60a5fa;
}

/* ============================================================
   PWA install banner – nahoře v sekci Kalkulačky
   - Zobrazuje se jen na veřejném webu, ne v nainstalované PWA
   - JS používá beforeinstallprompt nebo iOS share fallback
   ============================================================ */
.pwa-install-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(34,197,94,.08));
    border: 1px solid color-mix(in srgb, #3b82f6 25%, transparent);
    box-shadow: 0 6px 22px -12px rgba(59,130,246,.4);
    position: relative;
}
.pwa-install-banner.is-hidden { display: none !important; }
.pwa-install-banner-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(59,130,246,.18);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pwa-install-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    line-height: 1.4;
}
.pwa-install-banner-text strong {
    font-size: .95rem;
    color: var(--color-text);
}
.pwa-install-banner-text span {
    font-size: .85rem;
    color: var(--color-muted);
}
.pwa-install-banner-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: #3b82f6;
    color: #fff;
    border: 0;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, transform .12s;
    white-space: nowrap;
}
.pwa-install-banner-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}
.pwa-install-banner-close {
    position: absolute;
    top: .35rem;
    right: .55rem;
    background: transparent;
    border: 0;
    color: var(--color-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: .15rem .45rem;
    border-radius: 6px;
    opacity: .7;
}
.pwa-install-banner-close:hover {
    opacity: 1;
    background: rgba(148,163,184,.15);
}
@media (max-width: 600px) {
    .pwa-install-banner {
        flex-wrap: wrap;
        padding: 1rem 1rem 1.1rem;
    }
    .pwa-install-banner-text { flex-basis: calc(100% - 60px); }
    .pwa-install-banner-btn {
        width: 100%;
        justify-content: center;
        padding: .65rem 1rem;
    }
}
[data-theme="dark"] .pwa-install-banner {
    background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(34,197,94,.10));
    border-color: rgba(96,165,250,.35);
}
[data-theme="dark"] .pwa-install-banner-icon {
    background: rgba(96,165,250,.22);
    color: #93c5fd;
}
/* V nainstalované PWA banner schovat */
@media all and (display-mode: standalone) {
    .pwa-install-banner { display: none !important; }
}
.pwa-standalone .pwa-install-banner { display: none !important; }

/* ============================================================
   Contract upload hint (po přidání možnosti fotky)
   ============================================================ */
.contract-upload-hint {
    margin: -.4rem 0 .35rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--color-muted);
    font-style: italic;
}

/* ============================================================
   Podstránky služeb – Oblasti (pojištění auta/majetku/...,
   nová hypotéka / refinancování / americká hypotéka)
   ============================================================ */
.oblast-page {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}
.oblast-text h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0 0 1rem;
    color: var(--color-primary);
    line-height: 1.2;
    letter-spacing: -.01em;
}
.oblast-text p {
    color: var(--color-text);
    line-height: 1.7;
    font-size: 1.02rem;
    margin: 0 0 1.05rem;
}
.oblast-text p:last-child { margin-bottom: 0; }

.oblast-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.oblast-resource-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.05rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    text-align: left;
    transition: all .2s ease;
    cursor: pointer;
    font: inherit;
    box-shadow: 0 6px 20px -16px rgba(15,23,42,.4);
}
.oblast-resource-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
    box-shadow: 0 14px 32px -18px rgba(15,23,42,.45);
}
.oblast-resource-card--glossary {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}
.oblast-resource-icon {
    font-size: 1.7rem;
    line-height: 1;
    flex-shrink: 0;
}
.oblast-resource-card div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.oblast-resource-card strong {
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.3;
}
.oblast-resource-card span {
    font-size: .82rem;
    color: var(--color-muted);
    line-height: 1.4;
    font-weight: 500;
}

.oblast-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    padding-top: .5rem;
}

[data-theme="dark"] .oblast-resource-card {
    background: rgba(30,41,59,.72);
    border-color: rgba(148,163,184,.18);
}
[data-theme="dark"] .oblast-resource-card:hover {
    background: rgba(30,41,59,.92);
}

/* ============================================================
   Slovníček – modal okno (popup)
   ============================================================ */
.glossary-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: glossary-fade-in .18s ease;
}
.glossary-modal[hidden] { display: none; }
@keyframes glossary-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.glossary-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.glossary-modal-window {
    position: relative;
    width: min(640px, 100%);
    max-height: min(88vh, 740px);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 1.2rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 32px 80px rgba(0,0,0,.32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: glossary-pop-in .25s ease;
}
@keyframes glossary-pop-in {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.glossary-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
.glossary-modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 800;
    letter-spacing: -.01em;
}
.glossary-modal-close {
    border: none;
    background: transparent;
    color: var(--color-muted);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: .15rem .55rem;
    border-radius: .55rem;
    transition: background .15s ease, color .15s ease;
}
.glossary-modal-close:hover {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-text);
}
.glossary-modal-body {
    overflow-y: auto;
    padding: .35rem .4rem .5rem;
    flex: 1;
}
.glossary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.glossary-item {
    border-bottom: 1px solid var(--color-border);
}
.glossary-item:last-child { border-bottom: none; }
.glossary-item-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    padding: 1rem 1.4rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.glossary-item-toggle:hover {
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.glossary-item-toggle[aria-expanded="true"] {
    color: var(--color-primary);
}
.glossary-item-term {
    flex: 1;
    line-height: 1.4;
}
.glossary-item-arrow {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    transition: transform .25s ease, background .2s ease;
}
.glossary-item-toggle[aria-expanded="true"] .glossary-item-arrow {
    transform: rotate(45deg);
    background: var(--color-primary);
    color: #fff;
}
.glossary-item-desc {
    padding: 0 1.4rem 1rem 1.4rem;
    color: var(--color-muted);
    line-height: 1.65;
    font-size: .95rem;
    animation: glossary-desc-in .2s ease;
}
.glossary-item-desc[hidden] { display: none; }
.glossary-item-desc p { margin: 0; }
@keyframes glossary-desc-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

[data-theme="dark"] .glossary-modal-window {
    background: #0f172a;
    border-color: rgba(148, 163, 184, .18);
}
[data-theme="dark"] .glossary-modal-header {
    background: rgba(96, 165, 250, .08);
    border-color: rgba(148, 163, 184, .18);
}
[data-theme="dark"] .glossary-item {
    border-color: rgba(148, 163, 184, .15);
}

/* Při otevřeném modalu zamknout scroll na body */
body.glossary-open { overflow: hidden; }

@media (max-width: 600px) {
    .glossary-modal-window { max-height: 92vh; border-radius: 1rem; }
    .glossary-modal-header { padding: 1rem 1.1rem; }
    .glossary-modal-header h2 { font-size: 1.05rem; }
    .glossary-item-toggle { padding: .85rem 1.1rem; font-size: .96rem; }
    .glossary-item-desc { padding: 0 1.1rem .85rem 1.1rem; font-size: .9rem; }
}

/* Mobile overflow guard: public homepage must scroll only vertically. */
@media (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .site-main,
    .site-header,
    .site-nav,
    .container,
    .hero,
    .hero-content-section,
    .hero-inner,
    .hero-text,
    .pomoci-section,
    .pomoci-grid,
    .pomoci-card {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .site-header {
        width: 100% !important;
        max-width: 100% !important;
    }
    html body #siteNav.site-nav {
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
    .hero-rotating-copy,
    .hero-rotating-copy-inner,
    .hero-rotating-root,
    .hero-rotating-text-animated,
    .hero-social-loop,
    .social-logo-loop,
    .social-logo-loop .logoloop {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    .social-logo-loop .logoloop__track {
        max-width: none !important;
        overflow-x: visible !important;
    }
    .hero-rotating-text-animated,
    .hero-title,
    .hero-bio,
    .pomoci-card-body h3,
    .pomoci-card-body p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* ==========================================================================
   NAV + THEME TOGGLE — stable across light/dark site mode
   ========================================================================== */

/* Navigation panels keep admin-configured colors (not global dark link blue). */
#mega-nav-root .mega-nav__link {
    color: color-mix(in srgb, var(--mega-text, #e2e8f0) 86%, transparent);
}
#mega-nav-root .mega-nav__link:hover,
#mega-nav-root .mega-nav__link.is-active {
    color: var(--mega-hover-text, #fff);
}
#mega-nav-root .mega-nav__brand,
#mega-nav-root .mega-nav__login {
    color: var(--mega-hover-text, #fff);
}
#mega-nav-root .mega-nav__mobile-link {
    color: #334155;
}
#mega-nav-root .mega-nav__mobile-link:hover,
#mega-nav-root .mega-nav__mobile-link.is-active {
    color: #0f172a;
}
#mega-nav-root .mega-nav__heading,
#mega-nav-root .mega-nav__card,
#mega-nav-root .mega-nav__card-title {
    color: var(--mega-card-text, #0f172a);
}
#mega-nav-root .mega-nav__card-desc,
#mega-nav-root .mega-nav__footer a {
    color: var(--mega-muted-text, #64748b);
}
#mega-nav-root .mega-nav__footer a:hover {
    color: var(--mega-card-text, #0f172a);
}
#bottom-nav-root .bottom-nav__item,
#bottom-nav-root .bottom-nav__toggle,
#bottom-nav-root .bottom-nav__intro p {
    color: var(--bottom-nav-text, #0f172a);
}
#bottom-nav-root .bottom-nav__intro span,
#bottom-nav-root .bottom-nav__toggle em,
#bottom-nav-root .bottom-nav__socials a {
    color: var(--bottom-nav-muted, #737373);
}
#bottom-nav-root .bottom-nav__socials a:hover {
    color: var(--bottom-nav-text, #0f172a);
}
#bottom-nav-root .bottom-nav__cta {
    color: var(--bottom-nav-cta-text, #fff) !important;
}
#pill-nav-root .pill,
#pill-nav-root .mobile-menu-link {
    color: var(--pill-text, var(--base, #000));
}
#pill-nav-root .mobile-menu-link:hover,
#pill-nav-root .mobile-menu-link.is-active {
    color: var(--hover-text, #fff);
}
.nav-dropdown-item,
.nav-dropdown-item .nav-dd-label {
    color: var(--text, #0f172a);
}
.nav-dropdown-item .nav-dd-desc {
    color: var(--muted, #64748b);
}

/* Dark-mode toggle — always visible on any header/brand combination */
html .site-header .nav-container .client-dm-btn {
    color: #0f172a !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(15,23,42,.18) !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.16), 0 0 0 1px rgba(255,255,255,.45) inset !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html .site-header .nav-container .client-dm-btn:hover {
    background: #fff !important;
}
html[data-theme="dark"] .site-header .nav-container .client-dm-btn {
    color: #f8fafc !important;
    background: rgba(30,41,59,.94) !important;
    border-color: rgba(148,163,184,.32) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.06) inset !important;
}
html[data-theme="dark"] .site-header .nav-container .client-dm-btn:hover {
    background: rgba(51,65,85,.96) !important;
}

/* Mobile menu icon button — unified across classic / pill / mega / bottom nav */
@media (max-width: 768px) {
    .mobile-nav-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        padding: 0 !important;
        border: 1px solid rgba(15,23,42,.16);
        border-radius: 50%;
        background: rgba(255,255,255,.94);
        color: #0f172a;
        box-shadow: 0 2px 10px rgba(15,23,42,.12), 0 0 0 1px rgba(255,255,255,.42) inset;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        flex-shrink: 0;
        transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .mobile-nav-menu-btn:hover {
        background: #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(15,23,42,.16), 0 0 0 1px rgba(255,255,255,.5) inset;
    }
    .mobile-nav-menu-btn__icon {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 18px;
        height: 14px;
        pointer-events: none;
    }
    .mobile-nav-menu-btn__icon svg {
        display: block;
        flex-shrink: 0;
    }
    #pill-nav-root .hamburger-line {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: transform .22s ease, opacity .18s ease;
    }
    html .site-header .nav-container .nav-toggle.mobile-nav-menu-btn {
        border-radius: 50% !important;
        aspect-ratio: 1;
        line-height: 0;
        vertical-align: middle;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-toggle__icon {
        display: block;
        flex-shrink: 0;
    }
    .nav-toggle[aria-expanded="false"] .nav-toggle__icon--close,
    .nav-toggle:not([aria-expanded="true"]) .nav-toggle__icon--close {
        display: none;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__icon--menu {
        display: none;
    }
    html[data-theme="dark"] .mobile-nav-menu-btn {
        background: rgba(30,41,59,.94);
        border-color: rgba(148,163,184,.3);
        color: #f8fafc;
        box-shadow: 0 2px 12px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.05) inset;
    }
    html[data-theme="dark"] .mobile-nav-menu-btn:hover {
        background: rgba(51,65,85,.96);
    }
    .has-hero-video-nav .site-header .mobile-nav-menu-btn {
        background: rgba(255,255,255,.16);
        border-color: rgba(255,255,255,.22);
        color: #fff;
        box-shadow: 0 2px 12px rgba(2,6,23,.24);
    }
    .has-hero-video-nav .site-header .mobile-nav-menu-btn:hover {
        background: rgba(255,255,255,.24);
    }
    #mega-nav-root .mega-nav__menu-btn {
        margin-right: .15rem;
    }
    #bottom-nav-root .bottom-nav__toggle-desktop {
        display: none;
    }
    #bottom-nav-root .bottom-nav__toggle-leading {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        min-width: 0;
    }
    #bottom-nav-root .bottom-nav__toggle-icon.mobile-nav-menu-btn--embedded {
        width: 42px;
        height: 42px;
    }
}
@media (min-width: 769px) {
    #bottom-nav-root .bottom-nav__toggle-icon {
        display: none !important;
    }
}

/* ============================================================
   Partneři & Kariéra
   ============================================================ */
.partners-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.partners-intro {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    color: var(--text-muted, #64748b);
    line-height: 1.7;
}

.partners-block + .partners-block {
    margin-top: 3rem;
}

.partners-block__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 1.75rem;
}

.partners-block__head h2 {
    margin: 0 0 .5rem;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.partners-block__head p {
    margin: 0;
    color: var(--text-muted, #64748b);
}

.partners-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.partners-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 1.25rem;
    border-radius: 16px;
    background: var(--card-bg, rgba(255,255,255,.72));
    border: 1px solid var(--border, rgba(15,23,42,.08));
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.partners-logo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(15,23,42,.08);
}

.partners-logo-card img {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
}

.partners-logo-card__fallback {
    font-weight: 600;
    text-align: center;
    color: var(--text, #0f172a);
}

.partners-collab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.partners-collab-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: var(--card-bg, rgba(255,255,255,.72));
    border: 1px solid var(--border, rgba(15,23,42,.08));
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.partners-collab-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(15,23,42,.1);
}

.partners-collab-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(15,23,42,.04);
}

.partners-collab-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.partners-collab-card__body {
    padding: 1.1rem 1.2rem 1.25rem;
}

.partners-collab-card__body h3 {
    margin: 0 0 .45rem;
    font-size: 1.05rem;
}

.partners-collab-card__body p {
    margin: 0;
    color: var(--text-muted, #64748b);
    line-height: 1.55;
}

.partners-empty {
    text-align: center;
    color: var(--text-muted, #64748b);
    padding: 2rem 0;
}

.rich-text p { margin: 0 0 .85rem; }
.rich-text p:last-child { margin-bottom: 0; }

[data-theme="dark"] .partners-logo-card,
[data-theme="dark"] .partners-collab-card {
    background: rgba(15,23,42,.55);
    border-color: rgba(148,163,184,.16);
}

/* Životní pojištění – klient (poradce, celostránka) */
body.life-pro-open {
    overflow: hidden;
}
.life-pro-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: var(--color-bg, #eef2f7);
    display: flex;
    flex-direction: column;
}
.life-pro-overlay[hidden] {
    display: none !important;
}
.life-pro-overlay-host,
.life-pro-overlay-host .calc-bubble-body {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.life-pro-app {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg, #eef2f7);
    color: var(--color-text);
}
[data-theme="dark"] .life-pro-app {
    background: #0b1220;
}
.life-pro-top {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 90%, transparent);
    background: var(--color-surface, #fff);
}
[data-theme="dark"] .life-pro-top {
    background: #0f172a;
}
.life-pro-eyebrow {
    margin: 0 0 .15rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted, #64748b);
}
.life-pro-top-left h2 {
    margin: 0 0 .55rem;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.15;
}
.life-pro-client-pill {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .55rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-primary, #16a34a) 25%, transparent);
    background: color-mix(in srgb, var(--color-primary, #16a34a) 8%, transparent);
}
.life-pro-client-pill > span {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted, #64748b);
}
.life-pro-client-pill strong {
    font-size: .95rem;
}
.life-pro-client-pill small {
    font-size: .78rem;
    color: var(--color-muted, #64748b);
}
.life-pro-top-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
}
.life-pro-close-btn {
    margin-left: .25rem;
}
.life-pro-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 480px);
    gap: 0;
}
.life-pro-col {
    min-height: 0;
    overflow: auto;
}
.life-pro-col--persons {
    padding: 1rem 1.25rem 1.25rem;
}
.life-pro-col--results {
    display: flex;
    flex-direction: column;
    border-left: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 90%, transparent);
    background: color-mix(in srgb, var(--color-surface, #fff) 70%, transparent);
}
[data-theme="dark"] .life-pro-col--results {
    background: #0f172a;
}
.life-pro-persons {
    display: grid;
    gap: .85rem;
}
.life-pro-person {
    padding: .9rem 1rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 85%, transparent);
    background: var(--color-surface, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}
[data-theme="dark"] .life-pro-person {
    background: rgba(15, 23, 42, .72);
}
.life-pro-person--primary {
    border-left: 4px solid var(--color-primary, #16a34a);
}
.life-pro-person--family {
    border-left: 4px solid #3b82f6;
}
.life-pro-person-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}
.life-pro-person-tag {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-muted, #64748b);
}
.life-pro-person-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.life-pro-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: .75rem .85rem;
}
.life-pro-field--wide {
    grid-column: span 2;
}
.life-pro-person .life-field label {
    display: block;
    margin-bottom: .25rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--color-muted, #64748b);
}
.life-pro-person .life-field input {
    width: 100%;
    min-width: 0;
    padding: .52rem .62rem;
    border-radius: 8px;
    border: 1px solid var(--color-border, #cbd5e1);
    background: var(--color-surface, #fff);
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.life-pro-person .life-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.life-pro-person .life-input-wrap input {
    width: 100%;
    padding-right: 2.85rem !important;
    text-align: left;
}
.life-pro-person .life-input-wrap span {
    position: absolute;
    right: .62rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted, #64748b);
    font-weight: 700;
    font-size: .78rem;
    pointer-events: none;
    white-space: nowrap;
}
[data-theme="dark"] .life-pro-person .life-field input {
    background: rgba(2, 6, 23, .35);
}
.life-pro-incomes-block {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
}
.life-pro-incomes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .45rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted, #64748b);
}
.life-pro-incomes-list {
    display: grid;
    gap: .4rem;
}
.life-pro-income-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 200px) auto;
    gap: .45rem;
    align-items: center;
}
.life-pro-income-row .life-input-wrap input {
    padding-right: 3.5rem !important;
}
.life-pro-income-row .life-input-wrap span {
    right: .55rem;
    font-size: .72rem;
}
.life-pro-remove {
    border: 0;
    background: transparent;
    color: var(--color-muted, #64748b);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: .2rem .35rem;
}
.life-pro-person-hint {
    margin: .55rem 0 0;
    font-size: .76rem;
    color: var(--color-muted, #64748b);
    line-height: 1.35;
}
.life-pro-family-list {
    display: grid;
    gap: .85rem;
}
.life-pro-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.life-pro-panel:not(.life-pro-panel--history) {
    flex: 1;
}
.life-pro-panel--history {
    flex-shrink: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
}
.life-pro-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 70%, transparent);
}
.life-pro-panel-head h3 {
    margin: 0;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-muted, #64748b);
}
.life-pro-results {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: .75rem .9rem;
}
.life-pro-results--empty .life-pro-credit-summary,
.life-pro-results--empty .life-pro-results-list {
    display: none;
}
.life-pro-results-placeholder {
    margin: 0;
    font-size: .88rem;
    color: var(--color-muted, #64748b);
    line-height: 1.45;
}
.life-pro-results:not(.life-pro-results--empty) .life-pro-results-placeholder {
    display: none;
}
.life-pro-credit-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
    padding: .75rem .85rem;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, #fbbf24 16%, transparent), color-mix(in srgb, var(--color-primary, #16a34a) 12%, transparent));
    border: 1px solid color-mix(in srgb, var(--color-primary, #16a34a) 22%, transparent);
}
.life-pro-credit-summary span {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted, #64748b);
}
.life-pro-credit-summary strong {
    font-size: 1.15rem;
}
.life-pro-results-list {
    display: grid;
    gap: .65rem;
}
.life-pro-result-card {
    padding: .7rem .8rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
    background: var(--color-surface, #fff);
}
[data-theme="dark"] .life-pro-result-card {
    background: rgba(15, 23, 42, .55);
}
.life-pro-result-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}
.life-pro-result-head h4 {
    margin: 0;
    font-size: .92rem;
}
.life-pro-person-credit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
    padding: .55rem .65rem;
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, #fbbf24 14%, transparent), color-mix(in srgb, var(--color-primary, #16a34a) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--color-primary, #16a34a) 20%, transparent);
}
.life-pro-person-credit span {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted, #64748b);
}
.life-pro-person-credit strong {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.life-pro-result-credit {
    font-size: .72rem;
    color: var(--color-muted, #64748b);
    white-space: nowrap;
}
.life-pro-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
}
.life-pro-metric {
    padding: .42rem .5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-border, #cbd5e1) 18%, transparent);
}
.life-pro-metric--featured {
    background: color-mix(in srgb, var(--color-primary, #16a34a) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #16a34a) 20%, transparent);
}
.life-pro-metric span {
    display: block;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted, #64748b);
}
.life-pro-metric-head {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}
.life-pro-metric-head .life-pro-calc-info[open] {
    width: 100%;
}
.life-pro-metric-head > span {
    display: inline;
}
.life-pro-calc-info {
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}
.life-pro-calc-info-btn {
    list-style: none;
    cursor: pointer;
    width: .95rem;
    height: .95rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-muted, #64748b) 55%, transparent);
    font-size: .58rem;
    font-weight: 800;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted, #64748b);
    background: color-mix(in srgb, var(--color-bg, #fff) 88%, #64748b 12%);
    user-select: none;
}
.life-pro-calc-info-btn::-webkit-details-marker {
    display: none;
}
.life-pro-calc-info-btn:hover {
    color: var(--color-primary, #16a34a);
    border-color: color-mix(in srgb, var(--color-primary, #16a34a) 45%, transparent);
}
.life-pro-calc-info-text {
    margin: .35rem 0 0;
    padding: .5rem .55rem;
    border-radius: 8px;
    font-size: .74rem;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
    color: #92400e;
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
}
.life-pro-invalidity-head-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted, #64748b);
}
.life-pro-metric strong {
    display: block;
    margin-top: .1rem;
    font-size: .92rem;
}
.life-pro-method-notes {
    margin-top: .65rem;
    display: grid;
    gap: .45rem;
}
.life-pro-method-note {
    margin: 0;
    padding: .55rem .65rem;
    border-radius: 8px;
    font-size: .78rem;
    line-height: 1.45;
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
    color: #92400e;
}
.life-pro-expert {
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--color-muted, #64748b);
}
.life-pro-expert > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    opacity: .75;
}
.life-pro-expert > summary::-webkit-details-marker {
    display: none;
}
.life-pro-expert > summary::before {
    content: '▸ ';
    font-size: .7rem;
}
.life-pro-expert[open] > summary::before {
    content: '▾ ';
}
.life-pro-expert-body {
    margin-top: .55rem;
    padding: .65rem .75rem;
    border-radius: 8px;
    border: 1px dashed color-mix(in srgb, var(--color-border, #cbd5e1) 55%, transparent);
    background: color-mix(in srgb, var(--color-bg, #fff) 92%, #64748b 8%);
    display: grid;
    gap: .65rem;
}
.life-pro-expert-hint {
    margin: 0;
    line-height: 1.45;
    font-size: .76rem;
}
.life-pro-expert-results {
    display: grid;
    gap: .65rem;
}
.life-pro-expert-card {
    padding: .55rem .65rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-bg, #fff) 96%, #64748b 4%);
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 40%, transparent);
}
.life-pro-expert-card h5 {
    margin: 0 0 .45rem;
    font-size: .78rem;
    font-weight: 700;
}
.life-pro-method-controls {
    padding: .65rem .9rem .25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 35%, transparent);
    display: grid;
    gap: .65rem;
}
.life-pro-method-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}
.life-pro-method-fieldset legend {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-muted, #64748b);
    margin-bottom: .15rem;
}
.life-pro-method-option {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .82rem;
    cursor: pointer;
}
.life-pro-method-option small {
    display: block;
    color: var(--color-muted, #64748b);
    font-size: .72rem;
    font-weight: 400;
}
.life-pro-rent-yield {
    margin: 0;
}
.life-pro-rent-yield > span {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--color-muted, #64748b);
}
.life-input-wrap--suffix input {
    max-width: 5rem;
}
.life-pro-invalidity-list {
    display: grid;
    gap: .55rem;
    margin-top: .55rem;
}
.life-pro-invalidity-block {
    padding: .55rem .6rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-border, #cbd5e1) 12%, transparent);
}
.life-pro-invalidity-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .45rem;
}
.life-pro-invalidity-head .life-pro-calc-info[open] {
    width: 100%;
}
.life-pro-invalidity-head .life-pro-calc-info-text {
    flex: 1 1 100%;
    order: 10;
}
.life-pro-invalidity-head > strong {
    margin-left: auto;
    font-size: .95rem;
}
.life-pro-invalidity-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}
.life-pro-invalidity-variant {
    display: grid;
    gap: .15rem;
    padding: .45rem .5rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 45%, transparent);
    background: #fff;
    text-align: left;
    cursor: pointer;
}
.life-pro-invalidity-variant span {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-muted, #64748b);
}
.life-pro-invalidity-variant strong {
    font-size: .86rem;
}
.life-pro-invalidity-variant.is-active {
    border-color: color-mix(in srgb, var(--color-primary, #16a34a) 45%, transparent);
    background: color-mix(in srgb, var(--color-primary, #16a34a) 8%, #fff);
}
.life-pro-invalidity-variant.is-active span {
    color: var(--color-primary, #16a34a);
}
.life-pro-method-badge {
    display: inline-flex;
    align-items: center;
    padding: .12rem .4rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.life-pro-method-badge--investment {
    background: color-mix(in srgb, #f59e0b 18%, transparent);
    color: #92400e;
}
.life-pro-method-badge--standard {
    background: color-mix(in srgb, var(--color-primary, #16a34a) 14%, transparent);
    color: var(--color-primary, #16a34a);
}
.life-pro-method-badge--auto {
    background: color-mix(in srgb, #64748b 12%, transparent);
    color: #64748b;
}
.life-pro-send-kind {
    border: 0;
    margin: 0 0 .75rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
}
.life-pro-send-kind legend {
    width: 100%;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: .15rem;
}
.life-pro-send-kind label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    cursor: pointer;
}
.life-pro-history {
    list-style: none;
    margin: 0;
    padding: .55rem .9rem .75rem;
    max-height: 200px;
    overflow: auto;
    display: grid;
    gap: .35rem;
}
.life-pro-history-item {
    width: 100%;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 75%, transparent);
    border-radius: 8px;
    background: transparent;
    padding: .45rem .55rem;
    cursor: pointer;
    color: var(--color-text, #0f172a);
    transition: background 160ms ease, border-color 160ms ease;
}
.life-pro-history-item:hover {
    background: color-mix(in srgb, var(--color-primary, #16a34a) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-primary, #16a34a) 40%, transparent);
}
[data-theme="dark"] .life-pro-history-item { color: #e2e8f0; }
[data-theme="dark"] .life-pro-history-item:hover { background: rgba(255, 255, 255, .05); }
.life-pro-history-item strong {
    display: block;
    font-size: .8rem;
    color: inherit;
}
.life-pro-history-item small {
    color: var(--color-muted, #64748b);
    font-size: .72rem;
}
[data-theme="dark"] .life-pro-history-item small { color: #94a3b8; }
.life-pro-history-empty,
.life-pro-ioldp-empty {
    color: var(--color-muted, #64748b);
    font-size: .84rem;
    padding: .35rem 0;
}
.life-pro-foot {
    flex-shrink: 0;
    display: grid;
    gap: .5rem;
    padding: .45rem 1.25rem .65rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 80%, transparent);
    background: var(--color-surface, #fff);
}
[data-theme="dark"] .life-pro-foot {
    background: #0f172a;
}
.life-pro-status {
    font-size: .84rem;
    color: var(--color-muted, #64748b);
}
.life-pro-status.is-error {
    color: #dc2626;
}
.life-pro-ioldp-dialog {
    border: 0;
    border-radius: 16px;
    padding: 0;
    width: min(760px, calc(100vw - 2rem));
    max-height: min(85vh, 720px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}
.life-pro-ioldp-dialog::backdrop {
    background: rgba(15, 23, 42, .45);
}
.life-pro-ioldp-inner {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    max-height: min(85vh, 720px);
}
.life-pro-ioldp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}
.life-pro-ioldp-head h3 {
    margin: 0;
    font-size: 1.05rem;
}
.life-pro-ioldp-close {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.life-pro-ioldp-search {
    width: 100%;
    margin-bottom: .75rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--color-border, #cbd5e1);
}
.life-pro-ioldp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    flex: 1;
    min-height: 0;
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.life-pro-ioldp-item {
    width: 100%;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 75%, transparent);
    border-radius: 10px;
    background: transparent;
    padding: .6rem .7rem;
    cursor: pointer;
}
.life-pro-ioldp-item:hover {
    border-color: color-mix(in srgb, var(--color-primary, #16a34a) 35%, transparent);
    background: color-mix(in srgb, var(--color-primary, #16a34a) 6%, transparent);
}
.life-pro-ioldp-item strong {
    display: block;
    font-size: .9rem;
}
.life-pro-ioldp-item small {
    color: var(--color-muted, #64748b);
    font-size: .78rem;
}

@media (max-width: 1100px) {
    .life-pro-layout {
        grid-template-columns: 1fr;
    }
    .life-pro-col--results {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--color-border, #cbd5e1) 85%, transparent);
        max-height: none;
    }
    .life-pro-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .life-pro-field--wide {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .life-pro-top {
        flex-direction: column;
        align-items: stretch;
        position: sticky;
        top: 0;
        z-index: 6;
        background: var(--color-surface, #fff);
        padding-bottom: .5rem;
    }
    [data-theme="dark"] .life-pro-top {
        background: var(--color-surface, #0f172a);
    }
    .life-pro-top-actions {
        justify-content: flex-start;
    }
    .life-pro-fields,
    .life-pro-metrics,
    .life-pro-ioldp-list {
        grid-template-columns: 1fr;
    }
    .life-pro-field--wide {
        grid-column: span 1;
    }
    .life-pro-income-row {
        grid-template-columns: 1fr;
    }
}

/* PWA – modal „Poslat do dokumentů“ (důchod + životní pojištění) */
.pension-send-pwa-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .78);
    z-index: 10050;
    padding: 18px;
    align-items: center;
    justify-content: center;
}
.pension-send-pwa-modal.open {
    display: flex;
}
.pension-send-pwa-modal__panel {
    width: min(520px, 100%);
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f172a);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .32);
    overflow: hidden;
}
.pension-send-pwa-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.pension-send-pwa-modal__head strong {
    color: var(--color-text, #0f172a);
    font-size: 15px;
}
.pension-send-pwa-modal__body {
    padding: 18px;
    display: grid;
    gap: 14px;
}
.pension-send-pwa-modal__foot {
    padding: 0 18px 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.pension-send-pwa-field label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--color-text, #0f172a);
}
.pension-send-pwa-field select,
.pension-send-pwa-field textarea,
.pension-send-pwa-field input {
    width: 100%;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    box-sizing: border-box;
    background: var(--color-bg, #fff);
    color: var(--color-text, #0f172a);
}
.pension-send-pwa-field textarea::placeholder,
.pension-send-pwa-field input::placeholder {
    color: var(--color-muted, #64748b);
}
.pension-send-pwa-search {
    position: relative;
}
.pension-send-pwa-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: var(--color-surface, #fff);
    color: var(--color-text, #0f172a);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .15);
    max-height: 240px;
    overflow: auto;
    z-index: 5;
    display: none;
}
.pension-send-pwa-suggest.open {
    display: block;
}
.pension-send-pwa-suggest button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.pension-send-pwa-suggest button strong {
    display: block;
    color: var(--color-text, #0f172a);
}
.pension-send-pwa-suggest button:hover {
    background: var(--color-bg-subtle, #f1f5f9);
}
.pension-send-pwa-suggest small {
    display: block;
    color: var(--color-muted, #64748b);
    font-size: 12px;
    margin-top: 2px;
}
.pension-send-pwa-suggest__empty {
    padding: 10px 12px;
    color: var(--color-muted, #64748b);
    font-size: 13px;
}
.pension-send-pwa-status {
    font-size: 13px;
    color: var(--color-muted, #64748b);
    min-height: 18px;
}
.pension-send-pwa-status.is-error {
    color: #dc2626;
}
[data-theme="dark"] .pension-send-pwa-status.is-error {
    color: #f87171;
}
.pension-form-modal__close {
    border: none;
    background: var(--color-bg-subtle, #f1f5f9);
    color: var(--color-text-2, #334155);
    border-radius: 9px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}
.pension-form-modal__close:hover {
    background: var(--color-border, #e2e8f0);
}
[data-theme="dark"] .pension-send-pwa-modal__panel {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .pension-send-pwa-modal__head {
    border-bottom-color: #334155;
}
[data-theme="dark"] .pension-send-pwa-modal__head strong,
[data-theme="dark"] .pension-send-pwa-field label,
[data-theme="dark"] .pension-send-pwa-suggest button strong {
    color: #f1f5f9;
}
[data-theme="dark"] .pension-send-pwa-field select,
[data-theme="dark"] .pension-send-pwa-field textarea,
[data-theme="dark"] .pension-send-pwa-field input {
    background: #0f172a;
    border-color: #475569;
    color: #f1f5f9;
}
[data-theme="dark"] .pension-send-pwa-suggest {
    background: #1e293b;
    border-color: #475569;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .pension-send-pwa-suggest button:hover {
    background: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .pension-send-pwa-suggest small,
[data-theme="dark"] .pension-send-pwa-suggest__empty,
[data-theme="dark"] .pension-send-pwa-status {
    color: #94a3b8;
}
[data-theme="dark"] .pension-form-modal__close {
    background: #334155;
    color: #e2e8f0;
}
[data-theme="dark"] .pension-form-modal__close:hover {
    background: #475569;
}

/* ────────────────────────────────────────────────────────────────
   Mobilní navigace (classic) – oprava scrollování.
   Původní .site-nav nemá max-height ani overflow-y, takže při 7+
   položkách (Úvod, O mně, Služby, Blog, Kalkulačky, Kontakt,
   Rezervace, Appka) se spodní položky useknou a nejdou scrollovat.
   Tento blok je deklarován NÁSLEDNĚ a s vyšší specificitou
   (.site-header .site-nav), takže bezpečně přepíše původní pravidlo.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #siteNav.site-nav {
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    @supports not (max-height: 100dvh) {
        #siteNav.site-nav {
            max-height: 100vh;
        }
    }
    #siteNav.site-nav::-webkit-scrollbar {
        width: 6px;
    }
    #siteNav.site-nav::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, .4);
        border-radius: 999px;
    }
    #siteNav.site-nav::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* ────────────────────────────────────────────────────────────────
   Bottom nav — mobilní optimalizace (Fáze 1.2)
   ────────────────────────────────────────────────────────────────
   1. body padding-bottom nekompenzoval safe-area-inset-bottom
      (iPhone s home indicatorem,Android s gesture navigací).
   2. Z-index konzistence napříč shader pozadími — bottom-nav musí
      vždy zůstat nad obsahem, bez ohledu na to, který shader je aktivní.
      Shader CSS soubory nastavují #bottom-nav-root na z-index:1,
      což je nižší než z-index:500 pro [data-header="bottom"] default.
   3. Jistota, že position:fixed v React komponentě zůstane relativní
      k viewportu i ve stacking contextech shadery.
   ──────────────────────────────────────────────────────────────── */

/* 1) Body padding musí kompenzovat safe-area-inset-bottom */
html[data-header="bottom"] body {
    padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* 2) Override shader z-index pravidel — bottom-nav root vždy nad obsahem.
   Shader CSS nastavují #bottom-nav-root na z-index:1, což je nižší než
   default z-index:500 pro [data-header="bottom"] — to způsobilo, že při
   aktivním shader pozadí mohl obsah překrýt bottom-nav. */
html[data-header="bottom"] #bottom-nav-root,
html.has-silk-bg #bottom-nav-root,
html.has-darkveil-bg #bottom-nav-root,
html.has-linewaves-bg #bottom-nav-root,
html.has-aurora-bg #bottom-nav-root,
html.has-grainient-bg #bottom-nav-root,
html.has-iridescence-bg #bottom-nav-root,
html.has-starswipe-bg #bottom-nav-root,
html.has-shadowbars-bg #bottom-nav-root,
html.has-fogsphere-bg #bottom-nav-root,
html.has-warptwister-bg #bottom-nav-root,
html.has-starburst-bg #bottom-nav-root,
html.has-aurorablur-bg #bottom-nav-root,
html.has-silkwaves-bg #bottom-nav-root,
html.has-grainwave-bg #bottom-nav-root {
    position: relative !important;
    z-index: 500 !important;
}
/* Pozn.: .bottom-nav-shell (React komponenta) již má position:fixed
   s bottom:calc(var(--bottom-nav-bottom) + env(safe-area-inset-bottom))
   — safe-area je pro shell samotný již vyřešena. */

/* ============================================================
   Globální safe-area podpora (Fáze 5.3)
   ============================================================
   iOS zařízení s notch/dynamic island a Android s gesture navigací
   mají "safe-area-inset-*" CSS proměnné. Projekt už řeší PWA
   standalone (installed app), ale ne řeší:
   1. iOS Safari v prohlížeči (ne installed) — header sticky nahoře,
      když se toolbar skryje, není problém, ale bottom-nav má být nad
      gesture indicatorem.
   2. Android Chrome "Add to home screen" bez fullscreen mode.

   Tento blok přidává bezpečné výchozí chování. Pokrývá:
   - .site-header: padding-top kompenzuje notch na landscape
   - .mobile-menu-popover (pill nav): respektuje notch
   - .mega-nav__mobile (mega nav): respektuje notch
   - .pwa-fixed-btn (PWA install button): nebude v notch
   ============================================================ */

/* Landscape mobilní režim — notch na levé/pravé straně
   (iPhone landscape). Header a spodní elementy musí respektovat. */
@media (max-width: 900px) and (orientation: landscape) {
    .site-header {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/* PWA install button — nesmí být v notch */
.pwa-fixed-btn {
    /* Použijeme max() pro záporný padding efekt — vždy respektuje inset */
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
}

/* Mobile-menu-popover (pill-nav) — pokud je otevřený přes celou výšku,
   musí respektovat safe-area-top (notch v landscape) a bottom. */
@media (max-width: 768px) {
    .pill-nav .mobile-menu-popover {
        padding-top: max(.5rem, env(safe-area-inset-top, 0px));
        padding-bottom: max(.5rem, env(safe-area-inset-bottom, 0px));
    }
    /* Mega-nav mobilní dropdown — bezpečné okraje */
    .mega-nav__mobile {
        padding-top: max(.5rem, env(safe-area-inset-top, 0px));
        padding-bottom: max(.5rem, env(safe-area-inset-bottom, 0px));
    }
}

/* Pomocná třída pro utility — element musí být nad safe-area inset */
.sa-pt { padding-top: env(safe-area-inset-top, 0px); }
.sa-pb { padding-bottom: env(safe-area-inset-bottom, 0px); }
.sa-pl { padding-left: env(safe-area-inset-left, 0px); }
.sa-pr { padding-right: env(safe-area-inset-right, 0px); }

/* ============================================================
   Vizuální scroll indikátory (Fáze 5.4)
   ============================================================
   12 souborů používá overflow-x: auto bez vizuálního hintu.
   Uživatel na mobilu nemusí poznat, že obsah lze scrollovat.
   Použijeme mask-image gradient pro jemný fade na okrajích.
   ============================================================ */

/* Universální utility — stačí přidat třídu .scroll-hint */
.scroll-hint {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 14px,
        #000 calc(100% - 14px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 14px,
        #000 calc(100% - 14px),
        transparent 100%
    );
}

/* Na desktopu (>1024px) scroll hinty typicky nejsou potřeba — obsah se vejde.
   Vypneme je tam, aby nedošlo k zbytečnému fade. */
@media (min-width: 1024px) {
    .scroll-hint--mobile-only {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* Mobilní breakpoint — aplikujeme scroll hint na nejčastější overflow-x:auto
   elementy, které ho nemají. Cílíme na obsahové tabulky/wrappery. */
@media (max-width: 768px) {
    /* Tabulky obalené wrapperem — typicky se používá .table-wrapper nebo
       podobné. Pokud neexistuje, můžeme cílit přímo na .data-table. */
    .table-wrapper,
    .table-card,
    .data-table-wrapper,
    .overflow-x-auto {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 14px,
            #000 calc(100% - 14px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 14px,
            #000 calc(100% - 14px),
            transparent 100%
        );
    }
}

/* ============================================================
   REDESIGN: Stránka „O mně" — editorial / premium feel
   Bez zásahu do PHP/HTML struktury, čistý CSS overlay.
   ============================================================ */

/* ---------- 1. Page hero: čistý editorial nadpis (všechny podstránky) ---------- */
.page-hero.page-hero--about,
.page-hero:has(> .container > .page-hero-title) {
    padding: clamp(2.75rem, 6vw, 4.25rem) 0 clamp(2rem, 4vw, 3rem);
    position: relative;
    overflow: hidden;
    text-align: left;
    isolation: isolate;
}
.page-hero.page-hero--about::before,
.page-hero:has(> .container > .page-hero-title)::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 340px at 6% -30%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 66%),
        radial-gradient(680px 300px at 96% 130%, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent 66%);
    z-index: -1;
    pointer-events: none;
}
.page-hero.page-hero--about .page-hero-title,
.page-hero:has(> .container > .page-hero-title) .page-hero-title {
    display: inline-block;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
    color: var(--color-text, #0f172a);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    text-align: left;
}
/* Akcentní podtržení pod nadpisem */
.page-hero.page-hero--about .page-hero-title::after,
.page-hero:has(> .container > .page-hero-title) .page-hero-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 999px;
    margin-top: .85rem;
    background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-secondary) 65%, var(--color-primary)));
}
.page-hero.page-hero--about .container,
.page-hero:has(> .container > .page-hero-title) .container {
    position: relative;
    display: block;
}
.page-hero .page-hero-eyebrow {
    color: var(--color-primary);
    margin: 0 0 .6rem;
}
.page-hero .page-hero-sub {
    color: var(--color-muted, #64748b);
    max-width: 640px;
    margin-top: .75rem;
}

/* ---------- 2. Hlavní sekce .about — dekorativní pozadí ---------- */
body .about.section {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) 0;
    background:
        radial-gradient(1000px 600px at 88% -8%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 60%),
        radial-gradient(820px 540px at 4% 12%, color-mix(in srgb, var(--color-secondary) 7%, transparent), transparent 62%),
        var(--color-bg);
    overflow: hidden;
    isolation: isolate;
}
body .about.section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 7%, transparent) 1px, transparent 1.4px);
    background-size: 34px 34px;
    background-position: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
    opacity: .55;
    z-index: -1;
    pointer-events: none;
}
[data-theme="dark"] body .about.section {
    background:
        radial-gradient(1000px 600px at 88% -8%, rgba(59,130,246,.16), transparent 60%),
        radial-gradient(820px 540px at 4% 12%, rgba(52,168,83,.10), transparent 62%),
        #0b1426;
}
[data-theme="dark"] body .about.section::before { opacity: .35; }

/* ---------- 3. Grid layout ---------- */
/* Jeden sloupec na všech šířkách – logo se vykreslí jako centrovaná karta
   pod textem (stejně jako na mobilu), aby při rolování dlouhého bio
   nezůstávala polovina obrazovky prázdná. */
body .about-grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
    position: relative;
    z-index: 1;
}
body .about-content    { order: 1; }
body .about-photo-wrap { order: 2; }

/* ---------- 4. Logo jako „karta vizitky" pod obsahem ---------- */
body .about-photo-wrap {
    position: static;
    max-width: 260px;
    margin: 2rem auto 0;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    isolation: isolate;
    overflow: hidden;
}
body .about-photo-wrap::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--color-primary) 55%, transparent),
        transparent 38%,
        transparent 62%,
        color-mix(in srgb, var(--color-secondary) 48%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}
body .about-photo-wrap::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -30%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%);
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
}
body .about-logo-fixed {
    position: relative;
    z-index: 2;
    padding: .5rem;
}
body .about-logo-main {
    width: 100%;
    max-width: 280px;
    max-height: 160px;
    border-radius: var(--r-md);
    filter: drop-shadow(0 6px 18px rgba(15,23,42,.14));
}
[data-theme="dark"] body .about-photo-wrap {
    background: linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96));
    border-color: rgba(148,163,184,.18);
}
[data-theme="dark"] body .about-logo-main {
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.4));
}

/* ---------- 5. Nadpis + jméno ---------- */
/* Jméno a fotka tvoří kompaktní „profilový header" – fotka vlevo jako
   avatar, jméno hned vedle ní. Žádné space-between, které by je
   tlačilo na okraje a mezi nimi vznikala mezera. */
body .about-heading-row {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--color-border);
}
body .about-heading-row .about-photo { order: -1; }
body .about-heading-row > h2 {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
}
body .about-content h2 {
    font-size: clamp(1.9rem, 4.5vw, 3.125rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.05;
    background: linear-gradient(120deg,
        var(--color-text) 0%,
        var(--color-text) 38%,
        color-mix(in srgb, var(--color-primary) 65%, var(--color-text)) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-theme="dark"] body .about-content h2 {
    background: linear-gradient(120deg, #f8fafc 0%, #f8fafc 38%, #93c5fd 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
body .about-photo {
    width: clamp(120px, 18vw, 168px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 18px 28px rgba(15,23,42,.28));
    transition: transform .35s var(--ease), filter .35s var(--ease);
    flex-shrink: 0;
}
body .about-photo:hover {
    transform: translateY(-3px) rotate(-1deg);
    filter: drop-shadow(0 22px 34px rgba(15,23,42,.34));
}

/* ---------- 6. Badge tituly ---------- */
body .about-titles-badges {
    gap: .5rem;
    margin: 0 0 2rem;
}
body .about-title-badge {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)),
        color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)));
    color: color-mix(in srgb, var(--color-primary) 88%, var(--color-text));
    border: 1px solid color-mix(in srgb, var(--color-primary) 26%, transparent);
    font-size: .8125rem;
    font-weight: 700;
    padding: .375rem 1rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--color-primary) 60%, transparent);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
body .about-title-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--color-primary) 55%, transparent);
}
body .about-title-badge--custom {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-secondary) 14%, var(--color-surface)),
        color-mix(in srgb, var(--color-secondary) 6%, var(--color-surface)));
    color: color-mix(in srgb, var(--color-secondary) 85%, var(--color-text));
    border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
}
[data-theme="dark"] body .about-title-badge {
    background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(96,165,250,.08));
    color: #bfdbfe;
    border-color: rgba(96,165,250,.32);
}
[data-theme="dark"] body .about-title-badge--custom {
    background: linear-gradient(135deg, rgba(52,211,153,.18), rgba(52,211,153,.08));
    color: #86efac;
    border-color: rgba(52,211,153,.32);
}

/* ---------- 7. Bio — drop cap + lepší čitelnost ---------- */
body .about-bio {
    font-size: 1.075rem;
    line-height: 1.85;
    color: var(--color-text-2);
    margin-bottom: 2rem;
    position: relative;
    padding-left: 1.25rem;
    border-left: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}
body .about-bio > p:first-of-type::first-letter {
    font-size: 3.1rem;
    font-weight: 900;
    line-height: .9;
    float: left;
    margin: .25rem .55rem 0 0;
    color: var(--color-primary);
    font-family: Georgia, 'Times New Roman', serif;
}
[data-theme="dark"] body .about-bio { color: #cbd5e1; border-left-color: rgba(96,165,250,.45); }
[data-theme="dark"] body .about-bio > p:first-of-type::first-letter { color: #60a5fa; }

/* ---------- 8. Lokace badge ---------- */
body .about-location {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: auto;
    margin: 0 .5rem .5rem 0;
    padding: .4rem .9rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .875rem;
    color: var(--color-text-2);
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}
body .about-location:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
body .about-location svg { color: var(--color-primary); }
[data-theme="dark"] body .about-location { background: rgba(30,41,59,.6); color: #cbd5e1; }

/* ---------- 9. Seznam titulů — mřížka karet ---------- */
body .about-tituly {
    margin: 2.75rem 0 .5rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--color-border);
}
body .about-tituly-heading {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--color-muted);
    margin: 0 0 1.5rem;
}
body .about-tituly-heading::before {
    content: "";
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
    border-radius: 2px;
}
body .about-tituly-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
body .about-tituly-item {
    position: relative;
    padding: 1.15rem 1.35rem 1.15rem 1.55rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    overflow: hidden;
}
body .about-tituly-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .25s var(--ease);
}
body .about-tituly-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-lg);
    border-left-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-primary));
    border-left-width: 4px;
}
body .about-tituly-item:hover::after { opacity: 1; }
body .about-tituly-label { font-weight: 800; font-size: 1rem; color: var(--color-text); }
body .about-tituly-popis { font-size: .875rem; color: var(--color-muted); line-height: 1.6; }
[data-theme="dark"] body .about-tituly-item {
    background: linear-gradient(180deg, rgba(30,41,59,.7), rgba(15,23,42,.5));
    border-color: rgba(148,163,184,.2);
    border-left-color: #60a5fa;
}
[data-theme="dark"] body .about-tituly-label { color: #f1f5f9; }
[data-theme="dark"] body .about-tituly-popis { color: #94a3b8; }

/* ---------- 10. „Více o mně" — glassmorphic panel ---------- */
body .about-extra {
    position: relative;
    margin-top: 2.25rem;
    padding: 1.75rem 1.75rem 1.85rem;
    border-radius: var(--r-lg);
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)),
            var(--color-surface) 60%);
    box-shadow:
        0 24px 60px -32px color-mix(in srgb, var(--color-primary) 40%, transparent),
        0 1px 0 rgba(255,255,255,.5) inset;
    overflow: hidden;
}
body .about-extra::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 70%);
    filter: blur(24px);
    pointer-events: none;
}
body .about-extra > h3 {
    position: relative;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: .55rem;
}
body .about-extra > h3::before {
    content: "";
    width: 8px;
    height: 24px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 50%, var(--color-secondary)));
}
[data-theme="dark"] body .about-extra {
    background:
        linear-gradient(135deg, rgba(59,130,246,.10), rgba(15,23,42,.6) 60%);
    border-color: rgba(96,165,250,.28);
}
[data-theme="dark"] body .about-extra > h3 { color: #f8fafc; }

/* ---------- 11. Galerie — mřížka s jemným nádechem ---------- */
body .about-gallery { margin-top: 2.5rem; }
body .about-gallery > h3 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text);
}
body .about-gallery > h3::before {
    content: "";
    width: 8px;
    height: 22px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 50%, var(--color-primary)));
}
body .about-gallery-grid { gap: 1rem; }
body .about-gallery-item {
    border-radius: var(--r-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--sh-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
body .about-gallery-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--sh-lg);
}

/* ---------- 12. CTA banner — výrazný ---------- */
body .about-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.75rem;
    border-radius: var(--r-lg);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 88%, #000 0%),
            color-mix(in srgb, var(--color-secondary) 80%, #000 0%));
    box-shadow: 0 24px 60px -22px color-mix(in srgb, var(--color-primary) 60%, transparent);
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
body .about-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 70%);
            mask-image: linear-gradient(120deg, #000 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}
body .about-cta .btn-primary {
    background: #fff;
    color: var(--color-primary);
    box-shadow: 0 12px 30px -10px rgba(0,0,0,.4);
}
body .about-cta .btn-primary:hover { opacity: .94; box-shadow: 0 16px 38px -10px rgba(0,0,0,.5); }
body .about-cta .btn-outline {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body .about-cta .btn-outline:hover {
    background: #fff;
    color: var(--color-primary);
    border-color: #fff;
}
/* Textová část CTA banneru */
body .about-cta-text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    color: #fff;
}
body .about-cta-text strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.015em;
}
body .about-cta-text span {
    font-size: .9rem;
    color: rgba(255,255,255,.85);
}
body .about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    flex-shrink: 0;
}

/* ---------- 13. Responzivní doladění ---------- */
@media (max-width: 900px) {
    body .about-grid {
        gap: 1.75rem;
    }

    /* Logo karta: kompaktnější na malých obrazovkách */
    body .about-photo-wrap {
        max-width: 200px;
        margin: 1.25rem auto 0;
        padding: .9rem;
        border-radius: var(--r-lg);
    }
    body .about-photo-wrap::after { width: 140px; height: 140px; }
    body .about-logo-fixed { padding: 0; }
    body .about-logo-main {
        max-width: 150px;
        max-height: 70px;
    }

    /* Jméno + fotka: fotka jako pořádný portrét vedle jména */
    body .about-heading-row {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
    body .about-photo {
        width: 150px;
        min-width: 150px;
        aspect-ratio: 1;
    }

    /* CTA a tituly už z minula zůstávají OK */
}
@media (max-width: 600px) {
    body .about-bio { padding-left: 0; border-left: 0; }
    body .about-bio > p:first-of-type::first-letter {
        font-size: 2.4rem;
        margin-right: .4rem;
    }
    body .about-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    body .about-cta .btn { width: 100%; justify-content: center; }
    body .about-tituly-list { grid-template-columns: 1fr; }

    /* Na úzkých mobilech trochu zmenšíme portrét, ať jméno dýchá */
    body .about-heading-row { gap: .85rem; }
    body .about-photo { width: 120px; min-width: 120px; }
}

/* ---------- 14. Floating video button — jemnější ---------- */
body .about-video-floating { z-index: 40; }
body .about-video-toggle {
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    box-shadow: var(--sh-lg);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
body .about-video-toggle:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

/* ============================================================
   REDESIGN: Mobilní menu (classic nav) — fullscreen overlay
   Původně: float dropdown s okraji .75rem (pokrylo ~90% šířky)
   Nyní:    skutečné fullscreen menu přes celou stránku.
   ============================================================ */
@media (max-width: 768px) {
    /* Hlavní kontejner menu — plný viewport, žádné okraje/zaoblení */
    html body #siteNav.site-nav {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: 100vw;
        left: 0 !important;
        right: 0 !important;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        border: 0;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        padding: calc(var(--nav-h, 70px) + 1rem) 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) 1rem;
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
        background:
            radial-gradient(900px 500px at 85% 0%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 60%),
            radial-gradient(700px 440px at 0% 100%, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 62%),
            rgba(15, 23, 42, .985);
        box-shadow: none;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
        z-index: 200;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        display: none !important;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: none;
    }
    html body #siteNav.site-nav.open {
        display: flex !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    /* Odkazy — větší, lépe čitelné, přes celou šířku */
    html body #siteNav.site-nav .nav-link {
        width: 100%;
        border-radius: .9rem;
        padding: 1.05rem 1.25rem;
        color: #fff !important;
        opacity: 1;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .08);
        font-size: 1.075rem;
        font-weight: 700;
        justify-content: space-between;
        white-space: normal;
        transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
    }
    html body #siteNav.site-nav .nav-link:hover,
    html body #siteNav.site-nav .nav-link--active {
        background: rgba(255, 255, 255, .16);
        border-color: rgba(255, 255, 255, .2);
        transform: translateY(-1px);
    }
    html body #siteNav.site-nav .nav-dropdown-trigger {
        color: #fff !important;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: .9rem;
        padding: 1.05rem 1.25rem;
        font-size: 1.075rem;
        font-weight: 700;
    }
    html body #siteNav.site-nav .nav-dropdown-menu {
        background: rgba(255, 255, 255, .05);
        border-radius: .75rem;
        margin: .25rem 0 .35rem;
    }
    html body #siteNav.site-nav .nav-dropdown-item,
    html body #siteNav.site-nav .nav-dd-label {
        color: #fff !important;
    }

    /* Hamburger / křížek musí zůstat nad fullscreen menu (z-index 200) */
    html body .site-header .nav-toggle,
    html body .site-header .nav-toggle.mobile-nav-menu-btn {
        z-index: 230;
        position: relative;
    }
    body.site-nav-open .site-header .nav-toggle.mobile-nav-menu-btn {
        position: relative;
    }
}

@media (min-width: 769px) {
    html body .site-header .nav-toggle,
    html body .site-header .nav-toggle.mobile-nav-menu-btn {
        display: none !important;
    }
    html body .site-header .nav-container {
        flex-wrap: nowrap;
        gap: .75rem;
    }
    html body #siteNav.site-nav {
        display: flex !important;
        position: static;
        inset: auto;
        width: auto;
        max-width: none;
        height: auto;
        min-height: 0;
        max-height: none;
        min-width: 0;
        flex: 1 1 auto;
        margin: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow-x: auto;
        overflow-y: hidden;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        z-index: auto;
        flex-wrap: nowrap;
        justify-content: center;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    html body #siteNav.site-nav::-webkit-scrollbar {
        display: none;
    }
    html body #siteNav.site-nav .nav-link {
        width: auto;
        flex-shrink: 0;
        border: 0;
        background: transparent;
        font-size: .875rem;
        font-weight: 500;
        padding: .45rem .7rem;
        transform: none;
    }
    html body #siteNav.site-nav .nav-link:hover,
    html body #siteNav.site-nav .nav-link--active {
        transform: none;
        border-color: transparent;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    html body #siteNav.site-nav .nav-link {
        font-size: .8125rem;
        padding: .4rem .55rem;
    }
}

/* ============================================================
   Investiční kalkulačka – klient (.inv-calc-app)
   Stejný vizuální jazyk jako .life-pro-app, ale vlastní barva.
   ============================================================ */
.inv-calc-app {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 16px;
}
[data-theme="dark"] .inv-calc-app { background: #0b1220; }

.inv-calc-top {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
}
.inv-calc-top-left { min-width: 240px; }
.inv-calc-eyebrow {
    margin: 0 0 .25rem;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-primary) 75%, var(--color-text-2));
}
.inv-calc-top-left h2 {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
    line-height: 1.2;
}
.inv-calc-client-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    border-radius: 999px;
    font-size: .875rem;
}
.inv-calc-client-pill span { color: var(--color-text-2); }
.inv-calc-client-pill strong { font-weight: 700; }
.inv-calc-client-pill small { color: var(--color-text-2); font-size: .75rem; }

.inv-calc-top-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.inv-calc-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .inv-calc-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.inv-calc-col { min-width: 0; }
.inv-calc-col--inputs {
    background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
}
[data-theme="dark"] .inv-calc-col--inputs { background: rgba(148,163,184,.05); }

.inv-calc-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.inv-calc-fields--inline {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.inv-field { display: flex; flex-direction: column; gap: .25rem; }
.inv-field--wide { grid-column: span 2; }
.inv-field label {
    font-size: .8rem;
    color: var(--color-text-2);
    font-weight: 500;
}
.inv-field label small { color: var(--color-text-2); opacity: .8; font-weight: 400; }
.inv-field input[type="text"],
.inv-field input[type="number"] {
    width: 100%;
    padding: .5rem .65rem;
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-text-2) 30%, transparent);
    border-radius: 8px;
    color: var(--color-text);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}
.inv-field input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.inv-field--accent input {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
    font-weight: 600;
}
.inv-input-wrap { position: relative; display: flex; align-items: center; }
.inv-input-wrap input { padding-right: 2.25rem; }
.inv-input-wrap span {
    position: absolute;
    right: .65rem;
    color: var(--color-text-2);
    font-size: .8rem;
    pointer-events: none;
}

.inv-calc-toggles {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.inv-toggle {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-surface) 92%, var(--color-text-2) 8%);
    border: 1px solid color-mix(in srgb, var(--color-text-2) 14%, transparent);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.inv-toggle:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.inv-toggle input[type="checkbox"] {
    margin-top: .15rem;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.inv-toggle-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1;
    min-width: 0;
}
.inv-toggle-text strong {
    font-size: .88rem;
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.3;
}
.inv-toggle-text small {
    font-size: .75rem;
    color: var(--color-text-2);
    line-height: 1.4;
}
.inv-toggle-extra {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    flex-shrink: 0;
}
.inv-toggle-extra input[type="number"] {
    width: 64px;
    padding: .3rem .4rem;
    border: 1px solid color-mix(in srgb, var(--color-text-2) 24%, transparent);
    border-radius: 6px;
    font-size: .82rem;
    text-align: right;
    background: var(--color-surface);
    color: var(--color-text);
}
.inv-toggle-extra span {
    font-size: .78rem;
    color: var(--color-text-2);
}
.inv-toggle-extra--2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}
.inv-toggle-extra--2 .inv-mini {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .76rem;
    color: var(--color-text-2);
    white-space: nowrap;
}
.inv-toggle-extra--2 .inv-mini span {
    color: var(--color-text-2);
}
.inv-toggle-extra--2 .inv-mini input[type="number"] {
    width: 54px;
    padding: .25rem .35rem;
    border: 1px solid color-mix(in srgb, var(--color-text-2) 24%, transparent);
    border-radius: 6px;
    font-size: .82rem;
    text-align: center;
    background: var(--color-surface);
    color: var(--color-text);
}
@media (max-width: 540px) {
    .inv-toggle { flex-wrap: wrap; }
    .inv-toggle-extra { margin-left: 0; width: 100%; }
    .inv-toggle-extra--2 { width: 100%; justify-content: flex-start; }
}

/* Badge pro indikaci aktivních přepínačů ve výsledcích */
.inv-calc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .5rem 0 0;
}
.inv-calc-badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, #b45309 14%, transparent);
    border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
    color: #b45309;
    font-size: .72rem;
    font-weight: 600;
}
.inv-calc-deficit--warn {
    background: color-mix(in srgb, #fef3c7 60%, transparent);
}

.inv-calc-advanced {
    margin-top: .75rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-text-2) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text-2) 12%, transparent);
}
.inv-calc-advanced summary {
    cursor: pointer;
    font-size: .85rem;
    color: var(--color-text-2);
    font-weight: 500;
    padding: .25rem 0;
}
.inv-calc-advanced[open] summary { margin-bottom: .5rem; }
.inv-calc-advanced-hint {
    margin: .5rem 0 0;
    font-size: .75rem;
    color: var(--color-text-2);
    line-height: 1.5;
}

.inv-calc-hint {
    margin: .75rem 0 0;
    font-size: .82rem;
    color: var(--color-text-2);
    line-height: 1.5;
    min-height: 1.2em;
}

.inv-calc-panel {
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-text-2) 18%, transparent);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.inv-calc-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inv-calc-panel-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.inv-calc-results--empty .inv-calc-results-placeholder {
    margin: 0;
    color: var(--color-text-2);
    font-size: .9rem;
    line-height: 1.6;
}

.inv-calc-deficit {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .75rem 1rem;
    background: color-mix(in srgb, #f59e0b 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
    border-radius: 10px;
    margin-bottom: .75rem;
}
.inv-calc-deficit span { font-size: .8rem; color: var(--color-text-2); }
.inv-calc-deficit strong { font-size: 1.4rem; font-weight: 800; }
.inv-calc-deficit small { font-size: .8rem; color: var(--color-text-2); line-height: 1.5; }

.inv-calc-scenarios {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}
@media (min-width: 640px) {
    .inv-calc-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.inv-calc-scenario {
    padding: .9rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.inv-calc-scenario--perpetual {
    background: color-mix(in srgb, #10b981 6%, var(--color-surface));
    border-color: color-mix(in srgb, #10b981 25%, transparent);
}
.inv-calc-scenario--annuity {
    background: color-mix(in srgb, #3b82f6 6%, var(--color-surface));
    border-color: color-mix(in srgb, #3b82f6 25%, transparent);
}
.inv-calc-scenario header { display: flex; flex-direction: column; gap: .15rem; }
.inv-calc-scenario-tag {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-text-2);
    font-weight: 600;
}
.inv-calc-scenario h4 { margin: 0; font-size: 1rem; font-weight: 700; }
.inv-calc-scenario-desc {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--color-text-2);
}
.inv-calc-scenario-amount,
.inv-calc-scenario-saving {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-top: .4rem;
    border-top: 1px dashed color-mix(in srgb, var(--color-text-2) 20%, transparent);
}
.inv-calc-scenario-saving strong { color: var(--color-primary); }
.inv-calc-scenario--perpetual .inv-calc-scenario-saving strong { color: #059669; }
.inv-calc-scenario--annuity .inv-calc-scenario-saving strong { color: #2563eb; }
.inv-calc-scenario-amount span,
.inv-calc-scenario-saving span { font-size: .75rem; color: var(--color-text-2); }
.inv-calc-scenario-amount strong { font-size: 1.15rem; font-weight: 800; }
.inv-calc-scenario-saving strong { font-size: 1.25rem; font-weight: 800; }
[data-theme="dark"] .inv-calc-scenario--perpetual .inv-calc-scenario-saving strong { color: #34d399; }
[data-theme="dark"] .inv-calc-scenario--annuity .inv-calc-scenario-saving strong { color: #60a5fa; }

.inv-calc-note {
    margin: .75rem 0 0;
    font-size: .78rem;
    color: var(--color-text-2);
    line-height: 1.55;
    padding: .5rem .75rem;
    background: color-mix(in srgb, var(--color-text-2) 5%, transparent);
    border-radius: 8px;
}

.inv-calc-history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.inv-calc-history-item {
    width: 100%;
    text-align: left;
    padding: .5rem .65rem;
    background: color-mix(in srgb, var(--color-text-2) 4%, transparent);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    color: inherit;
}
.inv-calc-history-item:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border-color: color-mix(in srgb, var(--color-primary) 18%, transparent); }
.inv-calc-history-item strong { font-size: .9rem; }
.inv-calc-history-item small { font-size: .75rem; color: var(--color-text-2); }
.inv-calc-history-empty { color: var(--color-text-2); font-size: .85rem; padding: .5rem 0; text-align: center; }

.inv-calc-foot { padding: 0; }
.inv-calc-status {
    font-size: .85rem;
    color: var(--color-text-2);
    min-height: 1.2em;
}
.inv-calc-status.is-error { color: #dc2626; }

.inv-calc-ioldp-dialog {
    border: 1px solid color-mix(in srgb, var(--color-text-2) 20%, transparent);
    border-radius: 14px;
    padding: 0;
    background: var(--color-surface);
    color: var(--color-text);
    max-width: 90vw;
    width: 480px;
}
.inv-calc-ioldp-dialog::backdrop { background: rgba(0,0,0,.5); }
.inv-calc-ioldp-inner { padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.inv-calc-ioldp-head { display: flex; justify-content: space-between; align-items: center; }
.inv-calc-ioldp-head h3 { margin: 0; font-size: 1.1rem; }
.inv-calc-ioldp-close {
    background: none; border: none; font-size: 1.5rem; line-height: 1;
    cursor: pointer; color: var(--color-text-2); padding: .25rem .5rem;
}
.inv-calc-ioldp-search {
    padding: .5rem .75rem; border: 1px solid color-mix(in srgb, var(--color-text-2) 25%, transparent);
    border-radius: 8px; background: var(--color-surface); color: var(--color-text);
}
.inv-calc-ioldp-list { list-style: none; padding: 0; margin: 0; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
.inv-calc-ioldp-item {
    width: 100%; text-align: left; padding: .5rem .65rem;
    background: color-mix(in srgb, var(--color-text-2) 4%, transparent);
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    display: flex; flex-direction: column; gap: .15rem; color: inherit;
}
.inv-calc-ioldp-item:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border-color: color-mix(in srgb, var(--color-primary) 18%, transparent); }
.inv-calc-ioldp-item strong { font-size: .9rem; }
.inv-calc-ioldp-item small { font-size: .75rem; color: var(--color-text-2); }
.inv-calc-ioldp-empty { color: var(--color-text-2); font-size: .85rem; padding: .5rem 0; text-align: center; }

.inv-calc-history-dialog {
    border: 1px solid color-mix(in srgb, var(--color-text-2) 20%, transparent);
    border-radius: 14px; padding: 0; background: var(--color-surface); color: var(--color-text);
    max-width: 90vw; width: 520px;
}
.inv-calc-history-dialog::backdrop { background: rgba(0,0,0,.5); }
.inv-calc-history-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--color-text-2) 12%, transparent); }
.inv-calc-history-dialog-head h3 { margin: 0; font-size: 1.05rem; }
.inv-calc-history-dialog-close {
    background: none; border: none; font-size: 1.5rem; line-height: 1;
    cursor: pointer; color: var(--color-text-2); padding: .25rem .5rem;
}
.inv-calc-history-dialog-body { padding: .75rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; max-height: 60vh; overflow-y: auto; }
.inv-calc-history-loading { color: var(--color-text-2); font-size: .85rem; padding: .5rem 0; text-align: center; }
.inv-calc-history-empty { color: var(--color-text-2); font-size: .85rem; padding: .5rem 0; text-align: center; }

.inv-calc-pro .calc-bubble-history-btn {
    margin-left: .5rem;
    background: color-mix(in srgb, var(--color-text-2) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text-2) 18%, transparent);
    color: var(--color-text-2);
    padding: .35rem .65rem;
    border-radius: 8px;
    font-size: .8rem;
    cursor: pointer;
}
.inv-calc-pro .calc-bubble-history-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}

/* ===== Investiční kalkulačka – sekce historických grafů ===== */
.inv-calc-market {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--color-text-2) 14%, transparent);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.inv-calc-market-head {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.inv-calc-market-head h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 700;
}
.inv-calc-market-head p {
    margin: 0;
    font-size: .8rem;
    color: var(--color-text-2);
    line-height: 1.4;
}
.inv-calc-market-head--crises { margin-top: .5rem; }

/* SVG graf růstu aktiv */
.inv-calc-market-chart {
    background: color-mix(in srgb, var(--color-surface) 92%, var(--color-text-2) 8%);
    border: 1px solid color-mix(in srgb, var(--color-text-2) 14%, transparent);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.inv-history-chart-svg {
    width: 100%;
    height: auto;
    max-height: 320px;
    display: block;
}
.inv-history-axis-label {
    font-size: 10px;
    fill: var(--color-text-2);
    font-family: inherit;
}
.inv-history-end-label {
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
}
.inv-history-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: 0;
    padding: .5rem 0 0;
    border-top: 1px dashed color-mix(in srgb, var(--color-text-2) 18%, transparent);
}
.inv-history-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--color-text);
}
.inv-history-legend-item small {
    color: var(--color-text-2);
    font-size: .72rem;
}
.inv-history-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.inv-history-note {
    margin: 0;
    font-size: .72rem;
    color: var(--color-text-2);
    line-height: 1.5;
    font-style: italic;
}

/* Tabulka krizí */
.inv-calc-market-crises {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 0;
    margin: 0;
}
.inv-history-crises-head {
    display: grid;
    grid-template-columns: 60px 1fr 140px 90px;
    gap: .5rem;
    align-items: center;
    padding: .35rem .75rem;
    font-size: .72rem;
    color: var(--color-text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.inv-history-crisis-row {
    display: grid;
    grid-template-columns: 60px 1fr 140px 90px;
    gap: .5rem;
    align-items: center;
    padding: .5rem .75rem;
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-text-2) 6%);
    border: 1px solid color-mix(in srgb, var(--color-text-2) 12%, transparent);
    border-radius: 8px;
    font-size: .82rem;
}
.inv-history-crisis-year {
    font-weight: 700;
    color: var(--color-text);
}
.inv-history-crisis-label {
    color: var(--color-text);
}
.inv-history-crisis-drop {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
}
.inv-history-crisis-bar {
    display: inline-block;
    height: 8px;
    background: linear-gradient(90deg, #dc2626, #f87171);
    border-radius: 4px;
    min-width: 8px;
}
.inv-history-crisis-drop strong {
    color: #dc2626;
    font-weight: 700;
    font-size: .82rem;
    white-space: nowrap;
}
.inv-history-crisis-duration {
    color: var(--color-text-2);
    font-size: .76rem;
    text-align: right;
}

@media (max-width: 720px) {
    .inv-history-crises-head,
    .inv-history-crisis-row {
        grid-template-columns: 50px 1fr 110px;
    }
    .inv-history-crises-head span:nth-child(4),
    .inv-history-crisis-duration { display: none; }
}

/* Akce tlačítka v hlavičce kalkulačky – zarovnání ikon */
.inv-calc-top-actions .btn-sm i {
    margin-right: .25rem;
}

@media (max-width: 640px) {
    .inv-calc-fields,
    .inv-calc-fields--inline {
        grid-template-columns: 1fr;
    }
    .inv-field--wide { grid-column: span 1; }
    .inv-calc-top {
        position: sticky;
        top: 0;
        z-index: 6;
        background: var(--color-surface, #fff);
        padding-bottom: .5rem;
    }
    [data-theme="dark"] .inv-calc-top {
        background: var(--color-surface, #0b1220);
    }
}

/* ===== Poradce: skrytí / zobrazení webových kalkulaček ===== */
.calc-advisor-toggle-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    margin: 0 0 1.5rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
}
.calc-advisor-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-accent, #2563eb);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.calc-advisor-toggle:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    border-color: var(--color-accent, #2563eb);
}
.calc-advisor-toggle[aria-expanded="true"] {
    background: var(--color-accent, #2563eb);
    color: #fff;
    border-color: var(--color-accent, #2563eb);
}
.calc-advisor-toggle-hint {
    color: var(--color-text-2);
    font-size: .82rem;
    flex-basis: 100%;
}

/* Ve výchozím stavu (pwa_advisor) skrýváme kalkulačky s data-calc-visibility="web".
   Třída .calc-groups-wrap--web-hidden na obalu aktivuje skrytí. */
.calc-groups-wrap--advisor .calc-card-grid {
    transition: opacity .2s ease;
}
.calc-groups-wrap--web-hidden [data-calc-visibility="web"] {
    display: none !important;
}
/* Pokud celá kategorie neobsahuje žádnou viditelnou kartu, skryjeme ji celou,
   aby zůstala jen kategorie s advisor_only kalkulačkami. */
.calc-groups-wrap--web-hidden .calc-category:not(:has([data-calc-visibility="advisor"])) {
    display: none;
}

/* ===========================================================
   Impersonation banner (admin → poradce náhled)
   =========================================================== */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 1100;
    width: 100%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    color: #fff;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .35);
    font-size: .875rem;
}
.impersonation-banner__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: .55rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.impersonation-banner__icon {
    font-size: 1.1rem;
    line-height: 1;
}
.impersonation-banner__text {
    flex: 1;
    min-width: 200px;
    line-height: 1.4;
}
.impersonation-banner__text strong { font-weight: 700; }
.impersonation-banner__btn {
    background: #fff;
    color: #4f46e5;
    border: none;
    border-radius: 999px;
    padding: .45rem .95rem;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.impersonation-banner__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.impersonation-banner__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .impersonation-banner__inner {
        font-size: .8rem;
    }
    .impersonation-banner__btn {
        width: 100%;
        margin-top: .35rem;
    }
}


/* ============================================================
   KARIÉRA v3 – hero s vizuálem, bento grid, timeline, duo, FAQ
   ============================================================ */

/* ---------- HERO ---------- */
/* --career-accent: barva primárního brandu čitelná na aktuálním pozadí.
   V dark mode se primární barva prosvětlí (tmavé brandy, např. černá,
   by jinak na tmavém pozadí zanikly). */
.career-hero,
.career-page {
    --career-accent: var(--color-primary);
}
[data-theme="dark"] .career-hero,
[data-theme="dark"] .career-page {
    --career-accent: color-mix(in srgb, var(--color-primary) 30%, #aec4ff);
}
.career-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-bg, #f8fafc)), var(--color-bg, #f8fafc) 65%);
}
.career-hero-decor { position: absolute; inset: 0; pointer-events: none; }
.career-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
}
/* Orby drží u levého okraje, ať nedělají "svatozář" za fotkou vpravo */
.career-orb--1 {
    width: 480px; height: 480px;
    top: -220px; left: -140px;
    background: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.career-orb--2 {
    width: 380px; height: 380px;
    bottom: -180px; left: 22%;
    background: color-mix(in srgb, var(--color-secondary, var(--color-primary)) 30%, transparent);
}
.career-hero-grid-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-primary) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 7%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 30%, transparent 75%);
}
.career-hero-inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (max-width: 920px) {
    .career-hero-inner { grid-template-columns: 1fr; }
    .career-hero-visual { max-width: 420px; margin: 0 auto; }
}
.career-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-bottom: 1.1rem;
    padding: .4rem 1rem .4rem .8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--career-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--career-accent) 25%, transparent);
    color: var(--career-accent);
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
}
.career-eyebrow__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--career-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--career-accent) 50%, transparent);
    animation: career-pulse 2.2s ease-out infinite;
}
@keyframes career-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--career-accent) 45%, transparent); }
    70%  { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.career-hero-title {
    margin: 0 0 1.1rem;
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    line-height: 1.08; font-weight: 850;
    letter-spacing: -.025em;
}
.career-hl {
    font-style: normal;
    color: var(--career-accent);
    position: relative;
    white-space: nowrap;
}
.career-hl::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: .04em;
    height: .14em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--career-accent) 35%, transparent);
    transform-origin: left center;
    animation: career-underline .9s cubic-bezier(.22,.61,.36,1) .35s backwards;
}
@keyframes career-underline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.career-hero-subtitle {
    margin: 0 0 1.9rem;
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.6;
    color: var(--text-muted, #64748b);
    max-width: 580px;
}
.career-hero-actions {
    display: flex; gap: .8rem; flex-wrap: wrap; align-items: center;
}
.career-hero-actions .btn { display: inline-flex; align-items: center; gap: .5rem; }
.career-hero-note {
    margin: 1rem 0 0;
    font-size: .88rem;
    color: var(--text-muted, #64748b);
}

/* Hero vizuál – fotka s plovoucími štítky.
   Fotka nemá plný podklad ani rámeček: u vystřiženého PNG působil světlejší
   panel nad hlavou jako "svatozář". Podklad je gradient, který nahoře mizí,
   takže postava z něj vystupuje. U běžné (neprůhledné) fotky podklad ani
   není vidět – fotka překryje celou plochu. */
.career-hero-photo-wrap { position: relative; }
.career-hero-photo {
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    border-radius: 28px;
    filter: drop-shadow(0 30px 40px rgba(15, 23, 42, .35));
}
/* Podklad za postavou – nahoře plynule mizí, žádná hrana nad hlavou */
.career-hero-photo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--color-primary) 12%, var(--color-bg, #f8fafc)) 0%,
        color-mix(in srgb, var(--color-primary) 12%, var(--color-bg, #f8fafc)) 40%,
        transparent 78%
    );
    z-index: -1;
}
/* Čárkovaný dekorativní rám – jen kolem spodní části */
.career-hero-photo-wrap::before {
    content: "";
    position: absolute;
    inset: 42% -14px -14px 14px;
    border-radius: 28px;
    border: 2px dashed color-mix(in srgb, var(--career-accent) 30%, transparent);
    z-index: -2;
}
.career-hero-chip {
    position: absolute;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    background: var(--card-bg, rgba(255,255,255,.94));
    border: 1px solid var(--border-soft, rgba(15,23,42,.08));
    box-shadow: 0 12px 30px rgba(15,23,42,.16);
    color: var(--color-text, #0f172a);
    font-size: .8rem; font-weight: 700;
    white-space: nowrap;
    animation: career-float 5.5s ease-in-out infinite;
}
.career-hero-chip svg { color: var(--career-accent); flex-shrink: 0; }
.career-hero-chip--1 { top: 8%; left: -9%; animation-delay: 0s; }
.career-hero-chip--2 { top: 46%; right: -8%; animation-delay: 1.4s; }
.career-hero-chip--3 { bottom: 9%; left: -5%; animation-delay: 2.8s; }
@media (max-width: 920px) {
    .career-hero-chip--1 { left: -2%; }
    .career-hero-chip--2 { right: -2%; }
    .career-hero-chip--3 { left: 2%; }
}
@keyframes career-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

/* Hero vizuál – dekorativní "appka" bez fotky */
.career-hero-mock {
    border-radius: 22px;
    background: var(--card-bg, rgba(255,255,255,.92));
    border: 1px solid var(--border-soft, rgba(15,23,42,.08));
    box-shadow: 0 34px 80px -18px color-mix(in srgb, var(--color-primary) 40%, rgba(15,23,42,.3));
    overflow: hidden;
    transform: rotate(1.5deg);
}
.career-hero-mock__bar {
    display: flex; gap: 6px;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border-soft, rgba(15,23,42,.07));
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.career-hero-mock__bar span {
    width: 10px; height: 10px; border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.career-hero-mock__body { padding: 1.1rem; display: grid; gap: .65rem; }
.career-hero-mock__row {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem .9rem;
    border-radius: 13px;
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.career-hero-mock__icon {
    display: inline-flex;
    width: 34px; height: 34px;
    align-items: center; justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--career-accent) 16%, transparent);
    color: var(--career-accent);
    flex-shrink: 0;
}
.career-hero-mock__label { font-weight: 700; font-size: .9rem; flex: 1; min-width: 0; }
.career-hero-mock__check {
    display: inline-flex;
    width: 22px; height: 22px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-secondary, #22c55e) 18%, transparent);
    color: var(--color-secondary, #16a34a);
    flex-shrink: 0;
}

/* Stats strip v hero */
.career-stats-strip {
    position: relative; z-index: 1;
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
    background: color-mix(in srgb, var(--color-primary) 16%, transparent);
    box-shadow: 0 20px 50px -18px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.career-stat {
    padding: 1.4rem 1rem;
    text-align: center;
    background: var(--card-bg, rgba(255,255,255,.9));
}
.career-stat__value {
    display: block;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--career-accent);
    font-variant-numeric: tabular-nums;
}
.career-stat__label {
    display: block;
    margin-top: .4rem;
    font-size: .85rem;
    color: var(--text-muted, #64748b);
    line-height: 1.35;
}

/* ---------- Společné bloky ---------- */
.career-page { padding-top: clamp(2.5rem, 5vw, 4rem); }
.career-intro {
    max-width: 760px;
    margin: 0 auto 3rem;
    color: var(--text-muted, #64748b);
    line-height: 1.7;
    font-size: 1.05rem;
    text-align: center;
}
.career-block { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.career-block:first-child { margin-top: 0; }
.career-block-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2.4rem;
}
.career-block__title {
    margin: 0 0 .6rem;
    font-size: clamp(1.55rem, 3.4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.02em;
}
.career-block__subtitle {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* Scroll reveal */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Stagger – karty uvnitř odhaleného bloku naskakují postupně (--i z PHP) */
[data-reveal].is-revealed .career-bento-card,
[data-reveal].is-revealed .career-persona,
[data-reveal].is-revealed .career-timeline-step,
[data-reveal].is-revealed .career-faq-item {
    animation: career-rise .55s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(var(--i, 0) * 65ms);
}
@keyframes career-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    [data-reveal].is-revealed .career-bento-card,
    [data-reveal].is-revealed .career-persona,
    [data-reveal].is-revealed .career-timeline-step,
    [data-reveal].is-revealed .career-faq-item { animation: none; }
    .career-hero-chip { animation: none; }
    .career-eyebrow__dot { animation: none; }
    .career-hl::after { animation: none; }
}

/* ---------- Bento grid (moduly) ---------- */
.career-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.1rem;
}
.career-bento-card {
    position: relative;
    padding: 1.6rem 1.5rem;
    border-radius: 20px;
    background: var(--card-bg, rgba(255,255,255,.82));
    border: 1px solid var(--border-soft, rgba(15,23,42,.07));
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.career-bento-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(340px circle at var(--mx, 20%) var(--my, 0%), color-mix(in srgb, var(--career-accent) 9%, transparent), transparent 65%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.career-bento-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    box-shadow: 0 22px 44px -14px color-mix(in srgb, var(--color-primary) 26%, rgba(15,23,42,.14));
}
.career-bento-card:hover::before { opacity: 1; }
.career-bento-card--featured {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 11%, var(--card-bg, #fff)), var(--card-bg, rgba(255,255,255,.85)) 60%);
    border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.career-bento-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--career-accent) 13%, transparent);
    color: var(--career-accent);
    margin-bottom: 1rem;
    transition: transform .25s ease;
}
.career-bento-card:hover .career-bento-card__icon {
    transform: scale(1.08) rotate(-4deg);
}
.career-bento-card h3 {
    margin: 0 0 .5rem;
    font-size: 1.08rem;
    font-weight: 750;
}
.career-bento-card p {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: .94rem;
    line-height: 1.58;
}

/* ---------- Persony ---------- */
.career-personas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.1rem;
}
.career-persona {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.45rem 1.4rem;
    border-radius: 18px;
    background: var(--card-bg, rgba(255,255,255,.82));
    border: 1px solid var(--border-soft, rgba(15,23,42,.07));
    border-left: 4px solid color-mix(in srgb, var(--career-accent) 55%, transparent);
    transition: transform .22s ease, box-shadow .22s ease;
}
.career-persona:hover {
    transform: translateX(4px);
    box-shadow: 0 14px 34px rgba(15,23,42,.09);
}
.career-persona__icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--career-accent) 12%, transparent);
    color: var(--career-accent);
}
.career-persona__body h3 { margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 750; }
.career-persona__body p {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: .92rem;
    line-height: 1.55;
}

/* ---------- Timeline (proces) ---------- */
.career-timeline {
    list-style: none;
    margin: 0 auto; padding: 0;
    max-width: 720px;
    position: relative;
}
.career-timeline-step {
    position: relative;
    display: flex; gap: 1.4rem;
    padding: 0 0 2.1rem 0;
}
.career-timeline-step::before {
    content: "";
    position: absolute;
    left: 24px; top: 52px; bottom: 4px;
    width: 2px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--career-accent) 45%, transparent), color-mix(in srgb, var(--career-accent) 12%, transparent));
}
.career-timeline-step--last { padding-bottom: 0; }
.career-timeline-step--last::before { display: none; }
.career-timeline-step__num {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, #1e1b4b));
    color: #fff;
    font-weight: 850; font-size: 1.1rem;
    box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--color-primary) 55%, transparent);
    position: relative; z-index: 1;
}
.career-timeline-step__body {
    flex: 1;
    padding: .9rem 1.3rem 1.1rem;
    border-radius: 16px;
    background: var(--card-bg, rgba(255,255,255,.82));
    border: 1px solid var(--border-soft, rgba(15,23,42,.07));
    transition: border-color .25s ease, box-shadow .25s ease;
}
.career-timeline-step:hover .career-timeline-step__body {
    border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
    box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--color-primary) 24%, rgba(15,23,42,.12));
}
.career-timeline-step__body h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 750; }
.career-timeline-step__body p {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: .93rem;
    line-height: 1.58;
}
@media (max-width: 560px) {
    .career-timeline-step { gap: .9rem; }
    .career-timeline-step::before { left: 19px; top: 44px; }
    .career-timeline-step__num { width: 38px; height: 38px; font-size: .95rem; }
}

/* ---------- Duo: proč u nás + co umíme ---------- */
.career-duo {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 1.4rem;
    align-items: stretch;
}
@media (max-width: 860px) { .career-duo { grid-template-columns: 1fr; } }
.career-duo-col {
    padding: clamp(1.6rem, 3.5vw, 2.4rem);
    border-radius: 22px;
    background: var(--card-bg, rgba(255,255,255,.82));
    border: 1px solid var(--border-soft, rgba(15,23,42,.07));
}
.career-duo-col--accent {
    background: linear-gradient(150deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 62%, #1e1b4b));
    border: 0;
    color: #fff;
    box-shadow: 0 24px 55px -18px color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.career-duo__title {
    margin: 0 0 1.3rem;
    font-size: clamp(1.3rem, 2.6vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -.015em;
}
.career-benefit-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid; gap: 1.05rem;
}
.career-benefit { display: flex; gap: .9rem; align-items: flex-start; }
.career-benefit__icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--career-accent) 10%, transparent);
    font-size: 1.25rem; line-height: 1;
}
.career-benefit h3 { margin: 0 0 .2rem; font-size: .98rem; font-weight: 750; }
.career-benefit p {
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: .9rem;
    line-height: 1.55;
}
.career-offer-list { display: grid; gap: .85rem; }
.career-offer {
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
}
.career-offer h3 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 750; color: #fff; }
.career-offer p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(255,255,255,.85);
}

/* ---------- FAQ ---------- */
.career-faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: grid; gap: .8rem;
}
.career-faq-item {
    background: var(--card-bg, rgba(255,255,255,.82));
    border: 1px solid var(--border-soft, rgba(15,23,42,.07));
    border-radius: 15px;
    overflow: hidden;
    transition: box-shadow .22s ease, border-color .22s ease;
}
.career-faq-item[open] {
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--color-primary) 22%, rgba(15,23,42,.1));
}
.career-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 1.35rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    font-weight: 700;
    font-size: .99rem;
}
.career-faq-item summary::-webkit-details-marker { display: none; }
.career-faq-item__icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--career-accent) 11%, transparent);
    color: var(--career-accent);
    transition: transform .25s ease, background .25s ease;
}
.career-faq-item[open] .career-faq-item__icon { transform: rotate(45deg); }
.career-faq-item__body {
    padding: 0 1.35rem 1.25rem;
    color: var(--text-muted, #64748b);
    line-height: 1.62;
    font-size: .94rem;
}

/* ---------- Finální CTA ---------- */
.career-final {
    position: relative;
    margin-top: clamp(3.5rem, 7vw, 5.5rem);
    padding: clamp(3rem, 6.5vw, 5rem) 2rem;
    border-radius: 30px;
    overflow: hidden;
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--color-primary) 92%, #fff),
            var(--color-primary) 42%,
            color-mix(in srgb, var(--color-primary) 52%, #0b1029));
    color: #fff;
    text-align: center;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
        0 30px 70px -20px color-mix(in srgb, var(--color-primary) 55%, transparent),
        inset 0 1px 0 rgba(255,255,255,.22);
}
.career-final-decor {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,.16), transparent 42%),
        radial-gradient(circle at 85% 85%, rgba(255,255,255,.1), transparent 42%);
    pointer-events: none;
}
.career-final-decor::before {
    content: "";
    position: absolute;
    width: 60%; aspect-ratio: 1;
    left: 50%; top: -46%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 66%);
    filter: blur(10px);
    animation: career-final-glow 9s ease-in-out infinite alternate;
}
@keyframes career-final-glow {
    from { transform: translateX(-62%) scale(1); opacity: .8; }
    to   { transform: translateX(-38%) scale(1.18); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .career-final-decor::before { animation: none; }
}
.career-final-decor::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
}
.career-final-inner { position: relative; max-width: 620px; margin: 0 auto; }
.career-final h2 {
    margin: 0 0 .8rem;
    font-size: clamp(1.6rem, 3.6vw, 2.35rem);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -.02em;
}
.career-final p {
    margin: 0 0 1.8rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255,255,255,.88);
}
.career-final-actions { display: flex; justify-content: center; }
.career-final-btn {
    display: inline-flex; align-items: center; gap: .55rem;
    background: #fff !important;
    color: var(--color-primary) !important;
    border: 0 !important;
    box-shadow: 0 14px 34px -8px rgba(0,0,0,.35) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.career-final-btn svg { transition: transform .2s ease; }
.career-final-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -10px rgba(0,0,0,.45) !important;
}
.career-final-btn:hover svg { transform: translateX(4px); }
.career-final-contacts {
    margin-top: 1.6rem;
    display: flex; flex-wrap: wrap; gap: .6rem 1rem;
    justify-content: center; align-items: center;
}
.career-final-contact {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-size: .88rem; font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}
a.career-final-contact:hover { background: rgba(255,255,255,.24); }
.career-final-contact--name { background: transparent; border-color: transparent; opacity: .85; }

/* ---------- Dark theme ---------- */
[data-theme="dark"] .career-hero {
    background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 20%, #0b1220), #0f172a 65%);
}
[data-theme="dark"] .career-hero-grid-bg {
    background-image:
        linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
}
[data-theme="dark"] .career-stat,
[data-theme="dark"] .career-bento-card,
[data-theme="dark"] .career-persona,
[data-theme="dark"] .career-timeline-step__body,
[data-theme="dark"] .career-faq-item,
[data-theme="dark"] .career-duo-col:not(.career-duo-col--accent) {
    background: rgba(15,23,42,.6);
    border-color: rgba(148,163,184,.16);
}
[data-theme="dark"] .career-bento-card--featured {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 22%, rgba(15,23,42,.65)), rgba(15,23,42,.6) 60%);
}
[data-theme="dark"] .career-hero-chip {
    background: rgba(15,23,42,.92);
    border-color: rgba(148,163,184,.22);
    color: #e2e8f0;
}
[data-theme="dark"] .career-hero-mock {
    background: rgba(15,23,42,.85);
    border-color: rgba(148,163,184,.18);
}
[data-theme="dark"] .career-hero-mock__label { color: #e2e8f0; }
/* Tmavé brandy (např. černá) by na tmavém pozadí splynuly – přidej obrys */
[data-theme="dark"] .career-timeline-step__num {
    border: 1px solid rgba(148,163,184,.35);
}
[data-theme="dark"] .career-duo-col--accent,
[data-theme="dark"] .career-final {
    border: 1px solid rgba(148,163,184,.22);
}
[data-theme="dark"] .career-hero-photo-wrap::after {
    background: linear-gradient(
        to top,
        #1a2235 0%,
        #1a2235 40%,
        transparent 78%
    );
}

/* ============================================================
   Globální plovoucí upozornění (maintenance / „hrabeme se v tom")
   ============================================================ */
.site-notice {
    position: fixed;
    left: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 2147483646; /* těsně pod modaly, nad úplně vším ostatním */
    max-width: min(420px, calc(100vw - 2rem));
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    border: 1px solid;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .12);
    font-size: .9rem;
    line-height: 1.45;
    font-family: inherit;
    animation: siteNoticeIn .35s cubic-bezier(.16, 1, .3, 1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
@keyframes siteNoticeIn {
    from { transform: translateY(20px) scale(.96); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.site-notice--closing { animation: siteNoticeOut .25s ease forwards; }
@keyframes siteNoticeOut {
    to { transform: translateY(20px) scale(.96); opacity: 0; }
}
.site-notice__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1rem;
    line-height: 1;
}
.site-notice__body { flex: 1 1 auto; min-width: 0; }
.site-notice__title {
    font-weight: 800;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .15rem;
}
.site-notice__text {
    color: inherit;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.site-notice__close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0, 0, 0, .08);
    color: inherit;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: grid;
    place-items: center;
    padding: 0;
    transition: background .15s;
}
.site-notice__close:hover { background: rgba(0, 0, 0, .18); }
.site-notice__pulse {
    position: absolute;
    top: .6rem;
    right: 2rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: siteNoticePulse 1.8s ease-in-out infinite;
}
@keyframes siteNoticePulse {
    0%, 100% { opacity: .35; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.4); }
}

/* Varianty */
.site-notice--info {
    background: rgba(239, 246, 255, .94);
    border-color: #bfdbfe;
    color: #1e3a8a;
}
.site-notice--info .site-notice__icon { background: rgba(37, 99, 235, .15); }

.site-notice--warning {
    background: rgba(255, 251, 235, .94);
    border-color: #fde68a;
    color: #92400e;
}
.site-notice--warning .site-notice__icon { background: rgba(245, 158, 11, .18); }

.site-notice--danger {
    background: rgba(254, 242, 242, .94);
    border-color: #fecaca;
    color: #991b1b;
}
.site-notice--danger .site-notice__icon { background: rgba(239, 68, 68, .16); }

/* Dark mode */
[data-theme="dark"] .site-notice--info {
    background: rgba(30, 58, 138, .42);
    border-color: rgba(96, 165, 250, .35);
    color: #bfdbfe;
}
[data-theme="dark"] .site-notice--info .site-notice__icon { background: rgba(96, 165, 250, .25); }
[data-theme="dark"] .site-notice--warning {
    background: rgba(120, 53, 15, .42);
    border-color: rgba(251, 191, 36, .35);
    color: #fde68a;
}
[data-theme="dark"] .site-notice--warning .site-notice__icon { background: rgba(251, 191, 36, .25); }
[data-theme="dark"] .site-notice--danger {
    background: rgba(127, 29, 29, .42);
    border-color: rgba(248, 113, 113, .35);
    color: #fecaca;
}
[data-theme="dark"] .site-notice--danger .site-notice__icon { background: rgba(248, 113, 113, .25); }
[data-theme="dark"] .site-notice__close { background: rgba(255, 255, 255, .14); }
[data-theme="dark"] .site-notice__close:hover { background: rgba(255, 255, 255, .24); }

/* Mobilní úpravy */
@media (max-width: 480px) {
    .site-notice {
        left: .5rem;
        right: .5rem;
        bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
        max-width: none;
        padding: .75rem .85rem;
        font-size: .85rem;
    }
    .site-notice__close {
        width: 44px;
        height: 44px;
    }
}

/* Respektuje prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .site-notice,
    .site-notice--closing,
    .site-notice__pulse { animation: none; }
}

/* CRM / iframe: jen kalkulačka bez seznamu na pozadí (?embed=1&kalkulacka=…) */
body.calc-embed-only {
    background: #0b1220;
    overflow: hidden;
}
body.calc-embed-only .app-shell--fullbleed .app-main {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}
body.calc-embed-only .section {
    padding: 0;
}
body.calc-embed-only [data-calc-page] .container {
    padding: 0;
    max-width: none;
}
body.calc-embed-only .calc-category {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
body.calc-embed-only .calc-bubble {
    border: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
}
body.calc-embed-only .calc-bubble::before {
    display: none;
}
body.calc-embed-only .calc-bubble-toggle,
body.calc-embed-only .calc-bubble-history-btn,
body.calc-embed-only .calc-bubble-foot {
    display: none !important;
}
body.calc-embed-only .calc-modal[open] {
    inset: 0;
    transform: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
}
body.calc-embed-only .calc-modal[open]::backdrop {
    display: none;
}
body.calc-embed-only .calc-modal[open] .calc-modal-shell {
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}
body.calc-embed-only .calc-modal-close {
    display: none;
}
body.calc-embed-only .calc-modal.calc-modal--life-pro {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
}
body.calc-embed-only .calc-modal.calc-modal--life-pro::backdrop {
    display: none;
}
body.calc-embed-only .calc-modal-content .calc-bubble-body,
body.calc-embed-only .calc-modal.calc-modal--life-pro .calc-modal-content .calc-bubble-body {
    height: 100%;
    min-height: 0;
}
body.calc-embed-only .life-pro-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 100;
}
body.calc-embed-only [data-life-pro-close],
body.calc-embed-only [data-inv-calc-close] {
    display: none;
}
body.calc-embed-only .inv-calc-app,
body.calc-embed-only .life-pro-app {
    min-height: 100%;
    height: 100%;
}

/* ==========================================================================
   MOTION SYSTEM – scroll reveal, entrance animace, mikro-interakce
   Vše respektuje prefers-reduced-motion.
   ========================================================================== */

/* ── Scroll reveal (JS označí prvky .reveal-item) ── */
.reveal-item {
    opacity: 0;
    translate: 0 26px;
    transition:
        opacity .6s var(--ease),
        translate .6s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal-item.is-inview {
    opacity: 1;
    translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
    .reveal-item {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }
}

/* ── Page-hero entrance (nadpis podstránek) ── */
@media (prefers-reduced-motion: no-preference) {
    .page-hero .container > * {
        animation: page-hero-in .55s var(--ease) both;
    }
    .page-hero .container > *:nth-child(2) { animation-delay: .08s; }
    .page-hero .container > *:nth-child(3) { animation-delay: .16s; }
    .page-hero.page-hero--about .page-hero-title::after,
    .page-hero:has(> .container > .page-hero-title) .page-hero-title::after {
        transform-origin: left center;
        animation: page-hero-bar .55s .3s var(--ease) both;
    }
    /* Split hero: fotka vjíždí zprava s mírným zpožděním */
    .hero .hero-photo-side {
        animation: hero-enter .8s .3s cubic-bezier(.22,.61,.36,1) both;
    }
    /* Jemný puls záře kolem fotky v hero */
    .hero-photo-side .hero-home-photo-wrap::before {
        animation: hero-photo-glow 6s ease-in-out infinite alternate;
    }
}
@keyframes page-hero-in {
    from { opacity: 0; translate: 0 14px; }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes page-hero-bar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes hero-photo-glow {
    from { opacity: .16; transform: scale(.97); }
    to   { opacity: .34; transform: scale(1.04); }
}

/* ── Navigace: animované podtržení odkazů ── */
.site-nav .nav-link {
    position: relative;
}
.site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
    pointer-events: none;
}
.site-nav .nav-link:hover::after,
.site-nav .nav-link.nav-link--active::after {
    opacity: 1;
    transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
    .site-nav .nav-link::after { transition: none; }
}

/* ── Karty: šipka odkazu se na hoveru posune ── */
.pomoci-clean-link {
    transition: gap .18s var(--ease), color .18s var(--ease);
}
.pomoci-clean-card:hover .pomoci-clean-link {
    gap: .6rem;
}

/* ── Tlačítka: mikro-stisk ── */
.btn:active {
    transform: translateY(1px) scale(.99);
}

/* ── Hladké scrollování na kotvy ── */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ── Viditelný focus pro klávesnici ── */
:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 72%, #ffffff);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Kill-switch: efekty vypnuté v administraci (data-effects="0") ── */
html[data-effects="0"] .reveal-item {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
}
html[data-effects="0"] .page-hero .container > *,
html[data-effects="0"] .hero .hero-photo-side,
html[data-effects="0"] .hero .hero-text > *,
html[data-effects="0"] .page-hero.page-hero--about .page-hero-title::after,
html[data-effects="0"] .page-hero:has(> .container > .page-hero-title) .page-hero-title::after,
html[data-effects="0"] .hero-photo-side .hero-home-photo-wrap::before {
    animation: none !important;
}

/* ── Hero parallax vrstvy (JS nastavuje --px/--py; translate property,
   nekoliduje s entrance animacemi pracujícími s transform) ── */
@media (prefers-reduced-motion: no-preference) {
    .hero { --px: 0; --py: 0; }
    .hero .hero-text {
        translate: calc(var(--px) * 1px) calc(var(--py) * 1px);
    }
    .hero .hero-photo-side {
        translate: calc(var(--px) * -1.6px) calc(var(--py) * -1.6px);
    }
    html[data-parallax="0"] .hero .hero-text,
    html[data-parallax="0"] .hero .hero-photo-side {
        translate: none;
    }
}

/* ── Kalkulačky: karty v barvě své kategorie ── */
.calc-category .calc-bubble {
    border-color: color-mix(in srgb, var(--category-color, #1a73e8) 24%, var(--color-border));
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--category-color, #1a73e8) 13%, transparent), transparent 38%),
        linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 92%, #fff), var(--color-surface));
}
.calc-category .calc-bubble:not(.is-open):hover {
    border-color: color-mix(in srgb, var(--category-color, #1a73e8) 48%, var(--color-border));
    box-shadow: 0 26px 64px -40px color-mix(in srgb, var(--category-color, #1a73e8) 45%, rgba(15,23,42,.35));
}
.calc-category .calc-bubble-toggle:hover .calc-bubble-action {
    color: var(--category-color, #1a73e8);
}

/* ── PWA install hint: varianty pro Safari a webovou appku ── */
.pwa-ios-hint.pwa-hint-mode-safari .pwa-hint-safari { display: inline-flex; }
.pwa-ios-hint.pwa-hint-mode-webapp .pwa-hint-webapp { display: inline-flex; }
.pwa-ios-hint .pwa-hint-webapp a {
    color: #fde68a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   KALKULAČKY: facelift stránky (filtry, kategorie, karty)
   ============================================================ */

/* Menší mrtvá mezera za page-hero */
section.section[data-calc-page] {
    padding-top: 2.75rem;
}

/* Filter chipy: neutrální sklo, aktivní = barva kategorie */
.calc-section-chip {
    background: var(--color-surface, #fff);
    color: var(--color-text-2, #3f4a5f);
    border-color: var(--color-border, #e6eaf2);
    font-weight: 700;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.calc-section-chip:hover {
    border-color: color-mix(in srgb, var(--chip-color) 55%, transparent);
    color: var(--chip-color);
    transform: translateY(-1px);
    box-shadow: none;
}
.calc-section-chip.is-active {
    background: var(--chip-color);
    border-color: var(--chip-color);
    color: #fff;
}
[data-theme="dark"] .calc-section-chip {
    background: rgba(255,255,255,.04);
    color: rgba(226,232,240,.85);
    border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .calc-section-chip:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--chip-color) 65%, transparent);
}
[data-theme="dark"] .calc-section-chip.is-active {
    background: var(--chip-color);
    border-color: var(--chip-color);
    color: #fff;
}

/* Hlavičky kategorií */
.calc-category-head h2 {
    font-weight: 800;
}
.calc-category-icon {
    border-radius: 12px;
}

/* Karty kalkulaček – čistý povrch s tónem kategorie */
.calc-category .calc-bubble {
    border-radius: 20px;
    border-color: color-mix(in srgb, var(--category-color, #1a73e8) 22%, var(--color-border));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--category-color, #1a73e8) 6%, transparent), transparent 44%),
        var(--color-surface, #fff);
    box-shadow: 0 14px 40px -26px rgba(15,23,42,.25);
    min-height: 0;
}
.calc-category .calc-bubble:not(.is-open):hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--category-color, #1a73e8) 45%, transparent);
    box-shadow: 0 22px 54px -28px color-mix(in srgb, var(--category-color, #1a73e8) 40%, rgba(15,23,42,.3));
}
.calc-bubble::before {
    display: none; /* starý gradient blob pryč */
}
.calc-bubble-toggle {
    min-height: 132px;
    background: transparent;
    padding: 1.25rem 1.25rem 1rem;
}
[data-theme="dark"] .calc-bubble-toggle {
    background: transparent;
}
.calc-bubble-text strong {
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.calc-bubble-text small {
    color: var(--color-muted, #64748b);
    line-height: 1.55;
}
.calc-bubble-action {
    color: #fff;
    background: var(--category-color, #1a73e8);
    border-color: transparent;
    font-weight: 700;
    font-size: .82rem;
    padding: .5rem .95rem;
    transition: filter .15s, transform .15s;
}
.calc-bubble-toggle:hover .calc-bubble-action {
    filter: brightness(1.08);
}
[data-theme="dark"] .calc-bubble-action {
    color: #fff;
    background: var(--category-color, #1a73e8);
    border-color: transparent;
}
.calc-bubble-foot {
    padding: 0 1.25rem 1rem;
}
.calc-share-link {
    text-decoration: none;
}
.calc-share-link:hover {
    color: var(--category-color, #1a73e8);
}

/* Mobilní úpravy audit 2026-09-12: touch targety. */
@media (pointer: coarse) {
    .calc-modal-close {
        width: 44px;
        height: 44px;
    }
    .booking-cal-day {
        padding: .65rem 0;
        min-height: 44px;
    }
}