@font-face{font-family:"Inter Tight";src:url(fonts/InterTight.woff) format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/JetBrainsMono.woff) format("woff");font-weight:100 800;font-display:swap}
:root{--ink:#0A0A0B;--cream:#F2F1EE;--paper:#F4F3EF;--lime:#C8FF3D;--mute:#8E8E93;--mute-l:#66666B;--line:#26262A;--line-l:#DDDCD6;--gut:clamp(18px,4vw,56px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{background:var(--ink);color:var(--cream);font-family:"Inter Tight",system-ui,sans-serif;font-size:19px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
i{font-style:normal}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--ink);padding:10px 16px;border-radius:8px;z-index:50}
.skip:focus{left:12px}
h2{font-size:clamp(44px,7vw,92px);line-height:.98;letter-spacing:-.04em;font-weight:600}
h3{font-weight:600;letter-spacing:-.025em;line-height:1.08}

/* hlavička */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 var(--gut);mix-blend-mode:difference;color:#fff}
.logo{font-weight:700;font-size:21px;letter-spacing:-.02em}
.top nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-size:16px}
.top nav a:hover{opacity:.65}
.pill{border:1.5px solid #fff;border-radius:999px;padding:7px 16px}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:96px var(--gut) clamp(28px,5vh,56px)}
.hero h1{font-size:min(15.2vw,24vh);line-height:.9;letter-spacing:-.05em;font-weight:600}
.hero h1 span{display:block}
.hero h1 i,.logo i,.ai__big i,.foot i{color:var(--lime)}
.top .logo i{color:#fff}
.hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:clamp(24px,5vh,48px);flex-wrap:wrap}
.hero__row p{max-width:34em;font-size:clamp(19px,1.7vw,23px);color:#c9c8c4}
.btn{display:inline-flex;align-items:center;height:58px;padding:0 30px;border-radius:999px;background:var(--lime);color:var(--ink);font-weight:600;font-size:18px;white-space:nowrap;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}

/* práce (světlá část, stejně jako práce na Instagramu) */
.work{background:var(--paper);color:var(--ink)}
.work__stick{padding:clamp(64px,10vw,110px) var(--gut)}
.work__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.tabs{display:none}
.proj{display:grid;gap:28px}
.proj + .proj{margin-top:72px;padding-top:56px;border-top:1.5px solid var(--line-l)}
.kick{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-l);margin-bottom:12px}
.proj h3{font-size:clamp(32px,3.6vw,50px);margin-bottom:16px}
.proj__txt>p:not(.kick){color:#4c4c50;max-width:30em}
.proj ul{margin:20px 0;border-top:1.5px solid var(--line-l)}
.proj li{padding:10px 0;border-bottom:1.5px solid var(--line-l);font-size:17px}
.proj li b{font-weight:600}
.out{display:inline-block;font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:1px}
.stage{position:relative;background:var(--ink);border-radius:clamp(16px,2vw,28px);padding:clamp(14px,2.6vw,34px);padding-right:clamp(40px,9vw,120px)}
.win{border-radius:12px;overflow:hidden;background:#1a1a1d;box-shadow:0 0 0 1px #2c2c30}
.bar{height:28px;display:flex;align-items:center;gap:6px;padding:0 12px}
.bar i{width:9px;height:9px;border-radius:50%;background:#3a3a3f}
.view{overflow:hidden;aspect-ratio:16/10}
.strip img{width:100%}
.strip img + img{display:none}
.ph{position:absolute;right:clamp(10px,2vw,28px);bottom:clamp(12px,2vw,28px);width:clamp(74px,17%,170px);border-radius:clamp(14px,1.8vw,24px);border:clamp(3px,.4vw,5px) solid #1c1c1f;overflow:hidden;box-shadow:0 0 0 1px #3a3a3f;background:#000}

/* práce: připnutá vitrína (jen velké obrazovky s pohybem) */
@media (min-width:1000px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  .js .work{height:420vh}
  .js .work__stick{position:sticky;top:0;height:100vh;padding:84px var(--gut) 28px;display:flex;flex-direction:column;overflow:hidden}
  .js .work__head{margin-bottom:20px;align-items:center}
  .js .work h2{font-size:clamp(40px,5vw,64px)}
  .js .tabs{display:flex;gap:6px}
  .js .tabs button{font:inherit;font-size:16px;font-weight:500;background:none;border:1.5px solid var(--line-l);color:var(--ink);border-radius:999px;padding:8px 18px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
  .js .tabs button[aria-selected=true]{background:var(--ink);color:var(--lime);border-color:var(--ink)}
  .js .projs{position:relative;flex:1;min-height:0}
  .js .proj{position:absolute;inset:0;margin:0;padding:0;border:0;display:grid;grid-template-columns:minmax(300px,30%) 1fr;grid-template-rows:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
  .js .proj.is-on{opacity:1;visibility:visible}
  .js .stage{height:100%;display:flex;padding:clamp(14px,1.6vw,22px);padding-right:clamp(56px,6vw,90px)}
  .js .win{width:100%;height:100%;display:flex;flex-direction:column}
  .js .view{flex:1;min-height:0;aspect-ratio:auto;position:relative}
  .js .strip{position:absolute;left:0;right:0;top:0;will-change:transform}
  .js .strip img + img{display:block;clip-path:inset(5.8% 0 0 0);margin-top:-3.6%}
  .js .strip--vyf img + img{clip-path:inset(13% 0 0 0);margin-top:-8.1%}
  .js .ph{width:clamp(110px,13%,170px)}
}

/* co děláme */
.serv,.steps{padding:clamp(72px,11vw,130px) var(--gut)}
.serv__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,60px)}
.serv__grid h3,.steps h3{font-size:clamp(26px,2.4vw,32px);margin-bottom:10px}
.serv__grid p,.steps p{color:#b9b8b4}
.ai{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:end;margin-top:clamp(56px,8vw,96px);padding-top:clamp(28px,4vw,44px);border-top:1.5px solid var(--line)}
.ai__big{font-size:clamp(40px,5.6vw,76px);line-height:1;letter-spacing:-.04em;font-weight:600}
.ai p:last-child{color:#b9b8b4}

/* jak pracujeme – skutečné pořadí kroků */
.steps{border-top:1.5px solid var(--line)}
.steps ol{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,60px);counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--cream);padding-top:14px}
.steps li::before{content:counter(s);display:block;font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--lime);margin-bottom:26px}

/* kontakt */
.cta{background:var(--lime);color:var(--ink);padding:clamp(72px,11vw,130px) var(--gut) clamp(56px,8vw,90px)}
.cta h2{font-size:clamp(52px,10vw,150px);line-height:.92;letter-spacing:-.05em}
.cta>p{font-size:clamp(20px,2vw,26px);margin:24px 0 clamp(36px,5vw,56px);max-width:28em}
.cta ul{border-top:2px solid rgba(0,0,0,.2)}
.cta a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-bottom:2px solid rgba(0,0,0,.2);transition:padding .2s}
.cta a:hover{padding-left:12px}
.cta b{font-size:clamp(24px,3vw,38px);font-weight:600;letter-spacing:-.02em}
.cta span{font-family:"JetBrains Mono",monospace;font-size:clamp(13px,1.2vw,16px)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px var(--gut);font-size:14px;color:var(--mute)}
.foot span:first-child{color:var(--cream);font-weight:700}

@media (max-width:820px){
  .top nav a:not(.pill){display:none}
  .serv__grid,.ai{grid-template-columns:1fr}
  .steps ol{grid-template-columns:1fr 1fr}
  .cta a{flex-direction:column;gap:2px}
}
@media (max-width:480px){.steps ol{grid-template-columns:1fr}.steps li::before{margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}