:root{
  --brand: #880518;
  --brand-2: #6f0413;
  --brand-soft: rgba(136, 5, 24, 0.08);
  --text: #1b1b1b;
  --muted: #6b7280;
  --card: #ffffff;
  --bg: #f7f7f8;
  --header-h: 120px;
}

html, body { height: 100%; }

body{
  color: var(--text);
  background: var(--bg);

  text-rendering: optimizeLegibility;
  font-kerning: normal;

  scroll-padding-top: var(--header-h);
}

a{ color: var(--brand); text-decoration: none; }
a:hover{ color: var(--brand-2); }

.bg-brand{ background: var(--brand) !important; }
.text-brand{ color: var(--brand) !important; }
.border-brand{ border-color: var(--brand) !important; }

.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover{
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: #fff;
}

.btn-brand-outline{
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
}
.btn-brand-outline:hover{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.topbar{
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: 0.92rem;
}

.navbar{
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Navbar link hover + active */
.navbar .nav-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(0,0,0,.72);
  font-weight: 600;
  transition: background-color .75s ease, color .75s ease;
}

/* podtržení jako “pill underline” */
.navbar .nav-link::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand);
  opacity: 0;
  transform: scaleX(.6);
  transition: opacity .75s ease, transform .75s ease;
}

/* Hover */
.navbar .nav-link:hover{
  background: var(--brand-soft);
  color: var(--brand);
}
.navbar .nav-link:hover::after{
  opacity: 1;
  transform: scaleX(1);
}

/* Active (zůstane zvýrazněný) */
.navbar .nav-link.is-active{
  background: var(--brand-soft);
  color: var(--brand);
}
.navbar .nav-link.is-active::after{
  opacity: 1;
  transform: scaleX(1);
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 1050;
}

.site-header .topbar,
.site-header .navbar{
  background: #fff;
}

main{
  padding-top: 0;
}

.hero{
  position: relative;
  background: #111;
  color: #fff;
  border-radius: 18px;
  overflow: hidden;
}

/* Pozadí (obrázek) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../images/hero.webp") center/cover no-repeat;
  filter: brightness(0.5) contrast(0.75) saturate(0.95);
  transform: scale(1.02);
}

/* Overlay pro čitelnost */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.15) 25%,
    rgba(0,0,0,.05) 100%
  );
}

/* Obsah musí být nad overlay */
.hero > .hero-inner{
  position: relative;
  z-index: 1;
  padding: 56px 24px;
}
@media (min-width: 992px){
  .hero > .hero-inner{ padding: 84px 56px; }
}

/* Panel pod levým textem */
.hero-panel{
  background: rgba(15,15,16,.52);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 18px 18px;
  backdrop-filter: blur(10px);
}

/* KPI řádek */
.hero-kpis{
  color: rgba(255,255,255,.78);
}
.hero-kpis i{
  color: #fff;
  opacity: .9;
}

/* Pravý box – lehce ztmavit + brand tint + čitelný nadpis */
.hero-sidecard{
  background: rgba(245,245,246,.88);              /* lehce tmavší než čistá bílá */
  border: 1px solid rgba(0,0,0,.08);              /* místo bílé hrany */
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}

/* Nadpis v pravém boxu */
.hero-sidecard .fw-semibold{
  color: var(--brand);
  font-weight: 800;
}

/* Text v pravém boxu trochu tmavší (lepší čitelnost než default muted) */
.hero-sidecard .text-muted{
  color: rgba(0,0,0,.62) !important;
}

.badge-soft{
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid rgba(136,5,24,.12);
}

.section{
  padding: 56px 0;
}
@media (min-width: 992px){
  .section{ padding: 72px 0; }
}

.card-clean{
  background: var(--card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}

/* BENEFITY – hlavička (ikona + nadpis vedle sebe) */
.benefit-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.benefit-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid rgba(136,5,24,.12);
  flex: 0 0 auto;
}

.benefit-icon i{
  font-size: 18px;
  line-height: 1;
}

.benefit-title{
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
}

.icon-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand);
  display: inline-block;
  margin-right: 10px;
}

.footer{
  background: #0f0f10;
  color: rgba(255,255,255,.86);
}
.footer a{ color: rgba(255,255,255,.86); }
.footer a:hover{ color: #fff; }
.footer .muted{ color: rgba(255,255,255,.62); }

.form-control:focus{
  border-color: rgba(136,5,24,.45);
  box-shadow: 0 0 0 0.25rem rgba(136,5,24,.12);
}

.sticky-cta{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1030;
  display: none;
}
@media (max-width: 991.98px){
  .sticky-cta{ display: block; }
}