/* ============================================================
   STYL KRAJINA
   Česká krajina z plochých vrstev jako sítotiskový plakát: obloha, vzdálené
   kopce, pole s řepkou a les s vrstevnicemi. Přes oblohu letí letadlo
   „létající pořizovatelky“. Tmavé sekce začínají hřebenem kopce, takže
   stránka směrem dolů sestupuje do krajiny. Čtyři ploché barvy, žádné přechody.
   ============================================================ */
:root {
    --p-bg: #e3eeeb;            /* obloha */
    --p-surface: #d2e2dd;
    --p-ink: #13281f;
    --p-muted: #3c5549;
    --p-accent: #e9c43c;        /* řepka */
    --p-accent-ink: #13281f;
    --p-field: #22402f;         /* les */
    --p-field-surface: #2d5240;
    --p-field-ink: #eef4ea;
    --p-field-muted: #bcd0c2;
    --p-field-accent: #e9c43c;
    --p-field-accent-ink: #13281f;
    --k-far: #8fb0b2;
    --k-mid: #5e8b62;
    --k-f1: #e9c43c; --k-f2: #8fb35c; --k-f3: #b88b55;
    --k-near: #2f5a3e;
    --k-lines: #24473a;
    --k-green: #4b7547;
    --k-route: #13281f;
    --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --display: "Big Shoulders Display", "Figtree", system-ui, sans-serif;
    --r: 0px;
    --topo-o: 0;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --p-bg: #0f1c22; --p-surface: #182a31; --p-ink: #e6efe9; --p-muted: #a8bcb2;
        --p-field: #0b1612; --p-field-surface: #15261e; --p-field-muted: #a8bcb2;
        --k-far: #1f3640; --k-mid: #1d3a2b; --k-f1: #6b5a1c; --k-f2: #3b5530; --k-f3: #4e3d28; --k-near: #12271c; --k-lines: #24443a; --k-green: #1d3a2b; --k-route: #e6efe9;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --p-bg: #0f1c22; --p-surface: #182a31; --p-ink: #e6efe9; --p-muted: #a8bcb2;
    --p-field: #0b1612; --p-field-surface: #15261e; --p-field-muted: #a8bcb2;
    --k-far: #1f3640; --k-mid: #1d3a2b; --k-f1: #6b5a1c; --k-f2: #3b5530; --k-f3: #4e3d28; --k-near: #12271c; --k-lines: #24443a; --k-green: #1d3a2b; --k-route: #e6efe9;
    color-scheme: dark;
}

body { font-size: 18px; line-height: 1.55; }
h1, h2, .h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: 1.04; }
h2, .h2 { font-size: clamp(2.8rem, 5.6vw, 4.8rem); }
h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -.015em; }

/* ---- hlavička na obloze ---- */
.site-header { background: var(--bg); }
.site-header.scrolled { background: var(--surface); }
.brand-mark rect { fill: var(--k-near); }
.brand-mark text { fill: var(--p-accent); font-family: var(--display); font-size: 19px; font-weight: 800; }
#nav-menu a { font-weight: 600; }
#nav-menu .btn-contact { color: var(--accent-ink); }

/* ---- tlačítka: řepka ---- */
.btn, .btn-submit { font-weight: 700; padding: 1.05em 1.6em; }
.btn:hover, .btn-submit:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }

