@font-face{font-family:"Gabarito";src:url(fonts/gabarito.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Rethink Sans";src:url(fonts/rethink-sans.woff2) format("woff2");font-weight:400 800;font-display:swap}

:root{
 --ink:#1E2A36;--ink-700:#2E3D4C;--ink-500:#55667A;--ink-300:#A9B3BE;
 --cream:#F6F1E9;--cream-2:#EDE4D6;--paper:#FFFCF7;
 --terra:#C0592E;--terra-700:#9E4520;--terra-300:#E08A5E;--terra-100:#F5DCCB;
 --display:"Gabarito",system-ui,sans-serif;--body:"Rethink Sans",system-ui,sans-serif;
 --prst:44px;--nav-h:72px;--wrap:72rem;--gut:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:clamp(15px,.45vw + 13.3px,19px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1rem/1.6 var(--body);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.04;margin:0;letter-spacing:-.015em}
h2{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:800;max-width:22ch}
h3{font-size:1.5rem;font-weight:800}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:12px 16px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
section[id]{scroll-margin-top:var(--nav-h)}

.eyebrow{font:700 .78rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--terra-700);margin-bottom:.9rem}

/* tlačidlá */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--prst);padding:.7rem 1.35rem;border-radius:999px;font:700 1rem/1.1 var(--body);text-decoration:none;border:2px solid transparent;transition:background .2s,color .2s,transform .2s,border-color .2s}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn--primary{background:var(--terra-700);color:#fff}
.btn--primary:hover{background:var(--ink);transform:translateY(-1px)}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.btn--call{background:var(--ink);color:var(--cream)}
.btn--call:hover{background:var(--terra-700)}

/* navigácia */
.nav{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.is-scrolled{border-color:var(--cream-2)}
.nav__in{display:flex;align-items:center;gap:1.5rem;height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;min-height:var(--prst);margin-right:auto}
.nav__logo img{height:52px;width:auto}
.nav__links{display:flex;gap:.4rem}
.nav__links a{display:inline-flex;align-items:center;min-height:var(--prst);padding:0 .8rem;font-weight:600;text-decoration:none;border-radius:999px}
.nav__links a:hover{background:var(--cream-2)}
.nav__burger{display:none;width:var(--prst);height:var(--prst);border:0;background:var(--ink);border-radius:50%;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__burger span{display:block;width:18px;height:2px;background:var(--cream);transition:transform .2s}
.nav__burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:absolute;left:0;right:0;top:var(--nav-h);background:var(--cream);border-bottom:1px solid var(--cream-2);display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem var(--gut) 1.5rem;box-shadow:0 18px 30px -18px rgba(30,42,54,.35)}
.menu a:not(.btn){display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;font:700 1.2rem var(--display);text-decoration:none}
.menu .btn{margin-top:.5rem;width:100%}

/* hero */
.hero{padding-block:clamp(1.5rem,4vh,3rem) clamp(2rem,6vh,4rem)}
.hero__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center;min-height:calc(100svh - var(--nav-h) - 7vh)}
.hero h1{font-size:clamp(2.6rem,min(6.4vw,9.6vh),5.6rem);font-weight:850;line-height:1.02;letter-spacing:-.025em}
.hero h1 span{color:var(--terra-700)}
.lead{font-size:clamp(1.05rem,min(1.5vw,2.4vh),1.3rem);max-width:34ch;margin-top:clamp(.9rem,2.4vh,1.5rem);color:var(--ink-700)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.2rem,3.4vh,2.2rem)}
.rating{display:inline-flex;align-items:center;gap:.6rem;min-height:var(--prst);margin-top:clamp(1rem,2.6vh,1.6rem);text-decoration:none;color:var(--ink-700);font-size:.95rem}
.rating strong{font:800 1.6rem var(--display);color:var(--ink)}
.rating__stars{color:var(--terra);letter-spacing:.08em}
.rating:hover span:last-child{text-decoration:underline}
.hero__photo{margin:0;position:relative;justify-self:end;width:100%;max-width:30rem}
.hero__photo>img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;border-radius:clamp(1.2rem,2vw,2rem) clamp(1.2rem,2vw,2rem) 999px 999px;max-height:calc(100svh - var(--nav-h) - 9rem)}
.hero__photo figcaption{position:absolute;left:-1.5rem;bottom:1.5rem;display:flex;align-items:center;gap:.7rem;background:var(--paper);color:var(--ink);padding:.55rem 1.1rem .55rem .55rem;border-radius:999px;font-weight:700;font-size:.92rem;box-shadow:0 12px 30px -12px rgba(30,42,54,.4)}
.hero__photo figcaption img{width:40px;height:40px;border-radius:50%;background:var(--cream);padding:3px}

/* strihy + meter */
.strihy{background:var(--paper);color:var(--ink);padding-block:clamp(4rem,9vw,7rem)}
.sec-head{margin-bottom:clamp(2rem,4vw,3.5rem)}
.meter{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1.2rem}
.meter__scale{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;border-right:3px solid var(--ink);font:700 .75rem var(--body);color:var(--ink-500);text-align:right;padding-right:.55rem;
 background:repeating-linear-gradient(to bottom,var(--ink) 0 2px,transparent 2px 10%) right/10px 100% no-repeat}
