/* ==========================================

   1. Základní proměnné a reset

   ========================================== */

:root {

  --primary: #173f3b;

  --primary-hover: #102c29;

  --accent: #c29b38;

  --accent-hover: #a8842d;

  --bg-color: #f7f9f8;

  --bg-soft: #edf2f0;

  --bg-pale: #e4ece8;

  --text-main: #2b3735;

  --text-muted: #62726f;

  --white: #ffffff;

  --border-color: #d1dde0;

  --radius: 12px;

  --transition: all 0.3s ease;

  --max-width: 1200px;

}



*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  font-size: 16px;

}



body {

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  color: var(--text-main);

  background-color: var(--bg-color);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

}



ul {

  list-style: none;

}



.container {

  width: 100%;

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

  margin: 0 auto;

  padding: 0 1.5rem;

}



/* ==========================================

   2. Přístupnost (Skip link)

   ========================================== */

.skip-link {

  position: absolute;

  top: -40px;

  left: 0;

  background: var(--accent);

  color: var(--white);

  padding: 8px 16px;

  z-index: 1000;

  transition: top 0.3s;

}



.skip-link:focus {

  top: 0;

}



/* ==========================================

   3. Hlavička (Header & Navigation)

   ========================================== */

header {

  position: sticky;

  top: 0;

  background-color: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(10px);

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

  z-index: 100;

}



.nav {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 96px;

}



.brand {

  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 700;

  letter-spacing: 0.5px;

  color: var(--primary);

}



.brand img {

  border-radius: 50%;

  object-fit: cover;

}



.nav-links {

  display: flex;

  gap: 2rem;

}



.nav-links a {

  font-weight: 500;

  color: var(--text-main);

  transition: var(--transition);

}



.nav-links a:hover {

  color: var(--accent);

}



.header-tools {

  display: flex;

  align-items: center;

  gap: 1.5rem;

}



.languages {

  display: flex;

  gap: 8px;

  font-size: 0.85rem;

  font-weight: 600;

}



.languages a {

  padding: 4px 8px;

  border-radius: 4px;

  color: var(--text-muted);

}



.languages a.active, .languages a:hover {

  background-color: var(--bg-soft);

  color: var(--primary);

}



/* ==========================================

   4. Tlačítka (Buttons)

   ========================================== */

.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background-color: var(--primary);

  color: var(--white);

  padding: 12px 24px;

  border-radius: var(--radius);

  font-weight: 600;

  transition: var(--transition);

  border: 2px solid transparent;

  cursor: pointer;

}



.button:hover {

  background-color: var(--primary-hover);

  transform: translateY(-2px);

}



.button-small {

  padding: 8px 16px;

  font-size: 0.9rem;

}



.button-outline {

  background-color: transparent;

  border-color: var(--primary);

  color: var(--primary);

}



.button-outline:hover {

  background-color: var(--primary);

  color: var(--white);

}



.button.light {

  background-color: var(--white);

  color: var(--primary);

}



.button.light:hover {

  background-color: var(--bg-soft);

}



/* ==========================================

   5. Hero sekce

   ========================================== */

.hero {

  padding: 4rem 0 3rem;

}



.hero-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  align-items: center;

}



.eyebrow {

  font-size: 0.85rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: var(--accent);

  margin-bottom: 1rem;

}



.hero h1 {

  font-size: clamp(2.5rem, 4vw, 3.5rem);

  line-height: 1.15;

  color: var(--primary);

  margin-bottom: 1.25rem;

}



.hero h1 em {

  font-style: italic;

  color: var(--accent);

}



.lead {

  font-size: 1.15rem;

  color: var(--text-muted);

  margin-bottom: 2rem;

}



.buttons {

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

  margin-bottom: 2rem;

}



.benefits {

  display: flex;

  gap: 1.5rem;

  font-size: 0.95rem;

  font-weight: 500;

  color: var(--text-muted);

}



.benefits li::before {

  content: "✓ ";

  color: var(--accent);

  font-weight: bold;

}



.hero-image {

  position: relative;

  border-radius: var(--radius);

  overflow: hidden;

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

}



.hero-image img {

  width: 100%;

  height: auto;

  aspect-ratio: 3/4;

  object-fit: cover;

}



.hero-image figcaption {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);

  color: var(--white);

  padding: 1.5rem 1rem 1rem;

  font-size: 0.9rem;

}



