:root{--bg:#04080B;--bg2:#0A1216;--glass:rgba(255,255,255,.05);--gline:rgba(255,255,255,.12);
--line:rgba(255,255,255,.08);--text:#EFF5F8;--muted:#93A4AC;--faint:#7C8F98;
--cyan:#4FD8E8;--ice:#BFEFFF;--ink:#062A30;--hdr:rgba(4,8,11,.72);
--grad:linear-gradient(92deg,#4FD8E8 8%,#BFEFFF 90%);
--f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--sec:96px;color-scheme:dark}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
radial-gradient(900px 560px at 78% -10%,rgba(79,216,232,.10),transparent 62%),
radial-gradient(720px 480px at -8% 22%,rgba(255,255,255,.05),transparent 60%),
radial-gradient(640px 420px at 60% 108%,rgba(79,216,232,.06),transparent 65%),
linear-gradient(135deg,var(--bg) 0%,var(--bg2) 100%)}
body::after{content:"";position:fixed;left:-20%;right:-20%;top:30%;height:2px;z-index:-1;
background:linear-gradient(90deg,transparent,rgba(79,216,232,.14),rgba(191,239,255,.10),transparent);
transform:rotate(-16deg);filter:blur(4px);pointer-events:none}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);
font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--ice)}
::selection{background:rgba(79,216,232,.28)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl{color:var(--ice);font-weight:600}
h1,h2,h3,h4{margin:0;letter-spacing:-.022em;line-height:1.12;font-weight:700;text-wrap:balance}
/* `pretty` nenecha na poslednom riadku osamotene slovo, `balance` vyrovna kratke bloky.
Prehliadace bez podpory to proste ignoruju. */
p,li,figcaption,summary,blockquote{text-wrap:pretty}
p{margin:0 0 14px}
.hdr{position:sticky;top:0;z-index:60;background:var(--hdr);
backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--text)}
.brand img{width:30px;height:30px;border-radius:8px}
.nlinks{display:flex;align-items:center;gap:22px;font-size:14.5px}
.mlinks a{color:var(--muted)}
.mlinks a:hover{color:var(--text)}
.menu{position:relative}
.menu>summary{display:none;list-style:none;cursor:pointer;color:var(--muted);padding:8px 4px}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{color:var(--text)}
.mlinks{display:flex;align-items:center;gap:22px}
/* Pod 900 px sa z menu stane rozbalovacie tlacidlo. Panel je `position:absolute`,
takze nezvysuje prilepenu hlavicku — inak by na telefone zjedla pol obrazovky. */
/* Prepinac jazykov. Panel je mriezka, lebo 26 poloziek pod sebou je zvitok. */
.lang{position:relative}
.lang>summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
padding:7px 11px;border:1px solid var(--gline);border-radius:999px;
color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:.03em}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary:hover{color:var(--text);border-color:rgba(79,216,232,.4)}
.lang[open]>summary{color:var(--ice);border-color:rgba(79,216,232,.5)}
.langs{position:absolute;right:0;top:calc(100% + 9px);z-index:80;
display:grid;grid-template-columns:repeat(3,minmax(128px,1fr));gap:1px 4px;
padding:8px;border-radius:14px;background:var(--bg2);border:1px solid var(--gline);
box-shadow:0 18px 44px rgba(0,0,0,.6);max-height:70vh;overflow:auto}
.langs a{display:block;padding:8px 10px;border-radius:8px;color:var(--muted);
font-size:14px;white-space:nowrap}
.langs a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.langs a.on{color:var(--ice);background:rgba(79,216,232,.13)}
@media (max-width:700px){
/* Panel sa kotvi o `.nav`, nie o vlastne tlacidlo — rovnaky vzor ako `.menu`/`.mlinks`
vyssie. `translateX(-50%)` centroval panel na SPUSTAC, a ten sedi pri pravom okraji
hlavicky, takze na 320 px trcal ~40 px mimo obrazovku a pravy stlpec zoznamu (pri 26
jazykoch polovica) sa nedal trafit. Kotva o `.nav` je nezavisla od vysky hlavicky,
ktora ma dve varianty (62 px a 44 px). (24. 8.) */
.lang{position:static}
.langs{grid-template-columns:repeat(2,minmax(0,1fr));
right:0;left:0;transform:none;width:auto}
.langs a{padding:11px 10px;font-size:14.5px}
}
.fab{display:none}
@media (max-width:900px){
/* Hamburger patri UPLNE VPRAVO (efko 23. 8.), takze v poradi az za prepinac.
Download z hlavicky odchadza a stava sa z neho plavajuce tlacidlo. */
.menu{order:3}
.nlinks>a.btn{display:none}
.menu>summary{display:flex;align-items:center;min-height:40px;min-width:40px;
justify-content:center}
.nav{position:relative}
.menu{position:static}
.mlinks{position:absolute;right:0;left:auto;top:calc(100% - 8px);flex-direction:column;
align-items:stretch;gap:0;min-width:190px;padding:6px;border-radius:14px;
background:var(--bg2);border:1px solid var(--gline);
box-shadow:0 18px 44px rgba(0,0,0,.6)}
.mlinks a{padding:12px 14px;border-radius:9px;font-size:15.5px}
.mlinks a:hover{background:rgba(255,255,255,.05)}
/* Plavajuce tlacidlo. Aby NEZAKRYVALO text: stranka ma dole odsadenie o jeho vysku,
takze koniec obsahu sa vzdy da docitat, a skript ho schova zakazdym, ked je na
obrazovke iny odkaz na App Store (hero aj zaverecne CTA). Bez JS ostane viditelne,
cize funkcne — to je horsi z dvoch dobrych stavov, nie chyba. */
body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
.fab{display:inline-flex;align-items:center;justify-content:center;
position:fixed;z-index:70;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));
min-width:72px;height:44px;padding:0 22px;border-radius:999px;
font-weight:700;font-size:15.5px;
background:var(--grad);color:var(--ink);
box-shadow:0 12px 32px rgba(0,0,0,.55);
transition:opacity .18s ease,transform .18s ease}
.fab:active{transform:scale(.95)}
.fab.off{opacity:0;transform:translateY(10px) scale(.96);pointer-events:none}
}
@media (max-width:430px){.brand{font-size:15px;gap:7px}.brand img{width:24px;height:24px}
.nlinks{gap:11px}}
/* Dotykove ciele: na mobile musi mat kazdy odkaz cez 40 px na vysku. EN/SK prepinac
a odkazy v pate mali 24 a 29 px, co sa palcom trafi len s nervami. */
@media (max-width:760px){
.nlinks>a.btn-s{padding:10px 16px}
.hdr .brand{padding:9px 0}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 22px;border-radius:12px;font-weight:600;font-size:15px;
border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--grad);color:var(--ink)}
.btn-p:hover{color:var(--ink)}
.btn-g{border-color:var(--gline);color:var(--text);background:var(--glass)}
.btn-g:hover{color:var(--text);background:rgba(255,255,255,.09)}
.btn-s{padding:7px 15px;font-size:13.5px;border-radius:10px}
.badge{width:170px;height:57px}
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;border:1px solid rgba(79,216,232,.45);color:var(--cyan)}
.tag.free{border-color:rgba(150,220,160,.45);color:#96DCA0}
.lbl{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
margin-bottom:14px}
section{padding:var(--sec) 0}
.stitle{font-size:clamp(28px,4vw,44px);margin-bottom:16px}
.sintro{color:var(--muted);font-size:17px;max-width:64ch;line-height:1.62}
/* ---- posuvatelne zabery ----
Zabery su PRIESVITNE mockupy s vlastnym zaoblenym obrysom telefonu. Ziadny `background`,
ziadny `border` a ziadny `border-radius` na obrazku: to boli tie cierne rohy, lebo CSS
vyplnalo priehladny okraj a kreslilo ramik okolo celeho obdlznika. Tien ide cez `filter`,
ktory kopiruje tvar alfy, nie box. */
.railwrap{position:relative}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 22px;
scrollbar-width:thin;scrollbar-color:var(--gline) transparent;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:7px}
.rail::-webkit-scrollbar-thumb{background:var(--gline);border-radius:99px}
/* `start`, nie `center`: pri centrovani sa snap body prvych kariet zrazia do nuly
(stred prvej karty sa vlavo uz nema kam posunut), takze posun sipkou snap engine
stiahol spat na zaciatok a tlacidlo vyzeralo mrtve. */
.rail{scroll-padding-left:0;scroll-behavior:smooth}
.rail>figure{margin:0;flex:0 0 auto;width:236px;scroll-snap-align:start}
.rail>figure img{width:100%;display:block;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}
/* Animovana polozka: obrazovka VZADU, ram NAVRCHU — presne tie percenta, ktore ma
apertura v device-frame.png (merane z jeho alfy, nie odhadnute). */
.rail>figure .ph{position:relative;display:block}
.rail>figure .ph .fr{position:relative;z-index:3;width:100%}
.rail>figure .ph .s{position:absolute;z-index:1;left:6.14%;top:3.21%;width:87.71%;height:93.57%;
object-fit:cover;border-radius:13.7%/6.3%;filter:none}
.rail>figure figcaption{margin-top:11px;font-size:13.5px;color:var(--muted);line-height:1.38}
.rail>figure figcaption b{color:var(--text);display:block;font-weight:600}
.railhint{font-size:13px;color:var(--faint);display:flex;align-items:center;gap:8px}
.railhint svg{width:15px;height:15px;flex:0 0 auto}
@media (max-width:640px){.rail>figure{width:196px}}
/* sipky: bez JS sa vobec nekreslia, aby neboli mrtve */
.railbtn{display:none}
.railwrap.armed .railbtn{position:absolute;top:calc(50% - 46px);z-index:5;width:44px;height:44px;
border-radius:50%;border:1px solid var(--gline);background:rgba(10,17,22,.82);color:var(--text);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;
display:grid;place-items:center;transition:opacity .18s,background .18s,transform .18s}
.railwrap.armed .railbtn:hover{background:rgba(79,216,232,.16);border-color:rgba(79,216,232,.5);
transform:translateY(-1px)}
.railwrap.armed .railbtn:disabled{opacity:.25;cursor:default;transform:none}
.railwrap.armed .railbtn.prev{left:-14px}
.railwrap.armed .railbtn.next{right:-14px}
.railbtn svg{width:19px;height:19px}
@media (max-width:820px){.railwrap.armed .railbtn{display:none}}
/* ---- pata ---- */
.foot{border-top:1px solid var(--line);padding:52px 0 34px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px}
.fdl{display:inline-block;font-size:13.5px;color:var(--cyan)}
@media (max-width:1080px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}
.fgrid>div:first-child{grid-column:1/-1}}
.fgrid h5{margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.fgrid a{display:block;color:var(--muted);font-size:14.5px;padding:3px 0}
.fgrid a:hover{color:var(--text)}
.fbot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13.5px;color:var(--faint)}
@media (max-width:760px){.foot .fgrid a{padding:9px 0}}
.cmp{width:100%;border-collapse:collapse;font-size:15.5px}
.cmp th,.cmp td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{position:sticky;top:62px;z-index:5;background:var(--cmphdr);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
border-bottom:1px solid var(--gline);padding-top:16px;padding-bottom:16px}
.cmp thead th.c{text-align:center;width:118px;color:var(--text);font-size:14px;letter-spacing:0;
text-transform:none;font-weight:700}
.cmp thead th.c small{display:block;font-weight:500;color:var(--faint);font-size:12px;letter-spacing:0}
.cmp tr.grp td{padding-top:30px;padding-bottom:9px;border-bottom:1px solid var(--gline);
font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.cmp td.c{text-align:center;width:118px}
.cmp td b{font-weight:600;color:var(--text);display:block}
.cmp td span.d{color:var(--faint);font-size:13.5px;line-height:1.45;display:block;margin-top:2px}
.ck{width:19px;height:19px;color:#7BE0A8;display:inline-block}
.lk{width:17px;height:17px;color:var(--faint);display:inline-block;opacity:.55}
.dash{color:var(--faint);opacity:.5}
.cmp tr.pro td:first-child b{color:var(--ice)}
.cmpwrap{overflow-x:auto}
@media (max-width:700px){.cmp thead th.c,.cmp td.c{width:74px}.cmp th,.cmp td{padding:11px 8px}
.cmp{font-size:14.5px}}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0 40px}
@media (max-width:820px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:20px;padding:28px 28px 26px;background:var(--glass)}
.plan.hi{border-color:rgba(79,216,232,.42);background:rgba(79,216,232,.06)}
.plan .pn{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.plan .pp{font-size:clamp(32px,4.4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1}
.plan .pp small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:8px}
.plan p{color:var(--muted);font-size:15px;margin:14px 0 0;line-height:1.6}
.plan .note{margin-top:16px;padding-top:15px;border-top:1px solid var(--line);font-size:14px;color:var(--faint)}
.plan .note b{color:var(--ice);font-weight:600}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:19px 34px 19px 0;font-weight:600;font-size:16.5px;position:relative;
list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:26px;width:9px;height:9px;
border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);
transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--ice)}
.faq .ans{padding:0 40px 20px 0;color:var(--muted);font-size:15.5px;line-height:1.66}
.faq .ans p{margin:0}
.faq.two{columns:2;column-gap:44px}
.faq.two details{break-inside:avoid}
@media (max-width:900px){.faq.two{columns:1}}
:root{--sec:66px;--cmphdr:rgba(6,11,15,.93)}
@media (max-width:640px){:root{--sec:46px}}
body{font-size:16px}
.stitle{font-size:clamp(26px,3.2vw,38px);margin-bottom:12px}
.sintro{font-size:16px;line-height:1.55;max-width:70ch}
.lbl{margin-bottom:10px}
.hero3{padding:60px 0 34px;text-align:center}
.hero3 h1{font-size:clamp(40px,6vw,68px);line-height:1;letter-spacing:-.04em}
/* „your rules." — cervena kapsula spod appky (zalozka Keyboard): scale-in zlava.
Prevzate z assets/style.css, rozmery su v `em`, aby sedeli na kazdej velkosti nadpisu.
`backwards` drzi ciaru schovanu pocas oneskorenia, takze nepreblikne pred animaciou.
Pri prefers-reduced-motion ju BASE zhasne a ciara je rovno cela. */
.hero3 h1 .rules{position:relative;white-space:nowrap;color:var(--text)}
.hero3 h1 .rules::after{
content:"";position:absolute;left:.04em;right:.04em;bottom:-.14em;height:.085em;border-radius:99px;
background:#FF454F;
animation:rules-underline .55s ease-out .35s backwards}
/* CLIP-PATH, nie transform:scaleX().
POZOR NA HISTORIU: 21. 8. efko hlasil tmavy pruh vlavo od nadpisu, viditelny len pri
oznaceni textu. Vyzeralo to na tuto animaciu (rozmery aj zaoblene konce sedeli), lenze
VINNIK BOL INY: rozsirenie Immersive Translate, ktore si do stranky vklada vlastne prvky
(`immersive-translate-selection-translation-button` sa objavi prave pri oznaceni) a meni
`data-immersive-translate-page-theme` na koreni. V Edge bez toho rozsirenia sa artefakt
nikdy neobjavil. NA STRANKE TO CHYBA NEBOLA — kto to bude hladat znova, ma zacat tym,
ze si stranku otvori v anonymnom okne.
clip-path tu ostava len preto, ze je jednoduchsi: dekoracia si nepyta vlastnu GPU vrstvu
a vysledok vyzera rovnako. */
@keyframes rules-underline{
from{clip-path:inset(0 100% 0 0)}
to{clip-path:inset(0 0 0 0)}}
/* Poradie v hero: nadpis, jedna veta CO to je, potom detail. Lead je svetlejsi
a vacsi nez sub, takze oko ide po nom skor. */
/* Zalomenie po vetach robi
v markupe, nie `text-wrap`. Ten len vyrovnava riadky
a vetu pokojne rozlomi uprostred. `pretty` tu ostava uz len pre pripad, ze sa veta
sama nezmesti na uzkom displeji. */
.hero3 .lead{margin:28px auto 0;font-size:20.5px;line-height:1.36;color:var(--text);max-width:none;
letter-spacing:-.012em;text-wrap:pretty}
.hero3 .sub{margin:18px auto 26px;font-size:17px;color:var(--muted);max-width:none;text-wrap:pretty}
.hero3 .sub strong{color:var(--text)}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.micro{margin:20px auto 0;font-size:13px;color:var(--faint);max-width:66ch}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:38px}
@media (max-width:980px){.strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.strip{grid-template-columns:repeat(2,1fr)}}
.strip.s4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.strip.s4{grid-template-columns:repeat(2,1fr)}}
.strip .s{background:#070C10;padding:15px 15px;text-align:left}
.strip b{display:block;font-size:20px;letter-spacing:-.02em;margin-bottom:4px}
.strip span{font-size:12px;color:var(--faint);line-height:1.4;display:block}
/* --- prepinac s telefonom --- */
.list input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.list label:focus-within{outline:2px solid var(--cyan);outline-offset:2px}
.pick .row{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
@media (max-width:960px){.pick .row{grid-template-columns:1fr;gap:26px}}
.stage{position:sticky;top:96px;height:min(660px,74vh);display:grid;place-items:center}
@media (max-width:960px){.stage{position:static;height:auto;margin-bottom:8px}}
.phone{position:relative;width:300px;max-width:82vw}
.phone .frame{position:relative;z-index:4;width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.phone .s{position:absolute;z-index:1;left:6.14%;top:3.21%;width:87.71%;height:93.57%;object-fit:cover;
border-radius:13.7%/6.3%;opacity:0;transform:scale(.985);transition:opacity .28s ease,transform .28s ease}
.list{display:flex;flex-direction:column;gap:7px;padding-top:4px}
.list label{display:block;border:1px solid var(--line);border-radius:14px;padding:12px 16px;cursor:pointer;
background:var(--glass);transition:border-color .16s,background .16s}
.list label:hover{border-color:var(--gline)}
.list .tt{font-weight:600;font-size:15.5px;display:flex;align-items:center;gap:9px}
.list .d{display:none;color:var(--muted);font-size:14.4px;line-height:1.55;margin-top:8px}
.list .d .m{display:block;color:var(--faint);font-size:13.5px;margin-top:10px;
border-left:2px solid rgba(79,216,232,.45);padding-left:11px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid3{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;background:var(--glass)}
.card h3{font-size:16.5px;margin-bottom:7px}
.card p{color:var(--muted);font-size:14.2px;line-height:1.5;margin:0}
.card .m{margin-top:12px;font-size:12.8px;color:var(--faint)}
.lchip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 13px;margin:0 7px 8px 0;
font-size:14px;color:var(--muted);background:var(--glass)}
.quote{border-left:2px solid rgba(79,216,232,.5);padding-left:26px;max-width:74ch;font-size:18.5px;
color:var(--muted);line-height:1.66}
.quote .hl{color:var(--ice);font-weight:600}
.final{background:linear-gradient(180deg,transparent,rgba(79,216,232,.06))}
/* --- mobil: zaber patri do polozky, nie hore mimo obrazovky ---------------
efko na telefone 20. 8.: „prekliknem a nic nevidim, musim scrollovat dole".
Na siroko ostava prilepeny telefon vlavo; pod 960 px sa schova a zaber sa
ukaze v rozbalenej polozke, presne tam, kde clovek ťukol. */
.stitle .narrow{display:none}
@media (max-width:960px){.stitle .wide{display:none}.stitle .narrow{display:inline}}
.list .mshot{display:none}
@media (max-width:960px){
.stage{display:none}
.pick .row{grid-template-columns:1fr;gap:0}
/* CELY telefon v rame, ziadny vyrez. Predtym to bol `object-fit:cover` na pevnu vysku,
co odrezalo prave panel, kvoli ktoremu tam ten zaber je (efko na telefone 21. 8.).
Zabery su holé snimky obrazovky v pomere 2,17, takze na plnu sirku karty by mali
640 px. 168 px sirky da ~343 px vysky: cela obrazovka je vidiet a polozka sa aj
s textom zmesti na jednu obrazovku telefonu. */
.list .mshot{display:block;position:relative;width:168px;margin:14px auto 4px}
.list .mshot .fr{position:relative;z-index:3;width:100%;display:block;
filter:drop-shadow(0 14px 26px rgba(0,0,0,.6))}
.list .mshot .sc{position:absolute;z-index:1;left:6.14%;top:3.21%;width:87.71%;height:93.57%;
object-fit:cover;border-radius:13.7%/6.3%}
.list label{padding:14px 16px}
.list .d{font-size:14.6px}
}
/* --- mobilny modal nastrojov -----------------------------------------------
efko 21. 8.: „nebolo by lepsie na mobile otvorit ako modal, ze by som si to
vedel posuvat, alebo zavriet?"
Namerane na 375x812 PRED tym:
· zaber v rozbalenej polozke mal 168 px sirky — riadky panelu neprecitatelne;
· tuk na DALSI nastroj nadol vyhodil riadok o 480–505 px hore (karta nad nim sa
zbalila), takze clovek stratil miesto, kde bol. Nahor 0 px — preto sa to lahko
prehliadne.
Modal riesi oboje: zaber dostane celu vysku obrazovky a stranka sa pod prstom
nepohne. PROGRESSIVE ENHANCEMENT — bez JS ostava rozbalovanie, triedu `tm-on`
pridava az skript. */
.tmodal{position:fixed;inset:0;z-index:90;background:rgba(4,7,10,.94);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
display:flex;flex-direction:column}
.tmodal[hidden]{display:none}
@media (min-width:961px){.tmodal{display:none!important}}
.tmbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
padding:14px 18px 6px}
.tmcount{font-size:13px;color:var(--faint);letter-spacing:.04em}
.tmclose{appearance:none;background:var(--glass);border:1px solid var(--gline);color:var(--text);
width:36px;height:36px;border-radius:999px;display:grid;place-items:center;cursor:pointer}
.tmclose svg{width:16px;height:16px}
.tmtrack{flex:1 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tmtrack::-webkit-scrollbar{display:none}
.tmslide{flex:0 0 100%;scroll-snap-align:center;min-width:0;overflow-y:auto;
display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 22px}
.tmslide h3{font-size:19px;letter-spacing:-.02em;margin:0 0 8px;
display:flex;align-items:center;gap:9px;justify-content:center}
/* PORADIE: nazov, TELEFON, az potom popis. Sekcia slubuje „watch the phone", takze
zaber musi byt cely vidiet vzdy — pri texte hore sa pri najdlhsom popise (Diktovanie,
546 znakov) telefon orezal dole a vyzeralo to ako chyba, nie ako obsah na doscrollovanie.
Ked sa text nezmesti, scrolluje text — nie to, kvoli comu tam clovek prisiel. */
.tmslide h3{order:1}
.tmslide .mshot{order:2}
.tmslide p{order:3;color:var(--muted);font-size:14.4px;line-height:1.55;margin:12px 0 4px;max-width:36ch}
.tmslide .m{display:block;color:var(--faint);font-size:13px;margin-top:9px;
border-left:2px solid rgba(79,216,232,.45);padding-left:11px;text-align:left}
/* Zaber sa NEDEFORMUJE: vysku urcuje ram (`.fr`), sirku si dopocita prehliadac,
takze pomer strán drzi sam a `.sc` percenta sedia s aperturou. */
/* `flex:1 1 auto` NECHA zaber dorast do volnej vysky, `min-height` mu drzi podlahu.
Bez tej podlahy ho dlhy popis zosrotoval: na 320x568 mala scena Diktovania 42x86 px,
teda menej, nez mala inline verzia (namerane 21. 8.). Ked sa text s podlahou nezmesti,
scrolluje SLIDE — obsah sa neoreze a zaber si vysku udrzi. */
/* Vysku obmedzuju TRI veci naraz, aby sa obrazok nikdy nedeformoval: podiel obrazovky,
strop v px a sirka stlpca prepocitana pomerom ramu (700x1431 => vyska = sirka x 2,044).
`max-width` by sa tu nedal pouzit — pri vyske urcenej zvonka by sirku stlacil a pomer
strán by sa rozbil. */
.tmslide .mshot{display:block;position:relative;flex:0 0 auto;margin-top:4px;
height:min(62vh,620px,calc((100vw - 44px) * 2.044))}
.tmslide .mshot .fr{display:block;height:100%;width:auto;position:relative;z-index:3;
filter:drop-shadow(0 16px 30px rgba(0,0,0,.65))}
.tmslide .mshot .sc{position:absolute;z-index:1;left:6.14%;top:3.21%;width:87.71%;height:93.57%;
object-fit:cover;border-radius:13.7%/6.3%}
.tmhint{flex:0 0 auto;text-align:center;font-size:12.5px;color:var(--faint);
padding:10px 0 calc(10px + env(safe-area-inset-bottom));position:relative;z-index:2}
/* Pri dlhom popise text pod telefonom pokracuje — bez naznaku to vyzera ako orezany
riadok. Stmavenie nad napovedou povie, ze sa da doscrollovat. */
.tmodal::after{content:"";position:absolute;left:0;right:0;height:46px;pointer-events:none;z-index:1;
bottom:calc(35px + env(safe-area-inset-bottom));
background:linear-gradient(transparent,rgba(4,7,10,.94))}
/* V modalnom rezime uz polozka nic nerozbaluje — tym padom niet co skakat.
`!important` je tu nutne: `_picker_rules` pise `display:block` cez `:has(#tN:checked)`,
co ma vyssiu specificitu nez ktorykolvek rozumny selektor tu. */
@media (max-width:960px){
.tm-on .list .d{display:none!important}
.tm-on .list label{padding:13px 16px}
}
/* --- navody --- */
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:900px){.guides{grid-template-columns:1fr}}
.guide{border:1px solid var(--line);border-radius:16px;padding:19px 20px 16px;background:var(--glass)}
.guide h3{font-size:17px;margin-bottom:7px;letter-spacing:-.015em}
.guide>p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 12px}
.guide ol{margin:0;padding:0;list-style:none;counter-reset:g}
.guide li{counter-increment:g;position:relative;padding:5px 0 5px 30px;font-size:14px;line-height:1.48;
color:var(--text);border-top:1px solid rgba(255,255,255,.055)}
.guide li:first-child{border-top:0}
.guide li::before{content:counter(g);position:absolute;left:0;top:8px;width:21px;height:21px;
border-radius:50%;border:1px solid rgba(79,216,232,.4);color:var(--cyan);font-size:11px;font-weight:700;
display:grid;place-items:center}
.guide code{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:13px;
background:rgba(255,255,255,.07);border-radius:5px;padding:1px 5px}
/* ---------------------------------------------------------------- uplny supis
Klasicka porovnavacia tabulka: nazov vlavo, dva uzke stlpce FREE a PRO. Riadky su
tesne (nazov na jeden riadok), popisy sa daju zapnut prepinacom. Prepinac je cisto
CSS (radio v labeli + :has()) — input MUSI ostat v labeli, inak prehliadac odscrolluje
na skryty input a stranka pri kazdom kliku poskoci. */
/* Porovnavac je zabaleny do : zavrety je to jeden riadok, otvoreny cela tabulka.
Sticky hlavicka vnutri funguje dalej, lebo `.cmpbox` nema overflow (ten sticky rozbija). */
.cmpbox{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.022);margin-top:6px}
.cmpbox>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
padding:16px 44px 16px 18px;position:relative;font-size:16px;font-weight:600;color:var(--text)}
.cmpbox>summary::-webkit-details-marker{display:none}
.cmpbox>summary:hover{color:var(--ice)}
.cmpbox>summary .n{margin-left:auto;font-size:13.5px;font-weight:400;color:var(--faint)}
.cmpbox>summary::after{content:"";position:absolute;right:18px;top:22px;width:8px;height:8px;
border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);
transition:transform .18s ease}
.cmpbox[open]>summary{border-bottom:1px solid var(--gline)}
.cmpbox[open]>summary::after{transform:rotate(-135deg)}
.cmpbox .ctbl{border:0;border-radius:0;background:none}
.cmpbox .ctbl>.crow:first-child{border-radius:0}
.cmpbox .ctbl>.crow:last-child{border-radius:0 0 15px 15px}
@media (max-width:640px){
.cmpbox>summary{font-size:15px;padding:14px 38px 14px 15px;flex-wrap:wrap;gap:4px}
.cmpbox>summary .n{margin-left:0;width:100%}
.cmpbox>summary::after{top:20px;right:15px}
}
.invbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:26px 0 16px}
.invbar label{cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:7px 15px;
font-size:14px;color:var(--muted);background:var(--glass);transition:border-color .15s,background .15s,color .15s}
.invbar label:hover{border-color:var(--gline);color:var(--text)}
.invbar label:focus-within{outline:2px solid var(--cyan);outline-offset:2px}
.inv:has(#vCom:checked) .invbar label[for=vCom],
.inv:has(#vDet:checked) .invbar label[for=vDet]{
background:rgba(79,216,232,.12);border-color:rgba(79,216,232,.5);color:var(--ice)}
.invbar label b{font-weight:600;color:var(--faint);margin-left:7px;font-variant-numeric:tabular-nums}
.inv:has(#vCom:checked) .invbar label[for=vCom] b,
.inv:has(#vDet:checked) .invbar label[for=vDet] b{color:var(--ice)}
.inv:has(#vCom:checked) .tall{display:none}
.inv:has(#vDet:checked) .tsum{display:none}
/* ZIADNY overflow:hidden — na predkovi rozbija position:sticky (hlavicka sa odlepi
od vrchu karty a prekryje prvy riadok). Rohy sa zaoblia na prvom a poslednom riadku. */
.ctbl{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.022)}
.ctbl>.crow:first-child{border-radius:21px 21px 0 0}
.ctbl>.crow:last-child{border-radius:0 0 21px 21px}
/* minmax(0,1fr), NIE 1fr: `1fr` ma minimum min-content, takze dlhy popis v prvom
stlpci nevytlaci sam seba, ale ODTLACI dva pevne stlpce von z kontajnera a cela
stranka zacne pretekat vodorovne. Namerane na 320 px: vietnamcina +5 px, pricom
anglictina a nemcina boli od tej istej chyby vzdialene jeden znak. (24. 8.) */
.crow{display:grid;grid-template-columns:minmax(0,1fr) 104px 104px;align-items:center;
border-top:1px solid rgba(255,255,255,.055)}
.crow>*{padding:9px 14px}
.crow .c{text-align:center;padding-left:0;padding-right:0}
.chead{position:sticky;top:62px;z-index:21;border-top:0;
background:rgba(9,15,20,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--gline)}
.chead .c{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.chead .c.f{color:#7BE0A8}
.chead .c.p{color:var(--ice)}
.chead .lab{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cgrp{background:rgba(255,255,255,.035);border-top:1px solid var(--gline)}
.cgrp .lab{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.cgrp .lab em{font-style:normal;letter-spacing:0;text-transform:none;font-size:12px;font-weight:400;
color:var(--faint);margin-left:10px}
.crow .nm{font-size:14.6px;line-height:1.35;color:var(--text)}
.tall .crow .nm span{display:block;color:var(--faint);font-size:13px;line-height:1.5;margin-top:4px}
.tsum .crow>*{padding-top:11px;padding-bottom:11px}
.crow .nm i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
border-radius:999px;padding:1px 6px;margin-left:7px;vertical-align:1.5px;white-space:nowrap}
.crow .nm i.new{border:1px solid rgba(79,216,232,.5);color:var(--cyan)}
.crow .nm i.beta{border:1px solid rgba(255,180,60,.45);color:#FFC46B}
.cyes{width:19px;height:19px;color:#7BE0A8;display:inline-block;vertical-align:-4px}
.cyes.p{color:var(--ice)}
.cno{color:var(--faint);opacity:.45}
.crow.pro .nm{color:var(--ice)}
@media (max-width:700px){
.crow{grid-template-columns:minmax(0,1fr) 62px 62px}
.crow>*{padding:10px 13px}
.crow .nm{font-size:14.4px}
.chead .c,.chead .lab,.cgrp .lab{font-size:10.5px;letter-spacing:.1em}
.cgrp .lab em{display:block;margin:3px 0 0}
}
.invnote{margin-top:20px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;
background:var(--glass);color:var(--muted);font-size:14.5px;line-height:1.6;max-width:76ch}
.invnote b{color:var(--text)}
/* ---------------------------------------------------------------- co appka vie
Jeden supis bez delenia na Free a Pro (efko 21. 8.: „len proste v skratke napisat,
co vsetko aplikacia vie"). Skupiny idu do stlpcov cez `columns`, nie do mriezky:
maju rozne pocty poloziek a mriezka by nechala diery.
Na mobile su skupiny ROZKLIKAVACIE. Su to ``, takze bez JS ostanu
otvorene (presne doterajsie spravanie) a skript ich na uzkom displeji len pozatvara. */
.caps{columns:4;column-gap:32px;margin-top:24px}
@media (max-width:1180px){.caps{columns:3}}
@media (max-width:900px){.caps{columns:2}}
/* Na mobile ZIADNY multi-column. `columns:1` stale vytvara viacstlpcovy kontext a ked
skript pozatvara , niektore enginy vysku kontajnera neprepocitaju: pod zoznamom
ostane prazdne miesto po otvorenej podobe (efkov screenshot). `columns:auto` z toho robi
obycajny blok, ktory sa preleje normalne. */
@media (max-width:640px){.caps{columns:auto;column-gap:normal;margin-top:16px}}
.capg{break-inside:avoid;margin:0 0 20px}
.capg>summary{list-style:none;font-size:11.5px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--cyan);margin:0 0 8px;cursor:default}
.capg>summary::-webkit-details-marker{display:none}
.capg ul{list-style:none;margin:0;padding:0}
.capg li{font-size:14px;line-height:1.42;color:var(--muted);padding:2.5px 0 2.5px 13px;position:relative}
.capg li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:1px;background:var(--faint)}
.capg li i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
border:1px solid rgba(255,180,60,.45);color:#FFC46B;border-radius:999px;padding:1px 6px;margin-left:6px;
vertical-align:1.5px}
@media (max-width:640px){
.capg{margin:0;border-bottom:1px solid var(--line)}
.capg>summary{cursor:pointer;padding:14px 30px 14px 0;margin:0;position:relative;font-size:12px}
.capg>summary::after{content:"";position:absolute;right:6px;top:19px;width:8px;height:8px;
border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);
transition:transform .18s ease}
.capg[open]>summary::after{transform:rotate(-135deg)}
.capg ul{padding-bottom:10px}
.capg li{font-size:15px;padding:4px 0 4px 13px}
}
/* ---------------------------------------------------------------- vsetkych 74 jazykov */
.lgrp{margin-top:18px}
.lgrp h4{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text);
margin-bottom:12px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.lgrp h4 em{font-style:normal;letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:400;
color:var(--faint)}
.lgrp.b h4{color:var(--faint)}
.llist{columns:6;column-gap:22px;font-size:14px}
@media (max-width:1240px){.llist{columns:5}}
@media (max-width:1080px){.llist{columns:4}}
@media (max-width:820px){.llist{columns:3}}
@media (max-width:560px){.llist{columns:2}}
.llist span{display:block;padding:2.5px 0;break-inside:avoid;color:var(--text)}
.lgrp.b .llist span{color:var(--muted)}
/* Hustotny prechod 21. 8. (efko: „nech to nepusobi, ze je tam prilis vela informacii").
Nic sa nemaze, vsetko sa stlaca: sekcie, karty, riadky aj FAQ. */
.faq summary{padding:15px 34px 15px 0;font-size:15.8px}
.faq summary::after{top:22px}
.faq .ans{padding:0 40px 16px 0;font-size:15px}
.plan{padding:26px 26px 22px}
.plans{gap:16px;margin-top:24px}
.quote{font-size:17px;line-height:1.6;padding-left:24px;max-width:78ch}
.ghub{border-top:1px solid var(--line)}
.ghub a{display:block;padding:17px 34px 17px 0;border-bottom:1px solid var(--line);position:relative;
color:var(--text)}
.ghub a:hover{color:var(--ice)}
.ghub b{display:block;font-size:17.5px;font-weight:650;letter-spacing:-.015em;margin-bottom:4px}
.ghub span{display:block;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:72ch}
.ghub a::after{content:"";position:absolute;right:8px;top:26px;width:8px;height:8px;
border-right:2px solid var(--faint);border-top:2px solid var(--faint);transform:rotate(45deg);
transition:transform .16s ease}
.ghub a:hover::after{transform:rotate(45deg) translate(3px,-3px);border-color:var(--cyan)}
.byline{margin:-14px 0 26px;font-size:13.5px;color:var(--faint)}
.byline a{color:var(--muted)}
.byline a:hover{color:var(--ice)}
.deeper{margin-top:22px;font-size:15px}
.crumb{display:flex;gap:7px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--faint)}
.crumb a{color:var(--faint)}
.crumb a:hover{color:var(--ice)}
.gbody{max-width:68ch}
.gbody h3{font-size:clamp(19px,2.2vw,23px);margin:34px 0 10px;letter-spacing:-.018em}
.gbody p{color:var(--muted);font-size:16.5px;line-height:1.68;margin:0 0 13px}
.gbody strong{color:var(--text);font-weight:600}
.gbody .qa{margin-top:12px}
.gsib{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0 0}
@media (max-width:700px){.gsib{grid-template-columns:1fr}}
.gsib a{display:block;border:1px solid var(--line);border-radius:14px;padding:15px 17px;
background:var(--glass);color:var(--text)}
.gsib a:hover{border-color:rgba(79,216,232,.42)}
.gsteps{margin:12px 0 0;padding:0;list-style:none;counter-reset:gs}
.gsteps li{counter-increment:gs;position:relative;padding:11px 0 11px 36px;
border-top:1px solid var(--line);color:var(--muted);font-size:16px;line-height:1.6}
.gsteps li:first-child{border-top:0}
.gsteps li::before{content:counter(gs);position:absolute;left:0;top:13px;width:23px;height:23px;
border-radius:50%;border:1px solid rgba(79,216,232,.4);color:var(--cyan);font-size:12px;
font-weight:700;display:grid;place-items:center}
.gchk{margin:12px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.gchk li{padding:13px 0;border-bottom:1px solid var(--line);color:var(--muted);
font-size:16px;line-height:1.62}
.gchk b{color:var(--text);font-weight:650}
.sibh{font-size:19px;margin:38px 0 0;letter-spacing:-.018em}
.gsib b{font-weight:600;font-size:15.5px;letter-spacing:-.012em}
/* Dotykove ciele: drobcek aj spatny odkaz mali na telefone 19 px. Palcom sa to trafi
len s nervami — rovnaka oprava ako 21. 8. pri prepinaci EN/SK a odkazoch v pate. */
@media (max-width:760px){
.crumb a{display:inline-block;padding:11px 2px}
.backlink{display:inline-block;padding:11px 2px}
}