/* ==========================================================================
   STAVEX Slovakia — praca.stavexslovakia.sk
   Vizualny jazyk prevzaty z dizajnu stavexkosice.sk (docs/style-guide.md).
   Ciste CSS bez build kroku — original pouziva Tailwind v4, tu su rovnake
   tokeny a komponenty prepisane rucne (WebSupport, FTP, ziadne npm).
   ========================================================================== */

/* ==========================================================================
   1. FONT — self-hosted Sora variable (GDPR: ziadne Google Fonts)
   ========================================================================== */
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext je POVINNY — bez neho sa rozsypu ľ š č ť ž ý á í é */
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. TOKENY — 1:1 s @theme v resources/css/app.css na stavexkosice.sk
   ========================================================================== */
:root {
  --primary: #ff6f3b;
  --primary-dark: #e85f2d;
  --secondary: #252e65;
  --ink: #4b4b4b;
  --ink-soft: #8a8a8a;
  --line: #e0e0e0;
  --cream: #f6f3ec;
  --white: #fff;

  --container: 1320px;

  /* Full-bleed odsadenie — rovnake ako hero a hlavicka (px-6 → px-20) */
  --bleed: 1.5rem;

  /* Sekcny rytmus: plne obsahove sekcie 7.5rem (120px) */
  --section-y: 7.5rem;

  --r-card: 2rem;      /* karty 28–32px */
  --r-block: 2.5rem;   /* velke bloky a obrazky 40px */
  --r-pill: 9999px;

  --shadow-card: 0 16px 32px rgba(0, 0, 0, .08);
  --shadow-lift: 0 10px 24px rgba(0, 0, 0, .12);

  --nav-h: 76px;
  --ctabar-h: 68px;
}

@media (min-width: 768px) {
  :root { --bleed: 3rem; }
}
@media (min-width: 1024px) {
  :root { --bleed: 5rem; }
}

/* ==========================================================================
   3. RESET A ZAKLAD
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Kotvy nesmu skoncit pod plavajucou hlavickou */
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  /* clip (nie hidden) — inak by prestal fungovat position:sticky */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) {
  body { padding-bottom: var(--ctabar-h); }
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Fokus — viditelny vsade, nikdy outline:none bez nahrady */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Na tmavych plochach je oranzovy outline slabo vidiet -> biely.
   Hero a hlavicka su svetle, tam ostava oranzovy zo zakladneho pravidla. */
.footer a:focus-visible,
.footer button:focus-visible,
.intro a:focus-visible,
.offer a:focus-visible,
.earn__band a:focus-visible {
  outline-color: var(--white);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

/* Centrovany kontajner (1320px) — obsah sekcii */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Full-bleed mriezka — hero a hlavicka, lici s okrajom obrazovky */
.bleed {
  width: 100%;
  padding-inline: var(--bleed);
}

.section { padding-block: var(--section-y); }

@media (max-width: 767px) {
  .section { padding-block: 4rem; }
}

.section--cream { background: var(--cream); }
.section--navy { background: var(--secondary); color: var(--white); }

/* Telo stranky konci oblymi rohmi — odhali patičku pod tym */
.page-main {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-bottom-left-radius: 2.5rem;
  border-bottom-right-radius: 2.5rem;
  overflow: clip;
}

/* ZAKLADNY 1px prekryv medzi sekciami — inak medzi nimi presvitaju vlasove linky.
   Vysky sekcii vychadzaju na ZLOMKOVE pozicie (odmerane napr. 1355.19, 3956.28,
   6466.36 px, takmer na kazdej hranici a pri kazdej sirke). Pri zlomkovom device
   pixel ratio (Windows skalovanie 125/150 %, retina) padne taka hrana na polovicu
   fyzickeho pixela, oba bloky sa na nej antialiasuju a pomedzi ne presvitne biele
   pozadie .page-main (namerane +47 jasu na 1440px, +96 na 970px). Pri dpr 1 nie.
   NIE su to bordery; ziadne tu nie su.

   MUSI stat TU, na zaciatku pri .page-main, nie medzi komponentmi na konci suboru:
   ma rovnaku specificitu ako pravidla komponentov, takze na konci by im prebilo
   ich vlastny margin-top. Presne to sa raz stalo — .round-top ma zamerne
   margin-top: -2rem (prekryva hero, aby jeho oble rohy lezali na fotke), a toto
   pravidlo mu ho zrazilo na -1px, takze sa rohy zosunuli pod hero a presvitala
   pod nimi biela. Tu naopak komponenty prirodzene vyhraju. */
.page-main > * + * { margin-top: -1px; }

@media (min-width: 768px) {
  .page-main {
    border-bottom-left-radius: 3.5rem;
    border-bottom-right-radius: 3.5rem;
  }
}

/* Obly prechod hned pod hero (round_top). Farbu ma podla sekcie, ktora
   nasleduje — tu je to navy .intro, nie biela. Original zaobluje svetly obsah
   nad tmavym herom; u nas je to naopak (hero je svetly), princip ostava. */
.round-top {
  position: relative;
  z-index: 10;
  height: 1.25rem;
  margin-top: -1.25rem;
  background: var(--secondary);
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

@media (min-width: 768px) {
  .round-top {
    height: 2rem;
    margin-top: -2rem;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
  }
}

/* ==========================================================================
   5. TYPOGRAFIA
   ========================================================================== */

/* Displej nadpisy — jednotny letter-spacing */
.h-display-1 { letter-spacing: -1px; }
.h-display-2 { letter-spacing: -2px; }

/* Nadpis je TMAVY (navy) — ako na povodnej praca.stavexslovakia.sk. Na vysvietenej
   fotke ma 6.8–12.7:1, takze ziadny tmavy prekryv netreba. */
.hero__title {
  font-size: clamp(3rem, 8.8vw, 5.3rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -2px;
  color: var(--secondary);
  max-width: 20ch;
}

/* Akcent "Hľadáme" — ORANZOVY, ako na originali praca.stavexslovakia.sk.
   POZOR NA KONTRAST: #ff6f3b je stredne svetla farba a nadpis lezi na svetlom
   zavoji, takze oranzova tu ma len ~2.4:1 — pod minimom 3:1 pre velky text.
   Ponechane ZAMERNE na vyslovne prianie (vernost originalu, ktory ma tu istu
   vlastnost). Zvysok nadpisu je navy a ma 3.2-11.5:1, takze citatelnost celej
   vety tym netrpi — ide o jedno slovo.
   Ak by sa niekedy riesila pristupnost: staci zmazat riadok color a akcent
   zdedi navy z .hero__title (tak to tu bolo predtym). */
.hero__title .accent {
  color: var(--primary);
  display: block;
}

/* Obsah hero vpravo hore — ako original (text vpravo, robotnici dole vlavo).
   Na desktope zmensene: pri plnej velkosti (85px) siahal 5. riadok "pracovníkov"
   az na hlavy pravych robotnikov (navy tam mala 1.05:1) a musel by ho kryt silny
   wash cez hlavy. Mensi nadpis skonci NAD nimi — text ostane cely nad oblohou/
   budovou, kde ma navy 6-12:1, a wash moze byt len jemny zavoj hore vpravo. */
@media (min-width: 1024px) {
  .hero__content { display: flex; justify-content: flex-end; }
  .hero__title {
    text-align: right;
    /* Strop 80 %, ale nadpis sa REALNE vykresli na ~77 % — sirku urcuje najdlhsi
       riadok, nie strop. Preco nie 70 %: .accent ("Hľadáme") ma display:block,
       teda vzdy zabera vlastny riadok, a zvysok "poctivých stavebných pracovníkov"
       potrebuje jednoliato ~982px. Pri 70 % (=896px) sa nezmestil a lamal sa na
       dalsi riadok — nadpis mal 3 riadky a siahal pod prilbu, kde uz nie je zavoj.
       Pri 80 % vyjde na 2 riadky a ostane nad nou. Uzsi blok skodi (pri 52 % boli
       4 riadky a kontrast padol na ~2:1). */
    max-width: 14em;
    font-size: clamp(3rem, 5.4vw, 5rem);
  }
}

/* NIZKE okno (>=1024px sirky, ale vyska <= 950px — napr. 1440x900, 1180x820):
   nadpis sa pri velkom pisme lamal na 3 riadky a siahal az na 44-47 % vysky hero,
   teda hlboko POD vrch prilby (odmerane ~34 %), kde uz svetly zavoj nie je a navy
   text mal len 1.1-1.5:1. Mensie pismo ho udrzi na 2 riadkoch a nad prilbou,
   takze zavoj moze ostat kratky a fotka nezostane vybledla.
   Vysoke viewporty (tablet na vysku, velke monitory) toto pravidlo nechyta. */
@media (min-width: 1024px) and (max-height: 950px) {
  .hero__title { font-size: clamp(2.5rem, 4.7vw, 4.4rem); max-width: 14em; }
}

/* Tablet na VYSKU (>=1024px, ale uzky/vysoky viewport): 5.4vw da na 1024px len
   ~3.5rem a nadpis sa v tom vysokom hero (napr. 1024x1366) uplne straca.
   Taky viewport unesie vyrazne vacsi nadpis aj sirsi textovy blok — skaluje sa
   rychlejsie (7vw) a max-width 62 % by ho zbytocne lamalo na uzky stlpec. */
@media (min-width: 1024px) and (max-aspect-ratio: 4/3) {
  .hero__title {
    font-size: clamp(3rem, 7vw, 5.5rem);
    max-width: 14em;
  }
}

/* Telefon na SIRKU: pri 8.8vw sa "poctivých stavebných" nezmestilo na jeden
   riadok (napr. na 844px potrebovalo 809px, ale blok ma len ~748px) a nadpis
   sa lamal na 4 riadky. Original aj desktop maju tri: "Hľadáme" / "poctivých
   stavebných" / "pracovníkov".
   7.9vw je odmerany prah: hranica 3 vs 4 riadky lezi na 8.06-8.63vw naprieč
   568-1023px, najtesnejsie na 812-844px. Rozdiel oproti 8.8vw je ~9 %, teda
   opticky takmer ziadny — nadpis len prestane lamat stredny riadok.
   Strop 4.6rem plati od ~932px sirky, spodok 2.4rem sa realne nikdy nechyti
   (viazal by az pod 486px, taky landscape telefon neexistuje). */
@media (max-width: 1023px) and (orientation: landscape) {
  .hero__title { font-size: clamp(2.4rem, 7.9vw, 4.6rem); }
}

.section__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--secondary);
  max-width: 18ch;
}

.section--navy .section__title { color: var(--white); }

/* Na desktope idu nadpisy max do polovice gridu — plati pre nadpisy, ktore
   sedia v plnej sirke sekcie. V .split__head uz polovicu robi samotna mriezka
   (5 z 12 stlpcov), takze dalsie obmedzenie by nadpis zbytocne stlacilo. */
@media (min-width: 1024px) {
  .section__title { max-width: 50%; }
  .section__title--wide { max-width: 62%; }
  .split__head .section__title { max-width: none; }
}

h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.3px;
  color: var(--secondary);
}

.section--navy h3 { color: var(--white); }

p { line-height: 1.6; }

.lead {
  font-size: 1.125rem;
  color: var(--ink);
}

.section--navy p,
.section--navy .lead { color: rgba(255, 255, 255, .82); }

/* <strong> je navy — ale len na svetlom. Na tmavych plochach musi zbelieť,
   inak navy text na fotke v paticke prakticky zmizne. */
strong { font-weight: 700; color: var(--secondary); }
.section--navy strong,
.intro strong,
.footer__cta strong,
.earn__band strong { color: var(--white); }

/* Odkaz v texte */
.link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link:hover { color: var(--primary-dark); }

/* ==========================================================================
   6. EYEBROW — pilulka s nekonecnou slucnou textu oddeleneho bodkou
   Text je vzdy nazov sekcie z navigacie (uz na stranke existuje).
   Nad hero NIKDY — len v obsahovych sekciach.
   ========================================================================== */
/* Sirka: original ma 150px, tam su vsak eyebrows kratke. Nase su nazvy sekcii
   z navigacie (najdlhsi "Čo ponúkame"), pri 150px by bolo vidno len ohryzok
   slova ("ONÚKAME · ČO P") a posobilo by to ako chyba, nie ako zamer.
   220px staci na cele slovo aj s bodkou. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  overflow: hidden;
  border: 1px solid var(--primary);
  border-radius: var(--r-pill);
  color: var(--secondary);
  padding: .4rem .55rem;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  /* Tracking na verzalkovom mikro-labeli — bez neho cita ako zmenseny telovy
     text, nie ako kicker. Zjednocuje s hlavickami cennika (.06em) a mobilnymi
     popiskami cien (.05em). */
  letter-spacing: .07em;
  margin-bottom: 1.5rem;
  vertical-align: middle;
}

