/* ===== Mini-reboot (замена bootstrap-reboot.css) ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    overflow-x: hidden;
    width: 100%;
    font-family: 'Inter', 'arial', 'san-serif';
    font-weight: 400;
    background-color: #F7F8FA;
}

p {
    margin-top: 0;
}

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

ul, ol {
    margin: 0;
    padding: 0;
}

a {
    background-color: transparent;
}

button {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

button.cky-btn {
  display: inline-block !important;
  padding: 11px 21px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
}
button.cky-btn-accept, 
button.cky-btn-accept:focus {
  color: #fff !important;
  background: #6366F1 !important;
  border: 1px solid #6366F1 !important;
}
button.cky-btn-accept:hover, 
button.cky-btn-accept:active {
  background-color: #fff !important;
  color: #6366F1 !important;
  border: 1px solid #6366F1 !important;
}
button.cky-btn-reject, 
button.cky-btn-reject:focus {
  color: #0F1319 !important;
  background: #fff !important;
  border: 1px solid #E2E5EA !important;
}
button.cky-btn-reject:hover, 
button.cky-btn-reject:active {
  background-color: #fff !important;
  color: #6366F1 !important;
  border: 1px solid #6366F1 !important;
}
button.cky-btn-preferences, 
button.cky-btn-preferences:focus {
  color: #4F46E5 !important;
  border: none !important;
  background: transparent !important;
}
button.cky-btn-preferences:hover, 
button.cky-btn-preferences:active {
  color: #0F1319 !important;
  border: none !important;
  background: transparent !important;
}
button.cky-btn-customize, 
button.cky-btn-customize:focus {
  color: #4F46E5 !important;
  border: none !important;
  background: transparent !important;
}
button.cky-btn-customize:hover, 
button.cky-btn-customize:active {
  color: #0F1319 !important;
  border: none !important;
  background: transparent !important;
}
.cky-consent-bar .cky-btn-customize::after {
    display: none !important;
}
.cky-notice-des,
.cky-notice-des p {
  color: #0F1319 !important;
  font-size: 15px !important;
  line-height: 24px !important;
}
.cky-accordion-header .cky-always-active {
  color: #4F46E5 !important;
}

@media (max-width: 768px) {
    .cky-notice-btn-wrapper .cky-btn {
        width: 100%;
    }
}


/* ===== Header base ===== */
.header {
    z-index: 1030;
    border-bottom: 1px solid #E2E5EA;
    box-shadow: none !important;
    padding: 7px 0;
    position: fixed;
    width: 100%;
}
.header__logo {
    display: flex;
    color: #0F1319 !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0px;
    gap: 10px;
    align-items: center;
}

.header__logo-img {
    display: block;
    height: auto;
    width: 100%;
    max-height: 26px;
    max-width: 111px;
}
.header__logo-img-only {
    display: block;
    height: auto;
    width: 100%;
    max-height: 26px;
    max-width: 111px;
}

/* ===== Burger button ===== */
.header__toggler {
    background: transparent;
    border: none;
    padding: 8px;
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
}

.header__burger,
.header__burger::before,
.header__burger::after {
    display: block;
    position: absolute;
    /*left: 8px;*/
    width: 20px;
    height: 2px;
    background: #0F1319;
    transition: transform .25s ease, opacity .25s ease;
}

.header__burger {
    top: 19px;
}
.header__burger::before {
    content: '';
    top: -6px;
}
.header__burger::after {
    content: '';
    top: 6px;
}

/* Крестик при открытом меню */
.header__toggler[aria-expanded="true"] .header__burger {
    background: transparent;
}
.header__toggler[aria-expanded="true"] .header__burger::before {
    transform: translateY(6px) rotate(45deg);
}
.header__toggler[aria-expanded="true"] .header__burger::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* ===== Collapse (обязательно свой, т.к. нет bootstrap-reboot/components) ===== */
.collapse:not(.show) {
    display: none;
}
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
}

/* ===== Desktop menu ===== */
.header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}

.header__menu .nav-item {
    position: relative;
}

.header__menu .nav-link,
.header__menu .nav-link:focus {
    display: block;
    padding: 10px 14px;
    color: #4B5361;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    line-height: 14px;
    font-weight: 500;
}
.header__menu .nav-link:hover,
.header__menu .nav-link:active {
    color: #0F1319;
    text-decoration: none;
}

.header__caret {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 6px;
    vertical-align: middle;
}

/* Dropdown submenu (desktop = hover) */
.header__submenu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-radius: 6px;
    z-index: 10;
}

