/* Panelario — landing.css | VZHLED ÚVODNÍ STRÁNKY (nahradil `index.css` 2026-09-03)
   ⚓ Owner 2026-09-03: „tento design aplikuj jako default na originální stránky" — návrh, který
     do té doby žil v `APP_WEB/alt/`, je odteď VÝCHOZÍ vzhled `index.html`. ⚠️ Ta složka byla
     TÝŽ DEN SMAZÁNA: se vzhledem v produkci by z ní byl druhý zdroj pravdy, který se rozejde
     při první úpravě. Historie je v gitu (`git show <commit>:APP_WEB/alt/index.html`).
   ⚓ **NAVAZUJE na `tokens.css` + `nav.css`, ⛔ nekopíruje je.** Tokeny, `.btn*`, `.csel*`, patička
     a celá lišta zůstávají tam; tenhle soubor přidává JEN vzhled stránky a to, co musí přebít.
     ⚠️ Proto se linkuje AŽ ZA nimi.
   ⚓ **Lištu přebíjí POUZE pod `body.landing`** — `nav.css` sdílí galerie, mapa výroby, účet i
     právní stránky; kdyby se fixní lišta psala do něj, změnil by se vzhled všech.
   ⚓ Nadpisy jdou v Cormorantu (týž font, jakým je psaná značka v liště, `fonts.css` ho už tahá) —
     to je podpis vzhledu; ⛔ zbytek textů zůstává v systémovém sans jako celý web.
   ⚓ Světlá sekce „jak to funguje": `--paper`/`--paper-deep` = ZMĚŘENÉ okraje fotky (#e6e6e6 → #cccccc),
     aby fotka do plochy přešla bez švu; zlatá je na ní ztmavená na `#5e4618` (kontrast 7,1 : 1 —
     značková `#d2ac5c` má na papíru 1,7 a je nečitelná).
   ⚓ Web kánon (root CLAUDE.md §2): žádné zlaté obrysy, stav nese VÝPLŇ — idle šedá → hover
     `--bg-card-hover` → active `--accent-dim` + zlatý text. */

:root{
  --paper:#e6e6e6;--paper-deep:#cccccc;--ink:#171614;--ink-soft:#4a4744;--gold-ink:#5e4618;
  --gutter:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ⚓ **ODSAZENÍ KOTVY JDE ZE ZMĚŘENÉ LIŠTY, ⛔ ne z odhadu** (owner 2026-09-07 „kliknu na
   get panelario, sjede to dolů, ale není to zarovnané"). ⚠️ Do té doby tu stálo natvrdo
   `70px` — JEDINÝ výskyt `scroll-padding-top` v celém repu, bez media query, kdežto lišta
   výšku MĚNÍ. ZMĚŘENO na `#pricing`:
     · ≥ 1221 px → lišta 64 px (po scrollu 56) → sekce dosedla na 70, mezera 6–14 px, OK
     · **641–1220 px → lišta 98 px** (zalomí se na dva řádky, `flex-wrap` níž) → sekce pořád
       dosedla na 70, takže **28 px sekce zůstalo SCHOVANÝCH POD LIŠTOU**
     · ≤ 640 px → lišta 48 px → mezera 22 px
   ⚓ `--nav-h` publikuje `landing.js` z `getBoundingClientRect()` a přeměřuje při každé změně
   rozměru lišty (zalomení, `.scrolled`, delší popisky po přepnutí jazyka). ⛔ Nekopírovat sem
   čísla z media query — rozešla by se s obsahem lišty. Záložních 64 px = stav ≥ 1221 px, aby
   stránka bez `landing.js` skončila tam, kde byla dosud. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h,64px) + 8px)}
body.landing{overflow-x:hidden}
/* ⚠️ **RESET STRÁNKY NESMÍ SÁHNOUT NA SDÍLENÝ CHROME** — proto `main`/`footer`, ⛔ ne holé `img`
   (změřeno 2026-09-03, owner „proč jsou vlajky nad?"). `body.landing img` má specificitu (0,1,2)
   a přebíjelo tím `.locale-flag` (0,1,0) v `nav.css`: z vlajky v přepínači jazyka se stal BLOK
   a kód země spadl pod ni. ⚓ Zvyšovat specificitu u vlajky by ten souboj jen odsunulo o kolo dál —
   správně reset patří obsahu stránky, lišta je společná všem stránkám a vlastní si ji `nav.css`. */
