/* ============================================================
   C-ECO DESIGN SYSTEM v2 «EVERGREEN» (2026-07-22)
   Єдина система для ВСЬОГО сайту. Мова: темний climate-tech —
   глибоке хвойне полотно, смарагд + лайм, кутова геометрія.

   ІМПЛЕМЕНТАЦІЯ ДВОМА ШАРАМИ:
   1) ШАР ТОКЕНІВ — перевизначення змінних теми (:root нижче):
      всі компоненти флагманської теми, що читають var(--teal),
      var(--yellow), var(--muted), var(--grad-*), var(--radius-*),
      автоматично стають Evergreen. Нових сторінок це стосується
      так само — писати їх ТІЛЬКИ на токенах.
   2) ШАР КОМПОНЕНТІВ — сигнатурні форми і точкові перекриття
      там, де тема хардкодить значення або бере !important.

   РОЛІ КОЛЬОРУ (незмінні правила):
   • смарагд  --ec-em      #35C784 — ДІЯ: кнопки, лінки, ховери;
   • світлий  --ec-em-soft #7FE0B2 — акцент у заголовках (.ec-hl,
     .highlight), вторинні лінки;
   • лайм     --ec-lime    #C9F24E — ТІЛЬКИ цифри і метрики
     (моно, tabular-nums). Лайм ніколи не фарбує текст чи кнопки;
   • полотно  #06120C / панелі — білі 4.5–8% зверху полотна.

   ГЕОМЕТРІЯ:
   • СИГНАТУРА «зріз крони» — clip-path зі скошеним верхнім
     правим кутом: --ec-cut (26px) на картках/панелях,
     --ec-cut-sm (14px) на кнопках/чипах. Жодних заокруглених
     капсул (радіуси теми обнулені токенами); кола дозволені
     лише для аватарів і крапок-маркерів.
   • Хедер: НЕ капсула флагмана — «дек» зі зрізом крони +
     градієнт-лінія смарагд→лайм по верхньому краю сторінки.

   ТИПОГРАФІКА:
   • Montserrat (тема); h1 — light 300, h2 — regular 400;
   • цифри/метрики — ui-monospace + tabular-nums (клас .ec-num
     або компонентні правила).

   РЕЄСТР ВЛАСНИХ КОМПОНЕНТІВ (.ec-*): ec-hero, ec-kicker,
   ec-term/ec-stat (▲/−), ec-chip, ec-calc/ec-res, ec-pcard,
   ec-big, ec-btn/ec-btn--ghost, ec-panel, ec-hairline, ec-hl.
   Решта сайту їде на компонентах теми, перефарбованих шарами.
   ============================================================ */

