:root{
  --bg:#ffffff;
  --bg2:#eef1f7;
  --card:#ffffff;
  --text:#1e2433;
  --muted:#5c6577;
  --line:#e0e4ec;
  --brand:#0c8fd4;
  --brand2:#5558c9;
  --ok:#0d9668;
  --shadow: 0 4px 24px rgba(12,127,212,.06);
  --radius: 16px;
  --radius2: 22px;
  --container: 1100px;
}

*{ box-sizing:border-box; }
html{ 
  scroll-behavior:smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1400px 700px at 5% -5%, rgba(12,143,212,.08), transparent 50%),
    linear-gradient(180deg, #eef1f6 0%, var(--bg) 35%);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; height:auto; }

.container{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.skip-link{
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  color: #000;
  transform: translateY(-140%);
  transition: transform .18s ease;
  z-index: 9999;
}
.skip-link:focus{ transform: translateY(0); }

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(232,236,244,.98);
  border-bottom: 1px solid var(--line);
}
.site-header .header-inner{
  position: relative;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}
.brand-mark{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: var(--radius);
  background: rgba(12,143,212,.12);
  border: 1px solid rgba(12,143,212,.2);
  box-shadow: 0 2px 12px rgba(12,143,212,.08);
}
.brand-text{ display:flex; flex-direction:column; gap: 2px; }
.brand-name{ font-size: 18px; font-weight: 780; letter-spacing: .2px; color: var(--text); }
.brand-tag{ color: var(--muted); font-size: 14px; }

.site-nav{
  display:flex;
  align-items:center;
  gap: 8px;
}
.site-nav a{
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.site-nav a:hover{
  background: var(--bg2);
  color: var(--text);
  border-color: var(--line);
}
.site-nav a.active{
  background: rgba(12,143,212,.15) !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(12,143,212,.25);
}
.site-nav a.active:hover{
  background: rgba(12,143,212,.22) !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 1px var(--brand);
}

.lang-switcher{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.lang-link{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.lang-link:hover{
  background: var(--bg2);
  border-color: var(--brand);
  color: var(--brand);
}
.lang-link.active{
  background: rgba(12,143,212,.1);
  border-color: var(--brand);
  color: var(--brand);
}
.flag{
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.flag-cz{
  background: linear-gradient(to bottom, #fff 33.33%, #d7141a 33.33%, #d7141a 66.66%, #11457e 66.66%);
  border: 1px solid rgba(0,0,0,.12);
}
.flag-de{
  background: linear-gradient(to bottom, #000 33.33%, #dd0000 33.33%, #dd0000 66.66%, #ffce00 66.66%);
  border: 1px solid rgba(0,0,0,.2);
}
.lang-code{
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nav-cta{
  color: #fff !important;
  background: var(--brand);
  border-color: var(--brand) !important;
}
.nav-cta:hover{
  background: #0a7ab8 !important;
  border-color: #0a7ab8 !important;
}

.nav-toggle{
  display:none;
  border: 1px solid var(--line);
  background: var(--bg2);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-lines{
  width: 18px;
  height: 12px;
  position: relative;
  display:block;
}
.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background: var(--text);
  border-radius: 2px;
  opacity: .9;
}
.nav-toggle-lines::before{ top: 2px; }
.nav-toggle-lines::after{ bottom: 2px; }

/* Hero */
.hero{
  padding: 52px 0 24px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: stretch;
}
.pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--muted);
  margin: 0 0 12px;
  font-size: 13px;
}
.hero-aktualni{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  border: 2px solid var(--brand);
  background: rgba(12,143,212,.1);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  transition: all .2s ease;
  box-shadow: 0 2px 12px rgba(12,143,212,.1);
}
.hero-aktualni:hover{
  border-color: var(--brand);
  background: rgba(12,143,212,.15);
  color: var(--brand);
  box-shadow: 0 4px 16px rgba(12,143,212,.15);
  transform: translateY(-1px);
}
.hero-aktualni .icon-svg{
  color: var(--brand);
  opacity: 1;
  flex-shrink: 0;
}
.hero h1{
  margin: 0 0 12px;
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.7px;
}
.accent{
  display:block;
  color: var(--brand);
  padding-top: 6px;
}
.lead{
  color: var(--muted);
  font-size: 18px;
  margin: 0 0 18px;
  max-width: 62ch;
}
.hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.btn:hover{
  transform: translateY(-1px);
  background: var(--bg2);
  border-color: var(--brand);
  color: var(--brand);
}
.btn.primary{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 16px rgba(12,143,212,.25);
}
.btn.primary:hover{
  background: #0a7ab8;
  border-color: #0a7ab8;
  color: #fff;
  box-shadow: 0 6px 20px rgba(12,143,212,.3);
}
.btn.ghost{
  background: transparent;
}

.hero-metrics{
  margin: 18px 0 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.metric{
  padding: 12px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg2);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.metric dt{ font-weight: 720; margin: 0 0 2px; }
.metric dd{ margin: 0; color: var(--muted); font-size: 13px; }

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.hero-card{ align-self: start; }
.hero-card .card{
  border-radius: var(--radius);
}
.card-title{ margin: 0 0 6px; font-size: 18px; }
.card-subtitle{ margin: 0 0 14px; color: var(--muted); }
.divider{
  border:0;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}

.contact-mini, .contact-box{ display:grid; gap: 10px; }
.contact-row{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg2);
  transition: all .15s ease;
  min-height: 44px;
}
.contact-row:hover{
  border-color: var(--brand);
  background: rgba(12,143,212,.06);
  transform: translateX(2px);
}
.contact-row .icon-svg{
  flex-shrink: 0;
  color: var(--brand);
  opacity: 0.85;
}
.contact-row:hover .icon-svg{
  opacity: 1;
  transform: scale(1.05);
}
/* Telefon v hero – hlavní akce, zvýrazněný */
.contact-row-phone{
  border-color: rgba(12,143,212,.25);
  background: rgba(12,143,212,.08);
}
.contact-row-phone .value{
  font-size: 18px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.02em;
}
.contact-row-phone .icon-svg{
  color: var(--brand);
  opacity: 1;
}
.contact-row-phone:hover{
  border-color: var(--brand);
  background: rgba(12,143,212,.12);
}
.contact-row-phone:hover .value{
  color: var(--brand);
}
/* Badge působnosti v hero */
.hero-pusobnost-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(12,143,212,.1);
  border: 1px solid rgba(12,143,212,.2);
  margin-top: 4px;
}
.hero-pusobnost-text{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}
.icon{ width: 26px; height: 26px; display:grid; place-items:center; }
.label{ display:block; color: var(--muted); font-size: 12px; }
.value{ display:block; font-weight: 650; }

.checklist{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
}
.checklist li{ margin: 6px 0; }
.checklist li::marker{ color: var(--ok); }

/* Blok rozvaděče (Služby) */
.rozvadece-block{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 32px;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg2);
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
}
.rozvadece-content h3{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.rozvadece-content p{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.55;
}
.rozvadece-list{
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
}
.rozvadece-list li{
  margin: 6px 0;
}
.rozvadece-list li::marker{
  color: var(--brand);
}
.rozvadece-img{
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  max-width: 280px;
}
.rozvadece-img img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Sections */
.section{
  padding: 56px 0;
}
.section.section-current .container{
  border-left: 4px solid var(--brand);
  padding-left: 20px;
}
.section.alt{
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.section h2{
  margin:0;
  font-size: 28px;
  letter-spacing: -0.4px;
}
.section-head p{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.service{
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
.service h3{ margin: 0 0 6px; }
.service p{ margin: 0 0 10px; color: var(--muted); }
.service ul{ margin: 0; padding-left: 18px; color: var(--muted); }
.service li{ margin: 6px 0; }

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.badges{ display:flex; flex-wrap:wrap; gap: 8px; margin: 14px 0; }
.badge{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--muted);
  font-size: 13px;
}

.callout{
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(12,143,212,.28);
  background: linear-gradient(135deg, rgba(12,143,212,.07), rgba(85,88,201,.05));
}
.callout h3{ margin: 0 0 8px; }
.steps{ margin:0; padding-left: 18px; color: var(--muted); }
.steps li{ margin: 8px 0; }

.figure{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background:
    radial-gradient(500px 250px at 30% 20%, rgba(12,143,212,.07), transparent 62%),
    radial-gradient(500px 280px at 70% 70%, rgba(85,88,201,.05), transparent 60%),
    var(--bg2);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.figure-inner{ padding: 18px; }
.figure-title{ font-weight: 750; margin-bottom: 10px; }
.figure-list{ margin:0; padding-left: 18px; color: var(--muted); }
.figure-note{ margin: 12px 0 0; color: var(--muted); font-size: 13px; }

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.refs-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.ref{
  padding: 22px;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}
.ref:hover{
  border-color: rgba(12,143,212,.35);
  box-shadow: 0 8px 24px rgba(12,143,212,.1);
  transform: translateY(-2px);
}
.ref-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.ref-pill{
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(12,143,212,.28);
  background: rgba(12,143,212,.08);
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ref-location{
  color: var(--muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ref-pin{
  flex-shrink: 0;
  color: var(--brand);
  opacity: 0.85;
}
.ref-location-none{
  color: var(--muted);
}
.ref h3{
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.ref p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  flex-grow: 1;
}
.ref-date{ color: var(--muted); font-size: 12px; }

/* Aktuální projekty (úvod) */
.current-projects-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.current-project{
  position: relative;
  padding: 24px 24px 24px 28px;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.current-project::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand);
  border-radius: 4px 0 0 4px;
}
.current-project-badge{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(12,143,212,.12);
  border: 1px solid rgba(12,143,212,.25);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}
.current-project-content h3{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.current-project-desc{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 60ch;
}
.current-project-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.current-project-tags li{
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

/* Form */
.form{
  display:grid;
  gap: 12px;
  margin-top: 12px;
}
.form label{ display:grid; gap: 6px; }
.form label > span{ color: var(--muted); font-size: 13px; }
.form input, .form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  outline: none;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}
.form input::placeholder, .form textarea::placeholder{ color: var(--muted); opacity: .8; }
.form input:focus, .form textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(12,143,212,.12);
}
.form-row{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}
.form-hint{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 44ch;
}
.form-status{
  margin: 0;
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
}
.field-error{
  border-color: rgba(255,100,100,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,100,100,.12) !important;
}

/* Footer */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 22px 0;
  background: var(--bg2);
}
.footer-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap: 14px;
  align-items:center;
}
.footer-brand{ font-weight: 800; }
.footer-note{ color: var(--muted); font-size: 13px; }
.footer-links{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.footer-links a{
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 12px;
}
.footer-links a:hover{ background: rgba(12,143,212,.08); color: var(--brand); }
.footer-copy{
  display:flex;
  gap: 10px;
  justify-content: end;
  align-items:center;
  color: var(--muted);
  font-size: 13px;
}
.footer-copy a:hover{ color: var(--brand); }
.dot{ opacity: .65; }

/* Contact persons – tři kontakty + Sídlo + Oblast, stejné velikosti */
.contact-four-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
  min-height: 420px;
  height: 420px;
}
.contact-four-grid > *{
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.contact-four-grid .contact-person{
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.contact-four-grid .sidlo-card,
.contact-four-grid .pusobnost-card{
  max-width: none;
  display: flex;
  flex-direction: column;
}
.contact-four-grid .sidlo-card .card,
.contact-four-grid .pusobnost-card .card{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pusobnost-list{
  margin: 12px 0 0;
  padding-left: 1.25em;
  font-size: 18px;
  line-height: 1.6;
  list-style: disc;
}
.pusobnost-list li{
  margin-bottom: 6px;
  color: #c00;
  font-weight: 700;
}
.pusobnost-list li:last-child{
  margin-bottom: 0;
}

.contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.contact-person{
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: var(--card);
}
.contact-person h3{
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.person-name{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}
.contact-links{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.contact-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text);
  transition: all .15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.contact-link:hover{
  border-color: var(--brand);
  background: rgba(12,143,212,.07);
  transform: translateX(2px);
}
.icon-svg{
  flex-shrink: 0;
  color: var(--brand);
  opacity: 0.9;
}
.contact-link:hover .icon-svg{
  opacity: 1;
  transform: scale(1.05);
}

.sidlo-card .card{
  padding: 18px;
}
.pusobnost-card .card-title{
  margin-bottom: 0;
}
.map-inline{
  padding: 16px;
}
.map-inline .map-cz{
  max-height: 280px;
}
.map-iframe{
  display: block;
  width: 100%;
  height: 280px;
  border: none;
  border-radius: var(--radius2);
  background: var(--bg2);
}
.map-inline .map-iframe{
  max-height: 280px;
}
.contact-info{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.contact-info-row{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}
.contact-info-row .icon-svg{
  color: var(--muted);
  opacity: 0.8;
}

/* Map section */
.map-container{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: start;
}
.map-wrapper{
  position:relative;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: var(--bg2);
  padding: 24px;
  overflow:hidden;
}
.map-cz{
  width:100%;
  height:auto;
  max-height: 400px;
}
.map-note{
  margin-top: 16px;
  display:flex;
  justify-content: center;
}
.map-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(12,143,212,.28);
  background: linear-gradient(135deg, rgba(12,143,212,.09), rgba(85,88,201,.07));
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.map-badge .icon-svg{
  color: var(--brand);
}
.map-regions{
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: var(--bg2);
}
.region-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.region-item{
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* Responsive */
@media (max-width: 900px){
  .container{
    width: calc(100% - 32px);
  }
  
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-card{ order: 2; }
  .hero-metrics{ grid-template-columns: 1fr; }
  .hero{
    padding: 32px 0 20px;
  }
  .hero h1{
    font-size: clamp(28px, 6vw, 42px);
  }
  .lead{
    font-size: 16px;
  }
  .hero-actions{
    flex-direction: column;
  }
  .hero-actions .btn{
    width: 100%;
    justify-content: center;
  }

  .cards{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .refs-grid{ grid-template-columns: 1fr; }
  .rozvadece-block{ grid-template-columns: 1fr; }
  .rozvadece-img{ order: -1; }
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-links{ justify-content: start; }
  .footer-copy{ justify-content: start; flex-wrap: wrap; }
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-four-grid{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    height: auto;
    min-height: 0;
  }
  .map-container{ grid-template-columns: 1fr; }
  .region-list{ grid-template-columns: 1fr; }

  .section{
    padding: 40px 0;
  }
  .section-head h2{
    font-size: 24px;
  }

  .nav-toggle{ display:inline-flex; }
  .site-nav{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0;
    padding: 12px 0 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    z-index: 60;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .site-nav a{ 
    padding: 14px 16px; 
    min-height: 48px;
  }
  .site-nav a.active{
    background: rgba(12,143,212,.15);
    color: var(--brand);
    font-weight: 700;
    border-left: 3px solid var(--brand);
  }
  .site-header.is-open .site-nav{ 
    display: flex; 
    visibility: visible;
  }
  .site-header.is-open{ overflow: visible; }

  .brand{
    min-width: auto;
  }
  .brand-name{
    font-size: 17px;
  }
  .brand-tag{
    font-size: 13px;
  }
}

@media (max-width: 640px){
  .container{
    width: calc(100% - 24px);
  }

  .hero{
    padding: 24px 0 16px;
  }
  .hero h1{
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.1;
  }
  .lead{
    font-size: 15px;
  }
  .pill{
    font-size: 12px;
    padding: 6px 10px;
  }

  .section{
    padding: 32px 0;
  }
  .section-head h2{
    font-size: 22px;
  }

  .card{
    padding: 16px;
  }
  .card-title{
    font-size: 16px;
  }

  .contact-person{
    padding: 16px;
  }
  .person-name{
    font-size: 16px;
  }
  .contact-link{
    padding: 10px 10px;
    font-size: 14px;
  }

  .ref{
    padding: 16px;
  }
  .ref h3{
    font-size: 15px;
  }
  .ref p{
    font-size: 13px;
  }
  .ref-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .ref-location{
    font-size: 11px;
  }

  .map-wrapper{
    padding: 16px;
  }
  .map-cz{
    max-height: 300px;
  }
  .map-iframe{
    height: 240px;
  }
  .map-badge{
    font-size: 12px;
    padding: 8px 12px;
  }
  .region-item{
    font-size: 12px;
    padding: 6px 10px;
  }

  .form input, .form textarea{
    padding: 10px 12px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  .form-row{
    flex-direction: column;
    align-items: stretch;
  }
  .form-row .btn{
    width: 100%;
  }

  .header-inner{
    padding: 12px 0;
  }
  .brand-mark{
    width: 36px;
    height: 36px;
  }
  .brand-text{
    gap: 1px;
  }

  .footer-inner{
    gap: 12px;
  }
  .footer-brand{
    font-size: 16px;
  }
  .footer-note{
    font-size: 12px;
  }
  .footer-links{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .footer-links a{
    padding: 6px 8px;
  }
}

@media (max-width: 480px){
  .container{
    width: calc(100% - 20px);
  }

  .hero h1{
    font-size: 24px;
  }
  .lead{
    font-size: 14px;
  }

  .section-head h2{
    font-size: 20px;
  }

  .metric{
    padding: 10px;
  }
  .metric dt{
    font-size: 14px;
  }
  .metric dd{
    font-size: 12px;
  }

  .contact-row{
    padding: 8px 10px;
  }
  .contact-row .icon-svg{
    width: 18px;
    height: 18px;
  }
  .value{
    font-size: 14px;
  }
  .label{
    font-size: 11px;
  }

  .btn{
    padding: 10px 12px;
    font-size: 14px;
  }

  .ref-pill{
    font-size: 10px;
    padding: 4px 8px;
  }

  .checklist{
    font-size: 13px;
  }
}