/* ============================================================
   ASU DESIGN SYSTEM v3 — Software Ukraine (2026-07-20)
   Мова: Nova-подібна (чорно-синє полотно, великі легкі заголовки,
   матові напівпрозорі панелі, пігулкові контроли) + власні
   відмінності від Intecracy:

   • РАДІУС-СИГНАТУРА: «зрізаний кут» — 24px на трьох кутах і 6px
     на нижньому лівому (--asu-clip). Жодних рівномірних 16-18px.
   • ХЕДЕР: плаваюча капсула на прозорому тлі, а не повношира смуга.
   • СТАТИСТИКА: окремі картки з жовтим квадратом-маркером, а не
     суцільний бар.
   • ЛОГІКА ВИРІВНЮВАННЯ (правило системи):
       — церемоніальні панелі (hero, CTA) → ЧІТКО ПО ЦЕНТРУ;
       — заголовки контентних секцій над сітками/списками → ЧІТКО
         ПО ЛІВОМУ КРАЮ (жодних text-center у контенті).
   • НОВИННІ КАРТКИ: текст-перші редакційні тайли без ілюстративних
     банд-прев'ю; рубрика — маленький чип у колір категорії.
   • ПІЛАРИ/ТАЙЛИ: іконка + назва + шеврон (компонент .asu-tile),
     легасі pillar-картки — з мотивом квадратиків, без «стрілочок
     інтекрасі».
   • ЧИПИ РУБРИК: завжди за розміром напису (fit-content).

   Палітра ASU: #009AD8 (блакить лого), #E8A216 (жовтий лого),
   #56C1EC (світлий). Логотип і функціонал незмінні.
   ============================================================ */

:root {
    --asu-bg: #04060F;
    --asu-bg-2: #070B18;
    --asu-panel: rgba(255, 255, 255, 0.05);
    --asu-panel-2: rgba(255, 255, 255, 0.08);
    --asu-panel-solid: #10141F;
    --asu-border: rgba(255, 255, 255, 0.10);
    --asu-border-2: rgba(255, 255, 255, 0.18);
    --asu-text: #ffffff;
    --asu-text-soft: rgba(255, 255, 255, 0.72);
    --asu-blue: #009AD8;
    --asu-blue-light: #56C1EC;
    --asu-yellow: #E8A216;
    /* радіус-сигнатура системи: зрізаний нижній лівий кут */
    --asu-clip: 24px 24px 24px 6px;
    --asu-clip-sm: 16px 16px 16px 4px;
    --asu-r-sm: 12px;
    --asu-pill: 999px;
    --asu-card-glow: inset -4px -4px 120px rgba(255, 255, 255, 0.045),
                     inset 2px 2px 1px rgba(255, 255, 255, 0.06);
}

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

