/* Písma hostované lokálne (licencia OFL): rovnaké súbory a deklarácie, aké servíruje Google Fonts,
   subsety latin a latin-ext. Bez požiadavky na servery Google. */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dm-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dm-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/dm-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/dm-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/dm-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/dm-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Major Mono Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/major-mono-display-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Major Mono Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/major-mono-display-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;
}
/* latin-ext */
@font-face {
  font-family: 'Syne Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/syne-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/syne-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;
}

img{max-width:100%}[hidden]{display:none!important}body{margin:0}

/* Layout: Ragg „Dokonalá chyba“. Prísna 12-stĺpcová mriežka, všetko zarovnané doľava, čierno-biely svet,
   jediný akcent (Acid Yellow) len ako nástroj: redakčný obdĺžnik a hlavné CTA. */
:root{
  --bg:#ffffff;
  --fg:#000000;
  --muted:#55574e;
  --line:rgba(0,0,0,.14);
  --panel:#f1f1ec;
  --accent:#dcff00;
  --on-accent:#000000;
  --f-display:"Major Mono Display", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-body:"DM Sans", "GT Walsheim", "Helvetica Neue", Arial, sans-serif;
  --f-glitch:"Syne Mono", ui-monospace, Menlo, monospace;
  --max:1240px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --fg:#ffffff; --muted:#a4a69b; --line:rgba(255,255,255,.18); --panel:#121210;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --fg:#ffffff; --muted:#a4a69b; --line:rgba(255,255,255,.18); --panel:#121210;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; box-shadow:0 0 0 6px var(--fg)}

.wrap{
  max-width:var(--max); margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
@media (min-width:720px){
  .wrap{padding-left:max(40px, env(safe-area-inset-left,0px)); padding-right:max(40px, env(safe-area-inset-right,0px))}
}

/* typografia */
.display{font-family:var(--f-display); font-weight:400; letter-spacing:-.01em; line-height:1.12; text-wrap:balance; margin:0}
.h1{font-size:clamp(1.9rem, 5.1vw, 4.1rem)}
.h2{font-size:clamp(1.45rem, 3vw, 2.35rem)}
.h3{font-size:clamp(1.15rem, 1.6vw, 1.35rem)}
.eyebrow{font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:0}
.lead{font-size:clamp(1.12rem, 1.6vw, 1.32rem); line-height:1.5; max-width:34em; margin:0}
.muted{color:var(--muted)}
.glitch{font-family:var(--f-glitch); letter-spacing:.02em}
p{margin:0}

/* hlavička */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-block:.9rem}
.mark{font-family:var(--f-display); font-size:1.12rem; text-decoration:none; white-space:nowrap}
.mark .amp{display:inline-block; transform:rotate(-9deg) translateY(-.04em); margin-inline:.05em}
.nav{display:flex; align-items:center; gap:var(--s3); font-size:.95rem}
.nav a{text-decoration:none; color:var(--muted)}
.nav a:hover{color:var(--fg)}
.nav .btn{color:var(--on-accent)}
@media (max-width:820px){ .nav a:not(.btn){display:none} }

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font:600 1rem/1 var(--f-body); text-decoration:none;
  padding:.95em 1.3em; border:1.5px solid var(--fg); background:transparent; color:var(--fg); cursor:pointer;
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn-sm{padding:.7em 1em; font-size:.9rem}
.btn .arr{font-family:var(--f-display)}

/* hero */
.hero .wrap{padding-block:var(--s5) var(--s5); display:grid; gap:var(--s4)}
.hero-grid{display:grid; gap:var(--s4); grid-template-columns:1fr; align-items:end}
@media (min-width:960px){ .hero-grid{grid-template-columns:7fr 5fr; gap:var(--s5)} }
.hero-copy{display:grid; gap:var(--s3); min-width:0}
.ctas{display:flex; flex-wrap:wrap; gap:var(--s2)}

/* brand code: redakčný obdĺžnik */
.code{display:grid; gap:.35rem; padding:var(--s4) 0 0; border-top:1.5px solid var(--fg); min-width:0}
.code .truth{font-size:clamp(1.5rem, 2.6vw, 2.1rem); font-weight:700; line-height:1.15; letter-spacing:-.015em}
.code .struck{font-size:clamp(1.2rem, 2vw, 1.55rem); color:var(--muted); line-height:1.3}
.redact{text-decoration-line:line-through; text-decoration-color:var(--accent); text-decoration-thickness:.14em; text-decoration-skip-ink:none;
  animation:redact .6s .4s ease-out both}
@keyframes redact{from{text-decoration-color:transparent}}
.code-note{font-size:.85rem; color:var(--muted); margin-top:var(--s2)}

.cred{border-top:1px solid var(--line); padding-top:var(--s3); display:grid; gap:var(--s2); grid-template-columns:1fr}
@media (min-width:960px){ .cred{grid-template-columns:repeat(12,1fr)} .cred p{grid-column:1 / span 8} }

/* sekcie */
section{scroll-margin-top:72px}
.sec .wrap{padding-block:var(--s6) 0}
.sec-head{display:grid; gap:var(--s2); margin-bottom:var(--s5); max-width:46rem}

/* problémy */
.probs{display:grid; grid-template-columns:1fr; gap:0 var(--s5)}
@media (min-width:760px){ .probs{grid-template-columns:1fr 1fr} }
.prob{border-top:1px solid var(--line); padding-block:var(--s3) var(--s4); display:grid; gap:var(--s2); align-content:start; min-width:0}
.prob q{quotes:"„" "“"; font-size:clamp(1.25rem, 2vw, 1.55rem); font-weight:600; line-height:1.3; letter-spacing:-.01em}
.prob p{color:var(--muted); max-width:30em}

/* služby */
.svcs{display:grid; grid-template-columns:1fr; border-top:1.5px solid var(--fg)}
@media (min-width:900px){ .svcs{grid-template-columns:repeat(3,1fr)} .svc + .svc{border-left:1px solid var(--line)} }
.svc{padding:var(--s4) 0; display:grid; gap:var(--s3); align-content:start; min-width:0}
@media (min-width:900px){ .svc{padding:var(--s4) var(--s4) var(--s4) 0} .svc + .svc{padding-left:var(--s4)} }
@media (max-width:899px){ .svc + .svc{border-top:1px solid var(--line)} }
.svc ul{list-style:none; margin:0; padding:0; display:grid}
.svc li{padding:.7rem 0; border-top:1px solid var(--line); font-weight:500}
.svc li:last-child{border-bottom:1px solid var(--line)}
.svc .incl{font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:.4rem}

/* postup */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0; counter-reset:s}
@media (min-width:980px){ .steps{grid-template-columns:repeat(5,1fr); gap:var(--s3)} }
.step{position:relative; display:grid; gap:var(--s1); align-content:start; padding:var(--s3) 0; border-top:1.5px solid var(--fg); min-width:0}
@media (max-width:979px){ .step{grid-template-columns:3.2rem 1fr; column-gap:var(--s2)} .step > *:not(.num){grid-column:2} .step .num{grid-row:1 / span 2} }
.step .num{font-family:var(--f-display); font-size:1.9rem; line-height:1}
.step h3{font-size:1.15rem; margin:0; font-weight:700}
.step p{color:var(--muted); font-size:.98rem}

