/* ================================================================
   ANIMÁCIE
   Landing page je "rare/first-time" povrch — návštevník ju vidí
   raz, takže si môže dovoliť viac než admin, ktorý sa otvára
   denne. Všetko beží len na transform/opacity (GPU, bez layoutu)
   a drží sa pod 300 ms okrem uvítacieho vstupu.
   ================================================================ */

@keyframes riseIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Vstup hero sekcie so staggerom ~70 ms medzi prvkami.
   CSS animácia (nie JS) — beží mimo hlavného vlákna, takže
   nezadrhne ani počas načítavania fontov. */
.nav           { animation: riseIn 520ms var(--ease-out) both; }
.hero .kicker  { animation: riseIn 560ms var(--ease-out) 40ms both; }
.hero h1       { animation: riseIn 620ms var(--ease-out) 90ms both; }
.hero-points   { animation: riseIn 620ms var(--ease-out) 160ms both; }
.hero-actions  { animation: riseIn 620ms var(--ease-out) 230ms both; }
.hero-how      { animation: riseIn 620ms var(--ease-out) 265ms both; }

/* Fotka dobehne zvlášť a o kúsok neskôr než text. Nikdy nie zo
   scale(0) — nič v skutočnom svete nevznikne z ničoho; 0.94 stačí. */
.hero-visual {
    animation: visualIn 1200ms var(--ease-out) 300ms both;
}

@keyframes visualIn {
    from { opacity: 0; transform: translateY(24px) scale(.92); }
    to   { opacity: 1; transform: none; }
}

/* Odhaľovanie pri scrollovaní. Skryté len keď beží JS (html.js),
   inak by pri vypnutom JavaScripte ostala stránka prázdna. */
html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}

html.js .reveal.in { opacity: 1; transform: none; }

/* Stagger v rámci skupiny (karty, plány) — krátke odstupy,
   dlhé by pôsobili pomaly. */
html.js .reveal-group > *:nth-child(1) { transition-delay: 0ms; }
html.js .reveal-group > *:nth-child(2) { transition-delay: 70ms; }
html.js .reveal-group > *:nth-child(3) { transition-delay: 140ms; }

/* Odozva na stlačenie — bez nej pôsobí tlačidlo hluché. */
.btn-primary,
.btn-ghost,
.nav-cta {
    transition: background .18s ease, color .18s ease,
                border-color .18s ease, transform 160ms var(--ease-out);
}

.btn-primary:active,
.btn-ghost:active,
.nav-cta:active { transform: scale(.97); }

.arrow-circle { transition: background .18s ease, color .18s ease,
                            border-color .18s ease, transform 220ms var(--ease-out); }

.card { transition: transform 260ms var(--ease-out), border-color .2s ease, box-shadow .2s ease; }

.plan { transition: transform 260ms var(--ease-out); }

.nav-links a, .footer-inner a, .plan-note a { transition: color .18s ease; }

/* Hover len na zariadeniach, čo ho naozaj majú — na dotyku sa
   inak spustí pri ťuknutí a ostane visieť. */
@media (hover: hover) and (pointer: fine) {
    .card:hover {
        transform: translateY(-3px);
        border-color: hsl(var(--gold-deep) / .55);
        box-shadow: 0 20px 40px -24px hsl(var(--gold-deep) / .3);
    }

    .plan:hover      { transform: translateY(-3px); }
    .btn-primary:hover .btn-arrow { transform: translateX(2px); }
    .btn-ghost:hover .arrow-circle { transform: translate(2px, -2px); }
}

.btn-arrow { transition: transform 220ms var(--ease-out); display: inline-block; }

/* Redukovaný pohyb: nie "žiadne animácie", ale žiadny POHYB.
   Priehľadnosť ostáva, lebo pomáha pochopiť, že niečo pribudlo. */
@media (prefers-reduced-motion: reduce) {
    .nav, .hero .kicker, .hero h1, .hero-points, .hero-actions,
    .hero-how, .hero-visual, .hf-card, .hf-pill {
        animation: fadeOnly 320ms ease both;
    }

    html.js .reveal { transform: none; transition: opacity 320ms ease; }

    .btn-primary:active, .btn-ghost:active,
    .nav-cta:active { transform: none; }

    .plan:hover { transform: none; }
    .btn-primary:hover .btn-arrow,
    .btn-ghost:hover .arrow-circle { transform: none; }

    .nfc-dot::after { animation: none; }
}

@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }

/* =================================================================== */
/* Cenník: prepínač intervalu, počet podnikov, Custom (_pricing_plans) */
/* =================================================================== */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pp { max-width: 1100px; margin: 0 auto; }

/* Ovládanie: Mesačne | Ročne. */
.pp-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 32px;
}

.pp-toggle {
    position: relative;
    display: inline-flex;
    padding: 5px;
    border-radius: 999px;
    background: hsl(var(--ink) / .06);
}

