/* ============================================================
   WEBIX THEME — MAIN STYLES
============================================================ */

/* ============================================================
   ПЕРЕМЕННЫЕ
============================================================ */
:root {
    --c-black: #0c0c0c;
    --c-dark: #242424;
    --c-white: #ffffff;
    --c-purple-1: #3A0085;
    --c-purple-2: #89009F;
    --c-purple-3: #b273e0;
    --c-orange-1: #FF8A00;
    --c-orange-2: #FFC700;
    --g-purple: linear-gradient(135deg, #3A0085, #89009F);
    --g-purple-soft: linear-gradient(135deg, #b273e0, #e072e8);
    --g-dark: linear-gradient(135deg, #0c0c0c, #242424);
    --g-orange: linear-gradient(135deg, #FF8A00, #FFC700);
    --g-purple-orange: linear-gradient(135deg, #3A0085 0%, #FF8A00 100%);
    --container-w: 85%;
    --container-max: 1280px;
    --radius: 16px;
    --radius-lg: 24px;
    --transition: 0.35s cubic-bezier(.4,0,.2,1);
    --header-h: 72px;
}

/* ============================================================
   СБРОС
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    overflow-x: clip;
}
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: var(--c-black);
    line-height: 1.5;
    overflow-x: clip;
    background: #fff;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
p { margin: 0; }

.container {
    width: var(--container-w);
    max-width: var(--container-max);
    margin: 0 auto;
}

/* ============================================================
   ЗАГОЛОВКИ СЕКЦИЙ
============================================================ */
.section-label {
    display: block;
    text-align: center;
    font-family: 'Comfortaa', cursive;
    font-size: clamp(12px, 1.2vw, 14px);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--c-purple-2);
    margin-bottom: 16px;
    font-weight: 700;
}
.section-label--orange { color: var(--c-orange-2); }
.section-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.15;
    text-align: center;
    margin: 0 0 20px;
}
.section-title .grad {
    background-image: var(--g-purple-soft);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-subtitle {
    text-align: center;
    font-weight: 300;
    font-size: clamp(15px, 1.6vw, 19px);
    color: #555;
    max-width: 720px;
    margin: 0 auto 60px;
    line-height: 1.6;
}
.section-title--light { color: #fff; }
.section-subtitle--light { color: rgba(255,255,255,0.65); }

/* ============================================================
   КНОПКА-ГАМБУРГЕР (компактнее)
============================================================ */
.menuToggle {
    position: fixed;
    top: 24px;
    right: 30px;
    width: 42px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1002;
    color: #fff;
    transition: color 0.35s ease, transform 0.25s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menuToggle:hover { transform: scale(1.05); }
.menuToggle:focus { outline: none; }
.menuToggle.scrolled { color: var(--c-black); }
.menuToggle__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(.4,0,.2,1);
}
.menuToggle__icon--burger {
    width: 42px;
    height: 28px;
    transform: translate(-50%, -50%) rotate(0);
    opacity: 1;
}
.menuToggle__icon--close {
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%) rotate(-90deg);
    opacity: 0;
}
.menuToggle.active .menuToggle__icon--burger {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}
.menuToggle.active .menuToggle__icon--close {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0);
}

/* На десктопе скрываем гамбургер, когда шапка прилипла */
@media (min-width: 769px) {
    .menuToggle.scrolled {
        opacity: 0;
        pointer-events: none;
    }
}

/* ============================================================
   ВЫПАДАЮЩЕЕ МЕНЮ — компактнее
============================================================ */
.menuDropdown {
    position: fixed;
    top: 66px;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.4s cubic-bezier(.34,1.4,.64,1);
    z-index: 1001;
    pointer-events: none;
}
.menuDropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.menuDropdown__link {
    display: inline-block;
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: clamp(15px, 1.8vw, 19px);
    line-height: 1.2;
    color: #fff;
    padding: 2px 0;
    transition: color 0.25s ease;
    text-align: right;
    white-space: nowrap;
}
.menuDropdown.scrolled .menuDropdown__link {
    color: var(--c-black);
}
.menuDropdown .menuDropdown__link:hover {
    color: var(--c-orange-1);
}

/* ============================================================
   ТИТУЛЬНЫЙ ЭКРАН
============================================================ */
.title-screen {
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #0C0C0C, #242424);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 20px;
}
.titleLogo {
    background-image: url(https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/06/title-logo.svg);
    width: clamp(240px, 40vw, 470px);
    aspect-ratio: 470 / 110;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.titleName {
    font-family: 'Comfortaa', cursive;
    font-size: clamp(32px, 6vw, 65px);
    color: #fff;
    font-weight: 100;
    margin-top: 20px;
}
.titleDescription {
    font-family: 'Comfortaa', cursive;
    font-size: clamp(14px, 2.2vw, 23px);
    color: #fff;
    font-weight: 100;
    text-align: center;
}
.scroll-btn {
    background-image: url(https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/06/PageDownIcon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    transition: transform var(--transition);
}
.scroll-btn:hover { transform: translateX(-50%) translateY(6px); }

/* ============================================================
   STICKY-ШАПКА
============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: box-shadow 0.4s ease, background 0.4s ease;
}
.site-header.stuck {
    box-shadow: 0 4px 30px rgba(0,0,0,0.07);
    background: rgba(255, 255, 255, 0.98);
}
.site-header__inner {
    width: var(--container-w);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: var(--header-h);
}
.logoContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
}
.logo {
    background: url(https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/06/Icon-Vector-Dark.svg) no-repeat left center / contain;
    width: clamp(90px, 12vw, 130px);
    height: 34px;
}
.logoTitle {
    font-family: 'Comfortaa', cursive;
    color: var(--c-black);
    font-size: 19px;
    margin-left: 5px;
    font-weight: 100;
    letter-spacing: 0.5px;
}

/* Навигация: при hover ярко-оранжевый */
.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 36px);
}
.site-nav a {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 15px;
    color: var(--c-black);
    transition: color var(--transition);
}
.site-nav a:hover { color: var(--c-orange-1); }

.contactsContainer { text-align: right; flex-shrink: 0; }
a.contactsPhone {
    display: inline-block;
    font-size: clamp(15px, 1.6vw, 18px);
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    color: var(--c-black);
    background: url(https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/06/phoneIcon.svg) no-repeat left center / contain;
    padding-left: 28px;
    line-height: 26px;
}
.contactsPhone__local {
    transition: text-decoration-color 0.25s ease;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}
a.contactsPhone:hover .contactsPhone__local {
    text-decoration-color: currentColor;
}
.callMeButton {
    font-family: 'Comfortaa', cursive;
    font-size: 13px;
    cursor: pointer;
    margin-top: 3px;
    color: var(--c-black);
    text-align: center;
    transition: color 0.3s ease;
}
.callMeButton:hover {
    color: var(--c-purple-2);
    text-decoration: none;
}

/* ============================================================
   HERO
============================================================ */
.heroBlock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px 0 120px;
    position: relative;
    min-height: 70vh;
    background: url(https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/10/hero-circles.svg) no-repeat 95% calc(100% - 180px);
    background-size: clamp(240px, 32vw, 520px);
}
.heroBlock__text { flex: 1 1 560px; max-width: 720px; }
.heroBlock__eyebrow {
    font-family: 'Comfortaa', cursive;
    font-size: clamp(12px, 1.2vw, 14px);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--c-purple-2);
    margin-bottom: 20px;
    font-weight: 700;
}
.heroBlock__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: clamp(36px, 5.2vw, 72px);
    line-height: 1.05;
    margin: 0 0 24px;
    background-image: var(--g-purple);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.heroBlock__title span {
    background-image: var(--g-dark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.heroBlock__descr {
    font-size: clamp(16px, 1.7vw, 20px);
    font-weight: 300;
    color: #444;
    margin-bottom: 36px;
    max-width: 540px;
    line-height: 1.6;
}
.heroBlock__actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.heroBlock__note {
    font-family: 'Comfortaa', cursive;
    font-size: 13px;
    color: #888;
}

/* ============================================================
   КНОПКИ — плавный hover: градиент «уезжает» в белый
============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: clamp(14px, 1.4vw, 16px);
    padding: 18px 42px;
    border-radius: 50px;
    cursor: pointer;
    border: 0;
    transition: all var(--transition);
    white-space: nowrap;
    text-align: center;
    line-height: 1;
}

/* primary — фиолетовый → белый */
.btn--primary {
    background-image: linear-gradient(
        135deg,
        #3A0085 0%,
        #89009F 33%,
        #ffffff 66%,
        #ffffff 100%
    );
    background-size: 300% 100%;
    background-position: 0% 50%;
    color: #fff;
    box-shadow: 0 10px 30px rgba(137,0,159,0.35);
    transition:
        background-position 0.6s cubic-bezier(.4,0,.2,1),
        color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}
.btn--primary:hover {
    background-position: 100% 50%;
    color: var(--c-purple-1);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

/* outline — оставляем как есть (используется в hero) */
.btn--outline {
    background: transparent;
    color: var(--c-black);
    border: 2px solid var(--c-black);
}
.btn--outline:hover { background: var(--c-black); color: #fff; }

/* orange — оранжевый → белый */
.btn--orange {
    background-image: linear-gradient(
        135deg,
        #FF8A00 0%,
        #FFC700 33%,
        #ffffff 66%,
        #ffffff 100%
    );
    background-size: 300% 100%;
    background-position: 0% 50%;
    color: #000;
    box-shadow: 0 4px 12px rgba(255,138,0,0.2);
    transition:
        background-position 0.6s cubic-bezier(.4,0,.2,1),
        color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}
.btn--orange:hover {
    background-position: 100% 50%;
    color: var(--c-orange-1);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

/* ============================================================
   ПРОБЛЕМА (фон увеличен)
============================================================ */
.problemBlock {
    background-color: #000;
    background-image: url(https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/07/treasure-1.svg);
    background-repeat: no-repeat;
    background-position: 90% 100%;
    background-size: clamp(240px, 34vw, 620px);
    padding: clamp(60px, 8vw, 130px) clamp(20px, 5vw, 80px);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.problemBlock::before {
    content: '';
    position: absolute;
    top: -100px; left: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(137,0,159,0.3), transparent 70%);
    pointer-events: none;
}
.problemBlock__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.problemBlock__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 3.6vw, 46px);
    line-height: 1.15;
    margin: 0 0 24px;
    max-width: 800px;
}
.problemBlock__title .grad {
    background-image: var(--g-purple-soft);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.problemBlock__text {
    font-size: clamp(16px, 1.8vw, 21px);
    font-weight: 300;
    max-width: 640px;
    line-height: 1.65;
    color: rgba(255,255,255,0.85);
}
.problemBlock__stats {
    display: flex;
    gap: 60px;
    margin-top: 50px;
    flex-wrap: wrap;
}
.problemBlock__stat-value {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: clamp(30px, 4vw, 52px);
    background-image: var(--g-purple-soft);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.problemBlock__stat-label {
    display: block;
    margin-top: 8px;
    font-size: clamp(13px, 1.4vw, 15px);
    font-weight: 300;
    color: rgba(255,255,255,0.6);
}

/* ============================================================
   ВЫБОР
============================================================ */
.choiceBlock { padding: clamp(70px, 8vw, 130px) 0; }
.choiceBlock__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
}
.choiceCard {
    position: relative;
    padding: clamp(28px, 3vw, 48px);
    border-radius: var(--radius-lg);
    color: #fff;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
    min-height: 340px;
    display: flex;
    flex-direction: column;
}
.choiceCard:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.choiceCard--primary { background-image: var(--g-purple); }
.choiceCard--dark { background-image: var(--g-dark); }
.choiceCard__eyebrow {
    font-family: 'Comfortaa', cursive;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 20px;
    position: relative;
    z-index: 3;
}
.choiceCard__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
    margin: 0 0 16px;
    max-width: 80%;
    position: relative;
    z-index: 3;
}
.choiceCard__descr {
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 300;
    opacity: 0.9;
    max-width: 85%;
    position: relative;
    z-index: 3;
    line-height: 1.6;
}
.choiceCard__cta {
    margin-top: auto;
    padding-top: 30px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    z-index: 3;
    transition: gap var(--transition);
}
.choiceCard:hover .choiceCard__cta { gap: 20px; }
.choiceCard__cta svg {
    width: 20px; height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform var(--transition);
}
.choiceCard:hover .choiceCard__cta svg { transform: translateX(4px); }

/* ============================================================
   Иконки карточек выбора
   ============================================================ */
.choiceCard__icon {
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: clamp(140px, 18vw, 220px);
    height: clamp(140px, 18vw, 220px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    opacity: 0.9;
    z-index: 1;
    animation: spin 20s linear infinite;
    animation-play-state: paused;
}

/* ---------- Тёмная карточка: шестерёнка (как и было) ---------- */
.choiceCard--dark .choiceCard__icon {
    background-image: url('https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/07/gear-1-Traced.svg');
}
.choiceCard--dark:hover .choiceCard__icon { animation-play-state: running; }

/* ---------- Фиолетовая карточка: две звезды друг над другом ---------- */

/* Обнуляем фон и вращение контейнера — вращать будем отдельную звезду */
.choiceCard--primary .choiceCard__icon {
    background-image: none;
    animation: none;
}

/* Обе звезды занимают одинаковую площадь контейнера, центрированы,
   без смещений — строго одна поверх другой */
.choiceCard--primary .choiceCard__icon::before,
.choiceCard--primary .choiceCard__icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

/* Нижний слой — star: вращается при наведении */
.choiceCard--primary .choiceCard__icon::before {
    background-image: url('https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/10/star.svg');
    animation: spinFlat 20s linear infinite;   /* ← новый кейфрейм, без translateY */
    animation-play-state: paused;
    z-index: 1;
}

/* Верхний слой — star-word: статичный, меньшего размера */
.choiceCard--primary .choiceCard__icon::after {
    background-image: url('https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/10/star-word.svg');
    background-size: 60% auto;                  /* ← ограничиваем ширину слова */
    z-index: 2;
}

/* Запуск вращения звезды при наведении на фиолетовую карточку */
.choiceCard--primary:hover .choiceCard__icon::before {
    animation-play-state: running;
}
.choiceCard:hover .choiceCard__icon { animation-play-state: running; }

@keyframes spin {
    0%   { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Для звёзд, растянутых по контейнеру (без translate) */
@keyframes spinFlat {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   ЦИФРЫ
============================================================ */
.statsBlock { background: #f7f5fb; padding: clamp(60px, 7vw, 100px) 0; }
.statsBlock__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.statsBlock__item {
    text-align: center;
    padding: 30px 20px;
    border-radius: var(--radius);
    background: #fff;
    transition: transform var(--transition), box-shadow var(--transition);
}
.statsBlock__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(58,0,133,0.12);
}
.statsBlock__value {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: clamp(36px, 4.4vw, 58px);
    line-height: 1;
    background-image: var(--g-purple);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}
.statsBlock__label {
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 300;
    color: #555;
    line-height: 1.4;
}

/* ============================================================
   ПРОЦЕСС (оранжевая вспышка)
============================================================ */
.processBlock {
    background-image: var(--g-dark);
    padding: clamp(70px, 9vw, 140px) 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.processBlock::before {
    content: '';
    position: absolute;
    bottom: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,138,0,0.22), transparent 70%);
    pointer-events: none;
}
.processBlock__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
}
.processStep {
    padding: 30px 22px;
    border-radius: var(--radius);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all var(--transition);
}
.processStep:hover {
    background: rgba(137,0,159,0.15);
    border-color: rgba(137,0,159,0.5);
    transform: translateY(-6px);
}
.processStep__num {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 42px;
    line-height: 1;
    background-image: var(--g-purple-soft);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}
/* Акцент: 3-й шаг — оранжевый */
.processStep:nth-child(3) .processStep__num {
    background-image: var(--g-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.processStep__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 10px;
    line-height: 1.3;
}
.processStep__descr {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255,255,255,0.65);
    line-height: 1.55;
}

/* ============================================================
   ПОРТФОЛИО (16:9 + минималистичный hover)
============================================================ */
.portfolioBlock {
    background-image: var(--g-dark);
    padding: clamp(70px, 8vw, 120px) 0;
    color: #fff;
}
.portfolioGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.portfolioItem {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.5s ease;
}
.portfolioItem::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 12, 0);
    transition: background 0.45s ease;
    pointer-events: none;
}
/* Круглая оранжевая иконка со стрелкой по центру */
.portfolioItem::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    border: 2px solid var(--c-orange-2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(.34,1.4,.64,1),
        opacity 0.4s ease;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}
.portfolioItem:hover::before {
    background: rgba(12, 12, 12, 0.55);
}
.portfolioItem:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.portfolioGrid:hover .portfolioItem:not(:hover) {
    opacity: 0.6;
}

/* ============================================================
   ОТЗЫВЫ
============================================================ */
.reviewsBlock { padding: clamp(70px, 9vw, 130px) 0; background: #f7f5fb; }
.reviewsSwiper { padding-bottom: 60px !important; overflow: hidden; }
.reviewsSwiper .swiper-wrapper { align-items: stretch; }
.reviewsSwiper .swiper-slide { height: auto; display: flex; }
.reviewCard {
    background: #fff;
    border-radius: var(--radius);
    padding: clamp(24px, 2.4vw, 34px);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 4px 20px rgba(58,0,133,0.06);
}
.reviewCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(58,0,133,0.14);
}
.reviewTop { display: flex; align-items: center; gap: 14px; }
.reviewAvatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--g-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}
/* Оранжевый акцент в каждой 3-й аватарке */
.reviewCard:nth-child(3n) .reviewAvatar,
.swiper-slide:nth-child(3n) .reviewAvatar {
    background: var(--g-orange);
    color: #000;
}
.reviewAuthor {
    font-weight: 700;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.3;
    color: var(--c-black);
}
.reviewRole {
    font-weight: 300;
    font-size: 13px;
    color: #888;
    margin-top: 3px;
}
.reviewStars {
    color: var(--c-orange-2);
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 1;
}
.reviewText {
    font-weight: 300;
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.7;
    color: #444;
    margin: 0;
}
.reviewsSwiper .swiper-pagination-bullet { background: var(--c-purple-2); opacity: 0.25; }
.reviewsSwiper .swiper-pagination-bullet-active { background: var(--c-orange-1); opacity: 1; }

/* ============================================================
   CTA (оранжевая вспышка)
============================================================ */
.ctaBlock {
    background-image: var(--g-dark);
    padding: clamp(70px, 9vw, 130px) 0;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.ctaBlock::before {
    content: '';
    position: absolute;
    top: -100px; left: -80px;
    width: clamp(200px, 28vw, 420px);
    height: clamp(200px, 28vw, 420px);
    background: url(https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/07/Vector.svg) no-repeat center / contain;
    opacity: 0.4;
    pointer-events: none;
}
.ctaBlock::after {
    content: '';
    position: absolute;
    bottom: -150px; right: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(255,138,0,0.25), transparent 70%);
    pointer-events: none;
}
.ctaBlock__inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.ctaBlock__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    margin: 0 0 20px;
}
.ctaBlock__title .grad {
    background-image: var(--g-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ctaBlock__descr {
    font-weight: 300;
    font-size: clamp(15px, 1.7vw, 19px);
    color: rgba(255,255,255,0.7);
    margin-bottom: 40px;
    line-height: 1.6;
}
/* ---------- Форма с маской телефона ---------- */
.ctaForm {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 560px;
    margin: 0 auto;
}

.phoneField {
    position: relative;
    flex: 1 1 240px;
    min-width: 240px;
}

/* Общая геометрия для «серой подложки» и самого input —
   размеры, шрифт и паддинги должны совпадать пиксель-в-пиксель */
.phoneField__ghost,
.phoneField__input {
    width: 100%;
    padding: 18px 26px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 1.2;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 50px;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Серая подложка с маской */
.phoneField__ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.35);
}
.phoneField__ghost .phoneField__typed { color: #ffffff; }
.phoneField__ghost .phoneField__rest  { color: rgba(255, 255, 255, 0.35); }

/* Сам input — текст прозрачный, видно только каретку и подложку */
.phoneField__input {
    position: relative;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
    color: transparent;
    caret-color: #ffffff;
    outline: none;
    transition: border-color var(--transition);
}
.phoneField__input:focus { border-color: var(--c-orange-1); }
.phoneField__input::placeholder { color: transparent; }
.ctaForm__note {
    margin-top: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
}

/* ============================================================
   FAQ
============================================================ */
.faqBlock { padding: clamp(70px, 9vw, 130px) 0; background: #fff; }
.faqCont { max-width: 860px; margin: 0 auto; }
.faqItem {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 26px 0;
}
.faqItem:first-of-type { border-top: 1px solid rgba(0,0,0,0.1); }
.faqQuestion {
    font-weight: 700;
    font-size: clamp(17px, 1.8vw, 21px);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: var(--c-black);
    transition: color var(--transition);
    margin: 0;
    line-height: 1.4;
}
.faqQuestion::after {
    content: '+';
    font-size: 30px;
    font-weight: 300;
    background-image: var(--g-purple-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.35s ease;
    flex-shrink: 0;
    line-height: 1;
}
.faqItem.active .faqQuestion::after { transform: rotate(45deg); }
.faqQuestion:hover { color: var(--c-orange-1); }
.faqAnswer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    font-weight: 300;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.7;
    color: #555;
    padding: 0;
}
.faqItem.active .faqAnswer { max-height: 500px; padding: 16px 0 6px; }

/* ============================================================
   ПРЕИМУЩЕСТВА (фиолетовый акцент как раньше)
============================================================ */
.advantagesBlock { padding: clamp(60px, 7vw, 110px) 0; background: #f7f5fb; }
.advantagesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.advantageCard {
    background: #fff;
    border-radius: var(--radius);
    padding: 36px 30px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.advantageCard::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60px; height: 4px;
    background: var(--g-purple);
    transition: width var(--transition);
}
.advantageCard:hover::before { width: 100%; }
.advantageCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(58,0,133,0.12);
}
.advantageCard__title {
    font-weight: 700;
    font-size: clamp(17px, 1.8vw, 20px);
    margin: 0 0 14px;
    color: var(--c-black);
}
.advantageCard__text {
    font-weight: 300;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* ============================================================
   РЕКВИЗИТЫ (нейтральный вид, без акцентного бордера)
============================================================ */
.requisitesBlock { padding: 60px 0; background: #fff; text-align: center; }
.requisitesBlock__inner {
    display: inline-block;
    text-align: center;
    padding: 30px 50px;
    border-radius: var(--radius);
    background: #f7f5fb;
    font-size: 14px;
    font-weight: 300;
    color: #444;
    line-height: 1.9;
}
.requisitesBlock__inner strong { font-weight: 700; color: var(--c-black); }

/* ============================================================
   ФИНАЛЬНЫЙ CTA (оранжевая кнопка)
============================================================ */
.finalCta {
    background-image: var(--g-purple);
    padding: clamp(60px, 7vw, 100px) 20px;
    text-align: center;
    color: #fff;
}
.finalCta__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 3.2vw, 42px);
    margin: 0 0 16px;
    line-height: 1.15;
}
.finalCta__descr {
    font-weight: 300;
    font-size: clamp(15px, 1.7vw, 19px);
    opacity: 0.9;
    margin: 0 auto 32px;
    max-width: 640px;
    line-height: 1.6;
}
/* Оранжевая кнопка с плавным переходом в белую */
.finalCta .btn--outline {
    background-image: linear-gradient(
        135deg,
        #FF8A00 0%,
        #FFC700 33%,
        #ffffff 66%,
        #ffffff 100%
    );
    background-size: 300% 100%;
    background-position: 0% 50%;
    color: #000;
    border: 0;
    box-shadow: 0 10px 30px rgba(255,138,0,0.35);
    transition:
        background-position 0.6s cubic-bezier(.4,0,.2,1),
        color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}
.finalCta .btn--outline:hover {
    background-position: 100% 50%;
    color: var(--c-purple-1);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

/* ============================================================
   ФУТЕР
============================================================ */
.site-footer {
    background-image: var(--g-dark);
    color: #fff;
    padding: clamp(60px, 7vw, 90px) 0 30px;
}
.footerCont {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
}
.footerCol h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 22px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.footerCol p,
.footerCol a {
    font-weight: 300;
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    line-height: 1.9;
    display: block;
    margin-bottom: 6px;
    transition: color var(--transition);
}
.footerCol a:hover { color: var(--c-orange-1); }
.footerLogo {
    background: url(https://www.xn--90abti9a6d.xn--p1ai/wp-content/uploads/2026/06/Icon-Vector-Dark.svg) no-repeat left center / contain;
    width: 130px; height: 40px;
    filter: invert(1);
    margin-bottom: 20px;
    opacity: 0.9;
}
.footerBottom {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    font-weight: 300;
}

/* ============================================================
   СТРАНИЦА (page.php)
============================================================ */
.pageContent {
    max-width: 860px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.75;
    color: #333;
    font-weight: 300;
}
.pageContent h2 { font-weight: 700; margin: 40px 0 16px; }
.pageContent p { margin-bottom: 16px; }
.pageContent ul { list-style: disc; padding-left: 24px; margin-bottom: 16px; }
.pageContent img { border-radius: var(--radius); margin: 24px 0; }

/* ============================================================
   АКТИВНАЯ ССЫЛКА
============================================================ */
.site-nav a.is-active,
.menuDropdown__link.is-active,
.footerCol a.is-active {
    color: var(--c-orange-2);
}

/* ============================================================
   АДАПТИВ
============================================================ */
@media (max-width: 1024px) {
    :root { --container-w: 90%; }
    .heroBlock {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 0 80px;
        min-height: auto;
        background-position: 100% 100%;
        background-size: 40%;
    }
    .choiceBlock__grid { grid-template-columns: 1fr; }
    .statsBlock__grid { grid-template-columns: repeat(2, 1fr); }
    .processBlock__grid { grid-template-columns: repeat(2, 1fr); }
    .portfolioGrid { grid-template-columns: repeat(2, 1fr); }
    .advantagesGrid { grid-template-columns: 1fr; }
    .footerCont { grid-template-columns: 1fr 1fr; gap: 30px; }
    .problemBlock__stats { gap: 40px; }
}

@media (max-width: 768px) {
    :root { --container-w: 92%; --header-h: 60px; }

    .menuToggle {
        top: 18px;
        right: 18px;
        width: 36px;
        height: 24px;
    }
    .menuToggle__icon--burger { width: 36px; height: 24px; }
    .menuToggle__icon--close { width: 18px; height: 18px; }

    .menuDropdown {
        top: 52px;
        right: 18px;
        gap: 10px;
    }
    .menuDropdown__link {
        font-size: 17px;
    }

    .site-header__inner {
        padding: 10px 0;
        padding-right: 60px;
    }
    .site-nav { display: none; }
    .contactsContainer { display: none; }
    .logo { height: 30px; }
    .logoTitle { font-size: 16px; }

    .scroll-btn { bottom: 20px; }

    .heroBlock { padding: 30px 0 60px; background: none; }
    .heroBlock__actions { flex-direction: column; align-items: stretch; }
    .heroBlock__actions .btn { width: 100%; }
    .heroBlock__note { text-align: center; }

    .problemBlock { padding: 60px 25px; }
    .problemBlock__stats { gap: 30px; margin-top: 40px; }

    .choiceCard { min-height: 280px; padding: 28px; }
    .choiceCard__title { max-width: 75%; }
    .choiceCard__icon { width: 120px; height: 120px; right: -10px; opacity: 0.65; }

    .statsBlock__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .statsBlock__item { padding: 24px 14px; }

    .processBlock__grid { grid-template-columns: 1fr; gap: 16px; }
    .portfolioGrid { grid-template-columns: 1fr; gap: 16px; }

    .ctaForm { flex-direction: column; }
    .ctaForm input, .ctaForm .btn { width: 100%; }

    .footerCont { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 480px) {
    .titleName { font-size: 28px; }
    .heroBlock__title { font-size: 32px; }

    .statsBlock__grid { grid-template-columns: 1fr; }
    .statsBlock__item { padding: 20px; }

    .requisitesBlock__inner { padding: 24px 20px; font-size: 13px; }
}

/* ============================================================
   СТРАНИЦА «РАЗРАБОТКА»
============================================================ */

/* ---------- Hero (дополнение) ---------- */
.devHero { padding: 80px 0 100px; }

/* ---------- Что входит в разработку ---------- */
.devBenefits {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #fff;
}
.devBenefits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.devBenefit {
    background: #f7f5fb;
    border-radius: var(--radius);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.devBenefit::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 50px; height: 4px;
    background: var(--g-purple);
    transition: width var(--transition);
}
.devBenefit:hover::before { width: 100%; }
.devBenefit:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(58,0,133,0.12);
}
.devBenefit__num {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 34px;
    line-height: 1;
    background-image: var(--g-purple);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}
.devBenefit__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 1.8vw, 20px);
    margin: 0 0 12px;
    color: var(--c-black);
    line-height: 1.3;
}
.devBenefit__text {
    font-weight: 300;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* ---------- Типы сайтов ---------- */
.devTypes {
    padding: clamp(70px, 8vw, 130px) 0;
    background-image: var(--g-dark);
    color: #fff;
}
.devTypes .section-title { color: #fff; }
.devTypes__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.devType {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 260px;
}
.devType:hover {
    background: rgba(137,0,159,0.12);
    border-color: rgba(137,0,159,0.5);
    transform: translateY(-6px);
}
.devType__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background-image: var(--g-purple);
    margin-bottom: 22px;
    position: relative;
    flex-shrink: 0;
}
.devType__icon::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 26px; height: 26px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.devType__icon--landing::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M3 9h18'/></svg>");
}
.devType__icon--corp::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M3 9h18M8 4v5M16 4v5'/></svg>");
}
.devType__icon--shop::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'><path d='M4 7h16l-1.5 12.5a2 2 0 0 1-2 1.5h-9a2 2 0 0 1-2-1.5L4 7z'/><path d='M9 7V5a3 3 0 0 1 6 0v2'/></svg>");
}
.devType__icon--app::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M3 9h18M9 9v12'/></svg>");
}
.devType__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.devType__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 26px);
    margin: 0;
    color: #fff;
}
.devType__time {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 13px;
    color: var(--c-orange-2);
    background: rgba(255, 199, 0, 0.12);
    padding: 6px 14px;
    border-radius: 50px;
    white-space: nowrap;
}
.devType__text {
    font-weight: 300;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.7;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

/* ---------- Технологии ---------- */
.devTech {
    padding: clamp(70px, 8vw, 120px) 0;
    background: #f7f5fb;
}
.devTech__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.devTech__item {
    background: #fff;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid rgba(58,0,133,0.06);
}
.devTech__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(58,0,133,0.1);
}
.devTech__name {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 1.8vw, 20px);
    color: var(--c-black);
    margin-bottom: 6px;
}
.devTech__label {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-purple-2);
}