@media (min-width: 992px) {
    .header__menu-item--dropdown:hover .header__submenu {
        display: block;
    }
}
@media (max-width: 991.98px) {
    .header {
        padding: 0px 0;
    }
    .header__menu .nav-link, 
    .header__menu .nav-link:focus {
        text-align: center;
    }
}

/* ===== Кнопки Sign in / Create account ===== */
.btn-sign-in,
.btn-create {
    display: inline-block;
    padding: 12px 21px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn-sign-in,
.btn-sign-in:focus {
    color: #4F46E5;
    border: none;
    background: transparent;
}
.btn-sign-in:hover,
.btn-sign-in:active {
    color: #0F1319;
    border: none;
    background: transparent;
}

.btn-create,
.btn-create:focus {
    color: #fff;
    background: #6366F1;
    border: 1px solid #6366F1;
}
.btn-create:hover,
.btn-create:active {
    background-color: #fff;
    color: #6366F1;
    border: 1px solid #6366F1;
}

/* ===== Mobile ===== */
@media (max-width: 991.98px) {
    .header__collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
        padding: 16px;
    }

    .header__menu {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .header__menu-item {
        border-bottom: 1px solid #f1f1f1;
    }

    .header__menu-link {
        padding: 12px 0;
    }

    /* На мобильных подменю раскрывается по клику, не по hover */
    .header__menu-item--dropdown.is-open .header__submenu {
        display: block;
        position: static;
        box-shadow: none;
        padding-left: 12px;
    }

    .header__actions {
        margin-top: 12px;
    }

    .btn-sign-in,
    .btn-create {
        width: 100%;
    }
}


/* ===== Footer ===== */
.footer {
    background-color: #F7F8FA;
    padding: 65px 0 30px 0;
    border-top: 1px solid #E2E5EA;
}

.footer__logo {
    display: flex;
    color: #0F1319 !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0px;
    gap: 10px;
    align-items: center;
}
.footer__logo-img {
    max-height: 36px;
    width: auto;
    display: block;
}

.footer__top {
    border-bottom: 1px solid #E2E5EA;
    row-gap: 16px;
    padding: 0 0 25px 0;
}

/* Меню в одну строку на десктопе */
.footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;
    flex-wrap: nowrap;
}

.footer__menu li {
    white-space: nowrap;
}

.footer__menu a,
.footer__menu a:focus {
    color: #4B5361;
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    text-decoration: none;
}
.footer__menu a:hover,
.footer__menu a:active {
    color: #0F1319;
    text-decoration: none;
}

.footer__copy {
    color: #6B7280;
    font-size: 13px;
    line-height: 13px;
    text-align: left;
    padding: 30px 0 0 0;
}

/* ===== Mobile: логотип сверху, меню под ним ===== */
@media (max-width: 767.98px) {
    .footer {
        padding: 40px 0 20px 0;
    }
    .footer__top {
        flex-direction: column;
        align-items: flex-start !important;
    padding: 0 0 20px 0;
    }
    /* .footer__logo img {
        max-height: 22px;
    } */
    .footer__menu {
        flex-wrap: wrap;
        gap: 12px 20px;
        width: 100%;
    }

    .footer__menu li {
        white-space: normal;
    }
    .footer__copy {
        text-align: left;
        padding: 20px 0 0 0;
    }
}


#error-404 {
    max-width: 540px;
    margin: 0 auto;
    padding: 85px 0 0 0;
}
.error-404-header {
    margin: 0 0 18px;
}
.error-404-title {
    font-size: 132px;
    font-weight: 700;
    color: #CBD0D8;
    line-height: 136px;
    margin: 0 0 15px;
    text-align: center;
}
.error-404-subtitle {
    font-size: 40px;
    font-weight: 700;
    color: #0F1319;
    line-height: 48px;
    margin: 0 0 15px;
    text-align: center;
}
.error-404-content {
    font-size: 18px;
    color: #4B5361;
    line-height: 28px;
    text-align: center;
    margin: 0 0 25px;
}

.error-404-content__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.error-404-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.error-404-btn--primary,
.error-404-btn--primary:focus {
    background-color: #6366F1;
    color: #fff;
    border: 1px solid #6366F1;
}
.error-404-btn--primary:hover,
.error-404-btn--primary:active {
    background-color: #fff;
    color: #6366F1;
    border: 1px solid #6366F1;
}

.error-404-btn--secondary,
.error-404-btn--secondary:focus {
    color: #0F1319;
    background: #fff;
    border: 1px solid #E2E5EA;
}
.error-404-btn--secondary:hover,
.error-404-btn--secondary:active {
    background-color: #fff;
    color: #6366F1;
    border: 1px solid #6366F1;
}