.pp-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: hsl(var(--ink-soft));
    font: 600 14px var(--font-body);
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease,
                transform 160ms var(--ease-out);
}
.pp-toggle-btn:hover { color: hsl(var(--ink)); }
.pp-toggle-btn:active { transform: scale(.97); }
.pp-toggle-btn[aria-pressed="true"] {
    background: hsl(var(--white));
    color: hsl(var(--ink));
    box-shadow: 0 1px 5px hsl(var(--ink) / .14);
}
.pp-toggle-btn:focus-visible { outline: 2px solid hsl(var(--gold-deep)); outline-offset: 2px; }

/* Biela pilulka pod aktívnym tlačidlom — pricing.js jej nastaví polohu
   a šírku, prechod ju presunie k druhej možnosti. Kým JS nebeží (bez
   .has-thumb), aktívne tlačidlo má pozadie samo. */
.pp-toggle-thumb {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: hsl(var(--white));
    box-shadow: 0 1px 5px hsl(var(--ink) / .14), 0 6px 14px -8px hsl(var(--ink) / .3);
    opacity: 0;
    transition: transform 380ms var(--ease-in-out), width 380ms var(--ease-in-out);
}
.pp-toggle.has-thumb .pp-toggle-thumb { opacity: 1; }
.pp-toggle.has-thumb .pp-toggle-btn[aria-pressed="true"] { background: transparent; box-shadow: none; }
.pp-toggle.no-anim .pp-toggle-thumb { transition: none; }

.pp-save-badge { font-size: 12px; font-weight: 700; color: hsl(var(--gold-deep)); display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    .pp-toggle-thumb { transition: none; }
    .pp-toggle-btn:active { transform: none; }
}

/* Mobil: prepínač na celú šírku, odznak „2 mesiace zadarmo“ ako druhý
   riadok pod „Ročne“ — vedľa by sa nezmestil a lámal by sa po slovách. */
@media (max-width: 640px) {
    .pp-toggle { width: 100%; }
    .pp-toggle .pp-toggle-btn { flex: 1; flex-direction: column; gap: 1px; padding: 9px 12px; line-height: 1.2; }
    .pp-save-badge { font-size: 11px; white-space: nowrap; }
}

.pricing.pp-grid { max-width: 1100px; }
/* Suma sa nezalomí, „/ mesiac za prevádzku“ áno — inak by na mobile
   roztiahla kartu cez okraj. */
.pp-plan .plan-price { font-size: 44px; }
.pp-plan .plan-price [data-f="price"] { white-space: nowrap; }
.pp-plan .plan-price .price-period { display: block; margin-top: 8px; line-height: 1.4; }
.pp-billed, .pp-save { font-size: 13px; margin-top: 8px; color: hsl(var(--ink-soft)); }
.pp-save { margin-top: 2px; font-weight: 600; color: hsl(var(--gold-deep)); min-height: 1.5em; }
.plan.featured .pp-billed { color: hsl(var(--white) / .6); }
.plan.featured .pp-save { color: hsl(var(--gold)); }
.pp-gift {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: hsl(var(--gold) / .16);
    color: hsl(var(--ink));
}
.plan.featured .pp-gift { background: hsl(var(--gold) / .22); color: hsl(var(--white)); }
.pp-custom-price { font-size: 40px; }