.eyebrow--light { color: var(--white); }

/* mask-fade po bokoch → text mizne pred okrajom, nekonci na outline */
.eyebrow__vp {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.05rem, #000 calc(100% - 1.05rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 1.05rem, #000 calc(100% - 1.05rem), transparent 100%);
}

.eyebrow__track {
  display: inline-flex;
  white-space: nowrap;
  animation: eyebrow-loop 10s linear infinite;
}

.eyebrow:hover .eyebrow__track { animation-play-state: paused; }
.eyebrow__item { padding-inline: .4rem; }
.eyebrow__dot { color: var(--primary); }

@keyframes eyebrow-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   7. TLACIDLA — jedina sustava (btn / btn-primary / btn-outline / btn-circle)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: inherit;
  font-weight: 700;
  border-radius: 30px;
  line-height: 1;
  min-height: 48px;
  transition: all .25s ease;
  text-align: center;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  padding: 1rem 1.75rem;
  font-size: 1rem;
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--secondary);
  padding: .85rem 1.5rem;
  font-size: .9rem;
  border: 1px solid var(--line);
}
.btn-outline:hover { border-color: var(--secondary); }

/* Tlacidlo so sipkou v kruhu — CTA (ako "Nezáväzná ponuka" na stavexkosice.sk).
   Biela pilulka s borderom funguje na svetlom aj tmavom podklade. */
.btn-circle {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  background: var(--white);
  color: var(--secondary);
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .45rem .45rem .45rem 1.6rem;
  transition: background-color .25s, color .25s, box-shadow .25s, transform .3s ease;
}
.btn-circle:hover {
  background: var(--cream);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.btn-circle__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--white);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .35s ease, background-color .25s ease;
}
.btn-circle:hover .btn-circle__icon { background: var(--primary-dark); transform: translate(3px, -3px); }


/* ==========================================================================
   8. HLAVICKA — plavajuca sklenena bunka
   ========================================================================== */