body.landing main img,body.landing footer img{display:block;max-width:100%}

/* ── Typografie stránky ── */
/* Rodinu a rez drzi `type.css` (sdilene); tady jen VELIKOSTI a barva uvodni stranky. */
body.landing h1,body.landing h2,body.landing h3{line-height:.95;color:var(--text-primary)}
body.landing h2{font-size:clamp(42px,6vw,96px);margin-bottom:12px}
body.landing h3{font-size:clamp(26px,2.4vw,36px);line-height:1.05}
.sec-lead{font-size:13px;color:var(--text-secondary);max-width:480px;line-height:1.7}
body.landing section{padding:clamp(72px,10vw,150px) var(--gutter)}
/* ⚓ **KOTVA DOSEDÁ NA OBSAH, ⛔ ne na horní `padding` sekce.** ⚠️ ZMĚŘENO na 1280×800 PŘED
   opravou: sekce dosedla správně (70 px), ale její vlastní horní `padding` je `10vw` = 128 px,
   takže pod lištou zbyl **142 px prázdna**, popisek začal až na 198 px a karty plánů běžely
   473→908 px, tedy **108 px pod dolním okrajem okna** — dojel jsi na nadpis, ⛔ ne na plány,
   kvůli kterým jsi na „Get Panelario" klikl.
   ⚓ Trim je TENTÝŽ výraz jako ten `padding` o řádek výš (⛔ ne opsané číslo — `clamp` se mění
   se šířkou okna), takže obsah sekce dosedne 32 px pod lištu při KAŽDÉ šířce. Volný scroll
   sekce se nemění, `scroll-margin` platí VÝHRADNĚ pro skok na kotvu.
   ⚓ Platí pro všech pět kotev lišty (`#work` `#features` `#how` `#pricing` `#contact`),
   ⛔ ne jen pro nahlášenou — čtyři sekce zarovnané jinak než pátá je ta samá vada. */
body.landing section[id]{scroll-margin-top:calc(24px - clamp(72px,10vw,150px))}
.sec-head{margin-bottom:48px}
.sec-head.center{text-align:center}
.sec-head.center .sec-lead{margin:0 auto}

/* Chipy — `components.css` na webu nelinkuje žádná stránka, takže hodnoty odtud stojí tady. */
.chip-list{display:flex;flex-wrap:wrap;gap:5px;list-style:none}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--bg-control);border:none;border-radius:var(--radius-sm);font-size:10px;color:var(--text-secondary)}
.opt-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;background:var(--bg-control);border:none;border-radius:var(--radius-sm);font-size:10px;color:var(--text-secondary);cursor:pointer;transition:all .15s;user-select:none;font-family:inherit;box-shadow:var(--btn-shadow)}
.opt-chip:hover{background:var(--bg-card-hover);color:var(--text-primary);box-shadow:none}
.opt-chip.active{background:var(--accent-dim);color:var(--accent-active);box-shadow:none}

/* ── Lišta: na úvodní stránce PLOVE nad fotkou a po odscrollování ztmavne ── */
/* Pruhlednost uz nese `nav.css` pro VSECHNY stranky (2026-09-03) — tady zustava jen to, cim se
   uvodni stranka lisi: PEVNA lista pres celou sirku, ktera po odscrollovani ztmavne. */
body.landing nav{position:fixed;top:0;left:0;right:0;border-radius:0;padding:12px var(--gutter);gap:4px;transition:background .3s,padding .3s,box-shadow .3s;z-index:100}
body.landing nav.scrolled{background:rgba(23,22,20,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:8px var(--gutter);box-shadow:0 1px 0 rgba(242,239,233,.06)}
/* Odkazy nemizí, jen se pod 1220 px zalomí POD lištu (změřeno: řada s ikonami je 638 px široká
   a pravá skupina začíná 280 px od okraje, takže by se od ~1200 px překrývaly). */
@media(max-width:1220px) and (min-width:641px){
  body.landing nav{flex-wrap:wrap}
  body.landing nav .nav-links{position:static;transform:none;order:10;flex:1 0 100%;justify-content:center;padding-top:6px}
}

/* ── HERO ── */
body.landing .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;text-align:left;padding:0;overflow:hidden;isolation:isolate}
body.landing .hero::before{content:none}
.hero-media{position:absolute;inset:0;z-index:-2;display:block}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:38% 50%;transform:translate3d(0,var(--py,0px),0) scale(1.08);will-change:transform}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,rgba(23,22,20,.95) 0%,rgba(23,22,20,.6) 38%,rgba(23,22,20,.18) 72%,rgba(23,22,20,.4) 100%),
  linear-gradient(to right,rgba(23,22,20,.5),transparent 60%)}
