/* KZ.digital – vlastné písma (Inter, JetBrains Mono). Žiadne externé služby. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url('/fonts/inter-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url('/fonts/inter-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap;
src:url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap;
src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/spacegrotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/spacegrotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#0a0a0a; --card:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.22);
  --text:#ebebeb; --muted:rgba(235,235,235,.62); --muted-dim:rgba(235,235,235,.36);
  --accent:#ccff00; --accent-2:#10b981; --accent-3:#a3e635;
  --accent-soft:rgba(204,255,0,.12);
  --radius:6px; --maxw:1140px; --ease:cubic-bezier(.22,.68,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
h1,h2,h3,h4,.proj-name,.about-quote,.contact-side h3,.form-state h4,.pillar h5{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.05em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}

/* ambient background */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;top:-32vh;left:50%;width:1150px;height:950px;
  transform:translate3d(-50%,var(--gy,0px),0);
  background:radial-gradient(ellipse at center,rgba(204,255,0,.11),rgba(16,185,129,.07) 40%,transparent 68%);
  filter:blur(18px);will-change:transform}
.glow-2{position:absolute;top:62vh;right:-18vw;width:820px;height:820px;
  transform:translate3d(0,var(--gy2,0px),0);
  background:radial-gradient(circle at center,rgba(16,185,129,.10),transparent 65%);filter:blur(26px);will-change:transform}
.mesh{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;transform:translate3d(0,var(--my,0px),0);
  mask-image:radial-gradient(ellipse 92% 58% at 50% 0%,#000 5%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 92% 58% at 50% 0%,#000 5%,transparent 78%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.15;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:2}

/* nav */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(7,8,11,.55);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
header.stuck{border-bottom-color:var(--line);background:rgba(7,8,11,.85)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-size:1.06rem;font-weight:700;letter-spacing:-.02em}
.logo .dot{color:var(--accent)}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:.88rem;color:var(--muted);transition:color .2s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--accent);transition:right .28s var(--ease)}
.nav-links a:hover::after{right:0}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-cta{white-space:nowrap}
.lbl-short{display:none}
.nav-tel{display:inline-flex;align-items:center;gap:8px;font-size:.87rem;color:var(--muted);
  transition:color .2s;white-space:nowrap}
.nav-tel:hover{color:var(--accent)}
.nav-tel svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:4px;
  background:rgba(255,255,255,.02);cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:11px;width:18px;height:1.6px;background:var(--text);
  transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:24px}
.burger.on span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mnav{display:none;position:fixed;top:70px;left:0;right:0;z-index:49;
  background:rgba(7,8,11,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);padding:12px 24px 22px}
.mnav.on{display:block;animation:mfade .25s var(--ease)}
@keyframes mfade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav a{display:block;padding:15px 2px;font-size:1rem;color:var(--text);border-bottom:1px solid var(--line)}
.mnav a:last-child{border-bottom:none}
.mnav .m-contact{color:var(--accent);font-size:.94rem}
body.menu-open{overflow:hidden}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:7px;
  font-size:.9rem;font-weight:600;letter-spacing:-.01em;transition:all .25s var(--ease);border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--text);color:#0a0a0a}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,255,255,.14)}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-sm{padding:9px 18px;font-size:.83rem}

/* hero */
.hero{padding:96px 0 104px;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border:1px solid var(--line);
  border-radius:7px;font-size:.76rem;color:var(--muted);background:rgba(255,255,255,.02)}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(204,255,0,.5)}70%{box-shadow:0 0 0 9px rgba(204,255,0,0)}100%{box-shadow:0 0 0 0 rgba(204,255,0,0)}}
h1{font-size:clamp(2.55rem,5.3vw,4.2rem);line-height:1.04;letter-spacing:-.055em;font-weight:700;margin:26px 0 0}
h1 .grad{font-style:italic;font-weight:700;color:var(--accent)}
.lead{font-size:clamp(1rem,1.6vw,1.12rem);color:var(--muted);max-width:46ch;margin-top:24px;line-height:1.65}
.hero-cta{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px}
.chip{font-size:.74rem;color:var(--muted-dim);padding:6px 13px;border:1px solid var(--line);border-radius:5px}

