/* ТехноЛЭНД — фирменный стиль сайта.
   Основа — светлая типографская сетка из фирменных материалов компании,
   цвета взяты из знака: синий квадрат и голубая шестерня. */
@import url('/fonts/fonts.css');

:root {
  --sin: #3F47CC;            /* фирменный синий */
  --sin-tjomn: #2F35A8;
  --gol: #08A1E4;            /* фирменный голубой */
  --fon: #F3F4F7;
  --poverhnost: #FFFFFF;
  --tekst: #16181D;
  --priglush: #5C6270;
  --linija: rgba(22, 24, 29, .14);
  --linija-slab: rgba(22, 24, 29, .08);
  --zagolovok: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --osnovnoj: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --shag: 24px;
  --max: 1200px;
  --polja: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fon); color: var(--tekst);
  font: 400 16px/1.65 var(--osnovnoj);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sin); }

.obolochka { max-width: var(--max); margin: 0 auto; padding: 0 var(--polja); }

/* ─── Шапка ─── */
.shapka {
  position: sticky; top: 0; z-index: 30; background: rgba(243, 244, 247, .94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--linija-slab);
}
.shapka-vnutri { display: flex; align-items: center; gap: 18px; padding: 12px var(--polja); max-width: var(--max); margin: 0 auto; }
.znak { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tekst); margin-right: auto; }
.znak img { height: 34px; width: auto; }
.znak b { font: 700 21px/1 var(--zagolovok); letter-spacing: .01em; }
.znak b i { font-style: italic; font-weight: 600; color: var(--sin); }
.menju { display: flex; gap: 22px; align-items: center; }
.menju a { color: var(--priglush); text-decoration: none; font-size: 15px; font-weight: 500; }
.menju a:hover, .menju a[aria-current="page"] { color: var(--tekst); }
.tel-knopka {
  background: var(--sin); color: #fff !important; text-decoration: none; font-weight: 600;
  padding: 9px 16px; border-radius: 4px; font-size: 15px; white-space: nowrap;
}
.tel-knopka:hover { background: var(--sin-tjomn); }
.burger { display: none; border: 1px solid var(--linija); background: none; border-radius: 4px; width: 42px; height: 38px; cursor: pointer; }
.burger span { display: block; width: 18px; height: 2px; background: var(--tekst); margin: 3px auto; }

/* ─── Общие блоки ─── */
section { padding: calc(var(--shag) * 2.6) 0; }
.nadzagolovok {
  font: 600 12px/1 var(--zagolovok); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sin); margin-bottom: 14px;
}
h1, h2, h3 { font-family: var(--zagolovok); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; margin: 0 0 12px; }
h1 { font-size: clamp(34px, 6vw, 62px); line-height: 1.03; }
h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.08; }
h3 { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.15; }
p { margin: 0 0 var(--shag); max-width: 62ch; color: var(--priglush); }
p.krupno { font-size: 18px; color: var(--tekst); }

.knopki { display: flex; flex-wrap: wrap; gap: 12px; }
.knopka {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600;
  padding: 13px 22px; border-radius: 4px; font-size: 15px; border: 1px solid transparent; cursor: pointer;
}
.knopka-osn { background: var(--sin); color: #fff; }
.knopka-osn:hover { background: var(--sin-tjomn); }
.knopka-vtor { background: var(--poverhnost); color: var(--tekst); border-color: var(--linija); }
.knopka-vtor:hover { border-color: var(--sin); color: var(--sin); }

/* ─── Первый экран ─── */
.pervyj { padding-top: calc(var(--shag) * 2); }
.pervyj-setka { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.pervyj-foto { position: relative; }
.pervyj-foto img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 6px; }
.plashka {
  position: absolute; left: 0; bottom: -18px; background: var(--sin); color: #fff;
  padding: 14px 20px; border-radius: 4px; max-width: 78%;
}
.plashka b { font: 700 22px/1 var(--zagolovok); display: block; }
.plashka span { font-size: 13px; opacity: .9; }

/* ─── Паспорт компании ─── */
.pasport { background: var(--poverhnost); border: 1px solid var(--linija-slab); border-radius: 6px; overflow: hidden; }
.pasport-shapka { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linija-slab); }
.pasport-shapka b { font: 700 14px/1.2 var(--zagolovok); text-transform: uppercase; letter-spacing: .08em; }
.pasport-shapka span { font: 600 12px/1.2 var(--zagolovok); letter-spacing: .12em; text-transform: uppercase; color: var(--priglush); }
table.pasport-tabl { width: 100%; border-collapse: collapse; font-size: 15px; }
table.pasport-tabl th { text-align: left; font: 600 11px/1 var(--zagolovok); letter-spacing: .14em; text-transform: uppercase; color: var(--priglush); padding: 12px 20px; border-bottom: 1px solid var(--linija-slab); }
table.pasport-tabl td { padding: 13px 20px; border-bottom: 1px solid var(--linija-slab); color: var(--priglush); vertical-align: top; }
table.pasport-tabl td:nth-child(1) { color: var(--sin); font-variant-numeric: tabular-nums; width: 56px; }
table.pasport-tabl td:nth-child(3) { color: var(--tekst); font-weight: 600; }
table.pasport-tabl tr:last-child td { border-bottom: 0; }