@media (max-width: 575.98px) {
    #error-404 {
        padding: 65px 0 0 0;
    }
    .error-404-title {
        font-size: 96px;
        line-height: 100px;
        margin: 0 0 15px;
    }
    .error-404-subtitle {
        font-size: 28px;
        line-height: 34px;
        margin: 0 0 15px;
    }
    .error-404-content {
        font-size: 16px;
        line-height: 25px;
        margin: 0 0 25px;
    }
    .error-404-content__buttons {
        margin-bottom: 10px;
        flex-direction: column;
    }
}

.site-main {
    background-color: #fff;
}
/* ===== Post ===== */
.page-main {
    padding: 80px 0;
    background-color: #fff;
}
.site-main .page,
.site-main .post {
    padding: 60px 0 0 0;
    max-width: 760px;
    margin: 0 auto;
}
.entry-title,
.page-title {
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.8px;
    color: #0F1319;
    margin: 0 0 17px 0;
}
.entry-content p.page-modified-date,
.page-content p.page-modified-date {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #6B7280;
    margin: 0 0 17px 0;
}
.entry-content,
.page-content {
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0px;
    color: #4B5361;
}
.entry-content img,
.page-content img {
    max-width: 100%;
    height: auto;
}
.entry-thumbnail img,
.page-thumbnail img {
    width: 100%;
}
.entry-content h1,
.page-content h1,
.entry-content h2,
.page-content h2,
.entry-content h3,
.page-content h3,
.entry-content h4,
.page-content h4,
.entry-content h5,
.page-content h5,
.entry-content h6,
.page-content h6 {
    color: #0F1319;
    margin-top: 0;
}
.entry-content h2,
.page-content h2 {
    margin: 35px 0 15px 0;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.2px;

}
.entry-content h3,
.page-content h3 {
    
}
.entry-content h4,
.page-content h4 {
    
}
.entry-content h5,
.page-content h5 {
    
}
.entry-content h6,
.page-content h6 {
    
}
.entry-content strong,
.page-content strong {
    color: #0F1319;
}
.entry-content a,
.entry-content a:focus,
.page-content a,
.page-content a:focus {
    color: #4F46E5;
    text-decoration: none;
}
.entry-content a:hover,
.entry-content a:active,
.page-content a:hover,
.page-content a:active {
    color: #0F1319;
    text-decoration: none;
}
.entry-content blockquote,
.page-content blockquote {
    background-color: #F7F8FA;
    border: 1px solid #E2E5EA;
    border-radius: 12px;
    margin: 0 0 17px 0;
    padding: 20px 20px 10px 20px;
}
.entry-content blockquote *,
.page-content blockquote * {
    margin: 0;
    font-size: 15px;
    line-height: 23px;
}
.entry-content p,
.page-content p {
    margin: 0 0 10px;
}
.entry-content ul,
.page-content ul {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 23px;
}
.entry-content ul li,
.page-content ul li {
    margin: 0 0 7px;
    padding: 0 0 0 15px;
    position: relative;
}
.entry-content ul li::after,
.page-content ul li::after {
    content: '';
    background-color: #6366F1;
    width: 6px;
    height: 6px;
    position: absolute;
    left: 0;
    top: 9px;
    border-radius: 50%;
}

.entry-content #toc_container,
.page-content #toc_container {
    width: 100%;
    border: 1px solid #E2E5EA;
    background-color: #F7F8FA;
    border-radius: 12px;
    padding: 20px 20px 11px 20px;
    margin: 20px 0 10px 0;
}
.entry-content p.toc_title,
.page-content p.toc_title {
    font-weight: 600 !important;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0px;
    color: #0F1319;
    margin: 0 0 7px !important;
}
.entry-content ul.toc_list,
.page-content ul.toc_list {
    width: 100%;
    margin: 0 !important;
    max-width: 480px;
    column-count: 2;
    column-gap: 40px;
}
.entry-content ul.toc_list li::after,
.page-content ul.toc_list li::after {
    display: none;
}
.entry-content ul.toc_list li,
.page-content ul.toc_list li {
    margin: 0 0 8px 0 !important;
}
.entry-content ul.toc_list li a,
.page-content ul.toc_list li a {
    color: #4F46E5;
    font-size: 15px;
    line-height: 23px;
}


.entry-content ol,
.page-content ol {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 23px;
}
.entry-content ol li,
.page-content ol li {
    margin: 0 0 7px;
}
.entry-content .wp-block-table,
.page-content .wp-block-table {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E2E5EA;
}

.entry-content table,
.page-content table {
    border-collapse: collapse;
    width: 100%;
}

