/**
 * ═══════════════════════════════════════════════════════════
 * IPZ Theme — Кастомний CSS v2.1
 * Кафедра інженерії програмного забезпечення · Одеська політехніка
 * ═══════════════════════════════════════════════════════════
 *
 * СТРУКТУРА:
 *   1.  CSS-змінні
 *   2.  Скидання WordPress + базові стилі
 *   3.  Контейнер .wrap
 *   4.  Типографіка (h1–h4, p, підписи, теги)
 *   5.  Навігація
 *   6.  Hero (головна + внутрішні)
 *   7.  Секції (фони, відступи)
 *   8.  Сітки (grid-2, grid-3, grid-4, flex-scroll)
 *   9.  Карточки (light, dark, editorial, program, contact)
 *   10. Іконки (Lucide, dot-маркери, bar-акценти)
 *   11. Кнопки та pill
 *   12. Таблиці та форми
 *   13. Marquee (бігуча стрічка)
 *   14. CTA-баннер + Знайомство (відео-блок)
 *   15. Підвал (footer)
 *   15b. Утиліти (допоміжні класи)
 *   16. Анімації
 *   17. Слайдер
 *   18. Граф навчання (Learning Tree)
 *   19. Програми (key-numbers, practice, tracks, roadmap, swebok, pdf-buttons)
 *   20. Керівництво (leader cards)
 *   21. Різне (prog-link, email-items, утиліти)
 *   22. АДАПТИВНІСТЬ — всі @media-запити (1024px → 768px → 480px)
 */


/* ═══════════════════════════════════════════════════════════
   1. CSS-ЗМІННІ
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Фірмові кольори ── */
    --brand: #257aa0;
    --brand-dark: #1c5f7d;
    --brand-light: #3a9bc4;
    --cyan: #5ec3f1;
    --cyan-pale: #a0e4ff;
    --accent-green: #1BB374;
    --accent-violet: #6036B3;

    /* ── Фони ── */
    --bg: #ffffff;
    --bg-soft: #f5f7fa;
    --bg-blue: #eaf0f6;
    --bg-dark: #0a1628;
    --bg-dark-card: #13253d;
    --bg-dark-card-h: #182e4a;

    /* ── Текст ── */
    --ink: #1a1a1a;
    --ink-2: #333333;
    --ink-3: #7a8a9a;
    --ink-on-dark: #cdd8e4;
    --ink-on-dark-2: rgba(205,216,228,0.55);

    /* ── Лінії та рамки ── */
    --line: #d0dce8;
    --line-2: #b0c4d8;

    /* ── Радіуси ── */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 32px;

    /* ── Тіні ── */
    --shadow-s: 0 1px 3px rgba(10,22,40,0.05);
    --shadow-m: 0 6px 24px rgba(10,22,40,0.08);
    --shadow-l: 0 16px 48px rgba(10,22,40,0.12);
    --shadow-xl: 0 24px 64px rgba(10,22,40,0.18);

    /* ── Тайминги ── */
    --ease: cubic-bezier(0.16,1,0.3,1);
    --t: 0.4s var(--ease);

    /* ── Розміри ── */
    --nav-h: 68px;
}


/* ═══════════════════════════════════════════════════════════
   ШРИФТИ (@font-face)
   ═══════════════════════════════════════════════════════════ */

/* montserrat-regular - cyrillic_cyrillic-ext_latin_latin-ext */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v31-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2');
}
/* montserrat-600 */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/montserrat-v31-cyrillic_cyrillic-ext_latin_latin-ext-600.woff2') format('woff2');
}
/* montserrat-700 */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/montserrat-v31-cyrillic_cyrillic-ext_latin_latin-ext-700.woff2') format('woff2');
}
/* montserrat-800 */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/montserrat-v31-cyrillic_cyrillic-ext_latin_latin-ext-800.woff2') format('woff2');
}

/* jetbrains-mono-regular */
@font-face {
    font-display: swap;
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/jetbrains-mono-v24-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2');
}
/* jetbrains-mono-500 */
@font-face {
    font-display: swap;
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/jetbrains-mono-v24-cyrillic_cyrillic-ext_latin_latin-ext-500.woff2') format('woff2');
}


/* ═══════════════════════════════════════════════════════════
   2. СКИДАННЯ WORDPRESS + БАЗОВІ СТИЛІ
   ═══════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

img { display: block; max-width: 100%; height: auto; }

/* Скидаємо WordPress padding на контейнерах */
.wp-site-blocks { padding-top: 0 !important; }
.wp-site-blocks > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.wp-block-group { margin-top: 0; margin-bottom: 0; }

/* wp:html блоки не повинні мати зайвих відступів */
.entry-content > *,
.wp-site-blocks .wp-block-html {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}


/* ═══════════════════════════════════════════════════════════
   3. КОНТЕЙНЕР .wrap
   Обмежує ширину контенту до 1240px з бічними відступами.
   Ставиться ВСЕРЕДИНІ повноширинних секцій.
   ═══════════════════════════════════════════════════════════ */

.wrap {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}


/* ═══════════════════════════════════════════════════════════
   4. ТИПОГРАФІКА
   Заголовки, підписи, текстові утиліти.
   Усі розміри шрифтів — тут, не в інлайн-стилях.
   ═══════════════════════════════════════════════════════════ */

/* Заголовки сторінок та секцій */
.ipz-h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0 0 20px;
}

.ipz-h1-hero {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(38px, 5.2vw, 72px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: #fff;
    max-width: 900px;
    margin: 0 0 26px;
}

.ipz-h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 14px;
}

.ipz-h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 10px;
}

.ipz-h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 7px;
}

/* Модифікатори кольорів для темних секцій */
.on-dark { color: #fff; }
.ipz-h2.on-dark,
.ipz-h3.on-dark,
.ipz-h4.on-dark { color: #fff; }

/* Підзаголовок секції */
.ipz-sec-subtitle {
    font-size: 18px;
    color: var(--ink-3);
    max-width: 900px;
    line-height: 1.72;
    margin: 0;
}
.ipz-sec-subtitle.on-dark { color: var(--ink-on-dark-2); }

/* Тег секції (ПЕРЕВАГИ, НАУКА тощо) */
.ipz-sec-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.ipz-sec-tag::before {
    content: '';
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.ipz-sec-tag.on-dark { color: var(--cyan); }
.ipz-sec-tag.centered { justify-content: center; }

/* Текстові утиліти */
.ipz-text-body { font-size: 17px; color: var(--ink-2); line-height: 1.8; }
.ipz-text-body strong { color: var(--ink); font-weight: 600; }
.ipz-text-small { font-size: 16px; color: var(--ink-3); line-height: 1.5; }
.ipz-text-xs { font-size: 15px; color: var(--ink-3); line-height: 1.5; }
.ipz-text-muted { color: var(--ink-3); }
.ipz-text-brand { color: var(--brand); font-weight: 500; }
.ipz-text-on-dark { color: rgba(205,216,228,0.7); }
.ipz-text-on-dark-2 { color: var(--ink-on-dark-2); }
.ipz-text-white { color: #fff; }
.ipz-text-center { text-align: center; }

/* Градієнтний текст (hero) */
.ipz-text-gradient {
    background: linear-gradient(135deg, var(--cyan), var(--cyan-pale), var(--cyan));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ipz-shimmer 5s ease-in-out infinite;
}

/* Mono-highlight (код, теги) */
.ipz-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--brand);
    font-weight: 500;
    background: rgba(37,122,160,0.06);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Breadcrumbs */
.ipz-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(205,216,228,0.45);
    margin-bottom: 28px;
}
.ipz-breadcrumbs a { color: var(--cyan); text-decoration: none; transition: color var(--t); }
.ipz-breadcrumbs a:hover { color: var(--cyan-pale); }
.ipz-breadcrumbs .sep { opacity: 0.4; }

/* Абзац hero */
.ipz-hero-desc {
    font-size: 18px;
    color: rgba(205,216,228,0.72);
    max-width: 580px;
    line-height: 1.75;
    margin: 0 0 40px;
}
.ipz-page-hero-desc {
    font-size: 18px;
    color: rgba(205,216,228,0.65);
    max-width: 700px;
    line-height: 1.75;
    margin: 0 0 18px;
}


/* ═══════════════════════════════════════════════════════════
   5. НАВІГАЦІЯ (дворядна)
   ═══════════════════════════════════════════════════════════ */

/* Обгортка — НЕ липка на десктопі, тільки бургер липкий на мобільному */
.ipz-nav {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    z-index: 100;
    position: relative;
}

/* Внутрішній контейнер — обмеження ширини */
.ipz-nav-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ── Верхній ряд: лого | мова + CTA ── */
.ipz-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 12px 0;
}

.ipz-nav-top-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Нижній ряд: пункти меню ── */
.ipz-nav-bottom {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    /* Розтягуємо фон і розділювач на всю ширину екрана */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

/* Стилі для wp_nav_menu списку */
.ipz-nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.ipz-nav-menu li { margin: 0; }

.ipz-nav-menu a {
    display: block;
    padding: 8px 18px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: all var(--t);
}

.ipz-nav-menu a:hover,
.ipz-nav-menu .current-menu-item > a,
.ipz-nav-menu .current_page_item > a {
    color: var(--brand);
    background: rgba(37,122,160,0.06);
}

/* ── Логотип ── */
.ipz-logo { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.ipz-logo-mark {
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, var(--brand), var(--cyan));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 13px;
    box-shadow: 0 2px 12px rgba(37,122,160,0.3);
    letter-spacing: -0.04em; flex-shrink: 0;
}
.ipz-logo-text { display: flex; flex-direction: column; gap: 1px; }
.ipz-logo-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: var(--brand); }
.ipz-logo-subtitle { font-size: 17px; font-weight: 600; color: var(--ink-3); }

/* Логотип-картинка (завантажений через Налаштувати → Ідентифікація сайту) */
.ipz-logo-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}

/* ── Перемикач мов ── */
.ipz-lang-switch { display: flex; gap: 2px; padding: 3px; background: var(--bg-soft); border-radius: var(--r-sm); }
.ipz-lang-switch a {
    padding: 5px 10px; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600; color: var(--ink-3); border-radius: 5px;
    text-decoration: none; transition: all var(--t);
}
.ipz-lang-switch a.active,
.ipz-lang-switch .current-lang a { color: var(--brand); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.07); }

/*
 * Polylang integration:
 * Polylang генерує список <ul class="ipz-lang-switch"> з <li><a>.
 * Активна мова отримує клас .current-lang на <li>.
 * Стилі вище враховують обидва варіанти: ручний і Polylang.
 */
.ipz-lang-switch ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ipz-lang-switch li { margin: 0; }

/* ── CTA-кнопка "Вступ 2026" ── */
.ipz-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    background: var(--brand);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: var(--r-sm);
    box-shadow: 0 2px 8px rgba(37, 122, 160, 0.18);
    transition: var(--t);
    white-space: nowrap;
}

.ipz-nav-cta:hover {
    background: var(--brand-dark);
    box-shadow: 0 6px 20px rgba(37, 122, 160, 0.3);
    transform: translateY(-1px);
}

.ipz-nav-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 122, 160, 0.18);
}

.ipz-nav-cta-arrow {
    transition: transform 0.3s var(--ease);
    flex-shrink: 0;
}

.ipz-nav-cta:hover .ipz-nav-cta-arrow {
    transform: translateX(3px);
}

/* ── Бургер (мобільний) ── */
.ipz-burger { display: none; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; position: relative; z-index: 110; padding: 0; }
.ipz-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 1px; transition: all 0.3s var(--ease); position: absolute; left: 9px; }
.ipz-burger span:nth-child(1) { top: 12px; }
.ipz-burger span:nth-child(2) { top: 19px; }
.ipz-burger span:nth-child(3) { top: 26px; }
.ipz-burger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.ipz-burger.is-open span:nth-child(2) { opacity: 0; }
.ipz-burger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ── Мобільне меню ── */
.ipz-mobile-menu {
    display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(20px);
    z-index: 99; padding: 32px 24px;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: all 0.35s var(--ease); overflow-y: auto;
}
.ipz-mobile-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* Мобільне меню виводиться через wp_nav_menu → <ul><li><a> */
.ipz-mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.ipz-mobile-nav-list li { margin: 0; }
.ipz-mobile-nav-list a {
    display: block; padding: 14px 0; font-size: 18px; font-weight: 600;
    color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.ipz-mobile-nav-list a:hover,
.ipz-mobile-nav-list .current-menu-item > a,
.ipz-mobile-nav-list .current_page_item > a { color: var(--brand); }


/* ═══════════════════════════════════════════════════════════
   6. HERO
   ═══════════════════════════════════════════════════════════
   Фон hero складається з 5 шарів (від заднього до переднього):
   1. Базовий колір (.ipz-hero background)
   2. Mesh-градієнти (.ipz-hero::before)
   3. Рухома сітка (.ipz-hero-grid)
   4. Орби (.ipz-hero-orb) — розмиті кольорові сфери
   5. Фрагменти коду (.ipz-hero-frag) — летять знизу вгору
   ═══════════════════════════════════════════════════════════ */

/* Шар 1 — контейнер + базовий темний фон */
.ipz-hero {
    position: relative; min-height: calc(100vh - var(--nav-h));
    display: flex; align-items: center; background: var(--bg-dark); overflow: hidden;
}

/* Шар 2 — mesh-градієнти (м'які кольорові плями на фоні) */
.ipz-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 55% at 15% 45%, rgba(37,122,160,0.18), transparent 65%),
        radial-gradient(ellipse 45% 50% at 85% 25%, rgba(94,195,241,0.09), transparent 55%),
        radial-gradient(ellipse 35% 40% at 55% 85%, rgba(96,54,179,0.07), transparent 55%),
        radial-gradient(ellipse 30% 30% at 75% 70%, rgba(27,179,116,0.05), transparent 50%);
    pointer-events: none;
}