.hero-visual{position:relative;height:330px;perspective:1500px;transform-style:preserve-3d;
  transform:translate3d(0,var(--sy,0px),0)}
.cfstage{position:absolute;inset:0;transform-style:preserve-3d}
.cf{position:absolute;top:50%;left:50%;width:330px;height:209px;margin-left:-165px;margin-top:-125px;
  border-radius:4px;overflow:hidden;border:1px solid var(--line);background:#0c0c0c;cursor:pointer;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9);will-change:transform;
  transition:transform .55s var(--ease),opacity .55s ease,box-shadow .55s ease}
.cf img{width:100%;height:100%;object-fit:cover;display:block}
.cf .sheen{position:absolute;inset:0;background:radial-gradient(120% 80% at 30% 18%,rgba(255,240,220,.13),transparent 58%)}
.cf .label{position:absolute;left:0;right:0;bottom:0;padding:13px 15px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.5) 60%,transparent)}
.cf .cat{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:3px}
.cf .ttl{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-weight:700;font-size:.92rem;letter-spacing:-.02em;color:#fff;display:block}
.cf-p0{transform:translate3d(0,0,110px) rotateY(0) scale(1);opacity:1;z-index:50;
  box-shadow:0 34px 76px -28px rgba(204,255,0,.42),0 0 0 1px rgba(204,255,0,.3)}
.cf-p1{transform:translate3d(198px,0,-56px) rotateY(-38deg) scale(.84);opacity:.9;z-index:40}
.cf-pn1{transform:translate3d(-198px,0,-56px) rotateY(38deg) scale(.84);opacity:.9;z-index:40}
.cf-p2{transform:translate3d(336px,0,-190px) rotateY(-44deg) scale(.68);opacity:.45;z-index:30}
.cf-pn2{transform:translate3d(-336px,0,-190px) rotateY(44deg) scale(.68);opacity:.45;z-index:30}
.cf-p3{transform:translate3d(432px,0,-320px) rotateY(-46deg) scale(.55);opacity:.16;z-index:20}
.cf-pn3{transform:translate3d(-432px,0,-320px) rotateY(46deg) scale(.55);opacity:.16;z-index:20}
.cf-hid{transform:translate3d(0,0,-480px) scale(.4);opacity:0;z-index:10;pointer-events:none}
.cfdots{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:center;gap:9px;z-index:60}
.cfdot{width:7px;height:7px;border-radius:99px;background:rgba(242,236,225,.24);border:0;padding:0;cursor:pointer;
  transition:all .35s var(--ease)}
.cfdot.on{width:26px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px rgba(204,255,0,.5)}

/* marquee */
.marquee{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;background:rgba(255,255,255,.012);position:relative}
.marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.mq-outer{transform:translateX(var(--mq,0px));will-change:transform}
.mq-track{display:flex;white-space:nowrap;width:max-content;animation:slide 40s linear infinite}
.mq-track span{font-size:clamp(2.2rem,5.4vw,3.9rem);font-weight:600;letter-spacing:-.02em;padding:0 28px;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.05em;color:var(--accent)}
.mq-track b{font-size:clamp(2.2rem,5.4vw,3.9rem);color:rgba(242,236,225,.13);font-weight:400;align-self:center;font-family:'Space Grotesk',Helvetica,Arial,sans-serif}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes hue{to{background-position:220% 0}}

/* section head */
.sec{padding:104px 0}
.sec-num{font-size:.75rem;color:var(--accent);letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;display:block}
h2{font-size:clamp(1.9rem,3.7vw,2.7rem);letter-spacing:-.05em;font-weight:700;line-height:1.08;max-width:19ch}
.sec-lead{color:var(--muted);margin-top:16px;max-width:56ch;font-size:1.02rem}

/* services */
.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:52px}
.svc{position:relative;padding:32px 30px 34px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);overflow:hidden;transition:border-color .3s,transform .3s var(--ease)}
.svc::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--myy,50%),rgba(204,255,0,.09),transparent 62%)}
.svc:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.svc:hover::before{opacity:1}
.svc-ico{width:38px;height:38px;border-radius:4px;border:1px solid var(--line);display:grid;place-items:center;
  background:rgba(204,255,0,.06);margin-bottom:22px;position:relative}
