/* StartAppKZ Premium UI
   Shared visual layer for the production site. Loaded after page-specific CSS. */
:root {
    --premium-bg: #050505;
    --premium-bg-soft: #0b0b0c;
    --premium-panel: rgba(20, 20, 22, .72);
    --premium-panel-strong: rgba(24, 24, 27, .9);
    --premium-panel-light: rgba(255, 255, 255, .055);
    --premium-line: rgba(255, 255, 255, .105);
    --premium-line-gold: rgba(212, 175, 55, .38);
    --premium-gold: #d4af37;
    --premium-gold-light: #f4df8c;
    --premium-silver: #d9d9df;
    --premium-muted: rgba(240, 240, 245, .68);
    --premium-shadow: 0 18px 55px rgba(0, 0, 0, .48);
    --premium-shadow-soft: 0 10px 32px rgba(0, 0, 0, .3);
    --premium-radius-xl: 30px;
    --premium-radius-lg: 24px;
    --premium-radius-md: 18px;
    --premium-radius-sm: 14px;
    --premium-blur: 22px;
    --premium-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    color-scheme: dark;
    scroll-behavior: smooth;
    background: var(--premium-bg);
}

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

body {
    background:
        radial-gradient(circle at 12% -5%, rgba(212, 175, 55, .11), transparent 26rem),
        radial-gradient(circle at 94% 26%, rgba(200, 205, 220, .055), transparent 30rem),
        linear-gradient(180deg, #050505 0%, #080809 48%, #040404 100%) !important;
    color: #f7f7f8;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .32;
    background-image:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

::selection {
    color: #080808;
    background: var(--premium-gold-light);
}

:where(a, button, summary, input, textarea, select):focus-visible {
    outline: 2px solid var(--premium-gold-light) !important;
    outline-offset: 4px;
}

:where(p, li, .section-subtitle, .section-description, .service-description,
    .article-card-excerpt, .blog-item-excerpt, .type-card p, .direction-card p,
    .erp-card p, .erp-step p) {
    color: var(--premium-muted);
}

h1, h2, h3, h4, .section-title, .article-title, .service-title,
.portfolio-item-title, .article-card-title, .blog-item-title {
    text-wrap: balance;
}

h1, .hero-title, .article-title {
    letter-spacing: -.035em !important;
}

h2, .section-title, .articles-header h1 {
    background: linear-gradient(118deg, #fff 8%, var(--premium-silver) 42%, var(--premium-gold-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-gold, .gradient-text, .logo-gold {
    background: linear-gradient(118deg, #fff2ad 0%, #d4af37 46%, #8f6f14 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

.text-silver, .silver-text, .logo-silver {
    background: linear-gradient(118deg, #fff 0%, #c9cbd1 58%, #858891 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

/* Premium floating header */
.glass-header {
    top: 10px !important;
    left: 50% !important;
    width: min(1180px, calc(100% - 24px)) !important;
    transform: translateX(-50%);
    padding: 0 !important;
    border: 1px solid var(--premium-line) !important;
    border-radius: 22px !important;
    background: rgba(12, 12, 13, .78) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .07);
    backdrop-filter: blur(var(--premium-blur)) saturate(135%) !important;
    -webkit-backdrop-filter: blur(var(--premium-blur)) saturate(135%) !important;
    overflow: visible !important;
}

.glass-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(255, 255, 255, .045), transparent 35%, rgba(212, 175, 55, .035));
}

.glass-header .container {
    padding: 0 18px !important;
}

.glass-header .header-content {
    min-height: 66px;
}

.logo {
    font-size: clamp(1.28rem, 2vw, 1.65rem) !important;
    font-weight: 600 !important;
    letter-spacing: -.04em;
}

.desktop-nav {
    gap: 6px !important;
    align-items: center;
}

.desktop-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 15px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .76) !important;
    font-size: .84rem !important;
    letter-spacing: .01em;
}

.desktop-nav a::after { display: none !important; }
.desktop-nav a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .07);
}

