/* === Technická Pomoc — sdílený stylesheet pro statický prototyp v1 === */



:root {

  --navy-900: #0B1220;

  --navy-800: #0F172A;

  --navy-700: #1E293B;

  --navy-600: #334155;

  --slate-500: #64748B;

  --slate-400: #94A3B8;

  --slate-300: #CBD5E1;

  --slate-200: #E2E8F0;

  --slate-100: #F1F5F9;

  --slate-50:  #F8FAFC;

  --white:     #FFFFFF;

  --red:       #DC2626;

  --red-dark:  #B91C1C;

  --red-50:    #FEF2F2;

  --red-100:   #FEE2E2;

  --amber:     #F59E0B;

  --amber-50:  #FFFBEB;

  --green:     #10B981;

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);

  --shadow:    0 4px 12px rgba(15,23,42,0.08);

  --shadow-lg: 0 12px 32px rgba(15,23,42,0.12);

  --radius:    10px;

  --radius-lg: 14px;

  --maxw:      1200px;

}



* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  color: var(--navy-800);

  background: var(--white);

  line-height: 1.6;

  font-size: 17px;

  -webkit-font-smoothing: antialiased;

}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; }



.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }



/* === UTILITY BAR === */

.utility {

  background: var(--navy-900);

  color: var(--slate-200);

  font-size: 13px;

  padding: 8px 0;

  border-bottom: 1px solid var(--navy-700);

}

.utility .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

.utility .pill {

  display: inline-flex; align-items: center; gap: 6px;

  background: var(--red); color: #fff; padding: 2px 10px;

  border-radius: 999px; font-weight: 600; font-size: 11px; letter-spacing: 0.04em;

}

.utility a { color: var(--slate-200); transition: color .15s; }

.utility a:hover { color: var(--white); }

.utility-right { display: flex; gap: 20px; align-items: center; }



/* === HEADER === */

.header {

  background: var(--white);

  border-bottom: 1px solid var(--slate-200);

  position: sticky; top: 0; z-index: 50;

  box-shadow: var(--shadow-sm);

}

.header .container { display: flex; align-items: center; gap: 32px; padding-top: 14px; padding-bottom: 14px; }

.logo-placeholder {

  display: flex; align-items: center; gap: 12px;

  text-decoration: none; color: inherit;

}

.logo-mark {

  width: 56px; height: 56px;

  display: flex; align-items: center; justify-content: center;

  flex-shrink: 0;

  background: var(--white);

  border-radius: 12px;

  border: 1px solid var(--slate-200);

  padding: 4px;

}

.logo-mark img { width: 100%; height: 100%; object-fit: contain; }

.header .logo-mark { border: none; }

.logo-text { display: flex; flex-direction: column; }

.logo-text .brand { font-weight: 800; font-size: 18px; color: var(--navy-900); letter-spacing: -0.01em; }

.logo-text .tagline { font-size: 12px; color: var(--slate-500); font-weight: 500; }



.main-nav { display: flex; gap: 4px; flex: 1; justify-content: center; }

.main-nav a {

  padding: 10px 14px; border-radius: 8px; font-weight: 500; font-size: 15px;

  color: var(--navy-700); transition: all .15s;

}

.main-nav a:hover { background: var(--slate-100); color: var(--red); }

.main-nav a.active { color: var(--red); }



.phone-cta {

  display: inline-flex; align-items: center; gap: 10px;

  background: var(--red); color: var(--white);

  padding: 12px 20px; border-radius: 10px;

  font-weight: 800; font-size: 17px;

  transition: all .15s;

  box-shadow: 0 2px 8px rgba(220,38,38,0.25);

  white-space: nowrap;

}

.phone-cta:hover { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(220,38,38,0.35); }

.phone-cta .icon { font-size: 20px; }

.phone-cta .label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }

.phone-cta .label small { font-size: 10px; font-weight: 600; opacity: 0.9; letter-spacing: 0.04em; }



/* Mobilní hamburger */

.menu-toggle {

  display: none;

  background: transparent; border: 1.5px solid var(--slate-200);

  border-radius: 8px; padding: 8px 12px; font-size: 22px;

  color: var(--navy-800); cursor: pointer;

}

