/*
Theme Name: Ofimoze
Theme URI: https://ofimoze.ru
Author: Миша & Мэйбл
Description: Индивидуальная WordPress-тема для информационного проекта ofimoze.ru
Version: 1.0
Text Domain: ofimoze
*/

/* =========================================================
   BASE
   ========================================================= */

:root {
    --blue: #1765e8;
    --blue-light: #eaf3ff;

    --navy: #142343;
    --text: #263552;
    --muted: #68768d;

    --border: #e5ebf4;
    --background: #ffffff;

    --container: 1320px;

    --shadow:
        0 8px 28px rgba(33, 62, 108, .06);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Onest", Arial, Helvetica, sans-serif;
    color: var(--navy);
    background: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

.container {
    width: min(
        var(--container),
        calc(100% - 64px)
    );

    margin-inline: auto;
}

.site-main {
    overflow: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: relative;
    z-index: 100;

    background:
        rgba(255,255,255,.96);

    border-bottom:
        1px solid var(--border);
}

.site-header__inner {
    width: min(
        var(--container),
        calc(100% - 64px)
    );

    min-height: 76px;

    margin-inline: auto;

    display: flex;
    align-items: center;

    gap: 32px;
}

.site-brand {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-right: auto;

    flex-shrink: 0;
}

.site-brand__mark {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        2px solid #8eb6f4;

    border-radius: 12px;

    color: var(--blue);

    font-size: 20px;
    font-weight: 800;
}

.site-brand__text strong {
    display: block;

    color: var(--navy);

    font-size: 18px;
    line-height: 1.05;

    font-weight: 800;
}

.site-brand__text small {
    display: block;

    margin-top: 4px;

    color: #758198;

    font-size: 10px;
}

.site-nav {
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;

    gap: 31px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.site-nav__list li {
    margin: 0;
    padding: 0;
}

.site-nav__list a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 76px;

    color: #24334f;

    font-size: 12px;
    font-weight: 600;

    transition:
        color .18s ease;
}

.site-nav__list a:hover {
    color: var(--blue);
}

.site-nav__list .current-menu-item > a {
    color: var(--blue);
}

.site-nav__list .current-menu-item > a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: var(--blue);

    border-radius: 10px;
}

.site-search-toggle {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: #50617b;

    font-size: 22px;

    cursor: pointer;
}

.site-search-toggle:hover {
    color: var(--blue);
    background: #f4f7fc;
}


/* =========================================================
   HOME HERO
   ========================================================= */

.home-hero {
    padding:
        42px 0
        26px;

    background:
        radial-gradient(
            circle at 82% 15%,
            rgba(92,176,255,.10),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #fcfdff 100%
        );
}

.home-hero__grid {
    display: grid;

    grid-template-columns:
        .93fr
        1.07fr;

    gap: 58px;

    align-items: center;
}

.home-hero__content {
    min-width: 0;
}

.home-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    margin-bottom: 14px;

    padding:
        6px
        12px;

    border-radius: 999px;

    background: #eaf3ff;

    color: #2167df;

    font-size: 11px;
    font-weight: 700;
}



.home-hero__text {
    max-width: 600px;

    margin:
        18px 0 0;

    color: #596981;

    font-size: 14px;

    line-height: 1.7;
}

.home-hero__buttons {
    display: flex;

    gap: 13px;

    margin-top: 24px;
}
.home-hero__title {
    margin: 0;
    color: var(--navy);

    font-size: clamp(38px, 2.95vw, 50px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 800;
}

.home-button {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding:
        0 21px;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 700;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.home-button--primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1765e8,
            #307cf1
        );

    box-shadow:
        0 7px 18px
        rgba(23,101,232,.17);
}

.home-button--primary:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 10px 22px
        rgba(23,101,232,.22);
}

.home-button--outline {
    color: #1765e8;

    background: #fff;

    border:
        1px solid #74a1ed;
}


/* =========================================================
   HERO TRUST
   ========================================================= */

.home-hero__trust {
    display: flex;
    flex-wrap: wrap;

    gap: 22px;

    margin-top: 25px;
}

.home-trust-item {
    display: flex;
    align-items: center;

    gap: 9px;
}

.home-trust-item__icon {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;
}

.home-trust-item__icon--green {
    background: #e4f7ee;
    color: #16ae68;
}

.home-trust-item__icon--purple {
    background: #efe9ff;
    color: #7255da;
}

.home-trust-item__icon--pink {
    background: #ffe8ee;
    color: #ed5171;
}

.home-trust-item strong {
    display: block;

    color: #263552;

    font-size: 10px;

    font-weight: 700;
}

.home-trust-item small {
    display: block;

    margin-top: 2px;

    color: #788499;

    font-size: 9px;
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.home-hero__visual {
    min-height: 294px;

    display: grid;

    grid-template-columns:
        1.55fr
        .82fr;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #dff5ff,
            #e6e5ff
        );

    border:
        1px solid
        rgba(157,189,233,.30);

    box-shadow:
        var(--shadow);
}

.home-hero__picture {
    position: relative;

    min-height: 294px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 45% 45%,
            rgba(78,210,239,.40),
            transparent 28%
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(162,106,255,.32),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #b9eaff,
            #b8d5ff 55%,
            #d3c1ff
        );
}

.home-hero__picture::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    left: 20px;
    bottom: -48px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.18);
}

.home-hero__picture::after {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    right: 35px;
    bottom: 25px;

    border:
        1px solid
        rgba(255,255,255,.75);

    border-radius: 50%;
}

.home-hero__picture-placeholder {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: grid;

    align-content: center;
    justify-items: center;

    padding: 30px;

    text-align: center;

    color: #4d6d96;
}

.home-hero__picture-placeholder strong {
    font-size: 18px;
}

.home-hero__picture-placeholder small {
    max-width: 220px;

    margin-top: 7px;

    color: #557aa4;

    font-size: 10px;

    line-height: 1.4;
}

.home-hero__links {
    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 21px;

    padding:
        20px 18px;

    background:
        rgba(255,255,255,.48);
}

.home-hero-link {
    display: grid;

    grid-template-columns:
        36px
        1fr;

    gap: 9px;

    align-items: start;
}

.home-hero-link__icon {
    width: 33px;
    height: 33px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;
}

.home-hero-link__icon--blue {
    color: #2167df;
    background: #e4efff;
}

.home-hero-link__icon--green {
    color: #13aa61;
    background: #e1f7e9;
}

.home-hero-link__icon--purple {
    color: #8641e3;
    background: #eee4ff;
}

.home-hero-link strong {
    display: block;

    color: #22314d;

    font-size: 10px;
}

.home-hero-link small {
    display: block;

    margin-top: 4px;

    color: #6c798e;

    font-size: 9px;

    line-height: 1.45;
}


/* =========================================================
   QUICK ACCESS
   ========================================================= */

.quick-access {
    padding:
        12px 0
        24px;
}

.home-section-title {
    margin:
        0 0
        17px;

    text-align: center;

    color: #162440;

    font-size: 17px;
    font-weight: 800;
}

.quick-access__grid {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 14px;
}

.quick-card {
    min-height: 117px;

    display: grid;

    grid-template-columns:
        34px
        1fr;

    gap: 11px;

    padding:
        16px 14px;

    border:
        1px solid
        #e5ebf4;

    border-radius: 10px;

    box-shadow:
        0 5px 14px
        rgba(33,62,108,.04);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.quick-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 22px
        rgba(33,62,108,.08);
}

.quick-card--blue {
    background:
        linear-gradient(
            135deg,
            #f7fbff,
            #eef6ff
        );
}

.quick-card--green {
    background:
        linear-gradient(
            135deg,
            #f6fffb,
            #edfbf6
        );
}

.quick-card--mint {
    background:
        linear-gradient(
            135deg,
            #f8fff5,
            #f0faec
        );
}

.quick-card--orange {
    background:
        linear-gradient(
            135deg,
            #fffaf5,
            #fff2e7
        );
}

.quick-card--purple {
    background:
        linear-gradient(
            135deg,
            #fefaff,
            #f7edff
        );
}

.quick-card__icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #2e69e5;
    background: #e7f0ff;

    font-size: 13px;
    font-weight: 800;
}

.quick-card--green
.quick-card__icon {
    color: #21b77d;
    background: #e2f8f0;
}

.quick-card--mint
.quick-card__icon {
    color: #2eb85d;
    background: #e4f7e7;
}

.quick-card--orange
.quick-card__icon {
    color: #ee8926;
    background: #ffeddc;
}

.quick-card--purple
.quick-card__icon {
    color: #8945e5;
    background: #efe3ff;
}

.quick-card strong {
    display: block;

    color: #20304b;

    font-size: 10px;
}

.quick-card p {
    margin:
        5px 0
        9px;

    color: #6e7a8e;

    font-size: 9px;

    line-height: 1.45;
}

.quick-card__link {
    color: #1765e8;

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    margin-top: 45px;

    color: #dce7f7;

    background:
        linear-gradient(
            135deg,
            #102443,
            #071a35
        );
}

.site-footer__inner {
    width: min(
        var(--container),
        calc(100% - 64px)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        1.35fr
        1fr
        1fr
        1fr;

    gap: 55px;

    padding:
        44px 0
        38px;
}

.site-brand--footer {
    margin: 0 0 18px;
}

.site-brand--footer
.site-brand__text strong {
    color: #fff;
}

.site-brand--footer
.site-brand__text small {
    color: #9fb0c8;
}

.site-footer__brand > p {
    max-width: 260px;

    margin: 0;

    color: #b7c3d5;

    font-size: 11px;

    line-height: 1.65;
}

.site-footer__column h3 {
    margin:
        0 0
        14px;

    color: #fff;

    font-size: 12px;
}

.site-footer__menu {
    margin: 0;
    padding: 0;

    list-style: none;
}

.site-footer__menu li {
    margin-bottom: 9px;
}

.site-footer__menu a {
    color: #c1cede;

    font-size: 10px;
}

.site-footer__menu a:hover {
    color: #fff;
}

.site-footer__bottom {
    border-top:
        1px solid
        rgba(255,255,255,.09);
}

.site-footer__bottom-inner {
    width: min(
        var(--container),
        calc(100% - 64px)
    );

    margin-inline: auto;

    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.site-footer__bottom p {
    margin: 0;

    color: #8fa0b9;

    font-size: 9px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .site-nav {
        display: none;
    }

    .home-hero__grid {
        grid-template-columns: 1fr;
    }

    .quick-access__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .site-footer__inner {
        grid-template-columns:
            repeat(2, 1fr);
    }
}

@media (max-width: 700px) {

    .container,
    .site-header__inner,
    .site-footer__inner,
    .site-footer__bottom-inner {
        width:
            calc(100% - 28px);
    }

    .site-header__inner {
        min-height: 68px;
    }

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

    .home-hero__grid {
        gap: 34px;
    }

.home-hero__title {
    margin: 0;
    color: var(--navy);

    font-size: clamp(40px, 3.15vw, 53px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 800;
}

    .home-hero__text {
        font-size: 14px;
    }

    .home-hero__buttons {
        flex-direction: column;
    }

    .home-button {
        width: 100%;
    }

    .home-hero__trust {
        display: grid;
    }

    .home-hero__visual {
        grid-template-columns: 1fr;
    }

    .home-hero__picture {
        min-height: 235px;
    }

    .home-hero__links {
        padding: 20px;
    }

    .quick-access__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .site-footer__bottom-inner {
        flex-direction: column;

        align-items: flex-start;

        padding:
            16px 0;
    }
}
/* ===== READABILITY TUNING 2 ===== */

.home-hero__eyebrow {
    font-size: 14px;
}

.home-hero__text {
    font-size: 17px;
}

.home-trust-item strong {
    font-size: 13px;
}

.home-trust-item small {
    font-size: 12px;
}

.home-hero-link strong {
    font-size: 14px;
}

.home-hero-link small {
    font-size: 12px;
    line-height: 1.5;
}

.quick-card strong {
    font-size: 14px;
}

.quick-card p {
    font-size: 12px;
    line-height: 1.5;
}

.quick-card__link {
    font-size: 12px;
}

.home-section-title {
    font-size: 21px;
}
/* ===== DESKTOP PROPORTIONS — MATCH REFERENCE ===== */

:root {
    --container: 1240px;
}

.site-header__inner {
    min-height: 64px;
}

.site-nav__list a {
    min-height: 64px;
}

.site-brand__mark {
    width: 34px;
    height: 34px;
}

.site-brand__text strong {
    font-size: 16px;
}

.home-hero {
    padding-top: 28px;
    padding-bottom: 20px;
}

.home-hero__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 42px;
}

.home-hero__title {
    font-size: 41px;
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 800;
}
.home-hero__title span {
    position: relative;
    display: inline-block;
    color: #2f6fe4;
}
.hero-accent {
    position: relative;
    display: inline-block;
    color: #2f6fe4;
}

.hero-accent__underline {
    position: absolute;
    left: 2%;
    bottom: -14px;

    width: 96%;
    height: 14px;

    overflow: visible;
    pointer-events: none;
}
.hero-accent::before,
.hero-accent::after {
    content: none !important;
    display: none !important;
}


.home-hero__text {
    max-width: 520px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
}

.home-hero__buttons {
    margin-top: 18px;
}

.home-hero__trust {
    margin-top: 20px;
}

.home-hero__visual,
.home-hero__picture {
    min-height: 270px;
}

.quick-access {
    padding-top: 8px;
}

.home-section-title {
    margin-bottom: 14px;
}
/* Hero illustration */

.home-hero__picture {
    padding: 0;
    overflow: hidden;
}

.home-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 270px;

    object-fit: cover;
    object-position: center;
}
/* ===== HEADER — REFERENCE TUNING ===== */

.site-header {
    background: rgba(255,255,255,.98);
}

.site-header__inner {
    min-height: 66px;
    gap: 24px;
}

.site-brand {
    gap: 9px;
}

.site-brand__mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 17px;
}

.site-brand__text strong {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.site-brand__text small {
    margin-top: 2px;
    font-size: 9px;
}

.site-nav {
    margin-left: auto;
}

.site-nav__list {
    gap: 27px;
}

.site-nav__list a {
    min-height: 66px;
    font-size: 11px;
    font-weight: 600;
    color: #26344f;
}

.site-nav__list .current-menu-item > a::after {
    height: 2px;
}

.site-search-toggle {
    width: 34px;
    height: 34px;
    font-size: 21px;
}
/* ===== HEADER ALIGNMENT FIX ===== */

.site-brand {
    margin-right: 42px;
}

.site-nav {
    margin-left: 0;
    margin-right: auto;
}

.site-header__inner {
    justify-content: flex-start;
}

.site-search-toggle {
    margin-left: 10px;
}
/* ===== HEADER TRUE CENTER ===== */

.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-brand {
    margin-right: 0;
}

.site-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    margin: 0;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 27px;
    white-space: nowrap;
}

.site-search-toggle {
    margin-left: auto;
}
/* ===== BRAND SHIELD ===== */

.site-brand__mark {
    width: 40px;
    height: 44px;

    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
}

.site-brand__icon {
    display: block;
    width: 100%;
    height: 100%;
}
/* ===== HOME CONTENT ROW ===== */

.home-content-row {
    padding: 10px 0 20px;
}

.home-content-row__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr .95fr;
    gap: 14px;
}

.home-panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.home-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 16px 18px 10px;
}

.home-panel__head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
}

.home-panel__head a {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
}

/* ARTICLES */

.home-articles {
    display: grid;
}

.home-article-card {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 14px;
    align-items: center;

    padding: 12px 16px;

    border-top: 1px solid #edf1f6;
}

.home-article-card img,
.home-article-card__placeholder {
    width: 104px;
    height: 76px;
    border-radius: 9px;
    object-fit: cover;
}

