@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


:root {
    --radius: 40px;
    --btn-width: 540px;
    --btn-height: 110px;
    --bg-page: #ffffff;
    --color-black: #00272b;
    --color-white: #fff;
    --color-accent: #e0ff4f;
    --color-indigo: #0047AB;
    --color-alabaster: #f2f3f4;
    --logo-width: 200px;
    --logo-count: 4;
    --portfolio-radius: 40px;

    --color-lemon-volt: #5dbb3f;
    /* --color-lemon-volt: #e2ff04; */
    --color-royal-blue: #243ff7;
    --color-platinum: #d7d8df;
    --color-gunmetal: #343c42;

    --color-deep-forest: #1a2024;
    --color-soft-gray: #f8f9fa;
    --color-lemon-dark: #5dbb3f;
    /* --color-lemon-dark: #b5cc00; */


    /* --lemon: #C8F135; */
    --lemon: #5dbb3f;
    --lemon-dim: rgba(200, 241, 53, 0.12);
    --lemon-border: rgba(200, 241, 53, 0.35);
    --dark: #161a1b;
    --muted: #6b7280;
    --muted2: #9ca3af;
    --border: #e5e7eb;
    --lemon-text: #4a7500;
}

button:focus {
    outline: none;
}

body * {
    font-family: "Montserrat", sans-serif;
}

img {
    max-width: 100%;
}

.page {}

.container {
    max-width: 1410px;
    width: calc(100% - 80px);
    margin: 0px auto;
}

.header {
    transition:
        background-color 0.4s ease,
        box-shadow 0.4s ease,
        transform 0.4s ease;
    width: 100%;
    position: sticky;
    top: 0;
    left: 0;
    /* background-color: var(--color-white); */
    z-index: 10;
    padding-top: 14px;
    padding-bottom: 10px;
}

.header__content {
    display: flex;
    height: 74px;
    align-items: center;
    gap: 28px;
    justify-content: space-between;
    transition: height .35s ease;
}

.logo {
    max-width: 130px;
    height: auto;
    width: 100%;
}

.logo__link {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 34px;
}

.logo__img {}

.logo__img--full {
    width: 130px;
    transform-origin: left center;
    transition: opacity .45s ease, transform .45s cubic-bezier(0.22, 1, 0.36, 1), width .45s ease;
}

.logo__img--mini {
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-50%) scale(0.97);
    transition: opacity .45s ease, transform .45s cubic-bezier(0.22, 1, 0.36, 1), width .45s ease;
}

.logo__img--miniCrop {
    width: 130px;
    max-width: none;
    height: 34px;
    object-fit: contain;
    object-position: left center;
}

.header__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.menu {
    position: relative;
    --menu-expand-left: 0px;
    --menu-expand-right: 0px;
    --menu-expand-left-sticky: 58px;
    --menu-expand-right-sticky: 252px;
    --menu-brand-offset: 44px;
    --menu-cta-offset: 249px;
    border-radius: 999px;
    padding: 5px 8px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    z-index: 1;
}

.menu::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(-1 * var(--menu-expand-right));
    bottom: 0;
    left: calc(-1 * var(--menu-expand-left));
    background: #161a1b;
    border-radius: 999px;
    transition: left .45s cubic-bezier(0.22, 1, 0.36, 1), right .45s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
}

.menuNav__ul {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}

.menuNav__brand {
    position: absolute;
    left: calc(-1 * var(--menu-brand-offset));
    top: 50%;
    width: 44px;
    height: 44px;
    padding: 9px;
    background: transparent;
    opacity: 0;
    transform: translateY(-50%) scale(0.92);
    transition: opacity .22s ease, transform .22s ease, left .45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}

.menuNav__brandImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.menuNav__cta {
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--menu-cta-offset));
    height: calc(100% - 6px);
    padding: 0 30px;
    border-radius: 999px;
    background: var(--color-lemon-volt);
    color: var(--color-white);
    font-size: 15px;
    /* font-weight: 700; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-50%) scale(0.96);
    transition: opacity .24s ease, transform .24s ease;
    pointer-events: none;
    z-index: 2;
}

.menuNav__li--mega {
    position: static !important;
}

.menuNav__mega {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 420px;
    background-color: var(--dark);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.07);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.has-dropdown {
    position: static !important;
}

.menuNav__li--mega:hover .menuNav__mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.has-dropdown:hover .menuNav__mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-grid {
    display: flex;
    flex-direction: column;
}

/* Regular (non-mega) dropdown is narrower */
.menuNav__mega:has(.menuNav__sub) {
    width: 280px;
}

.mega-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.mega-item:hover {
    transform: translateX(5px);
}

.mega-item__img {
    flex-shrink: 0;
    width: 160px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: #2a2a2a;
}

.mega-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-item__title {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.mega-item__desc {
    font-size: 14px;
    color: #999;
    line-height: 1.5;
    margin: 0;
}

.mega-footer {
    margin-top: 4px;
    padding: 10px 8px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.mega-all-link {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: color 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    letter-spacing: 0.02em;
}

.mega-all-link i {
    color: var(--lemon);
    transition: transform 0.25s ease;
    font-size: 14px;
}

.mega-all-link:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    opacity: 1;
}

.mega-all-link:hover i {
    transform: translateX(3px);
}

.mega-item__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #333, #444);
}

.menuNav__li {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: #f6f7f8;
    padding: 0;
}

.menuNav__link:after {
    display: none;
}

.menuNav__li:hover .menuNav__link:after,
.menuNav__li-active .menuNav__link:after {
    opacity: 1;
}

.menuNav__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.28s ease, background-color 0.28s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.menuNav__link:hover,
.menuNav__link-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Стили выпадающего меню */
.menuNav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 39, 43, 0.1);
    list-style: none;
    padding: 15px 0;
    margin: 0;

    /* Анимация скрытия */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 100;
}

/* Появление при ховере */
.menuNav__li:hover .menuNav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menuNav__dropdown-item {
    padding: 0 20px;
}

.menuNav__dropdown-link {
    display: block;
    padding: 10px 0;
    color: var(--color-gunmetal);
    text-decoration: none;
    font-size: 16px;
    border-bottom: 1px solid var(--color-alabaster);
    transition: all 0.3s ease;
}

.menuNav__dropdown-item:last-child .menuNav__dropdown-link {
    border-bottom: none;
}

.menuNav__dropdown-link:hover {
    color: var(--color-indigo);
    padding-left: 5px;
    /* Эффект смещения при наведении */
}

/* Маленький треугольник-указатель */
.menuNav__dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: var(--color-white);
    transform: rotate(45deg);
}

.lang {
    position: relative;
    z-index: 1;
    transition: opacity .3s ease, width .3s ease;
}

.header__pohneWrap {}
.header__pohneWrap {
    transition: opacity .3s ease, width .3s ease;
}

.header__pohne {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-lemon-volt);
    height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    color: var(--color-white);
    font-weight: 700;
    font-size: 15px;
    transition: transform 0.28s ease, background-color 0.28s ease;
}

.header__pohne:hover {
    transform: translateY(-1px);
    background-color: #c9ee44;
    color: #101314;
}

a {
    text-decoration: none;
}

.lang>ul>li>span {
    width: 48px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    transition: 500ms all;
}


.lang>ul>li {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: -10px;
}

.lang>ul>li>span {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 700;
    color: #f4f6f8;
    cursor: pointer;
    transition: 0.5s all;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #161a1b;
}

.lang li>ul {
    position: absolute;
    top: 100%;
    left: -6px;
    background: #1f2325;
    min-width: 70px;
    border-radius: 6px;
    list-style: none;
    margin: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: 0.4s ease;
    overflow: hidden;
}

.lang>ul>li:hover>ul {
    opacity: 1;
    visibility: visible;
    z-index: 9;
}

.lang li>ul>li {
    opacity: 0;
    transform: translateX(20px);
    transition: 0.4s ease;
}

.lang li>ul>li:last-child {
    margin-bottom: 0;
}

.lang>ul>li:hover>ul>li {
    opacity: 1;
    transform: translateX(0);
}

.lang>ul>li:hover>ul>li:nth-child(1) {
    transition-delay: 0.1s;
}

.lang>ul>li:hover>ul>li:nth-child(2) {
    transition-delay: 0.2s;
}

.lang>ul>li:hover>ul>li:nth-child(3) {
    transition-delay: 0.3s;
}

.lang li>ul>li>a {
    display: flex;
    text-decoration: none;
    font-weight: 600;
    color: #eef0f2;
    transition: 0.3s;
    font-size: 16px;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    box-sizing: border-box;
}

.lang li>ul>li>a:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.lang>ul>li:hover>span {
    background-color: #23292b;
}

.heroSection {
    padding: 70px 0;
    height: calc(100vh - 88px);
    box-sizing: border-box;
    height: 863px;
}

.heroSection .container {
    height: 100%;
}

.hero-card-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    margin-top: -40px;
}

.main-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding-left: 60px;
    padding-bottom: 90px;
    box-sizing: border-box;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='1100' height='550' viewBox='0 0 1100 550' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0C17.9086 0 0 17.9086 0 40V430C0 452.091 17.9086 470 40 470H380C402.091 470 420 487.909 420 510C420 532.091 437.909 550 460 550H1060C1082.09 550 1100 532.091 1100 510V40C1100 17.9086 1082.09 0 1060 0H40Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='1100' height='550' viewBox='0 0 1100 550' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0C17.9086 0 0 17.9086 0 40V430C0 452.091 17.9086 470 40 470H380C402.091 470 420 487.909 420 510C420 532.091 437.909 550 460 550H1060C1082.09 550 1100 532.091 1100 510V40C1100 17.9086 1082.09 0 1060 0H40Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
    z-index: 2;
}

.hero__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 100px;
    max-width: 800px;
}

.hero__content h1 {
    margin: 0;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
}

.hero__content p {
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    max-width: 600px;
    font-weight: 600;
}

.cta-button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(var(--btn-width) - 20px);
    height: calc(var(--btn-height) - 20px);
    background: var(--color-lemon-volt);
    color: var(--color-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 100px;
    font-weight: 700;
    z-index: 15;
    transition: 500ms all;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.02em;
}

.cta-button:hover {
    background: var(--color-gunmetal);
    color: var(--color-white);
}

.cta-button__arrow {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}

.cta-button:hover .cta-button__arrow {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(4px);
}

/* Hero eyebrow */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    padding: 7px 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    width: fit-content;
}

.hero__eyebrow-dot {
    width: 8px;
    height: 8px;
    background: var(--color-lemon-volt);
    border-radius: 50%;
    flex-shrink: 0;
    animation: heroPulse 2s ease-in-out infinite;
}

@keyframes heroPulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.4); }
    50% { opacity: 0.7; transform: scale(0.8); box-shadow: 0 0 0 4px rgba(200, 241, 53, 0); }
}

/* Hero stats */
.hero__stats {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 8px;
}

.hero__stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hero__stat strong {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-lemon-volt);
    line-height: 1;
    font-family: Montserrat, sans-serif;
}

.hero__stat span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero__stat-sep {
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

/* Hero grain overlay */
.hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    z-index: 2;
    pointer-events: none;
}

h1 {
    color: var(--color-gunmetal);
    font-weight: bold;
    line-height: 1.1;
    font-size: clamp(56px, calc(3.5rem + ((1vw - 12px) * 3.3333)), 66px);
}

h2 {
    color: var(--color-gunmetal);
    font-weight: bold;
    line-height: 1.1;
    font-size: clamp(48px, calc(3rem + ((1vw - 10.25px) * 4.5714)), 56px);
}

h3 {
    color: var(--color-gunmetal);
    font-weight: bold;
    line-height: 1.1;
    font-size: clamp(40px, calc(2.5rem + ((1vw - 10.25px) * 2.2857)), 44px);
}

h4 {
    color: var(--color-gunmetal);
    font-weight: bold;
    line-height: 1.1;
    font-size: clamp(28px, calc(1.75rem + ((1vw - 10.25px) * 2.2857)), 32px);
}

h5 {
    color: var(--color-gunmetal);
    font-weight: 600;
    line-height: 1.1;
    font-size: clamp(22px, calc(1.375rem + ((1vw - 10.25px) * 1.1429)), 24px);
}

h6 {
    color: var(--color-gunmetal);
    font-weight: 600;
    line-height: 1.1;
    font-size: clamp(18px, calc(1.125rem + ((1vw - 10.25px) * 1.1429)), 20px);
}

p {
    color: var(--color-gunmetal);
    font-weight: 500;
    line-height: 1.5;
    font-size: 14px;
}

h1 span {
    color: var(--color-lemon-volt);
}

.white {
    color: var(--color-white);
}

.heroSection .container {
    height: 100%;
}

.hero__content h1 {
    /* text-shadow: 2px 2px 3px var(--color-gunmetal); */
}

.hero__content p {
    /* text-shadow: 1px 1px 2px var(--color-gunmetal); */
}

.cls-1 {
    fill: var(--color-gunmetal) !important;
}

.cls-2 {
    fill: var(--color-indigo) !important;
}

.header--sticky {
    /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); */
    z-index: 99;
    background-color: transparent;
    padding-top: 8px;
    padding-bottom: 6px;
}

.header--sticky .header__content {
    height: 62px;
}

.header--sticky .logo__img--full {
    opacity: 0;
    transform: translateX(-2px) scale(0.98);
    width: 130px;
    filter: blur(0);
}

.header--sticky .logo__img--mini {
    opacity: 0;
    transform: translateY(-50%) scale(0.98);
}

.header--sticky .menu {
    --menu-expand-left: var(--menu-expand-left-sticky);
    --menu-expand-right: var(--menu-expand-right-sticky);
    padding: 4px 10px;
}

.header--sticky .menuNav__link {
    min-height: 40px;
    padding: 0 16px;
}

.header--sticky .menuNav__brand {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.header--sticky .menuNav__cta {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

.header--sticky .lang,
.header--sticky .header__pohneWrap {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.aboutMainSection {
    padding: 70px 0;
}

.aboutMain {
    display: flex;
    justify-content: space-between;
    gap: 140px;
}

.aboutMain__left {
    max-width: 570px;
    width: 100%;
}

.aboutMain__top {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.text__wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.aboutMain__bottom {}

.aboutMain__right {
    flex: 1;
}

.aboutMain__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
}

.aboutMain__item {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aboutMainItem__titleWrap {}

.aboutMain__title {
    font-size: 50px;
}

.text {
    font-size: 18px;
}

.text span {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color-lemon-dark);
    font-size: 26px;
}

.aboutMainItem__title {
    color: var(--color-gunmetal);
    /* text-shadow: 0px 0px 3px var(--color-gunmetal); */
    letter-spacing: 5px;
    font-size: 70px;
}

.aboutMainItem__textWrap {}

.aboutMainItem__text {
    color: #9b9b9b;
    font-weight: 500;
}

.logo-slider {
    width: 100%;
    height: 100px;
    margin: 40px 0 0;
    overflow: hidden;
    position: relative;
    background: transparent;
}

.logo-slider::before,
.logo-slider::after {
    content: "";
    height: 100%;
    width: 150px;
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.logo-slider::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-page) 0%, transparent 100%);
}

.logo-slider::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-page) 0%, transparent 100%);
}

.logo-slide-track {
    display: flex;
    width: calc(var(--logo-width) * var(--logo-count) * 2);
    animation: scroll 30s linear infinite;
}

.slide {
    width: var(--logo-width);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.slide img {
    max-width: 150px;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: 0.3s;
}

.slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(var(--logo-width) * var(--logo-count) * -1));
    }
}

.portfolioSection {
    padding: 70px 0;
}

.portfolioMain {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}

.portfolioMain__left {
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: flex-end;
}

.portfolioMain__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.portfolioMainHeader__title {}

.portfolioMainHeader__textWrap {}

.portfolioMainHeader__text {
    font-size: 18px;
}

.portfolioMain__item {
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolioMain__item:hover {
    transform: translateY(-8px);
}

.portfolioMain__item-1 {
    aspect-ratio: 2 / 2.6;
}

.portfolioMainItem__imgWrap {
    display: flex;
    position: relative;
    width: 100%;
}

.portfolioMainItem__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolioMain__item:hover .portfolioMainItem__img {
    transform: scale(1.1);
}

.portfolioMainItem__titleWrap {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 2;
}

.portfolioMainItem__imgWrap:after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(125% 125% at 50% 10%, #1a1a1a57 50%, #1a1a1a 100%);
    transition: opacity 0.5s ease;
    z-index: 1;
}

.portfolioMain__item:hover .portfolioMainItem__imgWrap:after {
    opacity: 0.8;
}

.portfolioMainItem__title {
    color: var(--color-white);
    font-weight: 500;
    position: relative;
    font-size: 18px;
    transition: color 0.4s ease;
}

.portfolioMain__item:hover .portfolioMainItem__title {
    color: var(--color-lemon-volt);
}

.portfolioMainItem__title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-lemon-volt);
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolioMain__item:hover .portfolioMainItem__title::after {
    width: 100%;
}

.portfolioMain__center {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.portfolioMain__item-2 {
    aspect-ratio: 1 / 1;
    flex: 1;
}

.portfolioMain__item-3 {
    flex: 1;
}

.portfolioMain__right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.portfolioMain__item-4 {
    flex: 1;
}

.portfolioMain__btnWrap {}

.portfolioMain__btn {
    width: 100%;
    height: calc(var(--btn-height) - 20px);
    background: transparent;
    color: var(--color-gunmetal);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-weight: 600;
    z-index: 15;
    transition: 500ms all;
    text-transform: uppercase;
    font-size: 18px;
    border: 2px solid var(--color-gunmetal);
}

.portfolioMain__btn:hover {
    background: var(--color-gunmetal);
    color: var(--color-white);
}

.serviceSection {
    padding: 70px 0;
}

.servicesMain__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 1000px;
}

.servicesMain__content {
    margin-top: 50px;
}

.services__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}

.service__item {
    position: relative;
    aspect-ratio: 1 / 1;
    transition: 300ms all;
    overflow: hidden;
    border-radius: 30px;
}

.serviceItem__imgWrap {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.serviceItem__imgWrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-gunmetal);
    background-image: linear-gradient(to right, rgba(71, 85, 105, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(71, 85, 105, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    background-size: 32px 32px, 32px 32px, 100% 100%;
    opacity: 0.8;
    transition: 500ms all;
    z-index: 1;
}

.service__item:hover .serviceItem__imgWrap::after {
    opacity: 0.5;
}

.serviceItem__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 500ms ease;
}

.serviceItem__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 500ms ease;
    z-index: 0;
}

.service__item:hover .serviceItem__video {
    opacity: 1;
}

.service__item:hover .serviceItem__img {
    opacity: 0;
}

.serviceItem__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    box-sizing: border-box;
    z-index: 2;
    gap: 10px;
}

.serviceItem__title {
    color: #fff;
    background-image: linear-gradient(to right, #e0ff4f 50%, #fff 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin: 0;
    transition: transform 0.5s ease, background-position 1.2s ease;
    backface-visibility: hidden;
}

.service__item:hover .serviceItem__title {
    transform: translateY(-35px);
    background-position: 0 0;
}

.serviceItem__text {
    color: #fff;
    font-size: 16px;
    transition: transform 0.5s ease;
    backface-visibility: hidden;
}

.service__item:hover .serviceItem__text {
    transform: translateY(-35px);
}

.serviceItem__nr {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2;
    font-size: 50px;
    font-weight: bold;
    font-family: "Open Sans", sans-serif;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    transition: 500ms all;
}

.service__item:hover .serviceItem__nr {
    -webkit-text-stroke: 1px #e0ff4f;
    color: #e0ff4f;
}

.serviceItem__more {
    position: absolute;
    right: 30px;
    bottom: 30px;
    color: #e0ff4f;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.service__item:hover .serviceItem__more {
    opacity: 1;
    transform: translateY(0);
}

.websiteProblemsSection {
    padding: 100px 0;
    background: var(--dark);
    margin-top: -40px;
}

.problems__title {
    color: var(--color-white);
    margin-bottom: 20px;
}

.problems__title span {
    color: var(--lemon);
}

/* New layout */
.problems-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.problems-left {
    display: flex;
    flex-direction: column;
}

.problems__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    padding: 7px 16px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 24px;
}

.problems__eyebrow-dot {
    width: 7px;
    height: 7px;
    background: #ff4d4d;
    border-radius: 50%;
    flex-shrink: 0;
    animation: heroPulse 2.5s ease-in-out infinite;
}

.problems__lead {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 32px;
}

.problems__stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(200, 241, 53, 0.07);
    border: 1px solid rgba(200, 241, 53, 0.2);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 28px;
}

.problems__stat-card strong {
    font-size: 60px;
    font-weight: 900;
    color: var(--lemon);
    line-height: 1;
    flex-shrink: 0;
    font-family: Montserrat, sans-serif;
}

.problems__stat-card p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.problems__resolve {
    color: rgba(255, 255, 255, 0.45);
    font-size: 15px;
    line-height: 1.65;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0;
}

/* Problem cards */
.problems-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.problem-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 28px 24px;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    cursor: default;
}

.problem-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-4px);
}

.problem-card__icon {
    width: 42px;
    height: 42px;
    background: rgba(195, 0, 0, 0.15);
    border: 1px solid rgba(255, 77, 77, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b6b;
    font-size: 17px;
    margin-bottom: 18px;
}

.problem-card p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    margin: 0;
}

.solution__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* CARD */
.solution-card {
    position: relative;
    background: var(--color-lemon-volt);
    padding: 40px 23px;
    border-radius: 16px;
    overflow: hidden;
    transition: 0.3s;
    aspect-ratio: 2 / 1;
}

.solution-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* BIG NUMBER */
.solution-card__number {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 70px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.05);
    pointer-events: none;
}

/* CONTENT */
.solution-card__content h3 {
    font-size: 24px;
    color: var(--color-gunmetal);
    line-height: 1.2;
}

.solution-card__content p {
    font-size: 18px;
    color: var(--color-gunmetal);
    width: 89%;
    opacity: 0.7;
}

.solutionCardContent__top {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 60px;
}

.solutionCardContent__icon {
    font-size: 40px;
    font-weight: 500;
    color: var(--color-gunmetal);
}

.solution-card-gray {
    background: var(--color-gunmetal);
}

.solution-card-gray .solution-card__content h3 {
    color: var(--color-white);
}

.solution-card-gray .solutionCardContent__icon {
    color: var(--color-lemon-volt);
}

.solution-card-gray .solution-card__number {
    color: rgb(255 255 255 / 5%);
}

.solution-card-gray .solution-card__content p {
    color: var(--color-white);
}

.link__wrap {
    display: flex;
    margin-top: 20px;
}

.link {
    display: inline-flex;
    gap: 7px;
    transition: 500ms all;
}

.link span {
    font-size: 20px;
    font-weight: 500;
    background-image: linear-gradient(to right, #b5cc00 50%, #343c42 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin: 0;
    transition: transform 0.5s ease, background-position 1.2s ease;
    backface-visibility: hidden;
}

.link i {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-gunmetal);
    transition: 500ms all;
}

.link:hover span {
    background-position: 0 0;
}

.link:hover i {
    color: var(--color-lemon-dark);
    transform: translateX(3px);
}

