/* ================================================================
   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 sa vynára po slovách ako každý nadpis (nadpisy po slovách nižšie). */
.hero-lead     { animation: riseIn 620ms var(--ease-out) 160ms both; }
.hero-search,
.hero-cta      { animation: riseIn 620ms var(--ease-out) 230ms both; }
.hero-alt,
.hero-trust    { animation: riseIn 620ms var(--ease-out) 290ms 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; }

/* Nadpisy po slovách (js/site/scroll.js): každý h1 / h2 verejných
   stránok je rozdelený na slová (.wr-w, poradie --i); pri príchode do
   okna dostane jeho rodič (.wr-group) .is-in a slová sa postupne vynoria
   z rozmazania. Kicker nad nadpisom a text / tlačidlo pod ním (.wr-sub,
   oneskorenie --d) nabehnú s nimi. animation, nie transition — tá by
   prebila vlastné prechody tlačidiel; fill-mode backwards drží začiatok
   počas oneskorenia a po dobehnutí platia bežné štýly (aj :active). */
.wr-w { display: inline-block; }

html.js .wr-group:not(.is-in) .wr-w,
html.js .wr-group:not(.is-in) .wr-sub { opacity: 0; }

/* 45 ms medzi slovami = STAGGER v scroll.js (oneskorenie textu pod nadpisom). */
html.js .wr-group.is-in .wr-w {
    animation: wrWord 480ms var(--ease-out) backwards;
    animation-delay: calc(var(--wr-o, 0ms) + var(--i, 0) * 45ms);
}

html.js .wr-group.is-in .wr-sub { animation: wrUp 460ms var(--ease-out) var(--d, 0ms) backwards; }

/* Blok s .reveal, v ktorom už animujú slová — bez druhého vynárania. */
html.js .reveal.wr-host { opacity: 1; transform: none; transition: none; }

@keyframes wrWord { from { opacity: 0; transform: translateY(.3em); filter: blur(5px); } }
@keyframes wrUp   { from { opacity: 0; transform: translateY(10px); } }

/* 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); }

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

.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) / .55);
        box-shadow: 0 20px 40px -24px hsl(var(--gold) / .3);
    }

    .btn-primary:hover .btn-arrow,
    .hero-search-btn:hover .btn-arrow { transform: translateX(2px); }
    .btn-ghost:hover .btn-arrow { transform: translateX(2px); }
}

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

/* 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-lead, .hero-search, .hero-cta,
    .hero-alt, .hero-trust, .hero-visual, .hf-card, .hf-pill {
        animation: fadeOnly 320ms ease both;
    }

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

    /* Nadpisy po slovách: len prelínanie, bez posunu a rozmazania. */
    html.js .wr-group.is-in .wr-w,
    html.js .wr-group.is-in .wr-sub { animation-name: fadeOnly; animation-duration: 400ms; }

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

    .btn-primary:hover .btn-arrow,
    .btn-ghost:hover .btn-arrow,
    .hero-search-btn:hover .btn-arrow { transform: none; }

    /* Návrhy v hero: len priehľadnosť, bez posunu. */
    .hero-results { transition: opacity 180ms ease; }

    .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)); 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; }

/* „2 mes. zadarmo“: zlatá pilulka s tmavým textom. Pri zvolenom
   „Mesačne“ jemnejšia — láka prepnúť, ale nekričí. */
.pp-save-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: hsl(var(--gold));
    color: hsl(var(--ink));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 2px 8px -2px hsl(var(--gold) / .6);
    transition: opacity .18s ease, box-shadow .18s ease;
}
.pp-toggle-btn[aria-pressed="false"] .pp-save-badge { opacity: .7; box-shadow: none; }

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

