:root {
    --bg: #f3f4ff;
    --bg-hero: #ffffff;
    --text-main: #020617;
    --text-white:#fff;
    --c-white:#F4F5F8;
    --text-danger:#FF9800;
    --text-muted: #64748b;
    /* добавим */
    --primary-hi: #3b82f6;                 /* чуть светлее для градиента */
    --btn-shadow: 0 10px 25px rgba(37,99,235,.28);
    --btn-shadow-hover: 0 14px 35px rgba(37,99,235,.38);
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #dbeafe;
    --border-soft: #e2e8f0;
    --c-orange:#FF9000;
    --c-black:#020617;
    --c-grey:#64748B;
    --text-misha:#0f172a;
    --radius-lg: 16px;
    --radius-xl: 999px;
    --gap:var(--fz20);
    --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.12);
    /* контейнер */
    /* откуда выезжает меню (можешь оставить var(--fz50)) */
    --nav-offset: var(--fz50);

    /* радиус на “прилипшем” состоянии */
    --nav-radius: var(--fz20);
    --cont-p: 1rem;
    --cont: 90rem;
    --brand-subtitle:var(--c-white);
    --mtop100: 6.25rem;     /* 100px */
    --mtop80: 5rem;         /* 80px */
    --mtop60: 3.75rem;      /* 60px */

    /* Fonts (desktop = 16px base) */
    --fz16: 1rem;           /* 16px */
    --fz18: 1.125rem;       /* 18px */
    --fz20: 1.25rem;        /* 20px */
    --fz24: 1.5rem;         /* 24px */
    --fz28: 1.75rem;         /* 24px */
    --fz30: 1.875rem;       /* 30px */
    --fz32: 2rem;           /* 32px */
    --fz36: 2.25rem;           /* 32px */
    --fz40: 2.5rem;         /* 40px */
    --fz50: 3.125rem;       /* 50px */
    --fz60: 3.75rem;        /* 60px */

}
body #about strong {text-decoration:unset;}

.mobile-menu__phones a:nth-child(2) {
    display: none;
}
.desc_title p {
    text-align: center;
}
.mtop100 {
    margin-top: var(--mtop100);
}
.mtop80 {
    margin-top: var(--mtop80);
}
.mtop60 {
    margin-top: var(--mtop60);
}
.mt_mini {
    margin-top: .5rem;
}
.container {
    width: calc(100% - var(--cont-p) * 2);
    max-width: var(--cont);
    margin-left: auto;
    margin-right: auto;
}
#variants {
    overflow: clip;
}


/**
* * Подключение стилей для Header
*/
/* чтобы не скроллилось под открытым меню */
body.is-locked {
    overflow-y: hidden;
}

.top-bar {
    transition: .3s;
}
section {
    overflow: hidden;
}
.parallax-wrap{ position: relative; overflow: hidden; }
.parallax-media{
    position: absolute;
    inset: -10%;        /* чуть больше чем контейнер */
    width: 120%;
    height: 120%;
    object-fit: cover;
    will-change: transform;
    transform: translate3d(0,0,0);
}
.hero-content{ position: relative; z-index: 2; }

body.is-locked .top-bar {
    -webkit-transform: translate(0,-100%);
    -moz-transform: translate(0,-100%);
    -ms-transform: translate(0,-100%);
    -o-transform: translate(0,-100%);
    transform: translate(0,-100%);
    display: none;
}
.pc-shot__img img {
    width: 100%;
}
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    width: 100%;
    transition:
            transform .55s cubic-bezier(.22, 1, .36, 1),
            box-shadow .35s ease,
            background-color .35s ease,
            opacity .35s ease,
            height 35s ease;
    will-change: transform;
    transform: translate3d(0, var(--nav-offset), 0);
    opacity: .98;
}
body.scrolling .main-nav{
    opacity: 1;
}
.main-nav__inner {
    padding: var(--fz16) var(--fz30);
    display: flex;
    align-items: center;
    gap: var(--fz24);
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    height: 100%;
    transition-duration: .3s;
    isolation: isolate;
    border-radius: var(--fz20);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(1.25rem) saturate(1.6);
    -webkit-backdrop-filter: blur(1.25rem) saturate(1.6);
    border: 0.0625rem solid rgba(255,255,255,0.35);
    box-shadow: 0 1.25rem 3rem rgba(0,0,0,0.25);
}
.main-nav__inner > *{
    position: relative;
    z-index: 1;
}
.main-nav__inner::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    background: linear-gradient(
            to bottom,
            rgba(255,255,255,0.55),
            rgba(255,255,255,0.00) 55%
    );
    opacity: 0.55;
    pointer-events:none;
    z-index: 0;
}
.main-nav__inner::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    pointer-events:none;

    /* Вариант 1: data-uri (ничего не грузить отдельным файлом) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 11.25rem 11.25rem;

    mix-blend-mode: multiply;
    opacity: 0.35; /* 0.25–0.4 обычно “как в figma” */
    z-index: 0;
}
.gt_float_switcher .gt_options {
    position: fixed !important;
    z-index: 2 !important;
    min-width: 166px !important;
    border: 1px solid rgba(244,245,248,.10);
    border-radius: 1.25rem;
    background: rgba(255,255,255,0.7) !important;
    backdrop-filter: blur(0.8rem);
}
.gt_float_switcher .gt_options a {
    padding: 10px 15px 20px !important;
}
.gt_float_switcher {
    font-size: 1rem !important;
    border-radius: var(--fz20) !important;
    overflow: unset !important;
}
.gt_float_switcher .gt-selected {
    border: 1px solid rgba(244,245,248,.10) !important;
    border-radius: 1.25rem !important;
    background: rgba(255,255,255,.03) !important;
    backdrop-filter: blur(0.8rem) !important;
    overflow: unset !important;
}
.gt_float_switcher {
    background: rgba(255,255,255,.03) !important;
    backdrop-filter: blur(0.8rem) !important;
    font-size: .95rem !important;
}
.gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code {
    color: var(--c-black);
}

.gt_float_switcher img {
    width: var(--fz24) !important;
}
.gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path fill='var(--c-black)' d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z'/></svg>") !important;
}
.main-nav__logo {
    font-weight: 700;
    letter-spacing: 0.12em;
}
.main-nav__logo svg {

    width: 172px;
    height: 49px;
}

.main-nav__menu {
    list-style: none;
    display: flex;
    gap: var(--fz20);
    padding: 0;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    align-items: baseline;
}

.main-nav__menu a {
    text-decoration: none;
    color: var(--text-main);
    font-size: var(--fz18);
    font-weight: 400;
}

.main-nav__menu a:hover {
    color: var(--primary);
}

.main-nav__actions {
    display: flex;
    gap: var(--fz20);
    align-items: center;
    justify-content: space-between;
}
.main-nav__actions .btn {
    margin-left: auto;
}
.main-nav__actions-btns {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.tel {
    font-size: var(--fz24);
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
}

.mail {
    font-size:var(--fz18);
    text-decoration: none;
    font-weight: 400;
    color: var(--text-main);
}

.btn--primary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--fz24);
    overflow: hidden;
    position: relative;
}

