/* SEO service landing pages: fixed header safe, conversion-first, search-friendly */
.service-page {
    color: #172033;
    background: #fff;
    margin-top: clamp(122px, 8.2vw, 144px);
    animation: servicePageIn 0.52s ease-out both;
    overflow-x: hidden;
}

@keyframes servicePageIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.service-hero {
    padding: clamp(24px, 3.2vw, 34px) 0 clamp(34px, 4vw, 46px);
    background: radial-gradient(circle at 78% 12%, rgba(45, 91, 227, .11), transparent 30%), linear-gradient(135deg, #f7faff 0%, #ffffff 55%, #edf4ff 100%);
    border-bottom: 1px solid #e5ecff;
}

.service-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
    gap: clamp(28px, 4vw, 44px);
    align-items: center;
}

.service-eyebrow {
    color: #2d5be3;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .82rem;
    margin: 0 0 14px;
}

.service-hero h1 {
    font-size: clamp(2.25rem, 4.05vw, 4.05rem);
    line-height: 1.04;
    margin: 0 0 18px;
    letter-spacing: -0.055em;
    color: #0f172a;
    max-width: 820px;
}

.service-lead {
    font-size: clamp(1.03rem, 1.35vw, 1.18rem);
    line-height: 1.58;
    max-width: 760px;
    color: #46546c;
    margin: 0 0 24px;
}

.service-short-intro { display: none; }

.service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.service-btn:hover { transform: translateY(-2px); }

.service-btn--primary {
    background: #2d5be3;
    color: #fff;
    box-shadow: 0 14px 28px rgba(45, 91, 227, .22);
}

.service-btn--secondary {
    background: #fff;
    color: #2d5be3;
    border: 1px solid #cbd8ff;
}

.service-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.service-trust li {
    padding: 9px 13px;
    border-radius: 999px;
    background: #fff;
    color: #31405b;
    border: 1px solid #dfe7ff;
    font-weight: 700;
    font-size: .92rem;
}

.service-hero__media { position: relative; }

.service-hero__media::before {
    content: '';
    position: absolute;
    inset: 28px -14px -14px 26px;
    border-radius: 30px;
    background: #dce7ff;
    z-index: 0;
}

.service-hero__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: clamp(300px, 31vw, 390px);
    object-fit: contain;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 24px 55px rgba(15, 23, 42, .14);
}

.service-hero__badge {
    position: absolute;
    z-index: 2;
    left: 24px;
    bottom: 24px;
    display: grid;
    gap: 3px;
    max-width: calc(100% - 48px);
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 18px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(16px);
    box-shadow: 0 12px 30px rgba(15,23,42,.12);
}

.service-hero__badge strong { color: #0f172a; font-size: .92rem; }
.service-hero__badge span { color: #475569; font-size: .8rem; font-weight: 700; }

.service-section { padding: 56px 0; scroll-margin-top: 170px; }
.service-section--light { background: #f7f9ff; }
.service-section--included { border-bottom: 1px solid #edf2ff; }

.service-section h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.55rem);
    line-height: 1.12;
    margin: 0 0 22px;
    color: #0f172a;
    letter-spacing: -0.04em;
}

.service-section-head {
    max-width: 860px;
    margin-bottom: 28px;
}
.service-section-head h2 { margin-bottom: 12px; }
.service-section-head p:not(.service-kicker) {
    margin: 0;
    color: #5a6982;
    font-size: 1.02rem;
    line-height: 1.65;
}

.service-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.service-card {
    position: relative;
    background: #fff;
    border: 1px solid #e4eaff;
    border-radius: 20px;
    padding: 22px;
    min-height: 166px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .055);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 91, 227, .24);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

.service-card__number {
    display: inline-flex;
    color: #2d5be3;
    font-weight: 900;
    margin-bottom: 14px;
}

.service-card p { margin: 0; color: #3f4d63; line-height: 1.55; font-weight: 560; }

.service-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    gap: 18px;
    align-items: stretch;
}

.service-detail-card {
    border: 1px solid #dfe8ff;
    border-radius: 26px;
    padding: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.96));
    box-shadow: 0 18px 42px rgba(15, 23, 42, .065);
}

.service-detail-card--large {
    background: radial-gradient(circle at 92% 0%, rgba(45,91,227,.1), transparent 30%), #fff;
}