/* Шар 3 — рухома сітка 64×64px */
.ipz-hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(94,195,241,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94,195,241,0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, black, transparent);
    -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, black, transparent);
    animation: ipz-drift 25s linear infinite;
}

/* Контент hero — поверх усіх декоративних шарів */
.ipz-hero-content { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 80px 30px 80px; }

/* ── Шар 4 — Декоративні орби (круги з розмиттям) ── */
.ipz-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
    animation: ipz-orbFloat 12s ease-in-out infinite alternate;
}
.ipz-hero-orb.o1 {
    width: 400px; height: 400px;
    top: -10%; left: -5%;
    background: rgba(37,122,160,0.12);
}
.ipz-hero-orb.o2 {
    width: 300px; height: 300px;
    bottom: 5%; right: -3%;
    background: rgba(94,195,241,0.08);
    animation-delay: -4s;
}
.ipz-hero-orb.o3 {
    width: 200px; height: 200px;
    top: 30%; right: 25%;
    background: rgba(96,54,179,0.06);
    animation-delay: -8s;
}

/* ── Шар 5 — Фрагменти коду, що летять знизу вгору ──
   ВАЖЛИВО: position:absolute + top:0 — фрагменти
   вилучені з потоку і не впливають на лейаут.
   Анімація ipz-rise рухає їх через translateY.
   ── */
.ipz-hero-frag {
    position: absolute;
    top: 0; left: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre;
    pointer-events: none;
    z-index: 1;
    animation: ipz-rise 22s linear infinite;
}
.ipz-hero-frag.fa { left: 6%;  right: auto; color: rgba(94,195,241,0.1);  animation-duration: 24s; }
.ipz-hero-frag.fb { left: 22%; right: auto; color: rgba(27,179,116,0.08); animation-delay: -7s;  animation-duration: 20s; }
.ipz-hero-frag.fc { left: auto; right: 8%;  color: rgba(96,54,179,0.08);  animation-delay: -13s; animation-duration: 26s; }
.ipz-hero-frag.fd { left: auto; right: 28%; color: rgba(94,195,241,0.07); animation-delay: -18s; animation-duration: 21s; }

.ipz-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px 6px 8px;
    background: rgba(94,195,241,0.1); border: 1px solid rgba(94,195,241,0.2);
    border-radius: 100px; font-size: 17px; font-weight: 500;
    color: var(--cyan); margin-bottom: 30px;
}
.ipz-hero-badge-dot { width: 8px; height: 8px; background: var(--cyan); border-radius: 50%; animation: ipz-pulse 2s ease-in-out infinite; }

.ipz-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.ipz-hero-stats { display: flex; gap: 48px; margin-top: 42px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.07); }
.ipz-stat-value { font-family: 'Montserrat', sans-serif; font-size: 30px; font-weight: 800; color: var(--cyan); letter-spacing: -0.02em; }
.ipz-stat-label { font-size: 14px; color: rgba(205,216,228,0.42); margin-top: 3px; }

/* Внутрішній hero */
.ipz-page-hero {
    position: relative; padding: 72px 0 80px;
    background: var(--bg-dark); overflow: hidden;
}
.ipz-page-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 45% 60% at 80% 40%, rgba(37,122,160,0.10), transparent 65%),
        radial-gradient(ellipse 25% 35% at 10% 80%, rgba(37,122,160,0.06), transparent 55%);
}
.ipz-page-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(94,195,241,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(94,195,241,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black, transparent);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black, transparent);
}
.ipz-page-hero > .wrap { position: relative; z-index: 2; }
/* hero з збільшеним padding для сторінки абітурієнтів */
.ipz-page-hero.hero-tall { padding: 80px 0 88px; }

/* ── Контурні декоративні кола на внутрішніх hero ── */
.ipz-hero-ring {
    position: absolute;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}
/* Правий великий — тонкий контур */
.ipz-hero-ring.r1 {
    width: 450px; height: 450px;
    top: -35%; right: -4%;
    border: 1.5px solid rgba(94,195,241,0.10);
    animation: ipz-ringFloat1 14s ease-in-out infinite alternate;
}
/* Правий менший — контур + мінімальна заливка */
.ipz-hero-ring.r2 {
    width: 300px; height: 300px;
    top: 5%; right: 10%;
    border: 1px solid rgba(94,195,241,0.08);
    background: rgba(94,195,241,0.025);
    animation: ipz-ringFloat2 18s ease-in-out infinite alternate;
}
/* Лівий маленький */
.ipz-hero-ring.r3 {
    width: 140px; height: 140px;
    bottom: -10%; left: 4%;
    border: 1px solid rgba(37,122,160,0.10);
    animation: ipz-ringFloat3 12s ease-in-out infinite alternate;
}
/* Лівий мікро (додатковий штрих) */
.ipz-hero-ring.r4 {
    width: 80px; height: 80px;
    top: 15%; left: 12%;
    border: 1px solid rgba(94,195,241,0.06);
    animation: ipz-ringFloat4 16s ease-in-out infinite alternate;
}


/* ═══════════════════════════════════════════════════════════
   7. СЕКЦІЇ
   ═══════════════════════════════════════════════════════════ */

.ipz-sec { padding: 100px 0; }
.ipz-sec-dark { background: var(--bg-dark); color: var(--ink-on-dark); }
.ipz-sec-soft { background: var(--bg-soft); }
.ipz-sec-blue { background: var(--bg-blue); }
.ipz-sec-bordered { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Зменшені padding для допоміжних секцій */
.ipz-sec-sm { padding: 60px 0; }
.ipz-sec-top-0 { padding-top: 0; }
.ipz-sec-bottom-0 { padding-bottom: 0; }


/* ═══════════════════════════════════════════════════════════
   8. СІТКИ
   Переиспользовані grid-класи замість інлайн display:grid.
   ═══════════════════════════════════════════════════════════ */

.ipz-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 52px; }
.ipz-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 52px; }
.ipz-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 48px; }

/* Двоколоночна розкладка: контент + sidebar */
.ipz-layout-sidebar { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
.ipz-layout-sidebar-wide { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: start; }
/* Двоколоночна рівна */
.ipz-layout-half { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* Горизонтальний scroll (навчальні дисципліни) */
.ipz-flex-scroll {
    display: flex; gap: 12px; overflow-x: auto;
    padding: 10px 0 16px; margin-top: 48px;
    scrollbar-width: none;
}
.ipz-flex-scroll::-webkit-scrollbar { display: none; }

/* Flex-ряд для кнопок/pills */
.ipz-flex-wrap { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }

/* Sticky sidebar */
.ipz-sticky { position: sticky; top: 100px; }

/* Gap modifier */
.ipz-gap-sm { gap: 16px; }
.ipz-gap-md { gap: 24px; }
.ipz-mt-0 { margin-top: 0; }
.ipz-mt-sm { margin-top: 24px; }
.ipz-mt-md { margin-top: 48px; }
.ipz-mb-0 { margin-bottom: 0; }
.ipz-mb-sm { margin-bottom: 24px; }
.ipz-mb-md { margin-bottom: 48px; }


/* ═══════════════════════════════════════════════════════════
   9. КАРТОЧКИ
   ═══════════════════════════════════════════════════════════ */

/* ── Стандартна (світла) ── */
.ipz-card {
    position: relative; padding: 36px 32px;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--r-lg); transition: all var(--t); overflow: hidden;
}
.ipz-card::before {
    content: ''; position: absolute; left: 0; top: 0;
    width: 4px; height: 0; border-radius: 0 2px 2px 0;
    transition: height var(--t);
}
.ipz-card:hover { border-color: rgba(37,122,160,0.18); box-shadow: var(--shadow-l); transform: translateY(-4px); }
.ipz-card:hover::before { height: 100%; }

.ipz-card.c-brand::before  { background: var(--brand); }
.ipz-card.c-cyan::before   { background: var(--cyan); }
.ipz-card.c-green::before  { background: var(--accent-green); }
.ipz-card.c-violet::before { background: var(--accent-violet); }

/* Компактна карточка */
.ipz-card-sm { padding: 28px 24px; }

/* Карточка без лівої смужки (контакти, навігація) */
.ipz-card-plain { padding: 28px; }
.ipz-card-plain::before { display: none; }

/* Горизонтальна карточка (contact, leader) */
.ipz-card-row { display: flex; align-items: flex-start; gap: 20px; }
.ipz-card-row.centered { align-items: center; gap: 24px; }

/* Карточка для grid-сітки «Що вивчають» */
.ipz-grid-study {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px;
    margin-top: 48px;
}
.ipz-card-study {
    padding: 24px 22px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: all var(--t);
}
.ipz-card-study:hover {
    border-color: rgba(37,122,160,0.18);
    box-shadow: var(--shadow-m);
    transform: translateY(-3px);
}

/* ── Темна ── */
.ipz-card-dark {
    padding: 30px 26px; background: var(--bg-dark-card);
    border: 1px solid rgba(94,195,241,0.07);
    border-radius: var(--r-lg); transition: all var(--t);
}
.ipz-card-dark:hover { background: var(--bg-dark-card-h); border-color: rgba(94,195,241,0.14); transform: translateY(-3px); }
.ipz-card-dark h3, .ipz-card-dark h4 { color: #fff; }
.ipz-card-dark p { color: var(--ink-on-dark-2); }
.ipz-card-dark.card-lg { padding: 36px 30px; }
.ipz-card-dark.card-center { text-align: center; padding: 28px 24px; }

/* ── Програмна карточка (градієнт) ── */
.ipz-prog-card {
    padding: 48px 44px; border-radius: var(--r-xl);
    color: var(--ink-on-dark); position: relative; overflow: hidden;
    transition: all var(--t);
}
/* Вирівнювання PDF-кнопок у картках Бакалавр/Магістр */
.ipz-prog-card > div:not([class]) {
    flex: 1 1 auto;
}
.ipz-prog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.ipz-prog-bachelor { background: linear-gradient(160deg, #0b1a2e, #123050, #1a4268); }
.ipz-prog-master { background: linear-gradient(160deg, #15082e, #221350, #2e1d68); }

.ipz-prog-level {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    opacity: 0.45; margin-bottom: 12px;
}
.ipz-prog-card h3 { font-size: clamp(24px,2.8vw,34px); font-weight: 800; color: #fff; margin-bottom: 16px; }
.ipz-prog-desc { font-size: 18px; opacity: 0.65; margin-bottom: 28px; }

.ipz-prog-duration {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 500;
    margin-bottom: 28px;
}
.ipz-prog-bachelor .ipz-prog-duration { color: var(--cyan); }
.ipz-prog-master .ipz-prog-duration { color: #b89eff; }

/* Рядок компетенції в карточці програми */
.ipz-comp-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 17px;
}
.ipz-comp-item strong { color: #fff; display: block; margin-bottom: 2px; }
.ipz-comp-item span { color: rgba(205,216,228,0.55); font-size: 15px; }

/* ── Editorial split ── */
.ipz-editorial { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-xl); overflow: hidden; }
.ipz-ed-panel { padding: 56px 48px; }
.ipz-ed-dark {
    background: var(--bg-dark); color: var(--ink-on-dark);
    position: relative; overflow: hidden;
}
.ipz-ed-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 20% 80%, rgba(37,122,160,0.12), transparent 60%); pointer-events: none; }
.ipz-ed-dark > * { position: relative; z-index: 1; }
.ipz-ed-light { background: var(--bg-soft); border: 1px solid var(--line); border-left: none; }
.ipz-ed-label {
    font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px;
}
.ipz-ed-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px,2.5vw,30px); font-weight: 800;
    line-height: 1.2; margin-bottom: 20px;
}
.ipz-ed-body { font-size: 16px; line-height: 1.6; }

/* Колір ED-label на темній панелі */
.ipz-ed-label-cyan { color: var(--cyan); }

/* ── Practice strip ── */
.ipz-practice-strip {
    margin-top: 24px; padding: 40px 44px;
    background: linear-gradient(135deg, var(--bg-dark), #14293e);
    border-radius: var(--r-xl);
    display: flex; align-items: center; gap: 36px;
}
.ipz-practice-strip h3 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.ipz-practice-strip p { font-size: 15px; color: rgba(205,216,228,0.6); line-height: 1.7; max-width: 560px; }

/* ── Aside / sidebar info box ── */
.ipz-aside {
    padding: 32px 28px; background: var(--bg-soft);
    border: 1px solid var(--line); border-radius: var(--r-lg);
}
.ipz-aside h4 { font-size: 14px; font-weight: 700; color: var(--brand); margin-bottom: 16px; }

.ipz-aside-dark {
    padding: 36px 32px;
    background: linear-gradient(160deg, #0b1a2e, #123050);
    border-radius: var(--r-xl); color: var(--ink-on-dark);
}
.ipz-aside-dark h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 18px; }

/* Рядок факту в aside */
.ipz-fact {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid rgba(208,220,232,0.5);
    font-size: 15px; color: var(--ink-2); line-height: 1.55;
}
.ipz-fact:last-child { border-bottom: none; }
.ipz-fact strong { color: var(--ink); display: block; }

.ipz-fact-dark {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 13px; color: rgba(205,216,228,0.65);
}
.ipz-fact-dark:first-child { border-top: none; }

/* ── Note / callout ── */
.ipz-note {
    padding: 24px 28px;
    background: rgba(94,195,241,0.05); border: 1px solid rgba(94,195,241,0.1);
    border-radius: var(--r-md);
    font-size: 16px; color: rgba(205,216,228,0.6); line-height: 1.5;
}
.ipz-note strong { color: var(--cyan); font-weight: 600; }

.ipz-note-lg {
    padding: 36px 40px; border-radius: var(--r-xl);
    display: flex; align-items: flex-start; gap: 24px;
}
.ipz-note-lg h4 { font-size: 16px; color: #fff; margin-bottom: 8px; }

/* Leader mini card */
.ipz-leader {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.ipz-leader:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ipz-leader-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ipz-leader-role { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.ipz-leader-title {
    margin-top: 3px; font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--brand); font-weight: 500;
}

/* Useful links */
.ipz-link-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-top: 1px solid rgba(208,220,232,0.5);
    font-size: 13.5px; color: var(--brand); font-weight: 500;
    text-decoration: none; transition: all var(--t);
}
.ipz-link-item:first-child { border-top: none; }
.ipz-link-item:hover { color: var(--brand-dark); transform: translateX(4px); }

/* ── Блок "Вступ на спеціальність" на сторінці Контакти ── */
.ipz-vstup-contacts {
    max-width: 780px;
}
.ipz-vstup-contacts a.ipz-card .ipz-arrow {
    display: inline-block;
    margin-left: 6px;
    color: var(--brand);
    transition: transform var(--t);
}
.ipz-vstup-contacts a.ipz-card:hover .ipz-arrow {
    transform: translateX(4px);
}
.ipz-link-url {
    color: var(--brand);
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    margin-top: 4px;
}

/* Admission data strip */
.ipz-admission-strip {
    display: flex; gap: 0; margin-top: 56px;
    border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid rgba(94,195,241,0.1);
}
.ipz-adm-item {
    flex: 1; padding: 22px 24px;
    background: rgba(255,255,255,0.03);
    border-right: 1px solid rgba(94,195,241,0.08);
    transition: background var(--t);
}
.ipz-adm-item:last-child { border-right: none; }
.ipz-adm-item:hover { background: rgba(94,195,241,0.05); }
.ipz-adm-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px; font-weight: 600;
    color: rgba(205,216,228,0.35); letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 6px;
}
.ipz-adm-value { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.4; }
.ipz-adm-value .accent { color: var(--cyan); font-weight: 700; }


/* ═══════════════════════════════════════════════════════════
   10. ІКОНКИ
   ═══════════════════════════════════════════════════════════ */

/* Lucide іконки у карточках */
.ipz-icon {
    width: 50px; height: 50px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; flex-shrink: 0;
}
.ipz-icon i { width: 24px; height: 24px; }
.ipz-card-row > .ipz-icon,
.ipz-card-row > .ipz-icon-sm {
    margin-bottom: 0;
}

/* Розміри іконок */
.ipz-icon-sm {
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.ipz-icon-sm i { width: 20px; height: 20px; }
.ipz-icon-lg { width: 68px; height: 68px; }
.ipz-icon-lg i { width: 30px; height: 30px; }
.ipz-icon-round {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ipz-icon-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Іконка-емодзі (16px в рядку компетенції) */
.ipz-comp-icon { width: 48px; height: 48px; border-radius: var(--r-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 6px; }
.ipz-comp-icon i { width: 16px; height: 16px; }
.ipz-prog-bachelor .ipz-comp-icon { background: rgba(94,195,241,0.1); color: var(--cyan); }
.ipz-prog-master .ipz-comp-icon { background: rgba(184,158,255,0.1); color: #b89eff; }

/* Фонові кольори для іконок */
.ipz-icon-brand   { background: rgba(37,122,160,0.08); color: var(--brand); }
.ipz-icon-cyan    { background: rgba(94,195,241,0.1); color: var(--cyan); }
.ipz-icon-green   { background: rgba(27,179,116,0.08); color: var(--accent-green); }
.ipz-icon-violet  { background: rgba(96,54,179,0.08); color: var(--accent-violet); }
.ipz-icon-gradient { background: linear-gradient(135deg, rgba(37,122,160,0.12), rgba(94,195,241,0.12)); color: var(--brand); }

/* Кольорова точка-маркер */
.ipz-dot {
    width: 8px; height: 8px; border-radius: 50%; margin-bottom: 14px;
}
.ipz-dot-cyan   { background: var(--cyan); }
.ipz-dot-green  { background: var(--accent-green); }
.ipz-dot-violet { background: var(--accent-violet); }
.ipz-dot-brand  { background: var(--brand); }

/* Кольоровий бар-акцент */
.ipz-bar { width: 28px; height: 3px; border-radius: 2px; margin-bottom: 18px; }
.ipz-bar-cyan   { background: var(--cyan); }
.ipz-bar-green  { background: var(--accent-green); }
.ipz-bar-violet { background: var(--accent-violet); }

/* Google Maps embed */
.ipz-map-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-s);
}
.ipz-map-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ═══════════════════════════════════════════════════════════
   11. КНОПКИ ТА PILL
   ═══════════════════════════════════════════════════════════ */

.ipz-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 600; border: none; cursor: pointer;
    text-decoration: none; transition: all var(--t);
    position: relative; overflow: hidden;
}
.ipz-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(255,255,255,0.08)); opacity: 0; transition: opacity var(--t); }
.ipz-btn:hover::after { opacity: 1; }

.ipz-btn-lg { padding: 15px 32px; font-size: 16px; border-radius: var(--r-md); }
.ipz-btn-md { padding: 12px 24px; font-size: 14px; border-radius: var(--r-md); }
.ipz-btn-full { width: 100%; justify-content: center; }

.ipz-btn-fill { color: #fff; background: var(--brand); box-shadow: 0 4px 20px rgba(37,122,160,0.35); }
.ipz-btn-fill:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37,122,160,0.45); color: #fff; }
.ipz-btn-white { color: var(--brand); background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
.ipz-btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.18); color: var(--brand); }
.ipz-btn-ghost { color: var(--ink-on-dark); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.ipz-btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); transform: translateY(-2px); color: var(--ink-on-dark); }

/* Hero actions: вертикальный стек (презентация сверху, две кнопки приёма снизу) */
.ipz-hero-actions-stack { flex-direction: column; align-items: flex-start; gap: 16px; }
.ipz-hero-actions-row { display: flex; gap: 14px; flex-wrap: wrap; width: 100%; max-width: 640px; }

/* Кнопка с подзаголовком (равная ширина в одной строке) */
.ipz-btn-stacked {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 14px 26px; line-height: 1.3; text-align: left;
}
.ipz-btn-stacked .ipz-btn-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 600;
}
.ipz-btn-stacked .ipz-btn-title i { width: 14px; height: 14px; opacity: 0.85; }
.ipz-btn-stacked .ipz-btn-sub {
    font-size: 12px; font-weight: 400; opacity: 0.85;
    letter-spacing: 0.01em;
}

