/* ==========================================================================
   AI SKOLENIA: spolocna znacka pre vsetky predajne stranky
   Nacitavaju: index.html, eu-ai-act.html, eu-ai-act-vsl.html,
               2x-system.html, 2x-system-vsl.html
   Kosik ma vlastny CSS (iny layout, kolidovali by nazvy tried).

   Jedna znacka, jedna modra. Zelena sa pouziva VYHRADNE ako semanticka
   farba pre "hotovo, uspech, odskrtnute" (--ok), nikdy nie ako znackova
   farba a nikdy nie na tlacidlach.
   ========================================================================== */

:root{
  --ink:#16181D;
  --dark:#16181D;           /* tmavy pas. 2X stranky si ho prepisuju na hlboku indigovu */
  --accent:#4F5BD5;
  --accent-d:#3A43B4;
  --soft:#ECEEFB;
  --softb:#A2A8E6;
  --bg:#F7F8FB;
  --card:#fff;
  --line:#E1E3F3;
  --text:#23262F;
  --muted:#5F6480;
  --ok:#1FA372;             /* len semanticky: hotovo / uspech / odskrtnute */
  --ok-d:#17805A;
  --warn:#C6462F;
  --fd:'Bricolage Grotesque',sans-serif;
  --fb:'Hanken Grotesk',sans-serif;
}

/* ---------- zaklad ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{font-family:var(--fb);color:var(--text);background:var(--bg);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--fd);color:var(--ink);letter-spacing:-0.02em;line-height:1.1;font-weight:800;text-wrap:balance;}
a{color:inherit;text-decoration:none;}
/* mobil: iOS Safari priblizi stranku pri kliknuti do pola mensieho ako 16px */
input,select,textarea{font-size:16px;}
.wrap{max-width:960px;margin:0 auto;padding:0 22px;}
strong{color:var(--ink);font-weight:700;}
.center{text-align:center;}
section{padding:52px 0;}