/* кнопки */

.btn {
    border-radius: var(--radius-xl);
    padding: var(--fz16) var(--fz24);
    border: 1px solid transparent;
    font-size: var(--fz16);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 2px;
    width: max-content;
}


/* блик */
.btn--primary::before{
    content:"";
    position:absolute;
    inset:-2px;
    background: linear-gradient(
            120deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.35) 22%,
            rgba(255,255,255,0) 45%
    );
    transform: translateX(-120%);
    transition: transform .55s ease;
    pointer-events:none;
}

.btn--primary:hover{
    background: linear-gradient(180deg, #60a5fa, var(--primary-dark));
    border-color: rgba(255,255,255,.18);
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-2px);
    filter: saturate(1.05);
}

.btn--primary:hover::before{
    transform: translateX(120%);
}

.btn--primary:active{
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(37,99,235,.28);
}

.btn--primary:focus-visible{
    outline: none;
    box-shadow:
            var(--btn-shadow),
            0 0 0 4px rgba(37,99,235,.25);
}

/* уважение к reduced motion */
@media (prefers-reduced-motion: reduce){
    .btn--primary,
    .btn--primary::before{ transition: none; }
}
.text-sale {
    position: relative;
    font-weight: 600;
    animation: text-shine 1.4s ease-in-out infinite;
}

/* основная анимация цвета */
@keyframes text-shine {
    0% {
        color: #ff4b00;
    }
    50% {
        color: var(--text-muted);
    }
    100% {
        color: #ff4b00;
    }
}

@-webkit-keyframes text-shine {
    0% {
        color: #ff4b00;
    }
    50% {
        color: var(--text-muted);
    }
    100% {
        color: #ff4b00;
    }
}

.btn--lg {
    padding: 12px var(--fz24);
    font-size: var(--fz16);
}

.btn--primary {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.btn--primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn--white {
    background-color: var(--c-white);
    border-color: var(--c-white);
    width: max-content;
    color: var(--primary);
}

.btn--ghost {
    background: transparent;
    color: var(--text-main);
    border-color: var(--border-soft);
}

.btn--ghost:hover {
    background: var(--primary-soft);
    border-color: var(--primary-soft);
}

.btn--white:hover {
    background: var(--primary-soft);
    border-color: var(--primary-soft);
}

/* бургер */

.burger {
    display: none;
    margin-left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: #ffffff;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
            box-shadow 0.2s ease,
            transform 0.2s ease,
            border-color 0.2s ease;
}

.burger:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
    border-color: var(--primary-soft);
}

/* одна линия, которая превращается в крест */

.burger span {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: #0f172a;
    transition:
            background 0.22s ease,
            transform 0.22s ease,
            opacity 0.2s ease;
}

.burger span::before,
.burger span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: #0f172a;
    transform-origin: center;
    transition: transform 0.22s ease;
}

.burger span::before {
    transform: translateY(-6px);
}

.burger span::after {
    transform: translateY(6px);
}

.burger--active span {
    background: transparent;
}

.burger--active span::before {
    transform: rotate(45deg);
}

.burger--active span::after {
    transform: rotate(-45deg);
}

/* МОБИЛЬНОЕ МЕНЮ — ОВЕРЛЕЙ + ПАНЕЛЬ */

.mobile-menu {
    position: fixed;
    z-index: 60;
    background: rgba(5, 10, 25, 0.75);
    backdrop-filter: blur(16px);
    display: flex;
    justify-content: flex-end;
    left: 0;
    top: 0;
    right: 0;
}

.mobile-menu__panel {
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, #111827 0, #020617 40%);
    color: #e5e7eb;
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: -20px 0 40px rgba(15, 23, 42, 0.6);
    animation: mobile-panel-in 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    overflow-y: auto;
}

@keyframes mobile-panel-in {
    from {
        transform: translateX(40px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu__brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mobile-menu__brand-tag {
    display: none;
}
.mobile-menu__phones {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mobile-menu__cta-group .btn--ghost {
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-menu__close {
    border: none;
    background: var(--primary);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* Навигация */

.mobile-menu__nav {
    margin-top: 8px;
}

.mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.mobile-menu__list button {
    width: 100%;
    text-align: left;
    border-radius: 16px;
    padding: 5px 10px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.9);
    cursor: pointer;
    transition:
            border-color 0.2s ease,
            background 0.2s ease,
            transform 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--c-white);
}

.mobile-menu__list button span {
    font-size: 14px;
    font-weight: 500;
}

.mobile-menu__list button small {
    font-size: 12px;
    opacity: 0.7;
}

/*.mobile-menu__list button:hover {*/
/*    border-color: #38bdf8;*/
/*    background: rgba(15, 23, 42, 1);*/
/*    transform: translateY(-1px);*/
/*}*/

.mobile-menu__link--accent {
    border-color: #f97316 !important;
    background: rgba(248, 113, 113, 0.1) !important;
}

/* Контакты */

.mobile-menu__contacts {
    margin-top: 4px;
    padding: 12px 10px 10px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.mobile-menu__contacts-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-bottom: 6px;
}

.mobile-menu__phones a {
    color: #e5e7eb;
    font-weight: 600;
    text-decoration: none;
    display: block;
}

.mobile-menu__mail {
    font-size: 13px;
    opacity: 0.85;
    text-decoration: none;
    color: #e5e7eb;
    margin-top: 5px;
}

.mobile-menu__cta-group {
    display: flex;
    gap: 8px;
}

.mobile-menu__cta-group .btn--lg {
    flex: 1;
}

/* Мини-карта */

.mobile-menu__map {
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.4);
}

.mobile-menu__map-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.mobile-menu__map-address {
    font-size: 13px;
    margin-top: 2px;
    margin-bottom: 6px;
}

.mobile-menu__map-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.5);
    height: 170px;
}

.mobile-menu__map-frame iframe {
    width: 100%;
    height: 100%;
}

.mobile-menu__map-actions {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.mobile-menu__map-actions a {
    color: #e5e7eb;
    opacity: 0.85;
}

/* анимация появления оверлея */

.mobile-menu-fade-enter-active,
.mobile-menu-fade-leave-active {
    transition: opacity 0.25s ease;
}

.mobile-menu-fade-enter-from,
.mobile-menu-fade-leave-to {
    opacity: 0;
}
#pc-mini-map {
    height: 100%;
}
#hero {
    height: 100vmin;
    position: relative;
    overflow: hidden;
}
#hero video {
    position: absolute;
    inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;        /* чтобы растягивалось как фон */
    object-position: center;  /* можно right center */
    z-index: 0;
    pointer-events: none;     /* чтобы клики шли по кнопкам */
}
.hero{
    position: relative;
    overflow: hidden;
}

