:root{

  --blue:#2677a3;

  --blue-dark:#284fb3;

  --white:#ffffff;

  --muted:#333;

  --max-width:1100px;

  --radius:10px;

  --section-border:#ccc;

}



*{ box-sizing:border-box; }



body{

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

  margin:0;

  color:#000;

  line-height:1.45;

  background:#fff;

}



.container{

  max-width:var(--max-width);

  margin:0 auto;

  padding:0 18px;

}



/* HEADER */

.site-header{

  position:sticky;

  top:0;

  background:var(--blue);

  height:64px;

  z-index:50;

}

.header-inner{

  display:flex;

  justify-content:space-between;

  align-items:center;

  height:100%;

  padding:0;

}

.brand .logo{

  font-weight:700;

  font-size:22px;

  color:#fff;

}

.nav a{

  text-decoration:none;

  color:#fff;

  font-weight:600;

  margin-left:16px;

}



/* HERO */

.hero{

  position:relative;

  background-size:cover;

  background-position:center;

  height:360px;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  color:#fff;

}

.hero-overlay{

  background:linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0));

  padding:0 20px;

}

.hero h2{

  font-size:32px;

  margin:0;

}



/* Sekce s čarou */

.section{

  padding:40px 0;

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

}



/* Why us ikony */

.why-us .grid-icons{

  display:flex;

  justify-content:space-around;

  flex-wrap:wrap;

  gap:24px;

}

.icon-card{

  width:220px;

  text-align:center;

}

.icon-card h4{ color:var(--blue); font-size:18px; margin-bottom:6px; }

.icon-card p{ color:#000; font-size:14px; }



/* Produkty */

.grid{

  display:grid;

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

  gap:16px;

}

.card{

  position:relative;

  height:260px;

  border-radius:var(--radius);

  overflow:hidden;

  color:#fff;

  text-decoration:none;

  background-size:cover;

  background-position:center;

}

.card-overlay{

  position:absolute;

  bottom:0;

  left:0;

  right:0;

  padding:12px;

  background:linear-gradient(180deg,rgba(0,0,0,0.05),rgba(0,0,0,0.45));

}

.card-overlay h4{ margin:0; font-size:16px; }



/* Footer */

.site-footer{

  background:#111;

  color:#fff;

  text-align:center;

  padding:16px 0;

  font-size:14px;

}



/* Responsivita */

@media(max-width:800px){

  .nav{display:none;}

  .hero h2{font-size:24px;}

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

  .why-us .grid-icons{flex-direction:column;align-items:center;}

}