/* ==== 00-fonts.css ==== */
/*
 * Self-hosted Montserrat (woff2 subsets) — замінює зовнішній Google Fonts.
 * Прибирає third-party round-trip (fonts.googleapis/gstatic) з критичного шляху рендеру.
 * Браузер тягне лише потрібну підмножину (latin/cyrillic) і вагу завдяки unicode-range.
 * font-display: swap — текст видно одразу (фолбек), далі підміна на Montserrat.
 * Файли: assets/fonts/montserrat-<subset>-<weight>-normal.woff2
 */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/montserrat-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/montserrat-cyrillic-500-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/montserrat-cyrillic-600-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/montserrat-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/montserrat-cyrillic-800-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/montserrat-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/montserrat-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/montserrat-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/montserrat-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/montserrat-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== 00-legacy-theme.css ==== */
/* ═══════════════════════════════════════════════════════
   00-legacy-theme.css — Layer 0 baseline
   Dead code physically removed in v15.2 (250+ blocks, ~48 KB).
   Backup of pre-cleanup version available in /_legacy-backup/.
   CF7 / Flamingo / Glossary / wp-* selectors preserved
   (they may be added dynamically by plugins).
   ═══════════════════════════════════════════════════════ */

:root {
    --navy: #0b1a30;
    --navy-deep: #071525;
    --navy-light: #0f2540;
    --teal: #00c9a7;
    --teal-dark: #00a085;
    --cyan: #00b4d8;
    --dark-teal: #0a1628;
    --dark-teal-2: #0e3630;
    --yellow: #fdd835;
    --text: #e8f0f8;
    --muted: #7f93a8;
    --card-border: rgba(255,255,255,0.08);
    --card-hover: rgba(0,201,167,0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: var(--navy);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
}


/* ===== SECTIONS ===== */
section {
    position: relative;
    padding: 72px 24px;
    z-index: 1;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* ===== TYPOGRAPHY ===== */
h1 {
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1px;
}

h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    margin-bottom: 20px;
}

h3 {
    font-size: 17px;
    font-weight: 600;
}

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

.line {
    width: 48px;
    height: 3px;
    background: var(--teal);
    margin-top: 20px;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

/* ════════════════════════════════════════════════
   STANDARD ICON CONTAINER — use .ig-icon everywhere
   Replaces segment-icon, service-icon, method-card-icon, etc.
════════════════════════════════════════════════ */
.ig-icon {
    width: 44px;
    height: 44px;
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ig-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
/* Circle variant — for segments/industries grid */
.ig-icon--circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(0,201,167,0.25);
    background: rgba(0,201,167,0.06);
    margin: 0 auto 14px;
    transition: border-color 0.25s, background 0.25s;
}
.ig-icon--circle svg { width: 26px; height: 26px; }
.segment:hover .ig-icon--circle,
.segment-card:hover .ig-icon--circle {
    border-color: rgba(0,201,167,0.5);
    background: rgba(0,201,167,0.12);
}

p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 15px;
}

.highlight {
    color: var(--teal);
}

div.tag {
    font-family: inherit;
    color: var(--teal);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 12px;
    display: block;
}


/* ===== WHY SECTION ===== */
.why-section {
    background: linear-gradient(135deg, #0a1628 0%, #0e3630 50%, #0b2830 100%);
}

.why-content {
    position: relative;
}

.why-section h2,
.why-section p {
    color: #fff;
}

.why-section .line {
    background: rgba(255,255,255,0.5);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.why-item {
    padding: 30px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(0,201,167,0.25);
    transition: all 0.3s ease;
}

.why-item:hover {
    background: rgba(0,201,167,0.08);
    border-color: rgba(0,201,167,0.4);
    transform: translateY(-4px);
}

.why-number {
    font-size: 48px;
    font-weight: 800;
    color: rgba(255,255,255,0.2);
    line-height: 1;
    margin-bottom: 16px;
}

.why-item h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 12px;
}

.why-item p {
    font-size: 14px;
    opacity: 1;
    color: rgba(255,255,255,0.92);
    line-height: 1.8;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.hero-stats {
        gap: 40px;
    }
    
    .why-grid {
        grid-template-columns: 1fr;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .segments-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .map-stats {
        gap: 50px;
    }
}

@media (max-width: 768px) {
    section {
        padding: 80px 5%;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 30px;
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .segments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .map-stats {
        flex-direction: column;
        gap: 30px;
    }
}






.single-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 50px;
}
.single-content {
    flex: 1;
    min-width: 0;
}
.single-body {
    color: var(--text);
    font-size: 16px;
    line-height: 1.9;
}
.single-body p {
    color: var(--text);
    opacity: 0.9;
    margin-bottom: 20px;
    font-size: 16px;
}
.single-body h2 { font-size: 24px; margin-top: 40px; margin-bottom: 16px; color: #fff; }
.single-body h3 { font-size: 20px; margin-top: 30px; margin-bottom: 12px; color: #fff; }
.single-body ul, .single-body ol { margin: 16px 0; padding-left: 24px; color: var(--text); opacity: 0.9; }
.single-body li { margin-bottom: 8px; line-height: 1.7; }
.single-body blockquote {
    border-left: 3px solid var(--teal);
    padding: 20px 30px;
    margin: 30px 0;
    background: rgba(0,201,167,0.05);
    font-style: italic;
}
.single-body blockquote p { color: var(--text); margin-bottom: 0; }
.single-body img { max-width: 100%; height: auto; border: 1px solid var(--card-border); margin: 20px 0; }
.single-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.single-tags {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--card-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.single-nav {
    display: flex;
    gap: 20px;
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--card-border);
}
.single-nav-link.next { text-align: right; }
.single-nav-link.next .single-nav-label { justify-content: flex-end; }

@media (max-width: 1024px) {
    .single-layout { flex-direction: column; }
}
@media (max-width: 768px) {
    .single-nav { flex-direction: column; }
    .single-nav-link.next { text-align: left; }
    .single-nav-link.next .single-nav-label { justify-content: flex-start; }
}

/* ═══ BREADCRUMBS ═══ */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 20px;
}
.breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumbs a:hover { color: var(--teal); }
.breadcrumbs .sep { opacity: 0.4; }

/* ═══ FULL FOOTER ═══ */
.site-footer {
    background: var(--navy-deep);
    padding: 80px 24px 30px;
    border-top: 1px solid var(--card-border);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 50px;
    margin-bottom: 50px;
}
.footer-desc {
    margin-top: 16px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
}
.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.footer-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    transition: all 0.3s;
}
.footer-social a:hover {
    border-color: var(--teal);
    background: rgba(0,201,167,0.1);
}
.footer-social svg {
    width: 16px;
    height: 16px;
    stroke: var(--muted);
    stroke-width: 2;
    fill: none;
}
.footer-social a:hover svg { stroke: var(--teal); }
.footer-col h4 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col li {
    margin-bottom: 10px;
}
.footer-col a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}
.footer-col a:hover { color: var(--teal); }
.footer-contacts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}
.footer-contacts svg {
    width: 16px;
    height: 16px;
    stroke: var(--teal);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
    margin-top: 2px;
}
.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid var(--card-border);
    text-align: center;
}
.footer-copy {
    font-size: 12px;
    color: var(--muted);
}

/* ═══ BURGER MENU ═══ */
.burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 110;
}
.burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    margin: 5px 0;
    transition: all 0.3s;
}
.burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ═══ MOBILE RESPONSIVE ═══ */

/* Burger button */
.burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 200;
    position: relative;
}
.burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    margin: 5px 0;
    transition: all 0.3s;
    border-radius: 2px;
}
.burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Tablet */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .single-layout { grid-template-columns: 1fr !important; }
    .news-layout { grid-template-columns: 1fr !important; }
    .why-grid { grid-template-columns: 1fr !important; }
    .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .segments-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
    .flagship-grid { grid-template-columns: 1fr !important; }
    .contact-grid { grid-template-columns: 1fr !important; }
    .industries-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .certs-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .platform-grid { grid-template-columns: 1fr !important; }
    .workflow-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile */
@media (max-width: 768px) {
    /* Burger visible */
    .burger { display: block !important; }
    .hide-mobile { display: none !important; }
    
    /* Full-screen mobile nav overlay */
    .header-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        background-color: #061220 !important;
        display: none !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 100px 40px 40px !important;
        gap: 28px !important;
        z-index: 150 !important;
    }
    .header-nav.open {
        display: flex !important;
    }
    .header-nav a {
        font-size: 22px !important;
        font-weight: 600 !important;
        color: var(--text) !important;
    }
    .header-nav a:hover,
    .header-nav a.active {
        color: var(--teal) !important;
    }
    
    /* Header */
    .header { padding: 12px 16px !important; background-color: #061220 !important; }
    .header-cta.hide-mobile { display: none !important; }
    
    /* Sections */
    section { padding: 60px 16px !important; }
    .container { padding: 0 16px; }
    
    /* Hero */
    .hero-home {
        min-height: auto !important;
        height: auto !important;
        padding-top: 100px !important;
        padding-bottom: 60px !important;
        display: block !important;
    }
    .hero-home .hero-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .hero-home .hero-tag,
    .hero-home .hero-description,
    .hero-home .hero-cta {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        width: auto !important;
    }
    .hero-home h1 { font-size: clamp(28px, 8vw, 40px) !important; white-space: normal !important; letter-spacing: 0 !important; }
    .hero-home .hero-description { font-size: 16px !important; margin-bottom: 28px !important; }
    .hero-home .hero-tag { margin-bottom: 16px !important; }
    .hero-inner { min-height: auto !important; height: auto !important; padding-top: 90px !important; padding-bottom: 40px !important; }
    .hero-inner h1 { font-size: clamp(24px, 6vw, 34px) !important; }
    .hero-cta { flex-direction: column !important; align-items: flex-start !important; margin-top: 24px !important; gap: 12px !important; }
    .hero-cta a { width: 100% !important; text-align: center !important; }
    
    /* ALL grids → single column */
    .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .segments-grid { grid-template-columns: 1fr !important; }
    .news-grid { grid-template-columns: 1fr !important; }
    .industries-grid { grid-template-columns: 1fr !important; }
    .certs-grid { grid-template-columns: 1fr !important; }
    .values-grid { grid-template-columns: 1fr !important; }
    .products-grid { grid-template-columns: 1fr !important; }
    .workflow-grid { grid-template-columns: 1fr !important; }
    .benefits-grid { grid-template-columns: 1fr !important; }
    .standards-grid { grid-template-columns: 1fr !important; }
    .steps-grid { grid-template-columns: 1fr !important; }
    .client-grid { grid-template-columns: 1fr !important; }
    .hours-grid { grid-template-columns: 1fr !important; }
    .careers-grid { grid-template-columns: 1fr !important; }
    .features-grid { grid-template-columns: 1fr !important; }
    .security-grid { grid-template-columns: 1fr !important; }
    .flagship-features { grid-template-columns: 1fr !important; }
    .platform-stats { grid-template-columns: 1fr !important; }
    .why-grid { grid-template-columns: 1fr !important; }
    .about-grid { grid-template-columns: 1fr !important; }
    .contact-grid { grid-template-columns: 1fr !important; }
    .flagship-grid { grid-template-columns: 1fr !important; }
    .platform-grid { grid-template-columns: 1fr !important; }
    .program-intro { grid-template-columns: 1fr !important; }
    .org-branches { grid-template-columns: 1fr !important; }
    
    /* Multi-column flex → column */
    .hero-stats { flex-direction: column !important; gap: 24px !important; }
    .map-stats { flex-direction: column !important; gap: 24px !important; }
    .org-comparison { flex-direction: column !important; }
    .org-comparison-side { min-width: auto !important; }
    
    /* News / sidebar */
    .news-layout { grid-template-columns: 1fr !important; }
    .single-layout { grid-template-columns: 1fr !important; }
    .sidebar { flex-direction: column !important; }
    .featured-grid { grid-template-columns: 1fr !important; }
    .featured-sidebar { flex-direction: column !important; }
    
    /* Footer */
    .footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
    .site-footer { padding: 50px 16px 20px !important; }
    
    /* Partners */
    .partners-grid { flex-direction: column !important; gap: 8px !important; }
    .partner { padding: 14px 20px !important; }
    
    /* CTA */
    .cta-section { padding: 60px 16px !important; }
    
    /* Typography */
    h1 { font-size: clamp(26px, 7vw, 38px) !important; }
    h2 { font-size: clamp(20px, 5vw, 28px) !important; }
    
    /* Single post */
    .single-nav { flex-direction: column !important; }
    .single-nav-link.next { text-align: left !important; }
    .single-nav-link.next .single-nav-label { justify-content: flex-start !important; }
    
    /* Newsletter */
    .newsletter-form { flex-direction: column !important; }
    
    /* Contact form */
    .contact-form-wrapper { padding: 24px !important; }
    .info-card { padding: 24px !important; }
    
    /* Workflow arrows hidden */
    .workflow-step::after { display: none !important; }
}

/* Small mobile */
@media (max-width: 480px) {
    .stat-value { font-size: 28px !important; }
    .hero-home h1 { font-size: 28px !important; }
    .partner { padding: 12px 16px !important; }
    .partner-name { font-size: 13px !important; }
    .map-stat-value { font-size: 36px !important; }
}

/* ═══ BACK TO TOP ═══ */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: var(--teal);
    color: var(--navy);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 90;
    box-shadow: 0 4px 15px rgba(0,201,167,0.3);
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: #00ddb5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,201,167,0.4);
}
.back-to-top svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}
@media (max-width: 768px) {
    .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
}

.about-illustration-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--card-border);
    padding: 36px 32px 28px;
}
.about-illustration-card + .about-illustration-card {
    margin-top: 24px;
}
.about-illustration-label {
    font-family: 'Fira Code', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal);
    opacity: 0.85;
    margin-bottom: 18px;
    text-align: center;
}
.about-illustration-card svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 900px;
    margin: 0 auto;
}
.about-illustration-caption {
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 18px auto 0;
    max-width: 720px;
}
@media (max-width: 768px) {
    .about-illustration-card { padding: 22px 14px 18px; }
    .about-illustration-card + .about-illustration-card { margin-top: 16px; }
    .about-illustration-label { font-size: 10px; margin-bottom: 14px; }
    .about-illustration-caption { font-size: 12.5px; margin-top: 14px; }
}

/* ═══ SHARED STACK — bullet-proof mobile single column ═══ */
@media (max-width: 768px) {
    .methodology-section .features-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 32px !important;
    }
    .methodology-section .feature-card {
        padding: 24px 20px !important;
    }
}

.mgmt-section .service-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--card-border);
    padding: 30px 24px;
}
.mgmt-section .service-card:hover {
    border-color: rgba(0,201,167,0.3);
    background: var(--card-hover);
    transform: translateY(-3px);
}

/* Show contact in mobile nav */
@media (max-width: 768px) {
    .header-nav .show-mobile {
        display: block !important;
        margin-top: 16px;
        padding: 14px 32px !important;
        border: 1px solid var(--teal) !important;
        color: var(--teal) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;
        text-decoration: none !important;
    }
}

/* ═══ PAGE: STACK (Technology) ═══ */
.flagship-section {
    background: linear-gradient(160deg, #0a1628 0%, #0d2040 50%, #0a1628 100%);
    padding: 72px 24px;
    border-top: 1px solid rgba(0,201,167,0.08);
    border-bottom: 1px solid rgba(0,201,167,0.08);
}
.flagship-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; }
.flagship-content h2 { color: #fff; }
.flagship-content .tag { color: var(--teal) !important; }
.flagship-content .line { background: var(--teal); opacity: 0.6; }
.flagship-content .line { margin-bottom: 18px; }
.flagship-content p { color: rgba(232,240,248,0.8); margin-bottom: 16px; font-size: 15px; line-height: 1.75; }
.flagship-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; }
.flagship-feature { display: flex; align-items: center; gap: 12px; color: rgba(232,240,248,0.85); font-weight: 500; font-size: 13px; }
.flagship-feature-icon { width: 36px; height: 36px; background: rgba(0,201,167,0.1); border: 1px solid rgba(0,201,167,0.2); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.flagship-feature-icon svg { width: 18px; height: 18px; stroke: var(--teal); stroke-width: 2; fill: none; }
.flagship-visual { display: flex; flex-direction: column; gap: 20px; }
.flagship-stat {
    background: rgba(0,201,167,0.06);
    border: 1px solid rgba(0,201,167,0.15);
    border-radius: 8px;
    padding: 30px;
}
.flagship-stat-value { font-size: 44px; font-weight: 800; color: var(--teal); margin-bottom: 6px;  }
.flagship-stat-label { font-size: 12px; color: rgba(232,240,248,0.6); letter-spacing: 1px; text-transform: uppercase; }
.layers-section { background: var(--navy-deep); }
.layer-block { margin-bottom: 80px; }
.layer-block:last-child { margin-bottom: 0; }
.layer-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 30px; padding-bottom: 16px; border-bottom: 1px solid var(--card-border); }
.layer-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--teal), var(--cyan)); display: flex; align-items: center; justify-content: center; }
.layer-icon svg { width: 22px; height: 22px; stroke: var(--navy); stroke-width: 2; fill: none; }
.layer-title h3 { font-size: 20px; margin-bottom: 4px; }
.layer-title span {  font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card { background: rgba(255,255,255,0.02); border: 1px solid var(--card-border); padding: 32px 28px; transition: all 0.4s ease; position: relative; }
.product-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--teal), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.product-card:hover { border-color: var(--teal); background: var(--card-hover); transform: translateY(-4px); }
.product-card:hover::after { transform: scaleX(1); }
.product-card h4 { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.product-card p { font-size: 12px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.product-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.product-tag {  font-size: 9px; color: var(--teal); background: rgba(0,180,216,0.1); padding: 4px 10px; letter-spacing: 0.5px; }
.product-company {  font-size: 9px; color: var(--yellow); background: rgba(253,216,53,0.1); padding: 4px 10px; letter-spacing: 0.5px; }
.tech-section { background: var(--navy); }
.tech-category { margin-bottom: 50px; }
.tech-category:last-child { margin-bottom: 0; }
.tech-category-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.tech-category-title::after { content: ''; flex: 1; height: 1px; background: var(--card-border); }
.tech-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.tech-tag {  font-size: 11px; padding: 10px 18px; background: rgba(255,255,255,0.03); border: 1px solid var(--card-border); color: var(--text); transition: all 0.3s ease; }
.tech-tag:hover { border-color: var(--teal); background: var(--card-hover); color: var(--teal); }
.security-section { background: var(--navy); }
.security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.security-card { background: rgba(255,255,255,0.02); border: 1px solid var(--card-border); padding: 36px 30px; transition: all 0.3s ease; }
.security-card:hover { border-color: var(--yellow); background: rgba(253,216,53,0.05); }
.security-card h4 { color: #fff; font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.security-card h4 svg { width: 22px; height: 22px; stroke: var(--yellow); stroke-width: 1.5; fill: none; }
.security-card p { font-size: 13px; color: var(--muted); line-height: 1.7; }
.security-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.security-feature {  font-size: 9px; color: var(--yellow); background: rgba(253,216,53,0.1); padding: 5px 10px; letter-spacing: 0.5px; }
@media (max-width: 1024px) {
    .flagship-grid { grid-template-columns: 1fr; gap: 40px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .industries-grid { grid-template-columns: repeat(3, 1fr); }
    .security-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .products-grid { grid-template-columns: 1fr !important; }
    .industries-grid { grid-template-columns: 1fr !important; }
    .security-grid { grid-template-columns: 1fr !important; }
    .flagship-features { grid-template-columns: 1fr !important; }
}

/* ══ LANGUAGE SWITCHER ═════════════════════════ */
.header-right { display: flex; align-items: center; gap: 16px; }
.lang-switcher, .mobile-lang, .footer-lang { display: flex; gap: 4px; }
a.lang-sw {
    
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--muted);
    padding: 4px 8px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.2s ease;
}
a.lang-sw:hover { color: var(--text); border-color: var(--card-border); }
a.lang-sw.active { color: var(--teal); border-color: var(--teal); }

/* ══ FOOTER MENU LIST ══════════════════════════ */
.footer-menu-list { list-style: none; padding: 0; margin: 0; }
.footer-menu-list li { margin-bottom: 10px; }
.footer-menu-list li a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-menu-list li a:hover { color: var(--text); }

/* ══ FOOTER BOTTOM LANG ════════════════════════ */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-lang a.lang-sw { font-size: 10px; }

/* ══ MOBILE LANG ═══════════════════════════════ */
.mobile-lang { padding: 16px 20px 0; border-top: 1px solid var(--card-border); margin-top: 12px; }
.mobile-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 0 0;
    padding: 10px 28px;
    background: transparent;
    color: var(--teal);
    border: 1px solid var(--teal);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 2px;
    width: auto;
}

/* ══ WP NAV MENU — header ══════════════════════ */
.header-nav ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.header-nav ul li a {
    display: block;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
.header-nav ul li a:hover {
    color: var(--teal);
}

/* ── Active / current page indicator ────────── */
.header-nav ul li.current-menu-item > a,
.header-nav ul li.current-menu-parent > a,
.header-nav ul li.current-menu-ancestor > a {
    color: var(--teal) !important;
    position: relative;
}

/* teal underline dot below active link — DEPRECATED, replaced by .nav-text::after in 03-header.css */

/* ══ WP NAV MENU — mobile ══════════════════════ */
.mobile-nav { list-style: none; margin: 0; padding: 0; }
.mobile-nav li a { display: block; padding: 14px 20px; font-size: 15px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--card-border); transition: color .2s; }
.mobile-nav li a:hover { color: var(--teal); }
.mobile-nav li.current-menu-item > a,
.mobile-nav li.current-menu-parent > a {
    color: var(--teal);
    font-weight: 600;
    padding-left: 24px;
    border-left: 3px solid var(--teal);
}

/* ══ MOBILE MENU OVERLAY ════════════════════════
   #mobileMenu is always hidden by default.
   JS adds .open when burger is clicked.
════════════════════════════════════════════════ */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100vh; height: 100dvh;
    background: #061220;
    z-index: 200;
    flex-direction: column;
    padding: 90px 32px 40px;
    overflow-y: auto;
}
.mobile-menu.open { display: flex; }

/* Desktop: hide mobile-only elements */
@media (min-width: 769px) {
    .mobile-menu { display: none !important; }
}

/* Mobile: hide desktop nav, show burger */
@media (max-width: 768px) {
    /* Completely disable old header-nav overlay behaviour —
       #mobileMenu takes over as the full-screen overlay */
    .header-nav { display: none !important; }
    .header-nav.open { display: none !important; }
    /* Keep header-right visible for the lang switcher pill on desktop */
    .header-right .lang-switcher { display: none; }
}

/* ══ VANTA HERO BACKGROUND ═════════════════════
   Canvas fills the hero section behind content
════════════════════════════════════════════════ */
.hero { overflow: hidden; }
.vanta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.hero-content {
    position: relative;
    z-index: 2;
}
.breadcrumbs { position: relative; z-index: 2; }

/* ══ HOME HERO — CENTERED ═══════════════════════ */
.hero-home {
    justify-content: center;
    min-height: 80vh;
}
.hero-home .hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.hero-home .hero-description {
    margin: 0 auto;
    text-align: center;
}
.hero-home .hero-cta {
    justify-content: center;
}
.hero-home .hero-tag {
    text-align: center;
}

/* ══ INNER HERO — LEFT ALIGNED (default) ════════ */
.hero-inner .hero-content {
    text-align: left;
}
.hero-inner .hero-description {
    text-align: left;
}

/* ════════════════════════════════════════════════
   LANG SWITCHER — plain pills, distinct from Contact
════════════════════════════════════════════════ */
.lang-switcher { display: flex; align-items: center; gap: 2px; }

.lang-sw {
    display: inline-block;
    padding: 4px 8px;
    
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    border-radius: 3px;
    transition: color 0.2s, background 0.2s;
    border: none;
    background: transparent;
}
.lang-sw:hover { color: var(--text); }
.lang-sw.active {
    color: var(--teal);
    background: rgba(0,201,167,0.08);
}
/* No separator between UA and EN — clean pill layout */
.lang-switcher .lang-sw:not(:last-child)::after {
    display: none;
}

/* Contact button — teal outlined, clearly different */
.header-cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--teal);
    border: 1px solid rgba(0,201,167,0.45);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
    font-family: inherit;
}
.header-cta:hover {
    background: var(--teal);
    color: var(--navy);
    border-color: var(--teal);
}

/* ════════════════════════════════════════════════
   ABOUT INTRO — 2-column text outside hero
════════════════════════════════════════════════ */
.about-intro-section {
    padding: 56px 0 0;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 0;
}
.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-bottom: 56px;
}
.about-intro-grid p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text);
    opacity: 0.85;
    margin: 0;
}
@media (max-width: 768px) {
    .about-intro-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 768px) {
    .methodology-content {
        padding: 0 16px;
    }
    .methodology-text-cols {
        grid-template-columns: 1fr;
        gap: 22px;
        max-width: 100%;
        padding: 0;
    }
}

/* ════════════════════════════════════════════════
   POPUP CONTACT FORM — Intecracy style
════════════════════════════════════════════════ */
.ig-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ig-popup.active { display: flex; }

.ig-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 15, 30, 0.85);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.ig-popup-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--navy, #0b1a30);
    border: 1px solid rgba(0,201,167,0.18);
    border-radius: 12px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6);
    animation: popupIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes popupIn {
    from { opacity: 0; transform: scale(0.94) translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.ig-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text, #e8f0f8);
    transition: all 0.2s;
    z-index: 2;
}
.ig-popup-close:hover { background: rgba(255,255,255,0.12); }
.ig-popup-close svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round;
}

.ig-popup-header {
    padding: 36px 36px 28px;
    border-bottom: 1px solid rgba(0,201,167,0.1);
    background: linear-gradient(135deg, rgba(0,201,167,0.06) 0%, transparent 60%);
}
.ig-popup-tag {
    
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal, #00c9a7);
    margin-bottom: 10px;
}
.ig-popup-header h2 {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
}
.ig-popup-header p {
    font-size: 14px;
    color: rgba(232,240,248,0.6);
    margin: 0;
}

.ig-popup-body { padding: 28px 36px 36px; }

/* Form rows */
.ig-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.ig-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.ig-form-row .ig-form-group { margin-bottom: 0; }

.ig-form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text, #e8f0f8);
    opacity: 0.85;
}
.ig-form-group label span { color: var(--teal, #00c9a7); }

.ig-form-group input,
.ig-form-group select,
.ig-form-group textarea {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 11px 14px;
    font-size: 14px;
    color: #fff;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.ig-form-group input::placeholder,
.ig-form-group textarea::placeholder { color: rgba(232,240,248,0.3); }
.ig-form-group input:focus,
.ig-form-group select:focus,
.ig-form-group textarea:focus {
    border-color: rgba(0,201,167,0.5);
    background: rgba(0,201,167,0.04);
}
.ig-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f93a8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    cursor: pointer;
}
.ig-form-group select option { background: #0b1a30; color: #e8f0f8; }

.ig-form-group textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.6;
}

.ig-form-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}
.ig-form-privacy input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--teal, #00c9a7);
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}
.ig-form-privacy label {
    font-size: 13px;
    color: rgba(232,240,248,0.65);
    cursor: pointer;
    line-height: 1.5;
}
.ig-form-privacy label a {
    color: var(--teal, #00c9a7);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ig-form-submit {
    width: 100%;
    padding: 14px 24px;
    background: var(--teal, #00c9a7);
    color: var(--navy, #0b1a30);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 0.3px;
}
.ig-form-submit:hover {
    background: #00e5bf;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,201,167,0.3);
}

/* CF7 inside popup — override styles */
.ig-popup-body .wpcf7-form { margin: 0; }
.ig-popup-body .wpcf7-form p { margin-bottom: 0; }

@media (max-width: 600px) {
    .ig-popup-header { padding: 24px 20px 20px; }
    .ig-popup-body   { padding: 20px 20px 28px; }
    .ig-form-row     { grid-template-columns: 1fr; }
    .ig-popup-header h2 { font-size: 22px; }
}

/* ════════════════════════════════════════════════
   BUTTON SYSTEM — єдиний стиль, radius 4px скрізь
════════════════════════════════════════════════ */

/* --- Base reset for all buttons --- */
.btn-primary,
.btn-secondary,
.btn-dark,
.btn-ghost,
.header-cta,
.ig-form-submit,
button.ig-popup-open {
    border-radius: 4px !important;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.22s ease;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* --- Primary (teal filled) --- */
.btn-primary {
    background: var(--teal);
    color: var(--navy);
    border: 2px solid var(--teal);
    padding: 12px 28px;
    font-size: 14px;
}
.btn-primary:hover {
    background: #00e5bf;
    border-color: #00e5bf;
    color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,201,167,0.3);
}

/* --- Secondary / Ghost (outlined) --- */
.btn-secondary,
.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 2px solid rgba(255,255,255,0.2);
    padding: 12px 28px;
    font-size: 14px;
}
.btn-secondary:hover,
.btn-ghost:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: rgba(0,201,167,0.06);
}

/* --- Dark (navy outlined) --- */
.btn-dark {
    background: transparent;
    color: var(--text);
    border: 2px solid rgba(255,255,255,0.18);
    padding: 12px 28px;
    font-size: 14px;
}
.btn-dark:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: rgba(0,201,167,0.06);
}

/* --- Contact header button: FILLED teal by default --- */
.header-cta {
    background: var(--teal) !important;
    color: var(--navy) !important;
    border: 2px solid var(--teal) !important;
    padding: 8px 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
}
.header-cta:hover {
    background: transparent !important;
    color: var(--teal) !important;
    border-color: var(--teal) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════════════
   CF7 FORM INSIDE POPUP — повний override
════════════════════════════════════════════════ */

/* Hide CF7 default wrapper p margins */
.ig-popup-body .wpcf7 { margin: 0; }
.ig-popup-body .wpcf7-form > p { margin: 0 !important; }
.ig-popup-body .wpcf7-form br { display: none; }

/* Row layout from CF7 divs */
.ig-popup-body .ig-cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.ig-popup-body .ig-cf7-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
.ig-popup-body .ig-cf7-row .ig-cf7-group {
    margin-bottom: 0;
}

/* Labels */
.ig-popup-body .wpcf7-form label,
.ig-popup-body .ig-cf7-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(232,240,248,0.7);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.ig-popup-body .required { color: var(--teal); }

/* All inputs, selects, textareas */
.ig-popup-body .wpcf7-form input[type="text"],
.ig-popup-body .wpcf7-form input[type="email"],
.ig-popup-body .wpcf7-form input[type="tel"],
.ig-popup-body .wpcf7-form input[type="number"],
.ig-popup-body .wpcf7-form select,
.ig-popup-body .wpcf7-form textarea {
    width: 100% !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 4px !important;
    padding: 10px 13px !important;
    font-size: 14px !important;
    color: #fff !important;
    font-family: inherit !important;
    outline: none !important;
    transition: border-color 0.2s, background 0.2s !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.ig-popup-body .wpcf7-form input::placeholder,
.ig-popup-body .wpcf7-form textarea::placeholder {
    color: rgba(232,240,248,0.28) !important;
}
.ig-popup-body .wpcf7-form input:focus,
.ig-popup-body .wpcf7-form select:focus,
.ig-popup-body .wpcf7-form textarea:focus {
    border-color: rgba(0,201,167,0.5) !important;
    background: rgba(0,201,167,0.04) !important;
}

/* Select arrow */
.ig-popup-body .wpcf7-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f93a8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px !important;
    padding-right: 34px !important;
    cursor: pointer !important;
}
.ig-popup-body .wpcf7-form select option {
    background: #0b1a30;
    color: #e8f0f8;
}

/* Textarea */
.ig-popup-body .wpcf7-form textarea {
    resize: vertical !important;
    min-height: 100px !important;
    line-height: 1.5 !important;
}

/* Privacy / acceptance */
.ig-popup-body .ig-cf7-privacy,
.ig-popup-body .wpcf7-acceptance {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}
.ig-popup-body .wpcf7-acceptance .wpcf7-list-item {
    margin: 0 !important;
}
.ig-popup-body .wpcf7-acceptance label,
.ig-popup-body .ig-cf7-privacy label {
    font-size: 12px !important;
    color: rgba(232,240,248,0.55) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
}
.ig-popup-body .wpcf7-acceptance input[type="checkbox"],
.ig-popup-body .ig-cf7-privacy input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: var(--teal) !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    cursor: pointer !important;
}
.ig-popup-body .wpcf7-acceptance a { color: var(--teal); text-decoration: underline; }

