/* ─── AutoYnak, verejný web ───────────────────────────────────────────────
   Prevzaté zo schváleného návrhu (autoynak.meliora.codes) a doplnené:
   väčší nadpis v hero, pás partnerov financovania, vlastná galéria
   a miesto pre video za formulárom.                                        */


:root{
  --bg:#f7f6f3;
  --card:#ffffff;
  --ink:#191817;
  --ink-soft:#6f6c64;
  --gold:#c9a45c;
  --gold-deep:#8a6f3c;
  --gold-bg:#f4eddd;
  --line:#e6e3db;
  --green:#1e7a46;
  --font:"Plus Jakarta Sans",sans-serif;
  --r:12px;
  --shadow:0 12px 34px -14px rgba(25,24,23,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
/* Plynulé rolovanie z prehliadača je zámerne preč. Bije sa s Lenisom, ktorý
   si polohu posunu dopočítava sám, a prejav je mätúci: stránka sa po koliesku
   pohne o pár pixelov a potom skočí na koniec. O plynulý posun na kotvy sa
   stará motion.js, ktorý má aj natívnu záložku, keď Lenis nebeží. */
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;font-size:15px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;cursor:pointer;background:none}
::selection{background:var(--gold);color:#fff}
.wrap{max-width:1240px;margin:0 auto;padding:0 1.5rem}

/* ---------- header ---------- */
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.hbar{display:flex;align-items:center;gap:2rem;padding:.95rem 1.5rem;max-width:1240px;margin:0 auto}
.logo img{height:68px}
nav{display:flex;gap:1.6rem;font-size:.88rem;font-weight:600;flex:1;color:#44423c}
nav a:hover{color:var(--gold-deep)}
/* Jediná zvýraznená položka menu, ostatné zostávajú pokojné. */
nav a.hlavna{font-weight:800;color:var(--ink)}
nav a.hlavna:hover{color:var(--gold-deep)}
.hcta{display:flex;align-items:center;gap:1rem}
.hcta .tel{display:inline-flex;align-items:center;gap:.45rem;font-weight:800;font-size:.95rem}
.hcta .tel svg{width:17px;height:17px;color:var(--gold);flex:none}
.hcta .tel:hover{color:var(--gold-deep)}
.hcta .tel:hover svg{color:var(--gold-deep)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:.88rem;padding:.72rem 1.35rem;border-radius:9px;background:var(--ink);color:#fff;transition:background .25s}
.btn:hover{background:var(--gold-deep)}
.btn.gold{background:var(--gold)}
.btn.gold:hover{background:var(--gold-deep)}

/* Obrysové tlačidlo: pri prejdení sa zafarbí zlatou. Zlatá plocha sa
   vysúva zdola, aby to nebola len zmena farby. Rámik má rovnakú hrúbku
   v oboch stavoch, inak by tlačidlo pri prejdení poskočilo. */
.btn.obrys{
  position:relative;overflow:hidden;isolation:isolate;
  background:transparent;color:var(--ink);
  border:1.5px solid var(--gold);
  padding:.48rem 1.25rem;
  /* Nikdy sa neláme do dvoch riadkov, inak by tlačidlo narástlo do výšky,
     čo je presne to, čomu sa nižším odsadením vyhýbame. */
  white-space:nowrap;
  transition:color .25s;
}
.btn.obrys::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .3s cubic-bezier(.3,.8,.3,1);
}
.btn.obrys:hover{color:#fff}
.btn.obrys:hover::before{transform:translateY(0)}
.btn.obrys:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .btn.obrys::before{transition:none}
}
.btn.lite{background:var(--gold-bg);color:var(--gold-deep)}
.btn.lite:hover{background:var(--gold);color:#fff}

/* ---------- hero + výkupný formulár ---------- */
.hero{position:relative}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,24,23,.5),rgba(25,24,23,.66))}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:3.4rem;padding-bottom:3.4rem}
.hero h1{color:#fff;font-weight:800;font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.06;letter-spacing:-.03em;text-align:center;max-width:20ch;margin:0 auto .8rem}
/* Zlatá len na vyznačenej časti, nie na každom span. data-split zabaľuje
   nadpis do vlastných span-ov, pri selektore na značku by zozlatol celý. */
.hero h1 .zl{color:var(--gold)}
.hero .sub{color:rgba(255,255,255,.9);text-align:center;margin:0 auto 2.2rem;font-size:clamp(1rem,1.5vw,1.22rem);max-width:52ch;line-height:1.5}
.hero .sub b{color:#fff;font-weight:700}

.fcard{background:var(--card);border-radius:16px;box-shadow:var(--shadow);max-width:900px;margin:0 auto;overflow:hidden}
.fcard .fhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fcard .fhead h2{font-weight:800;font-size:1.05rem}
.fcard .fhead span{font-size:.78rem;font-weight:700;color:var(--gold-deep);background:var(--gold-bg);border-radius:99px;padding:.35rem .9rem}
.fcard form{padding:1.1rem 1.2rem 1.2rem;display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem .7rem}
.fld{display:grid;gap:.22rem;grid-column:span 2}
.fld.s3{grid-column:span 3}
.fld.full{grid-column:1/-1}
.fld label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.055em;color:var(--ink-soft)}
.fld label em{color:var(--gold-deep);font-style:normal}
.fld input,.fld textarea{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:.55rem .75rem;font-size:.88rem;font-family:var(--font);width:100%;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,164,92,.18);background:#fff}
.fld textarea{min-height:64px;resize:vertical}
.fld ::placeholder{color:#a5a199}

/* dropzone */
.drop{grid-column:span 4;border:2px dashed var(--line);border-radius:var(--r);background:var(--bg);padding:.7rem 1rem;display:flex;align-items:center;gap:.9rem;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.drop:hover,.drop.over{border-color:var(--gold);background:var(--gold-bg)}
.drop .ic{width:36px;height:36px;flex:none;border-radius:99px;background:var(--gold-bg);color:var(--gold-deep);display:grid;place-items:center}
.drop .ic svg{width:17px;height:17px;stroke:var(--gold-deep)}
.drop b{font-weight:800;font-size:.85rem;display:block}
.drop b u{color:var(--gold-deep);text-decoration:underline}
.drop p{font-size:.72rem;color:var(--ink-soft);margin-top:.1rem}
/* Tlačidlo počas odosielania. Medzi kliknutím a odoslaním je čakanie na
   captchu a pri nacenení aj nahrávanie fotiek, takže bez tohto to vyzerá,
   že sa nestalo nič, a človek klikne znova. */
.btn[data-odosiela]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:progress;opacity:.85}
.btn[data-odosiela]:disabled{opacity:.85}
.btn-krutko{width:14px;height:14px;flex:none;border-radius:99px;border:2px solid currentColor;
  border-top-color:transparent;animation:ynakKrutko .7s linear infinite}
@keyframes ynakKrutko{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn-krutko{animation-duration:2.4s}}
/* Vybraté fotky vo formulári nacenenia: náhľady a krížik na každej, aby sa
   dala jedna odobrať bez toho, že by sa musel vyberať celý výber odznova. */
.fotky-vyber{grid-column:span 4;margin-top:-.2rem}
.fotky-vyber__hlava{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;margin-bottom:.5rem;font-size:.74rem;color:var(--ink-soft)}
.fotky-vyber__zmaz{background:none;border:0;padding:0;font:inherit;color:var(--gold-deep);cursor:pointer;text-decoration:underline}
.fotky-vyber__mriezka{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem}
.fotky-vyber .fotka{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.fotky-vyber .fotka img{display:block;width:100%;height:68px;object-fit:cover}
.fotky-vyber .fotka__x{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:99px;
  background:rgba(17,17,17,.72);color:#fff;font-size:.7rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.fotky-vyber .fotka__x:hover{background:#b3261e}
.fotky-vyber .fotka__meno{display:block;padding:.2rem .3rem;font-size:.62rem;color:var(--ink-soft);text-align:center}
@media (max-width:620px){.fotky-vyber .fotka img{height:60px}}
.previews{grid-column:1/-1;display:none;grid-template-columns:repeat(5,1fr);gap:.6rem}
.previews.has{display:grid}
.prev{position:relative;aspect-ratio:4/3;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.prev img{width:100%;height:100%;object-fit:cover}
.prev button{position:absolute;top:.3rem;right:.3rem;width:22px;height:22px;border-radius:99px;background:rgba(25,24,23,.75);color:#fff;font-size:.7rem;line-height:1;display:grid;place-items:center}
.prev button:hover{background:#c0392b}

/* consent + captcha */
.consent{grid-column:1/-1;display:flex;gap:.6rem;align-items:flex-start;font-size:.76rem;color:var(--ink-soft);line-height:1.45}
.consent input{margin-top:.15rem;width:15px;height:15px;accent-color:var(--gold-deep);flex:none}
.consent a{color:var(--gold-deep);font-weight:700;text-decoration:underline}
.fsubmit{grid-column:span 2;display:flex;align-items:stretch}
.fsubmit .btn{width:100%;font-size:.92rem}

.fmsg{grid-column:1/-1;display:none;background:#e8f4ec;border:1px solid #bfe0cb;color:#1e5c38;border-radius:9px;padding:.9rem 1.1rem;font-size:.88rem;font-weight:600}
.fmsg.err{background:#fdeeee;border-color:#efc7c7;color:#8f2c2c}
.fmsg.show{display:block}

.hero .stats{display:flex;justify-content:center;gap:2.8rem;margin-top:2rem;color:#fff;flex-wrap:wrap}
.hero .stat{text-align:center;font-size:.78rem;color:rgba(255,255,255,.75)}
.hero .stat b{display:block;font-size:1.35rem;font-weight:800;color:#fff}
.hero .stat b i{font-style:normal;color:var(--gold)}

/* ---------- listing ---------- */
/* Prázdno je to, čo robí web drahým. Pevných 2,8 rem bolo na širokej
   obrazovke tesné, clamp dá vzduch tam, kde je miesto, a nebalastí mobil. */
section{padding:clamp(3.2rem,6.5vw,5.8rem) 0}
.lhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.6rem,3vw,2.6rem);flex-wrap:wrap}
/* h1 aj h2: archív má hlavný nadpis stránky, ostatné sekcie podnadpis.
   Vyzerať majú rovnako, líšia sa len významom pre vyhľadávač. */
.lhead h1,.lhead h2{font-weight:800;font-size:clamp(1.35rem,2.5vw,1.9rem);letter-spacing:-.01em}
.lhead .cnt{color:var(--ink-soft);font-size:.85rem}

/* Prepínač poradia podľa ceny. Dve šípky vedľa seba ako jeden celok,
   aktívna je zvýraznená. Sú to odkazy, takže poradie drží v adrese
   a funguje aj bez JavaScriptu. */
.zoradit{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.zoradit a{display:grid;place-items:center;width:38px;height:38px;color:var(--ink-soft);
  background:var(--card);transition:background .2s,color .2s}
.zoradit a + a{border-left:1px solid var(--line)}
.zoradit a svg{width:17px;height:17px}
.zoradit a:hover{background:var(--gold-bg);color:var(--gold-deep)}
.zoradit a.je{background:var(--gold);color:#fff}
.zoradit a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px}
.sort{display:flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--ink-soft)}
.sort select{appearance:none;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:.5rem 2rem .5rem .8rem;font-size:.84rem;font-family:var(--font);font-weight:600;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236f6c64' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.8vw,1.5rem)}
.car{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.car:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.car .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.car .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.car:hover .ph img{transform:scale(1.05)}
/* Karta bez fotky. Vypĺňa presne to isté miesto ako obrázok, nech sa mriežka
   neposunie, a nepredstiera auto: značka a jedna veta. Logo značky je vnútri
   ako <img>, preto mu treba vrátiť rozmer, ktorý .car .ph img roztiahne
   na celú plochu. */
.ph-bez{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.55rem;background:var(--bg);
  background-image:linear-gradient(135deg,rgba(0,0,0,.03) 0 50%,transparent 50% 100%);
  background-size:7px 7px}
.ph-bez img{width:auto!important;height:auto!important;max-width:52px;max-height:52px;
  object-fit:contain!important;opacity:.5;transform:none!important}
/* Silueta auta namiesto chýbajúcej fotky. Samotné logo značky sa na šedej
   ploche strácalo a pôsobilo ako chyba načítania, obrys auta povie na prvý
   pohľad, že auto tu je, len nie je nafotené. */
.ph-auto{width:min(58%,150px);height:auto;fill:var(--ink-soft);opacity:.42}
.ph-auto__sklo,.ph-auto__disk{fill:var(--bg)}
.ph-bez.velky .ph-auto{width:min(46%,210px)}
@media (max-width:620px){.ph-auto{width:min(62%,130px)}}
.ph-bez span{font-size:.7rem;color:var(--ink-soft);text-align:center;padding:0 1rem;line-height:1.35}
/* Na detaile vozidla stojí sám, nie vnútri absolútne umiestnenej plochy. */
.ph-bez.velky{position:relative;inset:auto;width:100%;gap:.9rem}
.ph-bez.velky img{max-width:72px;max-height:72px}
.ph-bez.velky span{font-size:.82rem}

.car .bdg{position:absolute;top:.7rem;left:.7rem;display:flex;gap:.35rem;flex-wrap:wrap}
.b{font-size:.64rem;font-weight:700;padding:.28rem .6rem;border-radius:6px;background:rgba(255,255,255,.95)}
.b.gold{background:var(--gold);color:#fff}
.b.green{background:var(--green);color:#fff}
.car .in{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.car h3{font-weight:700;font-size:.95rem;line-height:1.3}
.car .price{font-weight:800;font-size:1.25rem}
.car .mes{font-size:.72rem;color:var(--green);font-weight:600;margin-top:-.35rem}
.car .specs{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:auto}
.car .specs span{font-size:.7rem;font-weight:600;color:var(--ink-soft);background:var(--bg);border-radius:6px;padding:.28rem .55rem}
.list-foot{text-align:center;margin-top:2rem}

/* ---------- dual banners ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
.banner{position:relative;border-radius:16px;overflow:hidden;min-height:280px;display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.banner:hover img{transform:scale(1.04)}
/* Prekryv je dvojvrstvový. Zvislý drží spodok, kde stojí text, vodorovný
   stmavuje ľavú tretinu, lebo nadpis a odsek siahajú vyššie, než kam zvislý
   dosiahne. Na starých fotkách, čo boli tmavé detaily áut, stačil jeden.
   Nové fotky sú svetlé a rušné a zlatý nadpis sa na nich strácal.
   Vpravo prechod končí na nule, takže samotná fotka ostáva vidieť. */
.banner::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(25,24,23,.88),rgba(25,24,23,.34) 58%,rgba(25,24,23,.06) 88%),
    linear-gradient(to right,rgba(25,24,23,.74),rgba(25,24,23,.2) 60%,rgba(25,24,23,0) 100%);
}
.banner .in{position:relative;z-index:2;color:#fff;padding:1.7rem;width:100%}
.banner .kick{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.banner h3{font-weight:800;font-size:clamp(1.3rem,2.4vw,1.8rem);margin:.3rem 0 .4rem;letter-spacing:-.01em}
.banner p{font-size:.86rem;opacity:.93;max-width:44ch;margin-bottom:1rem}

/* ---------- process ---------- */
/* ---------- cesta výkupu (tmavý predel) ---------- */
/* Jediný tmavý pás na svetlej stránke, preto má vlastné farby a nededí
   tokeny z :root. Rozdeľuje stránku na „predávam" a „kupujem". */
.cesta{
  --c-ink:#f3efe6;
  --c-soft:#a49d8e;
  --c-zlata:#c9a45c;
  background:#1a1917;
  background-image:radial-gradient(900px 320px at 50% -10%, #2a2724 0%, #1a1917 62%);
  color:var(--c-ink);
  padding:3.4rem 0 3.6rem;
  position:relative;
  overflow:hidden;
}
.cesta__hlava{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:2.4rem}
.cesta__hlava h2{font-size:clamp(1.35rem,3vw,1.85rem);font-weight:800;letter-spacing:-.015em}
.cesta__cas{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c-zlata);border:1px solid rgba(201,164,92,.32);
  border-radius:99px;padding:.28rem .8rem;
}

/* Cesta leží v osi uzlov (uzol má 62 px, jeho stred je teda 31 px od vrchu
   zoznamu) a nesmie brať kliknutia. */

/* ── Pás cesty ──────────────────────────────────────────────────────────
   Pinnutá scéna. Stránka sa zastaví a ďalší posun ťahá pás doprava.

   Panel je celá obrazovka, nie kartička v riadku. To je ten rozdiel medzi
   katalógom a scénou: fotka ide cez celú plochu, nadpis je obrovský a leží
   na nej, údaje sú v pravom dolnom rohu za tenkou linkou. Fotka sa vo vnútri
   panelu posúva proti smeru pásu, takže vzniká hĺbka, a texty sa pri vstupe
   panelu dvíhajú zdola. Oboje rieši assets/js/motion.js cez triedu hs__media
   a atribút data-hs-in.                                                   */

.cesta{padding:0;overflow:hidden}
/* Pri pinnutí sekcia vypĺňa presne obrazovku a pás si vezme, čo zostane po
   HUD. Bez toho panel nedosiahne na spodnú hranu a pod ním presvitá ďalšia
   sekcia, čím sa scéna rozpadne na obrázok v ráme. */
.cesta.is-pinned{height:100vh;display:flex;flex-direction:column}
.cesta.is-pinned .hs__viewport{flex:1;min-height:0}
.cesta.is-pinned .hs__track{height:100%}
.cesta.is-pinned .zastavka{height:100%}
.cesta > .wrap{width:100%}
.cesta .hs__viewport{position:relative;width:100%}
.cesta .hs__track{
  position:relative;display:flex;align-items:stretch;gap:0;
  width:max-content;will-change:transform;
}

/* Panel je celá šírka obrazovky, teda jedna scéna naraz. Pôvodne mal 84 vw,
   aby bolo vidieť pruh susedného, lenže tým sa texty v pravom stĺpci orezali
   o okraj obrazovky. Referenčný web ide tiež na plnú šírku a že pás pokračuje,
   povie HUD s počítadlom pod ním. */
.cesta .zastavka{
  position:relative;flex:0 0 auto;
  width:100vw;height:min(78vh,700px);
  overflow:hidden;text-align:left;padding:0;
}

.cesta .hs__media{position:absolute;inset:0;overflow:hidden}
/* Fotka je širšia než panel, lebo sa vo vnútri posúva. Bez nadmeru by sa
   pri paralaxe odkryl prázdny okraj. */
.cesta .hs__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);will-change:transform}
/* Spád zdola drží text čitateľný nad akoukoľvek fotkou. */
.cesta .hs__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,19,17,.92) 0%,rgba(20,19,17,.55) 42%,rgba(20,19,17,.12) 78%);
}

.zastavka__telo{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.5rem;
  padding:clamp(1.5rem,3.4vw,2.8rem);
}
.zastavka__hlavne{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.zastavka__poradie{
  font-size:.8rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(201,164,92,.85);font-variant-numeric:tabular-nums;
}
/* Veľká typografia je to, čo robí scénu scénou. Plochá škála, kde je nadpis
   len o kúsok väčší než text, je znak lacného webu. */
.zastavka__nazov{
  font-size:clamp(2.6rem,7vw,5.6rem);font-weight:800;line-height:.94;
  letter-spacing:-.035em;color:#fff;margin:.1rem 0 0;text-wrap:balance;
}
/* Záverečný panel má vetu namiesto jedného slova, tak o stupeň menej. */
.zastavka__nazov--dlhy{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.02}

.cesta .zastavka__cas{
  align-self:flex-start;margin-top:.8rem;
  font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c-zlata);border:1px solid rgba(201,164,92,.34);
  border-radius:99px;padding:.3rem .85rem;
}

/* Pravý stĺpec za tenkou linkou: vysvetlenie a tvrdé údaje. */
.zastavka__aside{
  max-width:clamp(16rem,28vw,24rem);
  padding-left:clamp(.9rem,1.6vw,1.4rem);
  border-left:1px solid rgba(201,164,92,.3);
}
/* Na scéne cez celú obrazovku bol pôvodných 0,84 rem nečitateľný. Text je
   tu rovnocenný s nadpisom, nie popisok pod obrázkom. */
.zastavka__aside p{font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.62;color:rgba(240,236,228,.92);margin:0}
.zastavka__udaje{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.48rem}
.zastavka__udaje li{
  display:flex;justify-content:space-between;gap:.8rem;
  font-size:clamp(.82rem,.95vw,.94rem);letter-spacing:.02em;line-height:1.45;
  color:rgba(236,232,224,.78);
  padding-top:.48rem;border-top:1px solid rgba(255,255,255,.12);
}
.zastavka__udaje li:first-child{border-top:0;padding-top:0}
.zastavka__udaje li span:last-child{color:var(--c-zlata);text-align:right}

/* Panely bez fotky majú vlastnú plochu, inak by boli priehľadné. */
.zastavka--uvod,.zastavka--koniec{background:linear-gradient(155deg,#272320,#171614)}
.zastavka--uvod{border-left:0}
.zastavka__akcie{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.zastavka__akcie .btn{font-size:.9rem;padding:.72rem 1.2rem}

/* HUD pod pásom: kde sme a koľko ostáva. */
.cesta__hud{
  display:flex;align-items:center;gap:1rem;
  margin-top:1.6rem;padding-bottom:1.8rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(228,223,213,.45);
}
.cesta .hs__count{font-variant-numeric:tabular-nums;color:var(--c-zlata);font-weight:700;flex:none}
.cesta .hs__bar{flex:1;height:1px;background:rgba(201,164,92,.2)}
.cesta .hs__bar i{background:var(--c-zlata)}
.cesta__napoveda{flex:none}
/* Pozn.: staré pravidlá pre zastávku ako kartičku v riadku sú zmazané.
   Stáli za novým blokom vyššie, takže ho prebíjali, a `.zastavka h3` držalo
   nadpis na 0,98 rem napriek tomu, že `.zastavka__nazov` žiadal päťnásobok.
   Prvky, ktoré štýlovali (uzol, ikona, číslo v krúžku), v značkách už nie sú. */

/* Pod 820 px sa nepinuje, vrstva prepne pás na listovanie prstom. Panel sa
   zúži a text sa preskladá pod seba: dva stĺpce vedľa seba sú na 375 px
   nečitateľné a nadpis by sa lámal po slabikách. */
@media (max-width:820px){
  .cesta .zastavka{width:86vw;height:auto;min-height:72vh}
  .zastavka__telo{grid-template-columns:1fr;align-content:end;gap:1.1rem}
  .zastavka__nazov{font-size:clamp(2.1rem,11vw,3.2rem)}
  .zastavka__aside{max-width:none;padding-left:0;padding-top:.9rem;border-left:0;border-top:1px solid rgba(201,164,92,.3)}
  .cesta__napoveda{display:none}
}

/* ---------- services ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .25s,transform .25s}
.svc:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.svc .ph{aspect-ratio:16/9;overflow:hidden}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.svc:hover .ph img{transform:scale(1.05)}
.svc .in{padding:clamp(1.1rem,1.8vw,1.5rem) clamp(1.2rem,2vw,1.6rem) clamp(1.3rem,2.2vw,1.7rem)}
.svc h3{font-weight:800;font-size:1.05rem}
.svc p{font-size:.84rem;color:var(--ink-soft);margin:.3rem 0 .7rem}
.svc a{font-size:.82rem;font-weight:700;color:var(--gold-deep)}
.svc a:hover{text-decoration:underline}

/* ---------- blog ---------- */
.blog{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.bcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.bcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.bcard .ph{aspect-ratio:16/9;overflow:hidden;position:relative}
.bcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bcard:hover .ph img{transform:scale(1.05)}
.bcard .tag{position:absolute;top:.7rem;left:.7rem;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--gold);color:#fff;border-radius:6px;padding:.3rem .65rem}
.bcard .in{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.bcard time{font-size:.72rem;font-weight:600;color:var(--ink-soft)}
.bcard h3{font-weight:800;font-size:1.02rem;line-height:1.35;margin:.35rem 0 .4rem}
.bcard p{font-size:.84rem;color:var(--ink-soft);margin-bottom:.8rem}
.bcard a{font-size:.82rem;font-weight:700;color:var(--gold-deep);margin-top:auto}
.bcard a:hover{text-decoration:underline}

/* ---------- instagram ---------- */
.ig .lhead p{font-size:.86rem;color:var(--ink-soft)}
.ig .handle{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;color:var(--gold-deep)}
.ig .handle svg{width:18px;height:18px;stroke:var(--gold-deep)}
.iggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem}
.igtile{position:relative;aspect-ratio:1080/1350;border-radius:10px;overflow:hidden;display:block}
.igtile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.igtile:hover img{transform:scale(1.06)}
.igtile .ov{position:absolute;inset:0;background:rgba(25,24,23,.45);display:grid;place-items:center;opacity:0;transition:opacity .25s}
.igtile:hover .ov{opacity:1}
.igtile .ov svg{width:26px;height:26px;stroke:#fff;fill:none}
.ig .igcta{text-align:center;margin-top:1.4rem}

/* ---------- reviews ---------- */
.revwrap{display:grid;grid-template-columns:auto 1fr;gap:2.6rem;align-items:start}
.revscore{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.8rem 2.2rem;text-align:center;box-shadow:var(--shadow)}
.revscore .n{font-weight:800;font-size:3.4rem;line-height:1}
.revscore .stars{color:var(--gold);letter-spacing:.2em;margin:.4rem 0}
.revscore small{font-size:.78rem;color:var(--ink-soft)}
.revlist{display:grid;gap:.9rem}
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.3rem;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.rev .av{width:40px;height:40px;border-radius:99px;background:var(--gold-bg);color:var(--gold-deep);font-weight:800;font-size:.82rem;display:grid;place-items:center}
.rev q{quotes:"„" "“";font-size:.88rem;line-height:1.55}
.rev .who{font-size:.75rem;color:var(--ink-soft);margin-top:.35rem}
.rev .who b{color:var(--ink);font-weight:700}
.rev .who i{font-style:normal;color:var(--gold)}

/* ---------- footer ---------- */
/* overflow-x:clip a nie hidden: hidden by si vynútil orezanie aj zvislo
   a znak Λ by nemohol vystúpiť nad pätičku. clip orezáva len vodorovne,
   takže znak smie presahovať hore, ale nevyrobí vodorovné posúvanie. */
footer{background:var(--ink);color:#b7b3a9;font-size:.85rem;position:relative;
       overflow-x:clip;overflow-y:visible}
/* Obsah nad znakom, aby text zostal čitateľný. */
footer .wrap{position:relative;z-index:1}
footer .top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2.2rem;padding:2.8rem 0 2.2rem}
footer h5{font-weight:700;color:#fff;font-size:.9rem;margin-bottom:.8rem}
footer li{list-style:none;margin:.4rem 0}
footer a:hover{color:var(--gold)}
/* Výška sa zadáva ako strop, nie napevno, a šírka ostáva automatická.
   Pri pevnej výške a globálnom max-width:100% sa logo v úzkej pätičke
   na mobile zrezalo na šírku a ostalo stlačené na výšku. */
footer .flogo img{height:auto;max-height:114px;width:auto;max-width:100%;margin-bottom:1.4rem}
footer .tel-f{font-weight:800;font-size:1.2rem;color:#fff}
footer .bott{border-top:1px solid #32302b;padding:1.1rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.75rem}

@media (max-width:1000px){
  nav{display:none}
  .fcard form{grid-template-columns:1fr 1fr}
  .fld,.fld.s3{grid-column:span 1}
  .fld.full,.drop,.fsubmit,.fotky-vyber{grid-column:1/-1}
  .previews{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr}
  .proc .row{grid-template-columns:1fr 1fr}
  .svcs{grid-template-columns:1fr}
  .bgrid{grid-template-columns:1fr}
  .iggrid{grid-template-columns:repeat(3,1fr)}
  .revwrap{grid-template-columns:1fr}
  footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .proc .row{grid-template-columns:1fr}
  .iggrid{grid-template-columns:1fr 1fr}
  .hcta .tel{display:none}
  /* Na úzkej obrazovke by logo v plnej veľkosti zabralo pol hlavičky
     a vytlačilo tlačidlo. Zmenší sa, ale zostáva výrazne väčšie než predtým. */
  .logo img{height:44px}
  footer .flogo img{max-height:76px}
}


/* ─── Video za formulárom ──────────────────────────────────────────────────
   Zatiaľ tu leží statická fotka; keď bude video hotové, stačí doplniť
   <video class="bg" …> a obrázok odstrániť, štýly sú spoločné. */
.hero video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}

/* ─── Partneri financovania ────────────────────────────────────────────────*/
.partneri{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.5rem 0}
.partneri .wrap{display:flex;align-items:center;justify-content:center;gap:2.4rem;flex-wrap:wrap}
.partneri .popis{font-size:.82rem;font-weight:700;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase}
.partneri .logo-partner{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.05rem;color:var(--ink)}
.partneri .logo-partner img{height:34px;width:auto}
.partneri .logo-partner .znak{width:26px;height:26px;border-radius:7px;background:var(--gold-bg);color:var(--gold-deep);display:grid;place-items:center;font-size:.8rem;font-weight:900}

/* ─── Vlastná galéria (namiesto Instagramu) ────────────────────────────────*/
.galeria .prazdna{border:2px dashed var(--line);border-radius:var(--r);padding:2.4rem 1.5rem;text-align:center;color:var(--ink-soft)}

/* ─── Recenzie zákazníkov ──────────────────────────────────────────────────*/
.hodnotenie{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap}
.hodnotenie .cislo{font-size:2.6rem;font-weight:800;line-height:1}
.hodnotenie .hviezdy{color:var(--gold);font-size:1.15rem;letter-spacing:.1em}
.hodnotenie .zdroj{font-size:.85rem;color:var(--ink-soft)}

/* Nápis v logu je biely (zlatý je len znak Λ), na svetlej hlavičke by zmizol.
   Používame variantu s tmavým nápisom, zlatá v znaku zostáva zachovaná.
   V tmavej pätičke stačí pôvodné logo. */
header .logo img{content:url("/assets/img/logo_svetly.png")}

/* Logo značky na karte auta, vpravo hore nad fotkou */
.car .ph{position:relative}
.car .znacka-logo{position:absolute;top:.6rem;right:.6rem;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.5);display:inline-flex;align-items:center;justify-content:center}

/* ---------- potvrdenie po odoslaní formulára ---------- */
/* Okno je v HTML od začiatku (nie z JavaScriptu), aby fungovalo aj bez
   skriptov, vtedy sa zatvára odkazom na adresu bez parametra. */
.dakujeme{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:1.2rem;
  background:rgba(20,19,18,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:dakujemeVstup .18s ease-out;
}
.dakujeme__okno{
  /* box-sizing, aby vnútorné odsadenie nerozšírilo okno nad šírku obrazovky */
  position:relative;width:min(30rem,100%);box-sizing:border-box;
  background:var(--card);border-radius:16px;
  padding:2.2rem 1.9rem 1.9rem;text-align:center;
  box-shadow:0 30px 70px -20px rgba(20,19,18,.5);
  animation:dakujemeOkno .22s cubic-bezier(.2,.8,.3,1);
}
.dakujeme__zavri{
  position:absolute;top:.5rem;right:.75rem;
  font-size:1.6rem;line-height:1;color:var(--ink-soft);
  text-decoration:none;padding:.2rem .4rem;border-radius:8px;
}
.dakujeme__zavri:hover{color:var(--ink);background:var(--bg)}
.dakujeme__znak{
  display:grid;place-items:center;width:56px;height:56px;
  margin:0 auto 1rem;border-radius:99px;
}
.dakujeme__znak svg{width:28px;height:28px}
.dakujeme__znak--ok{background:#e7f4ec;color:var(--green)}
.dakujeme__znak--chyba{background:#fdecea;color:#8b1a10}
.dakujeme__okno h2{font-size:1.4rem;font-weight:800;margin-bottom:.5rem}
.dakujeme__okno p{color:var(--ink-soft);line-height:1.6;font-size:.9rem}
.dakujeme__pozn{font-size:.82rem;margin-top:.9rem}
/* Telefón má vlastný riadok a nowrap: medzery v čísle sa nesmú zalomiť,
   aby polovica čísla neskončila pod druhou. */
.dakujeme__tel{
  display:block;margin-top:.2rem;
  font-size:1.28rem;font-weight:800;letter-spacing:.01em;
  color:var(--gold-deep);text-decoration:none;
  white-space:nowrap;
}
.dakujeme__tel:hover{text-decoration:underline}
/* min-width sa na úzkom displeji zmenší, inak by tlačidlo roztiahlo okno. */
.dakujeme__ok{margin-top:1.4rem;min-width:min(9rem,100%)}

@keyframes dakujemeVstup{from{opacity:0}to{opacity:1}}
@keyframes dakujemeOkno{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* Kto si vypol animácie, ten ich nemá dostať ani tu. */
@media (prefers-reduced-motion:reduce){
  .dakujeme,.dakujeme__okno{animation:none}
}

/* ---------- znak Λ na predele referencií a pätičky ---------- */
/* Vystupuje nad hornú hranu pätičky do svetlej sekcie. Pätička ho nesmie
   orezať (overflow:visible) a znak nesmie prekážať pri klikaní. */
/* Rám drží polohu a veľkosť, znak v ňom už len sedí. Orezáva sa spodok,
   hore rám presahuje nad pätičku, takže znak stále vystúpi do svetlej
   sekcie nad ňou. */
.znak-ram{
  position:absolute;
  bottom:0;left:0;right:0;
  /* Presah nad pätičku je veľký zámerne: znak má spájať tmavú pätičku
     s recenziami nad ňou, nie spoza nej vykukovať. Orezáva sa len spodok,
     hore rám presahuje a znak tak prechádza cez hranicu sekcií. */
  height:calc(100% + 340px);
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.znak-lambda{
  position:absolute;
  /* Ukotvený k spodnej hrane pätičky a vyšší než ona, takže vystúpi hore
     cez čiernu plochu až do svetlej sekcie nad ňou. Presah je 110 px, lebo
     toľko voľného miesta má sekcia recenzií pod poslednou kartou. Viac by
     znamenalo, že vrchol znaku zmizne za nimi. */
  bottom:0;
  /* Vybieha za pravý okraj. Tvar, ktorý sa nezmestí celý, pôsobí väčšie
     než ten, čo sa do plochy akurát vojde. Rám ho oreže na hrane okna.
     Posun je taký, aby ľavé rameno minulo stĺpce odkazov v pätičke, inak
     text leží na zlatej ploche a stráca kontrast. */
  right:-16%;
  width:auto;
  /* Nižší než rám, a to je podstatné. Znak má plochý vrchol (rovnaký ako
     v logu, nie je to chyba tvaru), a keď bol rovnako vysoký ako rám,
     ten vrchol ležal presne na hrane orezania. Výsledok vyzeral, že je
     znak odseknutý, hoci orezaný nebol. Tých 80 px nad ním je vzduch,
     vďaka ktorému je vidieť, že plochý vrchol je zámer. */
  height:calc(100% - 80px);
  max-height:none;
  pointer-events:none;
}

@media (max-width:1100px){
  .znak-ram{height:calc(100% + 240px)}
  .znak-lambda{right:-4%;height:calc(100% - 60px)}
}
/* Pod 700 px je pätička úzka a znak by ležal cez text, tak ho stlmíme
   a posunieme za obsah tak, aby pôsobil len ako jemná textúra. */
@media (max-width:700px){
  .znak-lambda{height:calc(100% + 60px);right:-10%;opacity:.55}
}
@media (max-width:460px){
  .znak-lambda{display:none}
}

/* ═══ Pohyb ═══════════════════════════════════════════════════════════════
   Odhaľovanie, počítadlá a javiská rieši vrstva zo skillu motion-web
   (assets/css/motion.css + assets/js/motion.js) a zapína sa data atribútmi.
   Vlastná vrstva tu bola a zmazala sa: robila prelínanie, teda presne to,
   čo skill zakazuje. Robíme weby, kde veci prilietajú a dosadajú.

   Tu ostáva len to, čo je vlastné tomuto webu a vrstva to nepokrýva:
   správanie hlavičky a hover na karte vozidla. Obe držia hlavnú krivku
   cubic-bezier(.22, 1, .36, 1), aby web pôsobil ako jeden kus.             */

/* Hlavička sa pri posune nadol odsunie a pri posune nahor sa vráti. Triedu
   is-hidden prepína motion.js. Na mobile to uvoľní celú výšku obrazovky.
   Naša hlavička nemá triedu .header, ktorú štýluje motion.css, tak si
   pravidlo píšeme na vlastný prvok. */
/* Hlavička zostáva stále hore a neschováva sa. Trieda is-hidden, ktorú
   pri scrolle pridáva motion.js, sa zámerne ignoruje: klient chce menu
   fixné, nech je nacenenie aj telefón vždy po ruke. */
header { transition: box-shadow .3s ease }

/* Karta auta reaguje na ukazovateľ, hover 0,2 až 0,3 s podľa fyziky skillu. */
.car { transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease }
.car:hover { transform: translateY(-4px) }
.car .ph img { transition: transform .6s cubic-bezier(.22, 1, .36, 1) }
.car:hover .ph img { transform: scale(1.05) }

/* Obmedzený pohyb nie je vypnutie animácií, ale rovnaký výsledok bez dráhy. */
@media (prefers-reduced-motion: reduce) {
  header, .car, .car .ph img { transition: none }
  header.is-hidden { transform: none }
}

/* Zlaté Λ v pätičke pomaly dýcha. Dýchanie je ambientná slučka, podľa fyziky
   skillu 6 s a viac, inak z neho je blikanie. Škáluje sa vnútorná cesta, nie
   samotné SVG: o transform prvku sa stará odhaľovacia animácia z vrstvy a dve
   veci na tom istom transforme by si liezli do cesty. */
.znak-lambda path{
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:znakDycha 9s ease-in-out infinite;
}
@keyframes znakDycha{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}
@media (prefers-reduced-motion:reduce){
  .znak-lambda path{animation:none}
}

/* Zlaté Λ vylezie zo spodu, keď sa k pätičke doscrolluje.

   Riadené polohou posunu cez animation-timeline, nie jednorazovým nábehom.
   Znak sa teda vysúva postupne, ako sa pätička blíži, a pri scrollovaní späť
   zasa zalezie. To je ten elegantný pohyb, jednorazový prílet by pôsobil ako
   lacné vyskočenie.

   Celé je to v @supports zámerne. Prehliadač, ktorý scrollom riadené
   animácie nepozná, nedostane žiadnu a znak je proste vidieť. Keby sme
   východiskový posun dali natvrdo mimo @supports, v takom prehliadači by
   znak ostal navždy pod hranou a nikto by ho neuvidel.

   Posúva sa obal, nie vnútorná cesta, tej patrí dýchanie vyššie. Dve
   animácie na tom istom transforme by si prepísali hodnoty. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .znak-lambda{
      animation:znakVylez linear both;
      animation-timeline:view();
      /* Začne, keď znak vojde do záberu, a dokončí sa, kým je pätička
         v polovici obrazovky. Neskorší koniec by znamenal, že znak dorastá
         ešte vtedy, keď sa naň človek už nepozerá. */
      animation-range:entry 0% cover 55%;
      will-change:transform;
    }
  }
}
@keyframes znakVylez{
  from{transform:translateY(42%)}
  to{transform:translateY(0)}
}

/* ═══ Podfarbenie za predelom ══════════════════════════════════════════════
   Od pinnutej cesty nadol sa plocha mení, aby stránka nebola jeden dlhý
   svetlý pás. Rytmus je zámerný: tmavá scéna výkupu, svetlejšie služby,
   tmavé recenzie, čierna pätička. Oko tak vie, kde jedna téma končí.      */

/* Služby: jemný sivý podtón, nie biela. Karty v nich sú biele, takže sa
   konečne odlíšia od plochy, na ktorej ležia. */
#sluzby{
  background:#efede7;
  padding-top:clamp(4rem,8vw,7rem);
  padding-bottom:clamp(4rem,8vw,7rem);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Recenzie inverzne. Nerobí sa to prepisovaním každého prvku, ale
   predefinovaním farebných premenných na sekcii. Karty, odkazy aj
   popisky čítajú tie isté tokeny, takže sa preklopia samy a nič sa
   nezabudne. */
#recenzie{
  padding-top:clamp(4rem,8vw,7rem);
  padding-bottom:clamp(4.5rem,9vw,7.5rem);
  --card:#201d1a;
  --line:rgba(201,164,92,.18);
  --ink:#f3efe7;
  --ink-soft:#a49d8e;
  --gold-bg:rgba(201,164,92,.16);
  --gold-deep:#d9b878;
  background:#1a1917;
  background-image:radial-gradient(900px 340px at 50% -20%, #262320 0%, #1a1917 64%);
  color:var(--ink);
}
#recenzie .lhead h2{color:var(--ink)}
/* Číslo hodnotenia a hviezdy musia na tmavej ploche zosilnieť, pôvodná
   zlatá je ladená na svetlé pozadie a na tmavej sa stráca. */
#recenzie .hodnotenie .cislo{color:#fff}
#recenzie .hodnotenie .hviezdy{color:var(--gold)}
#recenzie .hodnotenie .zdroj{color:var(--ink-soft)}
#recenzie .rev q{color:var(--ink)}
#recenzie .rev .who b{color:var(--ink)}
/* Svetlé tlačidlo je na tmavom pozadí príliš tvrdé, stlmíme ho do obrysu. */
#recenzie .btn.lite{
  background:transparent;color:var(--gold);
  border:1px solid rgba(201,164,92,.4);
}
#recenzie .btn.lite:hover{background:var(--gold);color:#1a1917;border-color:var(--gold)}

/* Hviezdička pri splátke v ponuke. Suma je anuita z modelovej sadzby, nie
   ponuka úveru, a pri úvere je ten rozdiel právne podstatný. Vysvetlenie
   je pod výpisom, aby sa nemuselo opakovať pri každej karte. */
.car .mes-hviezda{color:var(--gold-deep);font-weight:700;margin-left:.1rem}
.splatky-pozn{
  margin-top:1.1rem;font-size:.74rem;line-height:1.5;color:var(--ink-soft);
}
.splatky-pozn strong{color:var(--ink);font-weight:700}

/* Právne stránky: GDPR a obchodné podmienky. Dlhý súvislý text, ktorý sa
   naozaj číta, takže užší stĺpec a väčšie riadkovanie než na zvyšku webu.
   Šírka je 68 znakov, čo je hranica, za ktorou oko stráca začiatok riadka. */
.pravny-text{max-width:68ch}
.pravny-text h1{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;margin-bottom:1.4rem}
.pravny-text h2{font-size:1.05rem;font-weight:800;margin:2rem 0 .5rem}
.pravny-text p{font-size:.92rem;line-height:1.72;margin-bottom:.9rem;color:#33312d}
.pravny-text li{font-size:.92rem;line-height:1.72;margin-bottom:.45rem;margin-left:1.1rem}

/* Kalkulačka poistenia. Vložená cudzia služba, o jej vnútro sa starať
   nevieme. Rozmery sú prevzaté zo starého webu: výška 500 px je len
   východisková, kalkulačka si ju vzápätí prepíše správou cez postMessage.
   Identifikátory #poistenieonline a #poistenieonline_iframe sa nesmú
   premenovať, obsluha sa na ne odkazuje menom. */
.kalk-uvod{max-width:62ch;font-size:.95rem;line-height:1.65;margin-bottom:1.6rem}
.kalk-uvod a{color:var(--gold-deep);font-weight:700}
#poistenieonline{
  width:100%;height:500px;border:0;margin:0;padding:0;
  background:var(--card);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);
}
#poistenieonline iframe{width:100%;height:100%;border:0;margin:0;padding:0;display:block}
.kalk-pozn{margin-top:1.1rem;font-size:.78rem;line-height:1.55;color:var(--ink-soft);max-width:62ch}
.kalk-pozn a{color:var(--gold-deep);font-weight:700}

/* Na mobile sa drobné texty v kartách áut zväčšia. Pod 12 px sa parametre
   a odznaky čítajú ťažko a mobil je 92 % návštevnosti, takže to je presne
   miesto, kde na tom záleží. Na desktope sa nič nemení, tam je priestoru dosť. */
@media (max-width:600px){
  .car .specs span{font-size:.8rem;padding:.3rem .6rem}
  .car .mes{font-size:.82rem}
  .b{font-size:.75rem;padding:.3rem .62rem}
  .hero .stat{font-size:.86rem}
  .ph-bez span{font-size:.78rem}

  /* Popisky polí mali 10,2 px. Je to formulár na nacenenie vozidla, teda
     miesto, kde web zarába, a človek na mobile nemá lúštiť, čo do poľa
     patrí. Rovnako značky „povinné" a „odporúčané" pri dokladoch. */
  .fld label{font-size:.78rem;letter-spacing:.04em}

  /* Predpona body je tu naschvál. Pravidlá .phead .kick a .karta h4 .znak
     nie sú v tomto súbore, ale v blokoch <style> vnútri jednotlivých
     stránok, a tie sa načítajú až za ním. Pri rovnakej špecifickosti by
     teda vyhrali ony a zväčšenie by sa neprejavilo. */
  body .phead .kick{font-size:.78rem}
  body .karta h4 .znak{font-size:.72rem}

  /* Dotykové ciele. Odkazy v pätičke a pri službách mali na výšku 17 px,
     čo je pod hranicou, ktorú sa dá spoľahlivo trafiť prstom. Text
     ostáva, pridáva sa len plocha okolo neho. */
  footer li a{display:block;padding:.62rem 0}
  footer li{margin:0}
  .in > a{display:inline-block;padding:.5rem 0}
  /* Telefón, e-mail a právne odkazy v pätičke sú vnútri viet, preto len
     inline-block s vypchávkou: text ostáva v riadku, plocha narastie. */
  footer .kontakt-riadok a,footer .bott a{display:inline-block;padding:.34rem 0}

  /* Nadpisové štítky v sekciách a počítadlo panelov na ceste vozidla. */
  /* Telefón a e-mail na stránke kontaktu. Veľké tlačidlá sú hneď vedľa,
     toto je len druhá cesta k tomu istému, ale trafiť sa má dať aj tak. */
  .kkarta .val a{display:inline-block;padding:.3rem 0}
  .in .kick{font-size:.78rem}
  .cesta .hs__count{font-size:.8rem}
}