:root {
    --ec-bg: #06120C;
    --ec-bg-2: #0A1A12;
    --ec-panel: rgba(255, 255, 255, 0.045);
    --ec-panel-2: rgba(255, 255, 255, 0.08);
    --ec-solid: #0E2018;
    --ec-border: rgba(255, 255, 255, 0.10);
    --ec-border-2: rgba(120, 220, 170, 0.35);
    --ec-text: #F2F7F4;
    --ec-soft: rgba(235, 245, 240, 0.68);
    --ec-em: #35C784;
    --ec-em-dark: #052015;
    --ec-em-soft: #7FE0B2;
    --ec-lime: #C9F24E;
    --ec-cut: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
    --ec-cut-sm: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

/* ── 0. ШАР ТОКЕНІВ: перевизначення змінних теми ──────────────
   Єдине місце, звідки вся тема (обидва :root site.css) отримує
   Evergreen-палітру. Синюваті відтінки флагмана усунено. */
:root {
    /* полотно і поверхні */
    --navy: var(--ec-bg);
    --navy-deep: #040D08;
    --navy-light: #10241A;
    --dark-teal: #081710;
    --dark-teal-2: #123424;
    --card-bg: var(--ec-panel);
    --card-border: var(--ec-border);
    --card-hover: rgba(53, 199, 132, 0.12);
    --teal-border: rgba(53, 199, 132, 0.28);
    --teal-border-h: rgba(53, 199, 132, 0.55);

    /* акценти: смарагд = дія, лайм = цифри (замість жовтого) */
    --teal: var(--ec-em);
    --teal-dark: #2AA46C;
    --cyan: var(--ec-em-soft);
    --yellow: var(--ec-lime);

    /* текст без синього відливу */
    --text: var(--ec-text);
    --muted: rgba(235, 245, 240, 0.58);
    --text-dim: rgba(235, 245, 240, 0.70);
    --text-faint: rgba(235, 245, 240, 0.50);

    /* градієнти: прибрано сині хвости флагмана */
    --grad-dark-teal: linear-gradient(135deg, #081710 0%, #123424 55%, #0A2A1C 100%);
    --grad-navy: linear-gradient(135deg, #081710 0%, #0E2A1E 100%);

    /* кутова геометрія: жодних заокруглень і пігулок */
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-pill: 0px;
}

/* ── 0b. ШРИФТ-СИГНАТУРА: Fixel (український, MacPaw) ───────
   Тема флагмана всюди на Montserrat. Шапка, заголовки й чипи
   переходять на Fixel — інша родина, інший характер, локальний
   хостинг (жодних CDN). Body-текст лишається на Montserrat. */

@font-face {
    font-family: 'Fixel';
    src: url('/assets/theme/assets/fonts/FixelText-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Fixel';
    src: url('/assets/theme/assets/fonts/FixelText-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Fixel Display';
    src: url('/assets/theme/assets/fonts/FixelDisplay-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Fixel Display';
    src: url('/assets/theme/assets/fonts/FixelDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root { --ec-font-ui: 'Fixel', 'Segoe UI', system-ui, sans-serif;
        --ec-font-display: 'Fixel Display', 'Fixel', 'Segoe UI', system-ui, sans-serif; }

.header-nav a, .header-cta, .mobile-nav a, .mobile-contact-btn, .lang-sw,
h1, h2, h3, .news-card-title, .single-title,
.ec-kicker, .hero-tag, .tag, .filter-tab, .ec-ptag {
    font-family: var(--ec-font-ui);
}

h1, h2, .ec-hero h1, .single-title { font-family: var(--ec-font-display); }

/* ── 1. Полотно ───────────────────────────────────────────── */

html { background: var(--ec-bg); }

body,
body.home, body.page, body.single, body.archive,
body.category, body.tag, body.search {
    background: var(--ec-bg) !important;
    background-color: var(--ec-bg) !important;
    color: var(--ec-text) !important;
}

section { background: transparent; }

.services-section, .news-section, .method-section,
.categories-section, .why-section, .tech-section, .map-section,
.about-section, .segments-teaser-section, .home-competencies-section,
.experts-index, .single-hero, .single-article, .related-posts {
    background: transparent !important;
}

h1, h2, h3, h4, h5 { color: var(--ec-text); }
p { color: inherit; }

/* некласовані лінки не повинні падати в браузерний синій */
a { color: var(--ec-em-soft); }
a:hover { color: var(--ec-em); }

::selection { background: rgba(53, 199, 132, .35); }

/* ── 2. Дисплейна типографіка ─────────────────────────────── */

h1, .single-title {
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.06;
}

h2, .section-header h2 {
    font-weight: 400;
    letter-spacing: -0.015em;
}

h1 .highlight, h2 .highlight, .ec-hl {
    color: var(--ec-em-soft);
    font-style: normal;
    font-weight: 600;
}

.ec-num {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* ── 3. ХЕДЕР: «дек» зі зрізом крони + фірмова лайм-лінія ──
   Свідома відбудова від флагмана: там хедер — заокруглена
   капсула-шелл на смузі. Тут: (1) по самому верху сторінки йде
   градієнт-лінія смарагд→лайм; (2) навігація живе в темній
   скляній панелі з фірмовим зрізом крони, без жодних капсул. */

.header {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    box-shadow: none !important;
}

/* фірмова лінія по верхньому краю сторінки */
.header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ec-em), var(--ec-lime) 45%, transparent 90%);
    pointer-events: none;
}

/* капсулу-шелл теми перетворюємо на панель-«дек» */
.header::before {
    border: 1px solid var(--ec-border-2) !important;
    border-radius: 0 !important;
    clip-path: var(--ec-cut);
    background: rgba(10, 26, 18, 0.78) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.header.scrolled::before {
    background: rgba(6, 18, 12, 0.92) !important;
}

.header-inner { padding: 0 26px; }

/* Лого Evergreen (ceco-logo.svg) намальоване під темне тло —
   жодних фільтрів-вибілювачів не потребує. */

/* Лого в хедері: +30% до базових 32px — інакше знак нечитабельний. */
.header-logo img {
    height: 42px !important;
    width: auto !important;
}

@media (max-width: 900px) {
    .header-logo img { height: 38px !important; }
}

/* ── НАВІГАЦІЯ: власні ефекти (не як у флагмана) ────────────
   Сигнатура: під пунктом росте лайм-риска зліва направо;
   активний пункт має постійну риску й лаймову крапку. */

.header-nav a {
    position: relative;
    color: var(--ec-soft) !important;
    padding: 6px 2px;
    letter-spacing: .01em;
    transition: color .18s ease;
}

.header-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--ec-em), var(--ec-lime));
    transition: transform .22s ease;
}

.header-nav a:hover { color: var(--ec-text) !important; }
.header-nav a:hover::after { transform: scaleX(1); }

/* Тема має ВЛАСНЕ підкреслення .nav-text::after — разом з нашим виходила
   подвійна риска. Лишаємо тільки наше (градієнт, росте зліва направо). */
.header-nav a .nav-text::after,
.header-nav a:hover .nav-text::after,
.header-nav a.active .nav-text::after,
.header-nav a[aria-current="page"] .nav-text::after {
    display: none !important;
    opacity: 0 !important;
}

/* активний розділ */
.header-nav a.is-active { color: var(--ec-text) !important; }
.header-nav a.is-active::after { transform: scaleX(1); }

.header-nav a.is-active::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--ec-lime);
}

.lang-sw {
    color: var(--ec-soft) !important;
    transition: color .15s, background .15s;
}

.lang-sw:hover { color: var(--ec-em-soft) !important; }
.lang-sw.active { color: var(--ec-text) !important; }

/* CTA у шапці: на ховері смарагд → лайм.
   ІСТОРІЯ БАГА: спершу заливку робив псевдоелемент ::before поверх кнопки —
   текст кнопки це голий текстовий вузол, підняти його над накладкою нічим,
   і напис ЗНИКАВ. Потім — анімація background-size, але тема задає цій
   кнопці `background` СКОРОЧЕНИМ записом з !important, і воювати з нею за
   специфічність не варто. Лишаємо просту зміну кольору: напис завжди видно. */
.header-cta {
    background: var(--ec-em) !important;
    transition: background-color .18s ease, color .18s ease;
}

.header-cta:hover,
.header-cta:focus-visible {
    background: var(--ec-lime) !important;
    color: var(--ec-em-dark) !important;
}

.mobile-nav a { transition: color .15s; }
.mobile-nav a.is-active { color: var(--ec-em-soft) !important; }

/* Скорочений background тут НЕ використовуємо: він скидав би
   background-image/size/position, якими зроблено заливку .header-cta. */
.header-cta, .mobile-contact-btn {
    border-color: var(--ec-em) !important;
    color: var(--ec-em-dark) !important;
    font-weight: 700;
    border-radius: 0 !important;
    clip-path: var(--ec-cut-sm);
}

.mobile-contact-btn { background-color: var(--ec-em) !important; }

.mobile-contact-btn:hover {
    background-color: var(--ec-em-soft) !important;
    color: var(--ec-em-dark) !important;
}

.burger span { background: var(--ec-text) !important; }

.mobile-menu {
    background: var(--ec-bg-2) !important;
    color: var(--ec-text);
}

.mobile-nav a { color: var(--ec-text) !important; }
.mobile-nav a:hover { color: var(--ec-em-soft) !important; }
.mobile-menu-close span { background: var(--ec-text) !important; }

/* ── 4. Кнопки: ЄДИНА ФОРМА — «зріз крони» ────────────────── */

.btn, .btn-primary, .btn-ghost, .ig-form-submit,
.ig-crm-result__btn,
.sidebar-cta, .ec-btn {
    border-radius: 0 !important;
    clip-path: var(--ec-cut-sm);
}

.btn-primary, .ig-form-submit,
.ig-crm-result__btn--primary, .sidebar-cta, .ec-btn {
    background: var(--ec-em) !important;
    border-color: var(--ec-em) !important;
    color: var(--ec-em-dark) !important;
    font-weight: 700;
}

.btn-primary:hover, .ig-form-submit:hover,
.ig-crm-result__btn--primary:hover,
.sidebar-cta:hover, .ec-btn:hover {
    background: var(--ec-em-soft) !important;
    border-color: var(--ec-em-soft) !important;
    color: var(--ec-em-dark) !important;
}

.btn-ghost, .ec-btn--ghost {
    background: transparent !important;
    border: 1px solid var(--ec-border-2) !important;
    color: var(--ec-em-soft) !important;
    font-weight: 600;
}

.btn-ghost:hover, .ec-btn--ghost:hover {
    background: var(--ec-panel-2) !important;
    color: var(--ec-em-soft) !important;
}

/* ── 5. Чипи рубрик, тегів, фільтрів ──────────────────────── */

/* ── ІКОНКА-ЛИСТОК замість декоративних «//» ────────────────
   Раніше чипи починалися з літералу "// ", успадкованого від
   флагмана. Тепер префікс — знак із логотипу, поданий маскою,
   тож листок завжди в колір самого чипа. */
:root {
    --ec-leaf: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M33.4 12.6 C 21.4 13.6 13.6 21.4 13.9 33.9 C 26.4 33.6 34.2 25.8 33.4 12.6 Z' fill='%23000'/%3E%3C/svg%3E");
}

.hero-tag::before, .ha-tag::before, .ec-kicker::before,
.tag::before, .pillar-mention-label::before,
.article-toc__eyebrow::before, .article-faq__eyebrow::before,
.ig-crm-result__eyebrow::before,
.author-context__eyebrow::before, .tag-context__eyebrow::before,
.igng-expert-comment__label::before, .igng-authorbox__label::before {
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-right: 8px;
    background-color: currentColor;
    -webkit-mask: var(--ec-leaf) center / contain no-repeat;
    mask: var(--ec-leaf) center / contain no-repeat;
    border-radius: 0;
}

/* .ha-tag: тема лишала від флагмана моношрифт Fira Code, розрідження .18em,
   opacity .85 і хардкод-колір #66bb6a — на тлі решти чипів це виглядало
   чужорідним «залишком». Приводимо до єдиного вигляду чипа. */
.hero-author .ha-tag, .ha-tag {
    font-family: var(--ec-font-ui) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    opacity: 1 !important;
    color: var(--ec-em-soft) !important;
    border: 1px solid var(--ec-border-2) !important;
    background: transparent !important;
    padding: 6px 13px !important;
    clip-path: var(--ec-cut-sm);
    margin-bottom: 22px !important;
}

/* чипи мають бути флекс-рядком, щоб листок став перед написом */
.hero-tag, .ha-tag, .tag, .pillar-mention-label,
.article-toc__eyebrow, .article-faq__eyebrow,
.ig-crm-result__eyebrow,
.author-context__eyebrow, .tag-context__eyebrow,
.igng-expert-comment__label, .igng-authorbox__label {
    display: inline-flex !important;
    align-items: center;
    width: fit-content;
}

/* на головній лайм-крапку замінює той самий листок */
.ec-kicker::before {
    background-color: var(--ec-lime);
    border-radius: 0;
}

.tag, .post-cat, .tag-pill, .ig-popup-tag,
.article-toc__eyebrow, .article-faq__eyebrow,
.ig-crm-result__eyebrow {
    display: inline-block;
    width: fit-content;
    background: transparent !important;
    border: 1px solid var(--ec-border-2) !important;
    color: var(--ec-em-soft) !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 0 !important;
    clip-path: var(--ec-cut-sm);
}

a.tag-pill:hover, a.post-cat:hover {
    background: var(--ec-panel-2) !important;
    color: var(--ec-em) !important;
}

/* ГОЧА: контейнер пагінації — <ul class="page-numbers">, і його пункти мають
   ТОЙ САМИЙ клас. Стилізуємо ЛИШЕ пункти (a/span), інакше вся смуга стає
   суцільною зеленою плямою на ховері. */
ul.page-numbers {
    background: transparent !important;
    border: none !important;
    clip-path: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.filter-tab, a.page-numbers, span.page-numbers {
    background: var(--ec-panel) !important;
    border: 1px solid var(--ec-border) !important;
    color: var(--ec-soft) !important;
    border-radius: 0 !important;
    clip-path: var(--ec-cut-sm);
    transition: background .15s, border-color .15s, color .15s;
}

.filter-tab.active, .filter-tab:hover,
span.page-numbers.current, a.page-numbers:hover {
    background: var(--ec-em) !important;
    border-color: var(--ec-em) !important;
    color: var(--ec-em-dark) !important;
}

/* активний таб рендериться як <span> (не лінк на самого себе) */
span.filter-tab {
    display: inline-block;
    cursor: default;
    text-decoration: none;
}

.page-numbers.dots {
    background: transparent !important;
    border: none !important;
    clip-path: none;
}

.news-filter-bar { border-color: var(--ec-border) !important; }
.cat-count { color: var(--ec-soft); }

/* ── 6. Картки: матові панелі зі зрізом крони ─────────────── */

.news-card, .sidebar-widget, .article-toc, .article-faq__item,
.igng-expert-comment__card,
.single-nav-prev, .single-nav-next, .pillar-mention,
.archived-notice, .ec-panel {
    background: var(--ec-panel) !important;
    border: 1px solid var(--ec-border) !important;
    border-radius: 0 !important;
    clip-path: var(--ec-cut);
    box-shadow: none !important;
    color: var(--ec-text);
}

.news-card:hover, .single-nav-prev:hover, .single-nav-next:hover,
.pillar-mention:hover {
    background: var(--ec-panel-2) !important;
    border-color: var(--ec-border-2) !important;
}

/* ── КАРТКА НОВИНИ: власна мова C-ECO ───────────────────────
   Відбудова від флагмана: прибрано ілюстративну банду-прев'ю
   (найвпізнаваніша риса intecracy) і кнопку-коробку «Детальніше».
   Текст-перша картка: лайм-риска росте знизу вгору на ховері,
   стрілка від'їжджає, картка трохи підіймається. */

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

.news-card {
    position: relative;
    overflow: hidden;
    padding: 26px 26px 22px;
    transition: background .18s, border-color .18s, transform .18s;
}

.news-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--ec-em), var(--ec-lime));
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform .28s ease;
}