/* видео — самый нижний слой */
.hero__bg-video,
.hero__bg-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    -moz-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
}
.hero__bg-video::-webkit-media-controls,
.hero__bg-video::-webkit-media-controls-panel,
.hero__bg-video::-webkit-media-controls-play-button,
.hero__bg-video::-webkit-media-controls-start-playback-button{
    display: none !important;
    -webkit-appearance: none;
    opacity: 0;
}
/* лёгкое затемнение (если нужно) */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index: 1;
    background: rgba(0,0,0,.35);
}

/* СИНИЙ ГРАДИЕНТ как на скрине */
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index: 1;
    pointer-events:none;

    /* два слоя: большое радиальное пятно + лёгкий уход вправо */
    background:
            radial-gradient(900px 560px at 22% 62%,
            rgba(37,99,235,.55) 0%,
            rgba(37,99,235,.28) 35%,
            rgba(37,99,235,.12) 55%,
            rgba(37,99,235,0) 72%
            ),
            linear-gradient(90deg,
            rgba(37,99,235,.16) 0%,
            rgba(37,99,235,0) 55%
            );

    /* если хочешь ещё мягче (но может грузить GPU) */
    filter: blur(14px);
    transform: translateZ(0);
}

.hero__container{
    position: relative;
    z-index: 2;     /* выше before/after */
    padding: 10rem 0 5rem;
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


/* пример кнопки (если надо) */
.hero__btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 18px;
    border-radius: 999px;
}
.hero__container p:nth-child(1) {
    font-size: var(--fz20);
    margin-bottom: var(--fz30);
}
.hero__container p:last-of-type {
    font-size: var(--fz16);
    margin-top: var(--fz30);
}
.hero__container p:last-of-type strong {
    font-weight: 700;
}
.hero__container h1 {
    font-size: var(--fz50);
    font-weight: 500;
}
.hero__container h1 strong {
    font-weight: 500;
}
.hero__container p br {
    margin: 0 0 0.5rem 0;
}

.spec-off__head strong {
    text-decoration-thickness: 5%;
}
.hero__container .btn {
    margin-top: var(--fz40);
}
.features_title p {
    font-size: var(--fz32);
    font-weight: 500;
    text-align: center;
}
.features_title p strong {
    font-weight: 500;
}
.p_bez_tw p {
    font-size: var(--fz24);
}
.p_lbez_tw p {
    font-size: var(--fz20);
    margin-top: var(--fz16);

}
/*INSTRUMENTS*/

.services-cards {
    padding: 3rem 0;
}