body,
body.home, body.page, body.single, body.archive,
body.category, body.tag, body.search {
    background: var(--asu-bg) !important;
    background-color: var(--asu-bg) !important;
    color: var(--asu-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,
.ct-intent-section,
.ct-main-section,
.about-intro-section {
    background: transparent !important;
}

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

h1,
.hero-content h1 {
    font-weight: 300;
    font-size: clamp(42px, 6.5vw, 84px);
    line-height: 1.06;
    letter-spacing: -0.01em;
}

h2,
.section-header h2,
.cta-content h2 {
    font-weight: 400;
    font-size: clamp(30px, 4.5vw, 54px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

h1 .highlight,
h2 .highlight {
    color: var(--asu-blue-light);
    font-style: normal;
    font-weight: inherit;
}

h3 { font-weight: 600; }

.hero-description,
.hero-home .hero-description,
.hero-inner .hero-description,
.section-header p,
.su-lead {
    color: var(--asu-text-soft);
    font-weight: 400;
}

/* ── 3. ЛОГІКА ВИРІВНЮВАННЯ ───────────────────────────────── */
/* Правило: hero та CTA — центр; секційні заголовки — лівий край. */

.hero-content,
.cta-content {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* тема обмежує hero-h1 шириною під старий сплит-макет і ставить
   white-space:nowrap — заголовок мусить бути повношира колонка,
   чітко по центру, і ПЕРЕНОСИТИСЬ у 2-3 рядки, коли не вміщається */
.hero-content h1,
.hero-home .hero-content h1,
.hero-inner .hero-content h1 {
    max-width: none !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* вертикальне центрування контенту героя (правило для ВСІХ hero):
   хедер-капсула накриває верхні ~96px, тому верхній паддінг більший
   рівно на висоту хедера — візуальні відступи зверху/знизу рівні */
.hero,
.hero-home,
.hero-inner {
    display: flex !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 151px !important;   /* 75px хедер-смуга + 76px повітря */
    padding-bottom: 76px !important;
}

/* на головній статкартки наїжджають на межу героя на 34px —
   компенсуємо, щоб видимі відступи зверху/знизу були рівні */
.hero-home { padding-bottom: 110px !important; }

/* хвостовий margin останнього елемента контенту з'їдав центрування */
.hero-content > :last-child { margin-bottom: 0 !important; }

@media (max-width: 760px) {
    .hero, .hero-inner {
        padding-top: 118px !important;
        padding-bottom: 52px !important;
    }
    .hero-home { padding-bottom: 84px !important; }
}

.hero > .container { width: 100%; }

.hero-content .hero-tag,
.cta-content .tag { margin-left: auto; margin-right: auto; }

.hero-cta,
.cta-actions,
.hero-stats-row { justify-content: center; }

.section-header,
.section-header.text-center,
.experts-index__head {
    text-align: left !important;
    margin-left: 0 !important;
}

.section-header .intro-narrow-650,
.section-header .intro-narrow-20,
.section-header .intro-narrow-12,
.section-header .members-intro,
.section-header p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 640px;
}

/* ── 4. Vanta геть; герой — чисте центрове полотно ────────── */

.vanta-bg { display: none !important; }

.hero,
.hero-home,
.hero-inner {
    background: radial-gradient(900px 480px at 50% -15%,
                rgba(0, 154, 216, 0.12), transparent 62%),
                var(--asu-bg);
    border-bottom: 1px solid var(--asu-border);
}

/* канвас «цифрових кварталів» (asu-hero-space.js) — під контентом */
canvas.asu-hero-space {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero > .container {
    position: relative;
    z-index: 1;
}

.hero::after {
    content: "";
    position: absolute;
    left: auto !important;   /* тема задає left:0 — квадратики тікали вліво */
    top: auto !important;
    right: 56px;
    bottom: 48px;
    width: 16px;
    height: 16px;
    background: var(--asu-yellow);
    border-radius: 4px;
    box-shadow: 20px -20px 0 0 var(--asu-blue);
    opacity: 0.95;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 760px) {
    .hero::after { display: none; }
}

/* ── 5. Чипи рубрик і тегів: РОЗМІР = НАПИС ───────────────── */

.tag,
.hero-tag,
.post-cat,
.igng-expert-comment__label,
.igng-authorbox__label,
.pillar-mention-label,
.tags-label {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100%;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--asu-text-soft);
    background: var(--asu-panel);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-pill);
    padding: 6px 15px;
}

.tag::before,
.hero-tag::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--asu-yellow);
    box-shadow: 11px -3px 0 0 var(--asu-blue);
    margin-right: 11px;
    flex: 0 0 auto;
}

.tags-label { border: 0; background: none; padding-left: 0; }

.line { display: none; }

.section-header { margin-bottom: 44px; }

/* ── 6. Кнопки: ЄДИНА ФОРМА — пігулка ─────────────────────── */
/* Правило системи: БУДЬ-ЯКИЙ кнопкоподібний контрол на сайті має
   форму пігулки (999px). Іконкові квадратні кнопки стають колом —
   це та сама пігулка. Жодних прямокутних чи 4-8px кнопок. */

button,
input[type="submit"],
input[type="button"],
.btn-primary, .btn-ghost, .btn-dark, .su-btn,
.header-cta, .mobile-contact-btn,
.news-card-more, .filter-tab, .ig-tab-btn,
.experts-alpha__btn, .glossary-alpha-btn, .glossary-alpha-btn--prod,
.ig-form-submit, .ig-crm-result__btn, .ig-crm-result__btn--primary,
.igng-service-cta__btn, .sidebar-cta, .back-to-top, .ig-popup-open,
.news-pagination a, .news-pagination span,
.pager a, .pager span,
.lang-sw, .tag-pill {
    border-radius: var(--asu-pill) !important;
}

/* окремі кнопки тема стилить специфічнішими правилами з !important —
   дожимаємо потрійною специфічністю */
.sidebar-cta.sidebar-cta.sidebar-cta,
.mobile-contact-btn.mobile-contact-btn.mobile-contact-btn,
.igng-service-cta__btn.igng-service-cta__btn.igng-service-cta__btn,
.igng-service-cta__link.igng-service-cta__link.igng-service-cta__link {
    border-radius: var(--asu-pill) !important;
}

.btn-primary,
.btn-ghost,
.btn-dark,
.su-btn,
.news-card-more,
.header-cta {
    box-shadow: none !important;
    text-transform: none;
    font-weight: 600;
}

.btn-primary {
    background: var(--asu-blue);
    border: 1px solid var(--asu-blue);
    color: #fff;
}

.btn-primary:hover {
    background: var(--asu-blue-light);
    border-color: var(--asu-blue-light);
    color: var(--asu-bg);
    transform: none;
}

.btn-ghost {
    background: var(--asu-panel);
    border: 1px solid var(--asu-border);
    color: var(--asu-text);
}

.btn-ghost:hover {
    background: var(--asu-panel-2);
    border-color: var(--asu-border-2);
    color: #fff;
    transform: none;
}

.btn-dark,
.header-cta,
.header .header-cta,
.header-right .header-cta {
    background: var(--asu-yellow) !important;
    border: 1px solid var(--asu-yellow) !important;
    color: var(--asu-bg) !important;
    border-radius: var(--asu-pill) !important;
}

.btn-dark:hover,
.header-cta:hover {
    background: #f4b53a !important;
    border-color: #f4b53a !important;
}

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

.service-card,
.method-card,
.member-card,
.expert-card,
.why-item,
.ct-intent-card,
.tech-category,
.segment-teaser-item,
.glossary-card,
.sidebar-widget,
.author-box,
.igng-expert-comment,
.igng-service-cta,
.category-block,
.ig-popup-box {
    background: var(--asu-panel);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-clip) !important;
    box-shadow: var(--asu-card-glow);
    background-image: none;
}

.service-card:hover,
.method-card:hover,
.member-card:hover,
.expert-card:hover,
.ct-intent-card:hover,
.segment-teaser-item:hover {
    background: var(--asu-panel-2);
    border-color: var(--asu-border-2);
    box-shadow: var(--asu-card-glow);
    transform: translateY(-3px);
}

.ig-popup-box { background: var(--asu-panel-solid) !important; }

.service-icon,
.ct-intent-icon,
.category-icon,
.ig-icon {
    background: var(--asu-panel-2);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-clip-sm);
    color: var(--asu-blue-light);
}