/* Pill */
.ipz-pill {
    padding: 12px 22px; background: var(--bg); border: 1px solid var(--line);
    border-radius: 100px; font-size: 15px; font-weight: 600; color: var(--ink);
    transition: all var(--t); display: inline-flex; align-items: center; gap: 8px;
}
.ipz-pill:hover { border-color: var(--brand); box-shadow: var(--shadow-m); transform: translateY(-2px); color: var(--brand); }

.ipz-pill-dark {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07);
    color: rgba(205,216,228,0.45);
}
.ipz-pill-dark:hover { color: var(--cyan); border-color: rgba(94,195,241,0.2); background: rgba(94,195,241,0.06); }

/* Теги технологій */
.ipz-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 18px; }
.ipz-tag {
    padding: 4px 11px; font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 500; border-radius: 100px;
    background: rgba(255,255,255,0.04); color: rgba(205,216,228,0.6);
    border: 1px solid rgba(255,255,255,0.06); transition: all var(--t);
}
.ipz-card-dark:hover .ipz-tag { border-color: rgba(255,255,255,0.12); color: rgba(205,216,228,0.8); }


/* ═══════════════════════════════════════════════════════════
   12. ТАБЛИЦІ ТА ФОРМИ
   ═══════════════════════════════════════════════════════════ */

.ipz-form-field label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; font-weight: 600;
    color: rgba(205,216,228,0.4); letter-spacing: 0.08em;
    text-transform: uppercase; display: block; margin-bottom: 6px;
}
.ipz-form-field input,
.ipz-form-field textarea {
    width: 100%; padding: 14px 18px;
    background: var(--bg-dark-card);
    border: 1px solid rgba(94,195,241,0.08);
    border-radius: var(--r-md); color: #fff;
    font-size: 14px; transition: all var(--t); outline: none; resize: vertical;
}
.ipz-form-field input::placeholder,
.ipz-form-field textarea::placeholder { color: rgba(205,216,228,0.3); }
.ipz-form-field input:focus,
.ipz-form-field textarea:focus { border-color: rgba(94,195,241,0.3); background: var(--bg-dark-card-h); box-shadow: 0 0 0 3px rgba(94,195,241,0.08); }
.ipz-form-field textarea { min-height: 120px; }
.ipz-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ipz-form-gap { margin-top: 14px; }
.ipz-form-promise {
    margin-top: 24px; display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: rgba(205,216,228,0.45);
}
.ipz-form-promise-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); }


/* ═══════════════════════════════════════════════════════════
   12B. РОБОТОДАВЦІ (employers grid на тёмной секции)
   ═══════════════════════════════════════════════════════════ */

.ipz-employers {
    margin-top: 48px;
}
.ipz-employers-title {
    text-align: center;
    color: var(--ink-on-dark);
    font-size: 18px;
    margin-bottom: 32px;
    letter-spacing: 0.01em;
}
.ipz-employers-title strong {
    color: var(--cyan);
    font-weight: 700;
}

.ipz-employers-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

.ipz-employer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 20px 14px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-md);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.ipz-employer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    border-color: var(--cyan);
}

.ipz-employer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
}
.ipz-employer-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ipz-employer-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--ink-2);
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
}



/* ═══════════════════════════════════════════════════════════
   13. MARQUEE
   ═══════════════════════════════════════════════════════════ */

.ipz-marquee {
    padding: 52px 0;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    background: var(--bg);
}
.ipz-marquee-label {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 36px;
}
.ipz-marquee-track {
    display: flex;
    gap: 32px;
    align-items: stretch;
    animation: ipz-marquee 50s linear infinite;
    width: max-content;
}
.ipz-marquee-track:hover { animation-play-state: paused; }

/* Карточка: логотип + подпись */
.ipz-marquee-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 180px;
    padding: 22px 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
    flex-shrink: 0;
}
.ipz-marquee-item:hover {
    border-color: var(--cyan);
    transform: translateY(-3px);
    box-shadow: var(--shadow-m);
}

/* Контейнер логотипу — фіксована висота для рівного ряду */
.ipz-marquee-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
}
.ipz-marquee-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter var(--t), opacity var(--t);
}
.ipz-marquee-item:hover .ipz-marquee-logo img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Підпис під логотипом */
.ipz-marquee-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-3);
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
    transition: color var(--t);
}
.ipz-marquee-item:hover .ipz-marquee-name {
    color: var(--brand);
}


/* ═══════════════════════════════════════════════════════════
   14. CTA-БАННЕР
   ═══════════════════════════════════════════════════════════ */

.ipz-cta {
    position: relative; padding: 60px 56px; border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--brand), #1a5f82, #14354e);
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; overflow: hidden; margin: 80px 0;
}
.ipz-cta::before {
    content: ''; position: absolute; top: -40%; right: -8%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(94,195,241,0.14), transparent 60%);
    pointer-events: none;
}
.ipz-cta-text { position: relative; z-index: 1; }
.ipz-cta h2 { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-bottom: 10px; }
.ipz-cta p { color: rgba(255,255,255,0.68); font-size: 15px; max-width: 460px; line-height: 1.7; }
.ipz-cta .ipz-btn { position: relative; z-index: 1; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════
   14b. ЗНАЙОМСТВО (відео + два світлі блоки, 3 колонки)
   ═══════════════════════════════════════════════════════════ */

.ipz-intro-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
    align-items: stretch;
    margin-top: 32px;
}
.ipz-intro-col { display: flex; flex-direction: column; }

.ipz-video-vertical {
    width: 100%;
    border-radius: var(--r-md);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    background: #000;
}
.ipz-video-caption {
    margin-top: 14px;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.55;
    text-align: center;
}

/* Світлий aside-блок (на sec-soft фоні — білий для контрасту) */
.ipz-aside-light {
    padding: 32px 28px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    flex: 1;
}
.ipz-aside-light h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 18px;
}
.ipz-aside-light > p {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.75;
}
.ipz-aside-light > p strong { color: var(--ink); }

/* Рядок факту у світлому блоці */
.ipz-fact-light {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 13px 0;
    border-top: 1px solid rgba(37,122,160,0.08);
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
}
.ipz-fact-light:first-of-type { border-top: none; }
.ipz-fact-light i,
.ipz-fact-light svg { color: var(--brand); width: 22px; height: 22px; flex-shrink: 0; margin-top: 6px; }


/* ═══════════════════════════════════════════════════════════
   15. ПІДВАЛ
   ═══════════════════════════════════════════════════════════ */

.ipz-footer { background: var(--bg-dark); color: var(--ink-on-dark); padding: 0px 0 36px; }
.ipz-footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 44px; padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Логотип-посилання у футері */
.ipz-footer-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: opacity var(--t);
}
.ipz-footer-logo-link:hover { opacity: 0.8; }
.ipz-footer-logo-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}

.ipz-footer-desc {
    font-size: 17px;
    font-weight: 500;
    color: rgba(205,216,228,0.8);
    line-height: 1.5;
    margin-top: 16px;
    max-width: 280px;
}
.ipz-footer-address {
    font-size: 15px;
    color: rgba(205,216,228,0.65);
    line-height: 1.5;
    margin-top: 14px;
    max-width: 280px;
}
.ipz-footer-col h5 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: rgba(205,216,228,0.8);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.ipz-footer-col a { display: block; font-size: 14px; color: rgba(205,216,228,0.6); text-decoration: none; margin: 16px 0 0; padding: 2px 0; transition: color var(--t); }
.ipz-footer-col a:hover { color: var(--cyan); }
.ipz-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; font-size: 12px; color: rgba(205,216,228,0.3); }
.ipz-footer-socials { display: flex; gap: 10px; }
.ipz-footer-social {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm); background: rgba(255,255,255,0.04);
    color: rgba(205,216,228,0.45); font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600; text-decoration: none; transition: all var(--t);
}
.ipz-footer-social:hover { background: rgba(94,195,241,0.12); color: var(--cyan); }

