/* RF Style — spoločné štýly webu (verzia 3: fotky, menej textu, jednoduchšie)
   Farby: červená z loga #ED1A3B, jej tieň z loga #B00925, antracit.
   Názvy tokenov sú rovnaké ako v konfigurátore, takže ten sa prefarbí sám. */

:root {
  --ground:#F5F3F3; --surface:#FFFFFF; --surface-2:#ECE8E8;
  --ink:#1B1718; --ink-2:#524B4D; --muted:#80787A;
  --rule:#DFDADB; --rule-2:#C8C1C3;
  --accent:#ED1A3B; --accent-str:#C8102F; --accent-soft:#FCEBEE; --accent-deep:#B00925;
  --link:#C8102F;
  --btn:#D4143A; --btn-hover:#B00925; --btn-ink:#FFFFFF;
  --band:#D8143A; --band-ink:#FFFFFF; --band-soft:rgba(255,255,255,.14); --band-line:rgba(255,255,255,.62);
  --price:#1B1718;
  --plan-bg:#FBFAFA; --plan-line:#80787A; --plan-wall:#524B4D;
  --room-floor:#E9E5E6; --room-wall:#F3F1F1;
  --warn-bg:#FFF3E1; --warn-ink:#7A4A12;
  --hatch:rgba(27,23,24,.10);
  --shadow:0 1px 2px rgba(27,23,24,.05), 0 10px 30px -18px rgba(27,23,24,.42);

  --f-disp:"Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius:6px;

  --max:1240px;
  --gut:clamp(16px, 4vw, 40px);
  --hdr-h:70px;
  --arc:clamp(56px, 8vw, 128px);   /* oblúk z písmen „rf“ */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#141112; --surface:#1D191A; --surface-2:#282324;
    --ink:#F1ECED; --ink-2:#BFB6B8; --muted:#8F8688;
    --rule:#342E30; --rule-2:#473F41;
    --accent:#FF3E5B; --accent-str:#E5173A; --accent-soft:#3A1119; --accent-deep:#FF6B80;
    --link:#FF6B80;
    --btn:#E0173B; --btn-hover:#F0304F; --btn-ink:#FFFFFF;
    --band:#B80F2E; --band-ink:#FFFFFF; --band-soft:rgba(255,255,255,.12); --band-line:rgba(255,255,255,.55);
    --price:#F1ECED;
    --plan-bg:#181415; --plan-line:#8F8688; --plan-wall:#BFB6B8;
    --room-floor:#241F20; --room-wall:#1B1718;
    --warn-bg:#3A2A12; --warn-ink:#F0C98D;
    --hatch:rgba(241,236,237,.09);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --ground:#141112; --surface:#1D191A; --surface-2:#282324;
  --ink:#F1ECED; --ink-2:#BFB6B8; --muted:#8F8688;
  --rule:#342E30; --rule-2:#473F41;
  --accent:#FF3E5B; --accent-str:#E5173A; --accent-soft:#3A1119; --accent-deep:#FF6B80;
  --link:#FF6B80;
  --btn:#E0173B; --btn-hover:#F0304F; --btn-ink:#FFFFFF;
  --band:#B80F2E; --band-ink:#FFFFFF; --band-soft:rgba(255,255,255,.12); --band-line:rgba(255,255,255,.55);
  --price:#F1ECED;
  --plan-bg:#181415; --plan-line:#8F8688; --plan-wall:#BFB6B8;
  --room-floor:#241F20; --room-wall:#1B1718;
  --warn-bg:#3A2A12; --warn-ink:#F0C98D;
  --hatch:rgba(241,236,237,.09);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.9);
  color-scheme:dark;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr-h) + 16px); }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--f-body);
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img, svg { max-width:100%; }
a { color:inherit; }
p { margin:0; }
ul, ol { margin:0; }
h1, h2, h3 { margin:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
::selection { background:var(--accent); color:#fff; }
.wrap { max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- pracovná verzia ---------- */
.draft { background:var(--surface-2); color:var(--ink-2); font-size:13px; line-height:1.4; padding:6px var(--gut); text-align:center; }
.draft b { color:var(--accent-str); font-weight:700; margin-right:6px; }

/* ---------- hlavička ---------- */
.hdr { position:sticky; top:env(safe-area-inset-top, 0px); z-index:60; background:var(--ground); border-bottom:1px solid var(--rule); }
.hdr .wrap { display:flex; align-items:center; gap:18px; height:var(--hdr-h); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; color:var(--ink); }
.brand img { height:40px; width:auto; display:block; }
.brand .wm { font-family:var(--f-disp); font-stretch:120%; font-weight:800; font-size:17px; letter-spacing:.06em; line-height:1; }
.brand .wm small { display:block; font-family:var(--f-body); font-stretch:100%; font-weight:400; font-size:12.5px;
  letter-spacing:0; color:var(--muted); margin-top:4px; }
.nav { display:flex; align-items:center; gap:4px; }
.nav > a { font-weight:600; font-size:16px; text-decoration:none; padding:8px 11px; color:var(--ink-2); border-radius:var(--radius); white-space:nowrap; }
.nav > a:hover { color:var(--ink); background:var(--surface-2); }
.nav > a[aria-current="page"] { color:var(--accent-str); }
.menu-btn { display:none; font:inherit; font-size:15px; font-weight:600; background:transparent; color:var(--ink);
  border:1.5px solid var(--rule-2); border-radius:var(--radius); padding:8px 14px; cursor:pointer; align-items:center; gap:9px; }
.menu-btn i { display:block; width:16px; height:2px; background:currentColor; position:relative; }
.menu-btn i::before, .menu-btn i::after { content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor; }
.menu-btn i::before { top:-5px; } .menu-btn i::after { top:5px; }
.hdr[data-open="1"] .menu-btn i { background:transparent; }
.hdr[data-open="1"] .menu-btn i::before { top:0; transform:rotate(45deg); }
.hdr[data-open="1"] .menu-btn i::after { top:0; transform:rotate(-45deg); }

/* tlačidlo „Vypočítať cenu“ s výberom */
.pick { position:relative; margin-left:10px; }
.pick > summary { white-space:nowrap; list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px; background:var(--btn); color:var(--btn-ink);
  border-radius:var(--radius); padding:11px 16px; font-family:var(--f-disp); font-stretch:105%; font-weight:700; font-size:15.5px; line-height:1.1; }
.pick > summary::-webkit-details-marker { display:none; }
.pick > summary::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .15s; }
.pick[open] > summary::after { transform:translateY(1px) rotate(-135deg); }
.pick > summary:hover { background:var(--btn-hover); }
.pick-m { position:absolute; right:0; top:calc(100% + 8px); width:290px; background:var(--surface); border:1px solid var(--rule);
  border-radius:10px; box-shadow:0 18px 40px -18px rgba(27,23,24,.45); padding:8px; display:grid; gap:4px; z-index:70; }
.pick-m a { display:grid; grid-template-columns:56px 1fr; gap:2px 12px; align-items:center; text-decoration:none; padding:8px; border-radius:var(--radius); }
.pick-m a:hover { background:var(--surface-2); }
.pick-m img { grid-row:span 2; width:56px; height:42px; object-fit:cover; border-radius:4px; display:block; }
.pick-m b { font-family:var(--f-disp); font-stretch:105%; font-size:16px; line-height:1.2; }
.pick-m span { font-size:13.5px; color:var(--muted); line-height:1.3; }

@media (max-width:1180px) {
  .menu-btn { display:inline-flex; }
  .nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--ground); border-bottom:1px solid var(--rule); box-shadow:0 20px 30px -24px rgba(0,0,0,.35);
    padding:6px var(--gut) 22px; max-height:calc(100dvh - var(--hdr-h) - env(safe-area-inset-top, 0px)); overflow-y:auto; }
  .hdr[data-open="1"] .nav { display:flex; }
  .nav > a { font-size:21px; font-family:var(--f-disp); font-stretch:108%; font-weight:700; color:var(--ink); padding:13px 0; border-bottom:1px solid var(--rule); border-radius:0; }
  .nav > a:hover { background:none; }
  .pick { margin:18px 0 0; }
  .pick > summary { display:none; }
  .pick-m { position:static; width:auto; border:0; box-shadow:none; padding:0; background:none; display:grid !important; gap:10px; }
  .pick-m a { background:var(--btn); color:var(--btn-ink); grid-template-columns:1fr; padding:14px 16px; }
  .pick-m a + a { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
  .pick-m img { display:none; }
  .pick-m a span { color:inherit; opacity:.8; }
}
@media (max-width:420px) { .brand .wm small { display:none; } .brand img { height:36px; } }

/* ---------- typografia ---------- */
.eyebrow { font-size:13.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-str); }
.h1 { font-family:var(--f-disp); font-stretch:112%; font-weight:800; font-size:clamp(38px, 5.4vw, 68px); line-height:1.02; letter-spacing:-.025em; text-wrap:balance; }
.h2 { font-family:var(--f-disp); font-stretch:110%; font-weight:800; font-size:clamp(28px, 3.4vw, 42px); line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
.h3 { font-family:var(--f-disp); font-stretch:106%; font-weight:700; font-size:clamp(19px, 1.7vw, 22px); line-height:1.2; letter-spacing:-.01em; }
.lede { font-size:clamp(18px, 1.5vw, 20.5px); line-height:1.55; color:var(--ink-2); max-width:52ch; }
.muted { color:var(--ink-2); }

/* ---------- tlačidlá ---------- */
.go { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--f-disp); font-stretch:105%; font-weight:700;
  font-size:17px; line-height:1.1; text-decoration:none; background:var(--btn); color:var(--btn-ink); border:0;
  border-radius:var(--radius); padding:16px 22px; cursor:pointer; transition:background .15s; }