/* Hlavicka je SVETLA — hero je svetly, takze biely text by na nom nepresiel
   (dizajn stavexkosice.sk ma bielu nav preto, ze jeho hero je tmavy).
   Povodna praca.stavexslovakia.sk mala nad rovnakou fotkou plnu bielu listu;
   tu je to sklenena pilulka v jazyku Stavexu, ale so svetlym podkladom. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--secondary);
}

/* Na desktope neukotvena — scrolluje s obsahom a odide s hero */
@media (min-width: 1024px) {
  .site-header { position: absolute; }
}

.header-pad {
  padding-inline: var(--bleed);
  padding-top: 1.25rem;
  transition: padding .3s ease;
}

@media (min-width: 768px) {
  .header-pad { padding-top: 2rem; }
}

.site-bar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.875rem 1rem 2rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, border-radius .3s ease, padding .3s ease;
}

.site-bar__left { display: flex; align-items: center; gap: 1.5rem; }

.site-logo img { height: 28px; width: auto; transition: height .3s ease; }

.site-sep {
  display: none;
  width: 1px;
  height: 2rem;
  background: currentColor;
  opacity: .25;
}

.nav__menu { display: none; align-items: center; gap: 1.75rem; }

.nav-link {
  color: inherit;
  font-size: 1rem;
  font-weight: 400;
  transition: color .2s;
  /* Na 1024px (iPad na sirku) je lista uzka (--bleed 5rem) a "Pre koho"/"Čo
     ponúkame" by sa zlomili na 2 riadky — lista by narastla a posobila rozbito. */
  white-space: nowrap;
}
.nav-link:hover { color: var(--primary); }

.site-bar__right { display: flex; align-items: center; gap: 1rem; }

.site-phone { display: none; align-items: center; gap: .5rem; font-size: .875rem; }
.site-phone__num {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-phone__num:hover { color: var(--primary); }

/* Oranzove CTA v liste — pod 640px ustupi hamburgeru */
.site-cta { display: none; padding: .875rem 1.5rem; font-size: .9375rem; min-height: 44px; }

@media (min-width: 640px) { .site-cta { display: inline-flex; } }

.nav__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: inherit;
}
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

@media (min-width: 1024px) {
  .site-sep { display: block; }
  .nav__menu { display: flex; }
  .nav__toggle { display: none; }
}

@media (min-width: 1280px) {
  .site-phone { display: flex; }
}

/* Hlavicka je svetla vzdy (hero je svetly) — trieda .scrolled uz farbu nemeni,
   pod 1024px len prikotvi listu na celu sirku. */
/* Tablet/mobil: po scrolle prikotvena full-width svetla blur lista */
@media (max-width: 1023px) {
  .site-header.scrolled .header-pad { padding: 0; }
  .site-header.scrolled .site-bar {
    border-radius: 0;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  }
  /* Po scrolle nizsia lista (~30 %): mensie logo (28->17px) + mensi hamburger
     a tesnejsi vertikalny padding. Vysku listy urcuje hamburger, nie logo. */
  .site-header.scrolled .site-logo img { height: 17px; }
  .site-header.scrolled .site-bar { padding-block: .35rem; }
  .site-header.scrolled .nav__toggle { width: 40px; height: 40px; }
}

/* Otvorene menu: lista full-width biela nad kremovym overlayom, logo NORMALNE
   (aj keby bola zaroven .scrolled — tieto pravidla su za nou a prebijaju ju). */
@media (max-width: 1023px) {
  .site-header.menu-open .header-pad { padding: 0; }
  .site-header.menu-open .site-bar {
    border-radius: 0;
    border-color: transparent;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
    padding-block: 1rem;
  }
  .site-header.menu-open .site-logo img { height: 28px; }
  .site-header.menu-open .nav__toggle { width: 44px; height: 44px; }
}

/* Zamknut scroll pozadia, kym je menu otvorene */
html.nav-lock, html.nav-lock body { overflow: hidden; }

/* Lista je svetla -> tmave logo. Biele sa nepouziva. */
.site-logo .logo-white { display: none; }

/* Mobilne menu — CELOOBRAZOVKOVY overlay v style stavexkosice.sk:
   kremovy fullscreen panel, velke tucne navy odkazy oddelene tenkymi linkami,
   oranzova pilulka "Kontakt" dole. Lista (logo + X) ostava NAD nim — je v tom
   istom stacking kontexte hlavicky (z-50), panel ma z-40, takze logo aj X
   prekryvaju overlay, zvysok stranky (obsah, spodna .ctabar z-45) je pod nim. */
.nav__panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  flex-direction: column;
  padding: 6.75rem 2rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--cream);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav__panel.is-open { display: flex; }

.nav__panel a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(224, 224, 224, .8);   /* --line, jemne */
  color: var(--secondary);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.5px;
  transition: color .2s;
}
.nav__panel a:hover,
.nav__panel a:focus-visible { color: var(--primary); }

/* "Kontakt" nie je polozka v zozname, ale oranzova pilulka dole (ako stavexkosice).
   Vyssia specificita (.nav__panel .nav__cta) prebije .nav__panel a. */
.nav__panel .nav__cta {
  display: flex;
  margin-top: auto;
  padding: 1rem 1.75rem;
  border-bottom: 0;
  font-size: 1rem;
  letter-spacing: normal;
  color: var(--white);
}
.nav__panel .nav__cta:hover { color: var(--white); }

@media (min-width: 1024px) {
  .nav__panel, .nav__panel.is-open { display: none; }
}

/* ==========================================================================
   9. HERO — fotka + cierny prekryv, nadpis hore vlavo, popis dole vlavo
   ========================================================================== */
/* HERO podla povodnej praca.stavexslovakia.sk: fotka v plnej svetlosti BEZ tmaveho
   prekryvu, TMAVY text vpravo hore, robotnici dole. Original to riesil takto
   a preto nemal problem s kontrastom — navy na svetlom ma 6.8–12.7:1.
   (Dizajn stavexkosice.sk ma naopak tmavy prekryv a biely text; jeho hero fotky
   su tmave. Nasa fotka je svetla — obloha a svetla fasada — takze by sa tam biely
   text udrzal len silnym scrimom, ktory by fotku zabil.) */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: 10rem;
  padding-bottom: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--ink);
  background-color: var(--cream); /* poistka pri nedobehnutej fotke */
}

@media (min-width: 1024px) {
  .hero { padding-top: 9.5rem; padding-bottom: 8rem; }
}

/* Nizke okna maju najmenej zvisleho miesta — nadpis zacina vyssie, aby jeho
   3 riadky skoncili s rezervou nad koncom zavoja (inak kontrast klesal na ~3.0).
   MUSI stat ZA pravidlom vyssie: rovnaka specificita, rozhoduje poradie. */
@media (min-width: 1024px) and (max-height: 950px) {
  .hero { padding-top: 8.5rem; }
}

/* MOBIL: rovnaky princip ako desktop — nadpis HORE vpravo, TMAVY (navy) text
   na svetlom zavoji, fotka posunuta nizsie tak, aby tvare zacinali az pod nim.
   Povodne to bolo naopak (biely text dole nad tmavym gradientom); tento variant
   sedi s originalom praca.stavexslovakia.sk aj s desktopom, a hlavne nevyzaduje
   stmavovat spodok fotky. */
@media (max-width: 1023px) {
  .hero { justify-content: flex-start; padding-top: 11rem; padding-bottom: calc(var(--ctabar-h) + 2rem); }
  .hero__content { text-align: right; }
  /* Fotka posunuta NIZSIE: landscape fotka vypĺňa presne vysku hero (ziadny
     vertikalny presah), takze object-position nema co posuvat. Priblizenie
     s ukotvenim HORE (origin 50% 0%) posunie tvare robotnikov dole — pod nadpis.
     Povodne bolo ukotvenie dole (50% 100%), co ich naopak tlacilo hore. */
  .hero__img { transform: scale(1.28); transform-origin: 50% 0%; }
}