/* Submit button */
.ig-popup-body .wpcf7-form input[type="submit"],
.ig-popup-body .wpcf7-submit {
    width: 100% !important;
    padding: 13px 24px !important;
    background: var(--teal) !important;
    color: var(--navy) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.22s !important;
    letter-spacing: 0.3px !important;
    font-family: inherit !important;
    margin-top: 4px !important;
}
.ig-popup-body .wpcf7-form input[type="submit"]:hover,
.ig-popup-body .wpcf7-submit:hover {
    background: #00e5bf !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0,201,167,0.28) !important;
}

/* Validation states */
.ig-popup-body .wpcf7-not-valid-tip {
    font-size: 11px !important;
    color: #ff6b6b !important;
    margin-top: 3px !important;
    display: block !important;
}
.ig-popup-body .wpcf7-not-valid {
    border-color: rgba(255,107,107,0.5) !important;
}
.ig-popup-body .wpcf7-response-output {
    margin: 12px 0 0 !important;
    padding: 10px 14px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    border: 1px solid rgba(0,201,167,0.3) !important;
    background: rgba(0,201,167,0.06) !important;
    color: var(--teal) !important;
}
.ig-popup-body .wpcf7-form.failed .wpcf7-response-output,
.ig-popup-body .wpcf7-form.invalid .wpcf7-response-output {
    border-color: rgba(255,107,107,0.3) !important;
    background: rgba(255,107,107,0.06) !important;
    color: #ff9b9b !important;
}

/* Spinner */
.ig-popup-body .wpcf7-spinner {
    display: none !important;
}

@media (max-width: 600px) {
    .ig-popup-body .ig-cf7-row { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════
   POPUP COMPACT OVERRIDE — менший розмір
════════════════════════════════════════════════ */
.ig-popup-box {
    max-width: 520px !important;
    max-height: 88vh !important;
}

/* Compact header */
.ig-popup-header {
    padding: 22px 28px 16px !important;
}
.ig-popup-tag {
    font-size: 10px !important;
    margin-bottom: 6px !important;
}
.ig-popup-header h2 {
    font-size: 20px !important;
    margin-bottom: 4px !important;
}
.ig-popup-header p {
    font-size: 12px !important;
}
.ig-popup-close {
    top: 12px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
}
.ig-popup-close svg {
    width: 13px !important;
    height: 13px !important;
}

/* Compact body */
.ig-popup-body {
    padding: 16px 28px 24px !important;
}
.ig-form-row,
.ig-popup-body .ig-cf7-row {
    gap: 10px !important;
    margin-bottom: 10px !important;
}
.ig-form-group,
.ig-popup-body .ig-cf7-group {
    gap: 4px !important;
    margin-bottom: 10px !important;
}
.ig-form-row .ig-form-group,
.ig-popup-body .ig-cf7-row .ig-cf7-group {
    margin-bottom: 0 !important;
}

/* Compact labels */
.ig-form-group label,
.ig-popup-body .wpcf7-form label,
.ig-popup-body .ig-cf7-group label {
    font-size: 11px !important;
    margin-bottom: 3px !important;
}

/* Compact inputs */
.ig-form-group input,
.ig-form-group select,
.ig-form-group textarea,
.ig-popup-body .wpcf7-form input[type="text"],
.ig-popup-body .wpcf7-form input[type="email"],
.ig-popup-body .wpcf7-form input[type="tel"],
.ig-popup-body .wpcf7-form select {
    padding: 8px 11px !important;
    font-size: 13px !important;
}
.ig-form-group textarea,
.ig-popup-body .wpcf7-form textarea {
    min-height: 72px !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
}

/* Compact privacy */
.ig-form-privacy,
.ig-popup-body .ig-cf7-privacy,
.ig-popup-body .wpcf7-acceptance {
    margin-bottom: 12px !important;
    gap: 8px !important;
}
.ig-form-privacy label,
.ig-popup-body .wpcf7-acceptance label,
.ig-popup-body .ig-cf7-privacy label {
    font-size: 11px !important;
}

/* Compact submit */
.ig-form-submit,
.ig-popup-body .wpcf7-form input[type="submit"],
.ig-popup-body .wpcf7-submit {
    padding: 11px 20px !important;
    font-size: 13px !important;
    margin-top: 2px !important;
}

@media (max-width: 600px) {
    .ig-popup-box { max-width: 100% !important; }
    .ig-popup-header { padding: 18px 18px 14px !important; }
    .ig-popup-body { padding: 14px 18px 20px !important; }
    .ig-popup-body .ig-cf7-row { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════
   CTA SECTION — dark override (перекриває жовтий)
════════════════════════════════════════════════ */
.cta-section {
    background: linear-gradient(135deg, #071220 0%, #0d1f3a 50%, #0a1a30 100%) !important;
    border-top: 1px solid rgba(0,201,167,0.1);
    position: relative;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 120px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
}
.cta-section h2,
.cta-section .cta-content h2 {
    color: #fff !important;
    font-size: clamp(26px, 3vw, 40px);
}
.cta-section p,
.cta-section .cta-content p {
    color: rgba(232,240,248,0.65) !important;
}
.cta-content {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

/* ── Footer privacy link ───────────────────── */
.footer-privacy {
    font-size: 12px;
    color: rgba(232,240,248,0.4);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.footer-privacy:hover { color: var(--teal); }

/* ════════════════════════════════════════════════
   HERO ENTRANCE — CSS animation (replaces GSAP)
   Guaranteed visible even if JS/CDN fails
════════════════════════════════════════════════ */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-content { animation: none; opacity: 1 !important; }

.hero-content > * {
    opacity: 1 !important;
    animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.22s; }
.hero-content > *:nth-child(3) { animation-delay: 0.34s; }
.hero-content > *:nth-child(4) { animation-delay: 0.46s; }
.hero-content > *:nth-child(5) { animation-delay: 0.56s; }

/* ════════════════════════════════════════════════
   INNER HERO IMPROVEMENTS
════════════════════════════════════════════════ */

/* Inner pages: compact, left-aligned, readable */
.hero-inner {
    min-height: 34vh !important;
    padding-top: 110px !important;
    padding-bottom: 44px !important;
    align-items: flex-end;
}
.hero-inner .container {
    width: 100%;
}
.hero-inner .hero-content {
    max-width: 720px;
    text-align: left !important;
}
.hero-inner .hero-tag {
    text-align: left !important;
    margin-bottom: 16px;
}
.hero-inner h1 {
    font-size: clamp(32px, 5vw, 58px) !important;
    margin-bottom: 0 !important;
    line-height: 1.1;
}

/* Home hero — larger, centered */
.hero-home {
    min-height: 86vh !important;
    align-items: center;
    padding-top: 120px !important;
    padding-bottom: 60px !important;
}
.hero-home .hero-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center !important;
}
.hero-home h1 {
    font-size: clamp(40px, 5.5vw, 72px) !important;
    margin-bottom: 32px !important;
    line-height: 1.08 !important;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.hero-home .hero-description {
    font-size: 18px !important;
    max-width: 560px;
    margin: 0 auto 52px !important;
    line-height: 1.8 !important;
    opacity: 0.75;
}
.hero-home .hero-cta {
    justify-content: center !important;
    gap: 16px;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════
   ABOUT INTRO SECTION fixes
════════════════════════════════════════════════ */
.about-intro-section {
    padding: 64px 0 64px !important;
    border-bottom: 1px solid var(--card-border);
    background: rgba(255,255,255,0.02);
}
.about-intro-grid p {
    font-size: 17px !important;
    line-height: 1.85 !important;
    color: rgba(232,240,248,0.8) !important;
}

/* ════════════════════════════════════════════════
   UNIVERSAL CTA SECTION improvements
════════════════════════════════════════════════ */
.cta-section {
    padding: 72px 24px !important;
}
.cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.cta-content h2 { margin-bottom: 4px; }
.cta-content p  { margin-bottom: 28px; max-width: 560px; }
.cta-content .btn-primary,
.cta-content button.btn-primary,
.cta-content button.ig-popup-open {
    margin-top: 4px;
}

/* ════════════════════════════════════════════════
   HEADER scroll state
════════════════════════════════════════════════ */
.header {
    background: rgba(11, 26, 48, 0.95) !important;
    backdrop-filter: blur(16px);
}
.header.scrolled {
    box-shadow: 0 2px 40px rgba(0,0,0,0.4);
}

/* ════════════════════════════════════════════════
   CONTACT PAGE FORM (standalone, not in popup)
════════════════════════════════════════════════ */
.contact-form-wrapper .wpcf7 { margin: 0; }
.contact-form-wrapper .wpcf7-form br { display: none; }

/* Same dark field styles as popup but slightly larger */
.contact-form-wrapper .ig-cf7-row,
.contact-form-wrapper .wpcf7-form .ig-cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.contact-form-wrapper .ig-cf7-group,
.contact-form-wrapper .wpcf7-form .ig-cf7-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper input[type="tel"],
.contact-form-wrapper select,
.contact-form-wrapper textarea,
.contact-form-wrapper .wpcf7-form input[type="text"],
.contact-form-wrapper .wpcf7-form input[type="email"],
.contact-form-wrapper .wpcf7-form input[type="tel"],
.contact-form-wrapper .wpcf7-form select,
.contact-form-wrapper .wpcf7-form textarea {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 4px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    color: #fff !important;
    font-family: inherit !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    -webkit-appearance: none !important;
}
.contact-form-wrapper input::placeholder,
.contact-form-wrapper textarea::placeholder { color: rgba(232,240,248,0.28) !important; }
.contact-form-wrapper input:focus,
.contact-form-wrapper select:focus,
.contact-form-wrapper textarea:focus {
    border-color: rgba(0,201,167,0.45) !important;
    background: rgba(0,201,167,0.03) !important;
}
.contact-form-wrapper textarea,
.contact-form-wrapper .wpcf7-form textarea { min-height: 130px !important; resize: vertical !important; }

.contact-form-wrapper label,
.contact-form-wrapper .wpcf7-form label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(232,240,248,0.65) !important;
}
.contact-form-wrapper .required { color: var(--teal) !important; }

.contact-form-wrapper .wpcf7-acceptance {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}
.contact-form-wrapper .wpcf7-acceptance label {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: rgba(232,240,248,0.55) !important;
}
.contact-form-wrapper .wpcf7-acceptance a { color: var(--teal); text-decoration: underline; }

.contact-form-wrapper input[type="submit"],
.contact-form-wrapper .wpcf7-submit,
.contact-form-wrapper .ig-form-submit {
    width: 100% !important;
    padding: 14px !important;
    background: var(--teal) !important;
    color: var(--navy) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.22s !important;
    margin-top: 4px !important;
}
.contact-form-wrapper input[type="submit"]:hover,
.contact-form-wrapper .wpcf7-submit:hover { background: #00e5bf !important; }

.contact-form-wrapper .wpcf7-not-valid-tip {
    color: #ff8080 !important; font-size: 11px !important; margin-top: 3px !important;
}
.contact-form-wrapper .wpcf7-response-output {
    margin: 12px 0 0 !important; padding: 10px 14px !important;
    border-radius: 4px !important; font-size: 13px !important;
    border: 1px solid rgba(0,201,167,0.3) !important;
    color: var(--teal) !important;
}

/* Select arrow */
.contact-form-wrapper select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f93a8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 36px !important;
    cursor: pointer !important;
}

@media (max-width: 768px) {
    .contact-form-wrapper .ig-cf7-row { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════
   D&C PROGRAM BADGE — redesigned
════════════════════════════════════════════════ */
.program-badge {
    background: linear-gradient(135deg, #0a1628 0%, #0e3a32 60%, #0b2830 100%);
    border: 1px solid rgba(0,201,167,0.3);
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
    max-width: 280px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,201,167,0.15);
}
.program-badge::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(0,201,167,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.program-badge-eyebrow {
    
    font-size: 10px;
    letter-spacing: 3px;
    color: rgba(0,201,167,0.7);
    text-transform: uppercase;
    margin-bottom: 20px;
}
.program-badge-acronym {
    font-size: 72px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 16px;
}
.program-badge-acronym span {
    color: var(--teal);
}
.program-badge-line {
    width: 40px;
    height: 2px;
    background: var(--teal);
    margin: 0 auto 16px;
    border-radius: 1px;
}
.program-badge-full {
    font-size: 13px;
    color: rgba(232,240,248,0.7);
    line-height: 1.6;
    letter-spacing: 0.3px;
}
.program-badge-since {
    
    font-size: 10px;
    color: rgba(0,201,167,0.4);
    margin-top: 20px;
    letter-spacing: 1px;
}

/* Keep program-intro layout correct with new badge size */
.program-intro {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 60px;
    align-items: center;
}
@media (max-width: 768px) {
    .program-intro { grid-template-columns: 1fr; }
    .program-badge { max-width: 100%; }
}

/* ════════════════════════════════════════════════
   HERO — equal visual padding (top = bottom)
   Header height ~70px; so visual top = padding-top - 70
════════════════════════════════════════════════ */
.hero-inner {
    min-height: 34vh !important;
    padding-top: 110px !important;
    padding-bottom: 44px !important;
    display: flex !important;
    align-items: center !important;
}
.hero-home {
    min-height: 88vh !important;
    padding-top: 100px !important;  /* less top — content more centered */
    padding-bottom: 80px !important;
    display: flex !important;
    align-items: center !important;
}

/* ════════════════════════════════════════════════
   CUSTOMIZER — social links section note
════════════════════════════════════════════════ */
/* Social icon hover */
.footer-social a:hover svg {
    stroke: var(--teal);
    transition: stroke 0.2s;
}

/* ════════════════════════════════════════════════
   BLOG SYSTEM — Single Post
════════════════════════════════════════════════ */

/* Single article hero */
.single-hero {
    padding: 100px 0 32px;
    background: linear-gradient(180deg, var(--navy) 0%, #0a1628 100%);
    position: relative;
    overflow: hidden;
}
.single-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,201,167,0.2), transparent);
}
.single-hero-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.post-cat {
    
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal);
    background: rgba(0,201,167,0.1);
    border: 1px solid rgba(0,201,167,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
}
.post-date, .post-read {
    font-size: 13px;
    color: rgba(232,240,248,0.5);
}
.post-date::before { content: ''; }
.post-read::before { content: '· '; opacity: 0.4; }

.single-title {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 20px;
    max-width: 820px;
}
.single-excerpt {
    font-size: 18px;
    color: rgba(232,240,248,0.7);
    line-height: 1.7;
    max-width: 680px;
}

/* Layout: content + sidebar */
.single-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 60px;
    padding: 36px 0 80px;
    align-items: start;
}
.single-content { min-width: 0; }

/* Article body typography */
.single-body {
    font-size: 17px;
    line-height: 1.85;
    color: rgba(232,240,248,0.88);
}
.single-body h2 { font-size: 26px; color: #fff; margin: 40px 0 16px; font-weight: 700; }
.single-body h3 { font-size: 20px; color: #fff; margin: 32px 0 12px; font-weight: 600; }
.single-body p  { margin: 0 0 20px; }
.single-body a  { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.single-body ul, .single-body ol { margin: 0 0 20px 24px; }
.single-body li { margin-bottom: 8px; }
.single-body blockquote {
    border-left: 3px solid var(--teal);
    padding: 16px 20px;
    margin: 28px 0;
    background: rgba(0,201,167,0.06);
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: rgba(232,240,248,0.8);
}
.single-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 24px 0; }
.single-body pre {
    background: #061020;
    border: 1px solid rgba(0,201,167,0.15);
    border-radius: 6px;
    padding: 20px;
    overflow-x: auto;
    
    font-size: 14px;
    margin: 24px 0;
}
.single-body code {
    
    font-size: 13px;
    background: rgba(0,201,167,0.08);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--teal);
}

/* Tags row */
.single-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 28px 0;
    border-top: 1px solid var(--card-border);
    margin-top: 40px;
}
.tags-label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.tag-pill {
    font-size: 12px;
    padding: 5px 13px;
    background: rgba(0,201,167,0.08);
    border: 1px solid rgba(0,201,167,0.18);
    border-radius: 20px;
    color: var(--teal);
    text-decoration: none;
    transition: all 0.2s;
}
.tag-pill:hover { background: rgba(0,201,167,0.15); }
.tag-pill span { color: var(--muted); font-size: 10px; }

/* Prev/Next nav */
.single-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    border-top: 1px solid var(--card-border);
    padding-top: 32px;
}
.single-nav-prev, .single-nav-next {
    display: flex; flex-direction: column; gap: 6px;
    padding: 20px; border: 1px solid var(--card-border);
    border-radius: 8px; text-decoration: none;
    transition: all 0.2s; background: rgba(255,255,255,0.02);
}
.single-nav-prev:hover, .single-nav-next:hover {
    border-color: rgba(0,201,167,0.3);
    background: rgba(0,201,167,0.04);
}
.single-nav-next { text-align: right; }
.nav-dir { font-size: 11px; color: var(--teal);  letter-spacing: 1px; }
.nav-title { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.4; }

/* Sidebar */
.single-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }
.sidebar-widget {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 24px;
}
.widget-about { text-align: center; }
.widget-about .sidebar-logo { margin-bottom: 12px; display: inline-block; }
.widget-about p { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 0; }
.sidebar-cta { width: 100%; margin-top: 16px !important; font-size: 13px !important; padding: 10px !important; }

.widget-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--card-border);
}

/* Sidebar recent posts */
.sidebar-post {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    transition: opacity 0.2s;
}
.sidebar-post:last-child { border-bottom: none; }
.sidebar-post:hover { opacity: 0.8; }
.sidebar-post-thumb { flex-shrink: 0; }
.sidebar-post-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
.sidebar-post-info { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.sidebar-post-title { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sidebar-post-date  { font-size: 11px; color: var(--muted); }

/* Sidebar categories */
.sidebar-categories { list-style: none; margin: 0; padding: 0; }
.sidebar-categories li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sidebar-categories li:last-child { border-bottom: none; }
.sidebar-categories a { font-size: 14px; color: rgba(232,240,248,0.8); text-decoration: none; transition: color 0.2s; }
.sidebar-categories a:hover { color: var(--teal); }
.cat-count { font-size: 11px; color: var(--muted); background: rgba(255,255,255,0.05); padding: 2px 7px; border-radius: 10px; }

/* Sidebar tags */
.sidebar-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Calendar widget */
.widget-calendar caption { color: var(--teal); font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.widget-calendar table { width: 100%; border-collapse: collapse; font-size: 13px; }
.widget-calendar th { color: var(--muted); font-weight: 600; text-align: center; padding: 4px; font-size: 11px; text-transform: uppercase; }
.widget-calendar td { text-align: center; padding: 4px; color: rgba(232,240,248,0.6); }
.widget-calendar td a { color: var(--teal); text-decoration: none; font-weight: 600; }
.widget-calendar td#today { background: rgba(0,201,167,0.1); border-radius: 4px; color: var(--teal); font-weight: 700; }
.widget-calendar .wp-calendar-nav { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; }
.widget-calendar .wp-calendar-nav a { color: var(--teal); text-decoration: none; }

/* Related posts */
.related-posts {
    padding: 60px 0;
    border-top: 1px solid var(--card-border);
    margin-top: 0;
}

/* News card images */
.news-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}
.news-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.news-card:hover .news-card-thumb img { transform: scale(1.04); }
.news-card-cat {
    position: absolute;
    top: 12px; left: 12px;
    
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--teal);
    padding: 3px 10px;
    border-radius: 2px;
    font-weight: 700;
}
.news-card-title a { color: #fff; text-decoration: none; }
.news-card-title a:hover { color: var(--teal); }
.news-card-date { font-size: 12px; color: var(--muted); }
.news-read { font-size: 12px; color: var(--muted); }
.news-card-meta { display: flex; gap: 12px; align-items: center; }

/* Filter bar */
.news-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--card-border);
}
.filter-tab {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    color: var(--muted);
    text-decoration: none;
    transition: all 0.2s;
}
.filter-tab:hover, .filter-tab.active {
    border-color: var(--teal);
    color: var(--teal);
    background: rgba(0,201,167,0.06);
}

/* Empty state */
.news-empty { padding: 60px 0; text-align: center; }
.news-empty p { font-size: 16px; color: var(--muted); }

/* Pagination */
.news-pagination {
    margin-top: 56px;
    display: flex;
    justify-content: center;
}
.news-pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* All page items — base style */
.news-pagination .page-numbers li a,
.news-pagination .page-numbers li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(232,240,248,0.65);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap;
}
/* Hover */
.news-pagination .page-numbers li a:hover {
    border-color: rgba(0,201,167,0.4);
    color: var(--teal);
    background: rgba(0,201,167,0.06);
}
/* Current page */
.news-pagination .page-numbers li span.current {
    background: var(--teal);
    color: var(--navy);
    border-color: var(--teal);
    font-weight: 700;
}
/* Dots / ellipsis */
.news-pagination .page-numbers li span.dots {
    border: none;
    background: transparent;
    color: rgba(232,240,248,0.3);
    min-width: 24px;
    padding: 0 4px;
}
/* Prev / Next arrows — pill style */
.news-pagination .page-numbers li a.prev,
.news-pagination .page-numbers li a.next {
    font-family: var(--font-code, monospace);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-color: rgba(0,201,167,0.2);
    color: var(--teal);
    gap: 6px;
    padding: 0 18px;
}
.news-pagination .page-numbers li a.prev:hover,
.news-pagination .page-numbers li a.next:hover {
    background: rgba(0,201,167,0.08);
    border-color: var(--teal);
}

/* Latest posts on home page */
.latest-posts-section { padding: 80px 0; background: rgba(255,255,255,0.015); }

/* News layout (list + sidebar) */
.news-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 56px;
    align-items: start;
}
.news-main { min-width: 0; }

/* Archive */
.archive-desc { font-size: 16px; color: var(--muted); margin-bottom: 32px; }
/* Archive/tag page — description uses body font, not code font */
.archive-desc {
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 32px;
    line-height: 1.7;
}
.archive-desc em {
    color: rgba(232,240,248,0.5);
    font-style: italic;
}

/* Responsive blog */
@media (max-width: 1024px) {
    .single-layout { grid-template-columns: 1fr; }
    .single-sidebar { position: static; }
    .news-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .single-hero { padding: 120px 0 60px; }
    .single-title { font-size: 28px; }
    .single-nav { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════
   FIXES — Cards, Hero, Placeholder, Category badge
════════════════════════════════════════════════ */

/* Hero inner — user spec */
.hero-inner {
    min-height: 34vh !important;
    padding-top: 110px !important;
    padding-bottom: 44px !important;
    align-items: center !important;
}

/* News card body — air inside border */
.news-card {
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.025);
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s, transform 0.3s;
}
.news-card:hover { border-color: rgba(0,201,167,0.25); transform: translateY(-3px); }

.news-card-body {
    padding: 20px 22px 24px !important;   /* air between border and text */
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}
.news-card-title { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; word-break: break-word; overflow-wrap: break-word; }
.news-excerpt { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; flex: 1; }
.news-card-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.05); }

/* Category label — readable, always dark text on teal */
.news-card-cat {
    
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #061220 !important;   /* always dark — readable on any teal shade */
    background: var(--teal) !important;
    padding: 4px 10px !important;
    border-radius: 2px !important;
}

/* Placeholder image — SVG inline, no text overlap */
.news-card-thumb {
    background: #071220;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.news-card-thumb img { display: block; }

/* When img is placeholder (og-image.png) make it centered and cover */
.news-card-thumb img[src*="og-image"] {
    width: 100% !important;
    height: 180px !important;
    object-fit: contain !important;
    padding: 20px;
    background: #0a1628;
}

/* ════════════════════════════════════════════════
   FINAL CONTRAST AUDIT — fixes
════════════════════════════════════════════════ */

/* Hero tag — more visible */
.hero-tag {
    font-family: inherit;
    font-size: 11px !important;
    color: rgba(0,201,167,0.85) !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
    opacity: 1 !important;
}

/* Contact page form heading */
.contact-form-wrapper h2 {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
    opacity: 1 !important;
}

/* Flagship stat visual layout */
.flagship-visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Section tag labels — see div.tag above */

/* Service cards — improve subtitle contrast */
.service-card h4 {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}
.service-card p {
    color: rgba(232,240,248,0.72) !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}

/* Layer blocks on Stack page — category headers */
.layer-header h3 {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600;
}
.product-card h4 {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
.product-card p {
    color: rgba(232,240,248,0.7) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

/* Tech category titles */
.tech-category-title {
    color: rgba(232,240,248,0.9) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* Security cards */
.security-card h4 {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.security-card p {
    color: rgba(232,240,248,0.72) !important;
    font-size: 13px !important;
}

/* About page values/features */
.feature-card h3, .value-card h3 {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.feature-card p, .value-card p {
    color: rgba(232,240,248,0.72) !important;
    font-size: 14px !important;
}

/* How-section step numbers */
.step-number {
    color: var(--teal) !important;
    
    font-weight: 700;
    font-size: 28px;
    opacity: 1 !important;
}

/* About page intro section — enhanced readability */
.about-intro-grid p {
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: rgba(232,240,248,0.82) !important;
}

/* Footer info */
.footer-contacts li { color: rgba(232,240,248,0.75) !important; }
.footer-contacts a { color: rgba(232,240,248,0.85) !important; }
.footer-menu-list a { color: rgba(232,240,248,0.72) !important; }
.footer-menu-list a:hover { color: var(--teal) !important; }

/* Flagship section tag override */
.flagship-section .tag {
    color: rgba(0,201,167,0.8) !important;
    font-size: 10px !important;
}

/* ════════════════════════════════════════════════
   FINAL PATCH — Hero height, News grid, Placeholder
════════════════════════════════════════════════ */

/* Home hero: 2/3 of 15" laptop (900px) ≈ 66vh */
.hero-home {
    min-height: 66vh !important;
    padding-top: 90px !important;
    padding-bottom: 60px !important;
    align-items: center !important;
    display: flex !important;
}

/* News grid on front page — 3 col desktop, 1 col mobile */
.latest-posts-section .news-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}
/* latest-posts mobile → see v15 block */

/* News placeholder image — clean, no overflow */
.news-card-thumb img[src*="placeholder"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    background: transparent !important;
}
.news-card-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0a1628;  /* navy — no green stripe below placeholder */
}
.news-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.news-card:hover .news-card-thumb img { transform: scale(1.04); }

/* Facebook icon always visible (even if no URL set, show placeholder) */
.footer-social { display: flex; align-items: center; gap: 12px; }
.footer-social a {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: rgba(232,240,248,0.6);
    text-decoration: none;
    transition: all 0.2s;
}
.footer-social a:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: rgba(0,201,167,0.06);
}
.footer-social a svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 768px) {
    .privacy-bilingual { padding: 32px 16px 60px; }
    .privacy-table td:first-child { white-space: normal; width: auto; }
}

/* ════════════════════════════════════════════════
   POPUP FORM — Acceptance/Privacy row UX fix
   CF7 renders: <p><span.wpcf7-acceptance><checkbox></span> TEXT LINK</p>
   Fix: make the <p> flex so checkbox + text stay on one line
════════════════════════════════════════════════ */

/* The paragraph wrapping the acceptance field */
.ig-popup-body .wpcf7-form p:has(.wpcf7-acceptance),
.ig-popup-body .wpcf7-form p:has([data-name="your-privacy"]) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
    color: rgba(232,240,248,0.65) !important;
    line-height: 1.4 !important;
}

/* Inline the CF7 acceptance spans */
.ig-popup-body .wpcf7-acceptance,
.ig-popup-body .wpcf7-form-control-wrap:has(.wpcf7-acceptance) {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ig-popup-body .wpcf7-list-item {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Checkbox styling */
.ig-popup-body .wpcf7-acceptance input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    accent-color: var(--teal) !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 3px !important;
}

/* The text "Я погоджуюся з" — keep on same line */
.ig-popup-body .wpcf7-form p:has(.wpcf7-acceptance) > br {
    display: none !important;
}

/* Privacy policy link — teal, visible, underlined */
.ig-popup-body .wpcf7-form p:has(.wpcf7-acceptance) a,
.ig-popup-body .ig-cf7-privacy a {
    color: var(--teal) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
}
.ig-popup-body .wpcf7-form p:has(.wpcf7-acceptance),
.ig-popup-body .wpcf7-form p:has([data-name="your-privacy"]) {
    gap: 8px !important;
}
.ig-popup-body .wpcf7-form p:has(.wpcf7-acceptance) label,
.ig-popup-body .wpcf7-form p:has([data-name="your-privacy"]) label,
.ig-popup-body .ig-cf7-privacy label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: clamp(9px, 2.45vw, 12px) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}
.ig-popup-body .wpcf7-form p:has(.wpcf7-acceptance) a:hover {
    opacity: 0.8 !important;
}

/* Fallback for browsers without :has() support */
.ig-popup-body .wpcf7-acceptance {
    display: inline-flex !important;
}
.ig-popup-body .wpcf7-form > p {
    /* Generic reset for all CF7 paragraphs in popup */
    margin-bottom: 14px !important;
}

/* ══════════════════════════════════════════════════════
   ALLIANCE MEMBERS SECTION
══════════════════════════════════════════════════════ */

.members-section {
    padding: 72px 0;
    background: var(--bg);
}

.members-intro {
    max-width: 680px;
    margin: 20px auto 0;
    color: rgba(232,240,248,0.65);
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 56px;
}

.member-card {
    background: linear-gradient(145deg, rgba(15,34,64,0.9) 0%, rgba(11,26,48,0.95) 100%);
    border: 1px solid rgba(0,201,167,0.12);
    border-radius: 6px;
    padding: 0;
    display: block;
    height: 88px;
    overflow: hidden;
    gap: 0;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.member-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--teal), transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.member-card:hover {
    border-color: rgba(0,201,167,0.3);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.member-card:hover::before {
    opacity: 1;
}

.member-name {
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.member-spec {
    font-family: var(--font-code);
    font-size: 11px;
    color: var(--teal);
    opacity: 0.8;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

/* 3-column on tablet */
@media (max-width: 1024px) {
    .members-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2-column on small tablet */
@media (max-width: 640px) {
    .members-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* 2-column on mobile */
@media (max-width: 420px) {
    .members-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .members-section {
        padding: 60px 0;
    }
}

/* Keep old .partner / .partners-grid styles for back-compat if referenced elsewhere */

/* ══════════════════════════════════════════════════════
   HERO STATS BAR
══════════════════════════════════════════════════════ */

.hero-stats-bar {
    background: rgba(11,26,48,0.97);
    border-top: 1px solid rgba(0,201,167,0.15);
    border-bottom: 1px solid rgba(0,201,167,0.08);
    padding: 22px 0;
}

.hero-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 40px;
}

.hero-stat-val {
    font-family: var(--font-main);
    font-size: 28px;
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
    letter-spacing: -0.01em;
}

.hero-stat-label {
    font-size: 12px;
    color: rgba(232,240,248,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.hero-stat-sep {
    width: 1px;
    height: 36px;
    background: rgba(0,201,167,0.2);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .hero-stats-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 4px 0;
    }
    .hero-stat { padding: 14px 12px; text-align: center; }
    .hero-stat-val { font-size: 22px; }
    .hero-stat-sep { display: none; }
    /* Centre the last stat if odd count */
    .hero-stat:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.member-card:hover .member-logo-img {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════
   GLOSSARY PAGE
══════════════════════════════════════════════════════ */

.glossary-section {
    padding: 80px 0 120px;
    background: var(--bg);
}

/* Alpha navigation */
.glossary-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 60px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0,201,167,0.12);
}

.glossary-nav-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    border: 1px solid rgba(0,201,167,0.2);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    color: rgba(232,240,248,0.6);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.glossary-nav-letter:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: rgba(0,201,167,0.06);
}

/* Letter groups */
.glossary-group {
    margin-bottom: 56px;
}

.glossary-letter-anchor {
    font-family: var(--font-main);
    font-size: 32px;
    font-weight: 800;
    color: var(--teal);
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,201,167,0.1);
    letter-spacing: -0.01em;
}

/* Term list */
.glossary-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

.glossary-entry {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0 32px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: baseline;
}

.glossary-entry:last-child {
    border-bottom: none;
}

.glossary-term {
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    padding-right: 16px;
}

.glossary-def {
    font-size: 14px;
    color: rgba(232,240,248,0.65);
    line-height: 1.7;
    margin: 0;
}

.glossary-def p {
    margin: 0;
}

.glossary-empty {
    color: rgba(232,240,248,0.4);
    font-size: 15px;
    padding: 40px 0;
}

@media (max-width: 768px) {
    .glossary-entry {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px 0;
    }
    .glossary-nav-letter {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

/* ── Article body: tables ─────────────────────── */
.single-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 15px;
    background: rgba(15,34,64,0.7);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
}
.single-body thead th {
    background: rgba(0,201,167,0.10);
    color: var(--teal);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0,201,167,0.2);
}
.single-body tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.15s;
}
.single-body tbody tr:last-child { border-bottom: none; }
.single-body tbody tr:nth-child(even) { background: rgba(255,255,255,0.025); }
.single-body tbody tr:hover { background: rgba(0,201,167,0.04); }
.single-body tbody td {
    padding: 11px 16px;
    color: rgba(232,240,248,0.82);
    vertical-align: top;
    line-height: 1.55;
}
.single-body tbody td:first-child { font-weight: 600; color: rgba(232,240,248,0.95); }

/* ── h2 with left teal border (v5.10 B2: тонша 2px напівпрозора замість 3px solid,
      щоб H2-маркер у статті не конкурував з основними teal-акцентами TOC та author-card) ── */
.single-body h2 {
    padding-left: 16px;
    border-left: 2px solid rgba(0, 201, 167, 0.5);
}

/* ── Sidebar about widget logo ─────────────────── */
.widget-about .widget-logo {
    padding: 16px;
    background: rgba(0,201,167,0.05);
    border-radius: 6px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
}
.widget-about .widget-logo img,
.widget-about .widget-logo svg {
    max-height: 42px;
    width: auto;
}
.sidebar-cta {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-top: 16px !important;
    font-size: 13px !important;
    padding: 11px 0 !important;
    cursor: pointer !important;
    border: none !important;
    background: var(--teal) !important;
    color: var(--navy) !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    letter-spacing: 0.5px !important;
    transition: opacity .2s !important;
}
.sidebar-cta:hover { opacity: .85 !important; }

/* ── widget-about compact description ─────────── */
.widget-about .widget-desc {
    font-size: 12px;
    color: rgba(232,240,248,0.55);
    line-height: 1.6;
    text-align: center;
    margin-bottom: 0;
}

html::before {
    content: '';
    position: fixed;
    inset: 0;
    width: 100%;
    background: #0b1a30;
    z-index: -1;
    pointer-events: none;
}
/* Belt-and-braces: ensure body always fills viewport */
body {
    min-width: 100%;
    background: #0b1a30 !important;
    overflow-x: hidden;
}
body,
body.home, body.page, body.single, body.archive, body.category, body.tag, body.search,
#page, .site, .site-content, .content-area,
.inside-article, .entry-content, .post-inner,
.generate-columns-container, .grid-container,
article.post, article.page, article.attachment,
.singular .entry-content,
.generate-inside-left, .generate-inside-right {
    background: #0b1a30 !important;
    background-color: #0b1a30 !important;
    color: rgba(232,240,248,0.88) !important;
}

/* ── Active menu item ─────────────────────────── */
/* Desktop: WP class + aria-current + JS-added class */
.header-nav li.current-menu-item > a,
.header-nav li.current-menu-parent > a,
.header-nav li.current-menu-ancestor > a,
.header-nav li.current_page_item > a,
.header-nav li.current_page_ancestor > a,
.header-nav ul li.current-menu-item > a,
.header-nav ul li.current-menu-parent > a,
.header-nav ul li.current-menu-ancestor > a,
.header-nav a[aria-current="page"],
.header-nav > a.active,
.mobile-nav > a.active {
    color: var(--teal) !important;
    font-weight: 700 !important;
}
/* Teal underline — DEPRECATED, replaced by .nav-text::after in 03-header.css */
.header-nav li.current-menu-item > a,
.header-nav ul li.current-menu-item > a,
.header-nav a[aria-current="page"],
.header-nav > a.active {
    position: relative !important;
}
.header-nav ul li > a { position: relative; overflow: visible; }

/* Mobile */
.mobile-nav li.current-menu-item > a,
.mobile-nav a[aria-current="page"] {
    color: var(--teal) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--teal) !important;
    padding-left: 21px !important;
}

/* ══════════════════════════════════════════════════════
   MEMBER CARDS v2 — text only / hover logo / click popup
══════════════════════════════════════════════════════ */

/* Grid: 3 cols, all 10 in 4 rows (3+3+3+1) */
.members-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 40px;
}
/* For exactly 10 cards — no orphan centering needed.
   Fallback: if last row has < 5, center remaining */
.members-grid .member-card:nth-child(5n+1):last-child {
    grid-column: 1 / -1;
    max-width: 20%;
    justify-self: center;
}
.members-grid .member-card:nth-child(5n+2):last-child,
.members-grid .member-card:nth-child(5n+3):last-child,
.members-grid .member-card:nth-child(5n+4):last-child {
    justify-self: center;
}

/* Card base */
.member-card {
    position: relative;
    display: block !important;  /* force override old flex */
    padding: 0 !important;
    height: 88px !important;    /* equal height — prevent text-wrap expanding card */
    border: 1px solid rgba(0,201,167,0.12);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    background: linear-gradient(145deg, rgba(15,34,64,0.9), rgba(11,26,48,0.95));
    outline: none;
    gap: 0;
    flex-direction: unset !important;
}
.member-card:hover,
.member-card:focus-visible {
    border-color: rgba(0,201,167,0.4);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

/* Text layer — default visible, fades on hover */
.member-card-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 12px;
    transition: opacity 0.28s ease;
    z-index: 1;
}
.member-card:hover .member-card-text,
.member-card:focus-visible .member-card-text {
    opacity: 0;
}
.member-card .member-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 3px;
}
.member-card .member-spec {
    font-family: var(--font-code);
    font-size: 8.5px;
    color: var(--teal);
    opacity: 0.65;
    letter-spacing: 0.03em;
    line-height: 1.4;
}