.mobile-drawer {

  display: none;

  position: fixed; inset: 0 0 0 30%; z-index: 100;

  background: var(--white);

  flex-direction: column;

  padding: 24px;

  box-shadow: -20px 0 40px rgba(0,0,0,0.15);

  transform: translateX(100%);

  transition: transform .25s ease;

}

.mobile-drawer.open { transform: translateX(0); display: flex; }

.mobile-drawer .close {

  align-self: flex-end; background: transparent; border: none;

  font-size: 28px; color: var(--navy-700); margin-bottom: 16px;

}

.mobile-drawer a {

  padding: 14px 16px; font-size: 18px; font-weight: 600;

  border-bottom: 1px solid var(--slate-200);

  color: var(--navy-800);

}

.mobile-drawer a.active { color: var(--red); }

.mobile-drawer .drawer-cta {

  margin-top: 24px;

  background: var(--red); color: var(--white);

  padding: 18px 22px; border-radius: 12px;

  font-weight: 800; font-size: 20px; text-align: center;

}

.drawer-backdrop {

  display: none;

  position: fixed; inset: 0; background: rgba(0,0,0,0.5);

  z-index: 99;

}

.drawer-backdrop.open { display: block; }



/* === HERO HOME === */

.hero {

  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);

  color: var(--white);

  padding: 80px 0 100px;

  position: relative;

  overflow: hidden;

}

.hero::before {

  content: '';

  position: absolute; top: 0; right: 0; width: 50%; height: 100%;

  background: radial-gradient(circle at 70% 30%, rgba(220,38,38,0.12), transparent 60%);

  pointer-events: none;

}

.hero .container { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }

.hero-eyebrow {

  display: inline-flex; align-items: center; gap: 8px;

  background: rgba(220,38,38,0.15); color: #FCA5A5;

  padding: 6px 14px; border-radius: 999px;

  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;

  margin-bottom: 24px;

  border: 1px solid rgba(220,38,38,0.3);

}

.hero-eyebrow .dot {

  width: 8px; height: 8px; border-radius: 50%; background: #DC2626;

  animation: pulse 1.6s infinite;

}

@keyframes pulse {

  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.7); }

  50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }

}

.hero h1 {

  font-size: 64px; font-weight: 900; line-height: 1.05;

  letter-spacing: -0.025em; margin-bottom: 20px;

}

.hero h1 .accent { color: #FCA5A5; }

.hero-sub {

  font-size: 20px; color: var(--slate-200); margin-bottom: 32px;

  max-width: 540px; line-height: 1.5;

}

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }

.btn-primary {

  display: inline-flex; align-items: center; gap: 12px;

  background: var(--red); color: var(--white);

  padding: 18px 28px; border-radius: 12px;

  font-weight: 800; font-size: 20px;

  transition: all .15s;

  box-shadow: 0 4px 20px rgba(220,38,38,0.35);

}

.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(220,38,38,0.45); }

.btn-primary .num { letter-spacing: -0.01em; }

.btn-ghost {

  display: inline-flex; align-items: center; gap: 10px;

  background: transparent; color: var(--white);

  padding: 16px 24px; border-radius: 12px;

  font-weight: 600; font-size: 16px;

  border: 1.5px solid rgba(255,255,255,0.25);

  transition: all .15s;

}

.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }

.btn-dark {

  display: inline-flex; align-items: center; gap: 10px;

  background: var(--navy-900); color: var(--white);

  padding: 16px 24px; border-radius: 12px;

  font-weight: 600; font-size: 16px;

  transition: all .15s;

}

.btn-dark:hover { background: var(--navy-800); transform: translateY(-1px); }



.hero-trust { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); }

.hero-trust div {

  display: flex; align-items: center; gap: 8px;

  font-size: 14px; color: var(--slate-200);

}

.hero-trust .check { color: #34D399; font-weight: 700; font-size: 18px; }



.hero-visual {

  border-radius: 20px;

  background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%);

  aspect-ratio: 4/5;

  border: 1px solid rgba(255,255,255,0.12);

  display: flex; flex-direction: column; align-items: center; justify-content: center;

  padding: 40px 32px; gap: 18px; text-align: center;

  position: relative; overflow: hidden;

  box-shadow: 0 20px 60px rgba(0,0,0,0.3);

}

.hero-visual::before {

  content: ''; position: absolute; inset: 0;

  background: radial-gradient(circle at 30% 20%, rgba(220,38,38,0.05), transparent 60%);

}

