/* =========================================================
   Портал docs.neomsa.ru в стиле neomsa.ru
   Только тёмная тема: тёмная основа и тёмные карточки с неоновой подсветкой
   Шрифт IBM Plex Sans лежит рядом, в папке fonts/
   ========================================================= */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #0B081D;        /* шапка и фон, как на neomsa.ru */
  --accent: #A98DE3;       /* ссылки на тёмном фоне */
  --accent-dark: #A98DE3;  /* ссылки на карточках */
  --line-dark: #391168;    /* тонкие линии на тёмном */
  --bg: #0B081D;
  --card: #15112B;         /* тёмный лист, как в документации */
  --text: #FFFFFF;
  --muted: rgba(255, 255, 255, .64);
  --card-text: #E6E3F0;
  --card-heading: #FFFFFF;
  --card-muted: rgba(230, 227, 240, .64);
  --card-line: #391168;
  --glow: rgba(116, 76, 196, .35);
}

:root { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ---------- Шапка ---------- */
.bar { background: var(--brand); color: #fff; border-bottom: 1px solid var(--line-dark); }
.bar__inner { display: flex; align-items: center; gap: 16px; height: 56px; }
.bar__logo img { height: 28px; display: block; }
.bar__title { font-weight: 500; font-size: 17px; opacity: .9; }

/* ---------- Заголовок ---------- */
h1 { font-size: clamp(26px, 4vw, 34px); margin: 48px 0 8px; font-weight: 600; }
.lead { color: var(--muted); margin: 0 0 32px; max-width: 640px; }

/* ---------- Карточки ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

.card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; min-height: 190px;
  background: var(--card); color: var(--card-text);
  border: 1px solid var(--line-dark); border-radius: 16px;
  box-shadow: 0 0 24px var(--glow);
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}

a.card:hover {
  border-color: #744CC4;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px #744CC4, 0 0 36px rgba(116, 76, 196, .6);
}

.card__name { font-size: 20px; font-weight: 600; color: var(--card-heading); }
.card__text { color: var(--card-muted); flex: 1; }
.card__more { color: var(--accent-dark); font-weight: 600; font-size: 15px; }

.card--soon { box-shadow: none; }
.card--soon .card__name { color: var(--card-muted); }
.card--soon .card__more { color: var(--card-muted); font-weight: 500; }
a.card--soon:hover .card__more { color: var(--accent-dark); }

.card__badge {
  align-self: flex-start;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--card-line); color: var(--card-muted);
}

/* ---------- Подвал ---------- */
.foot { color: var(--muted); font-size: 14px; padding-top: 48px; padding-bottom: 32px; }