.home-article-card__placeholder {
    display: grid;
    place-items: center;

    background:
        linear-gradient(135deg, #eaf2ff, #eef8ff);

    color: #4f77c7;
    font-size: 26px;
}

.home-article-card strong {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: var(--navy);
}

.home-article-card p {
    margin: 6px 0 6px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
}

.home-article-card small {
    color: #8995a7;
    font-size: 10px;
}

/* IMPORTANT */

.home-panel--important {
    background:
        linear-gradient(135deg, #ffffff, #f8fbff);
}

.important-list {
    padding: 0 18px 8px;
}

.important-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 11px 0;
}

.important-item span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    flex-shrink: 0;

    border-radius: 50%;
    background: #1f73ef;
    color: #fff;

    font-size: 11px;
    font-weight: 800;
}

.important-item p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #34435d;
}

.important-note {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;

    margin: 10px 16px 16px;
    padding: 12px 14px;

    border-radius: 10px;
    background: #eaf3ff;
}

.important-note__icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;

    border: 1px solid #3075e8;
    border-radius: 50%;

    color: #3075e8;
    font-weight: 800;
}

.important-note p {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.5;
    color: #2c5ca8;
}

/* TIPS */

.tips-list {
    padding: 0 16px 10px;
}

.tip-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: center;

    padding: 10px 0;

    border-top: 1px solid #edf1f6;
}

.tip-item:first-child {
    border-top: 0;
}

.tip-item span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;

    border-radius: 50%;
    background: #e5faf6;

    color: #1cb7a3;
    font-size: 14px;
    font-weight: 800;
}

.tip-item p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #34435d;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .home-content-row__grid {
        grid-template-columns: 1fr;
    }
}
/* ===== HOME SECONDARY ROW ===== */

.home-secondary-row {
    padding: 0 0 26px;
}

.home-secondary-row__grid {
    display: grid;
    grid-template-columns: 1fr 1fr .95fr;
    gap: 14px;
}

/* FAQ */

.faq-list {
    padding: 0 16px 12px;
}

.faq-item {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: center;

    padding: 10px 0;
    border-top: 1px solid #edf1f6;
}

.faq-item:first-child {
    border-top: 0;
}

.faq-item span {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: #f1e7ff;

    color: #8a4ce7;
    font-weight: 800;
}

.faq-item p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #34435d;
}

/* MYTHS */

.myths-list {
    padding: 0 16px 12px;
}

.myth-item {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: start;

    padding: 10px 0;
    border-top: 1px solid #edf1f6;
}

.myth-item:first-child {
    border-top: 0;
}

.myth-item__icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: #f0e6ff;

    color: #8a46e8;
    font-size: 12px;
    font-weight: 800;
}

.myth-item--fact .myth-item__icon {
    background: #e4f8ef;
    color: #1bae6d;
}

.myth-item p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #34435d;
}

/* SUBSCRIBE */

.home-subscribe-card {
    min-height: 100%;

    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 16px;
    align-items: center;

    padding: 22px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #edf7ff 0%,
            #e7f0ff 45%,
            #ede5ff 100%
        );

    border: 1px solid #dfe8f7;

    box-shadow: var(--shadow);
}

.home-subscribe-card__icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #d9f6ff,
            #e5ddff
        );

    color: #3a74e8;
    font-size: 27px;
}

.home-subscribe-card__content h2 {
    margin: 0 0 7px;

    font-size: 18px;
    color: var(--navy);
}

.home-subscribe-card__content p {
    margin: 0 0 16px;

    font-size: 11px;
    line-height: 1.5;
    color: #607089;
}

.home-subscribe-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.home-subscribe-form input {
    min-width: 0;
    height: 40px;

    padding: 0 12px;

    border: 1px solid #dce5f2;
    border-radius: 7px;

    background: #fff;

    color: #28364f;
}

.home-subscribe-form input::placeholder {
    color: #9aa6b7;
}

.home-subscribe-form button {
    height: 40px;

    padding: 0 17px;

    border: 0;
    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #276de9,
            #704ee8
        );

    color: #fff;

    font-weight: 700;
    cursor: pointer;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .home-secondary-row__grid {
        grid-template-columns: 1fr;
    }
}
/* ===== LOWER HOME ROW — MATCH ORIGINAL DESIGN ===== */

.home-secondary-row {
    padding-top: 8px;
    padding-bottom: 14px;
}

.home-secondary-row__grid {
    display: grid;
    grid-template-columns: 1.08fr 1.08fr 0.95fr;
    gap: 12px;
    align-items: stretch;
}

/* Все три блока делаем компактными */
.home-secondary-row .home-panel,
.home-secondary-row .home-subscribe-card {
    min-height: 0;
    height: 190px;
}

/* Заголовки */
.home-secondary-row .home-panel__header {
    padding: 12px 16px 7px;
}

/* Списки */
.home-secondary-row .faq-list,
.home-secondary-row .myths-list {
    padding: 0 16px 10px;
}

/* Одна строка */
.home-secondary-row .faq-item,
.home-secondary-row .myth-item {
    min-height: 0;
    padding: 5px 0;
    gap: 8px;
}

/* Маленькие круглые значки */
.home-secondary-row .faq-item span,
.home-secondary-row .myth-item__icon {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

/* Плотный текст как в исходном макете */
.home-secondary-row .faq-item p,
.home-secondary-row .myth-item p {
    margin: 0;
    font-size: 12px;
    line-height: 1.18;
}

/* Убираем искусственное растягивание содержимого */
.home-secondary-row .home-panel {
    overflow: hidden;
}
/* ===== LOWER ROW FINAL TUNING ===== */

.home-secondary-row .home-panel,
.home-secondary-row .home-subscribe-card {
    height: 210px;
}

/* Ещё плотнее строки */
.home-secondary-row .faq-item,
.home-secondary-row .myth-item {
    padding: 4px 0;
}

.home-secondary-row .faq-item p,
.home-secondary-row .myth-item p {
    font-size: 11.5px;
    line-height: 1.15;
}

/* Компактная подписка как в основном макете */
.home-subscribe-card {
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-content: center;

    padding: 18px 20px;

    background:
        linear-gradient(
            135deg,
            #eef7ff 0%,
            #e7efff 48%,
            #e9e0ff 100%
        );
}

.home-subscribe-card__icon {
    width: 48px;
    height: 48px;

    font-size: 22px;
}

.home-subscribe-card__content h2 {
    margin-bottom: 5px;

    font-size: 16px;
}

.home-subscribe-card__content p {
    margin-bottom: 12px;

    font-size: 10.5px;
    line-height: 1.4;
}

.home-subscribe-form {
    gap: 8px;
}

.home-subscribe-form input,
.home-subscribe-form button {
    height: 36px;
}

.home-subscribe-form input {
    padding: 0 10px;
    font-size: 11px;
}

.home-subscribe-form button {
    padding: 0 14px;
    font-size: 11px;
}
/* ===== SUBSCRIBE — MATCH APPROVED DESIGN ===== */

.home-secondary-row__grid {
    grid-template-columns: 1.08fr 1.08fr .95fr;
    gap: 12px;
    align-items: stretch;
}

.home-secondary-row .home-panel,
.home-secondary-row .home-subscribe-card {
    height: 210px;
}

/* Карточка подписки */

.home-subscribe-card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 24px;

    border: 1px solid #d9e2f3;
    border-radius: 12px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(119, 202, 255, .20),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #eaf5ff 0%,
            #dfe8ff 48%,
            #d9c9ff 100%
        );

    box-shadow: var(--shadow);
}

.home-subscribe-card__top {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    align-items: center;

    margin-bottom: 18px;
}

.home-subscribe-card__icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,.78);

    color: #6c3ce8;

    font-size: 27px;
    line-height: 1;

    box-shadow:
        0 8px 20px
        rgba(90, 75, 180, .10);
}

.home-subscribe-card__text h2 {
    margin: 0 0 5px;

    color: var(--navy);

    font-size: 18px;
    font-weight: 800;
}

.home-subscribe-card__text p {
    margin: 0;

    color: #52617c;

    font-size: 11px;
    line-height: 1.4;
}

.home-subscribe-form {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 12px;

    width: 100%;
}

.home-subscribe-form input {
    width: 100%;
    min-width: 0;
    height: 38px;

    padding: 0 14px;

    border: 1px solid rgba(205, 216, 235, .95);
    border-radius: 7px;

    background: rgba(255,255,255,.95);

    color: #25334e;

    font-size: 12px;

    outline: none;
}

.home-subscribe-form button {
    height: 38px;

    padding: 0 18px;

    border: 0;
    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #3477ec 0%,
            #7242dc 100%
        );

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 16px
        rgba(91, 62, 210, .16);
}
/* =========================================================
   SUBSCRIBE — APPROVED DESIGN
   ========================================================= */

.home-subscribe-card {
    position: relative;
    overflow: hidden;

    height: 210px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 24px;

    border: 1px solid #d9e0f4;
    border-radius: 12px;

    background:
        radial-gradient(
            circle at 16% 25%,
            rgba(80, 194, 255, .38),
            transparent 33%
        ),
        radial-gradient(
            circle at 88% 26%,
            rgba(174, 106, 255, .26),
            transparent 34%
        ),
        linear-gradient(
            125deg,
            #d8f1ff 0%,
            #d9e6ff 43%,
            #d8c7ff 100%
        );

    box-shadow:
        0 8px 24px rgba(57, 76, 125, .08);
}


/* Верхняя часть */

.home-subscribe-card__top {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 16px;
    align-items: center;

    margin-bottom: 17px;
}

.home-subscribe-card__icon {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .84);

    box-shadow:
        0 8px 20px rgba(79, 74, 160, .10);
}

.home-subscribe-card__plane {
    width: 43px;
    height: 43px;
}

.home-subscribe-card__text h2 {
    margin: 0 0 5px;

    color: #172746;

    font-size: 18px;
    line-height: 1.15;
    font-weight: 800;
}

.home-subscribe-card__text p {
    margin: 0;

    color: #465778;

    font-size: 11px;
    line-height: 1.45;
}


/* Форма */

.home-subscribe-form {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px;
}

.home-subscribe-form input {
    min-width: 0;
    height: 38px;

    padding: 0 13px;

    border: 1px solid rgba(211, 220, 238, .95);
    border-radius: 7px;

    outline: none;

    background: rgba(255,255,255,.94);

    color: #25334e;

    font-size: 12px;

    box-shadow:
        inset 0 1px 2px rgba(27, 50, 86, .03);
}

.home-subscribe-form input::placeholder {
    color: #8b98ac;
}

.home-subscribe-form button {
    height: 38px;

    padding: 0 17px;

    border: 0;
    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #3978ee,
            #713ee0
        );

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(91, 59, 207, .19);
}


/* Декоративные элементы */

.home-subscribe-decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.home-subscribe-decor--diamond {
    width: 10px;
    height: 10px;

    top: 13px;
    left: 18px;

    border: 1px solid rgba(255,255,255,.85);

    transform: rotate(45deg);
}

.home-subscribe-decor--triangle {
    width: 13px;
    height: 13px;

    top: 14px;
    right: 42px;

    border-left: 1px solid rgba(255,255,255,.8);
    border-top: 1px solid rgba(255,255,255,.8);

    transform: rotate(45deg);
}

.home-subscribe-decor--circle {
    width: 17px;
    height: 11px;

    top: 55px;
    right: 16px;

    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
}

.home-subscribe-decor--dots {
    width: 48px;
    height: 24px;

    top: 18px;
    right: 70px;

    opacity: .35;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 1.3px,
            transparent 1.5px
        );

    background-size: 8px 8px;
}
/* ===== SECONDARY ROW ALIGNMENT ===== */

.home-secondary-row__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.95fr;
    gap: 14px;
    align-items: stretch;
}

/* Все три блока одинаковой высоты */
.home-secondary-row__grid > .home-panel,
.home-secondary-row__grid > .home-subscribe-card {
    height: 100%;
    min-height: 210px;
}

/* Внутри FAQ и мифов распределяем контент плотнее */
.home-panel--faq,
.home-panel--myths {
    display: flex;
    flex-direction: column;
}

.home-panel--faq .faq-list,
.home-panel--myths .myths-list {
    flex: 1;
}

/* Подписка должна растягиваться ровно по высоте ряда */
.home-secondary-row__grid > .home-subscribe-card {
    align-self: stretch;
}

/* Убираем лишний внешний воздух между верхним и нижним рядами */
.home-content-row {
    padding-bottom: 10px;
}

.home-secondary-row {
    padding-top: 0;
}
/* ===== ONE COLUMN GRID FOR BOTH ROWS ===== */

.home-content-row__grid,
.home-secondary-row__grid {
    display: grid;
    grid-template-columns: 1.08fr 1fr 1fr;
    gap: 14px;
}
/* =========================================================
   FOOTER — APPROVED HOMEPAGE DESIGN
   ========================================================= */

.site-footer {
    position: relative;
    overflow: hidden;

    margin-top: 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 92% 115%,
            rgba(85, 61, 230, .28),
            transparent 27%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(24, 164, 255, .20),
            transparent 21%
        ),
        linear-gradient(
            120deg,
            #0d274c 0%,
            #0b2345 55%,
            #0b1f3e 100%
        );
}


/* Основная сетка */

.site-footer__inner {
    width: min(100% - 48px, 1390px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.25fr .9fr .95fr 1.05fr;
    gap: 70px;

    padding: 34px 0 24px;
}


/* Бренд */

.site-footer .site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #fff;
    text-decoration: none;
}

.site-footer .site-brand__mark {
    width: 38px;
    height: 42px;
    flex: 0 0 38px;
}

.site-footer .site-brand__icon {
    display: block;
    width: 100%;
    height: 100%;
}

.site-footer .site-brand__text {
    display: flex;
    flex-direction: column;
}

.site-footer .site-brand__text strong {
    color: #fff;

    font-size: 17px;
    line-height: 1.1;
    font-weight: 800;
}

.site-footer .site-brand__text small {
    margin-top: 3px;

    color: rgba(255,255,255,.66);

    font-size: 9px;
    line-height: 1.2;
}


/* Описание */

.site-footer__description {
    max-width: 225px;

    margin: 15px 0 16px;

    color: rgba(255,255,255,.78);

    font-size: 11px;
    line-height: 1.55;
}


/* Соцсети */

.site-footer__socials {
    display: flex;
    gap: 9px;
}

.site-footer__socials a {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,.12);

    color: #fff;
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    transition:
        background .2s ease,
        transform .2s ease;
}

.site-footer__socials a:hover {
    background: rgba(255,255,255,.20);
    transform: translateY(-2px);
}


/* Колонки */

.site-footer__column h3 {
    margin: 2px 0 11px;

    color: #fff;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.site-footer__menu {
    margin: 0;
    padding: 0;

    list-style: none;
}

.site-footer__menu li {
    margin: 0;
    padding: 0;
}

.site-footer__menu a {
    display: inline-block;

    padding: 2px 0;

    color: rgba(255,255,255,.80);

    font-size: 10.5px;
    line-height: 1.35;

    text-decoration: none;

    transition: color .2s ease;
}

.site-footer__menu a:hover {
    color: #62c7ff;
}


/* Нижняя линия */

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.10);
}

.site-footer__bottom-inner {
    width: min(100% - 48px, 1390px);
    min-height: 36px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.site-footer__bottom p {
    margin: 0;

    color: rgba(255,255,255,.55);

    font-size: 9px;
    line-height: 1.3;
}


/* Декор справа в духе основного макета */

.site-footer::before {
    content: "";

    position: absolute;
    right: -45px;
    bottom: -75px;

    width: 250px;
    height: 145px;

    border-radius: 50% 45% 0 0;

    background:
        radial-gradient(
            circle at 30% 25%,
            #41c5ff 0 12%,
            transparent 13%
        ),
        radial-gradient(
            circle at 63% 38%,
            #8565ff 0 20%,
            transparent 21%
        ),
        linear-gradient(
            145deg,
            rgba(29,157,255,.85),
            rgba(126,54,238,.88)
        );

    opacity: .82;

    transform: rotate(-7deg);

    pointer-events: none;
}

.site-footer::after {
    content: "";

    position: absolute;
    right: 175px;
    bottom: 84px;

    width: 85px;
    height: 45px;

    border-top: 1px solid rgba(72,181,255,.55);

    transform: rotate(-28deg);

    pointer-events: none;
}


/* Планшеты */

@media (max-width: 900px) {

    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px 50px;
    }
}


