/* Parcelník. One loud object, the cadastre demo; everything else is quiet paper and ink.
   Colours come from the app: forest green accent (Theme.swift primarySolid #275243) and the
   paper of a cadastral sheet. */

@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; 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+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #f6f4ee;
  --surface: #ffffff;
  --ink: #18201d;
  --muted: #5b6661;
  --line: #dcd8cc;
  --accent: #275243;
  --accent-soft: rgba(39, 82, 67, 0.16);
  --accent-tint: #e7efe9;
  --on-accent: #ffffff;
  --measure: #c2410c;
  --m-bg: #f3f1ea;
  --m-line: #8d8572;
  --m-g: #e2eedb;
  --m-v: #eaedcc;
  --m-b: #ece3d5;
  --m-o: #f4f2ec;
  --m-w: #d4e5ef;
  --m-a: #f3ead0;
  --m-plain: #f7f5ef;
  --m-house: #cbbfae;
  --m-house-line: #77695a;
  --m-label: #34332c;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1412; --surface: #171e1b; --ink: #e9efec; --muted: #9fb0a8; --line: #29342f;
    --accent: #94d1b8; --accent-soft: rgba(148, 209, 184, 0.22); --accent-tint: #1b2a24; --on-accent: #0b1f17;
    --measure: #fb923c;
    --m-bg: #111715; --m-line: #66746c; --m-g: #1e3527; --m-v: #1d2418; --m-b: #211e19; --m-o: #141a17;
    --m-w: #13222b; --m-a: #232014; --m-plain: #141a17; --m-house: #39342e; --m-house-line: #8a8073; --m-label: #cdd6d1;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1412; --surface: #171e1b; --ink: #e9efec; --muted: #9fb0a8; --line: #29342f;
  --accent: #94d1b8; --accent-soft: rgba(148, 209, 184, 0.22); --accent-tint: #1b2a24; --on-accent: #0b1f17;
  --measure: #fb923c;
  --m-bg: #111715; --m-line: #66746c; --m-g: #1e3527; --m-v: #1d2418; --m-b: #211e19; --m-o: #141a17;
  --m-w: #13222b; --m-a: #232014; --m-plain: #141a17; --m-house: #39342e; --m-house-line: #8a8073; --m-label: #cdd6d1;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-stretch: 88%; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 760; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 720; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 780px; }
.center { text-align: center; }

/* Platform: html[data-platform] picks the screenshots and the first store. */
html[data-platform="android"] .only-ios, html[data-platform="ios"] .only-android { display: none; }
html[data-platform="android"] .store--play { order: -1; }

/* Header */
.top { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.top__inner { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 1.15rem var(--display); }
.brand img { border-radius: 22.5%; }
.brand--quiet { margin-bottom: 14px; }
.top__nav { display: flex; gap: 20px; font-size: .95rem; }
.top__nav a { color: var(--muted); text-decoration: none; }
.top__nav a:hover { color: var(--ink); }

/* Hero */
.hero { padding: clamp(32px, 6vw, 72px) 0 clamp(32px, 5vw, 56px); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 6vw, 80px); align-items: center; }
.lead { font-size: 1.18rem; color: var(--muted); max-width: 32em; }
.note { color: var(--muted); font-size: .95rem; margin: 14px 0 0; }
.hero__phone .phone { transform: rotate(2deg); }

.stores { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 24px; }
.center .stores { justify-content: center; }
.store { display: flex; text-decoration: none; }
.store img { height: 45px; width: auto; }

/* Phone frame */
.phone { margin: 0; border-radius: 38px; padding: 8px; background: #101312; box-shadow: 0 0 0 1px #2c3330 inset, 0 18px 40px rgba(16, 26, 22, .18); }
.phone img { border-radius: 31px; width: 100%; }

/* Cadastre demo */
.demo { padding: clamp(36px, 6vw, 64px) 0; border-top: 1px solid var(--line); background: var(--surface); }
.demo__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 32px; margin-bottom: 18px; }
.demo__head h2 { margin: 0; }
.demo__head p { margin: 0; color: var(--muted); max-width: 36em; }

