/* Тарифы Armillaria Protect и роли узлов.
   Композиция взята с утверждённого борда 758bb318 (два соседних блока внизу):
   три тарифные карточки с выделенным «Свобода» и три узловые карточки с
   ориентиром доходности. Иллюстрации — самостоятельные оригиналы без текста
   из images/exampledesign (02_underground_mycelium_text_space и
   07_gold_node_network), пересчитанные в пары 5120/2560 как требует
   assets/REFERENCE-ASSET-MAP.md. Скриншоты эталона источником картинок не
   являются. Движения нет намеренно: #mainContent обнуляет анимации. */

.plans-board,
.rewards-board {
  position: relative;
  overflow: hidden;
  padding: 54px 0 58px;
}

.plans-board::before,
.rewards-board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(1, 7, 5, .9) 0%, rgba(1, 7, 5, .74) 42%, rgba(1, 7, 5, .93) 100%);
}

.plans-board > .mp-container,
.rewards-board > .mp-container {
  position: relative;
  z-index: 2;
}

/* Заголовок блока */
.plans-board-head,
.rewards-board-head {
  margin-bottom: 26px;
  text-align: center;
}

.plans-board-head h2,
.rewards-board-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.01em;
}

.plans-board-head h2 span,
.rewards-board-head h2 span {
  color: var(--green);
}

.plans-board-head p,
.rewards-board-head p {
  margin: 10px auto 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* ── Тарифные карточки ─────────────────────────────────────────────── */
.plans-board .pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.plans-board .pricing-card {
  min-height: 0;
  padding: 0 18px 18px;
  overflow: hidden;
  border-radius: 14px;
  transition: none;
}

.pricing-card-art {
  display: block;
  height: 126px;
  margin: 0 -18px 16px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.pricing-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plans-board .pricing-card > p { min-height: 50px; }
.plans-board .pricing-card dl { margin-bottom: 14px; }
.plans-board .pricing-card dl > div { padding: 8px 0; }

.tarif-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.tarif-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(7, 19, 14, .92), rgba(2, 9, 7, .95));
}

.tarif-card.is-featured {
  border-color: rgba(140, 255, 79, .55);
  background: linear-gradient(180deg, rgba(19, 46, 25, .92), rgba(6, 20, 11, .95));
  box-shadow: 0 0 0 1px rgba(140, 255, 79, .16), 0 18px 46px rgba(74, 190, 52, .18);
}

.tarif-card.is-premium {
  border-color: rgba(183, 104, 255, .42);
  background: linear-gradient(180deg, rgba(26, 14, 40, .92), rgba(7, 4, 14, .95));
}

.tarif-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--green);
  color: #06180a;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tarif-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.tarif-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.tarif-card .tarif-price { color: var(--text); }
.tarif-card.is-featured .tarif-price { color: var(--green); }
.tarif-card.is-premium .tarif-price { color: var(--green); }

.tarif-price small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}

.tarif-features {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: 11px;
}

.tarif-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #c6d2cb;
  font-size: 10.5px;
  line-height: 1.45;
}

.tarif-features svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 1px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tarif-card.is-premium .tarif-features svg { stroke: var(--purple); }

.tarif-cta {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding: 11px 16px;
  border: 1px solid rgba(142, 166, 153, .38);
  border-radius: 10px;
  color: var(--text);
  font-size: 10.5px;
  font-weight: 700;
}

.tarif-features + .tarif-cta { margin-top: 22px; }

.tarif-cta svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tarif-card.is-featured .tarif-cta {
  border-color: var(--green);
  background: linear-gradient(180deg, #9aff5e, #62d23f);
  color: #061006;
}

.tarif-card.is-premium .tarif-cta {
  border-color: rgba(183, 104, 255, .7);
  background: linear-gradient(180deg, #a05fe0, #7c3fbe);
  color: #fdf7ff;
}

/* Подписи под блоками */
.plans-board-note,
.rewards-board-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  margin: 22px 0 0;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(2, 9, 7, .72);
  color: #b7c3bc;
  font-size: 10px;
  text-align: center;
}

.plans-board-note b,
.rewards-board-note b {
  color: var(--green);
  font-weight: 700;
}

.plans-board-legal,
.rewards-board-legal {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px auto 0;
  max-width: 900px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.55;
}

.plans-board-legal svg,
.rewards-board-legal svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-top: 1px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Награды за вклад в сеть ───────────────────────────────────────── */
.rewards-board-head h2 span { color: var(--purple); }

.reward-node-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.reward-node-card {
  --tier: var(--green);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(7, 19, 14, .92), rgba(2, 9, 7, .95));
  text-align: center;
}