.services-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.svc-card {
    border-radius: 1.25rem;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-card__media {
    height: 10rem; /* верхняя картинка */
    background: rgba(255, 255, 255, 0.04);
}

.svc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.svc-card__img--empty {
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

.svc-card__body {
    background: #fff;
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
}

.svc-card__title {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    line-height: 1.2;
    font-weight: 800;
    color: #0b1220;
}

.svc-card__text {
    margin: 0 auto 1.25rem;
    max-width: 18rem;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.55;

    /* чтобы текст был ровно как в карточках на скрине */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.svc-card__text p {
    margin: 0;
}

.svc-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
    padding: 0.6rem 0.85rem;
    border-radius: 999rem;
}

.svc-card__link:hover {
    text-decoration: underline;
}


.features__title{
    text-align: center;
    font-size: var(--fz32);   /* 36px */
    font-weight: 500;
}
.features__title strong {
    font-weight: 500;
}

.features__subtitle{
    text-align: center;
    color: var(--c-grey);
    font-size: var(--fz20);
    margin-top: 1rem;
}
.features {
    margin-bottom: 6.25rem;
}
    /* grid */
.features__grid{
    margin-top: 3.75rem; /* 60px */
    display: grid;
    gap: var(--g);
    grid-template-columns: 1fr;
    --g:var(--fz20);
    padding-bottom: var(--fz40);
}

/* md: 2 cols */
@media (min-width: 48rem){ /* 768px */
    .features__grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* lg: 4 cols */
@media (min-width: 64rem){ /* 1024px */
    .features__grid{
        grid-template-columns: repeat(4, 1fr);
    }
}

/* card */
.feature-card{
    padding: 3rem 1.5rem;        /* py-16 px-6 */
    background: #fff;
    border: 0.0625rem solid #f3f4f6;
    border-radius: 1rem;         /* rounded-2xl */
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.feature-card__icon{
    width: 3.125rem; /* 50px */
    height: auto;
    display: block;
}

.feature-card__content{
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-card__title{
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
    font-weight: 500;
}
.feature-card{
    transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{
    transform: translateY(-0.25rem);
    box-shadow: 0 0.75rem 2rem rgba(0,0,0,.10);
}
.feature-card__text{
    margin-top: 1rem;
    font-size: 1rem; /* 16px */
    line-height: 1.6;
    color: var(--grey);
}
.services{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 5rem;
    padding-bottom: 6.25rem;
    height: 100%;
}

.services__title{
    text-align: center;
    font-size: var(--fz32); /* 36px */
    font-weight: 500;
    color: var(--c-white);
}
.services__title strong {
    text-underline-offset: 0px;
}
.services__title p {
    font-size: var(--fz20);
    font-weight: 400;
    margin-top: .8rem;
}
.services__container{
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.services__grid{
    margin-top: 3.75rem; /* 60px */
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
    --card-r: 1.5rem;           /* скругление карточки */
    --card-border: rgba(15,23,42,.10);
    --shadow: 0 1.25rem 3rem rgba(2,6,23,.10);

    --text: #0f172a;
    --muted: #64748b;
    --blue: #2563EB;
    --media-ratio: 16/9;
}

@media (min-width: 48rem){ /* 768px */
    .services__grid{
        grid-template-columns: 1fr;
    }
}

/* lg: 3 колонки */
@media (min-width: 64rem){ /* 1024px */
    .services__grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

/* карточка */
/* ссылка-карточка */
.service-card{
    display: flex;
    flex-direction: column;
    border-radius: var(--card-r);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    box-shadow: var(--shadow);
    transform: translateZ(0);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .3s ease;
}

.service-card:hover{
    transform: translateY(-0.25rem);
    box-shadow: 0 1.75rem 4rem rgba(2,6,23,.14);
    border-color: rgba(37,99,235,.25);
}
.service-card:hover .service-card__title {
    color: var(--primary);
}
/* верхняя часть с фото/видео */
.service-card__media{
    position: relative;
    aspect-ratio: var(--media-ratio);
    background: #061a27;
}

/* медиа на весь блок */
.service-card__bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* мягкий блеск/градиент как “дорогой” UI */
.service-card__media::after{
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(80% 70% at 50% 0%, rgba(255,255,255,.08), transparent 60%),
            linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.06));
    pointer-events: none;
}

/* низ: белый блок */
.services_bottom{
    padding: 2.25rem 2rem 2.5rem;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    /* важно: чтобы кнопка всегда была внизу */
    flex: 1;
    min-height: 16rem; /* подгони под дизайн */
}

.service-card__title{
    margin: 0;
    font-size: 1.5rem; /* ~24px при 16px base */
    line-height: 1.2;
    font-weight: 700;
    color: var(--text);
}

/* описание */
.services-card__desc{
    margin: 0;
    max-width: 22rem;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}

.services-card__desc p{
    margin: 0;
}
.service-card__btn{
    margin-top: 5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    color: var(--blue);
    font-weight: 600;
    font-size: 1rem;

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

/* лёгкое движение стрелки на hover */
.service-card:hover .service-card__btn{
    transform: translateY(-0.125rem);
}

.service-card:hover .service-card__btn svg{
    transform: translateX(.125rem) translateY(-.125rem);
}

.service-card__btn svg{
    transition: transform .2s ease;
}

/* красивый focus для доступности */
.service-card:focus-visible{
    outline: none;
    box-shadow:
            0 0 0 .25rem rgba(37,99,235,.25),
            var(--shadow);
}
/* адаптив */
@media (max-width: 62rem) {
    .services-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .services-cards__grid {
        grid-template-columns: 1fr;
    }

    .svc-card__media {
        height: 11rem;
    }

    .svc-card__body {
        padding: 1.25rem 1rem 1rem;
    }
}
/*PRICE*/
#price {
    padding-top: 5rem;
    padding-bottom: 6.25rem;
    position: relative;
    overflow: hidden;
}
#price:after {
    content: '';
    position: absolute;
    width: 418px;
    height: 418px;
    top: 50%;
    right: -20rem;
    transform: translate(0,-50%);
    background: rgba(37, 99, 235, 0.5);
    box-shadow: 0px 4px 104px 70px rgba(37, 99, 235, 0.2);
    filter: blur(200px);
    border-radius: 300px;
}
.price_inner h2 {
    font-size: var(--fz50);
    font-weight: 500;
    margin-bottom: var(--fz20);
    position: relative;
    z-index: 22;
}
.price_inner p {
    position: relative;
    z-index: 22;
}
.price_inner h2 strong {
    font-weight: 500;
}
.price_inner p:nth-child(2),
.price_inner p:nth-child(3),
.price_inner p:nth-child(4),
.price_inner p:nth-child(6),
.price_inner p:nth-child(5),
.price_inner p:nth-child(7),
.price_inner p:nth-child(8),
.price_inner p:nth-child(9),
.price_inner p:nth-child(10),
.price_inner p:nth-child(11)
{
    color: var(--c-grey);
    line-height: 1.2;
    font-size: var(--fz30);
}
.price_inner b {
    font-size: var(--fz36);
    margin-top: var(--fz30);
    display: block;
    font-weight: 500;
}
.price_inner p strong {
    font-weight: 500;
}
.price_inner p strong:after {
    background-color: var(--c-grey);
}

.price_inner b strong:after {
    background-color: var(--c-black);
}

#brend{
    position: relative;
    overflow: hidden;
    min-height: 60vh;                /* базовая высота */
}

/* видео как фон */
.brend__bg-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* затемнение для читаемости */
#brend::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
            to bottom,
            rgba(2,6,23,.55),
            rgba(2,6,23,.35)
    );
    z-index: 1;
}

/* контент поверх */
.brend_inner{
    position: relative; /* вместо absolute */
    z-index: 2;
    padding-top: 5rem;
    padding-bottom: 6.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* title */
.bi_title{
    text-align: center;
    max-width: 46rem;
    margin: 0 auto;
}

.bi_title h2{
    font-size: var(--fz32);
    color: var(--c-white);
    font-weight: 500;
    line-height: 1.15;
}
.bi_title h2 strong {
    font-weight: 500;
}
.bi_title p{
    color: var(--c-white);
    margin-top: 0.5rem;
    line-height: 1.6;
    font-size: var(--fz20);
}

/* grid */
.bi_grid{
    display: grid;
    gap: var(--fz20);
    margin-top: var(--fz50);
    grid-template-columns: 1fr; /* mobile default */
}

.big_img{
    border-radius: var(--fz20);
    overflow: hidden;
    background: rgba(255,255,255,.06);
}

.big_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* мобильная высота карточек */
.big_img{
    height: 10rem;
}

/* >= 560px: 2 колонки */
@media (min-width: 35rem){
    #brend{ min-height: 90vh; }
    .bi_grid{ grid-template-columns: repeat(2, 1fr); }
    .big_img{ height: 12rem; }
}

/* >= 768px: 3 колонки (обычно красивее чем сразу 5) */
@media (min-width: 48rem){
    .bi_grid{ grid-template-columns: repeat(3, 1fr); }
    .big_img{ height: 10rem; }
}

/* >= 1024px: 5 колонок как ты хотел */
@media (min-width: 64rem){
    #brend{ min-height: 60vh; }
    .bi_grid{ grid-template-columns: repeat(5, 1fr); }
    .big_img{ height: 8rem; }
}

/* чтобы на очень низких экранах не было “150vh” */
@media (max-height: 40rem){
    #brend{ min-height: 40rem; }
}
/*PORTFOLIO*/
#portfolio {
    padding-top: 5rem;
    padding-bottom: 6.25rem;
}
.portfolio_title {
    color: var(--c-black);
}
.portfolio_title strong {
    font-weight: 500;
}
.portfolio_title h2 {
    margin-bottom: 1rem;
}
.portfolio_title p {
    color: var(--c-grey);
    margin-top: unset;
}
.portfolio__inner{
    text-align: center;
}

.portfolio__head{
    margin-bottom: 2.5rem; /* 40 */
}

.portfolio__title{
    font-size: 2rem; /* 32 */
    font-weight: 500;
    margin-bottom: 0.625rem; /* 10 */
}

.portfolio__subtitle{
    margin: 0 auto;
    max-width: 45rem; /* 720 */
    font-size: 1.125rem; /* 18 */
    color: #64748b;
}

/* GRID */
.portfolio__grid{
    position: relative;
    margin-top: 2.5rem; /* 40 */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.75rem; /* 12 */
}


.portfolio-card{
    border-radius: 1.125rem; /* 18 */
    overflow: hidden;
    position: relative;
    height: 26.25rem; /* 420 */
}

.portfolio-card__link{
    display: block;
    height: 100%;
}

.portfolio-card__image-wrap{
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: #020617;
    height: 100%;
}

.portfolio-card__image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform 0.4s ease, filter 0.4s ease;
}

.portfolio-card__overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(15,23,42,.1) 0%,
            rgba(15,23,42,.4) 40%,
            rgba(15,23,42,.95) 100%
    );
    pointer-events: none;
}

.portfolio-card__bottom{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.125rem; /* 18 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem; /* 10 */
    padding: 0 3.125rem 1.25rem; /* 0 50 20 */
}

.portfolio-card__domain{
    font-size: 1.375rem; /* 22 */
    font-weight: 600;
    color: #f5f5f5;
}

.portfolio-card__tags{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem; /* 8 */
}

.portfolio-card__tag{
    font-size: 0.875rem; /* 14 */
    font-weight: 500;
    padding: 0.375rem 0.875rem; /* 6 14 */
    border-radius: 999rem;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #f9fafb;
    box-shadow: 0 0.5rem 1.125rem rgba(37,99,235,.45); /* 8 18 */
}

