:root {
  --font: 'Golos Text', 'PT Root UI', -apple-system, BlinkMacSystemFont,
          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radius:        4px;
  --container:     1170px;
  --gutter:        24px;

  --white:         #FFFFFF;

  color-scheme: light;

  --bg:            #F5F6FA;
  --surface:       #FFFFFF;
  --blue:          #5FAAFF;   /* герой, шапки карточек, реплика пользователя */
  --blue-tint:     #DDE9FB;   /* заливка блока «Что поручить» */
  --orange:        #FFCC81;   /* шапка второй карточки */
  --ink:           #0047B3;   /* ссылки-заголовки, ссылки на материалы */
  --ink-deep:      #01427A;   /* активный пункт меню, «Задать вопрос», стрелки */
  --dark:          #2C303B;   /* подвал */

  --text:          #222222;
  --text-strong:   #000000;
  --text-body:     #3D3D3D;
  --text-muted:    #555555;
  --text-grey:     #7A8091;
  --text-nav:      #50576D;
  --text-eyebrow:  #303336;
  --footer-text:   #8B8FA7;
  --footer-link:   #E7E8EF;

  --border:        #DFE4F2;   /* рамка белых карточек */
  --border-warm:   #E4E2DE;   /* рамка блока ответа и кнопки «В систему» */

  --error-text:    #B44A4A;   /* ошибка отправки формы ЗОЗ */
  --error-border:  #E3B4B4;


  --logo-filter:       none;
  --logo-filter-dark:  brightness(0) invert(1);
}

/* ============================================================
   Тёмная тема

   ============================================================ */