/* ── Полоса "Вступ" у футері (над основною сіткою) ── */
.ipz-footer-admission {
    background: var(--bg-dark-card);
    padding: 28px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin: 0 0 30px;
}
.ipz-footer-admission-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 44px;
    align-items: center;
}
.ipz-footer-admission-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ipz-footer-admission-title {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.ipz-footer-admission-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ipz-footer-admission-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: rgba(94,195,241,0.1);
    color: var(--cyan);
    flex-shrink: 0;
}
.ipz-footer-admission-icon i { width: 18px; height: 18px; }
.ipz-footer-admission-item-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(205,216,228,0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.ipz-footer-admission-item a {
    font-size: 17px;
    color: rgba(205,216,228,0.9);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--t);
}
.ipz-footer-admission-item a:hover { color: var(--cyan); }


/* ═══════════════════════════════════════════════════════════
   15b. УТИЛІТИ (допоміжні класи)
   Замість інлайн-стилів для повторюваних дрібниць.
   ═══════════════════════════════════════════════════════════ */

/* Lucide: розміри іконок у рядку тексту */
.ipz-lucide-xs i { width: 14px; height: 14px; }     /* у duration badge */
.ipz-lucide-sm i { width: 15px; height: 15px; }     /* у кнопках */
.ipz-lucide-md i { width: 16px; height: 16px; }     /* у pills */
.ipz-lucide-lg i { width: 18px; height: 18px; }     /* у fact-dark */

/* Lucide в aside-dark: фіксований розмір + колір */
.ipz-fact-dark i { width: 18px; height: 18px; color: var(--cyan); }

/* Lucide в pills */
.ipz-pill i { width: 16px; height: 16px; }

/* Overflow hidden обгортка (для marquee) */
.ipz-overflow-hidden { overflow: hidden; }

/* Повноширинна карточка у grid (grid-column: 1/-1) */
.ipz-card-full { grid-column: 1 / -1; }
/* Варіант з синім фоном */
.ipz-card-full-blue { grid-column: 1 / -1; background: var(--bg-blue); border-color: var(--line-2); margin-top: 1rem; }

/* Центрована іконка (у link-картках quick nav) */
.ipz-icon-centered { margin: 0 auto 12px; }

/* Текст-розділювач (персона в карточці) */
.ipz-card-divider { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Центроване flex-wrap */
.ipz-flex-center { justify-content: center; }

/* Logos subtitle */
.ipz-logos-subtitle { max-width: 480px; margin: 0 auto 40px; }

/* No text-decoration для карток-посилань */
a.ipz-card { text-decoration: none; }

/* Іконки в центрованих картках — автоцентрування */
.card-center > .ipz-icon,
.card-center > .ipz-icon-sm,
.card-center > .ipz-icon-lg,
.card-center > .ipz-icon-round,
.card-center > .ipz-icon-avatar {
    margin-left: auto;
    margin-right: auto;
}

/* Email items inside one card */
.ipz-email-item + .ipz-email-item {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ipz-mt-xs { margin-top: 8px; }


/* ═══════════════════════════════════════════════════════════
   16. АНІМАЦІЇ
   ═══════════════════════════════════════════════════════════ */

.ipz-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.ipz-reveal.visible { opacity: 1; transform: none; }
.ipz-reveal-d1 { transition-delay: 0.08s; }
.ipz-reveal-d2 { transition-delay: 0.16s; }
.ipz-reveal-d3 { transition-delay: 0.24s; }
.ipz-reveal-d4 { transition-delay: 0.32s; }

.ipz-fade-up { animation: ipz-fadeUp 0.75s var(--ease) both; }
.ipz-fade-up-d1 { animation-delay: 0.08s; }
.ipz-fade-up-d2 { animation-delay: 0.16s; }
.ipz-fade-up-d3 { animation-delay: 0.24s; }
.ipz-fade-up-d4 { animation-delay: 0.40s; }

@keyframes ipz-fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ipz-drift { 0% { transform: translate(0,0); } 100% { transform: translate(64px,64px); } }
@keyframes ipz-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ipz-shimmer { 0%,100% { background-position: 0% center; } 50% { background-position: 200% center; } }
@keyframes ipz-orbFloat { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(20px,15px) scale(1.08); } }
@keyframes ipz-rise {
    0%   { transform: translateY(100vh);  opacity: 0; }
    4%   {                                opacity: 1; }
    92%  {                                opacity: 1; }
    100% { transform: translateY(-110vh); opacity: 0; }
}
@keyframes ipz-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes ipz-map-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(94,195,241,0.2); } 50% { box-shadow: 0 0 0 16px rgba(94,195,241,0); } }

/* Плавний дрейф контурних кіл (Page Hero) */
@keyframes ipz-ringFloat1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-20px, 14px) scale(1.03); }
    100% { transform: translate(12px, -18px) scale(0.97); }
}
@keyframes ipz-ringFloat2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(16px, -14px) scale(0.96); }
    100% { transform: translate(-14px, 20px) scale(1.04); }
}
@keyframes ipz-ringFloat3 {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(10px, -8px); }
    100% { transform: translate(-8px, 12px); }
}
@keyframes ipz-ringFloat4 {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-8px, 10px); }
    100% { transform: translate(12px, -6px); }
}


/* ═══════════════════════════════════════════════════════════
   17. СЛАЙДЕР
   ═══════════════════════════════════════════════════════════ */

.ipz-slider {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ipz-slide {
    display: none;
    position: relative;
    aspect-ratio: 16 / 9;
}

.ipz-slide.active {
    display: block;
}

.ipz-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--r-lg);
}

.ipz-slider-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 24px 16px;
    background: linear-gradient(to top, rgba(10,22,40,0.72), transparent);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* Навігація */
.ipz-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.ipz-slider-prev,
.ipz-slider-next {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink-3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: var(--t);
    flex-shrink: 0;
}

.ipz-slider-prev:hover,
.ipz-slider-next:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(37,122,160,0.05);
}

/* Точки */
.ipz-slider-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ipz-slider-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line-2);
    cursor: pointer;
    transition: var(--t);
}

.ipz-slider-dot.active {
    background: var(--brand);
    width: 24px;
    border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════
   18. НАВЧАННЯ · Граф навчання (Learning Tree)
   ═══════════════════════════════════════════════════════════ */

/* Контейнер графу */
.ipz-tree {
    position: relative;
    margin-top: 48px;
}

/* Легенда рівнів — справа, на тих самих пристроях де є SVG-лінії */
.ipz-tree-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    justify-content: center;
    padding: 16px 22px;
    margin-bottom: 40px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-s);
}
.ipz-tree-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 500;
}
.ipz-tree-legend-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ipz-tree-legend-item .dot-violet { background: var(--accent-violet); }
.ipz-tree-legend-item .dot-green  { background: var(--accent-green); }
.ipz-tree-legend-item .dot-cyan   { background: var(--cyan); }
.ipz-tree-legend-item .dot-brand  { background: var(--brand); }

/* Ряд одного рівня */
.ipz-tree-row {
    position: relative;
    margin-bottom: 56px; /* відстань між рівнями — саме туди йдуть лінії */
}
.ipz-tree-row:last-child { margin-bottom: 0; }

/* Підпис рівня (зліва зверху кожного ряду) */
.ipz-tree-level {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-left: 4px;
}

/* Сітки для різних рядів */
.ipz-tree-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* за замовчуванням — 4 (для Рівня 4) */
    gap: 20px;
}
.ipz-tree-cards-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px; /* 2 блоки — вужчий контейнер, центровані */
    margin: 0 auto;
}
.ipz-tree-cards-1 {
    grid-template-columns: 1fr;
}

/* Картка */
.ipz-tree-card {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    box-shadow: var(--shadow-s);
    z-index: 2; /* вище за SVG-лінії */
}
.ipz-tree-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-m);
    border-color: var(--line-2);
}
.ipz-tree-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.35;
    letter-spacing: -0.2px;
}
.ipz-tree-card p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
}

/* Акцентна смуга зверху — колір відповідає рівню */
.ipz-tree-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 3px;
    border-radius: 0 0 3px 3px;
}
.ipz-tree-card-violet::before { background: var(--accent-violet); }
.ipz-tree-card-green::before  { background: var(--accent-green); }
.ipz-tree-card-cyan::before   { background: var(--cyan); }
.ipz-tree-card-brand::before  { background: var(--brand); }

/* Широка картка фундаменту — горизонтальний layout (іконка зліва) */
.ipz-tree-card-wide {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: flex-start;
    padding: 26px 28px;
}
.ipz-tree-card-wide .ipz-icon-sm {
    margin-bottom: 0;
    margin-top: 4px;
}
.ipz-tree-card-wide .ipz-tree-card-body h4 {
    margin-bottom: 10px;
}

/* SVG-шар зі сполучними лініями */
.ipz-tree-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
.ipz-tree-lines path {
    fill: none;
    stroke: var(--line-2);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.8;
}


/* ═══════════════════════════════════════════════════════════
   19. ПРОГРАМИ
   Блок 1 · Ключові цифри
   Блок 2 · Практика та проекти
   Блок 3 · Гнучкість · Вибіркові (траєкторії)
   Блок 4 · Дорожня карта навчання
   Блок 5 · SWEBoK
   Блок 6 · PDF-кнопки в картках Бакалавр/Магістр
   ═══════════════════════════════════════════════════════════ */

/* ─── Блок 1 · Ключові цифри ─── */
.ipz-keynums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 28px 32px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-s);
}
.ipz-keynum-item {
    text-align: center;
    padding: 0 8px;
    border-right: 1px solid var(--line);
}
.ipz-keynum-item:last-child { border-right: none; }
.ipz-keynum-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}
.ipz-keynum-plus {
    font-size: 32px;
    color: var(--cyan);
    vertical-align: top;
    margin-left: 2px;
}
.ipz-keynum-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}
.ipz-keynum-sub {
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.45;
}


/* ─── Блок 2 · Практика та проекти ─── */
.ipz-practice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}
.ipz-practice-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    box-shadow: var(--shadow-s);
    display: flex;
    flex-direction: column;
}
.ipz-practice-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-m);
    border-color: var(--line-2);
}
.ipz-practice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.ipz-practice-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.ipz-practice-sem {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.ipz-practice-cred {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
}
.ipz-practice-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
    line-height: 1.35;
    letter-spacing: -0.2px;
}
.ipz-practice-desc {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
}


/* ─── Блок 3 · Гнучкість · Вибіркові (траєкторії) ─── */
.ipz-tracks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}
.ipz-track-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    box-shadow: var(--shadow-s);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ipz-track-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-m);
    border-color: var(--line-2);
}
.ipz-track-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.ipz-track-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.2px;
    margin: 0;
}
.ipz-track-desc {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 16px;
}
.ipz-track-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ipz-track-item {
    font-size: 14px;
    color: var(--ink-2);
    padding: 8px 12px;
    background: var(--bg-soft);
    border-radius: var(--r-sm);
    line-height: 1.45;
}

.ipz-tracks-note {
    margin-top: 24px;
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(37, 122, 160, 0.05);
    border: 1px solid rgba(37, 122, 160, 0.15);
    border-radius: var(--r-md);
    align-items: flex-start;
}
.ipz-tracks-note i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--brand);
    margin-top: 2px;
}
.ipz-tracks-note span {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.6;
}


/* ─── Блок 4 · Дорожня карта навчання ─── */

/* Вступний текст під заголовком секції */
.ipz-roadmap-lead {
    color: var(--ink-3);
    max-width: 720px;
    line-height: 1.65;
    margin-top: 8px;
}

/* Контейнер карти */
.ipz-roadmap {
    margin-top: 36px;
    display: grid;
    gap: 0;
}

/* Рядок одного семестру: [мітка семестру | дисципліни] */
.ipz-roadmap-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}
.ipz-roadmap-row-last { border-bottom: none; }

/* Мітка семестру зліва */
.ipz-roadmap-sem {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ipz-roadmap-course {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.ipz-roadmap-course-hidden {
    visibility: hidden; /* залишаємо місце, приховуємо текст */
}
.ipz-roadmap-snum {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--line-2);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Контейнер пілюль дисциплін */
.ipz-roadmap-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
}

/* Пілюля дисципліни */
.ipz-disc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.4;
    border-left: 3px solid transparent;
    cursor: help;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ipz-disc:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-s);
}
.ipz-disc i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ─── Кольори дисциплін за лініями ─── */

/* Програмування — cyan (голубий) */
.ipz-disc-prog {
    background: rgba(94, 195, 241, 0.1);
    color: #14507c;
    border-left-color: var(--cyan);
}

/* Дані та системи — brand (синій) */
.ipz-disc-data {
    background: rgba(37, 122, 160, 0.08);
    color: #1c5f7d;
    border-left-color: var(--brand);
}

/* Інженерія ПЗ — accent-green (зелений) */
.ipz-disc-eng {
    background: rgba(27, 179, 116, 0.1);
    color: #0a5a3a;
    border-left-color: var(--accent-green);
}

/* ШІ та аналіз даних — ink-3 (сірий) */
.ipz-disc-ai {
    background: rgba(122, 138, 154, 0.12);
    color: #4a5560;
    border-left-color: var(--ink-3);
}

/* Практика та проекти — accent-violet (пунктир) */
.ipz-disc-practice {
    background: rgba(96, 54, 179, 0.07);
    color: #3a1a80;
    border: 1px dashed var(--accent-violet);
    border-left: 1px dashed var(--accent-violet); /* перевизначаємо border-left з базового */
    padding: 5px 10px; /* компенсуємо 1px border замість 3px */
}

/* Вибіркова дисципліна — нейтральний пунктир */
.ipz-disc-elective {
    background: var(--bg-soft);
    color: var(--ink-2);
    border: 1px dashed var(--line-2);
    border-left: 1px dashed var(--line-2);
    padding: 5px 10px;
}