/* Телефоны */

@media (max-width: 600px) {

    .site-footer__inner {
        width: min(100% - 32px, 1390px);

        grid-template-columns: 1fr;
        gap: 26px;

        padding-top: 30px;
    }

    .site-footer__bottom-inner {
        width: min(100% - 32px, 1390px);

        flex-direction: column;
        align-items: flex-start;

        padding: 12px 0;
    }
}
/* ===== FOOTER — FINAL TUNING TO APPROVED DESIGN ===== */

.site-footer__inner {
    grid-template-columns: 1.2fr .9fr .95fr 1fr;
    gap: 64px;
    padding-top: 38px;
    padding-bottom: 30px;
}

/* Логотип и описание */

.site-footer .site-brand__text strong {
    font-size: 20px;
}

.site-footer .site-brand__text small {
    font-size: 11px;
}

.site-footer__description {
    max-width: 280px;
    margin-top: 18px;
    margin-bottom: 0;

    font-size: 13px;
    line-height: 1.55;
}

/* Соцсети ниже описания, как в макете */

.site-footer__socials {
    margin-top: 18px;
    gap: 12px;
}

.site-footer__socials a {
    width: 36px;
    height: 36px;

    font-size: 12px;
}

/* Заголовки колонок */

.site-footer__column h3 {
    margin-bottom: 14px;

    font-size: 15px;
}

/* Ссылки */

.site-footer__menu a {
    padding: 3px 0;

    font-size: 13px;
    line-height: 1.4;
}

/* Нижняя строка */

.site-footer__bottom-inner {
    min-height: 52px;
}

.site-footer__bottom p {
    font-size: 11px;
}

/* Левый копирайт */
.site-footer__bottom-inner p:first-child {
    text-align: left;
}

/* Правый текст не прижимаем к самому краю */
.site-footer__bottom-inner p:last-child {
    margin-right: 180px;
    text-align: right;
}
/* ===== FOOTER VECTOR ART ===== */

.site-footer {
    position: relative;
    overflow: hidden;
}

.site-footer__art {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 420px;
    height: 230px;

    pointer-events: none;
    z-index: 1;
}

.site-footer__art-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.site-footer__inner,
.site-footer__bottom {
    position: relative;
    z-index: 2;
}
/* ===== FOOTER LEFT VECTOR ART ===== */

.site-footer__art-left {
    position: absolute;

    left: 0;
    bottom: 42px;

    width: 260px;
    height: 150px;

    pointer-events: none;
    z-index: 1;
}

.site-footer__art-left-svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* ===== FOOTER LINKS POLISH ===== */

.site-footer a {
    transition:
        color .2s ease,
        transform .2s ease;
}

/* Ссылки внутри колонок */
.site-footer__nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Маленький маркер */
.site-footer__nav a::before {
    content: "";
    width: 0;
    height: 6px;
    border-radius: 50%;
    background: #35bfff;

    opacity: 0;
    transform: scale(0);

    transition:
        width .2s ease,
        opacity .2s ease,
        transform .2s ease;
}

.site-footer__nav a:hover {
    color: #67d4ff;
    transform: translateX(4px);
}

.site-footer__nav a:hover::before {
    width: 6px;
    opacity: 1;
    transform: scale(1);
}
/* ===== FOOTER LINKS — CORRECTED ===== */

/* Заголовки колонок */
.site-footer__column h3 {
    position: relative;
    padding-bottom: 9px;
    margin-bottom: 10px;
}

.site-footer__column h3::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 28px;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #38c7ff,
            #6b57ef
        );
}


/* Ссылки */

.site-footer__menu a {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 4px 0;

    transition:
        color .18s ease,
        transform .18s ease;
}


/* Небольшой спокойный маркер */

/* ===== FOOTER LINKS HOVER ===== */

.site-footer__menu a {
    position: relative;
    display: inline-block;

    padding: 4px 0;

    transition: color .18s ease;
}

/* Голубая точка слева */
.site-footer__menu a::before {
    content: "";

    position: absolute;
    left: -14px;
    top: 50%;

    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #42c8ff;

    opacity: 0;
    transform: translateY(-50%) scale(.4);

    box-shadow: 0 0 8px rgba(66, 200, 255, .45);

    transition:
        opacity .18s ease,
        transform .18s ease;
}

/* Наведение — текст не двигаем */
.site-footer__menu a:hover {
    color: #69d4ff;
    transform: none;
}

/* Показываем точку */
.site-footer__menu a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
/* ===== HEADER NAVIGATION INTERACTION ===== */

.site-nav__list a {
    position: relative;

    color: #26344f;

    transition: color .2s ease;
}

/* Цветная линия */
.site-nav__list a::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #35c5f4,
        #3478ed
    );

    transform: translateX(-50%);

    transition: width .22s ease;
}

/* Наведение */
.site-nav__list a:hover {
    color: #2378e8;
}

.site-nav__list a:hover::after {
    width: 70%;
}

/* Текущая страница */
.site-nav__list .current-menu-item > a {
    color: #2378e8;
}

.site-nav__list .current-menu-item > a::after {
    width: 70%;
}
/* ===== HEADER UNDERLINE HARD FIX ===== */

.site-nav__list a::after {
    content: "";

    position: absolute !important;

    left: 15% !important;
    right: 15% !important;
    bottom: 0 !important;

    width: auto !important;
    height: 2px !important;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #35c5f4,
        #3478ed
    ) !important;

    transform: scaleX(0) !important;
    transform-origin: center !important;

    transition: transform .22s ease !important;
}

.site-nav__list a:hover::after {
    transform: scaleX(1) !important;
}

.site-nav__list .current-menu-item > a::after,
.site-nav__list .current_page_item > a::after {
    transform: scaleX(1) !important;
}
/* ===== QUICK ACCESS HOVER ===== */

.quick-card {
    position: relative;
    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.quick-card::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,0)
        );

    opacity: 0;

    transition: opacity .2s ease;

    pointer-events: none;
}

.quick-card:hover {
    transform: translateY(-3px);

    border-color: rgba(72, 133, 238, .22);

    box-shadow:
        0 12px 26px
        rgba(42, 72, 120, .10);
}

.quick-card:hover::after {
    opacity: 1;
}