.hero-body{padding:150px var(--gutter) 72px;max-width:1500px}
/* ⚓ SAZBA DISPLAY STUPNĚ: v 196 px se text chová jinak než v 16 px.
   ⚓ `letter-spacing:-.025em` — Cormorant je kreslený pro velké stupně a ve výchozím prostrkání
     se ve 196 px rozpadá na jednotlivá písmena; stažení drží slovo pohromadě, ⛔ nezhušťuje text.
   ⚓ `-.055em` zleva = OPTICKÉ ZAROVNÁNÍ: „W" má velký boční prostor a bez vytažení by titulek
     vypadal odsazený proti odstavci pod ním (⚠️ dřív -.03em, měřeno na W v 196 px).
   ⚓ `font-synthesis:none` — kdyby řez chyběl, ⛔ AŤ HO PROHLÍŽEČ NEFALŠUJE: radši viditelně
     stojatý text než roman nakloněný o pár stupňů. Pravá kurziva je od 2026-09-03 v `fonts.css`.
   ⚓ `font-kerning:normal` + ligatury: Cormorant nese párování, které ve 196 px rozhoduje o mezerách. */
body.landing .hero h1{font-size:clamp(68px,12.5vw,196px);line-height:.88;margin:0 0 24px -.055em;max-width:none;color:var(--text-primary);letter-spacing:-.025em;font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1;font-synthesis:none;text-rendering:optimizeLegibility}
body.landing .hero h1 em{font-style:italic;color:var(--accent-active)}
body.landing .hero p.hero-lead{font-size:14px;color:var(--text-secondary);max-width:480px;margin-bottom:20px;line-height:1.7}
.hero-cta{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:640px){.hero-body{padding-top:120px}}

/* ── WORK: vodorovný pás prací ── */
.work{padding-right:0 !important}
.work .sec-head{padding-right:var(--gutter)}
/* Scrollbar pásu = KÁNON scrollbaru z UI (showcase §scrollbar / `panel-scroll` v appce):
   `scrollbar-width:thin` vyhrává v Chromiu, webkit pravidla drží barvu a rádius. */
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 16px 0;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.strip::-webkit-scrollbar{height:3px}
.strip::-webkit-scrollbar-track{background:transparent}
.strip::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.strip::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}
.strip.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.strip figure{flex:0 0 clamp(240px,26vw,400px);aspect-ratio:9/16;position:relative;border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;background:var(--bg-card)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);-webkit-user-drag:none;pointer-events:none}
.strip figure:hover img{transform:scale(1.05)}
.strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(transparent,rgba(23,22,20,.88));display:flex;flex-direction:column;gap:4px}
.strip figcaption b{font-size:12px;font-weight:600;color:var(--text-primary);line-height:1.3}
.strip figcaption span{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}