.entry-content table tr:first-child td,
.page-content table tr:first-child td {
    background-color: #F7F8FA;
    color: #0F1319;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.entry-content table tr td,
.page-content table tr td {
    border: 1px solid #E2E5EA;
    padding: 10px 15px;
    font-size: 15px;
    line-height: 23px;
    border-right-width: 0px;
    vertical-align: top;
}
.entry-content table tr td:first-child,
.page-content table tr td:first-child {
    border-left-width: 0px;
}
.entry-content table tr:first-child td,
.page-content table tr:first-child td {
    border-top-width: 0px;
}

.entry-content table tr:last-child td,
.page-content table tr:last-child td {
    border-bottom-width: 0px;
}
/* ===== Mobile ===== */
@media (max-width: 991.98px) {
    .site-main .page, 
    .site-main .post {
        padding: 30px 0 0 0;
    }
    .entry-content ul.toc_list, 
    .page-content ul.toc_list {
        column-count: 1;
    }
}



/* ===== Contact Page ===== */
.page-text--before {
    font-size: 18px;
    line-height: 28px;
    color: #4B5361;
    margin: 0 0 20px 0;
}
.page-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.page-block {
    flex: 1 1 370px;
    max-width: 370px;
    display: flex;
    flex-direction: column;
    border: 1px solid #E2E5EA;
    box-shadow: 0px 1px 2px 0px #0F121A0D, 0px 8px 24px -4px #0F121A0F;
    border-radius: 12px;
    padding: 22px 25px 15px 25px;
}
.page-block--title {
    font-size: 18px;
    line-height: 28px;
    color: #0F1319;
    font-weight: 600;
    margin: 0 0 5px 0;
}
.page-block--text {
    font-size: 15px;
    line-height: 23px;
}
.page-block--text a {
    font-weight: 600;
}
.page-text--after {
    
}
.page-text--after--title {
    font-size: 18px;
    line-height: 28px;
    color: #0F1319;
    font-weight: 600;
    margin: 0 0 20px 0;
}
.page-text--after--text {
    font-size: 16px;
    line-height: 25px;
    margin: 0 0 20px 0;
}
.page-text--after--tag_line {
    color: #6B7280;
    font-size: 13px;
    line-height: 20px;
}

/* ===== Mobile ===== */
@media (max-width: 991.98px) {
    .page-block {
        max-width: 100%;
    }
}





/* ===== Hero section ===== */
.hero-section {
    padding-top: 110px;
    padding-bottom: 10px;
}

.hero-content {
    
}

.hero-content__label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #4F46E5;
    margin: 0 auto 20px;
    width: auto;
    padding: 10px 15px;
    background-color: #EEF0FF;
    border-radius: 20px;
    display: inline-block;
}
.hero-content__title {
    font-size: 60px;
    font-weight: 700;
    color: #0F1319;
    line-height: 66px;
    margin: 0 0 20px;
    width: 100%;
}

.hero-content__subtitle {
    font-size: 27px;
    color: #4B5361;
    margin: 0 0 16px;
    line-height: 42px;
    width: 100%;
}
.hero-content__subtitle p {
    margin: 0 0 5px;
}

/* ===== Кнопки: гибкий ряд, центрированный, может расширяться ===== */
.hero-content__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.hero-btn--primary,
.hero-btn--primary:focus {
    background-color: #6366F1;
    color: #fff;
    border: 1px solid #6366F1;
}
.hero-btn--primary:hover,
.hero-btn--primary:active {
    background-color: #fff;
    color: #6366F1;
    border: 1px solid #6366F1;
}

.hero-btn--secondary,
.hero-btn--secondary:focus {
    color: #0F1319;
    background: #fff;
    border: 1px solid #E2E5EA;
}
.hero-btn--secondary:hover,
.hero-btn--secondary:active {
    background-color: #fff;
    color: #6366F1;
    border: 1px solid #6366F1;
}

.hero-content__note {
    font-size: 15px;
    color: #6B7280;
    line-height: 23px;
    width: 100%;
}
.hero-content__note p {
    margin: 0 0 5px;
}

/* ===== Mobile ===== */
@media (max-width: 991.98px) {
    .hero-section {
        padding-top: 100px;
    }
    .hero-content__label {
        font-size: 13px;
        margin: 0 auto 20px 0;
    }
    .hero-content__title {
        font-size: 34px;
        line-height: 40px;
        text-align: left;
        margin: 0 0 17px;
    }

    .hero-content__subtitle {
        font-size: 16px;
        text-align: left;
        width: 100%;
        margin-bottom: 10px;
        line-height: 25px;
    }

    .hero-content__buttons {
        flex-direction: column;
        width: 100%;
        margin-bottom: 25px;
    }
    .hero-btn {
        width: 100%;
        padding: 15px 21px;
    }
    .hero-content__note {
        font-size: 15px;
        line-height: 23px;
        color: #6B6B70;
        text-align: left;
    }
    .hero-content__note p {
        margin-bottom: 0;
    }
}


