/* Firemný web: vzhľad podľa schváleného náčrtu (docs/Claude/web/mockups/firemny-web, 2026-11-03).
   Farby prichádzajú z brands/<brand>/web/brand-colors.css (roly M3 brandu), písma z brands/<brand>/web/public/fonts;
   build.mjs ich kopíruje do dist/<brand>/assets a pripája pred týmto súborom. Jedna svetlá verzia bez tmavej témy
   (Samo 2026-11-03): web je vizitka brandu a má vyzerať vždy rovnako. */
:root {
  --font-display: "brand-display", system-ui, sans-serif;
  --font-text: "brand-text", system-ui, sans-serif;
  --max: 1160px;
  /* úvodný pás a pás pre predajcov: tmavšia šalviová z farby akcie (primary #4f6b49) */
  --sage-dark: #46603f;
  --sage-mid: #4f6b49;
  --sage-light: #637f5c;
}
@font-face { font-family: "brand-display"; font-weight: 300 700; font-display: swap; src: url("fonts/brand-display.woff2") format("woff2"); }
@font-face { font-family: "brand-text"; font-weight: 200 1000; font-display: swap; src: url("fonts/brand-text.woff2") format("woff2"); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--background); color: var(--on-background); font: 400 17px/26px var(--font-text); }
a { color: var(--primary); text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -0.015em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.sp { flex: 1; }
/* odkazy v bežnom texte: podčiarknuté, aby sa dali rozoznať od textu */
.step p a, .need li a, .band li a, .band p a, .doc p a, .doc li a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* hlavička: ponuka sedí na účiari loga, tlačidlo webovej aplikácie je biely odznak */
header.top .wrap { display: flex; align-items: center; gap: 36px; height: 84px; }
.logo { align-self: center; } .logo img { height: 44px; display: block; }
nav.menu { display: flex; gap: 28px; font-weight: 700; font-size: 17px; line-height: 22px; align-self: flex-end; margin-bottom: 24px; }
nav.menu a { color: rgba(255, 255, 255, 0.85); }
details.burger { display: none; }

/* tlačidlá */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 24px; font: 700 15px/48px var(--font-display); white-space: nowrap; }
.btn.filled { background: var(--primary); color: var(--on-primary); }
.btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn.outl { border: 1px solid var(--outline); color: var(--primary); }
.btn.small { height: 40px; line-height: 40px; padding: 0 18px; font-size: 14px; }