/* ─── Легенда ─── */
.ipz-roadmap-legend {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-s);
}
.ipz-roadmap-legend-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ipz-roadmap-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
}
.ipz-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
}
.ipz-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.ipz-legend-prog     { background: var(--cyan); }
.ipz-legend-data     { background: var(--brand); }
.ipz-legend-eng      { background: var(--accent-green); }
.ipz-legend-ai       { background: var(--ink-3); }
.ipz-legend-practice { background: transparent; border: 1.5px dashed var(--accent-violet); }
.ipz-legend-elective { background: transparent; border: 1.5px dashed var(--line-2); }

/* ─── Фундамент (блок знизу) ─── */
.ipz-fundament {
    margin-top: 40px;
    padding: 28px 32px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
}
.ipz-fundament-head { margin-bottom: 20px; }
.ipz-fundament-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ipz-fundament-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
    line-height: 1.3;
}
.ipz-fundament-desc {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.65;
    max-width: 640px;
}
.ipz-fundament-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.ipz-fundament-card {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    cursor: help;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ipz-fundament-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-s);
    border-color: var(--line-2);
}
.ipz-fundament-card-wide {
    grid-column: span 2;
}
.ipz-fundament-sem {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink-3);
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.ipz-fundament-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

/* ─── Заголовок магістерської частини ─── */
.ipz-roadmap-master-head {
    margin-top: 56px;
}
.ipz-roadmap-master {
    margin-top: 28px;
}


/* ─── Блок 5 · SWEBoK ─── */
.ipz-swebok {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 36px 40px;
    box-shadow: var(--shadow-s);
    margin-top: 24px;
}
.ipz-swebok-head {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 24px;
}
.ipz-swebok-title {
    margin: 0 0 6px;
}
.ipz-swebok-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: var(--ink-3);
    letter-spacing: 1px;
}
.ipz-swebok-body p {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.75;
    margin-bottom: 14px;
}
.ipz-swebok-body p:last-child { margin-bottom: 0; }
.ipz-swebok-body strong { color: var(--ink); font-weight: 600; }

.ipz-swebok-areas {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.ipz-swebok-areas-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.ipz-swebok-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ipz-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: rgba(37, 122, 160, 0.08);
    color: var(--brand);
    font-size: 15px;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid rgba(37, 122, 160, 0.15);
}

.ipz-footnote {
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.ipz-footnote i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--brand);
    margin-top: 2px;
}
.ipz-footnote > div {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
}
.ipz-footnote strong { color: var(--ink); font-weight: 600; }


/* ─── Блок 6 · PDF-кнопки в картках Бакалавр/Магістр ─── */
.ipz-prog-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ipz-prog-card потребує flex-колонку, щоб footer прилип донизу при різній кількості компетенцій */
.ipz-prog-card { display: flex; flex-direction: column; }
/* Відступ перед footer у високих картках */
.ipz-prog-footer:not(:only-child) { margin-top: 24px; }
.ipz-prog-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--r-md);
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ipz-prog-pdf-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    color: #fff;
}
.ipz-prog-pdf-btn i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--cyan);
}
.ipz-prog-pdf-btn strong {
    font-weight: 700;
    color: #fff;
}
.ipz-prog-pdf-note {
    font-size: 11.5px;
    color: rgba(205, 216, 228, 0.5);
    line-height: 1.5;
    margin-top: 10px;
}


/* ═══════════════════════════════════════════════════════════
   20. КЕРІВНИЦТВО — картки керівників + посилання на кадровий склад
   ═══════════════════════════════════════════════════════════ */

/* Сітка 2×2 (на широкому екрані) → 1 колонка (на мобільному) */
.ipz-leaders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 52px;
}

/* Картка одного керівника */
.ipz-leader-card {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 24px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: all var(--t);
    overflow: hidden;
}

/* Кольорова лівa смужкa — зʼявляється на hover */
.ipz-leader-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 4px; height: 0;
    border-radius: 0 2px 2px 0;
    transition: height var(--t);
}
.ipz-leader-card:hover {
    border-color: rgba(37,122,160,0.18);
    box-shadow: var(--shadow-l);
    transform: translateY(-4px);
}
.ipz-leader-card:hover::before { height: 100%; }

/* Кольори лівої смужки (як у .ipz-card) */
.ipz-leader-card.c-brand::before  { background: var(--brand); }
.ipz-leader-card.c-cyan::before   { background: var(--cyan); }
.ipz-leader-card.c-green::before  { background: var(--accent-green); }
.ipz-leader-card.c-violet::before { background: var(--accent-violet); }

/* Фото керівника — пропорції 3:4 (портрет) */
.ipz-leader-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--line);
}
.ipz-leader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t);
}
.ipz-leader-card:hover .ipz-leader-photo img { transform: scale(1.04); }

/* Інформаційна частина картки */
.ipz-leader-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* дозволяє довгому email переноситись */
}

/* Посада (над іменем) */
.ipz-leader-card .ipz-leader-role {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 10px;
    margin-top: 0;
}

/* Колір посади = колір смужки */
.ipz-leader-card.c-brand  .ipz-leader-role { color: var(--brand); }
.ipz-leader-card.c-cyan   .ipz-leader-role { color: #2a9fd0; } /* трохи темніше за --cyan для читабельності */
.ipz-leader-card.c-green  .ipz-leader-role { color: var(--accent-green); }
.ipz-leader-card.c-violet .ipz-leader-role { color: var(--accent-violet); }

/* ПІБ */
.ipz-leader-card .ipz-leader-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin: 0 0 8px 0;
}

/* Науковий ступінь / звання */
.ipz-leader-degree {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.45;
    margin-bottom: 14px;
}

/* Email-посилання */
.ipz-leader-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--brand);
    text-decoration: none;
    padding: 8px 12px;
    background: rgba(37,122,160,0.06);
    border-radius: 8px;
    transition: all var(--t);
    align-self: flex-start;
    max-width: 100%;
    word-break: break-all;
    line-height: 1.3;
}
.ipz-leader-email i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.ipz-leader-email:hover {
    background: rgba(37,122,160,0.12);
    color: var(--brand-dark);
}

/* ── Посилання на кадровий склад (під сіткою) ── */
.ipz-leaders-footer {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.ipz-leaders-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 18px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none;
    transition: all var(--t);
    max-width: 560px;
    width: 100%;
    justify-content: flex-start;
}
.ipz-leaders-link:hover {
    border-color: rgba(37,122,160,0.3);
    box-shadow: var(--shadow-m);
    transform: translateY(-2px);
}

.ipz-leaders-link-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(37,122,160,0.12), rgba(94,195,241,0.12));
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ipz-leaders-link-icon i { width: 20px; height: 20px; }

.ipz-leaders-link-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ipz-leaders-link-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
.ipz-leaders-link-sub {
    font-size: 14px;
    color: var(--ink-3);
    margin-top: 3px;
    line-height: 1.4;
}

.ipz-leaders-link-arrow {
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--t);
}
.ipz-leaders-link-arrow i { width: 20px; height: 20px; }
.ipz-leaders-link:hover .ipz-leaders-link-arrow {
    transform: translate(3px, -3px);
}


/* ═══════════════════════════════════════════════════════════
   21. РІЗНЕ
   Вторинні посилання, кнопка-презентація.
   ═══════════════════════════════════════════════════════════ */

/* Вторинне посилання на програму в сайті університету — тонше, без фону */
.ipz-prog-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 0;
    color: var(--bg);
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ipz-prog-link:hover {
    color: var(--cyan);
    transform: translateX(2px);
}
.ipz-prog-link:hover .ipz-prog-link-host {
    color: rgba(255, 255, 255, 0.6);
}
.ipz-prog-link i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.ipz-prog-link-host {
    margin-left: auto;
    padding-left: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px;
    color: rgba(205, 216, 228, 0.4);
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}

