/* Eurotour v2 — раскладка главной Визатеки (левая колонка + контент) в айдентике Eurotour.
   Токены — из брендбука Eurotour-Brandkit-v1 (tokens/eurotour.css). Шрифт Manrope локально (OFL). */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-cyr-lat.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --et-cobalt: #3158E8;
  --et-cobalt-hover: #2446C9;
  --et-cobalt-active: #1E3AA8;
  --et-ivory: #F7F6F2;
  --et-white: #FFFFFF;
  --et-ice: #DFE7FF;
  --et-graphite: #20242C;
  --et-muted: #626977;
  --et-border: #D5D8E0;
  --et-control-border: #7B8494;
  --et-focus: #1C2C63;
  --et-error: #B42318;
  --et-error-bg: #FEF3F2;
  --et-success: #146C43;
  --et-success-bg: #E9F6EE;
  --et-disabled-bg: #E7E9EE;
  --et-disabled-text: #757C88;
  --et-font: "Manrope", Arial, sans-serif;
  --et-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --et-motion-feedback: 180ms;
  --et-motion-ui: 280ms;
  --r-s: 8px;
  --r-c: 12px;
  --r-card: 20px;
  --ten: 0 1px 2px rgba(32, 36, 44, .05), 0 8px 24px rgba(32, 36, 44, .07);
  --ten-hover: 0 2px 6px rgba(32, 36, 44, .06), 0 18px 40px rgba(32, 36, 44, .14);
  --fs-s: 13px;
  --fs-m: 16px;
  --fs-l: 20px;
  --fs-h-m: 24px;
  --fs-xl: 30px;
  --fs-xxl: 46px;
  --fs-n: 60px;
  --hover-t: 180ms;
  --hover-ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--et-ivory); color: var(--et-graphite); font: 400 16px/1.6 var(--et-font); }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--et-cobalt); text-underline-offset: 3px; }
a:hover { color: var(--et-cobalt-hover); }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
.ico { width: 24px; height: 24px; flex: none; }
.skip { position: absolute; left: 16px; top: -120px; z-index: 100; padding: 12px 16px; background: var(--et-white); color: var(--et-cobalt); font-weight: 700; border-radius: var(--r-c); }
.skip:focus { top: 16px; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--et-focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--et-white); }
main:focus { outline: none; }

.wrap { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 16px; }

/* ---------- кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: var(--r-c); font: 700 16px/1.3 var(--et-font); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--et-motion-feedback) var(--et-ease), border-color var(--et-motion-feedback) var(--et-ease), color var(--et-motion-feedback) var(--et-ease); }
.btn .ico { width: 20px; height: 20px; }
.btn-osn { background: var(--et-cobalt); color: var(--et-white); }
.btn-osn:hover { background: var(--et-cobalt-hover); }
.btn-osn:active { background: var(--et-cobalt-active); }
.btn-osn:disabled { background: var(--et-disabled-bg); color: var(--et-disabled-text); cursor: progress; }
.btn-kontur { background: transparent; color: var(--et-cobalt); border-color: var(--et-cobalt); }
.btn-kontur:hover { background: var(--et-ice); }
.btn-belaya { background: var(--et-white); color: var(--et-cobalt); }
.btn-belaya:hover { background: var(--et-ice); }
.btn-msg { background: var(--et-white); color: var(--et-cobalt); border-color: var(--et-cobalt); }
.btn-msg:hover { background: var(--et-ice); }
.btn-msg-svetl { border-color: var(--et-white); }
.btn-msg:disabled, .msg:disabled { background: var(--et-disabled-bg); border-color: var(--et-disabled-bg); color: var(--et-disabled-text); cursor: not-allowed; }
.msg { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--et-cobalt); border-radius: 50%; background: var(--et-white); color: var(--et-cobalt); cursor: pointer; }
.msg:hover:not(:disabled) { background: var(--et-ice); }
.msg-note { margin: 10px 0 0; font-size: var(--fs-s); line-height: 1.45; color: var(--et-muted); }
.msg-note-svetl { color: var(--et-white); }

/* ---------- шапка */
.shapka { position: relative; z-index: 20; background: var(--et-white); box-shadow: 0 2px 12px rgba(32, 36, 44, .08); }
.shapka-in { display: flex; align-items: center; gap: 24px; min-height: 81px; }
.logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.logo img { width: 191px; }
.verh-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin-left: auto; }
.verh-menu { align-self: stretch; gap: 0; }
.verh-menu a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 81px; padding: 10px 18px; color: var(--et-graphite); font-weight: 600; font-size: var(--fs-m); line-height: 1.2; text-decoration: none; transition: background-color var(--et-motion-feedback) var(--et-ease), color var(--et-motion-feedback) var(--et-ease); }
.verh-menu a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; background: var(--et-cobalt); border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform var(--et-motion-ui) var(--et-ease); }
.verh-menu .ico { width: 22px; height: 22px; color: var(--et-cobalt); }
.verh-menu a:hover { background: var(--et-ice); }
.burger { display: none; }
.shapka-msg { display: flex; gap: 8px; }
.krug { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--et-cobalt); color: var(--et-white); }

