/* Spoločné štýly verejných stránok (landing, /cennik).
   Pôvodne inline v templates/landing.html. */

/* Farby sú HSL trojice BEZ obalu hsl() zámerne: vďaka tomu sa dá
   k ľubovoľnému tokenu dopísať priehľadnosť — hsl(var(--ink) / .08).
   Inak by na každý odtieň s alfou musel vzniknúť vlastný token. */
:root {
    --ink:       0 0% 9%;     /* #171717 — text a tmavé plochy   */
    --ink-deep:  0 0% 20%;    /* #333333 — hover tmavého tlačidla */
    --ink-soft:  0 0% 40%;    /* #666666 — sekundárny text       */
    --mint:      0 0% 88%;    /* #e0e0e0 — jemné plochy          */
    --cream:     0 0% 96%;    /* #f5f5f5 — pozadie stránky       */
    --gold:     38 61% 57%;   /* #d4a34e — akcent z tlače karty  */
    --gold-deep: 38 60% 38%;  /* #9b7027 — tá istá zlatá na svetlom */
    --white:     0 0% 100%;

    --font-display: 'Archivo', 'Segoe UI', sans-serif;
    --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Vstavané CSS easingy sú príliš mäkké — tieto majú "ťah".
       ease-out pre vstupy (hneď sa pohne, pôsobí responzívne),
       ease-in-out pre pohyb po obrazovke. ease-in zámerne nikde. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    color: hsl(var(--ink));
    background: hsl(var(--cream));
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Celá stránka zväčšená o 10 % — ekvivalent zoom 110 % v prehliadači.
   zoom funguje v Chrome / Edge / Safari; Firefox ho ignoruje, ale
   font-size: 110 % na html posúva rem-based hodnoty rovnako. */
html {
    zoom: 1.05;
    font-size: 105%;
    /* Zoom násobí aj svh/vh — kto potrebuje presne výšku okna
       (pódium „Ako to funguje“), delí ňou. */
    --page-zoom: 1.05;
}

@supports not (zoom: 1) {
    html { --page-zoom: 1; }
}

/* Hlavička sa roluje spolu so stránkou, takže kotva nemusí počítať
   s jej výškou. Nula by ale nadpis prilepila na hranu — sekcie majú
   92 px paddingu, takže by to vyzeralo ako nedoskrolované. */
section[id] { scroll-margin-top: 1.5rem; }

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Jasná zlatá z tlače karty má na krémovom pozadí kontrast len
   ~1,95:1 — vyzerala by vyblednuto a nedala by sa prečítať. Na
   svetlom preto ide tá istá zlatá stmavená (--gold-deep, ~4:1),
   jasná ostáva tam, kam patrí: na čiernych plochách (~6,6:1). */
.gold { color: hsl(var(--gold-deep)); }
.showcase .gold, .plan.featured .gold,
.quote-section .gold { color: hsl(var(--gold)); }

/* Popisok nad nadpisom: vlások + rozpálené uppercase písmo. */
.kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: hsl(var(--ink-soft));
}

.kicker::before {
    content: "";
    width: 32px;
    height: 1px;
    flex: none;
    background: hsl(var(--gold-deep) / .6);
}

.kicker-center { justify-content: center; }
/* Vycentrovaný kicker má čiaru z oboch strán, inak pôsobí krivo.
   letter-spacing pridá medzeru aj za posledné písmeno, preto ju
   ľavá čiara dorovná. */
.kicker-center::before { margin-right: .24em; }
.kicker-center::after {
    content: "";
    width: 32px;
    height: 1px;
    flex: none;
    background: hsl(var(--gold-deep) / .6);
}
/* Na mobile sa dlhší vycentrovaný kicker zalomí — kratšie čiarky. */
@media (max-width: 560px) {
    .kicker::before, .kicker-center::after { width: 18px; }
}
.kicker-dark { color: hsl(var(--white) / .5); }
.kicker-dark::before,
.kicker-dark::after { background: hsl(var(--gold) / .7); }

/* ------------------------------------------------------ promo lišta -- */
.promo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 15px 28px;
    background: hsl(var(--ink));
    color: hsl(var(--white));
    font-size: 16px;
    line-height: 1.35;
    text-align: center;
    transition: background .2s ease;
}

