/* dkspace.sk — web v1 (one-pager)
   Štýly stránky postavené nad tokenmi design systemu (assets/css/dkspace.css).
   Pravidlá: jedna zátvorková rámka na viewport, jeden akcent (Signal) na plochu, okraje namiesto tieňov,
   pohyb len fade + posun ≤ 8 px na --ease-focus. Rozmery sú plynulé (clamp): mobil → notebook → široké monitory. */

:root{
  --page-margin:clamp(16px,4vw,80px);
  --sec-pad:clamp(64px,7vw,160px);
  /* plynulá typografia */
  --fs-display-1:clamp(36px,3.6vw,72px);
  --fs-display-2:clamp(30px,2.4vw,48px);
  --fs-lead:clamp(17px,1vw,19px);
  --fs-body:clamp(15px,.85vw,16px);
  --fs-row-title:clamp(20px,1.25vw,24px);
  --fs-ref-title:clamp(24px,1.8vw,32px);
  --fs-meta:clamp(12px,.7vw,13px);
  --nav-h:clamp(96px,7vw,128px);   /* výška priehľadnej lišty nad hero; po odrolovaní 64px */
}
@media (min-width:1600px){:root{--container-max:1400px}}
@media (min-width:2200px){:root{--container-max:1640px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-size:var(--fs-body)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
[id]{scroll-margin-top:80px}
#sluzby,#referencie,#efaktura,#kontakt{scroll-margin-top:calc(88px - var(--sec-pad))}
#top{scroll-margin-top:0}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:var(--radius-2);text-decoration:none}
.skip-link:focus{left:8px}

/* ---------- layout ---------- */
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--page-margin);padding-right:var(--page-margin)}
.section{padding:var(--sec-pad) 0}
.section--white{background:var(--white);border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.section--ink{background:var(--ink);color:var(--paper)}
.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-5) var(--space-8);align-items:end;margin-bottom:clamp(32px,3.5vw,64px)}
.section-head .display-2{margin-top:var(--space-4)}
.section-head .lead{max-width:48ch}
@media (max-width:820px){.section-head{grid-template-columns:1fr}}

/* ---------- typografia ---------- */
.display-1{font:500 var(--fs-display-1)/var(--lh-display-1) var(--font-display);letter-spacing:var(--ls-display-1)}
.display-2{font:500 var(--fs-display-2)/var(--lh-display-2) var(--font-display);letter-spacing:var(--ls-display-2)}
.lead{font:400 var(--fs-lead)/var(--lh-body-lg) var(--font-body);color:var(--text-secondary)}
.section--ink .lead,.section--ink p{color:var(--ink-300)}
.section--ink .dk-kicker{color:var(--ink-300)}
.section--ink .dk-kicker--accent{color:var(--signal-bright)}
.arrow-link{white-space:nowrap}