.go:hover { background:var(--btn-hover); }
.go .ar { transition:transform .15s; font-family:var(--f-body); font-weight:600; }
.go:hover .ar { transform:translateX(3px); }
.go-line { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.go-line:hover { background:var(--ink); color:var(--ground); }
.go-text { font-weight:600; text-decoration:none; color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:1px; }
.go-text:hover { color:var(--link); }
.cta-row { display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; }

/* ---------- zástupné údaje ---------- */
.tbd { font-size:.82em; font-weight:600; background:var(--accent-soft); color:var(--accent-str); padding:2px 8px; border-radius:4px; white-space:nowrap; letter-spacing:0; text-transform:none; }
.tbd-block { border:1.5px dashed var(--rule-2); border-radius:var(--radius); padding:16px 18px; color:var(--ink-2); font-size:15.5px; background:var(--surface); }
.tbd-block b { color:var(--accent-str); }

/* ---------- sekcie ---------- */
.sec { padding-block:clamp(56px, 7vw, 100px); }
.sec + .sec { padding-top:0; }
.sec-hd { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:14px 32px; margin-bottom:clamp(26px, 3vw, 40px); }
.sec-hd .t { display:grid; gap:10px; max-width:720px; }
.pagehead { padding-block:clamp(40px, 5vw, 72px) clamp(32px, 4vw, 52px); }
.pagehead .wrap { display:grid; gap:18px; justify-items:start; }

/* ---------- úvod ---------- */
.hero { padding-block:clamp(32px, 4.5vw, 64px) clamp(56px, 7vw, 96px); }
.hero .wrap { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:36px clamp(32px, 5vw, 72px); align-items:center; }
.hero-tx { display:grid; gap:24px; align-content:start; }
.hero-ph { margin:0; position:relative; height:clamp(320px, 40vw, 580px); overflow:hidden; background:var(--surface-2);
  border-radius:var(--arc) var(--radius) var(--radius) var(--radius); }
.hero-ph .hs-in { position:absolute; inset:0; cursor:zoom-in; }
.hero-ph img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.hero-ph figcaption { position:absolute; left:16px; bottom:16px; max-width:calc(100% - 170px); background:var(--surface); color:var(--ink);
  border-radius:var(--radius); box-shadow:0 6px 18px -10px rgba(0,0,0,.4); overflow:hidden; display:grid; }
.hs-cap { font:inherit; font-size:14px; font-weight:600; line-height:1.3; color:var(--ink); background:none; border:0; padding:7px 12px 8px;
  display:flex; gap:10px; align-items:baseline; cursor:zoom-in; text-align:left; min-width:0; }
.hs-cap .hs-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.hs-cap .hs-n { flex:none; font-size:12.5px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.hs-cap .hs-n:empty { display:none; }
.hs-bar { display:block; height:2px; background:var(--accent); transform-origin:left center; transform:scaleX(0); }
.hs-bar.bezi { animation:hs-cas 5.5s linear both; }
@keyframes hs-cas { to { transform:scaleX(1); } }
.hero-ph:has(:focus-visible) .hs-bar, .hero-ph[data-pauza] .hs-bar, .hero-ph[data-mimo] .hs-bar { animation-play-state:paused; }
.hs-ctl { position:absolute; right:14px; bottom:14px; display:flex; gap:2px; padding:4px; border-radius:999px;
  background:var(--surface); background:color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 6px 18px -10px rgba(0,0,0,.45); }
.hs-ctl[hidden] { display:none; }
.hs-ctl button { width:34px; height:34px; border-radius:50%; border:0; background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; padding:0; }
.hs-ctl button:hover { background:var(--surface-2); }
.hs-ctl svg { width:16px; height:16px; display:block; }
.hs-z .i-s, .hero-ph[data-pauza] .hs-z .i-z { display:none; }
.hero-ph[data-pauza] .hs-z .i-s { display:block; }
.hero-ph[data-tichy] .hs-z { display:none; }
.hs-t.zmena { animation:hs-text .5s var(--e-out) both; }
@keyframes hs-text { from { opacity:0; transform:translateY(6px); } }
.hero-note { font-size:15px; color:var(--muted); }
@media (max-width:900px) {
  .hero .wrap { grid-template-columns:1fr; }
  .hero-ph { order:-1; }
  .hero-ph { height:auto; aspect-ratio:4 / 3; }
}

/* ---------- karty s fotkou ---------- */
.cards { display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr)); gap:clamp(18px, 2.4vw, 30px); }
.cards.c4 { --cols:4; }
.card { display:grid; gap:12px; align-content:start; text-decoration:none; color:inherit; }
.card .ph, .card-ph { display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--radius); background:var(--surface-2); }
.card .ph img, .card-ph img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
a.card:hover .ph img { transform:scale(1.035); }
.card .h3 { display:flex; align-items:center; gap:8px; }
a.card .h3::after { content:"→"; font-family:var(--f-body); font-weight:600; color:var(--accent-str); transition:transform .15s; }
a.card:hover .h3::after { transform:translateX(4px); }
.card p { color:var(--ink-2); font-size:16.5px; line-height:1.5; }
@media (max-width:1000px) { .cards.c4 { --cols:2; } }
@media (max-width:760px) { .cards { --cols:1; } .cards.c4 { --cols:2; } }
@media (max-width:480px) { .cards.c4 { --cols:1; } }