.promo-bar:hover { background: hsl(var(--ink-deep)); }
.promo-bar strong { font-weight: 600; }
.promo-sep { color: hsl(var(--white) / .35); }
.promo-detail { color: hsl(var(--white) / .72); }

.promo-arrow {
    color: hsl(var(--gold));
    font-size: 15px;
    flex: none;
    transition: transform .2s ease;
}

.promo-bar:hover .promo-arrow { transform: translateX(3px); }

/* Na úzkych displejoch ostane len hlavný sľub — detail by zalomil
   lištu do troch riadkov a zjedol pol obrazovky. */
@media (max-width: 700px) {
    .promo-bar { padding: 13px 20px; font-size: 14px; gap: 12px; }
    .promo-sep, .promo-detail { display: none; }
}

/* ------------------------------------------------------- navigácia -- */
/* Plávajúca navigácia: biela zaoblená lišta v šírke obsahu, nalepená
   pri scrollovaní. Hlavička je priehľadná a nechytá klik (pointer-events),
   lišta áno. Výška hlavičky (vrátane horného odstupu) ostáva v toku —
   podľa nej sa lepí scroll scéna „Ako to funguje“. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 12px 16px 0;
    pointer-events: none;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
    gap: 20px;
    max-width: 1132px;
    padding: 0 10px 0 26px;
    border: 1px solid hsl(var(--ink) / .06);
    border-radius: 999px;
    background: hsl(var(--white) / .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 6px 24px -14px hsl(var(--ink) / .22);
    pointer-events: auto;
    transition: box-shadow .25s ease, background .25s ease;
}

/* Po scrolle výraznejší tieň pre oddelenie od obsahu */
.site-header.scrolled .nav {
    background: hsl(var(--white) / .96);
    box-shadow: 0 12px 34px -14px hsl(var(--ink) / .3);
}

/* Vpravo: obrysové „Prihlásiť sa“ (cta.nav) + hlavné tlačidlo */
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border: 1.5px solid hsl(var(--ink) / .18);
    border-radius: 999px;
    color: hsl(var(--ink));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color .18s ease, transform 160ms var(--ease-out);
}
.nav-login svg { display: none; width: 18px; height: 18px; }
.nav-login:hover { border-color: hsl(var(--ink)); }
.nav-login:active { transform: scale(.97); }

.brand { display: flex; align-items: center; gap: 8px; }

/* Wordmark si robíme tu, nie cez .logo-tappo zo style.css — ten sa
   načítava až za týmto blokom a natlačil by sem Poppins. */
.brand-word {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: hsl(var(--ink));
}

.brand-dot { color: hsl(var(--gold-deep)); }

.nav-links {
    display: flex;
    gap: 32px;
    font-size: 16px;
    font-weight: 600;
}

.nav-links a {
    color: hsl(var(--ink) / .75);
    transition: color .2s ease;
}
.nav-links a:hover { color: hsl(var(--ink)); }

.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 23px;
    border-radius: 999px;
    background: hsl(var(--ink));
    color: hsl(var(--white));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nav-cta:hover { background: hsl(var(--gold)); color: hsl(var(--ink)); }

.nav-logo {
    height: 36px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* Odkazy + logo + obe tlačidlá sa zmestia až od ~950 px okna. */
@media (max-width: 960px) {
    .nav-links { display: none; }
}
/* Užšia obrazovka: obrysové tlačidlo len ako ikonka (text ostáva
   v aria-label) — s textom by sa lišta nezmestila (html má zoom 1.05,
   takže miesta je o 5 % menej, než má okno). */
@media (max-width: 640px) {
    .nav-login { padding: 9px; }
    .nav-login span { display: none; }
    .nav-login svg { display: block; }
}
@media (max-width: 560px) {
    .site-header { padding: 8px 10px 0; }
    .nav { min-width: 0; height: 3.5rem; padding: 0 6px 0 14px; gap: 8px; }
    .nav-logo { height: 28px; flex-shrink: 1; min-width: 0; }
    .nav-cta { padding: 10px 12px; font-size: 11px; letter-spacing: .05em; white-space: nowrap; }
}
@media (max-width: 360px) {
    .nav-cta { padding: 9px 10px; font-size: 10px; }
}

/* ------------------------------------------------------------ hero -- */
/* clip, nie hidden: dekoratívne ikony pri nadpise visia na mobile
   ~5 px za okrajom a stránka sa dala posúvať do boku. `clip`
   neprepína element na scroll kontajner, takže kotvy #sekcia
   ani plynulé rolovanie tým netrpia. */
.hero-section { position: relative; overflow-x: clip; }

/* Jemné zlaté podsvietenie za nadpisom — dekor, preto aria-hidden
   nepotrebuje, je to čisté pozadie. */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 60%;
    background: radial-gradient(60% 80% at 50% 0%, hsl(var(--gold) / .13), transparent 70%);
    pointer-events: none;
}