.hero-logo-frame {

  position: relative; z-index: 1;

  width: 65%; max-width: 280px; aspect-ratio: 1;

  display: flex; align-items: center; justify-content: center;

}

.hero-logo-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }

.hero-logo-caption {

  position: relative; z-index: 1;

  display: flex; flex-direction: column; gap: 4px;

  color: var(--navy-900);

}

.hero-logo-caption strong { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }

.hero-logo-caption span { font-size: 13px; color: var(--slate-500); font-weight: 500; letter-spacing: 0.02em; }



/* === SUBPAGE HERO (kompaktnější než homepage hero) === */

.subhero {

  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);

  color: var(--white);

  padding: 56px 0 64px;

  position: relative;

  overflow: hidden;

}

.subhero::before {

  content: '';

  position: absolute; top: 0; right: 0; width: 50%; height: 100%;

  background: radial-gradient(circle at 70% 30%, rgba(220,38,38,0.08), transparent 60%);

  pointer-events: none;

}

.subhero .container { position: relative; max-width: 900px; }

.breadcrumb {

  font-size: 13px; color: var(--slate-400); margin-bottom: 20px;

}

.breadcrumb a { color: var(--slate-300); }

.breadcrumb a:hover { color: var(--white); }

.breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

.subhero h1 {

  font-size: 48px; font-weight: 900; line-height: 1.1;

  letter-spacing: -0.025em; margin-bottom: 16px;

}

.subhero p {

  font-size: 19px; color: var(--slate-200); margin-bottom: 24px;

  max-width: 720px;

}

.subhero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }



.subhero.danger {

  background: linear-gradient(135deg, #7F1D1D 0%, var(--red-dark) 100%);

}



/* === EMERGENCY STRIP === */

.emergency-strip {

  background: var(--red);

  color: var(--white);

  padding: 28px 0;

  position: relative;

  overflow: hidden;

}

.emergency-strip::before {

  content: ''; position: absolute; inset: 0;

  background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.06) 12px 24px);

  pointer-events: none;

}

.emergency-strip .container {

  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;

  position: relative;

}

.emergency-strip .msg { font-size: 22px; font-weight: 700; }

.emergency-strip .msg small { display: block; font-size: 14px; font-weight: 500; opacity: 0.9; margin-top: 4px; }

.emergency-strip .phone {

  display: inline-flex; align-items: center; gap: 12px;

  background: var(--white); color: var(--red);

  padding: 16px 28px; border-radius: 10px;

  font-weight: 800; font-size: 22px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

  transition: all .15s;

}

.emergency-strip .phone:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }



/* === SECTIONS === */

.section { padding: 96px 0; }

.section.compact { padding: 64px 0; }

.section-eyebrow {

  display: inline-block; font-size: 12px; font-weight: 700;

  letter-spacing: 0.15em; color: var(--red); text-transform: uppercase;

  margin-bottom: 12px;

}

.section-eyebrow.light { color: #FCA5A5; }

.section-title {

  font-size: 44px; font-weight: 800; letter-spacing: -0.02em;

  color: var(--navy-900); line-height: 1.1;

  margin-bottom: 16px; max-width: 720px;

}

.section-sub {

  font-size: 18px; color: var(--slate-500);

  max-width: 640px; margin-bottom: 56px;

}



/* === SERVICES === */

.services {

  background: var(--slate-50);

  border-top: 1px solid var(--slate-200);

  border-bottom: 1px solid var(--slate-200);

}

.service-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 20px;

}

.service-card {

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 28px 24px;

  border: 1px solid var(--slate-200);

  transition: all .2s;

  display: flex; flex-direction: column;

}

.service-card:hover {

  border-color: var(--red);

  box-shadow: var(--shadow);

  transform: translateY(-4px);

}

.service-icon {

  width: 84px; height: 84px;

  border-radius: 16px;

  background: var(--white);

  border: 1.5px solid var(--slate-200);

  display: flex; align-items: center; justify-content: center;

  margin-bottom: 22px;

  padding: 12px;

}

.service-icon svg { width: 40px; height: 40px; color: var(--red); }

.service-icon img { width: 100%; height: 100%; object-fit: contain; }

.service-card:hover .service-icon { border-color: var(--red); background: var(--red-50); }