.service-icon svg,
.ct-intent-icon svg,
.category-icon svg {
    stroke: var(--asu-blue-light);
}

/* ── 8. ХЕДЕР: повношира смуга з фірмовою верхньою лінією ──── */
/* Сигнатура ASU: по верхньому краю сторінки йде тонка лінія
   жовтий → блакитний → хейрлайн (мотив квадратиків логотипа,
   розгорнутий у стрічку). Сама смуга — суцільна, без капсул. */

.header,
.header.scrolled,
.site-header {
    background: rgba(4, 6, 15, 0.85) !important;
    background-color: rgba(4, 6, 15, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--asu-border) !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
}

/* тема малює капсулу-«шел» псевдоелементом .header::before —
   перепрофільовуємо його у фірмову верхню лінію */
.header::before,
.header.scrolled::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 3px !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg,
        var(--asu-yellow) 0 96px,
        var(--asu-blue) 96px 256px,
        rgba(255, 255, 255, 0.08) 256px 100%) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.header::after { display: none !important; }

/* смуга без жодних капсул: усі колишні овальні обгортки — геть */
.header-inner,
.header .header-inner,
.header.scrolled .header-inner {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 14px 24px;
    box-shadow: none !important;
}

.header-nav a,
.mobile-nav a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
}

.header-nav a { border-radius: var(--asu-pill); padding: 8px 14px; }

.header-nav a:hover {
    color: #fff;
    background: var(--asu-panel-2);
}

.header-nav a.active {
    color: #fff;
    background: rgba(0, 154, 216, 0.22);
}

.lang-switcher {
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-pill);
    overflow: hidden;
}

.lang-sw { border-radius: var(--asu-pill); }

.lang-sw.active { background: var(--asu-panel-2); color: #fff; }

.site-footer {
    background: var(--asu-bg);
    border-top: 1px solid var(--asu-border);
}

/* ── 9. СТАТИСТИКА: картки з жовтим маркером ──────────────── */

.hero-stats-bar {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-top: -34px;   /* картки «наїжджають» на межу героя */
    position: relative;
    z-index: 2;
    padding: 0 24px 26px;
}

/* тема малює на рядку статистики градієнт-смугу — лише картки! */
.hero-stats-row,
.hero-stats-bar::before,
.hero-stats-bar::after {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.hero-stats-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: 1140px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .hero-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hero-stat {
    background: var(--asu-panel-solid);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-clip);
    box-shadow: var(--asu-card-glow);
    padding: 22px 24px 18px;
    text-align: left;
    position: relative;
}

.hero-stat::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--asu-yellow);
    box-shadow: 13px -4px 0 0 var(--asu-blue);
    margin-bottom: 14px;
}

