/* Niche pages share the palette and dimensional artwork of the main service cards. */
.niche-marketing .hero-portrait { display: contents; }
.niche-marketing .approach .section_title { margin-bottom: 40px; }
.niche-marketing .approach .content { gap: 20px; margin-bottom: 40px; text-align: left; }
.niche-marketing .approach-card {
    --approach-tint: var(--k-service-target-rgb);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 30px;
    border: 1px solid var(--k-line-soft);
    border-radius: 24px;
    background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, rgb(var(--approach-tint)) calc(var(--k-service-wash) * 100%), transparent), transparent 72%), var(--k-surface);
}
.niche-marketing .approach-card--segments { --approach-tint: var(--k-service-analysis-rgb); }
.niche-marketing .approach-card--offer { --approach-tint: var(--k-service-target-rgb); }
.niche-marketing .approach-card--storefront { --approach-tint: var(--k-service-website-rgb); }
.niche-marketing .approach-card--analytics { --approach-tint: var(--k-service-analytics-rgb); }
.niche-marketing .approach-card--leads { --approach-tint: var(--k-service-direct-rgb); }
.niche-marketing .approach-card--metrics { --approach-tint: var(--k-service-seo-rgb); }
.niche-marketing .approach .content h3 {
    position: relative;
    z-index: 1;
    width: 74%;
    min-height: 100px;
    margin-bottom: 28px;
    font-size: clamp(23px, 2.1vw, 30px);
    line-height: 1.2;
    font-weight: 500;
    color: var(--k-ink);
}
.niche-marketing .approach .content p {
    position: relative;
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.55;
    font-weight: 300;
    color: var(--k-ink-2);
}
.niche-marketing .approach-card .niche-art {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 138px;
    pointer-events: none;
    color: rgb(var(--approach-tint));
}
.niche-marketing .niche-art svg { display: block; width: 100%; height: auto; }
.niche-marketing .approach-card .niche-art svg { opacity: var(--k-service-art-opacity); }
.niche-marketing .target .content {
    position: relative;
    overflow: visible;
    border: 1px solid var(--k-line-soft);
    background: radial-gradient(ellipse at 100% 100%, var(--k-accent-pale), transparent 62%), var(--k-surface);
    padding: 48px;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    border-radius: 28px;
}
.niche-marketing .target .content p { position: relative; z-index: 1; font-size: clamp(24px, 2.55vw, 38px); }
.niche-marketing .target .content p span { color: var(--k-accent-ink); }
.niche-marketing .target-art {
    position: absolute;
    left: 50%;
    bottom: -105px;
    transform: translateX(-50%);
    width: 165px;
    color: var(--k-accent);
    pointer-events: none;
}
.niche-marketing .faq .accordion {
    max-width: 1040px;
    margin: 0 auto;
    --bs-accordion-bg: var(--k-surface);
    --bs-accordion-color: var(--k-ink-2);
}
.niche-marketing .faq .accordion-item {
    border: 1px solid var(--k-line-soft);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--k-surface);
}
.niche-marketing .faq .accordion-header { margin: 0; }
.niche-marketing .faq .accordion-button {
    padding: 24px 28px;
    gap: 24px;
    border-radius: 0;
    background: transparent;
    color: var(--k-ink);
    font-family: Roboto, sans-serif;
    font-size: clamp(18px, 1.6vw, 23px);
    font-weight: 400;
    line-height: 1.4;
    box-shadow: none;
}
.niche-marketing .faq .accordion-button:not(.collapsed) { color: var(--k-accent-ink); background: var(--k-accent-pale); }
.niche-marketing .faq .accordion-button::after {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
                linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
    color: var(--k-accent-ink);
    transform: none;
}
.niche-marketing .faq .accordion-button:not(.collapsed)::after {
    background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
}
.niche-marketing .faq .accordion-button:focus-visible { outline: 3px solid var(--k-focus); outline-offset: -4px; }
.niche-marketing .faq .accordion-body {
    padding: 4px 80px 26px 28px;
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.65;
    font-weight: 300;
    color: var(--k-ink-2);
    white-space: pre-wrap;
    background: var(--k-accent-pale);
}
@media (max-width: 1199px) {
    .niche-marketing .approach .content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .niche-marketing .target .content { gap: 50px; padding: 32px; }
    .niche-marketing .target-art { width: 150px; bottom: -100px; }
}
@media (max-width: 767px) {
    .niche-marketing .approach .content { grid-template-columns: 1fr; gap: 14px; }
    .niche-marketing .approach .section_title { margin-bottom: 24px; }
    .niche-marketing .approach-card { padding: 24px; border-radius: 20px; }
    .niche-marketing .approach .content h3 { min-height: 78px; margin-bottom: 18px; }
    .niche-marketing .approach-card .niche-art { width: 124px; }
    .niche-marketing .target .content { grid-template-columns: 1fr; padding: 26px; gap: 20px; border-radius: 22px; }
    .niche-marketing .target .content p:first-child { margin: 0; }
    .niche-marketing .target-art { width: 115px; bottom: -85px; }
    .niche-marketing .faq .accordion-button { padding: 20px; gap: 16px; }
    .niche-marketing .faq .accordion-body { padding: 0 20px 22px; }
}