.service-card h3 {

  font-size: 20px; font-weight: 700; color: var(--navy-900);

  margin-bottom: 10px; letter-spacing: -0.01em;

}

.service-card p {

  font-size: 15px; color: var(--slate-500);

  line-height: 1.55; margin-bottom: 16px; flex: 1;

}

.service-card .link {

  font-size: 14px; font-weight: 600; color: var(--red);

  display: inline-flex; align-items: center; gap: 4px;

}

.service-card .link::after { content: '→'; transition: transform .15s; }

.service-card:hover .link::after { transform: translateX(4px); }



/* === WHY US === */

.why .container {

  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: 80px;

  align-items: center;

}

.why-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

}

.why-item {

  padding: 24px;

  border-radius: var(--radius-lg);

  background: var(--slate-50);

  border: 1px solid var(--slate-200);

}

.why-item .num {

  font-size: 32px; font-weight: 800; color: var(--red);

  display: block; margin-bottom: 8px; letter-spacing: -0.02em;

}

.why-item .label {

  font-size: 15px; font-weight: 600; color: var(--navy-800);

  margin-bottom: 6px;

}

.why-item .desc {

  font-size: 13px; color: var(--slate-500); line-height: 1.45;

}



/* === REFERENCES === */

.references {

  background: var(--navy-900);

  color: var(--white);

}

.references .section-title { color: var(--white); }

.references .section-sub { color: var(--slate-400); }

.ref-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}

.ref-card {

  background: var(--navy-800);

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--navy-700);

  transition: all .2s;

}

.ref-card:hover { transform: translateY(-4px); border-color: var(--slate-500); }

.ref-photo {

  aspect-ratio: 4/3;

  background: var(--navy-700);

  position: relative;

  overflow: hidden;

  border-bottom: 1px solid var(--navy-700);

}

.ref-photo img {

  width: 100%; height: 100%; object-fit: cover;

  display: block;

  transition: transform .3s;

}

.ref-card:hover .ref-photo img { transform: scale(1.04); }

.ref-photo.placeholder {

  display: flex; align-items: center; justify-content: center;

  color: var(--slate-400);

  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;

  background: var(--navy-700) repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,0.02) 10px 20px);

}

.ref-body { padding: 20px 22px; }

.ref-tag {

  display: inline-block; background: rgba(220,38,38,0.15); color: #FCA5A5;

  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;

  letter-spacing: 0.05em; margin-bottom: 10px;

}

.ref-body h4 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }

.ref-body p { font-size: 14px; color: var(--slate-400); line-height: 1.55; }

.ref-meta {

  display: flex; gap: 12px; align-items: center;

  margin-top: 14px; padding-top: 14px;

  border-top: 1px solid var(--navy-700);

  font-size: 12px; color: var(--slate-500);

}



/* === REVIEWS === */

.reviews { background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }

.rating-strip {

  display: inline-flex; align-items: center; gap: 16px;

  background: var(--white); border: 1px solid var(--slate-200);

  padding: 14px 22px; border-radius: 999px; margin-bottom: 32px;

  box-shadow: var(--shadow-sm);

}

.rating-strip .stars { color: var(--amber); font-size: 18px; letter-spacing: 2px; }

.rating-strip .score { font-size: 18px; font-weight: 800; color: var(--navy-900); }

.rating-strip .source { font-size: 14px; color: var(--slate-500); }

.review-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 20px;

}

.review-card {

  background: var(--white);

  border: 1px solid var(--slate-200);

  border-radius: var(--radius-lg);

  padding: 26px;

}

.review-stars { color: var(--amber); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }

.review-text {

  font-size: 15px; color: var(--navy-700); line-height: 1.6;

  margin-bottom: 18px;

}

.review-author { display: flex; align-items: center; gap: 12px; }

.avatar {

  width: 44px; height: 44px; border-radius: 50%;

  background: var(--navy-800); color: var(--white);

  display: flex; align-items: center; justify-content: center;

  font-weight: 700; font-size: 16px;

}

.review-author .name { font-size: 14px; font-weight: 600; color: var(--navy-900); }

.review-author .meta { font-size: 12px; color: var(--slate-500); }



/* === AREA === */

.area .container { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

.area-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }

.area-list span {

  font-size: 15px; font-weight: 500; color: var(--navy-800);

  padding: 8px 0; border-bottom: 1px solid var(--slate-200);

  display: flex; align-items: center; gap: 10px;

}