/* ---------- сетка: левая колонка + контент (1308 = 246 + 15 + 1047) */
.layout { display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: 15px; align-items: start; padding-top: 13px; padding-bottom: 30px; }
.content { min-width: 0; }

/* ---------- левая колонка */
.bokovaya { position: sticky; top: 15px; max-height: calc(100vh - 30px); overflow-y: auto; overscroll-behavior: contain; padding: 20px 0 18px; background: var(--et-white); border-radius: var(--r-card); box-shadow: var(--ten); scrollbar-width: thin; }
.bok-verh { display: none; }
.region, .bok-svyaz { padding: 0 20px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--et-border); }
.bok-svyaz { padding-top: 10px; }
.bok-podpis { margin: 0 0 8px; color: var(--et-muted); font-size: var(--fs-s); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.region-knopki { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--et-ivory); border: 1px solid var(--et-border); border-radius: var(--r-c); }
.region-knopki a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 9px; color: var(--et-graphite); font-weight: 700; text-decoration: none; transition: background-color var(--et-motion-feedback) var(--et-ease); }
.region-knopki a:hover { background: var(--et-ice); }
.region-knopki a.akt { background: var(--et-cobalt); color: var(--et-white); }
.bok-msg { display: flex; gap: 8px; }
.bok-note { font-size: var(--fs-s); }
.bok-forma { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; color: var(--et-cobalt); font-weight: 700; text-decoration: none; }
.bok-forma:hover { text-decoration: underline; }
.bok-forma .ico { width: 20px; height: 20px; }
.usl-menu ul, .bok-razdely ul { list-style: none; margin: 0; padding: 0; }
.usl-menu li + li { border-top: 1px solid #ECEEF2; }
.usl-menu a { display: flex; align-items: center; gap: 14px; min-height: 59px; padding: 8px 18px 8px 17px; border-left: 3px solid transparent; color: var(--et-graphite); font-weight: 600; font-size: var(--fs-m); line-height: 1.3; text-decoration: none; transition: background-color var(--et-motion-feedback) var(--et-ease), color var(--et-motion-feedback) var(--et-ease); }
.usl-menu .ico { width: 26px; height: 26px; color: var(--et-cobalt); }
.usl-menu a:hover { background: var(--et-ice); }
.usl-menu a.akt { border-left-color: var(--et-cobalt); background: #F0F4FF; }
.bok-razdely { display: none; }
.bok-soc { display: flex; gap: 8px; padding: 16px 20px 0; }
.bok-copy { margin: 14px 20px 0; color: var(--et-muted); font-size: var(--fs-s); }

/* ---------- баннер: кобальтовая плашка с текстом + фото рядом (текст на фото брендбук запрещает) */
/* баннер как у образца: фото на всю ширину и высоту фоном, кобальтовая плашка с текстом поверх фото слева */
.banner { position: relative; display: flex; align-items: center; min-height: 440px; margin-bottom: 44px; padding: 28px; overflow: hidden; background: var(--et-ice); border-radius: var(--r-card); }
.banner-foto { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--et-ice); }
.banner-foto img { position: absolute; left: 0; top: 0; width: 150%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 35%; }
.banner-foto figcaption { position: absolute; right: 16px; bottom: 16px; z-index: 2; padding: 6px 10px; background: var(--et-white); color: var(--et-graphite); border-radius: var(--r-s); font-size: var(--fs-s); font-weight: 600; line-height: 1.3; }
.banner-tekst { position: relative; z-index: 1; container-type: inline-size; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: min(600px, 62%); padding: 40px 40px 104px; color: var(--et-white); background: var(--et-cobalt); border-radius: var(--r-card); box-shadow: var(--ten-hover); }
.banner-tekst > :not(.banner-volna) { position: relative; z-index: 1; }
.banner h1 { margin: 0 0 6px; font-size: clamp(20px, 8.8cqi, var(--fs-xxl)); line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: normal; hyphens: manual; }
.b-str1 { display: block; margin-bottom: 14px; font-size: var(--fs-l); font-weight: 600; line-height: 1.3; letter-spacing: .06em; }
.b-str1:only-child { margin-bottom: 0; font-size: inherit; font-weight: 800; line-height: inherit; letter-spacing: inherit; }
.b-str2 { display: block; font-weight: 800; }
.banner-pod { margin: 0; max-width: 34em; font-size: var(--fs-m); line-height: 1.55; }
.banner-pod + .banner-pod { margin-top: -6px; font-weight: 700; }
.banner .btn { margin-top: 8px; }
.banner-volna { position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; }
.banner-volna img { width: max(100%, 480px); max-width: none; transform: translateY(46%); }
.banner-bez-foto { min-height: 340px; padding: 0; background: var(--et-cobalt); }
.banner-bez-foto .banner-tekst { width: 100%; padding: 46px 44px 150px; border-radius: 0; box-shadow: none; }
.banner-bez-foto .banner-volna img { width: 100%; transform: translateY(52%); }

/* ---------- счётчики (скрыты до цифр Артёма) */
.schetchiki { margin-bottom: 30px; padding: 36px 30px; background: var(--et-white); border-radius: var(--r-card); box-shadow: var(--ten); }
.sch-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; text-align: center; }
.sch-krug { display: flex; align-items: center; justify-content: center; width: 130px; height: 130px; margin: 0 auto 12px; border: 3px solid var(--et-cobalt); border-radius: 50%; color: var(--et-cobalt); font-size: var(--fs-xl); font-weight: 800; }
.sch-podpis { font-weight: 600; }

