/* ============================================================
   webproskolu.cz · v3 — "Warm professional"
   ------------------------------------------------------------
   Cílovka: ředitelka soukromé MŠ/ZŠ, 47 let, 4 minuty mezi
   ranní svačinou a rodičovskou. Potřebuje skenovat, ne luštit.
   Lidská tvář (foto), warm paleta, soft rounded, žádný buzz.
   ============================================================ */

/* ---------- 1. Fonts (self-hosted variable woff2) ---------- */

@font-face {
    font-family: "Bricolage";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/bricolage-wght.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Bricolage";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/bricolage-ext-wght.woff2") format("woff2-variations");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Jakarta";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/jakarta-wght.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Jakarta";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/jakarta-ext-wght.woff2") format("woff2-variations");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Jakarta";
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/jakarta-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+20A0-20CF;
}

/* ---------- 2. Design tokens — warm, friendly ---------- */
:root {
    /* paleta — warm cream, sage primary, terracotta accent */
    --bg:            #FAF6F0;
    --surface:       #FFFFFF;
    --surface-2:     #F4EDDF;
    --surface-3:     #EBE3D2;

    --ink:           #2A2520;     /* warm near-black */
    --ink-2:         #524C45;     /* body text */
    --ink-soft:      #6B6459;     /* muted, captions */

    --sage:          #6F8F65;     /* primary — meadow */
    --sage-deep:     #4F6647;
    --sage-bg:       #E1EADB;
    --sage-soft:     #EFF3EB;

    --terra:         #C97456;     /* accent — terracotta */
    --terra-deep:    #A4583E;
    --terra-bg:      #F4DDD2;
    --terra-soft:    #F9EDE5;

    --border:        #E8DFCD;
    --border-soft:   #EFE7D6;
    --border-strong: #C9BFA8;

    /* type */
    --font-display:  "Bricolage", "Inter", "Helvetica Neue", system-ui, sans-serif;
    --font-body:     "Jakarta", "Inter", "Helvetica Neue", system-ui, sans-serif;

    /* sizing */
    --fs-mono:       0.8125rem;
    --fs-small:      0.9375rem;
    --fs-body:       1.0625rem;
    --fs-lede:       clamp(1.125rem, 1vw + .875rem, 1.375rem);
    --fs-h3:         clamp(1.375rem, 1.5vw + .8rem, 1.875rem);
    --fs-h2:         clamp(2rem, 3.5vw + .5rem, 3.25rem);
    --fs-h1:         clamp(2.5rem, 5.5vw + .5rem, 4.75rem);

    /* spacing — generous but not editorial-cold */
    --s-1:   0.25rem;
    --s-2:   0.5rem;
    --s-3:   0.75rem;
    --s-4:   1rem;
    --s-5:   1.5rem;
    --s-6:   2rem;
    --s-7:   3rem;
    --s-8:   4.5rem;
    --s-9:   6rem;
    --s-10:  8rem;

    /* radii — soft, warm, not pill, not sharp */
    --r-sm:  8px;
    --r-md:  14px;
    --r-lg:  22px;
    --r-xl:  32px;

    /* shadows — soft, warm */
    --sh-sm:  0 1px 2px rgba(74, 68, 61, 0.06);
    --sh-md:  0 8px 24px rgba(74, 68, 61, 0.08);
    --sh-lg:  0 24px 48px -8px rgba(74, 68, 61, 0.16);
    --sh-photo: 0 30px 60px -20px rgba(74, 68, 61, 0.30),
                0 12px 24px -8px rgba(74, 68, 61, 0.12);

    /* layout */
    --content-max:   76rem;

    /* motion */
    --ease:   cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 180ms var(--ease);
    --t:      280ms var(--ease);
}

/* ---------- 3. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt";
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

p {
    text-wrap: pretty;
    color: var(--ink-2);
}
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

a {
    color: var(--terra-deep);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color var(--t-fast);
}
a:hover { color: var(--terra-deep); }
a:focus-visible {
    outline: 2px solid var(--terra);
    outline-offset: 3px;
    border-radius: 3px;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
    font-variation-settings: "opsz" 24;
}
h1 {
    font-size: var(--fs-h1);
    font-weight: 600;
    letter-spacing: -0.035em;
    font-variation-settings: "opsz" 96;
}
h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 60;
}
h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 36;
}
h4 {
    font-size: 1.125rem;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: -0.005em;
}

ul, ol { padding-left: 1.25em; }
li { margin: 0.25em 0; color: var(--ink-2); }

button { font: inherit; cursor: pointer; }

::selection { background: var(--terra); color: var(--bg); }

/* ---------- 4. Layout primitives ---------- */
.wrap {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
main { flex: 1; padding-bottom: 6rem; }

/* ---------- 5. Skip link ---------- */

/* ---------- 6. Header — quiet, warm ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(250, 246, 240, 0.86);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.site-header.scrolled { border-bottom-color: var(--border-soft); }
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding-block: var(--s-4);
}
.brand {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.022em;
    transition: color var(--t-fast);
}
.brand:hover { color: var(--sage-deep); }
.brand-text { letter-spacing: -0.028em; }

.nav-links {
    display: flex;
    gap: var(--s-5);
    align-items: center;
    font-size: var(--fs-small);
    font-weight: 500;
}
.nav-links a {
    color: var(--ink-2);
    text-decoration: none;
}
.nav-links a:hover { color: var(--sage-deep); }
.nav-links .nav-phone {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.nav-links .nav-phone svg {
    width: 14px; height: 14px;
    color: currentColor;
}

/* Highlighted phone CTA — green pill so it pops in the header */
.nav-links .nav-phone-cta {
    background: var(--sage-deep);
    color: var(--bg);
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(15, 76, 58, 0.22);
    transition: background var(--t-fast), transform var(--t-fast);
}
.nav-links .nav-phone-cta:hover {
    background: var(--ink);
    color: var(--bg);
    transform: translateY(-1px);
}
.nav-links .nav-phone-cta svg { color: var(--bg); }

@media (max-width: 760px) {
    .nav-links a:not(.nav-phone) { display: none; }
    .nav-links .nav-phone-cta { padding: 0.45rem 0.75rem; font-size: 0.9rem; }
}

/* ---------- 7. Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.95rem 1.4rem;
    border-radius: var(--r-md);
    transition: transform var(--t-fast), background var(--t),
                box-shadow var(--t), color var(--t-fast);
    border: 0;
    cursor: pointer;
    line-height: 1.2;
    letter-spacing: -0.005em;
    white-space: nowrap;
}
.btn-primary {
    background: var(--sage-deep);
    color: var(--bg);
    box-shadow: 0 8px 20px -6px rgba(79, 102, 71, 0.45),
                0 2px 4px rgba(79, 102, 71, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.btn-primary:hover {
    background: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -6px rgba(42, 37, 32, 0.45),
                0 4px 8px rgba(42, 37, 32, 0.20);
    color: var(--bg);
}
.btn-primary .arrow {
    transition: transform var(--t-fast);
    display: inline-block;
}
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--border-strong);
}
.btn-secondary:hover {
    border-color: var(--ink);
    background: var(--surface);
}
.btn-lg {
    padding: 1.125rem 1.75rem;
    font-size: 1.0625rem;
    border-radius: var(--r-md);
}

/* ---------- 8. Hero ---------- */
.hero {
    position: relative;
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-bottom: clamp(3rem, 6vw, 6rem);
    overflow: visible;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-8);
    align-items: center;
}
@media (min-width: 980px) {
    .hero-grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: clamp(2rem, 4vw, 4.5rem);
    }
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--sage-bg);
    color: var(--sage-deep);
    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    font-size: var(--fs-mono);
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: var(--s-5);
}
.hero-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sage);
    box-shadow: 0 0 0 4px var(--sage-bg);
    flex-shrink: 0;
}