/* Logo hover layer — hidden by default, appears on hover */
.member-card-logo-hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(145deg, rgba(11,26,48,0.97), rgba(7,18,36,0.98));
    opacity: 0;
    transition: opacity 0.28s ease;
    z-index: 2;
    padding: 20px;
}
.member-card:hover .member-card-logo-hover,
.member-card:focus-visible .member-card-logo-hover {
    opacity: 1;
}
.member-hover-img {
    max-height: 52px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.member-hover-monogram {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0,201,167,0.15), rgba(0,201,167,0.07));
    border: 1px solid rgba(0,201,167,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--teal);
}
.member-hover-hint {
    font-family: var(--font-code);
    font-size: 11px;
    color: rgba(0,201,167,0.6);
    letter-spacing: 0.06em;
}

/* ── Member Popup ─────────────────────────────── */
.member-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.member-popup.active {
    opacity: 1;
    pointer-events: all;
}
.member-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
}
.member-popup-box {
    position: relative;
    background: linear-gradient(145deg, #0f2240, #0b1a30);
    border: 1px solid rgba(0,201,167,0.25);
    border-radius: 10px;
    padding: 40px 36px 36px;
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.25s ease;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.member-popup.active .member-popup-box {
    transform: translateY(0) scale(1);
}
.member-popup-close {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: rgba(232,240,248,0.6);
    transition: background 0.2s, color 0.2s;
}
.member-popup-close:hover { background: rgba(0,201,167,0.15); color: var(--teal); }

.member-popup-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    margin-bottom: 20px;
}
.member-popup-spec {
    font-family: var(--font-code);
    font-size: 11px;
    color: var(--teal);
    opacity: 0.8;
    text-align: center;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}
.member-popup-desc {
    font-size: 15px;
    color: rgba(232,240,248,0.7);
    line-height: 1.7;
    text-align: center;
    margin-bottom: 24px;
}
.member-popup-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--teal);
    color: var(--navy);
    font-weight: 700;
    font-size: 14px;
    padding: 11px 24px;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s;
    margin: 0 auto;
}
.member-popup-link:hover { opacity: 0.88; }
.member-popup-link svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) {
    .members-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .members-grid { grid-template-columns: 1fr; }
    .member-popup-box { padding: 32px 20px 28px; }
}

/* ════════════════════════════════════════════════
   METHODOLOGY PAGE
════════════════════════════════════════════════ */
.method-section {
    padding: 80px 0;
    background: var(--navy);
}
.method-section--alt {
    background: linear-gradient(160deg, #0b2824 0%, #0e3630 100%);
}

.method-intro { margin-bottom: 48px; }

/* 4-column principle cards */
.method-principles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.method-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,201,167,0.12);
    border-radius: 8px;
    padding: 28px 24px;
    transition: border-color 0.25s, transform 0.25s;
}
.method-card:hover {
    border-color: rgba(0,201,167,0.35);
    transform: translateY(-2px);
}
.method-card-icon {
    width: 40px; height: 40px;
    margin-bottom: 16px;
    color: var(--teal);
}
.method-card-icon svg {
    width: 40px; height: 40px;
    stroke: var(--teal);
    stroke-width: 1.5;
    fill: none;
}
.method-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.3;
}
.method-card p {
    font-size: 13.5px;
    line-height: 1.72;
    color: rgba(232,240,248,0.72);
    margin: 0;
}

/* Standards grid — 3 cols */
.standards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
}
.standard-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(0,201,167,0.14);
    border-radius: 8px;
    padding: 24px 22px;
}
.standard-code {
    font-family: var(--font-code, monospace);
    font-size: 13px;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.standard-area {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
.standard-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(232,240,248,0.68);
    margin: 0;
}

/* Approaches list */
.method-approaches {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin-top: 48px;
    border: 1px solid rgba(0,201,167,0.10);
    border-radius: 8px;
    overflow: hidden;
}
.approach-item {
    padding: 28px 32px;
    border-bottom: 1px solid rgba(0,201,167,0.08);
    border-right: 1px solid rgba(0,201,167,0.08);
}
.approach-item:nth-child(even) { border-right: none; }
.approach-item:nth-last-child(-n+2) { border-bottom: none; }
.approach-name {
    font-family: var(--font-code, monospace);
    font-size: 13px;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.approach-desc {
    font-size: 14px;
    line-height: 1.72;
    color: rgba(232,240,248,0.72);
    margin: 0;
}

/* SLA section */
.method-sla-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
.method-sla-text .line { margin-bottom: 20px; }
.method-sla-text p { font-size: 14.5px; line-height: 1.78; margin-bottom: 16px; color: rgba(232,240,248,0.8); }
.method-sla-tiers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
}
.sla-tier {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(0,201,167,0.12);
    border-left: 4px solid;
    border-radius: 6px;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sla-tier-name {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}
.sla-tier-meta {
    display: flex;
    gap: 20px;
    font-family: var(--font-code, monospace);
    font-size: 12px;
    color: rgba(232,240,248,0.55);
    letter-spacing: 0.03em;
}

/* Responsive */
@media (max-width: 1024px) {
    .method-principles-grid { grid-template-columns: repeat(2, 1fr); }
    .standards-grid { grid-template-columns: repeat(2, 1fr); }
    .method-sla-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
    .method-principles-grid { grid-template-columns: 1fr; }
    .standards-grid { grid-template-columns: 1fr; }
    .method-approaches { grid-template-columns: 1fr; }
    .approach-item { border-right: none; }
}

/* ════════════════════════════════════════════════
   GLOSSARY PAGE — tag-based redesign
════════════════════════════════════════════════ */
.glossary-section { padding: 60px 0 80px; }

.glossary-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0,201,167,0.12);
}
.glossary-nav-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    font-family: var(--font-code, monospace);
    font-size: 12px;
    font-weight: 700;
    color: rgba(232,240,248,0.55);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.glossary-nav-letter:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.glossary-group { margin-bottom: 48px; }

.glossary-letter-anchor {
    font-family: var(--font-code, monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,201,167,0.15);
}

.glossary-list { margin: 0; padding: 0; }

.glossary-entry {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px 32px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: baseline;
}
.glossary-entry:last-child { border-bottom: none; }

.glossary-term {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.glossary-term-link {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}
.glossary-term-link:hover { color: var(--teal); }
.glossary-term-count {
    font-family: var(--font-code, monospace);
    font-size: 10px;
    color: rgba(232,240,248,0.35);
    letter-spacing: 0.04em;
}

.glossary-def {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(232,240,248,0.72);
}

/* Tag cloud section */
.glossary-cloud-section {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid rgba(0,201,167,0.1);
}
.glossary-cloud-title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(232,240,248,0.55);
    font-family: var(--font-code, monospace);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.glossary-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.glossary-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    font-size: 13px;
    color: rgba(232,240,248,0.6);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.glossary-tag-pill:hover {
    border-color: rgba(0,201,167,0.3);
    color: var(--text);
}
.glossary-tag-pill.has-def {
    border-color: rgba(0,201,167,0.22);
    color: rgba(232,240,248,0.85);
}
.glossary-tag-pill.has-def:hover {
    background: rgba(0,201,167,0.06);
    border-color: var(--teal);
    color: var(--teal);
}

/* Glossary link style — inline in stack page text */
.gloss-link {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-style: dashed;
    text-decoration-color: rgba(0,201,167,0.45);
    transition: text-decoration-color 0.2s;
}
.gloss-link:hover {
    text-decoration-style: solid;
    text-decoration-color: var(--teal);
}

@media (max-width: 768px) {
    .glossary-entry { grid-template-columns: 1fr; gap: 8px; }
}

/* ════════════════════════════════════════════════
   IG-TABS — universal tab component
════════════════════════════════════════════════ */
.ig-tabs { margin: 48px 0 0; }

.ig-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 0;
}
.ig-tab-btn {
    padding: 8px 20px;
    border: 1px solid rgba(0,201,167,0.18);
    border-radius: 4px;
    background: transparent;
    color: rgba(232,240,248,0.55);
    font-family: var(--font-code, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.ig-tab-btn:hover {
    border-color: rgba(0,201,167,0.4);
    color: var(--teal);
}
.ig-tab-btn.active {
    background: rgba(0,201,167,0.10);
    border-color: var(--teal);
    color: var(--teal);
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.ig-tab-panel { display: none; }
.ig-tab-panel.active { display: block; }

/* Segments page — circle icon grid */
.segments-circle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.segment-circle-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 32px 20px 24px;
    text-align: center;
    cursor: default;
    transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.segment-circle-card:hover {
    border-color: rgba(0,201,167,0.3);
    background: rgba(0,201,167,0.04);
    transform: translateY(-2px);
}
.segment-circle-card .ig-icon--circle { margin-bottom: 16px; }
.segment-circle-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(232,240,248,0.85);
    line-height: 1.4;
}
.segment-circle-desc {
    font-size: 12.5px;
    color: rgba(232,240,248,0.5);
    line-height: 1.6;
    margin-top: 8px;
}
@media (max-width: 1024px) { .segments-circle-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .segments-circle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 360px) { .segments-circle-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════
   SEGMENTS PAGE — matrix table
════════════════════════════════════════════════ */
.segments-page-section { padding: 60px 0 80px; }

.seg-matrix {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(0,201,167,0.10);
    border-radius: 8px;
    overflow: hidden;
}
.seg-matrix-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.2s;
}
/* vertical divider between left and right columns */
.seg-matrix-row:nth-child(odd) {
    border-right: 1px solid rgba(0,201,167,0.10);
}
/* last two rows — no bottom border */
.seg-matrix-row:nth-last-child(-n+2) { border-bottom: none; }
.seg-matrix-row:hover { background: rgba(0,201,167,0.04); }
.seg-matrix-company {
    font-weight: 700;
    font-size: 14px;
    color: var(--teal);
    font-family: var(--font-code, monospace);
    white-space: nowrap;
}
.seg-matrix-focus {
    font-size: 14px;
    color: rgba(232,240,248,0.72);
    line-height: 1.6;
}
@media (max-width: 860px) {
    .seg-matrix { grid-template-columns: 1fr; }
    .seg-matrix-row:nth-child(odd) { border-right: none; }
    .seg-matrix-row:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.04); }
    .seg-matrix-row:last-child { border-bottom: none; }
}
@media (max-width: 540px) {
    .seg-matrix-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
}

/* ════════════════════════════════════════════════
   FRONT PAGE — compact segments teaser
════════════════════════════════════════════════ */
.segments-teaser-section { padding: 80px 0; }

.segments-teaser-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 40px;
}
/* segments-teaser mobile → see v15 block */
.segment-teaser-item {
    text-align: center;
    padding: 20px 10px;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    transition: border-color 0.25s;
}
.segment-teaser-item:hover {
    border-color: rgba(0,201,167,0.25);
}
.segment-teaser-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(232,240,248,0.65);
    margin-top: 10px;
}
@media (max-width: 900px) { .segments-teaser-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .segments-teaser-grid { grid-template-columns: repeat(2, 1fr); } }

/* ════════════════════════════════════════════════
   GSAP FIX — segments always visible at load
   (prevents right-column opacity:0 on first paint)
════════════════════════════════════════════════ */
.segment, .segment-card, .segment-circle-card, .segment-teaser-item {
    opacity: 1 !important;
}

/* Stack page — compact industry strip */
.stack-industries-strip {
    padding: 14px 0;
    border-top: 1px solid rgba(0,201,167,0.08);
    border-bottom: 1px solid rgba(0,201,167,0.08);
    background: rgba(0,201,167,0.03);
}
.stack-industries-strip .container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.stack-industries-label {
    font-family: var(--font-code,monospace);
    font-size: 12px;
    color: rgba(232,240,248,0.45);
    letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════
   STACK PAGE — tabs with 2-column layout inside
════════════════════════════════════════════════ */
.stack-tabs { margin-top: 40px; }

.stack-tabs-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}
.stack-tabs-nav .ig-tab-btn {
    font-size: 13px;
    padding: 10px 28px;
    letter-spacing: 0.04em;
    text-transform: none;
    font-family: var(--font-main, 'Montserrat', sans-serif);
    font-weight: 600;
    border-radius: 4px;
}

/* 2-column grid inside each tab */
.stack-tab-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
}
.stack-tab-col { min-width: 0; }

/* Tighten layer-block inside tabs — remove extra spacing */
.stack-tab-col .layer-block {
    margin-bottom: 0;
    padding: 28px 24px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}
.stack-tab-col .layer-block + .layer-block {
    margin-top: 20px;
}
.stack-tab-col .products-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}
.stack-tab-col .product-card {
    padding: 16px 18px;
}
.stack-tab-col .product-card h4 {
    font-size: 14px;
    margin-bottom: 6px;
}
.stack-tab-col .product-card p {
    font-size: 12.5px;
    line-height: 1.6;
    margin-bottom: 8px;
}
@media (max-width: 900px) {
    .stack-tab-grid { grid-template-columns: 1fr; }
    .stack-tabs-nav { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════
   TECH TAGS — always visible, no GSAP opacity fade
   (prevent invisible tags in stack page)
════════════════════════════════════════════════ */
.tech-tag {
    opacity: 1 !important;
    transform: none !important;
}

/* Tech section — 2-column layout */
.tech-section .container > .tech-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 48px;
}
.tech-categories-grid .tech-category {
    margin-bottom: 36px;
}

/* ════════════════════════════════════════════════
   FOOTER — 4-column grid (split info menu in 2)
════════════════════════════════════════════════ */
.footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important;
    gap: 40px !important;
}
.footer-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(232,240,248,0.35);
    font-family: var(--font-code, monospace);
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
    .footer-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════
   GLOSSARY v2 — with alpha filter + search
════════════════════════════════════════════════ */
.glossary-section { padding: 48px 0 80px; }

/* Header bar: stats + search */
.glossary-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.glossary-stats {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.glossary-count {
    font-size: 40px;
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
    font-family: var(--font-main, 'Montserrat', sans-serif);
}
.glossary-count-label {
    font-size: 16px;
    color: rgba(232,240,248,0.6);
    font-weight: 500;
}
.glossary-defined-note {
    font-size: 13px;
    color: rgba(232,240,248,0.35);
    font-family: var(--font-code, monospace);
}

/* Search box */
.glossary-search-wrap {
    position: relative;
    width: 300px;
    max-width: 100%;
}
.glossary-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgba(232,240,248,0.35);
    pointer-events: none;
}
.glossary-search {
    width: 100%;
    padding: 10px 16px 10px 38px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.glossary-search::placeholder { color: rgba(232,240,248,0.3); }
.glossary-search:focus { border-color: rgba(0,201,167,0.4); }

/* Alpha filter bar */
.glossary-alpha-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    margin-bottom: 40px;
}
.glossary-alpha-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: rgba(232,240,248,0.5);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-code, monospace);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 30px;
    text-align: center;
}
.glossary-alpha-btn:hover {
    color: var(--teal);
    border-color: rgba(0,201,167,0.25);
    background: rgba(0,201,167,0.05);
}
.glossary-alpha-btn.active {
    color: var(--teal);
    border-color: var(--teal);
    background: rgba(0,201,167,0.10);
    clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}

/* Letter stamp — large decorative letter */
.glossary-letter-stamp {
    font-size: 72px;
    font-weight: 900;
    color: rgba(0,201,167,0.07);
    line-height: 1;
    margin-bottom: 8px;
    font-family: var(--font-main, 'Montserrat', sans-serif);
    letter-spacing: -0.02em;
    user-select: none;
}

.glossary-group { margin-bottom: 52px; }

/* Term entries */
.glossary-list { margin: 0; padding: 0; }
.glossary-entry {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px 32px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: baseline;
    scroll-margin-top: 150px;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.glossary-entry:last-child { border-bottom: none; }

.glossary-entry.is-target {
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
    border-color: rgba(0,201,167,0.26);
    border-radius: 8px;
    background: rgba(0,201,167,0.075);
    box-shadow: inset 3px 0 0 var(--teal);
}

.glossary-entry.is-target .glossary-term-link {
    color: var(--teal);
}

.glossary-term {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.glossary-term-link {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}
.glossary-term-link:hover { color: var(--teal); }
.glossary-term-count {
    font-family: var(--font-code, monospace);
    font-size: 10px;
    color: rgba(232,240,248,0.3);
    letter-spacing: 0.04em;
}
.glossary-def {
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(232,240,248,0.72);
    margin: 0;
}

/* No results */
.glossary-no-results {
    text-align: center;
    padding: 40px 0;
    color: rgba(232,240,248,0.35);
    font-size: 15px;
}

/* Tag cloud */
.glossary-cloud-section {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid rgba(0,201,167,0.10);
}
.glossary-cloud-title {
    font-size: 11px;
    font-weight: 700;
    color: rgba(232,240,248,0.35);
    font-family: var(--font-code, monospace);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.glossary-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.glossary-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    font-size: 13px;
    color: rgba(232,240,248,0.5);
    text-decoration: none;
    transition: all 0.2s;
}
.glossary-tag-pill:hover {
    border-color: rgba(0,201,167,0.3);
    color: var(--text);
}
.glossary-tag-pill.has-def {
    border-color: rgba(0,201,167,0.2);
    color: rgba(232,240,248,0.82);
}
.glossary-tag-pill.has-def:hover {
    background: rgba(0,201,167,0.06);
    border-color: var(--teal);
    color: var(--teal);
}

/* Gloss inline links */
.gloss-link {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-style: dashed;
    text-decoration-color: rgba(0,201,167,0.4);
    transition: text-decoration-color 0.2s;
}
.gloss-link:hover {
    text-decoration-style: solid;
    text-decoration-color: var(--teal);
}

@media (max-width: 768px) {
    .glossary-header-bar { flex-direction: column; align-items: flex-start; }
    .glossary-search-wrap { width: 100%; }
    .glossary-entry { grid-template-columns: 1fr; gap: 6px; }
    .glossary-letter-stamp { font-size: 48px; }
}

/* ════════════════════════════════════════════════
   FOOTER v2 — 4 columns
════════════════════════════════════════════════ */
.footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr !important;
    gap: 40px !important;
    align-items: start;
}
.footer-col-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232,240,248,0.3);
    font-family: var(--font-code, monospace);
    margin-bottom: 18px;
    display: block;
}
/* Remove old h4 style in footer nav columns */
.footer-col h4 {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232,240,248,0.3);
    font-family: var(--font-code, monospace);
    margin-bottom: 18px;
    margin-top: 0;
}
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 540px) {
    .footer-grid { grid-template-columns: 1fr !important; }
}

/* First section after hero — reduce gap */
.hero + section,
.hero-inner + section,
.hero-home + section,
.hero-home + div + section {
    padding-top: 64px;
}

/* Prevent GSAP invisible flash on first section after hero */
.categories-section,
.members-section,
.about-intro-section,
.why-section,
.services-section,
.mgmt-section,
.map-section,
.cta-section {
    opacity: 1 !important;
}

/* Cards are visible by default — GSAP overrides only for scroll-triggered off-screen items */
.service-card, .member-card, .why-item, .segment, .feature-card,
.value-card, .benefit-card, .standard-card, .step-card,
.news-card, .info-card, .product-card, .partner,
.segment-circle-card, .segment-teaser-item, .method-card,
.sla-tier, .approach-item, .seg-matrix-row {
    opacity: 1;
}

/* ═══ MOBILE v15 — comprehensive grid overrides ═══ */
@media (max-width: 768px) {

    /* ── HERO ──────────────────────────────────────── */
    .hero-home {
        min-height: auto !important;
        height: auto !important;
        padding-top: 90px !important;
        padding-bottom: 50px !important;
        display: block !important;
    }
    .hero-home .hero-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .hero-home .hero-tag,
    .hero-home .hero-description,
    .hero-home .hero-cta {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .hero-home h1 {
        font-size: clamp(28px, 8vw, 40px) !important;
        white-space: normal !important;
        letter-spacing: 0 !important;
        line-height: 1.15 !important;
    }
    .hero-home .hero-description { font-size: 16px !important; margin-bottom: 28px !important; }
    .hero-home .hero-tag { margin-bottom: 16px !important; }
    .hero-inner {
        min-height: auto !important;
        height: auto !important;
        padding-top: 90px !important;
        padding-bottom: 36px !important;
    }
    .hero-inner h1 { font-size: clamp(24px, 6vw, 34px) !important; }
    .hero-inner .hero-description { font-size: 15px !important; }

    /* ── HERO CTA buttons — full width ─────────────── */
    .hero-cta {
        flex-direction: column !important;
        align-items: stretch !important;
        margin-top: 24px !important;
        gap: 10px !important;
    }
    .hero-cta a, .hero-cta button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* ── HERO STATS BAR — 2×2+1 grid ───────────────── */
    .hero-stats-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
    }
    .hero-stat { padding: 14px 8px !important; }
    .hero-stat-val { font-size: 22px !important; }
    .hero-stat-sep { display: none !important; }
    .hero-stat:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }

    /* ── 1-COLUMN GRIDS (content-heavy) ────────────── */
    .news-grid,
    .why-grid,
    .about-intro-grid,
    .contact-grid,
    .news-layout,
    .single-layout,
    .flagship-grid,
    .platform-grid,
    .client-grid,
    .seg-matrix,
    .stack-tab-grid,
    .org-comparison,
    .method-sla-grid,
    .program-intro,
    .featured-grid,
    .newsletter-form { grid-template-columns: 1fr !important; }
    .org-comparison { flex-direction: column !important; }
    .org-comparison-side { min-width: auto !important; }
    .news-layout, .single-layout { gap: 32px !important; }

    /* ── 2-COLUMN GRIDS (compact icon cards) ────────── */
    .services-grid,
    .members-grid,
    .features-grid,
    .values-grid,
    .segments-circle-grid,
    .method-principles-grid,
    .standards-grid,
    .products-grid,
    .security-grid,
    .tech-categories-grid,
    .benefits-grid,
    .steps-grid,
    .segments-teaser-grid,
    .certs-grid,
    .workflow-grid,
    .hours-grid,
    .careers-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Segment matrix overrides 2-col base to 1-col */
    .seg-matrix { grid-template-columns: 1fr !important; }
    .seg-matrix-row:nth-child(odd) { border-right: none !important; }
    .seg-matrix-row:nth-last-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    }
    .seg-matrix-row:last-child { border-bottom: none !important; }

    /* ── NEWS grid — always 1 col ───────────────────── */
    .news-grid { grid-template-columns: 1fr !important; }
    .latest-posts-section .news-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

    /* ── SIDEBAR — stack below content ─────────────── */
    .news-layout,
    .single-layout { grid-template-columns: 1fr !important; }
    .single-sidebar { display: none; }

    /* ── SEGMENTS TEASER — 3 col ────────────────────── */
    .segments-teaser-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .segment-teaser-item { padding: 14px 6px !important; }
    .segment-teaser-name { font-size: 11px !important; }

    /* ── FOOTER ─────────────────────────────────────── */
    .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .site-footer { padding: 48px 16px 20px !important; }
    .partners-grid { flex-direction: column !important; gap: 8px !important; }

    /* ── TYPOGRAPHY ─────────────────────────────────── */
    h1 { font-size: clamp(26px, 7vw, 38px) !important; }
    h2 { font-size: clamp(20px, 5vw, 28px) !important; }

    /* ── SECTIONS ───────────────────────────────────── */
    section { padding: 56px 16px !important; }
    .container { padding: 0 16px !important; }
    .cta-section { padding: 56px 16px !important; }

    /* ── PREVENT HORIZONTAL OVERFLOW ───────────────── */
    html, body { overflow-x: hidden !important; max-width: 100vw !important; }

    /* ── HEADER ─────────────────────────────────────── */
    .header { padding: 12px 16px !important; background-color: #061220 !important; }
    .burger { display: block !important; }
    .header-nav { display: none !important; }
    .header-cta.hide-mobile { display: none !important; }
    .hide-mobile { display: none !important; }

    /* ── MOBILE MENU ────────────────────────────────── */
    .mobile-contact-btn {
        display: inline-flex !important;
        width: auto !important;
        padding: 10px 28px !important;
        background: transparent !important;
        color: var(--teal) !important;
        border: 1px solid var(--teal) !important;
        margin-top: 20px !important;
    }

    /* ── SERVICE CARDS — adjust for 2-col ───────────── */
    .service-card { padding: 18px 14px !important; }
    .service-card h3 { font-size: 14px !important; }
    .service-card p { font-size: 13px !important; }
    .service-icon { width: 32px !important; height: 32px !important; margin-bottom: 10px !important; }
    .service-icon svg { width: 16px !important; height: 16px !important; }

    /* ── MEMBER CARDS ───────────────────────────────── */
    .member-name { font-size: 13px !important; }
    .member-spec { font-size: 10px !important; }

    /* ── WHY GRID ───────────────────────────────────── */
    .why-number { font-size: 36px !important; }

    /* ── WORKFLOW ───────────────────────────────────── */
    .workflow-step::after { display: none !important; }

    /* ── GLOSSARY ───────────────────────────────────── */
    .glossary-alpha-bar { flex-wrap: wrap !important; gap: 4px !important; }
    .glossary-alpha-btn { padding: 4px 8px !important; font-size: 12px !important; }
    .glossary-entry { padding: 12px 0 !important; }
    .glossary-entry.is-target {
        margin-left: -12px;
        margin-right: -12px;
        padding: 12px !important;
    }

    /* ── STANDARDS GRID ─────────────────────────────── */
    .standard-card { padding: 16px 12px !important; }

    /* ── PLATFORM STATS ─────────────────────────────── */
    .platform-stats { grid-template-columns: repeat(2, 1fr) !important; }

    /* ── CONTACT ────────────────────────────────────── */
    .contact-form-wrapper { padding: 20px 16px !important; }
    .info-card { padding: 20px 16px !important; }

    /* ── SINGLE POST ────────────────────────────────── */
    .single-nav { flex-direction: column !important; }
    .single-nav-link.next { text-align: left !important; }

    /* ── SLA TIERS ──────────────────────────────────── */
    .sla-tier { padding: 14px 10px !important; }

    /* ── TABS on services page ──────────────────────── */
    .ig-tabs { overflow-x: auto !important; }
    .ig-tab-btn { font-size: 11px !important; padding: 8px 10px !important; white-space: nowrap !important; }
}

@media (max-width: 480px) {
    .hero-home h1 { font-size: 26px !important; }
    .hero-stat-val { font-size: 20px !important; }
    .services-grid { grid-template-columns: 1fr !important; }
    .service-card h3 { font-size: 15px !important; }
    .service-card p { font-size: 14px !important; }
    .service-icon { width: 36px !important; height: 36px !important; }
    .map-stat-value { font-size: 36px !important; }
}

/* ── Mobile lang switcher in header ─────────────────────────── */
.mobile-lang-header {
    display: none; /* hidden on desktop — desktop uses .header-right */
}

@media (max-width: 768px) {
    /* Show in header */
    .mobile-lang-header {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-right: 4px;
    }
    .mobile-lang-header .lang-sw {
        font-size: 11px;
        padding: 3px 7px;
        border: 1px solid rgba(0,201,167,0.3);
        border-radius: 2px;
        color: rgba(232,240,248,0.6);
        text-decoration: none;
        letter-spacing: 0.5px;
        transition: all 0.2s;
    }
    .mobile-lang-header .lang-sw.active {
        color: var(--teal);
        border-color: var(--teal);
    }
    /* Hide lang switcher inside mobile menu (redundant now) */
    .mobile-lang {
        display: none !important;
    }
    /* Hide desktop lang switcher on mobile */
    .header-right .lang-switcher {
        display: none !important;
    }
}