.reward-node-card[data-reward-tier="standard"] {
  --tier: var(--purple);
  border-color: rgba(183, 104, 255, .34);
  background: linear-gradient(180deg, rgba(22, 12, 34, .92), rgba(5, 3, 11, .95));
}

.reward-node-card[data-reward-tier="premium"] {
  --tier: #f5c451;
  border-color: rgba(245, 196, 81, .38);
  background: linear-gradient(180deg, rgba(32, 25, 8, .92), rgba(10, 8, 2, .95));
}

.reward-node-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.reward-node-tag {
  margin-top: 6px;
  color: var(--tier);
  font-size: 10px;
  font-weight: 600;
}

.reward-node-mark {
  display: grid;
  width: 82px;
  height: 82px;
  margin: 18px 0 16px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--tier) 34%, transparent);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tier) 22%, transparent), rgba(3, 11, 8, .84) 68%);
}

.reward-node-mark svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--tier);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reward-node-yield {
  width: 100%;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.reward-node-yield > span {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  letter-spacing: .04em;
}

.reward-node-yield b {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 5px;
  color: var(--tier);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.reward-node-yield b small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.reward-node-card ul {
  margin: 16px 0 20px;
  padding: 0;
  width: 100%;
  list-style: none;
  display: grid;
  gap: 8px;
  color: #bcc8c1;
  font-size: 10px;
  line-height: 1.45;
}

.reward-node-card .tarif-cta {
  width: 100%;
  margin-top: auto;
}

/* ── Светлая тема ──────────────────────────────────────────────────── */
html[data-theme="light"] .plans-board::before,
html[data-theme="light"] .rewards-board::before {
  background: linear-gradient(180deg, rgba(245, 248, 245, .93) 0%, rgba(245, 248, 245, .84) 42%, rgba(245, 248, 245, .95) 100%);
}

html[data-theme="light"] .plans-board-art img,
html[data-theme="light"] html[data-theme="light"] .tarif-card,
html[data-theme="light"] .reward-node-card {
  background: #fff;
  box-shadow: 0 10px 28px rgba(29, 55, 38, .08);
}

html[data-theme="light"] .tarif-card.is-featured {
  background: linear-gradient(180deg, #f0fbef, #fff);
  box-shadow: 0 0 0 1px rgba(40, 121, 67, .2), 0 16px 38px rgba(40, 121, 67, .14);
}

html[data-theme="light"] .tarif-card.is-premium {
  background: linear-gradient(180deg, #f7f1fd, #fff);
}

html[data-theme="light"] .reward-node-card[data-reward-tier="standard"] {
  background: linear-gradient(180deg, #f7f1fd, #fff);
}

html[data-theme="light"] .reward-node-card[data-reward-tier="premium"] {
  --tier: #a9791a;
  background: linear-gradient(180deg, #fdf6e6, #fff);
}

html[data-theme="light"] .tarif-features li,
html[data-theme="light"] .reward-node-card ul { color: #33463b; }

html[data-theme="light"] .plans-board .pricing-card {
  border-color: rgba(40, 75, 52, .15);
  background: rgba(255, 255, 252, .96);
  box-shadow: 0 10px 28px rgba(29, 55, 38, .08);
}

/* Тёмная подложка знака узла на белой карточке читается как дыра. */
html[data-theme="light"] .reward-node-mark {
  border-color: color-mix(in srgb, var(--tier) 40%, transparent);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tier) 16%, transparent), rgba(255, 255, 255, .96) 70%);
}

html[data-theme="light"] .plans-board-note,
html[data-theme="light"] .rewards-board-note {
  background: #fff;
  color: #33463b;
}

html[data-theme="light"] .tarif-cta { color: #17231b; }
html[data-theme="light"] .tarif-card.is-featured .tarif-cta { color: #06180a; }
html[data-theme="light"] .tarif-card.is-premium .tarif-cta { color: #fdf7ff; }

/* ── Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .plans-board,
  .rewards-board { padding: 38px 0 42px; }
  .plans-board-head h2,
  .rewards-board-head h2 { font-size: 24px; }
  .tarif-grid,
  .reward-node-grid { gap: 14px; }
  .tarif-card { padding: 22px 17px 18px; }
  .tarif-price { font-size: 25px; }
  .reward-node-yield b { font-size: 23px; }
}

@media (max-width: 1100px) {
  .plans-board .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .plans-board .pricing-grid,
  .tarif-grid,
  .reward-node-grid { grid-template-columns: 1fr; }
  .plans-board .pricing-card > p { min-height: 0; }
  .tarif-card.is-featured { order: -1; }
  .plans-board-head,
  .rewards-board-head { margin-bottom: 20px; }
  .plans-board-head h2,
  .rewards-board-head h2 { font-size: 21px; }
  .reward-node-mark { width: 66px; height: 66px; margin: 14px 0 12px; }
  .reward-node-mark svg { width: 30px; height: 30px; }
}

/* ═══ Правки по замечаниям владельца от 8 августа 2026 ═══════════════ */

/* ── Пять столпов: бейджи эталона вместо контурных глифов ─────────────
   На 02_homepage_8K_1200dpi.png в карточке стоит светящийся щит/бейдж без
   рамки, а не тонкая линия внутри шестиугольника. Эти бейджи уже лежали
   готовыми в assets/reference-icons и просто не были подключены. */

.pillar-card {
  height: 246px !important;
  padding: 20px 14px 14px !important;
}

.pillar-card h3 { margin: 0 0 8px !important; font-size: 14.5px !important; line-height: 1.2; }
.pillar-card p { font-size: 9.5px !important; line-height: 1.52 !important; }

/* ── Экосистема: убраны всплывающие панели поверх иллюстрации ─────────
   Две накладки («Топология не публикуется» и заметка о приватности) сидели
   поверх картинки и над колонкой текста — они и читались как прыгающие
   окна. Оговорка перенесена в одну спокойную строку под иллюстрацией. */
.network-section .split-layout { align-items: start; }

.network-caption {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 9px;
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.55;
}

.network-caption svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-top: 1px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.network-map-note, .network-private-note { display: none !important; }

/* ── Карточки платформ: свой цвет у каждой системы ────────────────────
   Одинаковый зелёный контур у всех пяти делал ряд неразличимым. */
.download-platform-card {
  --platform: #9dff71;
  padding: 17px 13px 14px !important;
  border-color: rgba(150, 184, 165, .24) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(9, 21, 16, .96), rgba(3, 10, 8, .97)) !important;
}

.download-platform-card[data-download-platform="windows"] { --platform: #4aa8ff; }
.download-platform-card[data-download-platform="macos"] { --platform: #e8eff4; }
.download-platform-card[data-download-platform="linux"] { --platform: #f7c948; }
.download-platform-card[data-download-platform="ios"] { --platform: #c08aff; }
.download-platform-card[data-download-platform="android"] { --platform: #7ee787; }

.platform-mark {
  width: 58px !important;
  height: 58px !important;
  margin-bottom: 12px !important;
  border: 1px solid color-mix(in srgb, var(--platform) 34%, transparent) !important;
  border-radius: 17px !important;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--platform) 20%, transparent), rgba(4, 13, 9, .5) 70%) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--platform) 16%, transparent) !important;
  color: var(--platform) !important;
}

.platform-mark svg { width: 27px !important; height: 27px !important; }
.download-platform-card h3 { color: #eef5ef !important; font-size: 13px !important; }

.download-platform-card button {
  border-color: color-mix(in srgb, var(--platform) 26%, transparent) !important;
  border-radius: 9px !important;
}

/* ── Картинки в карточках тарифов и узлов ─────────────────────────────
   Владелец просил карточки с картинками: каждая несёт свой кадр из
   images/exampledesign, а не общий фон блока. */
.tarif-card { overflow: visible; padding-top: 0 !important; }

.tarif-card-art {
  display: block;
  height: 124px;
  margin: 0 -22px 15px;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
}

.tarif-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarif-badge { z-index: 3; top: -11px; }

.reward-node-card { overflow: hidden; padding-top: 20px !important; }

.reward-node-art {
  display: block;
  width: calc(100% + 40px);
  height: 142px;
  margin: 14px -20px 0;
  overflow: hidden;
}

.reward-node-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Знак роли ложится медальоном на нижний край кадра. */
.reward-node-mark {
  position: relative;
  z-index: 2;
  width: 62px;
  height: 62px;
  margin: -31px 0 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tier) 24%, transparent), rgba(3, 11, 8, .96) 66%),
    rgba(3, 11, 8, .96);
}

.reward-node-mark svg { width: 28px; height: 28px; }
.reward-node-card h3 { margin-top: 14px; }

/* ── Эпохи ────────────────────────────────────────────────────────────
   «Путь впереди» переименован по смыслу: видно, в какой эпохе сеть. */
.epochs .epoch-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  padding: 5px 12px;
  border: 1px solid rgba(183, 104, 255, .45);
  border-radius: 999px;
  color: #d3e0d6;
  font-size: 9.5px;
}

.epochs .epoch-now i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 11px var(--purple);
}

.epochs .epoch-now b { color: var(--green); font-weight: 700; }
.epochs .roadmap-line li { height: auto !important; min-height: 138px; padding: 13px !important; }
.epochs .roadmap-line small b { color: #d7e5db; font-weight: 700; }
.epochs .roadmap-line li.current { border-color: rgba(183, 104, 255, .5) !important; }

.epochs .roadmap-line li em {
  position: absolute;
  top: 11px;
  right: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--purple);
  color: #17072a;
  font-size: 6.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Светлая тема для добавленного ────────────────────────────────── */
html[data-theme="light"] .download-platform-card[data-download-platform="macos"] { --platform: #4a5a63; }
html[data-theme="light"] .download-platform-card[data-download-platform="linux"] { --platform: #a5811a; }
html[data-theme="light"] .network-caption { color: #4d6655; }
html[data-theme="light"] .epochs .epoch-now { color: #33463b; }

html[data-theme="light"] .reward-node-mark {
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tier) 16%, transparent), #fff 66%),
    #fff;
}

@media (max-width: 900px) {
  .pillar-card { height: 232px !important; }
  .tarif-card-art { height: 108px; }
  .reward-node-art { height: 124px; }
}

@media (max-width: 720px) {
  .tarif-card-art { height: 128px; }
  .reward-node-art { height: 150px; }
}

/* Бейджи нарисованы неоном по тёмному: на белой карточке их свечение читается
   как грязное пятно. В светлой теме под них кладётся тёмный медальон. */

/* ═══ Правки 8 августа 2026, вторая итерация ═════════════════════════ */

/* ── Столпы: карточка целиком иллюстрация ────────────────────────────
   Иконки владельцу не подошли. Вместо бейджа кадр во всю карточку,
   у каждой свой, с градиентом под текст. */
.pillar-card { position: relative; display: flex !important; flex-direction: column; overflow: hidden; justify-content: flex-end !important; }

.pillar-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.pillar-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2, 9, 7, .28) 0%, rgba(2, 9, 7, .74) 46%, rgba(2, 9, 7, .95) 100%);
}

.pillar-card > :not(.pillar-art) { position: relative; z-index: 2; }
.pillar-card h3 { margin: 0 0 6px !important; font-size: 14.5px !important; }
.pillar-card p { margin: 0 0 9px !important; font-size: 9.5px !important; }



/* ── Низ страницы: картинка эталона ──────────────────────────────────
   На 02_homepage_8K_1200dpi.png закрывающий экран — светящийся зелёный
   портал, а не тёмный лес, который стоял здесь раньше. */
.mp-final { position: relative; overflow: hidden; }

.final-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.final-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

.mp-final .final-inner {
  position: relative;
  z-index: 2;
  background: none !important;
}

.mp-final .final-inner::after {
  background: linear-gradient(90deg, rgba(2, 9, 7, .96) 0%, rgba(2, 9, 7, .88) 44%, rgba(2, 9, 7, .18) 78%, rgba(2, 9, 7, .05) 100%) !important;
}

/* ── Шапка: кнопки были разной высоты ────────────────────────────────
   .button держал min-height:42px, а .button.compact — height:32px.
   min-height выигрывает, поэтому «Войти» и «Начать бесплатно» стояли
   выше селектора языка и переключателя темы. */
.mp-nav .button.compact,
.mp-nav .language-select,
.mp-nav .theme-toggle,
.mp-nav .menu-toggle {
  height: 34px !important;
  min-height: 34px !important;
  align-self: center;
}

.mp-nav .nav-actions { align-items: center !important; }

/* ── Светлая тема ──────────────────────────────────────────────────── */
html[data-theme="light"] .pillar-card::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(250, 252, 250, .82) 44%, rgba(250, 252, 250, .97) 100%);
}