.hero h1 {
    font-size: var(--fs-h1);
    font-weight: 580;
    line-height: 1.02;
    letter-spacing: -0.038em;
    color: var(--ink);
    margin-bottom: var(--s-5);
    font-variation-settings: "opsz" 96, "wdth" 100;
    text-wrap: balance;
}
.hero h1 .accent {
    color: var(--terra-deep);
    position: relative;
    white-space: nowrap;
}

.hero-lede {
    font-family: var(--font-body);
    font-size: var(--fs-lede);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 36ch;
    margin-bottom: var(--s-6);
}
.hero-lede strong { color: var(--ink); font-weight: 600; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
    margin-bottom: var(--s-7);
}
.hero-phone-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-small);
}
.hero-phone-inline:hover { color: var(--terra-deep); }
.hero-phone-inline strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ----------- Hero quick form ----------- */
.hero-quick-form {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: clamp(1.1rem, 2.4vw, 1.5rem);
    margin-bottom: var(--s-6);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.hqf-lead {
    font-size: var(--fs-small);
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0;
}
.hqf-lead strong { color: var(--ink); font-weight: 600; }

.hqf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
@media (min-width: 560px) {
    .hqf-grid { grid-template-columns: 1fr 1fr; }
}
.hqf-grid input {
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0.65rem 0.8rem;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--t-fast), background var(--t-fast),
                box-shadow var(--t-fast);
}
.hqf-grid input::placeholder { color: var(--ink-soft); }
.hqf-grid input:focus {
    outline: none;
    border-color: var(--sage-deep);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--sage-bg);
}

.hqf-gdpr {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-soft);
    cursor: pointer;
}
.hqf-gdpr input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    accent-color: var(--sage-deep);
}
.hqf-gdpr a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 2px; }
.hqf-gdpr a:hover { color: var(--ink); }
.hqf-gdpr .req { color: var(--terra-deep); }

.hqf-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-top: 0.25rem;
}
.hqf-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-small);
    transition: color var(--t-fast);
}
.hqf-phone:hover { color: var(--terra-deep); }
.hqf-phone strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ----------- Comparison table ----------- */
.section-compare { background: var(--surface); }
.compare-table-wrap {
    margin-top: var(--s-6);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-soft);
    background: var(--bg);
    box-shadow: var(--sh-md);
}
.compare-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--ink-2);
}
.compare-table thead th {
    text-align: left;
    vertical-align: bottom;
    padding: 1.1rem 1rem;
    background: var(--sage-bg);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.35;
    border-bottom: 2px solid var(--border);
}
.compare-table thead th small {
    display: block;
    margin-top: 0.2rem;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--ink-soft);
    letter-spacing: 0;
    text-transform: none;
}
.compare-table thead th.ct-criteria {
    background: transparent;
    width: 18%;
    min-width: 160px;
}
.compare-table thead th.ct-us {
    background: var(--terra-bg, #f6e7df);
    color: var(--terra-deep);
    border-bottom-color: var(--terra-deep);
}
.compare-table tbody th {
    text-align: left;
    vertical-align: top;
    padding: 0.95rem 1rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    white-space: normal;
}
.compare-table tbody td {
    vertical-align: top;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    border-left: 1px solid var(--border-soft);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td:last-child {
    background: rgba(201, 116, 86, 0.07);
}
.compare-table td:last-child strong {
    color: var(--terra-deep);
}
.compare-table strong { color: var(--ink); font-weight: 600; }

.compare-foot {
    margin-top: var(--s-5);
    font-size: var(--fs-small);
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 56ch;
}
.compare-foot a {
    color: var(--sage-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}
.compare-foot a:hover { color: var(--ink); }

/* ----------- Audit CTA strip ----------- */
.audit-strip {
    background: linear-gradient(180deg, var(--sage-bg) 0%, rgba(232, 230, 213, 0.7) 100%);
    border-block: 1px solid var(--border-soft);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}
.audit-strip-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: center;
}
@media (min-width: 800px) {
    .audit-strip-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--s-7);
    }
}
.audit-strip-eyebrow {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--sage-deep);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.4rem;
}
.audit-strip-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.6rem;
    text-wrap: balance;
    max-width: 38ch;
}
.audit-strip-deck {
    font-size: var(--fs-small);
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
    max-width: 56ch;
}
.audit-strip-cta {
    justify-self: start;
    white-space: nowrap;
}
@media (min-width: 800px) {
    .audit-strip-cta { justify-self: end; }
}