.hero-stat-val,
.map-stat-value,
.su-stat__num {
    font-weight: 300;
    font-size: clamp(30px, 3.4vw, 44px);
    color: #fff;
}

.hero-stat-label,
.map-stat-label {
    color: var(--asu-text-soft);
    letter-spacing: 0.04em;
}

.why-number {
    font-weight: 300;
    color: var(--asu-yellow);
}

/* Сітки принципів/карток: колонки = від кількості елементів (auto-fit),
   а не фіксовані 3/4 — жодних сиріт в останньому рядку і порожніх треків:
   3 елементи → 3 рівні, 4 → рядок з 4, 6 → 3+3. */
@media (min-width: 761px) {
    .why-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }
    .method-principles-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }
    /* рівно 6 карток → два рівні ряди 3+3, а не 4+2 */
    .services-grid:has(> :last-child:nth-child(6)) {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* контраст лінків у картках: блакитний на панелі не читався */
.method-card a:not([class]),
.service-card a:not([class]),
.why-item a:not([class]) {
    color: var(--asu-blue-light) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.method-card a:not([class]):hover,
.service-card a:not([class]):hover,
.why-item a:not([class]):hover {
    color: var(--asu-yellow) !important;
}

.cta-section {
    background: var(--asu-bg-2);
    border-top: 1px solid var(--asu-border);
    border-bottom: 1px solid var(--asu-border);
}

.cta-content { background: none; border: 0; box-shadow: none; }

/* ── 10. НОВИННІ КАРТКИ: текст-перші редакційні тайли ─────── */
/* Ілюстративні банд-прев'ю інтекрасі прибрано; лишається чип
   рубрики у колір категорії, великий заголовок, анонс і мета. */

.news-card {
    position: relative;
    background: var(--asu-panel);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-clip) !important;
    box-shadow: var(--asu-card-glow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ВСЯ картка клікабельна: stretched link від заголовка */
.news-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.news-card:hover {
    background: var(--asu-panel-2);
    border-color: color-mix(in srgb, var(--cat, #56C1EC) 55%, transparent);
    transform: translateY(-3px);
}

.news-card:hover .news-card-title a { color: var(--asu-blue-light); }

.news-card:hover .news-card-band::after {
    transform: translate(4px, -4px);
}

/* обгортка віньєтки — рівно за вмістом: без флекс-розтягування,
   фіксованих висот і аспектів теми (тема тягне її до ~194px) */
.news-card-thumb,
.news-card .news-card-thumb,
.news-card-thumb:has(.news-card-band) {
    display: block;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
}

/* «Ілюстрація без ілюстрації»: компактна зона-віньєтка — м'який
   колір рубрики, тиха сітка, ВДАВЛЕНИЙ фоновий значок рубрики і
   «сходинки» з квадратиків логотипа. Колір/значок — від категорії. */
.news-card { --cat: #56C1EC; --cat-icon: var(--ico-globe); }

.news-card-band {
    position: relative;
    display: block !important;
    height: 108px !important;
    min-height: 0 !important;
    padding: 16px 20px !important;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 44px 44px,
        radial-gradient(460px 170px at 0% 0%,
            color-mix(in srgb, var(--cat) 16%, transparent), transparent 72%) !important;
    border-bottom: 1px solid var(--asu-border);
    overflow: hidden;
}

/* вдавлений фоновий значок рубрики — ЛІВОРУЧ, по центру зони */
.news-card-band::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 76px;
    height: 76px;
    background: rgba(255, 255, 255, 0.055);
    -webkit-mask: var(--cat-icon) center / contain no-repeat;
    mask: var(--cat-icon) center / contain no-repeat;
    pointer-events: none;
}

/* сходинки-квадратики (мотив логотипа) в кольорі рубрики */
.news-card-band::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: 18px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--cat);
    box-shadow:
        -23px 13px 0 0 color-mix(in srgb, var(--cat) 45%, transparent),
        -46px 26px 0 0 color-mix(in srgb, var(--cat) 18%, transparent);
    pointer-events: none;
    transition: transform .25s ease;
}

/* значки-маски (stroke-іконки, сумісні з системним набором) */
:root {
    --ico-globe: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
    --ico-shield: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='M9 12l2 2 4-4'/></svg>");
    --ico-doc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='8' y1='13' x2='16' y2='13'/><line x1='8' y1='17' x2='13' y2='17'/></svg>");
    --ico-cloud: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/></svg>");
    --ico-chip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><rect x='9' y='9' width='6' height='6'/><line x1='9' y1='1' x2='9' y2='4'/><line x1='15' y1='1' x2='15' y2='4'/><line x1='9' y1='20' x2='9' y2='23'/><line x1='15' y1='20' x2='15' y2='23'/><line x1='20' y1='9' x2='23' y2='9'/><line x1='20' y1='14' x2='23' y2='14'/><line x1='1' y1='9' x2='4' y2='9'/><line x1='1' y1='14' x2='4' y2='14'/></svg>");
    --ico-code: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 18 22 12 16 6'/><polyline points='8 6 2 12 8 18'/></svg>");
    --ico-nodes: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='6' r='2.5'/><circle cx='19' cy='6' r='2.5'/><circle cx='12' cy='18' r='2.5'/><line x1='6.8' y1='7.8' x2='10.5' y2='16'/><line x1='17.2' y1='7.8' x2='13.5' y2='16'/><line x1='7.5' y1='6' x2='16.5' y2='6'/></svg>");
    --ico-signal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2 20h.01'/><path d='M7 20v-4'/><path d='M12 20v-8'/><path d='M17 20V8'/><path d='M22 4v16'/></svg>");
    --ico-gear: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
    --ico-pen: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z'/></svg>");
    --ico-mega: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l18-8-8 18-2-8z'/></svg>");
    --ico-quote: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21c3-1 5-3.5 5-8V7a2 2 0 0 1 2-2h1'/><path d='M14 21c3-1 5-3.5 5-8V7a2 2 0 0 1 2-2h1' transform='translate(-4 0)'/></svg>");
    --ico-bell: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.7 21a2 2 0 0 1-3.4 0'/></svg>");
}

/* кольори і значки рубрик (дзеркало data/catcolors.json) */
.news-card[data-category="kiberbezpeka"],
.news-card[data-category="cybersecurity"] { --cat: #00c9a7; --cat-icon: var(--ico-shield); }
.news-card[data-category="elektronnyj-dokumentoobig"],
.news-card[data-category="electronic-document-management"] { --cat: #f5c518; --cat-icon: var(--ico-doc); }
.news-card[data-category="infrastruktura"],
.news-card[data-category="infrastructure"] { --cat: #4aa3ff; --cat-icon: var(--ico-cloud); }
.news-card[data-category="internet-rechei"],
.news-card[data-category="internet-of-things"] { --cat: #6cd1ff; --cat-icon: var(--ico-chip); }
.news-card[data-category="rozrobka-softu"],
.news-card[data-category="software-development"] { --cat: #ff7eb6; --cat-icon: var(--ico-code); }
.news-card[data-category="systemna-integratsiia"],
.news-card[data-category="system-integration"] { --cat: #ffa94d; --cat-icon: var(--ico-nodes); }
.news-card[data-category="telekom"],
.news-card[data-category="telecom"] { --cat: #9be36a; --cat-icon: var(--ico-signal); }
.news-card[data-category="bpm"],
.news-card[data-category="bpm-en"] { --cat: #5cf2c0; --cat-icon: var(--ico-gear); }
.news-card[data-category="blog"],
.news-card[data-category="inblog"] { --cat: #b18cf0; --cat-icon: var(--ico-pen); }
.news-card[data-category="novyny"],
.news-card[data-category="association-news"] { --cat: #ff8787; --cat-icon: var(--ico-mega); }
.news-card[data-category="ekspertna-pozytsiia"],
.news-card[data-category="expert-view"] { --cat: #c084fc; --cat-icon: var(--ico-quote); }
.news-card[data-category="asu-dzvin-as"],
.news-card[data-category="dzvin-as"] { --cat: #94a3b8; --cat-icon: var(--ico-bell); }

.news-card-band-rail,
.news-card-band-icon {
    display: none !important;
}

/* чип рубрики — ПРАВОРУЧ угорі (значок ліворуч, сходинки внизу) */
.news-card-band-pill {
    position: absolute !important;
    right: 16px;
    top: 14px;
    left: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    width: fit-content;
    max-width: calc(100% - 32px);
    transform: none !important;
    margin: 0;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid color-mix(in srgb, var(--cat) 55%, transparent) !important;
    border-radius: var(--asu-pill);
    background: rgba(4, 6, 15, 0.55);
    color: var(--cat) !important;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-card-body { padding-top: 14px !important; }

.news-card-title,
.news-card-title a {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}

.news-card-title a:hover { color: var(--asu-blue-light); }

/* анонс — рівно 2 рядки: дає контекст, не роздуває картку */
.news-excerpt,
.news-card .news-excerpt,
.news-card-body .news-excerpt {
    color: var(--asu-text-soft);
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.news-card-meta {
    border-top: 1px solid var(--asu-border);
    padding-top: 14px;
    margin-top: auto;
}

/* ── 11. ТАЙЛИ (пілари): іконка + назва + шеврон ──────────── */
/* Новий компонент .asu-tile (головна: комітети). Легасі
   .pillar-related-card теж переводиться на цю мову. */

.asu-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.asu-tile,
.pillar-related-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--asu-panel);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-clip);
    box-shadow: var(--asu-card-glow);
    padding: 18px 20px;
    color: var(--asu-text);
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease,
                transform .25s ease;
}

.asu-tile:hover,
.pillar-related-card:hover {
    background: var(--asu-panel-2);
    border-color: var(--asu-blue);
    transform: translateY(-3px);
    box-shadow: var(--asu-card-glow);
}

.asu-tile__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--asu-panel-2);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-clip-sm);
    color: var(--asu-blue-light);
}

.asu-tile__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.asu-tile:hover .asu-tile__icon {
    color: var(--asu-yellow);
    border-color: var(--asu-yellow);
}

.asu-tile__title,
.pillar-related-card h3 {
    flex: 1 1 auto;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.asu-tile__go {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--asu-border);
    border-radius: 50%;
    color: var(--asu-text-soft);
    font-size: 13px;
    transition: all .25s ease;
}

.asu-tile:hover .asu-tile__go {
    color: var(--asu-bg);
    background: var(--asu-blue-light);
    border-color: var(--asu-blue-light);
}

/* легасі-стрілка інтекрасі в пілар-картках — прибрана,
   замість неї мотив квадратиків */
.pillar-related-arrow { display: none !important; }

.pillar-related-card::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--asu-yellow);
    box-shadow: 11px -3px 0 0 var(--asu-blue);
    margin-right: 12px;
}

/* ── Вертикальний ритм: рівні відступи контенту від героя і футера ── */
/* Правило системи: контент після героя починається через 56px,
   останній блок відділяється від футера 88px — на всіх списках,
   термах і статтях однаково. */
.archive-pad,
.container.archive-pad {
    padding-top: 56px !important;
    padding-bottom: 88px !important;
}

.news-pagination { margin-top: 40px; }

/* ── 12. Фільтри, чипи, пагінація ─────────────────────────── */

.filter-tab {
    border: 1px solid var(--asu-border);
    background: var(--asu-panel);
    border-radius: var(--asu-pill);
    font-weight: 500;
}

.filter-tab.active,
.filter-tab:hover {
    background: var(--asu-blue);
    border-color: var(--asu-blue);
    color: #fff;
}

.experts-alpha__btn {
    border-radius: var(--asu-pill);
    border: 1px solid var(--asu-border);
    background: var(--asu-panel);
}

.experts-alpha__btn:hover {
    border-color: var(--asu-yellow);
    color: var(--asu-yellow);
    background: var(--asu-panel-2);
}

.ig-tab-btn,
.news-pagination a,
.news-pagination span,
.pager a, .pager span {
    border-radius: var(--asu-pill) !important;
}

/* ── 13. СТАТТЯ: власна мова елементів (не інтекрасі) ─────── */

/* внутрішні заголовки: маркер-квадратики перед h2, синій квадрат h3.
   Тема глушила ::before і малювала свою синю лінію-бордер — перебиваємо
   тією ж специфічністю (.single-body .igng-article-body). */
.post-content h2,
.js-article-content h2,
.single-body .igng-article-body h2 {
    font-weight: 600;
    letter-spacing: -0.005em;
    position: relative;
    border-left: 0 !important;
    padding-left: 34px !important;
}

.post-content h2::before,
.js-article-content h2::before,
.single-body .igng-article-body h2::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--asu-yellow);
    box-shadow: 13px -6px 0 0 var(--asu-blue);
}

.post-content h3,
.js-article-content h3 {
    font-weight: 600;
    letter-spacing: -0.005em;
    position: relative;
    padding-left: 20px;
}

.post-content h3::before,
.js-article-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--asu-blue);
}

.post-content blockquote,
.js-article-content blockquote {
    border-left: 3px solid var(--asu-yellow);
    background: var(--asu-panel);
    border-radius: 0 var(--asu-r-sm) var(--asu-r-sm) 0;
}

/* ЗМІСТ: матова панель зі зрізаним кутом, чип-шапка, квадрат-булети */
.article-toc {
    background: var(--asu-panel) !important;
    border: 1px solid var(--asu-border) !important;
    border-left: 0 !important;
    border-radius: var(--asu-clip) !important;
    box-shadow: var(--asu-card-glow) !important;
    padding: 22px 26px !important;
}

.article-toc__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--asu-text-soft) !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-pill);
    padding: 4px 12px;
    margin-bottom: 10px;
}

.article-toc__eyebrow::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--asu-yellow);
    box-shadow: 10px -3px 0 0 var(--asu-blue);
    margin-right: 12px;
}

