:root{
  --text:#e3e3e3; --muted:#b8c3d4; --strong:#fdfdfd;
  --panel:#232427; --panel2:#1e1f22; --border:rgba(255,255,255,.12);
  --brand:#FFD700; --brand-2:#ffea77;
}

/* === фон и типографика === */
body{
  color:var(--text);
  background-color:#1e1f22;
  background-image:
    radial-gradient(circle, rgba(0,0,0,.40) 24%, rgba(0,0,0,0) 25%),
    radial-gradient(circle, rgba(255,255,255,.06) 28%, rgba(255,255,255,0) 29%),
    radial-gradient(1200px 700px at 20% 25%, rgba(255,255,255,.05), rgba(255,255,255,0) 60%),
    radial-gradient(1200px 800px at 80% 75%, rgba(255,255,255,.035), rgba(255,255,255,0) 65%);
  background-size:18px 18px, 18px 18px, auto, auto;
  background-position:0 0, 9px 9px, 0 0, 0 0;
  background-blend-mode:normal, overlay, normal, normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* === HERO === */
.contacts-hero{ text-align:center; padding:44px 16px 8px }
.contacts-hero h1{ margin:0 0 6px; color:var(--strong); font-size:clamp(26px,4.6vw,40px) }
.contacts-hero .lead{ margin:0 auto; color:var(--muted); max-width:900px }

/* =========================================================
   ЛЕЙАУТ КОНТАКТОВ (две колонки)
   ========================================================= */
.contacts-wrap{
  max-width:1100px; margin:16px auto 28px; padding:0 16px;
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}

.contacts-col{
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.contacts-col .col-title{
  margin:0 0 10px; font-size:18px; color:var(--strong); font-weight:800;
  border-left:4px solid var(--brand); padding-left:10px;
}

/* --- строки компании (с иконкой) --- */
.contacts-col.company .row{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; border:1px solid var(--border);
  border-radius:12px; background:linear-gradient(180deg, #262729, #1f2023);
}
.contacts-col.company .row + .row{ margin-top:10px }
.contacts-col.company .ico{
  font-size:22px; line-height:1; width:28px; text-align:center;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.contacts-col.company .txt .label{
  color:var(--muted); font-size:13px; margin-bottom:2px;
}
.contacts-col.company .txt .value{
  color:var(--strong); font-size:15px;
}
.contacts-col.company a{
  color:var(--brand); font-weight:600; text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.25);
}
.contacts-col.company a:hover{ text-decoration:underline; border-bottom-color:transparent }

/* --- сотрудники (карточки-ссылки) --- */
.contacts-col.team{
  display:flex; flex-direction:column; gap:10px;
}
.person{
  display:flex; gap:12px; align-items:center;
  padding:12px; border:1px solid var(--border);
  border-radius:12px; background:linear-gradient(180deg, #262729, #1f2023);
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.person:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.3);
  border-color:rgba(255,215,0,.35);
}
.avatar{
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#111; font-weight:900;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.person-txt .name{ color:var(--strong); font-weight:800; margin:0 }
.person-txt .role{ color:var(--muted); font-size:13px; margin-top:1px }
.person-txt .phone{ color:var(--brand); font-weight:700; margin-top:2px }

/* === MAP === */
.contacts-map{
  max-width:1100px; margin:0 auto 28px; padding:0 16px;
  position:relative; /* чтобы кнопка позиционировалась внутри */
}
.contacts-map iframe{
  width:100%; height:360px; display:block;
  border:1px solid var(--border); border-radius:16px;
  background:#111; box-shadow:0 10px 22px rgba(0,0,0,.28);
}

/* === кнопка поверх карты === */
.map-action{
  position:absolute;
  right:28px; bottom:20px;
}
.btn-map{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:14px;
  font-weight:600;
  text-decoration:none;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#111;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  transition:.2s;
}
.btn-map:hover{ filter:brightness(1.05) }
.btn-map svg{ width:18px; height:18px; fill:#111 }

/* === ФОРМА (если понадобится) === */
.contacts-form{ max-width:900px; margin:0 auto 36px; padding:0 16px }
.contacts-form h2{ text-align:center; color:var(--strong); margin:0 0 12px }
.contacts-form form{
  background:linear-gradient(180deg,#262729,#1f2023);
  border:1px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:0 12px 24px rgba(0,0,0,.25)
}
.contacts-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px }
.field{ display:flex; flex-direction:column; gap:6px }
.field span{ color:var(--muted); font-size:14px }
.field input,.field textarea{
  background:linear-gradient(180deg,#262729,#1f2023);
  color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px; font-size:14px
}
.field textarea{ resize:vertical }
.contacts-form .btn{
  display:inline-block; margin-top:6px; padding:12px 20px; border-radius:14px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#111; border:none; cursor:pointer; font-weight:700
}
.contacts-form .btn:hover{ filter:brightness(1.02) }
.form-note{ color:var(--muted); font-size:13px; margin-top:8px }

/* === адаптив === */
@media (max-width: 980px){
  .contacts-wrap{ grid-template-columns:1fr }
}
@media (max-width: 560px){
  .contacts-map iframe{ height:300px }
  .map-action{ right:12px; bottom:12px }
  .btn-map{ padding:8px 14px; font-size:14px }
  .btn-map svg{ width:16px; height:16px }
}