/* ============================
       CSS PROMĚNNÉ (brand-friendly)
       Upravte tyto barvy podle vašeho loga (z logo_20(9).pdf). :contentReference[oaicite:1]{index=1}
       ============================ */
  :root {
      --brand-bg: #ffffff;
      /* celkové pozadí (světlé) */
      --brand-foreground: #231f20;
      /* text */
      --brand-accent: #ffcb08;
      /* primární akcent (tlačítka) */
      --brand-accent-2: #df771c;
      /* sekundární akcent */
      --muted: #6b6b6b;
      --container-max: 1100px;
      --radius: 5px;
      --glass: rgba(255, 255, 255, 0.9);
      --background: linear-gradient(30deg, #f39c12 30%, #f1c40f);
      --background-select: linear-gradient(to left, #34495e 3rem, #2c3e50 3rem);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  @font-face {
    font-family: 'Bebas Neue';
    src: url('font/BebasNeue-Regular.ttf');
}

  /* ============================
         Pokud vlastníte Bebas Neue Pro: přidejte soubory do /fonts a odkomentujte.
         @font-face {
           font-family: "BebasNeuePro";
           src: url("/fonts/BebasNeuePro.woff2") format("woff2"),
                url("/fonts/BebasNeuePro.woff") format("woff");
           font-weight: 400;
           font-style: normal;
           font-display: swap;
         }
         Poté v h1,h2... použijte font-family: "BebasNeuePro", system-ui, sans-serif;
         Jinak bude pro nadpisy použita "Bebas Neue" z webu / fallback.
         ============================ */

  /* Fallback (Bebas Neue look): use uppercase, tight tracking */
  h1,
  h2,
  h3,
  .display {
      font-family: "Bebas Neue", "BebasNeuePro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      letter-spacing: 0.03em;
      line-height: 1;
      text-transform: uppercase;
      font-weight: lighter;
  }

  h2 {
      margin: 0 auto;
      text-align: center;
      font-size: 58px;
      font-weight: regular;
  }

  h4 {
      font-size: 28px;
      margin: 0;
      font-weight: 500;
  }

  body {
      margin: 0;
      font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color: var(--brand-foreground);
      background: var(--brand-bg);
      background-image: url(img/burger-icon.png);
      background-size: 10%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

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

  /* Container */
  .wrap {
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 28px;
  }

  /* Header / Nav */
  header {
      position: sticky;
      top: 0;
      z-index: 40;
      background: var(--glass);
      backdrop-filter: blur(5px);
      border-bottom: 4px solid var(--brand-accent);
  }

  .nav-inner {
      max-width: var(--container-max);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 22px;
      color: var(--brand-bg);
  }

  .nav-inner .flags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .nav-inner .flags .flag {
    width: 24px;
    height: 16px;
    opacity: 40%;
    transition: 0.3s ease opacity;
    cursor: pointer;
  }

  .flags .flag:hover {
    opacity: 80%;
  }

  .flags .flag.active {
    opacity: 100%;
  }

  .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--brand-accent);
  }

  .logo {
      height: 100%;
      max-width: 130px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .logo img {
      width: 100%;
      height: 100%;
  }

  nav a {
      margin-left: 18px;
      font-weight: 600;
      color: var(--brand-foreground);
  }

  .ctas {
      display: flex;
      gap: 25px;
      align-items: center;
  }

  .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 10px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease;
      border: none;
  }

  .btn:active {
      transform: translateY(1px);
  }

  .btn-primary {
      background: var(--brand-accent);
      color: white;
  }

  .btn-inverted {
      background: white;
      color: var(--brand-foreground);
  }

  .btn-ghost {
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.06);
      color: var(--brand-foreground);
  }

  /* HERO */
  .hero {
      display: grid;
      grid-template-columns: 1fr 480px;
      gap: 36px;
      align-items: center;
      padding: 48px 22px;
  }

  .hero-left {
      padding-right: 10px;
  }

  .eyebrow {
      color: var(--brand-accent-2);
      font-weight: 700;
      letter-spacing: 0.08em;
      font-size: 13px;
      text-transform: uppercase;
  }

  .hero h1 {
      font-size: 64px;
      margin: 14px 0;
  }

  .hero p {
      color: var(--muted);
      font-size: 18px;
      max-width: 60ch;
  }

  .hero-ctas {
      margin-top: 22px;
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
  }

  /* hero image placeholder */
  .hero-right {
      width: 100%;
      height: 360px;
  }

  .hero-placeholder {
      width: 94%;
      height: 92%;
      border-radius: 12px;
      border: 2px dashed rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-weight: 600;
      text-align: center;
      padding: 18px;
  }

  /* O nas */
  .about {
      padding: 48px 22px;
      display: flex;
      gap: 28px;
      align-items: center;
  }

  .about-text {
      flex: 1;
  }

  .about-quote {
      background: var(--glass);
      padding: 18px;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.04);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  }

  /* Gallery */
  .gallery {
      padding: 36px 22px;
  }

  #gallery {
      background-color: var(--brand-accent);
  }

  .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
  }

  .tile {
      height: 160px;
      border-radius: 3px;
      background: linear-gradient(180deg, #eee, #fff);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      cursor: pointer;
  }

  /* Contact */
  .contact {
      padding: 36px 22px;
      gap: 28px;
  }

  .contact-card {
      background: white;
      border-radius: 12px;
      padding: 18px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(0, 0, 0, 0.03);
  }

  .map {
    min-width: 400px;
    width: 100%;
  }

  /* Footer */
  footer {
      padding: 22px;
      text-align: center;
      color: var(--muted);
      font-size: 14px;
  }

  /* Helpers */
  .blink {
      animation: blink-animation 1.5s infinite;
      -webkit-animation: blink-animation 1.5s infinite;
  }

  .flex-container {
    display: flex;
  }

  .hide-desktop {
    display: none;
  }

  .hide {
    display: none;
  }

  .text-center {
    text-align: center;
  }

  .text-small {
    font-size: 12px;
  }

  .text-gray {
    opacity: 0.7;
  }

  .link {
    color:rgba(41, 113, 221, 1);
  }

  @keyframes blink-animation {
      from {
          opacity: 70%;
      }

      to {
          opacity: 100%;
      }
  }

  @-webkit-keyframes blink-animation {
      from {
          opacity: 50%;
      }

      to {
          opacity: 100%;
      }
  }

  /* Responsive */
  @media (max-width: 960px) {
      .hero {
          grid-template-columns: 1fr;
      }

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

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

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

      .flex-container {
        flex-direction: column;
      }
      .map {
        min-width: 300px;
      }

      .hide-phone {
        display: none;
      }

      .hide-desktop {
        display: flex;
      }
  }

  @media (max-width: 520px) {
      .grid {
          grid-template-columns: 1fr;
      }

      nav a {
          display: block;
          padding: 15px;
          width: 100%;
      }

      nav a:hover {
        background-color: var(--brand-accent);
      }

      /* simplified mobile nav */
      .nav-inner {
          padding: 10px;
      }

      .logo,
      .logo img {
          height: 46px;
          font-size: 16px;
      }
  }


  
  /* small utility */
  .muted {
      color: var(--muted);
  }

  .spacer {
      height: 18px;
  }