html[data-theme="light"] .mp-final .final-inner::after {
  background: linear-gradient(90deg, rgba(245, 248, 245, .97) 0%, rgba(245, 248, 245, .9) 44%, rgba(245, 248, 245, .2) 78%, rgba(245, 248, 245, .05) 100%) !important;
}


@media (max-width: 720px) {
  .tarif-grid { grid-template-columns: 1fr; }
  .pillar-card { height: 210px !important; }
}

/* Текст столпа прижат к низу кадра: сверху картинка должна быть видна. */
.pillar-card h3 { margin-top: auto !important; }
.pillar-card a { margin-top: 0 !important; }

.pillar-card::before {
  background: linear-gradient(180deg, rgba(2, 9, 7, .06) 0%, rgba(2, 9, 7, .5) 40%, rgba(2, 9, 7, .93) 76%, rgba(2, 9, 7, .97) 100%);
}

html[data-theme="light"] .pillar-card::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(250, 252, 250, .72) 40%, rgba(250, 252, 250, .97) 78%);
}

/* Кадры столпов сняты с тёмных иллюстраций: без подсветки под градиентом
   от картинки остаётся почти чёрный прямоугольник. */
.pillar-art img { filter: brightness(1.3) saturate(1.08); }

.pillar-card::before {
  background: linear-gradient(180deg, rgba(2, 9, 7, 0) 0%, rgba(2, 9, 7, .32) 36%, rgba(2, 9, 7, .88) 72%, rgba(2, 9, 7, .97) 100%);
}