/* ---------- navigácia: priehľadná hore, plná farba po odrolovaní ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background var(--dur-base) var(--ease-focus),border-color var(--dur-base) var(--ease-focus)}
.site-nav .dk-nav{max-width:var(--container-max);margin:0 auto;padding:0 var(--page-margin);height:var(--nav-h);background:transparent;border-bottom:0;justify-content:space-between;transition:height var(--dur-base) var(--ease-focus)}
.site-nav.is-scrolled .dk-nav,html:not(.js) .site-nav .dk-nav{height:64px}
.site-nav .brand{width:auto;height:clamp(48px,4vw,80px)}
.site-nav.is-scrolled .brand,html:not(.js) .site-nav .brand{height:28px}
.site-nav .brand--ink{display:none}
.site-nav__cta{color:var(--paper);border-color:var(--paper);background:transparent;height:44px;padding:0 20px;font-size:15px}
.site-nav__cta:hover{background:var(--paper);color:var(--ink)}
.site-nav.is-scrolled,html:not(.js) .site-nav{background:var(--white);border-bottom-color:var(--border-hairline)}
.site-nav.is-scrolled .brand--ink,html:not(.js) .site-nav .brand--ink{display:block}
.site-nav.is-scrolled .brand--paper,html:not(.js) .site-nav .brand--paper{display:none}
.site-nav.is-scrolled .site-nav__cta,html:not(.js) .site-nav .site-nav__cta{color:var(--ink);border-color:var(--ink);height:36px;padding:0 14px;font-size:14px}
.site-nav.is-scrolled .site-nav__cta:hover,html:not(.js) .site-nav .site-nav__cta:hover{background:var(--ink);color:var(--paper)}

/* ---------- hero: „predná strana vizitky“, prvá obrazovka ---------- */
.hero{display:flex;align-items:center;min-height:min(100svh,960px);padding:calc(var(--nav-h) + clamp(32px,5vw,80px)) 0 clamp(48px,6vw,96px)}
.hero>.container{width:100%}
.hero__frame{--bracket-size:clamp(28px,2.6vw,48px);display:inline-block;max-width:100%;padding:clamp(22px,2.6vw,48px) clamp(18px,3vw,56px)}
.hero__frame h1{margin:0}
.hero__line{display:block}
.hero__lead{max-width:36em;margin-top:clamp(24px,2.4vw,40px);font:400 var(--fs-lead)/1.6 var(--font-body);color:var(--ink-300)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.4vw,40px)}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:clamp(32px,3vw,56px);font:400 var(--fs-meta)/1.6 var(--font-mono);letter-spacing:.02em;color:var(--ink-300)}
.hero__meta li+li::before{content:"·";margin-right:12px;color:var(--ink-500)}
@media (max-width:720px){
  .hero{min-height:100svh}
  .hero .display-1{font-size:clamp(34px,9.6vw,40px)}
}
@media (max-width:560px){
  .hero__meta{flex-direction:column;gap:6px}
  .hero__meta li+li::before{content:none}
}

/* ---------- služby: číslovaný register (spoločné stĺpce cez subgrid) ---------- */
.services{display:grid;grid-template-columns:64px minmax(0,.9fr) minmax(0,1.3fr) max-content;border-top:1px solid var(--ink)}
.service{grid-column:1/-1;display:grid;grid-template-columns:64px minmax(0,.9fr) minmax(0,1.3fr) max-content;grid-template-columns:subgrid;gap:var(--space-5) var(--space-6);align-items:center;padding:clamp(22px,2vw,36px) 0;border-bottom:1px solid var(--border-hairline);transition:background var(--dur-fast) var(--ease-focus)}
.service:hover{background:var(--ink-100)}
.service__num{font:500 14px/1 var(--font-mono);color:var(--text-secondary)}
.service__title{font:500 var(--fs-row-title)/1.2 var(--font-display)}
.service__text{font:400 var(--fs-body)/1.55 var(--font-body);color:var(--text-secondary);max-width:52ch}
.service__note{justify-self:end;text-align:right;font:500 var(--fs-meta)/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.services__more{margin-top:clamp(32px,3.5vw,64px);font:500 16px/1.5 var(--font-body)}
@media (max-width:900px){
  .services{grid-template-columns:48px minmax(0,1fr)}
  .service{grid-template-columns:48px minmax(0,1fr);grid-template-columns:subgrid;row-gap:8px}
  .service__text,.service__note{grid-column:2}
  .service__note{justify-self:start;text-align:left;white-space:normal}
}

/* ---------- referencie: editoriálny register ---------- */
.refs{border-top:1px solid var(--ink)}
.ref{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-6) clamp(32px,5vw,96px);padding:clamp(32px,3.5vw,64px) 0;border-bottom:1px solid var(--border-hairline)}
.ref__kicker{display:block;font:500 var(--fs-meta)/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.ref__title{font:500 var(--fs-ref-title)/1.15 var(--font-display);letter-spacing:-0.01em;margin:14px 0 16px;max-width:24ch}
.ref__text{font:400 var(--fs-body)/1.6 var(--font-body);color:var(--text-secondary);max-width:54ch}
.ref__meta{align-self:start}
.ref__meta>div{display:grid;grid-template-columns:clamp(88px,7vw,120px) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--border-hairline)}
.ref__meta>div:first-child{padding-top:4px}
.ref__meta>div:last-child{border-bottom:0}
.ref__meta dt{font:500 var(--fs-meta)/1.7 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.ref__meta dd{font:400 var(--fs-body)/1.6 var(--font-body);color:var(--ink)}
@media (max-width:820px){.ref{grid-template-columns:1fr;gap:var(--space-5);padding:var(--space-6) 0}}
@media (max-width:480px){.ref__meta>div{grid-template-columns:1fr;gap:4px}}

/* ---------- eFaktúra: pás „číslo“ (Ink, jeden akcent = číslo) ---------- */
.band__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-6);align-items:center}
.band__text .display-2{margin:var(--space-4) 0}
.band__text p{max-width:50ch;font-size:var(--fs-body)}
.band__actions{margin-top:var(--space-6)}
.band__number{font:700 clamp(96px,13vw,260px)/.9 var(--font-display);letter-spacing:-0.04em;color:var(--signal-bright);text-align:right;font-variant-numeric:tabular-nums}
.band__label{font:400 var(--fs-body)/1.5 var(--font-body);color:var(--ink-300);text-align:right;margin:12px 0 0 auto;max-width:34ch}
@media (max-width:820px){.band__grid{grid-template-columns:1fr}.band__number,.band__label{text-align:left;margin-left:0}}