/* ===== Section ===== */
.products-section {
    padding-top: 5px;
    padding-bottom: 15px;
}

/* ===== Table wrapper ===== */
.products-table {
    border: 1px solid #E2E5EA;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 1px 2px 0px #0F121A0D, 0px 8px 24px -4px #0F121A0F;
    max-width: 980px;
    margin: 0 auto;
}

/* ===== Row: flex-раскладка колонок, как в таблице ===== */
.products-row {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #E2E5EA;
}

.products-row:last-child {
    border-bottom: none;
}

.products-row--head {
    border-bottom: 1px solid #E2E5EA;
    padding: 7px 15px;
}

/* ===== Cells: ширины колонок как во flex-таблице ===== */
.products-cell {
    font-size: 15px;
    color: #4B5361;
    line-height: 23px;
}

.products-cell--site   { flex: 1.4 0 0; }
.products-cell--dr     { flex: 0.4 0 0; }
.products-cell--traffic{ flex: 0.7 0 0; }
.products-cell--topic  { flex: 0.8 0 0; }
.products-cell--type   { flex: 0.6 0 0; }
.products-cell--price  { flex: 0.6 0 0; text-align: right; }

.products-cell--site .products-cell__value {
    font-weight: 600;
    color: #0F1319;
}

.products-cell--price .products-cell__value {
    font-weight: 600;
    color: #0F1319;
}

/* Заголовок таблицы — серый текст */
.products-row--head .products-cell {
    font-size: 13px;
    font-weight: 400;
    color: #6B7280;
    line-height: 20px;
}

/* Лейблы (DR/Traffic/Topic) скрыты на десктопе — видно только value */
.products-cell__label {
    display: none;
}

/* ===== Mobile: строки становятся карточками ===== */
@media (max-width: 767.98px) {

    .products-table {
        border: none;
        background: transparent;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Заголовок скрывается полностью */
    .products-row--head {
        display: none !important;
    }

    /* Строка -> карточка на grid с зонами */
    .products-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "site  site  price"
            "dr    traffic topic"
            "type  type  type";
        gap: 12px 16px;
        background: #fff;
        border: 1px solid #E2E5EA;
        border-radius: 14px;
        padding: 17px 20px 17px 20px;
        box-shadow: 0px 1px 2px 0px #0F121A0D, 0px 8px 24px -4px #0F121A0F;

    }

    .products-cell {
        display: flex;
        flex-direction: column;
    }

    .products-cell--site {
        grid-area: site;
        font-size: 15px;
    }

    .products-cell--price {
        grid-area: price;
        justify-self: end;
        font-size: 15px;
    }

    .products-cell--dr {
        grid-area: dr;
    }

    .products-cell--traffic {
        grid-area: traffic;
    }

    .products-cell--topic {
        grid-area: topic;
    }

    .products-cell--type {
        grid-area: type;
    }

    /* Лейблы проявляются на мобильном для DR / Traffic / Topic */
    .products-cell--dr .products-cell__label,
    .products-cell--traffic .products-cell__label,
    .products-cell--topic .products-cell__label {
        display: block;
        font-size: 13px;
        color: #6B7280;
        margin-bottom: 1px;
    }

    .products-cell--dr .products-cell__value,
    .products-cell--traffic .products-cell__value,
    .products-cell--topic .products-cell__value {
        font-size: 14px;
        font-weight: 600;
        color: #0F1319;
    }

    /* Type — плашка с серым фоном */
    .products-cell--type {
        margin-top: 4px;
    }

    .products-cell--type .products-cell__value {
        display: inline-block;
        background-color: #EFF1F4;
        color: #4B5361;
        font-size: 13px;
        font-weight: 400;
        padding: 6px 12px;
        border-radius: 20px;
        width: fit-content;
    }
}


/* ===== Numbers section ===== */
.numbers-section {
    padding-top: 12px;
    padding-bottom: 10px;
}

/* ===== Серый блок-полоса ===== */
.numbers-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 980px;
    margin: 0 auto;
}