html[data-theme="light"] .pillar-art img { filter: brightness(1.12) saturate(1.05); }

html[data-theme="light"] .pillar-card::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 252, 250, .6) 36%, rgba(250, 252, 250, .96) 74%);
}

/* Кадр закрывающего экрана лежит внутри карточки, а не под всей секцией:
   на эталоне он ограничен той же скруглённой рамкой. */
.mp-final .final-inner { position: relative; overflow: hidden; border-radius: 14px; }
.mp-final .final-art { position: absolute; inset: 0; z-index: 0; }
.mp-final .final-inner > div { position: relative; z-index: 2; }

/* Плавная растяжка затемнения: жёсткая граница читалась как шов по центру. */
.mp-final .final-inner::after {
  background: linear-gradient(90deg, rgba(2, 9, 7, .97) 0%, rgba(2, 9, 7, .93) 26%, rgba(2, 9, 7, .78) 46%, rgba(2, 9, 7, .42) 64%, rgba(2, 9, 7, .12) 82%, rgba(2, 9, 7, .04) 100%) !important;
}

html[data-theme="light"] .mp-final .final-inner::after {
  background: linear-gradient(90deg, rgba(245, 248, 245, .98) 0%, rgba(245, 248, 245, .95) 26%, rgba(245, 248, 245, .82) 46%, rgba(245, 248, 245, .46) 64%, rgba(245, 248, 245, .14) 82%, rgba(245, 248, 245, .04) 100%) !important;
}