/* ---------- три карточки услуг: цветная шапка с иконкой и загнутым уголком */
.kartochki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-bottom: 30px; }
.kart { display: flex; flex-direction: column; overflow: hidden; background: var(--et-white); border-radius: var(--r-c); box-shadow: var(--ten); border: 1px solid transparent; }
.kart:hover { border-color: var(--et-cobalt); }
.kart-shapka { position: relative; display: flex; align-items: center; justify-content: center; min-height: 122px; padding: 20px; background: var(--et-cobalt); color: var(--et-white); }
/* шапки трёх карточек услуг — один кобальт, как один цвет у образца (критик Опус М1) */
.kart-shapka::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 34px 34px 0; border-color: transparent var(--et-ivory) var(--et-ice) transparent; }
.kart-ico { width: 56px; height: 56px; }
.kart-telo h3 { margin: 0 0 12px; font-size: var(--fs-l); font-weight: 800; line-height: 1.25; }
.kart-telo { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 26px 26px 30px; text-align: center; }
.kart-telo p { margin: 0 0 24px; color: var(--et-muted); }
.kart-telo .btn { margin-top: auto; }

/* ---------- белые панели и заголовки секций с короткой линией */
.panel { margin-bottom: 30px; padding: 56px 50px 50px; background: var(--et-white); border-radius: var(--r-card); box-shadow: var(--ten); }
.zag { position: relative; margin: 0 0 36px; padding-bottom: 16px; font-size: var(--fs-xl); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }
.zag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; background: var(--et-cobalt); }
.zag-centr { text-align: center; }
.zag-centr::after { left: 50%; transform: translateX(-50%); }
.zag-svetl { color: var(--et-white); }
.zag-svetl::after { background: var(--et-ice); }
.pod-zag { margin: 32px 0 14px; font-size: var(--fs-l); font-weight: 800; line-height: 1.3; }