/* Mobil: prepínač na celú šírku, odznak „2 mes. 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: 10.5px; padding: 2px 8px; }
}

.pricing.pp-grid { max-width: 1100px; }

/* Celá karta je odkaz: tlačidlo ostáva jediným <a> a ::after ho roztiahne
   na kartu, takže href z pricing.js (Mesačne/Ročne) platí aj pre ňu.
   Odkaz nesmie dostať transform: pri stlačení by sa ::after zmenšil na
   veľkosť tlačidla a klik mimo neho by sa stratil. */
.pp-plan { position: relative; }
.pp-plan .pp-cta::after { content: ""; position: absolute; inset: -1px; border-radius: 24px; }
.pp-plan .pp-cta:active { transform: none; }

/* Pohyb cez translate a scale: .reveal drží transform a má prechod 560 ms
   s oneskorením, hover by ich zdedil. Oneskorenie platí len pre vstup. */
.pp-plan {
    transition: translate 200ms var(--ease-out), scale 160ms var(--ease-out);
}
html.js .pp-plan.reveal {
    transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out),
                translate 200ms var(--ease-out), scale 160ms var(--ease-out);
}
html.js .reveal-group > .pp-plan:nth-child(2) { transition-delay: 70ms, 70ms, 0ms, 0ms; }
html.js .reveal-group > .pp-plan:nth-child(3) { transition-delay: 140ms, 140ms, 0ms, 0ms; }

@media (prefers-reduced-motion: reduce) {
    html.js .pp-plan.reveal { transition: opacity 320ms ease; }
}

/* Na hover karta len poskočí: tlačidlo je cez ::after roztiahnuté na celú
   kartu a jeho bežný hover by ho vyplnil pri prejdení kdekoľvek po nej.
   Bez pohybu (reduced motion) ostáva výplň tlačidla ako jediná odozva. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .pp-plan:hover { translate: 0 -4px; }
    .pp-plan .btn-secondary.pp-cta:hover {
        background: transparent;
        color: hsl(var(--ink));
        border-color: hsl(var(--ink) / .2);
    }
    .pp-plan.featured .btn-primary.pp-cta:hover { background: hsl(var(--white)); }
}
@media (prefers-reduced-motion: no-preference) {
    .pp-plan:active { scale: .99; }
}
/* Veľká suma na samostatnom riadku, „/mesiac“ či „/rok“ pod ňou.
   Platí aj pre „Na mieru“ v Custom (rovnaký selektor prebije
   .pp-custom-price), aby boli všetky tri karty rovnako veľké. */
.pp-plan .plan-price { font-size: 53px; white-space: nowrap; }
.pp-plan .plan-price .price-period { display: block; margin-top: 6px; font-size: 16px; line-height: 1.3; }
/* Archivo má v projekte len os hrúbky (font-stretch nefunguje), sumy sa
   preto zúžia o 3 %. Samostatná vlastnosť scale nekoliduje s animáciou
   v pricing.js, ktorá používa transform. */
/* Bez kerningu: stĺpce valca ho nemajú, suma sa tak pri návrate na čistý
   text nepohne. */
.pp-plan [data-f="price"] { display: inline-block; font-kerning: none; }
.pp-plan [data-f="price"], .pp-custom-price { scale: .97 1; transform-origin: left center; }

/* Valec s číslicami pri prepnutí Mesačne/Ročne (rollPrice v pricing.js).
   Neviditeľná .pp-roll-size dáva stĺpcu šírku a účiaru ako bežný text.
   Okno je o .15em vyššie hore aj dole, maska teda stmieva číslice až
   mimo ich tvaru a v cieľovej polohe nič neoreže. */
