@font-face {

  font-family: 'Bebas Neue';

  src: url('fonts/BebasNeue-Regular.woff2') format('woff2'),

       url('fonts/BebasNeue-Regular.woff') format('woff');

  font-weight: normal;

  font-style: normal;

}

@font-face {

  font-family: 'Lato';

  src: url('fonts/Lato-Regular.woff2') format('woff2'),

       url('fonts/Lato-Regular.woff') format('woff');

  font-weight: 400;

  font-style: normal;

}

@font-face {

  font-family: 'Lato';

  src: url('fonts/Lato-Bold.woff2') format('woff2'),

       url('fonts/Lato-Bold.woff') format('woff');

  font-weight: 700;

  font-style: normal;

}



:root {

  --bg: #000000;

  --card: #0f0f0f;

  --gold: #d4af37;

  --muted: #bfb8a6;

  --accent: #f5f3ef;

}



* {

  box-sizing: border-box;

  margin:0;

  padding:0;

}



html, body {

  height:100%;

  background: var(--bg);

  color: var(--accent);

  font-family: 'Lato', sans-serif;

  scroll-behavior: smooth;

}



body {

 background: url('images/621d240392a9c10001658c53-2.jpg') center center fixed;

  background-size: cover;

  min-height: 100vh;

}





header {

  position: fixed;

  top:0; left:0; right:0;

  z-index:1000;

  padding:20px 48px;

  display:flex;

  align-items:center;

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

  transition: background 0.3s ease;

}

header.scrolled {

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

}



header h1 {

  position:absolute;

  left:48px;

  margin:0;

  font-family:'Bebas Neue',sans-serif;

  font-size:36px;

  color: var(--gold);

  letter-spacing:1px;

}



nav {

  margin:0 auto;

  display:flex;

  gap:34px;

}



nav a {

  color: var(--accent);

  text-decoration:none;

  font-family:'Bebas Neue',sans-serif;

  font-size:14px;

  text-transform:uppercase;

  letter-spacing:2px;

  position:relative;

  padding:6px 0;

  opacity:0.9;

  transition: opacity .3s ease, transform .3s ease;

}

nav a:hover {

  opacity:1;

  transform: scale(1.05);

}

nav a::after {

  content:'';

  position:absolute;

  left:0; right:0;

  bottom:-4px;

  height:2px;

  background: var(--gold);

  transform: scaleX(0);

  transform-origin:left center;

  transition: transform .28s cubic-bezier(.2,.9,.2,1);

}

nav a:hover::after {

  transform: scaleX(1);

}



.hero {

  height:90vh;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  position: relative;

  overflow:hidden;

}

.hero::before {

  content:'';

  position:absolute;

  inset:0;

  background: url('images/hero.jpg') center/cover no-repeat;

  filter: contrast(.8) saturate(.7) brightness(.5);

  transition: filter .5s ease;

}

.hero:hover::before {

  filter: contrast(.9) saturate(.9) brightness(.6);

}

.hero::after {

  content:'';

  position:absolute;

  inset:0;

  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.8));

}

.hero-inner {

  position:relative;

  z-index:2;

  padding:0 20px;

  max-width:1000px;

  animation: fadeInUp 1s ease both;

}

.hero-inner h2 {

  margin:0;

  font-family:'Bebas Neue',sans-serif;

  font-size:72px;

  color: var(--gold);

  letter-spacing:4px;

  line-height:1;

}

.hero-inner p {

  margin-top:14px;

  color: var(--muted);

  font-size:18px;

  font-family:'Lato',sans-serif;

  opacity:0;

  animation: fadeInUp 1s ease 0.5s both;

}



@keyframes fadeInUp {

  from {

    opacity:0;

    transform: translateY(40px);

  }

  to {

    opacity:1;

    transform: translateY(0);

  }

}



.section {

  padding:80px 40px;

  max-width:1200px;

  margin:auto;

  position:relative;

  z-index:1;

}



body, html {

  margin: 0;

  padding: 0;

  height: 100%;

}



