/* SERVIS VZPT — precise / technical register.
   The client has no usable photography (the whole old site holds two images,
   413x300 and 180x140), so the page is carried by type, rule-work and the
   machine data-plate motif instead of stock imagery. */
@import url('fonts/fonts.css');

:root{
  --ink:#15181C; --ink-2:#1E2329; --ink-3:#2A3138;
  --paper:#F4F4F2; --paper-2:#FFFFFF;
  --amber:#F2B705; --amber-lo:#7A5C00;      /* --amber-lo carries text on light */
  --line:#D5D7D9; --line-dark:#3A424A;
  --muted:#5A646E; --muted-dark:#9AA4AE;
  --gut:max(1.15rem,4vw);
  --nav-h:4.5rem;
  font-size:clamp(15px,0.52rem + 0.62vw,18.5px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-variation-settings:'wdth' 100;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:800;letter-spacing:-.022em;line-height:1.04;margin:0;
  font-variation-settings:'wdth' 108}
.wrap{width:100%;max-width:74rem;margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;font-weight:500}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sec{padding-block:clamp(3.5rem,2rem + 6vw,7rem)}
.sec--dark{background:var(--ink);color:#EEF0F2}
.sec--dark .eyebrow,.hero .eyebrow{color:var(--amber)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(244,244,242,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:1rem;height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;flex:0 0 auto;min-height:44px}
.nav__logo img{height:1.72rem;width:auto}
.nav__links{display:none;margin-left:auto;gap:.2rem}
.nav__links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.72rem;
  text-decoration:none;font-size:.86rem;font-weight:600;color:var(--ink-3)}
.nav__links a:hover{color:var(--ink);background:#E8E8E5}
.nav__cta{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:0 1rem;background:var(--ink);color:var(--amber);text-decoration:none;
  font-weight:700;font-size:.88rem;letter-spacing:.01em;white-space:nowrap}
/* The full number wraps inside a 375 px nav bar and breaks mid-value, which
   reads as a glitch — see the "one unit must never break inside itself" rule.
   Small screens get the verb; the number is one tap away and in the hero. */
.nav__cta--l{display:none}
.nav__cta:hover{background:var(--ink-3)}
.burger{margin-left:.5rem;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:1px solid var(--line);cursor:pointer;color:var(--ink)}
.burger span{display:block;width:19px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;
  height:2px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}
.drawer{display:none;border-bottom:1px solid var(--line);background:var(--paper-2)}
.drawer[data-open="1"]{display:block}
.drawer a{display:flex;align-items:center;justify-content:center;min-height:52px;
  text-decoration:none;font-weight:700;border-top:1px solid var(--line)}
@media(min-width:60rem){
  .nav__links{display:flex}.burger{display:none}.drawer{display:none!important}
  .nav__cta{margin-left:1rem}
  .nav__cta--l{display:inline}.nav__cta--s{display:none}
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#F2F4F6;
  min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;
  padding-block:clamp(2.5rem,1rem + 6vw,4.5rem)}
.hero__grid{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:2.6rem 2.6rem}
.hero__mark{position:absolute;right:-13%;bottom:-11%;width:min(38rem,62%);opacity:.04;
  pointer-events:none}
.hero__in{position:relative;width:100%}
.hero h1{font-size:clamp(1.85rem,min(5.4vw,7.2vh),4.3rem);color:#fff;margin:.75rem 0 0}
.hero h1 em{font-style:normal;color:var(--amber);display:block}
.hero__lede{font-size:clamp(.95rem,.9rem + .3vw,1.12rem);color:#C9D0D7;max-width:36rem;
  margin:clamp(.8rem,1.6vh,1.3rem) 0 0}
.hero__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.1rem,2.6vh,2rem)}
.btn{display:inline-flex;align-items:center;gap:.55rem;min-height:52px;padding:0 1.35rem;
  text-decoration:none;font-weight:700;font-size:.95rem;border:2px solid transparent}
.btn--pri{background:var(--amber);color:var(--ink)}
.btn--pri:hover{background:#FFC91F}
.btn--sec{border-color:#4A545E;color:#fff}
.btn--sec:hover{border-color:var(--amber);color:var(--amber)}

/* the signature motif: a machine data plate */

.plate{margin-top:clamp(1.2rem,3.2vh,2.6rem);max-width:44rem;background:#22282E;border:1px solid #39424B;
  color:#E3E7EA;position:relative;padding:1.15rem 1.25rem}
.plate::before,.plate::after{content:"";position:absolute;width:7px;height:7px;
  border-radius:50%;background:#4E5862;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.plate::before{left:.55rem;top:.55rem}.plate::after{right:.55rem;top:.55rem}
.plate__rows{display:grid;grid-template-columns:1fr;gap:.55rem 1.4rem;margin:0}
.plate__rows>div{display:flex;justify-content:space-between;gap:1rem;
  border-bottom:1px dotted #444E57;padding-bottom:.4rem}
.plate dt{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#98A2AC;margin:0}
.plate dd{margin:0;font-weight:700;font-size:.86rem;text-align:right;color:#fff}
@media(min-width:40rem){.plate__rows{grid-template-columns:1fr 1fr}}

/* ── služby: editorial numbered rows, not cards ───────────────────────── */
.svc{border-top:2px solid var(--ink)}
.svc__group{border-bottom:1px solid var(--line)}
.svc__head{display:flex;align-items:baseline;gap:.9rem;padding:1.6rem 0 .3rem}
.svc__head h3{font-size:1.06rem;font-variation-settings:'wdth' 100}
.svc__list{list-style:none;margin:0;padding:0 0 1rem}
.svc__list li{position:relative}
.svc__list a,.svc__list span{display:flex;align-items:baseline;gap:1rem;
  padding:.72rem .6rem .72rem .2rem;text-decoration:none;border-top:1px solid #E4E5E4;
  transition:background .18s ease,padding-left .18s ease}
.svc__list li:first-child a,.svc__list li:first-child span{border-top:0}
.svc__list span:hover{background:#EDEDEA;padding-left:.7rem}
.svc__n{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--muted);
  flex:0 0 1.9rem;font-style:normal}
.svc__t{font-weight:600;font-size:1rem;line-height:1.35;font-style:normal}
@media (prefers-reduced-motion:reduce){.svc__list span{transition:none}}

/* ── ponúkame: definition rows ────────────────────────────────────────── */
.offer{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line-dark)}
.offer>div{display:grid;grid-template-columns:1fr;gap:.2rem;padding:1.15rem 0;
  border-bottom:1px solid var(--line-dark)}
.offer dt{font-weight:800;font-size:1.02rem;color:#fff}
.offer dd{margin:0;color:var(--muted-dark);font-size:.92rem}
@media(min-width:48rem){.offer>div{grid-template-columns:15rem 1fr;gap:1.5rem;align-items:baseline}}

/* ── o nás: timeline rule ─────────────────────────────────────────────── */
.story{display:grid;grid-template-columns:1fr;gap:2.2rem}
@media(min-width:56rem){.story{grid-template-columns:1.05fr .95fr;gap:4rem}}
.story p{font-size:1.02rem;color:#2C343B;margin:0 0 1rem;max-width:34rem}
.tl{list-style:none;margin:0;padding:0;border-left:2px solid var(--amber)}
.tl li{padding:0 0 1.5rem 1.4rem;position:relative}
.tl li::before{content:"";position:absolute;left:-7px;top:.42rem;width:12px;height:12px;
  background:var(--amber);border:2px solid var(--paper)}
.tl b{display:block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  letter-spacing:.16em;color:var(--amber-lo)}
.tl span{font-weight:600}
.tl p{font-size:.92rem;color:var(--muted);margin:.2rem 0 0}

/* ── kontakt ──────────────────────────────────────────────────────────── */
.cta-row{display:grid;grid-template-columns:1fr;gap:.8rem;margin:2rem 0 0}
@media(min-width:44rem){.cta-row{grid-template-columns:1fr 1fr}}
.big-act{display:flex;flex-direction:column;gap:.25rem;padding:1.35rem 1.4rem;
  background:var(--amber);color:var(--ink);text-decoration:none;min-height:44px;
  border:2px solid var(--amber)}
.big-act--alt{background:transparent;color:var(--ink);border-color:var(--ink)}
.big-act:hover{background:#FFC91F;border-color:#FFC91F;color:var(--ink)}
.big-act--alt:hover{background:var(--ink);color:var(--amber);border-color:var(--ink)}
.big-act small{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.75}
.big-act b{font-size:clamp(1.15rem,1rem + .8vw,1.55rem);letter-spacing:-.01em}
.addr{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:2.6rem}
@media(min-width:44rem){.addr{grid-template-columns:1fr 1fr}}
.addr div{background:var(--paper-2);color:var(--ink);border:1px solid var(--line);
  padding:1.2rem 1.25rem}
.addr h3{font-size:.95rem;margin-bottom:.5rem}
.addr p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.5}
.note{margin-top:1.6rem;font-size:.88rem;color:var(--muted);max-width:40rem}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:#B9C2CB;padding-block:3rem 2.2rem;font-size:.86rem}
.foot__top{display:grid;grid-template-columns:1fr;gap:1.8rem;padding-bottom:1.8rem;
  border-bottom:1px solid var(--line-dark)}
@media(min-width:52rem){.foot__top{grid-template-columns:1.2fr 1fr 1fr}}
.foot img{height:2.1rem;width:auto}
.foot h4{margin:0 0 .6rem;color:#fff;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;font-family:'IBM Plex Mono',monospace;font-weight:500}
.foot a{color:#DDE3E9}
.foot li a{display:inline-flex;align-items:center;min-height:44px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.15rem}
.foot__legal{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;padding-top:1.4rem;
  font-size:.78rem;color:#8C97A2}

/* ── manifest band (Ponúkame) ─────────────────────────────────────────── */
.manifest{list-style:none;margin:2.2rem 0 0;padding:0;border-top:1px solid var(--line-dark)}
.manifest li{border-bottom:1px solid var(--line-dark);padding:1.05rem 0;display:flex;
  align-items:baseline;gap:1rem}
.manifest li::before{content:"";flex:0 0 .7rem;height:.7rem;background:var(--amber);
  transform:translateY(-.05rem)}
.manifest span{font-size:clamp(1.02rem,.95rem + .5vw,1.35rem);font-weight:700;color:#fff;
  letter-spacing:-.012em;line-height:1.25}
@media(min-width:56rem){
  .manifest{display:grid;grid-template-columns:1fr 1fr;column-gap:3rem}
  .manifest li:nth-last-child(-n+1){border-bottom:0}
}

/* ── scroll reveal — scoped to .js so no-JS renders the final state ───── */
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(14px);
    transition:opacity .55s ease,transform .55s ease}
  .js .rise.is-in{opacity:1;transform:none}
}