.area-list span::before {

  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red);

}



/* === FINAL CTA === */

.final-cta {

  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);

  color: var(--white);

  padding: 80px 0;

  text-align: center;

}

.final-cta h2 {

  font-size: 44px; font-weight: 800; letter-spacing: -0.02em;

  margin-bottom: 16px; line-height: 1.15;

}

.final-cta p { font-size: 19px; opacity: 0.95; margin-bottom: 36px; max-width: 600px; margin-left: auto; margin-right: auto; }

.final-cta .phone {

  display: inline-flex; align-items: center; gap: 14px;

  background: var(--white); color: var(--red);

  padding: 22px 38px; border-radius: 14px;

  font-weight: 900; font-size: 28px;

  box-shadow: 0 8px 24px rgba(0,0,0,0.25);

  transition: all .15s;

}

.final-cta .phone:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }



/* === FOOTER === */

footer {

  background: var(--navy-900);

  color: var(--slate-300);

  padding: 64px 0 24px;

}

.footer-grid {

  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr 1fr;

  gap: 48px;

  margin-bottom: 48px;

}

.footer-brand .logo-text .brand { color: var(--white); }

.footer-brand .logo-text .tagline { color: var(--slate-400); }

.footer-brand .logo-mark {

  width: 56px; height: 56px;

  background: var(--white);

  border-radius: 12px;

  padding: 6px;

}



/* === REFERENCE LOGA (klient brands) === */

.refs-strip {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

  gap: 20px;

  align-items: stretch;

  justify-items: stretch;

  padding: 24px 0;

}

.refs-strip .ref-logo {

  background: var(--white);

  border: 1px solid var(--slate-200);

  border-radius: 12px;

  height: 100px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 16px 20px;

  transition: border-color .15s, transform .15s;

}

.refs-strip .ref-logo:hover { border-color: var(--red); transform: translateY(-2px); }

.refs-strip .ref-logo img {

  max-height: 56px;

  max-width: 100%;

  width: auto; height: auto;

  object-fit: contain;

}

.footer-brand p { margin-top: 16px; font-size: 14px; color: var(--slate-400); line-height: 1.6; }

.footer-col h5 {

  font-size: 13px; font-weight: 700; color: var(--white);

  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px;

}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 10px; font-size: 14px; color: var(--slate-400); }

.footer-col a {

  font-size: 14px; color: var(--slate-300);

  transition: color .15s;

  display: inline-flex; align-items: center; gap: 8px;

}

.footer-col a:hover { color: var(--white); }

.footer-bottom {

  padding-top: 24px;

  border-top: 1px solid var(--navy-700);

  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;

  font-size: 13px; color: var(--slate-500);

}

.footer-bottom .legal a { color: var(--slate-400); margin-right: 20px; }

.footer-bottom .legal a:hover { color: var(--white); }



/* === ANNOTATIONS (P0 FIX audit: skryto v produkci, atribut data-note zůstává v DOM jako interní TODO) === */

.annotation { position: static; }

.annotation::before { display: none !important; content: none !important; }



/* === PROSE LAYOUTS pro legal a textové stránky === */

.prose {

  max-width: 760px;

  margin: 0 auto;

  padding: 64px 24px 96px;

  font-size: 17px;

  line-height: 1.7;

  color: var(--navy-800);

}

.prose h2 {

  font-size: 28px; font-weight: 800; letter-spacing: -0.015em;

  margin-top: 48px; margin-bottom: 16px; color: var(--navy-900);

}

.prose h3 {

  font-size: 20px; font-weight: 700;

  margin-top: 32px; margin-bottom: 12px; color: var(--navy-900);

}

.prose p, .prose ul, .prose ol { margin-bottom: 16px; }

.prose ul, .prose ol { padding-left: 24px; }

.prose li { margin-bottom: 6px; }

.prose a { color: var(--red); text-decoration: underline; }

.prose strong { font-weight: 700; color: var(--navy-900); }

.prose table {

  width: 100%; border-collapse: collapse; margin: 24px 0;

  font-size: 15px;

}

.prose table th, .prose table td {

  padding: 10px 14px; text-align: left;

  border-bottom: 1px solid var(--slate-200);

}