.map { margin: 0; }
.map__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--paper); }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--line); }
.seg button, .platform button { border: 0; background: transparent; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--muted); }
.seg button[aria-pressed="true"], .platform button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.map__search { display: flex; gap: 6px; }
.map__search input { width: 150px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.map__search button, .card__actions button { border: 0; border-radius: 9px; padding: 7px 14px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .92rem; cursor: pointer; }
.map__toggles { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-left: auto; font-size: .92rem; color: var(--muted); }
.map__toggles label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.map__toggles input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

.map__stage { position: relative; border: 1px solid var(--line); border-radius: 0 0 18px 18px; overflow: hidden; background: var(--m-bg); }
.map__svg { display: block; width: 100%; aspect-ratio: 453 / 323; max-height: 76vh; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; --fs: 4.6px; --px: .4px; }
.is-panning .map__svg { cursor: grabbing; }
.map[data-mode="measure"] .map__svg { cursor: crosshair; }
.map__parcels path { stroke: var(--m-line); stroke-width: calc(var(--px) * 1); stroke-linejoin: round; fill: var(--m-plain); transition: fill .15s; }
.map[data-kinds] .k-g { fill: var(--m-g); }
.map[data-kinds] .k-v { fill: var(--m-v); }
.map[data-kinds] .k-b { fill: var(--m-b); }
.map[data-kinds] .k-o { fill: var(--m-o); }
.map[data-kinds] .k-w { fill: var(--m-w); }
.map[data-kinds] .k-a { fill: var(--m-a); }
.map[data-mode="select"] .map__parcels path:hover { fill: var(--accent-soft); }
.map__parcels path[aria-current], .map[data-kinds] .map__parcels path[aria-current] { fill: var(--accent-soft); stroke: var(--accent); stroke-width: calc(var(--px) * 3); }
.map__houses path { fill: var(--m-house); stroke: var(--m-house-line); stroke-width: calc(var(--px) * .8); pointer-events: none; }
.map:not([data-houses]) .map__houses { display: none; }
.map__labels text { font: 600 var(--fs) var(--body); fill: var(--m-label); text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: var(--m-bg); stroke-width: calc(var(--px) * 3); stroke-opacity: .75; }
.map__labels text.small { display: none; }
.map.is-live .map__labels text.small { display: inline; }
.map__labels text.off, .map.is-live .map__labels text.off { display: none; }
.map:not([data-numbers]) .map__labels { display: none; }
.map__measure { pointer-events: none; }
.m-line { fill: none; stroke: var(--measure); stroke-width: calc(var(--px) * 3); stroke-linecap: round; stroke-linejoin: round; }
.m-fill { fill: color-mix(in srgb, var(--measure) 18%, transparent); stroke: var(--measure); stroke-width: calc(var(--px) * 1.5); stroke-dasharray: calc(var(--px) * 6) calc(var(--px) * 5); }
.m-pt { r: calc(var(--px) * 6); fill: var(--surface); stroke: var(--measure); stroke-width: calc(var(--px) * 2.5); }

.map__zoom { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 4px 14px rgba(20, 30, 25, .12); }
.map__zoom button { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.map__zoom button + button { border-top: 1px solid var(--line); }
.map__zoom svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map:not(.is-live) .map__zoom { display: none; }
.map__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--paper); font-size: .85rem; white-space: nowrap; pointer-events: none; }
.map__msg { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: .9rem; }

.card { position: absolute; right: 14px; top: 14px; width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 10px; box-shadow: 0 10px 30px rgba(20, 30, 25, .16); }
.card__title { font: 700 1.25rem var(--display); margin: 0; }
.card__sub { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }
.card dl { margin: 0; }
.card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.card dt { color: var(--muted); }
.card dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.card__measure { display: none; }
.map[data-mode="measure"] .card__measure { display: block; }
.map[data-mode="measure"] .card__parcel { display: none; }
.card__actions { display: flex; gap: 8px; padding: 8px 0 4px; }
.card__actions button { background: var(--accent-tint); color: var(--accent); }