.footer {
    margin: 0;
    border-radius: 0;
    background-color: var(--dark);
    padding: 70px 70px 30px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__content {}

.footer__top {
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__email {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footerEmail__link {
    color: var(--color-white);
    font-size: 140px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footerEmail__link:hover {
    color: rgba(255, 255, 255, 0.75);
}

.footerEmail__link span {
    color: var(--lemon);
}

.footer__center {
    display: flex;
    gap: 70px;
    margin-top: 50px;
}

.footerCenter__left {
    max-width: 500px;
    width: 100%;
}

.footerCenter__textWrap {}

.footerCenter__text {
    color: rgba(255, 255, 255, 0.45);
    font-size: 15px;
    line-height: 1.65;
}

.footerCenter__text a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    transition: color 0.2s ease;
}

.footerCenter__text a:hover {
    color: var(--lemon);
    text-decoration-color: var(--lemon);
}

.footerCenter__right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.footerCenter__listWrap {
    display: flex;
    gap: 80px;
}

.footerCenter__list {}

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

.footerCenterList__li {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    transition: color 0.25s ease;
    background-image: none;
    -webkit-text-fill-color: unset;
}

.footerCenterList__li:hover {
    color: var(--lemon);
    background-position: unset;
}

.footerCenterList__link {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.footerContacts {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.footerContacts__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footerContactsCol__titleWrap {}

.footerContactsCol__title {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footerContactsCol__textWrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footerContactsCol__text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
}

.footerContactsCol__link {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.25s ease;
}

.footerContactsCol__link:hover {
    color: var(--lemon);
}

.footer__bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerBottom__left {}

.footerBottom__text {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
}

.footerBottom__right {}

.footerBottom__ul {
    display: flex;
}

.footerBottom__li {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
}

.footerBottom__link {
    color: inherit;
    font-size: inherit;
    transition: color 0.25s ease;
}

.footerBottom__link:hover {
    color: rgba(255, 255, 255, 0.6);
}

.footerBottom__li:not(:last-of-type) {
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.footerCenter__socials {
    margin-top: 28px;
    display: flex;
    gap: 10px;
}

.footerCenter__social {
    width: 38px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 17px;
    transition: all 0.3s ease;
}

.footerCenter__social i {
    transition: 300ms all;
}

.footerCenter__social:hover {
    background-color: var(--lemon);
    border-color: var(--lemon);
    color: #1a2024;
}

.header__info {
    display: flex;
    align-items: center;
    gap: 30px;
}

.news__nav {
    display: flex;
    gap: 12px;
}

.news__nav button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-platinum);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-gunmetal);
}

.news__nav button:hover {
    background: var(--color-gunmetal);
    color: var(--color-lemon-volt);
    /* Акцент при наведении */
    border-color: var(--color-gunmetal);
}

/* Карточка новости */
.news-card {
    height: auto;
    display: flex;
    flex-direction: column;
}

.news-card__image {
    position: relative;
    border-radius: 24px;
    /* Скругление как на макете */
    overflow: hidden;
    aspect-ratio: 1 / 1;
    /* Квадратные или чуть вытянутые */
    margin-bottom: 20px;
    position: relative;
}

.news-card__image:after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(125% 125% at 50% 10%, #47556900 30%, #000000 100%);
    opacity: 0;
    transition: 500ms all;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-card__image img {
    transform: scale(1.05);
}

.news-card:hover .news-card__image:after {
    opacity: 1;
}

.news-card__number {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    z-index: 2;
}

.news-card__title {
    font-size: 22px;
    margin-bottom: 12px;
    color: var(--color-gunmetal);
    font-weight: 600;
    display: -webkit-box;
    /* Включаем flex-контейнер старого типа */
    -webkit-line-clamp: 2;
    /* Указываем количество строк */
    -webkit-box-orient: vertical;
    /* Устанавливаем вертикальную ориентацию */
    overflow: hidden;
    /* Прячем все, что не поместилось */
    text-overflow: ellipsis;
    /* Добавляем троеточие */
    line-height: 1.4;
    max-height: 2.8em;
    background-image: linear-gradient(to right, #b5cc00 50%, #343c42 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin: 0;
    transition: transform 0.5s ease, background-position 0.7s ease;
    backface-visibility: hidden;
}

.news-card:hover .news-card__title {
    background-position: 0 0;
}

.news-card__text {
    font-size: 15px;
    color: var(--color-gunmetal);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 4.2em;
    opacity: 0.7;
}

.newsMainSection {
    padding: 70px 0;
}

.newsMain__header {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.newsMainHeader__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.newsMain__content {
    margin-top: 50px;
}

.newsMainHeader__right {
    display: flex;
    align-items: flex-end;
}

.newsMain__btnWrap {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

.consultationSection {
    padding: 100px 0;
    background-color: var(--dark);
    margin: 0;
}

.consultation {
    display: flex;
    gap: 32px;
    align-items: stretch;
}

.consultation__left {
    flex: 1;
}

.consultation__blackCard {
    background-color: var(--lemon);
    border-radius: 28px;
    padding: 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.consultationBlackCard__title {
    color: var(--dark);
    font-size: 42px;
    line-height: 1.1;
}

.consultationBlackCard__text {
    color: rgba(0, 0, 0, 0.6);
    font-size: 16px;
    line-height: 1.65;
    flex: 1;
}

.consultationBlackCard__btnWrap {
    max-width: 400px;
    width: 100%;
    margin-top: 10px;
}

.consultationBlackCard__btn {
    width: 100%;
    height: 58px;
    background: var(--dark);
    color: var(--color-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-weight: 600;
    transition: 300ms all;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.04em;
    border: 2px solid var(--dark);
}

.consultationBlackCard__btn:hover {
    background: transparent;
    color: var(--dark);
}

.consultation__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
}

.consultation__title {
    font-size: 42px;
    color: var(--color-white);
    line-height: 1.15;
}

.consultation__text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.65;
}

.consultation__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    justify-content: flex-start;
    align-items: flex-start;
}

.consultation__link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.consultation__link span {
    display: block;
    flex: 1;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    padding-bottom: 0;
    position: static;
    overflow: visible;
    transition: none;
}

.consultation__link span:after {
    display: none;
}

.consultation__link i {
    transition: transform 0.25s ease;
    color: var(--lemon);
    font-size: 18px;
    flex-shrink: 0;
}

.consultation__link:hover {
    background: rgba(200, 241, 53, 0.07);
    border-color: rgba(200, 241, 53, 0.3);
    color: var(--color-white);
}

.consultation__link:hover span::after {
    transform: none;
}

.consultation__link:hover i {
    transform: translateX(4px);
}

.menuPortfolio {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menuPortfolio__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s ease;
    position: relative;
}

.menuPortfolio__link:hover {
    background: rgba(255, 255, 255, 0.05);
}

.menuPortfolioLink__imgWrap {
    width: 72px;
    height: 48px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
}

.menuPortfolioLink__imgWrap::after {
    display: none;
}

.menuPortfolioLink__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.menuPortfolio__link:hover .menuPortfolioLink__img {
    transform: scale(1.08);
}

.menuPortfolioLink__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.menuPortfolioLink__title {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.menuPortfolio__link:hover .menuPortfolioLink__title {
    color: #fff;
}

.menuPortfolioLink__btnWrap {
    margin-top: 1px;
}

.menuPortfolioLink__btnWrap span {
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.menuPortfolioLink__btnWrap span i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.menuPortfolio__link:hover .menuPortfolioLink__btnWrap span {
    color: var(--lemon);
}

.menuPortfolio__link:hover .menuPortfolioLink__btnWrap span i {
    transform: translateX(3px);
}

/* Arrow chevron indicator on hover */
.menuPortfolio__link::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 60%;
    background: var(--lemon);
    border-radius: 2px;
    transition: transform 0.2s ease;
}

.menuPortfolio__link:hover::after {
    transform: translateY(-50%) scaleY(1);
}

.menuNav__sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menuNav__sub-item {
    position: relative;
}

.menuNav__sub-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 60%;
    background: var(--lemon);
    border-radius: 2px;
    transition: transform 0.2s ease;
}

.menuNav__sub-item:hover::before {
    transform: translateY(-50%) scaleY(1);
}

.menuNav__sub-link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px 11px 16px;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
    line-height: 1.3;
}

.menuNav__sub-link i {
    font-size: 13px;
    color: var(--lemon);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.menuNav__sub-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.menuNav__sub-link:hover i {
    opacity: 1;
    transform: translateX(3px);
}

.mob__menuBtnWrap {
    display: none;
}

.glass-menu-overlay {
    display: none;
}

.aboutUsSection {
    padding: 70px 0;
}

.aboutUs {
    display: flex;
    gap: 20px;
}

.aboutUs__left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.aboutUs__title {}

.aboutUs__text {
    font-size: 20px
}

.aboutUs__cards {
    display: flex;
    gap: 20px;
}

.aboutUs__card {
    flex: 1;
    background-color: var(--color-gunmetal);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
}

.aboutUs__card h4 {
    color: var(--color-lemon-volt);
    font-size: 80px;
    line-height: 1;
}

.aboutUs__card span {
    color: var(--color-lemon-volt);
    font-weight: 500;
    font-size: 18px;
}

.aboutUs__card p {
    color: var(--color-white);
    font-weight: 500;
}

.aboutUs__right {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.aboutUs__imgWrap {
    border-radius: 20px;
    overflow: hidden;
    display: flex;
}

.aboutUs__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aboutUs__title span {
    color: var(--color-lemon-dark);
}

.aboutUs__title {
    font-size: 60px;
}

.aboutUs__contact {
    flex: 1;
    background-color: var(--color-lemon-volt);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.aboutUsContact__title {
    font-size: 34px;
    line-height: 1.2;
}

.aboutUsContact__btnWrap {
    max-width: 280px;
}

.aboutUsContact__btn {
    width: 100%;
    height: 50px;
    background: var(--color-gunmetal);
    color: var(--color-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-weight: 600;
    z-index: 15;
    transition: 500ms all;
    text-transform: uppercase;
    font-size: 16px;
    border: 2px solid var(--color-gunmetal);
}

.aboutUsContact__btn:hover {
    background-color: transparent;
    color: var(--color-gunmetal);
}

.expertiseSection {
    padding: 70px 0;
    background-color: #161a1b;
}

.expertise__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 70px;
}

.expertise__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(200, 241, 53, 0.12);
    border: 1px solid rgba(200, 241, 53, 0.25);
    border-radius: 100px;
    padding: 6px 14px;
    margin-bottom: 20px;
}

.expertise__tagDot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-lemon-volt);
}

.expertise__tagText {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-lemon-volt);
}

.expertise__title {
    color: #ffffff;
}

.expertise__title em {
    font-style: normal;
    color: var(--color-lemon-volt);
}

.expertise__desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
    max-width: 260px;
    margin-top: auto;
    padding-top: 8px;
}

.expertise__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
}

.expertiseCard {
    background: #1e2324;
    padding: 40px;
    cursor: default;
    transition: background 0.3s;
    position: relative;
    overflow: hidden;
}

.expertiseCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.3s;
}

.expertiseCard:hover {
    background: #252b2c;
}

.expertiseCard:hover::before {
    background: rgba(200, 241, 53, 0.3);
}

.expertiseCard:hover .expertiseCard__icon {
    background: var(--color-lemon-volt);
}

.expertiseCard:hover .expertiseCard__icon svg {
    stroke: #161a1b;
}

.expertiseCard:hover .expertiseCard__arrow {
    opacity: 1;
    transform: translate(0, 0);
}

.expertiseCard__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
}

.expertiseCard__num {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.2);
}

.expertiseCard__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.expertiseCard__arrow {
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: all 0.3s;
}

.expertiseCard__arrow svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-lemon-volt);
}

.expertiseCard__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.expertiseCard__icon svg {
    width: 22px;
    height: 22px;
    stroke: rgba(255, 255, 255, 0.6);
    transition: stroke 0.3s;
}

.expertiseCard__title {
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.expertiseCard__text {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
}

.expertiseCard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}

.expertiseCard__tag {
    font-size: 16px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.04em;
}

.expertiseCard__tag--accent {
    background: rgba(200, 241, 53, 0.12);
    color: var(--color-lemon-volt);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(200%)
    }
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(200, 241, 53, 0.5)
    }

    50% {
        box-shadow: 0 0 0 8px rgba(200, 241, 53, 0)
    }
}

.processSection {
    padding: 70px 0;
    background: #ffffff;
}

.process__top {
    margin-bottom: 50px;
    opacity: 0;
    animation: fadeUp .7s ease forwards;
}

.process__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lemon-dim);
    border: 1px solid var(--lemon-border);
    border-radius: 100px;
    padding: 6px 14px;
    margin-bottom: 20px;
}

.process__tagDot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lemon-text);
}

.process__tagText {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lemon-text);
}

.process__title {
    color: var(--color-gunmetal);
    letter-spacing: -.02em;
}

.process__title em {
    font-style: normal;
    position: relative;
    color: var(--color-lemon-dark);
}

.process__title em::after {
    /* content: ''; */
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 10px;
    background: var(--lemon);
    z-index: -1;
    border-radius: 3px;
    transform: skewX(-2deg);
}

.process__timeline {
    position: relative;
}

.process__lineWrap {
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: var(--border);
}

.process__lineFill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--lemon);
    height: 0;
    transition: height .5s cubic-bezier(.4, 0, .2, 1);
}

.processStep {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    padding: 32px 0;
    position: relative;
    opacity: 0;
    transform: translateY(16px);
    cursor: default;
}

.processStep:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.processStep.visible {
    animation: fadeUp .55s ease forwards;
}

.processStep__left {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.processStep__dot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .35s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
}

.processStep__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    transform: translateX(-100%);
}

.processStep__dot svg {
    width: 20px;
    height: 20px;
    stroke: var(--muted2);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all .35s;
}

.processStep__body {
    flex: 1;
    padding-top: 8px;
}

.processStep__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.processStep__num {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--muted2);
    transition: color .3s;
}

.processStep__duration {
    font-size: 16px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 100px;
    background: var(--border);
    color: var(--muted);
    transition: all .3s;
}

.processStep__title {
    font-size: 28px;
    font-weight: bold;
    color: var(--dark);
    letter-spacing: -.01em;
    margin-bottom: 8px;
    line-height: 1.25;
    transition: color .3s;
}

.processStep__text {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.75;
    max-width: 70%;
}

.processStep__deliverables {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.processStep__tag {
    font-size: 16px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #6b7280;
    transition: all .3s;
    opacity: 0;
    transform: translateX(-6px);
}

.processStep__right {
    padding-top: 8px;
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: all .35s;
}

.processStep__arrow svg {
    width: 18px;
    height: 18px;
    stroke: var(--lemon-text);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Active state */
.processStep.active .processStep__dot {
    background: var(--lemon);
    border-color: var(--lemon);
    transform: scale(1.08);
    animation: pulse 2s ease infinite;
}

.processStep.active .processStep__dot::after {
    animation: shimmer .6s ease forwards;
}

.processStep.active .processStep__dot svg {
    stroke: var(--dark);
}

.processStep.active .processStep__num {
    color: var(--lemon-text);
}

.processStep.active .processStep__duration {
    background: var(--lemon-dim);
    color: var(--lemon-text);
    border: 1px solid var(--lemon-border);
}

.processStep.active .processStep__right {
    opacity: 1;
    transform: translate(0, 0);
}

.processStep.active .processStep__tag {
    background: rgba(200, 241, 53, 0.15);
    color: #4a7500;
    opacity: 1;
    transform: translateX(0);
}

.processStep.active .processStep__tag:nth-child(1) {
    transition-delay: .05s
}

.processStep.active .processStep__tag:nth-child(2) {
    transition-delay: .10s
}

.processStep.active .processStep__tag:nth-child(3) {
    transition-delay: .15s
}

.processStep.active .processStep__tag:nth-child(4) {
    transition-delay: .20s
}

.processStep:not(.active):hover .processStep__dot {
    border-color: #d1d5db;
    transform: scale(1.04);
}

.processStep:not(.active):hover .processStep__dot svg {
    stroke: #9ca3af;
}

.tech-section {
    background: #161a1b;
    /* --dark */
    padding: 70px 40px 70px;
    
    overflow: hidden;
    position: relative;
    min-height: 760px;
}

/* ---------- Звёздный фон ---------- */
.tech-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.tech-star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: ts-twinkle var(--d) ease-in-out infinite alternate;
}

@keyframes ts-twinkle {
    from {
        opacity: 0.05;
    }

    to {
        opacity: 0.50;
    }
}

/* ---------- Шапка секции ---------- */
.tech-header {
    text-align: center;
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
}

.tech-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #161a1b;
    background: #C8F135;
    /* --lemon */
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 10px;
}

.tech-title {
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.tech-title em {
    color: #C8F135;
    font-style: normal;
}

.tech-subtitle {
    color: #6b7280;
    /* --muted */
    margin-top: 14px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    font-size: 18px;
}

/* ---------- Солнечная система ---------- */
.tech-solar {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    height: 580px;
}

/* Солнце */
.tech-sun {
    position: absolute;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #C8F135;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.tech-sun-glow {
    position: absolute;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.10);
    animation: ts-glow 2.5s ease-in-out infinite alternate;
    pointer-events: none;
}

.tech-sun-glow:nth-child(1) {
    width: 110px;
    height: 110px;
}

.tech-sun-glow:nth-child(2) {
    width: 155px;
    height: 155px;
    animation-delay: 0.8s;
    background: rgba(200, 241, 53, 0.05);
}

@keyframes ts-glow {
    from {
        transform: scale(0.9);
        opacity: 0.6;
    }

    to {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Орбиты */
.tech-orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(200, 241, 53, 0.10);
    pointer-events: none;
}

/* Планеты */
.tech-planet {
    border-radius: 50%;
    background: #1f2526;
    border: 1.5px solid rgba(200, 241, 53, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
    will-change: transform;
}

.tech-planet:hover {
    border-color: #C8F135;
    background: #252d1a;
    box-shadow: 0 0 18px rgba(200, 241, 53, 0.15);
    z-index: 100;
}

.tech-planet img {
    width: 54%;
    height: 54%;
    object-fit: contain;
    filter: grayscale(1) brightness(1.6);
    transition: filter 0.3s;
    pointer-events: none;
    display: block;
}

.tech-planet:hover img {
    filter: grayscale(0) brightness(1.1);
}

.tech-planet-label {
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #6b7280;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    transition: color 0.3s;
    pointer-events: none;
}

.tech-planet:hover .tech-planet-label {
    color: #C8F135;
}

.tech-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2526;
    border: 1px solid rgba(200, 241, 53, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 200;
}

.tech-planet:hover .tech-tooltip {
    opacity: 1;
}

/* ---------- Статистика ---------- */
.tech-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    position: relative;
    z-index: 10;
    flex-wrap: wrap;
    border: 1px solid rgba(200, 241, 53, 0.15);
    border-radius: 16px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.tech-stat {
    flex: 1;
    text-align: center;
    padding: 20px;
    min-width: 110px;
    position: relative;
}

.tech-stat+.tech-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(200, 241, 53, 0.15);
}

.tech-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}

.tech-stat-num em {
    color: #C8F135;
    font-style: normal;
}

.tech-stat-desc {
    font-size: 12px;
    color: #6b7280;
    margin-top: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.hs-wrap {
    background: var(--bg-page, #ffffff);
    
    padding: 88px 40px 70px;
    position: relative;
    overflow: hidden;
    margin-top: -88px;
}

/* --- Декоративные фоновые пятна --- */
.hs-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hs-bg-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.13);
    transform: translate(-50%, -50%);
    animation: hs-sh var(--d) ease-in-out infinite alternate;
}