/* NIZKY telefon na vysku (napr. 360x640): pri vacsom nadpise uz 11rem odsadenie
   znamena, ze nadpis siaha az za koniec zavoja (56 %) a ziadna sila zavoja mu uz
   nepomoze — odmerane ostaval na 1.60:1 pri kazdom nastaveni. Preto tu zacina
   vyssie. */
@media (max-width: 1023px) and (orientation: portrait) and (max-height: 740px) {
  .hero { padding-top: 6.5rem; }
}

/* Nad 768px (tablet) uz sticky CTA bar nie je -> mensi spodny padding. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { padding-bottom: 3rem; }
}

/* Vrstvenie cez KLADNE z-indexy bez isolation a bez negativneho z-indexu:
   media(1) nad kremovym pozadim hero, obsah(2) nad fotkou, magnet(30) najvyssie.
   Negativny z-index + isolation:isolate sposoboval, ze sa fotka pri prvom
   vykresleni nenapaintovala (ukazalo sa len kremove pozadie). */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero__content { position: relative; z-index: 2; }
.hero .bleed { position: relative; z-index: 2; }

/* <picture> je len obal — bez vlastnej vysky by height:100% na <img> nemalo
   voci comu pocitat a fotka by spadla na svoj prirodzeny pomer (a pod nou by
   presvital podklad). Plati pre hero, zarobok, paticku aj "Co ponukame"
   (tam fotka od 1024px vypĺňa celu vysku navy sekcie). */
.hero__media picture,
.earn__media picture,
.offer__media picture,
.footer__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* object-position ostava 'center' na vsetkych sirkach.
   Fotka stavex-robotnici.png (2752x1536, pomer 1.79) je plnohodnotny landscape
   zaber BEZ prazdnych okrajov — odmerany detail 58-77 naprieč celou sirkou.
   Predchodca (robotnici-obnova-fasad-2.jpg) mal 0-24 % a 76-100 % sirky cisto
   biele, takze sa object-position nemal ako "trafit" a hero posobil prazdne;
   preto ta vymena. Teraz 'center' jednoducho drzi kompoziciu v strede a orez
   po bokoch berie realny obsah, nie bielu. */

/* MOBIL: SVETLY zavoj ZHORA po prilbu — rovnaky princip ako desktop.
   Nadpis je navy a sedi hore vpravo, takze sa vysvetluje horna cast fotky;
   zvysok (tvare, postavy) ostava nedotknuty. Predtym to bolo naopak: biely text
   dole nad tmavym gradientom, co vyzadovalo stmavit spodok fotky.
   Dosah 43 % je ODMERANY, nie hadany: vrch hlavnej prilby je na 42.9-43.9 %
   vysky hero (320-768px) a nadpis konci najneskor na 39.3 % (320px), takze
   zavoj pokryje text a k tvaram sa nedostane. */
.hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, .41) 0%,
    rgba(255, 255, 255, .40) 40%,
    rgba(255, 255, 255, .39) 48%,
    rgba(255, 255, 255, 0) 56%);
}

@media (min-width: 1024px) {
  /* Na desktope je hero SVETLE s tmavym textom, takze za nadpisom je svetly
     radialny zavoj z praveho horneho rohu.
     Odkedy je fotka vycentrovana (object-position: center, viz vyssie), siaha
     obsah az do ~81 % sirky boxu a nadpis padne na modru prilbu hlavneho
     robotnika — s povodnym jemnym washom (.5 v rohu, koniec na 58 %) tam mal
     navy text len 1.14:1. Zavoj preto siaha dalej a je silnejsi, aby nadpis
     drzal kontrast aj nad tmavymi miestami fotky. Stred a spodok fotky
     (postavy) ostavaju aj tak takmer nedotknute — gradient rychlo mizne. */
  .hero__wash {
    /* Zvisly dosah je ZAMERNE kratky (42 % vysky hero): vrch prilby hlavneho
       robotnika je odmerane na ~34 % vysky, takze zavoj dobehne prakticky pri
       nej a fotku pod nou uz vobec nezosvetluje. Predtym siahal cez 125 %
       vysky a cely stred fotky bol vybledly. */
    /* LINEARNY zhora, nie radialny z rohu. Radialny bol krehky: nadpis je siroky
       a jeho lavy dolny roh je od praveho horneho rohu najdalej, takze pri
       nizsich oknach tam kontrast padal (1600x900 = 2.66:1) aj ked nadpis
       vertikalne v dosahu bol. Linearny pokryva celu sirku rovnomerne.
       Dosah 42 % ostava — konci na spodku prilby (32.9-42.4 %), do tvari nejde. */
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, .51) 0%,
      rgba(255, 255, 255, .50) 30%,
      rgba(255, 255, 255, .47) 36%,
      rgba(255, 255, 255, 0) 42%);
  }
}

/* MOBIL NA SIRKU (nizky viewport): hero je tak nizke, ze nadpis nutne lezi cez
   tvare robotnikov — ciastocny zavoj to nezachrani. Preto CELOPLOSNY svetly
   overlay: fotka ostane citatelna ako podklad, ale navy text na nej drzi.
   MUSI stat AZ TU, za bazovym aj desktopovym .hero__wash — ma rovnaku
   specificitu, takze skorsie umiestnenie by nic neurobilo (overene: kontrast
   ostal 1.63:1, akoby pravidlo neexistovalo). */
@media (orientation: landscape) and (max-height: 820px) {
  .hero { padding-top: 8rem; }
  .hero__wash { background: rgba(255, 255, 255, .70); }
}

/* ==========================================================================
   9b. INTRO — "Ak hľadáš prácu…" + odseky + telefon.
   V originali to tiez nebolo v hero, ale az v sekcii pod nim (preto mali
   odseky biely text — sekcia bola tmava).
   ========================================================================== */
.intro {
  background: var(--secondary);
  color: var(--white);
}

.intro__grid { display: grid; gap: 2rem; }

@media (min-width: 1024px) {
  .intro__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
  .intro__grid > :first-child { grid-column: 1 / span 5; }
  .intro__body { grid-column: 7 / span 6; }
}

.intro__lead {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.5px;
  color: var(--white);
}

.intro__body > * + * { margin-top: 1.25rem; }

.intro__text {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .85);
}

.intro__note { color: rgba(255, 255, 255, .7); }

.intro__cta { margin-top: 2rem; }

/* Kruhove CTA je VLAVO — text hero je vpravo, takze si nezavadzaju.
   Bez JS je to staticke tlacidlo v lavom dolnom rohu, odsadene ako hlavicka
   (5rem) a zdola ako text (8rem). JS ho az potom prepne do rezimu sledovania
   mysi (nastavi left/top na 0). */
.hero__magnet {
  display: none;
  position: absolute;
  left: 5rem;
  bottom: 8rem;
  z-index: 30;
  width: 10rem;
  height: 10rem;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--white);
  padding: 1.25rem;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .45);
  will-change: transform;
}

@media (min-width: 1024px) {
  .hero__magnet { display: flex; }
}

.hero__magnet-label { font-size: 1.0625rem; font-weight: 700; line-height: 1.15; }
.hero__magnet svg { margin-top: .5rem; }

