/* 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:     39.4 60.9% 56.9%; /* #D4A64E — jediná zlatá webu */
    --white:     0 0% 100%;
    --green:   140 60% 30%;   /* #1f7a3d — úspora v cenníku      */
    --green-lt: 140 50% 62%;  /* #6fd08f — tá istá na tmavom      */

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

    /* Rozmery veľkých tlačidiel na jednom mieste (plné, obrysové, inverzné). */
    --btn-fs: 15px;
    --btn-py: 14px;
    --btn-px: 26px;
}

* {
    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;
}

/* Zlatá je zámerne rovnaká na svetlom aj tmavom pozadí. */
.gold { color: hsl(var(--gold)); }

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

/* letter-spacing pridá medzeru aj za posledné písmeno, preto ju
   zľava dorovnáme, aby text ostal opticky v strede. */
.kicker-center { justify-content: center; padding-left: .24em; }
.kicker-dark { color: hsl(var(--white) / .5); }

/* ------------------------------------------------------ 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 { 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 {
    position: relative;   /* kotva pre panel mobilného menu */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(4rem - 10px);
    gap: 20px;
    max-width: 1132px;
    padding: 0 10px 0 26px;
    border: 1px solid hsl(var(--ink) / .06);
    border-radius: 999px;
    background: hsl(var(--white) / .55);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    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) / .85);
    box-shadow: 0 12px 34px -14px hsl(var(--ink) / .3);
}

/* Cez priehľadnú lištu presvitajú aj čierne pásy — plná farba drží kontrast. */
.site-header.scrolled .nav-links a { color: hsl(var(--ink)); }

/* 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: 9px 18px;
    border: 1.5px solid hsl(var(--ink) / .18);
    border-radius: 999px;
    color: hsl(var(--ink));
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color .18s ease, transform 160ms var(--ease-out);
}
.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)); }

.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: 10px 18px;
    border-radius: 999px;
    background: hsl(var(--ink));
    color: hsl(var(--white));
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

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

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

/* ---------------------------------------------------- mobilné menu -- */
/* Pod 960 px nahrádza .nav-links: okrúhle tlačidlo ☰ vpravo a pod
   lištou panel v jej šírke. Panel má plnú bielu, nie sklo — vnorený
   backdrop-filter v .nav by rozmazával len samotnú lištu, takže pod
   panelom by text presvital ostrý. */
.nav-menu { display: none; }

.nav-menu-btn {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    border: 1.5px solid hsl(var(--ink) / .18);
    border-radius: 999px;
    color: hsl(var(--ink));
    list-style: none;   /* bez trojuholníka <summary> */
    cursor: pointer;
    transition: border-color .18s ease, transform 160ms var(--ease-out);
}
.nav-menu-btn::-webkit-details-marker { display: none; }
.nav-menu-btn:hover,
.nav-menu[open] .nav-menu-btn { border-color: hsl(var(--ink)); }
.nav-menu-btn:active { transform: scale(.95); }
.nav-menu-btn:focus-visible { outline: 2px solid hsl(var(--ink)); outline-offset: 2px; }

/* Dve čiarky, ktoré sa po otvorení prekrížia do ✕. */
.nav-menu-icon {
    position: absolute;
    inset: 0;
    width: 16px;
    height: 12px;
    margin: auto;
}
.nav-menu-icon span {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1.8px;
    margin-top: -.9px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 220ms var(--ease-out);
}
.nav-menu-icon span:first-child { transform: translateY(-3.5px); }
.nav-menu-icon span:last-child  { transform: translateY(3.5px); }
.nav-menu[open] .nav-menu-icon span:first-child { transform: rotate(45deg); }
.nav-menu[open] .nav-menu-icon span:last-child  { transform: rotate(-45deg); }

.nav-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 1px solid hsl(var(--ink) / .06);
    border-radius: 24px;
    background: hsl(var(--white));
    box-shadow: 0 18px 40px -16px hsl(var(--ink) / .32);
    transform-origin: top right;
    animation: nav-menu-in 200ms var(--ease-out);
}

.nav-menu-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 16px;
    color: hsl(var(--ink) / .75);
    font-size: 16px;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.nav-menu-panel a:hover,
.nav-menu-panel a:active { background: hsl(var(--ink) / .05); color: hsl(var(--ink)); }
.nav-menu-panel a[aria-current="page"] { background: hsl(var(--ink) / .06); color: hsl(var(--ink)); }

/* Prihlásenie oddelené od obsahu webu. */
.nav-menu-panel .nav-menu-login {
    position: relative;
    margin-top: 9px;
    color: hsl(var(--ink));
    font-weight: 500;
}
.nav-menu-panel .nav-menu-login::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 18px;
    right: 18px;
    border-top: 1px solid hsl(var(--ink) / .08);
}
.nav-menu-login svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Kým je obrysové tlačidlo v lište (nad 640 px), v menu by bolo dvakrát. */
@media (min-width: 641px) {
    .nav-menu-panel .nav-menu-login { display: none; }
}