/* Dvojstĺpec: text má ľavý okraj, o ktorý sa opiera, vpravo je
   fotka produktu. Vycentrovaný nadpis so vsadeným obrázkom, čo tu
   stálo predtým, pôsobil neusadene. */
.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 56px;
    padding: 64px 0 88px;
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 44px 0 56px;
        text-align: center;
    }

    .hero .kicker, .hero-actions { justify-content: center; }
    /* Vycentrovaný kicker sa zalomí na viac riadkov — čiarka pred ním by
       visela vedľa bloku textu. */
    .hero .kicker::before { display: none; }
    /* Zoznam sa NEcentruje po riadkoch — fajky musia ostať pod sebou.
       Vycentruje sa celý blok, text v ňom ostane vľavo. Žiadne
       width:max-content — to by zoznam roztiahlo na šírku najdlhšieho
       riadku bez zalomenia a rozbilo celú stránku do šírky. */
    .hero-points {
        margin-inline: auto;
        text-align: left;
    }
}

.hero h1 {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    /* Strop drží „JEDNÝM ŤUKNUTÍM“ na jednom riadku v ľavom stĺpci;
       pri väčšom sa nadpis láme na štyri riadky a rozpadne sa. */
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.025em;
    text-transform: uppercase;
    text-wrap: balance;
    margin-top: 20px;
}

.hero-icons-float {
    position: absolute;
    top: -40px;
    right: -80px;
    width: 110px;
    pointer-events: none;
    animation: floatIcons 5s ease-in-out infinite;
}

@keyframes floatIcons {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(4deg); }
}

@media (max-width: 900px) {
    .hero-icons-float {
        right: -30px;
        top: -50px;
        width: 80px;
    }
}

/* Globálny reset nastavuje margin/padding, ale nie list-style —
   bez toho by tu ostali odrážky. Rovnaký vzor ako .showcase-list. */
.hero-points {
    list-style: none;
    max-width: 460px;
    margin-top: 26px;
    display: grid;
    gap: 12px;
    font-size: 16px;
    color: hsl(var(--ink-soft));
}

.hero-points li { display: flex; gap: 12px; align-items: flex-start; }
.hero-points .tick { color: hsl(var(--gold-deep)); font-weight: 700; flex: none; }
.hero-points strong { color: hsl(var(--ink)); font-weight: 600; }

.hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
    flex-wrap: wrap;
}

/* Druhá cesta pre toho, kto už vie, že chce kartu. Zámerne len
   text — hlavné tlačidlo (skúška Pro) nesmie mať konkurenciu. */
.hero-text-link {
    font-size: 14px;
    font-weight: 600;
    color: hsl(var(--ink));
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 8px 4px;
}

.hero-text-link:hover { color: hsl(var(--gold-deep)); }

.hero-footnote {
    margin-top: 10px;
    font-size: 12px;
    color: hsl(var(--ink-soft));
}

.hero-how {
    margin-top: 14px;
    font-size: 13.5px;
}

.hero-how a {
    color: hsl(var(--ink-soft));
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero-how a:hover { color: hsl(var(--ink)); }

.hero-how-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: arrowBounce 1.8s var(--ease-in-out) infinite;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-how-arrow { animation: none; }
}


.hero-visual {
    position: relative;
    width: 100%;
    max-width: 594px; /* +10 % (pôvodne 540px) */
    margin: 0 auto;
}

/* Na desktope je stĺpec (.9fr) užší než max-width, takže samotné
   zvýšenie max-width by nič nespravilo. Obrázok je preto o 10 %
   širší než stĺpec a justify-self:center ho vycentruje (presah
   rovnomerne na obe strany). Na mobile nie — tam by sa orezal. */
@media (min-width: 901px) {
    .hero-visual {
        width: 110%;
        margin: 0;
        justify-self: center;
    }
}