/* ==========================================

   6. Statistiky / Proof sekce

   ========================================== */

.proof {

  background-color: var(--primary);

  color: var(--white);

  padding: 2.5rem 0;

  margin-bottom: 4rem;

}



.proof-grid {

  display: grid;

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

  gap: 2rem;

  align-items: center;

}



.proof-main {

  display: flex;

  align-items: center;

  gap: 1.5rem;

}



.counter {

  font-size: 3.5rem;

  font-weight: 800;

  color: var(--accent);

  line-height: 1;

}



.proof-main b {

  font-size: 2.5rem;

  color: var(--accent);

  margin-left: -1.2rem;

}



.proof-main div strong {

  display: block;

  font-size: 1.1rem;

}



.proof-main div small {

  color: rgba(255,255,255,0.7);

}



.proof-item strong {

  display: block;

  font-size: 1.1rem;

  margin-bottom: 0.2rem;

}



.proof-item span {

  color: rgba(255,255,255,0.7);

  font-size: 0.9rem;

}



/* ==========================================

   7. Obecné sekce a karty

   ========================================== */

.section {

  padding: 4rem 0;

}



.section.soft {

  background-color: var(--bg-soft);

}



.section.pale {

  background-color: var(--bg-pale);

}



.section-heading {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin-bottom: 3rem;

  gap: 2rem;

}



.section-heading h2 {

  font-size: clamp(2rem, 3vw, 2.5rem);

  color: var(--primary);

  line-height: 1.2;

}



.section-heading p {

  max-width: 450px;

  color: var(--text-muted);

}



/* Karty služeb */

.cards {

  display: grid;

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

  gap: 2rem;

}



.service-card {

  background: var(--white);

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(0,0,0,0.05);

  transition: var(--transition);

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

  display: flex;

  flex-direction: column;

}



.service-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 15px 35px rgba(23, 63, 59, 0.1);

}



.service-card img {

  width: 100%;

  height: 220px;

  object-fit: cover;

}



.service-card div {

  padding: 2rem;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.service-card span {

  font-size: 0.85rem;

  font-weight: 700;

  color: var(--accent);

  text-transform: uppercase;

  margin-bottom: 0.5rem;

}



.service-card h3 {

  font-size: 1.35rem;

  color: var(--primary);

  margin-bottom: 0.75rem;

}



.service-card p {

  color: var(--text-muted);

  font-size: 0.95rem;

}



/* ==========================================

   8. Jak to funguje (Steps)

   ========================================== */

.steps {

  display: grid;

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

  gap: 2.5rem;

}



.steps article {

  background: var(--white);

  padding: 2.5rem;

  border-radius: var(--radius);

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

  position: relative;

}



.steps article b {

  font-size: 2.5rem;

  color: var(--accent);

  opacity: 0.4;

  display: block;

  margin-bottom: 1rem;

  line-height: 1;

}



.steps article h3 {

  font-size: 1.25rem;

  color: var(--primary);

  margin-bottom: 0.5rem;

}



.steps article p {

  color: var(--text-muted);

  font-size: 0.95rem;

}



/* ==========================================

   9. Pro firmy a zkušenosti

   ========================================== */

.company {

  background-color: var(--primary);

  color: var(--white);

}



.company .eyebrow {

  color: var(--accent);

}



.company-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: center;

  padding-bottom: 3rem;

  border-bottom: 1px solid rgba(255,255,255,0.15);

}



.company-grid h2 {

  color: var(--white);

  font-size: clamp(2rem, 3vw, 2.5rem);

  margin-bottom: 1.5rem;

}



.company-grid p {

  color: rgba(255,255,255,0.8);

  margin-bottom: 1.5rem;

}



.company-grid ul {

  margin-bottom: 2rem;

}



.company-grid li {

  margin-bottom: 0.75rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  color: rgba(255,255,255,0.9);

}



.company-grid li::before {

  content: "•";

  color: var(--accent);

  font-size: 1.5rem;

}



.company-grid figure {

  border-radius: var(--radius);

  overflow: hidden;

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

}



.company-grid figure img {

  width: 100%;

  height: 350px;

  object-fit: cover;

}



.company-grid figcaption {

  background: rgba(0,0,0,0.5);

  text-align: center;

  padding: 0.5rem;

  font-size: 0.85rem;

  color: rgba(255,255,255,0.7);

}