.prose table th {

  background: var(--slate-50); font-weight: 700;

  color: var(--navy-900);

}

.prose .note {

  background: var(--amber-50); border-left: 4px solid var(--amber);

  padding: 14px 18px; border-radius: 8px;

  font-size: 15px; margin: 24px 0;

}



/* === STEPS (1-2-3) === */

.steps {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: 20px;

  margin-top: 32px;

}

.step {

  background: var(--white);

  border: 1px solid var(--slate-200);

  border-radius: var(--radius-lg);

  padding: 28px;

  position: relative;

}

.step .step-num {

  width: 40px; height: 40px;

  background: var(--red); color: var(--white);

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  font-weight: 800; font-size: 18px;

  margin-bottom: 16px;

}

.step h3 {

  font-size: 18px; font-weight: 700; color: var(--navy-900);

  margin-bottom: 8px;

}

.step p {

  font-size: 15px; color: var(--slate-500); line-height: 1.55;

}



/* === FEATURE LIST === */

.feature-list {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px 32px;

  margin: 32px 0;

}

.feature-list .item {

  display: flex; gap: 14px; align-items: flex-start;

}

.feature-list .item .check {

  flex-shrink: 0;

  width: 24px; height: 24px;

  background: var(--green); color: var(--white);

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  font-weight: 800; font-size: 13px;

  margin-top: 2px;

}

.feature-list .item .text strong {

  display: block; font-weight: 600; color: var(--navy-900);

  margin-bottom: 2px;

}

.feature-list .item .text span {

  font-size: 14px; color: var(--slate-500);

}



/* === PRICE TABLE === */

.price-table {

  background: var(--white);

  border: 1px solid var(--slate-200);

  border-radius: var(--radius-lg);

  overflow: hidden;

  margin: 32px 0;

}

.price-row {

  display: grid;

  grid-template-columns: 1fr auto;

  padding: 18px 24px;

  border-bottom: 1px solid var(--slate-200);

  align-items: center;

  gap: 16px;

}

.price-row:last-child { border-bottom: none; }

.price-row.header {

  background: var(--slate-50);

  font-weight: 700; color: var(--navy-900);

  font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;

}

.price-row .name { font-weight: 600; color: var(--navy-900); }

.price-row .desc { font-size: 13px; color: var(--slate-500); margin-top: 2px; }

.price-row .price {

  font-weight: 800; font-size: 18px; color: var(--red);

  white-space: nowrap;

}



/* === BLOG === */

.blog-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 24px;

}

.blog-card {

  background: var(--white);

  border: 1px solid var(--slate-200);

  border-radius: var(--radius-lg);

  overflow: hidden;

  transition: all .2s;

}

.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--red); }

.blog-thumb {

  aspect-ratio: 16/10;

  background: var(--slate-100) repeating-linear-gradient(45deg, transparent 0 12px, rgba(15,23,42,0.04) 12px 24px);

  display: flex; align-items: center; justify-content: center;

  color: var(--slate-400);

  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;

}

.blog-body { padding: 22px 24px; }

.blog-cat {

  display: inline-block; font-size: 11px; font-weight: 700;

  color: var(--red); text-transform: uppercase; letter-spacing: 0.08em;

  margin-bottom: 8px;

}

.blog-card h3 {

  font-size: 18px; font-weight: 700; color: var(--navy-900);

  margin-bottom: 10px; line-height: 1.3;

}

.blog-card p {

  font-size: 14px; color: var(--slate-500); line-height: 1.55;

  margin-bottom: 14px;

}

.blog-meta {

  display: flex; gap: 12px; align-items: center;

  font-size: 12px; color: var(--slate-500);

  padding-top: 14px;

  border-top: 1px solid var(--slate-200);

}



/* === KONTAKT === */

.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

}

.contact-block {

  background: var(--white);

  border: 1px solid var(--slate-200);

  border-radius: var(--radius-lg);

  padding: 32px;

}

.contact-block h3 {

  font-size: 22px; font-weight: 800; color: var(--navy-900);

  margin-bottom: 16px;

}

.contact-item {

  display: flex; gap: 14px; align-items: flex-start;

  padding: 16px 0;

  border-bottom: 1px solid var(--slate-200);

}

.contact-item:last-child { border-bottom: none; }