.pp-foot {
    max-width: 680px;
    margin: 22px auto 0;
    text-align: center;
    font-size: 13px;
    color: hsl(var(--ink-soft));
}
.pp-compare-link {
    display: inline-block;
    margin-left: 6px;
    font-weight: 600;
    color: hsl(var(--ink));
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tablet: tri karty vedľa seba by boli príliš úzke — Pro a Business
   vedľa seba, Custom pod nimi na celú šírku. */
@media (min-width: 761px) and (max-width: 1000px) {
    .pricing.pp-grid { grid-template-columns: 1fr 1fr; }
    .pp-grid .pp-custom { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .pp-plan .plan-price { font-size: 40px; }
}

/* =================================================================== */
/* /cennik                                                              */
/* =================================================================== */
.pricing-hero { padding: 64px 0 8px; }
.pricing-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 6vw, 58px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.03em;
    text-transform: uppercase;
    text-wrap: balance;
    margin-top: 18px;
}
.pricing-hero .section-head { margin-bottom: 0; }
.pricing-hero .section-head p { max-width: 560px; font-size: 16px; }
.pricing-plans-section { padding-top: 40px; }

/* Hardvér: text a tlačidlo vľavo, obrázok kartičky s telefónom vpravo.
   Obrázok je výrez s priehľadným pozadím — preto drop-shadow (kopíruje
   tvar), žiadny border-radius, a môže presahovať horný okraj pruhu. */
.pp-card-banner {
    max-width: 1100px;
    margin: 56px auto 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 26px 28px;
    border-radius: 24px;
    background: hsl(var(--white));
    border: 1px dashed hsl(var(--ink) / .2);
}
.pp-card-banner h3 { margin: 6px 0; font-size: 20px; font-family: var(--font-display); }
.pp-card-banner p { color: hsl(var(--ink-soft)); font-size: 14px; max-width: 62ch; }
.pp-card-banner .btn-secondary { margin-top: 18px; }
.pp-card-img {
    display: block;
    width: 290px;
    height: auto;
    margin: -80px 0 -38px;
    filter: drop-shadow(0 18px 22px hsl(var(--ink) / .16));
}

@media (max-width: 640px) {
    .pp-card-banner { grid-template-columns: 1fr; margin-top: 28px; }
    .pp-card-img { width: min(270px, 90%); margin: 4px auto -14px; }
}

/* Porovnanie plánov */
.cmp-section { padding-top: 40px; }
.cmp-wrap {
    max-width: 1100px;
    margin: 0 auto;
    overflow-x: auto;
    border-radius: 24px;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--ink) / .08);
}
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.cmp th, .cmp td { padding: 14px 18px; text-align: center; border-bottom: 1px solid hsl(var(--ink) / .07); vertical-align: middle; }
.cmp th[scope="row"], .cmp .cmp-feature-head { text-align: left; font-weight: 500; width: 36%; }
.cmp thead th { background: hsl(var(--white)); padding-top: 22px; padding-bottom: 18px; }
.cmp-feature-head { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--ink-soft)); }
.cmp-plan { display: block; font: 800 12px var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
.cmp-price { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: hsl(var(--ink-soft)); }
.cmp .is-featured { background: hsl(var(--ink) / .035); }
.cmp-cat th {
    text-align: left;
    padding-top: 26px;
    font: 800 13px var(--font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: hsl(var(--cream) / .6);
}
.cmp-note { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: hsl(var(--ink-soft)); }
.cmp-yes { font-weight: 800; font-size: 16px; color: hsl(var(--ink)); }
.cmp-no { color: hsl(var(--ink) / .3); }
.cmp-val { font-size: 13px; font-weight: 600; }
.cmp-tabs { display: none; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 auto 16px; }

/* Úzka obrazovka s JS: jeden plán naraz (prepína .cmp-tabs). Bez JS
   ostane celá tabuľka s vodorovným posúvaním. */
@media (max-width: 760px) {
    .cmp-tabs:not([hidden]) { display: flex; }
    .cmp.cmp-js { min-width: 0; }
    .cmp.cmp-js th[data-col], .cmp.cmp-js td[data-col] { display: none; }
    .cmp.cmp-js[data-show="none"] [data-col="none"],
    .cmp.cmp-js[data-show="pro"] [data-col="pro"],
    .cmp.cmp-js[data-show="business"] [data-col="business"],
    .cmp.cmp-js[data-show="custom"] [data-col="custom"] { display: table-cell; }
    .cmp.cmp-js th[scope="row"] { width: 60%; }
    .cmp th, .cmp td { padding: 12px 14px; }
    .cmp-wrap { border-radius: 18px; }
}

/* ----------------------------------------------- zrno čiernych plôch -- */
/* Jemný noise (SVG feTurbulence ako data URI, biele zrnká s nízkou
   alfou) na čiernych pásoch a bublinách. Blok je na konci súboru, aby
   background-image prebil skratky background v pôvodných pravidlách.
   Vlny s čiernou SVG cestou dostanú zrno cez ::after orezané maskou
   v tvare tej istej vlny — inak by na prechode sekcia ↔ vlna bol šev. */
:root {
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.showcase, .anat, .an, .wave-to-light { background-image: var(--noise); }

/* Svetlé (krémové) plochy: to isté zrno, ale tmavé a slabšie, aby
   nerušilo text. Telo stránky ho dá všetkým krémovým sekciám; plochy
   s vlastným krémovým pozadím ho dostanú zvlášť a krémová cesta vlny
   „do svetlej“ cez ::after s maskou v jej tvare — bez švu. */
:root {
    --noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body, .scrolly { background-image: var(--noise-light); }
.wave-to-light::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise-light);
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C280,85 620,10 960,60 C1200,88 1360,40 1440,20 L1440,80 L0,80 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C280,85 620,10 960,60 C1200,88 1360,40 1440,20 L1440,80 L0,80 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.wave-divider { position: relative; }
.wave-to-dark::after,
.scrolly-wave::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise);
    pointer-events: none;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
/* hero → karta zblízka a spodok scroll scény: čierne dole */
.wave-to-dark::after,
.scrolly-wave-bottom::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C240,80 480,80 720,40 C960,0 1200,0 1440,80 L1440,80 L0,80 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C240,80 480,80 720,40 C960,0 1200,0 1440,80 L1440,80 L0,80 Z'/%3E%3C/svg%3E");
}
/* vrch scroll scény: čierne hore */
.scrolly-wave:not(.scrolly-wave-bottom)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,20 C1360,40 1200,88 960,60 C620,10 280,85 0,40 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,20 C1360,40 1200,88 960,60 C620,10 280,85 0,40 Z'/%3E%3C/svg%3E");
}