.experience {

  padding-top: 3rem;

}



.experience h3 {

  font-size: 1.1rem;

  margin-bottom: 1.5rem;

  color: var(--accent);

  text-transform: uppercase;

  letter-spacing: 1px;

}



.experience div {

  display: flex;

  flex-wrap: wrap;

  gap: 1.5rem;

}



.experience span {

  background: rgba(255,255,255,0.08);

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

  padding: 1rem 1.5rem;

  border-radius: var(--radius);

  font-weight: 600;

  display: flex;

  flex-direction: column;

  gap: 0.25rem;

}



.experience span small {

  font-weight: 400;

  font-size: 0.8rem;

  color: rgba(255,255,255,0.6);

}



/* ==========================================

   10. O mně (About)

   ========================================== */

.about {

  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: 4rem;

  align-items: center;

}



.about img {

  border-radius: var(--radius);

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

  width: 100%;

  max-height: 500px;

  object-fit: cover;

}



.about h2 {

  font-size: clamp(2rem, 3vw, 2.5rem);

  color: var(--primary);

  margin-bottom: 1.5rem;

}



.about p {

  color: var(--text-muted);

  margin-bottom: 1.25rem;

}



.notice {

  background: var(--bg-soft);

  border-left: 4px solid var(--accent);

  padding: 1.25rem;

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

  margin-top: 2rem;

}



.notice strong {

  display: block;

  color: var(--primary);

  margin-bottom: 0.25rem;

}



.notice span {

  font-size: 0.9rem;

  color: var(--text-muted);

}



/* ==========================================

   11. Ceník (Prices)

   ========================================== */

.prices {

  display: grid;

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

  gap: 1.5rem;

  margin-bottom: 2.5rem;

}



.prices > div {

  background: var(--white);

  padding: 2.5rem 2rem;

  border-radius: var(--radius);

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

  text-align: center;

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  transition: var(--transition);

}



.prices > div.featured {

  border-color: var(--accent);

  box-shadow: 0 15px 30px rgba(194, 155, 56, 0.15);

  transform: scale(1.03);

  z-index: 2;

}



.prices > div.featured small {

  position: absolute;

  top: -12px;

  left: 50%;

  transform: translateX(-50%);

  background: var(--accent);

  color: var(--white);

  padding: 4px 12px;

  font-size: 0.75rem;

  font-weight: 700;

  border-radius: 20px;

  letter-spacing: 0.5px;

}



.prices b {

  font-size: 1.1rem;

  color: var(--text-muted);

  margin-bottom: 0.5rem;

}



.prices strong {

  font-size: 2.2rem;

  color: var(--primary);

  margin-bottom: 0.5rem;

  display: block;

}



.prices span {

  font-size: 0.9rem;

  color: var(--text-muted);

}



.addons {

  text-align: center;

  font-size: 0.95rem;

  color: var(--text-muted);

  margin-bottom: 2rem;

}



.center {

  text-align: center;

}



/* ==========================================

   12. Kontakt (Contact)

   ========================================== */

.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: center;

}



.contact h2 {

  font-size: clamp(2rem, 3vw, 2.5rem);

  color: var(--primary);

  margin-bottom: 1.5rem;

}



.contact p {

  color: var(--text-muted);

}



.contact-card {

  background: var(--white);

  padding: 3rem;

  border-radius: var(--radius);

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

  box-shadow: 0 10px 30px rgba(0,0,0,0.05);

  display: flex;

  flex-direction: column;

  gap: 1.25rem;

}



.contact-card a[href^="tel:"], 

.contact-card a[href^="mailto:"] {

  font-size: 1.5rem;

  font-weight: 700;

  color: var(--primary);

  transition: var(--transition);

}



.contact-card a[href^="tel:"]:hover, 

.contact-card a[href^="mailto:"]:hover {

  color: var(--accent);

}



.contact-card span {

  color: var(--text-muted);

  font-size: 0.95rem;

}



.socials {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin: 0.5rem 0;

}



.socials a {

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--primary);

  background: var(--bg-soft);

  padding: 6px 12px;

  border-radius: 6px;

  transition: var(--transition);

}



.socials a:hover {

  background: var(--primary);

  color: var(--white);

}



/* ==========================================

   13. Patička (Footer)

   ========================================== */