.service-detail-card h2 { margin-bottom: 14px; }
.service-detail-card p { margin: 0 0 20px; color: #3f4d63; line-height: 1.68; font-size: 1.03rem; }

.service-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.service-chip-list span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    border: 1px solid #cbd8ff;
    font-weight: 850;
    font-size: .86rem;
}

.service-clean-list {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.service-clean-list li {
    position: relative;
    padding-left: 26px;
    color: #334155;
    line-height: 1.5;
    font-weight: 650;
}
.service-clean-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .58em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #2d5be3;
    box-shadow: 0 0 0 5px rgba(45,91,227,.1);
}

.service-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    margin: 0 0 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2d5be3;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.service-section-lead {
    max-width: 760px;
    margin: -8px 0 24px;
    color: #5a6982;
    font-size: 1.02rem;
    line-height: 1.65;
}

.service-section--usecases {
    background: radial-gradient(circle at 12% 0%, rgba(45, 91, 227, .08), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.service-usecase-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(315px, .42fr);
    gap: 34px;
    align-items: stretch;
}

.service-usecase-main { min-width: 0; }

.service-usecase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.service-usecase-card {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-height: 92px;
    padding: 18px 19px;
    border: 1px solid #dfe8ff;
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .055);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-usecase-card:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 91, 227, .28);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .085);
}