.meter__scale li{line-height:1;padding-right:.6rem}
.meter__cards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:end}
.kid-card{position:relative;background:var(--cream);color:var(--ink);border-radius:1.6rem;padding:clamp(1.4rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:flex-end;gap:.7rem;overflow:hidden}
.kid-card--pan{min-height:clamp(22rem,36vw,28rem)}
.kid-card--det{min-height:clamp(15rem,24vw,19rem);background:var(--terra-100)}
.kid-card p{max-width:32ch;color:var(--ink-700)}
.kid-card::before{content:"";position:absolute;left:-1.2rem;right:0;top:0;border-top:2px dashed var(--terra)}
.kid-card__mark{position:absolute;top:1.2rem;right:1.2rem;width:clamp(5rem,9vw,7.5rem);aspect-ratio:1;background:url(brand/mark.svg) center/contain no-repeat}
.kid-card--det .kid-card__mark{width:clamp(3.6rem,6vw,5rem);background-image:url(brand/mark.svg)}
.cennik{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:center;border-top:1px solid var(--cream-2);padding-top:1.8rem}
.cennik h3{margin-bottom:.5rem}
.cennik__note{color:var(--ink-500)}

/* viditeľné medzery */
body .doplnit,.kid-card p.doplnit,.cennik p.doplnit,.foot p .doplnit,.kontakt dd .doplnit{display:inline-block;background:#FFF1B8;color:#5A4300;border:1.5px dashed #B98A00;border-radius:.4rem;padding:.15rem .5rem;font:600 .9rem/1.4 var(--body)}

/* recenzie */
.recenzie{background:var(--ink);color:var(--cream);padding-block:clamp(4rem,9vw,7rem)}
.recenzie .eyebrow{color:var(--terra-300)}
.recenzie__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.score{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;color:var(--cream);min-height:var(--prst)}
.score strong{font:850 clamp(3rem,6vw,4.6rem)/1 var(--display);color:var(--terra-300)}
.score span{color:var(--ink-300)}
.rail{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));scroll-padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));padding-bottom:1.2rem;scrollbar-width:thin;scrollbar-color:var(--terra-300) transparent}
.quote{flex:0 0 min(84vw,23rem);scroll-snap-align:start;margin:0;background:var(--ink-700);color:var(--cream);border-radius:1.4rem;padding:1.6rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem}
.quote p{font-size:1.02rem;line-height:1.55}
.quote p::before{content:"„";font:800 2.6rem/0 var(--display);color:var(--terra-300);display:block;height:1.2rem}
.quote footer{font-weight:700;color:var(--cream)}
.quote footer span{font-weight:400;color:var(--ink-300)}
.more{display:inline-flex;align-items:center;min-height:var(--prst);margin-top:1rem;color:var(--terra-300);font-weight:700;text-decoration:none}
.more:hover{text-decoration:underline}

/* kontakt */
.kontakt{padding-block:clamp(4rem,9vw,7rem) clamp(5rem,10vw,8rem)}
.kontakt__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.kontakt dl{margin:1.8rem 0 0;display:grid;gap:1.1rem}
.kontakt dl div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;border-top:1px solid var(--cream-2);padding-top:1rem}
.kontakt dt{font-weight:700;color:var(--ink-500);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;padding-top:.15rem}
.kontakt dd{margin:0}
.tel{display:inline-flex;align-items:center;min-height:var(--prst);margin-block:-.6rem;font:800 1.5rem var(--body);text-decoration:none;color:var(--terra-700)}
.tel:hover{text-decoration:underline}
.kontakt__cta{display:flex;gap:.75rem;margin-top:1.8rem;flex-wrap:wrap}
.kontakt__photo{margin:0}
.kontakt__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:1.8rem}

/* päta */
.foot{background:var(--ink);color:var(--ink-300);padding-block:3rem 6rem;font-size:.9rem}
.foot__in{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.foot img{width:220px}
.foot__txt{display:grid;gap:.4rem;text-align:right}
.foot a{display:inline-flex;align-items:center;min-height:var(--prst);color:var(--cream);margin-block:-.7rem}

/* lepiaca lišta na mobile */
.callbar{display:none}

/* odhalenie pri scrolle — len s JS */
@media (prefers-reduced-motion:no-preference){
 .js .vynor{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
 .js .vynor.je{opacity:1;transform:none}
 .js .kid-card__mark{transform:scale(.6) rotate(-8deg);transition:transform .9s cubic-bezier(.3,1.6,.5,1) .15s}
 .js .kid-card.je .kid-card__mark{transform:none}
}

@media (max-width:900px){
 .nav__links{display:none}
 .nav__call span{display:none}
 .nav__call{width:var(--prst);padding:0}
 .nav__burger{display:flex}
 .hero__in{grid-template-columns:1fr;min-height:0;gap:2rem}
 .hero__photo{justify-self:center;max-width:24rem}
 .hero__photo>img{max-height:none}
 .hero__photo figcaption{left:.75rem}
 .kontakt__in{grid-template-columns:1fr}
 .cennik{grid-template-columns:1fr}
}
@media (max-width:640px){
 :root{--nav-h:64px}
 .nav__logo img{height:38px}
 .meter{grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem}
 .meter__cards{grid-template-columns:1fr;align-items:stretch}
 .kid-card--pan,.kid-card--det{min-height:15rem}
 .kid-card::before{left:0}
 .kontakt dl div{grid-template-columns:1fr;gap:.2rem}
 .foot__txt{text-align:left}
 .score{align-items:flex-start}
 .callbar{display:flex;align-items:center;justify-content:center;gap:.6rem;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;min-height:52px;border-radius:999px;background:var(--terra-700);color:#fff;font:700 1.05rem var(--body);text-decoration:none;box-shadow:0 12px 30px -10px rgba(30,42,54,.55)}
 .callbar svg{width:20px;height:20px;fill:currentColor}
}