/* VSTUPNA ANIMACIA HERO — nadpis prichadza po castiach, rovnakym pohybom a casom
   (.75s ease) ako ostatne reveal animacie:
   - "Hľadáme" (.accent) SPRAVA DOLAVA -> opalMoveLeft (translateX 60px -> 0)
   - zvysok (.hero__title-rest) ZDOLA  -> opalMoveUp   (translateY 100px -> 0)
   Zvysok je preto obaleny vo vlastnom spane: keby sa animoval cely nadpis a accent
   zvlast, transformy rodic+dieta by sa scitali a accent by sel sikmo. Rest ma
   display:block, aby ho transform bral ako blok (na inline viacriadkovom by neplatil).
   Rest ma +.1s (rytmus staggeru 100ms) — "Hľadáme" priletí, text ho dobehne zdola.
   Ciste CSS -> dobehne aj bez JS; presah 60px doprava orezava body{overflow-x:clip}. */
.hero__title .accent { animation: opalMoveLeft .75s ease both; }
.hero__title-rest { display: block; animation: opalMoveUp .75s ease .1s both; }

/* Magnet: len OPACITY fade s oneskorenim (dorazi po nadpise). Transform sa
   NEanimuje zamerne — v nom si JS drzi sledovanie mysi, animacia by mu doň
   zasahovala. */
@keyframes heroMagnetIn { from { opacity: 0; } to { opacity: 1; } }
.hero__magnet { animation: heroMagnetIn .6s ease .55s both; }

/* ==========================================================================
   10. SEKCNY VZOR — nadpis vlavo, obsah vpravo
   ========================================================================== */
.split {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
  .split__head { grid-column: 1 / span 5; position: sticky; top: 7rem; }
  .split__body { grid-column: 7 / span 6; }
}

.split__body > * + * { margin-top: 1.25rem; }

.split + .split { margin-top: 5rem; }

/* Pull quote — odlisuje velkost a vaha, ziadny dekor */
.pull {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.5px;
  color: var(--secondary);
  max-width: 20ch;
}

/* Fotopas — v originali je to overlay videa (Elementor video widget,
   youtu.be/9vvXMQMKty4, lightbox). Preto je fotka zabalena do .video.
   Na PLNU SIRKU bez oblych rohov na vsetkych sirkach (ako pätička s tou istou
   fotkou a ako fotka v "Čo ponúkame") — na prianie. Full-bleed cez
   margin-inline: calc(50% - 50vw) + width:100vw funguje z centrovaneho .wrap. */
.media-band {
  margin-block: 5rem;   /* aj zdola — inak sa dalsi nadpis nalepi na fotku */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

.media-band__img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* ==========================================================================
   10b. VIDEO — fotka ako preklik na YouTube (otvori sa v novej karte).
   Ziadny embedovany iframe: zlyhaval na niektorych zariadeniach (Chyba 153)
   a blokovace reklam ho nahradzuju prazdnym boxom. Priamy odkaz funguje vzdy
   a nic z YouTube sa nenacita pred klikom (GDPR).
   ========================================================================== */
.video {
  position: relative;
  display: block;
  border-radius: 0;   /* full-bleed pas — ziadne oble rohy na ziadnej sirke */
}

.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  transition: transform .3s ease, background-color .25s ease;
}

@media (min-width: 768px) {
  .video__play { width: 5.5rem; height: 5.5rem; }
}

.video__play svg { width: 42%; height: 42%; margin-left: 8%; }

.video:hover .video__play,
.video:focus-visible .video__play {
  background: var(--primary-dark);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Lightbox — vytvara ho main.js az po kliku */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.lightbox__inner {
  position: relative;
  width: min(100%, 1100px);
}

.lightbox__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: clip;
  background: #000;
}

.lightbox__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Vzdy viditelny zachranny odkaz pod ramom (pre pripad blokovaca embedov) */
.lightbox__link {
  display: block;
  margin-top: 1rem;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: .9375rem;
}
.lightbox__link span {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.lightbox__link:hover span { color: var(--primary); }

.lightbox__close {
  position: absolute;
  top: -3.25rem;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  color: var(--white);
  display: grid;
  place-items: center;
  transition: background-color .25s ease;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .28); }

/* ==========================================================================
   11b. CO PONUKAME — full-bleed navy, editorialny zoznam + portretova fotka.
   ZAMERNE bez kariet a bez generickych ikon (dom/stit/kalendar): zaobleny
   blok plavajuci na bielej + tri karty s liniovymi ikonami je presne ten
   vzor, ktory posobi ako vygenerovana vypln. Obsah unesie samotna typografia
   a hairline medzi polozkami.
   ========================================================================== */
.offer__head { margin-bottom: 3.5rem; }

.offer__grid { display: grid; gap: 3rem; padding-inline: 1.5rem; }

@media (min-width: 1024px) {
  /* Grid je full-width (mimo .wrap): text zarovnany s kontajnerom vlavo.
     Druhy stlpec je ZAMERNE prazdny — fotka uz v nom nesedi, len rezervuje
     miesto, aby text nesiel pod nu. Sirka sa musi zhodovat s .offer__media. */
  .offer__grid {
    grid-template-columns: minmax(0, 1fr) 46vw;
    column-gap: 5rem;
    align-items: start;
    padding-left: max(1.5rem, calc((100vw - var(--container)) / 2 + 1.5rem));
    padding-right: 0;
  }
  .offer__list { max-width: 640px; }

  /* Fotka vypĺňa CELU vysku modrej sekcie — vratane jej vertikalneho paddingu,
     teda aj pas nad nadpisom a pod poslednou polozkou. Preto absolutne kotvenie
     na okraje .offer, nie sticky v riadku gridu (ten zacina az pod nadpisom).
     Nadpis ju nepodlieza: .section__title ma na desktope max-width: 50%. */
  .offer { position: relative; }
  .offer__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46vw;
  }
}

.offer__item + .offer__item {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.offer__item h3 { margin-bottom: .75rem; }
.offer__item p { font-size: 1.0625rem; max-width: 62ch; }
.offer__item p + p { margin-top: 1rem; }

.offer__media { margin: 0; }

.offer__img {
  width: 100%;
  border-radius: var(--r-block);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
}

@media (min-width: 1024px) {
  /* Fotka vypĺňa celu vysku navy sekcie a lici s pravym okrajom obrazovky ->
     BEZ zaoblenia, ciste pravouhle pole (border-radius: 0 musi prebit bazove
     var(--r-block), nestaci riadok vynechat).
     Vysku urcuje rodic (.offer__media je cez celu vysku sekcie), preto ZIADNY
     aspect-ratio ani max-height — tie by fotku zastavili skor a sekciu by
     nevyplnila. object-fit: cover z bazoveho pravidla orez doriesi. */
  .offer__img {
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
    object-position: center;
    border-radius: 0;
  }
}

/* MOBIL: fotka bloku siaha az na pravy okraj a je vyssia (portret) — na 16/9
   z portretovej budovy vidno len uzky pruh. Lavy okraj si drzi padding gridu. */
@media (max-width: 1023px) {
  .offer__media { margin-right: -1.5rem; }
  .offer__img {
    aspect-ratio: 3 / 4;
    object-position: center;
    border-radius: var(--r-block) 0 0 var(--r-block);
  }
}

/* ==========================================================================
   11c. ZAROBOK — navy pas s fotkou; cennik presahuje do navy bloku
   ========================================================================== */
.earn__band {
  position: relative;
  isolation: isolate;
  padding-block: 5rem;
  color: var(--white);
  background-color: var(--secondary);
}

@media (min-width: 768px) { .earn__band { padding-block: 7rem; } }

/* Navy sa predlzi smerom dole, aby bolo pod textom miesto, do ktoreho
   cennik presahuje (~220px). */
@media (min-width: 1024px) {
  .earn__band { padding-bottom: calc(7rem + 240px); }
}

.earn__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.earn__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.earn__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .5));
}

