/* Root palette (dark) */
:root{
  --bg:#0b0d10;
  --bg-alt:#12151a;
  --black:#0a0c0f;
  --card:#161a21;
  --txt:#e6e8eb;
  --muted:#98a2b3;
  --brand:#d4193d;
  --brand-2:#ff4d6d;
  --ring: rgba(212,25,61,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt);
  background:var(--bg);
}

.container{width:min(1100px,92%); margin:0 auto}
.section{padding:72px 0}
.section.alt{background:var(--bg-alt)}
.section-title{font-size:clamp(28px,3.5vw,40px); margin:0 0 24px; letter-spacing:.3px}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 10px 30px var(--ring); transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 40px var(--ring)}

/* --- Top Logo Bar --- */
.logo-bar{
  background: #ffffff;
  display:grid; place-items:center; padding:18px 0 16px; border-bottom:1px solid #1a212f;
}
.logo-img{width:177px; height:auto; display:block; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}

/* --- Navigation Bar --- */
.nav-bar{background:var(--black); border-bottom:1px solid #202534; position:relative}
.nav-row{
  display:grid; grid-template-columns: 40px 1fr auto; align-items:center; gap:12px; height:56px;
}
.burger{background:none; border:0; cursor:pointer; display:none}
.burger span{display:block; width:24px; height:2px; background:#fff; margin:5px 0}
.nav-center{display:flex; justify-content:center; gap:22px; flex-wrap:wrap}
.nav-center a{color:var(--txt); text-decoration:none; opacity:.9}
.nav-center a:hover{color:#fff}
.lang-switch{justify-self:end; color:var(--txt); font-weight:700}
.lang-switch .lang{background:none; border:0; color:#fff; cursor:pointer; font-weight:800}
.lang-switch .sep{opacity:.6; margin:0 6px}
.lang-switch .active{opacity:1; text-decoration:underline}

/* --- Video Block --- */
.video-block{width:100%; overflow:hidden}
.hero-video{width:100%; height:70vh; min-height:360px; object-fit:cover; display:block}

/* Cards / grid / gallery / compare (unchanged from previous version, with minor tweaks) */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.card{background:var(--card); border:1px solid #202534; border-radius:18px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h3{margin:0 0 8px; font-size:20px}
.card p{margin:0; color:var(--muted)}

.compare{position:relative; width:100%; max-width:1000px; margin:10px auto 0; border-radius:20px; overflow:hidden; background:#000; aspect-ratio:16/9; box-shadow:0 12px 40px rgba(0,0,0,.35)}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.compare .after{position:absolute; inset:0; width:50%; overflow:hidden; border-right:2px solid #fff}
.compare .slider{-webkit-appearance:none; appearance:none; position:absolute; inset:0; width:100%; background:transparent; outline:none; cursor:col-resize; margin:0}
.compare .slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:0; height:100%; background:transparent; border:none}
.compare .handle{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; border:2px solid #fff; background:rgba(0,0,0,.35); pointer-events:none; display:grid; place-items:center}
.compare .handle::before{content:"⇔"; font-size:18px; color:#fff}
.compare .labels{position:absolute; inset:auto 0 0 0; display:flex; justify-content:space-between; padding:10px 14px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6)}

.gallery{width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:0; margin:0}
.gallery img{width:100%; height:240px; object-fit:cover; display:block; filter:saturate(1.05); transition:transform .25s ease, opacity .25s ease}
.gallery img:hover{transform:scale(1.02); opacity:.95}

.contact{display:grid; grid-template-columns:1.1fr 1.4fr; gap:28px; align-items:start}
.map-wrap{border-radius:18px; overflow:hidden; border:1px solid #202534; background:#0a0c0f}
.map-wrap iframe{width:100%; height:360px; border:0}

.site-footer{padding:24px 0; background:#0a0c0f; border-top:1px solid #202534}
.footer-flex{display:flex; align-items:center; justify-content:space-between; gap:16px}
.foot-links a{color:var(--muted); text-decoration:none; margin-left:16px}
.foot-links a:hover{color:#fff}

/* Pricing */
.muted{color:var(--muted)}
.tiny{font-size:12px}
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.price-card{position:relative; background:var(--card); border:1px solid #202534; border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.price-card.highlight{outline:2px solid var(--brand); box-shadow:0 14px 40px var(--ring)}
.price-card .badge{position:absolute; top:12px; right:12px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; font-size:12px; padding:4px 10px; border-radius:999px; font-weight:800; letter-spacing:.04em}
.price-card h3{margin:4px 0 0}
.price{font-size:26px; font-weight:800; margin:2px 0 8px}
.list{margin:0 0 14px; padding-left:18px; color:var(--muted)}
.list li{margin:6px 0}

/* Responsive */
@media (max-width:980px){
  .grid-3{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .burger{display:block}
  .nav-row{grid-template-columns:40px 1fr auto}
  .nav-center{display:none; position:absolute; left:0; right:0; top:56px; background:var(--black); padding:10px 0; border-bottom:1px solid #202534; z-index:1000}
  .nav-center a{display:block; padding:10px 16px; text-align:center}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr}
}
@media (max-width:480px){
  .gallery img{height:200px}
}

/* Sticky wrapper keeps logo + menu fixed */
.header-sticky{position:sticky; top:0; z-index:999;}

/* Prevent menu wrapping and overlapping */
.nav-row{height:auto; min-height:56px; padding:8px 0;}
.nav-center{display:flex; justify-content:center; gap:18px; flex-wrap:nowrap; white-space:nowrap}
.nav-bar{z-index:998;}

/* Ensure video starts below header with shadow separation */
.video-block{position:relative}
.nav-bar{box-shadow:0 6px 16px rgba(0,0,0,.35)}