/* Tmavý vzhľad verejného webu — PREPIS TOKENOV, nie nový štýl.
 *
 * Načítava sa ZA theme.css a mení len premenné a zopár pravidiel, ktoré mali
 * farbu natvrdo. Všetko ostatné (typografia, rozostupy, pohyb) ostáva z
 * theme.css, takže web a appka hovoria ďalej jednou značkou.
 *
 * Zásady: čierna je tónovaná (ink #0b0b0c, nie #000); limetka je JEDINÁ farba
 * a na tmavej je čitateľná priamo (acc-txt = acc, tmavozelený variant pre
 * bielu odpadá); panely sú o jeden krok svetlejšie než pozadie, nie sivé
 * karty v kartách. Žiadny sivý text na farebnom podklade.
 */
:root, .th, .th-vars{
  --bg:      #0b0b0c;
  --bg-2:    #101114;      /* striedavé sekcie — o krok vyššie, s nádychom modrej */
  --panel:   #15171b;
  --panel-2: #1b1d22;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.18);
  --ink:     #0b0b0c;
  --acc-txt: #c8f31d;      /* na tmavej svieti limetka priamo (kontrast ~15:1) */
  --acc-dim: rgba(200,243,29,.14);
  --txt:     #f3f4f6;
  --txt-2:   #c7cacf;
  --mut:     #8f949b;
}
/* „ink" sekcie boli tmavé na bielom webe — teraz sú panelové, aby ostal rytmus */
.sect-ink{background:var(--panel);color:var(--txt)}
.sect-ink .lead,.sect-ink .muted{color:var(--txt-2)}
.hdr{background:rgba(11,11,12,.82);border-bottom:1px solid var(--line)}
.btn-2{background:transparent;color:var(--txt);border-color:var(--line-2)}
.btn-2:hover{border-color:var(--acc);color:var(--acc)}
.btn-3{background:var(--acc);color:var(--ink)}
.logo-m{background:var(--acc);color:var(--ink)}
.stat b,.stat-g .stat b,.hero .stat b{color:var(--txt)}
.ftr{background:var(--bg-2)}
.ftr a:hover{color:var(--acc)}
.pill.ghost{color:var(--txt-2)}
.faq[open] summary{background:var(--acc-dim)}
/* kreslené prvky, ktoré na bielej mali tmavú kresbu */
.lines i{background:var(--line)}
.wmark{opacity:.08}
/* obrázky a video nech nesvietia na tmavej ako lampy */
.gal figure img,.hero.shot img{filter:saturate(.95)}

/* ── Sekcia „Pozri si appku" — screenshoty v telefónoch ─────────────────── */
.shots{display:flex;gap:clamp(14px,2.2vw,26px);overflow-x:auto;padding:8px 4px 22px;
       scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shot{flex:0 0 auto;width:clamp(210px,24vw,262px);scroll-snap-align:center;text-decoration:none;
      color:inherit;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.shot:hover{transform:translateY(-6px)}
.shot .ph{position:relative;border-radius:34px;padding:9px;background:linear-gradient(160deg,#2a2d33,#111215);
          box-shadow:0 30px 60px -28px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.08)}
.shot .ph img{display:block;width:100%;border-radius:26px;background:#000}
.shot .ph::after{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);
                 width:38%;height:22px;border-radius:0 0 16px 16px;background:#0b0b0c}
.shot figcaption{margin:14px 6px 0;font-size:14px;color:var(--txt-2);line-height:1.45}
.shot figcaption b{display:block;color:var(--txt);font-weight:700;margin-bottom:2px}
@media (max-width:640px){.shot{width:68vw}}

/* ── doladenie po prvom prechode (3. 10.) ─────────────────────────────────── */
/* hlavička dedila farbu textu do tlačidla — na limetke musí byť ink */
.th .hdr .btn-1,.th .btn-1{color:var(--ink)}
/* zvýraznenie v nadpise: na bielej bol čierny text cez limetkový pás; na tmavej
   biely text cez pás nejde — tenký limetkový podčiarknik je čistejší */
.th .mark-hl{color:var(--txt);box-shadow:none;background-image:linear-gradient(var(--acc),var(--acc));
             background-repeat:no-repeat;background-size:100% .16em;background-position:0 92%}
/* dekoratívny ekvalizér medzi sekciami: na tmavej bol olivový, nech je limetkový, ale tlmený */
.eqrule i{background:var(--acc);opacity:.45}
/* veľké čísla kariet 01–06 na tmavej úplne mizli */
.sect .num,.card .num,.sluz .num,[class*="cis"]{color:rgba(255,255,255,.07)}
/* FAQ: odpoveď bola nalepená na otázku — odstup zhora a tenká linka pod otvorenou otázkou */
.th .faq[open] summary{border-bottom:1px solid var(--line);margin-bottom:4px}
.th .faq p{padding:14px 22px 24px;line-height:1.75}
/* logo: značka mala limetku z theme.css a ja som dal limetku aj pod ňu — bola celá zelená.
   Teraz ako ikona appky: limetkový štvorec, tmavá značka, biely nápis. */
.th .logo-m{background:var(--acc)}
.th .logo-m svg{color:var(--ink)}
.th .logo{color:var(--txt)}
/* screenshoty majú Dynamic Island v sebe — dokreslený výrez bol navyše */
.shot .ph::after{display:none}
/* pás so screenshotmi: overflow-x:auto robí z prvku aj zvislý scroller a koliesko
   nad ním zastavilo stránku — zvisle sa nesmie hýbať, zdvih pri hoveri má miesto v paddingu */
.shots{overflow-y:hidden;padding-top:12px;overscroll-behavior-x:contain}
/* snap len pre dotyk: Chrome s myšou latchuje koliesko na x-snap kontajner a stránka
   sa pod ním nehýbe. Prst snapuje ďalej, myš má voľný posun. */
@media (hover:hover) and (pointer:fine){ .shots{scroll-snap-type:none} }

/* Kde to funguje: karty s fotkou (v12) */
.spec.pr{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:var(--r)}
.spec.pr img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#000;
             border-bottom:1px solid var(--line);transition:transform .6s ease}
.spec.pr:hover img{transform:scale(1.03)}
.spec.pr .sb{display:flex;align-items:flex-start;gap:13px;padding:16px 18px 18px}
.spec.pr .sb i{margin-top:3px}
@media (prefers-reduced-motion:reduce){.spec.pr img{transition:none}.spec.pr:hover img{transform:none}}