.earn__content .section__title { color: var(--white); }

.earn__lead {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .85);
  max-width: 62ch;
}
.earn__lead strong { color: var(--white); }

.earn__content .price__note { color: rgba(255, 255, 255, .7); }

/* Cennik na NAVY pozadi (zvysok sekcie zarobok je modry, nie kremovy) — biele
   cennikove karty na navy poriadne vyniknu. flow-root drzi podklad na mieste,
   kym .prices vytiahne tabulky hore do navy bloku vyssie (inak by sa cely blok
   posunul cez navy — margin-collapse). */
.earn__prices {
  display: flow-root;
  background: var(--secondary);
  padding-block: 4rem;
}

@media (min-width: 768px) { .earn__prices { padding-block: 7rem; } }

@media (min-width: 1024px) {
  .earn__prices { padding-top: 0; }
  .earn__prices .prices {
    position: relative;
    z-index: 2;
    margin-top: -220px;   /* tabulky presahuju do navy o ~220px */
  }
}

/* MOBIL: navy pozadie zarobku (s fotkou) sa predlzi ~200px POD cennik a prva
   cennikova karta sa vytiahne hore do neho — rovnaky "presahujuci" efekt ako
   na desktope (navy vidno okolo horneho okraja kariet). */
@media (max-width: 1023px) {
  .earn__band { padding-bottom: calc(2rem + 200px); }
  .earn__prices { padding-top: 0; }
  .earn__prices .prices {
    /* position+z-index POVINNE: .earn__band je positioned + isolation:isolate,
       teda sa paintuje NAD static .earn__prices a navy fotka by inak prekryla
       vytiahnutu bielu kartu (chevron by "visel" na navy). */
    position: relative;
    z-index: 2;
    margin-top: -200px;
  }
}

/* ==========================================================================
   11d. BRIDGE — vycentrovane CTA (ako "Sme váš partner..." na stavexkosice.sk)
   ========================================================================== */
.bridge { background: var(--secondary); }


.bridge__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 60rem;
}

.bridge__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--white);
  max-width: 16ch;
}

.bridge__text {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  max-width: 60ch;
}

.bridge .btn-circle { margin-top: 2.5rem; }

/* ==========================================================================
   12. CENNIKY — <details open>, ceny sa neschovavaju za tap
   ========================================================================== */
.prices { margin-top: 3.5rem; display: grid; gap: 2rem; }

.price {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: clip;
}

.price__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  cursor: pointer;
  list-style: none;
}
.price__summary::-webkit-details-marker { display: none; }

.price__title { font-size: 1.25rem; }

.price__chevron {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--secondary);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}
.price__chevron svg { width: 1.1rem; height: 1.1rem; }
.price__summary:hover .price__chevron {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.price[open] .price__chevron { transform: rotate(180deg); }

.price__wrap { padding: 0 1.75rem 1.75rem; }

.price__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  table-layout: fixed;
}

/* Sirky stlpcov — nazov cinnosti potrebuje najviac miesta */
.price__col--name { width: 46%; }
.price__col--base,
.price__col--bonus,
.price__col--final { width: 18%; }

.price__th--num { text-align: right; }

.price__th {
  padding: .875rem 1rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
  background: var(--secondary);
  text-align: right;
}
.price__th--name { text-align: left; border-radius: 12px 0 0 12px; }
.price__th:last-child { border-radius: 0 12px 12px 0; }

.price__td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.price__td--name {
  text-align: left;
  font-weight: 600;
  color: var(--secondary);
  text-wrap: pretty;
}

.price__td--final {
  font-weight: 700;
  color: var(--secondary);
  background: rgba(255, 111, 59, .1);
  border-left: 2px solid var(--primary);
}

.price__row:last-child .price__td { border-bottom: 0; }

.price__note {
  margin-top: 1.5rem;
  font-size: .875rem;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 52ch;
}
.section--navy .price__note { color: rgba(255, 255, 255, .7); }

/* Mobil: tabulka sa prestavi na karty (data-label) */
@media (max-width: 767px) {
  /* Cennik na CELU SIRKU len na mobile: vylomi sa z bocneho paddingu .wrap.
     Maly bocny odstup dava .prices ako PADDING (nie .price ako margin — grid
     item s marginom sa nescvrkne pod min-content a pretekal vpravo o ~18px).
     Karty ostavaju oble (border-radius + border z base). */
  .earn__prices > .wrap { padding-inline: 0; }
  .earn__prices .prices { padding-inline: .5rem; }
  .price { min-width: 0; }
  .price__summary { padding-inline: 1.25rem; }

  .price__wrap { padding: 0 1.25rem 1rem; }
  .price__thead { display: none; }
  .price__table, .price__tbody { display: block; }

  .price__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name  name"
      "base  final"
      "bonus final";
    gap: .25rem .75rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
  }
  .price__row:last-child { border-bottom: 0; }

  .price__td { border: 0; padding: 0; text-align: left; }
  .price__td--name { grid-area: name; font-size: 1rem; margin-bottom: .5rem; }
  /* Popisok na vlastnom riadku (block), hodnota na druhom a nezalomena
     — inak sa "22,00 €/m2" delilo skarede na "22,00" + "€/m2". */
  .price__td--base { grid-area: base; white-space: nowrap; }
  .price__td--bonus { grid-area: bonus; white-space: nowrap; }
  .price__td--base { margin-bottom: .35rem; }

  .price__td--base::before,
  .price__td--bonus::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .1rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
  }

  /* Vysledna cena je dominantna — velka, vpravo, cez oba riadky */
  .price__td--final {
    grid-area: final;
    align-self: center;
    justify-self: end;
    font-size: 1.375rem;
    padding: .5rem .875rem;
    border-left: 0;
    border-radius: 12px;
    white-space: nowrap;
  }
  .price__td--final::before {
    content: attr(data-label);
    display: block;
    font-size: .625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--primary);
    margin-bottom: .125rem;
  }
}

/* ==========================================================================
   13. FORMULAR
   ========================================================================== */
.form { margin-top: 2.5rem; }

.form__grid { display: grid; gap: 1.25rem; }

@media (min-width: 640px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .form__field--full { grid-column: 1 / -1; }
}

.form__label {
  display: block;
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--secondary);
}

/* Outline-only polia — priehladne pozadie, len okraj (ako na kontakte originalu) */
/* Biele pozadie + tmavsi okraj: na kremovom podklade sekcie boli outline-only
   polia (priehladne, okraj #e0e0e0) takmer neviditelne. Biele pole s vyraznejsim
   okrajom jasne vystupi. */
.form__input {
  width: 100%;
  min-height: 52px;
  padding: .875rem 1.25rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid #cfd2dc;
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgba(37, 46, 101, .04);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.form__input::placeholder { color: var(--ink-soft); }
.form__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--orange-tint, rgba(255, 111, 59, .15)); }
.form__input:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.form__textarea {
  min-height: 150px;
  border-radius: 1.5rem;
  resize: vertical;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.form__checkbox {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--primary);
}

.form__consent-label { font-size: .875rem; line-height: 1.5; color: var(--ink); cursor: pointer; }