.hero-secondary-link {
    margin-top: -1.25rem;
    margin-bottom: var(--s-7);
    font-size: var(--fs-small);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-soft);
}
.hero-secondary-link a {
    color: var(--sage-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color var(--t-fast);
}
.hero-secondary-link a:hover { color: var(--ink); }

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6) var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
    color: var(--ink-soft);
}
.hero-meta div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hero-meta strong {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* hero photo — sage frame, soft tilt */
.hero-photo-wrap {
    position: relative;
    padding: 0.875rem;
    background: var(--sage-bg);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-photo);
}
.hero-photo-wrap::before {
    content: "";
    position: absolute;
    top: -16px; right: -16px;
    width: 64px; height: 64px;
    background: var(--terra);
    border-radius: 50%;
    opacity: 0.85;
    z-index: 2;
    box-shadow: 0 8px 20px -4px rgba(164, 88, 62, 0.40);
}
.hero-photo-wrap::after {
    content: "★";
    position: absolute;
    top: -16px; right: -16px;
    width: 64px; height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg);
    font-size: 1.5rem;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
}
.hero-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--r-lg);
    display: block;
}
@media (max-width: 980px) {
    .hero-photo { aspect-ratio: 4 / 3; }
}

/* floating note over photo */
.hero-note {
    position: absolute;
    bottom: -28px; left: -28px;
    background: var(--surface);
    color: var(--ink);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    font-size: var(--fs-small);
    line-height: 1.4;
    max-width: 16rem;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    z-index: 3;
}
.hero-note-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--sage-bg);
    color: var(--sage-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-note strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 1px;
}
.hero-note span { color: var(--ink-soft); font-size: 0.8125rem; }

@media (max-width: 760px) {
    .hero-note { left: 0; bottom: -16px; }
    .hero-photo-wrap::before,
    .hero-photo-wrap::after { top: -10px; right: -10px; width: 48px; height: 48px; }
    .hero-photo-wrap::after { font-size: 1.125rem; }
}

/* ---------- 9. Empathy band ---------- */
.empathy {
    margin-top: var(--s-9);
    background: var(--surface);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border-soft);
}
.empathy-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
}
@media (min-width: 800px) {
    .empathy-grid { grid-template-columns: 1fr 1fr; }
}
.empathy-photo {
    width: 100%; height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center 30%;
}
.empathy-copy {
    padding: clamp(var(--s-6), 5vw, var(--s-8));
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.empathy-eyebrow {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--terra-deep);
    font-size: 1.0625rem;
    margin-bottom: var(--s-3);
    font-variation-settings: "opsz" 24;
}
.empathy-copy h2 {
    font-size: clamp(1.625rem, 2.5vw + 0.5rem, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-4);
    text-wrap: balance;
}
.empathy-copy h2 em {
    font-style: italic;
    color: var(--terra-deep);
    font-weight: 500;
}
.empathy-copy p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-2);
}
.empathy-copy p + p { margin-top: var(--s-3); }

/* ---------- 9b. Pain points section ---------- */
.pain-section {
    background:
        linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%);
    margin-top: var(--s-9);
    padding-block: clamp(4rem, 7vw, 6rem);
    position: relative;
}
.pain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    margin-top: var(--s-7);
}
@media (min-width: 700px) {
    .pain-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}
@media (min-width: 1080px) {
    .pain-grid { grid-template-columns: repeat(3, 1fr); }
}
.pain-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--terra);
    position: relative;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t-fast);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.pain-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-left-color: var(--terra-deep);
}
.pain-card-note {
    background: var(--sage-bg);
    border-left-color: var(--sage);
}
.pain-card-note:hover { border-left-color: var(--sage-deep); }
.pain-card-note .pain-quote { color: var(--ink-2); font-style: italic; }
.pain-num {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--terra-deep);
    letter-spacing: 0;
    line-height: 1;
}
.pain-num::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--terra);
    box-shadow: 0 0 0 4px var(--terra-bg);
}
.pain-quote {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1vw + 0.85rem, 1.375rem);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -0.018em;
    margin: 0;
    text-wrap: balance;
    font-style: italic;
    font-variation-settings: "opsz" 36;
}
.pain-fix {
    margin: 0;
    padding-top: var(--s-3);
    border-top: 1px solid var(--border-soft);
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--ink-2);
    position: relative;
    padding-left: 1.5rem;
}
.pain-fix::before {
    content: "→";
    position: absolute;
    left: 0; top: 0.85rem;
    color: var(--sage-deep);
    font-weight: 600;
    font-size: 1rem;
}
.pain-cta {
    margin-top: var(--s-7);
    text-align: center;
    font-family: var(--font-display);
    color: var(--ink-2);
    font-size: 1.125rem;
    line-height: 1.5;
}
.pain-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    color: var(--terra-deep);
    background-image: linear-gradient(var(--terra-deep), var(--terra-deep));
    background-size: 100% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 3px;
    text-decoration: none;
    font-size: 1.25rem;
    margin-top: var(--s-2);
    transition: color var(--t-fast), background-size var(--t-fast);
}
.pain-cta-link:hover {
    color: var(--terra);
    background-image: linear-gradient(var(--terra), var(--terra));
    background-size: 100% 2.5px;
}

/* ---------- 10. Sections ---------- */
.section {
    padding-block: clamp(4rem, 7vw, 7rem);
}
.section-head {
    max-width: 44rem;
    margin-bottom: var(--s-8);
}
.section-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--sage-deep);
    background: var(--sage-bg);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: var(--fs-small);
    letter-spacing: -0.005em;
    margin-bottom: var(--s-4);
}
.section h2 {
    font-size: var(--fs-h2);
    line-height: 1.04;
    margin-bottom: var(--s-4);
    text-wrap: balance;
}
.section h2 em {
    font-style: italic;
    color: var(--terra-deep);
    font-weight: 500;
}
.section-deck {
    font-size: var(--fs-lede);
    color: var(--ink-2);
    max-width: 44ch;
    line-height: 1.55;
}

/* ---------- 11. Photo features (alternating rows) ---------- */
.feat-rows {
    display: grid;
    gap: clamp(2.5rem, 5vw, 5rem);
}
.feat-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    align-items: center;
}
@media (min-width: 900px) {
    .feat-row {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 5vw, 5rem);
    }
    .feat-row.reverse .feat-photo-wrap { order: 2; }
}
.feat-photo-wrap {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-md);
    aspect-ratio: 5 / 4;
}
.feat-photo-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.feat-num {
    position: absolute;
    top: var(--s-4); left: var(--s-4);
    background: var(--bg);
    color: var(--terra-deep);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    box-shadow: var(--sh-sm);
}