/* ---------- Тарифы ---------- */
.devPricing {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #fff;
}
.devPricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.devPlan {
    position: relative;
    background: #f7f5fb;
    border-radius: var(--radius-lg);
    padding: 42px 34px 34px;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
    border: 2px solid transparent;
}
.devPlan:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(58,0,133,0.14);
}
.devPlan--accent {
    background-image: var(--g-purple);
    color: #fff;
    border-color: transparent;
}
.devPlan--accent .devPlan__title,
.devPlan--accent .devPlan__eyebrow,
.devPlan--accent .devPlan__descr { color: #fff; }
.devPlan--accent .devPlan__list li { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.12); }
.devPlan--accent .devPlan__list li::before { background: var(--c-orange-2); }

.devPlan__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-image: var(--g-orange);
    color: #000;
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(255,138,0,0.35);
}
.devPlan__head { margin-bottom: 28px; }
.devPlan__eyebrow {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-purple-2);
    margin-bottom: 10px;
}
.devPlan__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 28px);
    color: var(--c-black);
    margin: 0 0 8px;
    line-height: 1.2;
}
.devPlan__descr {
    font-weight: 300;
    font-size: 15px;
    color: #666;
    line-height: 1.5;
}
.devPlan__list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    flex: 1;
}
.devPlan__list li {
    position: relative;
    padding: 10px 0 10px 24px;
    font-weight: 300;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.devPlan__list li:last-child { border-bottom: 0; }
.devPlan__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 10px;
    height: 2px;
    background: var(--c-purple-2);
    border-radius: 2px;
}
.devPlan__cta {
    width: 100%;
    margin-top: auto;
}
.devPlan--accent .devPlan__cta.btn--orange { color: #000; }
.devPricing__note {
    text-align: center;
    font-weight: 300;
    font-size: 15px;
    color: #666;
    margin-top: 40px;
}

/* ---------- Адаптив страницы разработки ---------- */
@media (max-width: 1024px) {
    .devBenefits__grid { grid-template-columns: repeat(2, 1fr); }
    .devTypes__grid { grid-template-columns: 1fr; }
    .devTech__grid { grid-template-columns: repeat(3, 1fr); }
    .devPricing__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .devBenefits__grid { grid-template-columns: 1fr; gap: 16px; }
    .devBenefit { padding: 28px 24px; }
    .devType { padding: 28px 24px; min-height: auto; }
    .devTech__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .devTech__item { padding: 24px 14px; }
    .devPlan { padding: 36px 26px 28px; }
    .devPlan__list li { font-size: 14px; }
}

/* ============================================================
   СТРАНИЦА «СОПРОВОЖДЕНИЕ» — графитовая палитра
============================================================ */

/* ---------- Кнопка с серо-чёрной палитрой ---------- */
.btn--dark {
    background-image: linear-gradient(
        135deg,
        #0c0c0c 0%,
        #242424 33%,
        #ffffff 66%,
        #ffffff 100%
    );
    background-size: 300% 100%;
    background-position: 0% 50%;
    color: #fff;
    box-shadow: 0 6px 18px rgba(12,12,12,0.25);
    transition:
        background-position 0.6s cubic-bezier(.4,0,.2,1),
        color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}
.btn--dark:hover {
    background-position: 100% 50%;
    color: var(--c-black);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

/* ---------- Hero (серые акценты) ---------- */
.sopHero { padding: 80px 0 100px; }
.sopHero__eyebrow { color: #666; }
.sopHero__title {
    background-image: var(--g-dark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sopHero__title span {
    background-image: linear-gradient(135deg, #3A0085, #89009F);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Что входит в сопровождение ---------- */
.sopBenefits {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #fff;
}
.sopBenefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.sopBenefit {
    background: #f7f5fb;
    border-radius: var(--radius);
    padding: 32px 26px;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sopBenefit::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 4px;
    background: var(--g-dark);
    transition: width var(--transition);
}
.sopBenefit:hover::before { width: 100%; }
.sopBenefit:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(12,12,12,0.12);
}
.sopBenefit__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-image: var(--g-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.sopBenefit__icon svg { width: 22px; height: 22px; }
.sopBenefit__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.6vw, 18px);
    margin: 0 0 10px;
    color: var(--c-black);
    line-height: 1.3;
}
.sopBenefit__text {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.65;
    color: #555;
    margin: 0;
}

/* ---------- SLA / Сроки ---------- */
.sopSla {
    padding: clamp(70px, 8vw, 130px) 0;
    background-image: var(--g-dark);
    color: #fff;
}
.sopSla .section-title { color: #fff; }
.sopSla__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.sopSla__card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 30px 26px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.sopSla__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 3px;
    background: var(--g-orange);
    transition: width var(--transition);
}
.sopSla__card:hover::before { width: 100%; }
.sopSla__card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,138,0,0.4);
    transform: translateY(-6px);
}
.sopSla__time {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 3.4vw, 44px);
    line-height: 1;
    background-image: var(--g-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 16px;
}
.sopSla__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 10px;
    color: #fff;
    line-height: 1.3;
}
.sopSla__text {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

/* ---------- Что берём / что у вас ---------- */
.sopSplit {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #f7f5fb;
}
.sopSplit__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.sopSplit__card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.sopSplit__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(12,12,12,0.08);
}
.sopSplit__card--us {
    border-top: 4px solid var(--c-purple-2);
}
.sopSplit__card--you {
    border-top: 4px solid var(--c-orange-1);
}
.sopSplit__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.sopSplit__badge {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    color: #fff;
}
.sopSplit__card--us .sopSplit__badge { background-image: var(--g-purple); }
.sopSplit__card--you .sopSplit__badge {
    background-image: var(--g-orange);
    color: #000;
}
.sopSplit__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 26px);
    margin: 0;
    color: var(--c-black);
}
.sopSplit__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sopSplit__list li {
    position: relative;
    padding: 12px 0 12px 28px;
    font-weight: 300;
    font-size: 15px;
    color: #333;
    line-height: 1.55;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sopSplit__list li:last-child { border-bottom: 0; }
.sopSplit__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
}
.sopSplit__card--us .sopSplit__list li::before { background: var(--c-purple-2); }
.sopSplit__card--you .sopSplit__list li::before { background: var(--c-orange-1); }

