/* ==========================================================================
   ŽUMPUJ.SK — teplý minimalizmus
   Špinavo-biely papier namiesto bielej, ťažké nadpisy s tesným prestrkom,
   veľké zaoblenia, fotografia ako hlavný vizuálny materiál.
   Zelená z loga sa používa striedmo — ako akcent, nie ako plocha.

   01 Tokeny            07 Kroky            13 Právne podstránky
   02 Reset a základ    08 Aplikácia        14 Cookie lišta
   03 Typografia        09 Video            15 Responzivita
   04 Utility a odhaľ.  10 Výhody
   05 Tlačidlá          11 Formulár
   06 Hlavička a hero   12 Pätička
   ========================================================================== */

/* ------------------------------------------------------------------ PÍSMO */
/* Inter, variabilný rez 100–900, hostovaný na vlastnom serveri (SIL OFL 1.1).
   Jeden súbor pokrýva základnú latinku, Latin-1 aj Latin Extended-A — teda
   celú slovenskú a českú diakritiku. Skoršia verzia Extended-A neobsahovala
   a znaky ako č š ž ľ ť sa dopĺňali zo systémového písma; na Windowse to bolo
   vidno. Pokrytie sa dá overiť: fonttools ttx -t cmap inter.woff2 */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter.woff2) format('woff2');
}

/* ---------------------------------------------------------------- 01 TOKENY */
:root{
  /* plochy — teplý papier, nie chladná biela */
  --bg:          #F4F2EC;
  --bg-2:        #EAE7DD;   /* striedanie sekcií */
  --surface:     #FFFFFF;   /* karty */
  --bg-dark:     #16140F;   /* telefón, video, tmavá sekcia */

  /* text */
  --ink:         #1A1712;
  --ink-2:       #403B33;
  --muted:       #5F594F;   /* 5,7:1 aj na tmavšom podklade sekcií */
  --muted-2:     #6C665B;   /* drobné popisky — stále nad 4,5:1 */

  /* linky */
  --line:        #E2DED3;
  --line-2:      #CFC9BA;

  /* značka — zelená z loga, stmavená do čitateľnej podoby */
  --brand:       #65883B;
  --brand-ink:   #4E6B2C;
  --brand-soft:  #E8EEDD;
  --warn:        #B4611C;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* rytmus */
  --wrap: 1200px;
  --gut:  clamp(18px, 4vw, 40px);
  --sec:  clamp(72px, 9vw, 140px);

  /* zaoblenia — veľké plochy sú mäkké, drobnosti len jemne */
  --r:    14px;
  --r-lg: 28px;
  --r-xl: clamp(24px, 3.4vw, 44px);
  --pill: 100px;

  --e: cubic-bezier(.22,1,.36,1);
}

/* --------------------------------------------------------- 02 RESET A ZÁKLAD */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--font);
  font-size:clamp(15.5px,1vw,17px);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
::selection{ background:var(--brand-soft); color:var(--ink); }
:focus-visible{ outline:2px solid var(--brand-ink); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); }
.section--soft{ background:var(--bg-2); }
section[id]{ scroll-margin-top:84px; }
.section--flush{ padding-top:0; }
address{ font-style:normal; }

/* Odkaz pre klávesnicu a čítačky — viditeľný až po zameraní. */
.skip{
  position:absolute; left:12px; top:-60px; z-index:300;
  padding:.7em 1.1em; border-radius:var(--pill); background:var(--ink); color:#F4F2EC;
  font-size:.9rem; transition:top .2s;
}
.skip:focus{ top:12px; }

/* ------------------------------------------------------------ 03 TYPOGRAFIA */
h1,h2,h3,h4{ color:var(--ink); font-weight:800; letter-spacing:-.03em; margin:0; }

.h1{
  font-size:clamp(2.6rem,6.6vw,4.9rem);
  line-height:.98; letter-spacing:-.042em; font-weight:800;
  text-wrap:balance;
}
.h2{
  font-size:clamp(1.95rem,4.4vw,3.4rem);
  line-height:1.02; letter-spacing:-.04em; margin-bottom:.4em; text-wrap:balance;
}
.h3{ font-size:clamp(1.12rem,1.5vw,1.32rem); line-height:1.24; letter-spacing:-.028em; }

.lead{ font-size:clamp(1.02rem,1.2vw,1.16rem); color:var(--muted); max-width:54ch; margin:0; }