.pp-roll { white-space: pre; }
.pp-roll-col { display: inline-block; position: relative; }
.pp-roll-size { visibility: hidden; }
.pp-roll-win {
    position: absolute;
    top: -.15em;
    bottom: -.15em;
    left: -.1em;
    right: -.1em;
    overflow: hidden;
    text-align: center;
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.pp-roll-strip { display: block; will-change: transform, filter; }
.pp-roll-strip > span { display: block; height: 1.3em; line-height: 1.3em; }

.pp-billed, .pp-save { font-size: 13px; margin-top: 8px; color: hsl(var(--ink-soft)); }
.pp-billed[hidden] { display: none; }
.pp-save { font-size: 14px; font-weight: 600; color: hsl(var(--green)); min-height: 1.5em; }
.pp-billed:not([hidden]) + .pp-save { margin-top: 2px; }
.plan.featured .pp-billed { color: hsl(var(--white) / .6); }
.plan.featured .pp-save { color: hsl(var(--green-lt)); }
.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: 48px; }
}

/* =================================================================== */
/* /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-hero .section-head .pricing-lead { max-width: 720px; } /* každá veta na jeden riadok */
.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; text-align: center; }
.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; }
}

/* Doživotná licencia — široký box pod plánmi (_pricing_plans.html) */
.pp-lifetime {
    max-width: 1100px;
    margin: 32px auto 0;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    padding: 28px;
    border-radius: 24px;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--ink) / .12);
}
.pp-lifetime h3 { margin: 6px 0 4px; font-size: 22px; font-family: var(--font-display); }
.pp-lifetime-lead { font-weight: 600; margin-bottom: 8px; }
.pp-lifetime p { font-size: 14px; color: hsl(var(--ink-soft)); }
.pp-lifetime .pp-lifetime-lead { color: hsl(var(--ink)); font-size: 15px; }
.pp-lifetime .btn-secondary { display: inline-block; margin-top: 18px; text-align: center; }
.pp-lifetime ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.pp-lifetime li { display: flex; gap: 10px; align-items: flex-start; }
.pp-lifetime li.is-off { color: hsl(var(--ink-soft)); }
.pp-lifetime .plan-note { margin-top: 16px; }
.pp-lifetime .pp-lifetime-hint { margin-top: 10px; font-size: 12.5px; }

@media (max-width: 760px) {
    .pp-lifetime { grid-template-columns: 1fr; padding: 22px 20px; gap: 18px; }
    .pp-lifetime .btn-secondary { display: block; }
}

/* 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="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 -- */
/* Noise (SVG feTurbulence ako data URI, biele zrnká) na čiernych
   pásoch a bublinách. Záporný posun alfy vo feColorMatrix zvyšuje kontrast
   zŕn bez toho, aby plocha zosivela. 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 .22 -.05'/%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 .18 -.05'/%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");
}

/* ------------------------------------------- šev na prechodoch vĺn -- */
/* html má zoom 1,05, hrany sekcií padajú na zlomky pixelov a okraj SVG vlny
   sa nemusí kryť so susednou sekciou — v škáre presvitala krémová ako čiara.
   Vlna preto prekryje suseda o 1 px a pod okrajom má plný pás v cieľovej
   farbe: pozadie boxu sa na rozdiel od SVG cesty zarovná na celé pixely.
   Pás leží celý v ploche tej istej farby, tvar vlny sa nemení. */
.wave-divider { margin-bottom: -1px; }
.wave-to-light { margin-top: -1px; }
.wave-to-dark,
.scrolly-wave-bottom {
    /* 99 % šírky: vpravo vlna klesá až k spodku, celý pás by z hrotu spravil schodík. */
    background: linear-gradient(to top, hsl(var(--ink)) 3px, transparent 3px) 0 0 / 99% 100% no-repeat;
}
/* Do svetlej: čierne pozadie končí 3 px nad spodkom, inak by v zlomkovom
   riadku presvitalo cez krémovú. Pod ním je krémové telo stránky. */
.wave-to-light {
    background-color: transparent;
    background-image: var(--noise), linear-gradient(to top, transparent 3px, hsl(var(--ink)) 3px);
}
.scrolly-wave:not(.scrolly-wave-bottom) {
    top: -1px;
    background-image: linear-gradient(to bottom, hsl(var(--ink)) 3px, transparent 3px);
}