/* ── 404 Error Page ─────────────────────────────────────────── */
.error-404-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
}
.error-404-inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}
.error-404-code {
    font-size: clamp(80px, 15vw, 160px);
    font-weight: 800;
    line-height: 1;
    color: var(--teal);
    opacity: 0.15;
    letter-spacing: -4px;
    margin-bottom: -20px;
}
.error-404-title {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}
.error-404-desc {
    font-size: 17px;
    color: rgba(232,240,248,0.6);
    line-height: 1.7;
    margin-bottom: 40px;
}
.error-404-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .error-404-actions { flex-direction: column; align-items: center; }
    .error-404-actions a { width: 100%; text-align: center; }
}

/* ═══ END MOBILE v15 ═══ */

/* ═══════════════════════════════════════════════════════
   OVERRIDES — appended to original theme.css
   Touch nothing above this line
═══════════════════════════════════════════════════════ */

/* ── Phase 1: utility classes (replace inline style="…" in templates) ──
   Visual parity with the inline styles they replaced — do not redefine
   here. If a new pattern is needed, add a new utility, do not rewrite
   one of these. */
.text-center        { text-align: center; }
.is-hidden          { display: none; }
                        /* glossary EN translation, dim labels */
.color-teal         { color: var(--teal); }
.color-soft         { color: rgba(255,255,255,0.6); }
.color-muted-text   { color: rgba(232,240,248,0.6); }
.color-tag-soft     { color: rgba(0,201,167,0.7); }
.color-on-teal      { color: var(--navy); }
.mt-32              { margin-top: 32px; }
.mt-40              { margin-top: 40px; }
.mt-48              { margin-top: 48px; }
.mt-50              { margin-top: 50px; }
.mb-32              { margin-bottom: 32px; }
.mb-40              { margin-bottom: 40px; }
.mb-48              { margin-bottom: 48px; }
.mt-16-full         { margin-top: 16px; width: 100%; }
                 /* `.line` separator under headers */
.line-center-24     { margin: 24px auto 0; }
.intro-narrow-12    { max-width: 700px; margin: 12px auto 0; }
.intro-narrow-20    { max-width: 700px; margin: 20px auto 0; }
.intro-narrow-650   { max-width: 650px; margin: 20px auto 0; }
.archive-pad        { padding-top: 64px; padding-bottom: 80px; }
.bg-navy            { background: var(--navy); }
.empty-news-row     {
    display: none;                                            /* shown by JS when filter result is empty */
    font-size: 14px;
    color: rgba(232,240,248,0.5);
    padding: 12px 0;
}
.cta-section--industries {
    background: linear-gradient(135deg, #0b2824 0%, #0e3630 100%);
    padding: 60px 6%;
    border-top: 1px solid rgba(0,201,167,0.1);
}

/* `.filter-tab` was authored as an <a>; Phase 1 makes it a <button> for the
   client-side filter. This block keeps the visual identical. */
button.filter-tab {
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}
button.filter-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* vanta-bg dark fallback */
.vanta-bg { background: var(--navy); }

.member-popup-spec {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--teal) !important;
    opacity: 1 !important;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.member-popup-footer {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 20px;
    display: flex;
    justify-content: center;
}
.member-popup-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    color: var(--teal) !important;
    border: 1px solid rgba(0,201,167,0.4) !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.member-popup-link:hover {
    background: var(--teal) !important;
    color: var(--navy) !important;
}
.member-popup-link svg { stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }

/* ── Footer: expanded contacts ──────────────────── */
.footer-contacts li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.footer-contacts li svg { width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 2px; }

/* ── Hero CTA: 2 buttons side by side on mobile ─── */
@media (max-width: 768px) {
    .hero-cta {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    .hero-cta a,
    .hero-cta button {
        flex: 1 1 0 !important;
        width: auto !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 14px 8px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
    .hero-cta .btn-ghost {
        border: 2px solid rgba(255,255,255,0.35) !important;
        background: transparent !important;
        color: var(--text) !important;
    }
    .hero-cta .btn-ghost svg { display: none !important; }

    /* Grid card alignment */
    .values-grid,
    .features-grid,
    .method-principles-grid { align-items: start !important; }
    .value-card:hover,
    .feature-card:hover,
    .method-card:hover { transform: none !important; }

    /* Security/products: 1 col on narrow screens */
    .security-grid,
    .products-grid { grid-template-columns: 1fr !important; }
    .security-grid > *,
    .products-grid > * { min-width: 0; overflow: hidden; }
}

/* ── Contact page ───────────────────────────────── */
.ct-intent-section { background: var(--navy); padding: 0 0 56px; }
.ct-intent-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ct-intent-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 24px 20px; background: rgba(255,255,255,0.02);
    border: 1px solid var(--card-border); border-radius: 6px;
    text-decoration: none; color: inherit;
    transition: border-color .25s, background .25s, transform .25s;
}
.ct-intent-card:hover { border-color: var(--teal); background: rgba(0,201,167,0.06); transform: translateY(-2px); }
.ct-intent-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(0,201,167,0.08); border-radius: 8px; }
.ct-intent-icon svg { width: 18px; height: 18px; stroke: var(--teal); stroke-width: 1.5; fill: none; }
.ct-intent-text h3 { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.ct-intent-text p { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 0; }
.ct-main-section { background: var(--navy-deep); padding: 72px 0; }
.ct-main-grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
.ct-form-col { min-width: 0; }
.ct-form-header { margin-bottom: 28px; }
.ct-form-header h2 { font-size: 26px; font-weight: 700; color: #fff; margin: 10px 0 8px; }
.ct-form-note { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; }
.ct-form-col .wpcf7,
.ct-form-col form.ct-form {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 32px 36px;
}
.ct-form-col label {
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 1px !important;
    color: var(--teal) !important;
}
.ct-form-col input[type="text"],
.ct-form-col input[type="email"],
.ct-form-col input[type="tel"],
.ct-form-col select,
.ct-form-col textarea,
.ct-form-col .wpcf7-form input,
.ct-form-col .wpcf7-form select,
.ct-form-col .wpcf7-form textarea {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-bottom: 2px solid rgba(255,255,255,0.18) !important;
    border-radius: 4px 4px 0 0 !important;
    padding: 12px 14px !important;
    font-size: 14px !important; color: #fff !important;
    font-family: inherit !important; width: 100% !important;
    box-sizing: border-box !important; outline: none !important;
    -webkit-appearance: none !important;
    color-scheme: dark !important;
    transition: border-color .2s !important;
}
.ct-form-col input:focus,
.ct-form-col select:focus,
.ct-form-col textarea:focus,
.ct-form-col .wpcf7-form input:focus,
.ct-form-col .wpcf7-form select:focus,
.ct-form-col .wpcf7-form textarea:focus {
    border-bottom-color: var(--teal) !important;
    background: rgba(0,201,167,0.04) !important;
}
.ct-form-col select,
.ct-form-col .wpcf7-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300c9a7' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
}
.ct-form-col select option { background-color: #0b1a30; color: #e8f0f8; }
.ct-form-col textarea { border-radius: 4px !important; min-height: 120px; resize: vertical; }
.ct-form-col .ig-form-row,
.ct-form-col .wpcf7-form .ig-cf7-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-form-col .ig-form-group,
.ct-form-col .wpcf7-form .ig-cf7-group { display: flex; flex-direction: column; gap: 6px; }
.ct-form-col .ig-form-privacy,
.ct-form-col .wpcf7-acceptance { display: flex !important; align-items: flex-start !important; gap: 10px !important; }
.ct-form-col .ig-form-privacy label,
.ct-form-col .wpcf7-acceptance label {
    font-size: 12px !important; text-transform: none !important;
    letter-spacing: 0 !important; color: rgba(232,240,248,0.5) !important;
    font-weight: 400 !important;
}
.ct-form-col .ig-form-privacy a,
.ct-form-col .wpcf7-acceptance a { color: var(--teal) !important; text-decoration: underline; }
.ct-form-col input[type="submit"],
.ct-form-col .wpcf7-submit,
.ct-form-col .ig-form-submit {
    width: 100% !important; padding: 14px !important;
    background: var(--teal) !important; color: var(--navy) !important;
    font-size: 14px !important; font-weight: 700 !important;
    border: none !important; border-radius: 4px !important;
    cursor: pointer !important; font-family: inherit !important;
    transition: background .22s, box-shadow .22s !important;
    margin-top: 8px !important;
}
.ct-form-col input[type="submit"]:hover,
.ct-form-col .wpcf7-submit:hover {
    background: #00e5bf !important;
    box-shadow: 0 6px 20px rgba(0,201,167,0.3) !important;
}
.ct-info-col { display: flex; flex-direction: column; background: rgba(255,255,255,0.018); border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden; }
.ct-info-block { padding: 28px 24px; }
.ct-divider { height: 1px; background: var(--card-border); }
.ct-info-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; }
.ct-info-email { display: block; font-size: 20px; font-weight: 700; color: #fff; text-decoration: none; margin-bottom: 6px; }
.ct-info-email:hover { color: var(--teal); }
.ct-info-sub { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }
.ct-offices-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ct-office-flag { font-size: 17px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.ct-office-city { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 1px; }
.ct-office-item--main .ct-office-city { color: var(--teal); }
.ct-office-note { font-size: 11px; color: var(--muted); line-height: 1.4; }
.ct-join-block { background: rgba(0,201,167,0.04); }
.ct-join-block p { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0 0 14px; }
.ct-join-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; padding: 8px 14px; border: 1px solid rgba(0,201,167,0.35); border-radius: 4px; transition: all .2s; }
.ct-join-link:hover { background: var(--teal); color: var(--navy); }
.ct-presence-section { background: var(--navy); padding: 72px 0; border-top: 1px solid var(--card-border); }
.ct-presence-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin-bottom: 48px; border: 1px solid var(--card-border); border-radius: 6px; overflow: hidden; }
.ct-pstat { padding: 28px 20px; text-align: center; background: rgba(255,255,255,0.015); }
.ct-pstat:hover { background: rgba(0,201,167,0.06); }
.ct-pstat-num { font-size: 36px; font-weight: 800; color: var(--teal); line-height: 1; margin-bottom: 6px; }
.ct-pstat-label { font-size: 11px; color: var(--muted); line-height: 1.4; }
.ct-region-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; margin-bottom: 28px; }
.ct-region { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 10px; border: 1px solid var(--card-border); border-radius: 6px; background: rgba(255,255,255,0.015); gap: 7px; }
.ct-region-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ct-region--hq .ct-region-dot { background: var(--teal); box-shadow: 0 0 7px rgba(0,201,167,0.5); }
.ct-region--office .ct-region-dot { background: var(--cyan); }
.ct-region--client .ct-region-dot { background: rgba(255,255,255,0.22); }
.ct-region-name { font-size: 11px; font-weight: 600; color: #fff; line-height: 1.3; }
.ct-region-note { font-size: 10px; color: var(--muted); }
.ct-presence-legend { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.ct-legend-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.ct-legend-item::before { content:''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.ct-legend--hq::before { background: var(--teal); }
.ct-legend--office::before { background: var(--cyan); }
.ct-legend--client::before { background: rgba(255,255,255,0.22); }
.ct-sla-section { background: var(--navy-deep); padding: 72px 0; border-top: 1px solid var(--card-border); }
.ct-sla-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ct-sla-card { padding: 36px 28px; background: rgba(255,255,255,0.02); border: 1px solid var(--card-border); border-radius: 8px; text-align: center; transition: border-color .25s; }
.ct-sla-card:hover { border-color: var(--teal); }
.ct-sla-icon { width: 44px; height: 44px; margin: 0 auto 16px; background: rgba(0,201,167,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ct-sla-icon svg { width: 20px; height: 20px; stroke: var(--teal); stroke-width: 1.5; fill: none; }
.ct-sla-time { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.ct-sla-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }

@media (max-width: 1024px) {
    .ct-intent-grid { grid-template-columns: repeat(2,1fr); }
    .ct-main-grid { grid-template-columns: 1fr; gap: 36px; }
    .ct-region-grid { grid-template-columns: repeat(4,1fr); }
    .ct-presence-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .ct-intent-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ct-intent-card { padding: 16px 14px; }
    .ct-sla-grid { grid-template-columns: 1fr; }
    .ct-region-grid { grid-template-columns: repeat(3,1fr); gap: 7px; }
    .ct-region-note { display: none; }
    .ct-form-col .ig-form-row,
    .ct-form-col .wpcf7-form .ig-cf7-row { grid-template-columns: 1fr !important; }
    .ct-form-col .wpcf7,
    .ct-form-col form.ct-form { padding: 24px 18px !important; }
}
@media (max-width: 480px) {
    .ct-intent-grid { grid-template-columns: 1fr; }
    .ct-region-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Mobile fixes: narrow screens (≤480px) ──────────── */
@media (max-width: 480px) {
    /* Platform stats: 1 column on phones */
    .platform-stats { grid-template-columns: 1fr !important; }

    /* Method principles: 1 column on phones */
    .method-principles-grid { grid-template-columns: 1fr !important; }

    /* Services grid: 1 column on phones */
    .services-grid { grid-template-columns: 1fr !important; }
}

/* ── Form privacy: always inline on all screens ───── */
@media (max-width: 480px) {
    .ig-form-privacy {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    .ig-form-privacy label {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    .ig-form-privacy label a,
    .ig-popup-body .ig-cf7-privacy label a,
    .ig-popup-body .wpcf7-acceptance label a,
    .ct-form-col .ig-form-privacy label a {
        color: var(--teal) !important;
        text-decoration: underline !important;
    }
}

/* ════════════════════════════════════════════════
   CARD BAND v3 — editorial: вертикальна рейка + іконка-силует + pill в обведенні
   ════════════════════════════════════════════════ */

.news-card-thumb:has(.news-card-band) {
    min-height: 0;
    height: 92px;
    padding: 0;
    overflow: hidden;
}

.news-card-band {
    position: relative;
    width: 100%;
    height: 100%;
    background: #0b1a30;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 18px 0 24px;
    transition: background .2s ease;
}
.news-card:hover .news-card-band { background: #0d2138; }

/* Ліва вертикальна рейка — кольоровий «таб» */
.news-card-band-rail {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    opacity: .9;
    transition: width .2s ease, opacity .2s ease;
}
.news-card:hover .news-card-band-rail { width: 4px; opacity: 1; }

/* Іконка-силует справа по центру */
.news-card-band-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    opacity: .22;
    pointer-events: none;
    transition: opacity .2s ease, transform .25s ease;
}
.news-card-band-icon svg { width: 100%; height: 100%; display: block; }
.news-card:hover .news-card-band-icon { opacity: .32; transform: translateY(-50%) scale(1.06); }

/* Pill — лише обведення, без заливки */
.news-card-band-pill {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    background: transparent;
    border: 1px solid;
    max-width: calc(100% - 90px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Сховати застарілу overlay-pill, якщо десь у застарілому HTML лишилась */
.news-card-thumb:has(.news-card-band) .news-card-cat { display: none; }

@media (max-width: 600px) {
    .news-card-thumb:has(.news-card-band) { height: 80px; }
    .news-card-band { padding: 0 14px 0 18px; }
    .news-card-band-icon { width: 52px; height: 52px; right: 12px; }
    .news-card-band-pill { font-size: 9px; padding: 5px 10px; max-width: calc(100% - 72px); }
}

/* ════════════════════════════════════════════════
   AUTHOR HERO A — інтегрований блок (аватар + ім'я + посада + біо + статистика)
   Замість intecracy_hero + окремої профіль-картки.
   ════════════════════════════════════════════════ */

.hero-author {
    padding: 64px 0 56px;
    position: relative;
    background: linear-gradient(180deg, #04101e 0%, #040b18 100%);
    border-bottom: 1px solid rgba(0, 201, 167, .12);
    overflow: hidden;
}

.hero-author .ha-tag {
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #00c9a7;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 18px;
}

.hero-author .ha-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 38px;
    align-items: start;
}

.hero-author .ha-ava {
    position: relative;
}
.hero-author .ha-ava::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, rgba(0, 201, 167, .5), transparent);
    transform: translateX(-50%);
}
.hero-author .ha-ava img,
.hero-author .ha-ava .avatar {
    width: 136px !important;
    height: 136px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid rgba(0, 201, 167, .3);
    background: #0b1a30;
}

.hero-author .ha-body h1 {
    font-size: 46px;
    line-height: 1.05;
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.hero-author .ha-pos {
    font-size: 15px;
    font-weight: 600;
    color: #00c9a7;
    margin: 12px 0 20px;
    letter-spacing: .02em;
}

.hero-author .ha-bio {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(232, 240, 248, .78);
    margin: 0 0 22px;
    max-width: 680px;
}

.hero-author .ha-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13px;
    color: rgba(232, 240, 248, .65);
    padding-top: 20px;
    border-top: 1px solid rgba(0, 201, 167, .15);
}
.hero-author .ha-stats strong {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    margin-right: 4px;
}
.hero-author .ha-stats .ha-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(0, 201, 167, .3);
}
.hero-author .ha-stats .ha-tag-chip {
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(232, 240, 248, .8);
    padding: 4px 9px;
    border: 1px solid rgba(0, 201, 167, .25);
    border-radius: 4px;
    background: rgba(0, 201, 167, .04);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.hero-author .ha-stats .ha-tag-chip:hover {
    border-color: rgba(0, 201, 167, .6);
    color: #00c9a7;
}

@media (max-width: 720px) {
    .hero-author { padding: 48px 0 40px; }
    .hero-author .ha-grid { grid-template-columns: 1fr; gap: 22px; }
    .hero-author .ha-ava::after { display: none; }
    .hero-author .ha-ava img,
    .hero-author .ha-ava .avatar { width: 96px !important; height: 96px !important; }
    .hero-author .ha-body h1 { font-size: 34px; }
    .hero-author .ha-bio { font-size: 15px; }
    .hero-author .ha-stats { gap: 12px; font-size: 12.5px; }
}

/* ════════════════════════════════════════════════
   CARD BAND — DEFENSIVE FIX (post v3)
   1) Прибрати default-underline з <a class="news-card-thumb">
      (інакше браузерний text-decoration лінка простягається на текст pill
       і малює лінію кольором #0000EE — виглядає як темно-синя / фіолетова).
   2) Зміцнити правила pill через вищу специфічність,
      на випадок, якщо інше правило перебивало display/border.
   ════════════════════════════════════════════════ */

a.news-card-thumb,
a.news-card-thumb:hover,
a.news-card-thumb:focus,
a.news-card-thumb:visited,
a.news-card-thumb:active {
    text-decoration: none;
}

.news-card .news-card-band-pill {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
}

/* ════════════════════════════════════════════════
   POST-AUTHOR — клікабельне ім'я в hero-meta single.php
   Стиль як у post-cat: маленька uppercase-мітка, але як виділений лінк.
   ════════════════════════════════════════════════ */

.single-hero-meta .post-author {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e8edf6;
    text-decoration: none;
    padding: 5px 0;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.single-hero-meta .post-author::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: rgba(0, 201, 167, .5);
    margin-right: 10px;
}
.single-hero-meta .post-author:hover,
.single-hero-meta .post-author:focus {
    color: #00c9a7;
    border-bottom-color: rgba(0, 201, 167, .5);
}

/* ════════════════════════════════════════════════
   SIDEBAR — список «Останні матеріали» editorial-стиль
   (без OG-thumbnails — лише міні-рейка категорії + текст)
   ════════════════════════════════════════════════ */

.sidebar-recent {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-recent-item {
    margin: 0;
    border-bottom: 1px solid rgba(0, 201, 167, .08);
}
.sidebar-recent-item:last-child { border-bottom: none; }

.sidebar-recent-link {
    position: relative;
    display: block;
    padding: 14px 0 14px 18px;
    text-decoration: none;
    transition: background .15s ease;
}
.sidebar-recent-link:hover { background: rgba(0, 201, 167, .03); }
.sidebar-recent-link:hover .sidebar-recent-rail { width: 4px; opacity: 1; }
.sidebar-recent-link:hover .sidebar-recent-title { color: #00c9a7; }

.sidebar-recent-rail {
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    opacity: .75;
    transition: width .15s ease, opacity .15s ease;
}

.sidebar-recent-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-recent-cat {
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.sidebar-recent-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #e8edf6;
    transition: color .15s ease;
}
.sidebar-recent-date {
    font-size: 11px;
    color: rgba(232, 240, 248, .5);
    letter-spacing: .02em;
}

/* Сховати застарілий thumb-стиль на випадок старого закешованого HTML */
.sidebar-post-thumb { display: none; }

/* ════════════════════════════════════════════════
   ВІДСТУПИ — більше повітря на сторінці автора (зверху сітки карток
   після hero та знизу перед футером).
   Чому margin на дитині, а не padding на main? Бо легасі-правило
   `.container { padding: 0 16px !important; }` (раніше у файлі) б'є
   будь-який padding-top/bottom на main.container.archive-pad через
   shorthand+important. Margin цього не торкається.
   ════════════════════════════════════════════════ */

.hero-author + main.archive-pad > .news-layout {
    margin-top: 80px;
    margin-bottom: 96px;
}

/* Пагінація — трохи більше місця знизу перед футером */
.archive-pad .news-pagination {
    margin-top: 64px;
    margin-bottom: 16px;
}

/* ==== 01-tokens.css ==== */
/* ═══════════════════════════════════════════════════════
   01-tokens.css — Design Tokens
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   ONLY variables. No rules. No selectors.
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Palette ── */
    --navy:           #0b1a30;
    --navy-deep:      #071525;
    --navy-light:     #0f2540;
    --teal:           #00c9a7;
    --teal-dark:      #00a085;
    --cyan:           #00b4d8;
    --dark-teal:      #0a1628;
    --dark-teal-2:    #0e3630;
    --yellow:         #fdd835;

    /* ── Text ── */
    --text:           #e8f0f8;
    --muted:          #7f93a8;
    --text-dim:       rgba(232, 240, 248, 0.70);
    --text-faint:     rgba(232, 240, 248, 0.50);

    /* ── Surfaces & borders ── */
    --card-border:    rgba(255, 255, 255, 0.08);
    --card-hover:     rgba(0, 201, 167, 0.12);
    --card-bg:        rgba(255, 255, 255, 0.04);
    --teal-border:    rgba(0, 201, 167, 0.25);
    --teal-border-h:  rgba(0, 201, 167, 0.50);

    /* ── Gradients (shared) ── */
    --grad-dark-teal: linear-gradient(135deg, #0a1628 0%, #0e3630 50%, #0b2830 100%);
    --grad-navy:      linear-gradient(135deg, #0a1628 0%, #0f2240 100%);

    /* ── Spacing scale ── */
    --space-xs:   8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  40px;
    --space-xl:  60px;
    --space-2xl: 72px;
    --space-3xl: 96px;
    --space-text-gap: 20px;
    --space-tag-gap: 12px;
    --space-icon-gap: 14px;

    /* ── Radius scale ── */
    --radius-sm:  2px;
    --radius-md:  4px;
    --radius-lg:  8px;
    --radius-xl: 16px;
    --radius-pill: 9999px;

    /* ── Shadows ── */
    --shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.20);
    --shadow-md:  0 4px 24px rgba(0, 0, 0, 0.30);
    --shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.40);

    /* ── Transitions ── */
    --transition-fast:   0.15s ease;
    --transition-base:   0.30s ease;
    --transition-slow:   0.50s ease;
    --font-family-base: 'Montserrat', sans-serif;
    --font-size-body: 15px;
    --font-size-overline: 11px;
    --line-height-body: 1.6;
    --line-height-copy: 1.8;
    --line-height-heading: 1.05;
    --tracking-overline: 1.5px;

    /* ── Layout ── */
    --container-width: 1140px;
    --container-gutter: 20px;
    --section-padding-v: var(--space-2xl);
    --section-padding-h: var(--space-md);
    --section-header-gap: var(--space-xl);
    --accent-line-width: 48px;
    --accent-line-height: 3px;
    --accent-line-gap-before: 20px;
    --accent-line-gap-after-left: 24px;
    --accent-line-gap-after-centered: 34px;
    --icon-size-sm: 20px;
    --icon-size-md: 44px;
    --icon-size-circle: 56px;
    --icon-size-circle-glyph: 26px;
    --icon-size-lg: 64px;
    --icon-size-lg-glyph: 52px;
    --icon-circle-bg: rgba(0, 201, 167, 0.06);
    --header-z: 100;
    --header-pad-y: 14px;
    --header-pad-x: var(--space-md);
    --header-nav-gap: 34px;
    --header-logo-size: 18px;
    --header-link-size: 12px;
    --header-link-tracking: 1.1px;
    --header-cta-pad-y: 11px;
    --header-cta-pad-x: 18px;
    --header-shell-bg: rgba(7, 21, 37, 0.74);
    --header-shell-border: rgba(255, 255, 255, 0.08);
    --header-shell-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
    --header-shell-radius: 22px;
    --mobile-nav-offset: 60px;
    --hero-pad-x: var(--space-md);
    --hero-home-min-height: 70vh;
    --hero-inner-min-height: clamp(300px, 32vh, 380px);
    --hero-pad-top: 136px;
    --hero-home-pad-bottom: 80px;
    --hero-inner-pad-bottom: 38px;
    --hero-content-max: 700px;
    --hero-content-wide-max: 780px;
    --hero-description-max: 550px;
    --hero-description-wide-max: 620px;
    --hero-tag-size: 12px;
    --hero-tag-tracking: 3px;
    --hero-title-gap: 16px;
    --hero-title-gap-home: 24px;
    --hero-stats-gap: var(--space-xl);
    --hero-stats-top-gap: var(--space-xl);
    --hero-stats-pad-top: var(--space-lg);
    --hero-cta-gap: 20px;
    --hero-cta-top-gap: 38px;
    --hero-stat-value-size: 42px;
    --hero-stat-label-size: 13px;
    --hero-description-size: 18px;
    --hero-description-size-lg: 19px;
    --hero-description-size-sm: 16px;
    --hero-description-line-height-lg: 1.78;
    --breadcrumbs-size: 12px;
    --breadcrumbs-gap: 6px;
    --split-layout-gap: var(--space-xl);
    --grid-gap-sm: var(--space-md);
    --grid-gap-md: 32px;
    --button-gap: var(--space-xs);
    --button-pad-y: 13px;
    --button-pad-x: 30px;
    --button-pad-x-lg: 32px;
    --button-font-size: 14px;
    --button-font-size-sm: 13px;
    --button-font-size-md: 15px;
    --button-letter-spacing: 0.3px;
    --button-letter-spacing-wide: 1px;
    --button-border-width: 2px;
    --button-radius: 999px;
    --button-radius-lg: 16px;
    --button-hover-lift: -2px;
    --button-hover-lift-sm: -1px;
    --button-shadow-hover: 0 8px 24px rgba(0, 201, 167, 0.30);
    --button-shadow-hover-strong: 0 10px 30px rgba(0, 201, 167, 0.25);
    --button-ghost-border: rgba(255, 255, 255, 0.20);
    --button-dark-border: rgba(255, 255, 255, 0.18);
    --button-ghost-bg-hover: rgba(0, 201, 167, 0.06);
    --button-primary-hover: #00e5bf;
    --button-newsletter-pad-y: 16px;
    --button-newsletter-pad-x: 32px;
    --why-card-gap: var(--space-lg);
    --why-card-pad: 30px;
    --why-card-number-size: 48px;
    --why-card-title-size: 16px;
    --why-card-copy-size: 14px;
    --why-card-border-hover: rgba(0, 201, 167, 0.40);
    --why-card-bg: rgba(255, 255, 255, 0.08);
    --why-card-bg-hover: rgba(0, 201, 167, 0.08);
    --why-card-text: rgba(255, 255, 255, 0.92);
    --why-card-number: rgba(255, 255, 255, 0.20);
    --service-card-gap: var(--space-sm);
    --service-card-pad-y: 26px;
    --service-card-pad-x: 24px;
    --service-card-radius: 18px;
    --service-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
    --service-card-border-hover: rgba(0, 201, 167, 0.30);
    --service-card-copy-size: 13px;
    --service-card-copy-line-height: 1.7;
    --service-card-lift: -4px;
    --service-icon-gap: var(--space-text-gap);
    --service-icon-size: var(--icon-size-md);
    --service-grid-columns: 4;
    --footer-pad-y: var(--space-lg);
    --footer-pad-x-fluid: 6%;
    --footer-copy-size: 13px;
    --footer-grid-gap: var(--space-lg);
    --footer-grid-gap-md: 32px;
    --footer-brand-max: 260px;
    --footer-logo-size: 16px;
    --footer-heading-size: 11px;
    --footer-heading-tracking: 1.5px;
    --footer-heading-gap: var(--space-text-gap);
    --footer-link-size: 13px;
    --footer-bottom-pad-top: var(--space-md);
    --footer-bottom-link-size: 12px;
    --footer-bottom-gap: 12px;
    --map-stats-gap: 80px;
    --map-stats-gap-md: 50px;
    --map-stats-gap-sm: 30px;
    --map-stat-value-size: 56px;
    --map-stat-value-size-sm: 36px;
    --map-stat-label-size: 14px;
    --segments-grid-columns: 4;
    --segment-card-pad-y: 30px;
    --segment-card-pad-x: 20px;
    --segment-card-bg: rgba(255, 255, 255, 0.02);
    --segment-card-bg-hover: rgba(0, 180, 216, 0.08);
    --segment-card-lift: -2px;
    --segment-name-size: 11px;
    --segment-name-tracking: 1px;
    --cta-max-width: 650px;
    --cta-max-width-narrow: 600px;
    --cta-text-max-width: 560px;
    --cta-content-gap: var(--space-sm);
    --cta-copy-gap: 30px;
    --cta-copy-gap-centered: 28px;
    --cta-title-gap-centered: 4px;
    --cta-border: var(--teal-border);
    --cta-pad-mobile-y: 60px;
    --cta-pad-mobile-x: 16px;
    --about-grid-gap: 80px;
    --about-grid-gap-mobile: var(--space-lg);
    --about-visual-max: 400px;
    --org-node-bg: rgba(255, 255, 255, 0.05);
    --org-node-bg-active: rgba(0, 201, 167, 0.10);
    --org-node-pad-y: 20px;
    --org-node-pad-x: 30px;
    --org-node-gap: var(--space-text-gap);
    --org-node-title-size: 14px;
    --org-node-title-size-sm: 11px;
    --org-branches-gap: 12px;
    --methodology-max: 900px;
    --methodology-copy-size: 16px;
    --methodology-copy-gap: var(--space-md);
    --methodology-copy-opacity: 0.9;
    --feature-grid-gap: 30px;
    --feature-card-pad: 30px;
    --feature-card-bg: rgba(255, 255, 255, 0.10);
    --feature-card-border: rgba(255, 255, 255, 0.15);
    --feature-card-border-hover: rgba(0, 201, 167, 0.40);
    --feature-card-bg-hover: rgba(0, 201, 167, 0.08);
    --feature-card-lift: -4px;
    --feature-card-title-size: 16px;
    --feature-card-copy-size: 14px;
    --feature-card-copy-opacity: 0.8;
    --feature-icon-size: 48px;
    --feature-icon-gap: var(--space-text-gap);
    --values-grid-gap: var(--space-md);
    --value-card-pad-y: 40px;
    --value-card-pad-x: 30px;
    --value-number-size: 48px;
    --value-number-gap: var(--space-sm);
    --value-title-size: 14px;
    --value-title-gap: 10px;
    --value-copy-size: 13px;
    --category-intro-max: 700px;
    --category-intro-gap: var(--space-xl);
    --category-copy-size: 16px;
    --category-copy-opacity: 0.8;
    --category-block-gap: 80px;
    --category-header-gap: var(--space-text-gap);
    --category-header-gap-mobile: var(--space-sm);
    --category-header-bottom-gap: var(--space-lg);
    --category-header-pad-bottom: var(--space-text-gap);
    --category-icon-size: 56px;
    --category-icon-radius: 12px;
    --category-icon-glyph: 28px;
    --category-title-size: 24px;
    --category-title-gap: 6px;
    --category-eyebrow-size: 12px;
    --category-eyebrow-tracking: 1px;
    --service-provider-size: 10px;
    --service-provider-tracking: 0.5px;
    --service-provider-opacity: 0.7;
    --platform-grid-gap: var(--about-grid-gap);
    --platform-copy-size: 16px;
    --platform-copy-color: rgba(255, 255, 255, 0.85);
    --platform-tag-color: rgba(255, 255, 255, 0.7);
    --platform-line-color: rgba(255, 255, 255, 0.4);
    --platform-stats-gap: 30px;
    --platform-stat-bg: rgba(255, 255, 255, 0.10);
    --platform-stat-pad: 30px;
    --platform-stat-radius: var(--radius-lg);
    --platform-stat-value-size: 36px;
    --platform-stat-value-gap: var(--space-xs);
    --platform-stat-label-size: 13px;
    --platform-stat-label-color: rgba(255, 255, 255, 0.7);
    --industries-grid-gap: 20px;
    --industry-card-pad-y: 28px;
    --industry-card-pad-x: 24px;
    --industry-card-radius: var(--radius-lg);
    --industry-icon-size: 48px;
    --industry-icon-gap: var(--space-sm);
    --industry-title-size: 14px;
    --certs-grid-columns: 5;
    --certs-grid-gap: 30px;
    --cert-card-bg: rgba(255, 255, 255, 0.03);
    --cert-card-pad-y: 30px;
    --cert-card-pad-x: 20px;
    --cert-value-size: 18px;
    --cert-value-gap: 10px;
    --cert-label-size: 12px;
    --workflow-grid-columns: 6;
    --workflow-grid-gap: 20px;
    --workflow-grid-gap-md: 30px;
    --workflow-arrow-size: 20px;
    --workflow-arrow-offset: -15px;
    --workflow-arrow-top: 30px;
    --workflow-arrow-opacity: 0.5;
    --workflow-number-size: 56px;
    --workflow-number-gap: var(--space-sm);
    --workflow-number-font-size: 18px;
    --workflow-number-bg: rgba(0, 201, 167, 0.10);
    --workflow-step-title-size: 14px;
    --workflow-step-title-gap: var(--space-xs);
    --workflow-step-copy-size: 12px;
    --news-section-pad-top: 48px;
    --news-section-pad-bottom: 80px;
    --news-section-pad-x-fluid: 6%;
    --featured-grid-gap: 30px;
    --featured-card-bg: rgba(255, 255, 255, 0.02);
    --featured-card-lift: -4px;
    --featured-image-height: 300px;
    --featured-image-placeholder-size: 48px;
    --featured-content-pad: 35px;
    --news-category-size: 10px;
    --news-category-pad-y: 5px;
    --news-category-pad-x: 12px;
    --news-category-gap: var(--space-sm);
    --news-category-bg: rgba(0, 180, 216, 0.15);
    --news-title-size-lg: 22px;
    --news-title-size-md: 16px;
    --news-title-size-sm: 15px;
    --news-meta-gap: var(--space-sm);
    --news-date-size: 12px;
    --news-date-icon-size: 14px;
    --news-excerpt-size: 14px;
    --news-excerpt-size-sm: 13px;
    --news-excerpt-gap: var(--space-text-gap);
    --read-more-gap: var(--space-xs);
    --read-more-gap-hover: 12px;
    --read-more-size: 13px;
    --read-more-icon-size: 16px;
    --featured-small-pad: 25px;
    --news-layout-sidebar: 280px;
    --news-layout-gap: 50px;
    --news-grid-gap: 30px;
    --news-card-image-height: 180px;
    --news-card-image-placeholder-size: 32px;
    --news-card-content-pad: 25px;
    --sidebar-gap: 30px;
    --sidebar-widget-pad: 30px;
    --sidebar-title-size: 14px;
    --sidebar-title-gap: var(--space-text-gap);
    --sidebar-title-icon-size: 18px;
    --tags-gap: 10px;
    --tag-pill-size: 11px;
    --tag-pill-pad-y: 6px;
    --tag-pill-pad-x: 14px;
    --tag-pill-bg: rgba(255, 255, 255, 0.03);
    --tag-pill-bg-hover: rgba(0, 201, 167, 0.10);
    --category-list-gap: var(--space-xs);
    --category-item-pad-y: 10px;
    --category-item-size: 13px;
    --category-count-size: 11px;
    --category-count-pad-y: 2px;
    --category-count-pad-x: var(--space-xs);
    --recent-list-gap: var(--space-sm);
    --recent-item-gap: 14px;
    --recent-number-size: 20px;
    --recent-title-size: 13px;
    --recent-date-size: 11px;
    --pagination-gap: var(--space-xs);
    --pagination-top-gap: var(--space-xl);
    --pagination-size: 42px;
    --pagination-font-size: 14px;
    --pagination-arrow-pad-x: var(--space-sm);
    --newsletter-max: 600px;
    --newsletter-copy-gap-top: var(--space-sm);
    --newsletter-copy-gap-bottom: 30px;
    --newsletter-copy-opacity: 0.9;
    --newsletter-form-gap: 12px;
    --newsletter-input-pad-y: 16px;
    --newsletter-input-pad-x: var(--space-md);
    --newsletter-input-font-size: 14px;
    --newsletter-input-bg: rgba(255, 255, 255, 0.15);
    --newsletter-input-bg-focus: rgba(255, 255, 255, 0.20);
    --newsletter-input-border: rgba(255, 255, 255, 0.20);
    --newsletter-input-border-focus: rgba(255, 255, 255, 0.40);
    --newsletter-placeholder: rgba(255, 255, 255, 0.60);
    --contact-section-pad-y: var(--space-2xl);
    --contact-section-pad-x-fluid: 6%;
    --contact-grid-gap: 80px;
    --contact-grid-gap-md: 50px;
    --contact-form-bg: rgba(255, 255, 255, 0.02);
    --contact-form-pad: 50px;
    --contact-form-pad-sm: 30px;
    --contact-form-title-gap: 30px;
    --form-group-gap: var(--space-md);
    --form-label-size: 12px;
    --form-label-gap: 10px;
    --form-label-tracking: 1px;
    --form-input-bg: rgba(255, 255, 255, 0.03);
    --form-input-bg-focus: rgba(0, 201, 167, 0.05);
    --form-input-pad-y: 16px;
    --form-input-pad-x: 20px;
    --form-input-font-size: 14px;
    --form-placeholder-opacity: 0.6;
    --form-textarea-min: 150px;
    --contact-info-gap: 40px;
    --info-card-pad: 40px;
    --info-card-pad-sm: 30px;
    --info-card-title-size: 16px;
    --info-card-title-gap: var(--space-text-gap);
    --info-card-title-icon-size: 24px;
    --info-item-gap: 12px;
    --info-item-bottom-gap: var(--space-sm);
    --info-item-icon-size: 18px;
    --info-item-copy-size: 14px;
    --careers-grid-gap: 80px;
    --careers-grid-gap-md: var(--space-lg);
    --careers-copy-gap-top: var(--space-md);
    --careers-copy-size: 16px;
    --careers-copy-opacity: 0.9;
    --careers-tag-color: rgba(255, 255, 255, 0.6);
    --careers-line-color: rgba(255, 255, 255, 0.5);
    --careers-cta-bg: rgba(255, 255, 255, 0.10);
    --careers-cta-border: rgba(255, 255, 255, 0.15);
    --careers-cta-pad: 50px;
    --careers-cta-label-size: 12px;
    --careers-cta-label-color: rgba(255, 255, 255, 0.7);
    --careers-cta-label-tracking: 2px;
    --careers-cta-email-size: 24px;
    --hours-grid-max: 900px;
    --hours-grid-gap: 30px;
    --hours-card-pad-y: 40px;
    --hours-card-pad-x: 30px;
    --hours-icon-size: 48px;
    --hours-icon-gap: var(--space-text-gap);
    --hours-title-size: 14px;
    --hours-title-gap: var(--space-xs);
    --hours-copy-size: 13px;
    --program-intro-gap: 80px;
    --program-intro-gap-md: var(--space-lg);
    --program-badge-bg: rgba(0, 201, 167, 0.08);
    --program-badge-pad-y: 60px;
    --program-badge-pad-x: 50px;
    --program-badge-title-size: 14px;
    --program-badge-title-gap: var(--space-tag-gap);
    --program-badge-title-tracking: 2px;
    --program-badge-name-size: 36px;
    --program-badge-name-gap: var(--space-tag-gap);
    --program-badge-sub-size: 14px;
    --benefits-grid-gap: 30px;
    --benefit-card-bg: rgba(255, 255, 255, 0.06);
    --benefit-card-bg-hover: rgba(0, 201, 167, 0.08);
    --benefit-card-pad-y: 32px;
    --benefit-card-pad-x: 28px;
    --benefit-card-lift: -4px;
    --benefit-icon-size: var(--icon-size-md);
    --benefit-icon-gap: var(--space-text-gap);
    --benefit-title-size: 16px;
    --benefit-copy-size: 14px;
    --benefit-copy-color: rgba(255, 255, 255, 0.80);
    --standards-grid-columns: 4;
    --standards-grid-gap: 24px;
    --standard-card-pad-y: 36px;
    --standard-card-pad-x: 24px;
    --standard-value-size: 13px;
    --standard-value-gap: var(--space-tag-gap);
    --standard-value-tracking: 1px;
    --standard-label-size: 12px;
    --steps-grid-columns: 4;
    --steps-grid-gap: 24px;
    --step-card-pad-y: 40px;
    --step-card-pad-x: 30px;
    --step-number-size: 48px;
    --step-number-gap: var(--space-text-gap);
    --step-number-color: rgba(0, 201, 167, 0.15);
    --step-title-size: 15px;
    --step-title-gap: var(--space-tag-gap);
    --step-copy-size: 13px;
    --client-grid-gap: 80px;
    --client-example-bg: rgba(255, 255, 255, 0.03);
    --client-example-pad: 40px;
    --client-example-title-size: 14px;
    --client-example-title-gap: var(--space-md);
    --client-example-title-tracking: 1px;
    --example-step-gap: var(--space-sm);
    --example-step-bottom-gap: var(--space-text-gap);
    --example-num-size: 28px;
    --example-num-font-size: 12px;
    --example-text-size: 14px;
    --example-text-opacity: 0.85;
    --example-note-gap-top: var(--space-md);
    --example-note-pad-top: var(--space-text-gap);
    --example-note-size: 13px;
}

/* ==== 02-reset.css ==== */
/* ═══════════════════════════════════════════════════════
   02-reset.css — Global Reset
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   Box-sizing reset + margin/padding zeroing only.
   No typography. No component rules.
   ═══════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* ==== 03-base.css ==== */
/* ═══════════════════════════════════════════════════════
   03-base.css — Body, Typography & Layout Primitives
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   Body/html, heading scale, global text defaults,
   .container, section spacing, .line, .ig-icon system,
   .tag, .highlight.
   No component or page-specific rules.
   ═══════════════════════════════════════════════════════ */

/* ── Body ── */
body {
    font-family: var(--font-family-base);
    background: var(--navy);
    color: var(--text);
    overflow-x: hidden;
    line-height: var(--line-height-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ── Layout primitives ── */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-gutter);
    width: 100%;
}

section {
    position: relative;
    padding: var(--section-padding-v) var(--section-padding-h);
    z-index: 1;
}

@media (max-width: 1024px) {
    section {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }
}

/* ── Headings ── */
h1 {
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 800;
    line-height: var(--line-height-heading);
    letter-spacing: -1px;
}

h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    margin-bottom: var(--space-text-gap);
}

@media (max-width: 1024px) {
    h2 {
        font-size: clamp(26px, 3.8vw, 34px);
    }
}

h3 {
    font-size: 17px;
    font-weight: 600;
}

/* ── Body copy ── */
p {
    color: var(--muted);
    line-height: var(--line-height-copy);
    font-size: var(--font-size-body);
}

/* ── Section header ── */
.section-header {
    margin-bottom: var(--section-header-gap);
}

.section-header.text-center {
    text-align: center;
}

.section-header:not(.text-center),
.section-header--editorial {
    max-width: 620px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.section-header > .tag,
.section-header > .hero-tag {
    margin-bottom: 14px;
}

.section-header > h1,
.section-header > h2,
.section-header > h3 {
    margin-bottom: 0;
}

.section-header > h1 + p,
.section-header > h2 + p,
.section-header > h3 + p {
    margin-top: 18px;
}

/* ── Decorative line ── */
.line {
    width: var(--accent-line-width);
    height: var(--accent-line-height);
    background: var(--teal);
    margin-top: var(--accent-line-gap-before);
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.section-header > .line,
.line-center-20,
.line-center-24 {
    margin-top: var(--accent-line-gap-before) !important;
    margin-bottom: var(--accent-line-gap-after-left) !important;
}

.section-header.text-center > .line,
.line-center-20,
.line-center-24 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--accent-line-gap-after-centered) !important;
}

.section-header > .line + p,
.section-header > .line + .intro-narrow-12,
.section-header > .line + .intro-narrow-20,
.section-header > .line + .intro-narrow-650 {
    margin-top: 0 !important;
}

.section-header > p {
    margin-bottom: 0;
}

.section-header > p + p {
    margin-top: 12px;
}

.section-header.text-center > h1,
.section-header.text-center > h2,
.section-header.text-center > h3,
.section-header.text-center > p,
.section-header.text-center > .intro-narrow-12,
.section-header.text-center > .intro-narrow-20,
.section-header.text-center > .intro-narrow-650 {
    margin-left: auto;
    margin-right: auto;
}

.section-header.text-center > p,
.section-header.text-center > .intro-narrow-12,
.section-header.text-center > .intro-narrow-20,
.section-header.text-center > .intro-narrow-650 {
    max-width: 720px;
}

.section-header:not(.text-center) > h1,
.section-header:not(.text-center) > h2,
.section-header:not(.text-center) > h3,
.section-header:not(.text-center) > p,
.section-header--editorial > h1,
.section-header--editorial > h2,
.section-header--editorial > h3,
.section-header--editorial > p {
    margin-left: 0;
    margin-right: 0;
}

.section-header:not(.text-center) > p,
.section-header--editorial > p {
    max-width: 640px;
}

.intro-narrow-12,
.intro-narrow-20,
.intro-narrow-650 {
    color: var(--text-dim);
}

.intro-narrow-12 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.intro-narrow-20 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.intro-narrow-650 {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.section-header--editorial {
    margin-bottom: 0;
}

.section-header--editorial > .tag,
.section-header--editorial > .hero-tag {
    margin-bottom: 12px;
}

.section-copy-stack {
    display: grid;
    gap: 14px;
    max-width: 640px;
}

.section-copy-stack > p {
    margin: 0;
}

/* ── Utility text styles ── */
.highlight {
    color: var(--teal);
}

.tag,
div.tag {
    font-family: inherit;
    color: var(--teal);
    font-size: var(--font-size-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: var(--space-tag-gap);
    display: block;
}

/* Reset: WP adds .tag class to <body> on tag archives — must not inherit section-label styles */
body.tag {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    letter-spacing: normal;
    text-transform: none;
    opacity: 1;
    margin-bottom: 0;
    display: block;
}

/* ════════════════════════════════════════════════
   STANDARD ICON CONTAINER — .ig-icon
   Base, circle, small, large variants.
   Replaces segment-icon, service-icon, method-card-icon, etc.
════════════════════════════════════════════════ */
.ig-icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ig-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Circle variant — segments / industries grid */
.ig-icon--circle {
    width: var(--icon-size-circle);
    height: var(--icon-size-circle);
    border-radius: 50%;
    border: 1px solid var(--teal-border);
    background: var(--icon-circle-bg);
    margin: 0 auto var(--space-icon-gap);
    transition: border-color var(--transition-base),
                background  var(--transition-base);
}

.ig-icon--circle svg {
    width: var(--icon-size-circle-glyph);
    height: var(--icon-size-circle-glyph);
}

/* Compatibility hook while segment cards still rely on foundation hover states. */
.segment:hover .ig-icon--circle,
.segment-card:hover .ig-icon--circle {
    border-color: var(--teal-border-h);
    background: var(--card-hover);
}

/* Small variant — inline text use */
.ig-icon--sm {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

/* Large variant — hero / section accents */
.ig-icon--lg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.ig-icon--lg svg {
    width: var(--icon-size-lg-glyph);
    height: var(--icon-size-lg-glyph);
}

@media (max-width: 768px) {
    .service-icon,
    .feature-icon,
    .method-card-icon,
    .flagship-feature-icon {
        width: 56px !important;
        height: 56px !important;
    }

    .service-icon svg,
    .feature-icon svg,
    .method-card-icon svg,
    .flagship-feature-icon svg {
        width: 32px !important;
        height: 32px !important;
    }

    .segment-icon,
    .ig-icon--circle {
        width: 64px !important;
        height: 64px !important;
    }

    .segment-icon svg,
    .ig-icon--circle svg {
        width: 32px !important;
        height: 32px !important;
    }
}
.ig-form-success {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: min(420px, calc(100vw - 32px));
    padding: 20px 20px 18px;
    border: 1px solid rgba(20, 198, 181, 0.28);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(19, 35, 58, 0.96) 0%, rgba(11, 26, 48, 0.98) 100%);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.ig-form-success.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
}

.ig-form-success__inner {
    min-width: 0;
}

.ig-form-success__eyebrow {
    margin-bottom: 8px;
    color: var(--teal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ig-form-success__title {
    margin-bottom: 8px;
    color: var(--white);
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
}

.ig-form-success__text {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 15px;
    line-height: 1.5;
}

.ig-form-success__close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(20, 198, 181, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.ig-form-success__close:hover,
.ig-form-success__close:focus-visible {
    border-color: rgba(20, 198, 181, 0.44);
    background: rgba(20, 198, 181, 0.08);
    color: var(--white);
}

.ig-form-success__close svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.ig-form-success.is-error {
    border-color: rgba(255, 122, 90, 0.32);
    background:
        linear-gradient(180deg, rgba(43, 24, 26, 0.97) 0%, rgba(23, 17, 23, 0.99) 100%);
}

.ig-form-success.is-error .ig-form-success__eyebrow {
    color: #ff8e72;
}

@media (max-width: 768px) {
    .ig-form-success {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        padding: 18px 18px 16px;
        gap: 12px;
        border-radius: 16px;
    }

    .ig-form-success__title {
        font-size: 20px;
    }

    .ig-form-success__text {
        font-size: 14px;
    }
}

/* ==== 04-layout.css ==== */
/* ═══════════════════════════════════════════════════════
   04-layout.css — Layout Primitives
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   Generic layout helpers: container, section overrides,
   shared grid patterns reused across multiple pages.
   No component or page-specific rules.
   ═══════════════════════════════════════════════════════ */

/* ── Breadcrumbs ── */
.breadcrumbs {
    font-size: var(--breadcrumbs-size);
    color: var(--muted);
    margin-bottom: var(--space-tag-gap);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--breadcrumbs-gap);
}

.breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
    transition: color var(--transition-base);
}

.breadcrumbs a:hover {
    color: var(--teal);
}

.breadcrumbs .sep {
    opacity: 0.4;
}

/* ── Generic 2-column text + visual layout ── */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--split-layout-gap);
    align-items: center;
}

/* ── Generic 3-column grid ── */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap-md);
}

/* ── Generic 2-column grid ── */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap-sm);
}

/* ── Generic 4-column grid ── */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap-sm);
}

/* ── Responsive: generic grids collapse ── */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .split-layout {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==== 03-header.css ==== */
/* CSS Header & Navigation */

/* ===== HEADER ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--header-z);
    padding: var(--header-pad-y) var(--header-pad-x);
    transition: background var(--transition-base),
                box-shadow var(--transition-base),
                backdrop-filter var(--transition-base);
}

.header::before {
    content: "";
    position: absolute;
    inset: 8px var(--container-gutter) 0;
    max-width: calc(var(--container-width) + (var(--container-gutter) * 2));
    margin: 0 auto;
    border: 1px solid var(--header-shell-border);
    border-radius: var(--header-shell-radius);
    background: var(--header-shell-bg);
    box-shadow: var(--header-shell-shadow);
    backdrop-filter: blur(18px);
    pointer-events: none;
}

.header-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    min-height: 74px;
    position: relative;
    z-index: 1;
}

.header.scrolled {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.header-logo {
    font-size: var(--header-logo-size);
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.header-logo span {
    color: var(--teal);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--header-nav-gap);
    list-style: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 380px);
}

.header-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: var(--header-link-size);
    font-weight: 600;
    letter-spacing: var(--header-link-tracking);
    transition: color var(--transition-base), opacity var(--transition-base);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 42px;
    padding: 8px 1px 14px;
}

.header-nav a:hover,
.header-nav a.active,
.header-nav li.current-menu-item > a,
.header-nav li.current-menu-parent > a,
.header-nav li.current-menu-ancestor > a {
    color: var(--teal);
}

.header-nav li.current-menu-item > a,
.header-nav li.current-menu-parent > a,
.header-nav li.current-menu-ancestor > a {
    font-weight: 600;
    letter-spacing: var(--header-link-tracking);
}

.header-nav .nav-text {
    position: relative;
    display: inline-block;
}

.header-nav .nav-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    bottom: -8px;
    height: 3px;
    border-radius: 0;
    background: var(--teal);
    /* Паралелограм — обидва краї скошені під 45° (висота смужки 3px → зсув 3px) */
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.header-nav a:hover .nav-text::after,
.header-nav a.active .nav-text::after,
.header-nav li.current-menu-item > a .nav-text::after,
.header-nav li.current-menu-parent > a .nav-text::after,
.header-nav li.current-menu-ancestor > a .nav-text::after {
    opacity: 1;
    transform: translateY(0);
}

/* Keep the modern underline above legacy WP active-menu rules. */
.header-nav li.current-menu-item > a,
.header-nav li.current-menu-parent > a,
.header-nav li.current-menu-ancestor > a,
.header-nav li.current_page_item > a,
.header-nav li.current_page_ancestor > a,
.header-nav ul li.current-menu-item > a,
.header-nav ul li.current-menu-parent > a,
.header-nav ul li.current-menu-ancestor > a,
.header-nav a[aria-current="page"],
.header-nav > a.active {
    font-weight: 600 !important;
}

.header-nav li.current-menu-item > a .nav-text::after,
.header-nav li.current-menu-parent > a .nav-text::after,
.header-nav li.current-menu-ancestor > a .nav-text::after,
.header-nav li.current_page_item > a .nav-text::after,
.header-nav li.current_page_ancestor > a .nav-text::after,
.header-nav ul li.current-menu-item > a .nav-text::after,
.header-nav ul li.current-menu-parent > a .nav-text::after,
.header-nav ul li.current-menu-ancestor > a .nav-text::after,
.header-nav a[aria-current="page"] .nav-text::after,
.header-nav > a.active .nav-text::after {
    left: 0;
    right: 0;
    width: auto;
    bottom: -8px;
    height: 3px;
    border-radius: 0;
    background: var(--teal);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%) !important;
    opacity: 1;
    transform: translateY(0);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.lang-switcher,
.mobile-lang-header,
.mobile-lang {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-switcher .lang-sw,
.mobile-lang-header .lang-sw,
.mobile-lang .lang-sw {
    min-width: 34px;
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(232, 240, 248, 0.76);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.lang-switcher .lang-sw.active,
.mobile-lang-header .lang-sw.active,
.mobile-lang .lang-sw.active,
.lang-switcher .lang-sw:hover,
.mobile-lang-header .lang-sw:hover,
.mobile-lang .lang-sw:hover {
    color: var(--text);
    border-color: rgba(0, 201, 167, 0.4);
    background: rgba(0, 201, 167, 0.1);
}

.header-cta {
    background: transparent;
    border: 1px solid rgba(0, 201, 167, 0.45);
    color: var(--text);
    padding: var(--header-cta-pad-y) var(--header-cta-pad-x);
    font-size: var(--hero-tag-size);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.18) 0%, rgba(0, 180, 216, 0.1) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.header-cta:hover {
    background: var(--teal);
    color: var(--navy);
}

/* Mobile menu (hidden on desktop) */
.header-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-size: 24px;
    padding: 0;
}

.mobile-lang-header,
.mobile-menu {
    display: none;
}

@media (max-width: 1024px) {
    .header-nav {
        position: static;
        left: auto;
        transform: none;
        width: auto;
        max-width: none;
    }

    body.mobile-menu-open .burger,
    body.mobile-menu-open .mobile-lang-header {
        opacity: 0;
        pointer-events: none;
    }

    .header-inner {
        gap: 12px;
        min-height: 64px;
    }

    .header-logo img {
        height: 34px;
    }

    .burger {
        display: block;
        position: relative;
        z-index: calc(var(--header-z) + 2);
        margin-left: 8px;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
    }

    .header-right {
        display: none;
    }

    .mobile-lang-header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        margin-right: 0;
    }

    .mobile-lang-header .lang-sw {
        min-width: 30px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        border: 1px solid rgba(0, 201, 167, 0.28);
        border-radius: 4px;
        color: rgba(232, 240, 248, 0.68);
        text-decoration: none;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.4px;
        line-height: 1;
        transition: border-color var(--transition-fast),
                    color var(--transition-fast),
                    background var(--transition-fast);
    }

    .mobile-lang-header .lang-sw.active {
        color: var(--teal);
        border-color: var(--teal);
        background: rgba(0, 201, 167, 0.08);
    }

    .header-nav {
        display: none !important;
        position: absolute;
        top: var(--mobile-nav-offset);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: #061220;
        padding: var(--container-gutter);
        border-top: 1px solid var(--card-border);
    }
    
    .header-nav.active,
    .header-nav.open {
        display: flex;
    }
    
    .header-nav a {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--card-border);
    }
    
    .header-menu-toggle {
        display: block;
    }

    .mobile-menu {
        display: none !important;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        flex-direction: column;
        background:
            radial-gradient(circle at top right, rgba(0, 201, 167, 0.14), transparent 34%),
            linear-gradient(180deg, #081424 0%, #061220 100%);
        z-index: calc(var(--header-z) + 1);
        overflow-y: auto;
        padding: 18px var(--container-gutter) 32px;
    }

    .mobile-menu.open {
        display: flex !important;
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--card-border);
        position: sticky;
        top: 0;
        z-index: 1;
        background: #061220;
    }

    .mobile-menu-logo {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: var(--text);
        flex-shrink: 0;
    }

    .mobile-menu-logo img {
        display: block;
        width: auto;
        height: 32px;
    }

    .mobile-menu-close {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border: 1px solid rgba(0, 201, 167, 0.35);
        border-radius: 999px;
        background: transparent;
        color: var(--teal);
        cursor: pointer;
        flex-shrink: 0;
    }

    .mobile-menu-close span {
        position: absolute;
        width: 20px;
        height: 2px;
        top: 50%;
        left: 50%;
        margin-left: -10px;
        margin-top: -1px;
        background: currentColor;
    }

    .mobile-menu-close span:first-child {
        transform: rotate(45deg);
    }

    .mobile-menu-close span:last-child {
        transform: rotate(-45deg);
    }

    .mobile-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav li a,
    .mobile-nav > a {
        display: block;
        padding: 16px 0;
        color: var(--text);
        text-decoration: none;
        border-bottom: 1px solid var(--card-border);
        font-size: 17px;
        letter-spacing: 0.01em;
    }

    .mobile-contact-btn {
        margin-top: 24px;
        align-self: stretch;
    }

    .mobile-lang {
        display: flex;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--card-border);
    }
    
    .header-cta {
        margin-top: 12px;
        display: block;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 10px 12px;
    }

    .header::before {
        inset: 6px 8px 0;
        max-width: none;
    }

    .header-inner {
        min-height: 60px;
        gap: 8px;
        padding: 0 4px;
    }

    .header-logo {
        min-width: 0;
        flex: 1 1 auto;
    }

    .header-logo img {
        height: 30px;
        max-width: 100%;
    }

    .mobile-lang-header {
        gap: 4px;
        margin-left: 0;
    }

    .mobile-lang-header .lang-sw {
        min-width: 28px;
        height: 28px;
        padding: 0 7px;
        font-size: 10px;
    }

    .burger {
        width: 42px;
        height: 42px;
        margin-left: 4px;
        flex-shrink: 0;
    }
}

/* ==== 05-buttons.css ==== */
/* ═══════════════════════════════════════════════════════
   05-buttons.css — Button System
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   SINGLE source of truth for all button variants.
   Do NOT define .btn-* or .ig-form-submit anywhere else.
   ═══════════════════════════════════════════════════════ */

/* ── Base reset ── */
.btn-primary,
.btn-secondary,
.btn-dark,
.btn-ghost,
.header-cta,
.ig-form-submit,
button.ig-popup-open {
    border-radius: var(--button-radius);
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: var(--button-letter-spacing);
}

/* ── Primary — teal filled ── */
.btn-primary {
    background: var(--teal);
    color: var(--navy);
    border: var(--button-border-width) solid var(--teal);
    padding: var(--button-pad-y) var(--button-pad-x);
    font-size: var(--button-font-size);
}

.btn-primary:hover {
    background: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
    color: var(--navy);
    transform: translateY(var(--button-hover-lift));
    box-shadow: var(--button-shadow-hover);
}

/* ── Secondary / Ghost — outlined ── */
.btn-secondary,
.btn-ghost {
    background: transparent;
    color: var(--text);
    border: var(--button-border-width) solid var(--button-ghost-border);
    padding: var(--button-pad-y) var(--button-pad-x);
    font-size: var(--button-font-size);
}

.btn-secondary:hover,
.btn-ghost:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: var(--button-ghost-bg-hover);
}

/* Ghost with chevron icon (inline use) */
.btn-ghost--inline {
    background: transparent;
    color: var(--text);
    font-size: var(--button-font-size-sm);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap);
    transition: color var(--transition-base);
    border: none;
    padding: 0;
}

.btn-ghost--inline:hover {
    color: var(--teal);
}

.btn-ghost--inline svg {
    transition: transform var(--transition-base);
}

.btn-ghost--inline:hover svg {
    transform: translateX(4px);
}

/* ── Dark — navy outlined ── */
.btn-dark {
    background: transparent;
    color: var(--text);
    border: var(--button-border-width) solid var(--button-dark-border);
    padding: var(--button-pad-y) var(--button-pad-x);
    font-size: var(--button-font-size);
}

.btn-dark:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: var(--button-ghost-bg-hover);
    transform: translateY(var(--button-hover-lift));
}

