:root{
  --bottle:#123C33;
  --bottle-2:#0B2B24;
  --mint:#EAF2EE;
  --white:#FFFFFF;
  --slate:#4B5D58;
  --signal:#F3C14B;
  --rule:#C8D8D0;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--mint);color:var(--bottle);font-size:17px;line-height:1.6;overflow-x:hidden;animation:pagein .6s var(--ease) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
.demo{background:var(--bottle);color:#CFE3DA;text-align:center;font-size:.82rem;padding:8px 16px}

/* ---------- hlavička ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(234,242,238,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:box-shadow .3s,background .3s}
header.scrolled{box-shadow:0 1px 0 var(--rule),0 10px 30px -22px rgba(18,60,51,.5);background:rgba(234,242,238,.94)}
.bar{display:flex;justify-content:space-between;align-items:center;height:72px;gap:20px}
.logo{font-family:var(--display);font-weight:700;font-size:1.6rem;text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.logo small{font-family:var(--body);font-weight:400;font-size:.8rem;color:var(--slate);margin-left:8px}
.nav{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-weight:700;font-size:.97rem;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .call{background:var(--bottle);color:#fff;padding:9px 16px;border-radius:10px;transition:transform .2s,background .2s}
.nav .call::after{display:none}
.nav .call:hover{background:var(--bottle-2);transform:translateY(-2px)}
.burger{display:none;width:46px;height:46px;border:0;background:var(--white);border-radius:12px;cursor:pointer;position:relative;box-shadow:0 1px 0 var(--rule)}
.burger span{position:absolute;left:12px;right:12px;height:2.5px;background:var(--bottle);border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:29px}
.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .burger{display:block}
  .menu-open header{-webkit-backdrop-filter:none;backdrop-filter:none}
  .burger{z-index:2}.logo{position:relative;z-index:2}
  .menu-open .logo{color:#fff}.menu-open .logo small{color:#9DBDB0}
  .nav{position:fixed;inset:0;top:0;flex-direction:column;justify-content:center;gap:26px;background:var(--bottle);z-index:1;clip-path:circle(0 at calc(100% - 45px) 36px);transition:clip-path .6s var(--ease);visibility:hidden}
  .nav a{color:#fff;font-family:var(--display);font-size:2rem;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s var(--ease)}
  .nav .call{background:var(--signal);color:var(--bottle);font-size:1.2rem;font-family:var(--body)}
  .menu-open .nav{clip-path:circle(150% at calc(100% - 45px) 36px);visibility:visible}
  .menu-open .nav a{opacity:1;transform:none}
  .menu-open .nav a:nth-child(2){transition-delay:.06s}.menu-open .nav a:nth-child(3){transition-delay:.12s}.menu-open .nav a:nth-child(4){transition-delay:.18s}
  .menu-open .burger{background:var(--signal)}
  .menu-open{overflow:hidden}
}

/* ---------- zvýrazňovač ---------- */
.mark{background:linear-gradient(transparent 58%,var(--signal) 58%,var(--signal) 92%,transparent 92%) no-repeat 0 0/0% 100%;transition:background-size 1s var(--ease) .5s}
.in .mark,.mark.in{background-size:100% 100%}

/* ---------- tlačítka ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--bottle);color:#fff;text-decoration:none;font-weight:700;padding:14px 24px;border-radius:12px;border:0;font-size:1rem;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.btn:hover{background:var(--bottle-2);transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(18,60,51,.7)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.yellow{background:var(--signal);color:var(--bottle)}
.btn.yellow:hover{background:#ffd062}
.link{font-weight:700;text-decoration:none;border-bottom:3px solid var(--signal);transition:border-color .2s}
.link:hover{border-color:var(--bottle)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;padding-top:56px;padding-bottom:84px;align-items:center}
.hero h1{font-family:var(--display);font-size:clamp(2.5rem,6vw,4.6rem);line-height:1;letter-spacing:-.035em;font-weight:700}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block;transform:translateY(105%);animation:up .9s var(--ease) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s}
@keyframes up{to{transform:none}}
.hero p{margin:24px 0 32px;max-width:46ch;color:var(--slate);font-size:1.12rem}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.hero-txt>*:not(h1){opacity:0;animation:fadeup .8s var(--ease) .35s forwards}
.hero-txt .actions{animation-delay:.5s}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.board{background:var(--white);border-radius:20px;padding:26px 26px 18px;box-shadow:0 1px 0 var(--rule),0 24px 50px -28px rgba(18,60,51,.5);position:relative;opacity:0;animation:boardin 1s var(--ease) .45s forwards}
@keyframes boardin{from{opacity:0;transform:translateY(24px) rotate(1.5deg)}to{opacity:1;transform:none}}
.board::before{content:"";position:absolute;top:-10px;right:28px;width:74px;height:22px;background:var(--signal);opacity:.85;border-radius:3px;transform:rotate(4deg)}
.board h2{font-family:var(--display);font-size:1.2rem;font-weight:700;margin-bottom:2px;display:flex;align-items:center;gap:10px}
.pulse{width:9px;height:9px;border-radius:50%;background:#3FA36B;box-shadow:0 0 0 0 rgba(63,163,107,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(63,163,107,0)}100%{box-shadow:0 0 0 0 rgba(63,163,107,0)}}
.board .sub{font-size:.9rem;color:var(--slate);margin-bottom:12px}
.dl{list-style:none}
.dl li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;border-top:1px solid var(--rule);opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .5s var(--ease)}
.dl li.show{opacity:1;transform:none}
.dl .what{font-weight:700}
.dl .date{font-size:.9rem;color:var(--slate)}
.dl .days{grid-row:span 2;align-self:center;text-align:right;font-family:var(--display);font-size:1.9rem;font-weight:700;line-height:1;min-width:64px;font-variant-numeric:tabular-nums}
.dl .days small{display:block;font-family:var(--body);font-size:.75rem;font-weight:400;color:var(--slate)}
.dl li.soon .days{background:var(--signal);padding:6px 10px;border-radius:8px}
.board .fine{font-size:.8rem;color:var(--slate);padding-top:12px;border-top:1px solid var(--rule)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:40px;padding-top:36px;padding-bottom:64px}}

/* ---------- pás ---------- */
.ticker{background:var(--bottle);color:#fff;overflow:hidden;padding:16px 0;white-space:nowrap}
.ticker .track{display:inline-flex;gap:48px;animation:tick 32s linear infinite;font-family:var(--display);font-size:1.25rem}
.ticker .track span::before{content:"✓";color:var(--signal);margin-right:12px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sekce ---------- */
section{padding:84px 0}
.h2{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.025em;line-height:1.08;margin-bottom:14px}
.intro{color:var(--slate);max-width:60ch;margin-bottom:40px;font-size:1.05rem}
.eyebrow{display:inline-block;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.white{background:var(--white)}

/* karty služeb na úvodu */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--mint);border-radius:18px;padding:28px;text-decoration:none;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.card::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -28px rgba(18,60,51,.6)}
.card:hover::after{transform:scaleX(1)}
.card .ico{width:52px;height:52px;border-radius:14px;background:var(--bottle);color:var(--signal);display:grid;place-items:center}
.card .ico svg{width:26px;height:26px}
.card h3{font-family:var(--display);font-size:1.5rem}
.card p{color:var(--slate);font-size:.98rem;flex:1}
.card .more{font-weight:700;font-size:.95rem}
.card .more .arr{display:inline-block;transition:transform .25s var(--ease)}
.card:hover .more .arr{transform:translateX(5px)}
@media (max-width:860px){.cards{grid-template-columns:1fr}}

/* postup */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
.flow::before{content:"";position:absolute;top:47px;left:12%;right:12%;height:3px;background:repeating-linear-gradient(90deg,var(--bottle) 0 10px,transparent 10px 18px);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .2s;z-index:0}
.flow.in::before{transform:scaleX(1)}
.f{background:var(--white);border-radius:16px;padding:26px;position:relative;z-index:1;transition:transform .3s var(--ease)}
.f:hover{transform:translateY(-4px)}
.f b{font-family:var(--display);font-size:1.4rem;line-height:1;width:46px;height:46px;border-radius:50%;background:var(--signal);display:grid;place-items:center;margin-bottom:14px}
.f h3{font-size:1.12rem;margin-bottom:6px}
.f p{color:var(--slate);font-size:.97rem}
@media (max-width:820px){.flow{grid-template-columns:1fr}.flow::before{display:none}}

.who{display:flex;flex-wrap:wrap;gap:12px}
.who span{background:var(--white);border:1.5px solid var(--bottle);border-radius:999px;padding:10px 18px;font-weight:700;transition:background .25s,color .25s,transform .25s var(--ease);cursor:default}
.who span:hover{background:var(--bottle);color:#fff;transform:translateY(-3px) rotate(-1.5deg)}

/* výzva */
.cta-band{background:var(--bottle);color:#fff;border-radius:26px;padding:56px;display:grid;grid-template-columns:1.4fr auto;gap:30px;align-items:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(243,193,75,.28),transparent 70%);right:-80px;top:-120px;animation:float 9s ease-in-out infinite}
@keyframes float{50%{transform:translate(-30px,30px)}}
.cta-band p{color:#B8D0C6;margin-top:10px}
.cta-band .h2{margin:0}
@media (max-width:760px){.cta-band{grid-template-columns:1fr;padding:36px 26px}}

/* ---------- podstránky ---------- */
.page-head{padding-top:64px;padding-bottom:44px}
.page-head h1{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.035em;line-height:1;max-width:16ch}
.page-head p{color:var(--slate);max-width:56ch;margin-top:18px;font-size:1.1rem}
.crumbs{font-size:.88rem;color:var(--slate);margin-bottom:18px}
.crumbs a{text-decoration:none;font-weight:700}

.area{display:grid;grid-template-columns:320px 1fr;gap:48px;padding:52px 0;border-top:1px solid var(--rule)}
.area:first-child{border-top:0}
.area .tag{position:sticky;top:100px;align-self:start}
.area .num{font-family:var(--display);font-size:4.4rem;line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--bottle)}
.area h2{font-family:var(--display);font-size:2.2rem;letter-spacing:-.02em;margin:8px 0}
.area .tag p{color:var(--slate)}
.items{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.item{background:var(--white);border-radius:16px;padding:22px;border:1px solid transparent;transition:border-color .3s,transform .3s var(--ease)}
.item:hover{border-color:var(--bottle);transform:translateY(-3px)}
.item h3{font-size:1.08rem;margin-bottom:6px;display:flex;gap:10px;align-items:flex-start}
.item h3::before{content:"";flex:none;width:10px;height:10px;margin-top:8px;border-radius:3px;background:var(--signal);transform:rotate(45deg)}
.item p{color:var(--slate);font-size:.96rem}
@media (max-width:900px){.area{grid-template-columns:1fr;gap:24px}.area .tag{position:static}}
@media (max-width:600px){.items{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:780px}
.q{border-top:1px solid var(--rule)}
.q:last-child{border-bottom:1px solid var(--rule)}
.q button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--display);font-size:1.25rem;font-weight:700}
.q button:focus-visible{outline:3px solid var(--signal);outline-offset:4px}
.q .pm{flex:none;width:36px;height:36px;border-radius:50%;background:var(--white);display:grid;place-items:center;position:relative;transition:background .3s,transform .4s var(--ease)}
.q .pm::before,.q .pm::after{content:"";position:absolute;width:14px;height:2.5px;background:var(--bottle);border-radius:2px}
.q .pm::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.q.open .pm{background:var(--signal);transform:rotate(180deg)}
.q.open .pm::after{transform:rotate(0)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.q.open .a{grid-template-rows:1fr}
.q .a>div{overflow:hidden}
.q .a p{padding:0 0 22px;color:var(--slate);max-width:64ch}

/* kontakt */
.contact{background:var(--bottle);color:#fff}
.contact .intro{color:#B8D0C6}
.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px}
.facts{display:grid;gap:4px}
.fact{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid #2A5549}
.fact .i{flex:none;width:42px;height:42px;border-radius:12px;background:#1C4C41;color:var(--signal);display:grid;place-items:center}
.fact .i svg{width:20px;height:20px}
.fact span{display:block;font-size:.84rem;color:#9DBDB0}
.fact a{font-size:1.18rem;font-weight:700;text-decoration:none;border-bottom:3px solid var(--signal)}
form{display:grid;gap:14px;background:#174A3F;padding:30px;border-radius:20px}
.field{position:relative}
.field input,.field select,.field textarea{width:100%;font:inherit;padding:22px 14px 8px;border-radius:12px;border:2px solid transparent;background:#fff;color:var(--bottle);transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:120px;resize:vertical}
.field label{position:absolute;left:16px;top:16px;color:var(--slate);pointer-events:none;transition:all .2s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgba(243,193,75,.25)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,.field select+label{top:6px;font-size:.74rem;font-weight:700}
.msg{font-size:.88rem;color:#B8D0C6;min-height:1.4em}
.msg.ok{color:var(--signal);font-weight:700}
@media (max-width:860px){.cgrid{grid-template-columns:1fr}}
.map{border-radius:22px;overflow:hidden;aspect-ratio:21/8;background:#d9e6df;border:1px solid var(--rule)}
.map iframe{width:100%;height:100%;border:0;filter:saturate(.7)}
@media (max-width:700px){.map{aspect-ratio:4/3}}
.hours{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:22px}
.hours div{background:#1C4C41;border-radius:10px;padding:10px;text-align:center;font-size:.85rem}
.hours div b{display:block;font-family:var(--display);color:var(--signal)}
.hours div.today{background:var(--signal);color:var(--bottle)}
.hours div.today b{color:var(--bottle)}

footer{padding:34px 0;font-size:.88rem;color:var(--slate)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
footer a{text-decoration:none;font-weight:700}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.1s}.js .rv.d2{transition-delay:.2s}.js .rv.d3{transition-delay:.3s}

.totop{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;border:0;background:var(--bottle);color:var(--signal);font-size:1.3rem;cursor:pointer;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s var(--ease);z-index:40;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.totop.show{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .rv,.board,.hero-txt>*,.dl li{opacity:1!important;transform:none!important}
  .hero h1 .ln>span{transform:none}
  .mark{background-size:100% 100%}
}
main{overflow-x:clip}