.news-card:hover {
    transform: translateY(-3px);
    border-color: var(--ec-border-2) !important;
}

.news-card:hover::before { transform: scaleY(1); }

.news-card-body { padding: 0 !important; }

.news-card-title {
    font-size: 18.5px;
    line-height: 1.35;
    margin: 12px 0 10px;
}

.news-card-title a { color: var(--ec-text) !important; transition: color .18s; }
.news-card:hover .news-card-title a { color: var(--ec-em-soft) !important; }

.news-excerpt {
    color: var(--ec-soft) !important;
    font-size: 14px;
    line-height: 1.6;
}

.news-card-meta, .news-card-date, .news-read,
.post-date, .post-read, .post-author,
.sidebar-recent-date, .sidebar-recent-cat {
    color: var(--ec-soft) !important;
}

/* мета-рядок: дата й час читання — моно, як усі числа системи */
.news-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ec-border);
}

.news-card-date, .news-read {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    letter-spacing: .02em;
}

/* «Детальніше» — текстовий лінк зі стрілкою, не кнопка-коробка */
.news-card-more {
    margin-left: auto;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    clip-path: none !important;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ec-em-soft) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .18s, color .18s;
}

.news-card:hover .news-card-more { gap: 12px; color: var(--ec-em) !important; }

.post-author { text-decoration-color: var(--ec-border-2); }

