/* =========================================================================
   BEE WORKERS — design „Plástev“ (17. 10. 2026, nahrazuje Medovou hodinu)
   Zadání Otakara: přehledný web, ve kterém se návštěvník cítí dobře;
   ústřední motiv šestiúhelník, žlutá až zlatá; inspirace kompozicí useorigin.com
   (velké klidné patkové písmo s kurzívou, fotografie, zaoblené karty, tmavé pasáže).
   Šestiúhelníky jsou „naležato“ (rovná hrana nahoře) jako v logu.

   Pořadí: 1 tokeny · 2 základ · 3 tlačítka a štítky · 4 hlavička · 5 úvod
           6 služby · 7 jak účtujeme · 8 realizace · 9 poradna · 10 dotazy
           11 kontakt · 12 patička · 13 pohyb
   ========================================================================= */

/* 1. TOKENY ------------------------------------------------------------- */
:root {
  --wax: #FBF6EB;          /* plocha stránky, včelí vosk */
  --wax-2: #F4EBD8;        /* druhá plocha */
  --paper: #FFFDF8;        /* karta */
  --ink: #1D1708;          /* text */
  --ink-2: #4B402A;        /* druhý text */
  --muted: #6A5C40;        /* popisky */
  --line: #E7DBBF;         /* linky */
  --line-2: #D9C79E;
  --honey: #F4B731;        /* žlutá */
  --honey-2: #F8CF63;
  --gold: #D4A017;         /* zlatá z loga */
  --amber: #8F5C00;        /* zlatá pro text na světlé ploše */
  --propolis: #17120A;     /* tmavé pasáže */
  --propolis-2: #221B10;   /* karta na tmavé */
  --propolis-3: #2E2515;
  --on-dark: #F8F0DD;
  --on-dark-2: #CFC2A3;
  --honey-on-dark: #F7C64A;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --wrap: 1200px;
  --pad: clamp(16px, 4.5vw, 40px);
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 12px;
  --ease: cubic-bezier(.22, .8, .22, 1);
  --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --stin: 0 1px 0 rgba(29, 23, 8, .04), 0 24px 48px -28px rgba(74, 52, 10, .45);
  color-scheme: light;
}