.portfolio-card__link:hover .portfolio-card__image{
    transform: scale(1.06);
    filter: brightness(1.03);
}

/* Адаптив */
@media (max-width: 64rem){ /* 1024 */
    .portfolio__grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem){ /* 640 */
    .portfolio{
        padding: 3.75rem 0 4.375rem; /* 60 70 */
    }

    .portfolio-card{
        height: 15.625rem; /* 250 */
    }

    .portfolio__title{
        font-size: 1.5rem; /* 24 */
    }

    .portfolio__subtitle{
        font-size: 0.9375rem; /* 15 */
    }

    .portfolio__grid{
        grid-template-columns: 1fr;
        gap: 0.875rem; /* 14 */
    }

    .portfolio-card__bottom{
        bottom: 0.875rem; /* 14 */
        padding: 0 1.25rem 1rem; /* чуть аккуратнее на мобиле */
    }

    .portfolio-card__domain{
        font-size: 1rem; /* 16 */
    }

    .portfolio-card__tag{
        font-size: 0.6875rem; /* 11 */
        padding: 0.3125rem 0.75rem; /* 5 12 */
    }
}

.clients{
    padding: 4.5rem 0; /* 72px */
    background: #fff;
}

.clients__inner{
    text-align: center;
}

.clients__title h2{
    font-size: var(--fz32); /* 32 */
    font-weight: 500;
    margin-bottom: 0.625rem; /* 10 */
    color: #0f172a;
}
.clients__title h2 strong {
    font-weight: 500;
}
.clients__title h2 strong:after {
    background-color: var(--c-black);
}
.clients__title > p {
    font-size: var(--fz20);
    font-weight: 500;
    color: var(--c-grey);
}
.clients__subtitle{
    margin: 0 auto 1.625rem; /* 26 */
    font-size: 1rem; /* 16 */
    font-weight: 600;
    color: #64748b;
}

.clients__marquee{
    overflow: hidden;
    border-radius: 1.125rem; /* 18 */
    border: 0.0625rem solid #e2e8f0;
    padding: 2.5rem 0; /* 40 */
    background: #f8fafc;
    margin-top: var(--fz60);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.clients__track{
    display: flex;
    width: max-content;
    will-change: transform;
    transform: translate3d(0,0,0);
    animation: marquee 26s linear infinite;
    gap: 2rem; /* 32 */
    padding-left: 1.5rem; /* 24 */
}

.clients__track--second{
    margin-top: 1.875rem; /* 30 */
    animation-direction: reverse;
}

.clients__group{
    display: flex;
    gap: 2rem; /* 32 */
    width: max-content;
}

.clients__logo{
    align-items: center;
    background: #fff;
    border: 1px solid #cbd5f5;
    border-radius: var(--fz20);
    box-shadow: 0 10px 26px #0f172a0f;
    color: #0f172a;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    font-size: var(--fz16);
    font-weight: 800;
    gap: 0.5rem;
    min-width: 7.5rem;
    padding: 1rem 1.2rem;
}

.clients__logo-icon{
    width: 5rem;  /* 48 */
    height: 5rem; /* 48 */
    object-fit: contain;
    display: block;
}

.clients__logo-label{
    white-space: nowrap;
    font-weight: 600;
    font-size: var(--fz16);
}

@keyframes marquee{
    from{ transform: translate3d(0,0,0); }
    to{ transform: translate3d(-50%,0,0); }
}

.clients__marquee:hover .clients__track{
    animation-play-state: paused;
}

@media (max-width: 35rem){ /* 560 */
    .clients{
        padding: 3.5rem 0; /* 56 */
    }

    .clients__marquee{
        padding: 1.75rem 0; /* 28 */
    }

    .clients__logo{
        min-width: 6.875rem; /* 110 */
    }

    .clients__logo-icon{
        width: 2.5rem;  /* 40 */
        height: 2.5rem; /* 40 */
    }
}
/*Special offer*/
#special_offer .hero__container p:last-of-type {
    display: none;
}
/* ====== Special offer ====== */
.spec-off{
    position: relative;
    overflow: clip;
    color: #fff;
    padding-block: clamp(13.5rem, 5vw, 4.5rem);
    isolation: isolate;
}

.spec-off__bg-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.55) saturate(1.05);
    transform: scale(1.02);
}
.d-none {
    display: none;
}
.portfolio__head h2 {
    font-size: var(--fz32);
    margin-bottom: 1rem;
    font-weight: 500;
}
.portfolio__head h2 strong {
    font-weight: 500;
}

.portfolio__head p {
    color: var(--c-grey);
}
.portfolio__head h2 strong:after {
    background-color: var(--c-black);
}
.spec-off__container{
    position: relative;
    z-index: 1;
}

/* Head */
.spec-off__head h2 {
    font-size: var(--fz50);
    font-weight: 300;
}
.spec-off__head h2 strong {
    font-weight: 300;
}

.spec-off__head > p {
    margin-top: var(--fz40);
    font-size: var(--fz40);
    font-weight: 500;
}
.spec-off__subtitle{
    margin-top: 1.05rem;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 600;
    opacity: 0.95;
}
.price_with_discount {
    margin-top: 0.6rem;
}
.discount {
    color: #64748B;
    font-size: var(--fz30);
    font-weight: 500;
    position: relative;
}
.normal_price {
    font-size: var(--fz40);
    color: var(--primary);
    font-weight: 600;
}
.spec-off__lead{
    margin-top: 0.75rem;
    display: grid;
    gap: 0.55rem;
}

.spec-off__lead-text{
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    opacity: 0.9;
}