.form__consent-link {
  color: var(--secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form__consent-link:hover { color: var(--primary); }

.form__actions { display: block; }
.form__submit { width: 100%; }

@media (min-width: 640px) {
  .form__submit { width: auto; }
}

/* Hlaska po PRG navrate zo send.php (triedy nastavuje main.js) */
.form__notice {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border-left: 4px solid;
  font-size: .9375rem;
  line-height: 1.5;
  max-width: none;
}
.form__notice--ok { border-color: var(--primary); background: var(--cream); color: var(--secondary); }
.form__notice--error { border-color: #c0392b; background: rgba(192, 57, 43, .08); color: #c0392b; }
.form__notice[hidden] { display: none; }

/* Honeypot: display:none, NIE clip-path — clip-path necha pole v layoute
   a autofill ho vyplni, send.php potom spravu ticho zahodi ako spam. */
.hp { display: none; }

/* ==========================================================================
   14. KONTAKTNE KARTY
   ========================================================================== */
/* 4 karty: nikdy nie 3 v rade — pri styroch kartach by vzniklo nesymetricke 3+1.
   Presne to robil povodny repeat(auto-fit, minmax(240px, 1fr)): v pasme
   ~834-1099px sa vmestili tri stlpce a stvrta karta ostala sama pod nimi.
   Preto ZIADNY auto-fit, ale explicitne stupne: 1 -> 2+2 -> 4 v rade. */
.contact__cards {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .contact__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.contact__card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 2rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.contact__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: rgba(255, 111, 59, .4);
}

.contact__card-icon { color: var(--secondary); margin-bottom: .75rem; }
.contact__card h3 { font-size: 1.125rem; }

.contact__value { font-size: 1rem; color: var(--ink-soft); font-style: normal; }

.contact__map {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  display: inline-block;
  padding-block: .25rem;
}
.contact__map:hover { text-decoration-color: var(--primary); color: var(--secondary); }

.contact__ids { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   15. PATICKA — fotka + cierny overlay, velky STAVEX, biela bublina
   ========================================================================== */
.footer {
  position: relative;
  /* isolation je POVINNA: .footer__media ma z-index:-1 a bez stacking contextu
     by sa vykreslila ZA vlastnym background-color paticky, teda by nebola
     vidiet vobec. Hero to ma tiez. */
  isolation: isolate;
  margin-top: -3.5rem;
  padding-top: 8rem;
  color: var(--white);
  background-color: var(--secondary);
  overflow: clip;
}

.footer__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.footer__img { width: 100%; height: 100%; object-fit: cover; }
/* Manual ma rgba(0,0,0,.42) — jeho fotka je ale tmavsia. Na tejto ma biely
   text CTA pri .42 len 3.29:1, preto je hore silnejsi (.58). Dole, kde je
   napis STAVEX a ziadny bezny text, sa vracia k .42 a fotku vidno. */
.footer__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0, rgba(0, 0, 0, .42) 60%);
}

/* Footer CTA — vycentrovany, ako na stavexkosice.sk: velky nadpis, popis
   a biele kruhove tlacidlo pod tym. */
.footer__cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__cta-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  color: var(--white);
  max-width: 20ch;
}
.footer__cta-lead {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .85);
  max-width: 46ch;
  margin-top: 1rem;
}

/* Biele kruhove tlacidlo (ako "Chcem stretnutie" na stavexkosice.sk) */
.footer__cta-btn {
  margin-top: 2.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-weight: 700;
  font-size: 1.0625rem;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  transition: transform .3s ease, background-color .25s ease;
}
.footer__cta-btn svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }
.footer__cta-btn:hover { transform: translateY(-3px); background: var(--cream); }
.footer__cta-btn:hover svg { transform: translate(2px, -2px); transition: transform .3s ease; }

/* Velky napis STAVEX — vytrca spoza bielej bubliny a smerom dole mizne */
.footer__wordmark {
  margin-top: 4rem;
  font-size: clamp(5rem, 26vw, 24rem);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--white);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  padding-top: .08em;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 97%);
}

/* Biela bublina prekryva spodok STAVEX a nesie obsah paticky */
.footer__bubble {
  position: relative;
  margin-top: -6vw;
  padding-top: 4rem;
  padding-bottom: 2.5rem;
  background: var(--white);
  color: var(--ink);
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
}

@media (min-width: 768px) {
  .footer__bubble {
    margin-top: -8vw;
    padding-top: 5rem;
    border-top-left-radius: 3.5rem;
    border-top-right-radius: 3.5rem;
  }
}

.footer__grid { display: grid; gap: 2.5rem; }

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer__logo { display: inline-block; }
.footer__logo-img { height: 44px; width: auto; margin-bottom: 1.5rem; }

.footer__tagline {
  font-size: .9375rem;
  color: var(--ink-soft);
  max-width: 34ch;
  font-style: normal;
  line-height: 1.7;
}

.footer__col h3 { font-size: 1rem; margin-bottom: 1rem; }

.footer__list li + li { margin-top: .625rem; }

.footer__link {
  font-size: .9375rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color .2s;
}
.footer__link:hover { color: var(--primary); text-decoration-color: var(--primary); }

.footer__social { display: flex; gap: .5rem; margin-top: 1.25rem; }

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--primary);
  transition: background-color .25s, color .25s, border-color .25s;
}
.footer__social-link:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.footer__social-icon { width: 18px; height: 18px; }

.footer__legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}

/* Do 1280px sedi oranzovy kruh ".to-top" (right:2rem, 48px) nad pravym koncom
   pravneho riadku a zakryva slovo "VIENALA". Rezervuj mu miesto vpravo, aby
   sa kredit necital ako "VI...A". Nad 1280px uz kruh na text nedosahuje. */
@media (min-width: 768px) and (max-width: 1280px) {
  .footer__legal { padding-right: 4.5rem; }
}

/* Tlacidlo spat hore — oranzovy kruh fixne vpravo dole */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: calc(var(--ctabar-h) + 1rem);
  z-index: 40;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .25s;
}
.to-top:hover { background: var(--primary-dark); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

@media (min-width: 768px) {
  .to-top { right: 2rem; bottom: 2rem; }
}

/* ==========================================================================
   16. STICKY CTA BAR (<768px)
   Nie je sucastou dizajnu stavexkosice.sk, ale tato stranka ma jediny ciel —
   telefonat. Preto ostava, len prekresleny do rovnakeho jazyka.
   ========================================================================== */
.ctabar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .625rem .75rem;
  padding-bottom: calc(.625rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.ctabar.is-visible { transform: translateY(0); }

.ctabar .btn { min-height: 46px; padding: .75rem 1rem; font-size: .9375rem; }

/* Cislo sa NIKDY nesmie zlomit na dva riadky */
.ctabar .btn--call { white-space: nowrap; }

@media (min-width: 768px) {
  .ctabar { display: none; }
}

@media (max-width: 400px) {
  .ctabar .btn { font-size: .875rem; padding-inline: .625rem; }
}

/* ==========================================================================
   17. VSTUPNE ANIMACIE — opal* z originalu (0.75s ease, IntersectionObserver)
   ========================================================================== */
@keyframes opalMoveUp   { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: none; } }
@keyframes opalMoveLeft { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: none; } }
@keyframes opalZoom     { from { opacity: 0; transform: scale(.92); }        to { opacity: 1; transform: none; } }

.reveal, .reveal-zoom, .reveal-up { opacity: 0; }