.quick-card__icon {
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.quick-card:hover .quick-card__icon {
    transform: scale(1.08);

    box-shadow:
        0 5px 12px
        rgba(50, 90, 150, .10);
}

.quick-card__link {
    transition:
        color .2s ease,
        letter-spacing .2s ease;
}

.quick-card:hover .quick-card__link {
    color: #2b75eb;
    letter-spacing: .02em;
}
/* ===== ARTICLES HOVER ===== */

.home-article-card {
    position: relative;

    transition:
        background-color .2s ease,
        padding-left .2s ease;
}

/* Мягкая подсветка строки */
.home-article-card:hover {
    background: rgba(238, 246, 255, .65);
}

/* Заголовок статьи */
.home-article-card strong {
    transition: color .2s ease;
}

.home-article-card:hover strong {
    color: #2875e8;
}

/* Миниатюра */
.home-article-card img,
.home-article-card__placeholder {
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.home-article-card:hover img,
.home-article-card:hover .home-article-card__placeholder {
    transform: scale(1.04);

    box-shadow:
        0 6px 15px
        rgba(41, 82, 140, .12);
}

/* Маленькая стрелка справа */
.home-article-card::after {
    content: "→";

    position: absolute;
    right: 15px;
    top: 50%;

    color: #3984ed;
    font-size: 15px;

    opacity: 0;

    transform:
        translate(-5px, -50%);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.home-article-card:hover::after {
    opacity: .8;

    transform:
        translate(0, -50%);
}
/* ===== TIPS HOVER ===== */

.tip-item {
    position: relative;

    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;

    border-radius: 9px;

    transition:
        background-color .2s ease,
        color .2s ease;
}

/* Мягкая мятная подсветка */
.tip-item:hover {
    background: rgba(226, 249, 244, .72);
}

/* Иконка */
.tip-item span {
    transition:
        transform .22s ease,
        background-color .22s ease,
        box-shadow .22s ease;
}

.tip-item:hover span {
    transform:
        scale(1.09)
        rotate(-4deg);

    background: #d7f7ef;

    box-shadow:
        0 5px 12px
        rgba(28, 183, 163, .12);
}

/* Текст */
.tip-item p {
    transition:
        color .2s ease,
        transform .2s ease;
}

.tip-item:hover p {
    color: #167c72;
    transform: translateX(2px);
}

/* Маленький световой акцент слева */
.tip-item::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 3px;
    height: 0;

    border-radius: 10px;
    background: #28c4ae;

    transform: translateY(-50%);

    opacity: 0;

    transition:
        height .2s ease,
        opacity .2s ease;
}

.tip-item:hover::before {
    height: 22px;
    opacity: .8;
}
/* ===== IMPORTANT / ВАЖНО ЗНАТЬ ===== */

/* Строки */
.important-item {
    transition:
        color .2s ease,
        background-color .2s ease;
}

/* Круглая галочка */
.important-item span {
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

/* Текст */
.important-item p {
    transition: color .2s ease;
}

/* При наведении */
.important-item:hover p {
    color: #174a8b;
}

.important-item:hover span {
    transform: scale(1.10);

    background-color: #247bea;

    box-shadow:
        0 0 0 4px rgba(36, 123, 234, .08),
        0 4px 12px rgba(36, 123, 234, .18);
}


/* ===== ПЛАШКА "ПОМНИТЕ" ===== */

.important-note {
    transition:
        background-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.important-note:hover {
    background-color: #e5f0ff;

    box-shadow:
        0 7px 18px rgba(43, 112, 210, .09);

    transform: translateY(-1px);
}

/* Значок i */
.important-note span {
    transition:
        transform .22s ease,
        background-color .22s ease;
}

.important-note:hover span {
    transform: scale(1.06);
    background-color: rgba(255, 255, 255, .55);
}
/* ===== HOME NATIVE AD ===== */

.home-native-ad {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: -2px 18px 0;
    padding: 24px 14px;

    border: 1px solid #dbe8f8;
    border-radius: 12px;

    background:
        linear-gradient(
            110deg,
            #f2f8ff 0%,
            #eef7ff 55%,
            #f4f1ff 100%
        );

    color: #142c50;
    text-decoration: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.home-native-ad__icon {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2b8cff,
            #6257ef
        );

    color: #fff;

    font-size: 21px;
    font-weight: 400;

    box-shadow:
        0 5px 12px
        rgba(50, 112, 225, .16);

    transition: transform .2s ease;
}

.home-native-ad__content {
    flex: 1;
    min-width: 0;
}

.home-native-ad__label {
    display: block;

    margin-bottom: 2px;

    color: #6f91bd;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;
}

.home-native-ad__content strong {
    display: block;

    margin-bottom: 2px;

    color: #173c70;

    font-size: 13px;
    line-height: 1.25;
}

.home-native-ad__content p {
    margin: 0;

    color: #71849f;

    font-size: 10px;
    line-height: 1.3;
}

.home-native-ad__arrow {
    flex: 0 0 auto;

    color: #3886ed;

    font-size: 18px;

    transition: transform .2s ease;
}

/* hover */

.home-native-ad:hover {
    border-color: #bdd8f7;

    box-shadow:
        0 7px 18px
        rgba(43, 91, 158, .09);

    transform: translateY(-1px);
}

.home-native-ad:hover .home-native-ad__icon {
    transform: scale(1.05);
}

.home-native-ad:hover .home-native-ad__arrow {
    transform: translateX(3px);
}
/* =========================================
   ВАЖНО ЗНАТЬ — ФИНАЛЬНОЕ ВЫРАВНИВАНИЕ
   ========================================= */

/* Плашка "Помните" */
.important-note {
    position: relative;
    top: 0 !important;

    margin-top: 14px !important;
}


/* Партнёрский баннер */
.home-native-ad {
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: 15px;

    /* ровный промежуток после "Помните" */
    margin: 18px 18px 0 !important;

    /* делаем баннер заметно выше */
    min-height: 118px;

    padding: 20px 18px !important;

    border: 1px solid #d8e5f7;
    border-radius: 14px;

    background:
        linear-gradient(
            110deg,
            #f2f8ff 0%,
            #eef6ff 52%,
            #f4efff 100%
        );
}


/* Иконка */
.home-native-ad__icon {
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    font-size: 25px;
}


/* Текстовая часть */
.home-native-ad__content {
    flex: 1;
    min-width: 0;
}


/* Партнёрский материал */
.home-native-ad__label {
    margin-bottom: 5px;

    font-size: 9px;
    line-height: 1.2;
}


/* Заголовок */
.home-native-ad__content strong {
    margin-bottom: 5px;

    font-size: 14px;
    line-height: 1.3;
}


/* Подпись */
.home-native-ad__content p {
    margin: 0;

    font-size: 11px;
    line-height: 1.35;
}


/* Стрелка */
.home-native-ad__arrow {
    flex: 0 0 auto;

    margin-left: 4px;

    font-size: 20px;
}
/* ===== PARTNER BLOCK — ALIGNMENT FIX ===== */

.home-native-ad {
    /* чуть компактнее */
    min-height: 104px !important;

    /* равномерные отступы сверху и снизу */
    margin: 14px 18px 16px !important;

    padding: 16px 18px !important;

    gap: 14px;
}

/* Иконка немного компактнее */
.home-native-ad__icon {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    font-size: 23px;
}

/* Заголовок */
.home-native-ad__content strong {
    font-size: 13.5px;
    line-height: 1.25;
    margin-bottom: 4px;
}

/* Описание */
.home-native-ad__content p {
    max-width: 240px;

    font-size: 10.5px;
    line-height: 1.3;
}

/* Стрелку ставим ровно по центру */
.home-native-ad__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    align-self: center;

    margin-left: 6px;
}
.home-panel--important {
    padding-bottom: 0;
}
/* ===== FAQ HOVER ===== */

.faq-item {
    position: relative;

    margin: 0 -6px;
    padding-left: 6px;
    padding-right: 6px;

    border-radius: 9px;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.faq-item:hover {
    background: rgba(242, 234, 255, .62);
}

/* Иконка вопроса */
.faq-item span {
    transition:
        transform .2s ease,
        background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.faq-item:hover span {
    transform: scale(1.08);

    background: #eadcff;
    color: #7d3fe2;

    box-shadow:
        0 5px 12px
        rgba(125, 63, 226, .10);
}

/* Текст */
.faq-item p {
    transition:
        color .2s ease,
        transform .2s ease;
}

.faq-item:hover p {
    color: #4d2a86;
    transform: translateX(2px);
}

/* Тонкий акцент слева */
.faq-item::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 3px;
    height: 0;

    border-radius: 10px;
    background: #9a5df0;

    transform: translateY(-50%);
    opacity: 0;

    transition:
        height .2s ease,
        opacity .2s ease;
}

.faq-item:hover::before {
    height: 20px;
    opacity: .75;
}
/* ===== FAQ HOVER — CLEAN FIX ===== */

/* Полностью убираем боковой световой акцент */
.faq-item::before {
    content: none !important;
    display: none !important;
}

/* Сама строка */
.faq-item {
    border-radius: 9px;

    transition:
        background-color .2s ease;
}

.faq-item:hover {
    background: rgba(244, 238, 255, .55);
}

/* Кружок с вопросом */
.faq-item:hover span {
    transform: scale(1.08);

    background: #eadfff;
    color: #7d49d8;

    box-shadow:
        0 4px 10px rgba(125, 73, 216, .10);
}

/* Текст — БЕЗ движения */
.faq-item:hover p {
    color: #513480;
    transform: none;
}
/* Сдвигаем FAQ целиком вправо */
.faq-list {
    padding-left: 0 !important;
}

.faq-item {
    transform: translateX(12px);
    width: calc(100% - 12px);
}
/* ===== FAQ — правильное выравнивание ===== */

/* Возвращаем геометрию списка */
.faq-list {
    padding-left: 0 !important;
    transform: none !important;
    width: auto !important;
}

/* Возвращаем строки на место */
.faq-item {
    transform: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* сдвигаем СОДЕРЖИМОЕ строки */
    padding-left: 14px !important;
    padding-right: 8px !important;

    box-sizing: border-box;
}

/* На hover ничего по горизонтали не прыгает */
.faq-item:hover {
    transform: none !important;
}

.faq-item:hover p {
    transform: none !important;
}
/* FAQ — финальная мягкая подсветка */

.faq-item:hover {
    background: rgba(242, 236, 255, .58);
}

.faq-item:hover p {
    color: #3f3b68;
}

.faq-item:hover span {
    background: #eadfff;
    color: #7c4be2;

    box-shadow:
        0 4px 10px rgba(124, 75, 226, .08);
}
/* ===== MYTHS & FACTS HOVER ===== */

.myth-item {
    border-radius: 9px;

    transition:
        background-color .2s ease;
}

/* Мифы */
.myth-item:not(.myth-item--fact):hover {
    background: rgba(243, 237, 255, .58);
}

.myth-item:not(.myth-item--fact):hover .myth-item__icon {
    transform: scale(1.08);

    background: #eadfff;
    color: #7c4be2;

    box-shadow:
        0 4px 10px rgba(124, 75, 226, .08);
}

/* Факты */
.myth-item--fact:hover {
    background: rgba(231, 249, 241, .68);
}

.myth-item--fact:hover .myth-item__icon {
    transform: scale(1.08);

    background: #dff7eb;
    color: #18a868;

    box-shadow:
        0 4px 10px rgba(24, 168, 104, .08);
}

/* Иконки */
.myth-item__icon {
    transition:
        transform .2s ease,
        background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

/* Текст */
.myth-item p {
    transition: color .2s ease;
}

.myth-item:not(.myth-item--fact):hover p {
    color: #46376f;
}

.myth-item--fact:hover p {
    color: #286449;
}
/* ===== Убираем разделители в "Мифы и факты" ===== */

.myth-item,
.myth-item:hover {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Если линии сделаны псевдоэлементами */
.myth-item::before,
.myth-item::after {
    border: none !important;
    box-shadow: none !important;
}

/* Но не ломаем круглую иконку */
.myth-item__icon {
    border: none !important;
}
/* ===== МИФЫ И ФАКТЫ — ФИНАЛЬНОЕ ВЫРАВНИВАНИЕ ===== */

.myth-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.myth-item {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 30px;
    padding: 3px 6px;

    border: none !important;
    border-radius: 8px;

    box-sizing: border-box;
}

/* Все кружочки строго одинакового размера */
.myth-item__icon {
    flex: 0 0 24px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
}

/* Выравниваем весь текст */
.myth-item p {
    flex: 1;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.35;
}

/* Жирное "Миф:" / "Факт:" не меняет геометрию */
.myth-item p strong {
    line-height: inherit;
}
/* ========================================
   ССЫЛКИ В ЗАГОЛОВКАХ КАРТОЧЕК
   "Все статьи", "Все советы" и т.д.
   ======================================== */

.home-panel__head > a {
    position: relative;
    display: inline-block;

    color: #0868f5;
    text-decoration: none;

    transition:
        color .2s ease,
        text-shadow .2s ease;
}

/* Небольшая линия под ссылкой */
.home-panel__head > a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -4px;

    width: 0;
    height: 2px;

    border-radius: 2px;
    background: #28b7f6;

    transition: width .22s ease;
}

/* Hover */
.home-panel__head > a:hover {
    color: #075bd5;

    text-shadow:
        0 3px 10px rgba(23, 113, 225, .10);
}

.home-panel__head > a:hover::after {
    width: calc(100% - 15px);
}
/* ===== PANEL LINK ARROW FIX ===== */

.home-panel__head > a .panel-link-arrow {
    display: inline-block !important;
    margin-left: 3px;

    transform: translateX(0) !important;

    transition:
        transform .2s ease !important;
}

.home-panel__head > a:hover .panel-link-arrow {
    transform: translateX(5px) !important;
}
/* ===== БЫСТРЫЙ ДОСТУП — вертикальный ритм ===== */

/* Чуть больше воздуха перед секцией */
.home-quick-access {
    margin-top: 28px;
}

/* ===== БЫСТРЫЙ ДОСТУП — РИТМ И ОТСТУПЫ ===== */

.quick-access {
    padding-top: 24px;
}

.quick-access .home-section-title {
    margin-bottom: 18px;
}

.quick-access__grid {
    row-gap: 14px;
}
/* ===== HERO BUTTONS HOVER ===== */

.home-button {
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}


/* Основная синяя кнопка */
.home-button--primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 20px rgba(38, 111, 225, .20);
}


/* Стрелочка внутри */
.home-button--primary span {
    display: inline-block;

    transition: transform .2s ease;
}

.home-button--primary:hover span {
    transform: translateX(4px);
}


/* Контурная кнопка */
.home-button--outline:hover {
    transform: translateY(-2px);

    background: #eef6ff;
    border-color: #5a98ef;

    color: #1769db;

    box-shadow:
        0 7px 18px rgba(39, 104, 190, .10);
}


/* Иконка справа во второй кнопке */
.home-button--outline span {
    display: inline-block;

    transition:
        transform .2s ease,
        color .2s ease;
}

.home-button--outline:hover span {
    transform: scale(1.10);
    color: #1769db;
}
/* ===== HERO TRUST ITEMS ===== */

.home-trust-item {
    border-radius: 12px;

    transition:
        background-color .2s ease;
}

/* Круглая иконка */
.home-trust-item__icon {
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

/* При наведении */
.home-trust-item:hover .home-trust-item__icon {
    transform: translateY(-2px) scale(1.06);

    box-shadow:
        0 6px 14px rgba(35, 95, 170, .10);
}

/* Заголовок внутри */
.home-trust-item strong {
    transition: color .2s ease;
}

.home-trust-item:hover strong {
    color: #1769db;
}
/* ===== HERO RIGHT LINKS HOVER ===== */

.home-hero-link {
    position: relative;

    border-radius: 12px;

    transition:
        background-color .2s ease,
        box-shadow .2s ease;
}

/* Мягкая подсветка всей строки */
.home-hero-link:hover {
    background: rgba(245, 249, 255, .72);

    box-shadow:
        inset 0 0 0 1px rgba(80, 130, 220, .05);
}

/* Иконка */
.home-hero-link__icon {
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.home-hero-link:hover .home-hero-link__icon {
    transform: scale(1.08);

    box-shadow:
        0 5px 12px rgba(50, 90, 150, .10);
}

/* Заголовок */
.home-hero-link strong {
    transition: color .2s ease;
}

.home-hero-link:hover strong {
    color: #2474df;
}

/* Пояснение */
.home-hero-link small {
    transition: color .2s ease;
}

.home-hero-link:hover small {
    color: #637895;
}

/* ==================================================
   SINGLE ARTICLE
   ================================================== */

.article-page {
    padding: 26px 0 40px;
    background: #ffffff;
}

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 330px;
    gap: 36px;
    align-items: start;
}

.article-main {
    min-width: 0;
}

.article-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.article-sidebar__block {
    background: #ffffff;
    border: 1px solid #e7ebf2;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 28px rgba(26, 54, 93, 0.06);
}

/* ==================================================
   SINGLE ARTICLE — HEADER
   ================================================== */

.article-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 12px;
    line-height: 1.4;
    color: #8a97aa;
}

.article-breadcrumbs a {
    color: #7d8ca3;
    text-decoration: none;
}

.article-breadcrumbs a:hover {
    color: #2f6fe4;
}

.article-category {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    margin-bottom: 16px;

    border-radius: 999px;
    background: #eaf3ff;

    color: #2f6fe4;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.article-title {
    max-width: 780px;
    margin: 0;

    color: #102b55;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.article-lead {
    max-width: 720px;
    margin: 18px 0 0;

    color: #354967;
    font-size: 16px;
    line-height: 1.55;
}

.article-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-top: 18px;
}

.article-meta__items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
}

.article-meta__item {
    color: #66758c;
    font-size: 13px;
    line-height: 1.4;
}

.article-share {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 36px;
    padding: 0 14px;

    border: 1px solid #d7e0ec;
    border-radius: 9px;
    background: #ffffff;

    color: #243a5e;
    font: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.article-share:hover {
    border-color: #a9c5f5;
    background: #f6f9ff;
    color: #2f6fe4;
}

/* ==================================================
   SINGLE ARTICLE — HERO IMAGE
   ================================================== */

.article-hero-image {
    width: 100%;
    height: 220px;
    margin: 20px 0 0;
    overflow: hidden;

    border-radius: 14px;
    background: #eef4fb;
}

.article-hero-image__img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* SINGLE ARTICLE — INTRO */

.article-intro {
    max-width: 760px;
    margin-top: 18px;
}

.article-intro p {
    margin: 0;
    color: #354967;
    font-size: 14px;
    line-height: 1.65;
}


/* ==================================================
   SINGLE ARTICLE — TABLE OF CONTENTS
   ================================================== */

.article-toc {
    margin-top: 18px;
    padding: 16px 18px;

    border: 1px solid #cbdcf7;
    border-radius: 12px;
    background: #fbfdff;
}

.article-toc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 12px;
}

.article-toc__header strong {
    color: #102b55;
    font-size: 14px;
    font-weight: 700;
}

.article-toc__toggle {
    padding: 0;
    border: 0;
    background: transparent;

    color: #2f6fe4;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

.article-toc__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 34px;
}

.article-toc__grid ol {
    margin: 0;
    padding-left: 22px;
}

.article-toc__grid li {
    padding: 3px 0 3px 4px;

    color: #2f6fe4;
    font-size: 12px;
    font-weight: 600;
}

.article-toc__grid a {
    color: #354967;
    font-weight: 500;
    text-decoration: none;
}

.article-toc__grid a:hover {
    color: #2f6fe4;
}

/* ==================================================
   SINGLE ARTICLE — SIDEBAR POPULAR
   ================================================== */

.article-sidebar__title {
    margin: 0 0 16px;

    color: #102b55;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.sidebar-article-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-article {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.sidebar-article__thumb {
    width: 62px;
    height: 48px;

    border-radius: 9px;
    background:
        linear-gradient(
            135deg,
            #b8ddff 0%,
            #8fc8ff 45%,
            #cbb8ff 100%
        );
}

.sidebar-article__content {
    min-width: 0;
}

.sidebar-article__content strong {
    display: block;

    color: #102b55;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.sidebar-article__content span {
    display: block;
    margin-top: 5px;

    color: #8a97aa;
    font-size: 10px;
    line-height: 1.3;
}

.article-sidebar__more {
    display: inline-block;
    margin-top: 15px;

    color: #2f6fe4;
    font-size: 11px;
    font-weight: 700;
}

.article-sidebar__more:hover {
    text-decoration: underline;
}

/* ===== SIDEBAR — LINK STYLE ===== */

.article-sidebar__more {
    position: relative;
    display: inline-block;

    margin-top: 15px;

    color: #0868f5;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;

    transition:
        color .2s ease,
        text-shadow .2s ease;
}

/* Голубая линия */
.article-sidebar__more::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -4px;

    width: 0;
    height: 2px;

    border-radius: 2px;
    background: #28b7f6;

    transition: width .22s ease;
}

/* Hover */
.article-sidebar__more:hover {
    color: #075bd5;

    text-shadow:
        0 3px 10px rgba(23, 113, 225, .10);

    text-decoration: none;
}

.article-sidebar__more:hover::after {
    width: calc(100% - 15px);
}

/* Стрелочка */
.article-sidebar__more .panel-link-arrow {
    display: inline-block;
    margin-left: 3px;

    transform: translateX(0);
    transition: transform .2s ease;
}

.article-sidebar__more:hover .panel-link-arrow {
    transform: translateX(5px);
}

/* ===== SIDEBAR — ARTICLE TITLE HOVER ===== */

.sidebar-article__content strong {
    transition: color .2s ease;
}

.sidebar-article:hover .sidebar-article__content strong {
    color: #2f6fe4;
}

/* ==================================================
   SINGLE ARTICLE — SIDEBAR TAKEAWAYS
   ================================================== */

.article-sidebar__takeaways {
    padding-top: 26px;
    padding-bottom: 26px;
}

.article-sidebar__takeaways .article-sidebar__title {
    margin-bottom: 17px;
}

.sidebar-takeaways {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-takeaway {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
}

.sidebar-takeaway__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;
    background: #edf5ff;

    color: #2878f6;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}

.sidebar-takeaway__text {
    color: #354967;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}

.sidebar-takeaway__icon svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==================================================
   SINGLE ARTICLE — SIDEBAR FAQ
   ================================================== */

.sidebar-faq {
    margin-top: 2px;
}

.sidebar-faq__item {
    margin: 0;
    border-bottom: 1px solid #e7edf5;
}

.sidebar-faq__item:last-child {
    border-bottom: 0;
}

.sidebar-faq__item summary {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 10px 0;

    color: #102b55;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;

    cursor: pointer;
    list-style: none;

    transition: color .2s ease;
}

/* Убираем стандартный треугольник браузера */
.sidebar-faq__item summary::-webkit-details-marker {
    display: none;
}

.sidebar-faq__item summary::marker {
    content: "";
}

/* Наша стрелочка */
.sidebar-faq__arrow {
    flex: 0 0 7px;

    width: 7px;
    height: 7px;

    border-right: 1.5px solid #31598b;
    border-bottom: 1.5px solid #31598b;

    transform: rotate(45deg) translateY(-2px);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

/* Наведение */
.sidebar-faq__item summary:hover {
    color: #2f6fe4;
}

.sidebar-faq__item summary:hover .sidebar-faq__arrow {
    border-color: #2f6fe4;
}

/* Открытый вопрос */
.sidebar-faq__item[open] .sidebar-faq__arrow {
    transform: rotate(225deg) translate(-1px, -1px);
}

/* Ответ */
.sidebar-faq__answer {
    padding: 0 24px 11px 0;

    color: #60738f;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 500;
}

/* ===== PARTNER BLOCK IN ARTICLE SIDEBAR ===== */

.article-sidebar .home-native-ad {
    width: auto;
    margin: 0 !important;
    align-self: stretch;
}

/* =========================================
   SINGLE ARTICLE — POPULAR TOPICS
   ========================================= */

.sidebar-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 14px;
}

.sidebar-topics a {
    display: inline-flex;
    align-items: center;

    padding: 7px 12px;

    border: 1px solid #dce9fb;
    border-radius: 8px;

    background: #f1f7ff;

    color: #2f6fe4;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;

    text-decoration: none;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.sidebar-topics a:hover {
    background: #e5f1ff;
    border-color: #b9d6fb;
    color: #075bd5;

    transform: translateY(-1px);
}
.sidebar-topics .sidebar-topics__more {
    min-width: 34px;
    padding-left: 10px;
    padding-right: 10px;

    justify-content: center;

    background: #ffffff;
    border-color: #dce6f5;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.sidebar-topics .sidebar-topics__more:hover {
    background: #f1f7ff;
    border-color: #b9d6fb;
}

/* ==================================================
   SINGLE ARTICLE — DISCLAIMER
   ================================================== */

.article-disclaimer {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 24px;
    padding: 16px 18px;

    border: 1px solid #e4dcff;
    border-radius: 12px;

    background: linear-gradient(
        110deg,
        #faf8ff 0%,
        #f5f2ff 100%
    );
}

.article-disclaimer__icon {
    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;
    background: #ffffff;

    color: #7457ef;
}

.article-disclaimer__icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.article-disclaimer__content {
    min-width: 0;
}

.article-disclaimer__content strong {
    display: block;

    margin-bottom: 3px;

    color: #102b55;
    font-size: 12px;
    font-weight: 700;
}

.article-disclaimer__content p {
    margin: 0;

    color: #60738f;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 500;
}

/* =========================================
   DISCLAIMER — ANIMATED BORDER
   ========================================= */

.article-disclaimer {
    position: relative;
    overflow: hidden;
}

/* Анимированная рамка */
.article-disclaimer::after {
    content: "";

    position: absolute;
    inset: -1px;

    border: 2px solid #28b7f6;
    border-radius: 12px;

    pointer-events: none;

    opacity: 0;

    clip-path: inset(0 100% 0 0 round 12px);

    transition:
        clip-path .9s ease,
        opacity .25s ease;
}

.article-disclaimer:hover::after {
    opacity: 1;

    clip-path: inset(0 0 0 0 round 12px);
}

/* DISCLAIMER — ICON HOVER */

.article-disclaimer__icon {
    transition:
        color .7s ease,
        background-color .7s ease;
}

.article-disclaimer:hover .article-disclaimer__icon {
    color: #ffffff;
    background-color: #ef4444;
}

/* ==================================================
   SINGLE ARTICLE — RELATED NAVIGATION
   ================================================== */

.article-related-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    margin-top: 24px;
}

.article-related-nav__card {
    min-width: 0;
    min-height: 108px;

    display: flex;
    align-items: center;
    gap: 16px;

    padding: 20px 22px;

    border: 1px solid #dce8f7;
    border-radius: 14px;

    text-decoration: none;
    box-sizing: border-box;
}


/* ЛЕВАЯ КАРТОЧКА */

.article-related-nav__card--useful {
    border-left: 5px solid #75b8ff;

    background: linear-gradient(
        110deg,
        #f5faff 0%,
        #ffffff 100%
    );
}


/* ПРАВАЯ КАРТОЧКА */

.article-related-nav__card--continue {
    border-right: 5px solid #ef6b6b;

    background: linear-gradient(
        250deg,
        #fff5f5 0%,
        #ffffff 100%
    );
}


/* ИКОНКА */

.article-related-nav__icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eaf4ff;
    color: #1478ed;
}

.article-related-nav__icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ТЕКСТ */

.article-related-nav__content {
    min-width: 0;
    flex: 1;
}

.article-related-nav__label {
    display: block;

    margin-bottom: 5px;

    color: #1478ed;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
}

.article-related-nav__title {
    display: block;

    color: #102b55;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
}


/* СТРЕЛКА */

.article-related-nav__arrow {
    flex: 0 0 auto;

    color: #1478ed;
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
}


/* ПРАВАЯ КАРТОЧКА — КРАСНЫЙ АКЦЕНТ */

.article-related-nav__card--continue .article-related-nav__label,
.article-related-nav__card--continue .article-related-nav__arrow {
    color: #ef5350;
}


/* ЕСЛИ ЕСТЬ ТОЛЬКО ОДНА КАРТОЧКА */

.article-related-nav__card:only-child {
    grid-column: 1 / -1;
}


/* МОБИЛЬНАЯ ВЕРСИЯ */

@media (max-width: 700px) {

    .article-related-nav {
        grid-template-columns: 1fr;
    }

    .article-related-nav__card:only-child {
        grid-column: auto;
    }
}

/* RELATED NAV — RIGHT ARROW BOX */

.article-related-nav__card--continue .article-related-nav__arrow {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    background: #ffe6e6;

    color: #ef5350;
    font-size: 29px;
    line-height: 1;
}

/* ==================================================
   RELATED NAV — HOVER
   ================================================== */

.article-related-nav__card {
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.article-related-nav__arrow {
    transition:
        transform .35s ease,
        background-color .35s ease;
}


/* ЛЕВАЯ КАРТОЧКА */

.article-related-nav__card--useful:hover {
    transform: translateY(-2px);
    border-color: #a9d2ff;

    box-shadow:
        0 8px 22px rgba(35, 113, 205, .08);
}

.article-related-nav__card--useful:hover .article-related-nav__arrow {
    transform: translateX(-5px);
}


/* ПРАВАЯ КАРТОЧКА */

.article-related-nav__card--continue:hover {
    transform: translateY(-2px);
    border-color: #f3bcbc;

    box-shadow:
        0 8px 22px rgba(209, 72, 72, .08);
}

.article-related-nav__card--continue:hover .article-related-nav__arrow {
    transform: translateX(5px);
}

/* ==================================================
   SINGLE ARTICLE — REACTIONS
   ================================================== */

.article-reactions {
    margin-top: 24px;
    padding: 24px 26px 22px;

    background: #ffffff;
    border: 1px solid #e3ebf5;
    border-radius: 16px;

    box-shadow: 0 8px 28px rgba(31, 72, 125, .05);

    box-sizing: border-box;
}


/* ---------- HEADER ---------- */

.article-reactions__head {
    display: flex;
    align-items: center;
    gap: 13px;
}

.article-reactions__head-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf5ff;
    color: #0877f9;
}

.article-reactions__head-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.article-reactions__head h2 {
    margin: 0 0 3px;

    color: #102b55;

    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.article-reactions__head p {
    margin: 0;

    color: #6b7e99;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}


/* ---------- SCALE ---------- */

.article-reactions__scale {
    position: relative;

    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));

    align-items: start;

    margin-top: 32px;
}

.article-reactions__line {
    position: absolute;

    left: 5%;
    right: 5%;
    top: 31px;

    height: 2px;

    border-radius: 2px;

    background: linear-gradient(
        90deg,
        #b9a8ef 0%,
        #9faaf3 18%,
        #73c8ee 36%,
        #70d8c2 52%,
        #b8d967 67%,
        #f0c85d 80%,
        #f4a85f 90%,
        #ef7777 100%
    );

    opacity: .72;

    z-index: 0;
}


/* ---------- REACTION BUTTON ---------- */

.article-reaction {
    position: relative;
    z-index: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0 4px;

    border: 0;
    outline: 0;

    background: transparent;

    font-family: inherit;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


/* ---------- ICON CIRCLE ---------- */

.article-reaction__icon {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1.5px solid currentColor;
    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 3px 10px rgba(28, 67, 119, .06);

    box-sizing: border-box;
}

.article-reaction__icon svg {
    width: 42px;
    height: 42px;

    overflow: visible;
}

.article-reaction .reaction-bg {
    fill: currentColor;
    opacity: .09;

    stroke: none;
}

.article-reaction .reaction-line {
    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.article-reaction .reaction-fill {
    fill: currentColor;
    stroke: none;
}


/* ---------- GRADIENT OF MOOD ---------- */

/* холодный / приглушённый */

.article-reaction--1 {
    color: #8d82c9;
}

.article-reaction--2 {
    color: #858bd4;
}

.article-reaction--3 {
    color: #659ed7;
}

.article-reaction--4 {
    color: #35b7d1;
}


/* переход к позитивному */

.article-reaction--5 {
    color: #58bf91;
}

.article-reaction--6 {
    color: #a8bd43;
}


/* тёплый / насыщенный */

.article-reaction--7 {
    color: #e6a43a;
}

.article-reaction--8 {
    color: #ed675f;
}


/* дополнительно приглушаем первые реакции */

.article-reaction--1 .article-reaction__icon {
    opacity: .72;
}

.article-reaction--2 .article-reaction__icon {
    opacity: .78;
}

.article-reaction--3 .article-reaction__icon {
    opacity: .84;
}

.article-reaction--4 .article-reaction__icon {
    opacity: .90;
}


/* ---------- LABELS ---------- */

.article-reaction__label {
    display: block;

    max-width: 105px;

    margin-top: 10px;

    color: #18345e;

    font-size: 11px;
    line-height: 1.25;
    font-weight: 500;

    text-align: center;
}


/* ---------- PRIVACY ---------- */

.article-reactions__privacy {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 25px;

    color: #8191aa;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
}

.article-reactions__privacy svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------- MOBILE ---------- */

@media (max-width: 800px) {

    .article-reactions {
        padding: 20px 16px;
    }

    .article-reactions__scale {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 24px;
    }

    .article-reactions__line {
        display: none;
    }

    .article-reaction__icon {
        width: 56px;
        height: 56px;
    }

    .article-reaction__icon svg {
        width: 38px;
        height: 38px;
    }
}

/* ==================================================
   ARTICLE REACTIONS — INTERACTION
   ================================================== */

.article-reaction {
    transition:
        transform .25s ease,
        opacity .25s ease;
}

.article-reaction__icon {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}

.article-reaction:hover {
    transform: translateY(-3px);
}

.article-reaction:hover .article-reaction__icon {
    transform: scale(1.08);

    box-shadow:
        0 8px 20px rgba(27, 74, 132, .12);
}


/* выбранная реакция */

.article-reaction.is-selected .article-reaction__icon {
    transform: scale(1.1);

    background: color-mix(
        in srgb,
        currentColor 10%,
        #ffffff
    );

    box-shadow:
        0 8px 22px rgba(27, 74, 132, .14);
}

.article-reaction.is-selected .article-reaction__label {
    font-weight: 700;
}


/* остальные после выбора немного отходят на второй план */

.article-reactions.has-selection
.article-reaction:not(.is-selected) {
    opacity: .55;
}


/* сообщение после выбора */

.article-reactions__thanks {
    display: none;

    margin-top: 18px;

    color: #60738f;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;

    text-align: center;
}

.article-reactions__thanks.is-visible {
    display: block;
}

/* SELECTED REACTION — GOLDEN GLOW */

.article-reaction.is-selected .article-reaction__icon {
    box-shadow:
        0 0 0 5px rgba(255, 210, 70, .18),
        0 0 18px 7px rgba(255, 196, 45, .22),
        0 8px 22px rgba(27, 74, 132, .10);
}

.article-reaction__count {
    display: none;
    margin-left: 5px;
    padding: 1px 5px;

    border-radius: 6px;
    background: #eef3f9;

    color: #71839d;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 700;
    vertical-align: 1px;
}

.article-reaction.is-selected .article-reaction__count {
    display: none;
}

.article-reactions.counts-loaded
.article-reaction.is-selected
.article-reaction__count {
    display: inline;
}

/* ==================================================
   READ ALSO — MAGAZINE LAYOUT
   ================================================== */

.article-read-also {
    margin-top: 26px;
    padding: 24px 26px 26px;
    background: #ffffff;
    border: 1px solid #e3ebf5;
    border-radius: 16px;
    box-shadow:
    0 14px 36px rgba(31, 72, 125, .09),
    0 3px 10px rgba(31, 72, 125, .04);
    box-sizing: border-box;
}


/* HEADER */

.article-read-also__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.article-read-also__head h2 {
    margin: 0 0 5px;
    color: #102b55;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
}

.article-read-also__head p {
    margin: 0;
    color: #6b7e99;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
}

.article-read-also__all {
    position: relative;
    flex: 0 0 auto;
    margin-top: 4px;
    color: #0868f5;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.article-read-also__all span {
    display: inline-block;
    margin-left: 3px;
    transition: transform .25s ease;
}

.article-read-also__all:hover span {
    transform: translateX(4px);
}


/* GRID */

.article-read-also__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 14px;
}


/* CARDS */

.article-read-also__card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe8f4;
    border-radius: 13px;
    background: #ffffff;
    box-sizing: border-box;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.article-read-also__card:hover {
    transform: translateY(-2px);
    border-color: #c7daf2;
    box-shadow: 0 8px 22px rgba(31, 72, 125, .09);
}

.article-read-also__link {
    color: inherit;
    text-decoration: none;
}


/* FEATURED CARD */

.article-read-also__card--featured {
    grid-row: 1 / 3;
}

.article-read-also__card--featured .article-read-also__link {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.article-read-also__card--featured .article-read-also__image {
    position: relative;
    min-height: 190px;
    flex: 1;
    overflow: hidden;
    background: #edf5ff;
}

.article-read-also__card--featured .article-read-also__image img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    display: block;
    object-fit: cover;
}

.article-read-also__card--featured .article-read-also__content {
    padding: 17px 18px 16px;
}


/* SMALL CARDS */

.article-read-also__card--small .article-read-also__link {
    height: 100%;
    display: grid;
    grid-template-columns: 42% 58%;
}

.article-read-also__card--small .article-read-also__image {
    min-height: 130px;
    overflow: hidden;
    background: #edf5ff;
}

.article-read-also__card--small .article-read-also__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.article-read-also__card--small .article-read-also__content {
    position: relative;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 15px 44px 15px 16px;
}

.article-read-also__card--small .article-read-also__category {
    margin-bottom: 7px;
}

.article-read-also__card--small .article-read-also__title {
    margin-bottom: 13px;
}

.article-read-also__card--small .article-read-also__meta {
    display: block;
    margin-top: 0;
    padding-top: 0;
}

.article-read-also__card--small .article-read-also__arrow {
    position: absolute;
    top: 50%;
    right: 16px;

    transform: translateY(-50%);
}

.article-read-also__card--small:hover .article-read-also__arrow {
    transform: translate(4px, -50%);
}


/* IMAGE PLACEHOLDER */

.article-read-also__placeholder {
    width: 100%;
    height: 100%;
    min-height: inherit;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(82, 159, 246, .10) 0,
            rgba(82, 159, 246, .04) 32%,
            transparent 65%
        ),
        linear-gradient(
            135deg,
            #edf5ff 0%,
            #f7faff 100%
        );
}

.article-read-also__placeholder-icon {
    width: 96px;
    height: 96px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .72);
    color: #78afe9;

    box-shadow:
        0 6px 22px rgba(42, 105, 177, .07);
}

.article-read-also__placeholder-icon svg {
    width: 58px;
    height: 48px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* В маленьких карточках иконка компактнее */

.article-read-also__card--small
.article-read-also__placeholder-icon {
    width: 72px;
    height: 72px;
}

.article-read-also__card--small
.article-read-also__placeholder-icon svg {
    width: 58px;
    height: 46px;
}


/* CATEGORY */

.article-read-also__category {
    align-self: flex-start;
    display: inline-flex;
    margin-bottom: 8px;
    padding: 3px 7px;
    border-radius: 6px;
    background: #eaf3ff;
    color: #0877f9;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
}


/* TITLE */

.article-read-also__title {
    margin: 0;
    color: #102b55;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    transition: color .25s ease;
}

.article-read-also__card--featured .article-read-also__title {
    font-size: 18px;
}

.article-read-also__card:hover .article-read-also__title {
    color: #0868f5;
}


/* META */

.article-read-also__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    color: #7b8da7;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 500;
}

.article-read-also__arrow {
    color: #0877f9;
    font-size: 17px;
    line-height: 1;
    transition: transform .25s ease;
}

.article-read-also__card:hover .article-read-also__arrow {
    transform: translateX(4px);
}


/* MOBILE */

@media (max-width: 700px) {

    .article-read-also {
        padding: 20px 16px;
    }

    .article-read-also__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .article-read-also__card--featured {
        grid-row: auto;
    }

    .article-read-also__card--small .article-read-also__link {
        grid-template-columns: 38% 62%;
    }

}

.article-read-also__reading-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #6f829f;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
}