/* ---------- Тарифы сопровождения ---------- */
.sopPricing {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #fff;
}
.sopPricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.sopPlan {
    position: relative;
    background: #f7f5fb;
    border-radius: var(--radius-lg);
    padding: 42px 34px 34px;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
    border: 2px solid transparent;
}
.sopPlan:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(12,12,12,0.14);
}
.sopPlan--accent {
    background-image: var(--g-dark);
    color: #fff;
}
.sopPlan--accent .sopPlan__title,
.sopPlan--accent .sopPlan__eyebrow,
.sopPlan--accent .sopPlan__descr { color: #fff; }
.sopPlan--accent .sopPlan__eyebrow { color: var(--c-orange-2); }
.sopPlan--accent .sopPlan__list li {
    color: rgba(255,255,255,0.9);
    border-bottom-color: rgba(255,255,255,0.12);
}
.sopPlan--accent .sopPlan__list li::before { background: var(--c-orange-1); }

.sopPlan__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-image: var(--g-orange);
    color: #000;
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(255,138,0,0.35);
}
.sopPlan__head { margin-bottom: 28px; }
.sopPlan__eyebrow {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-purple-2);
    margin-bottom: 10px;
}
.sopPlan__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 28px);
    color: var(--c-black);
    margin: 0 0 8px;
    line-height: 1.2;
}
.sopPlan__descr {
    font-weight: 300;
    font-size: 15px;
    color: #666;
    line-height: 1.5;
}
.sopPlan__list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    flex: 1;
}
.sopPlan__list li {
    position: relative;
    padding: 10px 0 10px 24px;
    font-weight: 300;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sopPlan__list li:last-child { border-bottom: 0; }
.sopPlan__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 10px;
    height: 2px;
    background: var(--c-purple-2);
    border-radius: 2px;
}
.sopPlan__cta {
    width: 100%;
    margin-top: auto;
}
.sopPricing__note {
    text-align: center;
    font-weight: 300;
    font-size: 15px;
    color: #666;
    margin-top: 40px;
}