/* ═══ Правки 8 августа 2026, третья итерация ═════════════════════════ */

/* ── Тарифы: шесть услуг одним рядом, текст лежит на картинке ─────────
   «Картинка в размер карточки» значит именно это: кадр занимает карточку
   целиком, а заголовок, цена и список читаются поверх него. */
.tarif-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px;
}

.tarif-card {
  position: relative;
  min-height: 372px;
  overflow: hidden;
  padding: 0 !important;
  border-radius: 14px;
}

.tarif-card-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.tarif-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tarif-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2, 9, 7, .1) 0%, rgba(2, 9, 7, .62) 34%, rgba(2, 9, 7, .93) 62%, rgba(2, 9, 7, .97) 100%);
}

.tarif-card.is-featured::after {
  background: linear-gradient(180deg, rgba(6, 24, 11, .1) 0%, rgba(6, 24, 11, .6) 34%, rgba(4, 20, 9, .93) 62%, rgba(4, 20, 9, .97) 100%);
}

.tarif-card.is-premium::after {
  background: linear-gradient(180deg, rgba(12, 6, 22, .1) 0%, rgba(12, 6, 22, .6) 34%, rgba(8, 4, 16, .93) 62%, rgba(8, 4, 16, .97) 100%);
}

.tarif-body {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: 372px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 15px 13px 14px;
}