.burger-menu {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--premium-line) !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, .045) !important;
}

.burger-menu span {
    width: 20px !important;
    height: 1.5px !important;
    margin: 2.5px 0 !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, .9) !important;
}

/* Shared glass surfaces */
:where(.service-card, .ai-card, .portfolio-item, .blog-item-clean, .tech-category,
    .article-card, .type-card, .direction-card, .platform-card, .process-step,
    .portfolio-mini-card, .stat-item, .faq-item, .article-price-item,
    .article-lead, .article-cta, .erp-card, .erp-step) {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--premium-line) !important;
    border-radius: var(--premium-radius-lg) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018) 52%),
        rgba(13, 13, 15, .73) !important;
    box-shadow: var(--premium-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
}

:where(.service-card, .ai-card, .portfolio-item, .blog-item-clean, .article-card,
    .type-card, .direction-card, .platform-card, .portfolio-mini-card,
    .article-price-item, .erp-card, .erp-step)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244, 223, 140, .6), transparent);
    opacity: .72;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    :where(.service-card, .ai-card, .portfolio-item, .blog-item-clean, .article-card,
        .type-card, .direction-card, .platform-card, .portfolio-mini-card,
        .article-price-item, .erp-card, .erp-step):hover {
        transform: translateY(-4px) !important;
        border-color: var(--premium-line-gold) !important;
        box-shadow: var(--premium-shadow), 0 0 0 1px rgba(212, 175, 55, .07) !important;
    }
}

/* Buttons */
:where(.hero-btn, .btn-hero-primary, .btn-hero-outline, .ai-cta-btn,
    .contact-btn-simple, .article-cta-btn, .cta-btn, .blog-item-link,
    .blog-all-link, .portfolio-item-link, .portfolio-mini-link) {
    min-height: 50px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px !important;
    border: 1px solid rgba(244, 223, 140, .42) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(244, 223, 140, .13), rgba(255, 255, 255, .035)),
        rgba(15, 15, 17, .82) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 28px rgba(0, 0, 0, .32);
    color: var(--premium-gold-light) !important;
    font-size: .84rem !important;
    font-weight: 500 !important;
    letter-spacing: .055em !important;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

:where(.hero-btn, .btn-hero-primary, .btn-hero-outline, .ai-cta-btn,
    .contact-btn-simple, .article-cta-btn, .cta-btn, .blog-item-link,
    .blog-all-link, .portfolio-item-link, .portfolio-mini-link):hover {
    transform: translateY(-2px) !important;
    border-color: rgba(244, 223, 140, .8) !important;
    background: linear-gradient(135deg, rgba(244, 223, 140, .2), rgba(255, 255, 255, .07)) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 22px rgba(212, 175, 55, .1) !important;
}

:where(.hero-btn, .btn-hero-primary, .btn-hero-outline, .ai-cta-btn,
    .contact-btn-simple, .article-cta-btn, .cta-btn):active {
    transform: scale(.98) !important;
}

/* Hero and major content zones */
.hero, .service-hero, .erp-hero, .articles-page, .article-full {
    background-color: transparent !important;
}

.hero > .container,
.service-hero > .container,
.erp-hero > .container {
    position: relative;
    z-index: 2;
}

.hero-title, .service-hero h1, .erp-hero h1 {
    font-size: clamp(2.55rem, 6vw, 5rem) !important;
    line-height: 1.03 !important;
    margin-bottom: 24px !important;
}

.hero-subtitle, .service-hero-subtitle, .erp-lead {
    max-width: 760px;
    color: rgba(245, 245, 248, .72) !important;
    font-size: clamp(1rem, 2vw, 1.14rem) !important;
    line-height: 1.72 !important;
}