/* ---------- Адаптив страницы сопровождения ---------- */
@media (max-width: 1024px) {
    .sopBenefits__grid { grid-template-columns: repeat(2, 1fr); }
    .sopSla__grid { grid-template-columns: repeat(2, 1fr); }
    .sopSplit__grid { grid-template-columns: 1fr; }
    .sopPricing__grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .sopBenefits__grid { grid-template-columns: 1fr; gap: 16px; }
    .sopBenefit { padding: 26px 22px; }
    .sopSla__grid { grid-template-columns: 1fr; gap: 16px; }
    .sopSla__card { padding: 26px 22px; }
    .sopSplit__card { padding: 30px 24px; }
    .sopSplit__head { flex-wrap: wrap; gap: 10px; }
    .sopPlan { padding: 36px 26px 28px; }
    .sopPlan__list li { font-size: 14px; }
}

/* ============================================================
   СТРАНИЦА «КОНТАКТЫ»
============================================================ */

.contactHero { padding: 80px 0 100px; }

/* ---------- Контактные данные ---------- */
.contactInfo {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #fff;
}
.contactInfo__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.contactInfo__card {
    background: #f7f5fb;
    border-radius: var(--radius);
    padding: 32px 26px;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
    text-align: left;
}
.contactInfo__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 4px;
    background: var(--g-purple);
    transition: width var(--transition);
}
.contactInfo__card:hover::before { width: 100%; }
.contactInfo__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(58,0,133,0.12);
}
.contactInfo__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-image: var(--g-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 20px;
    flex-shrink: 0;
}
.contactInfo__icon svg { width: 22px; height: 22px; }
.contactInfo__label {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--c-purple-2);
    margin-bottom: 8px;
}
.contactInfo__value {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 1.8vw, 20px);
    color: var(--c-black);
    margin-bottom: 6px;
    line-height: 1.3;
    transition: color var(--transition);
}
a.contactInfo__value:hover { color: var(--c-purple-2); }
.contactInfo__note {
    font-weight: 300;
    font-size: 13px;
    color: #777;
    line-height: 1.5;
    margin: 0;
}