/* Štítok je pilulka — rovnaký tvar ako tlačidlá, drží jazyk pokope. */
.label{
  display:inline-block; margin:0 0 1.3em;
  padding:.42em 1em; border-radius:var(--pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:.74rem; font-weight:500; letter-spacing:.04em;
  color:var(--muted);
}
.label--brand{ background:var(--brand-soft); border-color:transparent; color:var(--brand-ink); }
.section--soft .label{ background:var(--surface); }

.section__head{ max-width:min(100%,620px); margin-bottom:clamp(36px,4.5vw,60px); }
.section__head .h2{ max-width:none; }
.section__head .lead{ margin-top:1.1em; max-width:52ch; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ------------------------------------------------- 04 UTILITY A ODHAĽOVANIE */
/* Skrytý počiatočný stav platí len vtedy, keď beží JavaScript (trieda .js na
   <html>). Bez neho — a pre roboty, ktoré skripty nespúšťajú — je obsah
   viditeľný hneď. */
.js .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--e), transform .6s var(--e);
  transition-delay:var(--d,0s);
}
.js .reveal.in{ opacity:1; transform:none; }

/* Úvod stránky nečaká na skript: nabehne čistou CSS animáciou, hlavná
   fotografia sa neanimuje vôbec. Prvé vykreslenie (LCP) tak nič nezdržiava. */
.js .hero .reveal{
  opacity:1; transform:none; transition:none;
  animation:nabeh .7s var(--e) backwards; animation-delay:var(--d,0s);
}
.js .hero .hero__shot{ animation:none; }
@keyframes nabeh{ from{ opacity:0; transform:translateY(16px) } }

/* Karta — biely papier na teplom podklade, veľký rádius, žiadny tieň. */
.card{
  background:var(--surface); border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,44px);
}
.card--dark{ background:var(--bg-dark); color:rgba(244,242,236,.72); }
.card--dark h2,.card--dark h3,.card--dark b{ color:#F4F2EC; }

/* Fotografia — vždy v rovnakom zaoblení ako karty. */
.shot{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:var(--bg-2);
}
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot--wide{ aspect-ratio:16/8.2; }
.shot--tall{ aspect-ratio:4/3.4; }

/* Popiska ako pilulka priamo vo fotke. */
.shot__cap{
  position:absolute; left:clamp(14px,2vw,24px); bottom:clamp(14px,2vw,24px);
  display:inline-flex; align-items:center; gap:8px;
  padding:.5em 1em; border-radius:var(--pill);
  background:rgba(244,242,236,.92); backdrop-filter:blur(8px);
  font-size:.82rem; color:var(--ink); font-weight:500; letter-spacing:-.01em;
}
.shot__cap svg{ width:16px; height:16px; flex:none; color:var(--brand-ink); }

/* Dvojica fotka + text. */
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:center;
}
.split--flip .split__media{ order:2; }
.split__body .h2{ max-width:11em; margin-bottom:.35em; }
.split__body .lead{ margin-top:1em; }

/* Odrážky s fajkou */
.ticks{ display:grid; gap:12px; margin-top:clamp(22px,2.6vw,32px); }
.ticks li{ display:flex; gap:12px; align-items:flex-start; font-size:.98rem; color:var(--ink-2); }
.ticks svg{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--brand-ink); }

/* ------------------------------------------------------------ 05 TLAČIDLÁ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 1.5em; border-radius:var(--pill);
  font-size:.96rem; font-weight:500; letter-spacing:-.015em;
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--e);
  white-space:nowrap;
}
.btn__ico{ width:1.05em; height:1.05em; flex:none; transition:transform .3s var(--e); }
.btn:hover .btn__ico{ transform:translateX(3px); }

.btn--solid{ background:var(--ink); color:#F4F2EC; }
.btn--solid:hover{ background:var(--brand-ink); }

.btn--ghost{ background:var(--surface); border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }

.btn--text{ position:relative; padding:.4em 0; color:var(--ink); font-weight:500; }
.btn--text::after{
  content:''; display:block; height:1px; background:currentColor;
  position:absolute; left:0; right:0; bottom:.15em; transform:scaleX(1); transform-origin:left;
  transition:transform .3s var(--e);
}
.btn--text:hover::after{ transform:scaleX(0); transform-origin:right; }

.btn--block{ width:100%; justify-content:center; }

/* -------------------------------------------------- 06 HLAVIČKA, MENU, HERO */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(244,242,236,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.header.stuck{ border-bottom-color:var(--line); }
/* Vnútro hlavičky má rovnakú šírku a okraje ako obsah stránky (.wrap),
   takže logo sedí nad ľavým okrajom textu a tlačidlo nad pravým. */
.header__in{
  display:flex; align-items:center; gap:24px;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:12px var(--gut);
}

.brand{ display:grid; gap:3px; justify-items:start; margin-right:auto; }
.brand__logo{ height:clamp(32px,3.1vw,40px); width:auto; margin-left:-2px; }
.brand__tag{
  font-style:normal; font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);
}