/* ---------- kontakt ---------- */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(40px,6vw,120px)}
.contact__intro .display-2{margin:16px 0 20px}
.contact__intro .lead{max-width:40ch}
.contact__lines{display:grid;gap:8px;margin-top:var(--space-6);font:500 clamp(16px,1vw,18px)/1.5 var(--font-body)}
.contact__lines a{color:var(--ink);text-decoration:none;transition:color var(--dur-fast) var(--ease-focus)}
.contact__lines a:hover{color:var(--signal)}
.form{position:relative;display:grid;gap:20px;max-width:760px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form__hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.form__actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.form__note{font:400 13px/1.5 var(--font-body);color:var(--text-secondary);max-width:40ch}
.dk-btn:disabled{opacity:.7}
@media (max-width:820px){.contact__grid{grid-template-columns:1fr;gap:var(--space-7)}}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}

/* ---------- pätička (Ink) ---------- */
.dk-footer{padding-left:var(--page-margin);padding-right:var(--page-margin)}
.dk-footer__note{margin:16px 0 0;max-width:320px;font:400 14px/1.6 var(--font-body);color:var(--ink-300)}
.dk-footer__list{display:grid;gap:10px;font:400 14px/1.4 var(--font-body)}
.dk-footer__legal{max-width:var(--container-max);margin:var(--space-7) auto 0;padding-top:var(--space-5);border-top:1px solid var(--border-on-dark);font:400 13px/1.7 var(--font-body);color:var(--ink-300)}
.dk-footer__legal p{color:var(--ink-300)}
.dk-footer__bottom{flex-wrap:wrap;gap:8px 24px}
@media (max-width:720px){.dk-footer__grid{grid-template-columns:1fr}}

/* ---------- stavové stránky (404, odpoveď formulára bez JS) ---------- */
.notfound{min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--sec-pad) 0}
.notfound .display-2{margin:16px 0 24px}

/* ---------- pohyb ----------
   Podpisové odhalenie „focus“: zátvorky sa usadia dovnútra zo 4 px, obsah sa vynorí o 8 px o 60 ms neskôr. Raz na stránku. */
@keyframes dk-bracket{from{opacity:0;transform:translate(var(--dx,0),var(--dy,0))}to{opacity:1;transform:none}}
@keyframes dk-content{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.focus-reveal>i{animation:dk-bracket var(--dur-slow) var(--ease-focus) both}
.focus-reveal>i:nth-child(1){--dx:-4px;--dy:-4px}
.focus-reveal>i:nth-child(2){--dx:4px;--dy:-4px}
.focus-reveal>i:nth-child(3){--dx:-4px;--dy:4px}
.focus-reveal>i:nth-child(4){--dx:4px;--dy:4px}
.focus-reveal>.focus-reveal__content{animation:dk-content var(--dur-slow) var(--ease-focus) var(--reveal-stagger) both}
html.js .reveal{opacity:0;transform:translateY(8px);transition:opacity var(--dur-slow) var(--ease-focus),transform var(--dur-slow) var(--ease-focus)}
html.js .reveal.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .focus-reveal>i,.focus-reveal>.focus-reveal__content{animation:none}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .site-nav,.site-nav .dk-nav{transition:none}
}