/* ---------- Форма обратной связи ---------- */
.contactFormBlock {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #f7f5fb;
}
.contactFormBlock__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}
.contactFormBlock__text .section-label {
    text-align: left;
}
.contactFormBlock__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    margin: 0 0 20px;
    color: var(--c-black);
}
.contactFormBlock__descr {
    font-weight: 300;
    font-size: clamp(15px, 1.6vw, 17px);
    color: #555;
    line-height: 1.7;
    margin: 0 0 24px;
}
.contactFormBlock__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contactFormBlock__list li {
    position: relative;
    padding: 10px 0 10px 26px;
    font-weight: 300;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}
.contactFormBlock__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 17px;
    width: 12px;
    height: 2px;
    background: var(--g-purple);
    border-radius: 2px;
}

.contactFormBlock__form {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    box-shadow: 0 20px 60px rgba(58,0,133,0.08);
}
.contactFormBlock__field {
    margin-bottom: 20px;
}
.contactFormBlock__label {
    display: block;
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 8px;
}
.contactFormBlock__input,
.contactFormBlock__textarea {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: var(--c-black);
    background: #f7f5fb;
    border: 2px solid transparent;
    border-radius: 12px;
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition), background var(--transition);
}
.contactFormBlock__input:focus,
.contactFormBlock__textarea:focus {
    background: #fff;
    border-color: var(--c-purple-2);
}
.contactFormBlock__textarea {
    resize: vertical;
    min-height: 110px;
    font-family: 'Roboto', sans-serif;
}
.contactFormBlock__submit {
    width: 100%;
    margin-top: 6px;
}
.contactFormBlock__note {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 300;
    color: #999;
    text-align: center;
}