/* Navigácia v pilulke — priamy odkaz na jazyk tlačidiel. */
.nav{
  display:flex; gap:4px; padding:4px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--pill);
}
.nav a{
  padding:.5em .95em; border-radius:var(--pill);
  font-size:.9rem; color:var(--muted); transition:color .25s, background .25s;
}
.nav a:hover{ color:var(--ink); }
.nav a.active{ color:var(--ink); background:var(--bg-2); }

.header__cta{ font-size:.92rem; padding:.72em 1.25em; }

.burger{ display:none; width:42px; height:42px; padding:0; place-content:center end; gap:6px; }
.burger i{ display:block; width:20px; height:1.6px; background:var(--ink); transition:transform .35s var(--e); }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(3.8px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.8px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:99; background:var(--bg);
  display:grid; align-content:center; padding:0 var(--gut);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.menu.open{ opacity:1; visibility:visible; }
.menu a{
  display:block; padding:.42em 0; border-bottom:1px solid var(--line);
  font-size:clamp(1.7rem,9vw,2.6rem); font-weight:800; color:var(--ink); letter-spacing:-.04em;
}
.menu__foot{ margin-top:32px; font-size:.85rem; color:var(--muted); display:grid; gap:4px; }
.menu__foot a{ display:inline; padding:0; border:0; font-size:inherit; color:var(--brand-ink); }

/* --- hero --- */
.hero{ padding-block:clamp(40px,6vw,80px) clamp(48px,6vw,84px); }
.hero__inner{ max-width:min(100%,760px); }
.hero .h1{ max-width:9em; margin-bottom:.32em; }
.hero__lead{
  font-size:clamp(1.06rem,1.35vw,1.26rem); color:var(--muted);
  max-width:50ch; margin:0 0 2em;
}
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }

/* Veľká fotografia hneď pod nadpisom — nesie celý dojem.
   Pomer je presne pomer zdroja, aby sa neorezali popisky vo fotke. */
.hero__shot{ margin:clamp(36px,5vw,64px) 0 0; aspect-ratio:1280/700; }

.facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
  margin-top:clamp(32px,4vw,52px); padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line);
}
.facts li{ display:grid; gap:2px; }
.facts b{ font-size:clamp(1.7rem,2.6vw,2.5rem); font-weight:800; color:var(--ink); letter-spacing:-.04em; line-height:1.05; }
.facts span{ font-size:.85rem; color:var(--muted); line-height:1.4; }
.facts__note{ margin:14px 0 0; font-size:.78rem; color:var(--muted-2); }

/* ----------------------------------------------------------------- 07 KROKY */
.steps{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
}
.step{
  background:var(--surface); border-radius:var(--r-xl);
  padding:clamp(24px,3vw,38px);
  display:grid; gap:14px; align-content:start;
  transition:transform .4s var(--e);
}
.step:hover{ transform:translateY(-3px); }
.step__ico,.benefit__ico{
  width:52px; height:52px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink);
  transition:background .3s, color .3s;
}
.step__ico svg,.benefit__ico svg{ width:25px; height:25px; }
.step:hover .step__ico,.benefit:hover .benefit__ico{ background:var(--brand-ink); color:#fff; }

.step__head{ display:grid; gap:4px; }
.step__num{
  font-size:.72rem; font-weight:500; letter-spacing:.1em; color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.step p{ margin:0; color:var(--muted); font-size:.96rem; }

/* ------------------------------------------------------------ 08 APLIKÁCIA */
.app{ border-radius:var(--r-xl); padding:clamp(28px,4.4vw,64px); }
.app__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,5vw,72px); align-items:center;
}
.app__head{ margin-bottom:clamp(28px,3.4vw,48px); max-width:min(100%,560px); }
.app__head .lead{ color:rgba(244,242,236,.6); }
.app .label{ background:rgba(244,242,236,.1); border-color:transparent; color:rgba(244,242,236,.8); }