.feat-body h3 {
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    line-height: 1.1;
    margin-bottom: var(--s-4);
    text-wrap: balance;
    letter-spacing: -0.025em;
}
.feat-body h3 em {
    font-style: italic;
    color: var(--terra-deep);
    font-weight: 500;
}
.feat-body p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 38ch;
}
.feat-body p + p { margin-top: var(--s-3); }
.feat-list {
    margin-top: var(--s-4);
    list-style: none;
    padding: 0;
    font-size: var(--fs-small);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.feat-list li {
    /* Inline content flows naturally; icon is absolute so <strong>
       and following text stay on the same line and wrap as one block. */
    position: relative;
    padding-left: 1.85rem;
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0;
}
.feat-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--sage-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M2 7l3.2 3.2L12 3.5' stroke='%234F6647' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
}
.feat-list li strong {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- 12. Showcase / mockup ---------- */
.showcase {
    background: var(--sage-soft);
}
.showcase-frame {
    margin-top: var(--s-7);
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    overflow: hidden;
    border: 1px solid var(--border-soft);
}
.showcase-bar {
    background: var(--surface-2);
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-soft);
}
.showcase-bar .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--border-strong);
}
.showcase-bar .url {
    margin-left: 0.8rem;
    padding: 0.25rem 0.7rem;
    background: var(--bg);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--ink-soft);
    font-family: ui-monospace, monospace;
    flex: 1;
    max-width: 22rem;
}
.showcase-body { padding: 0; }

.showcase-caption {
    margin-top: var(--s-5);
    text-align: center;
    font-size: var(--fs-small);
    color: var(--ink-soft);
    font-style: italic;
}

/* ---------- 12b. Demo gallery — 3 design previews ---------- */
.demos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    margin-top: var(--s-7);
}
@media (min-width: 720px) {
    .demos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
    .demos-grid { grid-template-columns: repeat(3, 1fr); }
}

.demo-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.demo-frame {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-md);
    transition: transform var(--t), box-shadow var(--t);
    position: relative;
}
.demo-frame:hover,
.demo-frame:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--sh-lg);
}
.demo-frame:focus-visible {
    outline: 2px solid var(--sage-deep);
    outline-offset: 4px;
}

.demo-chrome {
    background: var(--surface-2);
    padding: 0.55rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-soft);
}
.demo-chrome-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--border-strong);
    flex-shrink: 0;
}
.demo-chrome-dot:nth-child(1) { background: #E07A6D; }
.demo-chrome-dot:nth-child(2) { background: #E8C166; }
.demo-chrome-dot:nth-child(3) { background: #7BB58A; }
.demo-chrome-url {
    margin-left: 0.7rem;
    padding: 0.18rem 0.65rem;
    background: var(--bg);
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--ink-soft);
    font-family: ui-monospace, monospace;
    flex: 1;
    text-align: center;
    border: 1px solid var(--border-soft);
}

/* Scaled iframe — show top of mockup as zoomable thumbnail */
.demo-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg);
}
.demo-viewport iframe {
    /* Render iframe at 1440x1080 desktop viewport, then scale down */
    position: absolute;
    top: 0; left: 0;
    width: 1440px;
    height: 1080px;
    border: 0;
    transform: scale(0.30);
    transform-origin: top left;
    pointer-events: none;
    background: white;
}
@media (max-width: 1079px) {
    .demo-viewport iframe { transform: scale(0.42); width: 1280px; height: 960px; }
}
@media (max-width: 719px) {
    .demo-viewport iframe { transform: scale(0.50); width: 1100px; height: 825px; }
}

.demo-hover-cta {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.7rem 1rem;
    background: linear-gradient(0deg, rgba(15, 76, 58, 0.95) 0%, rgba(15, 76, 58, 0.78) 60%, rgba(15, 76, 58, 0) 100%);
    color: var(--bg);
    font-size: var(--fs-small);
    font-weight: 600;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t), transform var(--t);
    min-height: 4.5rem;
}
.demo-frame:hover .demo-hover-cta,
.demo-frame:focus-visible .demo-hover-cta {
    opacity: 1;
    transform: translateY(0);
}

.demo-meta {
    padding-inline: 0.15rem;
}
.demo-type {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sage-deep);
    background: var(--sage-bg);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.55rem;
}
.demo-meta h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 0.45rem;
}
.demo-meta p {
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
}

.demos-note {
    margin-top: var(--s-6);
    text-align: center;
    font-size: var(--fs-small);
    color: var(--ink-soft);
    font-style: italic;
    max-width: 56ch;
    margin-inline: auto;
}

/* ---------- 13. Process — 3 friendly cards ---------- */
.process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin-top: var(--s-7);
}
@media (min-width: 800px) {
    .process-grid { grid-template-columns: repeat(3, 1fr); }
}
.process-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    border: 1px solid var(--border-soft);
    transition: transform var(--t), box-shadow var(--t);
    position: relative;
    overflow: hidden;
}
.process-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
}
.process-week {
    display: inline-block;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--terra-deep);
    background: var(--terra-bg);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    margin-bottom: var(--s-4);
}
.process-card h3 {
    font-size: 1.5rem;
    margin-bottom: var(--s-3);
    line-height: 1.1;
    letter-spacing: -0.022em;
}
.process-card p {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.process-card-num {
    position: absolute;
    top: var(--s-4); right: var(--s-5);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    color: var(--sage-bg);
    line-height: 1;
    letter-spacing: -0.05em;
    pointer-events: none;
}

/* ---------- 14. Pricing — warm card ---------- */
.pricing-section {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: clamp(2rem, 5vw, 4rem);
    margin-block: var(--s-7);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border-soft);
}
.pricing-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-7);
    align-items: center;
}
@media (min-width: 800px) {
    .pricing-wrap {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(2rem, 5vw, 4rem);
    }
}
.price-tag {
    text-align: left;
}
.price-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--terra-bg);
    color: var(--terra-deep);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: var(--s-3);
}
.price-badge::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--terra);
    box-shadow: 0 0 0 3px rgba(196, 90, 50, 0.18);
}
.price-amount {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    line-height: 1;
}
.price-amount .price-old {
    font-family: var(--font-body);
    font-size: clamp(1.125rem, 2.2vw, 1.5rem);
    color: var(--ink-soft);
    text-decoration: line-through;
    text-decoration-color: var(--terra);
    text-decoration-thickness: 2px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.price-amount .price-new {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.045em;
    font-variation-settings: "opsz" 144;
}
.price-amount sup {
    font-size: 0.4em;
    font-weight: 500;
    color: var(--terra-deep);
    margin-left: 0.15em;
    vertical-align: top;
    letter-spacing: -0.01em;
}
.price-jed {
    color: var(--ink-soft);
    font-size: var(--fs-small);
    margin-top: var(--s-2);
    margin-bottom: var(--s-5);
}
.price-recurring {
    background: var(--sage-bg);
    color: var(--sage-deep);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    font-size: var(--fs-small);
    line-height: 1.5;
    display: inline-flex;
    flex-direction: column;
}
.price-recurring strong {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.price-cta {
    margin-top: var(--s-6);
}

.price-includes h4 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--border);
}
.price-includes ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}
@media (min-width: 560px) {
    .price-includes ul { grid-template-columns: 1fr 1fr; }
}
.price-includes li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.6rem;
    font-size: var(--fs-small);
    color: var(--ink-2);
    line-height: 1.45;
    margin: 0;
}
.price-includes li::before {
    content: "";
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--sage-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M2 7l3.2 3.2L12 3.5' stroke='%234F6647' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
    flex-shrink: 0;
    margin-top: 2px;
}