/* Кнопка-презентація (кнопка повної ширини на мобільному) */
.ipz-btn-presentation {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   22. АДАПТИВНІСТЬ
   Усі @media-запити зібрані в одному місці.
   Брейкпоінти: 1024px → 768px → 480px.
   Всередині кожного блоку правила йдуть у тій самій тематичній
   послідовності, що й основні стилі вище.
   ═══════════════════════════════════════════════════════════ */


/* ─── Планшет (≤1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {

    /* ── Контейнер ── */
    .wrap, .ipz-nav-container, .ipz-hero-content { padding-left: 24px; padding-right: 24px; }

    /* ── Навігація ── */
    .ipz-nav-bottom { display: none; }
    .ipz-lang-switch { display: none; }
    .ipz-nav-cta { display: none; }
    .ipz-burger { display: block; }
    .ipz-mobile-menu { display: block; }
    .ipz-nav { position: sticky; top: 0; }

    /* Шапка на планшеті/мобільному: висота не фіксована, а гнучка */
    .ipz-nav-top {
        height: auto;
        min-height: 64px;
        padding: 10px 0;
        gap: 12px;
    }

    /* Лого-картинка менша на мобільному */
    .ipz-logo-img {
        width: 44px;
        height: 44px;
    }

    /* Лого має правильно стискатися та не вилазити */
    .ipz-logo {
        flex: 1 1 auto;
        min-width: 0;       /* критично: дозволяє flex-дитині стискатися */
        gap: 10px;
    }

    .ipz-logo-text {
        min-width: 0;       /* щоб текст міг переноситися/обрізатися */
        flex: 1 1 auto;
    }

    /* Заголовок: менший шрифт, обмежена висота, переноси по словах */
    .ipz-logo-title {
        font-size: 14px;
        line-height: 1.25;
        font-weight: 700;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Підзаголовок (поки що видимий на 1024) — теж менший */
    .ipz-logo-subtitle {
        font-size: 12px;
        line-height: 1.3;
    }

    /* Бургер не стискається */
    .ipz-burger { flex-shrink: 0; }
    .ipz-nav-top-right { flex-shrink: 0; }

    /* ── Hero ── */
    /* Hero на планшетах: зменшуємо орби, ховаємо 2 з 4 фрагментів */
    .ipz-hero-orb.o1 { width: 300px; height: 300px; }
    .ipz-hero-orb.o2 { width: 200px; height: 200px; }
    .ipz-hero-orb.o3 { display: none; }
    .ipz-hero-frag.fb,
    .ipz-hero-frag.fd { display: none; }
    /* Page Hero: кола зменшуємо, мікро-коло ховаємо */
    .ipz-hero-ring.r1 { width: 320px; height: 320px; top: -25%; right: -6%; }
    .ipz-hero-ring.r2 { width: 220px; height: 220px; top: 10%; right: 6%; }
    .ipz-hero-ring.r4 { display: none; }
    .ipz-hero-stats { gap: 32px; flex-wrap: wrap; }

    /* ── Сітки та layout ── */
    .ipz-grid-3 { grid-template-columns: repeat(2,1fr); }
    .ipz-grid-4 { grid-template-columns: repeat(2,1fr); }
    .ipz-grid-study { grid-template-columns: repeat(3,1fr) !important; }
    .ipz-editorial { grid-template-columns: 1fr; }
    .ipz-layout-sidebar, .ipz-layout-sidebar-wide, .ipz-layout-half { grid-template-columns: 1fr; }
    .ipz-intro-row { grid-template-columns: 1fr 1fr; }
    .ipz-intro-row .ipz-intro-col:first-child { grid-column: 1 / -1; justify-self: center; max-width: 400px; }

    /* ── Editorial / practice ── */
    .ipz-ed-light { border-left: 1px solid var(--line); border-top: none; }
    .ipz-practice-strip { flex-direction: column; gap: 20px; }

    /* ── Admission strip ── */
    .ipz-admission-strip { flex-wrap: wrap; }
    .ipz-adm-item { flex: 1 1 45%; }

    /* ── CTA ── */
    .ipz-cta { flex-direction: column; align-items: flex-start; padding: 44px 36px; }

    /* ── Footer ── */
    .ipz-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .ipz-footer-admission-inner { grid-template-columns: 1fr; gap: 20px; }

    /* ── Tree (граф навчання) ── */
    .ipz-tree-cards {
        grid-template-columns: repeat(2, 1fr); /* 4-колонковий ряд → 2 колонки */
    }
    .ipz-tree-cards-2 {
        max-width: none; /* 2-колонкові ряди на всю ширину */
    }
    .ipz-tree-lines {
        display: none; /* на планшеті лінії плутають — ховаємо */
    }
    .ipz-tree-row {
        margin-bottom: 32px;
    }

    /* ── Roadmap ── */
    .ipz-roadmap-row {
        grid-template-columns: 78px 1fr;
        gap: 12px;
    }
    .ipz-roadmap-master .ipz-roadmap-row {
        grid-template-columns: 100px 1fr;
    }
    .ipz-fundament {
        padding: 24px 22px;
    }
    .ipz-fundament-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ipz-fundament-card-wide {
        grid-column: span 2;
    }

    /* ── Програми (key-numbers, practice, tracks, swebok) ── */
    .ipz-keynums {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        padding: 24px 22px;
    }
    .ipz-keynum-item {
        border-right: none;
    }
    .ipz-keynum-item:nth-child(1),
    .ipz-keynum-item:nth-child(2) {
        border-bottom: 1px solid var(--line);
        padding-bottom: 20px;
    }
    .ipz-keynum-value { font-size: 38px; }

    .ipz-practice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ipz-practice-grid > .ipz-practice-card:nth-child(5) {
        grid-column: 1 / -1;
    }

    .ipz-tracks {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .ipz-swebok {
        padding: 28px 26px;
    }
    .ipz-swebok-head {
        gap: 18px;
    }

    /* ── Керівництво ── */
    .ipz-leader-card {
        grid-template-columns: 130px 1fr;
        gap: 20px;
        padding: 20px;
    }
    .ipz-leader-card .ipz-leader-name { font-size: 16.5px; }
    .ipz-leader-email { font-size: 12px; }
    
    /* ── Marquee ── */
    .ipz-marquee-item { width: 160px; padding: 18px 14px; gap: 12px; }
    .ipz-marquee-logo { height: 48px; }
    .ipz-marquee-track { gap: 24px; }
    
    /* ── Employers ── */
    .ipz-employers-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ─── Мобільний (≤768px) ──────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Контейнер та секції ── */
    .wrap, .ipz-nav-inner, .ipz-hero-content { padding-left: 20px; padding-right: 20px; }
    .ipz-sec { padding: 64px 0; }

    /* ── Сітки ── */
    .ipz-grid-2 { grid-template-columns: 1fr; }
    .ipz-grid-3 { grid-template-columns: 1fr; }
    .ipz-grid-4 { grid-template-columns: 1fr 1fr; }
    .ipz-grid-study { grid-template-columns: repeat(2,1fr) !important; }
    .ipz-form-row { grid-template-columns: 1fr; }
    .ipz-intro-row { grid-template-columns: 1fr; }
    .ipz-intro-row .ipz-intro-col:first-child { grid-column: auto; max-width: 100%; }

    /* ── Навігація / лого ── */
    .ipz-logo-subtitle { display: none; }

    /* ── Hero ── */
    /* Hero: на мобільних — чистий темний фон без ефектів */
    .ipz-hero::before { content: none; }       /* прибираємо mesh-градієнти */
    .ipz-hero-grid { display: none; }           /* прибираємо сітку */
    .ipz-hero-orb { display: none; }            /* прибираємо ВСІ орби */
    .ipz-hero-frag { display: none; }           /* прибираємо фрагменти коду */
    /* Page Hero: лишаємо лише два правих кола */
    .ipz-hero-ring.r1 { width: 240px; height: 240px; top: -20%; right: -10%; }
    .ipz-hero-ring.r2 { width: 160px; height: 160px; top: 15%; right: 2%; }
    .ipz-hero-ring.r3 { display: none; }

    /* ── Кнопки (hero actions) ── */
    .ipz-hero-actions-row { flex-direction: column; }
    .ipz-hero-actions-row .ipz-btn-stacked { width: 100%; flex: 1 1 auto; }
    .ipz-btn-presentation { width: 100%; }

    /* ── Admission strip ── */
    .ipz-admission-strip { flex-direction: column; }
    .ipz-adm-item { border-right: none; border-bottom: 1px solid rgba(94,195,241,0.08); }
    .ipz-adm-item:last-child { border-bottom: none; }

    /* ── Footer ── */
    .ipz-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .ipz-footer-bottom { flex-direction: column; gap: 16px; text-align: center; }

    /* ── Tree (граф навчання) ── */
    .ipz-tree-cards,
    .ipz-tree-cards-2 {
        grid-template-columns: 1fr; /* всі блоки в колонку */
    }
    .ipz-tree-legend {
        gap: 12px 18px;
        padding: 14px 16px;
    }
    .ipz-tree-legend-item {
        font-size: 12px;
    }
    .ipz-tree-card {
        padding: 20px 18px;
    }
    /* Широка картка — перехід до вертикального layout */
    .ipz-tree-card-wide {
        grid-template-columns: 1fr;
        padding: 20px 18px;
    }
    .ipz-tree-card-wide .ipz-icon-sm {
        margin-bottom: 14px;
        margin-top: 0;
    }
    .ipz-tree-row {
        margin-bottom: 24px;
    }
    .ipz-tree-level {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    /* ── Roadmap ── */
    .ipz-roadmap-row,
    .ipz-roadmap-master .ipz-roadmap-row {
        grid-template-columns: 1fr; /* мітка семестру стає заголовком над дисциплінами */
        gap: 6px;
        padding: 14px 0;
    }
    .ipz-roadmap-sem {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        padding-top: 0;
    }
    .ipz-roadmap-course-hidden {
        display: none; /* на мобільному повністю приховуємо дубль */
    }
    .ipz-roadmap-items {
        padding: 0;
    }
    .ipz-disc {
        font-size: 12.5px;
        padding: 5px 10px;
    }
    .ipz-roadmap-legend {
        padding: 14px 16px;
    }
    .ipz-roadmap-legend-items {
        gap: 12px 16px;
    }
    .ipz-legend-item {
        font-size: 12px;
    }
    .ipz-fundament {
        padding: 20px 18px;
    }
    .ipz-fundament-grid {
        grid-template-columns: 1fr;
    }
    .ipz-fundament-card-wide {
        grid-column: auto;
    }
    .ipz-fundament-title {
        font-size: 18px;
    }
    .ipz-roadmap-master-head {
        margin-top: 40px;
    }

    /* ── Програми (key-numbers, practice, tracks, swebok, pdf-button) ── */
    .ipz-keynums {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 18px;
    }
    .ipz-keynum-item {
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding-bottom: 18px;
    }
    .ipz-keynum-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .ipz-keynum-item:nth-child(1),
    .ipz-keynum-item:nth-child(2) {
        border-bottom: 1px solid var(--line);
        padding-bottom: 18px;
    }
    .ipz-keynum-value { font-size: 34px; }

    .ipz-practice-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .ipz-practice-grid > .ipz-practice-card:nth-child(5) {
        grid-column: auto;
    }
    .ipz-practice-card {
        padding: 20px 18px;
    }

    .ipz-tracks {
        max-width: none;
    }

    .ipz-swebok {
        padding: 22px 18px;
    }
    .ipz-swebok-head {
        flex-direction: column;
        gap: 14px;
    }
    .ipz-swebok-body p {
        font-size: 14.5px;
    }

    .ipz-prog-pdf-btn {
        font-size: 13px;
        padding: 10px 14px;
    }

    /* ── Керівництво ── */
    .ipz-leaders-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 36px;
    }
    .ipz-leader-card {
        grid-template-columns: 120px 1fr;
        gap: 18px;
        padding: 18px;
    }
    .ipz-leader-card .ipz-leader-role {
        font-size: 10.5px;
        margin-bottom: 8px;
    }
    .ipz-leader-card .ipz-leader-name { font-size: 16px; margin-bottom: 6px; }
    .ipz-leader-degree { font-size: 12.5px; margin-bottom: 10px; }
    .ipz-leader-email {
        font-size: 11.5px;
        padding: 6px 10px;
    }

    .ipz-leaders-footer { margin-top: 24px; }
    .ipz-leaders-link {
        padding: 14px 18px;
        gap: 14px;
    }
    .ipz-leaders-link-icon {
        width: 38px; height: 38px;
    }
    .ipz-leaders-link-title { font-size: 14px; }
    .ipz-leaders-link-sub { font-size: 11.5px; }

    /* ── Різне (prog-link: домен у новий рядок, менший шрифт) ── */
    /* Раніше було в окремому @media (max-width: 640px) — об'єднано сюди. */
    .ipz-prog-link {
        flex-wrap: wrap;
        font-size: 12.5px;
    }
    .ipz-prog-link-host {
        margin-left: 22px; /* вирівняти під текстом, не під іконкою */
        padding-left: 0;
        font-size: 10.5px;
    }
    
    /* ── Marquee ── */
    .ipz-marquee { padding: 40px 0; }
    .ipz-marquee-label { font-size: 15px; margin-bottom: 28px; }
    .ipz-marquee-item { width: 140px; padding: 16px 12px; gap: 10px; }
    .ipz-marquee-logo { height: 42px; }
    .ipz-marquee-track { gap: 18px; animation-duration: 40s; }
    .ipz-marquee-name { font-size: 12px; }
    
    /* ── Employers ── */
    .ipz-employers-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .ipz-employer-card { padding: 16px 10px; gap: 10px; }
    .ipz-employer-logo { height: 38px; }
    .ipz-employer-name { font-size: 11px; }
    .ipz-employers-title { font-size: 14px; margin-bottom: 24px; }
}


/* ─── Малий мобільний (≤480px) ────────────────────────────── */
@media (max-width: 480px) {

    /* ── Контейнер ── */
    .ipz-nav-container {
        padding: 0 16px;
    }

    /* ── Навігація / лого ── */
    /* На дуже вузьких — ще трохи менше */
    .ipz-logo-img {
        width: 38px;
        height: 38px;
    }
    .ipz-logo-title {
        font-size: 13px;
    }
    .ipz-logo {
        gap: 8px;
    }

    /* ── Hero ── */
    .ipz-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .ipz-stat-value { font-size: 24px; }

    /* ── Cards / panels ── */
    .ipz-grid-4 { grid-template-columns: 1fr; }
    .ipz-prog-card { padding: 32px 24px; }
    .ipz-ed-panel { padding: 36px 28px; }

    /* ── CTA ── */
    .ipz-cta { padding: 32px 24px; margin: 48px 0; }
    .ipz-cta h2 { font-size: 22px; }

    /* ── Керівництво (фото зверху, текст центровано) ── */
    .ipz-leader-card {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .ipz-leader-photo {
        max-width: 160px;
        margin: 0 auto;
    }
    .ipz-leader-info {
        text-align: center;
        align-items: center;
    }
    .ipz-leader-email {
        align-self: center;
    }
    
    /* ── Marquee ── */
    .ipz-marquee { padding: 32px 0; }
    .ipz-marquee-label { font-size: 13px; letter-spacing: 0.08em; margin-bottom: 22px; }
    .ipz-marquee-item { width: 120px; padding: 14px 10px; gap: 8px; }
    .ipz-marquee-logo { height: 36px; }
    .ipz-marquee-track { gap: 14px; animation-duration: 35s; }
    .ipz-marquee-name { font-size: 11px; }
    
    /* ── Employers ── */
    .ipz-employers-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ipz-employer-card { padding: 14px 8px; gap: 8px; }
    .ipz-employer-logo { height: 34px; }
}

/* ═══════════════════════════════════════════════════════════
   АДАПТИВНІСТЬ — блог   
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    /* ── Hero статті — менший заголовок ── */
    .ipz-page-hero .ipz-article-title { font-size: clamp(24px, 4vw, 36px); margin: 12px 0 20px; }

    /* ── Розкладка статті: TOC згортається у звичайний блок зверху ── */
    .ipz-article-layout {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 720px;
    }
    .ipz-toc {
        position: static;
        max-height: none;
        padding: 18px 22px;
        border-left: 3px solid var(--brand);
        background: var(--bg-soft);
        border-radius: 0 var(--r-md) var(--r-md) 0;
    }

    /* ── Стрічка постів: 2 колонки ── */
    .ipz-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    /* Featured image на single */
    .ipz-article-cover {
        padding: 0 24px;
        margin-top: -28px;
    }
    .ipz-article-cover img { max-height: 360px; }
}

@media (max-width: 768px) {
    /* ── Hero статті — мета ── */
    .ipz-article-meta { font-size: 13px; gap: 14px; }

    /* ── Контент статті ── */
    .ipz-article-content > p:first-of-type { font-size: 17px; }
    .ipz-article-content h2 { font-size: 24px; margin: 44px 0 14px; }
    .ipz-article-content h3 { font-size: 19px; margin: 28px 0 12px; }
    .ipz-article-content p,
    .ipz-article-content ul,
    .ipz-article-content ol { font-size: 16px; }
    .ipz-article-content blockquote { padding: 16px 20px; font-size: 16px; }

    /* ── Картка посту ── */
    .ipz-post-body { padding: 20px 22px 24px; }
    .ipz-post-card-title { font-size: 18px; }
    .ipz-post-card-excerpt { font-size: 14px; margin-bottom: 16px; }

    /* ── Featured image ── */
    .ipz-article-cover { margin-top: -24px; }
    .ipz-article-cover img { max-height: 280px; }

    /* ── Related ── */
    .ipz-related { padding: 56px 0; }
    .ipz-related-title { font-size: 22px; margin-bottom: 24px; }

    /* ── Оформление блоков ── */
    .ipz-article-figure--right,
    .ipz-article-figure--left { float: none; width: 100%; margin: 24px 0; }
    .ipz-article-content .ipz-callout,
    .ipz-article-content .ipz-mascot-note { padding: 18px 20px; gap: 14px; }
    .ipz-mascot-avatar { width: 52px; height: 52px; }
    .ipz-pullquote-text { font-size: 18px; }
    .ipz-article-content .ipz-mascot-card { flex-direction: column; text-align: center; gap: 16px; padding: 24px 22px; }
    .ipz-mascot-card-pic { width: 84px; height: 84px; }
    
    .ipz-article-content .ipz-roles { grid-template-columns: 1fr; }
    .ipz-article-content .ipz-quiz  { padding: 22px 20px; }
    .ipz-step { grid-template-columns: 38px 1fr; gap: 14px; }
    .ipz-step-num { width: 38px; height: 38px; font-size: 15px; }
    .ipz-step:not(:last-child)::before { left: 18px; top: 36px; }
    .ipz-faq-item { padding: 18px 20px; }
    .ipz-faq-a { padding-left: 0; }
    
    .ipz-404 { padding: 60px 20px; }
    .ipz-404__mascot { width: 140px; height: 140px; }
    .ipz-404__title { font-size: 1.375rem; }
    .ipz-404__text { font-size: 1rem; }
}

@media (max-width: 480px) {
    /* ── Hero статті — менший заголовок ── */
    .ipz-page-hero .ipz-article-title { font-size: clamp(22px, 6vw, 28px); }

    /* ── Стрічка постів: 1 колонка ── */
    .ipz-posts-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .ipz-post-cover { aspect-ratio: 16 / 10; }
    .ipz-post-cover-fallback { aspect-ratio: 16 / 10; }
    .ipz-post-cover-fallback i { width: 52px; height: 52px; }

    /* ── Контент статті ── */
    .ipz-article-content h2 { font-size: 22px; }
    .ipz-article-content h3 { font-size: 18px; }
    .ipz-article-content pre { padding: 16px; font-size: 13px; }

    /* ── Featured image ── */
    .ipz-article-cover {
        padding: 0 18px;
        margin-top: -20px;
    }

    /* ── Пагінація ── */
    .ipz-pagination .page-numbers {
        min-width: 36px; height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }

    /* ── Back to blog ── */
    .ipz-back-to-blog {
        margin-top: 40px;
        width: 100%;
        justify-content: center;
    }
    
    /* @media (max-width: 480px) — 26. 404 PAGE */
    .ipz-404__mascot {
        width: 120px;
        height: 120px;
    }
    
    .ipz-404__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .ipz-404__actions .ipz-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   23. БЛОГ
   Стилі для шаблонів blog.html (стрічка) та single.html (стаття).
   Використовуємо існуючий .ipz-page-hero для шапок —
   нижче лише доповнення поверх нього (бейдж рубрики, мета,
   заголовок статті) + усі стилі для карток, TOC, контенту.

   Структура:
     · Доповнення до .ipz-page-hero для статті
     · Картки стрічки + градієнтний fallback для зображень
     · Розкладка статті (контент + sticky TOC)
     · Типографіка тіла статті
     · Featured image
     · Пагінація
     · «Читайте також»
     · Назад до списку
   ═══════════════════════════════════════════════════════════ */

/* ── Доповнення hero для single (тих же розмірів, що і .ipz-page-hero) ── */

/* Заголовок статті у hero — h1 трохи менший, ніж типовий .ipz-h1 на сторінках,
   бо назви статей довші. Залишаємо білий колір через on-dark. */
.ipz-page-hero .ipz-article-title {
    font-size: clamp(28px, 3.8vw, 48px);
    line-height: 1.15;
    letter-spacing: -0.025em;
    max-width: 880px;
    margin: 14px 0 24px;
}

/* Бейдж рубрики у hero статті */
.ipz-article-category {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: rgba(94,195,241,0.1);
    border: 1px solid rgba(94,195,241,0.2);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 500;
    color: var(--cyan);
    text-decoration: none;
    letter-spacing: 0.04em;
    margin-top: 14px;
    transition: all var(--t);
}
.ipz-article-category:hover {
    background: rgba(94,195,241,0.16);
    border-color: rgba(94,195,241,0.32);
    color: var(--cyan-pale);
}

/* Метаданні статті (дата + час читання) */
.ipz-article-meta {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 8px;
    font-size: 14px;
    color: rgba(205,216,228,0.55);
}
.ipz-article-meta-item {
    display: inline-flex; align-items: center; gap: 7px;
}
.ipz-article-meta-item i {
    width: 15px; height: 15px;
    opacity: 0.7;
}
.ipz-article-meta-sep {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(205,216,228,0.3);
}

/* ── Картка посту у стрічці ── */
.ipz-post-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: all var(--t);
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.ipz-post-card:hover {
    border-color: rgba(37,122,160,0.22);
    box-shadow: var(--shadow-l);
    transform: translateY(-4px);
    color: inherit;
}

/* Обкладинка картки — реальне зображення */
.ipz-post-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-soft);
}
.ipz-post-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.ipz-post-card:hover .ipz-post-cover img {
    transform: scale(1.04);
}

/* Градієнтний fallback — для постів без обкладинки */
.ipz-post-cover-fallback {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 55%, var(--cyan) 100%);
    display: flex; align-items: center; justify-content: center;
}
.ipz-post-cover-fallback::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, black, transparent);
    -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, black, transparent);
}
.ipz-post-cover-fallback::after {
    content: '';
    position: absolute;
    width: 240px; height: 240px;
    top: -50px; right: -60px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), transparent 60%);
}
.ipz-post-cover-fallback i {
    position: relative;
    width: 64px; height: 64px;
    color: rgba(255,255,255,0.85);
    z-index: 1;
    stroke-width: 1.4;
}

