/* Згенеровано фабрикою (news-skin-cli) — не редагувати вручну. */
:root {
  --navy: #101112;
  --navy-deep: #101112;
  --navy-light: #17181a;
  --dark-teal: #101112;
  --teal: #6fd0c5;
  --teal-dark: #087e73;
  --cyan: #6fd0c5;
  --text: #f4f5f6;
  --muted: #9ba1a8;
  --accent: #6fd0c5;
  --ink-dark: #08110e;
  --teal-border: color-mix(in srgb, #6fd0c5 26%, transparent);
  --teal-border-h: color-mix(in srgb, #6fd0c5 52%, transparent);
  --card-hover: color-mix(in srgb, #6fd0c5 12%, transparent);
}

body,
h1, h2, h3, h4, h5, h6,
button, input, textarea, select {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Ґрунт і текст сторінки — завжди з фабричної палітри: деякі клони мають
   власні вшиті редизайни (light-скіни), які інакше просвічують. Селектори
   з класами (body.page тощо) потрібні, бо легасі-теми задають ґрунт саме так
   і виграють специфічністю у плоского body. */
html body,
html body.home, html body.page, html body.single, html body.archive,
html body.category, html body.tag, html body.search {
  background: #101112 !important;
  color: #f4f5f6 !important;
}

/* Легасі-теми малюють фіксований темний шар html::before поверх усього. */
html::before, html::after {
  content: none !important;
  background: transparent !important;
}

/* Контейнери легасі-тем зі своїм вшитим ґрунтом і світлим текстом. */
#page, .site, .site-content, .content-area,
.inside-article, .entry-content, .post-inner,
article.post, article.page,
.single-body, .igng-article-body {
  background: transparent !important;
  background-color: transparent !important;
  color: #f4f5f6 !important;
}

/* Текст новинного контуру — кольори палітри, а не легасі-теми. */
main h1, main h2, main h3, main h4, main h5, main h6 {
  color: #f4f5f6 !important;
}
main p, main li, main td, main th, main figcaption {
  color: #f4f5f6;
}
main .igng-article-body p, main .igng-article-body li,
main .single-body p, main .single-body li,
main .entry-content p, main .entry-content li {
  color: #f4f5f6 !important;
}
main blockquote {
  color: #9ba1a8 !important;
  border-left: 3px solid color-mix(in srgb, #6fd0c5 40%, transparent);
  background: #17181a !important;
}
main a:not(.button):not(.news-card-more):not(.news-card-cat):not(.filter-tab) {
  color: #6fd0c5;
}
main pre, main code {
  background: #17181a !important;
  color: #f4f5f6 !important;
}

/* Сторінка статті: hero, службові підписи і легасі-компоненти → палітра. */
.single-hero {
  background-color: #101112 !important;
}
.single-excerpt, .post-date, .post-read,
.article-toc__title, .nav-title, .widget-desc,
.sidebar-recent-cat, .sidebar-recent-date,
.igng-expert-comment__position, .igng-authorbox__position,
.article-faq__answer, .pillar-mention-desc {
  color: #9ba1a8 !important;
}
.sidebar-recent-title, .igng-expert-comment__name,
.igng-service-cta__pitch,
.igng-authorbox p, .igng-expert-comment__card p,
main summary, main td, main th, main strong {
  color: #f4f5f6 !important;
}
/* Темні картки легасі-статей → фабрична поверхня. */
nav.article-toc, main table, main tr, main td, main th,
.igng-expert-comment__card, section.article-faq,
.igng-service-cta__inner, aside.igng-authorbox,
.sidebar-widget, aside.pillar-mention,
.article-sources, .single-related-card {
  background: #17181a !important;
  background-color: #17181a !important;
  border-color: #2a2d31 !important;
}
main table, main td, main th {
  border-color: #2a2d31 !important;
}

.hero, .hero-inner, .hero-home, .fc-hero {
  background-color: #101112 !important;
}

.hero h1, .hero-inner h1, .hero-home h1 {
  color: #f4f5f6 !important;
}

.hero-description {
  color: #9ba1a8 !important;
}

/* Старий WebGL-фон ховаємо: він заливав hero суцільним кольором поверх сітки. */
.vanta-bg { display: none !important; }

/* Компактні узгоджені висоти hero на внутрішніх сторінках. */
.hero.hero-inner {
  min-height: 0 !important;
  padding: 72px 24px 56px !important;
}

.hero.hero-home {
  min-height: 0 !important;
  padding: 96px 24px 72px !important;
}

.hero-author {
  padding-top: 72px !important;
  padding-bottom: 48px !important;
}

/* Фон hero новинного контуру — фірмовий патерн палітри сайту. */
.hero,
.hero-inner,
.hero-home,
.hero-author,
.single-hero,
.fh-hero,
.fc-hero {
  background-image:
    linear-gradient(color-mix(in srgb, #6fd0c5 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #6fd0c5 16%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Старі декоративні оверлеї hero (смуги/градієнти тем клонів) — геть. */
.hero::before, .hero::after,
.hero-inner::before, .hero-inner::after,
.hero-home::before, .hero-home::after,
.hero-content::before, .hero-content::after {
  display: none !important;
}

.hero-content {
  background: transparent !important;
}

/* Пагінація у фабричному стилі. */
.news-pagination {
  margin-top: 40px;
}

.news-pagination a,
.news-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  margin-right: 6px;
  border: 1px solid #2a2d31;
  border-radius: 8px;
  color: #f4f5f6 !important;
  text-decoration: none !important;
}

.news-pagination .active,
.news-pagination a:hover {
  border-color: #6fd0c5;
  color: #6fd0c5 !important;
}

/* Відступи стрічки: hero→таби 48, таби→сітка 36, картки 16. */
.news-grid {
  gap: 16px !important;
}

.news-layout {
  gap: 32px;
}

/* Фабричні картки новин: image-free, mist-поверхня, акцентна ліва рамка. */
.news-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 26px 28px;
  border: 1px solid #2a2d31;
  border-left: 3px solid color-mix(in srgb, #6fd0c5 30%, transparent);
  border-radius: 8px;
  background: #17181a;
  transition: border-color .16s ease;
}

.news-card:hover {
  border-left-color: color-mix(in srgb, #6fd0c5 60%, transparent);
}

/* Вся картка клікабельна: stretched link від заголовка. */
.news-card { position: relative; }

.news-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.news-card-top .news-card-cat { position: relative !important; z-index: 2; }

.news-card-thumb { display: none !important; }

.news-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
}

.news-card-top .news-card-cat,
.news-card-top .news-card-date {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1 !important;
  transform: none !important;
  inset: auto !important;
}

.news-card-cat {
  position: static !important;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px !important;
  border: 1px solid color-mix(in srgb, #6fd0c5 40%, transparent);
  border-radius: 999px;
  background: transparent !important;
  color: #6fd0c5 !important;
  line-height: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
}

.news-card-date {
  color: #9ba1a8;
  font-size: 12px;
}

.news-card-title { margin: 0; }

.news-card-title a {
  color: #f4f5f6 !important;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-decoration: none !important;
}

.news-card-title a:hover { color: #6fd0c5 !important; }

.news-excerpt {
  margin: 0;
  color: #9ba1a8;
  font-size: 14px;
  line-height: 1.6;
}

.news-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.news-read { color: #9ba1a8; font-size: 12px; }

.news-card-more {
  color: #6fd0c5 !important;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none !important;
}

/* Вкладки стрічки: radio-таби без переходів. */
.news-tabs .news-filter-bar {
  margin-top: 48px;
  margin-bottom: 36px;
}

.nt-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

label.filter-tab { cursor: pointer; user-select: none; }

/* CTA-блок внутрішніх сторінок — фабрична панель (як CallToAction.panel). */
.fh-cta {
  padding-block: 64px;
}

.fh-cta .container {
  max-width: 1288px;
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid #2a2d31;
  border-left: 3px solid color-mix(in srgb, #6fd0c5 40%, transparent);
  border-radius: 8px;
  background: #17181a;
  background-image:
    linear-gradient(color-mix(in srgb, #6fd0c5 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #6fd0c5 8%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  text-align: left;
}

.fh-cta__tag {
  margin-bottom: 16px;
  color: #6fd0c5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fh-cta h2 {
  max-width: 640px;
  margin: 0;
  color: #f4f5f6;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -.04em;
  text-align: left;
}

.fh-cta p {
  max-width: 560px;
  margin: 16px 0 26px;
  color: #9ba1a8;
  line-height: 1.65;
  text-align: left;
}

.fh-cta .btn-primary {
  margin: 0;
}

/* Без підкреслень заголовків і гіперпосилань; hover — кольором. */
a, a:visited { text-decoration: none !important; }
a:hover { text-decoration: none !important; }
h1 a, h2 a, h3 a, h4 a { text-decoration: none !important; }

/* Індекс експертів у фабричному стилі. */
.expert-card__link {
  display: grid;
  justify-items: start;
  gap: 10px;
  height: 100%;
  padding: 22px;
  border: 1px solid #2a2d31;
  border-left: 3px solid color-mix(in srgb, #6fd0c5 30%, transparent);
  border-radius: 8px;
  background: #17181a;
  transition: border-color .16s ease;
}

.expert-card__link:hover {
  border-left-color: color-mix(in srgb, #6fd0c5 60%, transparent);
}

.expert-card__ava,
.expert-card__ava img {
  border-radius: 50%;
  overflow: hidden;
}

.expert-card__name {
  color: #f4f5f6;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.expert-card__pos {
  color: #9ba1a8;
  font-size: 13px;
  line-height: 1.45;
}

.experts-alpha__btn {
  border: 1px solid color-mix(in srgb, #6fd0c5 35%, transparent);
  border-radius: 999px;
  color: #6fd0c5 !important;
  background: transparent;
}

/* Ширина контейнера = фабричний .shell: контент 1240px, поля 24px. */
.container {
  max-width: 1288px;
  padding-left: 24px;
  padding-right: 24px;
}