.theme-dark {
  color-scheme: dark;

  --bg:            #171A21;
  --surface:       #21252E;
  --blue-tint:     #24303F;
  --ink:           #7FBBFF;
  --ink-deep:      #8FC4FF;
  --dark:          #12141A;

  --text:          #E8EAEF;
  --text-strong:   #FFFFFF;
  --text-body:     #D5D8E0;
  --text-muted:    #B4B9C4;
  --text-grey:     #8E95A3;
  --text-nav:      #A7ADBA;
  --text-eyebrow:  #E8EAEF;
  --footer-text:   #8E95A3;
  --footer-link:   #E7E8EF;

  --border:        #2E3440;
  --border-warm:   #333945;

  --error-text:    #F09A9A;
  --error-border:  #6E3B3B;

  --logo-filter:   brightness(0) invert(1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

.container,
.topbar__inner,
.mainnav__inner,
.footer__inner {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ============================================================
   Шапка
   ============================================================ */

.topbar { background: var(--bg); }

.topbar__inner {
  display: flex;
  align-items: center;
  height: 68px;
}

.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 30px; width: auto; filter: var(--logo-filter); }

.topbar__divider {
  width: 1px;
  align-self: stretch;
  margin: 22px 0 22px 27px;
  background: var(--border-warm);
}

.topbar__section {
  margin-left: 16px;
  font-size: 13px;
  color: var(--text-grey);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 37px;
  padding: 0 18px;
  border: 1px solid var(--border-warm);
  border-radius: 19px;
  background: var(--surface);
  font-size: 14px;
  color: var(--text-body);
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.btn-back:hover { border-color: var(--blue); color: var(--ink-deep); }
.btn-back__arrow { font-size: 15px; line-height: 1; }

.btn-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  padding: 0;
  border: 1px solid var(--border-warm);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-body);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-theme:hover { border-color: var(--blue); color: var(--ink-deep); }
.btn-theme svg { width: 19px; height: 19px; }

.btn-theme__moon { display: none; }
.theme-dark .btn-theme__sun  { display: none; }
.theme-dark .btn-theme__moon { display: block; }

/* ============================================================
   Меню
   ============================================================ */

.mainnav { background: var(--surface); }

.mainnav__inner {
  display: flex;
  align-items: stretch;
  gap: 22px;
  height: 44px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mainnav__inner::-webkit-scrollbar { display: none; }

.mainnav__item {
  display: flex;
  align-items: center;
  flex: none;
  font-size: 16px;
  color: var(--text-nav);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s;
}
.mainnav__item:hover { color: var(--ink-deep); }

.mainnav__item--active {
  color: var(--ink-deep);
  border-bottom-color: var(--ink-deep);
}

/* ============================================================
   Полотно страницы
   ============================================================ */

.page {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 85px var(--gutter) 84px;
}


.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 30px;
  align-items: stretch;
}

/* без min-width:0 длинные элементы (иллюстрация, ссылки) распирают сетку */
.hero > *,
.split > *,
.split__left > *,
.assistants__grid > * { min-width: 0; }

.hero__card {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 323px;
  padding: 19px 40px 19px 50px;
  border-radius: var(--radius);
  background: var(--blue);
  overflow: hidden;
}


.hero__text { flex: 0 1 340px; min-width: 0; padding-top: 18px; }

.hero__title {
  font-size: 34px;
  line-height: 42px;
  color: var(--white);
  letter-spacing: -.005em;
}

.hero__sub {
  margin-top: 16px;
  font-size: 15px;
  line-height: 21px;
  color: rgba(255, 255, 255, .9);
}

.hero__img {
  flex: 0 1 auto;
  width: 403px;
  max-width: 100%;
  margin-left: auto;
}



.steps {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.steps__item + .steps__item { margin-top: 20px; }

.steps__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  color: var(--ink);
}

.steps__desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 18px;
  color: var(--text-grey);
}

/* ============================================================
   Два столбца: списки + пример диалога
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 40px;
  align-items: stretch;
}

.split__left { display: flex; flex-direction: column; gap: 20px; }

.panel {
  padding: 26px 28px;
  border-radius: var(--radius);
}

.panel--tint    { background: var(--blue-tint); flex: 1 1 auto; }
.panel--outline { background: var(--surface); border: 1px solid var(--border); }

.eyebrow {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

.arrowlist { margin-top: 34px; }

.arrowlist li {
  position: relative;
  padding-left: 34px;
  padding-right: 29px;
  font-size: 18px;
  line-height: 22px;
  color: var(--text-body);
}
.arrowlist li + li { margin-top: 20px; }

.arrowlist li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 15px;
  color: var(--ink-deep);
}

/* пример диалога */

.split__right { display: flex; flex-direction: column; padding: 22px; }

.bubble {
  max-width: 355px;
  margin: 13px 0 0 auto;
  padding: 14px 18px;
  border-radius: 6px;
  background: var(--blue);
  font-size: 15px;
  line-height: 21px;
  color: var(--white);
}

.answer {
  margin-top: 14px;
  padding: 12px 12px 20px;
  border: 1px solid var(--border-warm);
  border-radius: var(--radius);
  background: var(--surface);
}

.answer p {
  font-size: 14px;
  line-height: 18px;
  color: var(--text-muted);
}
.answer p + p { margin-top: 20px; }

.answer__lead {
  line-height: 20px;
  font-weight: 700;
  color: var(--text-body);
}

.answer__sources-title {
  margin-top: 26px;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-strong);
}


.sources { margin-top: 12px; }
.sources li {
  font-size: 14px;
  line-height: 18px;
  color: var(--ink);
}
.sources li + li { margin-top: 13px; }

/* ============================================================
   Выберите помощника
   ============================================================ */

.assistants { margin-top: 40px; }

.assistants__title {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
}

.assistants__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.acard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.acard__head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 129px;
  flex: none;
}
.acard__head--blue   { background: var(--blue); }
.acard__head--orange { background: var(--orange); }
.acard__head img     { width: auto; height: 65px; }

.acard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 40px 22px 22px;
}

.acard__title {
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  color: var(--text-strong);
}

.acard__desc {
  margin-top: 18px;
  font-size: 17px;
  line-height: 23px;
  color: var(--text-grey);
}

.acard__link {
  margin-top: auto;
  padding-top: 28px;
  font-size: 15px;
  color: var(--ink-deep);
  white-space: nowrap;
}
.acard__link span { margin-left: 6px; }
.acard__link:hover { text-decoration: underline; }


.acard__title a:hover { text-decoration: underline; }