.article-read-also__reading-time svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.article-read-also__card--featured .article-read-also__arrow {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf5ff;
    color: #0877f9;

    font-size: 22px;
    line-height: 1;

    transition:
        transform .25s ease,
        background-color .25s ease;
}

.article-read-also__card--featured:hover .article-read-also__arrow {
    transform: translateX(4px);
    background: #e3efff;
}

.article-read-also__card--featured .article-read-also__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* ==================================================
   READ ALSO — FEATURED CARD OVERLAY
   ================================================== */

.article-read-also__card--featured {
    position: relative;
}

.article-read-also__card--featured .article-read-also__image {
    position: relative;
    min-height: 250px;
    flex: none;
    overflow: hidden;
}

/* Изображение / наша заглушка */

.article-read-also__card--featured .article-read-also__image img,
.article-read-also__card--featured .article-read-also__placeholder {
    width: 100%;
    height: 250px;
}

/* Плавное растворение изображения в белый */

.article-read-also__card--featured .article-read-also__image::after {
    content: "";
    position: absolute;
    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;

    height: 105px;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 45%,
        #ffffff 100%
    );

    pointer-events: none;
}


/* Контент поднимаем на изображение */

.article-read-also__card--featured .article-read-also__content {
    position: relative;
    z-index: 3;

    margin-top: -62px;
    padding: 0 22px 18px;

    background: transparent;
}


/* Категория */

.article-read-also__card--featured .article-read-also__category {
    margin-bottom: 9px;
}


/* Заголовок */

.article-read-also__card--featured .article-read-also__title {
    max-width: 85%;

    font-size: 19px;
    line-height: 1.35;
}


