:root{

  --brand:#c61e1e;

  --brand2:#e23a3a;

  --text:#0f172a;

  --muted:#5e6673;

  --bg:#ffffff;

  --bg-alt:#f6f7fb;

  --border:#e6e9f0;

  --radius:14px;

  --maxw:1140px;

  --shadow:0 8px 24px rgba(16,24,40,.08);

}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{

  margin:0;

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  color:var(--text);

  background:var(--bg);

  line-height:1.6;

}

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

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

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

.muted{color:var(--muted)}



/* Topbar */

.topbar{

  background:#0f172a;

  color:#e6edf7;

  font-size:14px;

}

.topbar .row{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:12px;

  padding:8px 0;

}

.topbar a{color:#e6edf7}



/* Header */

header{

  position:sticky;

  top:0;

  z-index:50;

  background:#fff;

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

}

.nav{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:12px;

  padding:12px 0;

}

.brand{

  display:flex;

  align-items:center;

  gap:10px;

  font-weight:800;

  letter-spacing:.4px;

}

.dot{

  width:12px;

  height:12px;

  border-radius:999px;

  background:var(--brand);

}

nav{

  display:flex;

  gap:10px;

  align-items:center;

}

nav a{

  padding:8px 12px;

  border-radius:10px;

  color:#314156;

  font-weight:600;

}

nav a:hover,

nav a.active{

  background:#f1f4f8;

}

.cta{

  background:linear-gradient(90deg,var(--brand),var(--brand2));

  color:#fff;

  padding:10px 14px;

  border-radius:10px;

  font-weight:700;

  box-shadow:0 6px 18px rgba(198,30,30,.2);

}



/* Sections */

main section{padding:34px 0}

h1{font-size:clamp(28px,4.4vw,44px);margin:0 0 8px}

h2{font-size:28px;margin:0 0 8px}

.lead{color:var(--muted);font-size:18px;margin:0 0 12px}



/* Grid helpers */

.grid{display:grid;gap:16px}

.grid-2{grid-template-columns:repeat(2,1fr)}

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



/* Cards/boxes */

.card{

  background:#fff;

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

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  padding:14px;

}

.box{

  background:#fff;

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

  border-radius:12px;

  box-shadow:var(--shadow);

  padding:16px;

}

.tile{

  background:#fff;

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

  border-radius:12px;

  overflow:hidden;

}

.tile img{

  width:100%;

  height:160px;

  object-fit:cover;

}

.tile .body{padding:12px}



/* Breadcrumbs */

.breadcrumbs{

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

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

  padding:10px 0;

  margin-bottom:10px;

  color:#475467;

  font-size:14px;

}

.breadcrumbs .sep{

  margin:0 8px;

  color:#9aa3af;

}

.breadcrumbs a{color:#344054}

.breadcrumbs a:hover{color:#111827}



/* Brand logos */

.brands{

  display:grid;

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

  gap:16px;

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

  border-radius:12px;

  padding:16px;

}

.brands img{

  height:34px;

  margin:auto;

  filter:none;

  opacity:1;

  transition:.2s;

}

.brands img:hover{

  filter:grayscale(60%);

  opacity:.9;

}



/* Footer */

footer{

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

  color:#6b7280;

  padding:18px 0;

}



/* Breakpoints */

@media (max-width:980px){

  .grid-2{grid-template-columns:1fr}

}



@media (max-width:760px){

  /* topbar a header nebudou nalepené na kraje */

  .topbar {

    padding: 0 14px;

  }

  header{

    padding:0 14px;

  }

  /* schovat klasickou navigaci */

  nav{

    display:none;

  }

  /* ať se nesrazí výška */

  .nav{

    padding:12px 0;

  }

}