/* ============================================================
   Модальное окно ЗОЗ 
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 19, 25, .55);
}

.modal__window {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 100%;
  overflow-y: auto;
  padding: 32px 32px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-grey);
  cursor: pointer;
}
.modal__close:hover { color: var(--text); }
.modal__close svg { width: 18px; height: 18px; }

.modal__title {
  padding-right: 26px;
  font-size: 20px;
  line-height: 26px;
  color: var(--text-strong);
}

.modal__lead {
  margin-top: 12px;
  font-size: 15px;
  line-height: 21px;
  color: var(--text-grey);
}

/* ——— форма ——— */

.zoz { margin-top: 22px; }

.zoz__field {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-warm);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  font-size: 15px;
  color: var(--text-body);
}
.zoz__field::placeholder { color: var(--text-grey); }
.zoz__field:focus { outline: none; border-color: var(--blue); }
.zoz__field + .zoz__field { margin-top: 10px; }

.zoz__submit {
  width: 100%;
  height: 46px;
  margin-top: 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue);
  font-family: inherit;
  font-size: 16px;
  color: var(--white);
  cursor: pointer;
  transition: filter .15s;
}
.zoz__submit:hover { filter: brightness(.94); }

.zoz__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-grey);
  cursor: pointer;
}
.zoz__consent input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--blue); }
.zoz__consent a { color: var(--ink); text-decoration: underline; }

/* ——— состояния после отправки ——— */

.modal__request[hidden],
.zoz__error[hidden],
.zoz__done[hidden] { display: none; }

.zoz__error {
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid var(--error-border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 19px;
  color: var(--error-text);
}

.zoz__done-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 23px;
  color: var(--text-strong);
}
.zoz__done-text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 21px;
  color: var(--text-grey);
}

/* ============================================================
   Подвал
   ============================================================ */

.footer { background: var(--dark); }
/* в тёмной теме подвал почти сливается с фоном — отбиваем линией */
.theme-dark .footer { border-top: 1px solid var(--border); }

.footer__inner {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  padding-bottom: 22px;
}

.footer__row {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 72px;
}

.footer__left {
  display: flex;
  align-items: center;
  gap: 12px;
}


.logo--light img { filter: var(--logo-filter-dark); }

.footer__note {
  font-size: 14px;
  line-height: 19px;
  color: var(--footer-text);
}

.footer__link {
  margin-left: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(231, 232, 239, .5);
  font-size: 14px;
  color: var(--footer-link);
  white-space: nowrap;
}
.footer__link span { margin-left: 4px; }
.footer__link:hover { border-bottom-color: var(--footer-link); }


.footer__legal {
  display: flex;
  align-items: baseline;
  gap: 30px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 13px;
  line-height: 18px;
  color: var(--footer-text);
}

.footer__docs {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.footer__docs a:hover { text-decoration: underline; }

/* ============================================================
   Адаптив
   ============================================================ */

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .steps { flex-direction: row; gap: 24px; }
  .steps__item { flex: 1 1 0; }
  .steps__item + .steps__item { margin-top: 0; }
  .hero__card { min-height: 0; }
}


@media (max-width: 900px) {
  .hero__card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 40px; }
  .hero__text { flex: 1 1 auto; padding-top: 0; }
  .hero__img { margin: 0 auto; }
}

@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .assistants__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acard__body { padding-top: 28px; }
}

@media (max-width: 760px) {
  .page { padding-top: 40px; padding-bottom: 48px; }

  .topbar__inner { height: 60px; }
  .topbar__divider, .topbar__section { display: none; }

  .hero__card { padding: 32px 24px; }
  .hero__title { font-size: 28px; line-height: 34px; }

  .steps { flex-direction: column; gap: 0; }
  .steps__item + .steps__item { margin-top: 22px; }

  .arrowlist li { padding-left: 32px; }
  .arrowlist li::before { left: 0; }

  .bubble { max-width: 100%; }

  .assistants { margin-top: 36px; }
  .assistants__grid { grid-template-columns: minmax(0, 1fr); }
  .acard__link { padding-top: 22px; }

  .footer__row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer__left { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__link { margin-left: 0; }
  .footer__legal { flex-direction: column; gap: 14px; }
  .footer__docs { flex-direction: column; gap: 10px; margin-left: 0; }
}

@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .hero__title { font-size: 25px; line-height: 31px; }
  .panel { padding: 22px 18px; }
  .assistants__title { font-size: 19px; }
}