.spec-off__price{
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.spec-off__price-old{
    opacity: 0.55;
    text-decoration: line-through;
    text-decoration-thickness: 0.1em;
    text-decoration-color: rgba(255,255,255,0.45);
    font-size: clamp(0.9rem, 1.2vw, 1rem);
}

.spec-off__price-new{
    color: rgba(65, 130, 255, 1);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}

/* Panel (glass block behind cards) */
.spec-off__panel{
    margin-top: clamp(0.025rem, 3vw, 1.25rem);
    position: relative;
    overflow: hidden;
}
.price_inner button {
    margin-top: var(--fz40);
}
.spec-off__panel-label{
    position: relative;
    z-index: 1;
    font-size: var(--fz32);
    opacity: 0.9;
}

/* Cards grid */
.spec-off__grid{
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 62rem){
    .spec-off__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 38rem){
    .spec-off__grid{ grid-template-columns: 1fr; }
}

.spec-off__card{
    border-radius: 1.25rem;
    padding: 1.25rem;
    border: 0.0625rem solid rgba(255,255,255,0.14);
    min-height: 17.5rem;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.65rem;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.spec-off__card > p {
    font-size: var(--fz18);
    font-weight: 300;
}
.spec-off__card:hover{
    transform: translateY(-0.2rem);
    border-color: rgba(255,255,255,0.22);
    background: rgba(10, 16, 28, 0.40);
}

.spec-off__icon{
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    opacity: 0.95;
}

.spec-off__icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.spec-off__card-title{
    margin: 0;
    font-weight: 500;
    font-size: var(--fz20);
    line-height: 1.2;
}

.spec-off__card-text{
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    opacity: 0.8;
    max-width: 22rem;
}


/* Footer */
.spec-off__footer{
    margin-top: var(--fz40);
    display: grid;
    gap: var(--fz30);
}
.port--btn {
    padding: .6rem 2rem;
}
.pc-news-single__content ul {
    list-style: disc;
    padding-left: 40px;
}

.spec-off__note{
    font-size: 0.8rem;
    opacity: 0.65;
}
.reviews{
    position: relative;
    padding: clamp(4rem, 6vw, 5.5rem) 0;
    overflow: hidden;
    color: #0f172a;
}

.reviews__bg{
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.reviews__grid{
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(15,23,42,0.05), rgba(15,23,42,0.08));
    background-size: 2rem 2rem;
    mask-image: radial-gradient(circle at 50% 0, rgba(0,0,0,0.55), transparent 60%);
    opacity: 0.55;
}

.reviews__inner{
    position: relative;
    z-index: 1;
}

.reviews__eyebrow{
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.reviews__title{
    margin: 0.5rem 0 0;
    font-size: clamp(1rem, 1.2vw, 1.05rem);
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.reviews__subtitle{
    margin: 0.75rem 0 1.25rem;
    font-size: clamp(0.95rem, 1.1vw, 1rem);
    color: var(--text-muted, #64748b);
    max-width: 35rem;
}

/* meta */
.reviews__meta{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    margin-top: 4rem;
}
.reviews_title h2 {
    font-size: var(--fz32);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.reviews_title p {
    color: var(--c-grey);
}
.reviews_title {
    text-align: center;
}
.reviews_title h2 strong {
    font-weight: 500;
}
.reviews__stat{
    padding: 0.65rem 0.9rem;
    border-radius: 999rem;
    background: rgba(15,23,42,0.92);
    border: 0.0625rem solid rgba(148,163,184,0.5);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.reviews__stat-value{
    font-size: var(--fz16);
    font-weight: 600;
    color: #e5e7eb;
}

.reviews__stat-label{
    color: #94a3b8;
    font-size: clamp(0.85rem, 1vw, 1rem);
}

/* list */
.reviews__list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.125rem;
    margin-top: 0.65rem;
}

@media (max-width: 64rem){
    .reviews__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem){
    .reviews__list{ grid-template-columns: 1fr; }
}

.review{
    position: relative;
    border-radius: 1.125rem;
    background: rgba(15,23,42,0.96);
    border: 0.0625rem solid rgba(148,163,184,0.5);
    box-shadow: 0 1.125rem 2.8125rem rgba(15,23,42,0.22);
    padding: 1rem 1rem 0.9rem;
    backdrop-filter: blur(0.625rem);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

.review:hover{
    transform: translateY(-0.25rem);
    border-color: rgba(56,189,248,0.55);
}

.review__quote-icon{
    position: absolute;
    top: 0.65rem;
    right: 1rem;
    font-size: 2.5rem;
    line-height: 1;
    color: rgba(148,163,184,0.35);
    font-family: ui-serif, Georgia, serif;
}

.review__header{
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.review__avatar{
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999rem;
    background: radial-gradient(circle at 30% 30%, #38bdf8, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f9fafb;
    box-shadow: 0 0.5rem 1rem rgba(37,99,235,0.35);
    flex: 0 0 auto;
}

.review__person{
    flex: 1 1 auto;
    min-width: 0;
}

.review__name{
    margin: 0;
    font-size: 1.05rem;
    color: #e5e7eb;
}

.review__role{
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review__rating{
    font-size: 1.05rem;
    color: #facc15;
    flex: 0 0 auto;
}

.review__star + .review__star{ margin-left: 0.0625rem; }

.review__text{
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: #e5e7eb;
}

.review__footer{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.review__tag{
    padding: 0.3rem 0.55rem;
    border-radius: 999rem;
    background: rgba(37,99,235,0.18);
    border: 0.0625rem solid rgba(56,189,248,0.5);
    color: #e0f2fe;
    font-size: 0.85rem;
}

.review__country{
    color: #94a3b8;
    font-size: 0.85rem;
}
.aboutx{
    padding: 5rem 0;
    background: #f6f7fb;
}

.aboutx__grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem;
    align-items: start;
}

.aboutx__title{
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    color: #0f172a;
}

.aboutx__content{
    color: #475569;
    font-size: var(--fz16);
    font-weight: 400;
    line-height: 1.5;
}
.aboutx__content b {
    font-weight: 500;
}
.aboutx__content p{
    margin: 0 0 1rem;
}

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

.aboutx__content ul,
.aboutx__content ol{
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    list-style: disc;
}

.aboutx__content li{
    margin: 0 0 0.5rem;
}

.aboutx__content a{
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: .2em;
    text-decoration-thickness: .1em;
}
footer .procode-logo-widget {
    color: var(--c-white) !important;
}
.aboutx__grid br {
    margin-top: 1rem;
    display: block;
}
@media (max-width: 64rem){
    .aboutx__grid{
        gap: 2.5rem;
    }
}

@media (max-width: 48rem){
    .aboutx{
        padding: 3.75rem 0;
    }

    .aboutx__grid{
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.footer{
    background: #020617;
    color: rgba(226,232,240,.92);
    padding: 4.5rem 0 3.25rem;
}

.footer__inner{
}

.footer__grid{
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
}

.footer__brand{
}

.footer__col{
}

.footer__col-title{
    font-size: var(--fz18);
    font-weight: 500;
    color: var(--c-white);
    margin: 0 0 1.1rem;
}
footer .procode-logo-widget__subtitle {
    color: var(--c-white);
}
.footer__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}
.footer__list .footer__item:last-of-type:hover {
    pointer-events: none;
}
.footer__item{
}

.footer__link{
    font-size: var(--fz16);
    color: var(--c-white);
    font-weight: 300;
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}

.footer__link:hover{
    color: rgba(226,232,240,.72);
}

.footer__link--text{
    cursor: default;
}

.footer__bottom{
    margin-top: 3rem;
    font-size: var(--fz16);
    color: var(--c-white);
    font-weight: 300;
}

/* адаптив */
@media (max-width: 64rem){
    .footer__grid{
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 40rem){
    .footer{
        padding: 3.25rem 0 2.5rem;
    }

    .footer__grid{
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer__bottom{
        margin-top: 2rem;
    }
}
.fb_text {
    margin-top: 2rem;
}
.fb_text p {
    font-size: var(--fz16);
    font-weight: 300;
}


.page-template-page-razrabotka #content {
    display: flex;
    flex-direction: column;
}
#hero {
    order:1;
}
#variants {
    order:3;
}
#features {
    order: 2;
}
#price {
    order: 4;
}
#brend {
    order: 5;
}
#portfolio {
    order: 6;
}
#clients {
    order: 7;
}
#special_offer {
    order: 8;
}
#reviews {
    order: 9;
}
#about {
    order: 10;
}
footer {
    order:11;
}
.single #content{
    display: flex;
    flex-direction: column;
}
#desc {
    order: 3;
    background-color: #161A30;
    padding-top: 5rem;
    padding-bottom: 6.25rem;
}
.desc_wrap {
    margin-top: var(--fz60);
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: var(--fz20);
}
.desc_bx {
    border: 1px solid #2D334F;
    padding: var(--fz30) var(--fz50);
    border-radius: 20px;
    color: var(--c-white);
}
.desc_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #F4F5F8;
}
.desc_title h2 {
    margin-bottom: var(--fz20);
    font-size: var(--fz32);
    font-weight: 500;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 8%;
    text-underline-offset: 5px;
    text-underline-position: from-font;
}
.desc_bottom > div strong,
.ribbb_bottom > div strong{
    text-decoration: unset;
}
.desc_bxx-title svg {
    min-width: var(--fz24);
    max-width: var(--fz24);
}
.desc_bxx-title {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.desc_bxx {
    display: flex;
    flex-direction: column;
    gap: var(--fz20);
    margin-top: var(--fz20);
    font-size: var(--fz18);
    font-weight: 300;
}
.desc_bx_title {
    font-size: var(--fz20);
    font-weight: 500;
}

.desc_bottom {
    display: flex;
    gap: var(--fz40);
    justify-content: center;
    align-items: center;
    padding:var(--fz20) 0;
    border: 1px solid #2D334F;
    border-radius: 20px;
    margin-top: var(--fz20);
}
.desc_bottom > div {
    display: flex;
    gap: 1rem;
    align-items: center;
    color: var(--c-white);
    font-size: var(--fz28);
    font-weight: 300;
}
.desc_bottom > div svg {
    min-width: var(--fz28);
    width: var(--fz28);
}
.desc_bottom > div strong {
    color: var(--primary)
}
.desc_bottom > div strong:after {
    display: none;
}
.ymaps-2-1-79-map-copyrights-promo {
    display: none !important;
}
.ymaps-2-1-79-copyright {
    display: none !important;
}
.single-post strong:after {
    display: none;
}
.single-post #content,
.blog #content {
    background: #161A30;
    color: var(--text-white);
}
.post__content {
    padding: clamp(calc(var(--nav-offset) * 5), 6vw, 5rem) 0 clamp(calc(var(--nav-offset)* 1), 7vw, 6.5rem);
}
.pc-news{
    padding: clamp(calc(var(--nav-offset) * 5), 6vw, 5rem) 0 clamp(calc(var(--nav-offset)* 1), 7vw, 6.5rem);
    overflow: clip;
}
.pc404 {
}
.pc-news__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: var(--gap);
    margin-bottom: var(--fz24);
}