/* Obrázok je VÝREZ na priehľadnom pozadí (telefón), nie obdĺžniková
   fotka — rohy sú priehľadné a nepriehľadných je zhruba polovica
   plochy. Preto:
     - border-radius nemá čo zaobliť,
     - box-shadow by nakreslil sivý obdĺžnik okolo boxu, nie okolo
       telefónu; drop-shadow ide podľa alfa kanála a obkreslí tvar.
   Neorezáva sa: width:100% + height:auto ukáže celý. */
.hero-visual img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 45px hsl(var(--ink) / .35));
}

/* Odznak visí vpravo HORE. Popisky v obrázku („Odmeny“ na 43 %,
   „Hodnotenie“ na 73 % výšky) sú nižšie, takže ich neprekryje.
   bottom/left sa musia explicitne vrátiť na auto — box s nastaveným
   top AJ bottom by sa roztiahol na výšku medzi nimi. */
.hero-badge {
    position: absolute;
    top: calc(5% - 30px);
    right: -14px;
    bottom: auto;
    left: auto;
    background: hsl(var(--white));
    border: 1px solid hsl(var(--ink) / .08);
    border-radius: 18px;
    padding: 12px 16px;
    box-shadow: 0 12px 28px -16px hsl(var(--ink) / .45);
    animation: floatBadge 4s ease-in-out infinite;
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.hero-badge strong {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: hsl(var(--gold-deep));
}

.hero-badge span { font-size: 11px; color: hsl(var(--ink-soft)); }

@media (max-width: 480px) {
    .hero-badge {
        top: -42px; right: -8px; bottom: auto; left: auto;
        padding: 9px 12px;
    }
    .hero-badge strong { font-size: 17px; }
}

/* Plávajúce kartičky okolo telefónu (ukážka prehľadu) a odznaky NFC/QR.
   Pozície v % boxu .hero-visual (obrázok je štvorec) — mimo popiskov
   zapečených v obrázku: „Vernostný program“/„Zbieranie bodov“ vľavo hore,
   „Odmeny“ (~41–52 %) a „Hodnotenie“ (~70–77 %) vpravo. */
.hero-floats { position: absolute; inset: 0; pointer-events: none; }
.hf-card, .hf-pill {
    position: absolute;
    animation:
        hfIn 700ms var(--ease-out) var(--d, 900ms) both,
        floatBadge var(--t, 4.4s) ease-in-out calc(var(--d, 900ms) + 700ms) infinite;
}
@keyframes hfIn {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.hf-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 176px;
    padding: 12px 14px 10px;
    border: 1px solid hsl(var(--ink) / .07);
    border-radius: 16px;
    background: hsl(var(--white));
    box-shadow: 0 18px 36px -18px hsl(var(--ink) / .4);
    text-align: left;
}
.hf-label { font-size: 11.5px; font-weight: 600; color: hsl(var(--ink-soft)); }
.hf-row { display: flex; align-items: baseline; gap: 8px; }
.hf-card strong {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: hsl(var(--ink));
    font-variant-numeric: tabular-nums;
}
.hf-delta { font-size: 11.5px; font-weight: 700; color: hsl(145 45% 34%); }
.hf-spark { display: block; width: 100%; height: 30px; margin-top: 4px; overflow: visible; }
.hf-spark polygon { fill: hsl(var(--gold) / .16); }
.hf-spark polyline {
    fill: none;
    stroke: hsl(var(--gold));
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.hf-bars { display: flex; gap: 5px; height: 50px; margin-top: 6px; }
.hf-bar { flex: 1; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 3px; }
.hf-bar i { align-self: end; width: 100%; min-height: 3px; border-radius: 4px; background: hsl(var(--mint)); }
.hf-bar.is-top i { background: hsl(var(--gold)); }
.hf-bar small { font-size: 9px; font-weight: 600; color: hsl(var(--ink-soft)); }

.hf-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 10px;
    border-radius: 14px;
    background: hsl(var(--ink));
    color: hsl(var(--white));
    box-shadow: 0 14px 28px -14px hsl(var(--ink) / .55);
    text-align: left;
    white-space: nowrap;
}
.hf-pill svg { width: 24px; height: 24px; flex: none; color: hsl(var(--gold)); }
.hf-pill span { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.15; }
.hf-pill small { font-size: 10px; font-weight: 500; color: hsl(var(--white) / .65); }

.hf-reviews { top: 0;      right: -5%; --d: 900ms;  --t: 4.6s; }
.hf-nfc     { top: 38%;    left: -7%;  --d: 1050ms; --t: 4.1s; }
.hf-qr      { top: 55%;    right: -7%; --d: 1200ms; --t: 4.9s; }
.hf-rewards { bottom: -5%; left: -9%;  --d: 1350ms; --t: 4.3s; }
.hf-week    { bottom: -4%; right: -3%; --d: 1500ms; --t: 5.2s; width: 190px; }

/* Užší desktop: obrázok (110 % stĺpca) siaha takmer k okraju okna —
   pravé kartičky nesmú vytŕčať von (hero ich orezáva). */
@media (min-width: 901px) and (max-width: 1300px) {
    .hf-reviews, .hf-qr, .hf-week { right: 1%; }
}
@media (max-width: 1100px) {
    .hf-card { width: 150px; padding: 10px 12px 8px; border-radius: 14px; }
    .hf-week { width: 164px; }
    .hf-card strong { font-size: 20px; }
    .hf-label, .hf-delta { font-size: 10.5px; }
    .hf-spark { height: 24px; }
    .hf-bars { height: 40px; }
    .hf-pill { padding: 7px 13px 7px 9px; }
    .hf-pill svg { width: 20px; height: 20px; }
    .hf-pill span { font-size: 12.5px; }
    .hf-reviews, .hf-qr { right: -2%; }
    .hf-nfc, .hf-rewards { left: -2%; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .hf-reviews, .hf-qr, .hf-week { right: 1%; }
    .hf-rewards { display: none; }
}
/* Úzky mobil: len tri prvky, aby nezakryli telefón. */
@media (max-width: 560px) {
    .hf-rewards, .hf-qr { display: none; }
    .hf-card { width: 128px; padding: 8px 10px 7px; }
    .hf-week { width: 140px; bottom: -6%; }
    .hf-card strong { font-size: 17px; }
    .hf-label, .hf-delta { font-size: 9.5px; }
    .hf-spark { height: 20px; }
    .hf-bars { height: 32px; gap: 4px; }
    .hf-bar small { font-size: 8px; }
    .hf-pill { gap: 7px; padding: 6px 11px 6px 8px; border-radius: 12px; }
    .hf-pill svg { width: 18px; height: 18px; }
    .hf-pill span { font-size: 11.5px; }
    .hf-pill small { font-size: 9px; }
    .hf-reviews { top: -4%; }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 17px 34px;
    border-radius: 999px;
    background: hsl(var(--ink));
    color: hsl(var(--white));
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 14px 30px -14px hsl(var(--ink) / .6);
}

.btn-primary:hover { background: hsl(var(--ink-deep)); }

/* Šípka ostáva zlatá aj na tmavom tlačidle — jediný farebný bod. */
.btn-arrow { color: hsl(var(--gold)); font-size: 16px; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 8px 8px 8px 28px;
    border-radius: 999px;
    border: 1px solid hsl(var(--ink) / .15);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.btn-ghost:hover { border-color: hsl(var(--gold-deep)); color: hsl(var(--ink)); }

.arrow-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid hsl(var(--ink) / .15);
    display: grid;
    place-items: center;
    font-size: 15px;
    flex: none;
}

.btn-ghost:hover .arrow-circle {
    background: hsl(var(--ink));
    color: hsl(var(--white));
    border-color: hsl(var(--ink));
}

/* --------------------------------------------------------- sekcie -- */
section { padding: 92px 0; }

.section-head { text-align: center; margin-bottom: 52px; }

.section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-transform: uppercase;
    text-wrap: balance;
    margin-top: 18px;
}

.section-head p {
    color: hsl(var(--ink-soft));
    font-size: 15px;
    margin: 16px auto 0;
    max-width: 520px;
}

/* Variant s nadpisom vľavo a poznámkou vpravo — dáva sekcii ľavý
   okraj, o ktorý sa opiera, rovnako ako hero. */
.section-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    text-align: left;
}

.section-head-split h2 { max-width: 560px; margin-top: 16px; }

.section-head-split .section-note {
    max-width: 300px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: hsl(var(--ink-soft));
}