/* ===== Item ===== */
.numbers-item {
    flex: 1 1 280px;
    max-width: 236px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.numbers-item__title {
    font-size: 24px;
    font-weight: 700;
    color: #0F1319;
    margin-bottom: 5px;
    line-height: 30px;
}

.numbers-item__text {
    font-size: 15px;
    line-height: 23px;
    color: #4B5361;
}

@media (min-width: 576px) {
}

/* ===== Mobile: 2 колонки ===== */
@media (max-width: 575.98px) {
    .numbers-section {
        padding-top: 5px;
        padding-bottom: 50px;
    }
    .numbers-strip {
        padding: 25px 10px 15px 10px;
        gap: 10px 30px;
        background-color: #F7F8FA;
        border-radius: 12px;
    }
    .numbers-item {
        flex: 1 1 45%;
        max-width: 45%;
    }
    .numbers-item__title {
        font-size: 24px;
        margin-bottom: 0;
        line-height: 30px;
    }
    .numbers-item__text {
        font-size: 15px;
        line-height: 23px;
    }
}


/* ===== Cons section ===== */
.cons-section {
    background-color: #F7F8FA;
    padding-top: 90px;
    padding-bottom: 90px;
}

.cons-section__title {
    font-size: 40px;
    font-weight: 700;
    color: #0F1319;
    margin: 0 0 40px;
    line-height: 48px;
}

/* ===== Grid: 3 колонки, гибко под будущее расширение ===== */
.cons-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

/* ===== Card ===== */
.cons-card {
    flex: 1 1 386px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E2E5EA;
    border-radius: 12px;
    padding: 25px 24px 7px 24px;
    box-shadow: 0px 1px 2px 0px #0F121A0D,0px 8px 24px -4px #0F121A0F;
}

.cons-card__title {
    font-size: 19px;
    font-weight: 600;
    color: #0F1319;
    margin: 0 0 10px;
    line-height: 26px;
}

.cons-card__text {
    font-size: 15px;
    color: #4B5361;
    line-height: 24px;
    margin: 0;
}

/* ===== Solution block (чёрный) ===== */
.cons-solution {
    background-color: #0F1319;
    border-radius: 12px;
    padding: 35px 35px 15px 35px
}

.cons-solution__title {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 32px;
}
.cons-solution__title p {
    margin: 0;
}

.cons-solution__text {
    color: #D9D9DB;
    font-size: 16px;
    line-height: 25px;
    margin: 0;
}

/* ===== Tablet: 2 колонки ===== */
@media (max-width: 991.98px) {
    .cons-card {
        flex: 1 1 280px;
    }
}

/* ===== Mobile: 1 колонка ===== */
@media (max-width: 575.98px) {
    .cons-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .cons-section__title {
        font-size: 28px;
        line-height: 34px;
        margin: 0 0 25px;
    }
    .cons-grid {
        gap: 10px;
        margin-bottom: 25px;
    }
    .cons-card {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 20px 24px 5px 24px;
    }
    .cons-card__title {
        font-size: 17px;
        line-height: 24px;
    }
    .cons-solution {
        padding: 25px 20px 10px 20px;
    }
    .cons-solution__title {
        font-size: 18px;
        line-height: 26px;
    }
    .cons-solution__text {
        font-size: 15px;
        line-height: 23px;
    }
}


/* ===== Steps section ===== */
.steps-section {
    padding-top: 90px;
    padding-bottom: 90px;
}

.steps-section__title {
    font-size: 40px;
    font-weight: 700;
    color: #0F1319;
    margin: 0 0 40px;
    line-height: 48px;
}

/* ===== Grid: 4 колонки, гибко под будущее расширение ===== */
.steps-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* ===== Card ===== */
.steps-card {
    flex: 1 1 280px;
    max-width: 310px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E2E5EA;
    border-radius: 14px;
    padding: 25px 25px 10px 25px;
    box-shadow: 0px 1px 2px 0px #0F121A0D, 0px 8px 24px -4px #0F121A0F;

}

.steps-card__number {
    width: 36px;
    height: 36px;
    background-color: #EEF0FF;
    color: #4F46E5;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    line-height: 20px;
}

.steps-card__title {
    font-size: 18px;
    font-weight: 600;
    color: #0F1319;
    margin: 0 0 13px;
    line-height: 26px;
}

.steps-card__text {
    font-size: 15px;
    color: #4B5361;
    line-height: 23px;
    margin: 0;
}

/* ===== Tablet: 2 колонки ===== */
@media (max-width: 991.98px) {
    .steps-card {
        flex: 1 1 280px;
    }
}

/* ===== Mobile: 1 колонка ===== */
@media (max-width: 575.98px) {
    .steps-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .steps-section__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 25px;
    }
    .steps-grid {
        gap: 10px;
    }
    .steps-card {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 20px 20px 5px 20px;
    }
    .steps-card__number {
        width: 32px;
        height: 32px;
        margin-bottom: 10px;
    }
    .steps-card__title {
        font-size: 18px;
        margin: 0 0 10px;
        line-height: 26px;
    }
}