/* ── FEATURES: bento ── */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(250px,auto);gap:12px}
.tile{position:relative;background:var(--bg-card);border-radius:var(--radius);padding:24px 20px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;transition:background .2s}
.tile:hover{background:var(--bg-card-hover)}
.tile h3{margin-bottom:6px}
.tile p{font-size:11px;color:var(--text-secondary);line-height:1.6;max-width:46ch}
.tile-body{position:relative;display:flex;flex-direction:column}
.tile-body>p:last-child{margin-top:4px}
/* Specificita (0,2,0) musí přebít `.tile p` — jinak výpis vyjde 11 px místo 9,5 (změřeno). */
.tile .feat-detail{font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted);line-height:1.7;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);max-width:none}
.tile-ico{width:32px;height:32px;padding:8px;flex-shrink:0;display:block;background:var(--accent-dim);border-radius:var(--radius-sm);color:var(--accent-active);margin-bottom:auto}
.tile-noise{grid-column:span 2;grid-row:span 2;padding:0}
.tile-noise canvas{position:absolute;inset:0;width:100%;height:100%}
.tile-noise .tile-ctl{position:absolute;top:16px;left:16px;display:flex;gap:5px;z-index:2}
.tile-noise .tile-body{padding:120px 20px 24px;background:linear-gradient(transparent,rgba(23,22,20,.92) 45%)}
.tile-photo{padding:0}
.tile-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tile-photo:hover img{transform:scale(1.04)}
.tile-photo .tile-body{padding:120px 20px 24px;background:linear-gradient(transparent,rgba(23,22,20,.92) 45%)}
.tall{grid-row:span 2}
.tile .chip-list{margin:2px 0 12px}
.swatches{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:2px 0 12px}
.swatches li{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
@media(max-width:1100px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.bento{grid-template-columns:1fr}.tile-noise,.tall{grid-column:auto;grid-row:auto;min-height:360px}}

/* ── PROCESS: světlá sekce ── */
/* ⚓ **SEKCE BEZ VLASTNÍHO ODSAZENÍ — FOTKA TEČE OD HRANY K HRANĚ** (owner 2026-09-03
     „proč tam máš ten bílý pruh mezi přechody?"). ⚠️ ZMĚŘENÁ PŘÍČINA: sekce dědila
     `section{padding:clamp(72px,10vw,150px) …}`, takže levý sloupec s fotkou začínal až
     pod tím odsazením a nad ním i pod ním zůstal PRUH SVĚTLÉHO PODKLADU přes celou šířku —
     přechod z tmavé sekce nad ní se tím rozpadl na dva schody.
   ⚓ Odsazení proto nese TEXTOVÝ sloupec (`.process-body`), ⛔ ne sekce; fotka je grid položka
     přes celou výšku (`align-items:stretch`). */
body.landing .process{background:linear-gradient(var(--paper),var(--paper-deep));color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);padding:0;align-items:stretch}
.process-body{align-self:center;padding:clamp(72px,10vw,150px) var(--gutter) clamp(72px,10vw,150px) 0}
.process-media{position:relative;min-height:60vh}
.process-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;-webkit-mask-image:linear-gradient(to right,#000 72%,transparent);mask-image:linear-gradient(to right,#000 72%,transparent)}
body.landing .process h2,body.landing .process h3{color:var(--ink)}
.process .eyebrow{color:var(--gold-ink)}
/* ⚓ Dole BEZ odstupu: těch 28 px oddělovalo řádek tlačítek, který owner 2026-09-03
   ze sekce odstranil („tady to odstran"). Spodek sekce drží `padding` `.process-body`,
   ⛔ ne osiřelý margin posledního seznamu. */
.steps{list-style:none;display:flex;flex-direction:column;margin:8px 0 0}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:22px 0;box-shadow:inset 0 1px 0 rgba(23,22,20,.14)}
.steps .num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:12px;font-weight:700;color:var(--gold-ink);background:color-mix(in srgb,var(--gold-ink) 12%,transparent)}
.steps h3{margin-bottom:6px}
.steps p{font-size:11px;color:var(--ink-soft);line-height:1.6;max-width:48ch}
@media(max-width:860px){body.landing .process{grid-template-columns:1fr}.process-body{padding:clamp(48px,8vw,90px) var(--gutter)}.process-media{min-height:52vw}.process-media img{-webkit-mask-image:none;mask-image:none;object-position:center}}

/* ── WHO: zákazník / výrobce ── */
/* ⚓ **TMAVÝ PÁS NAHOŘE JE ŠVOVÉ ODDĚLENÍ, ⛔ ne dekorace** (owner 2026-09-03 „dej dolu
     černý pruh ať to není hned na sobě"): světlý proces končil a dvojice fotek začínala
     BEZ mezery, takže papírová plocha a tmavý snímek na sebe narážely v jedné lince.
     ⚓ Pás patří TÉHLE sekci, ⛔ ne procesu — barva pruhu je `--bg-app`, tedy pozadí
     tmavé sekce; přišít černý proužek pod světlou sekci by znamenalo držet tu barvu
     na dvou místech. */
body.landing .split{display:flex;min-height:78vh;padding:clamp(56px,7vw,120px) 0 0;gap:4px;background:var(--bg-app)}
.half{position:relative;flex:1;overflow:hidden;display:flex;align-items:flex-end;min-height:440px;transition:flex .7s var(--ease);color:var(--text-primary);text-decoration:none}
.half:hover{flex:1.55;color:var(--text-primary)}
.half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.half:hover img{transform:scale(1.05)}
.half::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(23,22,20,.94),rgba(23,22,20,.25) 55%,transparent)}
.half-body{position:relative;z-index:1;padding:clamp(28px,4vw,60px)}
.half-body p{font-size:11px;color:var(--text-secondary);line-height:1.6;max-width:42ch;margin:8px 0 14px}
@media(max-width:800px){body.landing .split{flex-direction:column}.half,.half:hover{flex:1}}