.svc-ico svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:1.13rem;font-weight:650;letter-spacing:-.018em;margin-bottom:11px;position:relative}
.svc p{font-size:.92rem;color:var(--muted);line-height:1.62;position:relative}

/* work */
.work{margin-top:52px;display:flex;flex-direction:column;gap:20px}
.proj{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--card);
  transition:border-color .35s,transform .35s var(--ease)}
.proj:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.proj-media{position:relative;overflow:hidden;background:#0a0c11;max-height:340px}
.proj-media img{width:100%;transition:transform .9s var(--ease);transform:scale(1.05) translateY(var(--iy,0px))}
.proj:hover .proj-media img{transform:scale(1.09) translateY(var(--iy,0px))}
.proj-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(7,8,11,.7) 85%,var(--bg))}
.proj-body{padding:26px 30px 30px;position:relative;display:flex;flex-direction:column;flex:1}
.proj-top{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;margin-bottom:11px}
.proj-name{font-size:1.2rem;font-weight:650;letter-spacing:-.02em}
.proj-url{font-size:.78rem;color:var(--accent);opacity:.85}
.proj p{font-size:.93rem;color:var(--muted);line-height:1.62;max-width:70ch}
.did{list-style:none;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.did li{font-size:.87rem;color:var(--muted);padding-left:18px;position:relative;line-height:1.5}
.did li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.75}
.tags{display:flex;gap:7px;margin-top:auto;padding-top:20px;flex-wrap:wrap}
.tag{font-size:.71rem;padding:4px 10px;border-radius:4px;border:1px solid var(--line);color:var(--muted-dim)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.stat em{display:block;font-style:normal;font-size:.71rem;color:var(--muted-dim);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px}
.stat b{font-size:1.05rem;font-weight:650;color:var(--accent);letter-spacing:-.02em;white-space:nowrap}
.stat s{color:var(--muted-dim);text-decoration:line-through;font-size:.86rem;margin-right:8px;opacity:.7}
.stat-note{font-size:.78rem;color:var(--muted-dim);margin-top:16px;font-style:italic}
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.proj-grid .proj-body{padding:24px 26px 28px}
.proj-foot{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:18px}
.proj-grid .did{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:18px 14px}
.proj-grid .proj-media{max-height:230px}
.visit{display:inline-flex;align-items:center;gap:7px;font-size:.83rem;color:var(--muted);
  border:1px solid var(--line);padding:8px 15px;border-radius:7px;transition:all .25s var(--ease)}
.visit:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.internal-note{display:inline-flex;align-items:center;gap:8px;font-size:.79rem;color:var(--muted-dim);
  padding:8px 15px;border:1px dashed var(--line);border-radius:7px}

/* filter prác */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.filter{font-family:inherit;font-size:.83rem;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:4px;padding:9px 16px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.filter:hover{border-color:var(--line-strong);color:var(--text)}
.filter b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;font-weight:500;color:var(--muted-dim);transition:color .25s var(--ease)}
.filter.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.filter.on b{color:var(--accent);opacity:.65}
.filter:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.filters+.work{margin-top:26px}
.proj-grid[data-view]:not([data-view="all"]) .teaser{grid-column:auto;grid-template-columns:1fr;align-content:start}
.proj-grid[data-view]:not([data-view="all"]) .teaser-media{border-right:none;border-bottom:1px solid var(--line);max-height:230px;min-height:0}
.proj-grid[data-view]:not([data-view="all"]) .teaser-media img{height:auto}
.proj-grid[data-view]:not([data-view="all"]) .teaser-media::after{background:linear-gradient(180deg,transparent 45%,rgba(10,10,10,.55) 100%)}
.proj-grid[data-view]:not([data-view="all"]) .teaser-body{justify-content:flex-start}
.proj.is-out{display:none}
.proj.is-in{animation:cardIn .5s var(--ease)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* teaser — pripravovaný projekt */
.teaser{grid-column:1/-1;border:1px dashed var(--line-strong);border-radius:5px;overflow:hidden;
  background:radial-gradient(110% 190% at 9% 0%,rgba(58,214,197,.10),transparent 58%),var(--card);
  padding:0;display:grid;grid-template-columns:minmax(0,.92fr) 1fr;gap:0;align-items:stretch;
  transition:border-color .35s,transform .35s var(--ease)}
.teaser:hover{border-color:rgba(58,214,197,.45);transform:translateY(-4px)}
.teaser-media{position:relative;overflow:hidden;background:#0a0c11;border-right:1px solid var(--line);min-height:100%}
.teaser-media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .9s var(--ease);transform:scale(1.02)}
.teaser:hover .teaser-media img{transform:scale(1.06)}
.teaser-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(10,10,10,.55) 100%)}
.teaser-body{padding:28px 30px 30px;display:flex;flex-direction:column;justify-content:center}
.teaser-mark{width:26px;height:26px;display:block;flex:0 0 auto}
.teaser-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:12px}
.teaser-name{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:1.2rem;font-weight:700;letter-spacing:-.03em}
.teaser-name i{font-style:normal;color:#3ad6c5}
.teaser-url{font-size:.78rem;color:var(--muted-dim)}
.badge-soon{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  padding:4px 11px;border-radius:4px;border:1px solid rgba(204,255,0,.35);background:var(--accent-soft)}
.badge-soon::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);animation:soonpulse 2.2s infinite}
@keyframes soonpulse{0%,100%{opacity:1}50%{opacity:.25}}
.teaser p{font-size:.93rem;color:var(--muted);line-height:1.62;max-width:56ch}
.teaser-note{font-size:.8rem;color:var(--muted-dim);margin-top:9px;line-height:1.55}
.teaser .tags{margin-top:16px;padding-top:0}
.teaser .proj-foot{margin-top:18px}