/* 2. ZÁKLAD ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--wax); color: var(--ink); font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
strong, b { font-weight: 600; }
em { font-style: italic; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--wax);
  font: 500 15px var(--sans); border-radius: 0 0 10px 10px; text-decoration: none; transition: top .18s ease; }
.skip:focus { top: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
::selection { background: var(--honey); color: var(--ink); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* nadpisy: světlé patkové písmo, kurzíva nese důraz */
.h-display, .sec__h { font-family: var(--serif); font-weight: 340; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }
.sec__h { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem); }
.sec__h em, .h-display em { font-weight: 360; letter-spacing: -.025em; color: var(--amber); }
.sec__lead { margin-top: 20px; max-width: 34em; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.sec__hlava { display: grid; gap: 0; margin-bottom: clamp(40px, 6vw, 72px); }
.sec__hlava--stred { justify-items: center; text-align: center; }
.sec__hlava--stred .sec__lead { margin-inline: auto; }
.sec { padding: clamp(88px, 12vw, 160px) 0; }

/* 3. TLAČÍTKA A ŠTÍTKY -------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px;
  padding: .8em 1.35em; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 500 .84rem/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s; }
.btn svg { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--ink { background: var(--ink); color: var(--wax); }
.btn--ink:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(29, 23, 8, .6); }
.btn--sklo { background: rgba(255, 253, 248, .58); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 23, 8, .14);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.btn--sklo:hover { background: rgba(255, 253, 248, .82); transform: translateY(-2px); }
.btn--med { background: var(--honey); color: var(--ink); }
.btn--med:hover { background: var(--honey-2); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(244, 183, 49, .65); }
.btn--obrys { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--obrys:hover { background: var(--ink); color: var(--wax); }
.stitek { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px;
  font: 500 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  background: rgba(255, 253, 248, .6); box-shadow: inset 0 0 0 1px rgba(29, 23, 8, .12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.stitek i { width: 12px; aspect-ratio: 1 / .866; background: var(--gold); clip-path: var(--hex); flex: none; }
.oko { font: 500 .76rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sipka { display: inline-flex; align-items: center; gap: .45em; font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ease); }
.sipka:hover { background-size: 100% 1.5px; }
.sipka svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.sipka:hover svg { transform: translateX(3px); }

/* šestiúhelník jako znak (číslo služby, ikona) */
/* obrys a výplň nesou pseudoprvky, prvek sám pozadí nemá: měřidlo kontrastu pak čte pozadí karty pod ním */
.hx { --hx-line: var(--gold); --hx-fill: var(--paper); position: relative; isolation: isolate; display: grid; place-items: center; width: 56px; aspect-ratio: 1 / .866; flex: none; }
.hx::before, .hx::after { content: ''; position: absolute; clip-path: var(--hex); }
.hx::before { inset: 0; z-index: -2; background: var(--hx-line); }
.hx::after { inset: 1.5px; z-index: -1; background: var(--hx-fill); }
.hx > * { position: relative; }
.hx b, .hx span { font: 500 .8rem/1 var(--mono); letter-spacing: .06em; color: var(--ink); }
.hx svg { width: 22px; height: 22px; color: var(--ink); }
.hx--plny { --hx-line: var(--honey); --hx-fill: var(--honey); }

/* 4. HLAVIČKA: plovoucí skleněná lišta ---------------------------------- */
.top { position: fixed; z-index: 50; top: 12px; left: 0; right: 0; padding: 0 var(--pad); pointer-events: none; }
.top__bar { pointer-events: auto; max-width: calc(var(--wrap) + 24px); margin: 0 auto; display: flex; align-items: center; gap: 10px;
  min-height: 62px; padding: 8px 10px 8px 20px; border-radius: 18px;
  background: rgba(251, 246, 235, .52); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 1px 0 rgba(29, 23, 8, .05);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  transition: background-color .35s, box-shadow .35s; }
.top.je-dole .top__bar { background: rgba(251, 246, 235, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 16px 32px -24px rgba(74, 52, 10, .55); }
.logo { display: block; flex: 0 0 auto; width: 104px; aspect-ratio: 1100 / 520; background: var(--ink);
  -webkit-mask: url(assets/beeworkers-logo-white.png) center / contain no-repeat;
          mask: url(assets/beeworkers-logo-white.png) center / contain no-repeat; }
.top__nav { display: none; margin: 0 auto; gap: 4px; }
.top__nav a { padding: 9px 13px; border-radius: 10px; text-decoration: none; font: 500 .74rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: background-color .2s; }
.top__nav a:hover, .top__nav a[aria-current="page"] { background: rgba(29, 23, 8, .07); }
.top__akce { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.top__tel { display: none; padding: 9px 10px; font: 500 .8rem/1.2 var(--mono); letter-spacing: .06em; text-decoration: none; border-radius: 10px; }
.top__tel:hover { background: rgba(29, 23, 8, .07); }
.top .btn { min-height: 44px; padding: .7em 1.1em; font-size: .74rem; border-radius: 12px; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; content: ''; transition: transform .25s var(--ease), background-color .2s; }
.menu summary span::before { position: absolute; top: -6px; }
.menu summary span::after { position: absolute; top: 6px; }
.menu[open] summary { background: rgba(29, 23, 8, .07); }
.menu[open] summary span { background: transparent; }
.menu[open] summary span::before { transform: translateY(6px) rotate(45deg); }
.menu[open] summary span::after { transform: translateY(-6px) rotate(-45deg); }
.menu__panel { position: absolute; right: -10px; top: calc(100% + 18px); width: min(86vw, 320px); padding: 10px; border-radius: 18px;
  background: rgba(251, 246, 235, .96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 24px 48px -20px rgba(74, 52, 10, .5);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid; }
.menu__panel a { padding: 14px 14px; border-radius: 12px; text-decoration: none; font-family: var(--serif); font-size: 1.45rem; font-weight: 380; }
.menu__panel a:hover { background: rgba(29, 23, 8, .06); }
.menu__panel .btn { margin-top: 8px; font-family: var(--mono); font-size: .8rem; }
@media (min-width: 640px) { .top__tel { display: inline-block; } }
@media (min-width: 1020px) {
  .top__nav { display: flex; }
  .menu { display: none; }
  .top__akce { margin-left: 0; }
}

/* 5. ÚVOD --------------------------------------------------------------- */
.uvod { position: relative; min-height: max(620px, 100svh); display: grid; align-items: center; justify-items: center;
  padding: clamp(110px, 14vh, 150px) var(--pad) clamp(140px, 22vh, 240px); overflow: hidden; isolation: isolate; background: #E6CC9C; }
.uvod__foto { position: absolute; inset: -4% 0 0; z-index: -2; }
.uvod__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.uvod::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 34%, rgba(255, 247, 226, .5), rgba(255, 247, 226, 0) 70%),
              linear-gradient(180deg, rgba(255, 244, 214, .35), rgba(255, 244, 214, 0) 30%); }
.uvod__text { max-width: 980px; display: grid; justify-items: center; text-align: center; gap: 0; }
.uvod h1 { margin-top: 0; font-family: var(--serif); font-weight: 320; font-size: clamp(3.6rem, 1.6rem + 8.4vw, 8.6rem);
  line-height: .98; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.uvod h1 em { font-weight: 330; color: #5C3A00; letter-spacing: -.04em; }
.uvod__cta { margin-top: 38px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 719px) { .uvod { min-height: 86svh; } }

/* 6. SLUŽBY: bento ------------------------------------------------------ */
.sluzby { background: var(--wax); }
.bento { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.karta { position: relative; grid-column: span 12; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--stin);
  padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; overflow: hidden; isolation: isolate;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.karta:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(29, 23, 8, .04), 0 36px 60px -32px rgba(74, 52, 10, .5); }
.karta h3 { font-family: var(--serif); font-weight: 380; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); line-height: 1.08; letter-spacing: -.015em; }
.karta p { color: var(--ink-2); line-height: 1.6; }
.karta .sipka { margin-top: auto; padding-top: 6px; align-self: flex-start; }
.karta--velka { min-height: 520px; padding: clamp(28px, 3.4vw, 44px); }
.karta--velka h3 { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4rem); font-weight: 330; letter-spacing: -.03em; }
.karta--velka p { font-size: 1.12rem; max-width: 24em; }
.karta--velka .btn { margin-top: auto; align-self: flex-start; }
.karta--foto { color: var(--on-dark); background: var(--propolis); }
.karta--foto .karta__obr { position: absolute; inset: 0; z-index: -2; }
.karta--foto .karta__obr img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.karta--foto:hover .karta__obr img { transform: scale(1.04); }
.karta--foto::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23, 18, 10, .84) 0%, rgba(23, 18, 10, .72) 44%, rgba(23, 18, 10, .3) 64%, rgba(23, 18, 10, .12) 78%, rgba(23, 18, 10, .7) 100%); }
@media (max-width: 719px) {
  .karta--foto::after { background: linear-gradient(180deg, rgba(23, 18, 10, .86) 0%, rgba(23, 18, 10, .8) 62%, rgba(23, 18, 10, .35) 80%, rgba(23, 18, 10, .72) 100%); }
}
.karta--foto p { color: #EFE4CA; }
.karta--foto .hx { --hx-fill: var(--propolis-2); }
.karta--foto .hx b { color: var(--honey-on-dark); }
.karta--med { background: var(--honey); }
.karta--med p { color: #2E2410; }
.karta--med .hx { --hx-line: var(--ink); --hx-fill: var(--honey); }
.karta--med .vzor { position: absolute; right: -40px; bottom: -30px; width: 360px; z-index: -1; color: #D99C12; opacity: .9; }
.karta--mala { grid-column: span 12; min-height: 0; }
.karta--mala .karta__hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.karta--mala .hx { width: 50px; }
.karta--region { background: var(--wax-2); box-shadow: none; }
.karta--region ul { display: grid; gap: 4px; margin-top: auto; }
.karta--region li a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line-2); text-decoration: none; font-weight: 500; }
.karta--region li a:hover { color: var(--amber); }
.karta--region li a svg { width: 16px; height: 16px; }
@media (min-width: 720px) {
  .karta--mala { grid-column: span 6; }
}
@media (min-width: 1020px) {
  .karta--velka:first-child { grid-column: span 7; }
  .karta--velka:nth-child(2) { grid-column: span 5; }
  .karta--mala { grid-column: span 4; }
}

/* 7. JAK ÚČTUJEME: tmavá pasáž ------------------------------------------ */
.ucet { position: relative; background: var(--propolis); color: var(--on-dark); overflow: hidden; isolation: isolate; }
.ucet::before { content: ''; position: absolute; z-index: -1; width: 1100px; height: 900px; left: 50%; top: -420px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(244, 183, 49, .28), rgba(244, 183, 49, .08) 55%, rgba(244, 183, 49, 0)); pointer-events: none; }
.ucet .sec__h em { color: var(--honey-on-dark); }
.ucet .sec__lead { color: var(--on-dark-2); }
.ucet .oko { color: var(--on-dark-2); }
.ucet a:not(.btn) { color: var(--on-dark); }
.ucet :focus-visible { outline-color: var(--honey-on-dark); }
.vosk { position: absolute; inset: 0; z-index: -1; color: rgba(247, 198, 74, .07); pointer-events: none; }
.vosk svg { width: 100%; height: 100%; }
.ucet__mrizka { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.ucet__foto { grid-column: span 12; position: relative; min-height: 560px; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(26px, 3.4vw, 44px); }
.ucet__foto img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ucet__foto::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 18, 10, 0) 30%, rgba(23, 18, 10, .55) 58%, rgba(23, 18, 10, .9) 100%); }
@media (max-width: 719px) { .ucet__foto::after { background: linear-gradient(180deg, rgba(23, 18, 10, 0) 12%, rgba(23, 18, 10, .72) 36%, rgba(23, 18, 10, .92) 100%); } }
.ucet__foto .sec__h { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem); }
.ucet__foto .oko { align-self: flex-start; margin-bottom: 14px; padding: 7px 13px; border-radius: 999px; color: var(--on-dark); background: rgba(23, 18, 10, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ucet__foto .sec__lead { color: #EADFC4; }
.uctenka { grid-column: span 12; position: relative; border-radius: var(--r-lg); background: var(--propolis-2);
  box-shadow: inset 0 0 0 1px rgba(247, 198, 74, .14); padding: 30px clamp(22px, 3vw, 34px) 26px; display: flex; flex-direction: column; }
.uctenka__hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px dashed rgba(247, 198, 74, .3); }
.uctenka__hlava b { font: 500 .78rem/1.2 var(--mono); letter-spacing: .14em; color: var(--honey-on-dark); }
.uctenka__hlava span { font: 500 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); text-align: right; }
.uctenka dl { display: grid; }
.uctenka dl > div { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 14px 0; border-bottom: 1px solid rgba(248, 240, 221, .08); }
.uctenka dt { font-weight: 500; color: var(--on-dark); }
.uctenka dd { color: var(--on-dark-2); font-size: .97rem; line-height: 1.5; }
.uctenka dl > .uctenka__soucet { grid-template-columns: 1fr; gap: 6px; }
.uctenka .uctenka__soucet { border-bottom: 0; margin-top: 6px; padding: 16px 18px; border-radius: 14px; background: var(--honey); }
.uctenka .uctenka__soucet dt { color: var(--ink); font: 500 .78rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.uctenka .uctenka__soucet dd { color: var(--ink); font-family: var(--serif); font-size: 1.35rem; line-height: 1.25; }
.uctenka__pata { margin-top: auto; padding-top: 18px; font: 500 .74rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.uctenka__zub { display: flex; gap: 6px; position: absolute; top: -7px; left: 26px; right: 26px; overflow: hidden; height: 14px; }
.uctenka__zub i { flex: none; width: 16px; aspect-ratio: 1 / .866; clip-path: var(--hex); background: var(--propolis); }
@media (min-width: 560px) { .uctenka dl > div { grid-template-columns: 11em 1fr; gap: 16px; } }
@media (min-width: 1020px) {
  .ucet__foto { grid-column: span 7; min-height: 640px; }
  .uctenka { grid-column: span 5; }
}
.ucet__dole { display: grid; gap: 14px; margin-top: 14px; grid-template-columns: repeat(12, 1fr); }
.zaruka { grid-column: span 12; border-radius: var(--r-lg); padding: clamp(26px, 3.2vw, 40px); background: var(--propolis-2);
  box-shadow: inset 0 0 0 1px rgba(247, 198, 74, .14); display: grid; gap: 18px; align-content: start; }
.zaruka__cislo { display: flex; align-items: baseline; gap: 16px; }
.zaruka__cislo b { font-family: var(--serif); font-weight: 300; font-size: clamp(5rem, 3rem + 7vw, 8.5rem); line-height: .85; letter-spacing: -.05em; color: var(--honey-on-dark); }
.zaruka__cislo span { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; max-width: 7em; }
.zaruka p { color: var(--on-dark-2); }
.zaruka p strong { color: var(--on-dark); font-weight: 500; }
.denne { grid-column: span 12; display: grid; gap: 14px; grid-template-columns: 1fr; }
.denne li { border-radius: var(--r-md); padding: 24px; background: var(--propolis-2); box-shadow: inset 0 0 0 1px rgba(247, 198, 74, .1); display: grid; gap: 10px; align-content: start; }
.denne .hx { width: 46px; --hx-line: rgba(247, 198, 74, .55); --hx-fill: var(--propolis-2); }
.denne .hx svg { color: var(--honey-on-dark); width: 20px; height: 20px; }
.denne b { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.2; }
.denne p { color: var(--on-dark-2); font-size: .98rem; line-height: 1.55; }
.ucet__cta { margin-top: clamp(40px, 6vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.ucet__cta p { color: var(--on-dark-2); max-width: 36em; }
@media (min-width: 640px) { .denne { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) {
  .zaruka { grid-column: span 5; }
  .denne { grid-column: span 7; }
}

/* 8. REALIZACE: plástev zakázek ----------------------------------------- */
.realizace { background: var(--wax); }
.realizace .sec__hlava { margin-bottom: 0; }
.realizace .sec__lead { margin: 22px auto 0; text-align: center; text-wrap: balance; }
.legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 28px 0 clamp(36px, 5vw, 56px); }
.legenda li { display: flex; align-items: center; gap: 9px; font: 500 .74rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.legenda i { width: 18px; aspect-ratio: 1 / .866; clip-path: var(--hex); display: block; position: relative; }
.legenda .i-hotovo { background: var(--honey); }
.legenda .i-probiha { background: var(--propolis); }
.legenda .i-plan { background: var(--line-2); }
.legenda .i-plan::before { content: ''; position: absolute; inset: 1.5px; clip-path: var(--hex); background: var(--wax); }
/* seznam (mobil); posun buňky skládají proměnné: --dole (sudý sloupec plástve), --pred (před odhalením), --s (měřítko) */
.fasada { display: grid; gap: 8px; --g: 8px; }
.okn { --dole: 0; --pred: 0px; --s: 1; transform: translateY(calc(var(--dole) * (50% + var(--g) / 2) + var(--pred))) scale(var(--s));
  transition: transform .9s var(--ease), background-color .3s; }
.okn:hover { --s: 1.04; }
.okn { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 4px 14px; padding: 14px 16px;
  border-radius: 16px; background: var(--paper); box-shadow: 0 1px 0 rgba(29, 23, 8, .04), 0 10px 22px -18px rgba(74, 52, 10, .5); }
.okn::before { content: ''; grid-row: span 2; width: 30px; aspect-ratio: 1 / .866; clip-path: var(--hex); background: var(--honey); }
.okn b { font-weight: 600; line-height: 1.3; }
.okn span { grid-column: 2; color: var(--ink-2); font-size: .95rem; line-height: 1.35; }
.okn small { grid-column: 3; grid-row: 1 / span 2; font: 500 .68rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.okn--probiha::before { background: var(--propolis); }
.okn--plan::before { background: var(--line-2); }
@media (max-width: 759px) {
  /* telefon: dvě kompaktní karty vedle sebe, stav nese barva šestiúhelníku a štítek pod názvem */
  .fasada { grid-template-columns: 1fr 1fr; }
  .okn { grid-template-columns: 1fr; align-content: start; gap: 2px; padding: 14px 14px 14px; }
  .okn::before { grid-row: auto; width: 24px; margin-bottom: 6px; }
  .okn b { font-size: .95rem; }
  .okn span { grid-column: 1; font-size: .88rem; }
  .okn small { grid-column: 1; grid-row: auto; margin-top: 4px; font-size: .62rem; }
}
/* plástev (tablet a víc) */
@media (min-width: 760px) {
  .fasada { --w: 150px; --g: 7px; --sl: 5;
    --h: calc(var(--w) * .866);
    grid-template-columns: repeat(var(--sl), calc(var(--w) * .75 + var(--g)));
    grid-auto-rows: calc(var(--h) + var(--g)); gap: 0; justify-content: center;
    padding: 0 calc(var(--w) * .25) calc(var(--h) / 2 + var(--g)) 0; }
  .okn { width: var(--w); height: var(--h); clip-path: var(--hex); border-radius: 0; box-shadow: none; padding: 10px 26px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px;
    background: var(--honey); }
  .okn:hover { --s: 1.07; z-index: 2; }
  .okn::before { display: none; }
  .okn b { font-size: .92rem; line-height: 1.18; }
  .okn span { font-size: .82rem; line-height: 1.2; color: #3B2E12; }
  .okn small { margin-top: 5px; font-size: .62rem; color: #4A3A12; }
  .okn--probiha { background: var(--propolis); color: var(--on-dark); }
  .okn--probiha span { color: var(--on-dark-2); }
  .okn--probiha small { color: var(--honey-on-dark); }
  .okn--probiha small::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
    background: var(--honey-on-dark); box-shadow: 0 0 0 0 rgba(247, 198, 74, .7); animation: tep 2.4s infinite; }
  .okn--plan { background: var(--line-2); }
  .okn--plan::after { content: ''; position: absolute; inset: 1.5px; z-index: -1; clip-path: var(--hex); background: var(--wax-2); }
  .okn--plan { isolation: isolate; }
}
@media (min-width: 760px) and (max-width: 1019px) {
  /* 5 sloupců: dolů posunutý je 2. a 4. sloupec */
  .fasada > :nth-child(5n+2), .fasada > :nth-child(5n+4) { --dole: 1; }
}
@media (min-width: 1020px) {
  /* 7 sloupců: dolů posunuté jsou 2., 4. a 6. sloupec */
  .fasada { --w: 158px; --g: 8px; --sl: 7; }
  .fasada > :nth-child(7n+2), .fasada > :nth-child(7n+4), .fasada > :nth-child(7n+6) { --dole: 1; }
}
@media (min-width: 1180px) {
  .fasada { --w: 176px; }
  .okn b { font-size: 1rem; }
  .okn span { font-size: .86rem; }
}
@keyframes tep { 0% { box-shadow: 0 0 0 0 rgba(247, 198, 74, .65); } 70% { box-shadow: 0 0 0 9px rgba(247, 198, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(247, 198, 74, 0); } }
.real__note { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 8px 22px; align-items: center; color: var(--ink-2); }

/* 9. PORADNA ------------------------------------------------------------ */
.poradna { background: var(--wax-2); }
.poradna__in { display: grid; gap: 40px; }
.temata { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }  /* 18. 10. 2026, Otakar: vše pod sebou */
.temata a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; text-decoration: none;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; transition: background-color .2s, box-shadow .2s, transform .3s var(--ease); }
.temata a::before { content: ''; width: 14px; aspect-ratio: 1 / .866; clip-path: var(--hex); background: var(--gold); transition: transform .4s var(--ease); }
.temata a:hover { background: var(--honey); box-shadow: inset 0 0 0 1px var(--honey); transform: translateY(-2px); }
.temata a:hover::before { background: var(--ink); transform: rotate(60deg); }
@media (min-width: 1020px) { .poradna__in { grid-template-columns: 5fr 7fr; align-items: start; gap: 64px; } }

/* 10. DOTAZY ------------------------------------------------------------ */
.dotazy__in { display: grid; gap: 36px; }
.dotazy__seznam { border-top: 1px solid var(--line-2); }
.dotazy details { border-bottom: 1px solid var(--line-2); }
.dotazy summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0;
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.25; letter-spacing: -.01em; }
.dotazy summary::-webkit-details-marker { display: none; }
.dotazy summary::after { content: ''; flex: none; width: 34px; aspect-ratio: 1 / .866; clip-path: var(--hex); background: var(--wax-2)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1708' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .4s var(--ease), background-color .2s; }
.dotazy details[open] summary::after { transform: rotate(45deg); background-color: var(--honey); }
.dotazy summary:hover::after { background-color: var(--honey); }
.dotazy details p { padding: 0 0 26px; max-width: 42em; color: var(--ink-2); }
@media (min-width: 1020px) { .dotazy__in { grid-template-columns: 5fr 7fr; gap: 64px; } }

/* 11. KONTAKT ----------------------------------------------------------- */
.kontakt { padding: 0 var(--pad) clamp(20px, 3vw, 32px); }
.kontakt__panel { position: relative; max-width: 1360px; margin: 0 auto; border-radius: clamp(24px, 3vw, 36px); overflow: hidden; isolation: isolate;
  padding: clamp(72px, 10vw, 128px) clamp(16px, 4vw, 56px) clamp(24px, 4vw, 56px); }
.kontakt__foto { position: absolute; inset: 0; z-index: -2; }
.kontakt__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.kontakt__panel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(251, 238, 214, .35), rgba(251, 238, 214, 0) 40%); }
.kontakt__hlava { text-align: center; display: grid; justify-items: center; gap: 18px; margin-bottom: clamp(48px, 7vw, 88px); }
.kontakt__hlava .sec__h { font-size: clamp(3.2rem, 1.8rem + 6vw, 7rem); color: var(--ink); }
.kontakt__hlava .sec__h em { color: #5C3A00; }
.kontakt__karty { display: grid; gap: 14px; max-width: 1120px; margin: 0 auto; }
.kontakt__info, .poptavka, .poptavka-ok { border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); }
.kontakt__info { background: rgba(251, 246, 235, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); display: grid; gap: 18px; align-content: start; }
.kontakt__info p { color: var(--ink-2); }
.kontakt__tel { font-family: var(--serif); font-weight: 340; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height: 1; letter-spacing: -.02em; text-decoration: none; }
.kontakt__mail { font-size: 1.15rem; font-weight: 500; }
.kontakt__tel:hover, .kontakt__mail:hover { color: var(--amber); }
.kontakt__radky { display: grid; gap: 0; margin-top: 6px; border-top: 1px solid rgba(29, 23, 8, .12); }
.kontakt__radky li { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(29, 23, 8, .12); font-size: .95rem; line-height: 1.5; }
.kontakt__radky .k { font: 500 .7rem/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kontakt__radky small { display: block; color: var(--muted); font-size: .86rem; }
.poptavka { background: var(--paper); box-shadow: 0 40px 80px -40px rgba(60, 40, 0, .55); display: grid; gap: 14px; }
.poptavka h3 { font-family: var(--serif); font-weight: 380; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.015em; margin-bottom: 4px; }
.pole { display: grid; gap: 6px; }
.pole label { font: 500 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pole small { text-transform: none; letter-spacing: 0; font-family: var(--sans); color: var(--muted); }
.pole input, .pole textarea, .pole select { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--wax); color: var(--ink); font: 400 1rem/1.4 var(--sans); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.pole textarea { resize: vertical; min-height: 120px; }
.pole input:hover, .pole textarea:hover, .pole select:hover { border-color: var(--gold); }
.pole input:focus, .pole textarea:focus, .pole select:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(244, 183, 49, .45); }
.poptavka .btn { justify-self: start; margin-top: 4px; }
.poptavka__note { font-size: .86rem; line-height: 1.5; color: var(--muted); }
.poptavka__chyba { padding: 12px 14px; border-radius: 12px; background: #FBE3D6; color: #6B1E0B; font-size: .95rem; }
.poptavka-ok { display: none; background: var(--paper); text-align: center; }
.poptavka-ok.on { display: grid; gap: 12px; justify-items: center; }
.poptavka-ok h3 { font-family: var(--serif); font-weight: 380; font-size: 2rem; }
.okno-ok { width: 64px; aspect-ratio: 1 / .866; clip-path: var(--hex); background: var(--honey); }
.term { background: rgba(255, 253, 248, .7); }
@media (min-width: 900px) { .kontakt__karty { grid-template-columns: 5fr 6fr; align-items: start; } }

/* 12. PATIČKA ----------------------------------------------------------- */
.paticka { background: var(--propolis); color: var(--on-dark-2); padding: clamp(64px, 8vw, 96px) var(--pad) 32px; margin-top: clamp(20px, 3vw, 32px); position: relative; overflow: hidden; isolation: isolate; }
.paticka a { color: var(--on-dark); text-decoration: none; }
.paticka a:hover { color: var(--honey-on-dark); }
.paticka :focus-visible { outline-color: var(--honey-on-dark); }
.paticka__in { max-width: var(--wrap); margin: 0 auto; }
.paticka__top { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(248, 240, 221, .1); }
.paticka .logo { width: 132px; background: var(--gold); }
.paticka__claim { margin-top: 22px; font-family: var(--serif); font-weight: 340; font-size: 2rem; line-height: 1.12; color: var(--on-dark); letter-spacing: -.015em; }
.paticka__claim em { color: var(--honey-on-dark); }
.paticka__podpis .srdce { stroke: var(--honey-on-dark); }
.paticka__h { margin-bottom: 14px; font: 500 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.paticka nav ul { display: grid; gap: 9px; }
.paticka__legal { padding-top: 28px; display: grid; gap: 10px; font-size: .86rem; line-height: 1.6; color: #B5A887; }
.paticka__legal a { color: #E6DBC0; text-decoration: underline; text-decoration-color: rgba(230, 219, 192, .35); }
.paticka__vosk { position: absolute; right: -60px; top: -40px; width: 420px; z-index: -1; color: rgba(247, 198, 74, .06); pointer-events: none; }
@media (min-width: 720px) { .paticka nav ul { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
@media (min-width: 1020px) { .paticka__top { grid-template-columns: 4fr 5fr 3fr; } }

/* 13. POHYB (jen posun a měřítko, obsah se nikdy neskrývá průhledností) */
.js [data-r] { transform: translateY(36px); transition: transform 1.1s var(--ease); }
.js [data-r].je-videt { transform: none; }
.js .fasada[data-r] { transform: none; }
.js .fasada:not(.je-videt) > li { --pred: 30px; --s: .88; }
.uvod__foto img { transform-origin: 50% 80%; animation: nadech 2.8s var(--ease) both; }
@keyframes nadech { from { transform: scale(1.08); } to { transform: scale(1); } }
.uvod__text > * { animation: vystup 1.2s var(--ease) both; }
.uvod__text > :nth-child(2) { animation-delay: .08s; }
.uvod__text > :nth-child(3) { animation-delay: .16s; }
.uvod__text > :nth-child(4) { animation-delay: .24s; }
@keyframes vystup { from { transform: translateY(26px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-r] { transform: none !important; }
  .js .fasada:not(.je-videt) > li { --pred: 0px; --s: 1; }
}

/* tisk */
@media print {
  .top, .uvod__foto, .kontakt__foto, .vosk, .paticka__vosk, .poptavka { display: none !important; }
  body, .ucet, .paticka { background: #fff !important; color: #000 !important; }
  .paticka__claim, .paticka__claim em { color: #000 !important; }
  .paticka__podpis .srdce { stroke: var(--amber); }
}

/* úzký telefon: štítek a řádky kontaktu */
@media (max-width: 420px) {
  .stitek { letter-spacing: .06em; font-size: .68rem; }
  .kontakt__radky li { grid-template-columns: 5em 1fr; }
}

/* 14. JEMNÝ POHYB (pokyn Otakara 17. 10. 2026: jemný dynamický pohyb a pulsace, pocit jemnosti a lahodnosti; med jako motiv ne)
   Pomalé, plynulé, nikdy rychlé. Pulzuje jen výzdoba, ne výzva k akci (behavioristické veto).
   Průhlednost se mění jen u dekorací bez textu. Vše vypíná prefers-reduced-motion. */
:root { --med: cubic-bezier(.65, 0, .35, 1); --med-ven: cubic-bezier(.16, 1, .3, 1); }

/* úvod: světlo nad nadpisem dýchá, odlesky pomalu plují */
.uvod__zare { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.uvod__zare i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: soft-light;
  background: radial-gradient(circle, rgba(255, 246, 214, .95) 0%, rgba(255, 228, 160, .45) 38%, rgba(255, 220, 140, 0) 70%);
  animation: plyn 26s var(--med) infinite alternate, dech 7.5s var(--med) infinite alternate; }
.uvod__zare i:nth-child(1) { width: 46vw; aspect-ratio: 1; left: 27vw; top: -8vw; }
.uvod__zare i:nth-child(2) { width: 22vw; aspect-ratio: 1; right: 6vw; top: 6vh; animation-duration: 31s, 9s; animation-delay: -6s, -3s; }
.uvod__zare i:nth-child(3) { width: 16vw; aspect-ratio: 1; left: 8vw; top: 26vh; animation-duration: 23s, 6.5s; animation-delay: -12s, -1s; }
@keyframes plyn { from { transform: translate3d(-2vw, 0, 0); } to { transform: translate3d(2.5vw, 2vh, 0); } }
@keyframes dech { from { opacity: .55; scale: .94; } to { opacity: 1; scale: 1.08; } }

/* tlačítka se při najetí zespodu plynule vyplní */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--btn-plneni, transparent);
  transform: translateY(102%); transition: transform .75s var(--med); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn--ink { --btn-plneni: var(--honey); transition: transform .25s var(--ease), box-shadow .25s var(--ease), color .35s ease .18s; }
.btn--ink:hover { color: var(--ink); }
.btn--med { --btn-plneni: #E39A12; }
.btn--sklo { --btn-plneni: rgba(255, 253, 248, .95); }
.btn--obrys { --btn-plneni: var(--ink); transition: color .35s ease .18s, transform .25s var(--ease); }
.btn--obrys:hover { background: transparent; }
.top .btn--ink { --btn-plneni: var(--honey); }


/* plástev zakázek: po dokončených buňkách přejíždí lesk, rozestavěné tiše žhnou */
@media (min-width: 760px) {
  .okn { isolation: isolate; }
  .okn--hotovo::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 244, 205, 0) 30%, rgba(255, 244, 205, .75) 48%, rgba(255, 244, 205, 0) 66%);
    transform: translateX(-130%); animation: lesk 9s var(--med) infinite; animation-delay: var(--zl, 0s); }
  .okn--probiha::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 60% at 50% 50%, rgba(247, 198, 74, .34), rgba(247, 198, 74, 0) 70%);
    animation: zhnuti 3.8s var(--med) infinite alternate; animation-delay: var(--zl, 0s); }
}
@keyframes lesk { 0%, 62% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }
@keyframes zhnuti { from { opacity: .25; } to { opacity: 1; } }

/* medová karta: lesk při najetí */
.karta--med::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 246, 214, 0) 30%, rgba(255, 246, 214, .55) 50%, rgba(255, 246, 214, 0) 70%);
  transform: translateX(-100%); transition: transform 1.4s var(--med); }
.karta--med:hover::before { transform: translateX(100%); }

/* tmavá pasáž: záře dýchá a se zpožděním jde za kurzorem */
.ucet::before { animation: dech-zare 8s var(--med) infinite alternate; }
@keyframes dech-zare { from { opacity: .7; } to { opacity: 1; } }
.ucet__svetlo { position: absolute; z-index: -1; left: 0; top: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(244, 183, 49, .16), rgba(244, 183, 49, 0)); transform: translate3d(50vw, 40%, 0); opacity: 0; transition: opacity 1.2s ease; }
.ucet.ma-svetlo .ucet__svetlo { opacity: 1; }

/* závěr: ve večerním světle pomalu stoupají světelné částice */
.pyl { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pyl i { position: absolute; left: var(--x); bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 210, 1), rgba(255, 220, 130, .6) 45%, rgba(255, 220, 130, 0) 72%);
  animation: pyl var(--t) linear infinite; animation-delay: var(--d); }
@keyframes pyl {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: .9; }
  50% { transform: translate3d(var(--v), -45vh, 0); }
  85% { opacity: .7; }
  100% { transform: translate3d(calc(var(--v) * -.5), -95vh, 0); opacity: 0; }
}

/* závěrečná fotka se při příjezdu pomalu usadí */
.js .kontakt__foto img { transform: scale(1.08); transition: transform 2.6s var(--med-ven); }
.js .kontakt__panel.je-videt .kontakt__foto img { transform: none; }

/* dojezd bloků zpomalit */
.js [data-r] { transition-duration: 1.4s; transition-timing-function: var(--med-ven); }

@media (prefers-reduced-motion: reduce) {
  .uvod__zare i, .okn::after, .ucet::before, .pyl i { animation: none !important; }
  .pyl, .ucet__svetlo { display: none !important; }
  .okn--hotovo::after { display: none; }
  .btn::before { transition: none !important; }
  .js .kontakt__foto img { transform: none !important; }
}
@media (max-width: 719px) { .uvod__foto img { object-position: 78% 100%; } }

/* 15. PORADNA: sekce v horní liště, stránka sekce a středová linka s čísly článků
   (pokyn Otakara 17. 10. 2026, inspirace středovou linkou pebblelife.com/pebble-flow) */

/* rozbalovací nabídka sekcí u položky Poradna */
.nav-rozbal { position: relative; display: flex; }
.nav-rozbal__a { display: inline-flex !important; align-items: center; gap: 5px; }
.nav-rozbal__v { width: 12px; height: 12px; transition: transform .35s var(--med); }
.nav-rozbal:hover .nav-rozbal__v, .nav-rozbal:focus-within .nav-rozbal__v { transform: rotate(180deg); }
.nav-panel { position: absolute; top: calc(100% + 16px); left: 50%; width: 600px; padding: 20px; border-radius: 22px;
  background: rgba(251, 246, 235, .97); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 60px -28px rgba(74, 52, 10, .55);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  visibility: hidden; opacity: 0; transform: translate(-50%, 10px); transition: opacity .35s var(--med), transform .45s var(--med), visibility 0s .45s; }
.nav-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav-rozbal:hover .nav-panel, .nav-rozbal:focus-within .nav-panel { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity .35s var(--med), transform .45s var(--med); }
.nav-panel__h { margin: 2px 8px 12px; font: 500 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav-panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.top__nav .nav-panel a { display: flex; align-items: baseline; gap: 12px; padding: 10px 10px; border-radius: 12px;
  font: 500 .98rem/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.top__nav .nav-panel a:hover, .top__nav .nav-panel a[aria-current="page"] { background: rgba(244, 183, 49, .28); }
.nav-panel__n { font: 500 .7rem/1 var(--mono); letter-spacing: .06em; color: var(--amber); }
.top__nav .nav-panel .nav-panel__vse { display: inline-flex; margin: 12px 10px 2px; padding: 0 0 2px; border-radius: 0; font-weight: 500; }
.top__nav .nav-panel .nav-panel__vse:hover { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; }
.menu__panel { max-height: calc(100svh - 110px); overflow: auto; background: rgba(251, 246, 235, .995); }
.menu__sekce { display: grid; margin: -4px 0 6px 14px; padding-left: 12px; border-left: 1.5px solid var(--line-2); }
.menu__sekce a { display: flex; align-items: center; min-height: 42px; padding: 8px 12px !important; font: 500 1rem/1.3 var(--sans) !important; }

/* lišta sekcí poradny: druhá plovoucí lišta pod hlavičkou */
.je-poradna main { padding-top: 88px; }
.sekce-lista { position: sticky; z-index: 40; top: 84px; padding: 0 var(--pad); }
.sekce-lista__in { max-width: 1400px; margin: 0 auto; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding: 6px; border-radius: 16px; background: rgba(251, 246, 235, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 14px 28px -24px rgba(74, 52, 10, .5);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.sekce-lista__in::-webkit-scrollbar { display: none; }
.sekce-lista a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 11px; text-decoration: none;
  font: 500 .9rem/1.2 var(--sans); white-space: nowrap; color: var(--ink-2); transition: background-color .3s var(--med), color .3s; }
.sekce-lista a span { font: 500 .66rem/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.sekce-lista a:hover { background: rgba(29, 23, 8, .06); color: var(--ink); }
.sekce-lista a[aria-current="page"] { background: var(--ink); color: var(--wax); }
.sekce-lista a[aria-current="page"] span { color: var(--honey-on-dark); }
.sekce-lista .sekce-lista__domu { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-left: 4px; }

/* úvod stránky sekce */
.por-uvod { padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 5vw, 64px); }
.por-uvod__in { display: grid; gap: 32px; align-items: center; }
.por-uvod .sec__h { font-size: clamp(3rem, 1.8rem + 5vw, 6.2rem); }
.por-uvod .oko { margin-bottom: 18px; }
.por-uvod__obr { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 11; box-shadow: var(--stin); }
.por-uvod__obr img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1020px) {
  .por-uvod__in { grid-template-columns: 7fr 5fr; gap: 64px; }
  .por-uvod__obr { aspect-ratio: 4 / 5; max-height: 600px; }
}

/* středová linka s čísly článků */
.tok { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px); }
.tok .wrap { position: relative; }
.tok__seznam { position: relative; z-index: 1; display: grid; gap: clamp(48px, 7vw, 104px); }
.tok__linka { position: absolute; z-index: 0; left: calc(var(--pad) + 27px); top: 0; height: 100%; width: 2px; margin-left: -1px;
  background: var(--line); border-radius: 2px; }
.tok__napln { position: absolute; inset: 0; border-radius: inherit; transform-origin: 50% 0; transform: scaleY(var(--p, 0));
  background: linear-gradient(180deg, var(--gold), var(--honey) 45%, #E39A12); box-shadow: 0 0 16px rgba(244, 183, 49, .6); }
.tok__linka::after { content: ''; position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--honey); box-shadow: 0 0 0 6px rgba(244, 183, 49, .22), 0 0 24px 6px rgba(244, 183, 49, .55); }
.tok__clanek { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 0 18px; align-items: start; }
.tok__uzel { grid-column: 1; grid-row: 1; position: relative; isolation: isolate; display: grid; place-items: center; width: 54px; aspect-ratio: 1 / .866; margin-top: 4px; z-index: 2; }
.tok__uzel::before, .tok__uzel::after { content: ''; position: absolute; clip-path: var(--hex); }
.tok__uzel::before { inset: 0; z-index: -2; background: var(--line-2); transition: background-color .6s var(--med); }
.tok__uzel::after { inset: 2px; z-index: -1; background: var(--wax); transition: background-color .6s var(--med); }
.tok__uzel b { font: 500 .78rem/1 var(--mono); letter-spacing: .04em; color: var(--muted); transition: color .6s; }
.tok__clanek.je-dosazeno .tok__uzel::before { background: var(--honey); }
.tok__clanek.je-dosazeno .tok__uzel::after { background: var(--honey); }
.tok__clanek.je-dosazeno .tok__uzel b { color: var(--ink); }
.tok__clanek.je-dosazeno .tok__uzel { animation: zazare 1.4s var(--med-ven); }
@keyframes zazare { 0% { transform: scale(.8); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
.tok__karta { grid-column: 2; grid-row: 1; display: grid; gap: 18px; text-decoration: none; color: inherit; }
.tok__obr { margin: 0; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--wax-2); box-shadow: var(--stin); }
.tok__obr img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.35) brightness(.97); transition: filter 1.4s var(--med), transform 1.2s var(--med-ven); }
.tok__clanek.je-dosazeno .tok__obr img { filter: none; }
.tok__karta:hover .tok__obr img { transform: scale(1.04); }
.tok__obr--vzor { color: rgba(212, 160, 23, .35); background: radial-gradient(80% 70% at 70% 20%, #FFF4D6, var(--wax-2) 70%); }
.tok__obr--vzor svg { width: 100%; height: 100%; }
.tok__text { display: grid; gap: 10px; align-content: start; }
.tok__stitek { font: 500 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.tok__h { font-family: var(--serif); font-weight: 360; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.tok__perex { color: var(--ink-2); line-height: 1.6; max-width: 34em; }
.tok__meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 500 .74rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.tok__meta svg { width: 14px; height: 14px; transition: transform .35s var(--med); }
.tok__karta:hover .tok__meta svg { transform: translateX(4px); }
.tok__karta:focus-visible { outline-offset: 8px; border-radius: var(--r-md); }
@media (min-width: 900px) {
  .tok__linka { left: 50%; }
  .tok__clanek { grid-template-columns: 1fr 104px 1fr; align-items: center; }
  .tok__uzel { grid-column: 2; justify-self: center; width: 64px; margin-top: 0; }
  .tok__karta { grid-column: 1 / -1; grid-template-columns: 1fr 104px 1fr; align-items: center; gap: 0; }
  .tok__obr { grid-column: 1; grid-row: 1; }
  .tok__text { grid-column: 3; grid-row: 1; padding-right: 4%; }
  .tok__clanek:nth-child(even) .tok__obr { grid-column: 3; }
  .tok__clanek:nth-child(even) .tok__text { grid-column: 1; padding: 0 0 0 4%; }
}

/* závěr stránky sekce */
.tok-dal { background: var(--wax-2); text-align: center; }
.tok-dal__in { display: grid; justify-items: center; gap: 14px; }
.tok-dal .sec__h a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 96% / 0 2px no-repeat; transition: background-size .6s var(--med); }
.tok-dal .sec__h a:hover { background-size: 100% 2px; }
.tok-dal__cta { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .tok__clanek.je-dosazeno .tok__uzel { animation: none; }
  .tok__obr img { filter: none; }
}

/* 16. PODSTRÁNKY: třídy původní sazby (dřív medova.css, oddíl 5) v paletě Plástev */
:root {
  /* náhradní tokeny Medové hodiny pro stránky, které je ještě čtou */
  --cream: var(--wax); --light: var(--honey); --layer-1: var(--honey); --layer-2: var(--gold); --layer-3: var(--amber);
  --layer-4: var(--propolis-3); --layer-4-deep: var(--propolis); --warm: #FCF0D6; --cream-2: var(--wax-2); --line-strong: var(--gold);
  --sky-top: var(--wax-2); --sky-bot: var(--wax-2); --font-head: var(--serif); --font-body: var(--sans); --radius: 12px;
  --shadow-paper: var(--stin);
}
body:not(.titulka) main { padding-top: 96px; }
.eyebrow { font: 500 .76rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.h2 { font-family: var(--serif); font-weight: 340; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 48px; }
.sec-head .lead { max-width: 440px; font: 400 17px/1.65 var(--sans); color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn-primary, .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .8em 1.35em;
  font: 500 .84rem/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-radius: 999px; border: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s; }
.btn-primary { background: var(--ink); color: var(--wax); }
.btn-primary:hover { background: var(--honey); color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(29, 23, 8, .5); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--wax); transform: translateY(-2px); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.svc { padding: 28px 26px 30px; background: var(--paper); border-radius: var(--r-md); box-shadow: var(--stin); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.svc:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(29, 23, 8, .04), 0 36px 60px -32px rgba(74, 52, 10, .5); }
.svc-hex { position: relative; width: 52px; aspect-ratio: 1 / .866; display: grid; place-items: center; margin-bottom: 20px; clip-path: var(--hex); background: var(--honey); }
.svc-hex-a, .svc-hex-b { display: none; }
.svc-hex-n { position: relative; font: 500 .8rem/1 var(--mono); color: var(--ink); }
.svc-h { font: 380 1.7rem/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px; }
.svc-p { font: 400 16px/1.65 var(--sans); color: var(--ink-2); }
.cf { position: relative; background: var(--wax-2); padding: clamp(64px, 9vw, 108px) 0; }
.cf-wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); }
.cf-big { max-width: 920px; margin-top: 22px; font: 340 clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem)/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.cf-big b { color: var(--amber); font-weight: 400; font-style: italic; }
.cf-p { max-width: 680px; margin-top: 24px; font: 400 clamp(16px, 1.5vw, 18px)/1.7 var(--sans); color: var(--ink-2); }
.cf-list { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.cf-list li { position: relative; padding-left: 30px; font: 400 17px/1.6 var(--sans); color: var(--ink-2); }
.cf-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 17px; aspect-ratio: 1 / .866; clip-path: var(--hex); background: var(--honey); }
.ilink { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--gold); transition: color .2s, border-color .2s; }
.ilink:hover { color: var(--amber); }
.ilink-m { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); transition: color .2s, border-color .2s; }
.ilink-m:hover { color: var(--amber); border-color: var(--gold); }
.faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 clamp(28px, 5vw, 64px); border-top: 1px solid var(--line-2); }
.faq-item { padding: 24px 4px; border-bottom: 1px solid var(--line-2); }
.faq-q { font: 400 1.45rem/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); margin-bottom: 8px; }
.faq-a { font: 400 16px/1.7 var(--sans); color: var(--ink-2); }
.faq-a a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--gold); }
.faq-a a:hover { color: var(--amber); }
/* karty a boxy s inline barvou papíru dostanou měkký stín (barvu nese inline styl) */
[style*="background:#FFFDF8"][style*="border-radius"] { box-shadow: var(--stin); }
a[style*="background:#FFFDF8"] { transition: transform .35s var(--ease), box-shadow .35s; }
a[style*="background:#FFFDF8"]:hover { transform: translateY(-3px); }
/* velin:tabulky-na-mobilu (16. 9. 2026): bez tohohle roluje vodorovně celá stránka */
@media (max-width: 700px) {
  .art table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
}

/* 17. ÚPRAVY PODLE BEHAVIORISTY (17. 10. 2026) */
/* telefon v hlavičce: na mobilu ikona 44 × 44, od 640 px číslo */
.top__tel { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; }
.top__tel svg { width: 20px; height: 20px; }
.top__tel span { display: none; }
@media (min-width: 640px) { .top__tel svg { display: none; } .top__tel span { display: inline; } }
/* na titulce se „Poptat stavbu“ v hlavičce ukáže až po odjetí z úvodu, ať nejsou na první obrazovce dvě stejná tlačítka */
.skript .titulka .top:not(.za-uvodem) .top__akce > .btn--ink { display: none; }
/* částice zmizí, jakmile člověk píše do formuláře */
.kontakt__panel:focus-within .pyl { display: none; }
/* volný termín jako prostý řádek, ne výrazný štítek */
.kontakt__term { font: 500 .78rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
/* odbarvení obrázků poradny jen se skriptem, který je zase obarví */
.tok__obr img { filter: none; }
.skript .tok__clanek:not(.je-dosazeno) .tok__obr img { filter: saturate(.35) brightness(.97); }
/* nekonečné smyčky výzdoby se po zhruba půl minutě zastaví */
.uvod__zare i { animation-iteration-count: 2, 4; }
.okn--hotovo::after { animation-iteration-count: 3; }
.okn--probiha::after { animation-iteration-count: 8; }
.okn--probiha small::before { animation-iteration-count: 12; }
.ucet::before { animation-iteration-count: 4; }
.pyl i { animation-iteration-count: 2; }

/* dojezd bloků podstránek (skript přidá data-r blokům pod první obrazovkou) */
@media (prefers-reduced-motion: reduce) {
  .skript .tok__clanek:not(.je-dosazeno) .tok__obr img { filter: none; }
}

/* čísla kapitol na stránce Transparentní stavba: šestiúhelník je zlatý, číslo tmavé */
.ts-hex-n { color: var(--ink) !important; }
.ts-hex-a, .ts-hex-b { background: var(--honey) !important; }
/* odkaz ze sekce rozcestníku poradny na její stránku po krocích */
.pr-sekce-odkaz { display: inline-block; margin-left: .35em; font-weight: 500; color: var(--amber); text-decoration-color: rgba(143, 92, 0, .35); }
.pr-sekce-odkaz:hover { color: var(--ink); }

/* 18. LOUKA VE VĚTRU A VČELY (pokyn Otakara 18. 10. 2026)
   Video louky se přehrává za fotkou jen tam, kde se má hýbat (bez prefers-reduced-motion, bez úsporného
   režimu dat); fotka zůstává náhradou i plakátem. Včely jsou SVG na CSS dráze, každá přeletí jednou
   za zhruba 40 s a zbytek cyklu je neviditelná. */
.kontakt__foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transition: opacity 1.8s ease; }
.kontakt__foto video.hraje { opacity: 1; }
.vcely { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vcela { position: absolute; top: var(--y); left: 0; width: 22px; height: 22px; opacity: 0;
  animation: prelet var(--t, 42s) linear infinite; animation-delay: var(--d, 0s); }
.vcela svg { width: 100%; height: 100%; animation: poskok .34s ease-in-out infinite alternate; }
.vcela--mala { width: 15px; height: 15px; }
.vcela--zpet { animation-name: prelet-zpet; }
@keyframes prelet {
  0%   { transform: translate(-40px, 0) rotate(6deg); opacity: 0; }
  1%   { opacity: .92; }
  7%   { transform: translate(25vw, -34px) rotate(-6deg); }
  14%  { transform: translate(50vw, 16px) rotate(9deg); }
  21%  { transform: translate(76vw, -22px) rotate(-5deg); }
  27%  { transform: translate(100vw, 4px) rotate(5deg); opacity: .92; }
  28%, 100% { transform: translate(100vw, 4px); opacity: 0; }
}
@keyframes prelet-zpet {
  0%   { transform: translate(100vw, 0) scaleX(-1) rotate(6deg); opacity: 0; }
  1%   { opacity: .92; }
  8%   { transform: translate(72vw, 28px) scaleX(-1) rotate(-7deg); }
  16%  { transform: translate(44vw, -18px) scaleX(-1) rotate(7deg); }
  24%  { transform: translate(14vw, 12px) scaleX(-1) rotate(-4deg); }
  29%  { transform: translate(-40px, 0) scaleX(-1); opacity: .92; }
  30%, 100% { transform: translate(-40px, 0) scaleX(-1); opacity: 0; }
}
@keyframes poskok { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .vcely, .kontakt__foto video { display: none !important; } }
@media print { .vcely, .kontakt__foto video { display: none !important; } }

/* 19. SVĚTLO V ÚVODU PUTUJE PO STĚNĚ (pokyn Otakara 18. 10. 2026): video z úvodní fotky se načte až po
   načtení stránky a prolne se přes fotku; fotka zůstává prvním snímkem i náhradou. Stejné výjimky jako louka. */
.uvod__foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; z-index: 1; opacity: 0; transition: opacity 2.4s ease; }
.uvod__foto video.hraje { opacity: 1; }
@media (max-width: 719px) { .uvod__foto video { object-position: 78% 100%; } }
@media (prefers-reduced-motion: reduce) { .uvod__foto video { display: none !important; } }
@media print { .uvod__foto video { display: none !important; } }