.app__list{ display:grid; gap:0; }
.app__item{ display:flex; gap:14px; padding-block:18px; border-bottom:1px solid rgba(244,242,236,.12); }
.app__item:first-child{ border-top:1px solid rgba(244,242,236,.12); }
.app__ico{ width:18px; height:18px; flex:none; margin-top:5px; color:#A0E418; }
.app__item h3{ color:#F4F2EC; font-weight:600; font-size:1.02rem; line-height:1.4; margin:0 0 2px; letter-spacing:-.02em; }
.app__item p{ margin:0; color:rgba(244,242,236,.6); font-size:.94rem; }
.app__replay{
  margin-top:24px; align-self:start; padding:.6em 1.2em; border-radius:var(--pill);
  border:1px solid rgba(244,242,236,.2);
  font-size:.84rem; color:rgba(244,242,236,.75); transition:.25s;
}
.app__replay:hover{ border-color:rgba(244,242,236,.5); color:#F4F2EC; }

/* --- telefón --- */
.phone{ position:relative; justify-self:center; width:min(100%,300px); }
.phone__frame{
  position:relative; border-radius:38px; padding:9px;
  background:linear-gradient(160deg,#33372C,#0E0D09 45%,#22261C);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(244,242,236,.08);
}
.phone__notch{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:84px; height:19px; border-radius:100px; background:#080906; z-index:3;
}
.phone__screen{
  position:relative; border-radius:30px; overflow:hidden; aspect-ratio:9/19;
  background:#0D0C08;
}
.ui{ position:absolute; inset:0; padding:40px 14px 14px; display:grid; gap:10px; align-content:start;
  font-size:12px; color:rgba(244,242,236,.72); }
.ui__top{ display:flex; justify-content:space-between; align-items:flex-start; }
.ui__hi{ margin:0; font-weight:600; font-size:12.5px; color:#F4F2EC; }
.ui__addr{ margin:0; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,242,236,.42); }
.ui__live{
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:100px;
  border:1px solid rgba(160,228,24,.32); background:rgba(160,228,24,.10);
  font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:#A0E418;
}
.ui__live i{ width:5px; height:5px; border-radius:50%; background:#A0E418; animation:blip 1.6s infinite; }
@keyframes blip{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }

.gauge{ position:relative; height:124px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(244,242,236,.10); background:rgba(244,242,236,.03); }
.gauge__fill{
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg,rgba(47,217,166,.62),rgba(12,86,66,.9));
  transition:height .9s var(--e), background .5s;
}
.gauge__fill.warn{ background:linear-gradient(180deg,rgba(217,132,60,.7),rgba(150,72,28,.9)); }
.gauge__wave{
  position:absolute; top:-8px; left:-50%; width:200%; height:16px; border-radius:50%;
  background:radial-gradient(50% 100% at 50% 100%,rgba(255,255,255,.3),transparent 70%);
  animation:wave 4s linear infinite;
}
.gauge__wave--2{ animation-duration:6.5s; animation-direction:reverse; opacity:.6; }
@keyframes wave{ from{ transform:translateX(0) } to{ transform:translateX(25%) } }
.gauge__val{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.gauge__val b{ font-size:2.3rem; font-weight:800; line-height:1; letter-spacing:-.045em; color:#F4F2EC; }
.gauge__val i{ font-style:normal; font-size:.62rem; letter-spacing:.18em; color:rgba(244,242,236,.55); }
.gauge__mark{ position:absolute; left:0; right:0; bottom:var(--p); border-top:1px dashed rgba(244,242,236,.26); }
.gauge__mark span{ position:absolute; right:6px; top:-13px; font-size:7.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(244,242,236,.45); }

.ui__chart{ border:1px solid rgba(244,242,236,.10); border-radius:12px; padding:9px 9px 3px;
  background:rgba(244,242,236,.03); }
.ui__chart-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:3px;
  font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,242,236,.45); }
.ui__chart-head b{ color:#59BCAB; }
.ui__chart svg{ width:100%; height:58px; overflow:visible; }
.chart__area{ fill:url(#gArea); }
.chart__line{ fill:none; stroke:#59BCAB; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chart__dot{ fill:#fff; stroke:#59BCAB; stroke-width:2; }

.ui__feed{ display:grid; gap:5px; min-height:48px; }
.ui__feed-item{
  display:flex; gap:7px; align-items:flex-start; padding:6px 8px; border-radius:9px;
  border:1px solid rgba(244,242,236,.10); background:rgba(244,242,236,.04);
  font-size:10px; animation:fadeIn .45s var(--e) both;
}
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.ui__feed-item b{ color:#F4F2EC; font-weight:600; }
.ui__feed-item i{ font-style:normal; font-size:8px; color:rgba(244,242,236,.42); margin-left:auto; white-space:nowrap; }
.ui__feed-dot{ width:5px; height:5px; border-radius:50%; background:#59BCAB; margin-top:4px; flex:none; }
.ui__feed-item.ok .ui__feed-dot{ background:#A0E418; }
.ui__feed-item.warn .ui__feed-dot{ background:#D9843C; }

.ui__cta{
  display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:12px;
  background:#A0E418; color:#16140F;
  opacity:0; transform:translateY(10px); transition:opacity .45s var(--e), transform .45s var(--e);
}
.ui__cta.on{ opacity:1; transform:none; }
.ui__cta-ico{ width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:rgba(22,20,15,.14); }
.ui__cta-ico svg{ width:18px; }
.ui__cta b{ display:block; font-size:11px; }
.ui__cta span{ font-size:8px; letter-spacing:.1em; text-transform:uppercase; opacity:.72; }

.toasts{ position:absolute; top:40px; left:50%; transform:translateX(-50%); width:104%;
  display:grid; gap:7px; z-index:5; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:14px;
  background:#F4F2EC;
  box-shadow:0 16px 34px -18px rgba(0,0,0,.6);
  font-size:11.5px; color:var(--ink-2);
  animation:toastIn .5s var(--e) both;
}
.toast.out{ animation:toastOut .4s var(--e) both; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-10px) } to{ opacity:1; transform:none } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-8px) } }
.toast b{ display:block; color:var(--ink); font-weight:600; }
.toast span{ font-size:10px; color:var(--muted); }
.toast__ico{ width:26px; height:26px; flex:none; display:grid; place-items:center;
  border-radius:9px; background:var(--brand-soft); color:var(--brand-ink); }
.toast__ico svg{ width:16px; }
.toast.warn .toast__ico{ background:#FBEEE2; color:var(--warn); }

.road{ position:absolute; left:-6%; right:-6%; bottom:-34px; height:34px; overflow:hidden; }
.road__line{ position:absolute; left:0; right:0; top:17px; height:1px;
  background:repeating-linear-gradient(90deg,rgba(244,242,236,.28) 0 10px,transparent 10px 22px); }
.road__truck{ position:absolute; top:0; left:0; width:38px; color:#A0E418;
  opacity:0; transform:translateX(-50px); transition:opacity .3s; }
.road__truck.go{ opacity:1; animation:drive 5s var(--e) forwards; }
@keyframes drive{ from{ transform:translateX(-50px) } to{ transform:translateX(calc(100% + 50px)) } }

/* ----------------------------------------------------------------- 09 VIDEO */
.player{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden;
  background:var(--bg-dark); cursor:pointer;
}
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.player__thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.player__btn{
  position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center; background:#F4F2EC; color:var(--ink);
  box-shadow:0 12px 34px -10px rgba(0,0,0,.5); transition:transform .3s var(--e);
}
.player:hover .player__btn{ transform:scale(1.06); }
.player__btn svg{ width:26px; margin-left:3px; }
.player.playing .player__btn,.player.playing .player__thumb,.player.playing .player__gate{ display:none; }

.player__gate{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:14px; padding:32px; text-align:center; color:rgba(244,242,236,.78);
}
.player__gate b{ color:#F4F2EC; font-weight:700; font-size:1.05rem; letter-spacing:-.02em; }
.player__gate p{ margin:0; font-size:.9rem; max-width:44ch; }
.player__gate .btn{ background:#F4F2EC; color:var(--ink); }
.player__gate .btn:hover{ background:#fff; }

/* --------------------------------------------------------------- 10 VÝHODY */
.benefits__list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
}
.benefit{
  background:var(--surface); border-radius:var(--r-xl);
  padding:clamp(24px,3vw,38px); display:grid; gap:14px; align-content:start;
  transition:transform .4s var(--e);
}
.benefit:hover{ transform:translateY(-3px); }
.benefit h3{ margin:0; }
.benefit p{ margin:0; color:var(--muted); font-size:.96rem; }
.benefits__shot{ grid-column:1/-1; aspect-ratio:16/7; }

/* ------------------------------------------------------------- 11 FORMULÁR */
.signup__grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4.5vw,72px); align-items:start;
}
.signup__note{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:20px; padding:.6em 1.2em .6em .9em; border-radius:var(--pill);
  background:var(--brand-soft); color:var(--brand-ink); font-size:.88rem; font-weight:500;
}
.signup__note svg{ width:17px; height:17px; flex:none; }
.signup__mail{ display:inline-flex; align-items:center; gap:8px; }
.signup__mail svg{ width:16px; height:16px; flex:none; }
.signup__contact{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted); }
.signup__contact b{ display:block; color:var(--ink); font-weight:700; }
.signup__contact a{ color:var(--brand-ink); }

.form{
  display:grid; gap:22px; position:relative;
  background:var(--surface); border-radius:var(--r-xl); padding:clamp(24px,3.2vw,40px);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form__row--3{ grid-template-columns:2fr 2fr 1.1fr; }

.field{ position:relative; }
.field input{
  width:100%; padding:.72em .95em; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); font:inherit; font-size:1rem;
  border-radius:var(--r); transition:border-color .25s, background .25s;
}
.field input:focus{ outline:none; border-color:var(--brand-ink); background:var(--surface); }
.field label{ display:block; font-size:.78rem; color:var(--muted); margin-bottom:5px; }
.field.err input{ border-color:#C0392B; }
.field.err label{ color:#C0392B; }

.choice{ border:0; padding:0; margin:0; display:grid; gap:10px; }
.choice legend{ font-size:.78rem; color:var(--muted); padding:0; margin-bottom:4px; }
.choice__opt{ display:block; cursor:pointer; }
.choice__opt input{ position:absolute; opacity:0; width:0; height:0; }
.choice__box{
  display:grid; gap:1px; padding:14px 16px 14px 46px; border-radius:var(--r-lg);
  border:1px solid var(--line); position:relative; transition:border-color .25s, background .25s;
}
.choice__box::before{
  content:''; position:absolute; left:17px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; border-radius:50%; border:1.5px solid var(--line-2); transition:border-color .25s;
}
.choice__box::after{
  content:''; position:absolute; left:21.5px; top:50%; transform:translateY(-50%) scale(0);
  width:8px; height:8px; border-radius:50%; background:var(--brand-ink); transition:transform .25s var(--e);
}
.choice__opt:hover .choice__box{ border-color:var(--line-2); }
.choice__opt input:checked + .choice__box{ border-color:var(--brand); background:var(--brand-soft); }
.choice__opt input:checked + .choice__box::before{ border-color:var(--brand-ink); }
.choice__opt input:checked + .choice__box::after{ transform:translateY(-50%) scale(1); }
.choice__opt input:focus-visible + .choice__box{ outline:2px solid var(--brand-ink); outline-offset:3px; }
.choice__box b{ font-size:.96rem; font-weight:600; color:var(--ink); letter-spacing:-.02em; }
.choice__box em{ font-style:normal; font-size:.85rem; color:var(--muted); }

.gdpr{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; font-size:.86rem; color:var(--muted); }
.gdpr input{ position:absolute; opacity:0; width:0; height:0; }
.gdpr__box{
  width:20px; height:20px; flex:none; border-radius:6px; border:1.5px solid var(--line-2);
  display:grid; place-items:center; margin-top:2px; transition:background .25s, border-color .25s;
}
.gdpr__box svg{ width:12px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .3s var(--e); }
.gdpr input:checked + .gdpr__box{ background:var(--brand-ink); border-color:var(--brand-ink); }
.gdpr input:checked + .gdpr__box svg{ stroke-dashoffset:0; }
.gdpr input:focus-visible + .gdpr__box{ outline:2px solid var(--brand-ink); outline-offset:3px; }
.gdpr a{ color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; }
.gdpr.err .gdpr__box{ border-color:#C0392B; }

.field--pasca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__err{ margin:-6px 0 0; font-size:.9rem; color:#B3261E; }
.form__err[hidden]{ display:none; }
.form .btn[disabled]{ opacity:.55; cursor:progress; }
.form__done[hidden]{ display:none; }
.form__done{
  position:absolute; inset:0; z-index:4; border-radius:var(--r-xl);
  display:grid; place-content:center; justify-items:center; gap:8px; text-align:center; padding:32px;
  background:var(--surface);
}
.form__done b{ font-size:1.3rem; color:var(--ink); font-weight:800; letter-spacing:-.03em; }
.form__done > span:last-child{ color:var(--muted); font-size:.92rem; max-width:34ch; }
.form__check{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--brand-ink);
}
.form__check svg{ width:24px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* --------------------------------------------------------------- 12 PÄTIČKA */
.footer{ border-top:1px solid var(--line); padding-top:clamp(36px,4vw,56px); }
.footer__top{ display:flex; flex-wrap:wrap; gap:28px 48px; }
.footer__brand{ flex:1 1 260px; }
.footer__logo{ height:36px; width:auto; }
.footer__brand p{ margin:14px 0 0; font-size:.88rem; color:var(--muted); max-width:32ch; }
.footer__col{ flex:1 1 140px; }
.footer__col .footer__h{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); margin:0 0 12px; line-height:1.4; }
.footer__col p,.footer__col address{ margin:0; font-size:.9rem; color:var(--muted); line-height:1.9; }
.footer__col a:hover{ color:var(--ink); }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center;
  margin-top:clamp(30px,3.4vw,48px); padding:18px 0 22px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--muted-2);
}
.footer__bottom a:hover{ color:var(--ink); }
.footer__made a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
.footer__made a:hover{ text-decoration-color:currentColor; }
.footer__up{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.footer__up svg{ width:14px; transform:rotate(-90deg); }

/* ------------------------------------------------ 13 PRÁVNE PODSTRÁNKY */
.header--simple{ border-bottom:1px solid var(--line); }
.legal{ position:relative; padding-block:clamp(44px,5.5vw,88px); }
.legal__bg{ display:none; }
.legal__inner{ max-width:74ch; margin-inline:auto; }
.legal__back{ display:inline-flex; align-items:center; gap:7px; font-size:.85rem; color:var(--muted); margin-bottom:28px; }
.legal__back svg{ width:16px; height:16px; flex:none; transform:rotate(180deg); }
.legal__back:hover{ color:var(--ink); }
.legal h1{ font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.02; letter-spacing:-.04em; margin:0 0 .5em; }
.legal h2{ font-size:1.3rem; letter-spacing:-.03em; margin:2.4em 0 .7em; padding-top:1.6em; border-top:1px solid var(--line); }
.legal h3{ font-size:1.02rem; margin:1.8em 0 .5em; }
.legal p,.legal li{ color:var(--ink-2); }
.legal p{ margin:0 0 1.1em; }
.legal ul,.legal ol{ margin:0 0 1.3em; padding-left:1.3em; }
.legal ul{ list-style:disc; } .legal ol{ list-style:decimal; }
.legal li{ margin-bottom:.5em; padding-left:.2em; }
.legal a{ color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal__meta{ font-size:.85rem; color:var(--muted); margin-bottom:2.4em; }
.legal__box{
  padding:22px 24px; border-radius:var(--r-lg); background:var(--surface); margin:0 0 1.6em;
}
.legal__box p:last-child{ margin-bottom:0; }
.legal__note{ font-size:.86rem; color:var(--muted); border-left:2px solid var(--brand); padding-left:14px; }
.legal__toc{ margin:0 0 2.6em; padding:22px 24px; background:var(--surface); border-radius:var(--r-lg); }
.legal__toc ol{ margin:0; padding-left:1.2em; }
.legal__toc li{ margin-bottom:.35em; }
.legal__toc a{ text-decoration:none; color:var(--ink-2); }
.legal__toc a:hover{ color:var(--brand-ink); text-decoration:underline; }

.tbl{ overflow-x:auto; margin:0 0 1.6em; background:var(--surface); border-radius:var(--r-lg); }
.tbl table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:520px; }
.tbl th,.tbl td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th{ color:var(--ink); font-weight:600; background:var(--bg-2); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl__hint{ display:none; font-size:.78rem; color:var(--muted-2); margin:-1.2em 0 1.6em; }
.tbl.is-scrollable + .tbl__hint{ display:block; }
.tbl.is-end + .tbl__hint{ display:none; }

/* ------------------------------------------------------- 14 COOKIE LIŠTA */
.cc-banner{
  position:fixed; left:var(--gut); right:var(--gut); bottom:var(--gut); z-index:200;
  max-width:var(--wrap); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
  padding:22px 24px; border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:0 24px 60px -24px rgba(26,23,18,.35);
  opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none;
  transition:opacity .4s var(--e), transform .4s var(--e), visibility .4s;
}
.cc-banner.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.cc-banner__body{ flex:1 1 380px; }
.cc-banner__title{ margin:0 0 4px; font-size:1.05rem; font-weight:700; color:var(--ink); letter-spacing:-.025em; }
.cc-banner__txt{ margin:0; font-size:.88rem; color:var(--muted); }
.cc-banner__txt a{ color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; }
.cc-banner__actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cc-banner__x{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; color:var(--muted-2); font-size:18px; line-height:1;
}
.cc-banner__x:hover{ background:var(--bg-2); color:var(--ink); }

.cc-btn{ padding:.72em 1.3em; border-radius:var(--pill); font-size:.9rem; font-weight:500; transition:.25s; }
.cc-btn--solid{ background:var(--ink); color:#F4F2EC; }
.cc-btn--solid:hover{ background:var(--brand-ink); }
.cc-btn--ghost{ border:1px solid var(--line-2); color:var(--ink); }
.cc-btn--ghost:hover{ border-color:var(--ink); }
.cc-btn--plain{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; padding:.72em .4em; }
.cc-btn--plain:hover{ color:var(--ink); }

.cc-modal{
  position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:var(--gut);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.cc-modal.open{ opacity:1; visibility:visible; }
.cc-modal__backdrop{ position:absolute; inset:0; background:rgba(26,23,18,.4); }
.cc-modal__panel{
  position:relative; width:min(100%,560px); max-height:88vh; display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r-lg);
  box-shadow:0 30px 70px -30px rgba(26,23,18,.5);
  transform:translateY(10px); transition:transform .35s var(--e);
}
.cc-modal.open .cc-modal__panel{ transform:none; }
.cc-modal__head{ padding:26px 26px 12px; }
.cc-modal__head h2{ margin:0; font-size:1.3rem; letter-spacing:-.03em; }
.cc-modal__intro{ margin:8px 0 0; font-size:.9rem; color:var(--muted); }
.cc-modal__x{ position:absolute; top:16px; right:18px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; color:var(--muted-2); font-size:20px; line-height:1; }
.cc-modal__x:hover{ background:var(--bg-2); color:var(--ink); }
.cc-modal__scroll{ overflow-y:auto; padding:8px 26px 20px; display:grid; gap:14px; }
.cc-modal__foot{ display:flex; flex-wrap:wrap; gap:10px; padding:18px 26px 24px; border-top:1px solid var(--line); }

.cc-group{ padding:16px 18px; background:var(--bg); border-radius:var(--r-lg); }
.cc-group__head{ display:flex; align-items:center; gap:12px; }
.cc-group__name{ font-weight:600; color:var(--ink); font-size:.95rem; margin-right:auto; }
.cc-group__tag{ font-size:.72rem; color:var(--muted-2); }
.cc-group__desc{ margin:8px 0 0; font-size:.86rem; color:var(--muted); }

.cc-switch{ position:relative; flex:none; width:40px; height:23px; }
.cc-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cc-switch__track{
  position:absolute; inset:0; border-radius:100px; background:var(--line-2); transition:background .25s;
}
.cc-switch__knob{
  position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%;
  background:#fff; transition:transform .25s var(--e); box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.cc-switch input:checked ~ .cc-switch__track{ background:var(--brand-ink); }
.cc-switch input:checked ~ .cc-switch__knob{ transform:translateX(17px); }
.cc-switch input:focus-visible ~ .cc-switch__track{ outline:2px solid var(--brand-ink); outline-offset:2px; }
.cc-switch--locked{ opacity:.55; }
.cc-switch--locked input{ cursor:not-allowed; }

/* ------------------------------------- 15 RESPONZIVITA A REDUCED MOTION */
@media (max-width:1000px){
  .split{ grid-template-columns:1fr; gap:clamp(22px,4vw,36px); }
  .split--flip .split__media{ order:0; }
  /* Predchádzajúca sekcia končí fotkou — v jednom stĺpci by tu boli dve
     fotografie tesne za sebou. */
  .split__media{ display:none; }
}
@media (max-width:900px){
  .nav,.header__cta{ display:none; }
  .burger{ display:grid; }
  .hero__inner{ max-width:none; }
  .app__grid{ grid-template-columns:1fr; }
  .phone{ order:-1; }
  .signup__grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .steps,.benefits__list{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr 1fr; gap:20px 24px; }
  .form__row,.form__row--3{ grid-template-columns:1fr; }
  .benefits__shot{ aspect-ratio:4/3; }
  .cc-banner{ left:12px; right:12px; bottom:12px; padding:20px; }
  .cc-banner__actions{ width:100%; }
  .cc-btn{ flex:1 1 auto; justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{ opacity:1!important; transform:none!important; }
}

/* ------------------------------------------------------ 16 CHYBOVÁ STRÁNKA */
.chyba{ padding-block:clamp(20px,6vw,80px); }
.chyba .lead{ margin-top:1em; }
.chyba__cta{ margin-top:2em; }