.tarif-card h3 { font-size: 12.5px !important; line-height: 1.25; }
.tarif-price { margin: 7px 0 0 !important; font-size: 21px !important; gap: 4px; }
.tarif-price i { font-size: 9px; }
.tarif-price small { font-size: 8.5px; }
.tarif-features { margin: 11px 0 0 !important; padding: 11px 0 0 !important; gap: 6px; }
.tarif-features li { gap: 6px; font-size: 8.7px; line-height: 1.35; }
.tarif-features svg { width: 11px; height: 11px; stroke-width: 2.1; }
.tarif-features + .tarif-cta { margin-top: 12px; }
.tarif-cta { min-height: 33px; padding: 8px 9px; gap: 6px; border-radius: 8px; font-size: 9px; }
.tarif-cta svg { width: 12px; height: 12px; }
.tarif-badge { top: 10px; right: 10px; left: auto; z-index: 4; padding: 3px 9px; font-size: 7px; transform: none; }

/* ── Узлы: карточки ниже, кадр во всю карточку ───────────────────────── */
.reward-node-card {
  position: relative;
  min-height: 268px;
  overflow: hidden;
  padding: 0 !important;
  border-radius: 14px;
}

.reward-node-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
}

.reward-node-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.reward-node-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2, 9, 7, .12) 0%, rgba(2, 9, 7, .6) 32%, rgba(2, 9, 7, .93) 62%, rgba(2, 9, 7, .97) 100%);
}

.reward-node-card > :not(.reward-node-art) { position: relative; z-index: 2; }

.reward-node-head { padding: 16px 18px 0; }
.reward-node-card h3 { margin: 0 !important; font-size: 14px !important; }
.reward-node-tag { margin-top: 4px; font-size: 9.5px; }
.reward-node-mark { display: none; }

.reward-node-yield {
  width: calc(100% - 36px);
  margin: auto auto 0;
  padding-top: 11px;
}

.reward-node-yield b { margin-top: 3px; font-size: 22px; }
.reward-node-card ul { width: calc(100% - 36px); margin: 11px auto 14px; gap: 5px; font-size: 9px; }
.reward-node-card .tarif-cta { width: calc(100% - 36px); margin: 0 auto 16px; min-height: 32px; font-size: 9px; }

/* ── Светлая тема для карточек-картинок ──────────────────────────────── */
html[data-theme="light"] .tarif-card,
html[data-theme="light"] .reward-node-card { background: #fff; }

html[data-theme="light"] .tarif-card::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(252, 254, 252, .72) 34%, rgba(252, 254, 252, .96) 62%, #fff 100%);
}

html[data-theme="light"] .tarif-card.is-featured::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(240, 251, 239, .74) 34%, rgba(240, 251, 239, .97) 62%, #f4fdf3 100%);
}

html[data-theme="light"] .tarif-card.is-premium::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(247, 241, 253, .74) 34%, rgba(247, 241, 253, .97) 62%, #faf6fe 100%);
}

html[data-theme="light"] .reward-node-card::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(252, 254, 252, .72) 32%, rgba(252, 254, 252, .96) 62%, #fff 100%);
}