/* ── 7. Секційні заголовки ────────────────────────────────── */

.section-header .tag { margin-bottom: 14px; }
.section-header p { color: var(--ec-soft); }

/* ── 8. СТАТТЯ ────────────────────────────────────────────── */

.breadcrumbs, .breadcrumbs a { color: var(--ec-soft) !important; }
.breadcrumbs a:hover { color: var(--ec-em-soft) !important; }

.single-hero { border-bottom: 1px solid var(--ec-border); }
.single-excerpt { color: var(--ec-soft) !important; }

.igng-article-body,
.igng-article-body p, .igng-article-body li {
    color: var(--ec-soft) !important;
}

.igng-article-body h2, .igng-article-body h3,
.igng-article-body h4, .igng-article-body strong {
    color: var(--ec-text) !important;
}

/* внутрішні заголовки: лаймовий маркер-риска перед h2 */
.igng-article-body h2 {
    position: relative;
    padding-left: 18px;
}

.igng-article-body h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .22em;
    bottom: .18em;
    width: 4px;
    background: linear-gradient(180deg, var(--ec-em), var(--ec-lime));
}

.igng-article-body a {
    color: var(--ec-em-soft) !important;
    text-decoration: underline;
    text-decoration-color: var(--ec-border-2);
    text-underline-offset: 3px;
}

.igng-article-body a:hover {
    color: var(--ec-em) !important;
    text-decoration-color: var(--ec-em);
}

.igng-article-body blockquote {
    background: var(--ec-panel);
    border-left: 3px solid var(--ec-em) !important;
    color: var(--ec-text) !important;
    clip-path: var(--ec-cut);
}

.igng-article-body table { border-color: var(--ec-border) !important; }
.igng-article-body th {
    background: var(--ec-panel-2) !important;
    color: var(--ec-text) !important;
}
.igng-article-body td {
    border-color: var(--ec-border) !important;
    color: var(--ec-soft) !important;
}

.igng-article-body code {
    background: var(--ec-panel-2);
    color: var(--ec-lime);
}

.article-main-image {
    clip-path: var(--ec-cut);
    border: 1px solid var(--ec-border);
}

.article-main-image img { display: block; }

/* ЗМІСТ */
.article-toc { padding: 22px 24px; }
.article-toc__title { color: var(--ec-text) !important; }
.article-toc__list a { color: var(--ec-soft) !important; text-decoration: none; }
.article-toc__list a:hover { color: var(--ec-em-soft) !important; }

/* FAQ-акордеон */
.article-faq__item { margin-bottom: 10px; }
.article-faq__item summary, .article-faq__header {
    color: var(--ec-text) !important;
}
.article-faq__answer { color: var(--ec-soft) !important; }

/* КОМЕНТАР ЕКСПЕРТА */
.igng-expert-comment__label { color: var(--ec-em-soft) !important; }
.igng-expert-comment__body { color: var(--ec-soft) !important; }
.igng-expert-comment__name, .igng-expert-comment__cite-name { color: var(--ec-text) !important; }
.igng-expert-comment__position, .igng-expert-comment__cite-position { color: var(--ec-soft) !important; }
.igng-expert-comment__profile { color: var(--ec-em-soft) !important; }

/* ── АВТОРСЬКИЙ БЛОК: редакційна підписна лінія ─────────────
   Відбудова від флагмана: там це картка-панель з великим круглим
   аватаром і кнопкою-коробкою. Тут — підпис під статтею: тонка
   градієнт-лінія зверху, компактний аватар у смарагдовому кільці,
   ім'я великим шрифтом, лінк-стрілка без коробки. */

.igng-authorbox {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 20px;
    align-items: start;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: none !important;
    padding: 26px 0 0 !important;
    margin-top: 36px;
}

/* градієнт-лінія замість рамки панелі */
.igng-authorbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--ec-em), var(--ec-lime) 22%, var(--ec-border) 60%, transparent);
}

.igng-authorbox__avatar {
    display: block;
    width: 64px;
    height: 64px;
    padding: 0;
}

.igng-authorbox__avatar img,
.igng-authorbox__avatar span {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    border: 2px solid var(--ec-border-2);
    object-fit: cover;
}

.igng-authorbox__body { padding: 0; }

.igng-authorbox__label {
    color: var(--ec-em-soft) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.igng-authorbox__name {
    display: block;
    font-family: var(--ec-font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ec-text) !important;
    text-decoration: none !important;
    transition: color .18s;
}

.igng-authorbox__name:hover { color: var(--ec-em-soft) !important; }

.igng-authorbox__position {
    color: var(--ec-soft) !important;
    font-size: 13px;
    margin-top: 3px;
}

.igng-authorbox__body p {
    color: var(--ec-soft) !important;
    font-size: 14px;
    line-height: 1.6;
    margin: 12px 0 14px;
}

/* лінк-стрілка замість кнопки-коробки */
.igng-authorbox__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    clip-path: none !important;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ec-em-soft) !important;
    text-decoration: none !important;
    transition: gap .18s, color .18s;
}