.pc-news__title{
    margin: 0 0 var(--fz16);
    font-size: clamp(var(--fz40), 2.2vw, var(--fz40));
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-white);
}
.blog svg {
    width: var(--fz20);
    height: var(--fz20);
}
.pc-news__subtitle{
    margin: 0;
    max-width: 60ch;
    color: rgba(255,255,255,.72);
    font-size: var(--fz18);
    line-height: 1.45;
}

.pc-news__grid{
    display:grid;
    grid-template-columns: 1.25fr .75fr;
    gap: var(--gap);
    align-items:start;
}

.pc-news__list{
    display:flex;
    flex-direction:column;
    gap: var(--fz16);
}

/* cards */
.pc-news-card{
    border-radius: var(--radius-lg);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow-soft);
    background: rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}

.pc-news-card__link{
    display:block;
    color: inherit;
    text-decoration:none;
}

.pc-news-card__media{
    aspect-ratio: 20 / 8;
    width: 100%;
    position: relative;
    overflow:hidden;
}
.pc-news-card--featured {
    position: sticky;
    top: 9rem;
}
.pc-news-card__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.02);
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.pc-news-card:hover .pc-news-card__media img{
    transform: scale(1.06);
}

.pc-news-card__media-empty{
    width:100%;
    height:100%;
    background: radial-gradient(circle at top left, rgba(37,99,235,.35) 0, rgba(2,6,23,.75) 55%, rgba(0,0,0,.85) 100%);
}

.pc-news-card__content{
    padding: var(--fz20);
}

.pc-news-card__h{
    margin: 0 0 var(--fz16);
    font-size: clamp(var(--fz18), 1.3vw, var(--fz24));
    line-height: 1.2;
    color: var(--text-white);
}
.pc-news-card__meta {
    margin: 0 0 var(--fz16) 0;
}
.pc-news-card__p{
    margin: 0 0 var(--fz18);
    color: rgba(255,255,255,.72);
    font-size: var(--fz16);
    line-height: 1.5;
}

.pc-news-card__meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--fz16);
}

.pc-news-card__meta--bottom{
    margin-top: var(--fz16);
}

.pc-pill{
    display:inline-flex;
    align-items:center;
    height: clamp(2rem, 2.2vw, 2.4rem);
    padding: 0 var(--fz16);
    border-radius: var(--radius-xl);
    font-size: var(--fz16);
    color: var(--text-main);
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(0,0,0,.08);
}

.pc-pill--soft{
    background: var(--primary-soft);
    color: var(--text-main);
}

.pc-date{
    font-size: var(--fz16);
    color: rgba(255,255,255,.65);
}

.pc-more{
    display:inline-flex;
    gap: .35em;
    align-items:center;
    font-size: var(--fz16);
    color: var(--text-white);
    opacity: .9;
}

.pc-more--muted{
    color: rgba(255,255,255,.75);
}

/* row cards */
.pc-news-card--row .pc-news-card__link{
    display:grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--fz18);
    align-items:stretch;
}

.pc-news-card__thumb{
    overflow:hidden;
    width: 25vh;
}
.menu-item {
    position: relative;
    transition-duration: .3s;
}
.menu-item:hover {
    color: rgba(226,232,240,.72);
}
.pc-news-card__thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.02);
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.pc-news-card:hover .pc-news-card__thumb img{
    transform: scale(1.06);
}

.pc-news-card__thumb-empty{
    width:100%;
    height:100%;
    background: radial-gradient(circle at top left, rgba(37,99,235,.25) 0, rgba(2,6,23,.72) 55%, rgba(0,0,0,.85) 100%);
}

/* responsive */
@media (max-width: 62rem){
    .pc-news__grid{
        grid-template-columns: 1fr;
    }
    .pc-news-card--row .pc-news-card__link{
        grid-template-columns: 1fr;
    }
    .pc-news-card__thumb{
        aspect-ratio: 16 / 9;
    }
}

/* ===== archive */
.pc-news-archive{
    padding: var(--mtop80) 0;
}
.pc-news-archive__head{
    margin-bottom: var(--fz24);
}
.pc-news-archive__title{
    margin: 0 0 var(--fz16);
    font-size: clamp(var(--fz30), 2.6vw, var(--fz50));
    line-height: 1.05;
    color: var(--text-white);
    letter-spacing: -0.02em;
}
.pc-news-archive__desc{
    color: rgba(255,255,255,.72);
    font-size: var(--fz18);
    line-height: 1.45;
    max-width: 70ch;
}
.pc-news-archive__grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
}
.pc-news-archive__pager{
    margin-top: var(--mtop60);
}

