/* ==========================================================================
   KOPOS technik — hlavní stylopis
   Fonty jsou v samostatném fonts.css (generovaný soubor, needitovat ručně).
   ========================================================================== */

:root{
  --ink:#0E1B2E;
  --ink-soft:#16263D;
  --paper:#FBFCFD;
  --paper-alt:#EEF2F6;
  /* firemní barva z loga #DD137B + odstíny odvozené tak, aby splnily WCAG AA */
  --brand:#DD137B;         /* logo — plochy, ikony, grafika */
  --brand-deep:#B81066;    /* text na světlém podkladu (6,2:1) a hover ploch */
  --brand-on-dark:#FF6FB0; /* text a akcenty na tmavém podkladu (6,7:1) */
  --brand-dim:rgba(221,19,123,.10);
  --slate:#48566B;
  --slate-light:#64738A;   /* ztmaveno z #8291A3, které mělo jen 3,2:1 */
  --line:rgba(14,27,46,.10);
  --line-dark:rgba(255,255,255,.14);
  --radius:14px;
  /* Dvě rodiny na celý web: Inter nese nadpisy i text, mono jen drobné
     technické popisky (eyebrow, čísla kroků, štítky). */
  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --header-h:100px;        /* odsazení kotev pod sticky hlavičku */
}

/* ---------- ZÁKLAD ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  /* Patička drží u spodní hrany i na krátké stránce. svh počítá s lištami
     mobilních prohlížečů, vh je záloha pro starší verze. */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto;}
footer{flex-shrink:0;}
/* Nadpisy dědí rodinu z body. Inter potřebuje sešněrovat prostrkání tím
   víc, čím je stupeň větší — odtud odstupňované letter-spacing níže. */
h1,h2,h3,h4{
  margin:0;
  letter-spacing:-0.015em;
  line-height:1.25;
}
/* displejové stupně — čím větší písmo, tím sevřenější prostrkání */
.hero h1{letter-spacing:-0.034em;}
.help-head h1, .legal h1{letter-spacing:-0.03em;}
.sec-head h2, .final-cta h2{letter-spacing:-0.028em;}
.svc-pane h3, .help-step h2{letter-spacing:-0.02em;}
p{margin:0; color:var(--slate); line-height:1.6;}
a{color:inherit; text-decoration:none;}
svg{max-width:100%;}
/* height:auto je nutné vedle atributů width/height v HTML — jinak by se
   obrázek při zúžení stránky roztáhl do nesprávného poměru stran.
   Loga mají vlastní výšku v konkrétnějším pravidle, to tímhle neutrpí. */
img{max-width:100%; height:auto;}

/* viditelný focus pro klávesnici (dříve nebyl žádný, u <div> ani výchozí) */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:3px;
}
.section-dark :focus-visible,
footer :focus-visible{outline-color:var(--brand-on-dark);}
.final-cta :focus-visible{outline-color:#fff;}

/* aby kotva neskončila pod sticky hlavičkou */
section[id], div[id]{scroll-margin-top:var(--header-h);}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff;
  padding:14px 22px; font-weight:600; font-size:14.5px;
  border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0;}

/* sprite s ikonami — drží se mimo tok stránky */
.icon-sprite{display:none;}

/* text jen pro odečítače — zůstává v přístupném názvu, očima ho nevidíte */
.vis-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
}

/* šipka u odkazů mimo web */
.ic-ext{
  width:11px; height:11px;
  margin-left:5px;
  vertical-align:baseline;
  opacity:.65;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand-deep);
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--brand);
  display:inline-block;
  flex-shrink:0;
}
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
section{padding:100px 0;}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,252,253,.86);
  -webkit-backdrop-filter:blur(10px);   /* Safari */
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:1180px;
  margin:0 auto;
}
.logo{display:flex; align-items:center; flex-shrink:0;}
.logo img{height:40px; width:auto; display:block;}
.nav-links{
  display:flex; gap:34px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:15.5px; font-weight:500; color:var(--ink);
  position:relative; padding:7px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--brand); transition:width .2s ease;
}
.nav-right{display:flex; align-items:center; gap:18px;}
.nav-phone{
  font-family:var(--font-mono);
  font-size:14.5px; font-weight:500;
  display:flex; align-items:center; gap:7px;
  transition:color .15s ease;
  white-space:nowrap;
}
.nav-phone svg{width:17px; height:17px; flex-shrink:0;}

