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

:root{
  --primary:#f5d614;
  --secondary:#14161a;
  --bg-deep:#0d0f12;
  --bg-grey:#1c1f25;
  --line:#2a2e36;
  --txt-mute:#aeb4bd;
  --txt-faint:#8b919b;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--secondary);
  color:#eef0f2;
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.font-display{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em;}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 56px;}
section{position:relative;}

/* ===== buttons ===== */
.btn-primary{
  display:inline-block;background:var(--primary);color:var(--bg-deep);
  padding:16px 34px;font-size:19px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;transform:skewX(-8deg);
  border:none;cursor:pointer;transition:filter .15s;
}
.btn-primary>span{display:inline-block;transform:skewX(8deg);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{
  display:inline-block;color:#eef0f2;font-size:16px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border-bottom:2px solid var(--primary);padding-bottom:3px;
}

/* ===== nav ===== */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:18px 56px;background:var(--bg-deep);
  border-bottom:3px solid var(--primary);transition:padding .2s;
}
.nav.scrolled{padding:12px 56px;}
.nav-left{display:flex;align-items:center;gap:14px;}
.nav-badge{
  background:var(--primary);color:var(--bg-deep);font-family:'Anton',sans-serif;
  font-size:22px;padding:4px 11px;transform:skewX(-8deg);
}
.nav-badge>span{display:inline-block;transform:skewX(8deg);}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0;
  font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-mute);}
.nav-links a{text-decoration:none;color:var(--txt-mute);transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--primary);}
.nav-right{display:flex;align-items:center;gap:18px;}
.nav-hamburger{display:none;background:none;border:none;color:#eef0f2;cursor:pointer;}
.nav-mobile{display:none;}

/* ===== hero ===== */
.hero{padding:90px 56px;overflow:hidden;}
.hero-ghost{
  position:absolute;top:-40px;right:-60px;font-family:'Anton',sans-serif;
  font-size:340px;line-height:.8;color:color-mix(in srgb, var(--primary) 5%, transparent);
  transform:rotate(-6deg);pointer-events:none;user-select:none;z-index:0;
}
.hero-inner{position:relative;z-index:1;max-width:780px;}
.hero-eyebrow{
  display:inline-block;background:var(--primary);color:var(--bg-deep);
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;transform:skewX(-8deg);margin-bottom:26px;
}
.hero-eyebrow>span{display:inline-block;transform:skewX(8deg);}
.hero h1{font-size:88px;line-height:.92;margin:0 0 24px;text-transform:uppercase;letter-spacing:-.005em;}
.hero h1 .hl{color:var(--primary);}
.hero p{font-size:19px;font-weight:400;line-height:1.55;color:var(--txt-mute);max-width:480px;margin:0 0 34px;}
.hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}

/* ===== stat pruh ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg-grey);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stat-cell{padding:26px 30px;border-right:1px solid var(--line);}
.stat-cell:last-child{border-right:none;}
.stat-num{font-family:'Anton',sans-serif;font-size:32px;color:var(--primary);}
.stat-label{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-faint);}

/* ===== služby ===== */
.svc{padding:84px 56px;}
.svc h2{font-size:52px;text-transform:uppercase;margin:0 0 40px;}
.svc h2 .hl{color:var(--primary);}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
.svc-card{background:var(--secondary);padding:32px;}
.svc-card .ico{color:var(--primary);margin-bottom:14px;display:block;}
.svc-card .ico svg{width:34px;height:34px;}
.svc-card h3{font-size:24px;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;}
.svc-card p{font-size:15px;font-weight:400;line-height:1.6;color:var(--txt-mute);margin:0;}

/* ===== ceník ===== */
.cenik{padding:84px 56px;background:var(--primary);color:var(--bg-deep);}
.cenik h2{font-size:52px;text-transform:uppercase;margin:0 0 8px;}
.cenik .lead{font-size:16px;font-weight:500;margin:0 0 36px;}
.cenik-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px;}
.cenik-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:16px 0;border-bottom:2px solid color-mix(in srgb, var(--secondary) 15%, transparent);}
.cenik-name{font-size:20px;font-weight:600;}
.cenik-price{font-family:'Anton',sans-serif;font-size:22px;white-space:nowrap;}

/* ===== galerie ===== */
.gal{padding:84px 56px;}
.gal h2{font-size:48px;text-transform:uppercase;margin:0 0 36px;}
.gal h2 .hl{color:var(--primary);}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gal-item{position:relative;aspect-ratio:4/3;background:var(--bg-grey);overflow:hidden;border:1px solid var(--line);}
.gal-item img{width:100%;height:100%;object-fit:cover;}

/* ===== recenze ===== */
.rev{padding:84px 56px;background:var(--bg-grey);}
.rev h2{font-size:48px;text-transform:uppercase;margin:0 0 36px;}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.rev-card{border:1px solid var(--line);border-top:3px solid var(--primary);padding:28px;background:var(--secondary);}
.rev-stars{color:var(--primary);font-size:17px;letter-spacing:2px;margin-bottom:12px;}
.rev-card p{font-size:16px;font-weight:400;line-height:1.6;color:#ccd0d6;margin:0 0 14px;}
.rev-author{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-faint);}