.igng-authorbox__link:hover { gap: 13px; color: var(--ec-em) !important; }

@media (max-width: 640px) {
    .igng-authorbox { grid-template-columns: 52px 1fr; gap: 14px; }
    .igng-authorbox__avatar, .igng-authorbox__avatar img { width: 52px !important; height: 52px !important; }
}

/* ДЖЕРЕЛА */
.article-sources, .igng-sources {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    clip-path: var(--ec-cut);
}
.article-sources a { color: var(--ec-em-soft) !important; }

/* ПОПЕРЕДНЯ/НАСТУПНА */
.single-nav-prev, .single-nav-next { padding: 18px 20px; }
.nav-dir { color: var(--ec-em-soft) !important; }
.nav-title { color: var(--ec-text) !important; }

.single-tags .tags-label { color: var(--ec-soft); }

.archived-notice { border-color: rgba(232, 162, 22, .5) !important; }
.archived-notice strong { color: #E8C216; }

/* ── 9. Сайдбар ───────────────────────────────────────────── */

.sidebar-widget { padding: 22px 24px; }
.sidebar-widget h3, .sidebar-widget h4 { color: var(--ec-text) !important; }
.widget-about p { color: var(--ec-soft) !important; }

.sidebar-recent-item { border-color: var(--ec-border) !important; }
.sidebar-recent-rail { background: var(--ec-em) !important; }
.sidebar-recent-title, .sidebar-recent-link { color: var(--ec-text) !important; }
.sidebar-recent-link:hover .sidebar-recent-title { color: var(--ec-em-soft) !important; }

.sidebar-categories a, .sidebar-tags a { color: var(--ec-soft) !important; }
.sidebar-categories a:hover, .sidebar-tags a:hover { color: var(--ec-em-soft) !important; }

/* ── 10. Футер ────────────────────────────────────────────── */

.footer, footer.footer, .site-footer {
    background: var(--ec-bg-2) !important;
    border-top: 1px solid var(--ec-border);
    color: var(--ec-soft) !important;
}

.footer-col-title { color: var(--ec-text) !important; }
.footer-desc, .footer-copy, .footer-contacts, .footer-privacy { color: var(--ec-soft) !important; }
.footer a { color: var(--ec-soft) !important; }
.footer a:hover { color: var(--ec-em-soft) !important; }
.footer-bottom { border-top: 1px solid var(--ec-border) !important; }

.back-to-top {
    background: var(--ec-em) !important;
    color: var(--ec-em-dark) !important;
    border-radius: 0 !important;
    clip-path: var(--ec-cut-sm);
}

/* ── 11. Попап контактів і форми ──────────────────────────── */

.ig-popup-backdrop { background: rgba(2, 8, 5, .7) !important; }

.ig-popup-box {
    background: var(--ec-solid) !important;
    border: 1px solid var(--ec-border-2) !important;
    border-radius: 0 !important;
    clip-path: var(--ec-cut);
    color: var(--ec-text) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5) !important;
}

.ig-popup-header, .ig-popup-header h3 { color: var(--ec-text) !important; }
.ig-popup-close { color: var(--ec-soft) !important; }
.ig-popup-close:hover { color: var(--ec-text) !important; }

.ig-form-group label { color: var(--ec-soft) !important; }

.ig-crm-form input, .ig-crm-form textarea, .ig-crm-form select,
.ig-form-group input, .ig-form-group textarea, .ig-form-group select {
    background: rgba(0, 0, 0, .35) !important;
    border: 1px solid var(--ec-border) !important;
    color: var(--ec-text) !important;
    border-radius: 0 !important;
}

.ig-crm-form input:focus, .ig-crm-form textarea:focus,
.ig-form-group input:focus, .ig-form-group textarea:focus {
    border-color: var(--ec-em) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(53, 199, 132, .18) !important;
}

.ig-crm-form input::placeholder, .ig-crm-form textarea::placeholder {
    color: rgba(235, 245, 240, .4) !important;
}

.ig-form-privacy, .ct-form-note, .ig-crm-form__status { color: var(--ec-soft) !important; }
.ig-form-privacy a { color: var(--ec-em-soft) !important; }

.ig-crm-result__mark { color: var(--ec-em) !important; }

/* ── 11a. ВНУТРІШНІ HERO (сторінки послуг/розділів) ───────── */

.vanta-bg { background: var(--ec-bg) !important; }

.hero-inner, .hero-home {
    position: relative;
}

/* те саме смарагдове світіння, що на головній — єдина мова */
.hero-inner::before, .hero-home::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto;
    height: 120%;
    background: radial-gradient(ellipse at 70% 10%, rgba(53, 199, 132, .14), transparent 55%);
    pointer-events: none;
}

.hero-content { position: relative; }

.hero-tag {
    /* Правило системи: чип завжди за розміром напису, ніколи не на всю ширину.
       Метрики СИНХРОНІЗОВАНО з .ec-kicker головної (12.5px / 8-16 / mb 28),
       інакше блок на внутрішніх сторінках виходив стиснутішим і візуально
       «притискався» до хедера, хоча зазор до чипа однаковий. */
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    font-size: 12.5px !important;
    margin-bottom: 28px !important;
    background: transparent !important;
    border: 1px solid var(--ec-border-2) !important;
    color: var(--ec-em-soft) !important;
    border-radius: 0 !important;
    clip-path: var(--ec-cut-sm);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    padding: 8px 16px;
}

.hero-description { color: var(--ec-soft) !important; }

/* ── 11b. ЦИФРИ = ЛАЙМ + МОНО (правило системи) ───────────── */

.hero-stat-val, .pillar-step-num, .value-number, .why-number,
.example-num, .ct-pstat-num, .flagship-stat-value, .standard-value,
.map-stat-value, .platform-stat-value, .ct-sla-time,
.experts-index__count, .glossary-count, .pillar-position-num {
    color: var(--ec-lime) !important;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace !important;
    font-variant-numeric: tabular-nums;
    font-weight: 500 !important;
}

.hero-stat-label, .ct-pstat-label, .flagship-stat-label,
.standard-label, .map-stat-label, .platform-stat-label {
    color: var(--ec-soft) !important;
}