/* Existing SEO copy, laid out as four readable editorial paragraphs. */
.niche-marketing .service_info .text-container { max-width: 1140px; }
.niche-marketing .service_info .section_title { margin-bottom: 36px; }
.niche-marketing .service_info .section_title h2 {
    color: var(--k-accent-ink);
    max-width: 950px;
    font-size: clamp(30px, 4.1vw, 58px);
    line-height: 1.18;
}
.niche-marketing .service_info .text_row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 48px;
    counter-reset: info-paragraph;
}
.niche-marketing .service_info .service-info-item {
    counter-increment: info-paragraph;
    border-top: 1px solid var(--k-line);
    padding-top: 20px;
    margin: 0;
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 300;
    line-height: 1.6;
    color: var(--k-ink-2);
    white-space: pre-line;
}
.niche-marketing .service-info-item::before {
    content: counter(info-paragraph, decimal-leading-zero);
    display: block;
    margin-bottom: 14px;
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--k-accent-ink);
}
.niche-marketing .service-info-item strong {
    display: block;
    margin-bottom: 12px;
    font-size: 1.12em;
    line-height: 1.4;
    font-weight: 500;
    color: var(--k-ink);
}
@media (max-width: 767px) {
    .niche-marketing .service_info .text_row { grid-template-columns: 1fr; gap: 24px; }
    .niche-marketing .service_info .section_title { margin-bottom: 24px; }
    .niche-marketing .service_info .service-info-item { padding-top: 16px; }
}

/* Main-page rhythm: 120px on desktop, 80px on phones. Reserve the rocket's footprint separately. */
.niche-marketing {
    --niche-section-gap: clamp(80px, 8.333vw, 120px);
    --niche-rocket-space: 105px;
}
.niche-marketing .service_info,
.niche-marketing .approach,
.niche-marketing .target,
.niche-marketing .service,
.niche-marketing .result,
.niche-marketing .faq,
.niche-marketing .about_me,
.niche-marketing .capture_point_main {
    padding-top: var(--niche-section-gap);
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.niche-marketing .target { padding-bottom: var(--niche-rocket-space); }
.niche-marketing .capture_point_main { padding-bottom: var(--niche-section-gap); }
.niche-marketing .capture_point_main .object-ring { top: calc(var(--niche-section-gap) - 60px); }
.niche-marketing .capture_point_main .object-elipse { top: var(--niche-section-gap); }
.niche-marketing .faq .accordion-item:last-child,
.niche-marketing .about_me .section_title { margin-bottom: 0; }
@media (max-width: 1199px) {
    .niche-marketing { --niche-rocket-space: 100px; }
}
@media (max-width: 767px) {
    .niche-marketing { --niche-rocket-space: 85px; }
}

/* Появление блоков при прокрутке. Класс niche-reveal ставит скрипт в
   <head> — без него (нет js, поиск) всё видно как есть. Блок спрятан,
   пока не доехал до экрана, и проявляется один раз, когда
   niche_marketing.js повесит niche-in. fill-mode backwards: после конца
   анимация ничего не держит и не перебивает transform под курсором. */
@keyframes niche-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .niche-reveal .niche-marketing :is(
        .service_info .section_title, .service-info-item,
        .approach .section_title, .approach-card, .approach .cta,
        .target .content, .result .section_title, .result .item,
        .faq .section_title, .faq .accordion-item,
        .about_me .section_title, .about_me .photo
    ):not(.niche-in) { opacity: 0; }
    .niche-reveal .niche-marketing .niche-in {
        animation: niche-rise .65s cubic-bezier(.22, .61, .36, 1) var(--niche-d, 0s) backwards;
    }
}

/* Uniform phone gutters, independent of legacy Bootstrap gutter overrides. */
@media (max-width: 767px) {
    .niche-marketing :is(.service_info, .approach, .target, .service, .result, .faq) {
        padding-left: 16px;
        padding-right: 16px;
    }
    .niche-marketing :is(.service_info, .approach, .target, .service, .result, .faq) > .container {
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}