.early-adopter {
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px dashed var(--border-strong);
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
}
.early-adopter-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--terra-bg);
    color: var(--terra-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.early-adopter-body {
    font-size: var(--fs-small);
    color: var(--ink-2);
    line-height: 1.55;
}
.early-adopter-body strong {
    color: var(--ink);
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

/* ---------- 15. FAQ ---------- */
/* Works when .faq is a wrapper div (homepage pattern) AND
   when .faq is a section modifier wrapping .wrap (legacy static pages). */
.faq,
section.faq .wrap {
    max-width: 50rem;
    margin-inline: auto;
    margin-top: var(--s-7);
    display: grid;
    gap: var(--s-3);
}
/* When .faq is on the section itself, the section's own padding-block
   stays — we just constrain inner .wrap width and center it. */
section.faq {
    max-width: none;
}
section.faq > .wrap > .section-head {
    /* section-head sits above the FAQ grid, full width of constrained .wrap */
    margin-bottom: var(--s-6);
}
#otazky .section-head {
    max-width: 50rem;
    margin-inline: auto;
    text-align: center;
}
.faq-item {
    background: var(--surface);
    border-radius: var(--r-md);
    border: 1px solid var(--border-soft);
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t);
}
.faq-item[open],
.faq-item:hover {
    border-color: var(--border);
}
.faq-item[open] { box-shadow: var(--sh-sm); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--sage-bg);
    color: var(--sage-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    transition: transform var(--t), background var(--t-fast),
                color var(--t-fast);
}
.faq-item[open] summary::after {
    transform: rotate(45deg);
    background: var(--terra-bg);
    color: var(--terra-deep);
}
.faq-body {
    padding: 0 var(--s-5) var(--s-5);
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 56ch;
}
.faq-body p + p { margin-top: 0.75rem; }

/* ---------- 16. Lead form / contact ---------- */
.contact {
    background: var(--terra-soft);
    padding-block: clamp(4rem, 7vw, 7rem);
    margin-top: var(--s-8);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-8);
    align-items: start;
}
@media (min-width: 980px) {
    .contact-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(2.5rem, 5vw, 5rem);
    }
}

.contact-letter {
    position: relative;
}
.contact-letter h2 {
    font-size: clamp(2rem, 3vw + 0.7rem, 3rem);
    line-height: 1.04;
    margin-bottom: var(--s-5);
    text-wrap: balance;
    letter-spacing: -0.028em;
}
.contact-letter h2 em {
    font-style: italic;
    color: var(--terra-deep);
    font-weight: 500;
}
.contact-letter p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 36ch;
}
.contact-letter p + p { margin-top: var(--s-3); }

.contact-person {
    margin-top: var(--s-7);
    display: flex;
    gap: var(--s-4);
    align-items: center;
    padding: var(--s-4);
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    max-width: 24rem;
}
.contact-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--sage);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(79, 102, 71, 0.30);
}
.contact-person-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.contact-person-info strong {
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 1px;
}
.contact-person-info span {
    color: var(--ink-soft);
    font-size: 0.875rem;
}
.contact-person-info a {
    color: var(--ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.contact-person-info a:hover { color: var(--terra-deep); }

/* form */
.lead-form {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: clamp(var(--s-5), 4vw, var(--s-7));
    box-shadow: var(--sh-md);
    border: 1px solid var(--border-soft);
}
.field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}
@media (min-width: 560px) {
    .field-row-2 { grid-template-columns: 1fr 1fr; }
}
.field { display: flex; flex-direction: column; }
.field label {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.4rem;
}
.field label .req { color: var(--terra-deep); }
.field label .opt {
    font-weight: 400;
    color: var(--ink-soft);
    font-size: 0.8125rem;
    margin-left: 0.3em;
}
.field input,
.field select,
.field textarea {
    font: inherit;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0.75rem 0.875rem;
    transition: border-color var(--t-fast), background var(--t-fast),
                box-shadow var(--t-fast);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--sage-deep);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--sage-bg);
}
.field input::placeholder,
.field textarea::placeholder {
    color: var(--ink-soft);
}
.field textarea {
    resize: vertical;
    min-height: 6rem;
}
.field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 6 5-6' stroke='%234F6647' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.25rem;
}
.field-error input,
.field-error select,
.field-error textarea {
    border-color: var(--terra-deep);
    background: var(--terra-soft);
}

.form-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.checkbox-row {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: 0.65rem;
    align-items: start;
    margin-top: var(--s-2);
    font-size: 0.9375rem;
    color: var(--ink-2);
    line-height: 1.5;
}
.checkbox-row input[type="checkbox"] {
    width: 1.25rem; height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--sage-deep);
    cursor: pointer;
    flex-shrink: 0;
}
.checkbox-row .req { color: var(--terra-deep); font-weight: 600; }