/* Нижняя строка */

.article-read-also__card--featured .article-read-also__meta {
    margin-top: 17px;
    padding-top: 0;
}

.article-read-also__card--featured
.article-read-also__placeholder-icon {
    transform: translateY(-24px);
}

.article-read-also__card .article-read-also__link::before,
.article-read-also__card .article-read-also__link::after {
    content: none !important;
    display: none !important;
}

.article-read-also__card .article-read-also__title,
.article-read-also__card:hover .article-read-also__title,
.article-read-also__link:hover .article-read-also__title {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.article-read-also__title::before,
.article-read-also__title::after {
    content: none !important;
    display: none !important;
}

.article-read-also__card--featured
.article-read-also__image img,
.article-read-also__card--featured:hover
.article-read-also__image img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
}

.article-read-also__card--featured
.article-read-also__image::before,
.article-read-also__card--featured
.article-read-also__image::after {
    border-bottom: 0 !important;
}

.article-read-also__card--featured:hover
.article-read-also__image::before {
    content: none !important;
    display: none !important;
}

.article-read-also .article-read-also__link,
.article-read-also .article-read-also__link:hover,
.article-read-also .article-read-also__link:focus,
.article-read-also .article-read-also__link:visited {
    text-decoration: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.article-read-also .article-read-also__link::before,
.article-read-also .article-read-also__link::after {
    content: none !important;
    display: none !important;
}

.article-read-also__card--featured .article-read-also__image {
    overflow: hidden;
}

.article-read-also__card--featured .article-read-also__image::after {
    bottom: -2px;
    height: 110px;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 45%,
        #ffffff 100%
    );
}

.article-read-also__card--featured:hover {
    transform: none;
}

/* ==================================================
   HEADER SEARCH
   ================================================== */

.site-search {
    flex: 0 0 240px;
    height: 38px;
    display: flex;
    align-items: center;
    margin-left: 24px;
    border: 1px solid #d5e1ef;
    border-radius: 11px;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.site-search:focus-within {
    border-color: #8fc5ff;
    box-shadow: 0 0 0 3px rgba(30, 136, 255, .08);
}

.site-search__input {
    min-width: 0;
    flex: 1;
    height: 100%;
    padding: 0 4px 0 14px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #102b55;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    box-sizing: border-box;
}

.site-search__input::placeholder {
    color: #8293aa;
    opacity: 1;
}

.site-search__submit {
    flex: 0 0 42px;
    width: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-left: 0;
    background: transparent;
    color: #173a6a;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        color .2s ease,
        background-color .2s ease;
}

.site-search__submit {
    position: relative;
}

.site-search__submit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: #e1e8f2;
    border-radius: 1px;
}

.site-search__submit:hover {
    color: #0877f9;
    background: #f4f9ff;
}

.site-search__submit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==================================================
   SEARCH PAGE — ОСНОВНОЙ КАРКАС
   ================================================== */

.search-page {
    width: 100%;
    background: #ffffff;
}

.search-page__inner {
    width: min(
        var(--container),
        calc(100% - 64px)
    );
    margin: 0 auto;
    padding: 28px 0 0;
    box-sizing: border-box;
}

.search-page__breadcrumbs {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;

    color: #7185a3;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

.search-page__breadcrumbs a {
    color: #7185a3;
    text-decoration: none;
}

.search-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 36px;
    align-items: start;
}

.search-page__content {
    min-width: 0;
}

.search-sidebar {
    min-width: 0;
    padding-top: 2px;
}

.search-page__head {
    margin-bottom: 24px;
}

.search-page__head h1 {
    margin: 0 0 8px;
    color: #102b55;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
}

.search-page__head p {
    margin: 0;
    color: #526985;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
}

.search-page__head p strong {
    color: #0877f9;
    font-weight: 700;
}

/* Временно отделяем основные части страницы,
   чтобы хорошо видеть получившийся каркас */

.search-popular {
    margin-bottom: 22px;
}

.search-results {
    width: 100%;
}

.search-sidebar__section {
    margin: 0 0 34px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.search-sidebar__section h2 {
    margin: 0 0 16px;
    color: #102b55;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

/* ==================================================
   SEARCH PAGE — ПОПУЛЯРНЫЕ ЗАПРОСЫ
   ================================================== */

.search-popular__title {
    display: block;
    margin-bottom: 10px;
    color: #102b55;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
}

.search-popular__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.search-popular__list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 7px 17px;

    border: 1px solid #cfe0f7;
    border-radius: 999px;

    background: #ffffff;
    color: #0877f9;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    text-decoration: none;

    box-sizing: border-box;

    transition:
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease;
}

.search-popular__list a:hover {
    color: #075fd1;
    border-color: #9fc7f5;
    background: #f7fbff;
}

/* ==================================================
   SEARCH PAGE — КАРТОЧКИ РЕЗУЛЬТАТОВ
   ================================================== */

.search-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 28px;
    align-items: center;

    min-height: 178px;
    padding: 20px 22px;

    border: 1px solid #e0e9f5;
    border-radius: 14px;
    background: #ffffff;

    box-sizing: border-box;
}

.search-result__content {
    min-width: 0;
}

