@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{background:#050505;color:#fff;font-family:'Oswald',Arial,sans-serif;line-height:1.45}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.page{width:min(1180px,94%);margin:0 auto}

.header{height:104px;background:#050505;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:30}
.nav{height:104px;display:flex;align-items:center;gap:34px}
.logo img{width:255px;height:auto}
nav{margin-left:auto;display:flex;align-items:center;gap:34px}
nav a{font-size:17px;text-transform:uppercase;font-weight:700;letter-spacing:.03em;position:relative}
nav a.active,nav a:hover{color:#f5b800}
nav a.active:after,nav a:hover:after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:2px;background:#f5b800}
.cta,.hero-btn,form button{background:#f5b800;color:#080808;text-transform:uppercase;font-weight:700;box-shadow:0 0 18px rgba(245,184,0,.35)}
.cta{padding:17px 26px;font-size:16px}
.menu-btn{display:none;background:none;color:white;border:0;font-size:34px;margin-left:auto}

.hero{height:560px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.12)}
.hero-bg{position:absolute;inset:0;background:
linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.82) 42%,rgba(0,0,0,.32) 66%,rgba(0,0,0,.10) 100%),
url('assets/svarec.png') center right/cover no-repeat}
.hero-content{position:relative;height:560px;display:flex;align-items:center}
.hero-copy{max-width:520px;margin-left:28px;margin-top:14px}
.hero h1,.subpage-hero h1{text-transform:uppercase;font-weight:700;line-height:.96;font-size:78px;letter-spacing:-1px;margin-bottom:26px}
.hero h1 span,.subpage-hero h1 span{display:block;color:#f5b800}
.hero p,.subpage-hero p{font-family:Arial,Helvetica,sans-serif;font-size:18px;line-height:1.85;color:#f4f4f4;max-width:620px}
.hero-btn{display:inline-flex;align-items:center;gap:13px;margin-top:28px;padding:19px 28px;font-size:16px}

.section-block{background:radial-gradient(circle at center,rgba(255,255,255,.055),transparent 54%),#070908}
.title{text-align:center;margin-bottom:34px}
.title h2{text-transform:uppercase;font-size:31px;font-weight:700;letter-spacing:.05em}
.title i{display:block;width:50px;height:2px;background:#f5b800;margin:13px auto 0}
.title.left{text-align:left;margin-bottom:26px}
.title.left i{margin-left:0}

.services{padding:34px 0 34px}
.service-image{width:100%;max-width:1160px;margin:0 auto;filter:drop-shadow(0 22px 38px rgba(0,0,0,.35))}
.mobile-services{display:none}

.realizations{padding:32px 0 44px}
.gallery{display:grid;grid-template-columns:1.08fr 1.08fr .92fr 1.08fr;gap:14px}
.gallery a{height:245px;overflow:hidden;position:relative;background:#111;border:1px solid rgba(255,255,255,.10)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:.35s}
.gallery a:nth-child(3) img{object-fit:contain;background:#fff}
.gallery a:hover img{transform:scale(1.04)}
.center-button{text-align:right;margin-top:20px}

.about{background:#050505;padding:42px 0;border-top:1px solid rgba(255,255,255,.08)}
.about-panel{max-width:900px;margin:auto;text-align:center}
.about-panel h2{color:#f5b800;font-size:40px;margin-bottom:12px}
.about-panel p{font-family:Arial,Helvetica,sans-serif;color:#ddd;font-size:18px;line-height:1.8}

.quote{background:#070908;border-top:1px solid rgba(255,255,255,.08);padding:0 0 42px}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.quote-image img{height:390px;width:100%;object-fit:cover}
.quote-form{padding-top:36px}
form{display:grid;gap:12px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea{width:100%;padding:16px;background:#070707;border:1px solid rgba(255,255,255,.18);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:15px}
textarea{min-height:118px;resize:vertical}
form button{border:0;padding:18px;cursor:pointer;font-size:16px}
#message{text-align:center;color:#f5b800;font-weight:700}

.subpage-hero{background:
linear-gradient(90deg,rgba(0,0,0,.98),rgba(0,0,0,.7)),
url('assets/svarec.png') center/cover no-repeat;
padding:95px 0 75px;border-bottom:1px solid rgba(255,255,255,.12)}
.gallery-page,.contact-page,.map-section{background:#070908;padding:52px 0}
.realizace-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery-item{height:260px;border:1px solid rgba(255,255,255,.12);background:#111;cursor:pointer;overflow:hidden;padding:0}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.35s}
.gallery-item:nth-child(3) img,.gallery-item:nth-child(9) img,.gallery-item:nth-child(10) img,.gallery-item:nth-child(n+11):nth-child(-n+15) img{object-fit:contain;background:#fff}
.gallery-item:hover img{transform:scale(1.04)}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:50px}
.lightbox.active{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;object-fit:contain}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;background:#f5b800;color:#050505;border:0;cursor:pointer;font-size:34px;font-weight:700;width:52px;height:52px}
.lightbox-close{right:24px;top:24px}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}

.contact-page-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:46px;align-items:start}
.contact-card{background:#101010;border:1px solid rgba(255,255,255,.12);padding:34px;display:grid;gap:14px}
.contact-card h2{color:#f5b800;text-transform:uppercase;margin-bottom:10px}
.contact-card a,.contact-card span{font-family:Arial,Helvetica,sans-serif;font-size:17px}
.contact-form-page{padding-top:0}
.map-section iframe{width:100%;height:360px;border:1px solid rgba(255,255,255,.12);filter:grayscale(1) invert(.9) contrast(.9)}

.footer{background:#050505;border-top:1px solid rgba(255,255,255,.08);padding:34px 0}
.footer-grid{display:grid;grid-template-columns:1fr 1.25fr .55fr;gap:28px;align-items:center}
.footer img{width:238px}
.footer-contacts{display:grid;gap:8px;font-family:Arial,Helvetica,sans-serif;font-size:16px}
.socials{display:flex;justify-content:flex-end;gap:18px}
.socials span{width:52px;height:52px;border-radius:50%;background:#f5b800;color:#050505;display:grid;place-items:center;font-size:27px;font-weight:700}

@media(max-width:980px){
  html{scroll-padding-top:82px}
  .header,.nav{height:82px}
  .logo img{width:190px}
  .menu-btn{display:block}
  nav{display:none;position:absolute;left:0;right:0;top:82px;background:#050505;flex-direction:column;padding:26px;border-bottom:1px solid rgba(255,255,255,.12)}
  nav.active{display:flex}
  nav a:after{display:none!important}
  .cta{display:none}
  .hero,.hero-content{height:auto;min-height:580px}
  .hero-bg{background:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.52)),url('assets/svarec.png') center/cover no-repeat}
  .hero-copy{margin:0}
  .hero h1,.subpage-hero h1{font-size:56px}
  .desktop-only{display:none}
  .mobile-services{display:grid;grid-template-columns:1fr;gap:14px}
  .mobile-services article{background:linear-gradient(145deg,#1b1b1b,#0d0d0d);border:1px solid rgba(255,255,255,.2);padding:26px;text-align:center}
  .mobile-services h3{text-transform:uppercase;color:#fff;font-size:24px}
  .mobile-services p{font-family:Arial,Helvetica,sans-serif;color:#ddd}
  .gallery,.quote-grid,.footer-grid,.row,.realizace-grid,.contact-page-grid{grid-template-columns:1fr}
  .gallery a,.gallery-item{height:310px}
  .footer img{width:200px}
  .socials{justify-content:flex-start}
  .lightbox{padding:20px}
}


/* Samostatná stránka O nás */
.about-page{
  background:#070908;
  padding:58px 0 70px;
}
.about-page-box{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:38px;
  align-items:start;
}
.about-main-text{
  background:#101010;
  border:1px solid rgba(255,255,255,.12);
  padding:38px;
}
.about-main-text p{
  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
  line-height:1.9;
  color:#e5e5e5;
  margin-bottom:22px;
}
.about-main-text p:last-child{
  margin-bottom:0;
}
.about-highlights{
  display:grid;
  gap:16px;
}
.about-highlights div{
  background:linear-gradient(145deg,#171717,#0b0b0b);
  border:1px solid rgba(255,255,255,.12);
  border-left:4px solid #f5b800;
  padding:22px;
}
.about-highlights strong{
  display:block;
  color:#f5b800;
  font-size:25px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.about-highlights span{
  font-family:Arial,Helvetica,sans-serif;
  color:#ddd;
}
@media(max-width:980px){
  .about-page-box{
    grid-template-columns:1fr;
  }
  .about-main-text{
    padding:26px;
  }
}