.contact-item .ic {

  width: 40px; height: 40px;

  background: var(--red-50); color: var(--red);

  border-radius: 10px;

  display: flex; align-items: center; justify-content: center;

  font-size: 18px; flex-shrink: 0;

}

.contact-item .label {

  font-size: 12px; font-weight: 700; color: var(--slate-500);

  text-transform: uppercase; letter-spacing: 0.06em;

}

.contact-item .value {

  font-size: 17px; font-weight: 600; color: var(--navy-900);

  margin-top: 2px;

}

.contact-item .value a { color: inherit; }

.contact-item .value a:hover { color: var(--red); }

.contact-item .note { font-size: 13px; color: var(--slate-500); margin-top: 2px; }



.contact-form { display: flex; flex-direction: column; gap: 16px; }

.contact-form label {

  font-size: 13px; font-weight: 700; color: var(--navy-800);

  display: block; margin-bottom: 6px;

}

.contact-form input, .contact-form textarea, .contact-form select {

  width: 100%;

  padding: 12px 14px;

  border: 1.5px solid var(--slate-200);

  border-radius: 10px;

  font-family: inherit; font-size: 15px;

  background: var(--white); color: var(--navy-900);

  transition: border-color .15s;

}

.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {

  outline: none; border-color: var(--red);

}

.contact-form textarea { min-height: 120px; resize: vertical; }

.contact-form .submit {

  background: var(--red); color: var(--white);

  padding: 16px 28px; border-radius: 12px;

  font-weight: 800; font-size: 17px;

  cursor: pointer; transition: all .15s;

}

.contact-form .submit:hover { background: var(--red-dark); transform: translateY(-1px); }

.contact-form .gdpr-note { font-size: 12px; color: var(--slate-500); }



.map-placeholder {

  aspect-ratio: 16/10;

  background: var(--slate-100);

  border: 1px solid var(--slate-200);

  border-radius: var(--radius-lg);

  display: flex; flex-direction: column; align-items: center; justify-content: center;

  color: var(--slate-500); font-size: 14px;

  margin-top: 24px;

}



/* === 404 === */

.error-page {

  min-height: 70vh;

  display: flex; align-items: center; justify-content: center;

  text-align: center; padding: 64px 24px;

}

.error-page .num {

  font-size: 120px; font-weight: 900; color: var(--red);

  letter-spacing: -0.04em; line-height: 1;

  margin-bottom: 16px;

}

.error-page h1 {

  font-size: 32px; font-weight: 800; color: var(--navy-900);

  margin-bottom: 12px;

}

.error-page p {

  font-size: 17px; color: var(--slate-500);

  margin-bottom: 32px; max-width: 480px;

}

.error-page .ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }



/* === FAQ === */

.faq { margin-top: 32px; }

.faq details {

  background: var(--white);

  border: 1px solid var(--slate-200);

  border-radius: var(--radius);

  margin-bottom: 12px;

  overflow: hidden;

}

.faq summary {

  padding: 18px 22px;

  cursor: pointer;

  font-weight: 600; color: var(--navy-900);

  display: flex; justify-content: space-between; align-items: center;

  list-style: none;

}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {

  content: '+';

  font-size: 24px; color: var(--red); font-weight: 400;

  transition: transform .2s;

}

.faq details[open] summary::after {

  content: '−';

}

.faq details[open] summary { border-bottom: 1px solid var(--slate-200); }

.faq .content {

  padding: 18px 22px;

  color: var(--slate-500); font-size: 15px; line-height: 1.65;

}



/* === COOKIE BANNER === */

.cookie-banner {

  position: fixed;

  left: 16px; right: 16px; bottom: 16px;

  max-width: 1080px; margin: 0 auto;

  background: var(--navy-900);

  color: var(--white);

  border-radius: var(--radius-lg);

  box-shadow: 0 20px 50px rgba(0,0,0,0.3);

  padding: 20px 24px;

  display: none;

  z-index: 200;

  border: 1px solid var(--navy-700);

}

.cookie-banner.show { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }

.cookie-banner .text { font-size: 14px; line-height: 1.5; color: var(--slate-200); }

.cookie-banner .text strong { color: var(--white); display: block; font-size: 15px; margin-bottom: 4px; }