.search-result__category {
    display: block;
    margin-bottom: 8px;

    color: #0877f9;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}

.search-result__title {
    margin: 0 0 8px;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.search-result__title a {
    color: #1769c2;
    text-decoration: none;
}

.search-result__title a:hover {
    color: #075fd1;
}

.search-result__url {
    margin-bottom: 9px;

    color: #09a35a;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
}

.search-result__excerpt {
    max-width: 650px;

    color: #405977;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

.search-result__meta {
    margin-top: 12px;

    color: #7185a3;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
}

.search-result__media {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-result__media img {
    width: 205px;
    height: 132px;
    display: block;

    object-fit: cover;

    border-radius: 11px;
}

.search-result__arrow {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d4e3f6;
    border-radius: 50%;

    background: #ffffff;
    color: #0877f9;

    font-size: 22px;
    line-height: 1;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background-color .2s ease;
}

.search-result__arrow:hover {
    transform: translateX(3px);
    border-color: #a8cdf7;
    background: #f6faff;
}

.search-result__url {
    display: flex;
    align-items: center;
    gap: 7px;
}

.search-result__url-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    color: #09a35a;
}

.search-result__url a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: inherit;
    text-decoration: none;
}

/* ==================================================
   SEARCH RESULT — КОМПАКТНАЯ ВЫСОТА КАРТОЧЕК
   ================================================== */

.search-result {
    min-height: 150px;
    padding: 16px 20px;
}

.search-result__category {
    margin-bottom: 6px;
}

.search-result__title {
    margin-bottom: 6px;
}

.search-result__url {
    margin-bottom: 7px;
}

.search-result__meta {
    margin-top: 9px;
}

.search-result__media img {
    width: 190px;
    height: 118px;
}

.search-result:not(:has(.search-result__media img)) {
    grid-template-columns: minmax(0, 1fr) 56px;
}

.search-result:not(:has(.search-result__media img)) .search-result__media {
    justify-content: flex-end;
}

.search-result:not(:has(.search-result__media img)) .search-result__arrow {
    margin-left: auto;
}

.search-result:not(:has(.search-result__media img)) .search-result__media {
    padding-right: 16px;
    box-sizing: border-box;
}

/* ==================================================
   SEARCH SIDEBAR — ДРУГИЕ ТАКЖЕ ИЩУТ
   ================================================== */

.search-sidebar__links {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.search-sidebar__links a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;

    padding: 7px 0;

    background: transparent;
    border: 0;

    color: #102b55;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
    text-decoration: none;

    transition: color .2s ease;
}


/* Текст запроса */
.search-sidebar__links a > span:first-child {
    order: 2;
}


/* Место под лупу */
.search-sidebar__links a > span:last-child {
    order: 1;

    width: 15px;
    height: 15px;
    flex: 0 0 15px;

    font-size: 0;

    background-color: #0877f9;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M14.6 14.6L20 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M14.6 14.6L20 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")
        center / contain
        no-repeat;
}


/* Круг лупы */



/* Ручка лупы */



/* Hover */
.search-sidebar__links a:hover {
    color: #0877f9;
}

/* ==================================================
   SEARCH SIDEBAR — ТОП ЗАПРОСОВ
   ================================================== */

.search-sidebar__top {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: search-top;
}

.search-sidebar__top li {
    counter-increment: search-top;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 6px 0;

    color: #102b55;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
}

.search-sidebar__top li::before {
    content: counter(search-top);

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef6ff;
    color: #0877f9;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

.search-sidebar__top a {
    color: inherit;
    text-decoration: none;

    transition: color .2s ease;
}

.search-sidebar__top a:hover {
    color: #0877f9;
}

/* ==================================================
   SEARCH PAGE — ПОИСК В ШАПКЕ ВЫДАЧИ
   ================================================== */

.search-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
}

.search-page__head > div {
    min-width: 0;
}

.search-page__form {
    flex: 0 0 230px;
    height: 38px;

    display: flex;
    align-items: center;

    margin-top: 2px;

    border: 1px solid #d5e1ef;
    border-radius: 10px;

    background: #ffffff;
    overflow: hidden;

    box-sizing: border-box;
}

.search-page__form-input {
    min-width: 0;
    flex: 1;
    height: 100%;

    padding: 0 6px 0 14px;

    border: 0;
    outline: 0;

    background: transparent;
    color: #102b55;

    font-family: inherit;
    font-size: 12px;
    font-weight: 500;

    box-sizing: border-box;
}

.search-page__form-submit {
    position: relative;

    width: 40px;
    height: 100%;
    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    background: transparent;

    color: #173a6a;
    cursor: pointer;
}

.search-page__form-submit::before {
    content: "";

    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;

    width: 1px;

    background: #e1e8f2;
}

.search-page__form-submit svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.search-page__form:focus-within {
    border-color: #8fc5ff;
    box-shadow: 0 0 0 3px rgba(30, 136, 255, .08);
}

/* ==================================================
   SEARCH PAGE — ВАРИАНТ С КНОПКОЙ «НАЙТИ»
   ================================================== */

.search-page__form {
    flex: 0 0 270px;
    height: 40px;

    display: flex;
    align-items: center;

    margin-top: 2px;
    padding: 3px;

    border: 1.5px solid #f5c400;
    border-radius: 9px;

    background: #ffffff;
    overflow: hidden;

    box-sizing: border-box;
}

.search-page__form-input {
    min-width: 0;
    flex: 1;
    height: 100%;

    padding: 0 10px;

    border: 0;
    outline: 0;
    background: transparent;

    color: #102b55;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;

    box-sizing: border-box;
}

.search-page__form-submit {
    position: static;

    width: auto;
    height: 32px;
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 15px;

    border: 0;
    border-radius: 6px;

    background: #ffd633;
    color: #102b55;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

/* Убираем старый вертикальный разделитель */
.search-page__form-submit::before {
    content: none;
}

/* В этом варианте лупу скрываем */
.search-page__form-submit svg {
    display: none;
}

/* Пишем «Найти» через CSS */
.search-page__form-submit::after {
    content: "Найти";
}

.search-page__form-submit:hover {
    background: #ffcc00;
}

.search-page__form-submit:active {
    transform: translateY(1px);
}

.search-page__form:focus-within {
    border-color: #eeb900;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, .10);
}

/* SEARCH PAGE — УВЕЛИЧЕННАЯ ПОИСКОВАЯ СТРОКА */

/* SEARCH PAGE — УВЕЛИЧЕННАЯ ПОИСКОВАЯ СТРОКА */

.search-page__form {
    flex: 0 0 520px;
    width: 520px;
    height: 64px;
    max-width: 100%;
}

.search-page__form input[type="search"] {
    font-size: 15px;
    padding-left: 20px;
}

/* ==================================================
   SEARCH PAGE — АКЦЕНТНАЯ ПОИСКОВАЯ СТРОКА
   ================================================== */

.search-page__form {
    position: relative;

    flex: 0 0 520px;
    width: 520px;
    height: 64px;
    max-width: 100%;

    display: flex;
    align-items: center;

    padding: 4px;

    border: 1px solid #b9dcff;
    border-radius: 18px;

    background:
        linear-gradient(
            90deg,
            #f3fbff 0%,
            #ffffff 42%,
            #ffffff 100%
        );

    box-shadow:
        0 8px 24px rgba(27, 105, 180, .08);

    overflow: hidden;
    box-sizing: border-box;
}

/* Акцент слева */
.search-page__form::before {
    content: "";

    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    margin-right: 8px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #dff7ff 0%,
            #e7f1ff 100%
        );
}

/* Пульс */
.search-page__form::after {
    content: "";

    position: absolute;

    left: 19px;
    top: 22px;

    width: 16px;
    height: 16px;

    background-color: #18bfc8;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h4l2-5 3 10 2-5h7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h4l2-5 3 10 2-5h7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.search-page__form-input {
    min-width: 0;
    flex: 1;
    height: 100%;

    padding: 0 12px;

    border: 0;
    outline: 0;

    background: transparent;
    color: #102b55;

    font-family: inherit;
    font-size: 15px;
    font-weight: 500;

    box-sizing: border-box;
}

.search-page__form-submit {
    position: static;

    height: 52px;
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 26px;
    margin-right: 2px;

    border: 0;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #18cfc8 0%,
            #168df4 100%
        );

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 6px 16px rgba(22, 141, 244, .18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.search-page__form-submit::before {
    content: none;
}

.search-page__form-submit svg {
    display: none;
}

.search-page__form-submit::after {
    content: "Найти";
}

.search-page__form-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(22, 141, 244, .24);
}

.search-page__form-submit:active {
    transform: translateY(0);
}

.search-page__form:focus-within {
    border-color: #80c7ff;

    box-shadow:
        0 0 0 3px rgba(24, 207, 200, .08),
        0 8px 24px rgba(27, 105, 180, .08);
}

.search-popular a {
    color: #60738f;
}

/* ==================================================
   SEARCH SIDEBAR — COMPACT MINIMAL
   ================================================== */

.search-sidebar__card {
    overflow: hidden;

    border: 1px solid #d9e9f8;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(25, 91, 160, .07);
}


/* ОБЩИЕ СЕКЦИИ */

.search-sidebar__card .search-sidebar__section {
    margin: 0;
    padding: 22px 20px;
}

.search-sidebar__card .search-sidebar__section + .search-sidebar__section {
    border-top: 1px solid #e7eff8;
}

.search-sidebar__card .search-sidebar__section h2 {
    margin: 0 0 16px;

    color: #102b55;

    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}


/* ==================================================
   ДРУГИЕ ТАКЖЕ ИЩУТ — ТЕГИ
   ================================================== */

.search-sidebar__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-sidebar__tags a {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding: 6px 11px;

    border: 1px solid #cfe3f8;
    border-radius: 999px;

    background: #f8fbff;

    color: #60738f;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;

    text-decoration: none;

    transition:
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}

.search-sidebar__tags a:hover {
    color: #0877f9;
    border-color: #9acbff;
    background: #f0f8ff;

    transform: translateY(-1px);
}


/* ==================================================
   ТОП ЗАПРОСОВ
   ================================================== */

.search-sidebar__card .search-sidebar__top {
    margin: 0;
    padding: 0;

    list-style: none;
    counter-reset: search-top;
}

.search-sidebar__card .search-sidebar__top li {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 42px;

    margin: 0;
    padding: 0 0 0 34px;

    counter-increment: search-top;
}

.search-sidebar__card .search-sidebar__top li + li {
    border-top: 1px solid #edf3f9;
}

.search-sidebar__card .search-sidebar__top li::before {
    content: counter(search-top);

    position: absolute;
    left: 0;

    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef7ff;
    color: #0877f9;

    font-size: 11px;
    font-weight: 700;
}

.search-sidebar__card .search-sidebar__top a {
    display: block;

    padding: 10px 0;

    color: #17345d;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;

    text-decoration: none;

    transition: color .2s ease;
}

.search-sidebar__card .search-sidebar__top a:hover {
    color: #0877f9;
}


/* ==================================================
   НИЖНЯЯ ССЫЛКА
   ================================================== */

.search-sidebar__all {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0;
    padding: 16px 20px;

    border-top: 1px solid #dceaf7;

    background:
        linear-gradient(
            90deg,
            #f3fbff 0%,
            #eef6ff 100%
        );

    color: #0877f9;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.search-sidebar__all span:last-child {
    font-size: 19px;
    line-height: 1;

    transition: transform .2s ease;
}

.search-sidebar__all:hover {
    color: #0569db;
}

.search-sidebar__all:hover span:last-child {
    transform: translateX(3px);
}

/* SEARCH SIDEBAR — ПОПУЛЯРНО СЕЙЧАС */

.search-sidebar__popular-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-sidebar__fire {
    position: relative;

    width: 22px;
    height: 24px;
    flex: 0 0 22px;

    display: inline-block;

    background:
    linear-gradient(
        180deg,
        #ff922b 0%,
        #ff922b 44%,
        #168df4 58%,
        #0877f9 76%,
        #18bfc8 100%
    );

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M13.7 1.5c.4 4.1-2.8 5.8-4.8 8.3-1.2 1.5-1.9 3.1-1.5 5.1.3 1.5 1.3 2.7 2.7 3.2-.3-2.1.6-3.9 2.3-5.5.2 2.4 2.3 3.7 2.3 6.1 0 1.7-.8 3.1-2.1 4 3.5-.3 6.4-3.3 6.4-7.2 0-3.1-1.5-5.5-3.6-7.6.1 2-.5 3.2-1.5 3.8.7-3.4.2-6.9-.2-10.2z'/%3E%3C/svg%3E")
        center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M13.7 1.5c.4 4.1-2.8 5.8-4.8 8.3-1.2 1.5-1.9 3.1-1.5 5.1.3 1.5 1.3 2.7 2.7 3.2-.3-2.1.6-3.9 2.3-5.5.2 2.4 2.3 3.7 2.3 6.1 0 1.7-.8 3.1-2.1 4 3.5-.3 6.4-3.3 6.4-7.2 0-3.1-1.5-5.5-3.6-7.6.1 2-.5 3.2-1.5 3.8.7-3.4.2-6.9-.2-10.2z'/%3E%3C/svg%3E")
        center / contain no-repeat;

    filter: drop-shadow(0 3px 5px rgba(8, 119, 249, .22));
}

/* ==================================================
   SEARCH PAGINATION — FINAL
   ================================================== */

.search-pagination {
    margin-top: 24px;
}

.search-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-pagination .page-numbers {
    min-width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 11px;

    border: 1px solid #d5e5f5;
    border-radius: 11px;

    background: #ffffff;

    color: #17345d;

    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;

    text-decoration: none;
    box-sizing: border-box;

    transition:
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.search-pagination a.page-numbers:hover {
    color: #0877f9;
    border-color: #a8d1fa;
    background: #f5faff;

    transform: translateY(-1px);
}

.search-pagination .page-numbers.current {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #18cfc8 0%,
            #168df4 100%
        );

    color: #ffffff;

    box-shadow:
        0 4px 10px rgba(22, 141, 244, .14);
}

/* Назад / Вперёд */
.search-pagination .prev,
.search-pagination .next {
    min-width: auto;

    padding: 0 14px;

    border: 1px solid #d5e5f5;
    border-radius: 11px;

    background: #ffffff;

    color: #60738f;

    box-shadow: none;
}

/* Текст кнопки Назад */
.search-pagination .prev::after {
    content: "Назад";

    margin-left: 5px;

    font-size: 13px;
}

/* Текст кнопки Вперёд */
.search-pagination .next::before {
    content: "Вперёд";

    margin-right: 5px;

    font-size: 13px;
}

/* Hover для обеих навигационных кнопок */
.search-pagination .prev:hover,
.search-pagination .next:hover {
    color: #0877f9 !important;
    border-color: #a8d1fa !important;
    background: #f5faff !important;

    box-shadow: none;

    transform: translateY(-1px);
}
/* Фирменные стрелки пагинации */
.search-pagination .prev,
.search-pagination .next {
    font-size: 19px;
    line-height: 1;
}

/* ==================================================
   SEARCH PAGE — ПОХОЖИЕ ЗАПРОСЫ
   ================================================== */

.search-related {
    margin-top: 30px;
    margin-bottom: 32px;
}

.search-related__head {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 16px;
}

.search-related__head h2 {
    margin: 0;

    color: #102b55;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

/* Лупа возле заголовка */
.search-related__head-icon {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px;

    display: block;

    fill: none;
    stroke: #0877f9;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Две колонки */
.search-related__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

/* Одна плашка запроса */
.search-related__item {
    min-width: 0;
    min-height: 44px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 9px 16px;

    border: 0;
    border-radius: 14px;

    background: #f5f9fd;

    color: #314f73;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}

/* Маленькая лупа внутри запроса */
.search-related__item-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;

    display: block;

    fill: none;
    stroke: #607f9f;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: stroke .2s ease;
}

.search-related__item:hover {
    color: #0877f9;

    background: #f0f8ff;

    transform: translateY(-1px);
}

.search-related__item:hover .search-related__item-icon {
    stroke: #0877f9;
}

/* ==================================================
   SEARCH EMPTY STATE — FINAL
   ================================================== */

.search-empty {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 34px;
    align-items: center;

    margin-top: 28px;
    padding: 30px 34px;

    border: 1px solid #cfe5fb;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #fbfdff 0%,
            #f4f9ff 100%
        );

    box-shadow:
        0 10px 28px rgba(25, 91, 160, .06);

    box-sizing: border-box;
}

/* ------------------------------
   ИКОНКА
   ------------------------------ */

.search-empty__icon {
    position: relative;

    width: 118px;
    height: 118px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #eef7ff 0%,
            #dfefff 100%
        );
}

.search-empty__icon svg {
    width: 64px !important;
    height: 64px !important;

    display: block;

    fill: none;
    stroke: #356da8;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.search-empty__accent {
    position: absolute;

    display: block;

    border-radius: 999px;

    background: #168df4;
}

.search-empty__accent--one {
    width: 6px;
    height: 18px;

    top: 9px;
    right: 15px;

    transform: rotate(22deg);
}

.search-empty__accent--two {
    width: 15px;
    height: 5px;

    top: 28px;
    right: 2px;

    transform: rotate(-12deg);
}

/* ------------------------------
   ТЕКСТ
   ------------------------------ */

.search-empty__content h2 {
    margin: 0 0 10px;

    color: #102b55;

    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
}

.search-empty__query {
    margin: 0 0 14px;

    color: #5c7090;

    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
}

/* Выделение поискового запроса */
.search-empty__query strong {
    display: inline-flex;
    align-items: center;

    margin: 0 3px;
    padding: 3px 8px;

    border-radius: 8px;

    background: #e8f4ff;

    color: #0877f9;

    font-weight: 700;
}

.search-empty__hint {
    margin: 0;

    color: #5c7090;

    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
}

/* ==================================================
   SEARCH PAGE — MOBILE FOUNDATION
   ================================================== */

@media (max-width: 700px) {

    .search-page__inner {
        width: calc(100% - 28px);
        margin: 0 auto;
        padding-top: 22px;
    }

    .search-page__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .search-page__content {
        min-width: 0;
        width: 100%;
    }

    .search-sidebar {
        width: 100%;
        min-width: 0;
    }

    /* Верхняя часть страницы поиска */

    .search-page__head {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .search-page__head > div {
        width: 100%;
        min-width: 0;
    }

    .search-page__head h1 {
        margin: 0 0 8px;
        font-size: 32px;
        line-height: 1.12;
    }

    .search-page__head p {
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
    }

    .search-page__form {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: 58px;
    }

    .search-page__form::before {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .search-page__form-submit {
        height: 48px;
        padding: 0 22px;
    }

}

/* ==================================================
   SEARCH RESULT — MOBILE FINAL CARD DESIGN
   Основа: вариант №3 + категория из №6
   ================================================== */

@media (max-width: 700px) {

    /* Сама карточка */
.search-result {
    position: relative;

    display: block;
    grid-template-columns: none;

    width: 100%;
    min-height: 0;

    padding: 0;

    overflow: hidden;

    border-radius: 16px;

    background: #ffffff;
}


    /* Текстовая часть */
    .search-result__content {
        position: relative;
        z-index: 2;

        width: 100%;

        padding: 18px 20px;

        box-sizing: border-box;
    }


    /* Если у карточки есть изображение —
       оставляем ему примерно четверть ширины */
    .search-result:has(.search-result__media img)
    .search-result__content {
        padding-right: 23%;
    }


    /* ==================================================
       КАТЕГОРИЯ — ИКОНКА + ТЕКСТ
       ================================================== */

    .search-result__category {
        display: inline-flex;
        align-items: center;
        gap: 6px;

        margin-bottom: 7px;

        color: #0877f9;

        font-size: 12px;
        line-height: 1.2;
        font-weight: 700;
    }


    /* Фирменная лёгкая иконка категории */
    .search-result__category::before {
        content: "";

        width: 16px;
        height: 16px;
        flex: 0 0 16px;

        background-color: #168df4;

        -webkit-mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
            center / contain no-repeat;

        mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
            center / contain no-repeat;
    }


    /* ==================================================
       ЗАГОЛОВОК
       ================================================== */

    .search-result__title {
        margin: 0 0 6px;

        font-size: 20px;
        line-height: 1.25;
        font-weight: 700;
    }

    .search-result__title a {
        color: #1769c2;
    }


    /* ==================================================
       URL
       ================================================== */

    .search-result__url {
        margin-bottom: 7px;

        font-size: 12px;
        line-height: 1.35;
    }

    .search-result__url a {
        max-width: 100%;
    }

    .search-result__url span {
        overflow-wrap: anywhere;
    }


    /* ==================================================
       ОПИСАНИЕ
       ================================================== */

    .search-result__excerpt {
        margin-bottom: 10px;

        color: #314f73;

        font-size: 13px;
        line-height: 1.45;
    }


    /* ==================================================
       ВРЕМЯ ЧТЕНИЯ
       ================================================== */

    .search-result__meta {
        margin-top: 10px;
        margin-bottom: 0;

        color: #60738f;

        font-size: 12px;
        line-height: 1.3;
    }

    .search-result__meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* Иконка часов */
    .search-result__meta span::before {
        content: "";

        width: 14px;
        height: 14px;
        flex: 0 0 14px;

        background-color: #607f9f;

        -webkit-mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 8v4l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
            center / contain no-repeat;

        mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 8v4l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
            center / contain no-repeat;
    }


    /* ==================================================
       ИЗОБРАЖЕНИЕ СПРАВА
       ================================================== */

    .search-result__media {
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;

        width: 26%;
        height: 100%;

        padding: 0;

        display: block;

        overflow: hidden;

        z-index: 1;
    }

    .search-result__media img {
        width: 100% !important;
        height: 100% !important;

        display: block;

        object-fit: cover;

        border-radius: 0;

        /* Слева почти прозрачная,
           справа проявляется полностью */
        -webkit-mask-image:
    linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, .08) 22%,
        rgba(0, 0, 0, .35) 45%,
        rgba(0, 0, 0, .75) 68%,
        #000000 88%,
        #000000 100%
    );

mask-image:
    linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, .08) 22%,
        rgba(0, 0, 0, .35) 45%,
        rgba(0, 0, 0, .75) 68%,
        #000000 88%,
        #000000 100%
    );
    }


    /* ==================================================
       СТРЕЛКА НА МОБИЛЬНОМ БОЛЬШЕ НЕ НУЖНА
       ================================================== */

    .search-result__arrow {
        display: none !important;
    }

}

/* ==================================================
   SITE FOOTER — MOBILE LAYOUT
   ================================================== */

@media (max-width: 700px) {

    .site-footer__inner {
        width: calc(100% - 28px);
        max-width: none;

        margin: 0 auto;

        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 24px;
        row-gap: 30px;

        box-sizing: border-box;
    }


    /* Бренд — на всю ширину */
    .site-footer__brand {
        grid-column: 1 / -1;

        min-width: 0;
        width: 100%;
    }


    /* Все обычные колонки */
    .site-footer__column {
        min-width: 0;
        width: 100%;
    }


    /* Блок "О проекте" — снова на всю ширину */
    .site-footer__column:last-child {
        grid-column: 1 / -1;
    }


    /* Меню не должно растягивать футер */
    .site-footer__menu {
        width: 100%;
        min-width: 0;
    }

    .site-footer__menu li,
    .site-footer__menu a {
        max-width: 100%;
    }


    /* Нижняя часть футера */
    .site-footer__bottom-inner {
        width: calc(100% - 28px);
        max-width: none;

        margin: 0 auto;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;

        box-sizing: border-box;
    }

}

/* ==================================================
   SITE FOOTER — MOBILE BOTTOM SPACING FIX
   ================================================== */

@media (max-width: 700px) {

    .site-footer__bottom-inner {
        min-height: 0;
        padding: 10px 0 8px;
    }

}

/* ==================================================
   SEARCH EMPTY STATE — MOBILE
   ================================================== */

@media (max-width: 700px) {

    .search-empty {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 18px;

        margin-top: 26px;
        padding: 24px 22px;

        border-radius: 16px;
    }


    /* Иконка становится компактнее */
    .search-empty__icon {
        width: 86px;
        height: 86px;

        flex: 0 0 86px;
    }

    .search-empty__icon svg {
        width: 48px !important;
        height: 48px !important;

        stroke-width: 4;
    }


    /* Маленькие акцентные штрихи */
    .search-empty__accent--one {
        width: 5px;
        height: 14px;

        top: 7px;
        right: 11px;
    }

    .search-empty__accent--two {
        width: 12px;
        height: 4px;

        top: 21px;
        right: 0;
    }


    /* Текст занимает всю ширину */
    .search-empty__content {
        width: 100%;
        min-width: 0;
    }

    .search-empty__content h2 {
        margin: 0 0 10px;

        font-size: 24px;
        line-height: 1.2;
    }


    .search-empty__query {
        margin: 0 0 12px;

        font-size: 15px;
        line-height: 1.5;
    }


    .search-empty__query strong {
        margin: 0 2px;
        padding: 3px 7px;
    }


    .search-empty__hint {
        margin: 0;

        font-size: 15px;
        line-height: 1.5;
    }

}

/* ==================================================
   SEARCH EMPTY STATE — COMPACT MOBILE TITLE
   ================================================== */

@media (max-width: 700px) {

    .search-empty {
        display: block;

        margin-top: 26px;
        padding: 26px 22px;
    }

    .search-empty__content {
        width: 100%;
    }

    .search-empty__title {
        display: flex;
        align-items: center;
        gap: 9px;

        margin: 0 0 14px;

        color: #102b55;

        font-size: 24px;
        line-height: 1.2;
        font-weight: 700;
    }

    .search-empty__title-icon {
        width: 23px;
        height: 23px;
        flex: 0 0 23px;

        fill: none;
        stroke: #0877f9;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .search-empty__query {
        margin: 0 0 12px;
    }

    .search-empty__hint {
        margin: 0;
    }

}

/* ==================================================
   SEARCH EMPTY STATE — DESKTOP / MOBILE ICON SWITCH
   ================================================== */

/* На десктопе маленькую иконку возле заголовка прячем */
.search-empty__title-icon {
    display: none;
}

@media (max-width: 700px) {

    /* Большая десктопная лупа на телефоне не нужна */
    .search-empty__icon {
        display: none;
    }

    .search-empty {
        display: block;

        margin-top: 26px;
        padding: 26px 22px;
    }

    .search-empty__content {
        width: 100%;
        min-width: 0;
    }

    .search-empty__title {
        display: flex;
        align-items: center;
        gap: 9px;

        margin: 0 0 14px;

        color: #102b55;

        font-size: 24px;
        line-height: 1.2;
        font-weight: 700;
    }

    /* Маленькая мобильная лупа */
    .search-empty__title-icon {
        display: block;

        width: 23px !important;
        height: 23px !important;
        flex: 0 0 23px;

        fill: none;
        stroke: #0877f9;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .search-empty__query {
        margin: 0 0 12px;
    }

    .search-empty__hint {
        margin: 0;
    }

}

