:root{
  --bg:#f6f7f9; --card:#ffffff; --muted:#5b6575; --text:#0f172a; --line:#e5e7eb;
  --brand:#0ea5e9; --brand-2:#0891b2; --radius:16px; --shadow:0 6px 18px rgba(2,6,23,.06);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text); background:
    radial-gradient(1200px 800px at 90% -10%, rgba(14,165,233,.06), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(8,145,178,.05), transparent 50%),
    var(--bg);
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
.container{width:min(1100px,92%); margin-inline:auto}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(10px); background:rgba(255,255,255,.85); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; gap:12px; align-items:center}
.avatar{width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--line); display:grid; place-items:center; box-shadow:var(--shadow)}
.avatar svg{width:24px; height:24px; stroke:var(--brand); fill:none}
.brand .title{font-weight:700; letter-spacing:.2px}
.brand .subtitle{font-size:12px; color:var(--muted)}
.nav-contacts{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btn{
  --p:14px; --fz:14px;
  display:inline-flex; align-items:center; gap:10px; padding:10px var(--p);
  border-radius:999px; font-weight:600; font-size:var(--fz); border:1px solid var(--line);
  background:#fff; transition:.2s ease; box-shadow:0 1px 0 rgba(2,6,23,.02)
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(2,6,23,.08)}
.btn.primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn.whatsapp{background:#25D366; color:#072b16; border-color:#25D366}

/* Hero */
.hero{padding:40px 0 24px}
.hero-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.hero-wrap{display:grid; grid-template-columns:180px 1fr; gap:16px; align-items:center}
.hero h1{margin:0; font-size:clamp(24px, 4.2vw, 38px)}
.meta{display:flex; gap:18px; flex-wrap:wrap; margin:8px 0 0}
.meta-item{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:14px}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

/* Hero — большой аватар: прямоугольный 16:9, ширина 180px */
.big-avatar{
  width:180px;
  aspect-ratio:16 / 9;
  height:auto;
  display:block;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.big-avatar img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
  border-radius:inherit;
}

/* Sections */
.section{padding:28px 0 44px}
.section h2{font-size:clamp(20px, 3.8vw, 28px); margin:0 0 16px}

/* Services */
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; position:relative; overflow:hidden; box-shadow:var(--shadow)}
.card:hover{border-color:#cfd6e1}
.card-link{display:block; color:inherit}
figure.media{margin:0; display:block}
.card .media{
  width:100%; height:142px; position:relative; overflow:hidden; border-radius:12px;
  line-height:0; background:#eef2f7; border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:12px
}
.card .media img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center; border-radius:inherit
}
.card h3{margin:4px 0 8px}
.card p{margin:0; color:var(--muted)}

/* Works — горизонтальная прокрутка с крупным фото */
.works h2{margin-bottom:12px}
.works .carousel{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0; gap:6px; border:none; background:transparent; box-shadow:none
}
.works .carousel::-webkit-scrollbar{height:4px}
.works .carousel::-webkit-scrollbar-thumb{background:#cbd5e1; border-radius:3px}
.work-card{
  flex:0 0 auto; scroll-snap-align:start; width:360px;
  border:none; border-radius:12px; overflow:hidden; background:#fff
}
.work-media{width:360px; aspect-ratio:16/9; margin:0; background:#000}
.work-media img{width:360px; height:100%; display:block; object-fit:cover; object-position:center; cursor:zoom-in}
.work-footer{
  width:360px; padding:6px 2px; font-size:12px; line-height:1.25;
  color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis
}

/* Footer */
footer{border-top:1px solid var(--line); padding:18px 0; color:var(--muted); background:#fff}

/* Sticky mobile bar (можно скрыть при необходимости) */
.sticky-cta{position:fixed; left:0; right:0; bottom:14px; display:none; justify-content:center; z-index:60}
.sticky-cta .wrap{
  display:flex; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px; backdrop-filter:saturate(160%) blur(8px); box-shadow:var(--shadow)
}

/* Lightbox */
.lightbox{position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center}
.lightbox[hidden]{display:none}
.lb-wrap{position:relative; width:min(96vw, 1200px); height:min(86vh, 900px); display:flex; align-items:center; justify-content:center}
.lb-img{max-width:96%; max-height:86%; object-fit:contain; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.lb-caption{position:absolute; left:0; right:0; bottom:12px; text-align:center; color:#e5e7eb; font-size:14px; line-height:1.4; padding:6px 12px}
.lb-close, .lb-prev, .lb-next{
  position:absolute; display:grid; place-items:center; width:42px; height:42px; border-radius:999px;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px);
  cursor:pointer; user-select:none
}
.lb-close{top:12px; right:12px}
.lb-prev{left:12px; top:50%; transform:translateY(-50%)}
.lb-next{right:12px; top:50%; transform:translateY(-50%)}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{background:rgba(255,255,255,.2)}
.lb-idx{position:absolute; top:12px; left:12px; color:#e5e7eb; font-size:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); padding:4px 8px; border-radius:999px}

/* Responsive */
@media (max-width:820px){
  .hero-wrap{grid-template-columns:1fr}
  .big-avatar{width:100%; max-width:560px; margin:0 auto}
  .nav-contacts{display:none}
  .sticky-cta{display:flex} /* если нужно скрыть: поставьте display:none */
}
@media (prefers-reduced-motion:reduce){
  .btn, .card, .big-avatar{transition:none}
}


/* Map block */
.map-card{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.map-info{display:flex; flex-direction:column; gap:10px}
.map-embed{border-radius:12px; overflow:hidden}
.map-embed iframe{width:100%; height:360px; display:block; border:0}

@media (max-width:820px){
  .map-card{grid-template-columns:1fr}
  .map-embed iframe{height:300px}
}