/* ── Submit (form full-width) ── */
.ig-form-submit,
.btn-submit {
    width: 100%;
    padding: 14px var(--space-md);
    background: var(--teal);
    color: var(--navy);
    font-size: var(--button-font-size-md);
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: var(--button-radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: var(--button-letter-spacing);
}

.ig-form-submit:hover,
.btn-submit:hover {
    background: var(--button-primary-hover);
    transform: translateY(var(--button-hover-lift-sm));
    box-shadow: var(--button-shadow-hover);
}

/* ── CTA context overrides ── */
.cta-content .btn-primary,
.cta-content button.btn-primary,
.cta-content button.ig-popup-open {
    margin-top: 4px;
}

/* ── Newsletter inline button (news page) ── */
.newsletter-form button {
    padding: var(--button-newsletter-pad-y) var(--button-newsletter-pad-x);
    background: var(--navy);
    color: var(--text);
    border: none;
    font-family: var(--font-family-base);
    font-size: var(--button-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.newsletter-form button:hover {
    background: var(--navy-light);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-dark:focus-visible,
.btn-ghost:focus-visible,
.btn-ghost--inline:focus-visible,
.header-cta:focus-visible,
.ig-form-submit:focus-visible,
.btn-submit:focus-visible,
button.ig-popup-open:focus-visible,
.newsletter-form button:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* ==== 07-footer.css ==== */
/* ═══════════════════════════════════════════════════════
   07-footer.css — Footer Component
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   SINGLE source of truth for footer styles.
   Do NOT define footer / .footer-* in any page file.
   ═══════════════════════════════════════════════════════ */

footer {
    background: var(--navy-deep);
    padding: var(--footer-pad-y) var(--footer-pad-x-fluid);
}

.footer-simple {
    text-align: center;
}

.footer-copy {
    color: var(--muted);
    font-size: var(--footer-copy-size);
}

/* ── Full footer (homepage variant) ── */
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--footer-grid-gap);
    margin-bottom: var(--footer-pad-y);
}

.footer-brand p {
    font-size: var(--footer-copy-size);
    line-height: var(--line-height-copy);
    max-width: var(--footer-brand-max);
}

.footer-brand .logo {
    font-size: var(--footer-logo-size);
    font-weight: 700;
    color: var(--text);
    letter-spacing: 1px;
    text-decoration: none;
    display: block;
    margin-bottom: var(--space-sm);
}

.footer-brand .logo span {
    color: var(--teal);
}

.footer-col h4 {
    font-size: var(--footer-heading-size);
    letter-spacing: var(--footer-heading-tracking);
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--footer-heading-gap);
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: var(--muted);
    text-decoration: none;
    font-size: var(--footer-link-size);
    transition: color var(--transition-base);
}

.footer-col ul li a:hover {
    color: var(--teal);
}

.footer-bottom {
    border-top: 1px solid var(--card-border);
    padding-top: var(--footer-bottom-pad-top);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--footer-bottom-gap);
    flex-wrap: wrap;
}

.footer-bottom p {
    font-size: var(--footer-bottom-link-size);
    color: var(--muted);
}

.footer-bottom a {
    color: var(--muted);
    text-decoration: none;
    font-size: var(--footer-bottom-link-size);
    transition: color var(--transition-base);
}

