/*
  Общие стили для украинской (/) и русской (/ru/) версий.
  Греческая гамма: белый мрамор, эгейский синий и немного золота.
  Цвета меняются в одном месте — в блоках :root и .aside ниже.
*/

/*
  Запасные шрифты, подогнанные по ширине под Cormorant Garamond и Manrope.
  Пока основные шрифты грузятся, текст переносится так же, и страница не «прыгает».
  Коэффициенты измерены в браузере.
*/
@font-face {
  font-family: "CG Fallback Georgia";
  src: local("Georgia");
  size-adjust: 75.4%;
  ascent-override: 122%;
  descent-override: 38%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "CG Fallback Times";
  src: local("Times New Roman"), local("Times");
  size-adjust: 89.8%;
  ascent-override: 103%;
  descent-override: 32%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Manrope Fallback Segoe";
  src: local("Segoe UI");
  size-adjust: 103.3%;
  ascent-override: 103%;
  descent-override: 29%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Manrope Fallback Arial";
  src: local("Arial"), local("Helvetica");
  size-adjust: 101.7%;
  ascent-override: 105%;
  descent-override: 30%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Manrope Fallback Roboto";
  src: local("Roboto");
  size-adjust: 111%;
  ascent-override: 96%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* ---------- Светлая часть: белый мрамор ---------- */
:root {
  --bg: #f8f6f1;                         /* белый мрамор */
  --surface: #ffffff;                    /* карточки */
  --text: #10233f;                       /* основной текст — глубокий синий */
  --muted: #4b5c76;                      /* второстепенный текст */
  --accent: #1a4fa8;                     /* эгейский синий: ссылки и кнопки */
  --accent-hi: #0e3a86;
  --accent-soft: rgba(26, 79, 168, 0.07);
  --gold: #c39a3e;                       /* золото — только для декора */
  --line: rgba(16, 35, 63, 0.12);
  --line-strong: rgba(16, 35, 63, 0.24);
  --focus: #1a4fa8;
  --btn-top: #2b63c6;
  --btn-bottom: #1a4fa8;
  --on-btn: #ffffff;
  --panel: #0c2b5e;                      /* глубокий эгейский синий */

  --font-display: "Cormorant Garamond", "CG Fallback Georgia", "CG Fallback Times", Georgia, serif;
  --font-sans: "Manrope", "Manrope Fallback Segoe", "Manrope Fallback Arial", "Manrope Fallback Roboto", system-ui, sans-serif;

  /* Греческий орнамент-меандр (золото) */
  --meander-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23c39a3e' stroke-width='1.6'%3E%3Cpath d='M0 22.5h24M0 1.5h24M3 22.5V5h15v11H8V9.5h5'/%3E%3C/svg%3E");
  --meander-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23c39a3e' stroke-width='1.6'%3E%3Cpath d='M22.5 0v24M1.5 0v24M22.5 3H5v15h11V8H9.5v5'/%3E%3C/svg%3E");

  --gutter: 1.25rem;
  --radius: 1.25rem;
  --topbar-h: 4rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

/* ---------- Тёмная часть: эгейский синий (левая колонка и блок контактов) ---------- */
.aside,
.contact-panel {
  --text: #f8f6f1;
  --muted: #bfcde6;
  --accent: #e8c873;                     /* золото на синем */
  --accent-hi: #f6e2a8;
  --accent-soft: rgba(232, 200, 115, 0.14);
  --line: rgba(248, 246, 241, 0.16);
  --line-strong: rgba(248, 246, 241, 0.32);
  --focus: #f6e2a8;
  --btn-top: #f0d48c;
  --btn-bottom: #d0a748;
  --on-btn: #1b1405;
  color: var(--text);
}

/* ---------- База ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* закреплённая верхняя полоса на телефоне не перекрывает заголовки при переходе по якорю */
  scroll-padding-top: calc(var(--topbar-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-width: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: #1a4fa8;
  color: #ffffff;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
}

p,
ul,
ol {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.25rem;
}

li + li {
  margin-top: 0.4rem;
}

/* Маркеры списков — короткая золотая черта */
main ul {
  padding-left: 0;
  list-style: none;
}

main ul > li {
  position: relative;
  padding-left: 1.5rem;
}

main ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.8rem;
  height: 2px;
  background: var(--gold);
}

strong {
  font-weight: 650;
  color: var(--text);
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
    text-decoration-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s var(--ease);
}

a:hover {
  color: var(--accent-hi);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 6px;
}

main:focus {
  outline: none;
}

.icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nowrap {
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Ссылка «к содержанию» для клавиатуры ---------- */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: #1a4fa8;
  color: #ffffff;
  font-weight: 650;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
  color: #ffffff;
  outline-color: #c39a3e;
}

/* ---------- Каркас: на телефоне одна колонка ---------- */

.shell {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* На узком экране левая колонка «растворяется»: её части становятся синими блоками во всю ширину */
.aside {
  display: contents;
}

.topbar,
.intro,
.toc {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  background-color: var(--panel);
}

/* ---------- Верхняя полоса: имя и язык ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-height: var(--topbar-h);
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar {
    background-color: rgba(12, 43, 94, 0.88);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
  color: var(--text);
  text-decoration: none;
  line-height: 1.15;
}

.brand:hover {
  color: var(--text);
}

/* Монограмма в золотом круге */
.brand::before {
  content: "К";
  content: "К" / ""; /* декоративная, экранный диктор её не читает */
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.6s var(--ease), background-color 0.3s ease;
}

.brand:hover::before {
  background-color: var(--accent-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .brand:hover::before {
    transform: rotate(-12deg);
  }
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Полоса не переносится на вторую строку: при нехватке места сокращается подпись под именем */
.topbar {
  flex-wrap: nowrap;
}

.brand {
  min-width: 0;
}

.brand-role {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lang {
  flex: none;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
}

.brand-role {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Переключатель языка — сегментная «таблетка» */
.lang ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin: 0;
  padding: 0.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  list-style: none;
}

.lang li + li {
  margin-top: 0;
}

.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.lang a:hover {
  color: var(--text);
  background: rgba(248, 246, 241, 0.1);
}

/* Текущий язык: заполненный золотом сегмент — видно без наведения */
.lang a[aria-current="page"] {
  background: var(--accent);
  color: #1b1405;
  font-weight: 650;
}

/* ---------- Первый экран ---------- */

.intro {
  padding-block: 2.75rem 2rem;
  background-image: radial-gradient(40rem 26rem at 110% -10%, rgba(80, 140, 230, 0.35), transparent 65%);
}

.hello {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  color: var(--muted);
  font-size: 1rem;
}

.hello::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  flex: none;
  background: var(--accent);
  transform-origin: left center;
}

h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.875rem, 1.9rem + 4.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.lead {
  max-width: 33rem;
  color: var(--muted);
  font-size: 1.125rem;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  color: var(--on-btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 28px -14px rgba(10, 30, 70, 0.6);
}

.btn-primary:hover {
  color: var(--on-btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 18px 36px -14px rgba(10, 30, 70, 0.75);
}

/* Блик, пробегающий по кнопке при наведении */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
}

.btn-secondary {
  border-color: var(--line-strong);
  color: var(--text);
}

.btn-secondary .icon {
  color: var(--accent);
}

.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-2px);
  }

  .btn-primary:hover::after {
    transform: translateX(120%);
    transition: transform 0.7s var(--ease);
  }
}

.phone-note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.phone-note strong {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- Навигация по разделам ---------- */

/* Телефон: синяя сетка 2×2, снизу — полоса меандра */
.toc {
  margin-top: -1px; /* без шва между синими блоками */
  padding-block: 1px 2.75rem;
  background-image: var(--meander-x);
  background-repeat: repeat-x;
  background-position: left bottom 0.6rem;
  background-size: 24px 24px;
}

.toc ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li + li {
  margin-top: 0;
}

.toc a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: rgba(248, 246, 241, 0.05);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
}

.toc a:hover {
  border-color: var(--accent);
  color: var(--accent-hi);
}

/* Контакты в левой колонке показываются только на широком экране */
.aside-contacts {
  display: none;
}

/* ---------- Основной контент на белом мраморе ---------- */

.section {
  padding: 3.5rem 0;
  border-top: 1px solid var(--line);
}

.section:first-child {
  border-top: 0;
}

h2 {
  margin-bottom: 0.9rem;
  font-size: clamp(2.125rem, 1.7rem + 1.8vw, 2.875rem);
  line-height: 1.08;
}

/* Под заголовком раздела — короткая золотая линия */
.section h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: 0.85rem;
  background: var(--gold);
  transform-origin: left center;
}

.contact-panel h2::after {
  background: var(--accent);
}

h3 {
  margin-bottom: 0.6rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Удобная длина строки (не больше ~75 знаков) */
.section > p,
.section > ul,
.contact-panel > p,
.contact-panel > ul {
  max-width: 40rem;
}

.section-lead {
  max-width: 36rem;
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: 1.125rem;
}

/* Услуги: заголовок — задача посетителя, ниже — название формата */
.services {
  display: grid;
  gap: 1.25rem;
}

.service {
  position: relative;
  padding: 1.75rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(16, 35, 63, 0.04), 0 18px 40px -28px rgba(16, 35, 63, 0.35);
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Золотая линия сверху карточки */
.service::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1.35rem;
  width: 3rem;
  height: 2px;
  background: var(--gold);
  transition: width 0.45s var(--ease);
}

.service:hover {
  border-color: rgba(26, 79, 168, 0.25);
  box-shadow: 0 1px 0 rgba(16, 35, 63, 0.04), 0 26px 50px -28px rgba(16, 35, 63, 0.45);
}

.service:hover::before {
  width: calc(100% - 2.7rem);
}

@media (prefers-reduced-motion: no-preference) {
  .service:hover {
    transform: translateY(-3px);
  }
}

.service h3 {
  font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.8rem);
}

.service-format {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.service-format strong {
  color: var(--accent);
}

.term {
  font-weight: 650;
  color: var(--text);
}

p.term {
  margin-bottom: 0.5rem;
}

.service ul {
  color: var(--muted);
}

.example {
  margin: 1.5rem 0 0;
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--gold);
  border-radius: 0 0.875rem 0.875rem 0;
  background: var(--accent-soft);
  color: var(--muted);
  font-size: 0.975rem;
  line-height: 1.6;
}

.note {
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* Как работаю: без номеров, просто блоки с заголовком и текстом */
.steps {
  display: grid;
  gap: 1.75rem;
}

.step {
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
}

.step h3 {
  margin-bottom: 0.35rem;
  font-size: 1.55rem;
}

.step p {
  margin: 0;
  color: var(--muted);
}

/* Частые вопросы: нативные details/summary работают с клавиатуры и без JavaScript */
.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  display: block;
  padding: 1.25rem 3.25rem 1.25rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Кружок с плюсом; у открытого вопроса — минус. Состояние видно без наведения */
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background:
    linear-gradient(var(--accent), var(--accent)) center / 0.75rem 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 0.75rem no-repeat;
  transition: background-size 0.25s ease, box-shadow 0.25s ease, transform 0.35s var(--ease),
    background-color 0.25s ease;
}

.faq details[open] > summary::after {
  background-size: 0.75rem 1.5px, 1.5px 0;
  background-color: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
  transform: rotate(180deg);
}

.faq summary:hover {
  color: var(--accent);
}

.faq summary:focus-visible {
  outline-offset: 6px;
}

.faq details > div {
  padding: 0 3.25rem 1.5rem 0;
  color: var(--muted);
}

.faq details > div p:last-child {
  margin-bottom: 0;
}

/* Контакты: синяя панель с меандром сверху */
.contact-panel {
  position: relative;
  overflow: hidden;
  padding: 3.25rem 1.25rem 2.25rem;
  border-radius: 1.5rem;
  background:
    var(--meander-x) left top 1rem / 24px 24px repeat-x,
    radial-gradient(32rem 20rem at 100% 0%, rgba(80, 140, 230, 0.4), transparent 70%),
    var(--panel);
  box-shadow: 0 30px 60px -32px rgba(12, 43, 94, 0.7);
}

.contact-panel .section-lead {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.8rem);
  font-weight: 500;
  line-height: 1.3;
}

.contact-panel ul {
  color: var(--muted);
}

.contact-panel ul > li::before {
  background: var(--accent);
}

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

.site-footer {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.footer-links li + li {
  margin-top: 0;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

.footer-bottom p {
  margin: 0;
}

/* ---------- Анимации ---------- */

/*
  Только при разрешённом движении. Контент не прячется полностью:
  элементы стартуют полупрозрачными и чуть ниже, а затем встают на место.
*/
@keyframes rise {
  from {
    opacity: 0.12;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes meander-in {
  from {
    background-position: left -48px bottom 0.6rem;
  }
  to {
    background-position: left 0 bottom 0.6rem;
  }
}

@keyframes reveal {
  from {
    opacity: 0.35;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes answer-in {
  from {
    opacity: 0.2;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Первый экран: одно согласованное появление при загрузке */
  .hello,
  h1,
  .lead,
  .intro .cta,
  .intro .phone-note,
  .toc ul,
  .aside-contacts {
    animation: rise 0.8s var(--ease) both;
  }

  h1 { animation-delay: 0.08s; }
  .lead { animation-delay: 0.18s; }
  .intro .cta { animation-delay: 0.28s; }
  .intro .phone-note { animation-delay: 0.34s; }
  .toc ul { animation-delay: 0.4s; }
  .aside-contacts { animation-delay: 0.48s; }

  .hello::before {
    animation: draw 0.9s var(--ease) 0.2s both;
  }

  .toc {
    animation: meander-in 1.4s var(--ease) both;
  }

  /* Ответ на вопрос мягко выезжает при раскрытии */
  .faq details[open] > div {
    animation: answer-in 0.35s var(--ease);
  }

  /* Разделы проявляются при прокрутке (в браузерах, которые это умеют; в остальных всё видно сразу) */
  @supports (animation-timeline: view()) {
    .section h2,
    .section-lead,
    .service,
    .steps li,
    .faq,
    .note,
    .contact-panel {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }

    .section h2::after {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}

/* ---------- Телефон: имя и переключатель языка помещаются в одну строку ---------- */

@media (max-width: 26.24em) {
  .brand::before {
    display: none;
  }

  .lang a {
    padding: 0 0.75rem;
    font-size: 0.8125rem;
  }
}

/* ---------- Очень узкий экран или сильное увеличение ---------- */

@media (max-width: 22.49em) {
  .topbar {
    gap: 0.25rem 0.5rem;
  }

  .brand::before,
  .brand-role {
    display: none;
  }

  .lang a {
    padding: 0 0.6rem;
    font-size: 0.8125rem;
  }
}

/* Совсем узко (увеличение 400%): полоса может занять две строки, поэтому не закрепляем её */
@media (max-width: 21.24em) {
  html {
    scroll-padding-top: 1rem;
  }

  .topbar {
    position: static;
    flex-wrap: wrap;
  }
}

/* ---------- Небольшой телефон: кнопки на всю ширину ---------- */

@media (max-width: 29.99em) {
  .cta .btn {
    flex: 1 1 100%;
  }
}

/* ---------- Планшет ---------- */

@media (min-width: 48em) {
  :root {
    --gutter: 2.5rem;
  }

  .intro {
    padding-block: 4rem 2.5rem;
  }

  .toc ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .toc a {
    justify-content: center;
  }

  .section {
    padding: 5rem 0;
  }

  .service {
    padding: 2.25rem;
  }

  .service::before {
    left: 2.25rem;
  }

  .service:hover::before {
    width: calc(100% - 4.5rem);
  }

  .contact-panel {
    padding: 4rem 2.75rem 3rem;
  }
}

/* ---------- Широкий экран: синяя колонка слева, мрамор справа ---------- */

@media (min-width: 64em) {
  :root {
    --gutter: 3rem;
    --edge: max(3rem, calc((100vw - 84rem) / 2 + 2.5rem));
  }

  html {
    scroll-padding-top: 2.5rem;
  }

  .shell {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    max-width: none;
    padding: 0;
  }

  .aside {
    display: flex;
    flex-direction: column;
    align-self: start;
    padding: 2.75rem 3.75rem 1.75rem var(--edge);
    background-color: var(--panel);
    background-image:
      var(--meander-y),
      radial-gradient(44rem 30rem at 100% -5%, rgba(80, 140, 230, 0.38), transparent 65%),
      radial-gradient(30rem 24rem at 0% 110%, rgba(195, 154, 62, 0.14), transparent 70%);
    background-repeat: repeat-y, no-repeat, no-repeat;
    background-position: right 0.9rem top, 0 0, 0 0;
    background-size: 24px 24px, auto, auto;
  }

  .topbar,
  .intro,
  .toc {
    margin-inline: 0;
    padding-inline: 0;
    background: none;
  }

  .topbar {
    position: static;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .intro {
    padding-block: 3rem 0;
  }

  h1 {
    font-size: clamp(3.25rem, 1.4rem + 2.9vw, 4.25rem);
  }

  .cta {
    gap: 0.625rem;
  }

  .intro .btn {
    gap: 0.5rem;
    padding-inline: 1.2rem;
    font-size: 0.9375rem;
  }

  /* Ссылки на разделы — вертикальный список с направляющей линией слева */
  .toc {
    margin-top: 2.5rem;
    padding: 0;
    animation: none;
  }

  .toc ul {
    display: block;
    border-left: 1px solid var(--line);
  }

  .toc a {
    position: relative;
    display: inline-flex;
    min-height: 2.5rem;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
  }

  .toc a::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--accent);
    transform: translateY(-50%);
    transition: height 0.25s var(--ease);
  }

  .toc a:hover,
  .toc a:focus-visible {
    color: var(--text);
  }

  .toc a:hover::before,
  .toc a:focus-visible::before {
    height: 1.5rem;
  }

  .aside-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: auto 0 0;
    padding: 2rem 0 0;
    list-style: none;
  }

  .aside-contacts li + li {
    margin-top: 0;
  }

  .aside-contacts a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--muted);
  }

  .aside-contacts a:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-hi);
  }

  @media (prefers-reduced-motion: no-preference) {
    .aside-contacts a:hover {
      transform: translateY(-2px);
    }
  }

  .content-col {
    min-width: 0;
    padding: 3rem var(--edge) 0 clamp(3rem, 5vw, 5.5rem);
  }

  .content-col > * {
    max-width: 44rem;
  }

  .section:first-child {
    padding-top: 1rem;
  }
}

/*
  Левая колонка закрепляется в пределах окна. Если что-то не помещается
  (невысокий экран, крупный шрифт, масштаб), у колонки своя прокрутка — ничего не теряется.
  На очень низком окне колонка просто прокручивается вместе со страницей.
*/
@media (min-width: 64em) and (min-height: 40rem) {
  .aside {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(248, 246, 241, 0.25) transparent;
  }
}

/* Невысокий ноутбук (например, 1366×768): компактнее, чтобы главное помещалось без прокрутки колонки */
@media (min-width: 64em) and (max-height: 55.99rem) {
  .aside {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
  }

  .intro {
    padding-top: 1.25rem;
  }

  .hello {
    margin-bottom: 0.6rem;
  }

  h1 {
    margin-bottom: 0.9rem;
    font-size: clamp(2.75rem, 1.3rem + 2.3vw, 3.25rem);
  }

  .lead {
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  .intro .cta {
    margin-top: 1.15rem;
  }

  .phone-note {
    margin-top: 0.6rem;
  }

  .toc {
    margin-top: 1.1rem;
  }

  .toc a {
    min-height: 2.15rem;
  }

  .aside-contacts {
    padding-top: 0.9rem;
  }
}

/* Обычный ноутбук (1440×900): чуть компактнее отступы */
@media (min-width: 64em) and (min-height: 56rem) and (max-height: 63.99rem) {
  .aside {
    padding-top: 2rem;
    padding-bottom: 1.25rem;
  }

  .intro {
    padding-top: 2.25rem;
  }

  h1 {
    font-size: clamp(3rem, 1.2rem + 2.5vw, 3.75rem);
  }

  .toc {
    margin-top: 1.75rem;
  }

  .aside-contacts {
    padding-top: 1.5rem;
  }
}

/* Совсем невысокое окно: иконки контактов прячем (они есть в подвале), чтобы колонка поместилась */
@media (min-width: 64em) and (max-height: 48rem) {
  .aside-contacts {
    display: none;
  }
}

@media (min-width: 64em) and (max-width: 79.99em) and (max-height: 55.99rem) {
  h1 {
    font-size: 2.75rem;
  }
}

/* ---------- Меньше движения по просьбе системы ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Высокий контраст Windows ---------- */

@media (forced-colors: active) {
  .btn,
  .lang a,
  .toc a {
    border: 1px solid CanvasText;
  }

  .faq summary::after {
    content: "+";
    background: none;
    text-align: center;
    line-height: 2rem;
  }

  .faq details[open] > summary::after {
    content: "\2212";
  }
}