.nav-links a[aria-current="page"],.mnav a[aria-current="page"]{color:var(--accent)}
/* podstránka referencií */
.omrvinky{font-size:.78rem;color:var(--muted-dim);margin-bottom:22px;display:flex;gap:8px;align-items:center}
.omrvinky a{color:var(--muted);transition:color .25s var(--ease)}
.omrvinky a:hover{color:var(--accent)}
.podstranka .sec{padding:64px 0 104px}
.ref-viac{margin-top:34px;display:flex;justify-content:center}
.ref-viac .btn b{font-weight:500;font-size:.78rem;color:var(--muted-dim);margin-left:-2px}
.ref-viac .btn:hover b{color:var(--accent)}
.ref-cta{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ref-cta p{color:var(--muted);font-size:1rem;margin-right:auto;max-width:46ch}
.ref-cta p b{color:var(--text);font-weight:650}
@media(max-width:700px){.ref-cta{flex-direction:column;align-items:stretch}
  .ref-cta .btn{justify-content:center}}

.suhlas{display:flex;gap:11px;align-items:flex-start;margin:4px 0 18px;cursor:pointer;
  font-size:.84rem;color:var(--muted);line-height:1.5}
.suhlas input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:18px;height:18px;min-width:18px;padding:0;margin-top:1px;
  border:1px solid var(--line-strong);border-radius:3px;background:rgba(255,255,255,.03);
  cursor:pointer;position:relative;transition:border-color .2s var(--ease),background .2s var(--ease)}
.suhlas:hover input{border-color:var(--accent)}
.suhlas input:checked{background:var(--accent);border-color:var(--accent)}
.suhlas input:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #0a0a0a;border-width:0 2px 2px 0;transform:rotate(43deg)}
.suhlas input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.suhlas a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.suhlas a:hover{color:var(--accent)}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--line)}
.step{padding:30px 26px 0 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:none;padding-right:0}
.step::before{content:'';position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--accent);transition:width .7s var(--ease)}
.step.in::before{width:calc(100% - 26px)}
.step-n{font-size:.74rem;color:var(--accent);letter-spacing:.1em;margin-bottom:14px}
.step h4{font-size:1.02rem;font-weight:620;letter-spacing:-.015em;margin-bottom:9px}
.step p{font-size:.87rem;color:var(--muted);line-height:1.58}