footer {

  background-color: var(--primary);

  color: rgba(255,255,255,0.7);

  text-align: center;

  padding: 2.5rem 1.5rem;

  font-size: 0.95rem;

  border-top: 1px solid rgba(255,255,255,0.1);

}



/* ==========================================

   14. Cookies lišta a nastavení

   ========================================== */

.cookie-banner {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  background: var(--white);

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

  padding: 1.5rem;

  box-shadow: 0 -10px 30px rgba(0,0,0,0.1);

  z-index: 999;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 2rem;

}



.cookie-banner[hidden],

.cookie-settings[hidden],

.cookie-link-button[hidden] {

  display: none !important;

}



.cookie-banner strong {

  display: block;

  color: var(--primary);

  margin-bottom: 0.25rem;

}



.cookie-banner p {

  font-size: 0.9rem;

  color: var(--text-muted);

}



.cookie-actions {

  display: flex;

  gap: 0.75rem;

  flex-wrap: wrap;

}



.cookie-btn {

  padding: 10px 18px;

  border-radius: var(--radius);

  font-weight: 600;

  font-size: 0.9rem;

  cursor: pointer;

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

  background: var(--white);

  color: var(--text-main);

  transition: var(--transition);

}



.cookie-btn:hover {

  background: var(--bg-soft);

}



.cookie-btn-primary {

  background: var(--primary);

  color: var(--white);

  border-color: var(--primary);

}



.cookie-btn-primary:hover {

  background: var(--primary-hover);

}



/* Modální okno nastavení cookies */

.cookie-settings {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.5);

  backdrop-filter: blur(4px);

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1rem;

}



.cookie-settings-panel {

  background: var(--white);

  width: 100%;

  max-width: 500px;

  border-radius: var(--radius);

  padding: 2.5rem;

  position: relative;

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

}



.cookie-close {

  position: absolute;

  top: 1.25rem;

  right: 1.25rem;

  background: none;

  border: none;

  font-size: 1.5rem;

  cursor: pointer;

  color: var(--text-muted);

}



.cookie-settings-panel h2 {

  color: var(--primary);

  margin-bottom: 1rem;

  font-size: 1.5rem;

}



.cookie-settings-panel p {

  font-size: 0.9rem;

  color: var(--text-muted);

  margin-bottom: 1.5rem;

}



.cookie-option {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1rem 0;

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

  margin-bottom: 1.5rem;

}



.cookie-option span b {

  display: block;

  color: var(--primary);

}



.cookie-option span small {

  color: var(--text-muted);

  font-size: 0.8rem;

}



.cookie-option input {

  width: 20px;

  height: 20px;

  accent-color: var(--primary);

  cursor: pointer;

}



.cookie-settings-actions {

  display: flex;

  gap: 0.75rem;

  flex-wrap: wrap;

}



.cookie-link-button {

  position: fixed;

  bottom: 20px;

  left: 20px;

  background: var(--primary);

  color: var(--white);

  border: none;

  padding: 8px 14px;

  border-radius: 20px;

  font-size: 0.8rem;

  font-weight: 600;

  cursor: pointer;

  z-index: 990;

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

  transition: var(--transition);

}



.cookie-link-button:hover {

  background: var(--primary-hover);

}



/* ==========================================

   15. Responzivní design (Media Queries)

   ========================================== */

@media (max-width: 968px) {

  .nav-links {

    display: none;

  }



  /* Úprava pro mobilní zobrazení hlavičky a jazyků */

  .nav {

    flex-wrap: wrap;

    height: auto;

    padding: 1rem 0;

    gap: 1rem;

    justify-content: space-between;

  }

  

  .header-tools {

    width: 100%;

    justify-content: space-between;

    align-items: center;

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

    padding-top: 0.75rem;

    margin-top: 0.5rem;

  }



  .languages {

    font-size: 0.95rem;

  }



  /* Ostatní responzivní pravidla */

  .hero-grid,

  .company-grid,

  .about,

  .contact-grid {

    grid-template-columns: 1fr;

    gap: 2.5rem;

  }



  .proof-grid {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }



  .section-heading {

    flex-direction: column;

    align-items: flex-start;

    gap: 1rem;

  }



  .prices > div.featured {

    transform: none;

  }

}



@media (max-width: 600px) {

  .cookie-banner {

    flex-direction: column;

    align-items: stretch;

  }



  .cookie-actions {

    flex-direction: column;

  }

}