/* ---------- konfigurátory: červený blok ---------- */
.band { background:var(--band); color:var(--band-ink); border-radius:var(--arc) var(--radius) var(--radius) var(--radius);
  padding:clamp(34px, 5vw, 64px) clamp(22px, 4.5vw, 64px); display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:28px clamp(28px, 4vw, 56px); align-items:center; }
.band .eyebrow { color:var(--band-ink); opacity:.85; }
.band-tx { display:grid; gap:14px; }
.band-tx p { font-size:clamp(17px, 1.4vw, 19px); opacity:.95; max-width:44ch; }
.tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.tile { background:#fff; color:#1B1718; border-radius:10px; overflow:hidden; text-decoration:none; display:grid; transition:transform .2s; }
.tile:hover { transform:translateY(-3px); }
.tile img { width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; display:block; }
.tile .tl { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px 16px; }
.tile .tl b { font-family:var(--f-disp); font-stretch:105%; font-weight:700; font-size:18px; line-height:1.2; }
.tile .tl small { display:block; font-family:var(--f-body); font-weight:400; font-size:14px; line-height:1.35; color:#524B4D; margin-top:3px; }
.tile .tl::after { content:"→"; font-family:var(--f-body); font-weight:700; font-size:18px; color:#C8102F; flex:none; }
@media (max-width:900px) { .band { grid-template-columns:1fr; } }
@media (max-width:460px) { .tiles { grid-template-columns:1fr; } }
.real-grid.kratko .d { display:none; }

/* ---------- postup ---------- */
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 32px); counter-reset:k; }
.steps li { display:grid; gap:8px; align-content:start; counter-increment:k; }
.steps li::before { content:counter(k); width:38px; height:38px; border-radius:50%; background:var(--accent-soft); color:var(--accent-str);
  display:grid; place-items:center; font-family:var(--f-disp); font-weight:800; font-size:17px; margin-bottom:4px; }
.steps p { color:var(--ink-2); font-size:16.5px; line-height:1.5; }
@media (max-width:900px) { .steps { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:480px) { .steps { grid-template-columns:1fr; } }

/* ---------- realizácie ---------- */
.real-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(18px, 2.4vw, 30px); }
.rc { margin:0; display:grid; gap:10px; align-content:start; }
.rc[hidden] { display:none; }
.rc figcaption { display:grid; gap:2px; }
.rc .typ { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rc figcaption b { font-family:var(--f-disp); font-stretch:105%; font-weight:700; font-size:18.5px; line-height:1.25; }
.rc figcaption .d { color:var(--ink-2); font-size:15.5px; line-height:1.45; }
.rc-open { position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; color:inherit; font:inherit; text-align:left; }
.rc-open:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius); }
.photo { display:block; position:relative; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--radius); background:var(--surface-2); }
.photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.rc-open:hover .photo img { transform:scale(1.035); }
.photo .pl { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px; color:var(--muted); font-size:15px; }
.rc-n { position:absolute; right:10px; bottom:10px; font-size:13px; font-weight:600; background:var(--surface); color:var(--ink); padding:4px 9px; border-radius:4px; }
@media (max-width:900px) { .real-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px) { .real-grid { grid-template-columns:1fr; } }