/* ---- svetlá sekcia (kontrast) ---- */
.sec-light{background:#e8e6e1;color:#141414;padding:112px 0}
.sec-light .sec-num{color:#4e5c00}
.sec-light h2{color:#0a0a0a}
.sec-light .sec-lead{color:rgba(20,20,20,.62)}
.sec-light .steps{border-top:1px solid rgba(0,0,0,.14);margin-top:52px}
.sec-light .step{border-right:1px solid rgba(0,0,0,.12)}
.sec-light .step:last-child{border-right:none}
.sec-light .step::before{background:#0a0a0a}
.sec-light .step h4{color:#0a0a0a}
.sec-light .step p{color:rgba(20,20,20,.6)}
.sec-light .step-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:4px;
  background:#ccff00;color:#0a0a0a;font-weight:700;font-size:.72rem;letter-spacing:0;margin-bottom:16px;
  box-shadow:0 2px 0 rgba(0,0,0,.14)}
.sec-light .closing{margin-top:56px;padding-top:26px;border-top:1px solid rgba(0,0,0,.14);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.sec-light .closing p{font-size:1.02rem;color:#141414;max-width:46ch;line-height:1.6}
.sec-light .closing p b{font-weight:700}
.sec-light .btn-dark{display:inline-flex;align-items:center;gap:9px;background:#0a0a0a;color:#ebebeb;
  padding:13px 24px;border-radius:7px;font-size:.9rem;font-weight:600;transition:all .25s var(--ease);white-space:nowrap}
.sec-light .btn-dark:hover{background:#ccff00;color:#0a0a0a;transform:translateY(-2px)}
@media(max-width:900px){
  .sec-light{padding:76px 0}
  .sec-light .steps{border-top:none}
  .sec-light .step{border-right:none;border-top:1px solid rgba(0,0,0,.12)}
  .sec-light .closing{flex-direction:column;align-items:flex-start}
}

/* about */
.about-top{display:grid;grid-template-columns:296px 1fr;gap:54px;align-items:center}
.portrait{position:relative;border-radius:5px;overflow:hidden;border:1px solid var(--line);
  background:#0c0c0c;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.portrait img{width:100%;height:auto;display:block;filter:saturate(.94) contrast(1.03)}
.portrait::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(205deg,rgba(204,255,0,.13),transparent 42%,rgba(7,8,11,.5))}
.about-quote{font-size:clamp(1.28rem,2.4vw,1.68rem);line-height:1.4;letter-spacing:-.024em;font-weight:500;margin-top:6px}
.about-quote w{color:rgba(242,236,225,.17);transition:color .45s var(--ease);display:inline-block}
.about-quote w.lit{color:var(--text)}
.about-quote w.hi.lit{color:var(--accent)}
.about-more{font-size:.94rem;color:var(--muted);line-height:1.7;margin-top:22px;max-width:60ch}
.about-more + .about-more{margin-top:13px}
.about-more strong{color:var(--text);font-weight:600}
.about-more a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(204,255,0,.32);transition:border-color .2s}
.about-more a:hover{border-bottom-color:var(--accent)}
.about-sig{margin-top:26px;font-size:.88rem;color:var(--muted)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0 42px;margin-top:62px;border-top:1px solid var(--line)}
.pillar{padding:26px 0 0}
.pillar h5{font-size:.95rem;font-weight:620;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.pillar h5::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.pillar p{font-size:.87rem;color:var(--muted);line-height:1.55;padding-left:14px}

/* contact */
.contact-box{border:1px solid var(--line);border-radius:4px;padding:56px 52px;
  background:linear-gradient(165deg,rgba(204,255,0,.05),rgba(16,185,129,.025) 45%,transparent 70%);position:relative;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
label{display:block;font-size:.79rem;color:var(--muted);margin-bottom:7px}
input,select,textarea{width:100%;padding:12px 15px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:4px;color:var(--text);font-family:inherit;font-size:.92rem;
  transition:border-color .2s,background .2s;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:rgba(204,255,0,.05)}
textarea{resize:vertical;min-height:98px}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238e94a6' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
option{background:#0c0e14}
.field{margin-bottom:15px}
.form-note{font-size:.77rem;color:var(--muted-dim);margin-top:14px;line-height:1.5}
.form-note a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.contact-side h3{font-size:1.5rem;letter-spacing:-.028em;font-weight:700;line-height:1.2}
.contact-side > p{color:var(--muted);margin-top:14px;font-size:.96rem}
.direct{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.direct a{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--muted);transition:color .2s}
.direct a:hover{color:var(--accent)}
.direct svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.form-state{display:none;text-align:center;padding:34px 10px 26px}
.form-state.on{display:block;animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tick{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;border:1px solid rgba(204,255,0,.35);
  background:rgba(204,255,0,.08);display:grid;place-items:center;box-shadow:0 0 34px rgba(204,255,0,.16)}
.tick svg{width:34px;height:34px;stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;animation:draw .6s .18s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.form-state h4{font-size:1.34rem;letter-spacing:-.026em;font-weight:650;margin-bottom:10px}
.form-state p{color:var(--muted);font-size:.95rem;max-width:42ch;margin:0 auto 7px;line-height:1.6}
.form-err{display:none;margin-top:13px;padding:11px 15px;border-radius:4px;font-size:.87rem;line-height:1.5;
  background:rgba(255,96,96,.09);border:1px solid rgba(255,96,96,.3);color:#ffb4b4}
.form-err.on{display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
button[disabled]{opacity:.55;cursor:default;transform:none!important;box-shadow:none!important}

footer{border-top:1px solid var(--line);padding:44px 0 52px;margin-top:104px}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.foot-legal{font-size:.79rem;color:var(--muted-dim);line-height:1.7}
.foot-legal strong{color:var(--muted);font-weight:500}
.foot-links{display:flex;gap:22px;font-size:.82rem;color:var(--muted)}
.foot-links a:hover{color:var(--accent)}

.rv{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:56px}
  .hero-visual{height:300px}
  .cf{width:290px;height:184px;margin-left:-145px;margin-top:-110px}
  .cf-p1{transform:translate3d(172px,0,-50px) rotateY(-36deg) scale(.82)}
  .cf-pn1{transform:translate3d(-172px,0,-50px) rotateY(36deg) scale(.82)}
  .cf-p2,.cf-pn2,.cf-p3,.cf-pn3{opacity:0}
}
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-right{gap:9px}
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .nav-cta{padding:9px 16px}
  .nav-tel span{display:none}
  .nav-tel{padding:9px;border:1px solid var(--line);border-radius:4px}
  .grid-4,.proj-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;border-top:none}
  .step{border-right:none;border-top:1px solid var(--line);padding:26px 0 0}
  .step.in::before{width:100%}
  .about-top{grid-template-columns:1fr;gap:32px}
  .portrait{max-width:260px}
  .pillars{grid-template-columns:1fr;gap:0;margin-top:44px}
  .pillar{padding:22px 0;border-top:1px solid var(--line)}
  .pillar:first-child{border-top:none}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .contact-box{padding:38px 26px}
  .did{grid-template-columns:1fr}
  .teaser{grid-template-columns:1fr}
  .teaser-media{border-right:none;border-bottom:1px solid var(--line);max-height:220px}
  .teaser-media img{height:auto}
  .teaser-media::after{background:linear-gradient(180deg,transparent 45%,rgba(10,10,10,.55) 100%)}
  .hero{padding:64px 0 80px}.sec{padding:76px 0}
  .hero-visual{height:250px}
  .cf{width:250px;height:158px;margin-left:-125px;margin-top:-95px}
  .cf-p1{transform:translate3d(132px,0,-70px) rotateY(-34deg) scale(.76);opacity:.55}
  .cf-pn1{transform:translate3d(-132px,0,-70px) rotateY(34deg) scale(.76);opacity:.55}
}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.about-quote w{color:var(--text)}}