.footer-bottom a:hover {
    color: var(--teal);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--footer-grid-gap-md);
    }
}

@media (max-width: 600px) {
    footer {
        padding: var(--footer-pad-y) 5%;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ════════════════════════════════════════════════
   v15.13: 5-column footer (added Competencies pillar)
   Перевизначає `1.3fr 1fr 1fr 1.2fr` з 00-legacy-theme.css
════════════════════════════════════════════════ */
.footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr 1.2fr !important;
    gap: 32px !important;
}
@media (max-width: 980px) {
    .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr !important; }
}

/* ==== 08-cta.css ==== */
/* ═══════════════════════════════════════════════════════
   08-cta.css — CTA Section Component
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   SINGLE source of truth for .cta-section / .cta-content.
   Do NOT define these selectors in any page file.
   ═══════════════════════════════════════════════════════ */

.cta-section {
    background: var(--grad-navy);
    padding: var(--space-2xl) var(--section-padding-h);
    border-top: 1px solid var(--cta-border);
}

.cta-content {
    max-width: var(--cta-max-width);
}

.cta-section h2 {
    color: var(--text);
}

.cta-section p {
    color: var(--text-dim);
    margin-bottom: var(--cta-copy-gap);
}

/* ── Centered variant ── */
.cta-section--centered .cta-content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cta-content-gap);
    text-align: center;
}

.cta-section--centered .cta-content h2 {
    margin-bottom: var(--cta-title-gap-centered);
}

.cta-section--centered .cta-content p {
    margin-bottom: var(--cta-copy-gap-centered);
    max-width: var(--cta-text-max-width);
}

.cta-section--narrow .cta-content {
    max-width: var(--cta-max-width-narrow);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cta-section {
        padding: var(--cta-pad-mobile-y) var(--cta-pad-mobile-x);
    }
}

/* ==== 04-hero.css ==== */
/* CSS Hero Section */

/* ===== HERO ===== */
.hero {
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--hero-pad-x);
    padding-right: var(--hero-pad-x);
}

.hero .container {
    width: 100%;
}

.hero-home {
    min-height: var(--hero-home-min-height);
    padding-top: var(--hero-pad-top);
    padding-bottom: var(--hero-home-pad-bottom);
}

.hero-home .hero-content {
    max-width: var(--hero-content-wide-max);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero-home h1 {
    font-size: clamp(44px, 6vw, 76px);
    margin-bottom: var(--hero-title-gap-home);
    max-width: 11ch;
    letter-spacing: -0.035em;
}

.hero-home .hero-description {
    font-size: var(--hero-description-size-lg);
    line-height: var(--hero-description-line-height-lg);
    max-width: var(--hero-description-wide-max);
    color: rgba(232, 240, 248, 0.82);
    margin-inline: auto;
}

.hero-home::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 180px;
    background: linear-gradient(180deg, rgba(7, 21, 37, 0) 0%, rgba(7, 21, 37, 0.86) 100%);
    pointer-events: none;
}

.hero-inner {
    min-height: var(--hero-inner-min-height);
    padding-top: 100px;
    padding-bottom: var(--hero-inner-pad-bottom);
}

.hero-inner .hero-content {
    max-width: 900px;
}

.hero-inner h1 {
    font-size: clamp(30px, 4.5vw, 50px);
}

.hero-inner .hero-description {
    font-size: var(--hero-description-size-sm);
    max-width: var(--hero-description-wide-max);
}

.hero-content {
    max-width: var(--hero-content-max);
}

.hero-tag {
    font-family: inherit;
    font-size: var(--hero-tag-size);
    color: var(--teal);
    letter-spacing: var(--hero-tag-tracking);
    margin-bottom: 12px;
    text-transform: uppercase;
    opacity: 0.92;
}

.hero h1 {
    margin-bottom: var(--hero-title-gap);
}

.hero-description {
    font-size: var(--hero-description-size);
    color: var(--text);
    opacity: 0.85;
    max-width: var(--hero-description-max);
    line-height: var(--line-height-copy);
    margin: 0;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hero-stats-gap);
    margin-top: var(--hero-stats-top-gap);
    padding-top: var(--hero-stats-pad-top);
    border-top: 1px solid var(--card-border);
}

.stat {
    text-align: left;
}

.stat-value {
    font-size: var(--hero-stat-value-size);
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.stat-label {
    font-size: var(--hero-stat-label-size);
    color: var(--muted);
    margin-top: var(--space-xs);
}

.hero-cta {
    margin-top: var(--hero-cta-top-gap);
    display: flex;
    flex-wrap: wrap;
    gap: var(--hero-cta-gap);
    align-items: center;
}

.hero-home .hero-cta {
    gap: 12px;
    justify-content: center;
}

.hero-home .hero-cta .btn-primary,
.hero-home .hero-cta .btn-ghost {
    min-height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.hero-home .hero-cta .btn-primary {
    background: linear-gradient(180deg, #12d8b7 0%, #00c9a7 100%);
    border-color: rgba(18, 216, 183, 0.92);
    color: var(--navy);
    box-shadow: 0 10px 26px rgba(0, 201, 167, 0.22);
}

.hero-home .hero-cta .btn-primary:hover {
    background: linear-gradient(180deg, #22e6c4 0%, #08d5b2 100%);
    border-color: rgba(34, 230, 196, 0.96);
    box-shadow: 0 14px 30px rgba(0, 201, 167, 0.28);
}

.hero-home .hero-cta .btn-ghost {
    background: rgba(10, 22, 40, 0.42);
    border-color: rgba(0, 201, 167, 0.26);
    color: rgba(232, 240, 248, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero-home .hero-cta .btn-ghost:hover {
    background: rgba(0, 201, 167, 0.1);
    border-color: rgba(0, 201, 167, 0.52);
    color: var(--text);
}

@media (max-width: 1024px) {
    .hero-home {
        min-height: 62vh;
        padding-top: 126px;
        padding-bottom: 64px;
    }

    .hero-home h1 {
        font-size: clamp(38px, 5.8vw, 60px);
        margin-bottom: 28px;
    }

    .hero-home .hero-description {
        font-size: 17px;
        line-height: 1.75;
    }

    .hero-stats {
        gap: 40px;
        margin-top: 44px;
    }
}

@media (max-width: 768px) {
    .hero {
        padding-left: var(--container-gutter);
        padding-right: var(--container-gutter);
    }

    .hero-home {
        padding-top: 114px;
    }

    .hero-inner {
        min-height: clamp(220px, 36svh, 280px);
        padding-top: 88px;
        padding-bottom: 24px;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-md);
    }

    .hero-cta {
        gap: var(--space-tag-gap);
        margin-top: var(--space-md);
    }

    .hero-inner .hero-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-inner .hero-cta > * {
        width: 100%;
    }

    .hero-home .hero-cta {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        flex-direction: unset !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 14px !important;
    }

    .hero-home .hero-cta > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .hero-home .hero-cta .btn-primary,
    .hero-home .hero-cta .btn-ghost {
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        letter-spacing: 0.1px !important;
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ==== 05-components.css ==== */
/* General Components & Sections */
.ig-tabs {
    display: grid;
    gap: 32px;
    margin-top: 40px;
}

.ig-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0;
    padding: 0;
}

.ig-tab-btn {
    padding: 11px 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(232, 240, 248, 0.72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    clip-path: none !important;
    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.ig-tab-btn:hover,
.ig-tab-btn:focus-visible {
    color: var(--text);
    border-color: rgba(0, 201, 167, 0.24);
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.08) 0%, rgba(0, 180, 216, 0.05) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(0, 201, 167, 0.05);
}

.ig-tab-btn.active {
    color: #f2fbff;
    border-color: rgba(0, 201, 167, 0.48);
    background:
        linear-gradient(135deg, rgba(0, 201, 167, 0.18) 0%, rgba(0, 180, 216, 0.1) 100%),
        rgba(255, 255, 255, 0.03);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(0, 201, 167, 0.1);
}

.ig-tab-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 201, 167, 0.12);
}

.ig-tab-panel {
    display: none;
}

.ig-tab-panel.active {
    display: block;
}

.hero-stats-bar {
    position: relative;
    padding: 0 var(--section-padding-h);
    margin-top: -34px;
    margin-bottom: 0;
    z-index: 3;
}

.hero-stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(0, 201, 167, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(10, 22, 40, 0.9) 0%, rgba(7, 21, 37, 0.96) 100%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.hero-stat {
    padding: 28px 22px;
    display: grid;
    gap: 10px;
    min-width: 0;
    align-content: start;
}

.hero-stat + .hero-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-stat-val {
    display: block;
    color: var(--text);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}

.hero-stat-label {
    display: block;
    color: rgba(232, 240, 248, 0.62);
    font-size: 12px;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
}

.hero-stat-sep {
    display: none;
}

.members-section {
    padding: 40px 0 72px;
}

.members-section .section-header,
.why-section .section-header {
    max-width: 760px;
}

.members-section .section-header {
    margin-left: auto;
    margin-right: auto;
}

.members-intro {
    max-width: 720px;
    margin: 0 auto;
    color: var(--text-dim);
    text-align: center;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 36px;
}

.member-card {
    position: relative;
    min-height: 118px;
    padding: 16px 14px 14px;
    border: 1px solid rgba(123, 151, 179, 0.16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.015) 100%);
    overflow: hidden;
    transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.member-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(12, 26, 45, 0.84) 0%, rgba(10, 22, 40, 0.92) 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.member-card:hover,
.member-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(0, 201, 167, 0.34);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.member-card:hover::before,
.member-card:focus-visible::before {
    opacity: 1;
}

.member-card-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    text-align: center;
}

.member-name {
    color: var(--text);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 6px;
}

.member-spec {
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.member-card-logo-hover {
    position: absolute;
    inset: auto 14px 12px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden;
}

.member-card:hover .member-card-logo-hover,
.member-card:focus-visible .member-card-logo-hover {
    inset: 0;
    padding: 18px;
    border-radius: inherit;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background: linear-gradient(180deg, rgba(12, 26, 45, 0.86) 0%, rgba(10, 22, 40, 0.94) 100%);
}

.member-hover-img {
    max-width: 82px;
    max-height: 24px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.member-hover-monogram {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(0, 201, 167, 0.1);
    color: var(--teal);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.member-hover-hint {
    color: var(--teal);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* PNG logo whitening for popup/modal/company card views */
.member-modal-logo,
.member-popup-logo,
.member-company-modal img,
.member-modal img,
.member-popup img,
.company-modal img,
.company-popup img,
.member-card-modal img,
.member-card-popup img {
    max-width: 180px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.member-card:hover .member-hover-img,
.member-card:focus-visible .member-hover-img,
.member-modal .member-hover-img,
.member-popup .member-hover-img,
.company-modal .member-hover-img,
.company-popup .member-hover-img,
.member-modal-logo img,
.member-popup-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.why-section {
    background: var(--grad-dark-teal);
}

.why-content {
    position: relative;
}

.why-section h2,
.why-section p {
    color: var(--text);
}

.why-section .line {
    background: rgba(255, 255, 255, 0.5);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--why-card-gap);
    margin-top: var(--space-xl);
}

.why-item {
    padding: var(--why-card-pad);
    background: var(--why-card-bg);
    border: 1px solid var(--teal-border);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base);
}

.why-item:hover {
    background: var(--why-card-bg-hover);
    border-color: var(--why-card-border-hover);
    transform: translateY(-4px);
}

.flagship-section {
    padding: 76px 0;
    background: linear-gradient(160deg, #0a1628 0%, #0d1f38 42%, #0b1a30 100%);
}

.flagship-grid {
    gap: 52px;
    align-items: start;
}

.flagship-content .section-header {
    max-width: 620px;
}

.flagship-content > .tag,
.method-sla-text > .tag {
    margin-bottom: 12px;
}

.flagship-content > h2,
.method-sla-text > h2 {
    max-width: 620px;
    margin-bottom: 0;
}

.flagship-content > h2 + p,
.method-sla-text > h2 + p {
    margin-top: 24px;
}

.flagship-content > p + p,
.method-sla-text > p + p {
    margin-top: 14px;
}

.flagship-copy {
    color: var(--text-dim);
}

.flagship-features {
    gap: 14px 18px;
    margin-top: 34px;
}

.flagship-feature {
    font-size: 13px;
}

.flagship-feature-icon {
    border-radius: 12px;
}

.flagship-visual {
    gap: 16px;
}

.flagship-stat {
    border-radius: 18px;
    padding: 28px 26px;
    background: linear-gradient(180deg, rgba(14, 45, 69, 0.9) 0%, rgba(11, 31, 49, 0.96) 100%);
}

.layers-section .section-header,
.tech-section .section-header {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.layer-block {
    margin-bottom: 56px;
}

.layer-header {
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 14px;
}

.layer-icon {
    border-radius: 12px;
}

.layer-title span {
    color: rgba(232, 240, 248, 0.54);
    letter-spacing: 0.12em;
}

.product-card {
    border-radius: 18px;
    padding: 28px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.015) 100%);
}

.product-card p {
    color: var(--text-dim);
    line-height: 1.72;
}

.product-meta {
    margin-top: 18px;
}

.method-section .section-header {
    max-width: 760px;
}

.method-principles-grid {
    gap: 18px;
}

.method-card {
    border-radius: 18px;
    padding: 26px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.018) 100%);
}

.method-card h3 {
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 12px;
}

.method-card p {
    color: var(--text-dim);
    line-height: 1.72;
}

.standard-card,
.approach-item {
    border-radius: 18px;
}

.method-sla-grid {
    gap: 52px;
}

.method-sla-text .section-header {
    max-width: 620px;
}

.method-sla-copy {
    color: var(--text-dim);
}

.method-sla-tiers {
    padding-top: 8px;
}

.sla-tier {
    border-radius: 14px;
    padding: 18px 18px;
}

body.page-template-page-segments .method-section--alt .section-header,
body.page-template-page-segments-php .method-section--alt .section-header {
    max-width: 780px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    margin-bottom: 36px;
}

body.page-template-page-segments .method-section--alt .section-header > h2,
body.page-template-page-segments .method-section--alt .section-header > p,
body.page-template-page-segments-php .method-section--alt .section-header > h2,
body.page-template-page-segments-php .method-section--alt .section-header > p {
    margin-left: 0;
    margin-right: 0;
}

body.page-template-page-segments .method-section--alt .section-header > h2,
body.page-template-page-segments-php .method-section--alt .section-header > h2 {
    max-width: none;
}

body.page-template-page-segments .segments-page-section {
    padding-top: 48px;
    padding-bottom: 88px;
}

body.page-template-page-segments .segments-map-header,
body.page-template-page-segments-php .segments-map-header {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
    gap: 48px;
    align-items: end;
    margin-bottom: 34px;
}

body.page-template-page-segments .segments-map-header h2,
body.page-template-page-segments-php .segments-map-header h2 {
    max-width: 760px;
    color: var(--text);
    margin: 0;
}

body.page-template-page-segments .segments-map-header p,
body.page-template-page-segments-php .segments-map-header p {
    margin: 0;
    color: rgba(232, 240, 248, 0.68);
    font-size: 15px;
    line-height: 1.7;
}

body.page-template-page-segments .segments-circle-grid,
body.page-template-page-segments-php .segments-circle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
}

body.page-template-page-segments .segment-circle-card,
body.page-template-page-segments-php .segment-circle-card {
    position: relative;
    min-height: 250px;
    border: 0;
    border-radius: 0;
    padding: 28px 28px 26px;
    background: rgba(7, 21, 37, 0.36);
    box-shadow: none;
    cursor: default !important;
    text-align: left;
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

body.page-template-page-segments .segment-circle-card:hover,
body.page-template-page-segments .segment-circle-card:focus-within,
body.page-template-page-segments-php .segment-circle-card:hover,
body.page-template-page-segments-php .segment-circle-card:focus-within {
    background: rgba(0, 201, 167, 0.055);
    box-shadow: inset 3px 0 0 rgba(0, 201, 167, 0.65);
}

body.page-template-page-segments .segment-circle-index,
body.page-template-page-segments-php .segment-circle-index {
    margin-bottom: 20px;
    color: rgba(0, 201, 167, 0.82);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

body.page-template-page-segments .segment-circle-index::after,
body.page-template-page-segments-php .segment-circle-index::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 10px;
    background: rgba(0, 201, 167, 0.48);
}

body.page-template-page-segments .segment-circle-card .ig-icon--circle,
body.page-template-page-segments-php .segment-circle-card .ig-icon--circle {
    position: absolute;
    top: 26px;
    right: 26px;
    width: 44px;
    height: 44px;
    margin: 0;
    opacity: 0.82;
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}

body.page-template-page-segments .segment-circle-card:hover .ig-icon--circle,
body.page-template-page-segments .segment-circle-card:focus-within .ig-icon--circle,
body.page-template-page-segments-php .segment-circle-card:hover .ig-icon--circle,
body.page-template-page-segments-php .segment-circle-card:focus-within .ig-icon--circle {
    border-color: rgba(0, 201, 167, 0.48);
    background: rgba(0, 201, 167, 0.11);
    color: var(--teal);
    box-shadow: none;
}

body.page-template-page-segments .segment-circle-name,
body.page-template-page-segments-php .segment-circle-name {
    max-width: 70%;
    font-size: 14px;
    letter-spacing: 0.08em;
    transition: color var(--transition-base);
}

body.page-template-page-segments .segment-circle-card:hover .segment-circle-name,
body.page-template-page-segments .segment-circle-card:focus-within .segment-circle-name,
body.page-template-page-segments-php .segment-circle-card:hover .segment-circle-name,
body.page-template-page-segments-php .segment-circle-card:focus-within .segment-circle-name {
    color: var(--text);
}

body.page-template-page-segments .segment-circle-desc,
body.page-template-page-segments-php .segment-circle-desc {
    max-width: 94%;
    margin-top: 16px;
    color: var(--text-dim);
    line-height: 1.7;
    transition: color var(--transition-base);
}

@media (max-width: 1024px) {
    body.page-template-page-segments .segments-map-header,
    body.page-template-page-segments-php .segments-map-header {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    body.page-template-page-segments .segments-circle-grid,
    body.page-template-page-segments-php .segments-circle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.page-template-page-segments .segments-circle-grid,
    body.page-template-page-segments-php .segments-circle-grid {
        grid-template-columns: 1fr;
    }

    body.page-template-page-segments .segment-circle-name,
    body.page-template-page-segments-php .segment-circle-name {
        max-width: calc(100% - 64px);
    }
}

body.page-template-page-segments .segment-circle-card:hover .segment-circle-desc,
body.page-template-page-segments .segment-circle-card:focus-within .segment-circle-desc,
body.page-template-page-segments-php .segment-circle-card:hover .segment-circle-desc,
body.page-template-page-segments-php .segment-circle-card:focus-within .segment-circle-desc {
    color: rgba(232, 240, 248, 0.82);
}

body.page-template-page-segments .seg-matrix,
body.page-template-page-segments-php .seg-matrix {
    margin-top: 10px;
    border-radius: 20px;
    border-color: rgba(0, 201, 167, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0.01) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.page-template-page-segments .seg-matrix-row,
body.page-template-page-segments-php .seg-matrix-row {
    min-height: 94px;
    gap: 18px;
    padding: 22px 20px;
    transition: background var(--transition-fast);
}

body.page-template-page-segments .seg-matrix-company,
body.page-template-page-segments-php .seg-matrix-company {
    font-size: 13px;
    letter-spacing: 0.04em;
}

body.page-template-page-segments .seg-matrix-focus,
body.page-template-page-segments-php .seg-matrix-focus {
    color: rgba(232, 240, 248, 0.76);
    line-height: 1.65;
}

@media (min-width: 901px) {
    #tab-docs .stack-tab-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "ecm bpm"
            "ecm edi";
        align-items: start;
    }

    #tab-docs .stack-tab-col:nth-child(1) {
        grid-area: ecm;
    }

    #tab-docs .stack-tab-col:nth-child(2) {
        grid-area: bpm;
    }

    #tab-docs .stack-tab-col:nth-child(3) {
        grid-area: edi;
    }

    #tab-docs .stack-tab-col {
        align-self: start;
    }
}

#tab-docs .stack-tab-col,
#tab-platform .stack-tab-col,
#tab-telecom .stack-tab-col {
    display: grid;
    gap: 20px;
}

#tab-docs .layer-block,
#tab-platform .layer-block,
#tab-telecom .layer-block {
    margin-bottom: 0;
    padding: 24px 22px 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.012) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#tab-docs .layer-header,
#tab-platform .layer-header,
#tab-telecom .layer-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#tab-docs .products-grid,
#tab-platform .products-grid,
#tab-telecom .products-grid {
    gap: 12px;
}

#tab-docs .product-card,
#tab-platform .product-card,
#tab-telecom .product-card {
    padding: 18px 16px 16px;
    border-radius: 14px;
    border-color: rgba(255, 255, 255, 0.07);
}

#tab-docs .product-card h4,
#tab-platform .product-card h4,
#tab-telecom .product-card h4 {
    margin-bottom: 8px;
}

#tab-docs .product-card p,
#tab-platform .product-card p,
#tab-telecom .product-card p {
    font-size: 14px;
    line-height: 1.62;
}

#tab-docs .product-meta,
#tab-platform .product-meta,
#tab-telecom .product-meta {
    margin-top: 14px;
}

.tech-section {
    background:
        radial-gradient(circle at top center, rgba(0, 201, 167, 0.08), transparent 36%),
        linear-gradient(180deg, #081426 0%, #0a172b 100%);
}

.tech-section .section-header {
    max-width: 780px;
}

.tech-section .container > .tech-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 42px;
}

.tech-section .tech-category {
    margin-bottom: 0;
    padding: 24px 24px 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.015) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}

.tech-section .tech-category:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 201, 167, 0.22);
    background: linear-gradient(180deg, rgba(0, 201, 167, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.tech-section .tech-category-title {
    margin-bottom: 18px;
    color: rgba(232, 240, 248, 0.92) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tech-section .tech-category-title::after {
    background: linear-gradient(90deg, rgba(0, 201, 167, 0.28), rgba(255, 255, 255, 0.04));
}

.tech-section .tech-tags {
    gap: 10px;
}

.tech-section .tech-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(232, 240, 248, 0.84);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-decoration: none;
    opacity: 1 !important;
    transform: none !important;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.tech-section .tech-tag:hover,
.tech-section .tech-tag:focus-visible {
    color: var(--text);
    border-color: rgba(0, 201, 167, 0.36);
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.16) 0%, rgba(0, 180, 216, 0.08) 100%);
    box-shadow: 0 0 0 4px rgba(0, 201, 167, 0.08);
    transform: translateY(-1px) !important;
    outline: none;
}

@media (max-width: 900px) {
    .tech-section .container > .tech-categories-grid {
        grid-template-columns: 1fr;
    }
}

body.home .services-section {
    padding-top: 68px;
    padding-bottom: 84px;
}

body.home .services-section .section-header--editorial {
    margin-bottom: 56px;
}

body.home .services-grid {
    margin-top: 0;
}

body.home .service-card {
    padding: 24px 22px 22px;
}

body.home .service-card h3 {
    font-size: 17px;
}

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

body.page-template-page-segments .method-section--alt,
body.page-template-page-segments-php .method-section--alt {
    padding-top: 68px;
    padding-bottom: 92px;
}

body.page-template-page-methodology .method-section,
body.page-template-page-methodology-php .method-section {
    padding-top: 68px;
    padding-bottom: 84px;
}

body.page-template-page-methodology .method-section + .method-section,
body.page-template-page-methodology-php .method-section + .method-section {
    padding-top: 60px;
}

body.page-template-page-methodology .method-section .section-header--editorial,
body.page-template-page-methodology-php .method-section .section-header--editorial {
    margin-bottom: 48px;
}

body.page-template-page-methodology .method-principles-grid,
body.page-template-page-methodology-php .method-principles-grid {
    gap: 20px;
}

body.page-template-page-methodology .method-card,
body.page-template-page-methodology-php .method-card {
    padding: 24px 20px;
}

body.page-template-page-methodology .method-approaches,
body.page-template-page-methodology-php .method-approaches {
    margin-top: 24px;
}

body.page-template-page-methodology .method-sla-grid,
body.page-template-page-methodology-php .method-sla-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.92fr);
    gap: 44px;
    align-items: start;
}

body.page-template-page-methodology .method-sla-text,
body.page-template-page-methodology-php .method-sla-text {
    max-width: 640px;
}

body.page-template-page-methodology .method-sla-tiers,
body.page-template-page-methodology-php .method-sla-tiers {
    margin-top: 142px;
    padding-top: 0;
    gap: 10px;
}

body.page-template-page-methodology .sla-tier,
body.page-template-page-methodology-php .sla-tier {
    min-height: 48px;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.03) 100%);
    border-color: rgba(0, 201, 167, 0.14);
}

body.page-template-page-methodology .sla-tier-name,
body.page-template-page-methodology-php .sla-tier-name {
    letter-spacing: -0.01em;
}

body.page-template-page-methodology .sla-tier-meta,
body.page-template-page-methodology-php .sla-tier-meta {
    gap: 14px;
    font-size: 11px;
    color: rgba(232, 240, 248, 0.62);
}

@media (max-width: 1024px) {
    body.page-template-page-methodology .method-sla-grid,
    body.page-template-page-methodology-php .method-sla-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    body.page-template-page-methodology .method-sla-tiers,
    body.page-template-page-methodology-php .method-sla-tiers {
        margin-top: 0;
    }
}

body.page-template-page-methodology .standards-grid,
body.page-template-page-methodology-php .standards-grid {
    margin-top: 24px;
}

body.page-template-page-methodology .method-section .section-header.text-center,
body.page-template-page-methodology-php .method-section .section-header.text-center {
    margin-bottom: 44px;
}

body.page-template-page-methodology .method-section--alt > .container > .section-header.section-header--editorial,
body.page-template-page-methodology-php .method-section--alt > .container > .section-header.section-header--editorial {
    max-width: 760px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

body.page-template-page-methodology .method-section--alt > .container > .section-header.section-header--editorial > h2,
body.page-template-page-methodology .method-section--alt > .container > .section-header.section-header--editorial > p,
body.page-template-page-methodology-php .method-section--alt > .container > .section-header.section-header--editorial > h2,
body.page-template-page-methodology-php .method-section--alt > .container > .section-header.section-header--editorial > p {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

body.page-template-page-methodology .method-section--alt > .container > .section-header.section-header--editorial > p,
body.page-template-page-methodology-php .method-section--alt > .container > .section-header.section-header--editorial > p {
    max-width: 760px;
}

@media (min-width: 1025px) {
    .services-grid {
        gap: 20px;
    }

    .service-card {
        padding: 28px 24px 24px;
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.014) 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .service-card h3 {
        margin-bottom: 12px;
        line-height: 1.32;
    }

    .service-card p {
        color: var(--text-dim);
        line-height: 1.7;
    }
}

.why-number {
    font-size: var(--why-card-number-size);
    font-weight: 800;
    color: var(--why-card-number);
    line-height: 1;
    margin-bottom: var(--space-sm);
    letter-spacing: -0.04em;
}

.why-item h3 {
    color: var(--text);
    font-size: var(--why-card-title-size);
    margin-bottom: var(--space-tag-gap);
}

.why-item p {
    font-size: var(--why-card-copy-size);
    opacity: 1;
    color: var(--why-card-text);
    line-height: var(--line-height-copy);
}

@media (max-width: 1024px) {
    .ig-tabs-nav {
        gap: 10px;
    }

    .hero-stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-stat {
        border-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hero-stat:nth-child(1),
    .hero-stat:nth-child(2) {
        border-top: 0;
    }

    .hero-stat:nth-child(2),
    .hero-stat:nth-child(4) {
        border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .members-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px) {
    .ig-tab-btn {
        width: calc(50% - 6px);
        justify-content: center;
        padding: 11px 14px;
        font-size: 11px;
    }

    .hero-stats-row,
    .members-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }

    .hero-stats-bar {
        margin-top: -24px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero-stat {
        padding: 22px 18px;
        border-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        text-align: left;
        justify-items: start;
    }

    .hero-stat:first-child {
        border-top: 0 !important;
    }

    .hero-stat-val {
        font-size: clamp(26px, 6vw, 34px);
    }

    .hero-stat-label {
        font-size: 11px;
        line-height: 1.4;
        letter-spacing: 0.06em;
        text-wrap: pretty;
    }

    .why-item {
        padding: var(--space-md);
    }

    .hero-stats-row {
        width: 100%;
        border-radius: 22px;
        overflow: hidden;
    }

    body.page-template-page-segments .segments-circle-grid,
    body.page-template-page-segments-php .segments-circle-grid,
    .values-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.page-template-page-segments .segment-circle-card,
    body.page-template-page-segments-php .segment-circle-card,
    .value-card {
        padding-left: 18px;
        padding-right: 18px;
    }

    .tech-section .container > .tech-categories-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
        margin-top: 28px;
    }

    .tech-section .tech-category {
        width: 100%;
        min-width: 0;
        padding: 20px 18px 18px;
    }

    .tech-section .tech-tags {
        gap: 8px;
    }

    .tech-section .tech-tag {
        max-width: 100%;
    }

    .cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cta-actions > * {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .hero-home h1 {
        font-size: 23px !important;
        max-width: none !important;
        white-space: nowrap !important;
        letter-spacing: -0.045em !important;
    }

    .hero-stats-bar {
        padding-left: 10px;
        padding-right: 10px;
        margin-top: -18px;
    }

    .hero-stats-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .hero-stat {
        min-width: 0;
        width: 100%;
        padding: 16px 12px;
        justify-self: stretch;
        align-items: start;
        justify-items: center;
        text-align: center;
    }

    .hero-stat-val {
        font-size: 22px;
        line-height: 1;
        white-space: nowrap;
    }

    .hero-stat-label {
        font-size: 9px;
        line-height: 1.3;
        letter-spacing: 0.02em;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
        max-width: 100%;
        text-wrap: balance;
    }
}

/* ==== 06-services.css ==== */
/* Services Section */
/* ===== SERVICES ===== */
.services-section {
    background: var(--navy);
}

.services-section .section-header {
    max-width: 760px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(var(--service-grid-columns), 1fr);
    gap: 18px;
    align-items: stretch;
}

.service-card {
    height: 100%;
    background: var(--service-card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 28px 24px;
    transition: background var(--transition-slow),
                border-color var(--transition-base),
                transform var(--transition-base);
    position: relative;
}

.service-card:hover {
    border-color: var(--service-card-border-hover);
    background: var(--card-hover);
    transform: translateY(var(--service-card-lift));
}

.service-icon {
    width: var(--service-icon-size);
    height: var(--service-icon-size);
    margin-bottom: var(--service-icon-gap);
    color: var(--teal);
}

.service-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.service-card h3 {
    color: var(--text);
    font-size: 18px;
    line-height: 1.32;
    margin-bottom: var(--space-tag-gap);
}

.service-card p {
    font-size: var(--service-card-copy-size);
    line-height: var(--service-card-copy-line-height);
    color: var(--text-dim);
}

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 18px 14px;
    }

    .service-card h3 {
        font-size: 14px;
    }

    .service-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 10px;
    }

    .service-icon svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .service-card h3 {
        font-size: 15px;
    }

    .service-card p {
        font-size: 14px;
    }

    .service-icon {
        width: 36px;
        height: 36px;
    }
}

/* ==== 07-map-segments.css ==== */
/* Map & Segments */
/* ===== MAP SECTION ===== */
.map-section {
    background: var(--navy-deep);
    text-align: center;
}

.map-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--map-stats-gap);
    margin-top: var(--space-xl);
}

.map-stat {
    text-align: center;
}

.map-stat-value {
    font-size: var(--map-stat-value-size);
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
}

.map-stat-label {
    font-size: var(--map-stat-label-size);
    color: var(--muted);
    margin-top: var(--space-xs);
}

/* ===== SEGMENTS ===== */
.segments-section {
    background: var(--navy);
}

.segments-grid {
    display: grid;
    grid-template-columns: repeat(var(--segments-grid-columns), 1fr);
    gap: var(--space-sm);
}

.segment {
    padding: var(--segment-card-pad-y) var(--segment-card-pad-x);
    text-align: center;
    background: var(--segment-card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    transition: background var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base);
}

.segment:hover {
    border-color: var(--teal);
    background: var(--segment-card-bg-hover);
    transform: translateY(var(--segment-card-lift));
}

.segment-icon {
    width: var(--icon-size-circle);
    height: var(--icon-size-circle);
    margin: 0 auto var(--space-icon-gap);
    color: var(--teal);
}