.article-toc__title {
    font-size: 19px;
    font-weight: 600;
    color: #fff !important;
    margin-bottom: 12px;
}

.article-toc__list {
    list-style: none !important;
    counter-reset: none;
    margin: 0;
    padding: 0;
}

.article-toc__item {
    position: relative;
    padding: 5px 0 5px 20px !important;
}

.article-toc__item::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--asu-blue);
    opacity: 0.85;
}

.article-toc__item--sub { padding-left: 38px !important; }

.article-toc__item--sub::before {
    left: 18px;
    width: 6px;
    height: 6px;
    background: var(--asu-blue-light);
    opacity: 0.6;
    top: 14px;
}

.article-toc__item a {
    color: var(--asu-text-soft) !important;
    text-decoration: none;
}

.article-toc__item a:hover { color: var(--asu-blue-light) !important; }

/* FAQ: матові картки-акордеони зі зрізаним кутом */
.article-faq {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.article-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--asu-text-soft) !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-pill);
    padding: 4px 12px;
}

.article-faq__eyebrow::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--asu-yellow);
    box-shadow: 10px -3px 0 0 var(--asu-blue);
    margin-right: 12px;
}

.article-faq__item {
    background: var(--asu-panel) !important;
    border: 1px solid var(--asu-border) !important;
    border-radius: var(--asu-clip-sm) !important;
    box-shadow: var(--asu-card-glow);
    margin-bottom: 10px;
    overflow: hidden;
}