/* ── 11c. АКЦЕНТ-ЛІНІЇ СЕКЦІЙ: смарагд→лайм ───────────────── */

.line {
    background: linear-gradient(90deg, var(--ec-em), var(--ec-lime)) !important;
}

/* ── 11d. КАРТКОВІ СІМ'Ї ВНУТРІШНІХ СТОРІНОК: зріз крони ────
   Радіуси вже обнулені токенами; тут — сигнатурний зріз. */

.service-card, .product-card, .member-card, .method-card,
.step-card, .value-card, .benefit-card, .feature-card,
.security-card, .standard-card, .expert-card,
.pillar-related-card, .pillar-tech-block, .pillar-faq-item,
.pillar-step, .pillar-mistake, .pillar-case,
.pillar-signature-card, .pillar-marker-card,
.ct-intent-card, .ct-sla-card, .ct-info-block, .sla-tier,
.about-illustration-card, .layer-block, .tech-category,
.approach-item, .why-item, .flagship-feature,
.glossary-group, .ig-tab-panel {
    clip-path: var(--ec-cut);
    border-radius: 0 !important;
}

/* картки людей (експерти/автори): текст без підкреслень —
   вся картка і так клікабельна, риска лише шумить */
.expert-card__link, .expert-card__link *,
.expert-card a, .experts-grid a {
    text-decoration: none !important;
}

.expert-card__name { color: var(--ec-text) !important; }
.expert-card__pos { color: var(--ec-soft) !important; }
.expert-card:hover .expert-card__name { color: var(--ec-em-soft) !important; }

/* виняток геометрії: аватари людей — завжди кола (правило
   системи; частина з них брала радіус з обнулених токенів) */
.expert-card__ava, .ha-ava, .igng-authorbox__avatar,
.igng-expert-comment__media, .igng-expert-comment__media img,
.person-avatar, .person-avatar img {
    border-radius: 50% !important;
    clip-path: none;
}

/* ── 11e. ЧИПИ, ТАБИ, ФІЛЬТРИ ВНУТРІШНІХ СТОРІНОК ─────────── */

.tech-tag, .product-tag, .ha-tag {
    border-radius: 0 !important;
    clip-path: var(--ec-cut-sm);
}

.ig-tab-btn, .glossary-alpha-btn, .experts-alpha__btn {
    border-radius: 0 !important;
    clip-path: var(--ec-cut-sm);
}

.ig-tab-btn.active, .glossary-alpha-btn.active, .experts-alpha__btn.active {
    background: var(--ec-em) !important;
    color: var(--ec-em-dark) !important;
    border-color: var(--ec-em) !important;
}

.glossary-letter-stamp {
    color: var(--ec-lime) !important;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace !important;
    border-color: var(--ec-border-2) !important;
    border-radius: 0 !important;
    clip-path: var(--ec-cut-sm);
}

.glossary-search input, .glossary-search {
    border-radius: 0 !important;
}

/* ── 11f. КНОПКИ-ВИНЯТКИ ТЕМИ ─────────────────────────────── */

.btn-dark, .hero-cta {
    border-radius: 0 !important;
    clip-path: var(--ec-cut-sm);
}

.btn-dark {
    background: transparent !important;
    border: 1px solid var(--ec-border-2) !important;
    color: var(--ec-em-soft) !important;
}

.btn-dark:hover {
    background: var(--ec-panel-2) !important;
}

/* ── 11g. CTA-СЕКЦІЇ ВНУТРІШНІХ СТОРІНОК: те саме світіння ── */

.cta-section, .pillar-cta-section {
    position: relative;
    overflow: hidden;
    background: transparent !important;
}

.cta-section::before, .pillar-cta-section::before {
    content: "";
    position: absolute;
    inset: auto -20% -60%;
    height: 130%;
    background: radial-gradient(ellipse at 50% 100%, rgba(53, 199, 132, .16), transparent 60%);
    pointer-events: none;
}

.cta-section > *, .pillar-cta-section > * { position: relative; }

/* ── 11h. ЗАЧИСТКА СИНЬОГО ФЛАГМАНА ────────────────────────
   Тема хардкодить темно-сині фони (rgba(4,16,30), rgba(8,20,38),
   rgba(11,26,48)…) повз змінні — шар токенів їх не ловить.
   Тут вони приводяться до хвойної гами Evergreen. */

.hero-author, .hero-stats-bar, .hero-stats-row,
.tag-context__cluster, .experts-index,
.platform-capability, .pillar-alliance-note, .flagship-stat,
.ig-form-success, .ig-crm-result,
.member-card, .member-card-logo-hover,
.single-body table {
    background-image: none !important;
    background-color: var(--ec-panel) !important;
}

/* герой сторінки людини — суцільне полотно, а не синя плита */
.hero-author {
    background-color: transparent !important;
    border-bottom: 1px solid var(--ec-border);
}

/* Відступ .hero-author від хедера задано централізовано разом з рештою
   секцій-відкривачів (див. «ВІДСТУП ВІД ФІКСОВАНОГО ХЕДЕРА» нижче) —
   тут дубля навмисно немає, щоб не було двох джерел істини. */

.hero-home::after { background-image: none !important; }

.member-card::before { background: transparent !important; }

/* ── 11i. КОМЕНТАР ЕКСПЕРТА: цитата не дублює панель картки ──
   Картка вже матова панель; та сама заливка всередині читалась
   як плаский сірий прямокутник. Цитата — прозора, з лаймово-
   смарагдовою рискою і курсивом. */

.igng-expert-comment blockquote,
.igng-expert-comment--inline blockquote,
.igng-expert-comment__card blockquote {
    background: transparent !important;
    background-image: none !important;
    clip-path: none !important;
    border: none !important;
    border-left: 3px solid var(--ec-em) !important;
    border-radius: 0 !important;
    margin: 14px 0 0 !important;
    padding: 2px 0 2px 20px !important;
    font-style: italic;
    color: var(--ec-text) !important;
}

.igng-expert-comment blockquote p {
    color: var(--ec-text) !important;
    margin: 0;
}

/* ── 11j. СТОРІНКА КОНТАКТІВ: дві колонки 50/50 ────────────── */

.ec-contact-hero { padding-bottom: 0; }

.ec-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.ec-contact__info .ec-lead { margin: 0 0 34px; }

.ec-contact__block {
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid var(--ec-border);
}

.ec-contact__block:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

