@font-face{font-family:'Unbounded';src:url(fonts/Unbounded.woff2) format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Onest';src:url(fonts/Onest.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Martian Mono';src:url(fonts/MartianMono.woff2) format('woff2');font-weight:100 800;font-stretch:75% 112.5%;font-display:swap}

:root{
  --ink:#16191B;--ink-2:#23272A;--ink-3:#33383B;
  --paper:#F1F0E8;--paper-2:#E6E5DA;--line:#D2D1C5;
  --muted:#565B58;--muted-dark:#B3B7AF;
  --lime:#C9E62A;--lime-deep:#4F5E00;
  --display:'Unbounded',system-ui,sans-serif;--body:'Onest',system-ui,sans-serif;--mono:'Martian Mono',ui-monospace,monospace;
  --dezen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M6 24 L17 11 L28 24' fill='none' stroke='%2341484B' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dezen-lime:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M6 24 L17 11 L28 24' fill='none' stroke='%23C9E62A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dezen-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M6 24 L17 11 L28 24' fill='none' stroke='%23CFCEC2' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --prst:44px;--nav-h:68px;--wrap:72rem;--gut:clamp(1rem,4vw,2.5rem)
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:clamp(15px,.5vw + 13px,18px);scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* tlačidlá */
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:var(--prst);padding:.7rem 1.25rem;border-radius:999px;font-weight:600;text-decoration:none;font-family:var(--body);border:2px solid transparent;transition:transform .2s,background .2s,color .2s}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{background:#DDF55A;transform:translateY(-2px)}
.btn--ghost{border-color:currentColor;color:var(--paper);background:transparent}
.btn--ghost:hover{background:var(--paper);color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--ink-3)}
.tel{font-family:var(--body);font-variant-numeric:lining-nums tabular-nums}

/* navigácia */
.nav{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper);border-bottom:1px solid var(--ink-3)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:1rem}
.nav__logo{display:flex;align-items:center;min-height:var(--prst)}
.nav__logo img{height:36px;width:auto}
.nav__links{display:flex;align-items:center;gap:1.4rem}
.nav__links a:not(.btn){text-decoration:none;font-weight:500;min-height:var(--prst);display:inline-flex;align-items:center}
.nav__links a:not(.btn):hover{color:var(--lime)}
.nav__toggle{display:none;min-height:var(--prst);min-width:var(--prst);background:none;border:0;color:var(--paper);cursor:pointer}
.nav__toggle span{display:block;width:22px;height:2px;background:currentColor;margin:5px auto}
.drawer{position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.2rem var(--gut) 1.6rem;border-bottom:1px solid var(--ink-3);z-index:49}
.drawer a:not(.btn){text-decoration:none;font-weight:600;font-size:1.1rem;min-height:var(--prst);display:flex;align-items:center}
.drawer a.btn--lime{color:var(--ink)}
@media (max-width:760px){.nav__links{display:none}.nav__toggle{display:block}}
@media (min-width:761px){.drawer{display:none!important}}

/* hero */
.hero{background:var(--ink);color:var(--paper);min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(1.5rem,5vh,4rem);width:100%}
.hero__eyebrow{color:var(--lime);margin:0 0 clamp(.8rem,2.5vh,1.4rem)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,min(5.4vw,8.4vh),4.6rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 clamp(.8rem,2.5vh,1.4rem)}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero__lead{font-size:clamp(1rem,min(1.5vw,2.4vh),1.25rem);color:#D9DBD3;max-width:34rem;margin:0 0 clamp(1.2rem,3.5vh,2rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem}
.hero__rating{display:inline-flex;align-items:center;gap:.5rem;margin-top:clamp(1rem,3vh,1.8rem);min-height:var(--prst);color:var(--paper);text-decoration:none;border-bottom:1px solid var(--ink-3)}
.hero__rating b{font-family:var(--display);font-size:1.1rem}
.hero__rating svg{width:1rem;height:1rem;fill:var(--lime)}
.hero__rating:hover{border-color:var(--lime)}
.hero__tyre{position:relative;justify-self:center;width:min(100%,clamp(12rem,min(30vw,52vh),26rem))}
.hero__tyre svg{width:100%;height:auto;display:block}
@media (prefers-reduced-motion:no-preference){
  .js .hero__tyre{animation:privaz 1.1s cubic-bezier(.2,.8,.2,1) both .15s}
  @keyframes privaz{from{transform:translateX(60%) rotate(18deg);opacity:0}to{transform:none;opacity:1}}
}
@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr}
  .hero__tyre{order:-1;width:clamp(7rem,30vh,11rem);justify-self:start}
}