.article-faq__item[open] {
    background: var(--asu-panel-2) !important;
    border-color: var(--asu-border-2) !important;
}

.article-faq__item summary {
    font-weight: 600;
    color: var(--asu-text) !important;
    padding: 15px 18px !important;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 52px !important;
}

.article-faq__item summary::marker,
.article-faq__item summary::-webkit-details-marker { display: none; }

/* індикатор «+» у колі-пігулці, при відкритті — «−» жовтий */
.article-faq .article-faq__item summary::after,
.article-faq__item summary::after {
    content: "+" !important;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--asu-border);
    border-radius: 50%;
    color: var(--asu-blue-light);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
}

.article-faq .article-faq__item[open] summary::after,
.article-faq__item[open] summary::after {
    content: "−" !important;
    color: var(--asu-yellow);
    border-color: var(--asu-yellow);
    transform: translateY(-50%) !important;
}

.article-faq__answer {
    color: var(--asu-text-soft) !important;
    padding: 0 18px 16px !important;
}

/* КОМЕНТАР ЕКСПЕРТА: у мові авторбокса — аватар з маркером, чип,
   велика декоративна лапка, pill-лінк профілю */
.igng-expert-comment {
    background: var(--asu-panel);
    border: 1px solid var(--asu-border);
    border-left: 0;
    border-radius: var(--asu-clip);
    box-shadow: var(--asu-card-glow);
}

