:root{
  --red:#e31f2b;
  --red-dark:#c81822;
  --ink:#0f1822;
  --muted:#66707b;
  --soft:#f5f6f7;
  --line:#e4e7ea;
  --white:#fff;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.14)}
.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between}
.brand img{width:150px}
.main-nav{display:flex;gap:26px;align-items:center;color:white;font-size:13px;font-weight:700;text-transform:uppercase}
.main-nav a:not(.btn){opacity:.95}
.main-nav a:hover{opacity:1;color:#fff}
.menu-toggle{display:none;background:none;border:0;padding:8px}
.menu-toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:var(--red);color:#fff;padding:16px 24px;text-transform:uppercase;font-weight:800;font-size:13px;border:1px solid var(--red);transition:.25s}
.btn:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-small{padding:12px 16px}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.72)}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-outline{background:white;color:var(--ink);border-color:#9ca5ad}
.btn-white{background:transparent;border-color:#fff}
.hero{
  min-height:710px;
  position:relative;
  color:white;
  background-image:url('../assets/images/okna-akpa.webp');
  background-size:cover;
  background-position:center;
  overflow:hidden
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.52) 0%,
    rgba(0,0,0,.34) 38%,
    rgba(0,0,0,.10) 67%,
    rgba(0,0,0,0) 100%
  );
  pointer-events:none;
}
.hero-grid{position:relative;z-index:2;min-height:710px;display:flex;align-items:center;padding-top:80px}
.hero-copy{max-width:760px}
.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px}
.eyebrow.red{color:var(--red)}
.hero h1{font-size:64px;line-height:1.03;letter-spacing:-.035em;margin:0 0 24px}
.hero h1 span{font-weight:700}
.hero-lead{font-size:21px;line-height:1.55;color:#e8ecef;margin:0 0 30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:58px;max-width:760px}
.hero-stats div{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.hero-stats strong{font-size:30px}
.hero-stats span{font-size:12px;line-height:1.45;text-transform:uppercase;font-weight:700}
.section{padding:76px 0}
.section-soft{background:var(--soft)}
.section-head{text-align:center;margin-bottom:34px}
.section-head h2{font-size:33px;letter-spacing:-.02em;margin:0}
.section-head.light{color:white}
.cards.three{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.service-card{background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(15,24,34,.06);overflow:hidden}
.visual{height:230px;overflow:hidden;background:#d7dde0}
.visual img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.service-card:hover .visual img{transform:scale(1.035)}
.card-body{padding:28px}
.card-body h3{margin:0 0 12px;font-size:22px;text-transform:uppercase}
.card-body p{color:var(--muted);line-height:1.65;min-height:78px}
.card-body a{color:var(--red);font-weight:800}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.benefits>div{padding:26px 22px;border-right:1px solid #d8dde1}
.benefits>div:last-child{border-right:0}
.benefit-icon{width:52px;height:52px;border:1px solid #bac2c8;display:grid;place-items:center;font-weight:800;margin-bottom:18px}
.benefits h3{text-transform:uppercase;font-size:15px;margin:0 0 8px}
.benefits p{color:var(--muted);margin:0;line-height:1.55;font-size:14px}
.refs{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:30px}
.ref{font-size:12px;text-transform:uppercase;text-align:center;font-weight:700}
.ref-img{width:100%;height:140px;object-fit:cover;margin-bottom:12px;background:#d7dde0}
.center{text-align:center}
.process{background:linear-gradient(135deg,#101922,#1d2c35);padding:74px 0;color:white}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.step{position:relative;padding:16px 12px}
.step b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--red);margin-bottom:18px}
.step h3{text-transform:uppercase;font-size:14px;margin:0 0 9px}
.step p{font-size:13px;line-height:1.55;color:#cbd2d7}
.process-note{text-align:center;font-style:italic;margin:26px 0 0;color:#e7ebee}
.promo-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.promo{min-height:280px;padding:42px;display:flex;align-items:center}
.promo h2{font-size:30px;line-height:1.15;margin:10px 0 22px}
.promo-red{background:linear-gradient(135deg,#d91521,#ef3340);color:white}
.promo-cta{background:linear-gradient(120deg,#f0f2f3,#fff)}
.promo-cta p{max-width:480px;color:var(--muted);line-height:1.6}
.site-footer{background:#101922;color:#fff;padding:55px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:34px}
.footer-brand img{width:145px}
.footer-grid h4{text-transform:uppercase;font-size:13px;margin:0 0 12px}
.footer-grid p{color:#bfc7cd;font-size:13px;line-height:1.65}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;color:#88949c;font-size:12px}

@media (max-width: 980px){
  .menu-toggle{display:block;z-index:30}
  .main-nav{position:absolute;top:82px;left:20px;right:20px;background:#111b23;padding:24px;display:none;flex-direction:column;align-items:stretch;gap:18px}
  .main-nav.open{display:flex}
  .hero h1{font-size:52px}
  .cards.three,.benefits{grid-template-columns:repeat(2,1fr)}
  .refs{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .promo-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .container{width:min(var(--max),calc(100% - 28px))}
  .nav-wrap{height:70px}
  .brand img{width:125px}
  .main-nav{top:70px;left:14px;right:14px}
  .hero,.hero-grid{min-height:760px}
  .hero-grid{align-items:flex-start;padding-top:150px}
  .hero h1{font-size:42px}
  .hero-lead{font-size:17px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .hero-stats{grid-template-columns:1fr;margin-top:38px}
  .section{padding:56px 0}
  .section-head h2{font-size:27px}
  .cards.three,.benefits,.refs,.steps,.footer-grid{grid-template-columns:1fr}
  .benefits>div{border-right:0;border-bottom:1px solid #d8dde1}
  .benefits>div:last-child{border-bottom:0}
  .ref-img{height:180px}
  .promo{padding:30px 24px}
  .promo h2{font-size:25px}
}


/* ===== V5: content expansion, video, references, universal inquiry ===== */
.section-intro{
  max-width:780px;
  margin:16px auto 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}
.card-body p{min-height:96px}
.service-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 22px;
}
.service-tags span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border:1px solid var(--line);
  background:#f8f9fa;
  color:#4d5963;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.service-note{
  margin-top:28px;
  padding:22px 26px;
  background:#111b23;
  color:#fff;
  display:flex;
  gap:20px;
  align-items:center;
}
.service-note strong{
  min-width:max-content;
  text-transform:uppercase;
  font-size:13px;
}
.service-note span{
  color:#cdd4d9;
  line-height:1.6;
  font-size:14px;
}

.video-section{background:#fff}
.video-grid{
  display:grid;
  grid-template-columns:.78fr 1.35fr;
  gap:56px;
  align-items:center;
}
.video-copy h2{
  margin:0 0 20px;
  font-size:38px;
  line-height:1.08;
}
.video-copy p{
  color:var(--muted);
  line-height:1.75;
  font-size:16px;
}
.text-link{
  display:inline-block;
  margin-top:10px;
  color:var(--red);
  font-weight:800;
  text-transform:uppercase;
  font-size:12px;
}
.video-frame{
  position:relative;
  aspect-ratio:16/9;
  background:#111b23;
  box-shadow:0 18px 50px rgba(15,24,34,.12);
  overflow:hidden;
}
.video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.references-section{background:#f8f9fa}
.reference-types{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:42px 0;
}
.reference-types article{
  background:#fff;
  border:1px solid var(--line);
  padding:28px 24px;
  min-height:220px;
}
.reference-no{
  display:block;
  color:var(--red);
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  margin-bottom:32px;
}
.reference-types h3{
  margin:0 0 12px;
  text-transform:uppercase;
  font-size:18px;
}
.reference-types p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
}
.client-strip{
  margin:14px 0 34px;
  padding:34px 32px;
  background:#fff;
  border:1px solid var(--line);
}
.client-strip>p{
  margin:0 0 24px;
  text-align:center;
  color:var(--muted);
  text-transform:uppercase;
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
}
.client-cloud{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.client-cloud span{
  padding:10px 14px;
  background:#f3f5f6;
  border:1px solid #e4e7ea;
  color:#27313a;
  font-weight:700;
  font-size:13px;
}

.inquiry-section{
  background:linear-gradient(135deg,#f3f5f6,#fff);
}
.inquiry-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:58px;
  align-items:start;
}
.inquiry-copy h2{
  font-size:38px;
  line-height:1.08;
  margin:0 0 20px;
}
.inquiry-copy>p{
  color:var(--muted);
  line-height:1.75;
}
.inquiry-points{
  list-style:none;
  padding:0;
  margin:26px 0 0;
}
.inquiry-points li{
  position:relative;
  padding:11px 0 11px 24px;
  border-bottom:1px solid var(--line);
  font-weight:700;
  font-size:14px;
}
.inquiry-points li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--red);
}
.inquiry-form{
  background:#fff;
  border:1px solid var(--line);
  padding:30px;
  box-shadow:0 14px 40px rgba(15,24,34,.07);
}
.inquiry-form label{
  display:block;
  margin-bottom:16px;
  color:#26313a;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea{
  width:100%;
  margin-top:8px;
  border:1px solid #d6dce0;
  background:#fff;
  min-height:48px;
  padding:12px 13px;
  font:inherit;
  color:var(--ink);
  text-transform:none;
  letter-spacing:0;
  outline:none;
}
.inquiry-form textarea{resize:vertical;min-height:120px}
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus{border-color:#929da5}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-note{
  margin:14px 0 0;
  color:#7b858c;
  font-size:11px;
  line-height:1.55;
}

@media (max-width:980px){
  .video-grid,.inquiry-grid{grid-template-columns:1fr}
  .reference-types{grid-template-columns:repeat(2,1fr)}
  .service-note{align-items:flex-start;flex-direction:column;gap:8px}
}
@media (max-width:640px){
  .video-copy h2,.inquiry-copy h2{font-size:30px}
  .reference-types{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .client-strip{padding:26px 18px}
  .inquiry-form{padding:22px}
}


/* ===== V6: výraznější reference + konverzní CTA ===== */
.references-v2{
  background:#f7f8f9;
  padding-bottom:0;
  overflow:hidden;
}
.reference-head{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.reference-audience{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:34px 0 46px;
}
.reference-audience span{
  padding:10px 14px;
  border:1px solid #dfe3e6;
  background:#fff;
  color:#4a5660;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.logo-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  border-top:1px solid #e0e4e7;
  border-bottom:1px solid #e0e4e7;
  background:#111b23;
}
.logo-marquee:before,
.logo-marquee:after{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  width:120px;
  pointer-events:none;
}
.logo-marquee:before{
  left:0;
  background:linear-gradient(90deg,#111b23,rgba(17,27,35,0));
}
.logo-marquee:after{
  right:0;
  background:linear-gradient(270deg,#111b23,rgba(17,27,35,0));
}
.logo-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:akpa-marquee 34s linear infinite;
  will-change:transform;
}
.logo-marquee:hover .logo-track{
  animation-play-state:paused;
}
.logo-track span{
  position:relative;
  display:flex;
  align-items:center;
  min-height:110px;
  padding:0 42px;
  color:#fff;
  font-size:24px;
  font-weight:800;
  white-space:nowrap;
  letter-spacing:-.02em;
}
.logo-track span:after{
  content:"";
  position:absolute;
  right:0;
  width:1px;
  height:34px;
  background:rgba(255,255,255,.18);
}
@keyframes akpa-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.reference-cta{
  margin-top:0;
  padding:34px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.reference-cta .eyebrow{
  color:var(--red);
  margin-bottom:8px;
}
.reference-cta h3{
  margin:0;
  font-size:24px;
  line-height:1.2;
}
.reference-cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.reference-cta .btn-outline{
  background:transparent;
}

@media (max-width:980px){
  .reference-cta{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media (max-width:640px){
  .logo-track span{
    min-height:88px;
    padding:0 28px;
    font-size:19px;
  }
  .logo-marquee:before,
  .logo-marquee:after{
    width:42px;
  }
  .reference-cta-actions{
    width:100%;
    flex-direction:column;
  }
  .reference-cta-actions .btn{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .logo-track{animation:none}
}


/* ===== V7: výraznější benefity + návrat k 4 typům referencí + telefon CTA ===== */
.benefits-v2{
  gap:0;
}
.benefits-v2 .benefit-item{
  padding:34px 34px 30px;
  border-right:1px solid #d8dde1;
}
.benefits-v2 .benefit-item:last-child{
  border-right:0;
}
.benefits-v2 .benefit-icon{
  width:68px;
  height:68px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,var(--red),#b7151e);
  color:#fff;
  box-shadow:0 12px 30px rgba(227,31,43,.18);
  display:grid;
  place-items:center;
  margin-bottom:22px;
  transform:translateZ(0);
}
.benefits-v2 .benefit-icon svg{
  width:36px;
  height:36px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.benefits-v2 .benefit-icon-year span{
  font-size:21px;
  font-weight:800;
  letter-spacing:-.04em;
}
.benefits-v2 .benefit-item h3{
  font-size:16px;
  margin-bottom:8px;
}
.benefits-v2 .benefit-item p{
  font-size:14px;
}
.reference-types{
  margin-bottom:42px;
}
.btn-phone{
  background:#111b23;
  border-color:#111b23;
}
.btn-phone:hover{
  background:#0a1117;
  border-color:#0a1117;
}
@media (max-width:980px){
  .benefits-v2 .benefit-item:nth-child(2){
    border-right:0;
  }
}
@media (max-width:640px){
  .benefits-v2 .benefit-item{
    border-right:0;
  }
}

/* V8 */
.brand{display:flex;align-items:center;background:rgba(255,255,255,.94);padding:7px 11px;border-radius:4px}
.brand img{width:205px;max-height:58px;object-fit:contain}
.footer-brand img{width:205px;max-height:70px;object-fit:contain;background:#fff;padding:6px 8px;border-radius:4px}
.reference-icon{width:68px;height:68px;display:block;margin:0 0 24px;object-fit:contain}
.reference-types article{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.reference-types article:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(15,24,34,.08);border-color:#d4d9dd}
@media(max-width:640px){.brand{padding:5px 8px}.brand img{width:155px;max-height:46px}.footer-brand img{width:165px}}

/* ===== V11: finální logo + jednotné piktogramy v kartách služeb ===== */
.site-header{
  background:rgba(15,24,34,.96);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav-wrap{height:88px}
.brand{
  display:flex;
  align-items:center;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}
.brand img{
  width:245px;
  max-height:68px;
  object-fit:contain;
}
.main-nav{gap:30px;font-size:13px}
.main-nav .btn{padding:15px 22px}

.cards.three{align-items:stretch}
.service-card{
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e4e7ea;
  box-shadow:0 10px 28px rgba(15,24,34,.06);
}
.visual{
  height:265px;
  position:relative;
  overflow:hidden;
}
.visual img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.card-body{padding:30px 28px 26px}
.card-body h3{font-size:24px;line-height:1.15}
.service-tags span{
  border:1px solid #e0e4e7;
  border-radius:8px;
  background:#f5f6f7;
  min-height:36px;
  padding:8px 13px;
}
.visual-service-badge::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:118px;
  height:92px;
  background:#101c27 url('../assets/icons/naradi.svg') center/50px 50px no-repeat;
  border-right:5px solid var(--red);
  z-index:4;
}
.footer-brand img{
  width:220px;
  max-height:72px;
  object-fit:contain;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}
@media (max-width:980px){
  .brand img{width:210px}
  .main-nav{gap:18px}
}
@media (max-width:640px){
  .nav-wrap{height:72px}
  .brand img{width:170px;max-height:52px}
  .visual{height:225px}
  .visual-service-badge::after{
    width:102px;
    height:80px;
    background-size:44px 44px;
    border-right-width:4px;
  }
}


/* ===== V12: přesné sjednocení horních obrázků a piktogramů služeb ===== */
.cards.three .service-card .visual{
  width:100%;
  height:auto !important;
  aspect-ratio:5 / 3;
  position:relative;
  overflow:hidden;
  background:#fff;
}
.cards.three .service-card .visual > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* První dva piktogramy jsou součástí schválených obrázků – nesmí se ořezávat zleva. */
.cards.three .service-card:nth-child(1) .visual > img,
.cards.three .service-card:nth-child(2) .visual > img{
  object-fit:contain;
  background:#fff;
}

/* Servis: stejné rozměry boxu jako vizuální boxy na prvních dvou kartách. */
.cards.three .visual-service-badge::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:118px;
  height:92px;
  box-sizing:border-box;
  background:#101c27 url('../assets/icons/naradi.svg') center/50px 50px no-repeat;
  border-right:5px solid var(--red);
  z-index:5;
}

/* žádný hover zoom – aby se piktogramy a výřezy neposouvaly */
.cards.three .service-card:hover .visual img{
  transform:none !important;
}

@media (max-width:980px){
  .cards.three .visual-service-badge::after{
    width:110px;
    height:86px;
    background-size:47px 47px;
  }
}
@media (max-width:640px){
  .cards.three .service-card .visual{
    aspect-ratio:5 / 3;
  }
  .cards.three .visual-service-badge::after{
    width:96px;
    height:76px;
    background-size:42px 42px;
    border-right-width:4px;
  }
}


/* ===== V13: servis používá přesně dodaný schválený obrázek ===== */
.cards.three .service-card:nth-child(3) .visual{
  background:#fff;
}
.cards.three .service-card:nth-child(3) .visual > img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center;
  transform:none !important;
}
.cards.three .visual-service-badge::after{
  content:none !important;
  display:none !important;
}


/* V14 – jemný hover pouze na obrázcích služeb */
.cards.three .service-card .visual{
  overflow:hidden;
}
.cards.three .service-card .visual > img{
  transition:transform .45s ease !important;
}
.cards.three .service-card:hover .visual > img{
  transform:scale(1.035) !important;
}

/* V14 – piktogramy místo čísel v referenčních kategoriích */
.ref-num img,
.reference-number img,
.category-number img{
  width:54px;
  height:54px;
  display:block;
  object-fit:contain;
}


/* ===== V17: hero telefon + lehčí závěr procesu ===== */
.btn-phone-hero{
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.btn-phone-hero .phone-icon{
  font-size:22px;
  line-height:1;
  display:inline-block;
  transform:translateY(-1px);
}
@media (max-width:640px){
  .btn-phone-hero{
    gap:10px;
  }
  .btn-phone-hero .phone-icon{
    font-size:20px;
  }
}


/* ===== V18: stejná úprava telefonu také dole ===== */
.phone-link-enhanced{
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.phone-link-enhanced .phone-icon{
  font-size:22px;
  line-height:1;
  display:inline-block;
  transform:translateY(-1px);
}
@media (max-width:640px){
  .phone-link-enhanced{ gap:10px; }
  .phone-link-enhanced .phone-icon{ font-size:20px; }
}


/* ===== V20: sjednocení karet služeb + čistší seznam prvků ===== */

/* Všechny tři obrázkové bloky mají stejný tvar, výšku a zaoblení. */
#sluzby .service-card{
  border-radius:14px;
  overflow:hidden;
}

#sluzby .service-card .visual{
  width:100%;
  aspect-ratio:16 / 9 !important;
  height:auto !important;
  overflow:hidden;
  border-radius:14px 14px 0 0 !important;
  background:#fff;
}

#sluzby .service-card .visual > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover !important;
  object-position:center;
  border-radius:0 !important;
}

/* Zachová jemný hover, ale bez posunu okrajů. */
#sluzby .service-card .visual > img{
  transition:transform .45s ease !important;
}
#sluzby .service-card:hover .visual > img{
  transform:scale(1.035) !important;
}

/* Štítky bez šedých krabiček – čistý text s červenými oddělovači. */
#sluzby .service-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 0;
  margin:20px 0 20px;
}

#sluzby .service-tags span{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:auto !important;
  padding:0 13px 0 0 !important;
  margin:0 12px 0 0;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#56616a;
  font-size:11px;
  font-weight:800;
  letter-spacing:.045em;
  line-height:1.4;
  text-transform:uppercase;
}

#sluzby .service-tags span::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:2px;
  height:14px;
  background:var(--red);
  transform:translateY(-50%);
  opacity:.8;
}

#sluzby .service-tags span:last-child{
  margin-right:0;
  padding-right:0 !important;
}

#sluzby .service-tags span:last-child::after{
  display:none;
}

@media (max-width:640px){
  #sluzby .service-card .visual{
    aspect-ratio:16 / 10 !important;
  }
}


/* ===== V24: funkční prokliky hlavního menu ===== */
html{
  scroll-behavior:smooth;
}

#sluzby,
#proc-prave-my,
#reference,
#kontakt{
  scroll-margin-top:110px;
}


/* ===== V26: pořadí menu + šipka zpět nahoru ===== */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:999;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  font-size:25px;
  font-weight:800;
  line-height:1;
  box-shadow:0 10px 28px rgba(15,24,34,.20);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{
  background:#c91823;
}
@media (max-width:640px){
  .back-to-top{
    right:16px;
    bottom:16px;
    width:44px;
    height:44px;
    font-size:23px;
  }
}


/* ===== V27: footer, procesní věta, šipka nahoru ===== */

/* Procesní věta – čistší, bez kurzívy, lehký akcent */
.process-note{
  margin:42px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:max-content;
  max-width:100%;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#f4f6f7;
  font-size:15px;
  font-style:normal !important;
  font-weight:700;
  letter-spacing:.01em;
  background:rgba(255,255,255,.035);
}
.process-note-icon{
  color:var(--red);
  font-size:18px;
  font-weight:900;
  line-height:1;
}

/* Footer */
.footer-bottom{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
}
.footer-bottom a{
  color:#cfd5da;
  text-decoration:none;
  font-weight:700;
}
.footer-bottom a:hover{
  color:#fff;
  text-decoration:underline;
}

/* Šipka zpět nahoru */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9999;
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  font-size:26px;
  font-weight:800;
  line-height:1;
  box-shadow:0 10px 28px rgba(15,24,34,.25);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{
  background:#c91823;
}
@media (max-width:640px){
  .process-note{
    width:auto;
    border-radius:16px;
    text-align:center;
  }
  .back-to-top{
    right:16px;
    bottom:16px;
    width:46px;
    height:46px;
    font-size:24px;
  }
}


/* ===== V28: oprava horizontálního přetékání stránky ===== */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

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

img,
iframe,
video{
  max-width:100%;
}

/* Procesní hláška se nesmí roztáhnout mimo viewport */
.process-note{
  width:fit-content !important;
  max-width:calc(100% - 32px) !important;
}

/* Footer i jeho obsah zůstane uvnitř šířky stránky */
.site-footer,
.footer-bottom,
.footer-grid{
  max-width:100%;
}

/* Plovoucí šipka nesmí vytvářet šířku stránky */
.back-to-top{
  max-width:50px;
}
@media (max-width:640px){
  .back-to-top{max-width:46px}
}


/* ===== V29: PODSTRÁNKA OKNA, DVEŘE A POSUVNÉ SYSTÉMY ===== */
.subhero{
  position:relative;
  min-height:680px;
  display:flex;
  align-items:center;
  color:#fff;
  background:#111c25 center/cover no-repeat;
  overflow:hidden;
}
.windows-subhero{
  background-image:url('../assets/images/hero-okna-dvere-final.webp');
  background-size:cover;
  background-position:center 58%;
}
.subhero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(8,14,19,.90) 0%,rgba(8,14,19,.76) 38%,rgba(8,14,19,.22) 72%,rgba(8,14,19,.12) 100%);
}
.subhero-grid{
  position:relative;
  z-index:2;
  width:100%;
}
.subhero-copy{
  max-width:760px;
  padding:150px 0 90px;
}
.subhero-copy h1{
  margin:14px 0 24px;
  font-size:clamp(44px,5.2vw,78px);
  line-height:.98;
  letter-spacing:-.045em;
}
.subhero-copy h1 span{font-weight:500}
.subhero-lead{
  max-width:700px;
  margin:0 0 32px;
  font-size:20px;
  line-height:1.55;
  color:#e7ecef;
}
.product-jump{
  position:sticky;
  top:88px;
  z-index:35;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e3e6e8;
  box-shadow:0 8px 22px rgba(15,24,34,.05);
  backdrop-filter:blur(12px);
}
.product-jump-inner{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  overflow-x:auto;
  scrollbar-width:none;
}
.product-jump-inner::-webkit-scrollbar{display:none}
.product-jump a{
  flex:0 0 auto;
  color:#34404a;
  font-size:12px;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
  text-decoration:none;
}
.product-jump a:hover{color:var(--red)}
.product-intro-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  align-items:start;
}
.product-intro-grid h2,
.product-copy h2,
.windows-cta h2{
  margin:8px 0 20px;
  font-size:clamp(34px,4vw,56px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.product-intro-copy{
  color:#65717a;
  font-size:17px;
  line-height:1.75;
}
.product-intro-copy p:first-child{margin-top:0}
.product-benefits{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #dfe3e6;
  border-bottom:1px solid #dfe3e6;
}
.product-benefits div{
  min-height:130px;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid #dfe3e6;
}
.product-benefits div:last-child{border-right:0}
.product-benefits strong{
  color:#111b23;
  font-size:30px;
  line-height:1;
}
.product-benefits span{
  margin-top:8px;
  color:#68747d;
  font-size:13px;
  font-weight:700;
}
.product-section{
  scroll-margin-top:165px;
}
.product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.product-grid.reverse .product-copy{order:2}
.product-grid.reverse .product-image{order:1}
.product-copy p{
  color:#68747d;
  font-size:16px;
  line-height:1.72;
}
.product-image{
  border-radius:18px;
  overflow:hidden;
  min-height:430px;
  box-shadow:0 20px 50px rgba(15,24,34,.12);
}
.product-image img{
  display:block;
  width:100%;
  height:100%;
  min-height:430px;
  object-fit:cover;
  transition:transform .5s ease;
}
.product-image:hover img{transform:scale(1.035)}
.product-image-dark img{filter:saturate(.9) contrast(1.03)}
.feature-line{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:9px 0;
}
.feature-line span{
  position:relative;
  padding-right:14px;
  margin-right:12px;
  color:#4f5d67;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.feature-line span::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:2px;
  height:14px;
  background:var(--red);
  transform:translateY(-50%);
}
.feature-line span:last-child::after{display:none}
.profile-wrap{margin-top:76px}
.compact-head{max-width:800px;margin-left:auto;margin-right:auto}
.compact-head h3{
  margin:8px 0 12px;
  font-size:clamp(28px,3vw,42px);
}
.profile-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:34px;
}
.profile-card{
  padding:28px 24px;
  border:1px solid #dde2e5;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(15,24,34,.04);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.profile-card:hover{
  transform:translateY(-4px);
  border-color:#cfd5d9;
  box-shadow:0 16px 34px rgba(15,24,34,.08);
}
.profile-kicker{
  color:var(--red);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.profile-card h4{
  margin:8px 0 18px;
  font-size:24px;
}
.profile-card ul{
  margin:0;
  padding-left:18px;
  color:#68747d;
  font-size:13px;
  line-height:1.55;
}
.simple-product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.simple-product-card{
  padding:50px;
  background:#fff;
  border:1px solid #dde2e5;
  border-radius:16px;
}
.simple-product-card h2{
  margin:8px 0 18px;
  font-size:36px;
  line-height:1.08;
}
.simple-product-card p{
  color:#68747d;
  font-size:16px;
  line-height:1.7;
}
.simple-product-card a{
  color:var(--red);
  font-weight:800;
  text-decoration:none;
}
.product-dark{
  background:#111c25;
  color:#fff;
}
.product-dark .product-copy p{color:#c7d0d6}
.product-dark .product-copy h2{color:#fff}
.door-visual{
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.door-outline{
  position:relative;
  width:230px;
  height:360px;
  border:12px solid #e31f2b;
  border-bottom-width:16px;
  box-shadow:22px 22px 0 rgba(255,255,255,.08);
}
.door-outline::before{
  content:"";
  position:absolute;
  inset:28px 26px;
  border:5px solid #fff;
}
.door-outline span{
  position:absolute;
  right:38px;
  top:50%;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
}
.turnkey-strip{
  padding:80px 0;
  background:#111c25;
  color:#fff;
}
.turnkey-steps{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15);
}
.turnkey-steps div{
  min-height:135px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  border-right:1px solid rgba(255,255,255,.15);
}
.turnkey-steps div:last-child{border-right:0}
.turnkey-steps b{
  color:var(--red);
  font-size:22px;
}
.turnkey-steps span{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:center;
}
.windows-cta{
  background:#f5f6f7;
}
.windows-cta-inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:70px;
  align-items:center;
}
.windows-cta p{
  color:#68747d;
  font-size:16px;
  line-height:1.65;
}
.windows-cta-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}
.windows-cta-actions .btn{
  justify-content:center;
}
@media(max-width:1050px){
  .profile-grid{grid-template-columns:repeat(2,1fr)}
  .product-jump-inner{justify-content:flex-start}
}
@media(max-width:820px){
  .subhero{min-height:560px}
  .subhero-copy{padding:130px 0 70px}
  .product-intro-grid,
  .product-grid,
  .windows-cta-inner{
    grid-template-columns:1fr;
    gap:36px;
  }
  .product-grid.reverse .product-copy,
  .product-grid.reverse .product-image{order:initial}
  .product-benefits{grid-template-columns:repeat(2,1fr)}
  .product-benefits div:nth-child(2){border-right:0}
  .product-benefits div:nth-child(-n+2){border-bottom:1px solid #dfe3e6}
  .simple-product-grid{grid-template-columns:1fr}
  .turnkey-steps{grid-template-columns:repeat(3,1fr)}
  .turnkey-steps div:nth-child(3n){border-right:0}
  .turnkey-steps div:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.15)}
}
@media(max-width:640px){
  .subhero-copy h1{font-size:42px}
  .subhero-lead{font-size:17px}
  .product-jump{top:72px}
  .product-jump-inner{gap:22px;min-height:58px}
  .product-benefits{grid-template-columns:1fr}
  .product-benefits div{
    border-right:0;
    border-bottom:1px solid #dfe3e6;
  }
  .product-benefits div:last-child{border-bottom:0}
  .profile-grid{grid-template-columns:1fr}
  .simple-product-card{padding:34px 26px}
  .turnkey-steps{grid-template-columns:repeat(2,1fr)}
  .turnkey-steps div{
    border-right:1px solid rgba(255,255,255,.15) !important;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  .turnkey-steps div:nth-child(2n){border-right:0 !important}
  .turnkey-steps div:nth-last-child(-n+2){border-bottom:0}
}


/* ===== V30 – ladění pouze požadovaných částí podstránky ===== */

/* 1. HERO: stejné odsazení jako na hlavní stránce, ne nalepené na kraj */
.subhero .subhero-grid{
  width:min(var(--max), calc(100% - 40px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* 4. Úvod: pravý text srovnaný vertikálně s levým blokem */
.product-intro-grid{
  align-items:center !important;
}

/* 4. Výhody bez rámečků – stejný čistý jazyk jako zbytek webu */
.product-benefits{
  margin-top:54px !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:34px !important;
  border:0 !important;
}
.product-benefits div{
  min-height:auto !important;
  padding:8px 0 14px !important;
  border:0 !important;
  position:relative;
}
.product-benefits div::before{
  content:"";
  display:block;
  width:42px;
  height:4px;
  margin-bottom:18px;
  background:var(--red);
}
.product-benefits strong{
  font-size:34px !important;
  line-height:1 !important;
  color:var(--ink) !important;
}
.product-benefits span{
  max-width:220px;
  margin-top:10px !important;
  display:block;
  color:#68747d !important;
  font-size:13px !important;
  line-height:1.45;
  font-weight:700 !important;
}

/* 2. Kompletní výměna: stejné červené kruhy jako proces na titulce */
.turnkey-steps{
  margin-top:48px !important;
  display:grid !important;
  grid-template-columns:repeat(6,1fr) !important;
  border:0 !important;
  gap:24px !important;
}
.turnkey-steps div{
  min-height:auto !important;
  padding:0 !important;
  border:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}
.turnkey-steps b{
  width:64px;
  height:64px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--red);
  color:#fff !important;
  font-size:20px !important;
  line-height:1;
}
.turnkey-steps span{
  color:#fff;
  font-size:12px !important;
  line-height:1.35;
  font-weight:800 !important;
  text-transform:uppercase;
  letter-spacing:.035em;
}

/* 3. Profilové systémy: pět odborných karet s obrázky řezů */
.profile-grid-five{
  grid-template-columns:repeat(5,1fr) !important;
  gap:16px !important;
}
.profile-grid-five .profile-card{
  padding:0 !important;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.profile-card-image{
  height:220px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-bottom:1px solid #edf0f2;
}
.profile-card-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.profile-card-copy{
  padding:24px 22px 26px;
}
.profile-grid-five .profile-card h4{
  font-size:22px;
  line-height:1.1;
}

/* responsive pouze pro upravené části */
@media(max-width:1100px){
  .profile-grid-five{
    grid-template-columns:repeat(3,1fr) !important;
  }
}
@media(max-width:820px){
  .product-benefits{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .turnkey-steps{
    grid-template-columns:repeat(3,1fr) !important;
  }
  .profile-grid-five{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media(max-width:640px){
  .subhero .subhero-grid{
    width:min(var(--max), calc(100% - 28px)) !important;
  }
  .product-benefits{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  .turnkey-steps{
    grid-template-columns:repeat(2,1fr) !important;
    gap:30px 18px !important;
  }
  .profile-grid-five{
    grid-template-columns:1fr !important;
  }
}
\n\n/* ===== V31 – pouze řádkování nadpisů + průhledné menu titulky ===== */
/* Titulka: fotografie pokračuje i pod menu. Podstránky zůstávají beze změny. */
.home-page .site-header{
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
}

/* Větší prostor mezi řádky velkých nadpisů kvůli české diakritice. */
.hero h1{
  line-height:1.10 !important;
}
.section-head h2,
.promo h2,
.video-copy h2,
.inquiry-copy h2{
  line-height:1.16 !important;
}
.subhero-copy h1{
  line-height:1.08 !important;
}
.product-intro-grid h2,
.product-copy h2,
.windows-cta h2,
.simple-product-card h2{
  line-height:1.12 !important;
}


/* ===== V32: pouze titulka – hero obrázek pokračuje pod menu ===== */
.home-page .site-header{
  position:absolute !important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:100;
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.home-page .site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
    rgba(8,14,19,.48) 0%,
    rgba(8,14,19,.28) 55%,
    rgba(8,14,19,.10) 100%);
  pointer-events:none;
  z-index:-1;
}

.home-page .hero{
  margin-top:0 !important;
  padding-top:0 !important;
  min-height:100vh;
  background-position:center top !important;
}

.home-page .hero .hero-grid{
  padding-top:88px;
}

/* podstránky zůstávají beze změny */


/* ===== V33: sticky menu při scrollu ===== */

/* Hlavní stránka: nad hero fotkou průhledné, po scrollu tmavé */
.home-page .site-header{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:1000;
  transition:
    background-color .28s ease,
    box-shadow .28s ease,
    backdrop-filter .28s ease,
    border-color .28s ease;
}

.home-page .site-header.is-scrolled{
  background:rgba(15,24,34,.96) !important;
  border-bottom-color:rgba(255,255,255,.10) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(12px) !important;
}

.home-page .site-header.is-scrolled::before{
  opacity:0;
}

/* Podstránky: menu zůstává nahoře při scrollu a je tmavé od začátku */
body:not(.home-page) .site-header{
  position:sticky !important;
  top:0;
  z-index:1000;
  background:rgba(15,24,34,.97) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
}


/* ===== V34: formulář + telefon na podstránce okna ===== */
.btn-phone-subpage{
  margin-top:28px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:#111b23;
  border-color:#111b23;
}
.btn-phone-subpage:hover{
  background:#0a1117;
  border-color:#0a1117;
}
.btn-phone-subpage .phone-icon{
  font-size:22px;
  line-height:1;
  display:inline-block;
  transform:translateY(-1px);
}
@media(max-width:640px){
  .btn-phone-subpage{
    width:100%;
    justify-content:center;
  }
}


/* ===== V38: sticky menu na podstránce ===== */
.subpage .site-header{
  position:fixed !important;
  top:0 !important;
  left:0;
  right:0;
  width:100%;
  z-index:1200 !important;
  background:rgba(15,24,34,.97) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
}

/* Hero začíná pod fixním menu, aby se obsah neschoval. */
.subpage main{
  padding-top:88px;
}

/* Sticky produktový rozcestník zůstává hned pod hlavním menu. */
.subpage .product-jump{
  top:88px !important;
  z-index:1100;
}

@media(max-width:640px){
  .subpage main{
    padding-top:72px;
  }
  .subpage .product-jump{
    top:72px !important;
  }
}


/* ===== V39: oprava sticky menu na podstránce bez bílého pruhu ===== */
.subpage .site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:1200 !important;
  background:rgba(15,24,34,.97) !important;
}

/* Hero běží přímo pod fixním menu, žádná bílá mezera */
.subpage main{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* obsah hero má už vlastní horní odsazení, takže se pod menu neschová */
.subpage .subhero{
  margin-top:0 !important;
}

/* druhé menu zůstává sticky pod hlavním menu */
.subpage .product-jump{
  top:88px !important;
  z-index:1100;
}

@media(max-width:640px){
  .subpage .product-jump{
    top:72px !important;
  }
}


/* ===== V40: PODSTRÁNKA STÍNĚNÍ A DOPLŇKY ===== */
.shading-subhero{
  background-image:url('../assets/images/stineni/hero-stineni.webp');
  background-size:cover;
  background-position:center;
}

.shading-benefits{
  margin-top:54px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px;
}
.shading-benefits div{
  padding:14px 0 8px;
}
.shading-benefits .benefit-icon{
  display:block;
  margin-bottom:14px;
  color:var(--red);
  font-size:30px;
  line-height:1;
}
.shading-benefits strong{
  display:block;
  color:var(--ink);
  font-size:17px;
  line-height:1.25;
}
.shading-benefits small{
  display:block;
  max-width:220px;
  margin-top:8px;
  color:#68747d;
  font-size:13px;
  line-height:1.45;
}

/* Rolety musí vizuálně působit rovně, proto je obrázek bez deformujícího hover zoomu. */
.shading-image-flat img{
  transform:none !important;
  object-fit:cover;
}
.shading-image-flat:hover img{
  transform:none !important;
}

@media(max-width:820px){
  .shading-benefits{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .shading-benefits{grid-template-columns:1fr}
}


/* ===== V41: stínění – ostré obrázky, čistý hero, skutečně sticky menu ===== */

/* Hero používá pouze čistou fotografii bez textu z obrázku.
   Veškerý text a CTA zůstávají pouze v HTML. */
.shading-subhero{
  background-image:url('../assets/images/stineni/hero-stineni.webp') !important;
  background-size:cover !important;
  background-position:center 52% !important;
}

/* Hlavní menu na podstránce skutečně drží nahoře bez mezery.
   Sticky místo fixed = nevzniká bílý pruh ani odskočení hero. */
.subpage .site-header{
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  z-index:1300 !important;
  background:rgba(15,24,34,.98) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.14) !important;
  backdrop-filter:blur(10px);
}

.subpage main{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* Druhé produktové menu drží hned pod hlavní navigací. */
.subpage .product-jump{
  top:88px !important;
  z-index:1200 !important;
}

/* Obrázky ostřejší, bez zbytečného rozmazávání. */
#zaluzie .product-image img,
#rolety .product-image img,
#plise .product-image img,
#site .product-image img,
#parapety .product-image img,
#doplnky .product-image img{
  object-fit:cover !important;
  image-rendering:auto;
}

/* U žaluzií a rolet žádné transformace – lamely a látka musí zůstat rovné. */
#zaluzie .product-image img,
#rolety .product-image img{
  transform:none !important;
}
#zaluzie .product-image:hover img,
#rolety .product-image:hover img{
  transform:none !important;
}

@media(max-width:640px){
  .subpage .product-jump{
    top:72px !important;
  }
}


/* ===== V42: stínění – čistá síť + AKPA line ikonografie ===== */

/* Kategorie – ikony ve stejném tenkém technickém stylu. */
.shading-jump{
  gap:18px !important;
}
.shading-jump a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 4px;
}
.shading-jump .jump-icon{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.shading-jump .jump-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:#111b23;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .2s ease;
}
.shading-jump a:hover .jump-icon svg{
  stroke:var(--red);
}

/* Výhody – vlastní červené outline ikony místo emoji/symbolů. */
.shading-benefits .benefit-icon-svg{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}
.shading-benefits .benefit-icon-svg svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:var(--red);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Síť bez kočky – čistý produktový vizuál. */
#site .product-image img{
  object-position:center;
  transform:none !important;
}
#site .product-image:hover img{
  transform:none !important;
}

@media(max-width:820px){
  .shading-jump{
    justify-content:flex-start !important;
  }
}


/* ===== V43: benefit piktogramy ve stylu AKPA ===== */
/* pouze změna vzhledu 4 piktogramů, texty a rozložení zůstávají stejné */

.shading-benefits .benefit-icon-svg{
  width:62px !important;
  height:62px !important;
  margin-bottom:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative;
  background:#111c25 !important;
  border:0 !important;
  border-radius:4px !important;
  box-shadow:none !important;
  overflow:hidden;
}

.shading-benefits .benefit-icon-svg::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:4px;
  height:100%;
  background:var(--red);
}

.shading-benefits .benefit-icon-svg svg{
  width:32px !important;
  height:32px !important;
  fill:none !important;
  stroke:#fff !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.shading-benefits > div{
  padding-top:4px !important;
}



/* ===== V44: PODSTRÁNKA SERVIS A OPRAVY ===== */
.service-subhero{
  background:
    linear-gradient(90deg,rgba(8,14,19,.90),rgba(8,14,19,.62) 48%,rgba(8,14,19,.15)),
    url('../assets/images/servis.webp') center/cover no-repeat;
}

.service-visual-card{
  min-height:390px;
  border-radius:18px;
  background:#fff;
  border:1px solid #dde2e5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  box-shadow:0 18px 44px rgba(15,24,34,.08);
}
.service-visual-card.dark{
  background:#111c25;
  border-color:#111c25;
  color:#fff;
}
.service-visual-icon{
  width:110px;
  height:110px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111c25;
  color:#fff;
  font-size:46px;
  line-height:1;
  position:relative;
}
.service-visual-card.dark .service-visual-icon{
  background:#fff;
  color:#111c25;
}
.service-visual-icon::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:6px;
  height:100%;
  background:var(--red);
}
.service-visual-card p{
  margin:0;
  font-weight:800;
  font-size:18px;
  text-align:center;
  padding:0 30px;
}



/* ===== V45: sjednocení piktogramů AKPA ===== */

/* Piktogramy přes fotografie na hlavní stránce:
   místo černého boxu + červeného pruhu používáme stejný červený zaoblený
   čtverec a bílou linku jako u ostatních piktogramů webu. */
.service-card .visual{
  position:relative;
}
.image-service-icon{
  position:absolute;
  left:0;
  bottom:0;
  width:96px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#ef1d2d,#c90f1e);
  border-radius:0 18px 0 0;
  box-shadow:0 12px 30px rgba(238,29,45,.16);
}
.image-service-icon svg{
  width:48px;
  height:48px;
  fill:none;
  stroke:#fff;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Servis a opravy – stejné piktogramy i na třetí podstránce. */
.service-visual-icon.service-visual-icon-akpa,
.service-visual-card.dark .service-visual-icon.service-visual-icon-akpa{
  width:96px;
  height:96px;
  border-radius:18px;
  background:linear-gradient(145deg,#ef1d2d,#c90f1e);
  color:#fff;
  box-shadow:0 12px 30px rgba(238,29,45,.16);
}
.service-visual-icon.service-visual-icon-akpa::after{
  display:none;
}
.service-visual-icon.service-visual-icon-akpa svg{
  width:48px;
  height:48px;
  fill:none;
  stroke:#fff;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:700px){
  .image-service-icon{
    width:76px;
    height:76px;
    border-radius:0 15px 0 0;
  }
  .image-service-icon svg{
    width:38px;
    height:38px;
  }
}


/* ===== V46: sjednocení 2. a 3. podstránky s první podstránkou ===== */

/* Horní argumenty na podstránkách – stejný čistý princip jako Okna a dveře. */
.subpage-benefits-clean{
  margin-top:54px;
}
.subpage-benefits-clean > div{
  min-height:132px;
}
.subpage-benefits-clean strong{
  font-size:clamp(24px,2.2vw,38px);
  line-height:1;
  letter-spacing:-.03em;
}
.subpage-benefits-clean span{
  max-width:250px;
}

/* Servisní obsah – bez čtvercových piktogramů a bez černých icon boxů. */
.service-visual-card.service-visual-clean{
  background:transparent;
  color:inherit;
  border:0;
  border-left:1px solid #d8dde1;
  border-radius:0;
  box-shadow:none;
  padding:12px 0 12px 34px;
  min-height:0;
}
.service-visual-card.service-visual-clean h3{
  color:#111b25;
  margin-top:0;
}
.service-visual-card.service-visual-clean p{
  color:#6b7680;
}
.service-visual-card.service-visual-clean .service-visual-icon{
  display:none !important;
}

@media (max-width:800px){
  .service-visual-card.service-visual-clean{
    border-left:0;
    border-top:1px solid #d8dde1;
    padding:28px 0 0;
  }
}


/* ===== V47: Stínění – sjednocené produktové fotografie ===== */
.shading-page .product-image{
  width:100%;
  aspect-ratio:1200 / 760;
  min-height:0 !important;
  border-radius:18px;
  overflow:hidden;
  background:#eef1f3;
}
.shading-page .product-image img{
  display:block;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  object-fit:cover !important;
  object-position:center center;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
/* U produktových fotografií žádné zoomování – rovné žaluzie, rolety i plisé. */
.shading-page .product-image:hover img{
  transform:none !important;
}
#site .product-image img{
  object-position:center center !important;
}

/* ===== V47: hlavní stránka – celé karty služeb vedou na podstránky ===== */
#sluzby .service-card{
  position:relative;
}
#sluzby .service-card .service-card-link{
  position:absolute;
  inset:0;
  z-index:1;
  border:0;
  background:transparent;
  font-size:0;
}
#sluzby .service-card .card-body,
#sluzby .service-card .visual{
  position:relative;
}
#sluzby .service-card .card-body > *,
#sluzby .service-card .visual > *{
  position:relative;
  z-index:2;
  pointer-events:none;
}
#sluzby .service-card .card-body > a{
  pointer-events:auto;
}
#sluzby .service-card:hover{
  transform:translateY(-3px);
}


/* ===== V48: dropdown Naše služby ===== */
.main-nav .nav-services{
  position:relative;
  display:flex;
  align-items:center;
  align-self:stretch;
}
.main-nav .nav-services-main{
  display:flex;
  align-items:center;
  height:100%;
}
.nav-services-dropdown{
  position:absolute;
  top:calc(100% - 1px);
  left:50%;
  transform:translate(-50%,10px);
  width:310px;
  padding:10px;
  background:#111d27;
  border-top:3px solid #ed1c2b;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:9999;
}
.nav-services-dropdown a{
  display:block !important;
  height:auto !important;
  padding:14px 16px !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1.35 !important;
  white-space:normal;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.nav-services-dropdown a:last-child{border-bottom:0}
.nav-services-dropdown a:hover{
  background:#ed1c2b;
}
.nav-services:hover .nav-services-dropdown,
.nav-services:focus-within .nav-services-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

/* Obrázky stínění musí opravdu končit přesně hranou rámečku. */
.shading-page .product-image{
  padding:0 !important;
  line-height:0;
  background:transparent !important;
}
.shading-page .product-image img{
  position:relative;
  inset:auto;
  vertical-align:top;
}

/* mobil – submenu je normálně součást rozbaleného menu */
@media (max-width:900px){
  .main-nav .nav-services{
    display:block;
    width:100%;
  }
  .main-nav .nav-services-main{
    height:auto;
  }
  .nav-services-dropdown{
    position:static;
    width:100%;
    padding:0 0 0 14px;
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    box-shadow:none;
    border-top:0;
    background:transparent;
  }
  .nav-services-dropdown a{
    padding:10px 14px !important;
    font-size:12px !important;
    color:#c9d0d6 !important;
    border-bottom:0;
  }
}


/* V49 – servisní fotografie */
.service-photo{width:100%;aspect-ratio:1200/760;border-radius:18px;overflow:hidden;box-shadow:0 18px 45px rgba(17,27,37,.10);background:#eef1f3;}
.service-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
@media(max-width:800px){.service-photo{border-radius:14px;}}

/* ===== V53: hlavní menu na všech podstránkách drží nahoře jako na titulní stránce ===== */
.subpage .site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:5000 !important;
  background:rgba(15,24,34,.98) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.14) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* Obsah stránky se při scrollu pohybuje pod fixním menu stejně jako na homepage. */
.subpage main{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* Druhá produktová navigace zůstává pod hlavním menu. */
.subpage .product-jump{
  position:sticky !important;
  top:88px !important;
  z-index:4000 !important;
}

@media(max-width:640px){
  .subpage .product-jump{top:72px !important;}
}

/* ===== V54 FINAL: jednotné pevné hlavní menu na homepage i podstránkách ===== */
body.subpage > .site-header{
  position:fixed !important;
  inset:0 0 auto 0 !important;
  width:100% !important;
  z-index:99999 !important;
  background:#111b23 !important;
  transform:none !important;
}
body.subpage{
  padding-top:88px !important;
}
body.subpage main{
  padding-top:0 !important;
  margin-top:0 !important;
}
body.subpage .product-jump{
  position:sticky !important;
  top:88px !important;
  z-index:9990 !important;
}
@media(max-width:640px){
  body.subpage{padding-top:72px !important;}
  body.subpage .product-jump{top:72px !important;}
}


/* V58: potvrzení odeslané poptávky přímo místo formuláře */
.form-success{
  min-height:390px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:16px 8px;
}
.form-success-check{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:28px;
  font-weight:900;
}
.form-success h3{
  margin:4px 0 14px;
  color:var(--ink);
  font-size:30px;
  line-height:1.08;
}
.form-success>p:last-child{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}
.form-error{
  margin:16px 0 0;
  color:var(--red);
  font-size:13px;
  font-weight:700;
}

.footer-legal{padding-top:18px;color:rgba(255,255,255,.62);font-size:12px;line-height:1.65;border-top:1px solid rgba(255,255,255,.10);}

/* V65: firemni udaje v paticce decentne */
.footer-legal{
  margin-top:24px !important;
  padding-top:0 !important;
  border-top:0 !important;
  color:rgba(255,255,255,.44) !important;
  font-size:11px !important;
  line-height:1.55 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}
.footer-bottom{
  margin-top:14px !important;
}

/* V66: rejstrikove udaje soucasti spodniho radku paticky */
.footer-register{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.38);
  font-size:10px;
  line-height:1.45;
  font-weight:400;
}

/* V67: firemni udaje oddelene a decentni */
.footer-legal{
  margin-top:24px !important;
  padding-top:0 !important;
  border-top:0 !important;
  color:rgba(255,255,255,.48) !important;
  font-size:10px !important;
  line-height:1.6 !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
}
.footer-bottom{
  margin-top:20px !important;
}