.cookie-banner .text a { color: #FCA5A5; text-decoration: underline; }

.cookie-banner .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cookie-banner button {

  padding: 10px 18px;

  border-radius: 8px;

  font-weight: 600; font-size: 14px;

  cursor: pointer; transition: all .15s;

  border: none; font-family: inherit;

}

.cookie-banner .cookie-decline {

  background: transparent; color: var(--slate-300);

  border: 1px solid var(--navy-600);

}

.cookie-banner .cookie-decline:hover { background: var(--navy-800); color: var(--white); }

.cookie-banner .cookie-accept {

  background: var(--red); color: var(--white);

}

.cookie-banner .cookie-accept:hover { background: var(--red-dark); }



/* === STICKY MOBILE CALL BUTTON === */

.mobile-call-fab {

  position: fixed;

  right: 20px; bottom: 20px;

  background: var(--red);

  color: var(--white);

  padding: 16px 20px;

  border-radius: 999px;

  font-weight: 800; font-size: 16px;

  box-shadow: 0 8px 24px rgba(220,38,38,0.4);

  display: none;

  align-items: center;

  gap: 10px;

  z-index: 90;

  transition: all .15s;

  animation: fab-pulse 2.5s infinite;

}

.mobile-call-fab:hover { background: var(--red-dark); transform: translateY(-2px); }

.mobile-call-fab .ic { font-size: 20px; }

@keyframes fab-pulse {

  0%, 100% { box-shadow: 0 8px 24px rgba(220,38,38,0.4), 0 0 0 0 rgba(220,38,38,0.5); }

  50% { box-shadow: 0 8px 24px rgba(220,38,38,0.4), 0 0 0 12px rgba(220,38,38,0); }

}



/* === RESPONSIVE === */

@media (max-width: 900px) {

  .hero .container { grid-template-columns: 1fr; }

  .hero h1 { font-size: 44px; }

  .subhero h1 { font-size: 36px; }

  .hero-visual { aspect-ratio: 3/2; }

  .why .container { grid-template-columns: 1fr; gap: 40px; }

  .ref-grid { grid-template-columns: 1fr; }

  .area .container { grid-template-columns: 1fr; gap: 32px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  .main-nav { display: none; }

  .menu-toggle { display: inline-flex; }

  .header .container { gap: 16px; }

  .section { padding: 64px 0; }

  .section-title { font-size: 32px; }

  .final-cta h2 { font-size: 32px; }

  .final-cta .phone { font-size: 22px; padding: 18px 26px; }

  .contact-grid { grid-template-columns: 1fr; gap: 24px; }

  .feature-list { grid-template-columns: 1fr; }

}

@media (max-width: 900px) {

  .mobile-call-fab { display: inline-flex; }

  .cookie-banner.show { grid-template-columns: 1fr; gap: 12px; }

  .cookie-banner .actions { width: 100%; }

  .cookie-banner button { flex: 1; }

}

@media (max-width: 560px) {

  .footer-grid { grid-template-columns: 1fr; }

  .emergency-strip .msg { font-size: 18px; }

  .hero { padding: 56px 0 72px; }

  .hero h1 { font-size: 36px; }

  .subhero h1 { font-size: 28px; }

  .hero-sub { font-size: 17px; }

  .btn-primary { font-size: 17px; padding: 16px 22px; width: 100%; justify-content: center; }

  .btn-ghost { width: 100%; justify-content: center; }

  .area-list { grid-template-columns: 1fr; }

  .phone-cta .label { display: none; }

  .price-row { grid-template-columns: 1fr; }

  .mobile-drawer { inset: 0; }

  .mobile-call-fab { right: 16px; bottom: 80px; padding: 14px 18px; font-size: 15px; }

}



/* ===== P0 FIX: Skrýt prototype annotace v produkci =====

   Annotace zůstanou v markupu (data-note=) jako intern�



/* === Skip link (WCAG 2.4.1) === */

.skip-link {

  position: absolute;

  left: -9999px;

  top: 0;

  background: var(--navy-900);

  color: var(--white);

  padding: 12px 20px;

  z-index: 9999;

  text-decoration: none;

  font-weight: 700;

}

.skip-link:focus {

  left: 16px;

  top: 16px;

  outline: 3px solid var(--amber);

  outline-offset: 2px;

}





/* === ANNOTATIONS extension (P0 FIX audit V2: skrýt p/div/span annotation prvky úplně) === */

p.annotation, div.annotation, span.annotation, li.annotation { display: none !important; }