.ec-contact__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ec-em-soft);
    margin-bottom: 10px;
}

.ec-contact__mail {
    font-size: 22px;
    font-weight: 600;
    color: var(--ec-text) !important;
    text-decoration: none;
}

.ec-contact__mail:hover { color: var(--ec-em) !important; }

.ec-contact__steps {
    margin: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: ecstep;
}

.ec-contact__steps li {
    counter-increment: ecstep;
    position: relative;
    padding-left: 34px;
    margin-bottom: 12px;
    color: var(--ec-soft);
    font-size: 15px;
}

.ec-contact__steps li::before {
    content: counter(ecstep, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-lime);
}

.ec-contact__legal { font-size: 13.5px; color: var(--ec-soft); margin: 0; line-height: 1.65; }

/* права колонка — матова панель зі зрізом крони */
.ec-contact__form {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border-2);
    clip-path: var(--ec-cut);
    padding: 36px;
}

/* ── 11k. ФОРМА: поля були схлопнуті до 2px і невидимі ──────
   Тема не задає ширину полів, а рядок .ig-form-row без сітки
   стискав їх у нуль. Тут форма збирається наново. */

.ig-crm-form { width: 100%; }

.ig-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ig-form-group {
    display: block;
    width: 100%;
    margin-bottom: 16px;
}

.ig-form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ec-soft) !important;
}

.ig-crm-form input[type="text"],
.ig-crm-form input[type="email"],
.ig-crm-form input[type="tel"],
.ig-crm-form textarea,
.ig-form-group input:not([type="checkbox"]),
.ig-form-group textarea {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 14px !important;
    background: rgba(0, 0, 0, .38) !important;
    border: 1px solid var(--ec-border-2) !important;
    border-radius: 0 !important;
    color: var(--ec-text) !important;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color .15s, box-shadow .15s;
}

.ig-crm-form textarea { min-height: 130px; resize: vertical; }

.ig-crm-form input::placeholder,
.ig-crm-form textarea::placeholder { color: rgba(235, 245, 240, .38) !important; }

.ig-crm-form input:hover,
.ig-crm-form textarea:hover { border-color: rgba(120, 220, 170, .55) !important; }

.ig-crm-form input:focus,
.ig-crm-form textarea:focus {
    border-color: var(--ec-em) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(53, 199, 132, .20) !important;
}

/* згода: чекбокс + текст в один рядок */
.ig-form-privacy {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 20px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ec-soft) !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.ig-form-privacy input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--ec-em);
}

.ig-form-privacy a { color: var(--ec-em-soft) !important; text-decoration: underline; }

.ig-form-submit {
    width: 100%;
    padding: 14px 26px !important;
    font-size: 15px;
    cursor: pointer;
}

.ig-crm-form__status { margin-top: 12px; font-size: 13.5px; }
.ig-crm-form__fallback { margin-top: 12px; font-size: 13.5px; color: var(--ec-soft) !important; }
.ig-crm-form__trap { display: none !important; }

@media (max-width: 900px) {
    .ec-contact { grid-template-columns: 1fr; gap: 34px; }
    .ec-contact__form { padding: 24px; }
    .ig-form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── 12. ГОЛОВНА: власні компоненти Evergreen (.ec-*) ─────── */

/* ── ВІДСТУП ВІД ФІКСОВАНОГО ХЕДЕРА (правило системи) ───────
   Хедер position:fixed, висота 102px. Кожна секція, що відкриває
   сторінку, мусить мати достатній верхній відступ. Без цього контент
   заходив під шапку (на статтях зазор був −2px, на головній +2px).
   Значення різні, бо в кожної секції свої внутрішні маржі — вирівняно
   за ФАКТИЧНИМ зазором ≈60px під шапкою (заміряно в браузері). */
:root { --ec-header-h: 102px; }

/* ВИСОТА ХЕДЕРА НЕ СТАЛА. Тема міняє .header-inner{min-height} на своїх
   порогах, тож хедер = 102 / 92 / 84px. Фіксовані відступи через це давали
   різний зазор на різних ширинах (44…70px) і розбіжність між типами сторінок.
   Тому відступ ОБЧИСЛЮЄТЬСЯ: висота хедера + повітря. */
/* --ec-air — ЄДИНЕ число, яким регулюється повітря під шапкою на ВСІХ
   типах сторінок одразу. Міняти тільки його. */
:root { --ec-hdr: 102px; --ec-air: 96px; }
@media (max-width: 1024px) { :root { --ec-hdr: 92px; } }   /* min-height 64 */
@media (max-width: 768px)  { :root { --ec-hdr: 84px; } }   /* min-height 60 */

/* мітка стоїть рівно на межі відступу */
.ec-hero, .single-hero, .hero-author {
    padding-top: calc(var(--ec-hdr) + var(--ec-air)) !important;
}

/* ── РИТМ ГЕРОЯ на внутрішніх сторінках = як на головній ─────
   Верхній зазор збігався й раніше, але ВСЕ НИЖЧЕ було стиснуте:
   заголовок 58px проти 80px, лід приліплений впритул (0px замість
   28px), нижній відступ секції вдвічі менший. Саме через це блок
   виглядав «притиснутим до шапки», хоч відстань була однакова. */
.hero-inner h1 {
    font-size: clamp(38px, 5vw, 68px) !important;
    line-height: 1.08 !important;
}

.hero-inner .hero-description {
    margin-top: 28px !important;
    font-size: 18.5px !important;
    line-height: 1.6;
}

.hero-inner { padding-bottom: 84px !important; }

/* у .hero-inner контейнер додає власні 32px до позиції мітки */
.hero-inner {
    padding-top: calc(var(--ec-hdr) + var(--ec-air) - 32px) !important;
    /* тема робить його флексом із min-height у vh і вертикальним центруванням —
       через це зазор «плавав» ще й від висоти вікна (60px / 110px) */
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
}

/* герой */
.ec-hero {
    padding: 104px 0 84px;
    position: relative;
    overflow: hidden;
}

.ec-hero::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto;
    height: 130%;
    background: radial-gradient(ellipse at 70% 8%, rgba(53, 199, 132, .16), transparent 55%);
    pointer-events: none;
}

.ec-hero .container { position: relative; }

.ec-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--ec-border-2);
    color: var(--ec-em-soft);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 8px 16px;
    margin-bottom: 28px;
    clip-path: var(--ec-cut-sm);
}