/* ---- úvod jako plakát: nahoře krajina s letadlem, dole les s textem, výkres na rozhraní ---- */
.hero {
    --scape-h: clamp(300px, 50vh, 470px);
    --bg: var(--k-near); --surface: color-mix(in srgb, var(--k-near) 75%, #000); --ink: #eef4ea; --muted: #c8d8cc; --accent: var(--p-accent); --accent-ink: var(--p-accent-ink);
    background: var(--bg); color: var(--ink); min-height: 0;
    padding: var(--scape-h) 0 clamp(56px, 7vw, 96px);
}
.hero-grid { position: relative; z-index: 2; align-items: start; grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr); padding-top: clamp(28px, 3vw, 44px); }
.hero-title { font-family: var(--display); font-size: clamp(2.8rem, 4.9vw, 4.7rem); line-height: 1.04; letter-spacing: .005em; text-transform: uppercase; }
.hero .lead { font-size: 1.12rem; max-width: 56ch; }
.hero .lead strong { color: #ffffff; }
.trust { margin-top: 28px; }
.trust b { font-family: var(--sans); font-size: 1.1rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: #ffffff; }
.hero-visual { margin-top: calc(-1 * clamp(190px, 30vh, 300px)); }
.plan { max-width: 430px; outline: 10px solid #fbf8ee; transform: rotate(1.5deg); } /* list výkresu postavený do krajiny */
.plan-steps { margin-top: 26px; max-width: none; flex-wrap: nowrap; }
.plan-steps button { padding: .65em .8em; font-size: .875rem; white-space: nowrap; }
.plan-steps button { background: rgba(255, 255, 255, .12); color: #eef4ea; }
.plan-steps button:hover { background: rgba(255, 255, 255, .2); }
.plan-steps button.is-on { background: var(--p-accent); color: var(--p-accent-ink); }
.hero-portrait { background: #fbf8ee; color: #13281f; }
.hero-portrait span { color: #3c5549; }

.scape { display: block; position: absolute; left: 0; right: 0; top: var(--hdr); height: calc(var(--scape-h) - var(--hdr)); z-index: 1; pointer-events: none; background: var(--p-bg); overflow: hidden; }
.scape-svg { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 84%; }
.p-far { fill: var(--k-far); } .p-mid { fill: var(--k-mid); }
.f1 { fill: var(--k-f1); } .f2 { fill: var(--k-f2); } .f3 { fill: var(--k-f3); }
.p-near { fill: var(--k-near); }
.p-lines { fill: none; stroke: var(--k-lines); stroke-width: 1.6; }

/* trasa a letadlo – jediný velký pohyb stránky, jednou po načtení */
.sky-route { position: absolute; left: 0; top: 16%; width: 100%; height: 34%; overflow: visible; }
.sky-route path { fill: none; stroke: var(--k-route); stroke-width: 1.6; stroke-dasharray: .006 .008; opacity: .5; vector-effect: non-scaling-stroke; }
.sky-plane { position: absolute; z-index: 3; left: 106%; top: 22%; width: 46px; height: 40px; margin: -20px 0 0 -23px; }
.sky-plane svg { width: 100%; height: 100%; fill: var(--k-route); }
@media (prefers-reduced-motion: no-preference) {
    .sky-route path { animation: trasa 7s cubic-bezier(.45, .05, .35, 1) .6s both; }
    .sky-plane { animation: let 7s cubic-bezier(.45, .05, .35, 1) .6s both; }
    @keyframes trasa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    /* body Bézierovy křivky trasy (stejné jako v SVG) převedené na procenta krajiny */
    @keyframes let {
        0%   { left: -5%;    top: 44%;   transform: rotate(-12deg); }
        25%  { left: 14.7%;  top: 38.3%; transform: rotate(-14deg); }
        50%  { left: 38%;    top: 32%;   transform: rotate(-11deg); }
        75%  { left: 67.6%;  top: 26.2%; transform: rotate(-7deg); }
        100% { left: 106%;   top: 22%;   transform: rotate(-3deg); }
    }
}
/* bez animace: letadlo stojí na trase nad kopci, trasa je celá */
@media (prefers-reduced-motion: reduce) { .sky-plane { left: 67.6%; top: 26.2%; transform: rotate(-7deg); } }

/* ---- obce: popisek plakátu pod krajinou ---- */
.towns { --towns-ink: #13281f; background: var(--k-f1); color: var(--towns-ink); padding: 22px 0 78px; font-size: 1rem; } /* spodek pásu nese hřeben další sekce */
.towns a { color: var(--towns-ink); }
:root[data-theme="dark"] .towns { --towns-ink: #f4efd9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .towns { --towns-ink: #f4efd9; } }

/* ---- hřebeny: tmavé a zelené sekce začínají kopcem ---- */
#proc, #postup, #zpetna-vazba, #kontakt, .site-footer { position: relative; }
#proc::before, #postup::before, #zpetna-vazba::before, #kontakt::before, .site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -56px; height: 58px; background: var(--ridge, var(--bg)); pointer-events: none;
    -webkit-mask: var(--hreben) center bottom / 100% 100% no-repeat; mask: var(--hreben) center bottom / 100% 100% no-repeat;
}
#postup::before { transform: scaleX(-1); }
#zpetna-vazba::before { transform: scaleX(-1); height: 40px; top: -38px; }
.proc, .mapsec { overflow: visible; }

/* ---- proč: zelený kopec ---- */
#proc { --bg: var(--k-green); --surface: color-mix(in srgb, var(--k-green) 80%, #000); --ink: #ffffff; --muted: #e1ecdc; --accent: var(--p-accent); --accent-ink: var(--p-accent-ink); background: var(--bg); color: var(--ink); }
.values { gap: clamp(28px, 4vw, 48px) clamp(32px, 6vw, 96px); }
.value h3 { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.04; }

/* ---- služby na obloze ---- */
.svc-tab { background: var(--surface); }
.svc-tab .t { font-weight: 700; }
.svc-tab.is-on { background: var(--p-field); color: var(--p-field-ink); }
.svc-panel { background: #fbf8ee; color: #13281f; --ink: #13281f; --muted: #3c5549; }
:root[data-theme="dark"] .svc-panel { background: var(--p-surface); color: var(--p-ink); --ink: var(--p-ink); --muted: var(--p-muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .svc-panel { background: var(--p-surface); color: var(--p-ink); --ink: var(--p-ink); --muted: var(--p-muted); } }
.svc-title { font-family: var(--display); text-transform: uppercase; font-weight: 800; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1.04; }

/* ---- postup v lese ---- */
.rail-line { background: var(--p-field-surface); }
.rail-plane { width: 40px; height: 34px; }
.pd h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

/* ---- o mně, reference ---- */
.portrait { outline: 10px solid #fbf8ee; outline-offset: -10px; }
.path b { font-family: var(--display); font-size: 2.6rem; font-weight: 800; }
.map-stage { background: #fbf8ee; --bg: #fbf8ee; --surface: #dcebc9; --ink: #13281f; --muted: #3c5549; --accent: #2f5a3e; --accent-ink: #fbf8ee; }
:root[data-theme="dark"] .map-stage { background: var(--p-surface); --bg: var(--p-surface); --surface: #233a2c; --ink: var(--p-ink); --muted: var(--p-muted); --accent: var(--p-accent); --accent-ink: #13281f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-stage { background: var(--p-surface); --bg: var(--p-surface); --surface: #233a2c; --ink: var(--p-ink); --muted: var(--p-muted); --accent: var(--p-accent); --accent-ink: #13281f; } }
.chip.is-on { background: var(--p-field); color: var(--p-field-ink); }
.proj-b h3 { font-size: 1.2rem; }

/* ---- zpětná vazba: žluté pole řepky ---- */
#zpetna-vazba { --bg: var(--k-f1); --surface: color-mix(in srgb, var(--k-f1) 70%, #ffffff); --ink: #13281f; --muted: #3a3a1c; --accent: #13281f; --accent-ink: var(--k-f1); background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] #zpetna-vazba { --ink: #f4efd9; --muted: #e1d9b5; --surface: color-mix(in srgb, var(--k-f1) 70%, #000); --accent: #f4efd9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #zpetna-vazba { --ink: #f4efd9; --muted: #e1d9b5; --surface: color-mix(in srgb, var(--k-f1) 70%, #000); --accent: #f4efd9; } }
.feedback-grid h2 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.bigquote blockquote p { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; }

/* ---- dotazy, kontakt, patička ---- */
.qa summary { font-weight: 700; }
.contact-form-container { --bg: #fbf8ee; --surface: #eef0e4; --ink: #13281f; --muted: #3c5549; --accent: #2f5a3e; --accent-ink: #fbf8ee; }
:root[data-theme="dark"] .contact-form-container { --bg: var(--p-surface); --surface: #22383f; --ink: var(--p-ink); --muted: var(--p-muted); --accent: var(--p-accent); --accent-ink: #13281f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contact-form-container { --bg: var(--p-surface); --surface: #22383f; --ink: var(--p-ink); --muted: var(--p-muted); --accent: var(--p-accent); --accent-ink: #13281f; } }
.site-footer { --bg: #183224; background: var(--bg); }
:root[data-theme="dark"] .site-footer { --bg: #070e0b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer { --bg: #070e0b; } }
.foot-cta h2 { font-size: clamp(3rem, 7vw, 6rem); }
.fb-name .foot-name { font-family: var(--display); font-size: 1.8rem; font-weight: 800; text-transform: uppercase; }

/* ---- blog a stránky ---- */
.article-head h1, .blog-intro h1 { text-transform: none; font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.big404 { font-family: var(--display); }

/* ---- telefon ---- */
@media (max-width: 960px) {
    .hero { --scape-h: 280px; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { margin-top: 12px; }
    .plan { transform: none; }
}
@media (max-width: 760px) {
    .hero-title { font-size: 2.7rem; }
    .plan-steps { flex-wrap: wrap; }
    .hero { --scape-h: 240px; }
    #proc::before, #postup::before, #zpetna-vazba::before, #kontakt::before, .site-footer::before { height: 34px; top: -33px; }
    .towns { padding-bottom: 54px; }
}

/* ---- odkazy: žlutá jen na tmavé zelené, na světlé obloze tmavě zelená (kontrast) ---- */
:root { --k-link: #24503a; }
.hero, .on-dark, #proc, .site-footer { --k-link: var(--p-accent); }
:root[data-theme="dark"] { --k-link: #e9c43c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --k-link: #e9c43c; } }
#zpetna-vazba { --k-link: #13281f; }
:root[data-theme="dark"] #zpetna-vazba { --k-link: #f4efd9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #zpetna-vazba { --k-link: #f4efd9; } }
a, .card-more, .ref-open, .svc-more a, .head .more { color: var(--k-link); }
.svc-panel { --k-link: #24503a; }
.map-card a, .contact-form-container a { color: var(--accent); }

/* ---- vrstevnice i pod úvodem: zelený kopec, les a patička nesou izolinie terénu ---- */
#proc::after, #postup::after, #kontakt::after, .site-footer::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #000000; opacity: .14;
    -webkit-mask: var(--topo) center / cover no-repeat; mask: var(--topo) center / cover no-repeat;
}
#postup::after, #kontakt::after { background: #ffffff; opacity: .05; }
.site-footer::after { background: #ffffff; opacity: .06; -webkit-mask-position: left bottom; mask-position: left bottom; }
#proc > .wrap, #postup > .wrap, #kontakt > .wrap, .site-footer > .wrap { position: relative; z-index: 1; }