.band{margin-top:var(--s5); background:var(--fg); color:var(--bg)}
.band .wrap{padding-block:var(--s5); display:grid; gap:var(--s4); grid-template-columns:1fr}
@media (min-width:860px){ .band .wrap{grid-template-columns:1fr 1fr; gap:var(--s5)} }
.band p{font-size:clamp(1.3rem, 2.3vw, 1.85rem); line-height:1.3; font-weight:600; letter-spacing:-.01em; max-width:22em}
.band .glitch{background:var(--accent); color:var(--on-accent); padding:0 .2em; font-weight:400; white-space:nowrap}

/* tím */
.team{display:grid; grid-template-columns:1fr; gap:var(--s5)}
@media (min-width:860px){ .team{grid-template-columns:1fr 1fr} }
.person{display:grid; gap:var(--s3); align-content:start; min-width:0}
.portrait{display:block; width:100%; height:auto; max-width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--panel); filter:grayscale(1)}
.person h3{font-size:clamp(1.5rem, 2.4vw, 2rem); font-weight:700; letter-spacing:-.02em; margin:0; line-height:1.1}
.role{color:var(--muted); font-weight:500; margin-top:.3rem}
.person .bio{max-width:34em}

/* kontakt */
.contact .wrap{padding-block:var(--s6)}
.contact-box{border-top:1.5px solid var(--fg); padding-top:var(--s4); display:grid; gap:var(--s4); grid-template-columns:1fr}
@media (min-width:960px){ .contact-box{grid-template-columns:5fr 7fr; gap:var(--s5)} }
.contacts{display:grid; gap:0}
.ct{display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--s1) var(--s3); padding-block:var(--s3); border-bottom:1px solid var(--line); min-width:0}
.ct:first-child{border-top:1px solid var(--line)}
.ct .who{font-weight:700}
.ct .mail{grid-column:1; font-family:var(--f-body); font-size:clamp(1.15rem, 2.4vw, 1.7rem); font-weight:500; letter-spacing:-.01em; user-select:all; overflow-wrap:anywhere; min-width:0}
.ct .btn{grid-row:1 / span 2; grid-column:2}
.ct .btn[data-done]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}