/* ===== Ways section ===== */
.ways-section {
    padding-top: 90px;
    padding-bottom: 90px;
}

.ways-section__title {
    font-size: 40px;
    font-weight: 700;
    color: #0F1319;
    margin: 0 0 40px;
    line-height: 48px;
}

/* ===== Grid: 2 колонки, гибко под будущее расширение ===== */
.ways-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* ===== Card ===== */
.ways-card {
    flex: 1 1 420px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E2E5EA;
    border-radius: 12px;
    padding: 30px 30px 15px 30px;
    box-shadow: 0px 1px 2px 0px #0F121A0D, 0px 8px 24px -4px #0F121A0F;

}

.ways-card__title {
    font-size: 26px;
    font-weight: 700;
    color: #0F1319;
    margin: 0 0 15px;
    line-height: 32px;
}

/* ===== Текстовый блок: параграфы, список, цена ===== */
.ways-card__text {
    font-size: 16px;
    color: #4B5361;
    line-height: 24px;
}
.ways-card__text p {
    margin: 0 0 17px;
}

.ways-card__text ul {
    font-size: 15px;
    line-height: 23px;
    margin: 0 0 16px;
    padding-left: 20px;
    color: #0F1319;
}

.ways-card__text li {
    margin-bottom: 10px;
}
.ways-card__text li:last-child {
    margin-bottom: 0;
}
.ways-card__text li::marker {
    color: #6366F1;
}

.ways-card__text strong {
    color: #0F1319;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
}

.ways-card__text p:last-child {
    margin-bottom: 0;
}

/* ===== Tablet: карточки чуть уже, но всё ещё 2 в ряд при возможности ===== */
@media (max-width: 991.98px) {
    .ways-card {
        flex: 1 1 360px;
    }
}

/* ===== Mobile: 1 колонка ===== */
@media (max-width: 575.98px) {
    .ways-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .ways-section__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 25px;
    }
    .ways-grid {
        gap: 10px;
    }
    .ways-card {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 20px 20px 20px 20px;
    }
    .ways-card__title {
        font-size: 24px;
        margin: 0 0 10px;
        line-height: 32px;
    }
    .ways-card__text {
        font-size: 15px;
        line-height: 23px;
    }
    .ways-card__text p {
        margin: 0 0 12px;
    }
    .ways-card__text strong {
        font-size: 18px;
        line-height: 26px;
    }
    .ways-card__text ul {
        margin: 0 0 13px;
    }
}


/* ===== Pros section ===== */
.pros-section {
    background-color: #F7F8FA;
    padding-top: 90px;
    padding-bottom: 90px;
}

.pros-section__title {
    font-size: 40px;
    font-weight: 700;
    color: #0F1319;
    margin: 0 0 40px;
    line-height: 48px;
}

/* ===== Grid: 3 колонки, гибко под будущее расширение ===== */
.pros-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* ===== Card ===== */
.pros-card {
    flex: 1 1 320px;
    max-width: 425px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E2E5EA;
    border-radius: 12px;
    padding: 25px 30px 10px 30px;
    box-shadow: 0px 1px 2px 0px #0F121A0D, 0px 8px 24px -4px #0F121A0F;

}

.pros-card__icon {
    width: 36px;
    height: 36px;
    background-color: #EEF0FF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.pros-card__dot {
    width: 12px;
    height: 12px;
    background-color: #6366F1;
    border-radius: 50%;
    display: block;
}

.pros-card__title {
    font-size: 18px;
    font-weight: 600;
    color: #0F1319;
    margin: 0 0 10px;
    line-height: 26px;
}

.pros-card__text {
    font-size: 15px;
    color: #4B5361;
    line-height: 23px;
    margin: 0;
}

/* ===== Tablet: 2 колонки ===== */
@media (max-width: 991.98px) {
    .pros-card {
        flex: 1 1 280px;
    }
}

/* ===== Mobile: 1 колонка ===== */
@media (max-width: 575.98px) {
    .pros-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .pros-section__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 25px;
    }
    .pros-grid {
        gap: 10px;
    }
    .pros-card {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 20px 20px 7px 20px;
    }
    .pros-card__icon {
        width: 34px;
        height: 34px;
        margin-bottom: 15px;
    }
    .pros-card__title {
        font-size: 17px;
        line-height: 24px;
    }
}


/* ===== Niche section ===== */
.niche-section {
    padding-top: 90px;
    padding-bottom: 90px;
}