/* ── Строка дистрибутивов Linux ──────────────────────────────────────── */
.distro-list {
  min-height: 35px !important;
  color: #b6c4bb !important;
  font-size: 8.5px !important;
  letter-spacing: .01em;
  text-align: center;
}

html[data-theme="light"] .distro-list { color: #4d6655 !important; }

@media (max-width: 1180px) {
  .tarif-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 720px) {
  .tarif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tarif-card { min-height: 330px; }
  .tarif-body { min-height: 330px; }
  .reward-node-grid { grid-template-columns: 1fr; }
}

/* Кадры узлов сняты с тёмных сцен — под градиентом они пропадали. */
.reward-node-art img { filter: brightness(1.34) saturate(1.08); }

.reward-node-card::after {
  background: linear-gradient(180deg, rgba(2, 9, 7, 0) 0%, rgba(2, 9, 7, .34) 30%, rgba(2, 9, 7, .88) 58%, rgba(2, 9, 7, .97) 100%);
}

.tarif-card-art img { filter: brightness(1.18) saturate(1.05); }

/* Портал должен попадать в правую половину карточки, а не под текст. */
.mp-final .final-art img { object-position: 50% 50%; }

html[data-theme="light"] .reward-node-art img,
html[data-theme="light"] .tarif-card-art img { filter: brightness(1.1) saturate(1.04); }

html[data-theme="light"] .reward-node-card::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(252, 254, 252, .58) 30%, rgba(252, 254, 252, .95) 58%, #fff 100%);
}

/* Полоса низа выше, иначе портал обрезается по вертикали. */
.mp-final .final-inner { min-height: 236px !important; }
.mp-final .final-art img { object-position: 50% 44%; }

/* Затемнение висело на inset:0 0 0 47% и накрывало ровно правую половину —
   ту, где стоит портал. Слой обязан покрывать карточку целиком. */
.mp-final .final-inner::after { inset: 0 !important; }

/* В светлой теме карточки-иллюстрации нельзя выбелять до пустых прямоугольников.
   Оставляем кадр видимым, а контент переносим на устойчивое тёмное основание. */
html[data-theme="light"] .tarif-card::after {
  background: linear-gradient(180deg, rgba(7, 18, 13, .08) 0%, rgba(7, 18, 13, .28) 30%, rgba(7, 18, 13, .78) 60%, rgba(4, 12, 8, .94) 100%);
}

html[data-theme="light"] .tarif-card.is-featured::after {
  background: linear-gradient(180deg, rgba(10, 34, 15, .08) 0%, rgba(10, 34, 15, .3) 30%, rgba(8, 36, 14, .78) 60%, rgba(4, 20, 8, .95) 100%);
}

html[data-theme="light"] .tarif-card.is-premium::after {
  background: linear-gradient(180deg, rgba(22, 10, 38, .08) 0%, rgba(22, 10, 38, .3) 30%, rgba(22, 10, 38, .78) 60%, rgba(12, 5, 23, .95) 100%);
}

html[data-theme="light"] .reward-node-card::after {
  background: linear-gradient(180deg, rgba(7, 18, 13, .06) 0%, rgba(7, 18, 13, .28) 30%, rgba(7, 18, 13, .8) 60%, rgba(4, 12, 8, .95) 100%);
}

html[data-theme="light"] .tarif-card h3,
html[data-theme="light"] .tarif-card .tarif-price,
html[data-theme="light"] .reward-node-card h3,
html[data-theme="light"] .reward-node-yield > span,
html[data-theme="light"] .reward-node-card ul,
html[data-theme="light"] .tarif-features li {
  color: #f2f8f3;
}

html[data-theme="light"] .tarif-price small,
html[data-theme="light"] .reward-node-yield b small {
  color: #bfd1c3;
}

html[data-theme="light"] .tarif-card:not(.is-featured):not(.is-premium) .tarif-cta,
html[data-theme="light"] .reward-node-card .tarif-cta {
  border-color: rgba(226, 244, 230, .36);
  background: rgba(4, 13, 9, .48);
  color: #f2f8f3;
}

html[data-theme="light"] .tarif-card-art img,
html[data-theme="light"] .reward-node-art img {
  filter: brightness(1.27) saturate(1.1);
}