@keyframes nav-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
}
@keyframes nav-menu-fade {
    from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-menu-panel { animation-name: nav-menu-fade; }
    .nav-menu-icon span { transition: none; }
}

/* Odkazy + logo + obe tlačidlá sa zmestia až od ~950 px okna —
   užšie okno ich dostane cez menu. */
@media (max-width: 960px) {
    .nav-links { display: none; }
    .nav-menu { display: block; }
}
/* Užšia obrazovka: obrysové tlačidlo je už v menu, v lište by sa
   s textom nezmestilo (html má zoom 1.05, takže miesta je o 5 % menej,
   než má okno). */
@media (max-width: 640px) {
    .nav-login { display: none; }
}
@media (max-width: 560px) {
    .site-header { padding: 8px 10px 0; }
    .nav { min-width: 0; height: calc(3.5rem - 10px); padding: 0 6px 0 14px; gap: 8px; }
    .nav-logo { height: 28px; flex-shrink: 1; min-width: 0; }
    .nav-cta { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 360px) {
    .nav-cta { padding: 9px 12px; font-size: 12.5px; }
}

/* ------------------------------------------------------------ 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-cta, .hero-trust { justify-content: center; }
    /* Perex a vyhľadávanie majú max-width, preto treba vycentrovať celý
       blok. Žiadne width:max-content — roztiahlo by ich na šírku textu
       bez zalomenia a rozbilo celú stránku do šírky. */
    .hero-lead, .hero-search { margin-inline: auto; }
}

.hero h1 {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    /* Dlhá veta — bez uppercase a o chlp menšia než kedysi. */
    font-size: clamp(34px, 4.2vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
    text-wrap: balance;
    margin-top: 20px;
}

/* Zalomený inline-block berie celú šírku stĺpca a bublinky
   (.hero-icons-float, pripnuté k jeho pravému okraju) by odplávali až
   k telefónu. 8.2em = najdlhší riadok („a verných hostí“ ≈ 7.2em)
   s rezervou — box tesne obopne text, riadky ostanú tie isté. */
@media (min-width: 901px) {
    .hero h1 { max-width: 8.2em; }
}

/* Vedľa prvého riadku nadpisu. Horný okraj = spodok kickeru (h1 má
   margin-top 20px), takže do dlhého kickeru nezasiahne pri žiadnej šírke. */
.hero-icons-float {
    position: absolute;
    top: -20px;
    right: -100px;
    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); }
}

/* V jednom stĺpci je nadpis vycentrovaný na celú šírku — bublinky by
   viseli pri okraji obrazovky, tak ich skryjeme. */
@media (max-width: 900px) {
    .hero-icons-float { display: none; }
}

/* Jeden perex namiesto zoznamu bodov. */
.hero-lead {
    max-width: 520px;
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.6;
    color: hsl(var(--ink-soft));
}

/* Vyhľadanie podniku: biela „pilulka“ s lupou, poľom a tlačidlom vnútri.
   Pevná výška, aby sa pri písaní nič nehýbalo. Pole nemá vlastný rámik —
   viditeľný fokus kreslí celý kontajner (:focus-within).
   position + z-index: kotva pre návrhy (.hero-results) — vstupná animácia
   robí z formulára vlastný stacking context, bez z-index by návrhy
   prekryla fotka v hero aj sekcia pod ním. */
.hero-search {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 520px;
    height: 60px;
    margin-top: 32px;
    padding: 6px 6px 6px 18px;
    border: 1px solid hsl(var(--ink) / .08);
    border-radius: 999px;
    background: hsl(var(--white));
    box-shadow: 0 14px 34px -18px hsl(var(--ink) / .3);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.hero-search:focus-within {
    border-color: hsl(var(--gold) / .7);
    box-shadow: 0 0 0 3px hsl(var(--gold) / .3), 0 14px 34px -18px hsl(var(--ink) / .3);
}

.hero-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.hero-search-icon {
    width: 20px;
    height: 20px;
    flex: none;
    color: hsl(var(--ink) / .4);
}

/* 16 px: menšie písmo v poli iOS pri fokuse priblíži celú stránku. */
.hero-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: hsl(var(--ink));
    text-overflow: ellipsis;
}

.hero-search input::placeholder { color: hsl(var(--ink) / .45); opacity: 1; }

.hero-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: none;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: hsl(var(--ink));
    color: hsl(var(--white));
    font: inherit;
    font-size: var(--btn-fs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, transform 160ms var(--ease-out);
}

.hero-search-btn:hover { background: hsl(var(--ink-deep)); }
.hero-search-btn:active { transform: scale(.97); }
.hero-search-btn:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }

