/* Wizalnut web · vizuálny jazyk = schválený high-end deck (PODKLADY_HIGH_END/DECK), nie house DS.
   DS_EXEMPT: klient-facing web agentúry, drží jazyk schváleného decku (biele plátno, Inter 900, sieťotlačové dosky). */
:root{
  --ink:#111; --ink2:#4d4d4d; --muted:#767676; --rule:#e4e2dc; --paper:#fff; --panel:#f5f4f0;
  --yellow:#fff200; --pink:#ff3d8b; --cyan:#00b4d8;
  --pad:clamp(16px,5.5vw,110px); --ease:cubic-bezier(.2,.7,.1,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light;overflow-x:clip}
body{font-family:Inter,-apple-system,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
section{padding:clamp(72px,11vh,140px) var(--pad);position:relative;scroll-margin-top:64px}
.wrap{max-width:1500px;margin:0 auto}
.kicker{font-size:clamp(13px,1.1vw,16px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:18px}
h2{font-size:clamp(34px,5vw,76px);font-weight:900;line-height:1.03;letter-spacing:-.02em;margin-bottom:22px;max-width:1150px;overflow-wrap:break-word}
h3{font-size:clamp(22px,2vw,32px);font-weight:900;line-height:1.15;letter-spacing:-.01em}
.lead{font-size:clamp(18px,1.6vw,25px);line-height:1.5;color:var(--ink2);max-width:980px}
.mark{background:linear-gradient(transparent 58%,var(--yellow) 58% 92%,transparent 92%)}
.cap{font-size:15px;color:var(--muted);margin-top:12px;line-height:1.45}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;height:64px;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.sc{border-bottom-color:var(--rule)}
.brand{font-weight:900;font-size:20px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand i{font-style:normal;display:inline-block;width:10px;height:10px;background:var(--yellow);border:2px solid var(--ink);margin-right:8px;vertical-align:1px}
.nav ul{list-style:none;display:flex;gap:26px;align-items:center}
.nav ul a{text-decoration:none;font-size:15px;font-weight:600;color:var(--ink2)}
.nav ul a:hover{color:var(--ink)}
.nav .lang{font-weight:800;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:13px;letter-spacing:.08em}
.nav .cta{background:var(--ink);color:#fff!important;border-radius:999px;padding:9px 18px}
@media (max-width:900px){.nav ul .hm{display:none}.nav ul{gap:12px}}

/* REVEAL */
.rv{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.up{transform:translateY(50px)} .rv.in{opacity:1;transform:none}
html.no-js .rv{opacity:1;transform:none}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:100px}
.hero h1{font-size:clamp(46px,9vw,164px);font-weight:900;line-height:.93;letter-spacing:-.035em;position:relative;z-index:2}
.hero h1 .line{display:block;overflow:hidden;padding:.06em 0 .2em;margin:-.06em 0 -.2em}
.hero h1 .line span{display:inline-block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
@keyframes rise{to{transform:none}}
.hero .kicker,.hero .lead,.hero .heroc{opacity:0;animation:fade .9s .6s forwards;position:relative;z-index:2}
.hero .lead{margin-top:30px;max-width:min(860px,52vw)}
.heroc{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:800;font-size:17px;border-radius:999px;padding:14px 26px;border:2px solid var(--ink);background:#fff}
.btn.k{background:var(--ink);color:#fff}
@keyframes fade{to{opacity:1}}
.plates{position:absolute;right:calc(var(--pad) * -.2);top:52%;width:min(46vw,700px);aspect-ratio:1;transform:translateY(-50%);z-index:1;pointer-events:none}
.plates i{position:absolute;inset:0;mix-blend-mode:multiply;opacity:0;animation:plate 1.2s var(--ease) forwards}
.plates i:nth-child(1){background:var(--yellow);clip-path:polygon(18% 8%,92% 14%,86% 90%,10% 84%);animation-delay:.3s}
.plates i:nth-child(2){background:var(--pink);clip-path:circle(26% at 58% 46%);animation-delay:.55s}
.plates i:nth-child(3){background:var(--cyan);clip-path:polygon(34% 56%,78% 60%,74% 96%,30% 92%);animation-delay:.8s;mix-blend-mode:normal}
.plates i:nth-child(4){background:radial-gradient(circle,#111 0 2.2px,transparent 2.6px);background-size:12px 12px;clip-path:circle(30% at 55% 50%);animation-delay:1.05s;mix-blend-mode:normal}
@keyframes plate{from{opacity:0;transform:translateX(60px) rotate(2deg)}to{opacity:.95;transform:none}}
@media (max-width:900px){.hero .lead{max-width:none}.plates{width:92vw;right:-40vw;top:30%;opacity:.45}}

/* PRÍBEH */
.story{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:50px}
.story div{border-top:6px solid var(--ink);padding-top:22px}
.story div.y{border-top-color:var(--yellow)}
.story .yr{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.story b{display:block;font-size:clamp(20px,1.8vw,28px);font-weight:900;margin:8px 0 10px;line-height:1.2}
.story p{font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:var(--ink2)}

/* ČIERNY PÁS */
.stats{background:var(--ink);color:#fff}
.stats .kicker{color:#bdbdbd}.stats h2{color:#fff}.stats .lead{color:#cfcfcf}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,60px);margin-top:40px}
.stat{border-top:6px solid var(--yellow);padding-top:24px}
.stat .n{font-size:clamp(48px,6.5vw,120px);font-weight:900;line-height:.95;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .l{font-size:clamp(15px,1.25vw,20px);color:#cfcfcf;margin-top:14px;line-height:1.4}
.src{font-size:13px;color:#9a9a9a;margin-top:34px}
@media (max-width:900px){.sgrid{grid-template-columns:1fr 1fr}.story{grid-template-columns:1fr}}

/* PRODUKTY */
.flow{background:var(--panel)}
.prod{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.card{background:#fff;border:1px solid var(--rule);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.card .m{aspect-ratio:16/10;background:#000;overflow:hidden}
.card .m video,.card .m img{width:100%;height:100%;object-fit:cover}
.card .m.fit video,.card .m.fit img{object-fit:contain}
.card .m.strip{aspect-ratio:auto;background:#111;padding:28px 0;display:flex;align-items:center}
.card .m.strip img{height:auto}
.card .m.txt{background:var(--yellow);display:flex;align-items:flex-end;padding:22px}
.card .m.txt span{font-size:clamp(28px,3vw,44px);font-weight:900;line-height:.95;letter-spacing:-.03em}
.card .t{padding:20px 22px 24px;flex:1}
.tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff;padding:4px 9px;border-radius:3px;margin-bottom:12px}
.tag.y{background:var(--yellow);color:var(--ink)}
.card b{display:block;font-size:clamp(19px,1.45vw,24px);font-weight:900;margin-bottom:8px;line-height:1.2}
.card p{font-size:clamp(15px,1.1vw,17px);color:var(--ink2);line-height:1.5}
.card .out{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink);font-weight:600;line-height:1.45}
@media (max-width:1000px){.prod{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.prod{grid-template-columns:1fr}}
.card.wide{grid-column:1/-1;flex-direction:row}
.card.wide .m{aspect-ratio:auto;flex:0 0 36%;min-height:220px}
.card.wide .t a{font-weight:700}
@media (max-width:760px){.card.wide{flex-direction:column}.card.wide .m{flex:none;min-height:150px}}

/* PROCES */
.path{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:44px}
.path .p{border-top:6px solid var(--ink);padding-top:14px}
.path .p.h{border-top-color:var(--yellow)}
.path .no{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
.path b{display:block;font-size:clamp(16px,1.25vw,20px);font-weight:900;margin:6px 0;line-height:1.2}
.path span{font-size:clamp(14px,1vw,16px);color:var(--ink2);line-height:1.45;display:block}
.legend{display:flex;gap:26px;margin-top:18px;font-size:14px;color:var(--ink2);flex-wrap:wrap}
.legend i{display:inline-block;width:26px;height:6px;margin-right:8px;vertical-align:middle;background:var(--ink)}
.legend i.h{background:var(--yellow)}
@media (max-width:1100px){.path{grid-template-columns:repeat(3,1fr);row-gap:26px}}
@media (max-width:560px){.path{grid-template-columns:1fr}}

.two{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;margin-top:60px}
.feat{list-style:none}
.feat li{padding:20px 0;border-bottom:1px solid var(--rule)}
.feat li:first-child{border-top:1px solid var(--rule)}
.feat b{display:block;font-size:clamp(19px,1.6vw,25px);margin-bottom:6px}
.feat span{font-size:clamp(15px,1.2vw,19px);color:var(--ink2);line-height:1.45}
@media (max-width:900px){.two{grid-template-columns:1fr}}

.cmp{position:relative;aspect-ratio:1;max-height:78vh;overflow:hidden;border-radius:4px;box-shadow:0 40px 90px rgba(0,0,0,.16);user-select:none;touch-action:none;cursor:ew-resize;margin:0 auto}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .top{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:4px;margin-left:-2px;background:var(--yellow);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.cmp .bar::after{content:"\21C6";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:20px}
.cmp .lab{position:absolute;top:14px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#fff;padding:5px 9px;border-radius:3px}
.cmp .lab.l{left:14px}.cmp .lab.r{right:14px;background:var(--yellow);color:var(--ink)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.duo video{width:100%;aspect-ratio:940/528;object-fit:cover;background:#000;border-radius:4px;box-shadow:0 30px 70px rgba(0,0,0,.14)}
.vlab{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#fff;padding:5px 9px;border-radius:3px;margin-bottom:10px}
.vlab.y{background:var(--yellow);color:var(--ink)}
@media (max-width:900px){.duo{grid-template-columns:1fr}}

/* PRE KOHO */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px);margin-top:44px}
.who div{border-top:6px solid var(--ink);padding-top:20px}
.who b{display:block;font-size:clamp(19px,1.5vw,24px);font-weight:900;margin-bottom:8px}
.who p{font-size:clamp(15px,1.1vw,18px);line-height:1.5;color:var(--ink2)}
@media (max-width:1000px){.who{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.who{grid-template-columns:1fr}}

/* REFERENCIE */
.film{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;margin-top:56px}
.film .m{aspect-ratio:16/10;background:#000;overflow:hidden;border-radius:4px}
.film .m video,.film .m img{width:100%;height:100%;object-fit:cover}
.film .m.fit video{object-fit:contain}
.film .cap{color:#9a9a9a}
@media (max-width:900px){.film{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--rule);font-size:clamp(15px,1.2vw,19px);line-height:1.45}
.kv:first-of-type{border-top:1px solid var(--rule);margin-top:28px}
.kv i{font-style:normal;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.kv span{color:var(--ink2)}
@media (max-width:560px){.kv{grid-template-columns:1fr;gap:4px}}
.shot{border:1px solid var(--rule);box-shadow:0 40px 90px rgba(0,0,0,.16);border-radius:4px;width:100%;height:auto;background:#000}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:40px}
.mosaic img,.mosaic video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;background:var(--panel)}
@media (max-width:900px){.mosaic{grid-template-columns:1fr 1fr}}
.hotel{grid-template-columns:1fr minmax(0,380px)}
.vert{aspect-ratio:9/16;width:100%;max-width:380px;margin-left:auto;background:#000;border-radius:4px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.16)}
.vert video{width:100%;height:100%;object-fit:cover}
.hotel p{margin-top:16px;font-size:clamp(16px,1.2vw,19px);line-height:1.55;color:var(--ink2);max-width:62ch}
.hotel .kv:first-of-type{border-top:0}
.hotel p+.kv{border-top:1px solid var(--rule);margin-top:28px}
@media (max-width:900px){.hotel{grid-template-columns:1fr}.vert{margin:0 auto;max-width:340px}}

/* BLOG */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.post-c{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--rule);border-top:6px solid var(--ink);border-radius:8px;padding:22px 24px 24px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post-c:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,.08)}
.post-c .d{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.post-c b{display:block;font-size:clamp(20px,1.6vw,26px);font-weight:900;line-height:1.2;margin-bottom:10px}
.post-c p{font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:var(--ink2);flex:1}
.post-c .go{margin-top:16px;font-weight:800;font-size:15px}
.more{margin-top:28px}
@media (max-width:1000px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.posts{grid-template-columns:1fr}}
#blog+#kontakt,#blog+#contact{border-top:1px solid var(--rule)}
.article{padding-top:clamp(110px,16vh,170px)}
.article .wrap{max-width:780px}
.article h1{font-size:clamp(36px,5vw,66px);font-weight:900;line-height:1.05;letter-spacing:-.025em;margin-bottom:20px;overflow-wrap:break-word}
.article .sum{font-size:clamp(19px,1.6vw,24px);line-height:1.5;color:var(--ink2);margin-bottom:34px}
.article .meta{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.article .meta a{text-decoration:none}
.prose{border-top:1px solid var(--rule);padding-top:34px}
.prose p,.prose li{font-size:clamp(17px,1.25vw,20px);line-height:1.65;color:#222}
.prose p{margin-bottom:20px}
.prose h2{font-size:clamp(24px,2.4vw,34px);line-height:1.15;margin:46px 0 16px;letter-spacing:-.015em}
.prose h3{margin:34px 0 12px}
.prose ul,.prose ol{margin:0 0 22px 1.3em}
.prose li{margin-bottom:10px;padding-left:4px}
.prose code{font-size:.9em;background:var(--panel);padding:1px 5px;border-radius:3px}
.prose a{text-decoration-thickness:2px;text-underline-offset:3px}
.back{margin-top:46px;display:flex;gap:12px;flex-wrap:wrap}
.blog-list{padding-top:clamp(110px,16vh,170px)}

/* CLAUDE */
.letter{max-width:900px}
.letter p{font-size:clamp(19px,1.7vw,26px);line-height:1.55;color:var(--ink);margin-top:22px}
.letter .sig{font-size:16px;color:var(--muted);margin-top:28px;font-weight:600}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px}
.stack div{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:22px 24px}
.stack b{display:block;font-size:clamp(18px,1.4vw,22px);font-weight:900;margin-bottom:8px}
.stack p{font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:var(--ink2)}
@media (max-width:760px){.stack{grid-template-columns:1fr}}

/* INTERNÉ / NÁVRH (skryje ?mode=client) */
.draft{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--pink);color:#fff;padding:5px 10px;border-radius:3px;margin-bottom:14px}
.ph{background:#ffe6f0;outline:2px dashed var(--pink);padding:0 4px;border-radius:2px}
html.client [data-internal]{display:none!important}

/* ZAČAŤ + PÄTA */
.bul3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,4vw,60px);margin-top:46px}
.bul3 div{border-top:6px solid var(--ink);padding-top:22px}
.bul3 b{display:block;font-size:clamp(21px,1.9vw,30px);font-weight:900;line-height:1.2;margin-bottom:10px}
.bul3 p{font-size:clamp(16px,1.25vw,20px);line-height:1.5;color:var(--ink2)}
@media (max-width:900px){.bul3{grid-template-columns:1fr}}
.band{margin-top:80px;background:var(--yellow);padding:56px var(--pad);display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px}
.band .big{font-size:clamp(38px,6vw,104px);font-weight:900;line-height:.92;letter-spacing:-.035em}
.band a{font-size:clamp(18px,1.6vw,24px);font-weight:800}
.band .bk .btn{display:inline-block;margin-bottom:16px;font-size:clamp(16px,1.3vw,20px)}
#kontakt{padding-bottom:0}
footer{background:var(--ink);color:#cfcfcf;padding:56px var(--pad) 40px;font-size:15px;line-height:1.6}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer b{color:#fff;display:block;margin-bottom:8px;font-size:16px}
footer a{color:#fff}
footer .ph{background:#3a2430;outline-color:var(--pink);color:#fff}
footer .fine{grid-column:1/-1;border-top:1px solid #333;padding-top:22px;font-size:13px;color:#8a8a8a}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

@media (prefers-reduced-motion: reduce){
  .rv,.hero h1 .line span,.hero .kicker,.hero .lead,.hero .heroc,.plates i{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}
/* FAQ (8. 10. 2026) */
#faq .faq{margin-top:36px;border-top:2px solid var(--ink)}
#faq details{border-bottom:1px solid rgba(0,0,0,.18);padding:20px 0}
#faq summary{cursor:pointer;font-weight:800;font-size:clamp(18px,1.6vw,22px);list-style:none;display:flex;justify-content:space-between;gap:16px}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";font-weight:900;flex-shrink:0}
#faq details[open] summary::after{content:"–"}
#faq details p{margin:12px 0 0;max-width:760px;line-height:1.55}