/* ── PRICING: TÝŽ markup jako dosud (`.price-card`, modal), jen nový rám ── */
body.landing .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;max-width:980px;margin:0 auto}
body.landing .price-card{padding:36px 32px}
body.landing .price-amount{font-family:var(--font-display);font-size:clamp(56px,6vw,88px);line-height:1;font-weight:600}
body.landing .price-amount span{font-family:var(--font-sans,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);font-size:12px}
@media(max-width:640px){body.landing .pricing-grid{grid-template-columns:1fr}}

/* ── ABOUT ── */
body.landing .about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:center;text-align:left}
.about-photo{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--bg-card)}
.about-photo img{width:100%;height:100%;object-fit:cover}
body.landing .about-text{max-width:560px;font-size:13px;color:var(--text-secondary);line-height:1.8;margin-bottom:16px;text-align:left}
@media(max-width:800px){body.landing .about{grid-template-columns:1fr}.about-photo{max-width:420px}}

/* ── CONTACT ── */
body.landing .contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);background:var(--bg-card);align-items:start;text-align:left}
body.landing .contact .sec-head{margin-bottom:14px}
body.landing .contact-form{max-width:480px;width:100%}
body.landing .contact-form label{color:var(--text-muted)}
@media(max-width:800px){body.landing .contact{grid-template-columns:1fr}}

/* ── Reveal ── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .hero-media img{transform:none}
  .half,.half img,.strip img,.tile-photo img{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PŘENESENO Z `css/index.css` (soubor 2026-09-03 SMAZÁN — vzhled stránky je odteď TADY).
   ⚓ Tyhle tři skupiny drží markup, který se při změně vzhledu NEMĚNIL: ceníkové karty
     s přepínačem období, modal předplatného a kontaktní formulář. Pravidla jsou zkopírovaná
     1:1, ⛔ nepřepsaná — mění se rám stránky, ⛔ ne obchodní cesta.
   ⚓ `.centered` sem přišlo taky: pod ním stojí ceník (a `index.css` už neexistuje).
   ═══════════════════════════════════════════════════════════════════════════ */
.centered{text-align:center;display:flex;flex-direction:column;align-items:center}
body.landing .section-title{font-size:clamp(42px,6vw,96px);font-weight:600;line-height:.95;margin-bottom:12px;color:var(--text-primary)}
.section-desc{font-size:13px;color:var(--text-secondary);max-width:480px;margin-bottom:48px;line-height:1.7}

/* ── PRICING ── */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;max-width:1000px;width:100%;
}
.price-card{
  background:var(--bg-card);
  border:none;border-radius:var(--radius);
  padding:20px 22px;display:flex;flex-direction:column;
  transition:background .2s;
}
.price-card:hover{background:var(--bg-card-hover)}
.price-card.highlighted{
  background:var(--accent-dim);
}
.btn-primary-dim{background:rgba(210,172,92,0.18);color:var(--accent-active)}
.btn-primary-dim:hover{background:rgba(210,172,92,0.28);color:var(--accent-hover)}
.price-card.featured{
  /* obrys pryc — stav nese SILNEJSI zlata vypln nize */
  position:relative;
  background:color-mix(in srgb,var(--accent-active) 20%,transparent);
}
.price-tier{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-secondary);margin-bottom:6px;
}
.price-amount{font-size:32px;font-weight:700;margin-bottom:2px;color:var(--accent)}
.price-amount span{font-size:12px;color:var(--text-secondary);font-weight:400}
.price-note{font-size:10px;color:var(--text-secondary);margin-bottom:12px}
.price-features{list-style:none;margin-bottom:16px;flex:1;text-align:left}
.price-features li{
  font-size:11px;color:var(--text-secondary);padding:3px 0;
  display:flex;align-items:center;gap:6px;
}
.price-features li::before{content:'✓';color:var(--accent-active);font-weight:700;font-size:10px}
.price-features .fg{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:6px 0 2px;display:block}
.price-features .fg::before{content:none}
.price-card .btn{width:100%;justify-content:center}