.form-submit {
    width: 100%;
    margin-top: var(--s-5);
}

.form-disclaimer {
    margin-top: var(--s-4);
    font-size: 0.8125rem;
    color: var(--ink-soft);
    text-align: center;
    line-height: 1.5;
}
.form-disclaimer-soft {
    margin-top: var(--s-2);
    font-size: 0.75rem;
    color: var(--ink-soft);
    text-align: left;
    padding-top: var(--s-3);
    border-top: 1px dashed var(--border-soft);
    opacity: 0.85;
}
.form-disclaimer-soft a {
    color: var(--sage-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* DPA placeholdery — vyznačí pole k vyplnění školou při tisku */
.dpa-fill {
    background: #fff3cd;
    border-bottom: 1px dashed #856404;
    padding: 0 4px;
    font-style: italic;
    color: #6b4d09;
}
@media print {
    .dpa-fill { background: transparent; border-bottom: 1px solid #000; min-width: 12em; display: inline-block; }
}

.form-alert {
    padding: var(--s-4);
    background: var(--terra-soft);
    border: 1px solid var(--terra);
    border-radius: var(--r-sm);
    margin-bottom: var(--s-4);
    font-size: var(--fs-small);
    color: var(--ink);
}
.form-alert strong {
    color: var(--terra-deep);
    display: block;
    margin-bottom: 0.4rem;
}
.form-alert ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* ---------- 17. Thank-you ---------- */
.thanks {
    padding-block: clamp(4rem, 8vw, 8rem);
}
.thanks-wrap {
    max-width: 36rem;
    margin-inline: auto;
    text-align: center;
}
.thanks-icon {
    width: 72px; height: 72px;
    margin: 0 auto var(--s-5);
    border-radius: 50%;
    background: var(--sage-bg);
    color: var(--sage-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}
.thanks h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: var(--s-5);
}
.thanks-lede {
    font-size: var(--fs-lede);
    color: var(--ink-2);
    line-height: 1.55;
    margin-bottom: var(--s-7);
}
.timeline {
    margin: var(--s-7) auto;
    text-align: left;
    max-width: 30rem;
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--s-3);
}
.timeline li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--s-4);
    background: var(--surface);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    border: 1px solid var(--border-soft);
    align-items: start;
    margin: 0;
}
.timeline-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--sage-bg);
    color: var(--sage-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
}
.timeline strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 2px;
}
.timeline span {
    color: var(--ink-soft);
    font-size: var(--fs-small);
    line-height: 1.5;
}

/* ---------- 18. Footer ---------- */
.site-footer {
    background: var(--ink);
    color: rgba(250, 246, 240, 0.78);
    padding-block: var(--s-8) var(--s-5);
    margin-top: var(--s-9);
}
.site-footer a {
    color: rgba(250, 246, 240, 0.88);
    text-decoration: none;
}
.site-footer a:hover { color: var(--terra-bg); }
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
}
@media (min-width: 720px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
        gap: clamp(2rem, 4vw, 4rem);
    }
}
.footer-brand .brand-mark { background: var(--sage); }
.footer-brand p {
    margin-top: var(--s-3);
    color: rgba(250, 246, 240, 0.62);
    font-size: var(--fs-small);
    max-width: 32ch;
    line-height: 1.55;
}
.footer-col h4 {
    color: var(--bg);
    font-size: var(--fs-small);
    margin-bottom: var(--s-3);
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: -0.005em;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    font-size: var(--fs-small);
}
.footer-col li { margin: 0; color: rgba(250, 246, 240, 0.78); }
.footer-bottom {
    margin-top: var(--s-7);
    padding-top: var(--s-4);
    border-top: 1px solid rgba(250, 246, 240, 0.12);
    color: rgba(250, 246, 240, 0.55);
    font-size: 0.8125rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
}

/* ---------- 19. Sticky mobile CTA bar (Skeptic rec) ---------- */
.mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(250, 246, 240, 0.95);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-top: 1px solid var(--border);
    padding: 0.6rem 1rem;
    gap: 0.5rem;
    box-shadow: 0 -8px 24px rgba(74, 68, 61, 0.10);
}
.mobile-cta-bar > a {
    flex: 1;
    text-align: center;
    padding: 0.85rem;
    border-radius: var(--r-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.mobile-cta-bar .m-call {
    background: var(--sage-deep);
    color: var(--bg);
}
.mobile-cta-bar .m-write {
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--border);
}
@media (max-width: 720px) {
    .mobile-cta-bar { display: flex; }
    body { padding-bottom: 4.5rem; }
    html { scroll-padding-bottom: 5rem; }
    .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .site-footer { margin-bottom: 4.5rem; }
}

/* ---------- 20. Legal page ---------- */
.legal {
    padding-block: clamp(3rem, 6vw, 6rem);
}
.legal-wrap {
    max-width: 44rem;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2rem);
}
.legal h1 {
    font-size: clamp(2.25rem, 4vw + .5rem, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-3);
    text-wrap: balance;
}
.legal .meta,
.legal-meta {
    color: var(--ink-soft);
    font-size: var(--fs-small);
    margin-bottom: var(--s-7);
}
.legal h2 {
    font-size: clamp(1.4rem, 1.6vw + .5rem, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-top: var(--s-8);
    margin-bottom: var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
    text-wrap: balance;
}
.legal h3 {
    font-size: 1.15rem;
    margin-top: var(--s-5);
    margin-bottom: var(--s-2);
    color: var(--ink);
}
.legal p,
.legal li {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-2);
}
.legal p { margin-bottom: var(--s-3); }
.legal li { margin-bottom: 0.4rem; }
.legal ul, .legal ol {
    padding-left: 1.5rem;
    margin-bottom: var(--s-4);
}
.legal a {
    color: var(--terra-deep);
    text-underline-offset: 3px;
}
.legal strong { color: var(--ink); font-weight: 600; }
.legal code {
    background: var(--surface-2);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: var(--terra-deep);
}
.legal .legal-callout {
    background: var(--surface-2);
    border-left: 3px solid var(--terra);
    padding: var(--s-4) var(--s-5);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    margin: var(--s-5) 0;
}
.legal .legal-callout p:last-child { margin-bottom: 0; }
.legal .legal-back {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border-soft);
    color: var(--terra-deep);
    font-weight: 500;
    text-decoration: none;
    width: 100%;
}
.legal .legal-back:hover { color: var(--terra); }