.segment-icon svg {
    width: var(--icon-size-circle-glyph);
    height: var(--icon-size-circle-glyph);
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.segment-name {
    font-size: var(--segment-name-size);
    font-weight: 600;
    letter-spacing: var(--segment-name-tracking);
    text-transform: uppercase;
    color: var(--text);
}

@media (max-width: 1024px) {
    .segments-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .map-stats {
        gap: var(--map-stats-gap-md);
    }
}

@media (max-width: 768px) {
    .segments-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .map-stats {
        flex-direction: column;
        gap: var(--map-stats-gap-sm);
    }
}

@media (max-width: 480px) {
    .segments-grid {
        grid-template-columns: 1fr;
    }

    .map-stat-value {
        font-size: var(--map-stat-value-size-sm);
    }
}

/* ==== 10-about.css ==== */
/* About Page - Main Content */
/* ===== ABOUT SECTION ===== */
.about-section {
    background: var(--navy-deep);
}

.about-intro-section {
    padding: 48px 0 52px !important;
    background: rgba(255, 255, 255, 0.02);
}

.about-intro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    column-gap: 64px;
    row-gap: 24px;
    align-items: start;
}

.about-intro-grid p {
    max-width: none;
    margin: 0;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: rgba(232, 240, 248, 0.8) !important;
    text-align: left;
}

.about-section .section-header {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.about-section .section-header > p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--about-grid-gap);
    align-items: center;
}

.about-content h2 {
    color: var(--text);
}

.about-content p {
    margin-bottom: var(--space-text-gap);
}

.about-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.org-chart {
    width: 100%;
    max-width: var(--about-visual-max);
}

.org-node {
    background: var(--org-node-bg);
    border: 1px solid var(--card-border);
    padding: var(--org-node-pad-y) var(--org-node-pad-x);
    text-align: center;
    margin-bottom: var(--org-node-gap);
    transition: background var(--transition-base),
                border-color var(--transition-base);
}

.org-node:hover {
    border-color: var(--teal);
    background: var(--card-hover);
}

.org-node.main {
    border-color: var(--teal);
    background: var(--org-node-bg-active);
}

.org-node-title {
    font-size: var(--org-node-title-size);
    font-weight: 600;
    color: var(--text);
}

.org-branches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--org-branches-gap);
}

.org-branches .org-node {
    padding: 15px;
    margin-bottom: 0;
}

.org-branches .org-node-title {
    font-size: var(--org-node-title-size-sm);
}

/* ===== METHODOLOGY SECTION ===== */
.methodology-section {
    background: var(--grad-dark-teal);
}

.methodology-section h2,
.methodology-section p {
    color: var(--text);
}

.methodology-section .line {
    background: rgba(255, 255, 255, 0.5);
}

.methodology-section > .container > .section-header.section-header--editorial {
    margin-bottom: var(--space-lg);
    max-width: 100%;
}

.methodology-section > .container > .section-header.section-header--editorial > h2 {
    max-width: none;
}

.shared-stack-copy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--feature-grid-gap);
    align-items: start;
    margin-top: var(--space-md);
}

.shared-stack-copy-col p {
    margin: 0;
    font-size: var(--methodology-copy-size);
    opacity: var(--methodology-copy-opacity);
}

.shared-stack-features-grid {
    margin-top: var(--space-lg);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--feature-grid-gap);
    margin-top: var(--space-xl);
}

.feature-card {
    background: var(--feature-card-bg);
    border: 1px solid var(--feature-card-border);
    padding: var(--feature-card-pad);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: background var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base);
}

.feature-card:hover {
    background: var(--feature-card-bg-hover);
    border-color: var(--feature-card-border-hover);
    transform: translateY(var(--feature-card-lift));
}

.feature-icon {
    width: var(--feature-icon-size);
    height: var(--feature-icon-size);
    margin-bottom: var(--feature-icon-gap);
    color: var(--text);
}

.feature-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.feature-card h3 {
    color: var(--text);
    font-size: var(--feature-card-title-size);
}

.feature-card p {
    font-size: var(--feature-card-copy-size);
    opacity: var(--feature-card-copy-opacity);
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--about-grid-gap-mobile);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .about-intro-section {
        padding: 44px 0 44px !important;
    }

    .about-intro-grid {
        gap: 24px;
    }

    .about-intro-grid p {
        max-width: none;
    }

    .shared-stack-copy-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .shared-stack-copy-grid,
    .shared-stack-features-grid {
        margin-top: var(--space-md);
    }

    .org-branches {
        grid-template-columns: 1fr;
    }

    .org-node {
        padding: var(--space-sm) var(--space-md);
    }

    .feature-card {
        padding: var(--space-md);
    }
}

/* ==== 17-about-illustrations.css ==== */
/* ═════════════════════════════════════════════════════════
   ABOUT PAGE — FLAT STRUCTURE ILLUSTRATIONS v2
   Full-width SVGs, tab layout, subtle interactivity
   ═════════════════════════════════════════════════════════ */

/* ─── Tab container (reuses .ig-tabs styles) ─────────────── */
.about-tabs {
    margin-top: 0;
}

.about-tabs .ig-tabs-nav {
    justify-content: center;
    margin-bottom: 28px;
}

/* ─── Full-width illustration card ───────────────────────── */
.about-illustration-wide {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    padding: 32px 24px 28px;
    border-radius: 4px;
}

/* Remove the 900px cap so SVGs fill container width */
.about-illustration-wide svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;        /* full width */
    margin: 0;
}

/* Caption stays readable — constrained */
.about-illustration-wide .about-illustration-caption {
    max-width: 780px;
    margin: 20px auto 0;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.7;
}

.about-illustration-wide .about-illustration-label {
    font-family: 'Fira Code', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal);
    opacity: 0.85;
    margin-bottom: 18px;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────
   INTERACTIVITY — ILLUSTRATION 1 (Group level)
   ───────────────────────────────────────────────────────── */

/* Core breathing — always-on subtle pulse */
.about-core-pulse {
    transform-origin: 450px 275px;
    animation: aboutCoreBreath 4.5s ease-in-out infinite;
}

@keyframes aboutCoreBreath {
    0%, 100% {
        transform: scale(1);
        stroke-opacity: 0.18;
    }
    50% {
        transform: scale(1.04);
        stroke-opacity: 0.32;
    }
}

.about-core-glow {
    animation: aboutCoreGlow 4.5s ease-in-out infinite;
}

@keyframes aboutCoreGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Subtle rotating dashed spokes — shows "flow" inward */
.about-svg-group .about-spokes line {
    stroke-dashoffset: 0;
    animation: aboutSpokeFlow 6s linear infinite;
}

@keyframes aboutSpokeFlow {
    to { stroke-dashoffset: -32; }
}

/* Practice node hover — highlight its spoke */
.about-node {
    cursor: default;
    transition: transform 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.about-node:hover {
    transform: scale(1.05);
}

.about-node:hover rect {
    filter: drop-shadow(0 0 8px rgba(0, 201, 167, 0.35));
}

/* When a node is hovered, dim all non-matching spokes */
.about-svg-group:has(.about-node[data-id="p-global"]:hover)   .about-spoke:not([data-target="p-global"])   { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-enterprise"]:hover) .about-spoke:not([data-target="p-enterprise"]) { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-public"]:hover)   .about-spoke:not([data-target="p-public"])   { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-software-eng"]:hover) .about-spoke:not([data-target="p-software-eng"]) { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-hardware"]:hover) .about-spoke:not([data-target="p-hardware"]) { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-software-int"]:hover) .about-spoke:not([data-target="p-software-int"]) { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-data"]:hover)     .about-spoke:not([data-target="p-data"])     { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-iot"]:hover)      .about-spoke:not([data-target="p-iot"])      { stroke-opacity: 0.1; }

/* And the matching spoke gets brighter */
.about-svg-group:has(.about-node[data-id="p-global"]:hover)     .about-spoke[data-target="p-global"],
.about-svg-group:has(.about-node[data-id="p-enterprise"]:hover) .about-spoke[data-target="p-enterprise"],
.about-svg-group:has(.about-node[data-id="p-public"]:hover)     .about-spoke[data-target="p-public"] {
    stroke: #58c4dd;
    stroke-opacity: 0.9;
    stroke-width: 2;
}

.about-svg-group:has(.about-node[data-id="p-software-eng"]:hover) .about-spoke[data-target="p-software-eng"],
.about-svg-group:has(.about-node[data-id="p-hardware"]:hover)     .about-spoke[data-target="p-hardware"],
.about-svg-group:has(.about-node[data-id="p-software-int"]:hover) .about-spoke[data-target="p-software-int"],
.about-svg-group:has(.about-node[data-id="p-data"]:hover)         .about-spoke[data-target="p-data"],
.about-svg-group:has(.about-node[data-id="p-iot"]:hover)          .about-spoke[data-target="p-iot"] {
    stroke: #00c9a7;
    stroke-opacity: 0.9;
    stroke-width: 2;
}

.about-svg-group .about-spoke {
    transition: stroke-opacity 0.3s ease, stroke-width 0.3s ease, stroke 0.3s ease;
}

/* ─────────────────────────────────────────────────────────
   INTERACTIVITY — ILLUSTRATION 2 (Member firm)
   ───────────────────────────────────────────────────────── */

/* External arrows — slow pulse to show "exchange" */
.about-ext-arrow {
    stroke-dasharray: 4, 4;
    animation: aboutExtFlow 4s linear infinite;
}

@keyframes aboutExtFlow {
    to { stroke-dashoffset: -16; }
}

/* Peer person icons — hover lifts */
.about-peer {
    cursor: default;
    transition: transform 0.25s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.about-peer:hover {
    transform: scale(1.18);
}

.about-peer:hover circle,
.about-peer:hover path {
    stroke: #58c4dd;
    stroke-width: 2;
}

/* Show MD→lead path when hovering a peer whose lead is commercial/financial/delivery */
.about-svg-firm:has(.about-peer[data-lead="commercial"]:hover) .about-path-md-commercial,
.about-svg-firm:has(.about-peer[data-lead="financial"]:hover)  .about-path-md-financial,
.about-svg-firm:has(.about-peer[data-lead="delivery"]:hover)   .about-path-md-delivery {
    opacity: 0.85;
    animation: aboutPathPulse 1.2s ease-in-out infinite;
}

/* Show lead→peer path */
.about-svg-firm:has(.about-peer[data-peer="0"]:hover) .path-commercial-peer-0,
.about-svg-firm:has(.about-peer[data-peer="1"]:hover) .path-commercial-peer-1,
.about-svg-firm:has(.about-peer[data-peer="2"]:hover) .path-commercial-peer-2,
.about-svg-firm:has(.about-peer[data-peer="3"]:hover) .path-financial-peer-3,
.about-svg-firm:has(.about-peer[data-peer="4"]:hover) .path-financial-peer-4,
.about-svg-firm:has(.about-peer[data-peer="5"]:hover) .path-delivery-peer-5,
.about-svg-firm:has(.about-peer[data-peer="6"]:hover) .path-delivery-peer-6,
.about-svg-firm:has(.about-peer[data-peer="7"]:hover) .path-delivery-peer-7 {
    opacity: 0.85;
    animation: aboutPathPulse 1.2s ease-in-out infinite;
}

@keyframes aboutPathPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* Also highlight the relevant lead box when peer is hovered */
.about-svg-firm:has(.about-peer[data-lead="commercial"]:hover) .about-lead[data-lead="commercial"] rect,
.about-svg-firm:has(.about-peer[data-lead="financial"]:hover)  .about-lead[data-lead="financial"] rect,
.about-svg-firm:has(.about-peer[data-lead="delivery"]:hover)   .about-lead[data-lead="delivery"] rect {
    stroke: #58c4dd;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 6px rgba(88, 196, 221, 0.4));
}

/* Also highlight MD when any peer is hovered */
.about-svg-firm:has(.about-peer:hover) .about-md rect {
    stroke: #58c4dd;
    stroke-width: 1.5;
}

.about-lead rect,
.about-md rect {
    transition: stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .about-illustration-wide {
        padding: 20px 12px 18px;
    }
    .about-illustration-wide .about-illustration-label {
        font-size: 10px;
        margin-bottom: 14px;
    }
    .about-illustration-wide .about-illustration-caption {
        font-size: 12.5px;
        margin-top: 14px;
    }
    .about-tabs .ig-tabs-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* ─── Reduced motion — respect user preference ────────────── */
@media (prefers-reduced-motion: reduce) {
    .about-core-pulse,
    .about-core-glow,
    .about-svg-group .about-spokes line,
    .about-ext-arrow,
    .about-path-lines line,
    .about-path-lead-peer line {
        animation: none !important;
    }
}

/* ==== 11-methodology-values.css ==== */
/* ═══════════════════════════════════════════════════════
   11-methodology-values.css — About Page: Methodology & Values
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   PAGE-SPECIFIC styles only.
   .cta-section, .btn-dark, footer → see 08-cta.css,
   05-buttons.css, 07-footer.css.
   ═══════════════════════════════════════════════════════ */

/* ── Values section ── */
.values-section {
    background: var(--navy);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--values-grid-gap);
    align-items: stretch;
}

.value-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: var(--value-card-pad-y) var(--value-card-pad-x);
    min-height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: background var(--transition-base),
                border-color var(--transition-base);
}

.value-card:hover {
    border-color: var(--teal);
    background: var(--card-hover);
}

.value-number {
    font-size: var(--value-number-size);
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
    margin-bottom: var(--value-number-gap);
}

.value-card h3 {
    color: var(--text);
    font-size: var(--value-title-size);
    margin-bottom: var(--value-title-gap);
}

.value-card p {
    font-size: var(--value-copy-size);
    margin-bottom: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .values-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .value-card {
        padding: var(--space-lg) var(--space-md);
    }
}

/* ==== 13-services-detail.css ==== */
/* ═══════════════════════════════════════════════════════
   13-services-detail.css — Services Page: Detail Sections
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   PAGE-SPECIFIC styles only.
   .cta-section, .btn-dark, footer → see 08-cta.css,
   05-buttons.css, 07-footer.css.
   ═══════════════════════════════════════════════════════ */

/* ── Industries ── */
.industries-section {
    background: var(--navy);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .certs-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .workflow-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--workflow-grid-gap-md);
    }

    .workflow-step::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .certs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .industries-grid,
    .certs-grid,
    .workflow-grid {
        grid-template-columns: 1fr;
    }
}

/* ==== 15-contact.css ==== */
/* Contact Page */
/* === PAGE: CONTACT === */
/* ===== CONTACT SECTION ===== */
.contact-section {
    background: var(--navy-deep);
    padding: var(--contact-section-pad-y) var(--contact-section-pad-x-fluid);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--contact-grid-gap);
}

/* ===== CONTACT FORM ===== */
.contact-form-wrapper {
    background: var(--contact-form-bg);
    border: 1px solid var(--card-border);
    padding: var(--contact-form-pad);
    border-radius: 26px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ct-intent-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ct-intent-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 100%;
    padding: 22px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.015) 100%);
    text-decoration: none;
    transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.ct-intent-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 201, 167, 0.34);
    background: linear-gradient(180deg, rgba(0, 201, 167, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.ct-intent-card:focus-visible {
    outline: none;
    transform: translateY(-3px);
    border-color: rgba(0, 201, 167, 0.42);
    background: linear-gradient(180deg, rgba(0, 201, 167, 0.1) 0%, rgba(255, 255, 255, 0.035) 100%);
    box-shadow:
        0 0 0 4px rgba(0, 201, 167, 0.12),
        0 18px 42px rgba(0, 0, 0, 0.2);
}

.ct-intent-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    border-radius: 16px;
    border: 1px solid rgba(0, 201, 167, 0.2);
    background: rgba(0, 201, 167, 0.08);
    color: var(--teal);
}

.ct-intent-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.ct-intent-text h3 {
    margin-bottom: 6px;
    color: var(--text);
}

.ct-intent-text p {
    margin: 0;
    color: var(--text-dim);
}

.ct-intent-arrow {
    margin-left: auto;
    color: rgba(232, 240, 248, 0.44);
    font-size: 18px;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.ct-intent-card:hover .ct-intent-arrow {
    transform: translateX(4px);
    color: var(--teal);
}

.ct-intent-card:focus-visible .ct-intent-arrow {
    transform: translateX(4px);
    color: var(--teal);
}

.ct-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 42px;
    align-items: start;
}

.ct-form-header {
    margin-bottom: 28px;
}

.ct-form-note {
    max-width: 620px;
    color: var(--text-dim);
}

.ct-form .ig-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ct-form .ig-form-group {
    margin-bottom: 18px;
}

.ct-form .ig-form-group label {
    display: block;
    margin-bottom: 8px;
    color: rgba(232, 240, 248, 0.84);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form input[type="tel"],
.ct-form select,
.ct-form textarea,
.ig-popup-form input[type="text"],
.ig-popup-form input[type="email"],
.ig-popup-form input[type="tel"],
.ig-popup-form select,
.ig-popup-form textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text);
    padding: 15px 16px;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.ct-form input::placeholder,
.ct-form textarea::placeholder,
.ig-popup-form input::placeholder,
.ig-popup-form textarea::placeholder {
    color: rgba(232, 240, 248, 0.42);
}

.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus,
.ig-popup-form input:focus,
.ig-popup-form select:focus,
.ig-popup-form textarea:focus {
    outline: none;
    border-color: rgba(0, 201, 167, 0.5);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 4px rgba(0, 201, 167, 0.08);
}

.ct-form textarea,
.ig-popup-form textarea {
    min-height: 150px;
}

.contact-form-wrapper h2 {
    color: var(--text);
    margin-bottom: var(--contact-form-title-gap);
}

.form-group {
    margin-bottom: var(--form-group-gap);
}

.form-group label {
    display: block;
    font-size: var(--form-label-size);
    font-weight: 600;
    color: var(--muted);
    margin-bottom: var(--form-label-gap);
    text-transform: uppercase;
    letter-spacing: var(--form-label-tracking);
}

.form-group label span {
    color: var(--teal);
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: var(--form-input-bg);
    border: 1px solid var(--card-border);
    padding: var(--form-input-pad-y) var(--form-input-pad-x);
    font-family: var(--font-family-base);
    font-size: var(--form-input-font-size);
    color: var(--text);
    transition: all var(--transition-base);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--teal);
    background: var(--form-input-bg-focus);
}

.form-group textarea {
    min-height: var(--form-textarea-min);
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--muted);
    opacity: var(--form-placeholder-opacity);
}

/* ===== CONTACT PRIVACY ROW ===== */
.contact-form-wrapper .ig-form-privacy,
.contact-form-wrapper .ig-privacy-row,
.contact-form-wrapper .wpcf7-form p:has(.wpcf7-acceptance),
.contact-form-wrapper .wpcf7-form p:has([data-name="your-privacy"]) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 14px 0 18px !important;
}

.contact-form-wrapper .ig-form-privacy input[type="checkbox"],
.contact-form-wrapper .wpcf7-acceptance input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 201, 167, 0.45) !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast) !important;
}

.contact-form-wrapper .ig-form-privacy input[type="checkbox"]:checked,
.contact-form-wrapper .wpcf7-acceptance input[type="checkbox"]:checked {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 1px rgba(0, 201, 167, 0.2) !important;
}

.contact-form-wrapper .ig-form-privacy input[type="checkbox"]::after,
.contact-form-wrapper .wpcf7-acceptance input[type="checkbox"]::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #061220 !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) scale(0) !important;
    transition: transform var(--transition-fast) !important;
}

.contact-form-wrapper .ig-form-privacy input[type="checkbox"]:checked::after,
.contact-form-wrapper .wpcf7-acceptance input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1) !important;
}

.contact-form-wrapper .ig-form-privacy input[type="checkbox"]:focus-visible,
.contact-form-wrapper .wpcf7-acceptance input[type="checkbox"]:focus-visible {
    outline: none !important;
    border-color: rgba(0, 201, 167, 0.72) !important;
    box-shadow:
        0 0 0 1px rgba(6, 18, 32, 0.72),
        0 0 0 4px rgba(0, 201, 167, 0.2) !important;
}

#ig-popup-close:focus-visible,
#member-popup-close:focus-visible,
.ig-popup-close:focus-visible,
.member-popup-close:focus-visible {
    outline: none;
    border-color: rgba(0, 201, 167, 0.42);
    box-shadow:
        0 0 0 1px rgba(6, 18, 32, 0.86),
        0 0 0 4px rgba(0, 201, 167, 0.14);
}

.contact-form-wrapper .ig-form-privacy label,
.contact-form-wrapper .wpcf7-acceptance label,
.contact-form-wrapper .ig-privacy-row label,
.contact-form-wrapper .ig-privacy-row {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: clamp(9px, 2.45vw, 12px) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(232, 240, 248, 0.68) !important;
    cursor: pointer !important;
    white-space: normal !important;
}

.contact-form-wrapper .wpcf7-acceptance,
.contact-form-wrapper .wpcf7-form-control-wrap:has(.wpcf7-acceptance),
.contact-form-wrapper .wpcf7-list-item {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.contact-form-wrapper .ig-form-privacy a,
.contact-form-wrapper .wpcf7-acceptance a,
.contact-form-wrapper .ig-privacy-row a {
    color: var(--teal) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 500 !important;
}

.contact-form-wrapper .ig-form-privacy label a,
.contact-form-wrapper .wpcf7-acceptance label a {
    white-space: normal !important;
}

.ct-info-col {
    display: grid;
    gap: 18px;
}

.ct-info-block,
.ct-sla-card,
.ct-region,
.ct-pstat {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.015) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ct-info-block {
    padding: 24px 22px;
}

.ct-info-email {
    color: var(--text);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
}

.ct-info-phone-wrap {
    display: grid;
    gap: 4px;
    margin: 18px 0 12px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ct-info-phone-wrap span {
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.4;
}

.ct-info-phone {
    color: var(--teal);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
}

.ct-info-phone:hover {
    color: var(--text);
}

.ct-offices-list {
    display: grid;
    gap: 14px;
}

.ct-office-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ct-office-flag {
    font-size: 22px;
    line-height: 1;
}

.ct-office-city {
    color: var(--text);
    font-weight: 600;
}

.ct-office-note,
.ct-info-sub {
    color: var(--text-dim);
}

.ct-pstat,
.ct-region,
.ct-sla-card {
    padding: 24px 20px;
}

.ct-presence-stats,
.ct-sla-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ct-region-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.ct-region-name,
.ct-sla-time,
.ct-pstat-num {
    color: var(--text);
}

.ct-region-note,
.ct-sla-desc,
.ct-pstat-label {
    color: var(--text-dim);
}

.contact-form-wrapper .wpcf7-form p:has(.wpcf7-acceptance) > br,
.contact-form-wrapper .wpcf7-form p:has([data-name="your-privacy"]) > br {
    display: none !important;
}

/* .btn-submit → 05-buttons.css */
/* ===== CONTACT INFO ===== */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--contact-info-gap);
}

.info-card {
    background: var(--contact-form-bg);
    border: 1px solid var(--card-border);
    padding: var(--info-card-pad);
    transition: background var(--transition-base),
                border-color var(--transition-base);
}

.info-card:hover {
    border-color: var(--teal);
    background: var(--card-hover);
}

.info-card h3 {
    color: var(--text);
    font-size: var(--info-card-title-size);
    margin-bottom: var(--info-card-title-gap);
    display: flex;
    align-items: center;
    gap: var(--info-item-gap);
}

.info-card h3 svg {
    width: var(--info-card-title-icon-size);
    height: var(--info-card-title-icon-size);
    stroke: var(--teal);
    stroke-width: 1.5;
    fill: none;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--info-item-gap);
    margin-bottom: var(--info-item-bottom-gap);
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-item svg {
    width: var(--info-item-icon-size);
    height: var(--info-item-icon-size);
    stroke: var(--muted);
    stroke-width: 1.5;
    fill: none;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-item a {
    color: var(--text);
    text-decoration: none;
    font-size: var(--info-item-copy-size);
    transition: color var(--transition-base);
}

.info-item a:hover {
    color: var(--teal);
}

.info-item span {
    color: var(--muted);
    font-size: var(--info-item-copy-size);
}

/* ===== CAREERS SECTION ===== */
.careers-section {
    background: var(--grad-dark-teal);
    padding: var(--contact-section-pad-y) var(--contact-section-pad-x-fluid);
}

.careers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--careers-grid-gap);
    align-items: center;
}

.careers-content h2,
.careers-content p {
    color: var(--text);
}

.careers-content .line {
    background: var(--careers-line-color);
}

.careers-content .tag {
    color: var(--careers-tag-color);
}

.careers-content p {
    margin-top: var(--careers-copy-gap-top);
    opacity: var(--careers-copy-opacity);
    font-size: var(--careers-copy-size);
}

.careers-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--careers-cta-bg);
    border: 1px solid var(--careers-cta-border);
    padding: var(--careers-cta-pad);
    text-align: center;
    border-radius: var(--radius-lg);
}

.careers-cta-label {
    font-size: var(--careers-cta-label-size);
    color: var(--careers-cta-label-color);
    text-transform: uppercase;
    letter-spacing: var(--careers-cta-label-tracking);
    margin-bottom: var(--space-sm);
}

.careers-cta-email {
    font-size: var(--careers-cta-email-size);
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    transition: opacity var(--transition-base);
}

.careers-cta-email:hover {
    opacity: 0.8;
}

/* ===== WORKING HOURS ===== */
.hours-section {
    background: var(--navy);
    padding: var(--news-section-pad-bottom) var(--contact-section-pad-x-fluid);
}

.hours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hours-grid-gap);
    max-width: var(--hours-grid-max);
    margin: 0 auto;
}

.hours-card {
    text-align: center;
    padding: var(--hours-card-pad-y) var(--hours-card-pad-x);
    background: var(--contact-form-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
}

.hours-icon {
    width: var(--hours-icon-size);
    height: var(--hours-icon-size);
    margin: 0 auto var(--hours-icon-gap);
    color: var(--teal);
}

.hours-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.hours-card h3 {
    color: var(--text);
    font-size: var(--hours-title-size);
    margin-bottom: var(--hours-title-gap);
}

.hours-card p {
    font-size: var(--hours-copy-size);
}

/* ===== FOOTER ===== */
/* footer / .footer-simple / .footer-copy → 07-footer.css */
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .ct-intent-grid,
    .ct-presence-stats,
    .ct-sla-grid,
    .ct-region-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ct-main-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--contact-grid-gap-md);
    }
    
    .careers-grid {
        grid-template-columns: 1fr;
        gap: var(--careers-grid-gap-md);
    }
    
    .hours-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contact-form-wrapper {
        padding: var(--contact-form-pad-sm);
    }

    .ct-intent-grid,
    .ct-presence-stats,
    .ct-sla-grid,
    .ct-region-grid,
    .ct-main-grid,
    .ct-form .ig-form-row {
        grid-template-columns: 1fr;
    }

    .ct-intent-card {
        padding: 18px 16px;
        border-radius: 18px;
    }

    .contact-form-wrapper .ig-form-privacy,
    .contact-form-wrapper .ig-privacy-row,
    .contact-form-wrapper .wpcf7-form p:has(.wpcf7-acceptance),
    .contact-form-wrapper .wpcf7-form p:has([data-name="your-privacy"]) {
        gap: 8px !important;
        margin: 12px 0 16px !important;
    }

    .contact-form-wrapper .ig-form-privacy label,
    .contact-form-wrapper .wpcf7-acceptance label,
    .contact-form-wrapper .ig-privacy-row label,
    .contact-form-wrapper .ig-privacy-row {
        font-size: clamp(11px, 2.9vw, 12px) !important;
    }
    
    .info-card {
        padding: var(--info-card-pad-sm);
    }
}

/* === PAGE: JOIN === */

/* ==== 16-careers-join.css ==== */
/* ═══════════════════════════════════════════════════════
   16-careers-join.css — Careers / Join Program Page
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   PAGE-SPECIFIC styles only.
   .cta-section, .btn-dark, footer → see 08-cta.css,
   05-buttons.css, 07-footer.css.
   ═══════════════════════════════════════════════════════ */

/* ── Program section ── */
.program-section {
    background: var(--navy-deep);
}

.program-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 320px);
    gap: clamp(32px, 5vw, var(--program-intro-gap));
    align-items: start;
}

.program-content p {
    margin-bottom: var(--space-text-gap);
}

.program-content {
    max-width: none;
}

.program-badge {
    background: var(--program-badge-bg);
    border: 1px solid var(--teal-border);
    padding: var(--program-badge-pad-y) var(--program-badge-pad-x);
    text-align: center;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 320px;
    justify-self: end;
}

.program-badge-title {
    font-size: var(--program-badge-title-size);
    color: var(--teal);
    letter-spacing: var(--program-badge-title-tracking);
    margin-bottom: var(--program-badge-title-gap);
}

.program-badge-name {
    font-size: var(--program-badge-name-size);
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: var(--program-badge-name-gap);
}

.program-badge-sub {
    font-size: var(--program-badge-sub-size);
    color: var(--muted);
}

/* ── Benefits ── */
.benefits-section {
    background: var(--grad-dark-teal);
}

.benefits-section h2,
.benefits-section p {
    color: var(--text);
}

.benefits-section .line {
    background: rgba(255, 255, 255, 0.50);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--benefits-grid-gap);
    margin-top: 60px;
}

.benefit-card {
    background: var(--benefit-card-bg);
    border: 1px solid var(--teal-border);
    border-radius: var(--radius-lg);
    padding: var(--benefit-card-pad-y) var(--benefit-card-pad-x);
    transition: background var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base);
}

.benefit-card:hover {
    background: var(--benefit-card-bg-hover);
    border-color: var(--teal-border-h);
    transform: translateY(var(--benefit-card-lift));
}

.benefit-icon {
    width: var(--benefit-icon-size);
    height: var(--benefit-icon-size);
    margin-bottom: var(--benefit-icon-gap);
    color: var(--text);
}

.benefit-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.benefit-card h3 {
    color: var(--text);
    font-size: var(--benefit-title-size);
}

.benefit-card p {
    font-size: var(--benefit-copy-size);
    color: var(--benefit-copy-color);
}

/* ── Standards ── */
.standards-section {
    background: var(--navy);
}

.standards-grid {
    display: grid;
    grid-template-columns: repeat(var(--standards-grid-columns), 1fr);
    gap: var(--standards-grid-gap);
}

.standard-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: var(--standard-card-pad-y) var(--standard-card-pad-x);
    text-align: center;
    border-radius: var(--radius-lg);
    transition: background var(--transition-base),
                border-color var(--transition-base);
}

.standard-card:hover {
    border-color: var(--teal);
    background: var(--card-hover);
}

.standard-value {
    font-size: var(--standard-value-size);
    font-weight: 700;
    color: var(--teal);
    letter-spacing: var(--standard-value-tracking);
    margin-bottom: var(--standard-value-gap);
}

.standard-label {
    font-size: var(--standard-label-size);
    color: var(--muted);
    line-height: 1.6;
}

/* ── How it works ── */
.how-section {
    background: var(--navy-deep);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(var(--steps-grid-columns), 1fr);
    gap: var(--steps-grid-gap);
    margin-top: 60px;
}

.step-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: var(--step-card-pad-y) var(--step-card-pad-x);
    transition: background var(--transition-base),
                border-color var(--transition-base);
    position: relative;
    border-radius: var(--radius-lg);
}

.step-card:hover {
    border-color: var(--teal);
    background: var(--card-hover);
}

.step-number {
    font-size: var(--step-number-size);
    font-weight: 800;
    color: var(--step-number-color);
    line-height: 1;
    margin-bottom: var(--step-number-gap);
}

.step-card h3 {
    color: var(--text);
    font-size: var(--step-title-size);
    margin-bottom: var(--step-title-gap);
}

.step-card p {
    font-size: var(--step-copy-size);
    line-height: var(--service-card-copy-line-height);
}

/* ── Client benefits ── */
.client-section {
    background: var(--navy);
}

.client-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--client-grid-gap);
    align-items: start;
}

.client-content p {
    margin-bottom: var(--space-text-gap);
}

.client-example {
    background: var(--client-example-bg);
    border: 1px solid var(--card-border);
    padding: var(--client-example-pad);
    border-radius: var(--radius-lg);
}

.client-example h3 {
    color: var(--teal);
    font-size: var(--client-example-title-size);
    letter-spacing: var(--client-example-title-tracking);
    text-transform: uppercase;
    margin-bottom: var(--client-example-title-gap);
}

.example-step {
    display: flex;
    gap: var(--example-step-gap);
    margin-bottom: var(--example-step-bottom-gap);
    align-items: flex-start;
}