/* префікс кікера — той самий листок, що й в інших чипах
   (див. блок «ІКОНКА-ЛИСТОК замість декоративних //» вище) */
.ec-kicker::before {
    content: "";
    width: 13px;
    height: 13px;
    background: var(--ec-lime);
    border-radius: 0;
    -webkit-mask: var(--ec-leaf) center / contain no-repeat;
    mask: var(--ec-leaf) center / contain no-repeat;
}

.ec-hero h1 {
    font-size: clamp(44px, 6vw, 82px);
    max-width: 900px;
    margin: 0;
}

.ec-hero .ec-lead {
    max-width: 620px;
    margin: 28px 0 36px;
    font-size: 18.5px;
    line-height: 1.6;
    color: var(--ec-soft);
}

.ec-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.ec-btn, .ec-btn--ghost {
    display: inline-block;
    padding: 13px 26px;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
}

/* terminal-стрічка метрик */
.ec-term {
    border-top: 1px solid var(--ec-border);
    border-bottom: 1px solid var(--ec-border);
    background: var(--ec-bg-2);
}

.ec-term .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ec-stat { padding: 30px 26px; border-left: 1px solid var(--ec-border); }
.ec-stat:first-child { border-left: none; padding-left: 0; }

.ec-stat b {
    display: block;
    font-size: 30px;
    font-weight: 500;
    color: var(--ec-lime);
    letter-spacing: -.01em;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.ec-stat b::before { content: "▲ "; font-size: 16px; color: var(--ec-em); }
.ec-stat--minus b::before { content: "− "; }
.ec-stat span { font-size: 13px; color: var(--ec-soft); }

/* секції головної */
.ec-sec { padding: 88px 0; }
.ec-sec--tight { padding-top: 0; }

.ec-sec h2 {
    font-size: clamp(30px, 4vw, 50px);
    margin: 0 0 14px;
}

.ec-sub {
    color: var(--ec-soft);
    max-width: 640px;
    margin: 0 0 46px;
    font-size: 16.5px;
}

.ec-hairline {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ec-border-2), transparent);
}

/* ланцюг «звідки ефект» */
.ec-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.ec-chip {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    clip-path: var(--ec-cut);
    padding: 26px 24px;
}

.ec-chip .ec-n {
    font-size: 30px;
    color: var(--ec-lime);
    font-weight: 500;
    display: block;
    margin-bottom: 14px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.ec-chip b { display: block; font-size: 16px; margin-bottom: 6px; color: var(--ec-text); }
.ec-chip span { font-size: 13.5px; color: var(--ec-soft); }

/* калькулятор */
.ec-calc {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border-2);
    clip-path: var(--ec-cut);
    padding: 46px;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 56px;
    align-items: center;
}

.ec-calc label {
    font-size: 13px;
    color: var(--ec-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: block;
    margin-bottom: 14px;
}

.ec-calc .ec-val {
    font-size: 52px;
    font-weight: 500;
    color: var(--ec-text);
    margin-bottom: 6px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.ec-calc input[type=range] {
    width: 100%;
    accent-color: var(--ec-em);
    /* тема фарбує всі input у білий — повзунку це не потрібно */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

.ec-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.ec-res > div {
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--ec-border);
    clip-path: var(--ec-cut-sm);
    padding: 20px 18px;
}

.ec-res b {
    display: block;
    font-size: 26px;
    color: var(--ec-lime);
    font-weight: 500;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.ec-res span { font-size: 12.5px; color: var(--ec-soft); }

.ec-calc .ec-note {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--ec-soft);
    border-top: 1px solid var(--ec-border);
    padding-top: 16px;
}

.ec-calc .ec-note a { color: var(--ec-em-soft); text-decoration: underline; }

/* рішення */
.ec-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.ec-pcard {
    background: var(--ec-panel);
    border: 1px solid var(--ec-border);
    clip-path: var(--ec-cut);
    padding: 28px;
    transition: border-color .15s, background .15s;
    display: block;
    text-decoration: none;
}

.ec-pcard:hover {
    border-color: var(--ec-border-2);
    background: var(--ec-panel-2);
}

.ec-pcard .ec-ptag {
    display: inline-block;
    color: var(--ec-em-soft);
    border: 1px solid var(--ec-border-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 12px;
    margin-bottom: 18px;
    clip-path: var(--ec-cut-sm);
}

.ec-pcard h3 { font-size: 19px; font-weight: 600; margin: 0 0 8px; color: var(--ec-text); }
.ec-pcard p { font-size: 14px; color: var(--ec-soft); margin: 0 0 20px; }

.ec-pcard .ec-eco {
    font-size: 13.5px;
    color: var(--ec-soft);
    border-top: 1px solid var(--ec-border);
    padding-top: 14px;
}

.ec-pcard .ec-eco b { color: var(--ec-lime); font-weight: 600; }

/* фінальний CTA */
.ec-big {
    padding: 96px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ec-big::before {
    content: "";
    position: absolute;
    inset: auto -20% -60%;
    height: 130%;
    background: radial-gradient(ellipse at 50% 100%, rgba(53, 199, 132, .18), transparent 60%);
    pointer-events: none;
}

.ec-big .container { position: relative; }
.ec-big h2 { font-size: clamp(32px, 4.4vw, 56px); margin: 0 0 16px; }
.ec-big p { color: var(--ec-soft); margin: 0 0 34px; }

/* ── 13. Адаптив ──────────────────────────────────────────── */

@media (max-width: 960px) {
    .ec-term .container, .ec-grid4, .ec-grid3, .ec-res {
        grid-template-columns: 1fr 1fr;
    }
    .ec-stat { border-left: none; border-top: 1px solid var(--ec-border); padding-left: 0; }
    .ec-stat:first-child { border-top: none; }
    .ec-calc { grid-template-columns: 1fr; padding: 28px; gap: 32px; }
}

@media (max-width: 640px) {
    .ec-grid4, .ec-grid3, .ec-res { grid-template-columns: 1fr; }
    .ec-hero { padding: 72px 0 56px; }
    .ec-sec { padding: 60px 0; }
    /* тема глобально тисне мобільний h1 до 26px — герою мало */
    .ec-hero h1 { font-size: 34px !important; }
    .ec-calc .ec-val { font-size: 40px; }
}