/* Styles of every page of namelesshero.app (one file, linked from all templates). */
:root {
  --accent:      hsl(217, 71%, 53%);
  --accent-deep: hsl(245, 58%, 51%);
  --ink:         hsl(222, 22%, 18%);
  --hairline:    hsl(220, 20%, 92%);
  /* Точечная сетка и мягкая штриховка — фон секций, инлайновый SVG. */
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23334e9e' opacity='.09'/%3E%3C/svg%3E");
  --mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 59.5h60M59.5 0v60' stroke='%23334e9e' stroke-width='1' opacity='.06'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body { padding-top: 52px; }
section[id] { scroll-margin-top: 52px; }
[id^="help-"] { scroll-margin-top: 64px; }

/* Inter поверх шрифтов Bulma — Bulma задаёт семейства отдельно для
   body, кнопок, полей ввода и заголовков, поэтому перечисляем явно. */
body, .button, .input, .textarea, .select select, .title, .subtitle, .tag, .navbar-item, .navbar-link {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body { color: var(--ink); }
.title, .subtitle { letter-spacing: -.015em; }
.subtitle { margin-top: 1rem; }

.navbar { box-shadow: 0 1px 0 var(--hairline); }
.box {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 10px 26px rgb(16 24 40 / .06);
}

/* ── Чередование фона секций: мягкие градиенты + фоновая сетка ───────── */
.band { position: relative; }
.band > .container { position: relative; z-index: 1; }
.band-hero {
  background:
    radial-gradient(62% 58% at 10% 4%, hsl(232 82% 62% / .17), transparent 62%),
    radial-gradient(52% 52% at 92% 0%, hsl(196 86% 58% / .17), transparent 60%),
    linear-gradient(180deg, hsl(220 60% 99%) 0%, hsl(222 46% 96%) 100%);
}
.band-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--dots); opacity: .7; pointer-events: none;
}
.band-tint  { background: linear-gradient(180deg, hsl(220 44% 98.5%), hsl(222 40% 96.5%)); }
.band-plain { background: #fff; }
.band-mesh  {
  background:
    var(--mesh),
    linear-gradient(180deg, hsl(228 46% 98%), hsl(226 40% 96%));
}

/* ── Таблица команд ─────────────────────────────────────────────────── */
.cmd-table td { vertical-align: middle; }
.cmd-table a code { color: var(--accent); }
.cmd-table tr.is-off td { opacity: .62; }

/* ── Тарифы ─────────────────────────────────────────────────────────── */
.plan-card { height: 100%; display: flex; flex-direction: column; }
.plan-card .plan-features { flex-grow: 1; list-style: none; margin: 0; }
.plan-features li {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .32rem 0; border-top: 1px solid var(--hairline);
}
.plan-features li:first-child { border-top: 0; }
.plan-features .mark { flex: 0 0 1.25rem; font-weight: 700; line-height: 1.5; text-align: center; }
.plan-features .yes .mark { color: hsl(153 53% 40%); }
.plan-features .no  { color: hsl(0 0% 55%); }
.plan-features .no .mark { color: hsl(0 0% 72%); }

/* ── Память и история: фоновые картинки в плашках ───────────────────── */
.mem-card { position: relative; overflow: hidden; }
.mem-card > * { position: relative; z-index: 1; }
.mem-card::after {
  content: ''; position: absolute; right: -6px; bottom: -12px;
  width: 116px; height: 116px; opacity: .3; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.mem-on::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%232f9e6e' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='56' height='26' rx='10'/%3E%3Crect x='36' y='42' width='56' height='26' rx='10'/%3E%3Crect x='8' y='76' width='56' height='18' rx='9'/%3E%3Cpath d='M34 34v8M64 68v8'/%3E%3C/svg%3E");
}
.mem-off::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23b5860b' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='56' height='26' rx='10' stroke-dasharray='7 9'/%3E%3Crect x='36' y='42' width='56' height='26' rx='10'/%3E%3Crect x='8' y='76' width='56' height='18' rx='9' stroke-dasharray='7 9'/%3E%3C/svg%3E");
}