/* ==================================================
   SEARCH RESULT — DESKTOP GRADIENT CARD
   ================================================== */

@media (min-width: 701px) {

    .search-result {
        position: relative;

        display: block;
        grid-template-columns: none;
        gap: 0;

        min-height: 150px;
        padding: 0;

        overflow: hidden;

        border: 1px solid #e0e9f5;
        border-radius: 16px;

        background: #ffffff;

        box-sizing: border-box;
    }

    /* Текст карточки */
    .search-result__content {
        position: relative;
        z-index: 2;

        width: 100%;

        padding: 18px 20px;

        box-sizing: border-box;
    }

    /* Если есть изображение —
       оставляем тексту безопасную область справа */
    .search-result:has(.search-result__media img)
    .search-result__content {
        padding-right: 24%;
    }

    /* Контейнер изображения */
.search-result__media {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 32%;
    height: 100%;

    margin: 0;
    padding: 0;

    display: block;

    overflow: hidden;

    z-index: 1;
}


/* Изображение справа */
.search-result__media img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover;

    border-radius: 0;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0, 0, 0, .10) 18%,
            rgba(0, 0, 0, .45) 42%,
            rgba(0, 0, 0, .82) 68%,
            #000000 88%,
            #000000 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0, 0, 0, .10) 18%,
            rgba(0, 0, 0, .45) 42%,
            rgba(0, 0, 0, .82) 68%,
            #000000 88%,
            #000000 100%
        );
}

    /* Старая круглая стрелка больше не нужна */
    .search-result__arrow {
        display: none;
    }
}
/* ==================================================
   CATEGORY PAGE — HERO
   Основа дизайна №2
   ================================================== */

.category-page__inner {
    width: min(
        var(--container),
        calc(100% - 64px)
    );
    margin: 0 auto;
    padding: 28px 0 56px;
    box-sizing: border-box;
}

.category-page__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;

    color: #7b8eaa;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

.category-page__breadcrumbs a {
    color: #6d83a2;
    text-decoration: none;
}

.category-page__breadcrumbs a:hover {
    color: #0877f9;
}


/* HERO */

.category-hero {
    position: relative;

    height: 230px;
    min-height: 230px;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);

    overflow: hidden;

    border: 1px solid #cfe5fb;
    border-radius: 18px;

    background:
        linear-gradient(
            105deg,
            #dff3ff 0%,
            #d8efff 46%,
            #edf7ff 66%,
            #ffffff 100%
        );

    box-shadow:
        0 10px 28px rgba(25, 91, 160, .08);

    box-sizing: border-box;
}


/* ЛЕВАЯ ЧАСТЬ */

.category-hero__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding: 26px 30px 22px;
}

.category-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;

    margin-bottom: 12px;
    padding: 5px 10px;

    border-radius: 999px;

    background: rgba(8, 119, 249, .10);

    color: #0877f9;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}

.category-hero__title {
    margin: 0 0 8px;

    color: #102b55;

    font-size: 30px;
    line-height: 1.08;
    font-weight: 700;
}

.category-hero__description {
    max-width: 460px;

    color: #48627f;

    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}

.category-hero__description p {
    margin: 0;
}


/* ПРЕИМУЩЕСТВА */

.category-hero__features {
    display: flex;
    align-items: center;
    gap: 22px;

    margin-top: auto;
}

.category-hero__feature {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #28486f;

    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
}

.category-hero__feature-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(8, 119, 249, .18);

    color: #168df4;

    font-size: 15px;
    line-height: 1;

    box-shadow:
        0 4px 10px rgba(8, 119, 249, .06);
}


/* ПРАВАЯ ЧАСТЬ */

.category-hero__media {
    position: relative;

    height: 230px;
    min-height: 230px;

    overflow: hidden;
}

.category-hero__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0, 0, 0, .18) 14%,
            rgba(0, 0, 0, .68) 34%,
            #000000 52%,
            #000000 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0, 0, 0, .18) 14%,
            rgba(0, 0, 0, .68) 34%,
            #000000 52%,
            #000000 100%
        );
}

/* ==================================================
   CATEGORY PAGE — DESKTOP LAYOUT
   ================================================== */

.category-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 46px;
    align-items: start;
}

.category-page__content {
    min-width: 0;
}

.category-page__sidebar {
    min-width: 0;
}

.category-hero__badge {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 3;

    padding: 13px 15px;

    border-radius: 12px 0 0 0;

    background:
        linear-gradient(
            135deg,
            #0877f9 0%,
            #0d62c9 100%
        );

    color: #ffffff;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(8, 119, 249, .22);
}

/* ==================================================
   CATEGORY PAGE — FINAL DESIGN №2
   ================================================== */

.category-page {
    background: #ffffff;
}

.category-page__inner {
    width: min(
        var(--container),
        calc(100% - 64px)
    );
    margin: 0 auto;
    padding: 28px 0 56px;
    box-sizing: border-box;
}


/* ХЛЕБНЫЕ КРОШКИ */

.category-page__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: #7b8eaa;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

.category-page__breadcrumbs a {
    color: #6d83a2;
    text-decoration: none;
}

.category-page__breadcrumbs a:hover {
    color: #0877f9;
}


/* ОСНОВНАЯ СЕТКА */

.category-page__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        270px;

    gap: 28px;

    align-items: start;
}

.category-page__content {
    min-width: 0;
}


/* ==================================================
   HERO
   ================================================== */

.category-hero {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(340px, .75fr);

    min-height: 245px;

    overflow: hidden;

    border: 1px solid #cfe5fb;
    border-radius: 18px;

    background:
        linear-gradient(
            110deg,
            #dff3ff 0%,
            #d8efff 42%,
            #eef8ff 67%,
            #ffffff 100%
        );

    box-shadow:
        0 12px 30px rgba(25, 91, 160, .10);

    box-sizing: border-box;
}


/* ЛЕВАЯ ЧАСТЬ HERO */

.category-hero__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    padding: 24px 28px 22px;

    box-sizing: border-box;
}

.category-hero__label {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 10px;

    padding: 4px 9px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #168df4 0%,
            #18bfc8 100%
        );

    color: #ffffff;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
}

.category-hero__title {
    margin: 0 0 8px;

    color: #102b55;

    font-size: 34px;
    line-height: 1.08;
    font-weight: 700;
}

.category-hero__description {
    max-width: 500px;

    color: #36577c;

    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.category-hero__description p {
    margin: 0;
}


/* HERO — ТРИ ПУНКТА */

.category-hero__features {
    display: flex;
    align-items: center;

    gap: 26px;

    margin-top: auto;
}

.category-hero__feature {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #28486f;

    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
}

.category-hero__feature-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .88);

    border:
        1px solid rgba(8, 119, 249, .18);

    box-shadow:
        0 5px 14px rgba(8, 119, 249, .08);

    color: #0877f9;
}

.category-hero__feature-icon svg {
    width: 18px;
    height: 18px;

    display: block;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* HERO — КАРТИНКА */

.category-hero__media {
    position: relative;

    min-height: 245px;

    overflow: hidden;
}

.category-hero__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.22) 15%,
            rgba(0,0,0,.72) 36%,
            #000 58%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.22) 15%,
            rgba(0,0,0,.72) 36%,
            #000 58%,
            #000 100%
        );
}


/* HERO — СИНЯЯ ПЛАШКА */

.category-hero__badge {
    position: absolute;

    right: 10px;
    bottom: 10px;

    z-index: 3;

    width: 104px;

    padding: 10px 11px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #168df4 0%,
            #0877f9 100%
        );

    color: #ffffff;

    font-size: 10px;
    line-height: 1.25;
    font-weight: 700;

    box-shadow:
        0 8px 18px rgba(8, 119, 249, .22);

    box-sizing: border-box;
}


/* ==================================================
   ФИЛЬТРЫ
   ================================================== */

.category-filters {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 18px 0 20px;

    flex-wrap: wrap;
}

.category-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 0 16px;

    border: 1px solid #d7e5f5;
    border-radius: 999px;

    background: #ffffff;

    color: #4c6684;

    font-size: 11px;
    line-height: 1;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(25, 91, 160, .04);
}

.category-filter.is-active {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #168df4 0%,
            #0877f9 100%
        );

    color: #ffffff;

    box-shadow:
        0 6px 14px rgba(8, 119, 249, .18);
}


/* ==================================================
   КАРТОЧКИ СТАТЕЙ
   ================================================== */

.category-articles {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.category-article {
    overflow: hidden;

    border: 1px solid #dce7f3;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 10px 24px rgba(25, 91, 160, .08);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.category-article:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(25, 91, 160, .12);
}

.category-article__image {
    display: block;

    height: 160px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e8f4ff,
            #dcecff
        );
}

.category-article__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.category-article__placeholder {
    width: 100%;
    height: 100%;

    display: block;

    background:
        linear-gradient(
            135deg,
            #e6f3ff 0%,
            #d8eaff 100%
        );
}

.category-article__body {
    padding: 13px 14px 14px;
}

.category-article__title {
    margin: 0;

    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}

.category-article__title a {
    color: #102b55;

    text-decoration: none;
}

.category-article__title a:hover {
    color: #0877f9;
}

.category-article__meta {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 14px;

    color: #7285a1;

    font-size: 10px;
    line-height: 1.3;
    font-weight: 500;
}


/* ==================================================
   ПАГИНАЦИЯ
   ================================================== */

.category-pagination {
    margin-top: 20px;
}

.category-pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.category-pagination a,
.category-pagination span {
    min-width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border: 1px solid #d7e5f5;
    border-radius: 8px;

    background: #ffffff;

    color: #0877f9;

    font-size: 11px;
    font-weight: 600;

    text-decoration: none;
}

.category-pagination .current {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #18cfc8 0%,
            #168df4 100%
        );

    color: #ffffff;

    box-shadow:
        0 5px 12px rgba(22, 141, 244, .18);
}


/* ==================================================
   SIDEBAR
   ================================================== */

.category-sidebar {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.category-sidebar__card {
    padding: 18px;

    border: 1px solid #dce7f3;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 10px 24px rgba(25, 91, 160, .08);

    box-sizing: border-box;
}

.category-sidebar__title {
    margin: 0 0 14px;

    color: #102b55;

    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.category-sidebar__list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.category-sidebar__item {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #24466f;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;

    text-decoration: none;
}

.category-sidebar__item:hover {
    color: #0877f9;
}

.category-sidebar__item-icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #eaf5ff;

    color: #0877f9;

    font-size: 15px;
}


/* ВОПРОС СПЕЦИАЛИСТУ */

.category-sidebar__question {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    background:
        linear-gradient(
            135deg,
            #eef7ff 0%,
            #e9f3ff 100%
        );
}

.category-sidebar__question-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #168df4 0%,
            #0877f9 100%
        );

    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
}

.category-sidebar__question h2 {
    margin: 0 0 5px;

    color: #102b55;

    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
}

.category-sidebar__question p {
    margin: 0 0 12px;

    color: #5d7593;

    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
}

.category-sidebar__button {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 18px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #168df4 0%,
            #0877f9 100%
        );

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 6px 14px rgba(8, 119, 249, .16);
}


/* EMPTY */

.category-empty {
    padding: 32px;

    border: 1px solid #dce7f3;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 10px 24px rgba(25, 91, 160, .06);

    text-align: center;
}

.category-empty h2 {
    margin: 0 0 8px;

    color: #102b55;
}

.category-empty p {
    margin: 0;

    color: #7185a3;
}

/* ==================================================
   CATEGORY HERO — EXACT VISUAL TUNING
   Ориентир: Screenshot_264
   ================================================== */

.category-hero {
    position: relative;

    display: grid;
    grid-template-columns: 60% 40%;

    height: 280px;
    min-height: 280px;

    overflow: hidden;

    border: 1px solid #cfe5fb;
    border-radius: 18px;

    background:
        linear-gradient(
            110deg,
            #d8efff 0%,
            #cce9ff 48%,
            #e8f5ff 68%,
            #ffffff 100%
        );

    box-shadow:
        0 12px 30px rgba(25, 91, 160, .10);

    box-sizing: border-box;
}


/* ЛЕВАЯ ЧАСТЬ */

.category-hero__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    padding: 26px 30px 24px;

    box-sizing: border-box;
}


.category-hero__label {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 10px;
    padding: 5px 11px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #55b6ff 0%,
            #168df4 100%
        );

    color: #ffffff;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
}


.category-hero__title {
    margin: 0 0 8px;

    color: #102b55;

    font-size: 36px;
    line-height: 1.08;
    font-weight: 700;
}


.category-hero__description {
    max-width: 480px;

    color: #284d78;

    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
}

.category-hero__description p {
    margin: 0;
}


/* ТРИ ПРЕИМУЩЕСТВА */

.category-hero__features {
    display: flex;
    align-items: center;

    gap: 34px;

    margin-top: auto;
}


.category-hero__feature {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #28486f;

    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
}


.category-hero__feature-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .92);

    border:
        1px solid rgba(8, 119, 249, .18);

    color: #0877f9;

    box-shadow:
        0 5px 15px rgba(8, 119, 249, .10);
}


.category-hero__feature-icon svg {
    width: 22px;
    height: 22px;

    display: block;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.9;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ПРАВАЯ ЧАСТЬ С ФОТО */

.category-hero__media {
    position: relative;

    height: 280px;
    min-height: 280px;

    overflow: hidden;
}


.category-hero__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0, 0, 0, .18) 8%,
            rgba(0, 0, 0, .55) 22%,
            rgba(0, 0, 0, .88) 38%,
            #000000 52%,
            #000000 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0, 0, 0, .18) 8%,
            rgba(0, 0, 0, .55) 22%,
            rgba(0, 0, 0, .88) 38%,
            #000000 52%,
            #000000 100%
        );
}


/* СИНЯЯ ПЛАШКА */

.category-hero__badge {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 3;

    width: 126px;

    padding: 15px 16px;

    border-radius: 13px 0 0 0;

    background:
        linear-gradient(
            135deg,
            #168df4 0%,
            #0567cf 100%
        );

    color: #ffffff;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(8, 119, 249, .22);

    box-sizing: border-box;
}

/* ==================================================
   CATEGORY HERO — DECORATIVE BACKGROUND
   Фон как в утверждённом макете
   ================================================== */

.category-hero {
    isolation: isolate;

    background:
        radial-gradient(
            circle at 16% 8%,
            rgba(65, 174, 255, .22) 0%,
            rgba(65, 174, 255, .10) 23%,
            transparent 47%
        ),
        radial-gradient(
            circle at 46% 75%,
            rgba(255, 255, 255, .40) 0%,
            transparent 43%
        ),
        linear-gradient(
            110deg,
            #ccecff 0%,
            #d8efff 34%,
            #e8f6ff 58%,
            #f5fbff 100%
        );
}


/* МЯГКАЯ ДЕКОРАТИВНАЯ ГЕОМЕТРИЯ */

.category-hero::before {
    content: "";

    position: absolute;

    left: -46px;
    bottom: -72px;

    width: 230px;
    height: 230px;

    z-index: 0;

    border: 18px solid rgba(24, 174, 235, .08);
    border-radius: 42% 58% 60% 40%;

    transform: rotate(-24deg);

    pointer-events: none;
}


/* ЛЁГКИЙ СВЕТОВОЙ СЛОЙ ПО ЦЕНТРУ */

.category-hero::after {
    content: "";

    position: absolute;

    left: 42%;
    top: -55px;

    width: 220px;
    height: 360px;

    z-index: 0;

    background:
        linear-gradient(
            120deg,
            transparent 12%,
            rgba(255, 255, 255, .28) 48%,
            transparent 78%
        );

    transform: rotate(8deg);

    pointer-events: none;
}


/* ТЕКСТ И ПРЕИМУЩЕСТВА ОСТАЮТСЯ НАД ДЕКОРОМ */

.category-hero__content {
    position: relative;
    z-index: 2;
}


/* ФОТО ОСТАЁТСЯ НАД ФОНОМ */

.category-hero__media {
    position: relative;
    z-index: 1;
}