/* WP pagination */
.pc-news-archive__pager .page-numbers{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 .9rem;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.86);
    text-decoration:none;
    margin-right: .5rem;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}
.pc-news-archive__pager .page-numbers.current{
    background: rgba(37,99,235,.22);
    border-color: rgba(37,99,235,.45);
    color: #fff;
}

/* ===== single */
.pc-news-single{
    padding: var(--mtop80) 0;
}
blockquote {
    background: #f3f4f6;
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    color: #111827;
    font-style: italic;
    margin: 20px 0;
    padding: 16px 20px;
    position: relative;
}
.post__content thead td {
    color: var(--c-white);
    font-weight: 400;
}
.post__content tbody td {
    color: var(--c-black);
    font-weight: 400;
}
.post__content tbody td b {
    font-weight: 500;
}
.pc-news-single__crumbs{
    display:flex;
    gap: .6rem;
    align-items:center;
    color: rgba(255,255,255,.62);
    font-size: var(--fz16);
    margin-bottom: var(--fz18);
}
.pc-news-single__crumbs a{
    color: rgba(255,255,255,.82);
    text-decoration:none;
}
.pc-news-single__crumbs a:hover{ text-decoration: underline; }

.pc-news-single__title{
    margin: 0 0 var(--fz18);
    font-size: clamp(var(--fz32), 3vw, var(--fz60));
    line-height: 1.05;
    color: var(--text-white);
    letter-spacing: -0.02em;
}
.pc-news-single__meta{
    margin-bottom: var(--fz24);
}

.pc-news-single__hero{
    margin: 0 0 var(--fz24);
    border-radius: var(--radius-lg);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow-soft);
}
.pc-news-single__hero img{
    width: 100%;
    height: auto;
    display:block;
}

.pc-news-single__content{
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    box-shadow: var(--shadow-soft);
    padding: var(--fz24);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    color: rgba(255,255,255,.78);
    font-size: var(--fz18);
    line-height: 1.65;
}
.pc-news-single__content p{ margin: 0 0 var(--fz18); }
.pc-news-single__content h2,
.pc-news-single__content h3{
    margin: var(--fz24) 0 var(--fz18);
    color: rgba(255,255,255,.92);
    line-height: 1.2;
}
.pc-news-single__content a{
    color: rgba(37,99,235,.95);
    text-decoration:none;
}
.pc-news-single__content strong {
    text-decoration: none;
}
.post {
    margin: 0 auto;
    padding: 40px 16px 80px;
}

.post__back {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    color: #60a5fa;
    text-decoration: none;
}

.post__date {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 4px;
}

.post__title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 14px;
}

.post__cover img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    max-height: 320px;
}

.post__content {
    margin-top: 24px;
    /* чтобы таблицы/широкие элементы могли скроллиться по горизонтали */
    overflow-x: auto;
}

/* ---------- Списки ---------- */

.post__content ul {
    padding-left: 1.3rem;
    margin: 10px 0;
    list-style: disc;
}

.post__content li {
    margin: 4px 0;
}

.post__content ul li::marker {
    color: var(--primary);
}

/* ---------- Заголовки и текст ---------- */

.post__content h2 {
    margin: 24px 0 8px;
    font-size: 22px;
}

.post__content p {
    margin: 10px 0;
    line-height: 1.6;
}

/* ---------- Таблицы ---------- */

.post__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.post__content thead {
    background: var(--primary);
}

.post__content th,
.post__content td{
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.post__content th {
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
	background-color: #2463eb;
}

.post__content tr:last-child td {
    border-bottom: none;
}

.post__content tr:nth-child(even) td {
    background: #f9fafb;
}

/* на очень узких экранах пусть таблица скроллится */

@media (max-width: 640px) {
    .post__content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---------- Цитаты (blockquote) ---------- */

.post__content blockquote {
    margin: 20px 0;
    padding: 20px 30px;
    border-left: 4px solid #3b82f6; /* синий, под Pro-Code */
    background: #f3f4f6;
    border-radius: 12px;
    font-style: italic;
    color: #111827;
    position: relative;
}

.post__content blockquote::before {
    content: "“";
    position: absolute;
    left: 10px;
    top: 6;
    font-size: 40px;
    line-height: 1;
    color: var(--primary);
}

.post__content blockquote p {
    margin: 0;
}

.post__content blockquote + p {
    margin-top: 10px;
}

.post__content blockquote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 13px;
    color: #6b7280;
}

.post__content img {
    max-width: 100%;
    border-radius: 12px;
    height: 600px;
    object-fit: cover;
}
.c2 {
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    overflow: hidden;
}
.c2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent
    );
    transform: translateX(-100%);
    transition: 0.5s ease;
    animation:pulse 5s infinite;

}
/*.c2:hover::after {*/
/*    transform: translateX(100%);*/
/*}*/
@-webkit-keyframes pulse {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
@media (max-width: 768px) {
    .post__content img {
        height: 250px;
        width: 100%;
        object-fit: cover;
    }
}

.pc-news-single__container ol {
	list-style: decimal;
	padding-left: 4vh;
}


#brend {
    position: relative;
    overflow: hidden;
}

.brend-carousel-wrap {
    position: relative;
    height: 700px;
    display: flex;
    perspective: 1500px;
    transform-style: preserve-3d;
    /* убрали touch-action: none — скролл страницы работает */
}

#drag-container,
#spin-container {
    position: relative;
    display: flex;
    margin: auto;
    transform-style: preserve-3d;
    transform: rotateX(-10deg);
}

#spin-container {
    width: 180px;
    height: 150px;
}

#drag-container img {
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(255, 255, 255, .5);
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0003);
    cursor: grab;
}

#drag-container img:hover {
    box-shadow: 0 0 25px rgba(255, 255, 255, .8);
}

#ground {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(90deg);
    background: radial-gradient(circle at center, #9993, transparent);
}

@keyframes spin {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}

@keyframes spinRevert {
    from { transform: rotateY(360deg); }
    to   { transform: rotateY(0deg); }
}

/* ===== Адаптив ===== */

@media (max-width: 1200px) {
    .brend-carousel-wrap {
        height: 550px;
    }
    #spin-container {
        width: 200px;
        height: 150px;
    }
}

@media (max-width: 768px) {
    .brend-carousel-wrap {
        height: 450px;
        perspective: 1000px;
    }
    #spin-container {
        width: 150px;
        height: 120px;
    }
    #drag-container img {
        padding: 12px;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    .brend-carousel-wrap {
        height: 380px;
        perspective: 800px;
    }
    #spin-container {
        width: 80px;
        height: 70px;
    }
    #drag-container img {
        padding: 8px;
        border-radius: 6px;
        box-shadow: 0 0 8px rgba(255, 255, 255, .4);
    }
}