/* ---------- преимущества 2×3 */
.preim-setka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.preim { padding: 26px 0 0; background: transparent; box-shadow: none; }
.pr { padding: 40px 30px 36px; background: var(--et-white); border-radius: var(--r-card); box-shadow: var(--ten); text-align: center; border: 1px solid transparent; }
.pr:hover { border-color: var(--et-cobalt); }
.pr-ico { display: block; width: 68px; height: 68px; margin: 0 auto 20px; padding: 17px; background: var(--et-ice); border-radius: 50%; color: var(--et-cobalt); }
.pr h3 { margin: 0 0 14px; font-size: var(--fs-l); font-weight: 800; line-height: 1.3; }
.pr h3::after { content: ""; display: block; width: 40px; height: 2px; margin: 14px auto 0; background: var(--et-cobalt); }
.pr p { margin: 0; color: var(--et-muted); }

/* ---------- плашка «N клиентов» (скрыта до цифры) */
.klienty { margin-bottom: 30px; padding: 30px; background: var(--et-cobalt); border-radius: var(--r-card); color: var(--et-white); font-size: var(--fs-l); font-weight: 700; text-align: center; }
.klienty p { margin: 0; }
.kl-chislo { font-size: var(--fs-xl); font-weight: 800; }

/* ---------- «Удобнее, чтобы написали мы?» — форма контакта */
.svyaz { margin: 48px 0; padding: 56px 50px 48px; background-color: var(--et-cobalt); background-image: url("../motifs/volna-linii.svg"); background-repeat: no-repeat; background-position: center calc(100% + 40px); background-size: 100% auto; border-radius: var(--r-card); color: var(--et-white); text-align: center; }
.svyaz-tekst { max-width: 760px; margin: 0 auto; }
.svyaz-tekst p { margin: 0 0 8px; font-size: var(--fs-m); }
.svyaz-obeshch { font-weight: 700; }
.svyaz-niz { margin-top: 28px; }
.svyaz-ili { margin: 0 0 12px; font-weight: 700; }
.svyaz-msg { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.forma { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; column-gap: 16px; row-gap: 16px; align-items: start; max-width: 880px; margin: 28px auto 0; padding: 28px 28px 24px; background: var(--et-white); border-radius: var(--r-card); color: var(--et-graphite); text-align: left; }
.forma > .pole-galka, .forma > .forma-status { grid-column: 1 / -1; }
.forma-knopka { grid-column: 3; grid-row: 1; margin-top: 30px; }
.pole { display: grid; gap: 6px; }
.pole label { font-size: var(--fs-m); font-weight: 700; }
.neob { color: var(--et-muted); font-weight: 500; }
.pole input[type="text"], .vybor select { width: 100%; min-height: 52px; padding: 12px 16px; background: var(--et-white); border: 1px solid var(--et-control-border); border-radius: var(--r-c); color: var(--et-graphite); font: 400 16px/1.5 var(--et-font); }
.pole input[type="text"]:hover, .vybor select:hover { border-color: var(--et-graphite); }
.vybor { position: relative; }
.vybor select { appearance: none; padding-right: 46px; cursor: pointer; }
.vybor-ico { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--et-muted); pointer-events: none; }
.pole [aria-invalid="true"] { border-color: var(--et-error); background: var(--et-error-bg); }
.osh { margin: 0; color: var(--et-error); font-size: var(--fs-s); font-weight: 600; }
.pole-galka { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.pole-galka input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--et-cobalt); cursor: pointer; }
.pole-galka label { font-size: var(--fs-m); font-weight: 500; line-height: 1.45; cursor: pointer; }
.pole-galka .osh { grid-column: 2; }
.pole-galka .galka-politika { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-s); font-weight: 600; color: var(--et-cobalt); text-underline-offset: 3px; }
.lovushka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.forma-status { margin: 0; font-weight: 600; }
.forma-status:empty { display: none; }
.forma-status.ok { padding: 12px 16px; background: var(--et-success-bg); border-radius: var(--r-c); color: var(--et-success); }
.forma-status.oshibka { padding: 12px 16px; background: var(--et-error-bg); border-radius: var(--r-c); color: var(--et-error); }

