*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:#0b0b0b;color:#fff}
.top{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.wrap{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}.brand img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.brand .title{display:flex;flex-direction:column}.brand .title span{color:#9aa0a6;font-size:12px}
.actions{display:flex;gap:10px}.btn{padding:10px 16px;border-radius:12px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.18)}.btn.cta{background:#ffb300;color:#000;border:0}.btn.ghost:hover{background:rgba(255,255,255,.1)}
.hero{position:relative;height:70vh;overflow:hidden}.slides{position:absolute;inset:0;display:grid}.slide{grid-area:1/1;opacity:0;transition:opacity .8s}.slide img{width:100%;height:100%;object-fit:cover}.slide.active{opacity:1}
.dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:8px}.dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:none}.dots button.active{width:12px;height:12px;background:#fff}
.hero-caption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(to bottom, rgba(0,0,0,.15), transparent 40%, rgba(0,0,0,.5))}
.hero-caption h1{font-size:clamp(28px,5vw,56px);margin:0}.hero-caption p{color:#cfcfcf;max-width:800px;margin:10px 20px 0}.cta-row{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.works{padding:48px 20px}.wrap-col{max-width:1200px;margin:0 auto}.works h2{font-size:clamp(22px,2.5vw,32px);margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.grid img{width:100%;height:240px;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.08);transition:transform .35s,box-shadow .35s}.grid img:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.contact{padding:48px 20px;background:#121212}.contact h2{margin:0 0 10px}.map{margin-top:16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden}iframe{width:100%;height:320px;border:0}
.foot{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;text-align:center;color:#9aa0a6}
@media(min-width:920px){.hero{height:78vh}.grid img{height:280px}}


.lang{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 12px;cursor:pointer;margin-left:6px}
.lang:hover{background:rgba(255,255,255,.08)}

.hero-caption-box{
  background: rgba(0,0,0,.42);            
  backdrop-filter: blur(2px) saturate(120%); 
  padding: 12px 16px;
  border-radius: 12px;
  display: inline-block;
  max-width: min(90vw, 800px);
}
.hero-caption-box h1{ margin: 0; }
.hero-caption-box p{ margin: 8px 0 0; }

/* иконки в кнопках */
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* базовый размер и цвет иконок наследуем от кнопки */
.icon-btn .icon { display: inline-block; }

@media (max-width: 768px) {
  .actions { gap: 8px; }
  .icon-btn .label { display: none; }      /* ← только иконки раньше */
  .icon-btn { padding: 10px 12px; }
  .lang { padding: 10px 12px; min-width: 44px; }
}

/* чуть ужимаем сам хедер на мобайле, чтобы не прыгал */
@media (max-width: 520px) {
  .top .wrap { padding-left: 12px; padding-right: 12px; }
}