/* ---------- NAV ---------- */
/* Hlavicka nikde nie je prilepena. Rozhodnutie majitela 26.7.2026. */
.nav{position:static;background:var(--bg);border-bottom:1px solid var(--line);}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:58px;}
.brand{text-decoration:none;cursor:pointer;display:flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:800;font-size:17px;color:var(--ink);}
.brand .tile{width:36px;height:36px;flex:none;display:block;}
.brand .tile svg{display:block;width:100%;height:100%;}
.nav .mail{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.nav .mail a{color:var(--accent-d);font-weight:700;}
.nav .mail a:hover{text-decoration:underline;}

/* ---------- TLACIDLA ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-weight:700;font-size:15px;padding:12px 22px;border-radius:10px;border:0;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 5px 16px rgba(79,91,213,.32);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(79,91,213,.42);}
.btn-arrow::after{content:"→";}

/* ---------- HERO ---------- */
/* glow zacina presne na hornej hrane hero, takze medzi hlavickou a hero
   nikdy nevznikne ostra ciara ani ked je hlavicka tmava */
.hero{background:var(--dark);color:#fff;padding:42px 0 52px;position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:1000px;height:640px;background:radial-gradient(closest-side,rgba(79,91,213,.42),transparent);pointer-events:none;}
/* Hero stoji na tom istom 860 px stlpci ako vsetky ostatne prvky stranky. */
.hero .inner{position:relative;max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;}
.hero h1{color:#fff;font-size:clamp(23px,3vw,33px);margin:0 auto 14px;}
.hero h1 .hl{color:var(--softb);}
.hero h1 br.d{display:block;}
@media(max-width:820px){
  .hero h1 br.d,.hero .lead br.d{display:none;}
  /* Druha veta podnadpisu je len pre pocitac, mobil drzi jeden kratky uder. */
  .hero .lead .d2{display:none;}
  /* Ziadny strop na sirku a ziadne vyvazovanie riadkov: balance tlaci text
     do uzkeho stlpca v strede, riadky maju tiect naplno od okraja po okraj. */
  .hero h1{max-width:none;text-wrap:initial;}
  .hero .lead{max-width:none;text-wrap:initial;}
}
.hero .lead{font-size:clamp(15px,1.6vw,16.5px);color:#C9CDE8;max-width:54ch;margin:0 auto;text-wrap:balance;}
.hero .lead strong{color:#fff;}
.hero .cta-zone{display:flex;flex-direction:column;align-items:center;gap:14px;margin:22px 0 20px;}
.params{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;}
.params span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#C9CDE8;font-weight:600;letter-spacing:.02em;}

.kick{display:inline-flex;align-items:center;gap:8px;background:rgba(210,69,43,.14);border:1px solid rgba(228,97,74,.4);color:#FFB5A6;font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:12px;margin-bottom:18px;}
.kick .eu{flex:none;display:block;border-radius:2px;}
.kick .dot{width:7px;height:7px;border-radius:50%;background:#E4614A;box-shadow:0 0 0 3px rgba(228,97,74,.25);}

.discover{display:flex;flex-direction:column;align-items:center;gap:3px;margin:20px 0 4px;color:var(--softb);font-size:13.5px;font-weight:600;}
.discover svg{animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.vsl{width:min(900px,100%);aspect-ratio:16/9;border-radius:14px;background:linear-gradient(160deg,#20242E,#161821);border:1px solid rgba(162,168,230,.2);display:grid;place-items:center;box-shadow:0 22px 60px rgba(0,0,0,.45);position:relative;}
.vsl::after{content:"VSL video sem";position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#69708A;font-size:12px;letter-spacing:.04em;}
.vsl .play{width:66px;height:66px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 8px 26px rgba(79,91,213,.5);}

/* ---------- NAHLAD VIDEA ---------- */
.vthumb-wrap{width:100%;min-width:0;max-width:860px;margin:24px auto 0;}
/* Obal prehravaca. Drzi presnu velkost od prvej sekundy, takze sa nic nikam
   neposunie, kym sa Wistia nacita (Juraj, 9.8.2026). */
.vsl-box{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#12141B;box-shadow:0 22px 60px rgba(0,0,0,.45);}
.vsl-box wistia-player{display:block;width:100%;height:100%;}
.vthumb{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:16px;overflow:hidden;background:#12141B;color:#fff;font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 22px 60px rgba(0,0,0,.45);transition:transform .18s ease,box-shadow .25s ease;}
.vthumb:hover{transform:translateY(-2px);box-shadow:0 28px 70px rgba(0,0,0,.55);}
.vthumb:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.vthumb-bg{position:absolute;inset:0;background:#12141B center/cover no-repeat;}
.vthumb-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,10,18,.88) 0%,rgba(8,10,18,.70) 40%,rgba(8,10,18,.30) 72%,rgba(8,10,18,.42) 100%);}
.vthumb-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(12px,2vw,20px);padding:clamp(16px,4vw,44px);}
.vthumb-h{text-wrap:balance;font-family:var(--fd);font-weight:800;letter-spacing:-0.02em;line-height:1.08;color:#fff;font-size:clamp(18px,3.6vw,38px);text-shadow:0 2px 20px rgba(0,0,0,.5);}
.vthumb-play{flex:none;display:grid;place-items:center;width:clamp(46px,6.4vw,68px);height:clamp(46px,6.4vw,68px);border-radius:50%;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .18s ease;}
.vthumb-play svg{display:block;width:34%;height:auto;margin-left:8%;}
.vthumb:hover .vthumb-play{transform:scale(1.08);}
@media(prefers-reduced-motion:reduce){
  .vthumb,.vthumb-play{transition:none;}
  .vthumb:hover{transform:none;box-shadow:0 22px 60px rgba(0,0,0,.45);}
  .vthumb:hover .vthumb-play{transform:none;}
}

/* ---------- NADPISY SEKCII ---------- */
.eyebrow{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.eyebrow.warn{color:var(--warn);}
h2.sec{font-size:clamp(20px,2.6vw,27px);margin-bottom:10px;}
.intro{font-size:15px;color:var(--muted);max-width:58ch;margin:0 auto 28px;}

/* ---------- FAKTY ---------- */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:800px;margin:0 auto 22px;text-align:left;}
.fact{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:19px 21px;}
.fact .fn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--soft);color:var(--accent-d);font-family:var(--fd);font-weight:800;font-size:13px;margin-bottom:10px;}
.fact h3{font-size:15px;margin-bottom:5px;}
.fact p{font-size:13.5px;color:var(--muted);}
.fact p strong{font-weight:600;}

/* ---------- STATEMENT ---------- */
.statement{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 32px;max-width:800px;margin:0 auto;text-align:left;}
.statement .lbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--warn);font-weight:700;margin-bottom:10px;}
.statement .lbl.accent{color:var(--accent);}
.statement .big{font-family:var(--fd);font-weight:800;font-size:clamp(18px,2.1vw,22px);color:var(--ink);line-height:1.22;max-width:40ch;margin:0 0 20px;}
.statement .big em{font-style:normal;color:var(--accent);}
.points{border-top:1px solid var(--line);padding-top:6px;}
.points p{padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;}
.points p:last-child{border-bottom:0;}

/* ---------- CALLOUT ---------- */
.callout{max-width:800px;margin:20px auto 0;background:var(--dark);color:#E8EAF2;border-radius:12px;padding:17px 22px;font-size:14.5px;line-height:1.55;text-align:left;}
.callout strong{color:#fff;}
/* svetla varianta, ked na stranke uz je dost tmavych pasov */
.callout.light{background:var(--card);border:1px solid var(--line);color:var(--text);}
.callout.light strong{color:var(--ink);}


/* ==========================================================================
   NÁHĽAD PLATFORMY (mockup)
   Je to živá ukážka, nie obrázok: klikateľné záložky, dopĺňajúce sa stĺpce,
   počítadlá. Sedí v tmavej sekcii Riešenie, preto má svetlé vnútro a hlboký
   tieň, aby "letel" nad podkladom.
   Všetko, čo je vnútri, platforma naozaj vie. Nikdy sem nepridávať funkciu,
   ktorá neexistuje.
   ========================================================================== */
.mk{background:#fff;border-radius:16px;overflow:hidden;}
.pitch .mk{border:1px solid rgba(162,168,230,.30);box-shadow:0 40px 90px rgba(0,0,0,.55);}
/* Nahlad stoji nad cenou na svetlom podklade, cize biela karta na skoro bielej
   strane. Bez vyraznejsieho obrysu a hlbsieho tienu by splynula so stranou. */
/* Dvojtriedny zapis je nutny: nizsie v subore je .shot{max-width:100%}, ktore by
   inak nasu sirku prebilo. Rovnakych 860 px ako cenovy blok, aby sa hrany kryli. */
.shot.mk{max-width:860px;margin-left:auto;margin-right:auto;border:1px solid var(--line);box-shadow:0 30px 70px rgba(20,24,45,.16);}
.pitch .shot.mk{max-width:none;}

/* ---------- MACBOOK OKOLO NÁHĽADU ----------
   Cely ram je z CSS, ziadny obrazok, takze je ostry na kazdom displeji.
   Telo je tmave s vyrezom pre kameru, pod nim strieborna spodna hrana, ktora je
   sirsia ako obrazovka, a uplne dole tenky prah. Tak vyzera MacBook zboku spredu. */
/* Zamerne mensi ako cenova karta. Nie je to hlavny hrdina stranky, len ukazuje,
   za co clovek plati, takze nemoze prekricat cenu hned pod nim. */
.lap{max-width:560px;margin:0 auto;}

/* SKUTOCNY TVAR MACBOOKU.
   Obrazovka ma pomer 16:10 a nastenka sa mu prisposobi, nie naopak. Preto ma
   pevny pomer a to, co sa dnu nezmesti, sa odreze dole, presne ako na skutocnom
   zabere obrazovky. Bez tohto sa ram natahoval podla obsahu a vychadzal z toho
   skoro stvorec, ktory ziadny notebook nema. */
.lap-screen .shot.mk{aspect-ratio:16/10;overflow:hidden;}

/* Nahlad VNUTRI cenovej karty: cez obe kolonky, na svetlom pasiku, a este mensi.
   Karta je 860 sirok, notebook 430, cize zabera priblizne polovicu a cena ostava
   to hlavne, co clovek na tej karte vidi. */
/* Nahlad je vlastny pruh navrchu karty, cez obe kolonky. Ma vlastny jemne sedy
   podklad, takze je jasne, ze je to samostatna cast, a nie nieco, co sa prilepilo
   na bielu kolonku. Spodne odsadenie je POVINNE: bez neho spodna hrana notebooku,
   ktora je sirsia ako obrazovka, prepadavala cez hranu do cierneho bloku. */
.pricing-shot{grid-column:1/-1;background:#F4F5FA;padding:30px 26px 34px;
  border-bottom:1px solid var(--line);}
.pricing-shot .lap{max-width:400px;}
.pricing-shot .lap-screen{padding:8px 8px 8px;border-radius:11px 11px 4px 4px;
  box-shadow:0 18px 34px rgba(20,24,45,.20);}
.pricing-shot .lap-screen::before{width:80px;height:10px;border-radius:0 0 7px 7px;}
.pricing-shot .lap-base{height:8px;width:108%;margin-left:-4%;}
.pricing-shot .lap-base::after{width:52px;height:4px;}
.pricing-shot .mk-body{zoom:.52;}
/* Stvrta dlazdica sa do tvaru MacBooku pri tejto sirke nezmesti cela a orezavala sa
   na "EVIDENCIA PR". Radsej tri cele ako styri useknute. Na mobile su pod sebou,
   tam sa zmestia vsetky, preto sa toto tyka len pocitaca. */
.pricing-shot .mk-stats{grid-template-columns:repeat(3,1fr);}
.pricing-shot .mk-stat:nth-child(4){display:none;}
/* MOBIL: notebook ide prec.
   Cela pocitacova nastenka stlacena do 290 px znamena cislo velke 8 px, co nikto
   neprecita. Preto sa na telefone zahodi ram, bocne menu aj lista prehliadaca a
   ukaze sa len samotny obsah v citatelnej velkosti, dve dlazdice vedla seba.
   Je to ten isty dokaz, len v tvare, ktory na telefon patri. */
@media (max-width:640px){
  /* Ziadny sivy pruh za mockupom: robil dvojite rohy hore. Nastenka je mensia,
     bez zaloziek, pohlady sa listuju samy (JS kolotoc). */
  .pricing-shot{padding:12px 12px 14px;background:none;}
  .pricing-shot .lap{max-width:none;}
  .pricing-shot .lap-base{display:none;}
  .pricing-shot .lap-screen{padding:0;background:none;box-shadow:none;border-radius:0;}
  .pricing-shot .lap-screen::before{display:none;}
  .pricing-shot .lap-screen .shot.mk{aspect-ratio:auto;overflow:hidden;border-radius:12px;
    border:1px solid var(--line);box-shadow:0 6px 16px rgba(20,24,45,.06);}
  .pricing-shot .mk-chrome{padding:8px 10px;}
  .pricing-shot .mk-hint{display:none;}
  .pricing-shot .mk-side{display:none;}
  /* Vyssia specificita je nutna: nizsie v subore je ".lap .mk-body{zoom:.56}"
     pre notebook v hornej casti stranky a tu by nastenku zmensila na necitatelnu. */
  .pricing-shot .lap .mk-body{zoom:1;height:auto;grid-template-columns:1fr;}
  .pricing-shot .mk-main{padding:11px 11px 13px;}
  .pricing-shot .mk-stats{grid-template-columns:repeat(2,1fr);gap:7px;}
  .pricing-shot .mk-stat{padding:9px 10px;}
  .pricing-shot .mk-stat b{font-size:19px;margin-top:4px;}
  .pricing-shot .mk-stat:nth-child(4){display:block;}
  .pricing-shot .mk-bar u{white-space:nowrap;}
  /* stlpce modulov su na telefone uz len sum, staci prvych pat */
  .pricing-shot .mk-bar:nth-child(n+6){display:none;}
  .pricing-shot .mk-bname{display:none;}
}
.lap .mk-body{height:100%;zoom:.72;}
.lap .mk-main{padding:14px 15px 0;}
@media (max-width:640px){ .lap .mk-body{zoom:.56;} }
.lap-screen{position:relative;background:#1D1F26;border-radius:14px 14px 6px 6px;padding:12px 12px 12px;
  box-shadow:0 34px 70px rgba(20,24,45,.26), inset 0 0 0 1px rgba(255,255,255,.07);}
/* vyrez pre kameru */
.lap-screen::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:132px;height:16px;background:#1D1F26;border-radius:0 0 9px 9px;z-index:2;}
.lap-screen .shot.mk{max-width:none;margin:0;border:0;border-radius:5px;box-shadow:none;}
/* spodna hrana, sirsia ako obrazovka */
.lap-base{position:relative;height:12px;width:112%;margin-left:-6%;
  background:linear-gradient(180deg,#E7E9F0 0%,#D3D6E0 48%,#B9BDCB 100%);
  border-radius:0 0 10px 10px;box-shadow:0 16px 26px rgba(20,24,45,.18);}
/* prst na otvorenie */
.lap-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:88px;height:5px;background:#C2C6D3;border-radius:0 0 6px 6px;}
.lap-base i{display:none;}
@media (max-width:640px){
  .lap-screen{padding:7px 7px 7px;border-radius:10px 10px 4px 4px;}
  .lap-screen::before{width:74px;height:10px;border-radius:0 0 6px 6px;}
  .lap-base{height:9px;}
  .lap-base::after{width:52px;height:4px;}
}

/* ---------- lišta prehliadača ---------- */
.mk-chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#EEF0F6;border-bottom:1px solid #E1E4EF;}
.mk-dot{width:10px;height:10px;border-radius:50%;background:#CBD0DE;flex:none;}
.mk-dot:nth-child(1){background:#E9A79B;} .mk-dot:nth-child(2){background:#EBD09B;} .mk-dot:nth-child(3){background:#A9D9C0;}
.mk-url{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:11.5px;color:#6E727A;background:#fff;border:1px solid #E1E4EF;border-radius:8px;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mk-hint{margin-left:auto;font-size:10.5px;color:#8A90A0;white-space:nowrap;}

/* ---------- kostra aplikácie ---------- */
.mk-body{display:grid;grid-template-columns:186px 1fr;text-align:left;background:#F7F8FB;}
.mk-side{background:#fff;border-right:1px solid #E9EBF4;padding:16px 12px;}
.mk-brandrow{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:800;font-size:14px;color:var(--ink);margin:0 4px 16px;}
.mk-tile{width:24px;height:24px;flex:none;border-radius:7px;background:linear-gradient(135deg,#5d69e0,#3a43b4);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;letter-spacing:.02em;}
.mk-nav{display:flex;flex-direction:column;gap:3px;}
.mk-navbtn{display:flex;align-items:center;gap:10px;width:100%;font:inherit;font-size:13px;font-weight:600;color:#6E727A;background:none;border:0;border-radius:9px;padding:9px 10px;cursor:pointer;text-align:left;transition:background .15s ease,color .15s ease;}
.mk-navbtn svg{width:17px;height:17px;flex:none;}
.mk-navbtn:hover{background:#F2F4FB;color:var(--ink);}
.mk-navbtn.is-on{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(79,91,213,.30);}
.mk-navbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.mk-main{padding:16px 18px 20px;min-width:0;}
.mk-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.mk-who b{display:block;font-family:var(--fd);font-weight:800;font-size:15px;color:var(--ink);line-height:1.2;}
.mk-who em{display:block;font-style:normal;font-size:11.5px;color:#6E727A;margin-top:2px;}
.mk-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#17805A;background:#E4F6EE;border:1px solid #B7E3CF;border-radius:99px;padding:4px 10px;white-space:nowrap;}
.mk-live i{width:6px;height:6px;border-radius:50%;background:#1FA372;animation:mkpulse 1.8s ease-in-out infinite;}
@keyframes mkpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.8);}}

/* všetky pohľady ležia v jednej bunke, takže sa rám pri prepnutí nehýbe */
.mk-views{display:grid;}
.mk-views>.mk-view{grid-area:1 / 1 / 2 / 2;min-width:0;padding:0;}
.mk-views>.mk-view[hidden]{display:block !important;visibility:hidden;pointer-events:none;}
.mk-view{animation:mkfade .28s ease both;}
@keyframes mkfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- dlaždice ---------- */
.mk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:11px;}
.mk-stat{background:#fff;border:1px solid #E9EBF4;border-radius:12px;padding:11px 12px;}
.mk-stat span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:#8A90A0;font-weight:700;line-height:1.3;}
.mk-stat b{display:block;font-family:var(--fd);font-weight:800;font-size:23px;color:var(--ink);margin-top:5px;font-variant-numeric:tabular-nums;}
.mk-stat b.mk-g{color:#17805A;}
.mk-stat-ok{background:#F2FAF6;border-color:#C7E8D8;}
.mk-ready{display:flex !important;align-items:center;gap:5px;font-size:14px !important;color:#17805A;}
.mk-ready svg{width:14px;height:14px;flex:none;}

/* ---------- karty ---------- */
.mk-card{background:#fff;border:1px solid #E9EBF4;border-radius:12px;padding:14px 15px;}
.mk-card + .mk-card{margin-top:9px;}
.mk-card-flush{padding:0;overflow:hidden;}
.mk-cardhead{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.mk-cardhead h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#8A90A0;font-weight:700;margin:0;font-family:var(--fb);}
.mk-tag{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--accent-d);background:#ECEEFB;border-radius:99px;padding:3px 9px;white-space:nowrap;}

/* ---------- stĺpce ---------- */
.mk-bars{display:flex;flex-direction:column;gap:6px;}
.mk-bar{display:flex;align-items:center;gap:9px;}
.mk-bar em{width:22px;flex:none;font-style:normal;font-size:10.5px;font-weight:700;color:#8A90A0;}
.mk-bar u{width:38px;flex:none;text-align:right;text-decoration:none;font-size:10.5px;font-weight:700;color:#6E727A;font-variant-numeric:tabular-nums;}
/* Nazov modulu vedla pruhu, ako na skutocnej nastenke. Na uzkom ramci sa schova,
   inak by sa pruhy stlacili na nic. */
.mk-bname{flex:none;width:150px;font-weight:400;font-size:10.5px;color:#8A90A0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:900px){ .mk-bname{display:none;} }
.mk-track{flex:1;min-width:0;display:block;height:9px;border-radius:99px;background:#EEF0F6;overflow:hidden;}
.mk-track i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#6774ff,#3a43b4);transition:width 1s cubic-bezier(.22,.61,.36,1);}
.mk-track-lg{height:12px;margin-bottom:9px;}

/* ---------- tabuľka tímu ---------- */
.mk-tr{display:grid;grid-template-columns:1.5fr 1.1fr .8fr;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid #F1F3F9;font-size:12.5px;color:var(--ink);}
.mk-tr:last-child{border-bottom:0;}
.mk-th{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:#8A90A0;font-weight:700;background:#FAFBFE;}
.mk-per{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mk-av{flex:none;width:24px;height:24px;border-radius:50%;background:var(--av);color:#fff;font-style:normal;font-size:9.5px;font-weight:800;display:grid;place-items:center;letter-spacing:.02em;}
.mk-mini{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#6E727A;font-variant-numeric:tabular-nums;}
.mk-mini .mk-track{height:6px;}
.mk-tr em{font-style:normal;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;display:inline-block;white-space:nowrap;}
.mk-ok{background:#E4F6EE;color:#17805A;}
.mk-mid{background:#FEF3E2;color:#B4791F;}
.mk-no{background:#EEF0F6;color:#8A90A0;}
.mk-foot{margin-top:10px;font-size:11.5px;color:#8A90A0;line-height:1.5;}

/* ---------- súbory ---------- */
.mk-files{display:flex;flex-direction:column;gap:9px;}
.mk-file{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E9EBF4;border-radius:12px;padding:12px 14px;}
.mk-fico{flex:none;width:36px;height:44px;border-radius:7px;display:grid;place-items:center;font-size:9.5px;font-weight:800;color:#fff;letter-spacing:.03em;}
.mk-fico-csv{background:linear-gradient(160deg,#2FA97A,#17805A);}
.mk-fico-pdf{background:linear-gradient(160deg,#E0715A,#B8412B);}
.mk-ftext{flex:1;min-width:0;}
.mk-ftext b{display:block;font-size:13px;font-weight:700;color:var(--ink);}
.mk-ftext em{display:block;font-style:normal;font-size:11.5px;color:#8A90A0;margin-top:2px;}
.mk-fbtn{flex:none;font-size:11.5px;font-weight:700;color:#fff;background:var(--accent);border-radius:8px;padding:7px 13px;white-space:nowrap;}
.mk-note{display:flex;align-items:flex-start;gap:10px;margin-top:11px;background:#F2FAF6;border:1px solid #C7E8D8;border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.55;color:#1B5B44;}
.mk-note svg{width:17px;height:17px;flex:none;margin-top:1px;color:#1FA372;}

/* ---------- pozvánka ---------- */
.mk-copy{display:flex;align-items:center;gap:10px;background:#FAFBFE;border:1px dashed #C9CEE4;border-radius:10px;padding:8px 8px 8px 13px;}
.mk-copy>span:first-child{flex:1;min-width:0;font-size:12px;color:#6E727A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- mobil ----------
   Bočný pruh sa zmení na ikony, dlaždice na dve v rade a z tabuľky odpadne
   stĺpec s postupom. Stále to vyzerá ako aplikácia, len užšia. */
@media (max-width:720px){
  .mk-body{grid-template-columns:54px 1fr;}
  .mk-side{padding:12px 8px;}
  .mk-brandrow{justify-content:center;margin:0 0 12px;}
  .mk-brandrow b{display:none;}
  .mk-navbtn{justify-content:center;padding:10px 0;}
  .mk-navbtn span{display:none;}
  .mk-navbtn svg{width:19px;height:19px;}
  .mk-main{padding:13px 12px 16px;}
  .mk-stats{grid-template-columns:repeat(2,1fr);gap:7px;}
  .mk-stat b{font-size:20px;}
  .mk-hint{display:none;}
  .mk-tr{grid-template-columns:1.4fr .9fr;gap:8px;padding:9px 11px;}
  .mk-tr .mk-mini{display:none;}
  .mk-tr>span:nth-child(2):not(.mk-per):not(.mk-mini){display:none;}
  .mk-live{display:none;}
}
@media (max-width:400px){
  .mk-url{font-size:10.5px;padding:4px 9px;}
  .mk-file{gap:9px;padding:10px 11px;}
  .mk-fico{width:30px;height:38px;}
}
@media (prefers-reduced-motion:reduce){
  .mk-live i{animation:none;}
  .mk-view{animation:none;}
  .mk-track i{transition:none;}
}

/* ---------- CITACIA ZAKONA + CASOVA OS ---------- */
.tlwrap{max-width:800px;margin:0 auto;}
.quote{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:16px 20px;margin:0 0 12px;text-align:left;}
.quote .q-l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-d);font-weight:700;margin-bottom:7px;}
.quote .en{font-size:13px;color:var(--muted);font-style:italic;line-height:1.55;margin-bottom:10px;}
.quote .skp{font-size:13.5px;color:var(--ink);line-height:1.55;}
.tl3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;}
.tlc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;text-align:left;}
.tlc .lbl{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;}
.tlc .d{font-family:var(--fd);font-weight:800;font-size:16px;line-height:1.25;color:var(--ink);margin-bottom:8px;}
.tlc p{font-size:13px;color:var(--muted);line-height:1.55;}
.tlc.now{border-color:var(--warn);background:#FBF3F1;}
.tlc.now .lbl,.tlc.now .d{color:var(--warn);}

/* ---------- STAKES ---------- */
.whybox{max-width:800px;margin:0 auto 26px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;font-size:14.5px;}
.whybox strong{font-weight:700;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;max-width:800px;margin:0 auto;}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:19px;text-align:left;}
.card .ql{font-family:var(--fd);font-weight:800;font-size:15.5px;color:var(--ink);margin-bottom:8px;}
.card p{font-size:13px;color:var(--muted);}
.card .tag{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--warn);background:#F9EAE6;border-radius:6px;padding:3px 9px;}
.stakes-close{margin:24px auto 0;font-size:15px;color:var(--ink);max-width:58ch;font-weight:600;text-align:center;}

/* ---------- PREMOSTENIE ---------- */
.bridge-sec{display:flex;flex-direction:column;align-items:center;gap:8px;margin:48px auto 0;max-width:640px;padding:32px 26px 26px;background:var(--soft);border:1px solid var(--softb);border-radius:16px;text-align:center;}
.bridge-sec .bq{font-family:var(--fd);font-weight:800;font-size:clamp(21px,2.8vw,29px);color:var(--ink);line-height:1.15;}
.bridge-sec .ba{font-size:15.5px;color:var(--muted);margin-bottom:6px;}
.bridge-sec .arr{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--softb);display:grid;place-items:center;box-shadow:0 4px 12px rgba(79,91,213,.15);}
/* Hyba sa cely kruzok aj so sipkou. Predtym poskakovala len sipka vnutri
   nehybneho kruhu, co vyzeralo nerealisticky. */
.bridge-sec .arr{animation:bob 1.6s ease-in-out infinite;}

/* ---------- PITCH ---------- */
.pitch{background:var(--dark);color:#fff;padding:56px 0;position:relative;overflow:hidden;}
.pitch::before{content:"";position:absolute;bottom:-50%;left:50%;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(closest-side,rgba(79,91,213,.28),transparent);}
.pitch .inner{position:relative;text-align:center;}
.pitch .overline{display:inline-block;color:var(--softb);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;}
.pitch h2{color:#fff;font-size:clamp(22px,3vw,31px);max-width:26ch;margin:0 auto 14px;}
.pitch .lead{font-size:15px;color:#C9CDE8;max-width:56ch;margin:0 auto 22px;}
.pitch .lead strong{color:#fff;}
.pitch h2 .hl{color:var(--softb);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;text-align:left;align-items:stretch;}
.step{background:rgba(255,255,255,.045);border:1px solid rgba(162,168,230,.18);border-radius:11px;padding:16px;}
.step .num{font-family:var(--fd);font-weight:800;font-size:13px;color:#fff;background:var(--accent);width:26px;height:26px;border-radius:7px;display:grid;place-items:center;margin-bottom:12px;}
.step h3{font-size:14.5px;margin-bottom:5px;color:#fff;}
.step p{font-size:12.5px;color:#B0B5D4;}
/* Kroky sa hybu rovnako ako karty a moduly. Na tmavom podklade nie je vidiet
   fialovy tien, preto sa dvihne obrys a pribudne hlboky tien. */
.step{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.step:hover,.step.on{border-color:var(--softb);box-shadow:0 14px 30px rgba(6,8,28,.45);transform:translateY(-3px);}

/* ---------- NAHLAD PLATFORMY (mockup) ---------- */
.shot{margin:26px auto 0;width:100%;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(20,24,45,.18);}
.shot img{width:100%;display:block;}
/* v tmavej sekcii ma ram jemny svetly obrys */
.pitch .shot{border-color:rgba(162,168,230,.25);background:rgba(255,255,255,.03);box-shadow:0 30px 70px rgba(0,0,0,.45);}

.pv-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#EEF0F6;border-bottom:1px solid #E4E7F0;}
.pv-bar i{width:11px;height:11px;border-radius:50%;background:#CBD0DE;display:inline-block;}
.pv-bar .pv-url{margin-left:12px;font-size:12px;color:#6E727A;background:#fff;border:1px solid #E4E7F0;border-radius:8px;padding:5px 12px;}
.pv-hint{margin-left:auto;font-size:11px;color:var(--muted);}
.pv-screen{background:#F7F8FB;padding:20px;text-align:left;}
.pv-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.pv-tabs button{font:inherit;font-size:12.5px;font-weight:600;color:#6E727A;background:#fff;border:1px solid #E4E7F0;border-radius:10px;padding:7px 13px;cursor:pointer;transition:.15s;}
.pv-tabs button:hover{border-color:#C6CBDA;}
.pv-tabs button.pv-on{background:var(--accent);color:#fff;border-color:var(--accent);}

/* vsetky tri pohlady lezia v jednej bunke mriezky, takze ram ma vzdy vysku
   najvyssieho z nich a pri prepnuti zalozky uz nic neposkoci */
.pv-views{display:grid;}
.pv-views>.pv-view{grid-area:1 / 1 / 2 / 2;min-width:0;}
.pv-views>.pv-view[hidden]{display:block !important;visibility:hidden;pointer-events:none;}

.pv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
.pv-stat{background:#fff;border:1px solid #E4E7F0;border-radius:12px;padding:14px 16px;}
.pv-stat span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6E727A;font-weight:700;}
.pv-stat b{display:block;font-size:24px;color:var(--ink);margin-top:4px;font-family:var(--fd);}
.pv-stat b.pv-g{color:var(--ok);}
.pv-chart{background:#fff;border:1px solid #E4E7F0;border-radius:12px;padding:16px 18px;}
.pv-chart h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6E727A;font-weight:700;margin:0 0 12px;}
.pv-crow{display:flex;align-items:center;gap:10px;margin:7px 0;}
.pv-crow em{width:26px;font-size:11px;color:#6E727A;font-style:normal;}
.pv-track{flex:1;height:16px;border-radius:99px;background:#EEF0F6;overflow:hidden;}
.pv-fill{height:100%;border-radius:99px;background:var(--accent);}
.pv-tbl{background:#fff;border:1px solid #E4E7F0;border-radius:12px;overflow:hidden;}
.pv-tr{display:grid;grid-template-columns:1.4fr .8fr .9fr;gap:8px;padding:11px 14px;border-bottom:1px solid #EEF0F6;font-size:13px;color:var(--ink);align-items:center;}
.pv-tr:last-child{border-bottom:0;}
.pv-th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#6E727A;font-weight:700;background:#F7F8FB;}
.pv-tr em{font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;display:inline-block;}
.pv-ok{background:#E4F6EE;color:var(--ok-d);}
.pv-mid{background:#FEF3E2;color:#B4791F;}
.pv-no{background:#EEF0F6;color:#6E727A;}
.pv-cards{display:grid;grid-template-columns:1fr;gap:12px;}
.pv-card{background:#fff;border:1px solid #E4E7F0;border-radius:12px;padding:14px 16px;}
.pv-card b{display:block;font-size:15px;color:var(--ink);font-family:var(--fd);}
.pv-card span{display:block;font-size:12px;color:#6E727A;margin:5px 0 12px;}
.pv-btn{display:inline-block;font-size:12px;font-weight:700;font-style:normal;color:#fff;background:var(--accent);border-radius:9px;padding:7px 12px;}
.pv-lock{background:#EEF0F6;color:#6E727A;}
.pv-access{background:#fff;border:1px solid #E4E7F0;border-radius:12px;padding:18px;}
.pv-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#6E727A;font-weight:700;}
.pv-code{font-family:var(--fd);font-size:24px;font-weight:800;letter-spacing:.08em;color:var(--ink);margin-top:6px;}
.pv-note{font-size:12px;color:#6E727A;margin-top:8px;}

/* ---------- MODULY ---------- */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;max-width:800px;margin:0 auto;}
.mod{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:18px;text-align:left;}
.mod b{font-family:var(--fd);font-weight:800;font-size:14.5px;color:var(--ink);display:block;margin-bottom:4px;}
.mod span{color:var(--muted);font-size:12.5px;}
.mod .time{display:block;margin-bottom:6px;font-family:var(--fd);font-weight:800;font-size:12.5px;letter-spacing:.02em;color:var(--accent-d);}
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px;}
.badge{background:var(--soft);border:1px solid var(--softb);border-radius:9px;padding:7px 13px;font-size:12.5px;color:var(--accent-d);font-weight:600;}

/* ---------- POROVNANIE ----------
   Stara cesta je biela karta ako kazda ina, nova cesta je jemne zelena, aby bolo
   na prvy pohlad vidiet, ktora je ta lepsia. Zelena je tu VYHRADNE semanticka
   ("toto je spravna cesta"), nikde inde na stranke nefiguruje ako znackova farba.
   Subgrid drzi oba stlpce zarovnane: nadpis, zoznam aj zavercny riadok sedia
   na rovnakej vyske. Zeleny stlpec ma menej bodov, takze mu dole ostane vzdusne
   prazdne miesto. To je zamer, nie nedorobok. */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:15px;max-width:800px;margin:0 auto;text-align:left;align-items:stretch;}
.col{border-radius:16px;padding:24px;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;}
.col.good{background:#EDF8F2;border-color:#BCE2CF;}
.col.bad{background:var(--card);border-color:var(--line);}
.col h3{font-size:15.5px;margin-bottom:12px;text-wrap:balance;}
.col ul{list-style:none;margin:0;}
.col li{display:flex;gap:9px;align-items:flex-start;padding:6px 0;font-size:13.5px;}
.col li svg{flex:none;margin-top:3px;}
.col .res{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700;text-wrap:balance;}
.col.bad .res{color:var(--warn);border-top-color:var(--line);}
.col.good .res{color:var(--ok-d);border-top-color:#BCE2CF;}
@supports (grid-template-rows:subgrid){
 .compare{grid-template-rows:auto 1fr auto;}
 .col{display:grid;grid-template-rows:subgrid;grid-row:span 3;}
 /* v mriezke by auto-okraj zatlacil kratsi zaver nadol a ciary by sa rozisli */
 .col .res{margin-top:0;align-self:start;}
}
.compare-note{max-width:800px;margin:14px auto 0;background:var(--soft);border:1px solid var(--softb);border-radius:12px;padding:17px 22px;font-size:14.5px;line-height:1.6;text-align:left;}

/* ---------- LOGA A REFERENCIE (zatial skryte, pozri komentar v HTML) ---------- */
.logos{max-width:800px;margin:0 auto;}
.logos .strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:24px;}
.logo-ph{aspect-ratio:5/2;border:1px dashed var(--softb);border-radius:10px;background:var(--card);display:grid;place-items:center;color:#B4BACC;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.ref-ph{max-width:800px;margin:20px auto 0;border:1px dashed var(--softb);border-radius:12px;background:var(--card);padding:22px;color:#B4BACC;font-size:13px;font-weight:600;text-align:center;}

/* ---------- O NAS: fotka a text ---------- */
/* Jeden stlpec na stred: nadpis, fotka, meno, text. Ziadne dva stlpce, fotka
   uz nie je mala vec odsunuta dolava. Sirka 860 px ako zvysok stranky. */
.unas{max-width:860px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:34px 28px 36px;text-align:center;}
/* Fotka: na stred, pevny pomer 4:5, dost velka aby na nej bolo vidiet tvar. */
.unas-photo{width:min(260px,64vw);aspect-ratio:4/5;margin:16px auto 0;border-radius:16px;overflow:hidden;background:linear-gradient(165deg,var(--soft),#fff 70%);border:1px solid var(--line);box-shadow:0 14px 34px rgba(20,24,45,.12);display:grid;place-items:center;}
.unas-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.unas-photo svg{width:44%;height:auto;color:var(--softb);opacity:.75;}
/* Meno sedi hned pod fotkou, aby bolo jasne, kto je na nej. */
.unas-name{font-family:var(--fd);font-weight:800;font-size:clamp(19px,2.4vw,24px);color:var(--ink);letter-spacing:-.01em;margin:16px 0 0;}
/* Text je citat. Blok je na stred stranky, ale text vnutri zarovnany dolava,
   lebo vycentrovany odstavec sa cita zle. */
.unas-txt{max-width:600px;margin:22px auto 0;text-align:left;}
.unas-quote{margin:0;padding:0 0 0 16px;border-left:3px solid var(--softb);}
.unas-quote p{font-size:15px;color:var(--muted);}
.unas-quote p + p{margin-top:12px;}
.unas-quote strong{color:var(--ink);}
@media (max-width:640px){ .unas-quote{padding-left:13px;} }

/* Na telefone ostava rozlozenie pod sebou na stred (nadpis, fotka, meno, text),
   majitelovi to tak vyhovuje. Od 820 px sa fotka presunie VEDLA textu:
   vlavo fotka a pod nou meno, vpravo cely text. */
@media (min-width:820px){
  .unas{
    display:grid;
    grid-template-columns:270px 1fr;
    grid-template-areas:
      "eyebrow eyebrow"
      "photo   text"
      "name    text";
    column-gap:34px;
    align-items:start;
    text-align:left;
    padding:34px 32px 36px;
  }
  .unas > .eyebrow{grid-area:eyebrow;}
  .unas-photo{grid-area:photo;width:100%;margin:14px 0 0;}
  .unas-name{grid-area:name;margin:14px 0 0;text-align:left;}
  /* Text zacina na tej istej linke ako fotka, nie nizsie. */
  .unas-txt{grid-area:text;max-width:none;margin:14px 0 0;}
}
.unas p{font-size:14.5px;color:var(--muted);}
/* Meno cloveka za znackou je to prve, co ma citatel v tejto sekcii vidiet. */
.unas-lead{font-size:16px !important;color:var(--ink) !important;}
.unas-lead strong{font-family:var(--fd);font-weight:800;letter-spacing:-.01em;}
.unas p + p{margin-top:12px;}
@media(max-width:700px){
 .unas{padding:26px 18px 28px;}
 .unas-photo{width:min(220px,62vw);}
 .unas-txt{margin-top:18px;}
}

/* ---------- FAQ ---------- */
.faqs{max-width:680px;margin:0 auto;text-align:left;}
.faq{border:1px solid var(--line);border-radius:11px;background:var(--card);margin-bottom:10px;overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;font-family:var(--fd);font-weight:700;font-size:14.5px;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .chev{flex:none;transition:transform .2s ease;}
.faq[open] summary .chev{transform:rotate(180deg);}
.faq .a{padding:0 18px 15px;font-size:13.5px;color:var(--muted);line-height:1.6;}

/* ---------- CENA ---------- */
.pricing{max-width:860px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;text-align:left;}
.pricing .left{padding:30px;}
.pricing .right{background:var(--dark);color:#fff;padding:30px;display:flex;flex-direction:column;justify-content:center;}
.price-row{display:flex;align-items:baseline;gap:8px;}
.price-big{font-family:var(--fd);font-weight:800;font-size:38px;color:#fff;line-height:1;}
.price-unit{font-size:16px;color:var(--softb);}
.price-plus{color:var(--softb);font-size:14.5px;margin:12px 0 3px;}
.price-seat{font-family:var(--fd);font-weight:800;font-size:23px;color:#fff;}
.price-note{color:#B0B5D4;font-size:12.5px;margin-top:14px;line-height:1.5;}
.incl{list-style:none;margin-top:6px;}
.incl li{display:flex;gap:9px;align-items:flex-start;padding:6px 0;font-size:13.5px;border-bottom:1px solid var(--line);}
.incl li:last-child{border-bottom:0;}
.incl li svg{flex:none;margin-top:3px;}
.roi-line{margin-top:14px;font-size:13.5px;color:var(--accent-d);font-weight:700;}
.pricing .btn{margin-top:18px;width:100%;justify-content:center;}

/* modelova kalkulacia */
.calc{max-width:860px;margin:18px auto 0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 26px;text-align:left;}
.calc-h{font-family:var(--fd);font-weight:800;font-size:15px;color:var(--ink);margin-bottom:12px;}
.calc table{width:100%;border-collapse:collapse;font-size:13.5px;}
.calc th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line);}
.calc td{padding:8px;border-bottom:1px solid var(--line);}
.calc tr:last-child td{border-bottom:0;}
.calc td:nth-child(2){font-weight:700;color:var(--ink);}
.calc-note{font-size:12px;color:var(--muted);margin-top:10px;}

/* ---------- ZAVER ---------- */
.final{max-width:860px;margin:0 auto;background:linear-gradient(155deg,var(--accent),var(--accent-d));color:#fff;border-radius:18px;padding:36px;text-align:center;}
.final h2{color:#fff;font-size:clamp(21px,2.8vw,28px);max-width:26ch;margin:0 auto 12px;}
.final p{font-size:14.5px;color:#E4E8FB;max-width:52ch;margin:0 auto 22px;}
.final .btn-primary{background:#fff;color:var(--accent-d);box-shadow:0 8px 24px rgba(0,0,0,.2);}
.final-alt{margin-top:14px;}
/* Obrysove tlacidlo na modrom podklade zaverecnej vyzvy. Rovnaka vyska ako
   hlavne tlacidlo, ale bez vyplne, takze je jasne, ktore je hlavne. */
.final .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);box-shadow:none;font-weight:600;}
/* Zamerne male a nenapadne. Je to odchodova cesta, nie druha hlavna vyzva. */
.btn.btn-sm{padding:9px 16px;font-size:13px;border-radius:10px;}
.final-alt-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62);}
.final .btn-ghost:hover,.final .btn-ghost:focus-visible{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px);}
@media (max-width:520px){ .final .btn-ghost{width:100%;justify-content:center;} }
.final .mail-line{margin-top:15px;font-size:13.5px;color:#E4E8FB;}
.final .mail-line a{font-weight:700;text-decoration:underline;}

/* PATICKA: dva riadky, drobne, nenapadne. Rozhodnutie majitela 28.7.2026.
   Uplna identifikacia firmy zije na /kontakt, nie tu. Spracovatelska zmluva
   a zoznam subdodavatelov su odkazovane z textu na /ochrana-osobnych-udajov.
   Nic sem uz nepridavaj. */
footer{padding:24px 0 22px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;}
footer .mini{text-align:center;line-height:1.9;color:var(--muted);}
footer .mini a,footer .mini button{color:var(--muted);}
footer .mini a:hover,footer .mini button:hover{color:var(--accent-d);}
footer .mini button{font:inherit;background:none;border:0;padding:0;cursor:pointer;}
footer .mini .sep{padding:0 6px;color:#C9CDE3;}
footer .legal-note{margin:0 auto 12px;text-align:center;font-size:11.5px;opacity:.8;}
footer .copy{text-align:center;margin-top:4px;color:#8A90A0;}
/* Na uzkom telefone sa styri odkazy do jedneho riadku nezmestia. Namiesto
   visiacej bodky na konci riadku odkazy zalomime a bodky schovame. */
@media (max-width:560px){
  footer .mini{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;line-height:1.7;}
  footer .mini .sep{display:none;}
}

/* ---------- INTERAKTIVNE KARTY ---------- */
.fact,.card,.mod{cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.fact:hover,.card:hover,.mod:hover,.fact.on,.card.on,.mod.on{border-color:var(--accent);box-shadow:0 12px 28px rgba(79,91,213,.18);transform:translateY(-3px);}
.fact:focus-visible,.card:focus-visible,.mod:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.fact .fn{transition:background .18s ease,color .18s ease;}
.fact:hover .fn,.fact.on .fn{background:var(--accent);color:#fff;}

/* ---------- PRODUKTOVY ZABER: POCITAC A MOBIL ----------
   ZMAZANE 26.7.2026. Mockup pocitaca a telefonu bol podla majitela nedostatocny,
   takze je prec aj z HTML aj odtialto. Cely povodny CSS blok (.devsec, .devices,
   .dev-*, .pricing-shot) najdes v _backup/2026-07-26-tmavy-upsell/brand.css.
   Az bude mockup naozaj dobry, vrati sa sem. */
/* Zvysok po mockupe: toto prepisovalo max-width:860px na cenovom bloku,
   takze cenovy blok bol o 24 px sirsi ako objednavkovy. Obe maju byt rovnake. */
.shot{max-width:100%;}

/* ---------- JEMNE ODHALENIE PRI SCROLLOVANI ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
.reveal.is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
 .reveal,.reveal.is-in{opacity:1;transform:none;transition:none;}
 html{scroll-behavior:auto;}
}

/* ---------- RESPONZIVA ---------- */
@media(max-width:860px){
 .cards,.steps,.mods,.tl3{grid-template-columns:1fr;}
 .compare,.pricing,.facts{grid-template-columns:1fr;}
 .logos .strip{grid-template-columns:repeat(2,1fr);}
 .final{padding:28px 20px;}
 .statement{padding:24px;}
 section{padding:44px 0;}
 .nav .mail span{display:none;}
}
@media(max-width:560px){
 .hero h1{max-width:none;font-size:27px;line-height:1.22;}
 .hero .lead{max-width:none;}
 .pv-stats{grid-template-columns:1fr 1fr;}
 .pv-screen{padding:14px;}
 .pv-hint{display:none;}
}

/* ==========================================================================
   TMAVY UPSELL: body.dark2x
   Pouzivaju ho VYHRADNE stranky 2x-system.html a 2x-system-vsl.html.
   Zamer majitela: upsell ma byt opak predajnej stranky. Vacsina plochy je
   velmi tmava modra z tej istej znackovej rodiny (zaklad #232963, podklad este
   tmavsi), bloky maju velke oble rohy a svetle ostavaju len miesta, kam ma ist
   oko: cenovy blok, objednavka na jeden klik a zaber platformy.
   Ziadna cierna, ziadna zelena ako znackova farba.
   ========================================================================== */
body.dark2x{
  --d0:#0F1338;            /* podklad celej stranky */
  --d1:#191E52;            /* zdvihnuty blok */
  --d2:#232963;            /* akcentovany blok, zakladny odtien od majitela */
  --dline:rgba(168,176,240,.20);
  --dtext:#D8DCF5;
  --dmuted:#A9B0DC;
  /* BALANS: upsell je tmavy, ale tvarovo je to ta ista stranka ako predajka.
     Rohy sa preto drzia hodnot z predajnej stranky (16 / 14 / 12), nie
     prehnanych 30 / 22 / 18, ktore z toho robili cudzi produkt. */
  --rxl:16px;
  --rlg:14px;
  --rmd:12px;
  background:var(--d0);
  color:var(--dtext);
}
body.dark2x h1,body.dark2x h2,body.dark2x h3,body.dark2x h4{color:#fff;}
body.dark2x strong{color:#fff;}
body.dark2x .eyebrow{color:var(--softb);}
body.dark2x .intro{color:var(--dmuted);}
body.dark2x .stakes-close{color:#fff;}

/* ---------- hlavicka a krokovy pruh ----------
   Hlavicka, krokovy pruh aj hero maju rovnaky podklad, takze hore nevznikne
   ziadna cudzia vodorovna ciara. */
body.dark2x .nav{background:rgba(35,41,99,.92);border-bottom-color:transparent;}
body.dark2x .brand{color:#fff;}
body.dark2x .nav .mail{color:#A9AEC6;}
body.dark2x .nav .mail a{color:var(--softb);}
/* Vrch stranky je zamerne najtmavsi, aby video a krokovy pruh vystupili.
   Zvysok stranky je o stupen svetlejsi (--d0). */
/* Vrch stranky je sytá modra, nie cierna. Hlavicka a krokovy pruh maju presne
   ten isty odtien ako zaciatok hera, takze medzi nimi nevznikne ziadna hrana. */
/* Hlavicka ma vlastnu, tmavsiu modru a je jedina, ktora ju ma.
   Nie je prilepena: zakaznik ma ist dolu a klikat, nie mat lastu pred ocami. */
body.dark2x .nav{position:static;background:#151A4D;border-bottom-color:transparent;backdrop-filter:none;}
/* Krokovy pruh a upozornenie uz nepatria k hlavicke, ale k heru.
   Maju preto presne farbu, v ktorej hero zacina, takze medzi nimi nie je hrana. */
body.dark2x .upsell{background:#232963;}
/* Hero: zvisly prechod z tej istej modrej do podkladu stranky plus mekka
   svetelna ziara za videom, aby video vystupilo a plocha nebola plocha. */
body.dark2x .hero{
  background:
    radial-gradient(115% 75% at 50% 18%, rgba(120,133,245,.38) 0%, rgba(120,133,245,0) 62%),
    linear-gradient(180deg,#232963 0%,#1B2058 45%,var(--d0) 100%);
}
/* Rovnaky priestor nad krokmi aj pod upozornenim. Predtym sa kroky lepili
   na hlavicku a pod textom zostala diera. */
body.dark2x .upsell .wrap{padding-top:26px;padding-bottom:24px;}
/* Pri prichode z platby uz priestor nad nadpisom dava krokovy pruh,
   takze hero nepotrebuje svoje plne odsadenie zhora. */
body.dark2x .upsell-on .hero,
.upsell-on body.dark2x .hero{padding-top:20px;}
/* Lead na upselli je zamerne sirsi, aby sa nelamal na tri kratke riadky. */
body.dark2x .hero .lead{max-width:70ch;}
/* Tri samostatne pilulky, ako to bolo povodne. Majitel spolocny ramcek okolo
   nich nechcel, splyval do jedneho bloku. */
body.dark2x .upsell .stepbar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:540px;padding:0;border:0;background:none;border-radius:0;}
body.dark2x .upsell .ustep{border:1px solid rgba(168,176,240,.22);border-radius:12px;background:rgba(9,12,38,.42);color:#98A0CE;font-weight:600;padding:9px 6px;}
body.dark2x .upsell .ustep .n{background:rgba(255,255,255,.14);color:#fff;}
body.dark2x .upsell .ustep.done{background:rgba(255,255,255,.07);color:#E4E8FA;}
body.dark2x .upsell .ustep.done .n{background:var(--ok);color:#fff;}
body.dark2x .upsell .ustep.active{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(79,91,213,.45);}
body.dark2x .upsell .ustep.active .n{background:#fff;color:var(--accent-d);}
body.dark2x .upsell .line{color:#C4CAEC;}
body.dark2x .upsell .line strong{color:#fff;}
body.dark2x .payfail{background:var(--d2);}
body.dark2x .pf-card{border-radius:var(--rmd);}

/* ---------- hero: plynulo prejde z #232963 do podkladu stranky ---------- */
body.dark2x .hero{background:linear-gradient(180deg,var(--d2) 0%,#1A1F52 46%,var(--d0) 100%);}
body.dark2x .hero::before{background:radial-gradient(closest-side,rgba(103,116,255,.34),transparent);}
/* miesto pre VSL: v tmavom prevedeni nesmie byt ciernym stvorcom, ide do modrej rodiny */
body.dark2x .vsl{background:linear-gradient(160deg,#1D2359,#12163C);border-color:rgba(168,176,240,.22);border-radius:var(--rlg);}
body.dark2x .vsl::after{color:#8E96C8;}
body.dark2x .vthumb{border-radius:var(--rlg);}

/* ---------- velky ramec: z celoplosneho pasu je zdvihnuty oble blok ---------- */
body.dark2x .frame{background:none;border-top:0;border-bottom:0;padding:34px 0;}
body.dark2x .frame .inner{background:var(--d1);border:1px solid var(--dline);border-radius:var(--rxl);padding:38px 40px 34px;box-shadow:0 26px 60px rgba(6,8,28,.5);}
body.dark2x .frame .overline{color:var(--softb);}
body.dark2x .frame p{color:var(--dtext);}
body.dark2x .frame .kicker{color:#fff;}
@media(max-width:620px){
 body.dark2x .frame .inner{padding:26px 22px 24px;border-radius:var(--rlg);}
}

/* ---------- karty, panely a zoznamy ---------- */
body.dark2x .mod,body.dark2x .statement,body.dark2x .roi,body.dark2x .whybox,
body.dark2x .callout,body.dark2x .callout.light,body.dark2x .compare-note,body.dark2x .faq{
  background:var(--d1);border:1px solid var(--dline);color:var(--dtext);
}
body.dark2x .mod{border-radius:var(--rmd);}
body.dark2x .mod b{color:#fff;}
body.dark2x .mod span{color:var(--dmuted);}
body.dark2x .mod .time{color:var(--softb);}
body.dark2x .mod:hover,body.dark2x .mod.on{border-color:var(--softb);box-shadow:0 16px 34px rgba(6,8,28,.55);}
body.dark2x .statement{border-radius:var(--rxl);padding:32px 34px;}
body.dark2x .statement .big{color:#fff;}
body.dark2x .statement .big em{color:var(--softb);}
body.dark2x .statement .lbl.accent{color:var(--softb);}
body.dark2x .points,body.dark2x .points p{border-color:var(--dline);}
body.dark2x .roi{border-radius:var(--rxl);}
body.dark2x .roi p{color:var(--dtext);}
body.dark2x .roi .q{color:var(--softb);}
body.dark2x .whybox,body.dark2x .compare-note{border-radius:var(--rlg);}
body.dark2x .callout,body.dark2x .callout.light{border-radius:var(--rlg);color:var(--dtext);}
body.dark2x .callout strong,body.dark2x .callout.light strong{color:#fff;}
body.dark2x .badge{background:rgba(255,255,255,.13);border-color:rgba(180,188,255,.42);color:#EDF0FF;}

/* porovnanie: stara cesta tmava, nova cesta jemne zelena aj v tmavom */
body.dark2x .col{background:var(--d1);border-color:var(--dline);color:var(--dtext);border-radius:var(--rlg);}
body.dark2x .col.good{background:rgba(31,163,114,.14);border-color:rgba(63,190,143,.42);}
body.dark2x .col .res{border-top-color:var(--dline);}
body.dark2x .col.bad .res{color:#F0907B;border-top-color:var(--dline);}
body.dark2x .col.good .res{color:#6FE0B2;border-top-color:rgba(63,190,143,.42);}

/* FAQ: sipka je v SVG natvrdo tmava, v tmavom ju rozsvietime */
body.dark2x .faq{border-radius:var(--rmd);}
body.dark2x .faq summary{color:#fff;}
body.dark2x .faq .a{color:var(--dmuted);}
body.dark2x .faq summary .chev path{stroke:var(--softb);}

/* ---------- pitch: hlbsi oble blok, nie dalsi celoplosny pas ---------- */
body.dark2x .pitch{background:none;padding:34px 0;}
body.dark2x .pitch::before{display:none;}
body.dark2x .pitch .inner{background:linear-gradient(165deg,var(--d2),#1B2158);border:1px solid rgba(168,176,240,.26);border-radius:var(--rxl);padding:40px 38px 36px;box-shadow:0 26px 60px rgba(6,8,28,.5);}
body.dark2x .pitch .overline{color:var(--softb);}
body.dark2x .step{background:rgba(9,12,38,.34);border-color:rgba(168,176,240,.20);border-radius:var(--rmd);}
@media(max-width:620px){
 body.dark2x .pitch .inner{padding:28px 22px 26px;border-radius:var(--rlg);}
}

/* ---------- svetle miesta, kam ma ist oko ---------- */
/* zaber platformy: vnutro ostava svetle, len ram sedi do tmavej stranky */
body.dark2x .shot{border-radius:var(--rxl);border-color:rgba(168,176,240,.28);box-shadow:0 30px 70px rgba(6,8,28,.6);}
body.dark2x .shot{color:var(--text);}
body.dark2x .shot h1,body.dark2x .shot h2,body.dark2x .shot h3{color:var(--ink);}
body.dark2x .shot h4{color:#6E727A;}
body.dark2x .shot strong{color:var(--ink);}
/* cenovy blok a objednavka su jedine velke svetle plochy na stranke */
body.dark2x .pricing{border-radius:var(--rxl);border-color:transparent;box-shadow:0 30px 70px rgba(6,8,28,.55);}
body.dark2x .pricing .left{background:#fff;color:var(--text);}
body.dark2x .pricing .left h2,body.dark2x .pricing .left h3{color:var(--ink);}
body.dark2x .pricing .left strong{color:var(--ink);}
body.dark2x .pricing .left .eyebrow{color:var(--accent);}
/* na tmavej stranke je cely cenovy blok svetly, aby tam oko islo samo */
body.dark2x .pricing .right{background:linear-gradient(180deg,#F1F3FD,#E4E8F9);color:var(--text);}
body.dark2x .pricing .price-big,body.dark2x .pricing .price-seat{color:var(--ink);}
body.dark2x .pricing .price-unit,body.dark2x .pricing .price-plus,body.dark2x .pricing .price-note{color:var(--muted);}
body.dark2x .pricing .right .btn-primary{box-shadow:0 8px 22px rgba(79,91,213,.35);}
/* --------------------------------------------------------------------------
   MEDIA, KTORE O AI ACTE PISU
   Kratky uvodny riadok a pod nim VELKE loga. Zamerne bez odkazov, aby
   navstevnik neodchadzal z lievika. Text hovori pravdu: mozno o tom uz cital
   v tychto mediach. Nikdy odtialto nespravit "boli sme v mediach".
   -------------------------------------------------------------------------- */
.press{max-width:860px;margin:0 auto;}
.press-lead{margin:0;font-size:15.5px;color:var(--muted);}
/* Pravna poznamka: nenapadna, ale citatelna. Nie drobne pismo, ktore nikto
   necita, lebo prave to by z nej spravilo bezcennu formalitu. */
.legal-note{max-width:70ch;margin:0 auto;font-size:13px;line-height:1.55;color:var(--muted);opacity:.9;}
/* Pat log VZDY v jednom riadku. Predtym to bol flex s wrapom a na uzkej obrazovke
   z toho vychadzalo styri a jedno pod nimi, co vyzeralo ako chyba. Mriezka s piatimi
   rovnakymi stlpcami sa nezalomi nikdy, loga sa len umerne zmensia. */
.press-strip{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  justify-items:center;gap:clamp(10px,3vw,44px);margin-top:24px;}
/* Loga maju rozne tvary: Forbes a SME su siroke napisy, ostatne takmer stvorcove
   znacky. Nevyrovnavaju sa na rovnaku vysku, ale na podobnu OPTICKU velkost. */
.press-strip img{width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.62;}
.press-strip img[alt="Forbes"]{height:34px;}
.press-strip img[alt="SME"]{height:32px;}
.press-strip img[alt="CNBC"]{height:48px;}
.press-strip img[alt="Euronews"]{height:50px;}
.press-strip img[alt="Denník N"]{height:50px;}
@media (max-width:640px){
  .press-strip img[alt="Forbes"]{height:20px;}
  .press-strip img[alt="SME"]{height:18px;}
  .press-strip img[alt="CNBC"]{height:28px;}
  .press-strip img[alt="Euronews"]{height:29px;}
  .press-strip img[alt="Denník N"]{height:29px;}
}
@media (max-width:400px){
  .press-strip img[alt="Forbes"]{height:16px;}
  .press-strip img[alt="SME"]{height:15px;}
  .press-strip img[alt="CNBC"]{height:23px;}
  .press-strip img[alt="Euronews"]{height:24px;}
  .press-strip img[alt="Denník N"]{height:24px;}
}

/* --------------------------------------------------------------------------
   RYTMUS NA TMAVOM UPSELLI: velke svetle panely
   Cela stranka bola jedna modra plocha a splyvala. Vybrane sekcie sa preto
   vykreslia ako velky svetly panel s velkymi oblymi rohmi, ktory "leti" nad
   tmavym podkladom. Vznikne striedanie tmava - svetla - tmava.
   Vnutro panela sa vracia k svetlym farbam predajnej stranky.
   -------------------------------------------------------------------------- */
/* Trieda sedi priamo na .wrap, cize panel je ten vnutorny blok. */
body.dark2x .lightband{
  background:#F7F8FC;
  border:1px solid #E7E9F6;
  border-radius:16px;
  padding:38px 28px 42px;
  margin-top:34px;
  margin-bottom:34px;
  box-shadow:0 30px 70px rgba(4,6,24,.5);
  /* Rovnaka sirka ako cenovy blok, objednavkovy blok a zaverecna vyzva.
     Cela stranka stoji na jednom 860 px stlpci, aby sa hrany prvkov kryli. */
  max-width:860px;
}
@media (max-width:640px){
  body.dark2x .lightband{border-radius:16px;padding:28px 18px 30px;margin-top:24px;margin-bottom:24px;}
}

/* Vnutro svetleho panela: spat na farby predajnej stranky. */
body.dark2x .lightband,
body.dark2x .lightband p,
body.dark2x .lightband li,
body.dark2x .lightband span{color:var(--muted);}
body.dark2x .lightband h1,body.dark2x .lightband h2,
body.dark2x .lightband h3,body.dark2x .lightband h4{color:var(--ink);}
body.dark2x .lightband strong,body.dark2x .lightband b{color:var(--ink);}
body.dark2x .lightband .eyebrow{color:var(--accent);}
/* Svetly panel je uplny svetly ostrov. Namiesto prefarbovania kazdeho prvku
   zvlast tu PREMAPUJEME tmave premenne na svetle. Vsetky pravidla dark2x, ktore
   pouzivaju --dtext, --dmuted, --d1, --d2 a --dline, tak vnutri panela samy
   prepnu na svetlu verziu. Menej pravidiel, ziadny tmavy text na tmavom. */
body.dark2x .lightband{
  --dtext:#3E4358;
  --dmuted:#5F6480;
  --d0:#F7F8FC;
  --d1:#FFFFFF;
  --d2:#EEF0F8;
  --dline:#E1E3F3;
  color:var(--muted);
}
body.dark2x .lightband h1,body.dark2x .lightband h2,
body.dark2x .lightband h3,body.dark2x .lightband h4{color:var(--ink);}
body.dark2x .lightband strong,body.dark2x .lightband b{color:var(--ink);}
body.dark2x .lightband .eyebrow{color:var(--accent);}
body.dark2x .lightband .card,
body.dark2x .lightband .col,
body.dark2x .lightband .mod,
body.dark2x .lightband .faq,
body.dark2x .lightband .compare-note,
body.dark2x .lightband .statement,
body.dark2x .lightband .callout,
body.dark2x .lightband .whybox,
body.dark2x .lightband .roi{background:#fff;border-color:var(--line);color:var(--muted);}
body.dark2x .lightband .col.good{background:#EDF8F2;border-color:#BCE2CF;}
body.dark2x .lightband .col.good .res{color:var(--accent-d);}
body.dark2x .lightband .col.bad .res{color:var(--warn);}
body.dark2x .lightband .faq summary{color:var(--ink);}
body.dark2x .lightband .faq .a{color:var(--muted);}
body.dark2x .lightband .mod b{color:var(--ink);}
body.dark2x .lightband .mod span{color:var(--muted);}

/* ---------- LOGÁ FIRIEM, KTORÉ AI POUŽÍVAJÚ ----------
   Skutočné logá v skutočných farbách. Výšky sú nastavené opticky, nie
   matematicky: každé logo má inú kresbu, takže rovnaké číslo by vyzeralo krivo. */
.firma-logo{display:flex;align-items:flex-end;height:44px;margin-bottom:10px;}
.firma-logo img{display:block;width:auto;max-width:100%;}
.firma-logo img[alt="GymBeam"]{height:19px;}
.firma-logo img[alt="Alza"]{height:26px;}
.firma-logo img[alt="Tatra banka"]{height:44px;}
@media (max-width:640px){
  .firma-logo{height:38px;}
  .firma-logo img[alt="GymBeam"]{height:17px;}
  .firma-logo img[alt="Alza"]{height:23px;}
  .firma-logo img[alt="Tatra banka"]{height:38px;}
}
/* Na tmavom podklade su Alza aj GymBeam takmer cierne, cize neviditelne.
   Prekreslime ich na bielo, cely pruh tak drzi jeden ton a nic nezanikne.
   Vnutri svetleho panela ostavaju tmave. */
body.dark2x .firma-logo img{filter:brightness(0) invert(1);opacity:.9;}
body.dark2x .lightband .firma-logo img{filter:grayscale(1) brightness(.3);opacity:.85;}

/* --------------------------------------------------------------------------
   OBJEDNAVKOVA KARTA NA TMAVOM UPSELLI
   Majitel si vybral variant "biela karta": stranka ostava tmava, karta je
   biela a je jedine svetle miesto v tej casti, takze oko ide rovno na nu.
   Preto sa vnutro karty drzi SVETLYCH farieb z predajnej stranky, nie
   tmavych premennych z dark2x.
   -------------------------------------------------------------------------- */
body.dark2x .oc{
  background:#fff;
  border:1px solid #E7E9F6;
  border-radius:var(--rxl);
  box-shadow:0 34px 80px rgba(4,6,24,.62), 0 0 0 1px rgba(255,255,255,.06);
  color:var(--text);
}
body.dark2x .oc h2,body.dark2x .oc h3{color:var(--ink);}
body.dark2x .oc strong{color:var(--ink);}
body.dark2x .oc .eyebrow{color:var(--accent);}
body.dark2x .oc .oc-lead{color:var(--muted);}
body.dark2x .oc .oc-box{background:#F7F8FC;border-color:#E7E9F6;}
body.dark2x .oc .oc-flbl{color:var(--muted);}
/* Odchodovy odkaz pod objednavkovym blokom: tichy, ale najditelny. */
body.dark2x .oc-skip{margin-top:14px;text-align:center;}
body.dark2x .oc-skip .decline{color:var(--muted);}
body.dark2x .oc-skip .decline:hover,body.dark2x .oc-skip .decline:focus-visible{color:var(--accent-d);}
/* Riadok s kartou: zamok prec, vpravo je moznost zaplatit inou kartou. */
body.dark2x .oc .oc-cardedit{color:var(--muted);text-decoration:none;}
body.dark2x .oc .oc-cardedit:hover{color:var(--accent-d);}

/* Suhrnny riadok: meno, firma a e-mail v jednom riadku. Cele udaje az po kliknuti
   na Upravit, aby blok nebol vysoky a zakaznik mohol hned klikat. */
.oc-sum{display:none;align-items:center;gap:11px;}
.oc-box.is-locked .oc-sum{display:flex;}
.oc-box.is-locked .oc-btop,
.oc-box.is-locked .oc-row{display:none;}
.oc-box.is-locked{position:relative;padding-right:86px;}
.oc-box.is-locked .oc-btop{display:block;position:absolute;top:50%;right:14px;
  transform:translateY(-50%);margin:0;}
.oc-box.is-locked .oc-btop .oc-blbl{display:none;}
.oc-sum-ico{flex:none;width:34px;height:34px;border-radius:11px;background:#EDEFFB;
  color:var(--accent);display:grid;place-items:center;}
.oc-sum-txt{min-width:0;display:block;}
.oc-sum-txt b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oc-sum-txt em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:420px){
  .oc-box.is-locked{padding-right:78px;}
  .oc-sum-txt b{font-size:13.5px;}
}
body.dark2x .final{border-radius:var(--rxl);}

/* ---------- paticka ---------- */
body.dark2x footer{border-top-color:var(--dline);color:var(--dmuted);}
body.dark2x footer .mini,body.dark2x footer .mini a,body.dark2x footer .mini button{color:var(--dmuted);}
body.dark2x footer .mini a:hover,body.dark2x footer .mini button:hover{color:#fff;}
body.dark2x footer .mini .sep{color:#4A5090;}
body.dark2x footer .copy{color:#8F96C4;}

/* krokovy pruh na mobile: musi ostat v jednom riadku aj na 360 px */
@media(max-width:560px){
 body.dark2x .upsell .wrap{padding-top:20px;padding-bottom:18px;}
 body.dark2x .upsell .stepbar{gap:4px;padding:4px;border-radius:14px;}
 body.dark2x .upsell .ustep{font-size:11.5px;gap:6px;padding:8px 4px;border-radius:11px;}
 body.dark2x .upsell .ustep .n{width:16px;height:16px;font-size:10px;}
}
@media(max-width:380px){
 body.dark2x .upsell .ustep{font-size:10.5px;gap:5px;padding:8px 2px;}
}

/* ---------- NAHLADOVY REZIM JEDNOKLIKOVEHO BLOKU (?preview=1) ----------
   Blok #oto-order sa normalne ukaze len po skutocnej platbe. S ?preview=1 sa da
   skontrolovat s ukazkovymi udajmi. Tlacidlo je vtedy zamerne neaktivne, aby sa
   v nahlade nedalo omylom zaplatit. Ostra prevadzka sa tym nemeni. */
.oc-preview{display:block;margin:0 0 18px;padding:13px 16px;border-radius:14px;background:#FFF4E0;border:1px solid #EFD5A2;}
.oc-preview b{display:block;font-family:var(--fd);font-weight:800;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A6212;margin-bottom:3px;}
.oc-preview span{display:block;font-size:13px;line-height:1.5;color:#6B5312;}
#oto-order[data-preview="1"] .oc-btn:disabled{background:#B3B8D8;box-shadow:none;opacity:1;cursor:not-allowed;}
#oto-order[data-preview="1"] .oc-edit{opacity:.45;cursor:default;}



/* Poster s tvarou: text a play vlavo v tmavej casti, nie cez tvar. */
.vthumb.osoba .vthumb-body{align-items:flex-start;text-align:left;
  padding-left:clamp(20px,5vw,64px);padding-right:46%;}
.vthumb.osoba .vthumb-h{text-wrap:balance;}
@media(max-width:640px){
  .vthumb.osoba .vthumb-body{padding-right:34%;}
}

/* Hero na telefone: 23 px robilo z nadpisu 6 riadkov cez pol obrazovky.
   Mensi stupen a tesnejsie riadkovanie, obsah sa nemeni. */
@media(max-width:640px){
  .hero h1{font-size:23px;line-height:1.22;letter-spacing:-.015em;}
  /* Podnadpis mensi a tichsi, nech neprebije video pod nim. */
  .hero .lead{font-size:13.5px;color:#B4B9DC;}
  .discover{margin:14px 0 0;font-size:12.5px;}
  /* Video skoro od okraja po okraj: uzky ram a jemne zaoblenie, nech je velke,
     ale nepusobi tazko. */
  .hero .vthumb-wrap{margin-left:-14px;margin-right:-14px;width:auto;max-width:none;margin-top:18px;}
  .hero .vthumb{border-radius:12px;}
}

/* ---------- KONCOVA KARTA VIDEA ----------
   Text na konci VSL je zapeceny vo videu a na telefone je necitatelne maly.
   Ked video dohra, prekryjeme ho vlastnou kartou: velky nadpis a skutocne
   tlacidlo na objednavku. */
.vsl-koniec{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;
  padding:24px;background:
    radial-gradient(90% 90% at 50% 40%, rgba(46,53,116,.65), transparent 70%),
    #0C0E18;}
.vsl-koniec .vk-h{font-family:var(--fd);font-weight:800;color:#fff;
  font-size:clamp(22px,4.6vw,34px);letter-spacing:-.02em;line-height:1.15;text-wrap:balance;}
.vsl-koniec .vk-h .hl{color:var(--softb);}
.vsl-koniec .btn{font-size:clamp(15px,2vw,17px);padding:14px 26px;}
.vsl-koniec .vk-znova{background:none;border:0;cursor:pointer;font:inherit;
  font-size:13px;color:#8A90B8;text-decoration:underline;padding:4px;}
.vsl-koniec .vk-znova:hover{color:#C6CBF2;}

/* ---------- OSNOVA KURZU (karty na potiahnutie) ----------
   Jedna lekcia = jedna karta. Kazda ma ikonu podla temy, poradie ako tenky
   ukazovatel postupu dole a zaverecnu vetu zvyraznenu farbou. */
.osn-hlava{text-align:center;max-width:660px;margin:0 auto 26px;}
.osn-hlava h2{font-size:clamp(21px,4.4vw,31px);margin:10px 0 0;text-wrap:balance;}
.osn-hlava p{font-size:14.5px;color:var(--muted);margin-top:10px;}

.osn{max-width:1120px;margin:0 auto;text-align:left;}
.osn-pas{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 16px 18px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.osn-pas::-webkit-scrollbar{display:none;}

.osn-karta{scroll-snap-align:center;flex:0 0 min(330px,84vw);display:flex;flex-direction:column;
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 20px 24px;min-height:240px;overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.osn-karta:hover{border-color:var(--softb);box-shadow:0 16px 34px rgba(20,24,45,.10);transform:translateY(-2px);}

.osn-hl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.osn-ik{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--soft);color:var(--accent);}
.osn-ik svg{display:block;width:22px;height:22px;}
.osn-krok{font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:#8B90AB;}

.osn-nadpis{font-family:var(--fd);font-weight:800;font-size:18px;line-height:1.25;
  letter-spacing:-.015em;color:var(--ink);margin:0 0 10px;text-wrap:balance;}
.osn-text{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 14px;}
/* Zaverecna veta: nie obycajne tucne, ale znackova farba. To je ta zaujimava cast. */
.osn-text b{color:var(--accent-d);font-weight:700;}

/* tenky ukazovatel postupu uplne dole */
.osn-prog{margin-top:auto;height:4px;border-radius:99px;background:var(--soft);overflow:hidden;}
.osn-prog i{display:block;height:100%;border-radius:99px;background:var(--accent);}
.osn-karta.hotovo .osn-ik{background:#E7F5EF;color:var(--ok-d);}
.osn-karta.hotovo .osn-prog i{background:var(--ok-d);}
.osn-karta.hotovo .osn-text b{color:var(--ok-d);}

.osn-ovl{display:none;align-items:center;justify-content:center;gap:14px;margin-top:4px;}
.osn-sip{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
  transition:border-color .18s ease,background .18s ease;}
.osn-sip:hover{border-color:var(--accent);background:var(--soft);}
.osn-sip:disabled{opacity:.35;cursor:default;}
.osn-sip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.osn-poc{font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:58px;text-align:center;}
@media(min-width:760px){ .osn-ovl{display:flex;} }

.osn-tip{display:block;text-align:center;font-size:12.5px;color:#8B90AB;margin-top:0;}
@media(min-width:760px){ .osn-tip{display:none;} }

@media(max-width:520px){
  .osn-karta{padding:18px 18px 22px;min-height:225px;}
  .osn-nadpis{font-size:17px;}
}

/* Tmava stranka 2X: sekcia tam sedi vo svetlom pruhu (lightband), takze karty
   ostavaju svetle. Len farba zvyraznenej vety musi prebit pravidlo
   body.dark2x .lightband b, ktore ju inak stiahne na ciernu. */
body.dark2x .lightband .osn-text b{color:var(--accent-d);}
body.dark2x .lightband .osn-karta.hotovo .osn-text b{color:var(--ok-d);}

@media(prefers-reduced-motion:reduce){ .osn-pas{scroll-behavior:auto;} .osn-karta{transition:none;} }

/* ---------- VSL: klik zapne zvuk od zaciatku ----------
   Neviditelne prekrytie cez cele video + mala pilulka dole. Po kliku zmizne. */
.vsl-zvuk{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 14px;background:none;border:0;cursor:pointer;font:inherit;}
.vz-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(15,17,26,.78);color:#fff;
  font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:99px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);backdrop-filter:blur(4px);
  animation:vzpulz 2.4s ease-in-out infinite;}
@keyframes vzpulz{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@media(prefers-reduced-motion:reduce){ .vz-pill{animation:none;} }

/* ---------- Tlacidlo pod videom ----------
   Vyzera ako bezne tlacidlo stranky, ale text nepredava: len posunie nizsie.
   Sipka je staticka, bez animacie: pohyb tu posobil ako reklamny prvok. */
.ponizsie{margin-top:22px;}
@media(max-width:640px){ .ponizsie{margin-top:16px;} }