/* odznaky obchodov (v W1 kreslené; oficiálne odznaky Google Play a App Store prídu v W2 po jazykoch) */
.badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 12px; border-radius: 10px; background: #141414; color: #fff; border: 1px solid #3a3a3a; }
.badge svg { width: 26px; height: 26px; fill: #fff; }
.badge .t { display: flex; flex-direction: column; line-height: 1; }
.badge .t small { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; font-family: var(--font-text); }
.badge .t b { font: 600 18px/1.1 system-ui, "Segoe UI", sans-serif; }
.badge.web { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.badge.top { height: 46px; padding: 0 14px 0 10px; background: #fff; color: var(--sage-mid); border-color: #fff; }
.badge.top svg { width: 24px; height: 24px; fill: var(--sage-mid); } .badge.top .t b { font-size: 16px; }

/* oficiálne odznaky Google Play (PNG má vlastný okraj, preto vyšší) a App Store (SVG bez okraja) — rovnaká viditeľná výška 40 px */
.store { display: inline-flex; align-items: center; }
.store.play img { height: 58px; margin: -9px -10px; } .store.apple img { height: 40px; }
/* roleta jazyka a ponuka ☰: <details> bez skriptu */
details.lang, details.burger { position: relative; }
details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; }
details.lang > summary { font-weight: 700; font-size: 14px; color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 20px; padding: 6px 14px; }
details ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; margin: 0; padding: 8px 0; list-style: none; min-width: 180px; background: var(--surface-container-lowest); border-radius: 14px; box-shadow: 0 12px 32px rgba(20, 20, 20, 0.18); }
details li a { display: block; padding: 9px 18px; color: var(--on-surface); font-weight: 600; font-size: 15px; }
details li a:hover, details li a[aria-current] { background: var(--surface-container-high); }
details.burger > summary { width: 40px; height: 40px; align-items: center; justify-content: center; font-size: 26px; color: rgba(255, 255, 255, 0.85); }
/* rámy zariadení: telefón v pomere 9:18 so stavovým riadkom (čas vľavo, signál / Wi-Fi / batéria vpravo) */
.phone { width: 250px; border-radius: 34px; background: #101211; padding: 10px; box-shadow: 0 30px 60px rgba(20, 20, 20, 0.28); position: relative; flex: none; }
.phone .scr { width: 100%; border-radius: 25px; overflow: hidden; background: #f5f6f2; display: flex; flex-direction: column; }
.phone .scr::before { content: "9:41"; flex: none; height: 26px; background: #f5f6f2 url("status-icons.svg") no-repeat right 14px center / 60px 12px; font: 700 11px/26px var(--font-text); color: #141414; padding-left: 18px; }
.phone img { width: 100%; height: auto; display: block; flex: none; }
.browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 36px 80px rgba(20, 20, 20, 0.22), 0 0 0 1px rgba(20, 20, 20, 0.08); }
.browser .tb { height: 38px; background: #e9ece6; display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.browser .tb i { width: 11px; height: 11px; border-radius: 50%; background: #c9cec6; display: block; }
.browser .tb span { margin-left: 12px; flex: 1; max-width: 420px; height: 22px; border-radius: 11px; background: #f7f8f5; font: 500 12px/22px var(--font-text); color: #7a8178; padding: 0 12px; }
.browser img { width: 100%; display: block; }

/* úvod na tmavšej šalviovej s vlnkou do papiera */
.hero { background: linear-gradient(160deg, var(--sage-dark) 0%, var(--sage-mid) 45%, var(--sage-light) 100%); color: #fff; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 420px at 90% 10%, rgba(255, 255, 255, 0.14), transparent 65%), radial-gradient(500px 360px at 0% 100%, rgba(20, 20, 20, 0.18), transparent 65%); pointer-events: none; }
.hero header.top { position: relative; }
.hero .body { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; padding: 56px 28px 0; min-height: 540px; }
.hero .body > div:first-child { padding-bottom: 110px; }
.hero h1 { font-size: 56px; line-height: 62px; color: #fff; text-wrap: balance; }
.hero .lead { font-size: 20px; line-height: 31px; color: #e8ede4; margin: 22px 0 32px; max-width: 520px; }
.hero .note { margin-top: 18px; font-size: 17px; line-height: 26px; color: #fff; }
.hero .phones { display: flex; justify-content: center; align-items: flex-end; gap: 22px; align-self: end; }
.hero .phone { background: #141414; box-shadow: 0 30px 60px rgba(20, 30, 18, 0.45); margin-bottom: -70px; }
.hero .phone.back { width: 220px; margin-bottom: -130px; }
.hero .wave { z-index: 1; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; display: block; fill: var(--background); }
.hero + .band { padding-top: 150px; }

/* pásy funkcií: veľká snímka a text, striedavo vľavo a vpravo, podklad papier / opar */
/* pásy funkcií (Samo 2026-11-04, možnosť 4 z náčrtu firemny-web-obrazky): snímka webovej aplikácie je vždy veľká
   (do 1160 px, takmer skutočná veľkosť), text stojí vedľa nej len na širokej obrazovke (od 1700 px, pásy striedajú
   strany), na užšej je text nad snímkou; klik na snímku ju otvorí cez celú obrazovku (<dialog> nižšie) */
.band { padding: 96px 0 64px; }
.band.alt { background: var(--surface-container-high); }
.band .wrap { max-width: var(--max); display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.band .text { max-width: 720px; order: -1; }
.band .shot { cursor: zoom-in; }
@media (min-width: 1700px) {
  /* široká obrazovka (Samo 2026-11-04): všetky sekcie majú rovnaký okraj ako pásy so snímkami; odseky ostávajú úzke */
  :root { --max: 1800px; }
  .hero .body { grid-template-columns: minmax(0, 760px) 1fr; }
  .band .wrap { grid-template-columns: minmax(0, 1160px) minmax(340px, 1fr); gap: 56px; }
  .band .text { order: 0; max-width: none; }
  .band.text-left .wrap { grid-template-columns: minmax(340px, 1fr) minmax(0, 1160px); }
  .band.text-left .text { order: -1; }
}
/* zväčšenie snímky po kliknutí: jeden <dialog> na stránke, bez cudzích služieb */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
dialog.lightbox::backdrop { background: rgba(20, 20, 20, 0.86); }
dialog.lightbox img { max-width: 96vw; max-height: 92vh; display: block; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); cursor: zoom-out; }
dialog.lightbox p { color: #fff; text-align: center; font-size: 14px; margin: 10px 0 0; }
.band .kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/22px var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; }
.band .kicker i { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); display: block; }
.band h2 { font-size: 38px; line-height: 46px; margin-bottom: 14px; }
.band p { color: var(--on-surface-variant); font-size: 18px; line-height: 28px; }
.band ul, .need ul { margin: 18px 0 0; padding: 0; list-style: none; }
.band li, .need li { position: relative; padding-left: 24px; margin: 0 0 10px; color: var(--on-surface); font-size: 16px; line-height: 25px; }
.band li::before, .need li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); }

/* štyri malé karty */
.quad { background: var(--surface-container-high); padding: 72px 0; }
.quad h2 { font-size: 32px; line-height: 40px; margin-bottom: 28px; }
.quad .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.quad .card { background: var(--surface-container-lowest); border-radius: 20px; padding: 24px; }
.quad .ico { width: 44px; height: 44px; border-radius: 14px; background: var(--secondary-container); color: var(--on-secondary-container); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.quad .ico svg { width: 24px; height: 24px; fill: currentColor; }
.quad h3 { font-size: 19px; line-height: 26px; margin-bottom: 6px; }
.quad p { color: var(--on-surface-variant); font-size: 15px; line-height: 23px; }

/* ako začať na svetlej šalviovej */
.strip { background: var(--secondary-container); color: var(--on-secondary-container); padding: 64px 0; }
.strip h2 { font-size: 32px; line-height: 40px; margin-bottom: 28px; }
.strip .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.strip .step { background: var(--surface-container-lowest); border-radius: 20px; padding: 22px 24px; }
.strip .n { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 16px/1 var(--font-display); margin-bottom: 12px; }
.strip h3 { font-size: 19px; line-height: 26px; color: var(--on-surface); }
.strip p { color: var(--on-surface-variant); font-size: 15px; line-height: 23px; margin-top: 4px; }

/* podporované lokátory */
.makers-sec { padding: 80px 0; }
.makers-sec .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
.makers-sec h2 { font-size: 38px; line-height: 46px; margin-bottom: 14px; }
.makers-sec p { color: var(--on-surface-variant); font-size: 18px; line-height: 28px; }
.makers { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 26px; }
.chip { border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); border-radius: 14px; padding: 12px 20px; font: 700 16px/22px var(--font-display); }
.need { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: 20px; padding: 26px 28px; }
.need h3 { font-size: 21px; line-height: 28px; margin-bottom: 8px; }
.need ul { margin-top: 10px; }

/* cenník */
.pricing { background: var(--surface-container-high); padding: 80px 0; }
.pricing .head { max-width: 680px; margin-bottom: 32px; }
.pricing h2 { font-size: 38px; line-height: 46px; margin-bottom: 12px; }
.pricing .head p { color: var(--on-surface-variant); font-size: 18px; line-height: 28px; }
.pricing .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pricing .card { background: var(--surface-container-lowest); border-radius: 24px; padding: 30px 32px; }
.pricing .card.hi { background: var(--primary); color: #fff; }
.pricing h3 { font-size: 22px; line-height: 28px; }
.pricing .big { font: 700 40px/48px var(--font-display); margin: 8px 0 10px; }
.pricing .card p { color: var(--on-surface-variant); font-size: 16px; line-height: 25px; }
.pricing .card.hi p { color: #e8ede4; }
.pricing .card .btn { margin-top: 20px; } .pricing .card.hi .btn { background: #fff; color: var(--primary); }

/* pre predajcov */
.sellers { background: linear-gradient(160deg, var(--sage-dark) 0%, var(--sage-mid) 50%, var(--sage-light) 100%); color: #fff; padding: 72px 0; }
.sellers .wrap { display: flex; gap: 40px; align-items: center; justify-content: space-between; }
.sellers h2 { font-size: 36px; line-height: 44px; color: #fff; margin-bottom: 10px; }
.sellers p { color: #e8ede4; font-size: 18px; line-height: 28px; max-width: 640px; }
.sellers .btn { background: #fff; color: var(--primary); flex: none; }

/* päta */
footer { padding: 44px 0 48px; color: var(--on-surface-variant); font-size: 14px; line-height: 22px; background: var(--surface); }
footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
footer .logo img { height: 34px; margin-bottom: 14px; }
footer h4 { font: 700 14px/20px var(--font-display); color: var(--on-surface); margin: 0 0 8px; }
footer a { display: block; color: var(--on-surface-variant); margin: 0 0 4px; }
footer .legal { margin-top: 12px; font-size: 13px; }

/* podstránka Návody */
.subhero { background: linear-gradient(160deg, var(--sage-dark) 0%, var(--sage-mid) 50%, var(--sage-light) 100%); color: #fff; padding: 0 0 48px; }
.subhero .crumbs { font-size: 14px; color: #d6dfd4; margin: 28px 0 8px; }
.subhero .crumbs a { color: #d6dfd4; }
.subhero h1 { font-size: 46px; line-height: 52px; color: #fff; }
.subhero .intro { color: #e8ede4; font-size: 19px; line-height: 29px; margin-top: 14px; max-width: 760px; }
.doc { padding: 40px 0 64px; } .doc .wrap { max-width: 900px; }
.kv { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: 16px; padding: 18px 22px; margin: 0 0 28px; display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; font-size: 16px; }
.kv b { font-family: var(--font-display); } .kv code { font: 600 16px/24px ui-monospace, Consolas, monospace; color: var(--on-surface); }
table { width: 100%; border-collapse: collapse; background: var(--surface-container-lowest); border-radius: 16px; overflow: hidden; border: 1px solid var(--outline-variant); margin: 12px 0 36px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--outline-variant); font-size: 15px; vertical-align: top; }
th { background: var(--surface-container-high); font-family: var(--font-display); }
tr:last-child td { border-bottom: 0; }
td code, .doc li code { font: 600 14px/22px ui-monospace, Consolas, monospace; background: var(--surface-container-high); padding: 1px 6px; border-radius: 6px; }
.doc h2 { font-size: 28px; line-height: 36px; margin: 40px 0 10px; } .doc h3 { font-size: 20px; margin: 24px 0 6px; }
.doc p { color: var(--on-surface-variant); }
.doc ol { padding-left: 22px; color: var(--on-surface-variant); margin: 8px 0 0; } .doc li { margin: 0 0 6px; }
.doc .tip { background: var(--secondary-container); color: var(--on-secondary-container); border-radius: 14px; padding: 14px 18px; margin: 20px 0; font-size: 15px; }

/* telefón: jeden stĺpec, ponuka a odznak hlavičky skryté za ☰ */
@media (max-width: 760px) {
  header.top .wrap { gap: 12px; height: 68px; } .logo img { height: 36px; }
  nav.menu, header details.lang, header .badge.top { display: none; } details.burger { display: block; } details.burger > summary { display: flex; }
  .hero .body { grid-template-columns: minmax(0, 1fr); padding: 36px 28px 0; min-height: 0; gap: 28px; }
  .hero .body > div:first-child { padding-bottom: 0; }
  .hero h1 { font-size: 36px; line-height: 42px; } .hero .lead { font-size: 18px; line-height: 27px; }
  .hero .phones { gap: 14px; max-width: 100%; } .hero .phone { width: 170px; padding: 7px; border-radius: 26px; margin-bottom: -50px; } .hero .phone .scr { border-radius: 19px; }
  .hero .phone.back { width: 150px; margin-bottom: -90px; } .hero .phone.back:last-child { display: none; }
  .hero + .band { padding-top: 100px; } .hero .wave { height: 30px; }
  .badge { height: 48px; }
  .band { padding: 56px 0 40px; } .band h2 { font-size: 28px; line-height: 34px; }
  .quad { padding: 48px 0; } .quad .grid { grid-template-columns: 1fr; } .quad h2 { font-size: 26px; line-height: 32px; }
  .strip { padding: 40px 0; } .strip .steps { grid-template-columns: 1fr; } .strip h2 { font-size: 26px; line-height: 32px; }
  .makers-sec { padding: 48px 0; } .makers-sec .wrap { grid-template-columns: 1fr; gap: 28px; } .makers-sec h2 { font-size: 28px; line-height: 34px; }
  .pricing { padding: 48px 0; } .pricing .grid { grid-template-columns: 1fr; } .pricing h2 { font-size: 28px; line-height: 34px; }
  .sellers { padding: 48px 0; } .sellers .wrap { flex-direction: column; align-items: flex-start; } .sellers h2 { font-size: 28px; line-height: 34px; }
  footer .wrap { grid-template-columns: 1fr; gap: 20px; }
  .subhero h1 { font-size: 34px; line-height: 40px; } .subhero .intro { font-size: 17px; line-height: 26px; }
  .kv { grid-template-columns: 1fr; gap: 2px; } th:nth-child(3), td:nth-child(3) { display: none; }
}