/* Светлая версия .phoneField для страницы контактов */
.phoneField--light .phoneField__ghost {
    color: #b8b8b8;
    justify-content: flex-start;
    padding-left: 20px;
    font-size: 16px;
    text-align: left;
}
.phoneField--light .phoneField__ghost .phoneField__typed { color: var(--c-black); }
.phoneField--light .phoneField__ghost .phoneField__rest  { color: #b8b8b8; }
.phoneField--light .phoneField__input {
    background: #f7f5fb;
    border: 2px solid transparent;
    border-radius: 12px;
    color: transparent;
    caret-color: var(--c-black);
    font-size: 16px;
    padding: 14px 18px;
    text-align: left;
}
.phoneField--light .phoneField__input:focus {
    background: #fff;
    border-color: var(--c-purple-2);
}

/* ============================================================
   СТРАНИЦА «ВАКАНСИИ»
============================================================ */

.vacHero { padding: 80px 0 100px; }
.vacHero__eyebrow { color: var(--c-orange-1); }

/* ---------- О компании ---------- */
.vacAbout {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #fff;
}
.vacAbout__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.vacAbout__item {
    background: #f7f5fb;
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}
.vacAbout__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(58,0,133,0.12);
}
.vacAbout__value {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1;
    background-image: var(--g-purple);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}