/* ── Карточки моделей ───────────────────────────────────────────────── */
.model-card { height: 100%; border-left: 4px solid var(--accent); }
.model-card .model-list {
  font-size: .78rem; color: hsl(0 0% 45%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.model-card.is-off { background: hsl(0 0% 98.5%); }

/* ── Prefooter — блок призыва перед футером (разный на разных страницах) ─────────────────────────────────── */
.prefooter {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(68% 120% at 14% 0%, rgb(255 255 255 / .2), transparent 58%),
    linear-gradient(135deg, hsl(245 62% 55%) 0%, hsl(268 58% 55%) 52%, hsl(212 78% 50%) 100%);
}
.prefooter::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='3' cy='3' r='1.6' fill='%23ffffff' opacity='.2'/%3E%3C/svg%3E");
}
.prefooter .container { position: relative; z-index: 1; }
.prefooter .title, .prefooter .subtitle, .prefooter p { color: #fff; }
.prefooter .subtitle { color: rgb(255 255 255 / .82); }
.prefooter .lead { font-size: 1.2rem; line-height: 1.55; margin: 0 auto 1.5rem; max-width: 46rem; color: rgb(255 255 255 / .92); }
.prefooter .lead.is-small { font-size: 1.02rem; }
.prefooter [id] { scroll-margin-top: 52px; }

/* ── Hero: во всю высоту экрана + «матрица» на фоне ─────────────────── */
/* 52px — высота фиксированного navbar, она же body{padding-top}. svh спасает
   от прыжка адресной строки в мобильных браузерах. */
#about { min-height: calc(100vh - 52px); overflow: hidden; }
@supports (height: 100svh) { #about { min-height: calc(100svh - 52px); } }
#about .hero-body { position: relative; z-index: 1; display: flex; align-items: center; }
#about .hero-body > .container { width: 100%; }
/* Мягкая «прогалина» под текстом: канвас остаётся фоном, но прямо под
   заголовком и подзаголовком глифы приглушены — читать не мешает.
   z-index:-1 работает внутри контекста наложения .hero-body (z-index:1),
   поэтому вуаль всегда выше канваса и ниже текста. */
#about .hero-body::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 40% at 50% 45%, hsl(220 60% 99% / .93), transparent 72%);
}
#matrix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* Больше воздуха между строками — по просьбе владельца. */
#about .subtitle { line-height: 2.05; }
#about .buttons { row-gap: .75rem; }
/* На телефоне выпадашки встают 2×2, а не в столбик, и hero остаётся
   в пределах одного экрана. Поля ввода тянем на всю ширину колонки. */
@media screen and (max-width: 768px) {
  #about .hero-body { padding-top: 1.75rem; padding-bottom: 1.75rem; }
  #about #model-dropdowns { margin-top: 1.5rem !important; margin-bottom: .75rem !important; }
  /* Bulma правит ширину селектором `.columns.is-mobile > .column.is-narrow`,
     поэтому перебиваем его такой же специфичностью, иначе колонки встают
     в столбик: содержимое шире половины экрана. */
  #about #model-dropdowns.columns.is-mobile > .column.is-narrow { flex: none; width: 50%; }
  #about #model-dropdowns .field, #about #model-dropdowns .control,
  #about #model-dropdowns .select, #about #model-dropdowns .select select { width: 100%; }
  #about #model-dropdowns .select select { font-size: .82rem; padding-left: .6em; }
  #about .subtitle { line-height: 1.9; }
}

/* ── Образцы генерации в карточках моделей ───────────────────────────── */
/* Кадр у всех трёх файлов ровно 16:10 и перекадрировать его нельзя (указание
   владельца), поэтому рамка тоже 16:10, а contain страхует от файла с другими
   пропорциями: он впишется целиком, а не обрежется. */
.model-card .sample {
  display: block; margin: 0 0 .85rem; border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 10; background: hsl(220 20% 95%);
  box-shadow: inset 0 0 0 1px rgb(16 24 40 / .06);
  cursor: zoom-in;
}
.model-card .sample img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sample-prompt code { overflow-wrap: anywhere; }

/* ── Лайтбокс: картинка в натуральную величину поверх страницы ─────────── */
/* z-index выше bulma-модалки (40) и фиксированного навбара (30). */
.lightbox {
  position: fixed; inset: 0; z-index: 60; padding: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  background: rgb(10 14 28 / .84); cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
  margin: 0; cursor: default; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.lightbox-figure img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: calc(100vh - 7rem);
  border-radius: 8px; background: hsl(220 20% 95%);
  box-shadow: 0 14px 44px rgb(0 0 0 / .45);
}
.lightbox figcaption {
  color: hsl(0 0% 100% / .88); font-size: .8rem; line-height: 1.5;
  text-align: center; max-width: 60ch;
}
.lightbox-close {
  position: absolute; top: .7rem; right: .85rem;
  width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .14); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover, .lightbox-close:focus-visible { background: rgb(255 255 255 / .28); }
@supports (height: 100svh) {
  .lightbox-figure img { max-height: calc(100svh - 7rem); }
}
/* На телефоне поля съедали бы почти весь выигрыш от увеличения: миниатюра там
   и так почти во всю ширину. Поэтому картинка открывается от края до края. */
@media screen and (max-width: 600px) {
  .lightbox { padding: 0 0 .75rem; }
  .lightbox-figure img { border-radius: 0; }
  .lightbox figcaption { padding: 0 1rem; }
}

/* Длинные заголовки релизов иначе уезжают за край на телефоне:
   у Bulma .level-item не сжимается, а .level.is-mobile не переносит строку. */
#changelog .level-left, #changelog .level-item { min-width: 0; flex-shrink: 1; }
#changelog .level-item .has-text-weight-semibold { overflow-wrap: anywhere; }
#changelog .level-right { flex-shrink: 0; margin-left: .75rem; white-space: nowrap; }
@media screen and (max-width: 768px) {
  #changelog .level.is-mobile { display: block; }
  #changelog .level.is-mobile .level-right { margin-left: 0; margin-top: .25rem; }
}

/* ── Меню: текущая страница ─────────────────────────────────────────────── */
.navbar-item.is-active, .navbar-item.is-active:hover { color: var(--accent); font-weight: 600; background: transparent; }
@media screen and (max-width: 1023px) { .navbar-menu { box-shadow: 0 8px 16px rgb(10 10 10 / .08); } }

/* ── Футер (общий для всех страниц) ─────────────────────────────────────── */
.site-footer { border-top: 1px solid #ededed; background: #fafafa; }
.site-footer p { font-size: .75rem; line-height: 1.6; }

/* ── Внутренние страницы: дневник, журнал, статьи, политика ─────────────── */
.page { background: linear-gradient(180deg, hsl(220 44% 98.5%), hsl(222 40% 96.5%)); }
.post-card { overflow: hidden; padding: 0; }
.post-card .post-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; background: hsl(220 20% 95%); }
.post-card a.post-link { color: inherit; display: block; }
.post-card .post-body { padding: 1.25rem 1.5rem; }
.article .content { font-size: 1.02rem; line-height: 1.75; }
.article .content h2 { font-size: 1.25rem; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }
.article figure { margin: 1.25rem auto; text-align: center; }
.article figure img { display: inline-block; max-width: min(100%, 440px); height: auto; border-radius: 10px; box-shadow: 0 1px 2px rgb(16 24 40 / .06), 0 8px 22px rgb(16 24 40 / .1); }
.article figure a[data-lightbox] { cursor: zoom-in; }
/* Баннер-призыв в конце статьи: текст слева (2rem), картинка с роботом справа */
.cta-banner { margin-top: 3rem; border-radius: 15px; overflow: hidden; background: #cfe6fb url('/actionwise-image.webp') right bottom / cover no-repeat; }
.cta-banner .cta-content { padding: 2rem; min-height: 380px; max-width: 62%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.25rem; }
.cta-banner .cta-title { font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1.25; font-weight: 700; margin: 0; }
@media screen and (max-width: 600px) { .cta-banner .cta-content { max-width: 62%; min-height: 240px; } }
.policy .content h3 { font-size: 1.05rem; margin-top: 2rem; margin-bottom: .6rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.policy .content h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.policy .content { font-size: .95rem; line-height: 1.75; }
.policy .content li + li { margin-top: .5rem; }


/* ── Статья «Выбор ИИ модели»: карточки вендоров ────────────────────────── */
.vendor-head { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.vendor-logo { height: 30px; width: 30px; object-fit: contain; flex: none; }
.vendor-name { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.vendor-name a { color: inherit; }
.vendor-site { font-size: .8rem; color: hsl(220 10% 45%); }
.vendor-box { height: 100%; border-top: 3px solid var(--vendor, var(--accent)); }
.vendor-box h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: hsl(220 10% 45%); margin: 1rem 0 .35rem; font-weight: 600; }
.vendor-box ul { margin: 0 0 0 1.1rem; font-size: .92rem; }
.vendor-box .strength { font-weight: 600; margin-bottom: .4rem; }
.compare-table { width: 100%; font-size: .95rem; }
.compare-table td, .compare-table th { vertical-align: middle; }
.compare-table .vendor-logo { height: 22px; width: 22px; margin-right: .55rem; vertical-align: -5px; }
.article-rich h2.title { margin-top: 2.75rem; }
.article-rich .lead-p { font-size: 1.08rem; line-height: 1.7; }