.igng-expert-comment__card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.igng-expert-comment__media { position: relative; }

.igng-expert-comment__media img {
    border-radius: 50%;
    border: 2px solid var(--asu-border-2);
}

.igng-expert-comment__media::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--asu-yellow);
    box-shadow: 10px -10px 0 0 var(--asu-blue);
}

.igng-expert-comment__label {
    display: inline-flex !important;
    width: fit-content !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--asu-text-soft) !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-pill);
    padding: 4px 12px;
}

.igng-expert-comment__name,
.igng-expert-comment__name a {
    color: #fff !important;
    font-weight: 600;
}

.igng-expert-comment__name a:hover { color: var(--asu-blue-light) !important; }

.igng-expert-comment__position { color: var(--asu-text-soft) !important; }

.igng-expert-comment__profile {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--asu-text) !important;
    background: var(--asu-panel-2);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-pill) !important;
    padding: 6px 14px;
    text-decoration: none !important;
}

.igng-expert-comment__profile:hover {
    background: var(--asu-blue);
    border-color: var(--asu-blue);
    color: #fff !important;
}

.igng-expert-comment blockquote {
    position: relative;
    border: 0 !important;
    background: transparent !important;
    padding-left: 34px !important;
}

.igng-expert-comment blockquote::before {
    content: "«";
    position: absolute;
    left: 0;
    top: -12px;
    font-family: Georgia, serif;
    font-size: 52px;
    line-height: 1;
    color: rgba(86, 193, 236, 0.35);
}