.vacAbout__item:nth-child(even) .vacAbout__value {
    background-image: var(--g-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vacAbout__label {
    font-weight: 300;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* ---------- Список вакансий ---------- */
.vacList {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #f7f5fb;
}
.vacList__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.vacCard {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 40px 36px 36px;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}
.vacCard::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60px; height: 4px;
    background: var(--g-purple);
    transition: width var(--transition);
}
.vacCard:hover::before { width: 100%; }
.vacCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(58,0,133,0.14);
}
.vacCard__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.vacCard__tag {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 50px;
    background: rgba(137,0,159,0.1);
    color: var(--c-purple-2);
}
.vacCard__tag--type {
    background: rgba(255,138,0,0.12);
    color: var(--c-orange-1);
}
.vacCard__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 28px);
    color: var(--c-black);
    margin: 0 0 10px;
    line-height: 1.2;
}
.vacCard__meta {
    display: flex;
    gap: 8px;
    font-weight: 300;
    font-size: 14px;
    color: #888;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.vacCard__descr {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.65;
    color: #444;
    margin: 0 0 24px;
}
.vacCard__block {
    padding: 20px 0;
    border-top: 1px solid rgba(0,0,0,0.07);
}
.vacCard__block-title {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-purple-2);
    margin-bottom: 12px;
}
.vacCard__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.vacCard__list li {
    position: relative;
    padding: 7px 0 7px 22px;
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.55;
    color: #333;
}
.vacCard__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--c-purple-2);
}
.vacCard__cta {
    width: 100%;
    margin-top: 24px;
}

/* ---------- Почему у нас хорошо ---------- */
.vacPerks {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #fff;
}
.vacPerks__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.vacPerk {
    background: #f7f5fb;
    border-radius: var(--radius);
    padding: 36px 30px;
    transition: transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}