.section-header {
    max-width: 820px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.section-title {
    font-size: clamp(2rem, 4.5vw, 3.6rem) !important;
    font-weight: 300 !important;
    letter-spacing: -.035em !important;
    text-transform: none !important;
}

.section-subtitle, .section-description {
    font-size: clamp(.95rem, 2vw, 1.06rem) !important;
    line-height: 1.75 !important;
}

.services, .tech-stack, .ai-integration, .portfolio, .blog, .contacts,
.content-section, .erp-section, .erp-cta {
    background: transparent !important;
}

.alt-bg, .erp-section.alt {
    background: rgba(255, 255, 255, .018) !important;
    border-top: 1px solid rgba(255, 255, 255, .035);
    border-bottom: 1px solid rgba(255, 255, 255, .035);
}

.tech-pill-item, .tech-item, .direction-tag, .platform-tag, .service-badge,
.article-category, .portfolio-mini-tag, .portfolio-item-tag {
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .045) !important;
    color: var(--premium-gold-light) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.faq-btn, summary {
    min-height: 56px;
    color: #f7f7f8 !important;
    cursor: pointer;
}

.breadcrumb {
    color: rgba(255, 255, 255, .56);
}

.breadcrumb-list {
    width: fit-content;
    padding: 9px 14px !important;
    border: 1px solid var(--premium-line);
    border-radius: 999px;
    background: rgba(10, 10, 11, .64);
    backdrop-filter: blur(14px);
}

/* Blog and article reading experience */
.articles-header {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.articles-header h1 {
    font-size: clamp(2.4rem, 6vw, 4.8rem) !important;
    letter-spacing: -.055em !important;
}

.article-card, .blog-item-clean {
    padding: 24px !important;
}

.article-card-title, .blog-item-title {
    line-height: 1.34 !important;
}

.article-full .container {
    max-width: 920px !important;
}

.article-header {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

.article-title {
    font-size: clamp(2.2rem, 5.5vw, 4rem) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
}

.article-content {
    color: rgba(245, 245, 248, .82) !important;
}

.article-content h2 {
    font-size: clamp(1.65rem, 4vw, 2.35rem) !important;
    line-height: 1.18 !important;
}

.article-content h3 {
    color: #f5f5f7 !important;
}

.article-content :where(pre, table) {
    max-width: 100%;
    overflow-x: auto;
}

.article-lead {
    border-left: 1px solid var(--premium-line-gold) !important;
    padding: 28px !important;
}

/* Footer */
footer.glass-footer {
    margin-top: 72px !important;
    border-top: 1px solid var(--premium-line) !important;
    background: linear-gradient(180deg, rgba(13, 13, 15, .86), rgba(3, 3, 3, .96)) !important;
    backdrop-filter: blur(20px) !important;
}

footer.glass-footer::before {
    background: linear-gradient(90deg, transparent 10%, rgba(212, 175, 55, .65), transparent 90%) !important;
}

.footer-link, .footer-services-col a {
    min-height: 34px;
    display: inline-flex !important;
    align-items: center;
}

/* Mobile app navigation */
.premium-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(84px + var(--premium-safe-bottom));
    }

    body::before {
        background-size: 34px 34px;
    }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .glass-header {
        top: max(8px, env(safe-area-inset-top, 8px)) !important;
        width: calc(100% - 16px) !important;
        border-radius: 20px !important;
    }

    .glass-header .container {
        padding: 0 10px 0 16px !important;
    }

    .glass-header .header-content {
        min-height: 58px;
    }

    .mobile-nav {
        position: fixed !important;
        top: calc(max(8px, env(safe-area-inset-top, 8px)) + 66px);
        left: 8px;
        right: 8px;
        max-height: calc(100dvh - 170px);
        overflow-y: auto;
        display: flex !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 12px !important;
        border: 1px solid var(--premium-line) !important;
        border-radius: 22px !important;
        background: rgba(12, 12, 14, .94) !important;
        box-shadow: var(--premium-shadow);
        backdrop-filter: blur(28px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(.985);
        transform-origin: top center;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .mobile-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .mobile-nav > a {
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: 14px;
        color: rgba(255, 255, 255, .84) !important;
    }

    .mobile-nav > a:hover,
    .mobile-nav > a:active {
        background: rgba(255, 255, 255, .065);
        color: var(--premium-gold-light) !important;
    }

    .mobile-services-sub {
        margin: 0 4px 5px !important;
        padding: 5px !important;
        border: 1px solid rgba(255, 255, 255, .06) !important;
        border-radius: 15px;
        background: rgba(255, 255, 255, .025);
    }

    .mobile-services-sub a {
        min-height: 40px;
        display: flex !important;
        align-items: center;
        padding: 0 10px !important;
        border-radius: 10px;
    }

    .premium-bottom-nav {
        position: fixed;
        z-index: 1200;
        right: 8px;
        bottom: max(8px, var(--premium-safe-bottom));
        left: 8px;
        min-height: 68px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        padding: 7px 5px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 23px;
        background: rgba(14, 14, 16, .88);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .08);
        backdrop-filter: blur(26px) saturate(150%);
        -webkit-backdrop-filter: blur(26px) saturate(150%);
    }

    .premium-bottom-nav::before {
        content: "";
        position: absolute;
        top: 0;
        left: 17%;
        right: 17%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(244, 223, 140, .56), transparent);
    }

    .premium-bottom-nav__item {
        min-width: 0;
        min-height: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 5px 2px;
        border-radius: 16px;
        color: rgba(235, 235, 240, .56);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .premium-bottom-nav__item svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .premium-bottom-nav__label {
        max-width: 100%;
        overflow: hidden;
        font-family: var(--font-primary, Montserrat, sans-serif);
        font-size: 9px;
        font-weight: 500;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .premium-bottom-nav__item[aria-current="page"] {
        color: var(--premium-gold-light);
        background: linear-gradient(145deg, rgba(212, 175, 55, .14), rgba(255, 255, 255, .035));
    }

    .hero {
        min-height: auto !important;
        padding: 92px 0 38px !important;
        text-align: left !important;
    }

    .hero > .container,
    .service-hero > .container,
    .erp-hero > .container {
        padding: 28px 20px !important;
        border: 1px solid var(--premium-line);
        border-radius: var(--premium-radius-xl);
        background:
            radial-gradient(circle at 85% 10%, rgba(212, 175, 55, .13), transparent 42%),
            linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018)),
            rgba(12, 12, 14, .76);
        box-shadow: var(--premium-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
        backdrop-filter: blur(18px) saturate(130%);
        -webkit-backdrop-filter: blur(18px) saturate(130%);
    }

    .hero-title, .service-hero h1, .erp-hero h1 {
        font-size: clamp(2.05rem, 9.5vw, 3rem) !important;
        line-height: 1.04 !important;
        text-align: left !important;
    }

    .hero-subtitle, .service-hero-subtitle, .erp-lead {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
        font-size: .98rem !important;
    }

    .service-hero, .erp-hero {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .hero-actions, .cta-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    :where(.hero-btn, .btn-hero-primary, .btn-hero-outline, .ai-cta-btn,
        .contact-btn-simple, .article-cta-btn) {
        width: 100% !important;
        max-width: none !important;
        min-height: 54px;
        margin: 0 !important;
    }

    .hero-marquee { display: none !important; }

    .services, .tech-stack, .ai-integration, .portfolio, .blog, .contacts,
    .content-section, .erp-section, .erp-cta {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
    }

    .section-header {
        margin-bottom: 26px !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .section-title {
        margin: 0 0 12px !important;
        padding: 0 !important;
        font-size: clamp(1.9rem, 8vw, 2.55rem) !important;
        line-height: 1.08 !important;
        text-align: left !important;
    }

    .section-subtitle, .section-description {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    :where(.services-grid, .tech-categories, .ai-grid, .portfolio-grid,
        .blog-grid-clean, .articles-grid, .types-grid, .directions-grid,
        .platform-grid, .portfolio-mini-grid, .erp-grid, .erp-steps) {
        gap: 14px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    :where(.service-card, .ai-card, .portfolio-item, .blog-item-clean, .article-card,
        .type-card, .direction-card, .platform-card, .process-step,
        .portfolio-mini-card, .stat-item, .erp-card, .erp-step) {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 22px !important;
        border-radius: 22px !important;
        text-align: left !important;
    }

    .service-icon, .ai-icon, .type-icon, .direction-icon, .platform-icon {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .service-features, .tech-grid {
        justify-content: flex-start !important;
    }

    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .stat-item {
        padding: 14px !important;
    }

    .articles-page {
        padding-top: 98px !important;
    }

    .articles-header {
        padding: 26px 20px !important;
        border: 1px solid var(--premium-line);
        border-radius: var(--premium-radius-xl);
        background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018));
        box-shadow: var(--premium-shadow-soft);
        text-align: left !important;
    }

    .articles-header h1 {
        font-size: clamp(2.15rem, 10vw, 3.1rem) !important;
        line-height: 1.02 !important;
        text-align: left !important;
    }

    .articles-header p {
        text-align: left !important;
    }

    .article-full {
        padding-top: 98px !important;
    }

    .article-header {
        padding: 24px 18px;
        border: 1px solid var(--premium-line);
        border-radius: var(--premium-radius-xl);
        background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018));
        box-shadow: var(--premium-shadow-soft);
        text-align: left !important;
    }

    .article-title {
        font-size: clamp(2rem, 8.6vw, 2.75rem) !important;
        text-align: left !important;
    }

    .article-meta {
        justify-content: flex-start !important;
    }

    .article-content {
        font-size: 1rem !important;
        line-height: 1.78 !important;
    }

    .article-content h2 {
        margin-top: 46px !important;
    }

    .article-lead, .article-cta {
        padding: 22px !important;
    }

    .breadcrumb {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .breadcrumb-list {
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .breadcrumb-list::-webkit-scrollbar { display: none; }

    footer.glass-footer {
        margin-top: 36px !important;
        padding-bottom: calc(38px + var(--premium-safe-bottom)) !important;
    }
}

@media (max-width: 390px) {
    .premium-bottom-nav__label { font-size: 8px; }
    .premium-bottom-nav__item svg { width: 20px; height: 20px; }
    .hero > .container, .service-hero > .container, .erp-hero > .container {
        padding: 24px 17px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-header, .premium-bottom-nav, .mobile-nav,
    :where(.service-card, .ai-card, .portfolio-item, .blog-item-clean, .article-card,
        .type-card, .direction-card, .platform-card, .process-step,
        .portfolio-mini-card, .stat-item, .faq-item, .article-price-item,
        .article-lead, .article-cta, .erp-card, .erp-step) {
        background: var(--premium-panel-strong) !important;
    }
}

/* Component spacing fixes v2: prevent controls from touching glass borders. */
.tech-category {
    padding: 28px 24px !important;
}

.faq-item {
    padding: 0 !important;
}

.faq-item :where(.faq-question, .faq-btn) {
    width: 100%;
    min-height: 64px;
    padding: 19px 20px !important;
    gap: 14px;
}

.faq-item .faq-answer {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

@media (max-width: 768px) {
    .tech-category {
        padding: 20px !important;
    }

    .tech-category-title {
        margin-bottom: 18px !important;
    }

    .tech-grid {
        gap: 12px !important;
    }

    .tech-item {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 18px !important;
    }

    .faq-item :where(.faq-question, .faq-btn) {
        min-height: 66px;
        padding: 18px 17px !important;
        font-size: .94rem !important;
        line-height: 1.34 !important;
    }

    .faq-item .faq-answer {
        padding-right: 17px !important;
        padding-left: 17px !important;
    }
}