.service-usecase-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    background: #2d5be3;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(45, 91, 227, .22);
}
.service-usecase-card p { margin: 2px 0 0; color: #26354d; font-weight: 700; line-height: 1.5; }

.service-estimate-card {
    position: relative;
    overflow: hidden;
    align-self: stretch;
    border-radius: 26px;
    padding: 30px;
    color: #fff;
    background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 32%), linear-gradient(135deg, #112044 0%, #2355d6 100%);
    box-shadow: 0 22px 50px rgba(17, 32, 68, .22);
}
.service-estimate-card::after {
    content: '';
    position: absolute;
    right: -56px;
    bottom: -56px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
}
.service-estimate-card__label {
    display: inline-flex;
    padding: 6px 10px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .88);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.service-estimate-card h3 { position: relative; z-index: 1; margin: 0 0 16px; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.15; }
.service-estimate-card ul { position: relative; z-index: 1; display: grid; gap: 12px; padding: 0; margin: 0 0 24px; list-style: none; }
.service-estimate-card li { position: relative; padding-left: 22px; color: rgba(255, 255, 255, .9); line-height: 1.5; }
.service-estimate-card li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.12); }
.service-estimate-card a { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; border-radius: 999px; background: #fff; color: #1d4ed8; text-decoration: none; font-weight: 900; box-shadow: 0 12px 26px rgba(0,0,0,.16); }

.service-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.service-step { background: #fff; border: 1px solid #e4eaff; border-radius: 20px; padding: 22px; min-height: 165px; box-shadow: 0 10px 24px rgba(15,23,42,.045); }
.service-step span { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #2d5be3; color: #fff; border-radius: 13px; font-weight: 900; margin-bottom: 16px; }
.service-step p { margin: 0; color: #3f4d63; line-height: 1.55; font-weight: 560; }

.service-section--seo-text { background: #fff; }
.service-text-panel {
    max-width: 1040px;
    padding: 34px;
    border: 1px solid #dfe8ff;
    border-radius: 28px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    box-shadow: 0 18px 44px rgba(15,23,42,.06);
}
.service-text-panel h2 { margin-bottom: 16px; }
.service-text-panel p:not(.service-kicker) { margin: 0 0 14px; color: #344256; line-height: 1.72; font-size: 1.02rem; }
.service-text-panel p:last-child { margin-bottom: 0; }

.service-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .52fr); gap: 36px; align-items: start; }
.service-faq { display: grid; gap: 12px; }
.service-faq details { border: 1px solid #e1e8ff; border-radius: 16px; background: #fff; padding: 0; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.service-faq details:hover { border-color: rgba(45,91,227,.22); box-shadow: 0 8px 22px rgba(15,23,42,.05); }
.service-faq summary { cursor: pointer; padding: 18px 20px; font-weight: 900; color: #18243a; }
.service-faq details p { margin: 0; padding: 0 20px 20px; color: #46546c; line-height: 1.6; }

.service-contact-box { border-radius: 24px; background: linear-gradient(135deg, #2d5be3 0%, #143eaa 100%); color: #fff; padding: 30px; box-shadow: 0 18px 42px rgba(17,32,68,.18); display: grid; gap: 12px; }
.service-contact-box h3 { margin: 0 0 8px; font-size: 1.45rem; }
.service-contact-box p { margin: 0 0 12px; line-height: 1.65; color: rgba(255,255,255,.86); }
.service-contact-box .service-btn--primary { background: #fff; color: #1d4ed8; box-shadow: none; }
.service-contact-box .service-btn--secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }

.service-section--related { background: #f7f9ff; padding-top: 44px; }
.service-related { display: flex; flex-wrap: wrap; gap: 12px; }
.service-related a { text-decoration: none; color: #2d5be3; font-weight: 850; border: 1px solid #cbd8ff; background: #fff; padding: 12px 16px; border-radius: 999px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.service-related a:hover { background: #2d5be3; color: #fff; transform: translateY(-1px); }

@media (max-width: 1180px) {
    .service-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .service-page { margin-top: 94px; }
    .service-hero__grid, .service-detail-grid, .service-usecase-layout, .service-two-col { grid-template-columns: 1fr; }
    .service-hero { padding-top: 34px; }
    .service-hero__media img { height: clamp(260px, 54vw, 360px); }
}
@media (max-width: 680px) {
    .service-page { margin-top: 76px; }
    .service-section { padding: 42px 0; }
    .service-card-grid, .service-steps, .service-usecase-grid { grid-template-columns: 1fr; }
    .service-actions, .service-trust { flex-direction: column; align-items: stretch; }
    .service-btn { width: 100%; }
    .service-detail-card, .service-estimate-card, .service-contact-box, .service-text-panel { padding: 24px; border-radius: 22px; }
    .service-hero__badge { position: static; margin-top: 14px; max-width: none; }
}


/* 2026-05 service opening position fix: compact first screen without cropping */
@media (min-width: 1200px) and (max-height: 900px) {
    .service-page { margin-top: 118px; }
    .service-hero { padding-top: 22px; padding-bottom: 32px; }
    .service-hero h1 { font-size: clamp(2.15rem, 3.55vw, 3.55rem); margin-bottom: 15px; }
    .service-lead { line-height: 1.5; margin-bottom: 18px; }
    .service-btn { min-height: 44px; padding: 10px 20px; }
    .service-trust li { padding: 8px 12px; }
    .service-hero__media img { height: clamp(280px, 28vw, 350px); }
    .service-hero__badge { bottom: 18px; left: 18px; padding: 11px 14px; }
}

@media (min-width: 1380px) and (max-height: 840px) {
    .service-hero h1 { font-size: clamp(2rem, 3.35vw, 3.3rem); }
    .service-hero__media img { height: 330px; }
}

.service-faq details:last-child,
.service-faq details:nth-last-child(2) {
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}


/* FINAL_SERVICE_IMAGES_REVERT_PATCH */
.service-hero__badge { display: none !important; }
.service-hero__media img {
    object-fit: contain;
    object-position: center;
}


/* === CITIES_INSIDE_SERVICE_PAGES_PATCH: city links inside service pages === */
.service-section--cities {
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
}

.service-city-panel {
    padding: clamp(1.2rem, 2.4vw, 1.8rem);
    border: 1px solid rgba(205, 216, 245, .92);
    border-radius: 30px;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .08), transparent 32%),
        rgba(255, 255, 255, .96);
    box-shadow: 0 18px 55px rgba(15, 23, 42, .075);
}

.service-city-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.1rem;
}

.service-city-links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .48rem .72rem;
    border-radius: 999px;
    color: var(--primary-blue);
    background: rgba(37, 99, 235, .07);
    border: 1px solid rgba(37, 99, 235, .14);
    text-decoration: none;
    font-size: .78rem;
    line-height: 1;
    font-weight: 850;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.service-city-links a:hover,
.service-city-links a:focus-visible {
    color: #fff;
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    transform: translateY(-1px);
    outline: none;
}

.service-city-links a.is-current {
    color: #9a4b12;
    background: #fff4e6;
    border-color: rgba(217, 119, 6, .22);
}
/* === /CITIES_INSIDE_SERVICE_PAGES_PATCH === */


/* === SERVICES_PAGE_OPENING_ANIMATION_PATCH === */
/* Плавное появление всех индивидуальных страниц услуг */
.service-page {
    animation: servicePageFadeIn .42s ease-out both;
}

.service-hero__content {
    animation: serviceHeroContentIn .58s cubic-bezier(.2,.75,.2,1) .04s both;
}

.service-hero__media {
    animation: serviceHeroMediaIn .62s cubic-bezier(.2,.75,.2,1) .10s both;
}

.service-actions,
.service-trust {
    animation: serviceSmallElementsIn .48s cubic-bezier(.2,.75,.2,1) .18s both;
}

.service-section--included .service-section-head {
    animation: serviceBlockIn .52s cubic-bezier(.2,.75,.2,1) .08s both;
}

.service-card {
    animation: serviceCardIn .52s cubic-bezier(.2,.75,.2,1) both;
}

.service-card:nth-child(1) { animation-delay: .08s; }
.service-card:nth-child(2) { animation-delay: .13s; }
.service-card:nth-child(3) { animation-delay: .18s; }
.service-card:nth-child(4) { animation-delay: .23s; }
.service-card:nth-child(5) { animation-delay: .28s; }
.service-card:nth-child(6) { animation-delay: .33s; }

.service-city-panel,
.service-detail-card,
.service-usecase-main,
.service-estimate-card,
.service-step,
.service-text-panel,
.service-faq details,
.service-contact-box,
.service-related a {
    animation: serviceBlockIn .55s cubic-bezier(.2,.75,.2,1) both;
}

.service-city-panel { animation-delay: .06s; }
.service-detail-card:nth-child(1) { animation-delay: .08s; }
.service-detail-card:nth-child(2) { animation-delay: .14s; }
.service-usecase-main { animation-delay: .08s; }
.service-estimate-card { animation-delay: .16s; }

.service-step:nth-child(1) { animation-delay: .08s; }
.service-step:nth-child(2) { animation-delay: .13s; }
.service-step:nth-child(3) { animation-delay: .18s; }
.service-step:nth-child(4) { animation-delay: .23s; }

.service-faq details:nth-child(1) { animation-delay: .06s; }
.service-faq details:nth-child(2) { animation-delay: .10s; }
.service-faq details:nth-child(3) { animation-delay: .14s; }
.service-faq details:nth-child(4) { animation-delay: .18s; }
.service-faq details:nth-child(5) { animation-delay: .22s; }

.service-related a:nth-child(1) { animation-delay: .04s; }
.service-related a:nth-child(2) { animation-delay: .08s; }
.service-related a:nth-child(3) { animation-delay: .12s; }
.service-related a:nth-child(4) { animation-delay: .16s; }

@keyframes servicePageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes serviceHeroContentIn {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes serviceHeroMediaIn {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.985);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes serviceSmallElementsIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes serviceCardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes serviceBlockIn {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-page,
    .service-hero__content,
    .service-hero__media,
    .service-actions,
    .service-trust,
    .service-section--included .service-section-head,
    .service-card,
    .service-city-panel,
    .service-detail-card,
    .service-usecase-main,
    .service-estimate-card,
    .service-step,
    .service-text-panel,
    .service-faq details,
    .service-contact-box,
    .service-related a {
        animation: none !important;
    }
}
/* === /SERVICES_PAGE_OPENING_ANIMATION_PATCH === */


/* Technical image source wrapper: keeps AVIF/WebP <picture> layout identical to plain img. */
.service-hero__media picture {
    display: block;
    position: relative;
    z-index: 1;
}


/* Production SEO blocks: local context, intent separation and commercial cross-links */
.service-section--local-context,
.service-section--intent-note,
.service-section--popular-links {
    background: #ffffff;
}

.service-text-panel--intent {
    border-left: 4px solid var(--primary-blue, #2563eb);
}

.service-clean-list--compact {
    margin-top: 18px;
}

.service-related--inline,
.service-related--popular {
    margin-top: 18px;
}

.service-related--inline a,
.service-related--popular a {
    text-decoration: none;
}