.vacPerk::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 4px;
    background: var(--g-purple);
    transition: width var(--transition);
}
.vacPerk:hover::before { width: 100%; }
.vacPerk:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(58,0,133,0.12);
}
.vacPerk__num {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 1;
    background-image: var(--g-purple);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 16px;
}
.vacPerk:nth-child(even) .vacPerk__num {
    background-image: var(--g-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vacPerk__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 1.8vw, 20px);
    margin: 0 0 12px;
    color: var(--c-black);
    line-height: 1.3;
}
.vacPerk__text {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* ---------- Адаптив обеих страниц ---------- */
@media (max-width: 1024px) {
    .contactInfo__grid { grid-template-columns: repeat(2, 1fr); }
    .contactFormBlock__inner { grid-template-columns: 1fr; gap: 40px; }
    .contactFormBlock__text .section-label { text-align: center; }
    .contactFormBlock__title,
    .contactFormBlock__descr { text-align: center; }
    .contactFormBlock__list { max-width: 420px; margin: 0 auto; }

    .vacAbout__grid { grid-template-columns: repeat(2, 1fr); }
    .vacList__grid { grid-template-columns: 1fr; }
    .vacPerks__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .contactInfo__grid { grid-template-columns: 1fr; gap: 16px; }
    .contactFormBlock__form { padding: 30px 24px; }

    .vacAbout__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .vacAbout__item { padding: 24px 16px; }
    .vacCard { padding: 30px 24px 24px; }
    .vacCard__list li { font-size: 14px; }
    .vacPerks__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   ПЕРЕЛИНКОВКА — БЛОК «СМОТРИТЕ ТАКЖЕ»
============================================================ */
.relatedLinks {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #f7f5fb;
}
.relatedLinks__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.relatedCard {
    background: #fff;
    border-radius: var(--radius);
    padding: 34px 30px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
    min-height: 220px;
}
.relatedCard::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 50px; height: 4px;
    background: var(--g-purple);
    transition: width var(--transition);
}
.relatedCard:hover::before { width: 100%; }
.relatedCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(58,0,133,0.12);
}
.relatedCard__label {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-purple-2);
    margin-bottom: 14px;
}
.relatedCard__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.9vw, 22px);
    color: var(--c-black);
    margin: 0 0 12px;
    line-height: 1.25;
}
.relatedCard__descr {
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.65;
    color: #555;
    margin: 0 0 24px;
    flex: 1;
}
.relatedCard__arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-purple-2);
    transition: gap var(--transition), color var(--transition);
    margin-top: auto;
}
.relatedCard__arrow svg {
    width: 18px; height: 18px;
    transition: transform var(--transition);
}
.relatedCard:hover .relatedCard__arrow { gap: 16px; }
.relatedCard:hover .relatedCard__arrow svg { transform: translateX(4px); }

/* ---------- Инлайн-ссылка в CTA-блоках ---------- */
.ctaBlock__inlineLink {
    color: var(--c-orange-1);
    border-bottom: 1px dashed var(--c-orange-1);
    padding-bottom: 1px;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.ctaBlock__inlineLink:hover {
    color: var(--c-orange-2);
    border-bottom-color: var(--c-orange-2);
}

/* ---------- Заметки под блоками ---------- */
.devTypes__note,
.sopSplit__note {
    text-align: center;
    font-weight: 300;
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    margin-top: 40px;
}
.sopSplit__note {
    color: #666;
    margin-top: 20px;
    text-align: left;
}
.devTypes__note a,
.sopSplit__note a {
    color: var(--c-orange-1);
    font-weight: 700;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--transition);
}
.devTypes__note a:hover,
.sopSplit__note a:hover {
    border-bottom-color: var(--c-orange-1);
}

/* ============================================================
   УСЛУГИ НА СТРАНИЦЕ КОНТАКТОВ
============================================================ */
.contactServices {
    padding: clamp(70px, 8vw, 130px) 0;
    background: #fff;
}
.contactServices__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.contactService {
    display: flex;
    flex-direction: column;
    padding: 40px 36px;
    border-radius: var(--radius-lg);
    color: #fff;
    background-image: var(--g-purple);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
    min-height: 240px;
}
.contactService--dark { background-image: var(--g-dark); }
.contactService:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}
.contactService__label {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 16px;
}
.contactService__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 26px);
    margin: 0 0 14px;
    line-height: 1.2;
}
.contactService__descr {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.9;
    margin: 0 0 24px;
    flex: 1;
}
.contactService__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 14px;
    margin-top: auto;
    transition: gap var(--transition);
}
.contactService:hover .contactService__link { gap: 16px; }
.contactService__link svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform var(--transition);
}

/* ============================================================
   УСЛУГИ НА СТРАНИЦЕ ВАКАНСИЙ
============================================================ */
.vacServices {
    padding: clamp(70px, 8vw, 130px) 0;
    background-image: var(--g-dark);
    color: #fff;
}
.vacServices .section-title { color: #fff; }
.vacServices__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.vacService {
    display: flex;
    flex-direction: column;
    padding: 40px 36px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: all var(--transition);
    min-height: 240px;
}
.vacService--dark {
    background: rgba(137,0,159,0.12);
    border-color: rgba(137,0,159,0.4);
}
.vacService:hover {
    background: rgba(137,0,159,0.18);
    border-color: rgba(137,0,159,0.6);
    transform: translateY(-6px);
}
.vacService__label {
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-orange-2);
    margin-bottom: 16px;
}
.vacService__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 26px);
    margin: 0 0 14px;
    line-height: 1.2;
}
.vacService__descr {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
    margin: 0 0 24px;
    flex: 1;
}
.vacService__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Comfortaa', cursive;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-orange-1);
    margin-top: auto;
    transition: gap var(--transition), color var(--transition);
}
.vacService:hover .vacService__link {
    gap: 16px;
    color: var(--c-orange-2);
}
.vacService__link svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform var(--transition);
}

/* ---------- Адаптив новых блоков ---------- */
@media (max-width: 1024px) {
    .relatedLinks__grid { grid-template-columns: 1fr; }
    .contactServices__grid { grid-template-columns: 1fr; }
    .vacServices__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .relatedLinks__grid { gap: 16px; }
    .relatedCard { padding: 28px 24px 24px; min-height: auto; }
    .contactService,
    .vacService { padding: 30px 24px; min-height: auto; }
}

/* ============================================================
   Галерея макетов (страница «Макеты»)
============================================================ */
.mockupGallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 28px;
    margin-top: 40px;
}

.mockupCard {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.mockupCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.10);
}

/* Превью — уменьшенная копия всей страницы макета */
.mockupCard__preview {
    display: block;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 16 / 10;
    min-height: 200px; /* fallback, если aspect-ratio не сработает */
}

.mockupCard__preview iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 900px;
    border: none;
    transform-origin: top left;
    transform: scale(0.25); /* стартовый fallback — не ноль, превью видно сразу */
    pointer-events: none;
    background: #fff;
}

/* Название-ссылка */
.mockupCard__name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #222;
    text-decoration: none;
    background: #fafafa;
    border-top: 1px solid #ececec;
    transition: background .2s, color .2s;
}

.mockupCard__name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    flex: 1;
}

.mockupCard__name svg {
    flex-shrink: 0;
    color: #999;
    transition: color .2s, transform .2s;
}

.mockupCard__name:hover {
    background: #f2f2f2;
    color: #d97706;         /* оранжевый акцент из темы */
}

.mockupCard__name:hover svg {
    color: #d97706;
    transform: translate(2px, -2px);
}

@media (max-width: 600px) {
    .mockupGallery { grid-template-columns: 1fr; gap: 20px; }
}