/* ── CONTACT ── */
.contact-form{
  max-width:480px;width:100%;display:flex;flex-direction:column;gap:10px;
}
.contact-form label{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);text-align:left;
}
.contact-form select,
.contact-form input,
.contact-form textarea{
  width:100%;padding:9px 12px;
  font-size:12px;font-family:inherit;color:var(--text-primary);
  background:var(--bg-well);box-shadow:var(--well-shadow);border:none;border-radius:var(--radius-sm);
  transition:background .15s;outline:none;
}
.contact-form select:focus,
.contact-form input:focus,
.contact-form textarea:focus{background:var(--bg-card-hover)}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form .btn{margin-top:4px;width:100%;justify-content:center}
.contact-msg{
  font-size:11px;padding:8px 12px;border-radius:var(--radius-sm);display:none;
}
.contact-msg.ok{display:block;background:rgba(90,180,90,0.12);color:var(--green)}
.contact-msg.err{display:block;background:rgba(200,80,80,0.12);color:var(--red)}

/* ── BUY MODAL ── */
.buy-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;align-items:center;justify-content:center}
.buy-overlay.show{display:flex}
.buy-modal{background:var(--bg-card);border:none;border-radius:var(--radius);padding:32px;max-width:400px;width:90%;-webkit-user-select:none;user-select:none}
.buy-modal .buy-thanks{font-size:11px;font-weight:600;color:var(--accent-active);margin-bottom:10px;letter-spacing:.01em;text-align:center}
.buy-modal h3{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:8px;text-align:center}
.buy-modal p{font-size:12px;color:var(--text-secondary);margin-bottom:16px;text-align:center}
.buy-modal input{width:100%;padding:10px 14px;background:var(--bg-well);box-shadow:var(--well-shadow);border:none;border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;margin-bottom:16px;-webkit-user-select:text;user-select:text}
.buy-modal input:focus{outline:none;background:var(--bg-card-hover)}
/* Neplatny vstup = ZMENA VYPLNE, ⛔ ne border (pole ma border:none o radek vys,
   obrysova validace by byla neviditelna — a obrysove stavy web kanon zakazuje). */
.buy-modal input.invalid{background:rgba(184,92,92,0.22)}
.buy-modal input.invalid:focus{background:rgba(184,92,92,0.28)}
.buy-actions{display:flex;gap:10px}
.buy-actions .btn{flex:1;justify-content:center;text-align:center}
.buy-error{font-size:11px;padding:8px 12px;border-radius:var(--radius-sm);display:none;margin-bottom:12px;background:rgba(200,64,64,0.1);color:var(--red);border:none}
.buy-error.show{display:block}
/* Plan picker — two selectable cards, single selected state via .selected */
.plan-grid{display:flex;gap:10px;margin:0 0 16px}
.plan-option{flex:1;position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 12px 13px;background:var(--bg-control,#46443f);border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;font:inherit;-webkit-user-select:none;user-select:none;transition:background .15s}
.plan-option:hover{background:var(--bg-card-hover)}
.plan-option.selected{background:var(--accent-dim)}
/* ⛔ Focus prstenec NEUTRALNI — zlaty obrys (--accent-active) web kanon zakazuje;
   zlata smi byt jen text/ikona. Vybrany stav uz nese vypln .plan-option.selected. */
.plan-option:focus-visible{outline:2px solid var(--text-secondary);outline-offset:2px}
.plan-option .plan-name{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);transition:color .15s}
.plan-option.selected .plan-name{color:var(--accent-active)}
.plan-option .plan-price{font-size:21px;font-weight:800;color:var(--text-primary);line-height:1}
.plan-option .plan-price small{font-size:11px;font-weight:600;color:var(--text-muted);margin-left:3px}
.plan-option .plan-note{font-size:10px;color:var(--text-secondary)}
.plan-option .plan-note span{margin-left:2px;color:var(--text-muted)}
.plan-option .plan-check{position:absolute;top:10px;right:10px;width:16px;height:16px;border-radius:50%;border:none;background:var(--bg-well);box-shadow:var(--well-shadow);display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1;color:transparent;transition:all .15s}
.plan-option.selected .plan-check{background:var(--accent-active);color:var(--bg-app)}
.plan-option .plan-save{position:absolute;top:-8px;left:12px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--accent-active);color:var(--bg-app);padding:2px 7px;border-radius:10px}