/* ДЖЕРЕЛА: тиха панель зі зрізаним кутом */
.article-sources,
.igng-sources {
    background: var(--asu-panel) !important;
    border: 1px solid var(--asu-border) !important;
    border-left: 0 !important;
    border-radius: var(--asu-clip-sm) !important;
    box-shadow: var(--asu-card-glow);
}

.article-sources__host { color: var(--asu-text-soft) !important; }

.article-sources__list a { color: var(--asu-blue-light) !important; }

.article-sources__list a:hover { color: var(--asu-yellow) !important; }

/* ПОПЕРЕДНЯ/НАСТУПНА: тайли зі зрізаним кутом */
.single-nav a,
.single-nav-prev,
.single-nav-next {
    background: var(--asu-panel) !important;
    border: 1px solid var(--asu-border) !important;
    border-radius: var(--asu-clip-sm) !important;
    box-shadow: var(--asu-card-glow);
}

.single-nav a:hover {
    background: var(--asu-panel-2) !important;
    border-color: var(--asu-blue) !important;
}

.single-nav .nav-dir { color: var(--asu-blue-light) !important; }

.sidebar-widget { border-radius: var(--asu-clip) !important; }

/* ── Плашка джерела: «Матеріал підготовлено учасником SU» ─── */

.asu-source-note {
    background: var(--asu-panel);
    border: 1px solid var(--asu-border);
    border-left: 3px solid var(--asu-yellow);
    border-radius: 0 var(--asu-r-sm) var(--asu-r-sm) 0;
    padding: 14px 18px;
    margin: 0 0 28px;
    font-size: 14px;
    color: var(--asu-text-soft);
}

.asu-source-note p { margin: 0; }

.asu-source-note strong { color: var(--asu-text); font-weight: 600; }

.asu-source-note a {
    color: var(--asu-blue-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.asu-source-note a:hover { color: var(--asu-yellow); }

/* ── Авторбокс ASU: аватар з маркером, чип, лічильник, pill-CTA ── */

.asu-authorbox {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--asu-panel);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-clip);
    box-shadow: var(--asu-card-glow);
    padding: 22px 26px;
    margin: 40px 0;
}

.asu-authorbox__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    display: block;
}

.asu-authorbox__avatar img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--asu-border-2);
    display: block;
}

.asu-authorbox__avatar:hover img { border-color: var(--asu-blue); }

/* маркер-квадратики лого біля аватара */
.asu-authorbox__mark {
    position: absolute;
    right: -3px;
    bottom: 2px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--asu-yellow);
    box-shadow: 11px -11px 0 0 var(--asu-blue);
}

.asu-authorbox__body { flex: 1 1 auto; min-width: 0; }

.asu-authorbox__chip {
    display: inline-flex;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--asu-text-soft);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-pill);
    padding: 4px 12px;
    margin-bottom: 10px;
}

.asu-authorbox__name {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    text-decoration: none;
}

.asu-authorbox__name:hover { color: var(--asu-blue-light); }

.asu-authorbox__position {
    color: var(--asu-text-soft);
    font-size: 14px;
    margin-top: 4px;
}

.asu-authorbox__side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.asu-authorbox__count {
    text-align: right;
    line-height: 1.1;
}

.asu-authorbox__count strong {
    display: block;
    font-size: 26px;
    font-weight: 300;
    color: var(--asu-blue-light);
}

.asu-authorbox__count span {
    font-size: 12px;
    color: var(--asu-text-soft);
    letter-spacing: 0.04em;
}

.asu-authorbox__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--asu-text);
    background: var(--asu-panel-2);
    border: 1px solid var(--asu-border);
    border-radius: var(--asu-pill);
    padding: 8px 16px;
    text-decoration: none;
    white-space: nowrap;
}

.asu-authorbox__cta:hover {
    background: var(--asu-blue);
    border-color: var(--asu-blue);
    color: #fff;
}

@media (max-width: 640px) {
    .asu-authorbox { flex-wrap: wrap; }
    .asu-authorbox__side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .asu-authorbox__count { text-align: left; }
}

/* ── 14. Форми та дрібниці ────────────────────────────────── */

input, textarea, select {
    border-radius: var(--asu-r-sm) !important;
    background: var(--asu-panel);
    border: 1px solid var(--asu-border);
}

::selection { background: var(--asu-blue); color: #fff; }

a { text-underline-offset: 3px; }

.hero-glow,
.glow,
[class*="__glow"],
.asu-hero__glow {
    display: none !important;
}