/* ─── Карточки услуг ─── */
.setka { display: grid; gap: 22px; }
.setka-3 { grid-template-columns: repeat(3, 1fr); }
.setka-2 { grid-template-columns: repeat(2, 1fr); }
.kartochka {
  background: var(--poverhnost); border: 1px solid var(--linija-slab); border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column;
}
.kartochka img { aspect-ratio: 3/2; height: auto; object-fit: cover; width: 100%; }
.kartochka-telo { padding: 20px; }
.kartochka h3 { margin-bottom: 8px; }
.kartochka p { margin: 0; font-size: 15px; }
.kartochka ul { margin: 12px 0 0; padding-left: 18px; color: var(--priglush); font-size: 15px; }
.kartochka ul li { margin-bottom: 4px; }

/* ─── Шаги работы ─── */
.shagi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.shag-karta { background: var(--poverhnost); border: 1px solid var(--linija-slab); border-radius: 6px; padding: 20px; }
.shag-karta b { display: block; font: 700 30px/1 var(--zagolovok); color: var(--sin); margin-bottom: 10px; }
.shag-karta h3 { font-size: 17px; }
.shag-karta p { font-size: 14px; margin: 0; }

/* ─── Объекты ─── */
.objekty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.objekt { border-radius: 6px; overflow: hidden; position: relative; background: var(--poverhnost); border: 1px solid var(--linija-slab); }
.objekt img { aspect-ratio: 3/2; height: auto; width: 100%; object-fit: cover; }
.objekt span { display: block; padding: 14px 18px; font-size: 15px; color: var(--priglush); }
.objekt span b { display: block; color: var(--tekst); font: 700 16px/1.2 var(--zagolovok); text-transform: uppercase; margin-bottom: 4px; }

/* ─── Форма ─── */
.zajavka { background: var(--poverhnost); border: 1px solid var(--linija-slab); border-radius: 6px; padding: clamp(22px, 3vw, 34px); }
.polja { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pole { display: flex; flex-direction: column; gap: 6px; }
.pole label { font-size: 13px; color: var(--priglush); font-weight: 500; }
.pole input, .pole textarea, .pole select {
  font: 400 16px/1.4 var(--osnovnoj); padding: 12px 14px; border: 1px solid var(--linija);
  border-radius: 4px; background: var(--fon); color: var(--tekst);
}
.pole input:focus, .pole textarea:focus, .pole select:focus { outline: none; border-color: var(--sin); background: #fff; }
.pole-shirokoe { grid-column: 1 / -1; }
.soglasie { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--priglush); margin: 16px 0; }
.soglasie input { margin-top: 3px; }
.medovaja { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ─── Реквизиты ─── */
.rekvizity { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; background: var(--poverhnost); border: 1px solid var(--linija-slab); border-radius: 6px; padding: 8px 24px; }
.rekvizit { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linija-slab); font-size: 15px; }
.rekvizit:nth-last-child(-n+2) { border-bottom: 0; }
.rekvizit span { color: var(--priglush); }
.rekvizit b { text-align: right; font-weight: 600; }

/* ─── Подвал ─── */
.podval { background: #14161B; color: #C9CDD6; padding: calc(var(--shag) * 2) 0 var(--shag); margin-top: calc(var(--shag) * 2); }
.podval a { color: #C9CDD6; text-decoration: none; }
.podval a:hover { color: #fff; }
.podval-setka { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; }
.podval h4 { font: 600 12px/1 var(--zagolovok); letter-spacing: .16em; text-transform: uppercase; color: #7C8496; margin: 0 0 14px; }
.podval ul { list-style: none; margin: 0; padding: 0; }
.podval li { margin-bottom: 8px; font-size: 15px; }
.podval .znak b { color: #fff; }
.podval p { color: #8B93A3; font-size: 14px; }
.kopirajt { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--shag); padding-top: 18px; font-size: 13px; color: #7C8496; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ─── Карта ─── */
.karta { border: 1px solid var(--linija-slab); border-radius: 6px; overflow: hidden; height: 380px; background: var(--poverhnost); }
.karta iframe { width: 100%; height: 100%; border: 0; }

/* ─── Телефоны и планшеты ─── */
@media (max-width: 980px) {
  .pervyj-setka, .setka-3, .setka-2, .objekty, .podval-setka, .rekvizity { grid-template-columns: 1fr; }
  .shagi { grid-template-columns: repeat(2, 1fr); }
  .menju { display: none; }
  .menju.otkryto {
    display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--poverhnost); border-bottom: 1px solid var(--linija);
    padding: 8px var(--polja) 16px;
  }
  .menju.otkryto a { padding: 12px 0; border-bottom: 1px solid var(--linija-slab); }
  .burger { display: block; }
  .shapka-vnutri { position: relative; }
  .pervyj-foto { order: -1; }
  .plashka { position: static; max-width: none; margin-top: 12px; }
  .polja { grid-template-columns: 1fr; }
  section { padding: calc(var(--shag) * 1.8) 0; }
}
@media (max-width: 560px) {
  .shagi { grid-template-columns: 1fr; }
  /* на узком экране номер прячем — остаётся трубка, иначе он налезает на знак */
  .tel-tekst { display: none; }
  .tel-knopka { padding: 10px 12px; }
  .znak b { font-size: 18px; }
  .rekvizit { flex-direction: column; gap: 2px; }
  .rekvizit b { text-align: left; }
}