/* ---------- ленты (блог, публикации, видеоотзывы, отзывы, новости) — скрыты до материалов */
.lenta-spisok { list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; }
.lenta-kart { padding: 24px; border: 1px solid var(--et-border); border-radius: var(--r-card); scroll-snap-align: start; }
.lenta-kart h3 { margin: 0 0 10px; font-size: var(--fs-l); }
.lenta-data { margin: 0 0 8px; color: var(--et-muted); font-size: var(--fs-s); }
.otz-imya { margin: 12px 0 0; font-weight: 700; }

/* ---------- этапы и вопросы */
.shagi-kart { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 28px; row-gap: 32px; }
.shagi-4 { column-gap: 22px; }
.shag-kart { padding: 0; }
.shag-n { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; color: var(--et-cobalt); font-size: var(--fs-n); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.shag-n::after { content: ""; flex: 1; height: 2px; background: var(--et-ice); border-radius: 2px; }
.shag-kart:last-child .shag-n::after { background: transparent; }
.shag-kart p { margin: 0; max-width: 30ch; font-weight: 600; line-height: 1.45; }
.primech { display: flex; align-items: flex-start; gap: 12px; margin: 24px 0 0; padding: 16px 20px; background: var(--et-ice); border-radius: var(--r-c); }
.primech-ico { color: var(--et-cobalt); }
.faq { border-top: 1px solid var(--et-border); }
.vopros { border-bottom: 1px solid var(--et-border); }
.vopros summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 4px; font-size: var(--fs-m); font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer; transition: color var(--et-motion-feedback) var(--et-ease); }
.vopros summary::-webkit-details-marker { display: none; }
.vopros summary:hover { color: var(--et-cobalt); }
.vopros-ico { color: var(--et-cobalt); transition: transform var(--et-motion-ui) var(--et-ease); }
.vopros[open] .vopros-ico { transform: rotate(180deg); }
.otvet p { max-width: 64ch; margin: 0 0 14px; padding: 0 4px; }
.vopros[open] .otvet { animation: otvet-otkryt .2s var(--hover-ease) both; }
@keyframes otvet-otkryt { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- о компании */
.o-nas { padding-left: 48px; }
.o-nas-setka { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.o-nas-tekst p { margin: 0 0 14px; }
.o-nas-tekst .pod-zag { margin-top: 28px; }
.o-nas-foto { margin: 6px 0 0; }
.o-nas-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-card); }
.o-nas-foto figcaption, .modul-foto figcaption { margin-top: 8px; color: var(--et-muted); font-size: var(--fs-s); }
.spisok-tochki { margin: 0 0 14px; padding-left: 22px; }
.spisok-tochki li { margin-bottom: 8px; }
.spisok-tochki li::marker { color: var(--et-cobalt); }
.spisok-nomera { list-style: none; counter-reset: n; display: grid; gap: 12px; margin: 0 0 28px; padding: 0; }
.spisok-nomera li { counter-increment: n; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; }
.spisok-nomera li::before { content: counter(n); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--et-cobalt); border-radius: 50%; color: var(--et-cobalt); font-weight: 800; }
.ssylka-str { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; }
.ssylka-str .ico { width: 20px; height: 20px; }
.druzhit-spisok { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- страницы услуг */
.chipy ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; background: var(--et-white); border: 1px solid var(--et-border); border-radius: 999px; color: var(--et-graphite); font-weight: 700; text-decoration: none; transition: border-color var(--et-motion-feedback) var(--et-ease), color var(--et-motion-feedback) var(--et-ease); }
.chip:hover { border-color: var(--et-cobalt); }
.chip-akt { background: var(--et-cobalt); border-color: var(--et-cobalt); color: var(--et-white); }
.oae-stroka { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 30px; padding: 20px 24px; background: var(--et-white); border-radius: var(--r-card); box-shadow: var(--ten); font-weight: 600; }
.oae-ico { color: var(--et-cobalt); }
.modul .zag { margin-bottom: 28px; }
.modul-podzag { margin: -12px 0 12px; font-size: var(--fs-l); font-weight: 700; }
.modul-vvod { max-width: 64ch; margin: 0 0 24px; font-size: var(--fs-m); }
.modul-kolonki { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; margin-bottom: 8px; }
.modul-kol { padding: 28px; border: 1px solid var(--et-border); border-radius: var(--r-card); }
.modul-kol .pod-zag { margin-top: 0; }
.modul-kol p { margin: 0 0 12px; }
.modul-kol-klient { background: var(--et-ivory); border-color: transparent; }
.spisok-galki { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.spisok-galki li { display: flex; align-items: flex-start; gap: 10px; }
.galka { width: 22px; height: 22px; margin-top: 2px; color: var(--et-cobalt); }
.modul-oplata { display: flex; align-items: center; gap: 10px; margin: 18px 0 0 !important; padding: 12px 16px; background: var(--et-success-bg); border-radius: var(--r-c); color: var(--et-success); font-weight: 700; }
.yakor { position: relative; top: -16px; display: block; }

/* ---------- подвал: четыре полосы, как у образца */
.podval { margin-top: 10px; }
.pod-svyaz { padding: 48px 0; background: var(--et-white); }
.pod-svyaz-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.pod-zag-bol { margin: 0 0 20px; font-size: var(--fs-xl); font-weight: 800; }
.pod-msg { display: flex; flex-wrap: wrap; gap: 12px; }
.pod-sch { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; }
.sch-chislo { color: var(--et-cobalt); font-size: var(--fs-l); font-weight: 800; }
.pod-nav { padding: 44px 0; background: #EFECE4; }
.pod-nav-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pod-nav .pod-zag { margin: 0 0 12px; font-size: var(--fs-m); letter-spacing: .04em; text-transform: uppercase; }
.pod-nav ul { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.pod-nav a { display: inline-flex; align-items: center; min-height: 36px; color: var(--et-graphite); text-decoration: none; }
.pod-nav a:hover { color: var(--et-cobalt); }
.pod-niz { padding: 30px 0; background: var(--et-cobalt); color: var(--et-white); }
.pod-niz-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.pod-logo { display: inline-flex; min-height: 44px; align-items: center; }
.pod-logo img { width: 167px; }
.pod-deviz { margin: 0; font-weight: 600; }
.pod-oplata { display: flex; gap: 12px; margin-left: auto; }
.pod-dok { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; }
.pod-dok a, .pod-yur { color: var(--et-white); }
.pod-yur { flex-basis: 100%; margin: 0; font-size: var(--fs-s); }
.pod-copy { padding: 22px 0 26px; background: var(--et-graphite); color: #E7E9EE; font-size: var(--fs-s); line-height: 1.5; }
.pod-copy p { margin: 0 0 8px; }
.pod-copy p:last-child { margin: 0; }
.pod-copy a { color: var(--et-white); }

/* ---------- плавающая кнопка (только когда в конфиге есть ник или номер) */
.plav { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: flex; flex-direction: column; gap: 10px; }
.plav-knopka { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--et-cobalt); border-radius: 50%; color: var(--et-white); box-shadow: 0 6px 18px rgba(32, 36, 44, .25); }
.plav-knopka .ico { width: 28px; height: 28px; }

.zatemnenie { display: none; }

/* ---------- планшет и телефон: левая колонка уходит в выдвижное меню, как у образца */
/* наведение меняет одно свойство (фон, рамку или цвет), плавно */
a, button, .btn, .msg, .kart, .pr, .chip, .burger, summary, .pole input[type="text"], .vybor select { transition: background-color var(--hover-t) var(--hover-ease), border-color var(--hover-t) var(--hover-ease), color var(--hover-t) var(--hover-ease); }
::selection { background: var(--et-ice); color: var(--et-graphite); }
.o-nas-tekst p { max-width: 64ch; }
#voprosy .zag { margin-bottom: 24px; }
@media (min-width: 1024px) {
  .panel.kak { padding-bottom: 60px; }
  .panel.o-nas { padding: 64px 56px 60px; }
  #voprosy { padding-top: 46px; padding-bottom: 34px; }
}

@media (max-width: 1023.98px) {
  .shapka-in { gap: 12px; min-height: 72px; }
  .burger { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; padding: 0; background: var(--et-white); border: 1px solid var(--et-border); border-radius: 50%; color: var(--et-graphite); cursor: pointer; }
  .burger:hover { border-color: var(--et-cobalt); }
  .verh-menu { display: none; }
  .logo img { width: 150px; }
  .logo .logo-slogan { padding-left: 28px; font-size: 12px; }
  .shapka-msg { margin-left: auto; }
  .layout { display: block; padding-top: 16px; }
  .bokovaya { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(300px, 86vw); max-height: none; padding-top: 12px; border-radius: 0; transform: translateX(-105%); visibility: hidden; transition: transform var(--et-motion-ui) var(--et-ease), visibility 0s linear var(--et-motion-ui); }
  .menu-otkryto .bokovaya { transform: none; visibility: visible; transition: transform var(--et-motion-ui) var(--et-ease); }
  .bok-verh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 0 12px 12px 20px; border-bottom: 1px solid var(--et-border); }
  .bok-logo { width: 143px; }
  .bok-zakryt { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--et-ivory); border: 0; border-radius: 50%; color: var(--et-graphite); cursor: pointer; }
  .bok-razdely { display: block; margin-top: 8px; padding: 10px 20px 0; border-top: 1px solid var(--et-border); }
  .bok-razdely a { display: flex; align-items: center; min-height: 44px; color: var(--et-graphite); font-weight: 600; text-decoration: none; }
  .zatemnenie { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5); }
  .menu-otkryto { overflow: hidden; }
  .banner { min-height: 400px; padding: 24px; }
  .banner-tekst { padding: 36px 32px 100px; }
  .kartochki { gap: 20px; }
  .panel { padding: 44px 32px 36px; }
  .preim { padding: 20px 0 0; }
  .svyaz { padding: 44px 32px; }
  .forma { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .forma-knopka { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .shagi-4 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .wrap { padding: 0 16px; }
  .banner { display: block; min-height: 0; margin-bottom: 28px; padding: 168px 12px 0; background: transparent; border-radius: 16px; }
  .banner-foto { bottom: auto; height: 212px; border-radius: 16px; }
  .banner-foto img { width: 100%; object-position: 50% 40%; }
  .banner-foto figcaption { left: 12px; right: auto; top: 12px; bottom: auto; }
  .banner-tekst { width: auto; align-items: center; gap: 14px; padding: 28px 18px 64px; text-align: center; border-radius: 14px; box-shadow: none; }
  .banner-bez-foto { padding: 0; background: var(--et-cobalt); }
  .banner-bez-foto .banner-tekst { padding: 30px 20px 104px; }
  .b-str1 { margin-bottom: 10px; font-size: var(--fs-m); }
  .banner-pod { font-size: var(--fs-m); }
  .banner-bez-foto .banner-volna img { width: max(100%, 480px); transform: translateY(46%); }
  .btn { width: 100%; }
  .kartochki, .preim-setka, .shagi-kart, .shagi-4, .modul-kolonki, .o-nas-setka, .pod-nav-in { grid-template-columns: 1fr; }
  .kartochki { gap: 16px; margin-bottom: 20px; }
  .kart-shapka { min-height: 96px; }
  .kart-telo { padding: 20px 22px 22px; }
  .panel, .o-nas { margin-bottom: 20px; padding: 34px 20px 26px; border-radius: 16px; }
  .preim { padding: 14px 0 0; }
  .zag { margin-bottom: 26px; font-size: var(--fs-h-m); }
  .pod-zag { font-size: var(--fs-l); }
  .preim-setka { gap: 14px; }
  .pr { padding: 28px 20px 24px; }
  .svyaz { margin: 32px 0; padding: 34px 20px 20px; border-radius: 16px; }
  .forma { grid-template-columns: 1fr; padding: 24px 18px; }
  .shagi-kart { grid-auto-flow: row; row-gap: 18px; }
  .shag-kart { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .shag-n { margin: 0; }
  .shag-n::after { display: none; }
  .modul-kol { padding: 22px 18px; }
  .o-nas-foto { max-width: 340px; }
  .chipy ul { margin-bottom: 20px; }
  .oae-stroka { margin-bottom: 20px; padding: 16px 18px; }
  .pod-nav a { min-width: 44px; min-height: 44px; }
  .pod-svyaz { padding: 36px 0; }
  .pod-zag-bol { font-size: var(--fs-l); }
  .vopros summary { font-size: var(--fs-m); }
  .sch-list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sch-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .vopros[open] .otvet { animation: none; }
}

/* ссылки внутри текста: зона нажатия выше, строка не меняется (критик Опус М7) */
p a:not([class]) { padding-block: 6px; }

/* Логотип: знак аватарки вместо первой буквы и слоган курсивом (Артём 31.10, a13917). Отступ слогана = ширина круга с зазором (168/896 ширины знака) */
.logo { flex-direction: column; align-items: flex-start; justify-content: center; }
.logo-slogan { display: block; margin-top: 3px; padding-left: 36px; color: var(--et-muted); font-size: 13px; font-style: italic; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.pod-logo { flex-direction: column; align-items: flex-start; justify-content: center; }
.pod-logo .logo-slogan { padding-left: 31px; color: var(--et-ice); }

/* Фото в разделах, без подписей (Артём 31.10, a13917) */
.kart-shapka-foto { min-height: 0; padding: 0; aspect-ratio: 16 / 10; background: var(--et-ice); }
.kart-shapka-foto::after { z-index: 1; }
.kart-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.razdel-foto { margin: 0 0 32px; }
.svyaz-foto { max-width: 880px; margin: 0 auto 32px; }
.razdel-foto img, .svyaz-foto img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--r-card); background: var(--et-ice); }
.banner-foto img.foto-vizy-geroy { object-position: 50% 30%; }
.banner-foto img.foto-ssha-geroy { object-position: 30% 50%; }

/* Мессенджеры: главный Telegram, WhatsApp — маленький второй сбоку (Артём 31.10, a13918) */
.shapka-msg, .bok-msg { align-items: center; }
.krug-dop, .msg-dop { position: relative; width: 38px; height: 38px; background: var(--et-white); border: 1px solid var(--et-cobalt); color: var(--et-cobalt); }
.krug-dop::before, .msg-dop::before { content: ""; position: absolute; inset: -3px; }
.krug-dop .ico, .msg-dop .ico { width: 18px; height: 18px; }
.msg-vtoroy { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; color: var(--et-cobalt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.msg-vtoroy .ico { width: 20px; height: 20px; flex: none; }
.svyaz-msg { align-items: center; }
.svyaz-msg .msg-vtoroy { color: var(--et-white); }
.plav { flex-direction: row; align-items: center; }
.plav-dop { width: 44px; height: 44px; background: var(--et-white); border: 1px solid var(--et-cobalt); color: var(--et-cobalt); }
.plav-dop .ico { width: 22px; height: 22px; }

@media (max-width: 767.98px) {
  .razdel-foto, .svyaz-foto { margin-bottom: 24px; }
  .razdel-foto img, .svyaz-foto img { aspect-ratio: 16 / 10; border-radius: 12px; }
}
.logo, .pod-logo { text-decoration: none; }
.msg.msg-tg { background: var(--et-cobalt); color: var(--et-white); }
.msg.msg-tg:hover:not(:disabled) { background: var(--et-cobalt-hover); }