header {

  height: 80px; /* nebo podle potřeby */

  background-color: #111; /* jen pro vizuální kontrolu */

  color: white;

  display: flex;

  align-items: center;

  padding: 0 20px;

}



nav a {

  color: white;

  text-decoration: none;

  margin-left: 20px;

}



#sluzby {

  display: flex;

  flex-direction: column;

  justify-content: center; /* vertikální centrování */

  align-items: center;     /* horizontální centrování */

  height: calc(100vh - 80px); /* celá výška obrazovky minus výška menu */

  text-align: center;

}



.services-grid {

  display: flex;

  gap: 20px;

  margin-top: 30px;

}



.service-card {

  background-color: #f5f5f5;

  padding: 20px;

  border-radius: 10px;

  width: 250px;

}



#portfolio {

  padding-top:100px;

}

.grid {

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:20px;

}

.tile {

  background: linear-gradient(180deg, rgba(20,20,20,0.9), rgba(10,10,10,0.9));

  height:380px;

  border-radius:12px;

  overflow:hidden;

  position: relative;

  cursor:pointer;

  display:flex;

  align-items:flex-end;

  box-shadow: 0 10px 40px rgba(0,0,0,0.7);

  transition: transform .5s ease, box-shadow .5s ease;

}

.tile:hover {

  transform: scale(1.04);

  box-shadow: 0 15px 50px rgba(0,0,0,0.9);

}

.tile img {

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  transition: transform .6s ease, filter .6s ease;

}

.tile:hover img {

  transform: scale(1.12);

  filter: brightness(.9) saturate(.9);

}

.tile::before {

  content:'';

  position:absolute;

  inset:0;

  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));

  opacity:0;

  transition: opacity .4s ease;

}

.tile:hover::before {

  opacity:1;

}

.tile .meta {

  position: relative;

  z-index:2;

  padding:26px;

  color: var(--accent);

  transition: transform .4s ease, color .4s ease;

}

.tile:hover .meta {

  transform: translateY(-10px);

}

.tile .meta h3 {

  margin:0;

  font-family:'Bebas Neue',sans-serif;

  font-size:22px;

  color: var(--accent);

}

.tile .meta p {

  margin:6px 0 0;

  color: var(--muted);

  font-size:13px;

  font-family:'Lato',sans-serif;

}



#cenik, #rezervace, #kontakt {

  padding-top:100px;

}

#cenik h2, #rezervace h2, #kontakt h2 {

  font-family:'Bebas Neue', sans-serif;

  color: var(--gold);

  letter-spacing:2px;

  font-size:32px;

  margin-bottom:24px;

  text-align:center;

}

#cenik table {

  width:100%;

  color: var(--accent);

  border-collapse: collapse;

  margin-top:32px;

}

#cenik th, #cenik td {

  padding:12px 0;

  text-align:left;

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

  font-family:'Lato',sans-serif;

}

input, textarea {

  background: transparent;

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

  padding:14px;

  border-radius:6px;

  color: var(--accent);

  font-family:'Lato',sans-serif;

  outline:none;

  transition: border-color .3s ease;

}

input:focus, textarea:focus {

  border-color: var(--gold);

}

button {

  display:block;

  margin-top:16px;

  padding:14px 20px;

  border-radius:6px;

  border:0;

  background: var(--gold);

  color: #000;

  font-weight:700;

  font-family:'Lato',sans-serif;

  cursor:pointer;

  transition: transform .3s ease, background .3s ease;

}

button:hover {

  transform: scale(1.02);

  background: #c9a834;

}



footer {

  padding:40px;

  text-align:center;

  color: var(--muted);

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

  font-family:'Lato',sans-serif;

}



@media(max-width:1000px) {

  .grid {

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

  }

  .hero-inner h2 {

    font-size:48px;

  }

}

@media(max-width:620px) {

  .grid {

    grid-template-columns:1fr;

  }

  .hero-inner h2 {

    font-size:30px;

  }

  header h1 {

    left:18px;

    font-size:28px;

  }

  nav {

    gap:20px;

  }

}