/* ---------- 21. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   22. Pro koho cards (refactored from inline handlers)
   ============================================================ */
.pro-koho-section {
    background: var(--surface-2);
}
.pro-koho-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin-inline: auto;
}
.pro-koho-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 1.25rem;
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.06);
    transition: transform var(--t-fast),
                box-shadow var(--t-fast),
                border-color var(--t-fast);
    will-change: transform;
}
.pro-koho-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.pro-koho-card .pkc-arrow {
    color: var(--terra);
    transition: transform var(--t-fast);
}
.pro-koho-card p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.95rem;
}
.pro-koho-card:hover,
.pro-koho-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(31, 41, 55, 0.12);
    border-color: var(--terra);
}
.pro-koho-card:hover .pkc-arrow,
.pro-koho-card:focus-visible .pkc-arrow {
    transform: translateX(4px);
}
.pro-koho-foot {
    text-align: center;
    margin-top: 2.5rem;
    color: var(--ink-soft);
}

/* ============================================================
   23. Focus visible — keyboard a11y baseline
   ============================================================ */
:focus-visible {
    outline: 3px solid var(--terra);
    outline-offset: 3px;
    border-radius: 4px;
}
.btn:focus-visible,
.nav-phone:focus-visible,
.pro-koho-card:focus-visible,
.demo-frame:focus-visible {
    outline: 3px solid var(--terra);
    outline-offset: 4px;
}
/* Skip link visible on focus */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0.5rem;
    background: var(--ink);
    color: var(--bg);
    padding: 0.625rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    z-index: 9999;
    transition: top var(--t-fast);
}
.skip-link:focus {
    top: 0.5rem;
}

/* ============================================================
   24. View Transitions API — cross-document SPA-like nav
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
@view-transition {
    navigation: auto;
}
}

/* Default transition: short crossfade */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: var(--ease);
}
::view-transition-old(root) {
    animation-name: vp-fade-out;
}
::view-transition-new(root) {
    animation-name: vp-fade-in-up;
}
@keyframes vp-fade-out {
    to { opacity: 0; }
}
@keyframes vp-fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Persistent header/footer across nav (no flash) */
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
.mobile-cta-bar { view-transition-name: mobile-cta-bar; }

::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer),
::view-transition-old(mobile-cta-bar),
::view-transition-new(mobile-cta-bar) {
    animation: none;
    opacity: 1;
}

/* ============================================================
   25. Scroll-driven entry animations (CSS-only, GPU-friendly)
   ------------------------------------------------------------
   Uses animation-timeline: view() — falls back to no-animation
   in unsupported browsers via @supports gate.
   ============================================================ */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

        /* Subtle rise into view — never touches opacity so the content
           is always visible (matters for fullPage screenshots, search
           crawlers, find-on-page jumps to off-screen elements). */
        .section-head,
        .pain-card,
        .feat-row,
        .process-card,
        .demo-card,
        .pro-koho-card,
        .faq-item,
        .price-tag,
        .price-includes,
        .contact-letter,
        .lead-form {
            animation: vp-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 20%;
        }

        /* Stagger inside grids using nth-child timing */
        .pain-card:nth-child(2),
        .demo-card:nth-child(2),
        .process-card:nth-child(2),
        .pro-koho-card:nth-child(2) {
            animation-range: entry 5% cover 25%;
        }
        .pain-card:nth-child(3),
        .demo-card:nth-child(3),
        .process-card:nth-child(3),
        .pro-koho-card:nth-child(3) {
            animation-range: entry 8% cover 28%;
        }
        .pain-card:nth-child(n+4),
        .pro-koho-card:nth-child(n+4) {
            animation-range: entry 12% cover 32%;
        }

        /* Hero photo: subtle scale, opacity stays 1 */
        .hero-photo-wrap {
            animation: vp-hero-in linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 25%;
        }
    }
}

@keyframes vp-rise {
    from {
        transform: translateY(28px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes vp-hero-in {
    from {
        transform: scale(0.97);
    }
    to {
        transform: scale(1);
    }
}

/* ============================================================
   26. Hero entry — one-shot animation on page load
   (no JS, plays once, then static)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .hero h1         { animation: hero-rise 700ms var(--ease) both; }
    .hero-lede       { animation: hero-rise 700ms var(--ease) 120ms both; }
    .hero-quick-form { animation: hero-rise 700ms var(--ease) 220ms both; }
    .hero-actions    { animation: hero-rise 700ms var(--ease) 220ms both; }
    .hero-meta       { animation: hero-rise 700ms var(--ease) 320ms both; }
}
/* Transform-only — no opacity drop, so content stays visible even
   if animation is suppressed by BFCache restore or older browsers. */
@keyframes hero-rise {
    from { transform: translateY(14px); }
    to   { transform: translateY(0); }
}

/* ============================================================
   27. Subtle interactive polish
   ============================================================ */
.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: translateX(-100%);
    transition: transform 600ms var(--ease);
    z-index: -1;
}
.btn-primary:hover::before {
    transform: translateX(100%);
}
.demo-card { transition: transform var(--t), box-shadow var(--t); }
.demo-card:hover { transform: translateY(-4px); }

/* iframe interactive perf — hint browsers */
.demo-viewport iframe {
    content-visibility: auto;
    contain-intrinsic-size: 600px 800px;
}

/* ============================================================
   28. Footer helpers (replaces inline footer styles)
   ============================================================ */
.footer-brand-link,
.footer-strong { color: var(--bg); }
.footer-h4-gap { margin-top: 1.5rem; }
.footer-li-muted { opacity: 0.7; margin-top: 0.5rem; }
.footer-li-gap { margin-top: 0.5rem; }

/* ============================================================
   29. Cookie consent — banner + modal + cookies table
   ============================================================ */

/* Cookies table inside legal pages */
.cookies-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--s-5) 0 var(--s-6);
    font-size: 0.95rem;
}
.cookies-table thead th {
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 600;
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-bottom: 2px solid var(--ink);
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}
.cookies-table tbody td {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(132, 125, 114, 0.25);
    vertical-align: top;
    color: var(--ink-2);
    line-height: 1.55;
}
.cookies-table tbody tr:last-child td { border-bottom: 0; }
.cookies-table code {
    background: var(--surface-2);
    padding: 0.1em 0.45em;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em;
    color: var(--ink);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .cookies-table,
    .cookies-table thead,
    .cookies-table tbody,
    .cookies-table tr,
    .cookies-table th,
    .cookies-table td { display: block; }
    .cookies-table thead { display: none; }
    .cookies-table tbody tr {
        border: 1px solid rgba(132, 125, 114, 0.25);
        border-radius: var(--r-md);
        margin-bottom: var(--s-3);
        padding: 0.5rem;
        background: var(--bg);
    }
    .cookies-table tbody td {
        border-bottom: 1px dashed rgba(132, 125, 114, 0.18);
        padding: 0.5rem 0.65rem;
    }
    .cookies-table tbody td:last-child { border-bottom: 0; }
    .cookies-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        color: var(--ink-soft);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.15rem;
    }
}