/* Тіло картки */
.ipz-post-body {
    padding: 24px 26px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ipz-post-category-pill {
    display: inline-flex; align-items: center;
    align-self: flex-start;
    padding: 4px 11px;
    background: rgba(37,122,160,0.08);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    text-decoration: none;
}
.ipz-post-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.ipz-post-card-excerpt {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.65;
    margin: 0 0 20px;
    flex: 1;
}
.ipz-post-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-3);
}
.ipz-post-card-date {
    display: inline-flex; align-items: center; gap: 6px;
}
.ipz-post-card-date i { width: 13px; height: 13px; }
.ipz-post-card-readmore {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: 0.02em;
    transition: gap var(--t);
}
.ipz-post-card:hover .ipz-post-card-readmore {
    gap: 9px;
}
.ipz-post-card-readmore i { width: 14px; height: 14px; }

/* ── Стрічка постів (3 колонки) ── */
.ipz-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 8px;
}

/* Порожня стрічка */
.ipz-posts-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--ink-3);
    font-size: 17px;
}

/* ── Пагінація ── */
.ipz-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 64px;
    flex-wrap: wrap;
}
.ipz-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    transition: all var(--t);
}
.ipz-pagination .page-numbers:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-1px);
    box-shadow: var(--shadow-s);
}
.ipz-pagination .page-numbers.current {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.ipz-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: var(--ink-3);
}
.ipz-pagination .page-numbers.dots:hover {
    transform: none;
    box-shadow: none;
}

/* ── Розкладка статті: контент + sticky TOC ── */
.ipz-article-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 64px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

/* Sticky TOC */
.ipz-toc {
    position: sticky;
    top: 100px;
    padding: 22px 0 22px 22px;
    border-left: 1px solid var(--line);
    font-size: 13px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}
.ipz-toc::-webkit-scrollbar { width: 4px; }
.ipz-toc::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.ipz-toc-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.ipz-toc-list {
    list-style: none;
    margin: 0; padding: 0;
}
.ipz-toc-list li {
    margin: 0 0 8px;
    line-height: 1.4;
}
.ipz-toc-list li.is-h3 {
    padding-left: 14px;
    font-size: 12.5px;
}
.ipz-toc-list a {
    color: var(--ink-2);
    text-decoration: none;
    transition: color var(--t);
    display: block;
    padding: 3px 0;
}
.ipz-toc-list a:hover {
    color: var(--brand);
}
.ipz-toc-list a.is-active {
    color: var(--brand);
    font-weight: 600;
}

/* ── Контент статті ── */
.ipz-article-content {
    min-width: 0;
    max-width: 720px;
}

/* Великий лід-абзац (перший <p> після заголовка статті) */
.ipz-article-content > p:first-of-type {
    font-size: 19px;
    line-height: 1.7;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 28px;
}

.ipz-article-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 56px 0 18px;
    scroll-margin-top: 100px;
}
.ipz-article-content h2:first-child {
    margin-top: 0;
}
.ipz-article-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin: 36px 0 14px;
    scroll-margin-top: 100px;
}
.ipz-article-content h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    margin: 28px 0 10px;
}

.ipz-article-content p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--ink-2);
    margin: 0 0 22px;
}
.ipz-article-content p strong {
    color: var(--ink);
    font-weight: 600;
}
.ipz-article-content a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-color: rgba(37,122,160,0.32);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--t);
}
.ipz-article-content a:hover {
    text-decoration-color: var(--brand);
}

.ipz-article-content ul,
.ipz-article-content ol {
    margin: 0 0 24px;
    padding-left: 24px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--ink-2);
}
.ipz-article-content li {
    margin-bottom: 8px;
}
.ipz-article-content li::marker {
    color: var(--brand);
}

.ipz-article-content blockquote {
    margin: 32px 0;
    padding: 20px 28px;
    border-left: 3px solid var(--brand);
    background: var(--bg-soft);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-2);
    font-style: italic;
}
.ipz-article-content blockquote p:last-child {
    margin-bottom: 0;
}

.ipz-article-content img,
.ipz-article-content .wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    margin: 0;
}
.ipz-article-content figure {
    margin: 28px 0;
}
.ipz-article-content figcaption {
    font-size: 14px;
    color: var(--ink-3);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}

.ipz-article-content code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.92em;
    background: rgba(37,122,160,0.08);
    color: var(--brand);
    padding: 2px 7px;
    border-radius: 4px;
}
.ipz-article-content pre {
    background: var(--bg-dark);
    color: var(--ink-on-dark);
    padding: 22px 24px;
    border-radius: var(--r-md);
    overflow-x: auto;
    margin: 28px 0;
    font-size: 14px;
    line-height: 1.6;
}
.ipz-article-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.ipz-article-content hr {
    border: none;
    height: 1px;
    background: var(--line);
    margin: 48px 0;
}

/* ── Featured image на single (опційно під hero) ── */
.ipz-article-cover {
    max-width: 1100px;
    margin: -36px auto 0;
    padding: 0 30px;
    position: relative;
    z-index: 3;
}
.ipz-article-cover img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-l);
    display: block;
}

/* ── Низ статті: пов'язані пости ── */
.ipz-related {
    padding: 80px 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
}
.ipz-related-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 32px;
    letter-spacing: -0.02em;
}

/* ── Назад до списку ── */
.ipz-back-to-blog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 56px;
    padding: 12px 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    transition: all var(--t);
}
.ipz-back-to-blog:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateX(-3px);
}
.ipz-back-to-blog i { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════
   24. БЛОГ — фірмовий hero, врезки, таблиці, кіт-маскот
   ═══════════════════════════════════════════════════════════
*/

/* ── Палітра котика Гуру (тепла, медово-бурштинова) ── */
:root {
    --guru-bg-1:  #fdf2df;            /* градієнт фону — світліший */
    --guru-bg-2:  #fdf9f0;            /* градієнт фону — майже білий */
    --guru-border: #f0d9ad;           /* м'яка золота рамка */
    --guru-accent: #E8923C;           /* руде хутро — лівий акцент */
    --guru-ring:  rgba(232,146,60,0.32); /* кільце аватарки */
    --guru-ink:   #C9791B;            /* текст-підпис */
}

/* ── Фірмовий тёмно-синій hero лише для сторінок блога ── */
.ipz-page-hero--blog {
    background: linear-gradient(152deg, #0a2336 0%, #0f3a54 48%, #15577a 100%);
}
/* Підсилене брендове сяйво, щоб читалось на світлішій основі */
.ipz-page-hero--blog::before {
    background:
        radial-gradient(ellipse 50% 65% at 82% 35%, rgba(94,195,241,0.16), transparent 62%),
        radial-gradient(ellipse 30% 40% at 8% 85%, rgba(37,122,160,0.20), transparent 58%);
}
/* Кільця — яскравіші відтінки бренду + одне майже біле для глибини */
.ipz-page-hero--blog .ipz-hero-ring.r1 { border-color: rgba(160,228,255,0.22); }
.ipz-page-hero--blog .ipz-hero-ring.r2 { border-color: rgba(94,195,241,0.18); background: rgba(94,195,241,0.05); }
.ipz-page-hero--blog .ipz-hero-ring.r3 { border-color: rgba(255,255,255,0.16); }
.ipz-page-hero--blog .ipz-hero-ring.r4 { border-color: rgba(94,195,241,0.14); }


/* ── Врезки (callouts) усередині .ipz-article-content ──
   Базовий блок (іконка зліва + тіло справа) + 4 варіанти кольору. */
.ipz-article-content .ipz-callout {
    display: flex;
    gap: 16px;
    margin: 32px 0;
    padding: 22px 26px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    background: var(--bg-soft);
}
.ipz-callout-icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--brand); margin-top: 2px; }
.ipz-callout-icon i { width: 24px; height: 24px; stroke-width: 2; }
.ipz-callout-body { min-width: 0; }
.ipz-callout-body > :last-child { margin-bottom: 0; }
.ipz-callout-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px; font-weight: 700;
    color: var(--ink); margin: 0 0 6px; letter-spacing: 0.01em;
}
/* абзаци всередині врезки трохи компактніші за основний текст */
.ipz-callout .ipz-callout-body p { font-size: 16px; line-height: 1.7; margin: 0 0 10px; }