.example-num {
    min-width: var(--example-num-size);
    height: var(--example-num-size);
    background: var(--teal);
    color: var(--navy);
    font-size: var(--example-num-font-size);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.example-text {
    font-size: var(--example-text-size);
    color: var(--text);
    opacity: var(--example-text-opacity);
    line-height: 1.6;
}

.example-note {
    margin-top: var(--example-note-gap-top);
    padding-top: var(--example-note-pad-top);
    border-top: 1px solid var(--card-border);
    font-size: var(--example-note-size);
    color: var(--muted);
    font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .standards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .program-intro,
    .client-grid {
        grid-template-columns: 1fr;
        gap: var(--program-intro-gap-md);
    }

    .program-badge {
        max-width: none;
        justify-self: stretch;
    }

    .benefits-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
        margin-top: 36px;
    }

    .benefit-card {
        min-width: 0;
        padding: 24px 20px;
        border-radius: 18px;
    }

    .benefit-card h3,
    .benefit-card p,
    .benefit-icon {
        text-align: left;
    }

    .benefit-card p {
        max-width: none;
    }

    .standards-grid {
        grid-template-columns: 1fr;
    }

    .how-section .section-header.text-center {
        text-align: left;
    }

    .how-section .section-header.text-center > h2,
    .how-section .section-header.text-center > .tag,
    .how-section .section-header.text-center > p {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    .how-section .section-header.text-center > .line {
        margin-left: 0;
        margin-right: 0;
    }

    .steps-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
        margin-top: 32px;
    }

    .step-card {
        min-width: 0;
        padding: 24px 20px;
        border-radius: 18px;
    }

    .step-card h3,
    .step-card p {
        max-width: none;
    }
}

@media (max-width: 430px) {
    .benefits-section .container,
    .how-section .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .benefits-grid,
    .steps-grid {
        gap: 14px;
    }

    .benefit-card,
    .step-card {
        padding: 22px 18px;
    }
}



@media (max-width: 768px) {
    .program-section .container,
    .client-section .container,
    .cta-section .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .program-content {
        max-width: 100%;
    }

    .program-content p {
        margin-bottom: 16px;
    }

    .program-badge {
        padding: 34px 24px;
        min-height: 0;
    }

    .program-badge-acronym {
        font-size: clamp(44px, 14vw, 68px);
    }

    .program-badge-full {
        font-size: 16px;
        line-height: 1.35;
    }

    .benefits-section .section-header--editorial {
        margin-bottom: 0;
        max-width: none;
    }

    .benefit-card h3 {
        font-size: 22px;
        line-height: 1.28;
        margin-bottom: 10px;
    }

    .benefit-card p {
        font-size: 15px;
        line-height: 1.65;
    }

    .standards-section .section-header.text-center,
    .how-section .section-header.text-center {
        margin-bottom: 28px;
    }

    .standard-card {
        padding: 28px 22px;
    }

    .standard-value {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .standard-label {
        font-size: 15px;
        line-height: 1.55;
    }

    .step-number {
        font-size: 36px;
        margin-bottom: 14px;
    }

    .step-card h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .step-card p {
        font-size: 15px;
        line-height: 1.62;
    }

    .client-content {
        max-width: 100%;
    }

    .client-example {
        padding: 24px 20px;
    }

    .client-example h3 {
        font-size: 15px;
        line-height: 1.45;
        margin-bottom: 18px;
    }

    .example-step {
        gap: 12px;
        margin-bottom: 16px;
    }

    .example-text {
        font-size: 15px;
        line-height: 1.6;
    }

    .cta-content {
        max-width: 100%;
    }
}

@media (max-width: 430px) {
    .program-section .container,
    .benefits-section .container,
    .standards-section .container,
    .how-section .container,
    .client-section .container,
    .cta-section .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .program-badge {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .program-badge-full,
    .program-badge-since {
        font-size: 14px;
    }

    .benefit-card h3,
    .step-card h3 {
        font-size: 19px;
    }

    .benefit-card p,
    .step-card p,
    .standard-label,
    .example-text {
        font-size: 14px;
    }

    .standard-card,
    .client-example {
        border-radius: 20px;
    }
}

/* ==== 14-news.css ==== */
/* ═══════════════════════════════════════════════════════
   14-news.css — News Page Layout
   Intecracy Group Theme v3.2.0
   Dead code physically removed in v15.2 (57 blocks).
   ═══════════════════════════════════════════════════════ */

.news-excerpt {
    font-size: var(--news-excerpt-size);
    line-height: var(--service-card-copy-line-height);
    margin-bottom: var(--news-excerpt-gap);
}

/* ===== NEWS GRID ===== */
.news-section {
    background: var(--navy);
    padding: var(--news-section-pad-top) var(--news-section-pad-x-fluid) var(--news-section-pad-bottom);
}

.tag-context {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1fr);
    gap: 26px;
    align-items: stretch;
    margin: -18px 0 42px;
    padding: 24px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.tag-context__copy h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 28px;
    line-height: 1.22;
    letter-spacing: 0;
}

.tag-context__copy p {
    max-width: 600px;
    margin: 0;
    color: rgba(232,240,248,0.72);
    font-size: 15px;
    line-height: 1.7;
}

.tag-context__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--teal);
    font-family: 'Fira Code', monospace, ui-monospace;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tag-context__eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--teal);
}

.tag-context__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.tag-context__clusters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tag-context__cluster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 12px 14px;
    color: var(--text);
    text-decoration: none;
    background: rgba(15,34,64,0.54);
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 8px;
}

.tag-context__cluster:hover {
    border-color: rgba(0,210,190,0.36);
    background: rgba(0,210,190,0.07);
}

.tag-context__cluster span {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.tag-context__cluster strong {
    color: var(--teal);
    font-family: 'Fira Code', monospace, ui-monospace;
    font-size: 12px;
}

.tag-context__glossary {
    align-self: flex-start;
    color: var(--teal);
    font-family: 'Fira Code', monospace, ui-monospace;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.tag-context__glossary:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hero-author + main.archive-pad > .author-context {
    margin: 56px 0 52px;
    padding-top: 26px;
}

.hero-author + main.archive-pad > .author-context + .news-layout {
    margin-top: 0;
}

.news-layout {
    display: grid;
    grid-template-columns: 1fr var(--news-layout-sidebar);
    gap: var(--news-layout-gap);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--news-grid-gap);
}

.news-card {
    background: var(--featured-card-bg);
    border: 1px solid var(--card-border);
    transition: border-color var(--transition-base),
                transform var(--transition-base);
    overflow: hidden;
}

.news-card:hover {
    border-color: var(--teal);
    transform: translateY(var(--featured-card-lift));
}

.news-card h3 {
    font-size: var(--news-title-size-md);
    line-height: 1.5;
    margin-bottom: var(--space-tag-gap);
}

.news-card h3 a {
    color: var(--text);
    text-decoration: none;
    transition: color var(--transition-base);
}

.news-card h3 a:hover {
    color: var(--teal);
}

.news-card .news-excerpt {
    font-size: var(--news-excerpt-size-sm);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== SINGLE: RELATED POSTS ===== */
.single-article .related-posts {
    padding-top: 72px;
}

.single-article .related-posts > .section-header.section-header--editorial {
    max-width: none;
    margin-bottom: 40px;
}

.single-article .related-posts .news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.single-article .related-posts .news-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.single-article .related-posts .news-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.single-article .related-posts .news-card h3 {
    margin-bottom: 10px;
}

.single-article .related-posts .news-excerpt {
    flex: 1;
}

@media (max-width: 1024px) {
    .single-article .related-posts .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .single-article .related-posts > .section-header.section-header--editorial {
        margin-bottom: 24px;
    }

    .single-article .related-posts .news-grid {
        grid-template-columns: 1fr;
    }
}

.sidebar-widget {
    background: var(--featured-card-bg);
    border: 1px solid var(--card-border);
    padding: var(--sidebar-widget-pad);
}

.sidebar-widget h4 {
    font-size: var(--sidebar-title-size);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--sidebar-title-gap);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-widget h4 svg {
    width: var(--sidebar-title-icon-size);
    height: var(--sidebar-title-icon-size);
    stroke: var(--teal);
    stroke-width: 1.5;
    fill: none;
}

/* ════════════════════════════════════════════════
   v15.14: Single article editorial layout
   Тон ближче до Intecracy Ventures: читабельна колонка, numbered sidebar,
   TOC/card rhythm, competence block outside reading flow.
════════════════════════════════════════════════ */

.single-article {
    background: var(--navy);
}

.single-article .single-hero {
    padding-bottom: 42px;
}

.single-article .single-hero .container,
.single-article > .container {
    max-width: 1180px;
}

.single-article .single-title {
    max-width: 780px;
    letter-spacing: 0;
}

.single-article .single-excerpt {
    max-width: 760px;
    color: rgba(232,240,248,0.82);
}

.single-article .single-layout {
    grid-template-columns: minmax(0, 760px) 320px;
    justify-content: center;
    gap: 56px;
    padding-top: 42px;
}

.single-article .single-content {
    max-width: 760px;
}

.single-article .single-sidebar {
    top: 112px;
    gap: 22px;
}

.single-article .sidebar-widget,
.single-sidebar .pillar-mention {
    background: rgba(15,34,64,0.72);
    border: 1px solid rgba(255,255,255,0.085);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.single-article .sidebar-widget {
    padding: 22px 22px 24px;
}

.single-article .widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--teal);
    font-family: 'Fira Code', monospace, ui-monospace;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.single-article .widget-title::before {
    content: "";
    width: 16px;
    height: 2px;
    background: var(--teal);
    flex: 0 0 auto;
}

.single-article .sidebar-recent {
    counter-reset: sidebar-recent;
}

.single-article .sidebar-recent-item {
    counter-increment: sidebar-recent;
}

.single-article .sidebar-recent-link {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    padding: 14px 0;
}

.single-article .sidebar-recent-link::before {
    content: counter(sidebar-recent, decimal-leading-zero);
    color: var(--teal);
    font-family: 'Fira Code', monospace, ui-monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.single-article .sidebar-recent-rail {
    display: none;
}

.single-article .sidebar-recent-title {
    font-size: 13px;
    line-height: 1.45;
}

.single-sidebar .pillar-mention {
    margin: 0;
    padding: 22px;
    border-left: 1px solid rgba(255,255,255,0.085);
}

.single-sidebar .pillar-mention-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .14em;
    margin-bottom: 14px;
}

.single-sidebar .pillar-mention-label::before {
    content: "";
    width: 16px;
    height: 2px;
    background: var(--teal);
}

.single-sidebar .pillar-mention-title {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 10px;
}

.single-sidebar .pillar-mention-desc {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 14px;
}

.single-sidebar .pillar-mention-arrow {
    font-size: 12px;
}

.single-body .igng-article-body h2 {
    border-left: 1px solid rgba(0,201,167,0.6) !important;
    padding-left: 14px;
}

.single-body .igng-article-body h2::before {
    content: none !important;
    display: none !important;
}

@media (max-width: 1024px) {
    .single-article .single-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .single-article .single-content {
        max-width: none;
    }

    .single-article .single-sidebar {
        position: static;
        display: flex;
    }
}

.tag-pill {
    font-size: var(--tag-pill-size);
    color: var(--muted);
    background: var(--tag-pill-bg);
    border: 1px solid var(--card-border);
    padding: var(--tag-pill-pad-y) var(--tag-pill-pad-x);
    text-decoration: none;
    transition: all var(--transition-base);
}

.tag-pill:hover {
    color: var(--teal);
    border-color: var(--teal);
    background: var(--tag-pill-bg-hover);
}

.pagination .active {
    color: var(--navy);
    background: var(--teal);
    border-color: var(--teal);
}

@media (max-width: 1024px) {

    .tag-context {
        grid-template-columns: 1fr;
    }

    .news-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .tag-context {
        margin-bottom: 30px;
        gap: 18px;
    }

    .tag-context__copy h2 {
        font-size: 24px;
    }

    .tag-context__clusters {
        grid-template-columns: 1fr;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }
}

/* newsletter-form button → 05-buttons.css */
/* footer / .footer-simple / .footer-copy → 07-footer.css */

/* ════════════════════════════════════════════════════════════
   v15.6 — Read-more link on news cards
   Стилізовано під .btn-ghost з 00-legacy-theme.css:
   transparent bg → light teal tint, teal border colour change.
   ════════════════════════════════════════════════════════════ */
.news-card-meta .news-card-more {
    margin-left: auto; /* прижимає праворуч, лишаючи date+read зліва */
    font-size: 12px;
    font-weight: 600;
    color: var(--teal, #00c9a7);
    text-decoration: none;
    letter-spacing: .02em;
    padding: 5px 12px;
    border-radius: 4px; /* той самий радіус, що у .btn-ghost */
    border: 1.5px solid rgba(0, 201, 167, .28); /* помітна, але м'яка teal-рамка */
    background: transparent;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease;
    white-space: nowrap;
    line-height: 1.4;
}

/* Hover на самій кнопці АБО на всій картці — однаковий ефект «outlined ghost»:
   border стає solid teal, з'являється легкий teal-tint background.
   Без filled-заливки і без translate — рівно як у .btn-ghost у темі. */
.news-card-meta .news-card-more:hover,
.news-card-meta .news-card-more:focus-visible,
.news-card:hover .news-card-meta .news-card-more {
    color: var(--teal, #00c9a7);
    background: rgba(0, 201, 167, .08);
    border-color: var(--teal, #00c9a7);
    outline: none;
}

@media (max-width: 480px) {
    /* На дуже малих екранах — захиститись від переповнення в один рядок */
    .news-card-meta {
        flex-wrap: wrap;
        gap: 8px;
    }
    .news-card-meta .news-card-more {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* ════════════════════════════════════════════════
   v15.13.3: Pillar mention block (hub-and-spoke linking on single.php)
   Виводиться через intecracy_render_pillar_mention() в шаблоні single.php
════════════════════════════════════════════════ */

.pillar-mention {
    display: block;
    margin: var(--space-xl) 0;
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.06) 0%, rgba(0, 201, 167, 0.02) 100%);
    border-left: 3px solid var(--teal);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    position: relative;
}

.pillar-mention-label {
    font-family: 'Fira Code', monospace, ui-monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--teal);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.pillar-mention-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

.pillar-mention-title {
    margin: 0 0 var(--space-sm);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text);
    transition: color var(--transition-fast);
}

.pillar-mention-link:hover .pillar-mention-title {
    color: var(--teal);
}

.pillar-mention-desc {
    margin: 0 0 var(--space-md);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-dim);
}

.pillar-mention-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--teal);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
    transition: gap var(--transition-fast);
}

.pillar-mention-link:hover .pillar-mention-arrow {
    gap: 12px;
}

@media (max-width: 640px) {
    .pillar-mention {
        padding: var(--space-md);
        margin: var(--space-lg) 0;
    }
    .pillar-mention-title {
        font-size: 18px;
    }
}

/* ==== 12-services-categories.css ==== */
/* Services Page - Categories */
/* === PAGE: SERVICES === */
/* ===== SERVICE CATEGORIES ===== */
.categories-section {
    background: var(--navy-deep);
}

.categories-section .ig-tabs {
    gap: 28px;
}

.categories-section .ig-tabs-nav {
    margin-bottom: 0;
}

.categories-section .ig-tab-btn {
    min-width: 0;
}

.categories-section .ig-tab-btn:hover,
.categories-section .ig-tab-btn.active {
    color: var(--text);
}

.categories-intro {
    max-width: var(--category-intro-max);
    margin-bottom: var(--category-intro-gap);
}

.categories-intro p {
    font-size: var(--category-copy-size);
    color: var(--text);
    opacity: var(--category-copy-opacity);
}

.category-block {
    margin-bottom: var(--category-block-gap);
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.015) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.category-block:last-child {
    margin-bottom: 0;
}

.category-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--card-border);
}

.category-icon {
    width: var(--category-icon-size);
    height: var(--category-icon-size);
    background: linear-gradient(135deg, var(--teal), var(--cyan));
    border-radius: var(--category-icon-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon svg {
    width: var(--category-icon-glyph);
    height: var(--category-icon-glyph);
    stroke: var(--text);
    stroke-width: 2;
    fill: none;
}

.category-title h3 {
    font-size: var(--category-title-size);
    color: var(--text);
    margin-bottom: var(--category-title-gap);
}

.category-title span {
    font-size: var(--category-eyebrow-size);
    color: rgba(0, 201, 167, 0.86);
    letter-spacing: var(--category-eyebrow-tracking);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.service-card {
    background: var(--service-card-bg);
    border: 1px solid var(--card-border);
    padding: 22px 20px;
    border-radius: 16px;
    transition: background var(--transition-slow),
                border-color var(--transition-base),
                transform var(--transition-base);
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    border-color: var(--teal);
    background: var(--card-hover);
    transform: translateY(var(--service-card-lift));
}

.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 201, 167, 0), rgba(0, 201, 167, 0.6), rgba(0, 180, 216, 0.18));
    opacity: 0.9;
}

.service-card h4 {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.service-card p {
    font-size: 13px;
    line-height: 1.68;
    margin-bottom: var(--space-sm);
}

.service-provider {
    display: inline-flex;
    align-items: center;
    font-size: var(--service-provider-size);
    color: var(--teal);
    letter-spacing: var(--service-provider-tracking);
    opacity: var(--service-provider-opacity);
    text-transform: uppercase;
}

/* ===== FEATURED PLATFORM ===== */
.platform-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0, 201, 167, 0.10), transparent 34%),
        var(--grad-dark-teal);
    border-top: 1px solid rgba(0, 201, 167, 0.18);
    border-bottom: 1px solid rgba(0, 201, 167, 0.18);
}

.platform-layout {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    align-items: flex-end;
    margin-bottom: 34px;
}

.platform-content .tag {
    color: var(--platform-tag-color);
}

.platform-content h2 {
    color: var(--text);
    max-width: 760px;
    margin-bottom: 14px;
}

.platform-content .line {
    background: var(--platform-line-color);
}

.platform-content p {
    color: var(--platform-copy-color);
    font-size: var(--platform-copy-size);
    max-width: 760px;
    margin: 0;
}

.platform-actions {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 300px;
}

.platform-link {
    color: var(--teal);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.platform-link:hover {
    color: var(--text);
}

.platform-capabilities {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px 8px 0 0;
    background: rgba(255, 255, 255, 0.08);
}

.platform-capability {
    position: relative;
    min-height: 158px;
    padding: 24px 24px 22px;
    background: rgba(7, 21, 37, 0.38);
}

.platform-capability span {
    display: block;
    margin-bottom: 24px;
    color: var(--teal);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.platform-capability span::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 10px;
    background: rgba(0, 201, 167, 0.55);
}

.platform-capability strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 16px;
}

.platform-capability p {
    margin: 0;
    color: rgba(232, 240, 248, 0.68);
    font-size: 13px;
    line-height: 1.5;
}

.platform-proof {
    display: grid;
    grid-template-columns: minmax(180px, 0.28fr) 1fr;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: rgba(255, 255, 255, 0.06);
}

.platform-proof-label {
    display: flex;
    align-items: center;
    padding: 0 24px;
    color: rgba(232, 240, 248, 0.58);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.platform-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
}

.platform-stat {
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.045);
    text-align: left;
}

.platform-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 5px;
}

.platform-stat-label {
    font-size: 11px;
    color: var(--platform-stat-label-color);
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 1024px) {
    .categories-section .ig-tabs-nav {
        gap: 10px;
    }

    .category-block {
        padding: 24px;
        border-radius: 16px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .platform-layout {
        display: block;
    }

    .platform-actions {
        justify-content: flex-start;
        margin-top: 22px;
        min-width: 0;
    }

    .platform-capabilities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-proof {
        grid-template-columns: 1fr;
    }

    .platform-proof-label {
        min-height: 44px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
}

@media (max-width: 768px) {
    .categories-section .ig-tab-btn {
        width: calc(50% - 6px);
    }

    .category-header {
        gap: var(--category-header-gap-mobile);
        flex-direction: column;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .category-block {
        padding: 20px 18px;
        border-radius: 14px;
    }

    .platform-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .platform-capabilities {
        grid-template-columns: 1fr;
    }

    .platform-capability {
        min-height: 0;
        padding: 20px;
    }

    .platform-stat {
        padding: 16px;
        text-align: center;
    }
}

/* ==== 19-pillars.css ==== */
/* ═══════════════════════════════════════════════════════
   19-pillars.css — Pillar Pages (competency landing pages)
   Intecracy Group Theme v15.12+
   ─────────────────────────────────────────────────────
   Залежить від: 01-tokens.css, 03-base.css, 04-layout.css,
                 05-components.css, 05-buttons.css
   Conditional enqueue: тільки на template page-pillar-*.php
   ═══════════════════════════════════════════════════════ */

/* ── Section foundation ── */
.pillar-section {
    padding: var(--space-3xl) var(--section-padding-h);
    background: var(--navy);
    position: relative;
}

.pillar-section--alt {
    background: var(--navy-deep);
}

/* ── 1. INTRO — markers card ── */
.pillar-intro-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-xl);
    align-items: start;
    margin-top: var(--space-xl);
}

.pillar-intro-text p {
    font-size: 16px;
    line-height: var(--line-height-copy);
    color: var(--text);
    margin: 0 0 var(--space-md);
}

.pillar-intro-text p:last-child {
    color: var(--text-dim);
    font-size: 15px;
}

.pillar-marker-card {
    background: var(--card-bg);
    border: 1px solid var(--teal-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

.pillar-marker-card h3 {
    margin: 0 0 var(--space-md);
    font-size: 16px;
    color: var(--teal);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.pillar-marker-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pillar-marker-list li {
    position: relative;
    padding: 10px 0 10px 24px;
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.5;
    border-bottom: 1px solid var(--card-border);
}

.pillar-marker-list li:last-child { border-bottom: 0; }

.pillar-marker-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: 600;
}

/* ── 1.5. SIGNATURE — distinct marketing angle per competency ── */
.pillar-signature-section {
    padding-top: 0;
    background: var(--navy);
}

.pillar-signature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.pillar-signature-card {
    position: relative;
    min-height: 220px;
    padding: var(--space-lg);
    background:
        linear-gradient(135deg, rgba(0, 201, 167, 0.08), rgba(0, 201, 167, 0.015)),
        var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pillar-signature-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--teal);
}

.pillar-signature-label {
    margin-bottom: var(--space-sm);
    color: var(--teal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pillar-signature-card h3 {
    margin: 0 0 var(--space-sm);
    color: var(--text);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
}

.pillar-signature-card p {
    margin: 0;
    color: var(--text-dim);
    font-size: 14.5px;
    line-height: 1.65;
}

/* ── 2. POSITION — large statements ── */
.pillar-position-grid {
    display: grid;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.pillar-position-statement {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-sm) var(--space-lg);
    align-items: start;
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.04) 0%, rgba(0, 201, 167, 0.01) 100%);
    border-left: 3px solid var(--teal);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.pillar-position-num {
    grid-column: 1;
    grid-row: 1 / span 2; /* fix v15.12.2: num займає обидва рядки, щоб h3 і p стали поряд у колонці 2 */
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--teal);
    opacity: 0.5;
    font-family: var(--font-family-base);
}

.pillar-position-statement h3 {
    grid-column: 2;  /* fix v15.12.2 */
    grid-row: 1;
    margin: 0 0 var(--space-md);
    font-size: 22px;
    line-height: 1.35;
    color: var(--text);
    font-weight: 500;
}

.pillar-position-statement p {
    grid-column: 2;  /* fix v15.12.2: примусово у колонку 1fr, інакше grid кладе p у колонку 80px */
    grid-row: 2;
    margin: 0;
    font-size: 15px;
    line-height: var(--line-height-copy);
    color: var(--text-dim);
}

/* ── 3. FILTER — two columns ── */
.pillar-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.pillar-filter-col {
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    border: 1px solid var(--card-border);
    background: var(--card-bg);
}

.pillar-filter-col--yes { border-color: rgba(0, 201, 167, 0.30); }
.pillar-filter-col--no  { border-color: rgba(253, 216, 53, 0.25); }

.pillar-filter-col h3 {
    margin: 0 0 var(--space-md);
    font-size: 18px;
    font-weight: 600;
}

.pillar-filter-col--yes h3 { color: var(--teal); }
.pillar-filter-col--no  h3 { color: var(--yellow); }

.pillar-filter-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pillar-filter-col li {
    padding: 12px 0;
    font-size: 15px;
    color: var(--text);
    line-height: 1.5;
    border-bottom: 1px solid var(--card-border);
}

.pillar-filter-col li:last-child { border-bottom: 0; }

/* ── 4. PROCESS — steps ── */
.pillar-steps {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.pillar-step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: var(--space-lg);
    align-items: start;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--card-border);
}

.pillar-step:last-child { border-bottom: 0; }

.pillar-step-num {
    font-size: 32px;
    font-weight: 700;
    color: var(--teal);
    line-height: 1;
    font-family: var(--font-family-base);
}

.pillar-step-body h3 {
    margin: 0 0 8px;
    font-size: 19px;
    color: var(--text);
    font-weight: 600;
}

.pillar-step-meta {
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0.3px;
}

.pillar-step-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-dim);
}

.pillar-leads {
    margin-top: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: rgba(0, 201, 167, 0.06);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--teal);
}

.pillar-leads p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text);
}

.pillar-leads strong { color: var(--teal); }

/* ── 5. MISTAKES — anti-pattern cards ── */
.pillar-mistakes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.pillar-mistake {
    padding: var(--space-lg);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    border-top: 3px solid var(--yellow);
}

.pillar-mistake-mark {
    font-size: 28px;
    line-height: 1;
    color: var(--yellow);
    margin-bottom: var(--space-sm);
}

.pillar-mistake h3 {
    margin: 0 0 var(--space-sm);
    font-size: 18px;
    color: var(--text);
    font-weight: 600;
}

.pillar-mistake p {
    margin: 0 0 var(--space-sm);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-dim);
}

.pillar-mistake-fix {
    margin-top: var(--space-md) !important;
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--card-border);
    color: var(--text) !important;
}

.pillar-mistake-fix strong {
    color: var(--teal);
    font-weight: 600;
}

/* ── 6. CASES — case study cards ── */
.pillar-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.pillar-case {
    padding: var(--space-lg);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
}

.pillar-case:hover {
    border-color: var(--teal-border);
    transform: translateY(-2px);
}

.pillar-case-meta {
    font-size: 12px;
    color: var(--teal);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.pillar-case h3 {
    margin: 0 0 var(--space-sm);
    font-size: 17px;
    color: var(--text);
    font-weight: 600;
    line-height: 1.35;
}

.pillar-case p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
}

.pillar-case-flow {
    display: grid;
    gap: 12px;
    margin: var(--space-md) 0 0;
}

.pillar-case-flow div {
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.pillar-case-flow dt {
    margin: 0 0 4px;
    color: var(--teal);
    font-family: 'Fira Code', monospace, ui-monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pillar-case-flow dd {
    margin: 0;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.55;
}

/* ── 7. DEEP DIVES — використовуємо .news-card з 14-news.css (DRY).
   Свій лише grid-wrapper + тонка teal-риска зверху картки замість 
   повноширокого thumb з хмаринкою (бо у pillar усі статті з однієї 
   рубрики — категорійний pill не несе інформації, і повна заглушка 
   виглядає надмірною). ── */

.pillar-deepdives-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

/* Адаптер на .news-card: вирівнюємо висоту в grid + тонкий teal-акцент зверху */
.pillar-deepdive {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pillar-deepdive::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal) 0%, transparent 100%);
    z-index: 1;
}

.pillar-deepdive .pillar-deepdive-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    padding: var(--space-md) var(--space-md) 0; /* без нижнього — meta нижче має свій padding */
    flex: 1;  /* розтягує link до низу картки, meta притискається донизу */
}

.pillar-deepdive .news-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
}

.pillar-deepdive .news-card-title {
    margin: 0 0 var(--space-sm);
    font-size: 16px;
    line-height: 1.4;
    color: var(--text);
    font-weight: 600;
}

.pillar-deepdive .news-excerpt {
    margin: 0 0 var(--space-md);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-dim);
    flex: 1;
}

.pillar-deepdive .news-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.3px;
    border-top: 1px solid var(--card-border);
    margin-top: auto; /* притискає meta до низу карти */
}

.pillar-deepdive .news-card-meta .news-card-more {
    margin-left: auto;  /* кнопка «Детальніше» — у правий край як на /news/ */
    color: var(--teal);
    text-decoration: none;
    font-weight: 600;
    font-size: 12.5px;
    transition: color var(--transition-fast);
}

.pillar-deepdive .news-card-meta .news-card-more:hover {
    color: var(--teal-dark);
}

.pillar-deepdive:hover {
    border-color: var(--teal-border-h);
    transform: translateY(-2px);
}

.pillar-deepdive:hover::before {
    background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 100%);
}

.pillar-deepdives-more {
    margin-top: var(--space-xl);
    text-align: center;
}

.pillar-deepdives-empty {
    text-align: center;
    color: var(--muted);
    margin: var(--space-xl) 0;
}

/* ── 8. TECH stack ── */
.pillar-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.pillar-tech-block {
    padding: var(--space-md);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
}

.pillar-tech-block h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--teal);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.pillar-tech-block p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text);
}

/* ── 9. FAQ — accordion ── */
.pillar-faq {
    max-width: 820px;
    margin: var(--space-xl) auto 0;
}

.pillar-faq-item {
    border-bottom: 1px solid var(--card-border);
}

.pillar-faq-item summary {
    padding: var(--space-md) 0;
    font-size: 17px;
    color: var(--text);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 40px;
    transition: color var(--transition-fast);
}

.pillar-faq-item summary::-webkit-details-marker { display: none; }

.pillar-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 300;
    color: var(--teal);
    transition: transform var(--transition-fast);
    line-height: 1;
}

.pillar-faq-item[open] summary::after {
    content: "−";
}

.pillar-faq-item summary:hover { color: var(--teal); }

.pillar-faq-answer {
    padding: 0 0 var(--space-md);
    color: var(--text-dim);
}

.pillar-faq-answer p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

/* ── 10. CTA section ── */
.pillar-cta-section {
    background: linear-gradient(135deg, var(--dark-teal) 0%, var(--dark-teal-2) 100%);
    position: relative;
    overflow: hidden;
}

.pillar-cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(0, 201, 167, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.pillar-cta-inner {
    position: relative;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.pillar-cta-inner h2 {
    margin: 0 0 var(--space-md);
    font-size: 32px;
    line-height: 1.25;
    color: var(--text);
}

.pillar-cta-inner p {
    margin: 0 0 var(--space-xl);
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text-dim);
}

.pillar-alliance-note {
    max-width: 640px;
    margin: 0 auto var(--space-xl);
    padding: var(--space-md);
    text-align: left;
    background: rgba(8, 22, 41, 0.34);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}

.pillar-alliance-note__label {
    margin-bottom: 8px;
    color: var(--teal);
    font-family: 'Fira Code', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pillar-cta-inner .pillar-alliance-note p {
    margin: 0;
    color: rgba(232,240,248,0.78);
    font-size: 14.5px;
    line-height: 1.65;
}

.pillar-cta-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 980px) {
    .pillar-intro-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .pillar-cases-grid,
    .pillar-tech-grid,
    .pillar-signature-grid,
    .pillar-deepdives-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillar-mistakes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pillar-section {
        padding: var(--space-2xl) var(--space-sm);
    }

    .pillar-filter-grid,
    .pillar-mistakes-grid,
    .pillar-cases-grid,
    .pillar-tech-grid,
    .pillar-signature-grid,
    .pillar-deepdives-grid {
        grid-template-columns: 1fr;
    }

    .pillar-signature-card {
        min-height: 0;
    }

    .pillar-position-statement {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    /* fix v15.12.2: на мобільному скидаємо row-span — усі 3 елементи в одну колонку */
    .pillar-position-num,
    .pillar-position-statement h3,
    .pillar-position-statement p {
        grid-column: 1;
        grid-row: auto;
    }

    .pillar-position-num {
        font-size: 36px;
    }

    .pillar-position-statement h3 {
        font-size: 18px;
    }

    .pillar-step {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .pillar-step-num {
        font-size: 24px;
    }

    .pillar-cta-inner h2 {
        font-size: 24px;
    }
}


/* ════════════════════════════════════════════════
   v15.13.3: Related pillars grid — cross-links between pillar pages
════════════════════════════════════════════════ */

.pillar-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.pillar-related-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
    position: relative;
}

.pillar-related-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal) 0%, transparent 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.pillar-related-card h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--text);
    transition: color var(--transition-fast);
}

.pillar-related-arrow {
    font-size: 18px;
    color: var(--teal);
    transition: transform var(--transition-fast);
}

.pillar-related-card:hover {
    border-color: var(--teal-border-h);
    transform: translateY(-2px);
}

.pillar-related-card:hover h3 {
    color: var(--teal);
}

.pillar-related-card:hover .pillar-related-arrow {
    transform: translateX(4px);
}

@media (max-width: 980px) {
    .pillar-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .pillar-related-grid { grid-template-columns: 1fr; }
}

.home-pillars-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1120px) {
    .home-pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .home-pillars-grid { grid-template-columns: 1fr; }
}