/* Banner (sticks to bottom) */
.cookie-banner {
    position: fixed;
    left: clamp(0.5rem, 2vw, 1.5rem);
    right: clamp(0.5rem, 2vw, 1.5rem);
    bottom: clamp(0.5rem, 2vw, 1.5rem);
    z-index: 9000;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
    transform: translateY(0);
    opacity: 1;
    transition: transform 250ms var(--ease), opacity 250ms var(--ease);
}
.cookie-banner.is-hidden {
    transform: translateY(calc(100% + 2rem));
    opacity: 0;
    pointer-events: none;
}
.cookie-banner-inner {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
    grid-template-columns: 1fr auto;
    align-items: center;
    max-width: 78rem;
    margin-inline: auto;
}
.cookie-banner-heading {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--bg);
    letter-spacing: -0.01em;
}
.cookie-banner-body {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(250, 246, 240, 0.85);
    margin: 0;
}
.cookie-banner-link {
    color: var(--terra-bg);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 0.4em;
    white-space: nowrap;
}
.cookie-banner-link:hover { color: var(--bg); }
.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

@media (max-width: 880px) {
    .cookie-banner-inner {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .cookie-banner-actions {
        justify-content: stretch;
    }
    .cookie-banner-actions .cookie-btn { flex: 1 1 auto; }
}

/* Cookie buttons (used by both banner and modal) */
.cookie-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.625rem 1.1rem;
    border-radius: var(--r-md);
    line-height: 1.2;
    transition: background 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
    white-space: nowrap;
}
.cookie-btn:focus-visible {
    outline: 2px solid var(--terra);
    outline-offset: 2px;
}
.cookie-btn:active { transform: translateY(1px); }

.cookie-btn-primary {
    background: var(--terra);
    color: var(--bg);
}
.cookie-btn-primary:hover { background: var(--terra-deep); }

.cookie-btn-ghost {
    background: transparent;
    color: var(--bg);
    border: 1px solid rgba(250, 246, 240, 0.35);
}
.cookie-btn-ghost:hover {
    background: rgba(250, 246, 240, 0.1);
    border-color: rgba(250, 246, 240, 0.6);
}

.cookie-btn-text {
    background: transparent;
    color: var(--bg);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.625rem 0.6rem;
}
.cookie-btn-text:hover { color: var(--terra-bg); }

/* Modal */
.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transition: opacity 200ms var(--ease);
}
.cookie-modal.is-hidden { opacity: 0; pointer-events: none; }
.cookie-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 12, 0.55);
    backdrop-filter: blur(2px);
}
.cookie-modal-card {
    position: relative;
    background: var(--bg);
    color: var(--ink-2);
    width: min(36rem, 100%);
    max-height: min(90vh, 44rem);
    overflow-y: auto;
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.cookie-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--s-2);
}
.cookie-modal-head h2 {
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0;
}
.cookie-modal-close {
    background: transparent;
    border: 0;
    padding: 0.4rem;
    border-radius: 999px;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 0;
    transition: background 150ms var(--ease), color 150ms var(--ease);
}
.cookie-modal-close:hover {
    background: var(--surface-2);
    color: var(--ink);
}
.cookie-modal-close:focus-visible {
    outline: 2px solid var(--terra);
    outline-offset: 2px;
}
.cookie-modal-intro {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 var(--s-4);
}

.cookie-cat-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-5);
    display: grid;
    gap: var(--s-3);
}
.cookie-cat {
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 0.85rem 1rem;
}
.cookie-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}
.cookie-cat-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.cookie-cat-desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 0.35rem;
}
.cookie-cat-legal {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin: 0;
    font-style: italic;
}

/* Toggle switch */
.cookie-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}
.cookie-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.cookie-toggle-slider {
    position: relative;
    width: 2.25rem;
    height: 1.25rem;
    background: rgba(132, 125, 114, 0.35);
    border-radius: 999px;
    transition: background 150ms var(--ease);
    flex: 0 0 auto;
}
.cookie-toggle-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: var(--bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 150ms var(--ease);
}
.cookie-toggle input:checked + .cookie-toggle-slider { background: var(--terra); }
.cookie-toggle input:checked + .cookie-toggle-slider::after { transform: translateX(1rem); }
.cookie-toggle input:focus-visible + .cookie-toggle-slider {
    outline: 2px solid var(--terra-deep);
    outline-offset: 2px;
}
.cookie-toggle.is-locked .cookie-toggle-slider { background: var(--terra-deep); opacity: 0.6; }
.cookie-toggle.is-locked { cursor: not-allowed; }
.cookie-toggle-label {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    min-width: 4.25rem;
    text-align: right;
}

.cookie-modal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid rgba(132, 125, 114, 0.2);
    padding-top: var(--s-3);
}
.cookie-modal-foot .cookie-btn-ghost {
    color: var(--ink-2);
    border-color: rgba(132, 125, 114, 0.4);
}
.cookie-modal-foot .cookie-btn-ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--ink-soft);
}

body.cookie-modal-open { overflow: hidden; }

/* Reduced-motion: no slides */
@media (prefers-reduced-motion: reduce) {
    .cookie-banner,
    .cookie-modal { transition: none; }
}

/* Footer "Nastavení cookies" link styling (matches other footer ul items) */
.footer-cookies-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--bg);
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.85;
}
.footer-cookies-btn:hover { opacity: 1; color: var(--terra-bg); }