.niche-section__title {
    font-size: 40px;
    font-weight: 700;
    color: #0F1319;
    margin: 0 0 20px;
    line-height: 48px;
}

.niche-section__subtitle {
    font-size: 18px;
    color: #4B5361;
    margin: 0 0 37px;
    line-height: 28px;
}

/* ===== Grid: 3 колонки, гибко под будущее расширение ===== */
.niche-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* ===== Card ===== */
.niche-card {
    flex: 1 1 320px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E2E5EA;
    border-radius: 12px;
    padding: 25px 25px 25px 25px;
    box-shadow: 0px 1px 2px 0px #0F121A0D, 0px 8px 24px -4px #0F121A0F;

}

.niche-card__icon {
    width: 40px;
    height: 40px;
    background-color: #EEF0FF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.niche-card__dot {
    width: 14px;
    height: 14px;
    background-color: #6366F1;
    border-radius: 50%;
    display: block;
}

.niche-card__title {
    font-size: 24px;
    font-weight: 700;
    color: #0F1319;
    margin: 0 0 10px;
    line-height: 32px;
}

.niche-card__text {
    font-size: 15px;
    color: #4B5361;
    line-height: 23px;
    margin: 0;
    flex-grow: 1;
}
.niche-card__text p {
    margin: 0;
}

.niche-card__price {
    background-color: #F7F8FA;
    color: #0F1319;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 10px;
    line-height: 20px;
}

.niche-card__link,
.niche-card__link:focus {
    gap: 6px;
    display: inline-flex;
    align-items: center;
    color: #4F46E5;
    font-size: 15px;
    text-decoration: none;
    line-height: 20px;
    font-weight: 600;
    position: relative;
}

.niche-card__link:hover,
.niche-card__link:active {
    color: #1A1A1C;
    text-decoration: none;
}

.niche-card__arrow {
    content: '';
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
    -webkit-filter: invert(24%) sepia(89%) saturate(5512%) hue-rotate(244deg) brightness(98%) contrast(84%);
    filter: invert(24%) sepia(89%) saturate(5512%) hue-rotate(244deg) brightness(98%) contrast(84%);
    background-image: url("../images/arrow.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.niche-card__link:hover .niche-card__arrow,
.niche-card__link:active .niche-card__arrow {
    -webkit-filter: invert(4%) sepia(4%) saturate(7394%) hue-rotate(177deg) brightness(95%) contrast(92%);
    filter: invert(4%) sepia(4%) saturate(7394%) hue-rotate(177deg) brightness(95%) contrast(92%);
}

/* ===== Tablet: 2 колонки ===== */
@media (max-width: 991.98px) {
    .niche-card {
        flex: 1 1 280px;
    }
}

/* ===== Mobile: 1 колонка ===== */
@media (max-width: 575.98px) {
    .niche-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .niche-section__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 20px;
    }
    .niche-section__subtitle {
        font-size: 15px;
        line-height: 23px;
        margin-bottom: 20px;
    }
    .niche-card {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 20px 20px 20px 20px;
    }
    .niche-card__icon {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
    }
    .niche-card__text {
        margin: 0 0 10px 0;
    }
}


/* ===== CTA Section (внешний контейнер с паддингами) ===== */
.cta-section {
    padding-top: 90px;
    padding-bottom: 90px;
}

/* ===== Чёрный блок ===== */
.cta-banner {
    background-color: #0F1319;
    border-radius: 16px;
    padding: 65px 25px 50px 25px;
}

.cta-banner__title {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    margin: 0 0 17px;
}

.cta-banner__subtitle {
    color: #CBD0D8;
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 5px;
}
.cta-banner__subtitle p {
    margin: 0 0 10px;
}

.cta-banner__btn,
.cta-banner__btn:focus {
    background-color: #6366F1;
    color: #fff;
    border: 1px solid #6366F1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    margin: 0 0 15px;
}

.cta-banner__btn:hover,
.cta-banner__btn:active {
    background-color: #fff;
    color: #6366F1;
    border: 1px solid #6366F1;
}

.cta-banner__note {
    color: #CBD0D8;
    font-size: 15px;
    line-height: 23px;
    margin: 0;
}

/* ===== Mobile ===== */
@media (max-width: 575.98px) {
    .cta-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .cta-banner {
        padding: 45px 25px 25px 25px;
    }
    .cta-banner__title {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 15px;
    }
    .cta-banner__subtitle {
        font-size: 15px;
        line-height: 23px;
    }
    .cta-banner__btn, 
    .cta-banner__btn:focus {
        width: 100%;
    }
    .cta-banner__note {
        font-size: 13px;
        line-height: 20px;
    }
}