.map figcaption { margin-top: 12px; font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--m-line); display: inline-block; }
.sw.k-g { background: var(--m-g); } .sw.k-v { background: var(--m-v); } .sw.k-b { background: var(--m-b); }
.sw.k-o { background: var(--m-o); } .sw.k-a { background: var(--m-a); } .sw.k-w { background: var(--m-w); }
.map:not([data-kinds]) .legend { visibility: hidden; }

/* Sections */
.section { padding: clamp(36px, 6vw, 72px) 0; border-top: 1px solid var(--line); }
.section--quiet { background: var(--surface); }
.section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 8px; }
.section__head h2 { margin: 0; }

.platform { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--line); font-size: .92rem; }

.shots { list-style: none; margin: 24px 0 0; padding: 4px var(--gutter) 16px; display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 270px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shots > li { scroll-snap-align: start; }
.shots .phone { border-radius: 32px; padding: 7px; margin-bottom: 16px; }
.shots .phone img { border-radius: 26px; }
.shots h3 { font-size: 1.2rem; margin-bottom: .25em; }
.shots p { margin: 0; font-size: .98rem; }
@media (min-width: 1100px) {
  .shots { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: var(--wrap); margin-left: auto; margin-right: auto; overflow: visible; }
}

.layers { display: grid; grid-template-columns: 11rem minmax(0, 1fr); margin: 20px 0 24px; }
.layers dt, .layers dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.layers dt { font-weight: 650; padding-right: 20px; }
.fine { color: var(--muted); font-size: .95rem; max-width: 46em; }

.table-wrap { overflow-x: auto; margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
thead th { color: var(--muted); font-weight: 600; font-size: .88rem; }

.guides { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.guides li { display: flex; flex-direction: column; padding: 14px 0; border-bottom: 1px solid var(--line); }
.guides a { font: 700 1.15rem var(--display); text-decoration: none; }
.guides span { color: var(--muted); }

.faq { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 650; font-size: 1.05rem; }
.faq p { margin: 10px 0 0; color: var(--muted); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--muted); font-size: .9rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.foot__links a { color: var(--ink); text-decoration: none; }
.foot p { margin: 0 0 4px; }

/* Articles: guides and legal pages */
.article { padding: clamp(28px, 6vw, 60px) 0 64px; }
.article h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
.article h2 { font-size: 1.5rem; margin-top: 1.6em; }
.article h3 { margin-top: 1.2em; }
.article section { margin: 0; }
.article aside { border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; color: var(--muted); margin: 1.5em 0; }
.article .phone { max-width: 250px; margin: 1.5em auto; }
.article aside.cta { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; background: var(--surface); color: var(--ink); margin-top: 2.5em; }

@media (max-width: 760px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) 150px; align-items: start; gap: 20px; }
  .hero__phone .phone { border-radius: 24px; padding: 5px; }
  .hero__phone .phone img { border-radius: 20px; }
  .top__wide { display: none; }
  .map__toggles { margin-left: 0; }
  .map__svg { aspect-ratio: 1 / 1; max-height: 70vh; }
  .card { position: static; width: auto; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__phone { display: none; }
  .map__search { flex: 1 1 140px; min-width: 0; }
  .seg button { padding: 6px 10px; }
  .map__search input { padding: 7px 8px; }
  .map__search button { padding: 7px 11px; }
  .map__search input { flex: 1; width: auto; min-width: 0; }
  .map__toggles { font-size: .88rem; }
  .layers { grid-template-columns: minmax(0, 1fr); }
  .layers dd { border-top: 0; padding-top: 0; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) { .map__parcels path { transition: none; } }