.reveal.is-visible       { animation: opalMoveLeft .75s ease both; }
.reveal-zoom.is-visible  { animation: opalZoom     .75s ease both; }
.reveal-up.is-visible    { animation: opalMoveUp   .75s ease both; }

/* Nadpisy → zdola hore */
h1.reveal.is-visible, h2.reveal.is-visible, h3.reveal.is-visible { animation: opalMoveUp .75s ease both; }

/* Karty v stagger mriezke → zdola hore. LONGHAND je zamerny: shorthand
   `animation:` resetuje animation-delay na 0s a s vyssou specificitou (0,3,0)
   by prebil stagger delay nizsie (nth-child, 0,2,0) — vsetky karty by nabehli
   naraz. Longhand nastavi len name/duration/timing/fill a delay necha na
   nth-child pravidlach. */
.reveal-stagger > .reveal.is-visible {
  animation-name: opalMoveUp;
  animation-duration: .75s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

/* Blok s nadpisom AJ textom: nadpis zdola, text sprava dolava */
.reveal:has(> :is(h1, h2, h3)):has(p) { opacity: 1; animation: none; }
.reveal:has(> :is(h1, h2, h3)):has(p) > * { opacity: 0; }
.reveal:has(> :is(h1, h2, h3)):has(p).is-visible > :is(h1, h2, h3) { animation: opalMoveUp .75s ease both; }
.reveal:has(> :is(h1, h2, h3)):has(p).is-visible > :not(:is(h1, h2, h3)) { animation: opalMoveLeft .75s ease both; }

/* Stagger 100 ms medzi susedmi */
.reveal-stagger > *:nth-child(2) { animation-delay: .1s; }
.reveal-stagger > *:nth-child(3) { animation-delay: .2s; }
.reveal-stagger > *:nth-child(4) { animation-delay: .3s; }
.reveal-stagger > *:nth-child(5) { animation-delay: .4s; }
.reveal-stagger > *:nth-child(6) { animation-delay: .5s; }

/* STAVEX napis — nabehne zdola, ale zachova si polopriehladnost */
.stavex-rise {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}
.stavex-rise.is-visible { opacity: .82; transform: none; }

/* ==========================================================================
   18. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal, .reveal-zoom, .reveal-up {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .reveal > * { opacity: 1; animation: none; }
  /* Stagger prvky (kontaktne karty, cennikove tabulky) maju vlastne pravidlo
     `.reveal-stagger > .reveal.is-visible` so specificitou (0,3,0), ktore by inak
     prebilo `animation:none` vyssie (0,1,0) a animovali by sa aj pri reduced-motion.
     Zhodna specificita + neskorsie poradie tu vyhra. */
  .reveal-stagger > .reveal.is-visible { animation: none; opacity: 1; }

  .stavex-rise { opacity: .82; transform: none; transition: none; }
  .eyebrow__track { animation: none; }

  /* Hero vstup vypnuty — bez base opacity:0 ostavaju nadpis aj magnet viditelne. */
  .hero__title .accent, .hero__title-rest, .hero__magnet { animation: none; }

  .btn-primary:hover,
  .contact__card:hover,
  .btn-circle:hover,
  .footer__cta-btn:hover { transform: none; }
  .btn-circle:hover .btn-circle__icon { transform: none; }
}

/* ==========================================================================
   19. PODSTRANKA "Ochrana osobnych udajov" (/osobne-udaje/)
   Dlhy pravny text, ziadne fotky, ziadne CTA v obsahu. Rozvrh je preto
   editorialny, nie "sekcia ako na domovskej": vlavo pas s nadpismi, vpravo
   uzky meraci stlpec (62ch). Znovupouziva .wrap, .split, .section__title,
   .lead, .link a tokeny — ziadne nove farby.
   ========================================================================== */

/* Hlavicka je na desktope position:absolute a na mobile fixed, teda v oboch
   pripadoch NEZABERA miesto v toku. Na domovskej to riesi hero; tu to musi
   nahradit vlastny horny padding, inak by lista sadla na nadpis. */
.legal-head {
  background: var(--cream);
  padding-top: calc(var(--nav-h) + 4rem);
  padding-bottom: 4.5rem;
}

@media (min-width: 768px) {
  .legal-head {
    padding-top: calc(var(--nav-h) + 6rem);
    padding-bottom: 6rem;
  }
}

/* .split__head je inak sticky (top:7rem). Tu je blok kratky a jednorazovy,
   takze by sa nadpis len zbytocne odlepil od uvodneho odseku. */
.legal-head .split__head { position: static; }

.legal-body { padding-block: 4rem 5rem; }

@media (min-width: 768px) {
  .legal-body { padding-block: 5.5rem 7rem; }
}

/* Kazda cast = vlasova linka + nadpis + text. Linka (nie karta, nie ramik)
   je jediny delici prvok — pravny text nema byt v ozdobnych boxoch. */
.legal__block {
  padding-block: 2.25rem;
  border-top: 1px solid var(--line);
}
.legal__block:first-child { padding-top: 0; border-top: 0; }
.legal__block:last-child { padding-bottom: 0; }

@media (min-width: 1024px) {
  .legal__block {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 2rem;
    align-items: start;
    padding-block: 3rem;
  }
  /* Telo textu musi zacinat na tom istom stlpci ako .split__body (7 / span 6),
     inak by odseky nelicovali s uvodnym .lead v .legal-head nad nimi ani s
     pravym okrajom .wrap. Nadpis dostava uzsi pas (4 namiesto 5 stlpcov) —
     nadpisy su tu kratke a nepotrebuju cely pas. */
  .legal__title { grid-column: 1 / span 4; position: sticky; top: 7rem; }
  .legal__body { grid-column: 7 / span 6; }
}

/* Velkost h3 z typografickej skaly — displejovy .section__title by pri osmich
   nadpisoch za sebou stranku roztrhal a citanie by spomalil. */
.legal__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.3px;
  color: var(--secondary);
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .legal__title { margin-bottom: 0; }
}

/* Meraci stlpec — nad ~70 znakov na riadok oko strati zaciatok dalsieho riadku. */
.legal__body { max-width: 62ch; }
.legal__body > * + * { margin-top: 1rem; }

/* Globalne "ul { list-style: none }" plati pre celu stranku, takze zoznamy
   v pravnom texte si odrazku musia vratit. Odrazka je oranzova bodka
   (tokenova farba), nie emoji a nie vlastna ::before konstrukcia. */
.legal__list {
  list-style: disc;
  padding-left: 1.35rem;
}
.legal__list li::marker { color: var(--primary); }
.legal__list li + li { margin-top: .5rem; }

/* Adresa prevadzkovatela je udaj, nie veta — dostane vahu, nie kurzivu. */
.legal__address {
  font-style: normal;
  font-weight: 600;
  line-height: 1.7;
  color: var(--secondary);
}

/* Jediny odkaz v obsahu stranky, preto smie byt vacsi nez telovy text.
   Oranzova z .link ma na bielom pozadi kontrast len 2,77:1 a nepresla by ani
   znizeny prah 3:1 pre velky text (WCAG 1.4.3). Navy dava 12,67:1 a sedi
   s .legal__address vedla. Podciarknutie z .link ostava. */
.legal__mail {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--secondary);
}
.legal__mail:hover { color: var(--primary-dark); }

/* Bez sticky CTA baru (ten patri k naborovemu obsahu) by na mobile ostal
   pod patickou prazdny pas vysky --ctabar-h. */
@media (max-width: 767px) {
  body.legal-page { padding-bottom: 0; }
}