.btn{
  font-family:inherit;
  font-weight:600;
  font-size:14.5px;
  padding:12px 22px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;   /* popisek tlačítka se nikdy nemá lámat na dva řádky */
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn-primary{background:var(--ink); color:#fff;}
.btn-brand{background:var(--brand); color:#fff;}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-sm{padding:10px 18px; font-size:14px;}
.nav-cta svg{width:18px; height:18px; flex-shrink:0;}

.burger{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.burger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:.2s;}
.mobile-menu{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:8px 20px 20px;
  border-top:1px solid var(--line);
  max-height:calc(100vh - 70px);   /* na nízkém displeji menu neuteče ze stránky */
  overflow-y:auto;
}
.mobile-menu.open{display:flex;}
/* :not(.btn) — aby CTA pilulka v menu neztratila padding a nedostala spodní linku */
.mobile-menu a:not(.btn){padding:14px 0; font-size:16.5px; font-weight:500; border-bottom:1px solid var(--line);}
.mobile-menu .btn{margin-top:12px;}

/* ---------- HERO ---------- */
.hero{
  padding:88px 0 60px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(221,19,123,.08), transparent 42%),
    var(--paper);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero h1{
  font-size:clamp(34px,4.6vw,54px);
  line-height:1.12;
  font-weight:700;
  margin:18px 0 22px;
}
.hero h1 em{
  font-style:normal;
  color:var(--brand);
}
.hero p.sub{
  font-size:18px;
  max-width:480px;
  margin-bottom:32px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.hero-micro{font-size:13px; color:var(--slate-light);}

/* ---------- KARTA S ČÍSLY V HERU ---------- */
/* Vnější obal má padding, aby plovoucí štítky měly kam přesahovat. */
.stats-card{position:relative; padding:24px 20px;}
.stats-inner{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:34px 30px;
  box-shadow:0 30px 60px -22px rgba(14,27,46,.28);
}
.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.stat{
  background:var(--paper-alt);
  border-radius:14px;
  padding:22px 20px;
}
.stat strong{
  display:block;
  font-size:clamp(28px,3.2vw,34px); font-weight:700;
  color:var(--brand);
  line-height:1; letter-spacing:-0.03em;
  margin-bottom:8px;
}
.stat span{display:block; font-size:13.5px; color:var(--slate); line-height:1.45;}

.stats-badge{
  position:absolute; z-index:2;
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:10px 18px 10px 12px;
  font-size:13.5px; font-weight:600; color:var(--ink);
  box-shadow:0 14px 30px -12px rgba(14,27,46,.32);
  white-space:nowrap;
}
.stats-badge-top{top:0; right:0;}
.stats-badge-bottom{bottom:0; left:0;}
.badge-mark{
  width:24px; height:24px; border-radius:8px; flex-shrink:0;
  background:var(--brand-dim); color:var(--brand-deep);
  display:inline-flex; align-items:center; justify-content:center;
}
.badge-mark svg{width:14px; height:14px;}

/* ---------- TRUST BAR ---------- */
/* Podklad řeší třída .section-dark přidaná v HTML — stejná barva jako sekce
   Spolupráce, takže obě tmavá místa na stránce zůstanou navždy shodná. */
.trust{
  padding:56px 0;
}
.trust-inner{
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  text-align:center;
}
/* Věta stojí v sekci sama, proto displejové písmo místo běžného textového.
   Bílou je nutné napsat výslovně — základní pravidlo p{color:var(--slate)}
   by jinak přebilo barvu zděděnou ze .section-dark. */
.trust-line{
  font-size:clamp(16px,2vw,19px);
  font-weight:600;
  line-height:1.45;
  letter-spacing:-0.018em;
  color:#fff;
  max-width:640px;
  text-wrap:balance;   /* vyrovná délku řádků; starší prohlížeče vlastnost ignorují */
}
.trust-line strong{color:var(--brand-on-dark); font-weight:700;}

/* Zbylo po štítku „Na trhu od roku 1993“ — ponecháno, kdybyste ho chtěli vrátit. */
.trust-badge{
  font-family:var(--font-mono);
  font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  background:var(--brand-dim); color:var(--brand-deep);
  padding:6px 14px; border-radius:999px; white-space:nowrap;
}

/* ---------- HLAVIČKA SEKCE ---------- */
.sec-head{max-width:640px; margin-bottom:48px;}
.sec-head h2{font-size:clamp(26px,3.4vw,38px); margin-top:14px; font-weight:700;}
.sec-head p{font-size:16.5px; margin-top:14px;}

/* ---------- PROČ MY ---------- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.why-card{
  background:#fff;
  padding:30px 26px;
  transition:background .15s ease;
}
.why-icon{
  width:38px; height:38px;
  margin-bottom:16px;
  color:var(--brand);
}
.why-card h3{font-size:17px; font-weight:600; margin-bottom:8px;}
.why-card p{font-size:14.5px;}

/* ---------- SLUŽBY ---------- */
.services-alt{background:var(--paper-alt);}
.svc-shell{
  display:grid;
  grid-template-columns:280px 1fr;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.svc-list{border-right:1px solid var(--line);}
.svc-item{
  display:flex; align-items:center; gap:12px;
  padding:18px 22px;
  cursor:pointer;
  border-left:3px solid transparent;
  font-weight:600;
  font-size:14.5px;
  color:var(--slate);
  transition:background .15s ease, color .15s ease;
}
.svc-item svg{width:19px; height:19px; flex-shrink:0;}
.svc-item.active{
  border-left-color:var(--brand);
  background:var(--paper-alt);
  color:var(--ink);
}
.svc-detail{padding:38px 42px;}
.svc-pane{display:none; animation:fadeIn .25s ease;}
.svc-pane.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
.svc-pane h3{font-size:23px; font-weight:700; margin-bottom:10px;}
.svc-pane .svc-tagline{
  color:var(--brand-deep); font-weight:600; margin-bottom:18px;
  font-family:var(--font-mono);
  font-size:13px; text-transform:uppercase; letter-spacing:.04em;
}
.svc-pane p.desc{font-size:15.5px; margin-bottom:22px; max-width:560px;}
.svc-includes{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px;}
.svc-includes li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14.5px; color:var(--slate);
}
.svc-includes li svg{width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--brand);}

/* ---------- SPOLUPRÁCE (tmavý pruh) ---------- */
.section-dark{background:var(--ink); color:#fff;}
.section-dark .sec-head p{color:rgba(255,255,255,.6);}
.section-dark .eyebrow{color:var(--brand-on-dark);}
.section-dark .eyebrow::before{background:var(--brand-on-dark);}
.process-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  position:relative;
}
/* spojnice vede jen od středu 1. kolečka ke středu posledního */
.process-list::before{
  content:"";
  position:absolute; top:23px; left:23px; right:calc(25% - 23px); height:1px;
  background:var(--line-dark);
}
.process-step{padding-right:24px; position:relative;}
.process-num{
  width:46px; height:46px;
  border-radius:50%;
  background:var(--ink-soft); color:var(--brand-on-dark);
  border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  font-size:14px;
  position:relative; z-index:2;
  margin-bottom:18px;
}
.process-step h3{font-size:16.5px; font-weight:600; margin-bottom:8px;}
.process-step p{font-size:14px; color:rgba(255,255,255,.62);}

/* ---------- ZÁVĚREČNÉ CTA ---------- */
.final-cta{
  background:linear-gradient(120deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-radius:24px;
  padding:64px 56px;
  text-align:center;
}
.final-cta h2{font-size:clamp(26px,4vw,38px); color:#fff; font-weight:700; margin-bottom:14px;}
/* plná bílá: průhledná bílá už na magentě nedosáhne 4,5:1 */
.final-cta p{color:#fff; font-size:16px; max-width:480px; margin:0 auto 30px;}
.final-cta .btn-primary{background:var(--ink);}

/* ---------- KONTAKT ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch;
}
.contact-info-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px;
  display:flex; flex-direction:column; gap:26px;
}
.contact-block{display:flex; gap:16px; align-items:flex-start;}
.contact-block-icon{
  width:44px; height:44px; flex-shrink:0;
  border-radius:11px;
  background:var(--brand-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--brand);
}
.contact-block-icon svg{width:20px; height:20px;}
.contact-label{
  display:block; font-family:var(--font-mono); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--slate-light); margin-bottom:4px;
}
.contact-value{display:block; font-size:16.5px; font-weight:600; color:var(--ink); margin-bottom:4px;}
.contact-hint{font-size:13px; color:var(--slate-light);}

/* ---------- MAPA ---------- */
/* Mapa se vkládá až po souhlasu z cookie lišty. Dokud souhlas není,
   zobrazí se místo ní klidné oznámení s možností souhlas udělit. */
.map-card{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  min-height:340px;
  background:var(--paper-alt);
  position:relative;
}
.map-card iframe{display:block; width:100%; height:100%; border:0; min-height:340px;}
.map-notice{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; padding:32px 28px;
}
.map-notice svg{width:30px; height:30px; color:var(--brand);}
.map-notice p{font-size:14px; max-width:330px;}
.map-alt{
  font-size:13px; color:var(--slate); text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- COOKIE LIŠTA ---------- */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:var(--ink);
  border-top:1px solid var(--line-dark);
  padding:20px 0;
  box-shadow:0 -20px 44px -26px rgba(14,27,46,.65);
  animation:cookieUp .3s ease;
}
.cookie-bar[hidden]{display:none;}
@keyframes cookieUp{from{transform:translateY(100%);} to{transform:translateY(0);}}
.cookie-inner{
  max-width:1180px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.cookie-text{flex:1 1 440px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.75);}
.cookie-text strong{
  display:block; margin-bottom:5px; color:#fff; font-weight:600; font-size:16px;
}
.cookie-text a{color:var(--brand-on-dark); text-decoration:underline; text-underline-offset:3px;}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0;}
.btn-quiet{background:transparent; color:#fff; border:1.5px solid var(--line-dark);}

/* odkaz v patičce, kterým jde souhlas kdykoli změnit */
.link-plain{
  background:none; border:none; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline; text-underline-offset:3px;
}

/* ---------- PATIČKA ---------- */
footer{background:var(--ink); color:rgba(255,255,255,.65); padding:60px 0 30px;}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:40px; border-bottom:1px solid var(--line-dark);
}
.footer-grid h2{
  color:#fff; font-size:13px;
  font-family:var(--font-mono);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; font-weight:500;
}
.footer-grid a, .footer-grid p{display:block; font-size:14px; margin-bottom:10px; color:rgba(255,255,255,.65);}
/* v patičce světlá varianta — tmavě šedý nápis „technik“ by na --ink zanikl */
.footer-logo{display:flex; align-items:center; margin-bottom:16px;}
.footer-logo img{height:32px; width:auto; display:block;}
.footer-legal{font-size:12.5px !important; line-height:1.7; color:rgba(255,255,255,.5) !important;}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:24px;
  font-size:12.5px; flex-wrap:wrap; gap:10px 24px;
}
.footer-bottom a{text-decoration:underline; text-underline-offset:3px;}

/* ---------- PRÁVNÍ PODSTRÁNKY ---------- */
.legal{padding:64px 0 100px; max-width:760px;}
.legal h1{font-size:clamp(28px,3.6vw,40px); font-weight:700; margin-bottom:10px;}
.legal h2{font-size:20px; font-weight:600; margin:38px 0 12px;}
.legal p, .legal li{font-size:15.5px; color:var(--slate); line-height:1.7;}
.legal p{margin-bottom:12px;}
.legal ul{margin:0 0 12px; padding-left:20px;}
.legal li{margin-bottom:6px;}
.legal .updated{font-size:13px; color:var(--slate-light); margin-bottom:32px;}
.legal .todo{
  background:var(--brand-dim); border-left:3px solid var(--brand);
  padding:14px 18px; border-radius:0 8px 8px 0; margin:20px 0;
  font-size:14px; color:var(--brand-deep);
}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:600; color:var(--brand-deep); margin-top:36px;
}

/* ---------- TECHNOLOGIE ---------- */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.tech-card{background:#fff; padding:32px 28px;}
.tech-icon{width:34px; height:34px; color:var(--brand); margin-bottom:16px;}
.tech-card h2{font-size:17.5px; font-weight:600; margin-bottom:8px;}
.tech-card p{font-size:14.5px;}
.tech-list{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.tech-list li{display:flex;}
/* štítek je odkaz na web výrobce */
.tech-list a{
  font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:.02em;
  background:var(--slate-light); color:#fff;   /* bila na #64738A = 4,8:1 */
  padding:7px 13px; border-radius:999px; white-space:nowrap;
  transition:background .15s ease;
}
/* Široký pruh pod mřížkou — licence jsou služba napříč kategoriemi,
   takže záměrně nevypadají jako další dlaždice. */
.tech-wide{
  margin-top:16px;
  display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap;
  background:var(--paper-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 32px;
}
.tech-wide-icon{
  width:52px; height:52px; flex-shrink:0;
  border-radius:14px;
  background:var(--brand-dim); color:var(--brand-deep);
  display:flex; align-items:center; justify-content:center;
}
.tech-wide-icon svg{width:24px; height:24px;}
.tech-wide-text{flex:1 1 340px;}
.tech-wide h2{font-size:17.5px; font-weight:600; margin-bottom:8px;}
.tech-wide p{font-size:14.5px; max-width:620px;}
.tech-wide .tech-list{margin-top:16px;}

.tech-note{
  max-width:680px; margin:34px 0 0;
  font-size:14.5px; color:var(--slate-light);
}

/* ---------- VZDÁLENÁ POMOC ---------- */
.help-head{max-width:680px; margin-bottom:40px;}
.help-head h1{font-size:clamp(30px,4vw,44px); font-weight:700; margin:14px 0 16px;}
.help-head p{font-size:17px;}

.dl-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 34px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  box-shadow:0 24px 50px -26px rgba(14,27,46,.30);
}
.dl-icon{
  width:60px; height:60px; flex-shrink:0;
  border-radius:16px;
  background:var(--brand-dim); color:var(--brand-deep);
  display:flex; align-items:center; justify-content:center;
}
.dl-icon svg{width:28px; height:28px;}
.dl-text{flex:1 1 260px;}
.dl-text h3{font-size:17px; font-weight:600; margin-bottom:6px;}
.dl-text p{font-size:14.5px;}
.dl-meta{
  display:block; margin-top:10px; font-size:12.5px; color:var(--slate-light);
  font-family:var(--font-mono);
}
.dl-card .btn{flex-shrink:0;}

/* stránka začíná rovnou kroky, proto menší odsazení shora než ostatní sekce */
.help-section{padding-top:48px;}
.help-steps{display:grid; gap:44px;}
.help-step .dl-card{margin-top:14px;}
.help-step{display:grid; grid-template-columns:56px 1fr; gap:22px; align-items:start;}
.help-step-num{
  width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:14px;
}
.help-step h2{font-size:20px; font-weight:600; margin-bottom:8px; padding-top:9px;}
.help-step p{font-size:15px; max-width:620px;}

/* Zástupné místo pro snímky obrazovky — po vložení <img> celý blok smažte. */
.img-placeholder{
  margin-top:16px;
  border:2px dashed var(--line);
  border-radius:var(--radius);
  background:var(--paper-alt);
  min-height:200px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:24px;
}
.img-placeholder strong{font-weight:600; font-size:15px; color:var(--slate);}
.img-placeholder span{font-size:13px; color:var(--slate-light);}
.help-step img{border-radius:var(--radius); border:1px solid var(--line); margin-top:16px; display:block;}

.help-fallback{
  margin-top:64px; padding:30px 34px;
  background:var(--paper-alt); border-radius:var(--radius);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.help-fallback p{font-size:15px; flex:1 1 300px;}

/* ---------- BRÁNA KE STAŽENÍ (stahnout.php) ---------- */
.gate{max-width:480px; padding:72px 0 110px;}
.gate-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:38px 34px; text-align:center;
  box-shadow:0 24px 50px -26px rgba(14,27,46,.30);
}
.gate-icon{
  width:58px; height:58px; margin:0 auto 20px;
  border-radius:16px; background:var(--brand-dim); color:var(--brand-deep);
  display:flex; align-items:center; justify-content:center;
}
.gate-icon svg{width:26px; height:26px;}
.gate h1{font-size:23px; font-weight:700; margin-bottom:10px;}
.gate p{font-size:14.5px;}
/* :not(.btn) — jinak by pravidlo přebilo bílý text tlačítka a obarvilo ho
   tmavou magentou na magentovém pozadí, tedy prakticky nečitelně. */
.gate a:not(.btn){color:var(--brand-deep); text-decoration:underline; text-underline-offset:3px;}
.gate form{margin-top:24px; text-align:left;}
.gate label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px;}
.gate input[type="password"]{
  width:100%; padding:12px 14px;
  font:inherit; font-size:15px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:11px;
}
.gate input[type="password"]:focus{border-color:var(--brand); outline:none;}
.gate .btn{width:100%; margin-top:14px;}
.gate .btn[disabled]{opacity:.5; cursor:not-allowed;}
.gate-error{
  margin-top:18px; padding:11px 14px; border-radius:10px;
  background:var(--brand-dim); color:var(--brand-deep);
  font-size:14px; font-weight:600;
}
.gate-note{margin-top:18px; font-size:13px; color:var(--slate-light);}

/* ---------- ODHALOVÁNÍ PŘI SCROLLU ---------- */
/* Třída .js přidává skript v <head>. Bez JS zůstane obsah viditelný —
   dřív byla průhlednost natvrdo v CSS a při selhání skriptu zmizela celá stránka. */
.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.js .reveal.in{opacity:1; transform:translateY(0);}

::selection{background:var(--brand); color:#fff;}

/* ==========================================================================
   RESPONZIVITA — všechny breakpointy pohromadě kvůli udržovatelnosti
   ========================================================================== */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
}
/* Se šesti položkami potřebuje lišta 1179 px, jinak se menu srazí s pravou
   částí. Nejdřív proto stáhneme mezery a skryjeme telefon, pod 1024 px
   schováme menu celé do burgeru. */
@media(max-width:1180px){
  .nav-links{gap:24px;}
  .nav-phone{display:none;}
}
@media(max-width:1024px){
  .nav-links{display:none;}
  .burger{display:block;}
}
@media(max-width:860px){
  .why-grid{grid-template-columns:1fr 1fr;}
  .tech-grid{grid-template-columns:1fr 1fr;}
  .svc-shell{grid-template-columns:1fr;}
  .svc-list{border-right:none; border-bottom:1px solid var(--line);}
  .process-list{grid-template-columns:1fr; gap:28px;}
  .process-list::before{display:none;}
  .contact-grid{grid-template-columns:1fr;}
  .map-card, .map-card iframe{min-height:260px;}
}
@media(max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:720px){
  section{padding:64px 0;}
  .wrap{padding:0 20px;}
  .nav{padding:16px 20px;}
  .help-step{grid-template-columns:1fr; gap:14px;}
  .dl-card{padding:28px 24px;}
  .dl-card .btn{width:100%;}
  /* na mobilu ať lišta neukousne třetinu obrazovky */
  .cookie-bar{padding:16px 0;}
  .cookie-inner{gap:14px; padding:0 20px;}
  .cookie-text{flex-basis:100%; font-size:13.5px;}
  .cookie-text strong{font-size:15px;}
  .cookie-actions{width:100%;}
  .cookie-actions .btn{flex:1 1 0;}
}
@media(max-width:420px){
  /* na úzkém displeji už se plovoucí štítky s kartou překrývají */
  .stats-badge{position:static; display:inline-flex; margin:0 0 14px;}
  .stats-badge-bottom{margin:14px 0 0;}
  .stats-card{padding:0;}
  .stats-inner{padding:26px 22px;}
}
@media(max-width:640px){
  .final-cta{padding:44px 26px; border-radius:18px;}
}
@media(max-width:600px){
  .svc-detail{padding:26px 22px;}
}
@media(max-width:560px){
  .why-grid{grid-template-columns:1fr;}
  .tech-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .logo img{height:36px;}
  /* Na úzkém displeji zbývá po logu a burgeru asi 127 px, ale popisek
     „Vzdálená pomoc“ potřebuje ~141 px — proto zůstane jen ikona.
     Popisek se schová pouze vizuálně, odečítač ho dál čte jako název odkazu. */
  .nav-cta{padding:11px; border-radius:50%;}
  .nav-cta svg{width:20px; height:20px;}
  .nav-cta-label{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    overflow:hidden; clip-path:inset(50%);
    white-space:nowrap;
  }
}

/* ==========================================================================
   STAVY PŘI NAJETÍ — jen pro zařízení s myší.
   Na dotyku hover „zamrzal“ po klepnutí.
   ========================================================================== */
@media (hover:hover){
  .nav-links a:hover::after{width:100%;}
  .nav-phone:hover{color:var(--brand-deep);}
  .btn-primary:hover{background:var(--brand); transform:translateY(-1px);}
  .btn-brand:hover{background:var(--brand-deep); transform:translateY(-1px);}
  .btn-ghost:hover{border-color:var(--ink);}
  .btn-quiet:hover{border-color:#fff; background:rgba(255,255,255,.07);}
  .tech-list a:hover{background:var(--slate);}   /* bila na #48566B = 7,3:1 */
  .final-cta .btn-primary:hover{background:#fff; color:var(--ink);}
  .why-card:hover{background:var(--paper-alt);}
  .svc-item:hover{background:var(--paper-alt);}
  a.contact-value:hover{color:var(--brand-deep);}
  .footer-grid a:hover{color:#fff;}
  .back-link:hover{text-decoration:underline; text-underline-offset:4px;}
}

/* ==========================================================================
   OMEZENÝ POHYB
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1; transform:none;}
}

/* ==========================================================================
   TISK — kontakt na firmu se z webu často tiskne
   ========================================================================== */
@media print{
  header, .burger, .mobile-menu, .skip-link, .cookie-bar,
  .hero-ctas, .final-cta, .map-card{display:none !important;}
  body{background:#fff; color:#000;}
  section{padding:18px 0;}
  .section-dark, footer{background:#fff !important; color:#000 !important;}
  .section-dark .sec-head p, .process-step p, .footer-grid a, .footer-grid p,
  .trust-line, .trust-line strong{color:#000 !important;}
  .process-num{border:1px solid #000; color:#000; background:#fff;}
  .js .reveal{opacity:1 !important; transform:none !important;}
  a[href^="http"]::after, a[href^="mailto"]::after{content:" (" attr(href) ")"; font-size:11px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}