/* ===== FAQ ===== */
.faq{padding:80px 56px;background:var(--bg-grey);}
.faq h2{font-size:40px;text-transform:uppercase;margin:0 0 24px;}
.faq-list{max-width:760px;}
.faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-size:19px;font-weight:600;letter-spacing:.02em;cursor:pointer;color:#eef0f2;}
.faq-q .sign{color:var(--primary);font-family:'Anton',sans-serif;flex:none;}
.faq-a{font-size:15px;font-weight:400;line-height:1.7;color:var(--txt-mute);
  margin:0;max-height:0;overflow:hidden;transition:max-height .3s ease,margin .3s ease;}
.faq-item.open .faq-a{max-height:340px;margin:12px 0 0;}
.faq-item.open .faq-q .sign{content:'';}

/* ===== kontakt ===== */
.kontakt{padding:80px 56px;background:var(--bg-deep);}
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.kontakt h2{font-size:40px;text-transform:uppercase;margin:0 0 22px;}
.kontakt form,.kontakt .cms-form{display:flex;flex-direction:column;gap:13px;max-width:440px;}
.kontakt input,.kontakt textarea,.kontakt .cms-form input,.kontakt .cms-form textarea,
.kontakt select{
  border:1px solid var(--line);background:var(--secondary);padding:14px;
  color:#eef0f2;font-family:'Barlow Condensed',sans-serif;font-size:16px;outline:none;width:100%;
}
.kontakt label{font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-faint);}
.kontakt textarea{min-height:120px;resize:vertical;}
.btn-submit{
  background:var(--primary);color:var(--bg-deep);padding:16px 0;text-align:center;
  font-size:19px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border:none;cursor:pointer;width:100%;margin-top:4px;
}
.kontakt-details{font-size:16px;color:var(--txt-mute);line-height:1.9;}
.kontakt-details .ci{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}

/* ===== footer ===== */
.footer{padding:24px 56px;background:#08090b;color:#6a707a;display:flex;
  justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.footer-links{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.footer-links a{text-decoration:none;color:#6a707a;}
.footer-links a:hover{color:var(--primary);}

/* ===== brandmark ===== */
.wb-brandmark{font-family:'Anton',sans-serif;font-size:24px;letter-spacing:.02em;}
.wb-brandmark .logo{text-decoration:none;color:#eef0f2;display:inline-flex;align-items:center;}
.wb-brand-img{height:34px;width:auto;display:block;}
.wb-brandmark .wb-list-edit{opacity:1;}
.footer .wb-brandmark{font-size:20px;}
.footer .wb-brandmark .logo{color:var(--primary);}

/* ===== fade-in ===== */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.fade-in.visible{opacity:1;transform:none;}

/* ===== responsive ===== */
@media(max-width:768px){
  .wrap{padding:0 22px;}
  .nav,.hero,.svc,.cenik,.gal,.rev,.faq,.kontakt,.footer{padding-left:22px;padding-right:22px;}
  .hero{padding-top:54px;padding-bottom:54px;}
  .svc,.cenik,.gal,.rev,.faq,.kontakt{padding-top:48px;padding-bottom:48px;}
  .nav-links{display:none;}
  .nav-hamburger{display:inline-flex;}
  .nav-right .btn-primary{display:none;}
  .nav-mobile.open{display:block;position:fixed;top:0;left:0;right:0;bottom:0;
    background:var(--bg-deep);z-index:100;padding:80px 28px;overflow-y:auto;}
  .nav-mobile.open .nav-mobile-links{display:flex;flex-direction:column;gap:22px;list-style:none;margin:0 0 28px;padding:0;
    font-family:'Anton',sans-serif;font-size:28px;text-transform:uppercase;}
  .nav-mobile.open .nav-mobile-links a{text-decoration:none;color:#eef0f2;}
  .nav-mobile-close{position:absolute;top:24px;right:24px;background:none;border:none;color:var(--primary);font-size:30px;cursor:pointer;}
  .hero h1{font-size:54px;}
  .hero-ghost{font-size:200px;}
  .hero p{font-size:17px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat-cell:nth-child(2){border-right:none;}
  .stat-cell:nth-child(1),.stat-cell:nth-child(2){border-bottom:1px solid var(--line);}
  .svc h2,.cenik h2{font-size:38px;}
  .svc-grid{grid-template-columns:1fr;}
  .cenik-grid{grid-template-columns:1fr;gap:0;}
  .gal-grid{grid-template-columns:1fr 1fr;}
  .rev-grid{grid-template-columns:1fr;}
  .kontakt-grid{grid-template-columns:1fr;gap:36px;}
}

/* qcms: brandmark monogram sits inside the logo link */
.wb-brandmark .logo{gap:12px;}