/* Na úzkom displeji by sa vedľa tlačidla zmestilo z placeholdera pár
   písmen — tlačidlo pôjde pod pole, na celú šírku. */
@media (max-width: 480px) {
    .hero-search {
        flex-wrap: wrap;
        height: auto;
        padding: 6px;
        border-radius: 26px;
        /* Posun pri prvých návrhoch (hero-search.js) — pod lepiacu hlavičku. */
        scroll-margin-top: 88px;
    }
    .hero-search-field { flex-basis: 100%; height: 48px; padding-left: 12px; }
    .hero-search-btn { width: 100%; }
}

/* Návrhy z Google pod vyhľadaním (js/site/hero-search.js). Rovnaká biela
   a tieň ako pilulka, nech pôsobia ako jej pokračovanie. Vstup len cez
   opacity/transform zhora (od poľa), 180 ms — odpoveď na písanie musí byť
   svižná. Pri šípkach sa nič neanimuje. */
.hero-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 6px;
    border: 1px solid hsl(var(--ink) / .08);
    border-radius: 22px;
    background: hsl(var(--white));
    box-shadow: 0 24px 48px -20px hsl(var(--ink) / .35);
    text-align: left;
    transform-origin: top center;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

@starting-style {
    .hero-results { opacity: 0; transform: translateY(-4px) scale(.98); }
}

.hero-results[hidden] { display: none; }

.hero-results ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 336px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.hero-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    cursor: pointer;
}

.hero-result svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: hsl(var(--ink) / .35);
}

.hero-result span { display: flex; flex-direction: column; min-width: 0; }

.hero-result b,
.hero-result small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-result b { font-size: 15px; font-weight: 600; color: hsl(var(--ink)); }
.hero-result small { margin-top: 1px; font-size: 13px; color: hsl(var(--ink) / .55); }

.hero-result[aria-selected="true"] { background: hsl(var(--ink) / .05); }
.hero-result[aria-selected="true"] svg { color: hsl(var(--gold)); }

@media (hover: hover) and (pointer: fine) {
    .hero-result:hover { background: hsl(var(--ink) / .05); }
    .hero-result:hover svg { color: hsl(var(--gold)); }
}

.hero-results-empty {
    padding: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: hsl(var(--ink-soft));
}

.hero-results-empty b { font-weight: 600; color: hsl(var(--ink)); }

/* Zdroj údajov — Google ho pri Places bez mapy vyžaduje. */
.hero-results-by {
    margin-top: 4px;
    padding: 8px 12px 4px;
    border-top: 1px solid hsl(var(--ink) / .06);
    font-size: 12px;
    color: hsl(var(--ink) / .5);
}

.hero-results-by span { font-weight: 500; color: hsl(var(--ink) / .7); }

.hero-results.is-empty ul,
.hero-results.is-empty .hero-results-by,
.hero-results:not(.is-empty) .hero-results-empty { display: none; }

/* Druhá cesta pre toho, kto chce rovno kartičku. Zámerne len textový
   odkaz — hlavná výzva nesmie mať konkurenciu. */
.hero-alt {
    margin-top: 14px;
    font-size: 14px;
}

.hero-text-link {
    display: inline-block;
    padding: 6px 2px;
    font-weight: 500;
    color: hsl(var(--ink));
    text-underline-offset: 4px;
}

.hero-text-link:hover { text-decoration: underline; }

/* Tlačidlo do administrácie (prihlásený s podnikom) — namiesto vyhľadania. */
.hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-top: 32px;
}

/* Riadok výhod pod výzvou. Globálny reset nemaže list-style. */
.hero-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 22px;
    font-size: 13.5px;
    color: hsl(var(--ink-soft));
}

.hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust svg { width: 14px; height: 14px; flex: none; }

.cta-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

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


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

.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: 8px;
    padding: var(--btn-py) var(--btn-px);
    border-radius: 999px;
    background: hsl(var(--ink));
    color: hsl(var(--white));
    font-size: var(--btn-fs);
    font-weight: 500;
    line-height: 1.2;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

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

/* Šípka v tlačidlách: „›“ vo farbe textu, teda biela. Na svetlých tlačidlách čisto čierna.
   Span je prázdny, lomenú čiaru kreslia dva okraje otočeného štvorca. */
.btn-arrow, .promo-arrow {
    display: inline-grid;
    place-items: center;
    width: 12px;
    height: 12px;
    flex: none;
}

.btn-arrow::before,
.promo-arrow::before {
    content: "";
    box-sizing: border-box;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateX(-2px) rotate(45deg);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: calc(var(--btn-py) - 1px) var(--btn-px); /* -1 px za rámik: rovnaká výška ako .btn-primary */
    border-radius: 999px;
    border: 1px solid hsl(var(--ink) / .15);
    font-size: var(--btn-fs);
    font-weight: 500;
    line-height: 1.2;
}

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

.btn-ghost .btn-arrow { color: #000; }

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