/* stopa dezénu — podpisový prvok: pás, ktorý „prejde" pri skrolovaní */
.stopa{height:34px;background-color:var(--ink);background-image:var(--dezen);background-size:34px 34px;background-repeat:repeat-x;background-position:var(--posun,0) 0}
.stopa--paper{background-color:var(--paper);background-image:var(--dezen-paper)}
.stopa--lime{background-image:var(--dezen-lime)}

/* sekcie */
.sec{padding-block:clamp(3.5rem,9vw,7rem)}
.sec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1.5rem 3rem;align-items:end;margin-bottom:clamp(2rem,5vw,3.5rem)}
.sec__label{color:var(--muted);margin:0 0 .8rem}
.sec h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.08;letter-spacing:-.015em;margin:0}
.sec__intro{margin:0;color:var(--muted);max-width:36rem}
@media (max-width:760px){.sec__head{grid-template-columns:1fr}}

/* služby — očíslovaný zoznam, nie mriežka kariet */
.sluzby{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.sluzba{display:grid;grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1fr);gap:1rem 2rem;align-items:baseline;padding:1.4rem 0;border-bottom:1px solid var(--line);transition:background .25s,padding .25s}
.sluzba__cislo{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.sluzba h3{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.2;margin:0}
.sluzba p{margin:0;color:var(--muted)}
@media (hover:hover){.sluzba:hover{background:var(--paper-2);padding-inline:1rem}}
.sluzba--aj{background:var(--ink);color:var(--paper);border-bottom:0;padding-inline:1rem;margin-top:1.2rem;border-radius:4px}
.sluzba--aj .sluzba__cislo{color:var(--lime)}
.sluzba--aj p{color:var(--muted-dark)}
@media (hover:hover){.sluzba--aj:hover{background:var(--ink-2)}}
@media (max-width:760px){.sluzba{grid-template-columns:3rem minmax(0,1fr)}.sluzba p{grid-column:2}}
.poznamka{margin:1.4rem 0 0;color:var(--muted);font-size:.95rem}

/* prevádzka — fotka + fakty */
.prev{background:var(--paper-2);color:var(--ink)}
.prev__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.prev figure{margin:0}
.prev figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px}
.prev figcaption{margin-top:.6rem;color:var(--muted)}
.fakty{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:0}
.fakty li{display:flex;gap:1rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--line)}
.fakty b{font-family:var(--display);font-weight:700;min-width:6.5rem}
@media (max-width:860px){.prev__grid{grid-template-columns:1fr}}

/* kontakt */
.kontakt{background:var(--ink);color:var(--paper)}
.kontakt .sec__label{color:var(--lime)}
.kontakt .sec__intro{color:var(--muted-dark)}
.k-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--paper)}
.k-box{padding:1.5rem 1.5rem 1.8rem 0;border-bottom:1px solid var(--ink-3)}
.k-box + .k-box{padding-left:1.5rem;border-left:1px solid var(--ink-3)}
.k-box .mono{color:var(--muted-dark);margin:0 0 .7rem}
.k-box p{margin:0 0 .4rem}
.k-box a:not(.btn){display:inline-flex;align-items:center;min-height:var(--prst);text-decoration:none;border-bottom:1px solid var(--ink-3)}
.k-box a:not(.btn):hover{border-color:var(--lime);color:var(--lime)}
.k-box .velke{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.6rem)}
.k-box .velke.tel{font-family:var(--body);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.k-box .btn{margin-top:.8rem}
@media (max-width:860px){.k-grid{grid-template-columns:1fr}.k-box,.k-box + .k-box{padding:1.4rem 0;border-left:0}}

/* doplniť — viditeľná medzera, nie vynechanie */
.doplnit,.k-box .doplnit,.sluzba .doplnit,.prev .doplnit{display:inline-block;background:#FFE7A3;color:#4A3500;border:1px dashed #B58900;border-radius:3px;padding:.15rem .5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:none;font-weight:500}

/* pätička */
.foot{background:var(--ink);color:var(--muted-dark);border-top:1px solid var(--ink-3);padding-block:2rem 2.4rem;font-size:.9rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.foot img{height:28px;width:auto}
.foot a{display:inline-flex;align-items:center;min-height:var(--prst);text-decoration:none}
.foot a:hover{color:var(--lime)}
.foot p{margin:0}

/* odhalenia */
@media (prefers-reduced-motion:no-preference){
  .js .vynor{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .js .vynor.je{opacity:1;transform:none}
}