footer{border-top:1px solid var(--line)}
footer .wrap{padding-block:var(--s3); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2); font-size:.88rem; color:var(--muted)}


/* hero v2: háčik + čo + kto + dôkaz v prvom zábere */
.hero .wrap{padding-block:var(--s4) var(--s5)}
.hero-grid{display:grid; grid-template-columns:1fr; gap:var(--s4); align-items:start}
.hero-copy{display:grid; gap:var(--s3); min-width:0; align-content:start}
.hero .code{border-top:0; padding:0; gap:.6rem}
.hero .code .truth{margin:0; font-size:clamp(2.3rem, 5.4vw, 4.4rem); font-weight:700; line-height:1.02; letter-spacing:-.035em; text-wrap:balance}
.hero .code .struck{font-size:clamp(1.15rem, 2vw, 1.6rem)}
.svc-line{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em .6em; font-family:var(--f-display); font-size:clamp(.95rem, 1.25vw, 1.1rem); padding-block:var(--s2); border-block:1px solid var(--line)}
.svc-line a{text-decoration:none}
.svc-line a:hover{background:var(--accent); color:var(--on-accent)}
.svc-line span{color:var(--muted)}
.hero .lead{font-size:clamp(1.05rem, 1.4vw, 1.2rem); max-width:36em}
.hero-team{display:grid; gap:var(--s3); min-width:0}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.duo figure{margin:0; display:grid; gap:.6rem; min-width:0; align-content:start}
.duo img{display:block; width:100%; height:auto; max-width:100%; aspect-ratio:1/1; object-fit:cover; filter:grayscale(1); background:var(--panel)}
.duo figcaption{display:grid; gap:.1rem; font-size:.9rem; line-height:1.35}
.duo figcaption span{color:var(--muted)}
.cred-text{font-size:.95rem; color:var(--muted); border-top:1.5px solid var(--fg); padding-top:var(--s2)}


/* hero v3: jeden stĺpec, nadpis cez celú šírku, pod ním akcia a dôkaz vedľa seba */
.hero .hero-grid{grid-template-columns:1fr}
.hero .code .truth{max-width:none; font-size:clamp(2.3rem, 6.2vw, 5.6rem); text-wrap:pretty}
.hero-row{display:grid; grid-template-columns:1fr; gap:var(--s4); align-items:start; padding-top:var(--s1)}
@media (min-width:980px){ .hero-row{grid-template-columns:7fr 5fr; gap:var(--s5)} }
.hero-act{display:grid; gap:var(--s3); min-width:0}
.hero .cred-text{margin-top:.35rem}

/* kontaktný formulár (pridané 2. 11. 2026) */
.cform{display:grid; gap:var(--s3); margin-top:var(--s2); max-width:34em}
.field{display:grid; gap:.45rem}
.field label{font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
.field input,.field textarea{width:100%; font:inherit; font-size:1.05rem; line-height:1.5; color:var(--fg); background:transparent; border:0; border-bottom:1.5px solid var(--fg); border-radius:0; padding:.55em 0; -webkit-appearance:none; appearance:none}
.field textarea{resize:vertical; min-height:7em}
.field input:focus-visible,.field textarea:focus-visible{outline:0; box-shadow:0 3px 0 0 var(--accent)}
.hp{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.cform-foot{display:grid; gap:var(--s2); justify-items:start}
.cform-note{font-size:.85rem; color:var(--muted)}
.cform-note a{color:inherit}
.cform-msg{font-weight:600; margin:0}
.cform-msg:empty{display:none}
.btn[disabled]{opacity:.55; cursor:default; transform:none}

/* pätička: odkaz */
footer a{color:inherit}

/* textová stránka (ochrana osobných údajov) */
.doc .wrap{padding-block:var(--s5) var(--s6)}
.doc-body{max-width:46rem; display:grid; gap:var(--s3); margin-top:var(--s4)}
.doc-body h2{margin:var(--s3) 0 0}
.doc-body h2:first-child{margin-top:0}
.doc-body p{max-width:40em}
.doc-body ul{margin:0; padding-left:1.2em; display:grid; gap:.5rem; max-width:40em}
.doc-body a{color:inherit}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .redact{animation:none}
  .btn{transition:none}
}