/* Варіант: ВАЖЛИВО / попередження (янтарний) */
.ipz-callout--important { border-left-color: #E0922F; background: #fdf7ec; border-color: #f1e2c6; }
.ipz-callout--important .ipz-callout-icon { color: #C9791B; }

/* Варіант: «Що це означає для вас» — головний вивід (бренд) */
.ipz-callout--takeaway { border-left-color: var(--brand); background: rgba(37,122,160,0.05); border-color: rgba(37,122,160,0.16); }
.ipz-callout--takeaway .ipz-callout-icon { color: var(--brand); }

/* Варіант: порада / нюанс (зелений) */
.ipz-callout--tip { border-left-color: var(--accent-green); background: rgba(27,179,116,0.05); border-color: rgba(27,179,116,0.16); }
.ipz-callout--tip .ipz-callout-icon { color: var(--accent-green); }

/* Варіант: довідка / інфо (блакитний) */
.ipz-callout--info { border-left-color: var(--cyan); background: rgba(94,195,241,0.06); border-color: rgba(94,195,241,0.18); }
.ipz-callout--info .ipz-callout-icon { color: #2a9fd0; }


/* ── Ключова цифра (велике число + підпис), світла плашка ── */
.ipz-article-content .ipz-keyfact {
    margin: 32px 0; padding: 22px 26px;
    border-radius: var(--r-md);
    background: rgba(94,195,241,0.07);
    border: 1px solid rgba(37,122,160,0.15);
    border-left: 4px solid var(--brand);
    display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
}
.ipz-keyfact-num {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(32px, 6vw, 46px); font-weight: 800;
    line-height: 1; letter-spacing: -0.02em; color: var(--brand);
}
.ipz-keyfact-text { flex: 1; min-width: 220px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }


/* ── Цитата з автором (для іменованих цитат) ── */
.ipz-article-content .ipz-pullquote {
    margin: 36px 0; padding: 24px 28px;
    border-radius: var(--r-md);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
}
.ipz-pullquote-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 19px; line-height: 1.55; font-weight: 600;
    color: var(--ink); margin: 0 0 14px; letter-spacing: -0.01em;
}
.ipz-pullquote-author {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--brand);
}
.ipz-pullquote-author::before {
    content: ''; width: 22px; height: 2px;
    background: var(--brand); border-radius: 2px;
}

/* Кольорова прив'язка цитат до спеціальності */
.ipz-pullquote.is-f2 { border-left-color: var(--brand); }
.ipz-pullquote.is-f3 { border-left-color: var(--accent-violet); }
.ipz-pullquote.is-f6 { border-left-color: var(--accent-green); }

.ipz-pullquote.is-f2 .ipz-pullquote-author          { color: var(--brand); }
.ipz-pullquote.is-f2 .ipz-pullquote-author::before  { background: var(--brand); }
.ipz-pullquote.is-f3 .ipz-pullquote-author          { color: var(--accent-violet); }
.ipz-pullquote.is-f3 .ipz-pullquote-author::before  { background: var(--accent-violet); }
.ipz-pullquote.is-f6 .ipz-pullquote-author          { color: var(--accent-green); }
.ipz-pullquote.is-f6 .ipz-pullquote-author::before  { background: var(--accent-green); }

/* Кольорова прив'язка врезок «Підводний камінь» до спеціальності */
.ipz-article-content .ipz-callout.is-f2 {
    border-left-color: var(--brand);
    background: rgba(37,122,160,0.05);
    border-color: rgba(37,122,160,0.16);
}
.ipz-article-content .ipz-callout.is-f2 .ipz-callout-icon { color: var(--brand); }

.ipz-article-content .ipz-callout.is-f3 {
    border-left-color: var(--accent-violet);
    background: rgba(96,54,179,0.05);
    border-color: rgba(96,54,179,0.16);
}
.ipz-article-content .ipz-callout.is-f3 .ipz-callout-icon { color: var(--accent-violet); }

.ipz-article-content .ipz-callout.is-f6 {
    border-left-color: var(--accent-green);
    background: rgba(27,179,116,0.05);
    border-color: rgba(27,179,116,0.16);
}
.ipz-article-content .ipz-callout.is-f6 .ipz-callout-icon { color: var(--accent-green); }


/* ── Таблиці у тілі статті (порівняння термінів/спеціальностей) ──
   Обгортка .ipz-table-wrap дає горизонтальний скрол на вузьких екранах. */
.ipz-article-content .ipz-table-wrap {
    margin: 32px 0; overflow-x: auto;
    border: 1px solid var(--line); border-radius: var(--r-md);
    -webkit-overflow-scrolling: touch;
}
.ipz-article-content table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
.ipz-article-content thead th {
    background: var(--bg-soft);
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
    text-align: left; color: var(--ink);
    padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.ipz-article-content tbody td {
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    color: var(--ink-2); line-height: 1.6; vertical-align: top;
}
.ipz-article-content tbody tr:last-child td { border-bottom: none; }
.ipz-article-content tbody tr:nth-child(even) { background: rgba(37,122,160,0.025); }
.ipz-article-content tbody td:first-child { font-weight: 600; color: var(--ink); }


/* ── Ілюстрація-маскот поруч із текстом ── */
.ipz-article-content .ipz-article-figure { margin: 28px 0; }
.ipz-article-figure img { width: 100%; height: auto; border-radius: var(--r-md); margin: 0; }
.ipz-article-figure figcaption { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.5; }
/* Обтікання текстом на широких екранах (base = desktop) */
.ipz-article-figure--right { float: right; width: 42%; margin: 6px 0 22px 32px; }
.ipz-article-figure--left  { float: left;  width: 42%; margin: 6px 32px 22px 0; }


/* ── Врезка з маскотом («Порада від котика Гуру») ──
   Теплий медово-бурштиновий тон — перегукується з рудим хутром Гуру
   й виділяється на тлі синіх/зелених блоків. Лівий акцент — як у callout. */
.ipz-article-content .ipz-mascot-note {
    display: flex; gap: 18px; align-items: flex-start;
    margin: 32px 0; padding: 20px 24px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--guru-bg-1), var(--guru-bg-2));
    border: 1px solid var(--guru-border);
    border-left: 3px solid var(--guru-accent);
}
.ipz-mascot-avatar {
    flex: 0 0 auto; width: 64px; height: 64px;
    border-radius: 50%; overflow: hidden; background: #fff;
    border: 2px solid var(--guru-ring);
}
/* object-position: центр угорі — піднімає кадр, щоб мордочка не «тонула».
   Якщо твій PNG скадровано інакше — підстав свій % нижче (0% = верх, 100% = низ),
   або заміни на object-fit: contain, щоб показати кота цілком із полями. */
.ipz-mascot-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
.ipz-mascot-note-body { min-width: 0; }
.ipz-mascot-note-body > :last-child { margin-bottom: 0; }
.ipz-mascot-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px; font-weight: 600; color: var(--guru-ink);
    letter-spacing: 0.04em; margin: 0 0 6px;
}
.ipz-mascot-note-body p { font-size: 16px; line-height: 1.7; margin: 0; color: var(--ink-2); }


/* ── Інтро / аутро-картка маскота (привітання й тепле завершення) ──
   Котик крупніший, тон теплий — у палітрі Гуру (як mascot-note).
   Інтро й аутро ніколи не стоять поруч (початок vs кінець статті), тож
   базово однакові; аутро лишаю трішки глибшим за рамкою для нюансу. */
.ipz-article-content .ipz-mascot-card {
    display: flex; gap: 22px; align-items: center;
    margin: 36px 0; padding: 26px 30px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--guru-bg-1), var(--guru-bg-2));
    border: 1px solid var(--guru-border);
    border-left: 3px solid var(--guru-accent);
}
.ipz-mascot-card--outro {
    border-left-width: 4px;
}
.ipz-mascot-card-pic {
    flex: 0 0 auto; width: 96px; height: 96px;
    border-radius: 50%; overflow: hidden; background: #fff;
    border: 3px solid var(--guru-ring);
}
.ipz-mascot-card-pic img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 30%;
}
.ipz-mascot-card-body { min-width: 0; }
.ipz-mascot-card-body > :last-child { margin-bottom: 0; }
.ipz-mascot-card-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px; font-weight: 700; color: var(--ink);
    margin: 0 0 8px;
}
.ipz-mascot-card-body p { font-size: 16px; line-height: 1.7; margin: 0 0 10px; color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════
   25. БЛОГ — крокова стрічка, FAQ, тест, ролі, джерело
   ═══════════════════════════════════════════════════════════
*/

/* ── Крокова стрічка (Крок 1–6 / Етап 1–6) ──
   Вертикальний таймлайн: нумерований кружок + вертикальна лінія. */
.ipz-article-content .ipz-steps {
    margin: 32px 0;
    display: grid;
    gap: 0;
}
.ipz-step {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    padding: 0 0 26px;
}
/* Вертикальна лінія, що з'єднує кружки (крім останнього) */
.ipz-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 21px; top: 40px; bottom: 0;
    width: 2px;
    background: linear-gradient(var(--line), rgba(208,220,232,0.25));
}
.ipz-step-num {
    position: relative; z-index: 1;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--brand);
    color: var(--brand);
    font-family: 'Montserrat', sans-serif;
    font-size: 17px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.ipz-step-body { padding-top: 2px; min-width: 0; }
.ipz-step-body > :last-child { margin-bottom: 0; }
.ipz-step-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px; font-weight: 700; line-height: 1.3;
    color: var(--ink); margin: 8px 0 8px;
}
.ipz-step-body p { font-size: 16px; line-height: 1.7; margin: 0 0 10px; color: var(--ink-2); }


/* ── FAQ: статичні пари «питання / відповідь» у рамці ── */
.ipz-article-content .ipz-faq {
    margin: 32px 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}
.ipz-faq-item { padding: 22px 26px; border-bottom: 1px solid var(--line); }
.ipz-faq-item:last-child { border-bottom: none; }
.ipz-faq-item:nth-child(even) { background: var(--bg-soft); }
.ipz-faq-q {
    display: flex; gap: 11px; align-items: flex-start;
    font-family: 'Montserrat', sans-serif;
    font-size: 16.5px; font-weight: 700; line-height: 1.4;
    color: var(--ink); margin: 0 0 8px;
}
.ipz-faq-q::before {
    content: '?';
    flex: 0 0 auto;
    width: 24px; height: 24px; margin-top: 1px;
    border-radius: 50%;
    background: rgba(37,122,160,0.1); color: var(--brand);
    font-size: 14px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.ipz-faq-a { margin: 0; padding-left: 35px; }
.ipz-faq-a p { font-size: 16px; line-height: 1.7; margin: 0 0 10px; color: var(--ink-2); }
.ipz-faq-a > :last-child { margin-bottom: 0; }


/* ── Тест на самовизначення (питання + варіанти А/Б/В) ── */
.ipz-article-content .ipz-quiz {
    margin: 32px 0; padding: 28px 30px;
    border-radius: var(--r-lg);
    background: var(--bg-soft);
    border: 1px solid var(--line);
}
.ipz-quiz-q {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px; font-weight: 700; line-height: 1.35;
    color: var(--ink);
    margin: 0 0 14px;
    padding-top: 22px; border-top: 1px solid var(--line);
}
.ipz-quiz-q:first-child { padding-top: 0; border-top: none; }
.ipz-quiz-options { display: grid; gap: 10px; margin: 0 0 4px; padding: 0; list-style: none; }
.ipz-quiz-opt {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 16px;
    border-radius: var(--r-sm);
    background: var(--bg);
    border: 1px solid var(--line);
    font-size: 16px; line-height: 1.6; color: var(--ink-2);
}
.ipz-quiz-letter {
    flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; font-weight: 800; color: #fff;
    display: flex; align-items: center; justify-content: center;
}
/* Кольори літер відповідей: А-бренд, Б-фіолет, В-зелений */
.ipz-quiz-opt.a .ipz-quiz-letter { background: var(--brand); }
.ipz-quiz-opt.b .ipz-quiz-letter { background: var(--accent-violet); }
.ipz-quiz-opt.c .ipz-quiz-letter { background: var(--accent-green); }
/* Підсумок під тестом */
.ipz-quiz-result {
    margin: 16px 0 0; padding: 16px 18px;
    border-radius: var(--r-sm);
    background: rgba(37,122,160,0.05);
    border: 1px dashed rgba(37,122,160,0.28);
    font-size: 15.5px; line-height: 1.65; color: var(--ink-2);
}
.ipz-quiz-result strong { color: var(--ink); }

/* Клікабельний рядок-відповідь: квадратик + літера + текст в один рядок */
.ipz-quiz-label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    cursor: pointer;
}
/* Ховаємо нативний radio (лишаємо доступним для кліку/скрінрідерів) */
.ipz-quiz-check {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
}
/* Кастомний квадратик */
.ipz-quiz-box {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 2px solid var(--line);
    background: var(--bg);
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}
/* Текст займає решту рядка */
.ipz-quiz-text { flex: 1 1 auto; }

/* Відмічений стан — колір за літерою (А-бренд, Б-фіолет, В-зелений) */
.ipz-quiz-opt.a .ipz-quiz-check:checked + .ipz-quiz-box { background: var(--brand);         border-color: var(--brand); }
.ipz-quiz-opt.b .ipz-quiz-check:checked + .ipz-quiz-box { background: var(--accent-violet);  border-color: var(--accent-violet); }
.ipz-quiz-opt.c .ipz-quiz-check:checked + .ipz-quiz-box { background: var(--accent-green);   border-color: var(--accent-green); }
/* Галочка у відміченому квадратику */
.ipz-quiz-check:checked + .ipz-quiz-box::after {
    content: "";
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Фокус з клавіатури — для доступності */
.ipz-quiz-check:focus-visible + .ipz-quiz-box {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


/* ── Картки ролей / професій (хто чим займається) ── */
.ipz-article-content .ipz-roles {
    margin: 32px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.ipz-role {
    padding: 20px 22px;
    border-radius: var(--r-md);
    background: var(--bg);
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand);
}
.ipz-role.c-cyan   { border-top-color: var(--cyan); }
.ipz-role.c-green  { border-top-color: var(--accent-green); }
.ipz-role.c-violet { border-top-color: var(--accent-violet); }
.ipz-role-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px; font-weight: 700; color: var(--ink);
    margin: 0 0 7px;
}
.ipz-role-name span { /* англомовний підпис ролі */
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 500; color: var(--ink-3);
    letter-spacing: 0.02em; margin-top: 3px;
}
.ipz-role-desc { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }


/* ── Сноска-джерело наприкінці статті ── */
.ipz-article-content .ipz-source-note {
    margin: 40px 0 8px;
    padding: 16px 20px;
    border-radius: var(--r-sm);
    background: var(--bg-soft);
    border-left: 3px solid var(--line-2);
    font-size: 14px; line-height: 1.6; color: var(--ink-3);
    font-style: italic;
}
.ipz-source-note p { margin: 0; font-size: 14px; color: var(--ink-3); }

/* ============================================
   26. 404 PAGE
   ============================================ */

.ipz-404 {
    min-height: 60vh;
    padding: 120px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ipz-404__inner {
    max-width: 640px;
    width: 100%;
    text-align: center;
}

.ipz-404__mascot {
    width: 180px;
    height: 180px;
    object-fit: contain;
    margin: 0 auto 8px;
    display: block;
    border-radius: 50%;
    animation: ipz-404-float 14s ease-in-out infinite;
    will-change: transform;
}

@keyframes ipz-404-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-20px) rotate(2deg); }
}

.ipz-404__code {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(5rem, 16vw, 10rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--brand);
    margin: 0 0 16px;
}

.ipz-404__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    line-height: 1.2;
    margin: 0 0 16px;
    color: #1a2b3c;
}

.ipz-404__text {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #7a8a9a;
    margin: 0 0 32px;
}

.ipz-404__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ipz-404__actions .ipz-btn i[data-lucide] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ipz-404 .ipz-btn-ghost {
    color: var(--brand);
    background: transparent;
    border-color: rgba(37, 122, 160, 0.3);
}

.ipz-404 .ipz-btn-ghost:hover {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}