@keyframes hs-sh {
    from {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: .5;
    }

    to {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

/* ============================================================
     BREADCRUMBS
  ============================================================ */
.hs-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 22px 0 0;
    position: relative;
    z-index: 5;
}

.hs-bc-item {
    font-size: 13px;
    color: var(--muted, #6b7280);
    text-decoration: none;
    transition: color .2s;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.hs-bc-item:hover {
    color: var(--lemon-text, #4a7500);
}

.hs-bc-item.hs-bc-current {
    color: var(--color-black, #00272b);
    font-weight: 600;
    pointer-events: none;
}

.hs-bc-sep {
    display: flex;
    align-items: center;
    color: var(--border, #e5e7eb);
}

/* ============================================================
     ОСНОВНАЯ СЕТКА
  ============================================================ */
.hs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding-top: 70px;
}

.hs-left {
    position: relative;
    z-index: 2;
}

.hs-right {
    position: relative;
    z-index: 2;
}

/* --- Бейдж --- */
.hs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(200, 241, 53, 0.15);
    border: 1.5px solid rgba(200, 241, 53, 0.45);
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 24px;
}

.hs-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lemon, #C8F135);
    animation: hs-blink 1.5s ease-in-out infinite alternate;
}

@keyframes hs-blink {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

.hs-badge-txt {
    font-size: 14px;
    font-weight: 700;
    color: var(--lemon-text, #4a7500);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- H1 --- */
.hs-h1 {
    color: var(--color-black, #00272b);
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.hs-h1 em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
    position: relative;
}

.hs-h1 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: var(--lemon, #C8F135);
    border-radius: 2px;
}

/* --- Подзаголовок --- */
.hs-sub {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
    margin-bottom: 36px;
}

.hs-sub strong {
    color: var(--color-black, #00272b);
    font-weight: 600;
}

/* --- CTA кнопки (--radius: 40px как на главной) --- */
.hs-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.hs-btn-primary {
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 17px;
    font-weight: 700;
    padding: 26px 46px;
    border-radius: var(--radius, 40px);
    border: none;
    cursor: pointer;
    letter-spacing: -.2px;
    transition: background .2s, transform .15s, box-shadow .2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hs-btn-primary:hover {
    background: #b5e020;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 241, 53, 0.35);
}

.hs-btn-secondary {
    background: transparent;
    color: var(--color-black, #00272b);
    font-size: 17px;
    font-weight: 600;
    padding: 26px 46px;
    border-radius: var(--radius, 40px);
    border: 2px solid var(--border, #e5e7eb);
    cursor: pointer;
    transition: border-color .2s, color .2s, transform .15s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hs-btn-secondary:hover {
    border-color: var(--lemon, #C8F135);
    color: var(--lemon-text, #4a7500);
    transform: translateY(-2px);
}

/* --- Доверие-цифры --- */
.hs-trust {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: center;
}

.hs-trust-num {
    font-size: 32px;
    font-weight: bold;
    color: var(--color-black, #00272b);
}

.hs-trust-num em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
}

.hs-trust-desc {
    font-size: 16px;
    color: var(--muted2, #9ca3af);
    line-height: 1.3;
    margin-top: 2px;
}

.hs-trust-sep {
    width: 1px;
    height: 36px;
    background: var(--border, #e5e7eb);
}

/* ============================================================
     ПРАВАЯ ЧАСТЬ — иллюстрация-мокап
  ============================================================ */
.hs-mockup-wrap {
    position: relative;
    padding: 28px 32px 28px 24px;
}

/* Floating-карточки */
.hs-floating {
    position: absolute;
    background: #fff;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.hs-fl-1 {
    top: -10px;
    right: 8px;
    animation: hf1 4s ease-in-out infinite alternate;
}

.hs-fl-2 {
    bottom: 24px;
    left: -8px;
    animation: hf2 5s ease-in-out infinite alternate;
}

@keyframes hf1 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-8px);
    }
}

@keyframes hf2 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(6px);
    }
}

.hs-fl-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--lemon-dim, rgba(200, 241, 53, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hs-fl-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-black, #00272b);
    line-height: 1.2;
}

.hs-fl-sub {
    font-size: 10px;
    color: var(--muted2, #9ca3af);
    margin-top: 2px;
}

/* Браузер-мокап */
.hs-mockup {
    background: var(--color-soft-gray, #f8f9fa);
    border-radius: 20px;
    border: 1.5px solid var(--border, #e5e7eb);
    overflow: hidden;
}

.hs-browser-bar {
    background: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.hs-bdot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.hs-url-bar {
    flex: 1;
    background: var(--color-alabaster, #f2f3f4);
    border-radius: 6px;
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.hs-url-txt {
    font-size: 11px;
    color: var(--muted2, #9ca3af);
}

.hs-screen {
    padding: 18px;
}

/* Навбар в мокапе */
.hs-m-nav {
    background: #fff;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    border: 1px solid var(--color-alabaster, #f2f3f4);
}

.hs-m-logo {
    width: 56px;
    height: 8px;
    background: var(--lemon, #C8F135);
    border-radius: 4px;
}

.hs-m-links {
    display: flex;
    gap: 8px;
}

.hs-m-link {
    width: 28px;
    height: 5px;
    background: var(--border, #e5e7eb);
    border-radius: 3px;
}

.hs-m-cta {
    width: 48px;
    height: 22px;
    background: var(--lemon, #C8F135);
    border-radius: 40px;
}

/* Hero-блок в мокапе */
.hs-m-hero {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--color-alabaster, #f2f3f4);
}

.hs-m-tag {
    width: 72px;
    height: 6px;
    background: rgba(200, 241, 53, .5);
    border-radius: 4px;
    margin-bottom: 9px;
}

.hs-m-h1a {
    width: 100%;
    height: 9px;
    background: var(--color-gunmetal, #343c42);
    border-radius: 4px;
    margin-bottom: 5px;
}

.hs-m-h1b {
    width: 65%;
    height: 9px;
    background: var(--color-gunmetal, #343c42);
    border-radius: 4px;
    margin-bottom: 12px;
}

.hs-m-sub {
    width: 90%;
    height: 5px;
    background: var(--color-platinum, #d7d8df);
    border-radius: 3px;
    margin-bottom: 4px;
}

.hs-m-sub2 {
    width: 72%;
    height: 5px;
    background: var(--color-platinum, #d7d8df);
    border-radius: 3px;
    margin-bottom: 14px;
}

.hs-m-btns {
    display: flex;
    gap: 7px;
}

.hs-m-btn1 {
    height: 22px;
    width: 72px;
    background: var(--lemon, #C8F135);
    border-radius: 40px;
}

.hs-m-btn2 {
    height: 22px;
    width: 64px;
    background: transparent;
    border-radius: 40px;
    border: 1.5px solid var(--border, #e5e7eb);
}

.hs-m-img {
    background: var(--lemon-dim, rgba(200, 241, 53, .1));
    border-radius: 10px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--lemon-border, rgba(200, 241, 53, .2));
}

/* Карточки услуг в мокапе */
.hs-m-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.hs-m-srv {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid var(--color-alabaster, #f2f3f4);
}

.hs-m-srv-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(200, 241, 53, .2);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-m-srv-t {
    width: 55%;
    height: 5px;
    background: var(--color-gunmetal, #343c42);
    border-radius: 3px;
    margin-bottom: 4px;
    opacity: .6;
}

.hs-m-srv-s {
    width: 80%;
    height: 4px;
    background: var(--color-platinum, #d7d8df);
    border-radius: 3px;
}

/* Статистика в мокапе */
.hs-m-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.hs-m-stat {
    background: #fff;
    border-radius: 8px;
    padding: 8px 10px;
    border: 1px solid var(--color-alabaster, #f2f3f4);
}

.hs-m-stat-n {
    font-size: 16px;
    font-weight: 800;
    color: var(--lemon-text, #4a7500);
    line-height: 1;
}

.hs-m-stat-d {
    font-size: 8px;
    color: var(--muted2, #9ca3af);
    margin-top: 3px;
    letter-spacing: .3px;
}

.seo-wrap {
    background: var(--dark, #161a1b);
    padding: 96px 0;
    
    position: relative;
    overflow: hidden;
}

/* Тонкая сетка-фон */
.seo-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .035;
}

.seo-grid-bg svg {
    width: 100%;
    height: 100%;
}

/* Акцентная линия сверху */
.seo-accent-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            var(--lemon, #C8F135) 40%,
            var(--lemon, #C8F135) 60%,
            transparent);
}

.seo-inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
     ВЕРХНЯЯ ЧАСТЬ: текст + факты
  ============================================================ */
.seo-top {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 70px;
}

/* --- Ключевые слова-теги --- */
.seo-kw-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.seo-kw {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(200, 241, 53, 0.08);
    border: 1px solid rgba(200, 241, 53, 0.2);
    border-radius: 100px;
    padding: 5px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lemon, #C8F135);
    letter-spacing: .5px;
    animation: seo-kw-in .5s ease both;
}

@keyframes seo-kw-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.seo-kw:nth-child(1) {
    animation-delay: .1s;
}

.seo-kw:nth-child(2) {
    animation-delay: .2s;
}

.seo-kw:nth-child(3) {
    animation-delay: .3s;
}

.seo-kw-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lemon, #C8F135);
    opacity: .7;
}

/* --- H2 --- */
.seo-h2 {
    color: #fff;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 32px;
}

.seo-h2 em {
    color: var(--lemon, #C8F135);
    font-style: normal;
    position: relative;
}

.seo-h2 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background: var(--lemon, #C8F135);
    border-radius: 2px;
    opacity: .5;
}

/* --- Абзацы --- */
.seo-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.seo-p {
    font-size: 18px;
    color: var(--muted2, #9ca3af);
    line-height: 1.8;
}

.seo-p strong {
    color: #d1d5db;
    font-weight: 600;
}

.seo-p mark {
    background: rgba(200, 241, 53, 0.12);
    color: var(--lemon, #C8F135);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
    font-style: normal;
}

/* --- Факт-карточки (правая колонка) --- */
.seo-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
}

.seo-fact {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, background .3s;
    animation: seo-fact-in .6s ease both;
}

.seo-fact:hover {
    border-color: rgba(200, 241, 53, 0.25);
    background: rgba(200, 241, 53, 0.04);
}

@keyframes seo-fact-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.seo-fact:nth-child(1) {
    animation-delay: .15s;
}

.seo-fact:nth-child(2) {
    animation-delay: .30s;
}

.seo-fact:nth-child(3) {
    animation-delay: .45s;
}

.seo-fact-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--lemon, #C8F135);
    border-radius: 0 2px 2px 0;
    opacity: .6;
}

.seo-fact-num {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1;
}

.seo-fact-num em {
    color: var(--lemon, #C8F135);
    font-style: normal;
    font-size: 28px;
}

.seo-fact-label {
    font-size: 18px;
    color: var(--muted, #6b7280);
    margin-top: 6px;
    line-height: 1.4;
}

/* ============================================================
     РАЗДЕЛИТЕЛЬ
  ============================================================ */
.seo-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: 72px;
    position: relative;
}

.seo-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 1px;
    background: var(--lemon, #C8F135);
    opacity: .4;
}

/* ============================================================
     НИЖНЯЯ ЧАСТЬ: три столпа
  ============================================================ */
.seo-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    border-radius: 20px;
    overflow: hidden;
}

.seo-pillar {
    background: rgba(255, 255, 255, 0.03);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: background .3s;
}

.seo-pillar:hover {
    background: rgba(200, 241, 53, 0.05);
}

.seo-pillar-num {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(200, 241, 53, 0.4);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.seo-pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(200, 241, 53, 0.08);
    border: 1px solid rgba(200, 241, 53, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.seo-pillar-h {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.2;
}

.seo-pillar-p {
    font-size: 16px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
}

.seo-pillar-p strong {
    color: var(--muted2, #9ca3af);
    font-weight: 500;
}

/* Вертикальные разделители между столпами */
.seo-pillar-sep {
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.seo-pillar:last-child .seo-pillar-sep {
    display: none;
}

.pain-wrap {
    background: var(--bg-page, #ffffff);
    padding: 70px 0px;
    
    position: relative;
    overflow: hidden;
}

/* Тонкая шум-текстура фона */
.pain-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .018;
}

.pain-noise svg {
    width: 100%;
    height: 100%;
}

.pain-inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
     ШАПКА
  ============================================================ */
.pain-header {
    text-align: center;
    margin: 0px auto 50px;
}

.pain-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff4f4;
    border: 1.5px solid #fecaca;
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 24px;
}

.pain-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    animation: pain-blink 1.4s ease-in-out infinite alternate;
}

@keyframes pain-blink {
    from {
        opacity: .3;
    }

    to {
        opacity: 1;
    }
}

.pain-tag-txt {
    font-size: 14px;
    font-weight: 700;
    color: #dc2626;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pain-h2 {
    color: var(--color-black, #00272b);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 18px;
}

.pain-h2 em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
    position: relative;
}

.pain-h2 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: var(--lemon, #C8F135);
    border-radius: 2px;
}

.pain-sub {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
}

.pain-sub strong {
    color: var(--color-black, #00272b);
    font-weight: 600;
}

/* ============================================================
     СЕТКА КАРТОЧЕК — 4 боли
  ============================================================ */
.pain-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 56px;
}

.pain-card {
    background: var(--color-soft-gray, #f8f9fa);
    padding: 36px;
    position: relative;
    overflow: hidden;
    transition: background .3s;
    cursor: default;
}

.pain-card:hover {
    background: #f0f2f0;
}

.pain-card:hover .pain-card-icon-wrap {
    background: rgba(200, 241, 53, 0.2);
    border-color: rgba(200, 241, 53, 0.4);
}

.pain-card:hover .pain-card-check {
    opacity: 1;
    transform: scale(1);
}

/* Иконка-тип */
.pain-card-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.pain-card-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f0f0f0;
    border: 1.5px solid var(--border, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .3s, border-color .3s;
}

.pain-card-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #d1d5db;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.pain-card-h {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black, #00272b);
    line-height: 1.3;
}

.pain-card-p {
    font-size: 16px;
    color: var(--muted, #6b7280);
    line-height: 1.75;
    margin-bottom: 16px;
}

/* Цитата-блок */
.pain-card-quote {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--border, #e5e7eb);
}

.pain-card-quote-bar {
    width: 3px;
    border-radius: 2px;
    background: var(--lemon, #C8F135);
    flex-shrink: 0;
}

.pain-card-quote-txt {
    font-size: 15px;
    color: var(--muted2, #9ca3af);
    line-height: 1.6;
    font-style: italic;
}

/* Галочка при ховере */
.pain-card-check {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lemon, #C8F135);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity .25s, transform .25s;
}

/* Разделители между карточками */
.pain-card-sep-h {
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: var(--border, #e5e7eb);
}

.pain-card-sep-v {
    position: absolute;
    right: 0;
    top: 5%;
    bottom: 5%;
    width: 1px;
    background: var(--border, #e5e7eb);
}

.pain-card:nth-child(2) .pain-card-sep-v,
.pain-card:nth-child(4) .pain-card-sep-v {
    display: none;
}

.pain-card:nth-child(3) .pain-card-sep-h,
.pain-card:nth-child(4) .pain-card-sep-h {
    display: none;
}

/* ============================================================
     НИЖНИЙ ТЁМНЫЙ БЛОК — решение
  ============================================================ */
.pain-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: var(--dark, #161a1b);
    border-radius: 24px;
    padding: 48px 52px;
    position: relative;
    overflow: hidden;
}

.pain-bottom-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.07);
    top: -100px;
    right: -100px;
    pointer-events: none;
}

.pain-bottom-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(200, 241, 53, 0.5);
    margin-bottom: 16px;
}

.pain-bottom-h {
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.5px;
    margin-bottom: 14px;
}

.pain-bottom-h em {
    color: var(--lemon, #C8F135);
    font-style: normal;
}

.pain-bottom-p {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
}

.pain-bottom-p strong {
    color: var(--muted2, #9ca3af);
    font-weight: 500;
}

/* Чек-лист решений */
.pain-bottom-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.pain-check-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 18px;
    transition: border-color .3s, background .3s;
}

.pain-check-item:hover {
    border-color: rgba(200, 241, 53, 0.25);
    background: rgba(200, 241, 53, 0.04);
}

.pain-check-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(200, 241, 53, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pain-check-txt {
    font-size: 16px;
    color: #d1d5db;
    font-weight: 500;
    line-height: 1.4;
}

.pain-check-txt em {
    color: var(--lemon, #C8F135);
    font-style: normal;
    font-weight: 600;
}

.st-wrap {
    background: var(--dark, #161a1b);
    padding: 70px 0px;
    
    position: relative;
    overflow: hidden;
}

/* Декоративные свечения */
.st-glow-left {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.05);
    top: -100px;
    left: -150px;
    pointer-events: none;
}

.st-glow-right {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.04);
    bottom: -80px;
    right: -100px;
    pointer-events: none;
}

.st-inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
     ШАПКА
  ============================================================ */
.st-header {
    text-align: center;
    margin: 0 auto 50px;
}

.st-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dark, #161a1b);
    background: var(--lemon, #C8F135);
    padding: 5px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.st-h2 {
    color: #fff;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.st-h2 em {
    color: var(--lemon, #C8F135);
    font-style: normal;
}

.st-sub {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
}

/* ============================================================
     СЕТКА КАРТОЧЕК
     Верхняя строка: 3 колонки
     Нижняя строка: 2fr + 1fr
  ============================================================ */
.st-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}

.st-grid-bottom {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2px;
}

/* ============================================================
     КАРТОЧКА
  ============================================================ */
.st-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: background .3s;
    /* cursor: pointer; */
    /* border-radius применяются на угловых карточках ниже */
}

.st-card:hover {
    background: rgba(200, 241, 53, 0.06);
}

.st-card:hover .st-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

.st-card:hover .st-card-icon-bg {
    background: rgba(200, 241, 53, 0.15);
    border-color: rgba(200, 241, 53, 0.35);
}

.st-card:hover .st-card-num {
    color: rgba(200, 241, 53, 0.6);
}

.st-card:hover .st-card-tag {
    border-color: rgba(200, 241, 53, 0.3);
    color: var(--lemon, #C8F135);
}

/* Скругления угловых карточек */
.st-grid>.st-card:nth-child(1) {
    border-radius: 20px 0 0 0;
}

.st-grid>.st-card:nth-child(3) {
    border-radius: 0 20px 0 0;
}

.st-grid-bottom>.st-card:nth-child(1) {
    border-radius: 0 0 0 20px;
}

.st-grid-bottom>.st-card:nth-child(2) {
    border-radius: 0 0 20px 0;
}

/* 2×2 grid modifier (mobile app page) */
.st-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.st-grid--2col>.st-card:nth-child(1) {
    border-radius: 20px 0 0 0;
}

.st-grid--2col>.st-card:nth-child(2) {
    border-radius: 0 20px 0 0;
}

.st-grid--2col>.st-card:nth-child(3) {
    border-radius: 0 0 0 20px;
}

.st-grid--2col>.st-card:nth-child(4) {
    border-radius: 0 0 20px 0;
}

/* Номер */
.st-card-num {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
    margin-bottom: 20px;
    transition: color .3s;
}

/* Иконка */
.st-card-icon-bg {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background .3s, border-color .3s;
}

/* Заголовок */
.st-card-h {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.2;
}

/* Описание */
.st-card-p {
    font-size: 16px;
    color: var(--muted, #6b7280);
    line-height: 1.75;
    margin-bottom: 16px;
}

/* Теги */
.st-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.st-card-tag {
    padding: 5px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted2, #9ca3af);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    transition: border-color .3s, color .3s;
}

/* Цена */
.st-card-price {
    font-size: 16px;
    color: var(--muted, #6b7280);
}

.st-card-price strong {
    color: var(--lemon, #C8F135);
    font-weight: 700;
    font-size: 18px;
}

/* Стрелка-кнопка при ховере */
.st-card-arrow {
    position: absolute;
    bottom: 28px;
    right: 28px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(200, 241, 53, 0.1);
    border: 1px solid rgba(200, 241, 53, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .25s, transform .25s;
}

/* Разделители */
.st-card-sep-v {
    position: absolute;
    right: 0;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.st-card-sep-h {
    position: absolute;
    bottom: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================================
     КАРТОЧКА ИНТЕРНЕТ-МАГАЗИНА (особая)
  ============================================================ */
.st-card-shop {
    background: rgba(200, 241, 53, 0.04);
    border: 1.5px solid rgba(200, 241, 53, 0.12);
}

.st-card-shop:hover {
    background: rgba(200, 241, 53, 0.08);
}

.st-card-shop .st-card-h {
    color: var(--lemon, #C8F135);
}

.st-card-shop-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.st-card-shop-icon {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: rgba(200, 241, 53, 0.08);
    border: 1.5px solid rgba(200, 241, 53, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================================
   СТРАНИЦА КОНТАКТОВ
   Все секции используют уникальные префиксы:
   .ch-  Hero + контакты
   .cf-  Форма заявки
   .cs-  Перелинковка услуг
   .co-  Онлайн-формат
============================================================ */

/* ============================================================
   1. HERO — заголовок + контакты
============================================================ */
.ch-wrap {
    background: var(--bg-page, #ffffff);
    padding: 88px 0px 70px;
    position: relative;
    overflow: hidden;
    margin-top: -88px;
}

.ch-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ch-bg-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.10);
    transform: translate(-50%, -50%);
    animation: ch-sh var(--d) ease-in-out infinite alternate;
}

@keyframes ch-sh {
    from {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: .4;
    }

    to {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: .9;
    }
}

/* Breadcrumbs */
.ch-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 22px 0 0;
    position: relative;
    z-index: 5;
    max-width: 1200px;
    margin: 0 auto;
}

.ch-bc-item {
    font-size: 13px;
    color: var(--muted, #6b7280);
    text-decoration: none;
    transition: color .2s;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ch-bc-item:hover {
    color: var(--lemon-text, #4a7500);
}

.ch-bc-item.active {
    color: var(--color-black, #00272b);
    font-weight: 600;
    pointer-events: none;
}

.ch-bc-sep {
    display: flex;
    align-items: center;
    color: var(--border, #e5e7eb);
}

/* Hero grid */
.ch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding-top: 70px;
}

/* Бейдж */
.ch-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(200, 241, 53, .15);
    border: 1.5px solid rgba(200, 241, 53, .45);
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 24px;
}

.ch-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lemon, #C8F135);
    animation: ch-blink 1.5s ease-in-out infinite alternate;
}

@keyframes ch-blink {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

.ch-badge-txt {
    font-size: 14px;
    font-weight: 700;
    color: var(--lemon-text, #4a7500);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* H1 */
.ch-h1 {
    color: var(--color-black, #00272b);
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.ch-h1 em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
    position: relative;
}

.ch-h1 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: var(--lemon, #C8F135);
    border-radius: 2px;
}

.ch-sub {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
    margin-bottom: 36px;
}

.ch-sub strong {
    color: var(--color-black, #00272b);
    font-weight: 600;
}

/* Кнопка */
.ch-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius, 40px);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .15s, box-shadow .2s;
    padding: 26px 46px;
    box-sizing: border-box;
}

.ch-btn:hover {
    background: #b5e020;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 241, 53, .35);
}

/* Карточки контактов (правая колонка) */
.ch-right-card {
    background: var(--color-soft-gray, #f8f9fa);
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: border-color .3s, transform .2s;
    animation: ch-card-in .5s ease both;
    margin-bottom: 12px;
}

.ch-right-card:last-child {
    margin-bottom: 0;
}

.ch-right-card:hover {
    border-color: rgba(200, 241, 53, .5);
    transform: translateX(4px);
}

@keyframes ch-card-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ch-right-card:nth-child(1) {
    animation-delay: .10s;
}

.ch-right-card:nth-child(2) {
    animation-delay: .20s;
}

.ch-right-card:nth-child(3) {
    animation-delay: .30s;
}

.ch-right-card:nth-child(4) {
    animation-delay: .40s;
}

.ch-rc-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(200, 241, 53, .12);
    border: 1.5px solid rgba(200, 241, 53, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ch-rc-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted2, #9ca3af);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 10px;
}

.ch-rc-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black, #00272b);
}

.ch-rc-value a {
    color: var(--color-black, #00272b);
    text-decoration: none;
    transition: color .2s;
}

.ch-rc-value a:hover {
    color: var(--lemon-text, #4a7500);
}

.ch-rc-arrow {
    margin-left: auto;
    color: #d1d5db;
    transition: color .3s, transform .2s;
    flex-shrink: 0;
}

.ch-right-card:hover .ch-rc-arrow {
    color: var(--lemon, #C8F135);
    transform: translateX(3px);
}

/* ============================================================
   2. ФОРМА ЗАЯВКИ (тёмный фон)
============================================================ */
.cf-wrap {
    background: var(--dark, #161a1b);
    padding: 70px 0px;
    position: relative;
    overflow: hidden;
    scroll-margin-top: 104px; /* sticky header (88px) + 16px gap */
}

.cf-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .03;
}

.cf-grid-bg svg {
    width: 100%;
    height: 100%;
}

.cf-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(200, 241, 53, .05);
    top: -150px;
    right: -150px;
    pointer-events: none;
}

.cf-inner {
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.cf-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.cf-left-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dark, #161a1b);
    background: var(--lemon, #C8F135);
    padding: 5px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.cf-left-h2 {
    color: #fff;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.cf-left-h2 em {
    color: var(--lemon, #C8F135);
    font-style: normal;
}

.cf-left-p {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
    margin-bottom: 36px;
}

/* Обещания */
.cf-promise {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cf-promise-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 13px 16px;
    transition: border-color .3s;
}

.cf-promise-item:hover {
    border-color: rgba(200, 241, 53, .25);
}

.cf-promise-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(200, 241, 53, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cf-promise-txt {
    font-size: 16px;
    color: #d1d5db;
    font-weight: 500;
}

.cf-promise-txt em {
    color: var(--lemon, #C8F135);
    font-style: normal;
    font-weight: 600;
}

/* Форма */
.cf-form {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cf-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cf-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cf-field:last-of-type {
    margin-bottom: 0;
}

.cf-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted2, #9ca3af);
    letter-spacing: .5px;
    text-transform: uppercase;
}

.cf-input,
.cf-select,
.cf-textarea {
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .10);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 16px;
    color: #fff;
    
    outline: none;
    transition: border-color .2s, background .2s;
    width: 100%;
    box-sizing: border-box;
}

.cf-input::placeholder,
.cf-textarea::placeholder {
    color: var(--muted, #6b7280);
}

.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
    border-color: rgba(200, 241, 53, .5);
    background: rgba(200, 241, 53, .04);
}

.cf-select {
    color: var(--muted, #6b7280);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

.cf-select option {
    background: #1f2526;
    color: #fff;
}

.cf-textarea {
    resize: vertical;
    min-height: 120px;
}

.cf-form-bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.cf-submit {
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 15px;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: var(--radius, 40px);
    border: none;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    white-space: nowrap;
}

.cf-submit:hover {
    background: #b5e020;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 241, 53, .3);
}

.cf-policy {
    font-size: 14px;
    color: var(--muted, #6b7280);
    line-height: 1.5;
}

.cf-policy a {
    color: var(--muted2, #9ca3af);
    text-decoration: underline;
}

/* ============================================================
   3. ПЕРЕЛИНКОВКА УСЛУГ (белый фон)
============================================================ */
.cs-wrap {
    background: var(--bg-page, #ffffff);
    padding: 70px 0px;
    position: relative;
    overflow: hidden;
}

.cs-bg-c1 {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(200, 241, 53, .07);
    top: -150px;
    right: -100px;
    pointer-events: none;
}

.cs-bg-c2 {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(200, 241, 53, .05);
    bottom: -80px;
    left: -80px;
    pointer-events: none;
}

.cs-inner {
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.cs-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px;
}

.cs-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dark, #161a1b);
    background: var(--lemon, #C8F135);
    padding: 5px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.cs-h2 {
    color: var(--color-black, #00272b);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.cs-h2 em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
}

.cs-sub {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
}

.cs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cs-card {
    background: var(--color-soft-gray, #f8f9fa);
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s, transform .25s;
    text-decoration: none;
    display: block;
    animation: cs-in .5s ease both;
}

.cs-card:hover {
    border-color: rgba(200, 241, 53, .5);
    box-shadow: 0 8px 32px rgba(200, 241, 53, .12);
    transform: translateY(-4px);
}

@keyframes cs-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cs-card:nth-child(1) {
    animation-delay: .05s;
}

.cs-card:nth-child(2) {
    animation-delay: .15s;
}

.cs-card:nth-child(3) {
    animation-delay: .25s;
}

.cs-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(200, 241, 53, .12);
    border: 1.5px solid rgba(200, 241, 53, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background .3s;
}

.cs-card:hover .cs-card-icon {
    background: rgba(200, 241, 53, .22);
}

.cs-card-h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black, #00272b);
    margin-bottom: 10px;
    line-height: 1.2;
}

.cs-card-p {
    font-size: 16px;
    color: var(--muted, #6b7280);
    line-height: 1.65;
    margin-bottom: 20px;
}

.cs-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.cs-card-tag {
    font-size: 14px;
    font-weight: 600;
    color: var(--lemon-text, #4a7500);
    background: rgba(200, 241, 53, .10);
    border: 1px solid rgba(200, 241, 53, .2);
    border-radius: 100px;
    padding: 5px 10px;
}

.cs-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 13px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: var(--radius, 40px);
    text-decoration: none;
    transition: background .2s, transform .15s;
}

.cs-card:hover .cs-card-btn {
    background: #b5e020;
    transform: translateY(-1px);
}

.cs-card:hover .cs-card-btn svg {
    transform: translateX(3px);
}

.cs-card-btn svg {
    transition: transform .2s;
}

/* ============================================================
   4. ОНЛАЙН-ФОРМАТ (тёмный фон)
============================================================ */
.co-wrap {
    background: var(--dark, #161a1b);
    padding: 70px 0px;
    position: relative;
    overflow: hidden;
}

.co-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(200, 241, 53, .06);
    bottom: -150px;
    left: -100px;
    pointer-events: none;
}

.co-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.co-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(200, 241, 53, .5);
    margin-bottom: 14px;
}

.co-h2 {
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.5px;
    margin-bottom: 14px;
}

.co-h2 em {
    color: var(--lemon, #C8F135);
    font-style: normal;
}

.co-p {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
    margin-bottom: 28px;
}

.co-p strong {
    color: var(--muted2, #9ca3af);
    font-weight: 500;
}

.co-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 15px;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: var(--radius, 40px);
    text-decoration: none;
    transition: background .2s, transform .15s;
}

.co-btn:hover {
    background: #b5e020;
    transform: translateY(-2px);
}

.co-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.co-step {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    padding: 18px 20px;
    transition: border-color .3s;
}

.co-step:hover {
    border-color: rgba(200, 241, 53, .2);
}

.co-step-num {
    font-size: 14px;
    font-weight: 700;
    color: rgba(200, 241, 53, .5);
    letter-spacing: 1px;
    min-width: 24px;
}

.co-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(200, 241, 53, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.co-step-txt {
    font-size: 18px;
    font-weight: 600;
    color: #d1d5db;
}

.co-step-sub {
    font-size: 16px;
    color: var(--muted, #6b7280);
    margin-top: 10px;
}

.news-hero {
    position: relative;
    padding: 22px 0 0;
    overflow: hidden;
}

.news-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.news-bg-shape {
    animation: float var(--d, 4s) ease-in-out infinite;
}

.news-hero-content {
    max-width: 920px;
    margin: 50px auto 0;
    text-align: center;
}

.news-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(200, 241, 53, 0.1);
    border: 1px solid rgba(200, 241, 53, 0.3);
    border-radius: 32px;
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 500;
    color: #4a7500;
    animation: fadeInUp 0.8s ease-out;
}

.news-hero-badge-dot {
    width: 8px;
    height: 8px;
    background: #C8F135;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.news-hero-h1 {
    font-family: Montserrat, sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #00272b;
    animation: fadeInUp 0.9s ease-out 0.1s both;
}

.news-hero-h1 em {
    color: #C8F135;
    font-style: normal;
    position: relative;
}

.news-hero-h1 em::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #C8F135;
    opacity: 0.4;
}

.news-hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: #6b7280;
    animation: fadeInUp 1s ease-out 0.2s both;
}

/* News List */
.news-list-wrap {
    padding: 0px 0 70px;
    background: white;
}

.news-filters {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.news-filter-btn {
    padding: 10px 24px;
    background: transparent;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-filter-btn:hover {
    border-color: var(--lemon, #C8F135);
    color: var(--lemon-text, #4a7500);
}

.news-filter-btn.active {
    background: var(--lemon, #C8F135);
    border-color: var(--lemon, #C8F135);
    color: var(--lemon-text, #4a7500);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
    margin-bottom: 60px;
}

.news-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.8s ease-out forwards;
    height: 100%;
}

.news-card:hover {
    border-color: #C8F135;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-8px);
}

.news-card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
}

.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-card:hover .news-card-img {
    transform: scale(1.05);
}

.news-card-category {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #C8F135;
    color: #4a7500;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.news-card-content {
    padding: 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-card-title {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
    color: #00272b;
    transition: color 0.3s ease;
}

.news-card:hover .news-card-title {
    color: var(--lemon-text, #4a7500);
}

.news-card-excerpt {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 20px;
    flex: 1;
}

.news-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #9ca3af;
}

.news-card-meta-left {
    display: flex;
    gap: 4px;
}

.news-card-sep {
    margin: 0 4px;
}

.news-card-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 241, 53, 0.1);
    border-radius: 50%;
    color: #C8F135;
    transition: all 0.3s ease;
}

.news-card:hover .news-card-btn {
    background: #C8F135;
    color: #4a7500;
}

.news-swiper .swiper-wrapper {
    align-items: stretch;
}

.news-swiper .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}

/* Newsletter */
.news-newsletter {
    padding: 80px 0;
    background: #161a1b;
}

.news-nl-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: linear-gradient(135deg, rgba(200, 241, 53, 0.1) 0%, rgba(200, 241, 53, 0.05) 100%);
    border: 1px solid rgba(200, 241, 53, 0.2);
    border-radius: 20px;
    padding: 60px 40px;
}

.news-nl-h2 {
    font-family: Montserrat, sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
}

.news-nl-h2 em {
    color: #C8F135;
    font-style: normal;
}

.news-nl-text {
    font-size: 15px;
    color: #d1d5db;
    line-height: 1.6;
}

.news-nl-form {
    display: flex;
    gap: 12px;
}

.news-nl-input {
    flex: 1;
    padding: 14px 20px;
    background: #1f2022;
    border: 1px solid #2d3233;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.news-nl-input::placeholder {
    color: #6b7280;
}

.news-nl-input:focus {
    outline: none;
    border-color: #C8F135;
    background: rgba(200, 241, 53, 0.05);
}

.news-nl-btn {
    padding: 14px 32px;
    background: #C8F135;
    color: #4a7500;
    border: none;
    border-radius: 10px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.news-nl-btn:hover {
    background: #b8e127;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(200, 241, 53, 0.3);
}

/* ============================================================
   DETAIL NEWS PAGE STYLES
============================================================ */

.detail-news-hero {
    position: relative;
    padding: 22px 0 0px;
    overflow: hidden;
}

.detail-news-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.detail-news-hero-content {
    animation: fadeInUp 0.8s ease-out;
    margin-top: 50px;
}

.detail-news-meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.detail-news-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(200, 241, 53, 0.1);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #4a7500;
    text-transform: uppercase;
}

.detail-news-sep {
    color: #d1d5db;
}

.detail-news-h1 {
    font-family: Montserrat, sans-serif;
    font-size: 48px;
    line-height: 1.15;
    margin-bottom: 24px;
    color: #00272b;
}

.detail-news-h1 em {
    color: #C8F135;
    font-style: normal;
    position: relative;
}

.detail-news-h1 em::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #C8F135;
    opacity: 0.4;
}

.detail-news-lead {
    font-size: 18px;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 32px;
    max-width: 700px;
}

.detail-news-meta-author {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(200, 241, 53, 0.05);
    border: 1px solid rgba(200, 241, 53, 0.15);
    border-radius: 12px;
    width: fit-content;
}

.detail-news-avatar {
    width: 48px;
    height: 48px;
    background: #C8F135;
    color: #4a7500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 18px;
}

.detail-news-author-name {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #00272b;
}

.detail-news-author-role {
    font-size: 12px;
    color: #6b7280;
}

.detail-news-cover {
    margin-top: 50px;
    border-radius: 16px;
    overflow: hidden;
    animation: fadeInUp 1s ease-out 0.1s both;
}

.detail-news-cover-img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Content Layout */
.detail-news-content-wrap {
    padding: 70px 0;
    background: white;
}

.detail-news-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 60px;
    align-items: start;
}

/* Content Styles - БЕЗ КЛАССОВ */
.detail-news h2 {
    font-family: Montserrat, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    margin: 48px 0 20px;
    color: #00272b;
}

.detail-news h2:first-child {
    margin-top: 0;
}

.detail-news h3 {
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 36px 0 16px;
    color: #00272b;
}

.detail-news p {
    font-size: 16px;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 24px;
}

.detail-news strong {
    font-weight: 600;
    color: #00272b;
}

.detail-news a {
    color: #C8F135;
    text-decoration: none;
    border-bottom: 1px solid #C8F135;
    transition: opacity 0.3s ease;
}

.detail-news a:hover {
    opacity: 0.7;
}

.detail-news ul,
.detail-news ol {
    margin: 24px 0 24px 32px;
    color: #4b5563;
}

.detail-news ul li,
.detail-news ol li {
    margin-bottom: 12px;
    line-height: 1.8;
    font-size: 16px;
}

.detail-news ul li::marker {
    color: #C8F135;
}

.detail-news figure {
    margin: 40px 0;
    border-radius: 12px;
    overflow: hidden;
}

.detail-news img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    margin: 24px 0;
}

.detail-news figcaption {
    font-size: 13px;
    color: #6b7280;
    margin-top: 12px;
    text-align: center;
    font-style: italic;
}

.detail-news blockquote {
    margin: 40px 0;
    padding: 32px;
    background: rgba(200, 241, 53, 0.05);
    border-left: 4px solid #C8F135;
    border-radius: 8px;
}

.detail-news blockquote p {
    font-size: 18px;
    font-style: italic;
    color: #00272b;
    margin: 0 0 16px;
}

.detail-news blockquote footer {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.detail-news video {
    width: 100%;
    height: auto;
    margin: 40px 0;
    border-radius: 12px;
}

.detail-news-video {
    margin: 40px 0;
    border-radius: 12px;
    overflow: hidden;
}

.detail-news-video iframe {
    border-radius: 12px;
    display: block;
}

.detail-news-video-caption {
    font-size: 13px;
    color: #6b7280;
    margin-top: 12px;
    text-align: center;
    font-style: italic;
}

/* Sidebar */
.detail-news-sidebar {
    position: sticky;
    top: 100px;
}

.detail-news-toc,
.detail-news-related,
.detail-news-cta-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.detail-news-sidebar h3 {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #00272b;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

.detail-news-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.detail-news-toc li {
    margin-bottom: 10px;
}

.detail-news-toc a {
    font-size: 13px;
    color: #6b7280;
    text-decoration: none;
    border: none;
    transition: color 0.3s ease;
    display: block;
    padding: 4px 0;
}

.detail-news-toc a:hover {
    color: #C8F135;
}

.detail-news-related-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    background: white;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.detail-news-related-item:last-child {
    margin-bottom: 0;
}

.detail-news-related-item:hover {
    background: #f0f0f0;
}

.detail-news-related-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    margin: 0;
}

.detail-news-related-item span {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    flex: 1;
}

.detail-news-cta-box {
    background: linear-gradient(135deg, rgba(200, 241, 53, 0.1) 0%, rgba(200, 241, 53, 0.05) 100%);
    border: 1px solid rgba(200, 241, 53, 0.2);
}

.detail-news-cta-box p {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}

.detail-news-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #C8F135;
    color: #4a7500;
    border: none;
    border-radius: 8px;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-news-cta-btn:hover {
    background: #b8e127;
    transform: translateX(4px);
}

/* Social Share */
.detail-news-social {
    padding: 60px 0;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.detail-news-social-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.detail-news-social-label {
    font-weight: 600;
    color: #00272b;
}

.detail-news-social-buttons {
    display: flex;
    gap: 12px;
}

.detail-news-social-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #00272b;
    text-decoration: none;
    transition: all 0.3s ease;
}

.detail-news-social-btn:hover {
    border-color: #C8F135;
    color: #C8F135;
    background: rgba(200, 241, 53, 0.05);
    transform: translateY(-2px);
}

/* ============================================================
   АДАПТИВ ДЛЯ КОНТАКТОВ - ПОЛНЫЙ RESPONSIVE
============================================================ */

/* 1500px+ - Большие экраны */
@media (min-width: 1500px) {
    .container {
        max-width: 1500px;
        width: calc(100% - 96px);
    }

    .ch-grid,
    .cf-top,
    .cs-grid,
    .co-inner {
        gap: 80px;
    }

    .ch-h1 {
        font-size: 56px;
        margin-bottom: 24px;
    }

    .ch-sub {
        font-size: 20px;
        margin-bottom: 42px;
    }

    .ch-badge {
        padding: 8px 18px;
        margin-bottom: 28px;
    }

    .cf-left-h2 {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .cf-left-p {
        font-size: 20px;
        margin-bottom: 42px;
    }

    .cs-h2 {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .cs-sub {
        font-size: 20px;
    }

    .co-h2 {
        font-size: 44px;
        margin-bottom: 18px;
    }

    .co-p {
        font-size: 20px;
        margin-bottom: 32px;
    }

    .hs-grid {
        gap: 80px;
    }

    .hs-h1 {
        font-size: 58px;
        margin-bottom: 28px;
    }

    .hs-sub {
        font-size: 20px;
        margin-bottom: 42px;
    }
}

/* 1200px - Стандартный Desktop */
@media (max-width: 1500px) and (min-width: 1200px) {
    .container {
        max-width: 1200px;
        width: calc(100% - 80px);
    }

    .ch-grid,
    .cf-top,
    .cs-grid,
    .co-inner {
        gap: 64px;
    }

    .ch-h1 {
        font-size: 52px;
        margin-bottom: 22px;
    }

    .ch-sub {
        font-size: 18px;
        margin-bottom: 36px;
    }

    .ch-badge {
        padding: 6px 16px;
        margin-bottom: 24px;
    }

    .cf-left-h2 {
        font-size: 44px;
        margin-bottom: 18px;
    }

    .cf-left-p {
        font-size: 18px;
        margin-bottom: 36px;
    }

    .cs-h2 {
        font-size: 44px;
        margin-bottom: 18px;
    }

    .cs-sub {
        font-size: 18px;
    }

    .co-h2 {
        font-size: 40px;
        margin-bottom: 16px;
    }

    .co-p {
        font-size: 18px;
        margin-bottom: 28px;
    }

    .hs-grid {
        gap: 64px;
    }

    .hs-h1 {
        font-size: 54px;
        margin-bottom: 24px;
    }

    .hs-sub {
        font-size: 16px;
        margin-bottom: 36px;
    }

    .cf-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* 1024px - Планшет горизонтальный */
@media (max-width: 1200px) and (min-width: 1024px) {
    .container {
        max-width: 900px;
        width: calc(100% - 60px);
    }

    .ch-grid,
    .cf-top,
    .hs-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .cs-grid,
    .co-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .ch-h1 {
        font-size: 44px;
        margin-bottom: 18px;
    }

    .ch-sub {
        font-size: 17px;
        margin-bottom: 32px;
    }

    .ch-badge {
        padding: 6px 14px;
        margin-bottom: 20px;
    }

    .ch-right-card {
        padding: 18px 20px;
        gap: 14px;
        margin-bottom: 10px;
    }

    .ch-rc-value {
        font-size: 18px;
    }

    .cf-left-h2 {
        font-size: 36px;
        margin-bottom: 16px;
    }

    .cf-left-p {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .cf-promise-item {
        padding: 12px 14px;
        gap: 10px;
    }

    .cf-promise-txt {
        font-size: 15px;
    }

    .cf-form {
        padding: 32px 28px;
        gap: 18px;
    }

    .cf-form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cs-h2 {
        font-size: 36px;
        margin-bottom: 16px;
    }

    .cs-sub {
        font-size: 16px;
    }

    .cs-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cs-card {
        padding: 28px;
    }

    .cs-card-h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .cs-card-p {
        font-size: 15px;
        margin-bottom: 16px;
    }

    .co-h2 {
        font-size: 32px;
        margin-bottom: 14px;
    }

    .co-p {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .co-step {
        padding: 16px 18px;
        gap: 14px;
    }

    .co-step-txt {
        font-size: 16px;
    }

    .co-step-sub {
        font-size: 14px;
        margin-top: 6px;
    }

    .hs-h1 {
        font-size: 46px;
        margin-bottom: 20px;
    }

    .hs-sub {
        font-size: 16px;
        margin-bottom: 32px;
    }
}

/* 768px - Планшет портретный */
@media (max-width: 1024px) and (min-width: 768px) {
    .container {
        max-width: 700px;
        width: calc(100% - 48px);
    }

    .ch-wrap,
    .cf-wrap,
    .cs-wrap,
    .co-wrap,
    .hs-wrap {
        padding-left: 0;
        padding-right: 0;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .ch-wrap {
        padding-top: 88px;
    }

    .ch-grid,
    .cf-top,
    .cs-grid,
    .co-inner,
    .hs-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ch-grid {
        padding-top: 50px;
    }

    .ch-h1 {
        font-size: 36px;
        margin-bottom: 16px;
    }

    .ch-sub {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 28px;
    }

    .ch-btn {
        font-size: 15px;
        padding: 22px 38px;
    }

    .ch-badge-txt {
        font-size: 12px;
    }

    .ch-trust {
        gap: 20px;
    }

    .ch-trust-num {
        font-size: 28px;
    }

    .ch-trust-desc {
        font-size: 14px;
    }

    .ch-rc-icon {
        width: 42px;
        height: 42px;
    }

    .ch-rc-label {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .ch-rc-value {
        font-size: 16px;
    }

    .cf-left-h2 {
        font-size: 32px;
        margin-bottom: 14px;
        line-height: 1.4;
    }

    .cf-left-p {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .cf-left-label {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .cf-promise-item {
        padding: 11px 12px;
        gap: 10px;
    }

    .cf-promise-txt {
        font-size: 14px;
    }

    .cf-form {
        padding: 28px 24px;
        gap: 16px;
    }

    .cf-label {
        font-size: 12px;
    }

    .cf-input,
    .cf-select,
    .cf-textarea {
        padding: 12px 14px;
        font-size: 16px;
    }

    .cf-textarea {
        min-height: 100px;
    }

    .cf-submit {
        font-size: 14px;
        padding: 14px 32px;
    }

    .cs-h2 {
        font-size: 32px;
        margin-bottom: 14px;
    }

    .cs-sub {
        font-size: 15px;
    }

    .cs-label {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .cs-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cs-card {
        padding: 24px;
    }

    .cs-card-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 16px;
    }

    .cs-card-h3 {
        font-size: 17px;
        margin-bottom: 8px;
    }

    .cs-card-p {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .cs-card-tag {
        font-size: 12px;
        padding: 4px 8px;
    }

    .co-h2 {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .co-p {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .co-label {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .co-btn {
        font-size: 14px;
        padding: 14px 28px;
    }

    .co-step {
        padding: 14px 16px;
        gap: 12px;
        margin-bottom: 8px;
    }

    .co-step-txt {
        font-size: 15px;
    }

    .co-step-sub {
        font-size: 13px;
        margin-top: 4px;
        line-height: 1.4;
    }

    .hs-h1 {
        font-size: 38px;
        margin-bottom: 18px;
    }

    .hs-sub {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .hs-btns {
        gap: 12px;
        margin-bottom: 36px;
    }

    .hs-btn-primary,
    .hs-btn-secondary {
        font-size: 15px;
        padding: 22px 36px;
    }
}

/* 576px - Мобильные телефоны */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        width: calc(100% - 32px);
    }

    .ch-wrap,
    .cf-wrap,
    .cs-wrap,
    .co-wrap,
    .hs-wrap {
        padding-left: 0;
        padding-right: 0;
        padding-top: 48px;
        padding-bottom: 40px;
    }

    .ch-wrap {
        padding-top: 88px;
    }

    .ch-grid,
    .cf-top,
    .cs-grid,
    .co-inner,
    .hs-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ch-grid {
        padding-top: 50px;
    }

    h1 {
        font-size: clamp(28px, calc(2rem + 2vw), 40px);
    }

    h2 {
        font-size: clamp(24px, calc(1.75rem + 1.5vw), 36px);
    }

    h3 {
        font-size: clamp(20px, calc(1.5rem + 1vw), 28px);
    }

    .ch-h1 {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 14px;
    }

    .ch-h1 br {
        display: none;
    }

    .expertise__title br {
        display: none;
    }

    .ch-sub {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 24px;
    }

    .ch-btn {
        font-size: 14px;
        padding: 18px 32px;
        width: 100%;
        justify-content: center;
    }

    .ch-badge {
        padding: 5px 12px;
        margin-bottom: 18px;
    }

    .ch-badge-dot {
        width: 6px;
        height: 6px;
    }

    .ch-badge-txt {
        font-size: 11px;
        letter-spacing: .5px;
    }

    .ch-trust {
        gap: 16px;
        flex-direction: column;
    }

    .ch-trust-num {
        font-size: 24px;
    }

    .ch-trust-desc {
        font-size: 12px;
    }

    .ch-trust-sep {
        display: none;
    }

    .ch-right-card {
        padding: 16px 18px;
        gap: 12px;
        margin-bottom: 8px;
    }

    .ch-rc-icon {
        width: 38px;
        height: 38px;
    }

    .ch-rc-label {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .ch-rc-value {
        font-size: 14px;
    }

    .cf-left-h2 {
        font-size: 28px;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .cf-left-h2 br {
        display: none;
    }

    .cf-left-p {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .cf-left-label {
        font-size: 11px;
        margin-bottom: 14px;
    }

    .cf-promise {
        gap: 10px;
    }

    .cf-promise-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .cf-promise-txt {
        font-size: 13px;
        line-height: 1.4;
    }

    .cf-form {
        padding: 24px 20px;
        gap: 14px;
    }

    .cf-form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cf-label {
        font-size: 11px;
    }

    .cf-input,
    .cf-select,
    .cf-textarea {
        padding: 11px 12px;
        font-size: 16px;
        border-radius: 10px;
        line-height: 1.4;
    }

    .cf-textarea {
        min-height: 90px;
    }

    .cf-submit {
        font-size: 13px;
        padding: 13px 28px;
    }

    .cs-h2 {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .cs-sub {
        font-size: 14px;
    }

    .cs-header {
        margin: 0 auto 36px;
    }

    .cs-label {
        font-size: 11px;
        margin-bottom: 14px;
    }

    .cs-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cs-card {
        padding: 20px;
    }

    .cs-card-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }

    .cs-card-h3 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .cs-card-p {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .cs-card-tag {
        font-size: 11px;
        padding: 3px 6px;
    }

    .cs-card-btn {
        font-size: 12px;
        padding: 9px 18px;
    }

    .co-h2 {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .co-p {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .co-label {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .co-btn {
        font-size: 13px;
        padding: 13px 24px;
    }

    .co-right {
        gap: 10px;
    }

    .co-step {
        padding: 12px 14px;
        gap: 11px;
        margin-bottom: 6px;
        border-radius: 12px;
    }

    .co-step-num {
        font-size: 12px;
        min-width: 20px;
    }

    .co-step-icon {
        width: 32px;
        height: 32px;
    }

    .co-step-txt {
        font-size: 14px;
    }

    .co-step-sub {
        font-size: 12px;
        margin-top: 7px;
        line-height: 1.4;
    }

    .hs-h1 {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .hs-sub {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .hs-btns {
        gap: 10px;
        margin-bottom: 28px;
        flex-direction: column;
    }

    .hs-btn-primary,
    .hs-btn-secondary {
        font-size: 14px;
        padding: 18px 28px;
        width: 100%;
        justify-content: center;
    }

    .hs-btn-secondary {
        border-width: 1.5px;
    }

    .hs-trust-num {
        font-size: 22px;
    }

    .hs-trust-desc {
        font-size: 11px;
    }
}

/* Кнопка-ссылка с --radius: 40px */
.st-card-shop-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 12px;
    font-weight: 700;
    padding: 20px 20px;
    border-radius: var(--radius, 40px);
    text-decoration: none;
    margin-top: 14px;
    transition: background .2s, transform .15s;
}

.st-card-shop-link:hover {
    background: #b5e020;
    transform: translateY(-1px);
}

/* ============================================================
     АНИМАЦИЯ ПОЯВЛЕНИЯ
  ============================================================ */
@keyframes st-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.st-card {
    animation: st-in .5s ease both;
}

.st-grid .st-card:nth-child(1) {
    animation-delay: .05s;
}

.st-grid .st-card:nth-child(2) {
    animation-delay: .12s;
}

.st-grid .st-card:nth-child(3) {
    animation-delay: .19s;
}

.st-grid-bottom .st-card:nth-child(1) {
    animation-delay: .26s;
}

.st-grid-bottom .st-card:nth-child(2) {
    animation-delay: .33s;
}

.faq-wrap {
    background: var(--bg-page, #ffffff);
    padding: 70px 0px;
    position: relative;
    overflow: hidden;
}

.faq-inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
     ДВУХКОЛОНОЧНЫЙ ЛЭЙАУТ
     Левая: заголовок + CTA (sticky)
     Правая: список вопросов
  ============================================================ */
.faq-layout {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 80px;
    align-items: start;
}

/* ============================================================
     ЛЕВАЯ КОЛОНКА
  ============================================================ */
.faq-left {
    position: sticky;
    top: 40px;
}

.faq-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dark, #161a1b);
    background: var(--lemon, #C8F135);
    padding: 5px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.faq-h2 {
    color: var(--color-black, #00272b);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 18px;
}

.faq-h2 em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
    position: relative;
}

.faq-h2 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: var(--lemon, #C8F135);
    border-radius: 2px;
}

.faq-desc {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
    margin-bottom: 30px;
}

/* CTA-кнопка */
.faq-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--dark, #161a1b);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 20px 35px;
    border-radius: var(--radius, 40px);
    text-decoration: none;
    transition: background .2s, transform .15s;
}

.faq-cta:hover {
    background: var(--color-black, #00272b);
    transform: translateY(-1px);
}

.faq-cta-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lemon, #C8F135);
    animation: faq-blink 1.5s ease-in-out infinite alternate;
}

@keyframes faq-blink {
    from {
        opacity: .3;
    }

    to {
        opacity: 1;
    }
}

/* Счётчик открытых вопросов */
.faq-counter {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.faq-counter-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-black, #00272b);
    letter-spacing: -1px;
    line-height: 1;
}

.faq-counter-num em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
}

.faq-counter-desc {
    font-size: 16px;
    color: var(--muted2, #9ca3af);
    margin-top: 4px;
}

/* ============================================================
     ПРАВАЯ КОЛОНКА — АККОРДЕОН
  ============================================================ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border-bottom: 1px solid var(--border, #e5e7eb);
    /* overflow: hidden; */
    animation: faq-in .5s ease both;
}

@keyframes faq-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.faq-item:nth-child(1) {
    animation-delay: .05s;
}

.faq-item:nth-child(2) {
    animation-delay: .12s;
}

.faq-item:nth-child(3) {
    animation-delay: .19s;
}

.faq-item:nth-child(4) {
    animation-delay: .26s;
}

.faq-item:nth-child(5) {
    animation-delay: .33s;
}

.faq-item:nth-child(6) {
    animation-delay: .40s;
}

/* Строка вопроса */
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 0;
    cursor: pointer;
    user-select: none;
    transition: color .2s;
}

.faq-q:hover .faq-q-text {
    color: var(--lemon-text, #4a7500);
}

.faq-q-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.faq-q-num {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #d1d5db;
    min-width: 24px;
    transition: color .3s;
}

.faq-q-text {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-black, #00272b);
    line-height: 1.3;
    transition: color .2s;
}

/* Иконка +/× */
.faq-q-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-soft-gray, #f8f9fa);
    border: 1.5px solid var(--border, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .25s, border-color .25s, transform .3s;
}

/* Открытое состояние */
.faq-item.open .faq-q-icon {
    background: var(--lemon, #C8F135);
    border-color: var(--lemon, #C8F135);
    transform: rotate(45deg);
}

.faq-item.open .faq-q-num {
    color: var(--lemon-text, #4a7500);
}

.faq-item.open .faq-q-text {
    color: var(--lemon-text, #4a7500);
}

/* Ответ — плавное раскрытие */
.faq-a {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease;
}

.faq-a-inner {
    padding: 0 0 26px 40px;
}

.faq-a-text {
    font-size: 16px;
    color: var(--muted, #6b7280);
    line-height: 1.8;
}

.faq-a-text strong {
    color: var(--color-black, #00272b);
    font-weight: 600;
}

.faq-a-text mark {
    background: rgba(200, 241, 53, 0.2);
    color: var(--lemon-text, #4a7500);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
    font-style: normal;
}

/* Теги-подсказки под ответом */
.faq-a-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.faq-a-tag {
    font-size: 14px;
    font-weight: 600;
    color: var(--lemon-text, #4a7500);
    background: rgba(200, 241, 53, 0.12);
    border: 1px solid rgba(200, 241, 53, 0.25);
    border-radius: 100px;
    padding: 5px 12px;
}

.notfound-wrap {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notfound-code {
    font-size: 160px;
    font-weight: 700;
    line-height: 1;
    color: #C8F135;
    margin-bottom: 24px;
    letter-spacing: -8px;
}

.cta-wrap {
    background: var(--dark, #161a1b);
    padding: 70px 0px;
    
    position: relative;
    overflow: hidden;
}

/* --- Фоновая сетка --- */
.cta-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .03;
}

.cta-grid-lines svg {
    width: 100%;
    height: 100%;
}

/* --- Анимированные светящиеся сферы --- */
.cta-orb-1 {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.07);
    top: -200px;
    left: -150px;
    pointer-events: none;
    animation: cta-orb 8s ease-in-out infinite alternate;
}

.cta-orb-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.05);
    bottom: -150px;
    right: -100px;
    pointer-events: none;
    animation: cta-orb 10s ease-in-out infinite alternate-reverse;
}

@keyframes cta-orb {
    from {
        transform: scale(0.9) translate(-20px, 10px);
    }

    to {
        transform: scale(1.1) translate(20px, -10px);
    }
}

/* --- Плавающие бейджи (декор) --- */
.cta-floating-badge {
    position: absolute;
    top: 40px;
    right: 60px;
    background: rgba(200, 241, 53, 0.06);
    border: 1.5px solid rgba(200, 241, 53, 0.15);
    border-radius: 16px;
    padding: 16px 20px;
    text-align: center;
    animation: cta-float1 5s ease-in-out infinite alternate;
}

@keyframes cta-float1 {
    from {
        transform: translateY(0) rotate(-1deg);
    }

    to {
        transform: translateY(-12px) rotate(1deg);
    }
}

.cta-fb-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--lemon, #C8F135);
    line-height: 1;
}

.cta-fb-txt {
    font-size: 14px;
    color: var(--muted, #6b7280);
    margin-top: 4px;
    letter-spacing: .3px;
}

.cta-floating-badge2 {
    position: absolute;
    bottom: 140px;
    left: 40px;
    background: rgba(200, 241, 53, 0.06);
    border: 1.5px solid rgba(200, 241, 53, 0.15);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: cta-float2 6s ease-in-out infinite alternate;
}

@keyframes cta-float2 {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(10px);
    }
}

.cta-fb2-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lemon, #C8F135);
    flex-shrink: 0;
    animation: cta-pulse 1.5s ease-in-out infinite;
}

@keyframes cta-pulse {

    0%,
    100% {
        opacity: .4;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.cta-fb2-txt {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.cta-fb2-sub {
    font-size: 12px;
    color: var(--muted, #6b7280);
    margin-top: 2px;
}

/* ============================================================
     КОНТЕНТ
  ============================================================ */
.cta-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Надзаголовок */
.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}

.cta-eyebrow-line {
    width: 32px;
    height: 1px;
    background: rgba(200, 241, 53, 0.4);
}

.cta-eyebrow-txt {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(200, 241, 53, 0.7);
}

/* Главный заголовок */
.cta-h2 {
    color: #fff;
    line-height: 1.06;
    letter-spacing: -2px;
    margin-bottom: 24px;
}

.cta-h2 em {
    color: var(--lemon, #C8F135);
    font-style: normal;
    position: relative;
}

.cta-h2 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    background: var(--lemon, #C8F135);
    border-radius: 2px;
    opacity: .5;
}

/* Подзаголовок */
.cta-sub {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
    max-width: 730px;
    margin: 0 auto 48px;
}

.cta-sub strong {
    color: var(--muted2, #9ca3af);
    font-weight: 500;
}

/* ============================================================
     КНОПКИ (--radius: 40px)
  ============================================================ */
.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

/* Главная CTA */
.cta-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 16px;
    font-weight: bold;
    padding: 20px 44px;
    border-radius: var(--radius, 40px);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .2s, box-shadow .2s;
}

.cta-btn-main:hover {
    background: #d4f54a;
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(200, 241, 53, 0.3);
}

.cta-btn-main:active {
    transform: translateY(-1px);
}

.cta-btn-main-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(22, 26, 27, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Вторичная (телефон) */
.cta-btn-sec {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 19px 36px;
    border-radius: var(--radius, 40px);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    text-decoration: none;
    transition: border-color .2s, color .2s, transform .2s;
}

.cta-btn-sec:hover {
    border-color: rgba(200, 241, 53, 0.4);
    color: var(--lemon, #C8F135);
    transform: translateY(-2px);
}

/* ============================================================
     СТРОКА ДОВЕРИЯ
  ============================================================ */
.cta-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.cta-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cta-trust-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.12);
    border: 1px solid rgba(200, 241, 53, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cta-trust-txt {
    font-size: 16px;
    color: var(--muted, #6b7280);
}

.cta-trust-txt strong {
    color: var(--muted2, #9ca3af);
    font-weight: 500;
}

.cta-trust-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
     БЕГУЩАЯ СТРОКА (SEO-ключи)
  ============================================================ */
.cta-ticker {
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.cta-ticker-track {
    display: flex;
    gap: 48px;
    animation: cta-ticker 28s linear infinite;
    width: max-content;
}

.cta-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes cta-ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.cta-ticker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cta-ticker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lemon, #C8F135);
    opacity: .5;
    flex-shrink: 0;
}

.cta-ticker-txt {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.18);
    letter-spacing: .5px;
}

.cta-ticker-txt em {
    color: rgba(200, 241, 53, 0.45);
    font-style: normal;
}

.he-feats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 36px;
}

.he-feat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.he-feat-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(200, 241, 53, 0.15);
    border: 1px solid rgba(200, 241, 53, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.he-feat-txt {
    font-size: 16px;
    color: var(--color-gunmetal, #343c42);
    font-weight: 500;
}

.he-feat-txt em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
    font-weight: 600;
}

.ep-wrap {
    background: var(--bg-page, #ffffff);
    padding: 70px 0px;
    position: relative;
    overflow: hidden;
}

.ep-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .015;
}

.ep-noise svg {
    width: 100%;
    height: 100%;
}

.ep-inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
     ШАПКА
  ============================================================ */
.ep-header {
    text-align: center;
    margin: 0 auto 50px;
}

.ep-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff4f4;
    border: 1.5px solid #fecaca;
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 20px;
}

.ep-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    animation: ep-blink 1.4s ease-in-out infinite alternate;
}

@keyframes ep-blink {
    from {
        opacity: .3;
    }

    to {
        opacity: 1;
    }
}

.ep-tag-txt {
    font-size: 14px;
    font-weight: 700;
    color: #dc2626;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ep-h2 {
    color: var(--color-black, #00272b);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.ep-h2 em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
    position: relative;
}

.ep-h2 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: var(--lemon, #C8F135);
    border-radius: 2px;
}

.ep-sub {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
}

.ep-sub strong {
    color: var(--color-black, #00272b);
    font-weight: 600;
}

/* ============================================================
     ОСНОВНАЯ СЕТКА: боли + воронка
  ============================================================ */
.ep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

/* Карточка болей */
.ep-pains-card {
    background: var(--color-soft-gray, #f8f9fa);
    border-radius: 20px;
    padding: 36px;
    border: 1.5px solid var(--border, #e5e7eb);
}

.ep-pains-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #dc2626;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ep-pains-label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
}

.ep-pains-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Строка боли */
.ep-pain-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
    cursor: default;
    transition: background .2s;
}

.ep-pain-item:last-child {
    border-bottom: none;
}

.ep-pain-item:hover .ep-pain-icon-wrap {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .3);
}

.ep-pain-item:hover .ep-pain-text {
    color: var(--color-black, #00272b);
}

.ep-pain-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(239, 68, 68, .07);
    border: 1.5px solid rgba(239, 68, 68, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .3s, border-color .3s;
}

.ep-pain-content {
    flex: 1;
}

.ep-pain-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-gunmetal, #343c42);
    line-height: 1.3;
    margin-bottom: 4px;
    transition: color .2s;
}

.ep-pain-desc {
    font-size: 16px;
    color: var(--muted2, #9ca3af);
    line-height: 1.5;
}

.ep-pain-stat {
    font-size: 14px;
    font-weight: bold;
    color: #ef4444;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 100px;
    padding: 5px 12px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

/* ============================================================
     ПРАВАЯ КОЛОНКА — воронка продаж
  ============================================================ */
.ep-right {
    display: flex;
    flex-direction: column;
}

.ep-funnel {
    background: var(--color-soft-gray, #f8f9fa);
    border-radius: 20px;
    padding: 28px 24px;
    border: 1.5px solid var(--border, #e5e7eb);
    flex: 1;
}

.ep-funnel-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black, #00272b);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ep-funnel-title-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.ep-funnel-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ep-funnel-step {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ep-funnel-bar-wrap {
    flex: 1;
    height: 32px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--border, #e5e7eb);
    overflow: hidden;
    position: relative;
}

/* Анимированная полоса — ширина задаётся JS через data-w */
.ep-funnel-bar {
    height: 100%;
    border-radius: 8px;
    transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
    width: 0%;
}

.ep-funnel-bar.bad {
    background: linear-gradient(90deg, #fee2e2, #fca5a5);
}

.ep-funnel-bar.ok {
    background: linear-gradient(90deg, #fef9c3, #fde047);
}

.ep-funnel-bar-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.ep-funnel-pct {
    font-size: 14px;
    font-weight: 700;
    color: #ef4444;
    min-width: 36px;
    text-align: right;
}

.ep-funnel-note {
    margin-top: 16px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--border, #e5e7eb);
    font-size: 16px;
    color: var(--muted, #6b7280);
    line-height: 1.5;
}

.ep-funnel-note strong {
    color: #ef4444;
}

/* ============================================================
     ТЁМНЫЙ БЛОК РЕШЕНИЯ
  ============================================================ */
.ep-solution {
    background: var(--dark, #161a1b);
    border-radius: 20px;
    padding: 44px 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.ep-sol-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(200, 241, 53, .07);
    top: -120px;
    right: -80px;
    pointer-events: none;
}

.ep-sol-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(200, 241, 53, .5);
    margin-bottom: 16px;
}

.ep-sol-h3 {
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.5px;
    margin-bottom: 14px;
}

.ep-sol-h3 em {
    color: var(--lemon, #C8F135);
    font-style: normal;
}

.ep-sol-p {
    font-size: 18px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
}

.ep-sol-p strong {
    color: var(--muted2, #9ca3af);
    font-weight: 500;
}

.ep-sol-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ep-sol-check {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 13px 16px;
    transition: border-color .3s, background .3s;
}

.ep-sol-check:hover {
    border-color: rgba(200, 241, 53, .25);
    background: rgba(200, 241, 53, .04);
}

.ep-sol-check-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(200, 241, 53, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ep-sol-check-txt {
    font-size: 16px;
    color: #d1d5db;
    font-weight: 500;
}

.ep-sol-check-txt em {
    color: var(--lemon, #C8F135);
    font-style: normal;
    font-weight: 600;
}

.ef-wrap {
    background: var(--dark, #161a1b);
    padding: 96px 40px;
    
    position: relative;
    overflow: hidden;
}

.ef-glow-l {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(200, 241, 53, .05);
    top: -150px;
    left: -150px;
    pointer-events: none;
}

.ef-glow-r {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(200, 241, 53, .04);
    bottom: -100px;
    right: -100px;
    pointer-events: none;
}

.ef-inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
     ШАПКА
  ============================================================ */
.ef-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
    margin-bottom: 56px;
}

.ef-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dark, #161a1b);
    background: var(--lemon, #C8F135);
    padding: 5px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.ef-h2 {
    color: #fff;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.ef-h2 em {
    color: var(--lemon, #C8F135);
    font-style: normal;
}

.ef-header-right {
    text-align: right;
    flex-shrink: 0;
}

.ef-count {
    font-size: 64px;
    font-weight: 800;
    color: rgba(200, 241, 53, .12);
    line-height: 1;
    letter-spacing: -2px;
}

.ef-count-label {
    font-size: 16px;
    color: var(--muted, #6b7280);
    margin-top: 4px;
}

/* ============================================================
     СЕТКИ КАРТОЧЕК
  ============================================================ */
.ef-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}

.ef-grid-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

/* ============================================================
     КАРТОЧКА
  ============================================================ */
.ef-card {
    background: rgba(255, 255, 255, .03);
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    transition: background .3s;
    cursor: default;
}

.ef-card:hover {
    background: rgba(200, 241, 53, .06);
}

.ef-card:hover .ef-card-icon-bg {
    background: rgba(200, 241, 53, .18);
    border-color: rgba(200, 241, 53, .4);
}

.ef-card:hover .ef-card-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

.ef-card:hover .ef-card-num {
    color: rgba(200, 241, 53, .6);
}

/* Скругления угловых карточек */
.ef-grid>.ef-card:first-child {
    border-radius: 20px 0 0 0;
}

.ef-grid>.ef-card:last-child {
    border-radius: 0 20px 0 0;
}

.ef-grid-bottom>.ef-card:first-child {
    border-radius: 0 0 0 20px;
}

.ef-grid-bottom>.ef-card:last-child {
    border-radius: 0 0 20px 0;
}

.ef-card-num {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .15);
    text-transform: uppercase;
    margin-bottom: 18px;
    transition: color .3s;
}

.ef-card-icon-bg {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: background .3s, border-color .3s;
}

.ef-card-h {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.25;
}

.ef-card-p {
    font-size: 15px;
    color: var(--muted, #6b7280);
    line-height: 1.65;
}

.ef-card-p strong {
    color: var(--muted2, #9ca3af);
    font-weight: 500;
}

.ef-card-tag {
    display: inline-block;
    font-weight: 600;
    color: var(--lemon, #C8F135);
    background: rgba(200, 241, 53, .08);
    border: 1px solid rgba(200, 241, 53, .2);
    border-radius: 100px;
    margin-top: 10px;
    padding: 5px 12px;
    font-size: 14px;
}

.ef-card-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    opacity: 0;
    transform: translate(4px, -4px);
    transition: opacity .25s, transform .25s;
}

/* Разделители между карточками */
.ef-sep-v {
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: rgba(255, 255, 255, .05);
}

.ef-sep-h {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(255, 255, 255, .05);
}

.ef-grid>.ef-card:last-child .ef-sep-v,
.ef-grid-bottom>.ef-card:last-child .ef-sep-v {
    display: none;
}

/* ============================================================
     АНИМАЦИЯ ПОЯВЛЕНИЯ
  ============================================================ */
@keyframes ef-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ef-card {
    animation: ef-in .5s ease both;
}

.ef-grid>.ef-card:nth-child(1) {
    animation-delay: .04s;
}

.ef-grid>.ef-card:nth-child(2) {
    animation-delay: .10s;
}

.ef-grid>.ef-card:nth-child(3) {
    animation-delay: .16s;
}

.ef-grid>.ef-card:nth-child(4) {
    animation-delay: .22s;
}

.ef-grid-bottom>.ef-card:nth-child(1) {
    animation-delay: .28s;
}

.ef-grid-bottom>.ef-card:nth-child(2) {
    animation-delay: .34s;
}

.ef-grid-bottom>.ef-card:nth-child(3) {
    animation-delay: .40s;
}

.ef-grid-bottom>.ef-card:nth-child(4) {
    animation-delay: .46s;
}

.pr-wrap {
    background: var(--bg-page, #ffffff);
    padding: 70px 0px;
    position: relative;
    overflow: hidden;
}

/* Декоративные круги */
.pr-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.pr-bg-circle-1 {
    width: 600px;
    height: 600px;
    background: rgba(200, 241, 53, .06);
    top: -200px;
    right: -150px;
}

.pr-bg-circle-2 {
    width: 400px;
    height: 400px;
    background: rgba(200, 241, 53, .04);
    bottom: -100px;
    left: -100px;
}

.pr-inner {
    position: relative;
    z-index: 2;
}

/* ============================================================
     ШАПКА
  ============================================================ */
.pr-header {
    text-align: center;
    margin: 0 auto 50px;
    max-width: 700px;
    width: 100%;
}

.pr-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dark, #161a1b);
    background: var(--lemon, #C8F135);
    padding: 5px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.pr-h2 {
    color: var(--color-black, #00272b);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.pr-h2 em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
    position: relative;
}

.pr-h2 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: var(--lemon, #C8F135);
    border-radius: 2px;
}

.pr-sub {
    font-size: 16px;
    color: var(--muted, #6b7280);
    line-height: 1.7;
}

/* ============================================================
     ТАРИФНЫЕ КАРТОЧКИ
  ============================================================ */
.pr-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}

.pr-card {
    background: var(--color-soft-gray, #f8f9fa);
    border-radius: 20px;
    padding: 36px 32px;
    border: 1.5px solid var(--border, #e5e7eb);
    position: relative;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s, transform .25s;
    animation: pr-in .5s ease both;
}

.pr-card:hover {
    border-color: rgba(200, 241, 53, .5);
    box-shadow: 0 8px 40px rgba(200, 241, 53, .12);
    transform: translateY(-4px);
}

@keyframes pr-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.pr-card:nth-child(1) {
    animation-delay: .05s;
}

.pr-card:nth-child(2) {
    animation-delay: .15s;
}

.pr-card:nth-child(3) {
    animation-delay: .25s;
}

/* Тёмная (популярная) карточка */
.pr-card.featured {
    background: var(--dark, #161a1b);
    border-color: rgba(200, 241, 53, .3);
}

.pr-card.featured:hover {
    border-color: var(--lemon, #C8F135);
    box-shadow: 0 12px 48px rgba(200, 241, 53, .2);
}

.pr-card.featured .pr-card-name {
    color: #fff;
}

.pr-card.featured .pr-card-desc {
    color: var(--muted, #6b7280);
}

.pr-card.featured .pr-card-price-num {
    color: var(--lemon, #C8F135);
}

.pr-card.featured .pr-card-price-from {
    color: var(--muted, #6b7280);
}

.pr-card.featured .pr-card-price-range {
    color: var(--muted, #6b7280);
}

.pr-card.featured .pr-card-divider {
    background: rgba(255, 255, 255, .08);
}

.pr-card.featured .pr-feat-txt {
    color: #d1d5db;
}

.pr-card.featured .pr-feat-icon {
    background: rgba(200, 241, 53, .10);
    border-color: rgba(200, 241, 53, .2);
}

.pr-card.featured .pr-card-note {
    color: var(--muted, #6b7280);
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06);
}

.pr-card.featured .pr-card-tier {
    color: rgba(200, 241, 53, .5);
}

/* Бейдж "Популярный" */
.pr-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
}

/* Контент карточки */
.pr-card-tier {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted2, #9ca3af);
    margin-bottom: 12px;
}

.pr-card-name {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-black, #00272b);
    margin-bottom: 8px;
    line-height: 1.2;
}

.pr-card-desc {
    font-size: 16px;
    color: var(--muted, #6b7280);
    line-height: 1.6;
    margin-bottom: 24px;
    font-weight: 500;
}

.pr-card-price {
    margin-bottom: 24px;
}

.pr-card-price-from {
    font-size: 16px;
    color: var(--muted2, #9ca3af);
    margin-bottom: 4px;
}

.pr-card-price-num {
    font-size: 42px;
    font-weight: 800;
    color: var(--color-black, #00272b);
    letter-spacing: -1px;
    line-height: 1;
}

.pr-card-price-num em {
    font-style: normal;
    font-size: 22px;
    font-weight: 600;
    margin-left: 2px;
}

.pr-card-price-range {
    font-size: 15px;
    color: var(--muted, #6b7280);
    margin-top: 4px;
}

.pr-card-divider {
    height: 1px;
    background: var(--border, #e5e7eb);
    margin: 0 0 24px;
}

/* Список фич */
.pr-feats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.pr-feat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pr-feat-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(200, 241, 53, .12);
    border: 1px solid rgba(200, 241, 53, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pr-feat-txt {
    font-size: 15px;
    color: var(--color-gunmetal, #343c42);
    font-weight: 500;
    line-height: 1.3;
}

/* Кнопки (--radius: 40px) */
.pr-card-btn {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 24px;
    border-radius: var(--radius, 40px);
    text-decoration: none;
    transition: background .2s, transform .15s, box-shadow .2s;
}

.pr-card-btn.primary {
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
}

.pr-card-btn.primary:hover {
    background: #b5e020;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(200, 241, 53, .35);
}

.pr-card-btn.outline {
    background: transparent;
    color: var(--color-black, #00272b);
    border: 2px solid var(--border, #e5e7eb);
}

.pr-card-btn.outline:hover {
    border-color: var(--lemon, #C8F135);
    color: var(--lemon-text, #4a7500);
    transform: translateY(-1px);
}

.pr-card-btn.outline-light {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .15);
}

.pr-card-btn.outline-light:hover {
    border-color: rgba(200, 241, 53, .4);
    color: var(--lemon, #C8F135);
    transform: translateY(-1px);
}

/* Заметка под кнопкой */
.pr-card-note {
    margin-top: 14px;
    font-size: 14px;
    color: var(--muted2, #9ca3af);
    text-align: center;
    background: var(--color-alabaster, #f2f3f4);
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border, #e5e7eb);
    font-weight: 500;
}

/* ============================================================
     НИЖНИЕ ДВА ИНФО-БЛОКА
  ============================================================ */
.pr-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pr-info-card {
    background: var(--color-soft-gray, #f8f9fa);
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: border-color .3s;
}

.pr-info-card:hover {
    border-color: rgba(200, 241, 53, .4);
}

.pr-info-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(200, 241, 53, .12);
    border: 1.5px solid rgba(200, 241, 53, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pr-info-h {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black, #00272b);
    margin-bottom: 6px;
}

.pr-info-p {
    font-size: 15px;
    color: var(--muted, #6b7280);
    line-height: 1.65;
}

.pr-info-p strong {
    color: var(--color-black, #00272b);
    font-weight: 600;
}

.pr-info-p mark {
    background: rgba(200, 241, 53, .15);
    color: var(--lemon-text, #4a7500);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
    font-style: normal;
}

.detail-news-related-empty {
    font-size: 14px;;
}

/* ============================================================
   СТРАНИЦА ПОРТФОЛИО
   Компактная и красивая сетка портфолио
============================================================ */
.portfolio-wrap {
    background: var(--bg-page, #ffffff);
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
}

.portfolio-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.portfolio-bg-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.06);
    transform: translate(-50%, -50%);
    animation: portfolio-sh 4s ease-in-out infinite alternate;
}

@keyframes portfolio-sh {
    from {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: .2;
    }

    to {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: .5;
    }
}

/* ============================================================
   Hero секция портфолио
============================================================ */
.portfolio-hero {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    padding-bottom: 40px;
    text-align: center;
}

.portfolio-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(200, 241, 53, .15);
    border: 1.5px solid rgba(200, 241, 53, .45);
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 24px;
}

.portfolio-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lemon, #C8F135);
    animation: portfolio-blink 1.5s ease-in-out infinite alternate;
}

@keyframes portfolio-blink {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

.portfolio-badge-txt {
    font-size: 12px;
    font-weight: 700;
    color: var(--lemon-text, #4a7500);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.portfolio-h1 {
    font-size: 42px;
    font-weight: 800;
    color: var(--color-black, #00272b);
    line-height: 1.15;
    letter-spacing: -1.2px;
    margin-bottom: 12px;
}

.portfolio-h1 em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
    position: relative;
}

.portfolio-h1 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--lemon, #C8F135);
    border-radius: 2px;
}

.portfolio-sub {
    font-size: 15px;
    color: var(--muted, #6b7280);
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-sub strong {
    color: var(--color-black, #00272b);
    font-weight: 600;
}

/* ============================================================
   Фильтрация категорий
============================================================ */
.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 50px;
    justify-content: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 5;
}

.portfolio-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 100px;
    border: 1.5px solid var(--border, #e5e7eb);
    background: transparent;
    color: var(--color-black, #00272b);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.portfolio-filter-btn:hover {
    border-color: var(--lemon, #C8F135);
    color: var(--lemon-text, #4a7500);
}

.portfolio-filter-btn.active {
    border-color: var(--lemon, #C8F135);
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
}

/* ============================================================
   Масонри сетка портфолио
============================================================ */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 60px;
    animation: portfolio-fade-in .6s ease-out;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 5;
}

@keyframes portfolio-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.portfolio-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    transition: all .35s cubic-bezier(0.25, 1, 0.5, 1);
    animation: portfolio-card-in .5s ease-out both;
}

@keyframes portfolio-card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portfolio-card:nth-child(1) { animation-delay: .05s; }
.portfolio-card:nth-child(2) { animation-delay: .08s; }
.portfolio-card:nth-child(3) { animation-delay: .11s; }
.portfolio-card:nth-child(4) { animation-delay: .14s; }
.portfolio-card:nth-child(n+5) { animation-delay: .17s; }

.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .15);
}

/* Карточки с разными размерами для интересного лайаута */
.portfolio-card-large {
    grid-column: span 2;
    grid-row: span 2;
}

.portfolio-card-img-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e5e7eb 100%);
}

.portfolio-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolio-card:hover .portfolio-card-img {
    transform: scale(1.1);
}

.portfolio-card-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(125% 125% at 50% 10%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .6) 100%);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 2;
}

.portfolio-card:hover .portfolio-card-overlay {
    opacity: 1;
}

.portfolio-card-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    z-index: 3;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 70%, rgba(0,0,0,.4) 100%);
}

.portfolio-card-category {
    display: inline-flex;
    width: fit-content;
    font-size: 10px;
    font-weight: 700;
    color: var(--lemon, #C8F135);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: all .35s ease;
}

.portfolio-card:hover .portfolio-card-category {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    transition: color .35s ease;
}

.portfolio-card:hover .portfolio-card-title {
    color: var(--lemon, #C8F135);
}

/* ============================================================
   Модальное окно деталей проекта
============================================================ */
.portfolio-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 100;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: portfolio-modal-fade-in .3s ease-out;
}

@keyframes portfolio-modal-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.portfolio-modal.active {
    display: flex;
}

.portfolio-modal-content {
    background: white;
    border-radius: 24px;
    max-width: 900px;
    width: calc(100% - 40px);
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: portfolio-modal-slide-up .4s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes portfolio-modal-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.portfolio-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .05);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    z-index: 10;
}

.portfolio-modal-close:hover {
    background: rgba(0, 0, 0, .1);
    transform: rotate(90deg);
}

.portfolio-modal-img {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: cover;
    border-radius: 24px 24px 0 0;
}

.portfolio-modal-body {
    padding: 40px;
}

.portfolio-modal-category {
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    color: var(--lemon-text, #4a7500);
    background: rgba(200, 241, 53, .1);
    border: 1px solid rgba(200, 241, 53, .2);
    border-radius: 100px;
    padding: 6px 14px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.portfolio-modal-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-black, #00272b);
    margin-bottom: 16px;
    line-height: 1.1;
    letter-spacing: -1px;
}

.portfolio-modal-meta {
    display: flex;
    gap: 40px;
    margin: 24px 0;
    padding: 24px 0;
    border-top: 1px solid var(--border, #e5e7eb);
    border-bottom: 1px solid var(--border, #e5e7eb);
    flex-wrap: wrap;
}

.portfolio-modal-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.portfolio-modal-meta-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted2, #9ca3af);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.portfolio-modal-meta-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black, #00272b);
}

.portfolio-modal-desc {
    font-size: 15px;
    color: var(--muted, #6b7280);
    line-height: 1.8;
    margin-bottom: 24px;
}

.portfolio-modal-desc strong {
    color: var(--color-black, #00272b);
    font-weight: 600;
}

.portfolio-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.portfolio-modal-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-soft-gray, #f8f9fa);
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--color-black, #00272b);
    font-weight: 500;
}

.portfolio-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 15px;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: var(--radius, 40px);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s ease;
}

.portfolio-modal-btn:hover {
    background: #b5e020;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 241, 53, .35);
}

/* ============================================================
   CTA Секция
============================================================ */
.portfolio-cta {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 24px;
    position: relative;
}

.portfolio-cta-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dark, #161a1b);
    background: var(--lemon, #C8F135);
    padding: 5px 16px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.portfolio-cta-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-black, #00272b);
    line-height: 1.2;
    letter-spacing: -1.2px;
    margin-bottom: 14px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-cta-title em {
    color: var(--lemon-text, #4a7500);
    font-style: normal;
}

.portfolio-cta-text {
    font-size: 15px;
    color: var(--muted, #6b7280);
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 15px;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: var(--radius, 40px);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s ease;
}

.portfolio-cta-btn:hover {
    background: #b5e020;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 241, 53, .35);
}

/* ============================================================
   КАРТОЧКИ ПОРТФОЛИО — стрелка перехода
============================================================ */
.portfolio-card-arrow {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--lemon, #C8F135);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-6px) rotate(-45deg);
    transition: all .3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 4;
}
.portfolio-card:hover .portfolio-card-arrow {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}
.portfolio-card-arrow svg {
    color: var(--dark, #161a1b);
}

/* ============================================================
   СТРАНИЦА ПРОЕКТА (portfolio-item)
============================================================ */
.pi-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--lemon, #C8F135);
    z-index: 9999;
    width: 0%;
    transition: width .08s linear;
    box-shadow: 0 0 10px rgba(200,241,53,.7);
    pointer-events: none;
}

.pi-wrap {
    background: var(--bg-page, #ffffff);
    min-height: 100vh;
}

.pi-breadcrumb {
    padding: 18px 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
    position: relative;
    z-index: 10;
}
.pi-breadcrumb-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.pi-bc-link {
    color: var(--muted, #6b7280);
    text-decoration: none;
    transition: color .2s;
    font-weight: 500;
}
.pi-bc-link:hover { color: var(--lemon-text, #4a7500); }
.pi-bc-sep {
    color: var(--border, #e5e7eb);
    font-size: 12px;
}
.pi-bc-current {
    color: var(--color-black, #00272b);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

/* Hero */
.pi-hero {
    position: relative;
    height: 62vh;
    min-height: 420px;
    max-height: 680px;
    overflow: hidden;
    background: var(--dark, #161a1b);
}
.pi-hero-img-wrap {
    position: absolute;
    inset: -15% 0;
    overflow: hidden;
}
.pi-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    transition: transform .05s linear;
}
.pi-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.88) 100%);
}
.pi-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 40px;
}
.pi-hero-content-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.pi-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(200,241,53,.15);
    border: 1.5px solid rgba(200,241,53,.4);
    border-radius: 100px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--lemon, #C8F135);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 14px;
    animation: pi-fadeup .6s ease-out both;
}
@keyframes pi-fadeup {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}
.pi-hero-title {
    font-size: 52px;
    font-weight: 800;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -1.8px;
    max-width: 720px;
    animation: pi-fadeup .7s .1s ease-out both;
}

/* Container */
.pi-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Layout grid */
.pi-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 64px;
    padding: 64px 0;
    align-items: start;
}

/* Section titles */
.pi-section { margin-bottom: 52px; }
.pi-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--muted, #6b7280);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pi-section-title::before {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--lemon, #C8F135);
    flex-shrink: 0;
}

/* Description */
.pi-desc, .pi-desc p {
    font-size: 18px;
    color: var(--color-black, #00272b);
    line-height: 1.8;
    max-width: 660px;
    animation: pi-fadeup .8s .15s ease-out both;
}

/* Stats */
.pi-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border, #e5e7eb);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 52px;
    border: 1px solid var(--border, #e5e7eb);
}
.pi-stat-item {
    background: #fff;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    transition: background .2s;
}
.pi-stat-item:hover { background: rgba(200,241,53,.06); }
.pi-stat-icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 2px;
}
.pi-stat-num {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-black, #00272b);
    letter-spacing: -1.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pi-stat-suffix {
    font-size: 18px;
    font-weight: 700;
    color: var(--lemon-text, #4a7500);
}
.pi-stat-label {
    font-size: 11px;
    color: var(--muted, #6b7280);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* Tags */
.pi-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pi-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: #f8f9fa;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black, #00272b);
    cursor: default;
    transition: all .22s ease;
}
.pi-tag:hover {
    border-color: var(--lemon, #C8F135);
    background: rgba(200,241,53,.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(200,241,53,.2);
}
.pi-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lemon, #C8F135);
    flex-shrink: 0;
}

/* Sidebar info card */
.pi-sidebar { position: sticky; top: 100px; }
.pi-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #6b7280);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color .2s, gap .2s;
    width: fit-content;
}
.pi-back-btn:hover {
    color: var(--lemon-text, #4a7500);
    gap: 12px;
}
.pi-info-card {
    background: var(--dark, #161a1b);
    border-radius: 20px;
    padding: 28px;
    color: white;
    overflow: hidden;
    position: relative;
}
.pi-info-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,241,53,.12) 0%, transparent 70%);
    pointer-events: none;
}
.pi-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.pi-info-item:first-child { padding-top: 0; }
.pi-info-item:last-of-type { border-bottom: none; }
.pi-info-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(255,255,255,.35);
}
.pi-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: right;
}
.pi-visit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
    padding: 15px;
    background: var(--lemon, #C8F135);
    color: var(--dark, #161a1b);
    font-size: 14px;
    font-weight: 700;
    border-radius: 100px;
    text-decoration: none;
    transition: all .2s ease;
}
.pi-visit-btn:hover {
    background: #b5e020;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200,241,53,.4);
    color: var(--dark, #161a1b);
}

/* Related projects */
.pi-related {
    padding: 60px 0 80px;
    border-top: 1px solid var(--border, #e5e7eb);
}
.pi-related-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}
.pi-related-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-black, #00272b);
    letter-spacing: -.8px;
    white-space: nowrap;
}
.pi-related-line {
    flex: 1;
    height: 1px;
    background: var(--border, #e5e7eb);
}
.pi-related-all {
    font-size: 13px;
    font-weight: 600;
    color: var(--lemon-text, #4a7500);
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap .2s;
}
.pi-related-all:hover { gap: 9px; }
.pi-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.pi-related-card {
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    background: var(--dark, #161a1b);
    transition: transform .3s ease, box-shadow .3s ease;
}
.pi-related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
}
.pi-related-img-wrap {
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
}
.pi-related-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    opacity: .8;
}
.pi-related-card:hover .pi-related-img {
    transform: scale(1.08);
    opacity: 1;
}
.pi-related-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 100%);
}
.pi-related-body {
    padding: 14px 18px 18px;
}
.pi-related-cat {
    font-size: 10px;
    font-weight: 700;
    color: var(--lemon, #C8F135);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 5px;
}
.pi-related-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 1024px) {
    .pi-layout { grid-template-columns: 1fr; gap: 40px; }
    .pi-sidebar { position: relative; top: 0; }
    .pi-related-grid { grid-template-columns: repeat(2, 1fr); }
    .pi-hero-title { font-size: 40px; }
}
@media (max-width: 768px) {
    .pi-hero { height: 55vh; min-height: 360px; }
    .pi-hero-title { font-size: 30px; letter-spacing: -.8px; }
    .pi-hero-content { padding: 32px 20px; }
    .pi-container { padding: 0 20px; }
    .pi-breadcrumb-inner { padding: 0 20px; }
    .pi-layout { padding: 40px 0; gap: 32px; }
    .pi-desc { font-size: 16px; }
    .pi-stat-num { font-size: 30px; }
    .pi-related-grid { grid-template-columns: repeat(2, 1fr); }
    .pi-related-title { font-size: 22px; }
}
@media (max-width: 520px) {
    .pi-stats { grid-template-columns: 1fr; }
    .pi-related-grid { grid-template-columns: 1fr; }
    .pi-hero-title { font-size: 26px; }
}

.lq-hero {
    position: relative;
    padding: 80px 0 120px;
    overflow: hidden;
}

.lq-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.lq-bg-shape {
    animation: float var(--d, 4s) ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-30px) translateX(15px); }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.lq-hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.lq-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(200, 241, 53, 0.1);
    border: 1px solid rgba(200, 241, 53, 0.3);
    border-radius: 32px;
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 500;
    color: #4a7500;
    animation: fadeInUp 0.8s ease-out;
}

.lq-hero-badge-dot {
    width: 8px;
    height: 8px;
    background: #C8F135;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.lq-hero-h1 {
    font-family: Montserrat, sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #00272b;
    animation: fadeInUp 0.9s ease-out 0.1s both;
}

.lq-hero-h1 em {
    color: #C8F135;
    font-style: normal;
    position: relative;
}

.lq-hero-h1 em::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #C8F135;
    opacity: 0.4;
}

.lq-hero-sub {
    font-size: 16px;
    line-height: 1.6;
    color: #6b7280;
    margin-bottom: 48px;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.lq-hero-stats {
    display: flex;
    gap: 40px;
    justify-content: center;
    animation: fadeInUp 1.1s ease-out 0.3s both;
}

.lq-hero-stat {
    text-align: center;
}

.lq-stat-value {
    font-family: Montserrat, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #C8F135;
    margin-bottom: 4px;
}

.lq-stat-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form Section */
.lq-form-wrap {
    position: relative;
    padding: 100px 0;
    background: #161a1b;
    overflow: hidden;
}

.lq-form-bg {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    z-index: 1;
    pointer-events: none;
}

.lq-form-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(200, 241, 53, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    top: 50%;
    right: -200px;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.lq-form-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.lq-form-left {
    padding-top: 20px;
}

.lq-form-label {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(200, 241, 53, 0.1);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #C8F135;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.lq-form-h2 {
    font-family: Montserrat, sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    color: white;
    margin-bottom: 20px;
}

.lq-form-h2 em {
    color: #C8F135;
    font-style: normal;
    position: relative;
}

.lq-form-h2 em::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #C8F135;
    opacity: 0.4;
}

.lq-form-desc {
    font-size: 15px;
    color: #d1d5db;
    line-height: 1.6;
    margin-bottom: 40px;
}

.lq-form-benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
    padding: 32px;
    background: rgba(200, 241, 53, 0.05);
    border: 1px solid rgba(200, 241, 53, 0.15);
    border-radius: 16px;
}

.lq-benefit-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lq-benefit-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.15);
}

.lq-benefit-icon svg {
    color: #C8F135;
}

.lq-benefit-text {
    font-size: 14px;
    color: #e5e7eb;
}

.lq-benefit-text em {
    color: #C8F135;
    font-style: normal;
    font-weight: 600;
}

.lq-example-section {
    margin-top: 40px;
}

.lq-example-label {
    font-size: 12px;
    font-weight: 600;
    color: #C8F135;
    text-transform: uppercase;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.lq-examples {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lq-example {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(200, 241, 53, 0.05);
    border: 1px solid rgba(200, 241, 53, 0.1);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.lq-example:hover {
    background: rgba(200, 241, 53, 0.1);
    border-color: rgba(200, 241, 53, 0.25);
    transform: translateX(4px);
}

.lq-example-dot {
    width: 6px;
    height: 6px;
    background: #C8F135;
    border-radius: 50%;
    flex-shrink: 0;
}

.lq-example-name {
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.lq-example-info {
    font-size: 12px;
    color: #9ca3af;
}

/* Form Styles */
.lq-form {
    background: #1f2022;
    border: 1px solid #2d3233;
    border-radius: 20px;
    padding: 40px;
}

.lq-form-section {
    margin-bottom: 36px;
}

.lq-form-section:last-of-type {
    margin-bottom: 0;
}

.lq-section-title {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #C8F135;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.lq-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.lq-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lq-label {
    font-size: 13px;
    font-weight: 600;
    color: #e5e7eb;
}

.lq-input,
.lq-select,
.lq-textarea {
    padding: 12px 16px;
    background: #161a1b;
    border: 1px solid #2d3233;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    transition: all 0.3s ease;
}

.lq-input::placeholder,
.lq-select::placeholder,
.lq-textarea::placeholder {
    color: #6b7280;
}

.lq-input:focus,
.lq-select:focus,
.lq-textarea:focus {
    outline: none;
    border-color: #C8F135;
    background: rgba(200, 241, 53, 0.05);
    box-shadow: 0 0 0 3px rgba(200, 241, 53, 0.1);
}

.lq-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.lq-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Radio Group */
.lq-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lq-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.lq-radio:hover {
    background: rgba(200, 241, 53, 0.05);
}

.lq-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #C8F135;
}

.lq-radio-label {
    font-size: 14px;
    color: #e5e7eb;
    cursor: pointer;
}

/* Checkbox Group */
.lq-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lq-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px;
    background: rgba(200, 241, 53, 0.02);
    border: 1px solid #2d3233;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.lq-checkbox:hover {
    background: rgba(200, 241, 53, 0.08);
    border-color: #C8F135;
}

.lq-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #C8F135;
}

.lq-checkbox-label {
    font-size: 14px;
    color: #e5e7eb;
    cursor: pointer;
    flex: 1;
}

.lq-form-bottom {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #2d3233;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lq-submit {
    padding: 14px 24px;
    background: #C8F135;
    color: #4a7500;
    border: none;
    border-radius: 10px;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lq-submit:hover {
    background: #b8e127;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(200, 241, 53, 0.3);
}

.lq-policy {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

.lq-policy a {
    color: #C8F135;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.lq-policy a:hover {
    opacity: 0.8;
}

/* Calculator */
.lq-calculator {
    background: linear-gradient(135deg, rgba(200, 241, 53, 0.1) 0%, rgba(200, 241, 53, 0.05) 100%);
    border: 1px solid rgba(200, 241, 53, 0.2);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 32px;
}

.lq-calc-header {
    background: rgba(200, 241, 53, 0.15);
    padding: 20px;
    border-bottom: 1px solid rgba(200, 241, 53, 0.2);
}

.lq-calc-title {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #C8F135;
    text-transform: uppercase;
}

.lq-calc-body {
    padding: 20px;
}

.lq-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
}

.lq-calc-label {
    color: #9ca3af;
}

.lq-calc-value {
    color: #e5e7eb;
    font-weight: 500;
}

.lq-calc-features {
    padding: 14px 0;
}

.lq-calc-divider {
    height: 1px;
    background: rgba(200, 241, 53, 0.15);
    margin: 16px 0;
}

.lq-calc-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: rgba(200, 241, 53, 0.1);
    border-radius: 10px;
    margin-bottom: 12px;
}

.lq-calc-total-label {
    font-weight: 600;
    color: #e5e7eb;
}

.lq-calc-total-value {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #C8F135;
}

.lq-calc-note {
    font-size: 12px;
    color: #9ca3af;
    padding: 10px;
    background: rgba(200, 241, 53, 0.05);
    border-radius: 8px;
    text-align: center;
}

/* Process Section */
.lq-process {
    padding: 100px 0;
    background: white;
}

.lq-process-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.lq-process-label {
    display: inline-block;
    padding: 8px 14px;
    background: rgba(200, 241, 53, 0.1);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #4a7500;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.lq-process-h2 {
    font-family: Montserrat, sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    color: #00272b;
    margin-bottom: 16px;
}

.lq-process-h2 em {
    color: #C8F135;
    font-style: normal;
    position: relative;
}

.lq-process-h2 em::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #C8F135;
    opacity: 0.4;
}

.lq-process-desc {
    font-size: 16px;
    color: #6b7280;
}

.lq-process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.lq-step {
    text-align: center;
    padding: 32px 20px;
    background: linear-gradient(135deg, rgba(200, 241, 53, 0.05) 0%, transparent 100%);
    border: 1px solid rgba(200, 241, 53, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.lq-step:hover {
    background: linear-gradient(135deg, rgba(200, 241, 53, 0.1) 0%, rgba(200, 241, 53, 0.05) 100%);
    border-color: rgba(200, 241, 53, 0.25);
    transform: translateY(-8px);
}

.lq-step-number {
    font-family: Montserrat, sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #C8F135;
    margin-bottom: 16px;
    opacity: 0.15;
}

.lq-step-title {
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #00272b;
    margin-bottom: 12px;
}

.lq-step-text {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
}

/* Final CTA */
.lq-final-cta {
    padding: 60px 0;
    background: #161a1b;
}

.lq-cta-box {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 40px;
    background: linear-gradient(135deg, rgba(200, 241, 53, 0.1) 0%, rgba(200, 241, 53, 0.05) 100%);
    border: 2px solid rgba(200, 241, 53, 0.2);
    border-radius: 20px;
}

.lq-cta-h2 {
    font-family: Montserrat, sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
}

.lq-cta-text {
    font-size: 15px;
    color: #d1d5db;
    margin-bottom: 32px;
    line-height: 1.6;
}

.lq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background: #C8F135;
    color: #4a7500;
    border: none;
    border-radius: 10px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lq-cta-btn:hover {
    background: #b8e127;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(200, 241, 53, 0.3);
}

pre {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(200, 241, 53, 0.1);
    border-radius: 12px;
    padding: 50px 20px 20px;
    overflow-x: auto;
    margin: 20px 0;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
}

pre::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 15px;
    width: 12px;
    height: 12px;
    background: #c8f135;
    border-radius: 50%;
    opacity: 0.3;
    box-shadow: 22px 0 0 rgba(200, 241, 53, 0.3), 44px 0 0 rgba(200, 241, 53, 0.3);
}

code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
}

pre code {
    background: none;
    border: none;
    color: #e2e8f0!important;
}

/* Синтаксис подсветка */
code .keyword {
    color: #f472b6;
}

code .string {
    color: #86efac;
}

code .comment {
    color: #64748b;
    font-style: italic;
}

code .function {
    color: #60a5fa;
}

code .variable {
    color: #c8f135;
}

code .tag {
    color: #f97316;
}

/* YouTube видео */
.video-embed-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 30px 0;
    border-radius: 12px;
    background: #000;
    overflow: hidden;
}

.video-embed-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* Картинки в статье */
.detail-news img:not(.detail-news-cover-img) {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 30px 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    display: block;
}

.detail-news figure {
    margin: 30px 0;
    text-align: center;
}

.detail-news figcaption {
    color: #6b7280;
    font-size: 14px;
    margin-top: 12px;
    font-style: italic;
}

/* CTA Modal Popup Styles */
.cta-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cta-modal.active {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 1;
    visibility: visible;
}

.cta-modal-glass {
    width: calc(100% - 40px);
    max-width: 500px;
    background: rgba(15, 18, 24, 0.85);
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
    padding: 40px;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cta-modal.active .cta-modal-glass {
    transform: scale(1) translateY(0);
}

.cta-modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    transition: 0.3s ease;
    padding: 0;
}

.cta-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.cta-modal-close:active {
    transform: scale(0.92);
}

.cta-modal-header {
    margin-bottom: 30px;
    text-align: center;
}

.cta-modal-header h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}

.cta-modal-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    margin: 0;
    line-height: 1.6;
}

.cta-form-wrapper {
    animation: slideIn 0.4s ease;
}

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

.cta-form-group {
    margin-bottom: 22px;
}

.cta-form-group label {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.cta-form-group input,
.cta-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.cta-form-group input::placeholder,
.cta-form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.cta-form-group input:focus,
.cta-form-group textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.cta-form-btn {
    width: 100%;
    padding: 14px 20px;
    background: var(--lemon, #C8F135);
    color: #4a7500;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    margin-top: 10px;
}

.cta-form-btn:hover {
    transform: translateY(-2px);
    background: #b5e020;
}

.cta-form-btn:active {
    transform: translateY(0);
}

.cta-success-wrapper {
    text-align: center;
    animation: slideIn 0.4s ease;
}

.cta-success-icon {
    color: #00D4FF;
    margin-bottom: 20px;
    animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes scaleUp {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.cta-success-wrapper h3 {
    color: #fff;
    font-size: 24px;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.cta-success-wrapper p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    margin: 0;
    line-height: 1.6;
}

/* =========================================================
   GLOBAL CONSULTATION MODAL — consult-modal
   Two-column: left info panel + right form
   Same dark glassmorphism style as cta-modal
   Trigger: openConsultModal() from any page/component
   ========================================================= */

.consult-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    padding: 20px;
    box-sizing: border-box;
}

.consult-modal.active {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 1;
    visibility: visible;
}

.consult-modal-box {
    width: 100%;
    max-width: 900px;
    background: rgba(15, 18, 24, 0.92);
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
    position: relative;
    transform: scale(0.92) translateY(24px);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.consult-modal.active .consult-modal-box {
    transform: scale(1) translateY(0);
}

.consult-modal-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    transition: 0.3s ease;
    z-index: 2;
    padding: 0;
}

.consult-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}

.consult-modal-close:active {
    transform: scale(0.92);
}

/* Two-column inner layout */
.consult-modal-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-y: auto;
    flex: 1;
}

/* ---- LEFT INFO PANEL ---- */
.consult-modal-left {
    padding: 52px 40px;
    background: linear-gradient(140deg, #161e0a 0%, rgba(200, 241, 53, 0.07) 55%, #0f1218 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.consult-modal-left::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 241, 53, 0.13) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
}

.consult-modal-left::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 241, 53, 0.07) 0%, transparent 70%);
    bottom: -60px;
    left: -60px;
    pointer-events: none;
}

.consult-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(200, 241, 53, 0.1);
    border: 1px solid rgba(200, 241, 53, 0.28);
    padding: 5px 13px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lemon, #C8F135);
    margin-bottom: 22px;
    width: fit-content;
    position: relative;
    z-index: 1;
}

.consult-modal-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lemon, #C8F135);
    animation: cmPulse 2s infinite;
    flex-shrink: 0;
}

@keyframes cmPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

.consult-modal-left h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 26px;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}

.consult-modal-list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    position: relative;
    z-index: 1;
}

.consult-modal-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 500;
}

.consult-modal-list-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(200, 241, 53, 0.12);
    border: 1px solid rgba(200, 241, 53, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.consult-modal-list-icon svg {
    display: block;
}

.consult-modal-mini-cta {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}

.consult-modal-mini-cta p {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    margin: 0 0 9px;
    line-height: 1.5;
}

.consult-modal-mini-cta a {
    color: var(--lemon, #C8F135);
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    letter-spacing: -0.3px;
    transition: opacity 0.2s;
}

.consult-modal-mini-cta a:hover {
    opacity: 0.8;
}

/* ---- RIGHT FORM PANEL ---- */
.consult-modal-right {
    padding: 52px 44px;
    overflow-y: auto;
}

.consult-modal-right > h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.4px;
    padding-right: 52px;
}

.consult-modal-right > p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin: 0 0 26px;
    line-height: 1.55;
}

/* Reuse .cta-form-group, .cta-form-group label, input, textarea from existing styles */
/* Select override */
.consult-modal-right .cta-form-group select {
    width: 100%;
    padding: 12px 40px 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.consult-modal-right .cta-form-group select:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.consult-modal-right .cta-form-group select option {
    background: #1a1f2e;
    color: #fff;
}

/* Checkbox consent */
.consult-form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}

.consult-form-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--lemon, #C8F135);
    cursor: pointer;
}

.consult-form-check label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    cursor: pointer;
    line-height: 1.5;
    font-weight: 400;
}

/* Submit button */
.consult-form-btn {
    width: 100%;
    padding: 15px 20px;
    background: var(--lemon, #C8F135);
    color: #4a7500;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.2px;
    font-family: inherit;
}

.consult-form-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: #b5e020;
    box-shadow: 0 8px 24px rgba(200, 241, 53, 0.28);
}

.consult-form-btn:active:not(:disabled) {
    transform: translateY(0);
}

.consult-form-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
}

.consult-btn-loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(74, 117, 0, 0.3);
    border-top-color: #4a7500;
    border-radius: 50%;
    animation: cmSpin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes cmSpin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .consult-modal-inner {
        grid-template-columns: 1fr;
    }

    .consult-modal-left {
        display: none;
    }

    .consult-modal-right {
        padding: 44px 32px;
    }

    .consult-modal-right > h3 {
        font-size: 20px;
    }

    .consult-modal-box {
        max-width: 500px;
    }
}

@media (max-width: 480px) {
    .consult-modal {
        padding: 12px;
        align-items: flex-end;
    }

    .consult-modal-box {
        border-radius: 24px 24px 0 0;
        max-height: 92vh;
    }

    .consult-modal-right {
        padding: 36px 22px 28px;
    }
}

/* Scroll to top button */
.scroll-top {
    position: fixed;
    bottom: 36px;
    right: 36px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dark);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.scroll-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background: var(--lemon);
    border-color: var(--lemon);
    color: #1a2024;
    box-shadow: 0 8px 24px rgba(200, 241, 53, 0.3);
}

.scroll-top svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.scroll-top:hover svg {
    transform: translateY(-2px);
}

/* ===== PHONE MOCKUP (mobilo-aplikaciju-izstrade) ===== */
.hs-phone-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hs-phone {
    position: relative;
    width: 220px;
    background: #0d0f10;
    border-radius: 36px;
    border: 2px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 0 6px rgba(255,255,255,0.04), 0 32px 80px rgba(0,0,0,0.5);
    overflow: hidden;
    flex-shrink: 0;
}

.hs-phone-notch {
    width: 80px;
    height: 22px;
    background: #0d0f10;
    border-radius: 0 0 14px 14px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.hs-phone-notch-cam {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1e2124;
    border: 1px solid rgba(255,255,255,0.08);
}

.hs-phone-screen {
    background: #111316;
    min-height: 380px;
    padding: 14px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hs-ph-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hs-ph-bar-logo {
    width: 48px;
    height: 8px;
    background: var(--lemon);
    border-radius: 4px;
    opacity: 0.9;
}

.hs-ph-bar-icons {
    display: flex;
    gap: 5px;
}

.hs-ph-bar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
}

.hs-ph-hero {
    background: linear-gradient(135deg, rgba(200,241,53,0.08) 0%, rgba(0,0,0,0) 100%);
    border: 1px solid rgba(200,241,53,0.15);
    border-radius: 14px;
    padding: 14px 12px;
}

.hs-ph-hero-tag {
    width: 50px;
    height: 6px;
    background: var(--lemon);
    border-radius: 3px;
    opacity: 0.7;
    margin-bottom: 8px;
}

.hs-ph-hero-h1 {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
    margin-bottom: 5px;
}

.hs-ph-hero-h2 {
    width: 70%;
    height: 8px;
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
    margin-bottom: 10px;
}

.hs-ph-hero-sub {
    width: 90%;
    height: 5px;
    background: rgba(255,255,255,0.25);
    border-radius: 3px;
    margin-bottom: 4px;
}

.hs-ph-hero-sub2 {
    width: 65%;
    height: 5px;
    background: rgba(255,255,255,0.25);
    border-radius: 3px;
    margin-bottom: 12px;
}

.hs-ph-hero-btn {
    width: 90px;
    height: 24px;
    background: var(--lemon);
    border-radius: 12px;
}

.hs-ph-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.hs-ph-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 10px;
}

.hs-ph-card-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(200,241,53,0.15);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-ph-card-t {
    width: 55px;
    height: 5px;
    background: rgba(255,255,255,0.5);
    border-radius: 3px;
    margin-bottom: 4px;
}

.hs-ph-card-s {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 3px;
}

.hs-ph-nav {
    display: flex;
    justify-content: space-around;
    padding: 10px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: auto;
}

.hs-ph-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.hs-ph-nav-dot {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(255,255,255,0.08);
}

.hs-ph-nav-item.active .hs-ph-nav-dot {
    background: rgba(200,241,53,0.3);
}

.hs-ph-nav-line {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
}

.hs-ph-nav-item.active .hs-ph-nav-line {
    background: var(--lemon);
}

.hs-phone-home-bar {
    height: 4px;
    width: 60px;
    margin: 8px auto 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

/* ============================================================
   SERP MOCKUP (SEO page)
============================================================ */
.hs-mockup--serp {
    border-radius: 12px;
}

.hs-screen--serp {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hs-serp-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 5px 10px;
}

.hs-serp-q {
    font-size: 9px;
    color: rgba(255,255,255,0.5);
    font-family: inherit;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-serp-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hs-serp-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 7px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    position: relative;
    transition: background .2s;
}

.hs-serp-item--top {
    background: rgba(200,241,53,0.07);
    border: 1px solid rgba(200,241,53,0.18);
}

.hs-serp-pos {
    font-size: 9px;
    font-weight: 700;
    color: var(--lemon, #C8F135);
    min-width: 12px;
    padding-top: 1px;
    flex-shrink: 0;
}

.hs-serp-pos--dim {
    color: rgba(255,255,255,0.25);
}

.hs-serp-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hs-serp-domain {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    color: rgba(200,241,53,0.7);
}

.hs-serp-favicon {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(200,241,53,0.5);
    flex-shrink: 0;
}

.hs-serp-favicon--dim {
    background: rgba(255,255,255,0.15);
}

.hs-serp-title {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-serp-desc {
    font-size: 8px;
    color: rgba(255,255,255,0.4);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-serp-badge {
    position: absolute;
    top: 6px;
    right: 7px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #161a1b;
    background: var(--lemon, #C8F135);
    padding: 2px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Форма: успешная отправка ── */
#cf-success {
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s, transform .4s;
    text-align: center;
    padding: 48px 24px 36px;
}
#cf-success.cf-success--visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.cf-success-icon {
    margin: 0 auto 20px;
    width: 56px;
    height: 56px;
}
.cf-success-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(200,241,53,.12);
    border: 1px solid rgba(200,241,53,.3);
    border-radius: 40px;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #4a7500;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.cf-success-title {
    font-size: 18px;
    font-weight: 700;
    color: #161a1b;
    margin: 0 0 8px;
    line-height: 1.3;
}
.cf-success-sub {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 28px;
}
.cf-success-timer {
    height: 3px;
    background: rgba(200,241,53,.15);
    border-radius: 40px;
    overflow: hidden;
    margin-bottom: 10px;
}
.cf-success-timer-bar {
    height: 100%;
    width: 0;
    background: #C8F135;
    border-radius: 40px;
    transition: none;
}
.cf-success-hint {
    font-size: 11px;
    color: #9ca3af;
    margin: 0;
}

button , a {
    box-sizing: border-box;
}

@media(max-width: 1500px) {
    .logo {
        max-width: 125px;
    }

    .menuNav__li {
        font-size: 15px;
    }

    .header__pohne {
        font-size: 17px;
    }

    .heroSection {
        padding: 50px 0;
    }

    .heroSection {
        /* height: 665px; */
        height: clamp(41.5625rem, 6.4162rem + 46.8227vw, 50.3125rem);
    }

    .cta-button {
        height: clamp(4.375rem, -0.6459rem + 6.689vw, 5.625rem);
        width: clamp(25.9375rem, -1.6775rem + 36.7893vw, 32.8125rem);
        font-size: 16px;
        /* margin-left: clamp(0rem, -35rem + 46.6667vw, 8.75rem); */
    }

    .hero__content {
        /* margin-left: clamp(0rem, -35rem + 46.6667vw, 8.75rem); */
        margin-bottom: clamp(3.75rem, -6.25rem + 13.3333vw, 6.25rem);
    }

    .aboutMain {
        gap: 20px;
    }

    .solution-card__content h3 {
        font-size: clamp(1.125rem, -0.375rem + 2vw, 1.5rem);
        line-height: 1.4;
    }

    .solution-card__content p {
        font-size: clamp(0.875rem, -0.125rem + 1.3333vw, 1.125rem);
    }

    .solutionCardContent__top {
        margin-bottom: clamp(0.625rem, -1.875rem + 3.3333vw, 1.25rem);
    }

    .solution-card {
        padding: clamp(1.25rem, -3.75rem + 6.6667vw, 2.5rem) 20px 40px;
    }

    .aboutMainSection {
        padding: 50px 0;
    }

    .serviceSection {
        padding: 50px 0;
    }

    .consultationSection {
        padding: 50px 0;
        margin: 50px 0;
    }

    .portfolioSection {
        padding: 50px 0;
    }

    .portfolioMainItem__titleWrap {
        bottom: 30px;
        right: 30px;
    }

    .portfolioMain__btn {
        height: 60px;
        font-size: 16px;
    }

    .newsMainSection {
        padding: 50px 0;
    }

    .news-card__title {
        font-size: clamp(1.125rem, 0.125rem + 1.3333vw, 1.375rem);
    }

    .news-card__text {
        margin-top: 10px;
    }

    .link span {
        font-size: clamp(1.125rem, 0.625rem + 0.6667vw, 1.25rem);
    }

    .consultation__link {
        font-size: clamp(1.125rem, 0.625rem + 0.6667vw, 1.25rem);
    }

    .footerEmail__link {
        font-size: clamp(7.5rem, 2.5rem + 6.6667vw, 8.75rem);
    }

    .footer {
        padding: 50px 40px 30px;
    }

    .footerCenter__listWrap {
        gap: clamp(1.25rem, -18.75rem + 26.6667vw, 6.25rem);
    }

    .footer__center {
        gap: clamp(1.875rem, -8.125rem + 13.3333vw, 4.375rem);
    }

    .footerCenter__listWrap {
        justify-content: flex-end;
        width: 100%;
    }

    .serviceItem__title {
        line-height: 1.4;
        font-size: clamp(1.25rem, 0.25rem + 1.3333vw, 1.5rem);
    }

    .hs-h1 br {
        display: none;
    }

    .seo-h2 br {
        display: none;
    }

    .hs-btn-primary, .hs-btn-secondary {
        padding: 20px 20px;
        font-size: 15px;
    }

    .seo-p {
        font-size: 16px;
    }

    .seo-fact-label {
        font-size: 16px;
    }

    .pain-check-txt {
        font-size: 16px;
    }

    .st-card-p {
        font-size: 15px;
    }

    .st-card-tag {
        font-size: 12px;
    }

    .st-card-shop-link {
        font-size: 15px;
        padding: 15px 20px;
    }

    .processStep__text {
        font-size: 16px;
    }

    .processStep__tag {
        font-size: 14px;
    }

    .processStep__duration {
        font-size: 14px;
    }
}

@media(max-width: 1200px) {
    p {
        font-size: clamp(1.125rem, 0.3929rem + 1.1429vw, 1.25rem);
    }

    .header__content {
        gap: 30px;
    }

    .header__pohneWrap span {
        display: none;
    }

    .header__pohne {
        padding: 0;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
    }

    .heroSection {
        height: clamp(35.9375rem, 4.8214rem + 48.5714vw, 41.25rem);
    }

    .cta-button {
        height: clamp(3.75rem, 0.0893rem + 5.7143vw, 4.375rem);
        width: clamp(21.875rem, -1.9196rem + 37.1429vw, 25.9375rem);
        font-size: clamp(0.875rem, 0.1429rem + 1.1429vw, 1rem);
    }

    .hero__content h1 {
        font-size: clamp(2.75rem, -1.6429rem + 6.8571vw, 3.5rem);
    }

    .hero__content p {
        font-size: clamp(1.125rem, 0.3929rem + 1.1429vw, 1.25rem);
    }

    .hero__content {
        margin-bottom: clamp(2.5rem, -4.8214rem + 11.4286vw, 3.75rem);
    }

    h2 {
        font-size: clamp(2.75rem, -1.6429rem + 6.8571vw, 3.5rem);
    }

    .websiteProblemsSection {
        padding: 70px 0;
    }

    .problems-layout {
        gap: 50px;
    }

    .problems__stat-card strong {
        font-size: 48px;
    }

    .aboutMain__title {
        font-size: clamp(2.75rem, 0.5536rem + 3.4286vw, 3.125rem);
    }

    .text {
        font-size: clamp(1rem, 0.2679rem + 1.1429vw, 1.125rem);
    }

    .aboutMain {
        flex-direction: column;
    }

    .aboutMain__left {
        max-width: initial;
    }

    .text__wrap p span br {
        display: none;
    }

    .logo-slider {
        margin-top: 30px;
    }

    .solution__grid {
        max-width: 680px;
        width: 100%;
        margin: 0 auto;
    }

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

    .consultationBlackCard__title {
        font-size: clamp(1.75rem, -0.25rem + 3.1373vw, 2.25rem);
    }

    .consultation__title {
        font-size: clamp(1.75rem, -0.25rem + 3.1373vw, 2.25rem);
    }

    .consultation {
        gap: 24px;
    }

    .portfolioMain__header {
        grid-area: portfolioHeader;
    }

    .portfolioMain__item-1 {
        grid-area: portfolioItem1;
    }

    .portfolioMain__item-2 {
        grid-area: portfolioItem2;
    }

    .portfolioMain__item-3 {
        grid-area: portfolioItem3;
    }

    .portfolioMain__item-4 {
        grid-area: portfolioItem4;
    }

    .portfolioMain__btnWrap {
        grid-area: portfolioBtn;
    }

    .portfolioMain {
        display: grid;
        grid-template-areas:
            "portfolioHeader portfolioHeader portfolioHeader"
            "portfolioItem1 portfolioItem2 portfolioItem4"
            "portfolioItem1 portfolioItem3 portfolioItem4"
            "portfolioBtn portfolioBtn portfolioBtn";
        grid-gap: 20px;
    }

    .portfolioMain__left,
    .portfolioMain__center,
    .portfolioMain__right {
        display: contents;
    }

    .portfolioMain__item-1,
    .portfolioMain__item-2,
    .portfolioMain__item-3,
    .portfolioMain__item-4 {
        aspect-ratio: initial;
    }

    .portfolioMainItem__title {
        font-size: clamp(1rem, 0.2679rem + 1.1429vw, 1.125rem);
        text-align: right;
    }

    .portfolioMain__btnWrap {
        max-width: 400px;
        width: 100%;
        margin: 20px auto 0;
    }

    .portfolioMain__header {
        margin-bottom: 20px;
    }

    .footerEmail__link {
        font-size: clamp(5.625rem, -5.3571rem + 17.1429vw, 7.5rem);
    }

    .footer__center {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        gap: 50px;
    }

    .footerCenter__left {
        max-width: initial;
        text-align: center;
    }

    .footerCenter__socials {
        justify-content: center;
        margin-top: 20px;
    }

    .footerCenter__listWrap {
        gap: 100px;
    }

    /* ===== par-mums ===== */
    .aboutUsSection {
        padding: 50px 0;
    }

    .aboutUs__title {
        font-size: 48px;
    }

    .aboutUs__card h4 {
        font-size: 64px;
    }

    .aboutUsContact__title {
        font-size: 28px;
    }

    .expertiseSection {
        padding: 50px 0;
    }

    .expertiseCard {
        padding: 30px;
    }

    .expertiseCard__title {
        font-size: 24px;
    }

    .expertiseCard__text {
        font-size: 16px;
    }

    .processSection {
        padding: 50px 0;
    }

    .processStep__title {
        font-size: 24px;
    }

    .processStep__text {
        font-size: 16px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .portfolio-card-large {
        grid-column: span 1;
        grid-row: span 1;
    }

    .lq-form-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .lq-process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .lq-hero-h1 {
        font-size: 40px;
    }

    .lq-form-h2 {
        font-size: 32px;
    }

    .lq-process-h2 {
        font-size: 32px;
    }

    .seo-p {
        font-size: 14px;
    }

    .seo-fact-label {
        font-size: 14px;
    }

    .seo-kw {
        font-size: 12px;
    }

    .hs-wrap {
        padding: 88px 40px 70px;
    }

    .seo-wrap {
        padding: 70px 0;
    }

    .seo-pillar-p {
        font-size: 14px;
    }

    .seo-divider {
        margin-bottom: 70px;
    }

    .seo-top {
        margin-bottom: 70px;
    }

    .pain-tag-txt {
        font-size: 11px;
    }

    .pain-card-p {
        font-size: 14px;
    }

    .pain-card-quote-txt {
        font-size: 12px;
    }

    .pain-card-h {
        font-size: 16px;
    }

    .pain-sub {
        font-size: 16px;
    }

    .pain-bottom-h br {
        display: none;
    }

    .pain-check-txt {
        font-size: 14px;
    }

    .pain-bottom-p {
        font-size: 16px;
    }

    .pain-bottom-label {
        font-size: 11px;
    }

    .st-label {
        font-size: 11px;
    }

    .st-sub {
        font-size: 16px;
    }

    .st-card-p {
        font-size: 14px;
    }

    .st-card-shop-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .st-card-h {
        font-size: 18px;
    }

    .st-card-shop-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .st-card-shop-icon svg {
        width: 30px;
        height: 30px;
    }

    .portfolioMainHeader__text {
        font-size: 16px;
    }

    .faq-desc {
        font-size: 16px;
    }

    .faq-q-text {
        font-size: 18px;
    }

    .faq-a-text {
        font-size: 14px;
    }

    .faq-a-tag {
        font-size: 12px;
    }

    .cta-sub {
        font-size: 16px;
    }

    .faq-layout {
        grid-template-columns: 1fr;
        grid-gap: 50px;
    }
}

@media(max-width: 1024px) {
    .header {
        padding-top: 0;
        padding-bottom: 0;
    }

    .header::before {
        display: none;
    }

    .logo__img--full {
        width: 130px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .logo__img--mini {
        display: none;
    }

    .header--sticky .header__content {
        height: 88px;
    }

    .menu {
        display: none;
    }

    .container {
        width: calc(100% - 40px);
    }

    .mob__menuBtnWrap {
        display: block;
    }

    .mob__menuBtn {
        width: 50px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        border: none;
        background-color: var(--color-alabaster);
        font-weight: bold;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--color-platinum);
    }

    .header__right {
        gap: 10px;
    }

    .heroSection {
        height: clamp(29.375rem, 9.5846rem + 41.1765vw, 35.9375rem);
    }

    .cta-button {
        height: clamp(3.125rem, 1.2402rem + 3.9216vw, 3.75rem);
        width: clamp(17rem, -1.4711rem + 38.4314vw, 23.125rem);
        font-size: clamp(0.75rem, 0.373rem + 0.7843vw, 0.875rem);
    }

    .hero__content h1 {
        font-size: clamp(1.875rem, -0.7637rem + 5.4902vw, 2.75rem);
    }

    .hero__content p {
        font-size: clamp(1rem, 0.623rem + 0.7843vw, 1.125rem);
    }

    .main-card {
        padding: 0 40px clamp(3.125rem, -4.4142rem + 15.6863vw, 5.625rem);
    }

    .websiteProblemsSection {
        padding: 30px 0;
        position: relative;
    }

    h2 {
        font-size: clamp(2.25rem, 0.7422rem + 3.1373vw, 2.75rem);
    }

    .websiteProblems {
        position: relative;
        z-index: 1;
    }

    .problems-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .problems__stat-card strong {
        font-size: 40px;
    }

    .problems__title br {
        display: none;
    }

    .aboutMainSection {
        padding: 30px 0;
    }

    .aboutMain__title {
        font-size: clamp(2.25rem, 0.7422rem + 3.1373vw, 2.75rem);
    }

    .aboutMain__top {
        gap: 20px;
        text-align: center;
    }

    .text__wrap {
        gap: 10px;
    }

    .link__wrap {
        justify-content: center;
    }

    .serviceSection {
        padding: 30px 0;
    }

    .servicesMain__content {
        margin-top: 30px;
    }

    .services__items {
        grid-gap: 20px;
    }

    .consultationSection {
        padding: 60px 0;
        margin-bottom: 0;
    }

    .consultation {
        flex-direction: column;
        gap: 24px;
    }

    .consultation__blackCard {
        height: auto;
    }

    .consultation__title {
        font-size: 28px;
    }

    .consultationBlackCard__title {
        font-size: 28px;
    }

    .service__item {
        border-radius: 20px;
    }

    .consultation__blackCard {
        border-radius: 20px;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .consultationBlackCard__title {
        font-size: clamp(2.25rem, 0.7422rem + 3.1373vw, 2.75rem);
    }

    .portfolioSection {
        padding: 30px 0;
    }

    .portfolioMain {
        grid-template-areas:
            "portfolioHeader portfolioHeader"
            "portfolioItem1 portfolioItem2"
            "portfolioItem3 portfolioItem4"
            "portfolioBtn portfolioBtn";
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolioMain__item {
        aspect-ratio: 1 / 1;
    }

    .newsMainSection {
        padding: 30px 0;
    }

    .newsMain__header {
        flex-direction: column;
        gap: 20px;
    }

    .newsMainHeader__right {
        justify-content: flex-end;
    }

    .newsMain__content {
        margin-top: 30px;
    }

    .footerEmail__link {
        font-size: 80px;
    }

    .footer__bottom {
        margin-top: 40px;
        flex-direction: column-reverse;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }

    .footerCenter__right {
        width: 100%;
        justify-content: space-between;
        flex: initial;
    }

    .footerCenter__listWrap {
        justify-content: space-between;
    }

    .glass-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 10000;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .glass-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .glass-pane {
        width: calc(100% - 30px);
        /* max-width: 400px; */
        height: calc(100% - 40px);
        background: rgba(15, 18, 24, 0.85);
        border-radius: 35px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
        display: flex;
        flex-direction: column;
        position: relative;
        transform: scale(0.95);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        overflow: hidden;
    }

    .glass-menu-overlay.active .glass-pane {
        transform: scale(1);
    }

    .menu-logo {
        padding: 35px 25px 15px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .menu-logo img {
        height: 30px;
    }

    .menu-logo span {
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 1px;
    }

    .close-btn {
        position: absolute;
        top: 25px;
        right: 25px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        z-index: 10;
    }

    .menu-nav {
        flex: 1;
        overflow-y: auto;
        padding: 16px 0 10px;
        scrollbar-width: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .menu-nav::-webkit-scrollbar {
        display: none;
    }

    .menu-nav ul {
        list-style: none;
        counter-reset: menu-counter;
    }

    .menu-item {
        border-bottom: none;
        counter-increment: menu-counter;
    }

    .menu-link-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
        border-radius: 14px;
        margin: 2px 12px;
        transition: background 0.2s ease;
    }

    .menu-link-wrapper:has(.menu-main-link:hover),
    .menu-link-wrapper:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    .menu-main-link {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.85);
        font-size: 26px;
        padding: 14px 0;
        display: flex;
        align-items: center;
        gap: 16px;
        flex: 1;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        transition: color 0.25s ease;
    }

    .menu-main-link::before {
        content: counter(menu-counter, decimal-leading-zero);
        font-size: 11px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.2);
        letter-spacing: 0.06em;
        min-width: 22px;
        transition: color 0.25s ease;
    }

    .menu-link-wrapper:hover .menu-main-link,
    .menu-item.active > .menu-link-wrapper .menu-main-link {
        color: var(--lemon);
    }

    .menu-link-wrapper:hover .menu-main-link::before,
    .menu-item.active > .menu-link-wrapper .menu-main-link::before {
        color: var(--lemon);
        opacity: 0.6;
    }

    .arrow {
        color: rgba(255, 255, 255, 0.25);
        transition: transform 0.3s ease, color 0.25s ease;
        font-size: 14px;
        flex-shrink: 0;
    }

    .menu-link-wrapper:hover .arrow {
        color: rgba(200, 241, 53, 0.5);
    }

    .menu-item.active > .menu-link-wrapper .menu-main-link {
        color: var(--lemon);
        background: none;
    }

    .has-submenu.open .arrow {
        transform: rotate(180deg);
    }

    .submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease-out;
        padding: 0 12px;
    }

    .has-submenu.open .submenu {
        max-height: 600px;
    }

    .submenu li {
        border-left: 1px solid rgba(255, 255, 255, 0.07);
        margin-left: 30px;
    }

    .submenu li a {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.45);
        padding: 10px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.03em;
        transition: color 0.2s ease;
    }

    .submenu li a i {
        font-size: 12px;
        color: var(--lemon);
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .submenu li a:hover {
        color: rgba(255, 255, 255, 0.9);
        background: none;
    }

    .submenu li a:hover i {
        opacity: 1;
        transform: translateX(3px);
    }

    .menu-footer {
        padding: 25px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(0, 0, 0, 0.1);
    }

    .lang-switcher {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.4);
    }

    .lang-link {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.4);
        transition: 0.3s;
        font-weight: 500;
    }

    .lang-link.active {
        color: #fff;
        font-weight: 700;
    }

    .lang-link:hover {
        color: #fff;
    }

    .lang-divider {
        color: rgba(255, 255, 255, 0.2);
        user-select: none;
    }

    .call-btn {
        text-decoration: none;
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
        padding: 12px 20px;
        border-radius: 15px;
        font-size: 13px;
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        gap: 10px;
        transition: 0.3s;
    }

    .call-btn:active {
        transform: scale(0.96);
        background: rgba(255, 255, 255, 0.15);
    }

    .mobile-menu-footer {
        padding: 20px 25px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        background: rgba(0, 0, 0, 0.1);
    }

    .mobile-languages {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
    }

    .mobile-languages .lang-link {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 1px;
        padding: 6px 8px;
        border-radius: 6px;
        transition: 0.3s ease;
    }

    .mobile-languages .lang-link:hover {
        color: rgba(255, 255, 255, 0.95);
        background: rgba(255, 255, 255, 0.05);
    }

    .mobile-languages .lang-link.active {
        color: #fff;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.1);
    }

    .mobile-languages .lang-separator {
        color: rgba(255, 255, 255, 0.3);
        margin: 0 2px;
    }

    .call-btn-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .call-btn-mobile:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.15);
    }

    .call-btn-mobile:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
    }

    .mobile-menu-footer .call-btn {
        width: 100%;
        justify-content: center;
        font-size: 14px;
        padding: 14px 20px;
    }

    .menu-logo .logo__img {
        width: 150px;
        height: auto;
    }

    .hs-grid {
        grid-template-columns: 1fr;
    }

    .hs-right {
        display: none;
    }

    .hs-h1 {
        font-size: 36px;
    }

    .seo-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .seo-h2 {
        font-size: 32px;
    }

    .seo-pillars {
        grid-template-columns: 1fr;
    }

    .seo-wrap {
        padding: 50px 0;
    }

    .seo-pillar-sep {
        display: none;
    }

    .pain-grid {
        grid-template-columns: 1fr;
    }

    .pain-bottom {
        grid-template-columns: 1fr;
        padding: 36px 28px;
    }

    .pain-h2 {
        font-size: 32px;
    }

    .pain-wrap {
        padding: 50px 0;
    }

    .pain-card-sep-v {
        display: none;
    }

    .st-grid {
        grid-template-columns: 1fr 1fr;
    }

    .st-grid-bottom {
        grid-template-columns: 1fr;
    }

    .st-grid>.st-card:nth-child(3) {
        border-radius: 0;
    }

    .st-h2 {
        font-size: 32px;
    }

    .st-wrap {
        padding: 50px 0;
    }

    .st-grid>.st-card:first-child {
        border-radius: 20px 0 0 0;
    }

    .st-grid>.st-card:nth-child(2) {
        border-radius: 0 20px 0 0;
    }

    .st-grid-bottom>.st-card:nth-child(1) {
        border-radius: 0;
    }

    .st-grid-bottom>.st-card:nth-child(2) {
        border-radius: 0 0 20px 20px;
    }

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .faq-left {
        position: static;
    }

    .faq-h2 {
        font-size: 32px;
    }

    .faq-wrap {
        padding: 50px 0;
    }

    .cta-h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .cta-floating-badge,
    .cta-floating-badge2 {
        display: none;
    }

    .cta-wrap {
        padding: 50px 0;
    }

    .notfound-code {
        font-size: 96px;
        letter-spacing: -4px;
    }

    .ep-grid {
        grid-template-columns: 1fr;
    }

    .ep-solution {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }

    .ep-h2 {
        font-size: 30px;
    }

    .ep-wrap {
        padding: 64px 24px;
    }

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

    .ef-grid>.ef-card:first-child {
        border-radius: 20px 0 0 0;
    }

    .ef-grid>.ef-card:nth-child(2) {
        border-radius: 0 20px 0 0;
    }

    .ef-grid>.ef-card:nth-child(3) {
        border-radius: 0;
    }

    .ef-grid>.ef-card:nth-child(4) {
        border-radius: 0;
    }

    .ef-grid-bottom>.ef-card:nth-child(1) {
        border-radius: 0;
    }

    .ef-grid-bottom>.ef-card:nth-child(2) {
        border-radius: 0;
    }

    .ef-grid-bottom>.ef-card:nth-child(3) {
        border-radius: 0 0 0 20px;
    }

    .ef-grid-bottom>.ef-card:last-child {
        border-radius: 0 0 20px 0;
    }

    .ef-grid>.ef-card:nth-child(2) .ef-sep-v,
    .ef-grid-bottom>.ef-card:nth-child(2) .ef-sep-v {
        display: none;
    }

    .pr-cards {
        grid-template-columns: 1fr;
    }

    .pr-bottom {
        grid-template-columns: 1fr;
    }

    .pr-h2 {
        font-size: 32px;
    }

    .pr-wrap {
        padding: 64px 24px;
    }

    /* ===== par-mums ===== */
    .aboutUsSection {
        padding: 40px 0;
    }

    .aboutUs {
        flex-direction: column;
    }

    .aboutUs__left {
        gap: 36px;
    }

    .aboutUs__right {
        max-width: 100%;
    }

    .aboutUs__title {
        font-size: 38px;
    }

    .aboutUs__card h4 {
        font-size: 56px;
    }

    .aboutUsContact__title {
        font-size: 26px;
    }

    .expertiseSection {
        padding: 40px 0;
    }

    .expertiseCard {
        padding: 24px;
    }

    .expertiseCard__title {
        font-size: 22px;
    }

    .expertiseCard__text {
        font-size: 15px;
    }

    .processSection {
        padding: 40px 0;
    }

    .processStep {
        gap: 20px;
        padding: 24px 0;
    }

    .processStep__dot {
        width: 46px;
        height: 46px;
    }

    .processStep__title {
        font-size: 22px;
    }

    .processStep__text {
        font-size: 15px;
        max-width: 100%;
    }

    .tech-section {
        padding: 50px 20px;
        min-height: auto;
    }

    /* ===== home ===== */
    .problem-card {
        padding: 22px 18px;
    }

    .solution-card {
        padding: 28px 18px;
    }

    .solutionCardContent__icon {
        font-size: 32px;
    }

    .portfolio-wrap {
        padding: 48px 24px;
    }
    
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-bottom: 48px;
    }
    
    .portfolio-h1 {
        font-size: 36px;
    }
    
    .portfolio-cta {
        padding: 48px 20px;
    }
    
    .portfolio-cta-title {
        font-size: 28px;
    }

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

    .detail-news-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .detail-news-sidebar {
        position: static;
    }

    .news-nl-box {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hs-wrap {
        padding: 88px 0px 50px;
    }

    .hs-badge-txt {
        font-size: 11px;
    }

    .hs-grid {
        padding-top: 50px;
    }

    .hs-trust-desc {
        font-size: 14px;
    }

    .hs-trust-num {
        font-size: 22px;
    }

    .seo-kw {
        font-size: 11px;
    }

    .seo-top {
        margin-bottom: 50px;
    }

    .seo-divider {
        margin-bottom: 50px;
    }

    .pain-grid {
        margin-bottom: 50px;
    }

    .pain-bottom {
        gap: 30px;
    }

    .st-header {
        margin-bottom: 30px;
    }

    .st-grid {
        grid-template-columns: 1fr;
    }

    .processStep__tag {
        opacity: 1;
    }

    .cta-trust {
        gap: 20px;
    }

    .cta-sub {
        margin-bottom: 30px;
    }

    .cta-buttons {
        margin-bottom: 30px;
    }

    .cta-ticker {
        margin-top: 30px;
        padding-top: 30px;
    }
}

@media(max-width: 768px) {
    .footerEmail__link {
        font-size: 50px;
    }

    .hs-badge-txt {
        font-size: 11px;
    }

    .main-card {
        mask-image: initial;
        border-radius: 20px;
        padding: 20px;
        text-align: center;
    }

    .hero__eyebrow {
        margin: 0 auto;
    }

    .hero__stats {
        justify-content: center;
        gap: 20px;
    }

    .hero__stat strong {
        font-size: 22px;
    }

    .cta-button {
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }

    .heroSection {
        min-height: 450px;
        padding: 30px 0;
    }

    .hero__content {
        margin-bottom: 70px;
    }

    .services__items {
        grid-template-columns: 1fr;
    }

    .footerCenter__listWrap {
        gap: 40px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .portfolioMain {
        grid-template-areas:
            "portfolioHeader"
            "portfolioItem1"
            "portfolioItem2"
            "portfolioItem3"
            "portfolioItem4"
            "portfolioBtn";
        grid-template-columns: 1fr;
    }

    .portfolioMainHeader__title br {
        display: none;
    }

    .portfolioMainHeader__title {
        font-size: 34px;
    }

    /* ===== par-mums ===== */
    .aboutUsSection {
        padding: 40px 0;
    }

    .aboutUs {
        flex-direction: column;
        gap: 24px;
    }

    .aboutUs__left {
        gap: 28px;
    }

    .aboutUs__right {
        max-width: 100%;
    }

    .aboutUs__title {
        font-size: 30px;
    }

    .aboutUs__cards {
        gap: 12px;
    }

    .aboutUs__card {
        padding: 20px;
    }

    .aboutUs__card h4 {
        font-size: 48px;
    }

    .aboutUs__card span {
        font-size: 14px;
    }

    .aboutUsContact__title {
        font-size: 22px;
    }

    .expertiseSection {
        padding: 40px 0;
    }

    .expertise__top {
        margin-bottom: 32px;
    }

    .expertise__grid {
        grid-template-columns: 1fr;
    }

    .expertiseCard {
        padding: 20px;
    }

    .expertiseCard__top {
        margin-bottom: 20px;
    }

    .expertiseCard__title {
        font-size: 20px;
    }

    .expertiseCard__text {
        font-size: 14px;
    }

    .expertiseCard__tag {
        font-size: 13px;
        padding: 5px 8px;
    }

    .processSection {
        padding: 40px 0;
    }

    .process__top {
        margin-bottom: 28px;
    }

    .processStep {
        gap: 14px;
        padding: 20px 0;
    }

    .processStep__dot {
        width: 42px;
        height: 42px;
    }

    .processStep__title {
        font-size: 18px;
    }

    .processStep__text {
        font-size: 14px;
        line-height: 1.6;
        max-width: 100%;
    }

    .processStep__right {
        display: none;
    }

    .processStep__duration {
        font-size: 13px;
        padding: 5px 10px;
    }

    .processStep__tag {
        font-size: 13px;
        padding: 5px 10px;
    }

    .tech-section {
        padding: 40px 16px;
        min-height: auto;
    }

    .tech-title {
        font-size: 22px;
    }

    .tech-subtitle {
        font-size: 14px;
        margin-top: 10px;
    }

    .tech-stats {
        max-width: 100%;
    }

    .tech-stat {
        padding: 16px 10px;
    }

    .tech-stat-num {
        font-size: 22px;
    }

    .tech-stat-desc {
        font-size: 10px;
    }

    /* ===== home ===== */
    .websiteProblemsSection {
        padding: 50px 0;
    }

    .problems-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .problem-card {
        padding: 20px 16px;
    }

    .problem-card p {
        font-size: 14px;
    }

    .problems__lead {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .problems__resolve {
        font-size: 14px;
    }

    .solution-card {
        padding: 24px 16px;
    }

    .solutionCardContent__icon {
        font-size: 28px;
    }

    .solution-card__content h3 {
        font-size: 20px;
    }

    .hs-h1 {
        font-size: 32px;
        line-height: 1.2;
    }

    .hs-h1 br {
        display: none;
    }

    .hs-trust-sep {
        display: none;
    }

    .seo-h2 br,
    .pain-h2 br,
    .faq-h2 br,
    .cta-h2 br {
        display: none;
    }

    .lq-hero {
        padding: 60px 0 80px;
    }

    .lq-hero-h1 {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .lq-hero-sub {
        font-size: 14px;
        margin-bottom: 32px;
    }

    .lq-hero-stats {
        flex-direction: column;
        gap: 24px;
    }

    .lq-form-wrap {
        padding: 60px 0;
    }

    .lq-form {
        padding: 24px;
    }

    .lq-form-left,
    .lq-form-right {
        padding: 0;
    }

    .lq-form-h2 {
        font-size: 24px;
    }

    .lq-form-row {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 16px;
    }

    .lq-process-header {
        margin-bottom: 40px;
    }

    .lq-process-steps {
        grid-template-columns: 1fr;
    }

    .lq-step {
        padding: 24px 16px;
    }

    .lq-calculator {
        margin-top: 24px;
    }

    .lq-cta-box {
        padding: 40px 20px;
    }

    .lq-cta-h2 {
        font-size: 24px;
    }

    .news-hero-h1 {
        font-size: 36px;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .detail-news-h1 {
        font-size: 32px;
    }

    .detail-news-lead {
        font-size: 16px;
    }

    .detail-news h2 {
        font-size: 22px;
    }

    .detail-news h3 {
        font-size: 18px;
    }

    .detail-news p {
        font-size: 15px;
    }

    .detail-news ul,
    .detail-news ol {
        margin-left: 20px;
    }

    .news-list-wrap {
        padding: 60px 0;
    }

    .news-filters {
        gap: 12px;
        margin-bottom: 40px;
    }

    .news-filter-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .detail-news-meta-author {
        width: 100%;
    }

    .detail-news-cover {
        margin-top: 40px;
    }

    .detail-news-content-wrap {
        padding: 40px 0;
    }

    .news-newsletter {
        padding: 40px 0;
    }

    .news-nl-form {
        flex-direction: column;
    }

    .news-nl-btn {
        width: 100%;
    }

    .detail-news-sidebar {
        display: none;
    }

    .hs-phone {
        width: 160px;
    }
    .hs-phone-screen {
        min-height: 280px;
    }

    .news-hero {
        padding: 0;
    }

    .news-hero-content {
        margin: 35px auto 0;
        padding: 0 16px;
    }

    .news-hero-h1 {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 16px;
    }

    .news-hero-sub {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .news-filters {
        gap: 8px;
        margin-bottom: 40px;
        padding: 0 16px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: center;
    }

    .news-filter-btn {
        padding: 8px 16px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .news-list-wrap {
        padding: 0 16px 50px;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 0;
    }

    .news-card {
        border-radius: 12px;
    }

    .news-card-img-wrap {
        aspect-ratio: 16 / 10;
    }

    .news-card-content {
        padding: 18px;
    }

    .news-card-title {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .news-card-excerpt {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 16px;
    }

    .news-card-meta {
        font-size: 10px;
        padding-top: 12px;
    }

    .news-card-btn {
        width: 28px;
        height: 28px;
    }

    .news-newsletter {
        padding: 50px 0;
    }

    .news-nl-box {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 20px;
        border-radius: 16px;
    }

    .news-nl-content {
        text-align: center;
    }

    .news-nl-h2 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .news-nl-text {
        font-size: 12px;
    }

    .news-nl-form {
        gap: 8px;
        flex-direction: column;
    }

    .news-nl-input {
        width: 100%;
        padding: 12px 16px;
        font-size: 12px;
    }

    .news-nl-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 12px;
        justify-content: center;
    }

    .aboutUs__text {
        font-size: 14px;
        line-height: 1.6;
    }

    .tech-subtitle {
        font-size: 14px;
        line-height: 1.6;
    }

    .hs-trust {
        justify-content: center;
        gap: 30px;
        text-align: center;
    }

    .seo-pillar {
        padding: 30px 20px;
    }

    .pain-sub {
        font-size: 14px;
    }

    .pain-card {
        padding: 30px 20px;
    }

    .pain-bottom-p {
        font-size: 14px;
    }

    .st-sub {
        font-size: 14px;
    }

    .portfolioMainHeader__text {
        font-size: 14px;
    }

    .faq-desc {
        font-size: 14px;
    }

    .faq-q-text {
        font-size: 16px;
    }

    .cta-sub {
        font-size: 14px;
    }

    .cta-trust-txt {
        font-size: 14px;
    }

    .cta-ticker-txt {
        font-size: 14px;
    }

    .footerCenter__text {
        font-size: 14px;
    }
}

@media(max-width: 576px) {
    p {
        font-size: 14px;
    }

    .solution__grid {
        grid-template-columns: 1fr;
    }

    .footerEmail__link {
        font-size: 30px;
    }

    .header__pohneWrap {
        display: none;
    }

    .mob__menuBtn {
        width: 40px;
        font-size: 18px;
    }

    .lang>ul>li>span {
        width: 38px;
        font-size: 14px;
    }

    .hero__eyebrow {
        font-size: 11px;
        padding: 6px 12px;
    }

    .hero__stats {
        gap: 14px;
    }

    .hero__stat strong {
        font-size: 18px;
    }

    .hero__stat span {
        font-size: 10px;
    }

    .hero__stat-sep {
        height: 28px;
    }

    .hero__content h1 {
        font-size: 24px;
    }

    .hero__content p {
        font-size: 14px;
    }

    .cta-button {
        width: 90%;
        font-size: 12px;
    }

    .cta-button__arrow {
        width: 34px;
        height: 34px;
    }

    h2 {
        font-size: 24px;
        line-height: 1.4;
        text-align: center;
    }

    .problems__item {
        font-size: 14px;
        padding-left: 30px;
        line-height: 1.4;
    }

    .problems__item-icon {
        width: 18px;
        font-size: 10px;
        top: 0;
    }

    .problems__list {
        gap: 15px;
    }

    .problems-grid {
        grid-template-columns: 1fr;
    }

    .problems__stat-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .problems__stat-card strong {
        font-size: 48px;
    }

    .aboutMain__title {
        font-size: 24px;
    }

    .text span {
        font-size: 18px;
    }

    .serviceItem__text {
        font-size: 14px;
    }

    .serviceItem__title {
        font-size: 18px;
    }

    .serviceItem__content {
        padding: 20px;
    }

    .serviceItem__nr {
        font-size: 40px;
        top: 20px;
        left: 20px;
    }

    .consultation__title {
        font-size: 24px;
    }

    .consultation__text {
        font-size: 14px;
    }

    .consultation__link {
        font-size: 14px;
    }

    .consultationBlackCard__title {
        font-size: 24px;
    }

    .consultation__blackCard {
        padding: 20px;
    }

    .consultationBlackCard__btn {
        font-size: 14px;
        height: 50px;
    }

    .portfolioMainHeader__title {
        font-size: 24px;
    }

    .portfolioMainHeader__text {
        font-size: 14px;
    }

    .portfolioMain__btn {
        font-size: 14px;
        height: 50px;
    }

    .newsMainHeader__right {
        justify-content: center;
    }

    .newsMainHeader__text {
        text-align: center;
    }

    .link span {
        font-size: 14px;
    }

    .link i {
        font-size: 14px;
    }

    .newsMain__btnWrap {
        justify-content: center;
    }

    .footerCenter__text {
        font-size: 14px;
    }

    .footerCenterList__li {
        font-size: 14px;
    }

    .footerContactsCol__title {
        font-size: 14px;
    }

    .footerContactsCol__text {
        font-size: 14px;
    }

    .footerContactsCol__link {
        font-size: 14px;
    }

    .footer {
        padding: 30px 20px 30px;
    }

    .footerBottom__text {
        font-size: 12px;
        text-align: center;
    }

    .footerBottom__li {
        font-size: 12px;
    }

    .solution-card__content h3 {
        font-size: 18px;
    }

    .serviceItem__title {
        font-size: 20px;
    }


    .newsMainHeader__text {
        font-size: 14px;
    }

    .portfolioMain__item {
        aspect-ratio: 1.3 / 1;
    }

    .solution-card__content h3 br {
        display: none;
    }

    p br {
        display: none;
    }

    .logo__img {
        width: 150px;
        height: 22px;
    }

    .tech-section {
        padding: 40px 12px;
        min-height: auto;
    }

    .tech-title {
        font-size: 20px;
    }

    .tech-subtitle {
        font-size: 13px;
    }

    .hs-h1 {
        font-size: 32px;
        letter-spacing: -.5px;
        line-height: 1.2;
    }

    .hs-btns {
        flex-direction: column;
    }

    .hs-btn-primary,
    .hs-btn-secondary {
        text-align: center;
    }

    .seo-h2 {
        font-size: 26px;
        letter-spacing: -.5px;
    }

    .seo-fact-num {
        font-size: 28px;
    }

    .pain-h2 {
        font-size: 26px;
        letter-spacing: -.5px;
    }

    .pain-bottom-h {
        font-size: 22px;
    }

    .st-grid {
        grid-template-columns: 1fr;
    }

    .st-grid>.st-card:first-child {
        border-radius: 20px 20px 0 0;
    }

    .st-grid>.st-card:nth-child(2) {
        border-radius: 0;
    }

    .st-card-shop-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .st-h2 {
        font-size: 26px;
        letter-spacing: -.5px;
    }

    .faq-h2 {
        font-size: 26px;
    }

    .faq-q-text {
        font-size: 15px;
    }

    .faq-a-inner {
        padding-left: 24px;
    }

    .cta-h2 {
        font-size: 30px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-btn-main,
    .cta-btn-sec {
        width: 100%;
        justify-content: center;
    }

    .cta-trust {
        gap: 16px;
    }

    .cta-trust-sep {
        display: none;
    }

    .ep-h2 {
        font-size: 26px;
        letter-spacing: -.5px;
    }

    .ep-pain-stat {
        display: none;
    }

    .ef-grid,
    .ef-grid-bottom {
        grid-template-columns: 1fr;
    }

    .ef-grid>.ef-card:first-child {
        border-radius: 20px 20px 0 0;
    }

    .ef-grid>.ef-card:nth-child(2) {
        border-radius: 0;
    }

    .ef-grid-bottom>.ef-card:last-child {
        border-radius: 0 0 20px 20px;
    }

    .ef-sep-v {
        display: none;
    }

    .ef-h2 {
        font-size: 28px;
    }

    .ef-wrap {
        padding: 64px 24px;
    }

    .ef-header {
        grid-template-columns: 1fr;
    }

    .ef-count {
        font-size: 48px;
    }

    .pr-h2 {
        font-size: 26px;
        letter-spacing: -.5px;
    }

    .pr-card-price-num {
        font-size: 34px;
    }

    .cf-left-labelWrap {
        display: flex;
        justify-content: center;
    }

    .process__tagWrap {
        display: flex;
        justify-content: center;
    }

    .cf-left-p {
        text-align: center;
    }

    .cf-form-bottom {
        justify-content: center;
        margin-top: 14px;
    }

    .cf-policy {
        text-align: center;
    }

    .co-label {
        text-align: center;
    }

    .co-btnWrap {
        display: flex;
        justify-content: center;
    }

    .problems__eyebrowWrap {
        display: flex;
        justify-content: center;
    }

    .co-p {
        text-align: center;
    }

    /* ===== par-mums ===== */
    .aboutUs__title {
        font-size: 26px;
    }

    .aboutUs__cards {
        flex-direction: column;
    }

    .aboutUs__card h4 {
        font-size: 44px;
    }

    .expertiseCard {
        padding: 16px;
    }

    .expertiseCard__title {
        font-size: 18px;
    }

    .processStep {
        gap: 12px;
        padding: 16px 0;
    }

    .processStep__dot {
        width: 38px;
        height: 38px;
    }

    .processStep__title {
        font-size: 16px;
    }

    .processStep__text {
        font-size: 13px;
    }

    .tech-stat-num {
        font-size: 20px;
    }

    /* ===== home ===== */
    .websiteProblemsSection {
        padding: 40px 0;
    }

    .problem-card {
        padding: 16px 14px;
    }

    .solution-card {
        aspect-ratio: auto;
        padding: 20px 14px;
    }

    .solutionCardContent__icon {
        font-size: 22px;
    }

    .solutionCardContent__top {
        gap: 12px;
        min-height: auto;
    }

    .problems__eyebrow {
        font-size: 11px;
    }

    .problems__lead {
        text-align: center;
    }

    .problems__resolve {
        text-align: center;
    }

    .problem-card__icon {
        margin: 0 auto 18px;
    }

    .problem-card {
        text-align: center; 
    }

    .service__item {
        aspect-ratio: 1.3 / 1;
    }

    .servicesMain__text {
        text-align: center;
    }

    .consultationBlackCard__text {
        font-size: 14px;
    }

    .consultation__text {
        text-align: center;
    }

    .portfolio-wrap {
        padding: 40px 16px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 40px;
    }
    
    .portfolio-card-large {
        grid-column: span 1;
        grid-row: span 1;
    }

    .portfolio-h1 {
        font-size: 28px;
    }
    
    .portfolio-sub {
        font-size: 14px;
    }
    
    .portfolio-filters {
        gap: 6px;
        margin-bottom: 36px;
    }
    
    .portfolio-filter-btn {
        padding: 7px 14px;
        font-size: 11px;
    }

    .portfolio-cta {
        padding: 40px 16px;
    }

    .portfolio-cta-title {
        font-size: 24px;
        margin-bottom: 12px;
    }
    
    .portfolio-cta-text {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .portfolio-modal-content {
        width: calc(100% - 24px);
        max-height: 95vh;
        border-radius: 16px;
    }

    .portfolio-modal-img {
        max-height: 40vh;
        border-radius: 16px 16px 0 0;
    }

    .portfolio-modal-body {
        padding: 20px;
    }

    .scroll-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }

    .news-nl-box {
        padding: 20px;
    }

    .hs-breadcrumbs {
        flex-wrap: wrap;
        gap: 10px 4px;
    }

    .hs-grid {
        padding-top: 30px;
    }

    .hs-wrap {
        padding: 88px 0px 30px;
    }

    .seo-wrap {
        padding: 30px 0;
    }

    .seo-top {
        margin-bottom: 30px;
        gap: 20px;
    }

    .seo-divider {
        margin-bottom: 30px;
    }

    .pain-wrap {
        padding: 30px 0;
    }

    .pain-h2 em::after {
        content: none;
    }

    .pain-header {
        margin-bottom: 30px;
    }

    .pain-card-top {
        flex-direction: column;
    }

    .pain-grid {
        margin-bottom: 30px;
    }

    .pain-check-item {
        flex-direction: column;
        text-align: center;
    }

    .processSection {
        padding: 30px 0;
    }

    .faq-wrap {
        padding: 30px 0;
    }

    .faq-counter {
        display: none;
    }

    .faq-q-text {
        font-size: 14px;
    }

    .faq-q {
        padding: 20px 0;
    }

    .cta-wrap {
        padding: 30px 0;
    }

    .cta-btn-main-icon {
        display: none;
    }

    .cta-btn-main {
        padding: 20px;
        line-height: 1.2;
    }
}






/* ============================================================
   АДАПТИВ ДЛЯ НОВОСТЕЙ (NOVOSTI)
============================================================ */

/* 1500px+ */
@media (min-width: 1500px) {
    .news-hero {
        padding: 30px 0 0;
    }

    .news-hero-content {
        max-width: 1000px;
        margin: 60px auto 0;
    }

    .news-hero-h1 {
        font-size: 58px;
        margin-bottom: 28px;
    }

    .news-hero-sub {
        font-size: 20px;
        margin-bottom: 48px;
    }

    .news-filters {
        gap: 20px;
        margin-bottom: 80px;
    }

    .news-filter-btn {
        padding: 12px 28px;
        font-size: 15px;
    }

    .news-grid {
        gap: 40px;
        margin-bottom: 80px;
    }

    .news-card {
        border-radius: 20px;
    }

    .news-card-content {
        padding: 32px;
    }

    .news-card-title {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .news-card-excerpt {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .news-newsletter {
        padding: 100px 0;
    }

    .news-nl-box {
        gap: 80px;
        padding: 80px 60px;
    }

    .news-nl-h2 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .news-nl-text {
        font-size: 16px;
    }

    .news-nl-input {
        padding: 16px 24px;
        font-size: 15px;
    }

    .news-nl-btn {
        padding: 16px 40px;
        font-size: 15px;
    }
}

/* 1200px - Desktop Standard */
@media (max-width: 1500px) and (min-width: 1200px) {
    .news-hero {
        padding: 25px 0 0;
    }

    .news-hero-content {
        max-width: 850px;
        margin: 50px auto 0;
    }

    .news-hero-h1 {
        font-size: 50px;
        margin-bottom: 24px;
    }

    .news-hero-sub {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .news-filters {
        gap: 18px;
        margin-bottom: 70px;
    }

    .news-filter-btn {
        padding: 11px 26px;
        font-size: 14px;
    }

    .news-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 36px;
        margin-bottom: 70px;
    }

    .news-card {
        border-radius: 18px;
    }

    .news-card-content {
        padding: 30px;
    }

    .news-card-title {
        font-size: 19px;
        margin-bottom: 13px;
    }

    .news-card-excerpt {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .news-newsletter {
        padding: 80px 0;
    }

    .news-nl-box {
        gap: 70px;
        padding: 70px 50px;
    }

    .news-nl-h2 {
        font-size: 34px;
        margin-bottom: 18px;
    }

    .news-nl-text {
        font-size: 15px;
    }

    .news-nl-input {
        padding: 15px 22px;
        font-size: 14px;
    }

    .news-nl-btn {
        padding: 15px 36px;
        font-size: 14px;
    }

    .aboutUs__text {
        font-size: 18px;
    }

    .tech-subtitle {
        font-size: 18px;
    }
}

/* 1024px - Tablet Landscape */
@media (max-width: 1200px) and (min-width: 1024px) {
    .news-hero {
        padding: 20px 0 0;
    }

    .news-hero-content {
        max-width: 700px;
        margin: 45px auto 0;
    }

    .news-hero-h1 {
        font-size: 42px;
        margin-bottom: 20px;
    }

    .news-hero-sub {
        font-size: 16px;
        margin-bottom: 35px;
    }

    .news-filters {
        gap: 12px;
        margin-bottom: 60px;
    }

    .news-filter-btn {
        padding: 10px 22px;
        font-size: 13px;
    }

    .news-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 30px;
        margin-bottom: 60px;
    }

    .news-card {
        border-radius: 16px;
    }

    .news-card-content {
        padding: 26px;
    }

    .news-card-title {
        font-size: 17px;
        margin-bottom: 11px;
    }

    .news-card-excerpt {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .news-newsletter {
        padding: 70px 0;
    }

    .news-nl-box {
        gap: 50px;
        padding: 60px 40px;
    }

    .news-nl-h2 {
        font-size: 30px;
        margin-bottom: 16px;
    }

    .news-nl-text {
        font-size: 14px;
    }

    .news-nl-input {
        padding: 14px 20px;
        font-size: 13px;
    }

    .news-nl-btn {
        padding: 14px 32px;
        font-size: 13px;
    }

    .aboutUs__text {
        font-size: 17px;
    }

    .tech-subtitle {
        font-size: 17px;
    }
}

/* 768px - Tablet Portrait */
@media (max-width: 1024px) and (min-width: 768px) {
    .news-hero {
        padding: 0 0 0;
    }

    .news-hero-content {
        max-width: 600px;
        margin: 40px auto 0;
        padding: 0 24px;
    }

    .news-hero-h1 {
        font-size: 36px;
        margin-bottom: 18px;
    }

    .news-hero-sub {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .news-filters {
        gap: 10px;
        margin-bottom: 50px;
        padding: 0 24px;
    }

    .news-filter-btn {
        padding: 9px 18px;
        font-size: 12px;
    }

    .news-list-wrap {
        padding: 0 24px 50px;
    }

    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 50px;
    }

    .news-card {
        border-radius: 14px;
    }

    .news-card-content {
        padding: 22px;
    }

    .news-card-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .news-card-excerpt {
        font-size: 13px;
        margin-bottom: 18px;
    }

    .news-card-meta {
        font-size: 11px;
        padding-top: 14px;
    }

    .news-newsletter {
        padding: 60px 0;
    }

    .news-nl-box {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px 30px;
    }

    .news-nl-h2 {
        font-size: 28px;
        margin-bottom: 14px;
    }

    .news-nl-text {
        font-size: 13px;
    }

    .news-nl-form {
        gap: 10px;
    }

    .news-nl-input {
        padding: 13px 18px;
        font-size: 12px;
    }

    .news-nl-btn {
        padding: 13px 28px;
        font-size: 12px;
        white-space: nowrap;
    }

    .aboutUs__text {
        font-size: 15px;
    }

    .tech-subtitle {
        font-size: 15px;
    }
}

/* ============================================================
   GSAP: pre-hide ТОЛЬКО above-fold элементы (герои).
   Scroll-элементы НЕ скрываем — используем immediateRender:false.
   Добавляем opacity:0 чтобы CSS transition не конфликтовал с GSAP.
============================================================ */

/* Герой (главная) */
.gsap-ready .hero__eyebrow,
.gsap-ready .hero__content h1,
.gsap-ready .hero__content > p,
.gsap-ready .hero__stats,
.gsap-ready .cta-button {
    visibility: hidden;
    opacity: 0;
    transition: none;
}

/* Герой сервисных страниц (hs-section) */
.gsap-ready .hs-badge,
.gsap-ready .hs-h1,
.gsap-ready .hs-sub,
.gsap-ready .hs-btns,
.gsap-ready .hs-trust {
    visibility: hidden;
    opacity: 0;
    transition: none;
}

/* Хлебные крошки */
.gsap-ready .breadcrumbsSection {
    visibility: hidden;
    opacity: 0;
}