/* ---------- otázky ---------- */
.faq { border-top:1px solid var(--rule-2); max-width:860px; }
.faq details { border-bottom:1px solid var(--rule-2); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:20px 0; font-family:var(--f-disp); font-stretch:105%; font-weight:700; font-size:clamp(18px, 1.6vw, 20px); line-height:1.3; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; flex:none; width:16px; height:16px;
  background:linear-gradient(var(--accent), var(--accent)) center/16px 2px no-repeat,
             linear-gradient(var(--accent), var(--accent)) center/2px 16px no-repeat; transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq .a { padding:0 0 22px; max-width:64ch; color:var(--ink-2); }

/* ---------- výzva nad pätou ---------- */
.callout-wrap { background:var(--surface-2); }
.callout { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:24px clamp(28px, 5vw, 64px); align-items:center;
  padding-block:clamp(44px, 6vw, 80px); }
.callout .c { display:grid; gap:10px; }
.callout .big { font-family:var(--f-disp); font-stretch:108%; font-weight:800; font-size:clamp(21px, 2.3vw, 28px); line-height:1.2; }
.callout .big a { text-decoration:none; }
.callout .big a:hover { color:var(--link); }
@media (max-width:860px) { .callout { grid-template-columns:1fr; } }

/* ---------- päta ---------- */
.ftr { background:var(--surface); border-top:1px solid var(--rule); padding-block:44px calc(28px + env(safe-area-inset-bottom, 0px)); font-size:15.5px; }
.ftr-g { display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap:28px 32px; }
.ftr .b { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ftr .b img { height:46px; width:auto; }
.ftr .b .nm { font-family:var(--f-disp); font-stretch:120%; font-weight:800; font-size:19px; letter-spacing:.06em; line-height:1; }
.ftr h4 { margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.ftr ul { list-style:none; padding:0; display:grid; gap:7px; }
.ftr a { text-decoration:none; color:var(--ink-2); }
.ftr a:hover { color:var(--link); }
.ftr-b { margin-top:32px; padding-top:18px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; color:var(--muted); font-size:14px; }
@media (max-width:900px) { .ftr-g { grid-template-columns:repeat(2, minmax(0, 1fr)); } .ftr-g > :first-child { grid-column:1 / -1; } }
@media (max-width:480px) { .ftr-g { grid-template-columns:1fr; } }

/* ---------- prehliadač fotiek ---------- */
.lb { position:fixed; inset:0; z-index:100; background:rgba(14,11,12,.94); color:#F1ECED; display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto; padding:calc(10px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
.lb[hidden] { display:none; }
.lb-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 4px 8px; font-size:14px; }
.lb-x, .lb-p, .lb-n { font:inherit; color:#F1ECED; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); cursor:pointer; }
.lb-x { font-size:14px; padding:8px 12px; }
.lb-x:hover, .lb-p:hover, .lb-n:hover { background:#D4143A; border-color:#D4143A; }
.lb-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:0; }
.lb-img { max-width:100%; max-height:100%; object-fit:contain; display:block; border-radius:4px; }
.lb-p, .lb-n { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:20px; }
.lb-p { left:4px; } .lb-n { right:4px; }
.lb-cap { max-width:70ch; margin:12px auto 0; text-align:center; display:grid; gap:2px; font-size:15px; color:#BFB6B8; padding-inline:8px; }
.lb-cap b { font-family:var(--f-disp); font-stretch:108%; color:#fff; font-size:18px; }

/* ---------- konfigurátor v náhľade (jeden súbor) ---------- */
.cfg-frame { display:block; width:100%; border:0; background:var(--ground); }
.route[data-cfg] .draft { display:none; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media print { .draft, .hdr, .ftr, .callout-wrap { display:none !important; } }

/* ---------- mobil: kratšie stránky ---------- */
@media (max-width:760px) {
  .cards:not(.c4) { gap:14px; }
  .cards:not(.c4) .card { grid-template-columns:minmax(0, 40%) minmax(0, 1fr); grid-template-rows:auto 1fr; gap:4px 14px; align-items:start; }
  .cards:not(.c4) .card .ph { grid-row:1 / span 2; }
  .cards:not(.c4) .card .h3 { align-self:end; padding-top:6px; }
  .cards:not(.c4) .card p { font-size:15px; }
}
@media (max-width:560px) {
  .real-grid.kratko { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 12px; }
  .real-grid.kratko .rc figcaption b { font-size:15.5px; }
  .real-grid.kratko .rc .typ { font-size:11.5px; }
  .real-grid.kratko .rc-n { display:none; }
}
@media (max-width:480px) {
  .cards.c4 { --cols:2; gap:20px 12px; }
  .cards.c4 .card p, .cards.c4 p { font-size:15px; }
}
@media (max-width:460px) {
  .tile { grid-template-columns:38% minmax(0, 1fr); align-items:center; }
  .tile img { height:100%; aspect-ratio:auto; min-height:92px; }
  .tile .tl { padding:12px 14px; }
}

/* ---------- štyri konfigurátory ---------- */
.band.b4 { grid-template-columns:1fr; }
.band.b4 .band-tx p { max-width:62ch; }
.tiles.t4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:1000px) { .tiles.t4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:460px) { .tiles.t4 { grid-template-columns:1fr; } }
.ftr-b a { color:inherit; }
.pick-mob { display:none; }
@media (max-width:1180px) {
  .pick { display:none; }
  .pick-mob { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
  .pick-mob .pm-t { grid-column:1 / -1; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .pick-mob a { display:grid; gap:2px; text-decoration:none; color:var(--ink); border-radius:var(--radius); padding:12px 14px; box-shadow:inset 0 0 0 1.5px var(--rule-2); }
  .pick-mob a:first-of-type { background:var(--btn); color:var(--btn-ink); box-shadow:none; }
  .pick-mob a:hover { box-shadow:inset 0 0 0 1.5px var(--ink); }
  .pick-mob b { font-family:var(--f-disp); font-stretch:105%; font-size:17px; line-height:1.2; }
  .pick-mob span { font-size:13.5px; opacity:.8; line-height:1.3; }
}

/* =====================================================================
   POHYB
   Jedna myšlienka: nábytok sa „otvára“. Fotky sa odkrývajú ako dvierka
   alebo výsuv, oblúk z loga sa dotiahne, nič neposkakuje.
   Všetko sa vypne pri prefers-reduced-motion a bez JavaScriptu nič neskryje.
   ===================================================================== */
:root { --e-out:cubic-bezier(.16, 1, .3, 1); --e-io:cubic-bezier(.65, 0, .35, 1); }

/* plynulý prechod medzi stránkami (Chrome, Edge, Safari) */
@view-transition { navigation:auto; }
.hdr { view-transition-name:hdr; }
::view-transition-old(root) { animation:.2s var(--e-io) both vt-von; }
::view-transition-new(root) { animation:.5s var(--e-out) both vt-dnu; }
@keyframes vt-von { to { opacity:0; transform:translateY(-6px); } }
@keyframes vt-dnu { from { opacity:0; transform:translateY(16px); } }
html.vt-lok::view-transition-old(root) { animation:.22s ease both vt-fade-von; }
html.vt-lok::view-transition-new(root) { animation:.22s ease both vt-fade-dnu; }
@keyframes vt-fade-von { to { opacity:0; } }
@keyframes vt-fade-dnu { from { opacity:0; } }

/* hlavička pri posúvaní: priesvitná, pri ceste dole sa skryje */
.hdr { transition:transform .45s var(--e-out), background-color .25s, box-shadow .25s; }
.hdr[data-stuck] { background:color-mix(in srgb, var(--ground) 84%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 12px 32px -26px rgba(0,0,0,.55); }
.hdr[data-hide] { transform:translateY(-100%); }

/* tlačidlá: jemný tlak */
.go, .tile, .pick > summary { -webkit-tap-highlight-color:transparent; }
.go:active { transform:translateY(1px) scale(.985); }
.go { transition:background .15s, transform .15s; }

/* konfigurátory: 3D slučky v dlaždiciach (animovaný AVIF; pri obmedzenom pohybe statický obrázok) */
.tile .tv { position:relative; display:block; aspect-ratio:3 / 2; overflow:hidden; background:#EEEBEB; }
.tile .tv img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--e-out); }
.tile:hover .tv img { transform:scale(1.04); }
.tile .tv i { position:absolute; left:10px; top:10px; font-style:normal; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  background:rgba(255,255,255,.9); color:#1B1718; padding:3px 8px; border-radius:999px; display:flex; align-items:center; gap:6px; }
.tile .tv i::before { content:""; width:6px; height:6px; border-radius:50%; background:#D4143A; }
.tile .tv i::before { animation:pulz 1.6s ease-in-out infinite; }
@keyframes pulz { 50% { opacity:.25; } }
.tile .tl::after { transition:transform .25s var(--e-out); }
.tile:hover .tl::after { transform:translateX(4px); }
.tile { transition:transform .35s var(--e-out), box-shadow .35s var(--e-out); }
.tile:hover { transform:translateY(-4px); box-shadow:0 22px 40px -26px rgba(0,0,0,.6); }
@media (max-width:460px) {
  .tile .tv { aspect-ratio:auto; height:100%; min-height:92px; }
  .tile .tv i { display:none; }
}

/* postup: čiara sa vyplní, kroky sa rozsvietia */
.steps { position:relative; --g:clamp(16px, 2.4vw, 32px); gap:var(--g); }
.steps li { position:relative; z-index:1; }
.steps li::before { transition:background-color .4s, color .4s, transform .5s var(--e-out); transition-delay:calc(.25s + var(--k, 0) * .28s); }
.steps::after { content:""; position:absolute; z-index:0; top:18px; height:2px; left:19px; right:calc((100% - 3 * var(--g)) / 4 - 19px);
  background:linear-gradient(var(--accent), var(--accent)) left / 0% 100% no-repeat, var(--rule-2); transition:background-size 1.3s var(--e-io) .2s; }
.steps.in::after { background-size:100% 100%, auto; }
.steps.in li::before { background:var(--accent-str); color:#fff; }
.steps li:nth-child(2) { --k:1; } .steps li:nth-child(3) { --k:2; } .steps li:nth-child(4) { --k:3; }
@media (max-width:900px) { .steps::after { display:none; } }

/* filter realizácií a prehliadač fotiek: presun cez View Transitions */
::view-transition-group(*) { animation-duration:.5s; animation-timing-function:var(--e-out); }
.lb { transition:background-color .3s; }

@media (prefers-reduced-motion:no-preference) {
  /* úvod: slová nadpisu vyjdú zospodu, fotka sa otvorí ako posuvné dvierka */
  .js .h1 .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
  .js .h1 .w > span { display:inline-block; animation:slovo 1s var(--e-out) both; animation-delay:calc(.06s + var(--wi, 0) * 65ms); }
  @keyframes slovo { from { transform:translateY(108%); } }
  .js .hero-tx > :not(.h1), .js .pagehead .wrap > :not(.h1) { animation:hore .9s var(--e-out) both; }
  .js .hero-tx > :nth-child(1), .js .pagehead .wrap > :nth-child(1) { animation-delay:0s; }
  .js .hero-tx > :nth-child(3), .js .pagehead .wrap > :nth-child(3) { animation-delay:.32s; }
  .js .hero-tx > :nth-child(4), .js .pagehead .wrap > :nth-child(4) { animation-delay:.42s; }
  .js .hero-tx > :nth-child(5), .js .pagehead .wrap > :nth-child(5) { animation-delay:.52s; }
  @keyframes hore { from { opacity:0; transform:translateY(18px); } }
  .js .hero-ph { animation:dvere 1.35s var(--e-io) .12s both; }
  @keyframes dvere {
    from { clip-path:inset(0 0 0 100% round var(--arc) var(--radius) var(--radius) var(--radius)); }
    to { clip-path:inset(0 0 0 0 round var(--arc) var(--radius) var(--radius) var(--radius)); }
  }
  .js .hero-ph img { animation:usadit 2s var(--e-out) .12s both; }
  @keyframes usadit { from { scale:1.16; } }
  /* ďalšia fotka v úvode: odsunú sa dvierka a fotka sa usadí */
  .js .hero-ph img.nova { animation:hs-dvere 1.15s var(--e-io) both, usadit 2.6s var(--e-out) both; }
  @keyframes hs-dvere { from { clip-path:inset(0 0 0 100%); } to { clip-path:inset(0 0 0 0); } }
  .js .hero-ph figcaption { animation:hore .6s var(--e-out) 1.15s both; }

  /* pri posúvaní: texty vyjdú, fotky sa vysunú zospodu ako zásuvka */
  .js [data-rv] { opacity:0; transform:translateY(22px);
    transition:opacity .7s var(--e-out), transform .9s var(--e-out); transition-delay:calc(var(--i, 0) * 75ms); }
  .js [data-rv].in { opacity:1; transform:none; }
  .js [data-rv="foto"] { opacity:1; transform:none; clip-path:inset(100% 0 0 0 round var(--radius));
    transition:clip-path 1.05s var(--e-out); transition-delay:calc(var(--i, 0) * 90ms); }
  .js [data-rv="foto"] img { scale:1.14; transition:scale 1.5s var(--e-out); transition-delay:calc(var(--i, 0) * 90ms); }
  .js [data-rv="foto"].in { clip-path:inset(0 0 0 0 round var(--radius)); }
  .js [data-rv="foto"].in img { scale:1; }

  /* červený blok: oblúk z loga sa dotiahne */
  .js .band[data-rv] { opacity:1; transform:none; border-top-left-radius:var(--radius);
    clip-path:inset(4% 3% 4% 3% round var(--radius));
    transition:clip-path 1.1s var(--e-out), border-radius 1.1s var(--e-out) .15s; }
  .js .band[data-rv].in { clip-path:inset(0 0 0 0 round var(--arc) var(--radius) var(--radius) var(--radius)); border-top-left-radius:var(--arc); }
}

/* posun fotky v úvode pri scrollovaní (len kde to prehliadač vie bez JavaScriptu) */
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    .hero-ph .hs-in { scale:1.08; animation:drift linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; }
    @keyframes drift { to { translate:0 3.5%; } }
  }
}
@media print { .js [data-rv] { opacity:1 !important; transform:none !important; clip-path:none !important; } }

/* rozbaľovanie a vyskakovacie prvky */
@media (prefers-reduced-motion:no-preference) {
  .pick[open] .pick-m { animation:vyskoc .32s var(--e-out) both; transform-origin:top right; }
  @keyframes vyskoc { from { opacity:0; transform:translateY(-6px) scale(.97); } }
  .pick[open] .pick-m a { animation:hore .4s var(--e-out) both; }
  .pick[open] .pick-m a:nth-child(2) { animation-delay:.04s; }
  .pick[open] .pick-m a:nth-child(3) { animation-delay:.08s; }
  .pick[open] .pick-m a:nth-child(4) { animation-delay:.12s; }
  .hdr[data-open="1"] .nav { animation:zosun .4s var(--e-out) both; }
  @keyframes zosun { from { opacity:0; transform:translateY(-10px); } }
  .lb:not([hidden]) { animation:zjav .25s ease-out both; }
  @keyframes zjav { from { opacity:0; } }
  @supports selector(::details-content) {
    .faq { interpolate-size:allow-keywords; }
    .faq details::details-content { block-size:0; overflow:clip; transition:block-size .45s var(--e-out), content-visibility .45s allow-discrete; }
    .faq details[open]::details-content { block-size:auto; }
  }
}
@media (max-width:560px) {
  .hs-ctl { top:12px; bottom:auto; right:12px; }
  .hero-ph figcaption { left:12px; bottom:12px; max-width:calc(100% - 24px); }
}