html, body {
            overflow-x: hidden;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        :root {
            --bg-dark: #000000;
            --bg-green: #0a1f0a;
            --text-white: #ffffff;
            --text-green: #46d646;
            --text-yellow: #dbfa0a;
            --accent: #39ff14;
            --text-main: #FFFFFF;
            --accent-green: #45E600;
            --gradient-primary: linear-gradient(90deg, var(--text-green) 0%, var(--text-yellow) 100%);
            --gradient-glow: radial-gradient(circle at 65% 20%, rgba(57, 255, 20, 0.15) 20%, transparent 90%);
            --font-heading: 'Impact', sans-serif;
            --font-body: 'Roboto', sans-serif;
            --font-bulgaria: 'bulgaria', sans-serif;
            --font-roboto-bold: 'roboto-bold', 'Roboto', sans-serif;
            --font-main: 'Montserrat', sans-serif;
            --container-width: 1280px;
            --border-radius-lg: 50px;
            --border-radius-md: 20px;
            --border-radius-sm: 15px;
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;
            --transition-slow: 0.4s ease;
            --transition-smooth: 0.5s cubic-bezier(0, 1, 0, 1);
            --shadow-glow: 0 10px 40px rgba(57, 255, 20, 0.4);
        }
        @font-face {
            font-family: 'bulgaria';
            src: url('fonts/bulgaria-bourgas-cyr.woff2') format('woff2'), url('fonts/bulgaria-bourgas-cyr.ttf') format('truetype');
            font-weight: normal; font-style: normal; font-display: swap;
        }
        @font-face {
            font-family: 'Impact';
            src: url('fonts/impact.woff2') format('woff2'), url('fonts/impact.ttf') format('truetype');
            font-weight: normal; font-style: normal; font-display: swap;
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        /* Пиксель-арт иконки браузер по умолчанию сглаживает при масштабировании — на глаз это
           читается как «обычная», не пиксельная картинка. Плюс разные браузеры/ОС сглаживают
           по-разному — источник расхождений между платформами. pixelated отключает сглаживание
           везде разом. *_pix.png — 106 мест по сайту (по имени файла), плюс несколько пиксельных
           картинок без суффикса _pix в названии (перечислены явно — по имени файла не поймать). */
        img[src*="_pix"],
        img[src$="player_black.png"], img[src$="player_green.png"],
        img[src$="arrow_circle.png"], img[src$="cube.png"] { image-rendering: pixelated; }
        /* packman.png — SVG <image>, не HTML <img>, атрибутный селектор его не ловит */
        #custom-marker { image-rendering: pixelated; }

        body {
            font-family: var(--font-body);
            background: var(--bg-dark);
            color: var(--text-white);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 150vh;
            background: var(--gradient-glow);
            z-index: -1;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 70%);
            mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 70%);
        }

        body.menu-open {
            overflow: hidden !important;
            position: fixed !important;
            top: var(--scroll-y, 0px) !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
        }

        a { text-decoration: none; color: inherit; transition: color var(--transition-normal); }
        ul { list-style: none; }
        img { max-width: 100%; height: auto; display: block; }
        button { cursor: pointer; border: none; background: none; font: inherit; }
        .container { max-width: var(--container-width); margin: 20px auto; padding: 0 20px; }
        main { padding-top: 130px; }
        .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .text-uppercase { text-transform: uppercase; }
        .text-center { text-align: center; }
        .btn {
            display: inline-flex; gap: 15px; font-family: var(--font-roboto-bold);
            font-weight: 700; font-size: 1.5rem; padding: 20px 40px;
            border-radius: var(--border-radius-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal), opacity var(--transition-fast);
            justify-content: flex-start; text-align: left;
        }
        .btn img { width: 50px; height: 50px; flex-shrink: 0; display: block; }
        .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); }
        /* У bulgaria нет жирного начертания (только normal в @font-face) — font-weight:700 давал
           СИНТЕТИЧЕСКИЙ bold, который разные браузеры/ОС рисуют по-разному (где-то не применяют
           вообще). font-weight:normal убирает разнобой, но само по себе делает текст заметно
           тоньше визуально — а жирный вид был нужен и его тоже надо было сохранить. Правильная
           замена — -webkit-text-stroke ниже: обводка контура буквы рисуется браузером одинаково
           на всех платформах (это заливка/обводка контура, а не выбор начертания шрифта). */
        .btn-primary, .btn-cta, .faq-cta-btn, .footer-cta-contact-btn, .footer-cta-email-btn,
        .btn-yandex-reviews, .mobile-nav-list .nav-cta, .cookie-details-accept, .swipe-text,
        .advantage-number, .advantage-title {
            -webkit-text-stroke: 0.6px currentColor;
        }
        .btn-primary {
            background: var(--gradient-primary); color: var(--bg-dark);
            font-family: var(--font-bulgaria); font-weight: normal; font-size: 1.6rem;
            padding: 10px 17px; border-radius: var(--border-radius-lg); text-transform: uppercase;
        }

        .btn-primary:hover { opacity: 0.9; transform: translateY(-2px); }
        .btn-primary img {
            width: 40px;
            height: 40px;
            display: inline-block;
            margin-right: 8px;
            flex-shrink: 0;
            object-fit: contain;
            align-items: center;
        }
        .btn-cta {
            background: var(--gradient-primary); color: var(--bg-dark);
            font-family: var(--font-bulgaria); font-weight: normal; font-size: 1.7rem; padding: 20px 60px;
            border-radius: var(--border-radius-sm); letter-spacing: 1px;
            justify-content: center; text-align: center; position: relative;
        }
        .btn-cta img { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; flex-shrink: 0; display: block; }
        header {
            width: 100%;
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            padding: 13px 100px;
            background: transparent;
        }

        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(15px);
            z-index: -1;
        }
        .header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
        /* Логотип уменьшен (был 4rem/2rem) — раздувал высоту шапки, а вместе с ней и мутную
           блюр-полоску за ней (header::before растянут на 100% высоты header). */
        .logo { padding-right:50px; font-family: var(--font-heading); font-size: 2.8rem; line-height: 1; display: flex; flex-direction: column; align-items: center; text-align: center; flex-shrink: 0; }
        .logo span { display: block; font-size: 1.4rem; color: var(--text-white); margin-top: -3px; }
        /* header-inner теперь center по вертикали сам — margin-top тут был костылём под align-items:flex-start,
           с align-items:center он наоборот сдвигал бы навигацию вниз от истинного центра. */
        nav ul { font-size: 2.5rem; display: flex; gap: 40px; align-items: center; }
        /* inline-flex, а не обычный inline: у строчных <a> высота строки считается по "полулидингу"
           шрифта (ascender/descender) даже при line-height:1, из-за чего пункты меню сидели чуть
           ниже центра, а «Услуги» (у него уже был inline-flex под стрелочку ▾) — вровень. */
        /* transform, не margin: margin-top тут гасится пересчётом align-items:center у nav ul
           (отрицательный margin уменьшает вклад элемента в высоту строки — flex просто
           перецентровывает уменьшенный бокс, и визуального сдвига не остаётся). transform работает
           post-layout, пересчитать/скомпенсировать его нечем. Компенсирует асимметричный дескендер
           Impact (буквы физически сидят ниже геометрического центра рамки даже при line-height:1). */
        nav a { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 500; font-size: 2.6rem; line-height: 1; transform: translateY(-0.3em); text-transform: uppercase; white-space: nowrap; }
        nav a:hover { color: var(--accent); }
        nav a.nav-referral { color: var(--text-yellow); }
        nav a.nav-referral:hover { color: var(--accent); }
        .nav-cta { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

        /* --- Выпадающее меню «Услуги» --- */
        .main-nav .has-dropdown { position: relative; }
        .dropdown-toggle { display: inline-flex; align-items: center; gap: 8px; }
        .dropdown-toggle::after { content: '▾'; font-size: 0.6em; line-height: 1; transition: transform var(--transition-normal); }
        .has-dropdown:hover .dropdown-toggle::after,
        .has-dropdown:focus-within .dropdown-toggle::after { transform: rotate(180deg); color: var(--accent); }
        /* невидимый мостик, чтобы курсор не терял меню в зазоре */
        .has-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; width: 120%; height: 18px; }
        .dropdown-menu {
            position: absolute; top: 100%; left: 0; min-width: 330px;
            background: #050b05; border: 1px solid rgba(57,255,20,0.35);
            border-radius: 16px; padding: 12px; margin-top: 14px;
            display: flex; flex-direction: column; gap: 2px;
            opacity: 0; visibility: hidden; transform: translateY(10px);
            transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
            box-shadow: 0 24px 60px rgba(0,0,0,0.65); z-index: 1200;
        }
        .has-dropdown:hover .dropdown-menu,
        .has-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown-menu a {
            font-family: var(--font-body); font-size: 1.05rem; font-weight: 500;
            text-transform: none; white-space: nowrap; letter-spacing: 0;
            padding: 12px 16px; border-radius: 10px; color: var(--text-white);
        }
        .dropdown-menu a:hover, .dropdown-menu a:focus { background: rgba(57,255,20,0.12); color: var(--accent); }
        .dropdown-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 8px 6px; }
        .dropdown-referral { color: var(--text-yellow) !important; background: rgba(219,250,10,0.07); }
        .dropdown-referral:hover { background: rgba(219,250,10,0.15) !important; color: var(--text-yellow) !important; }
        /* мобильное меню: «Услуги» — раскрывающийся список, как дропдаун на ПК */
        .mobile-nav-group { list-style: none; display: flex; flex-direction: column; }
        .mobile-nav-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; background: transparent; border: none; cursor: pointer; color: var(--text-white); font-family: var(--font-heading); font-weight: 400; font-size: 2.2rem; line-height: 1.1; text-transform: uppercase; text-align: left; transition: color var(--transition-normal); }
        .mobile-nav-toggle:hover, .mobile-nav-toggle[aria-expanded="true"] { color: var(--text-green); }
        .mobile-nav-chev { width: 11px; height: 11px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-4px) rotate(45deg); transition: transform var(--transition-normal); flex-shrink: 0; }
        .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chev { transform: translateY(2px) rotate(-135deg); }
        /* закрыт по умолчанию; высоту раскрытия ставит JS по scrollHeight — фиксированный max-height молча обрезал бы список */
        .mobile-nav-sublist { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height var(--transition-normal) ease; }
        .mobile-nav-list li a.mobile-nav-sub { font-size: 1.05rem; opacity: 0.92; min-height: 46px; padding-left: 18px; }
        .mobile-nav-list li a.mobile-nav-referral { color: var(--text-yellow); border-color: rgba(219,250,10,0.3); }
        .hero { padding: 60px 0 100px 0; display: flex; align-items: center; min-height: 90vh; min-width: 90vh; justify-content: flex-start; }
        .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
        .hero-content h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 5rem; text-transform: uppercase; margin-bottom: 30px; font-weight: 700; }
        .hero-content h1 span { display: block; }
        .hero-description { font-family: var(--font-roboto-bold); font-size: 2.5rem; line-height: 1.5; font-weight: 700; letter-spacing: 1px; margin-bottom: 40px; max-width: 700px; color: rgba(255, 255, 255, 0.9); }
        .hero-image { display: flex; justify-content: center; align-items: center; position: relative; height: 350px; width: 100%;}

        @keyframes floatCube {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .hero-image img {
            animation: floatCube 3s ease-in-out infinite;
            will-change: transform;
        }
        .services { padding: 120px 0; position: relative; background-color: var(--bg-dark); min-height: 110vh; }
        .services-title { max-width: 900px; font-family: var(--font-heading); font-size: 4rem; font-weight: 500; text-align: center; margin: 0 auto 120px; line-height: 1.6; animation: floatText 4s ease-in-out infinite; display: block; }
        @keyframes floatText { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
        .services .container { display: flex; flex-direction: column; align-items: center; }
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; width: 100%; max-width: 1200px; justify-content: center; }
        .accordion-card { background: var(--bg-dark); border: 2px solid var(--accent); border-radius: 40px; padding: 30px; transition: all var(--transition-slow); position: relative; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; }
        .accordion-card:hover, .accordion-card.active { transform: translateY(-10px); border-color: transparent; background: var(--gradient-primary); box-shadow: var(--shadow-glow); }
        .accordion-card:hover h3, .accordion-card:hover p, .accordion-card:hover .accordion-trigger, .accordion-card.active h3, .accordion-card.active p, .accordion-card.active .accordion-trigger, .accordion-card.active .accordion-content-inner, .accordion-card.active .accordion-content-inner li::before { color: var(--bg-dark); }
        .accordion-card h3 { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 300; margin-bottom: 15px; line-height: 1.3; letter-spacing: 1.1px; color: var(--text-white); transition: color var(--transition-slow); }
        .accordion-card p { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 1); margin-bottom: 20px; min-height: 40px; transition: color var(--transition-slow); }
        .accordion-trigger { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: rgba(255, 255, 255, 1); font-family: var(--font-roboto-bold); font-size: 1.2rem; margin-top: auto; transition: all var(--transition-normal); pointer-events: none; }
        .accordion-trigger img { width: 20px; height: 20px; transition: opacity var(--transition-normal), transform var(--transition-normal); flex-shrink: 0; }
        .accordion-trigger .arrow_black_pix { display: none; }
        .accordion-trigger .arrow_white_pix { display: inline-block; }
        .accordion-card:hover .accordion-trigger .arrow_white_pix, .accordion-card.active .accordion-trigger .arrow_white_pix { display: none; }
        .accordion-card:hover .accordion-trigger .arrow_black_pix, .accordion-card.active .accordion-trigger .arrow_black_pix { display: inline-block; }
        .accordion-card.active .accordion-trigger { gap: 15px; }
        .accordion-card.active .accordion-trigger img { transform: rotate(45deg); }
        .accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--transition-smooth), opacity var(--transition-normal); opacity: 0; color: var(--text-black);}
        .accordion-card.active .accordion-content { max-height: 500px; transition: max-height var(--transition-normal), opacity var(--transition-normal); opacity: 1; color: var(--text-black); }
        .accordion-content-inner { padding-top: 20px; font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); border-top: 1px solid rgba(57, 255, 20, 0.3); margin-top: 15px; }
        .accordion-content-inner ul { list-style: none; padding-left: 0; }
        .accordion-content-inner li { margin-bottom: 8px; position: relative; padding-left: 15px; }
        .accordion-content-inner li::before { content: '•'; color: var(--text-green); position: absolute; left: 0; font-weight: bold; }
        .cta-block { padding: 80px 0; background-color: var(--bg-dark); position: relative; }
        .cta-container { position: relative; max-width: 1000px; margin: 0 auto; padding: 0 7px; }
        .cta-bg { position: absolute; inset: 0; background-image: url('img/back.png'); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--border-radius-md); z-index: 1; }
        .cta-decoration { position: absolute; min-height: 60px; min-width: 100%; top: -10px; left: -20px; width: 60px; height: 60px; background-image: url('img/star.png'); background-size: contain; background-repeat: no-repeat; z-index: 2; }
        .cta-box { position: relative; background: var(--bg-dark); border-radius: var(--border-radius-md); padding: 50px 60px; z-index: 3; border: 3px solid transparent; transform: translateY(20px); background-clip: padding-box; }
        .cta-box.text-center { text-align: center; }
        .cta-heading { font-family: var(--font-heading); font-size: 3rem; font-weight: 500; color: #ffffff; margin-bottom: 25px; line-height: 1.2; }
        .cta-box.text-center .cta-heading { margin-bottom: 30px; }
        .cta-text { font-family: var(--font-body); font-size: 1.3rem; color: rgba(255, 255, 255, 0.85); line-height: 1.6; margin-bottom: 35px; max-width: 800px; }
        .cta-arrow { margin: 30px auto; display: flex; justify-content: center; animation: bounce 2s infinite; }
        .cta-arrow img { width: 40px; height: 40px; transform: rotate(90deg); display: block; }
        @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
        .advantages { display: flex; justify-content: center; align-items: center; background-color: var(--bg-dark); min-height: 100vh; }
        .advantages-box { max-width: 1300px; padding: 40px; background: var(--bg-dark); }
        .advantages-heading { font-family: var(--font-heading); font-size: 4rem; font-weight: 500; color: #ffffff; text-align: center; margin-bottom: 40px; line-height: 1.2; }
        .advantages-list { display: flex; flex-direction: column; gap: 0; }
        .advantage-item { display: grid; grid-template-columns: 60px 1fr 50px; align-items: center; text-align: left; padding: 20px 0; border-bottom: 3px solid var(--text-green); min-height: 70px; cursor: pointer; transition: all var(--transition-normal); }
        .advantage-number { font-family: var(--font-bulgaria); font-size: 2rem; font-weight: normal; color: white; display: flex; align-items: center; padding-right: 20px; }
        .advantage-body { display: flex; flex-direction: column; justify-content: right; padding: 15px 0 0 600px; }
        .advantage-title { font-family: var(--font-bulgaria); font-size: 1.6rem; font-weight: normal; color: #ffffff; text-transform: uppercase; line-height: 1.3; margin-bottom: 0; transition: color var(--transition-normal); }
        .advantage-details { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); }
        .advantage-item.active .advantage-details { max-height: 200px; }
        .advantage-details p { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; padding-top: 15px; margin: 0; }
        .advantage-toggle { display: flex; align-items: center; justify-content: flex-end; padding-left: 10px; }
        .advantage-toggle img { min-width: 50px; height: 100%; rotate: 45deg; }
        .advantage-toggle .icon-black { display: none; }
        .advantage-item.active .icon-black { display: block; }
        .advantage-item.active .advantage-toggle img { transform: rotate(180deg); }
        .faq { padding: 100px 0; background-color: var(--bg-dark); }
        .faq-heading { font-family: var(--font-heading); font-size: 4rem; font-weight: 500; color: #ffffff; text-align: center; margin-bottom: 40px; line-height: 1.2; }
        .faq-list { max-width: 1300px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
        .faq-item { border-bottom: 3px solid var(--text-green); }
        .faq-question { display: grid; grid-template-columns: 60px 1fr 50px; align-items: center; width: 100%; text-align: left; padding: 20px 0; min-height: 70px; background: none; border: none; cursor: pointer; font: inherit; color: inherit; transition: all var(--transition-normal); }
        .faq-question:focus-visible { outline: 2px solid var(--text-green); outline-offset: 4px; }
        .faq-number { font-family: var(--font-heading); font-size: 2rem; font-weight: 500; color: #ffffff; display: flex; align-items: center; padding-right: 20px; }
        .faq-title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 500; letter-spacing: 0.5px; color: #ffffff; text-transform: uppercase; line-height: 1.3; transition: color var(--transition-normal); }
        .faq-item.active .faq-title { color: var(--text-green); }
        .faq-toggle { display: flex; align-items: center; justify-content: flex-end; padding-left: 10px; }
        .faq-toggle img { min-width: 50px; rotate: 45deg; transition: transform var(--transition-normal); }
        .faq-item.active .faq-toggle img { transform: rotate(180deg); }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); }
        .faq-answer p { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: #cfcfcf; margin: 0; padding: 0 50px 22px 60px; }
        .faq-cta { text-align: center; margin-top: 40px; }
        .faq-cta-btn { display: inline-block; background: var(--gradient-primary); color: var(--bg-dark); font-family: var(--font-bulgaria); font-weight: normal; font-size: 1.4rem; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; padding: 16px 40px; border-radius: var(--border-radius-lg); cursor: pointer; transition: transform var(--transition-fast); }
        .faq-cta-btn:hover { transform: scale(1.05); }
        .cases { padding: 100px 0 150px 0; position: relative; background-color: var(--bg-dark); }
        .cases .container { position: relative; z-index: 1; }
        .cases-heading { font-family: var(--font-heading); font-size: 4rem; color: var(--text-white); text-align: center; margin: 0 0 30px 0; line-height: 1.3; text-transform: none; font-weight: 500;}
        .cases-heading::first-letter { text-transform: uppercase; }
        .cases-tabs { justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
        .cases-tab { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-left: 70px; border: none !important; outline: none !important; box-shadow: none !important; background: transparent; color: var(--accent); font-family: var(--font-roboto-bold); font-size: 2.5rem; font-weight: 700; padding: 10px 25px; border-radius: 15px; cursor: pointer; transition: all var(--transition-normal); text-transform: none; }
        .cases-tab:focus, .cases-tab:focus-visible { outline: none !important; box-shadow: none !important; }
        .cases-tab.active { background: var(--text-green); color: var(--bg-dark); }
        .cases-content { position: relative; }
        .case-panel { display: none; animation: fadeIn 0.4s ease; }
        .case-panel.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .laptop-mockup { max-width: 1000px; margin: 0 auto 30px; position: relative; }
        .laptop-screen { padding: 25px 40px 25px 40px; border: 3px solid var(--text-green); position: relative; background: #000; overflow: hidden; }
        .diagonal-line { position: absolute; height: 2px; background-color: var(--text-green); z-index: 5; pointer-events: none; }
        .diag-tl-br { top: 0; left: 0; width: 120%; transform: rotate(29.5deg); transform-origin: top left; }
        .diag-br-tl { top: 0; right: 0; width: 120%; height: 2px; background-color: var(--text-green); transform-origin: top right; transform: rotate(-29.5deg); }
        .iframe-viewport { width: 100%; height: 400px; overflow: hidden; position: relative; background: #fff; z-index: 10; }
        .iframe-viewport iframe { position: absolute; top: 0; left: 0; width: 1920px !important; height: 1080px !important; border: none; transform-origin: 0 0; transform: scale(0.5); background: #fff; display: block;
            overscroll-behavior: none !important;}
        .laptop-screen > iframe { display: none; }
        .case-description { font-family: var(--font-body); font-size: 1.2rem; color: rgba(255, 255, 255, 0.85); text-align: center; max-width: 700px; margin: 25px auto 0; line-height: 1.6; }
        .case-placeholder { text-align: center; padding: 40px 20px; }
        .placeholder-image { width: 100%; max-width: 800px; height: 500px; margin: 0 auto 30px; border-radius: 20px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 2px solid var(--text-green); display: flex; align-items: center; justify-content: center; color: var(--text-green); font-family: var(--font-roboto-bold); font-size: 1.5rem; }
        .design-preview { background: linear-gradient(135deg, rgba(57,255,20,0.1) 0%, rgba(246,201,54,0.1) 100%); }
        .landing-preview { background: linear-gradient(135deg, rgba(246,201,54,0.1) 0%, rgba(57,255,20,0.1) 100%); }
        .test-section { background-color: var(--bg-dark); font-family: var(--font-main); padding: 100px 0 100px 0; }
        .hero-section { max-width: 1300px; margin: 40px auto; padding: 0 20px; position: relative; }
        .hero-title {  font-family: var(--font-heading); font-size: 4rem; font-weight: 500; color: var(--text-white); text-align: center; margin: 0 0 30px 0; line-height: 1.3; text-transform: none; }
        .timeline {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: repeat(4, 160px);
            position: relative;
            z-index: 1;
        }
        .step-1 { grid-column: 1 / 2; justify-self: start; padding-left: 0; }
        .step-3 { grid-column: 3 / 4; justify-self: end; padding-right: 0; }
        .step-5 { grid-column: 1 / 2; justify-self: start; }
        .step-7 { grid-column: 3 / 4; justify-self: end; }
        .step-2, .step-4, .step-6, .step-8 { grid-column: 2 / 3; justify-self: center; }
        .step {min-width: 160px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; position: relative; }
        .step-text { z-index: 2; font-size: 1rem; font-weight: 600; text-transform: uppercase; margin-bottom: 15px; max-width: 180px; line-height: 1.3; height: 40px; display: flex; align-items: center; justify-content: center; }
        .step-number { font-size: 2rem; font-weight: 800; color: var(--text-main); border: 2px solid var(--accent-green); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-dark); box-shadow: 0 0 10px rgba(0,0,0,0.8); position: relative; z-index: 3; }
        /* viewBox у SVG больше не жёсткий 1000x640 — JS выставляет его в реальных css-пикселях
           контейнера (см. main.js), поэтому здесь только позиционирование, размеры не искажают. */
        .path-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
        /* эта копия пути невидима — нужна только как неизменная геометрическая опора для
           getPointAtLength()/расчёта поворота в JS, пока видимый .path-line укорачивается
           каждый кадр (съеденная часть удаляется из d, а не просто перекрашивается). */
        .path-line-ref { fill: none; stroke: none; }
        /* Пунктир серый и тоньше прежнего (было: зелёный rgba(69,230,0,0.5), stroke-width 10,
           dasharray 10 22). Учитывать, что при stroke-linecap: square штрих визуально длиннее
           заданного на толщину линии — по половине с каждого конца: 6 + 6 = 12px при зазоре 18px. */
        .path-line { fill: none; stroke: rgba(255,255,255,0.4); stroke-width: 6; stroke-linecap: square; stroke-dasharray: 6 18; }
        .pacman-marker { position: absolute; top: 0; left: 0; width: 40px; height: 40px; z-index: 2; pointer-events: none; image-rendering: pixelated; will-change: transform; opacity: 0; transition: opacity 0.3s ease; }

        .site-footer { background: var(--bg-dark); color: var(--text-white); padding: 0; position: relative; }
        .site-footer::before { content: ''; position: absolute; inset: 0; background: var(--gradient-glow); pointer-events: none; z-index: 0; }
        .footer-main { position: relative; z-index: 1; padding: 90px 0 0 0; }
        .footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
        .footer-cta-hero-title { font-family: var(--font-heading); font-size: clamp(2.8rem, 5.5vw, 5.5rem); font-weight: 500; text-transform: uppercase; line-height: 0.95; color: var(--text-white); margin-bottom: 40px; letter-spacing: -1px; }
        .footer-cta-buttons { display: flex; gap: 40px; flex-wrap: wrap; }
        .footer-cta-btn-wrap { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 200px; max-width: 431.5px; }
        /* Зелёные пиксельные пилюли — тот же стиль, что у .btn-primary/.faq-cta-btn,
           просто растянуты на всю ширину колонки (были прямоугольными с полупрозрачным фоном). */
        /* justify-content нужен отдельно от text-align: на /kontakty/ эта кнопка переключается
           в display:inline-flex (ниже), а text-align там текст не центрирует — только flex-свойства. */
        .footer-cta-contact-btn, .footer-cta-email-btn, .btn-yandex-reviews { display: block; width: 100%; padding: 14px 22px; background: var(--gradient-primary); border: none; border-radius: var(--border-radius-lg); color: var(--bg-dark); font-family: var(--font-bulgaria); font-weight: normal; font-size: 1.05rem; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; justify-content: center; cursor: pointer; transition: all var(--transition-normal); }
        .footer-cta-contact-btn:hover, .footer-cta-email-btn:hover, .btn-yandex-reviews:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: var(--shadow-glow); }
        .btn-yandex-reviews:active { transform: translateY(0); }
        .footer-cta-sub { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-white); text-align: center; display: block; }
        .footer-right { display: flex; flex-direction: column; gap: 0; }
        .footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; margin-bottom: 50px; }
        .footer-column-title { font-family: var(--font-roboto-bold); font-size: 0.88rem; font-weight: 700; text-transform: uppercase; color: var(--text-white); margin-bottom: 20px; letter-spacing: 1.5px; }
        .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
        .footer-link { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.35; color: var(--text-white); text-decoration: none; transition: color var(--transition-fast); display: inline-block; }
        .footer-link:hover { color: var(--accent); transform: none; }
        .footer-contacts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); }
        .footer-contact-block { display: flex; flex-direction: column; gap: 4px; }
        .footer-contact-address { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-white); line-height: 1.45; }
        .footer-contact-phone { font-family: var(--font-roboto-bold); font-size: 0.85rem; font-weight: 700; color: var(--text-white); text-decoration: none; transition: color var(--transition-fast); }
        .footer-contact-phone:hover { color: var(--accent); }
        .footer-bottom { position: relative; z-index: 1; }
        .footer-brand-giant { padding: 50px 20px 25px; display: flex; flex-direction: column; align-items: center; gap: 4px; overflow: hidden; }
        .footer-brand-main { font-family: var(--font-heading); font-size: clamp(3rem, 11vw, 10rem); line-height: 0.92; color: var(--text-white); text-transform: uppercase; letter-spacing: -3px; text-align: center; display: block; }
        .footer-brand-sub { font-family: var(--font-roboto-bold); font-size: 0.85rem; text-transform: uppercase; color: var(--text-white); letter-spacing: 7px; display: block; }
        .footer-separator { width: 100%; height: 1px; background: rgba(255,255,255,0.1); margin: 0; }
        .footer-bottom-row { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 28px; flex-wrap: wrap; gap: 12px; margin-top: 0; }
        .footer-copy { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-white); }
        .footer-policy-link { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-white); text-decoration: none; transition: color var(--transition-fast); }
        .footer-policy-link:hover { color: var(--accent); }
        .btn-scroll-top { font-family: var(--font-roboto-bold); font-size: 0.8rem; color: rgba(255,255,255,0.42); background: transparent; border: 1px solid rgba(255,255,255,0.16); padding: 7px 16px; border-radius: 7px; cursor: pointer; transition: all var(--transition-normal); text-transform: uppercase; letter-spacing: 1px; }
        .btn-scroll-top:hover { color: var(--accent); border-color: var(--accent); transform: none; box-shadow: none; }

        .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity var(--transition-normal), visibility var(--transition-normal); padding: 20px; }
        .modal-overlay.active { opacity: 1; visibility: visible; }
        .modal-content { background: var(--bg-dark); border: 2px solid var(--accent); border-radius: var(--border-radius-md); padding: 40px; max-width: 600px; width: 100%; position: relative; transform: translateY(20px); transition: transform var(--transition-normal); }
        .modal-overlay.active .modal-content { transform: translateY(0); }
        .modal-close { position: absolute; top: 15px; right: 20px; font-size: 2rem; color: var(--text-white); background: none; border: none; cursor: pointer; transition: color var(--transition-fast); line-height: 1; }
        .modal-close:hover { color: var(--accent); }
        .modal-title { font-family: var(--font-heading); font-size: 1.8rem; text-transform: uppercase; margin-bottom: 30px; text-align: center; color: var(--text-white); }
        .application-form .form-row { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; margin-bottom: 20px; }
        .application-form .form-label { font-family: var(--font-roboto-bold); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.5px; color: var(--accent); text-shadow: 0 0 12px rgba(57,255,20,0.45); text-transform: uppercase; text-align: right; padding-right: 10px; }
        .application-form .form-label.required::after { content: ' *'; color: #ff4444; }
        .application-form .form-input, .application-form .form-textarea { width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(57, 255, 20, 0.3); border-radius: 8px; color: var(--text-white); font-family: var(--font-body); font-size: 1rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
        .application-form .form-input:focus, .application-form .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.2); }
        .application-form .form-textarea { resize: vertical; min-height: 100px; }
        .application-form .form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
        .application-form .form-error { font-family: var(--font-body); font-size: 0.78rem; line-height: 1.3; color: #ff4444; }
        .application-form .form-error[hidden] { display: none; }
        .application-form .form-input.input-error { border-color: #ff4444; }
        .application-form .form-input.input-error:focus { border-color: #ff4444; box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.2); }
        .form-note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); text-align: center; margin: 15px 0 25px 0; }
        .modal-submit { width: 100%; justify-content: center; margin-top: 10px; }
        .form-consent { display: flex; flex-direction: column; gap: 12px; margin: 25px 0 30px 0; padding-top: 20px; border-top: 1px solid rgba(57, 255, 20, 0.2); }
        .consent-item { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; user-select: none; }
        /* appearance:none + галочка на border вместо accent-color: accent-color только красит
           родную галочку системы, а её форма/анимация — iOS и Android рисуют по-разному.
           Полностью самодельная галочка выглядит одинаково везде. */
        .consent-checkbox { appearance: none; -webkit-appearance: none; position: relative; width: 20px; height: 20px; min-width: 20px; margin-top: 2px; cursor: pointer; background: transparent; border: 2px solid var(--text-green); border-radius: 4px; transition: background var(--transition-fast), border-color var(--transition-fast); }
        .consent-checkbox:checked { background: var(--gradient-primary); border-color: transparent; }
        .consent-checkbox:checked::after { content: ''; position: absolute; left: 35%; top: 12%; width: 25%; height: 55%; border: solid var(--bg-dark); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-30%, -20%); }
        .consent-checkbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .consent-text { font-family: var(--font-body); font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); line-height: 1.4; }
        .consent-link { color: var(--text-yellow); text-decoration: none; border-bottom: 1px dashed var(--text-yellow); transition: color var(--transition-fast), border-color var(--transition-fast); }
        .consent-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
        /* Скрываем мобильный слайдер на десктопе */
        .mobile-cases-slider {
            display: none;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
        }

        #mobile-case-title {
            font-family: var(--font-roboto-bold);
            font-size: 1.5rem;
            color: var(--text-white);
            text-align: center;
        }

        .slider-arrow {
            background: none;
            border: none;
            color: var(--accent);
            font-size: 2.5rem;
            cursor: pointer;
        }
        .mobile-menu-toggle { display: none; position: fixed; top: 18px; right: 20px; z-index: 1100; width: 46px; height: 46px; background: rgba(0,0,0,0.85); border: 2px solid var(--accent); border-radius: 12px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; transition: all var(--transition-normal); backdrop-filter: blur(8px); }
        .mobile-menu-toggle span { width: 24px; height: 3px; background: var(--text-white); border-radius: 2px; transition: all var(--transition-normal); display: block; }
        .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
        .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
        .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(15px); z-index: 1050; padding: 90px 30px 50px; overflow-y: auto; }
        .mobile-nav-overlay.active { display: flex; flex-direction: column; }
        .mobile-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
        .mobile-nav-list li a { display: flex; padding: 16px 20px; font-family: var(--font-roboto-bold); font-size: 1.3rem; font-weight: 500; text-transform: uppercase; color: var(--text-white); text-decoration: none; border-radius: 14px; min-height: 54px; align-items: center; justify-content: center; text-align: center; transition: all var(--transition-normal); border: 1px solid rgba(255,255,255,0.06); }
        .mobile-nav-list li a:hover, .mobile-nav-list li a:focus { background: rgba(57,255,20,0.12); color: var(--accent); border-color: rgba(57,255,20,0.3); }
        .mobile-nav-list .nav-cta { background: var(--gradient-primary) !important; color: var(--bg-dark) !important; margin-top: 16px; font-family: var(--font-bulgaria); font-weight: normal; font-size: 1.4rem; border-color: transparent !important; }
        .footer-bottom-row.container { margin-bottom: 0; }

        nav ul li a.active {
            color: var(--accent) !important;
            position: relative;
        }



        /* Для мобильного меню */
        .mobile-nav-list li a.active {
            color: var(--accent) !important;
            background: rgba(57, 255, 20, 0.12) !important;
            border-color: rgba(57, 255, 20, 0.3) !important;
        }

        @media (max-width: 1955px){
            .advantage-body {
                padding-left: 400px;
            }
            header{
                padding-left: 50px;
                padding-right:50px;
            }
        }

        /* Ступени размера меню (как на живом сайте). Дропдаун сократил пункты до 5 — запас есть. */
        @media (max-width: 2250px){ nav a { font-size: 2rem; } nav ul { gap: 20px; } }
        @media (max-width: 1630px){ nav a { font-size: 1.8rem; } }
        @media (max-width: 1510px){ nav a { font-size: 1.5rem; } }
        @media (max-width: 1340px){ nav a { font-size: 1.3rem; } .dropdown-menu { min-width: 300px; } }
        @media (max-width: 1220px){ nav a { font-size: 1.2rem; } }
        @media (max-width: 1160px){ nav a { font-size: 1rem; } }

        @media (max-width: 1050px){
            html { scroll-behavior: smooth; }
            header { padding: 12px 16px; }
            header nav ul { display: none !important; }
            .mobile-menu-toggle { display: flex; }
            .logo { font-size: 2rem; }
            .logo span { font-size: 1.1rem; margin-top: -2px; }
            main { padding-top: 76px; }
        }



        @media (max-width: 1200px) {
            .cases-tabs {
                display: none !important;
            }
            .mobile-cases-slider {
                display: flex;
            }

        }
        @media (max-width: 400px){
            .mobile-nav-overlay {
                padding: 90px 0 0 20px;
            }
            .mobile-nav-header {
                margin-bottom: 0px !important;
            }
            .cta-heading {
                font-size: 2rem !important;
            }
            .hero-content h1 {  font-size: 2.7rem !important; }
            .btn-primary{
                font-size: 1rem !important;
            }
        }
        @media (max-width: 767px) {





            .hero { padding: 0px 0 56px; min-height: 95vh; min-width: auto; align-items: unset;}
            .hero-grid { grid-template-columns: 1fr; gap: 24px; text-align: left; padding-bottom: 50px; }
            .hero-image {height: auto;}
            .hero-image img { max-width: 220px; margin: 0 auto; }
            .hero-content h1 { font-size: 4rem; line-height: 1.15; margin-bottom: 16px; }
            .hero-content p { font-size: 1.8rem; line-height: 1.15; margin-bottom: 16px; }
            .hero-description { font-size: 1.25rem; margin: 0 auto 22px; padding: 0 4px; line-height: 1.4; }
            .btn-primary { display: flex; font-size: 1.2rem; padding: 13px 8px; width: 100%; max-width: 300px; justify-content: center; margin: 0 auto; }
            .btn-primary img { width: 30px; height: 30px; padding: 0;}

            .services { padding: 48px 0; min-height: auto; }
            .services-title { font-size: 1.8rem; font-weight: 500; margin-bottom: 32px; padding: 0 16px; animation: none; }
            .services-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 8px; }
            .accordion-card { padding: 20px 18px; border-radius: 20px; }
            .accordion-card h3 { font-size: 1.35rem; margin-bottom: 8px; }
            .accordion-card p { font-size: 0.92rem; min-height: auto; margin-bottom: 12px; }
            .accordion-trigger { font-size: 1rem; }
            .accordion-content-inner { font-size: 0.88rem;}

            .cta-block { padding: 36px 20px; }
            .cta-container { padding: 0 7px; }
            .cta-box { padding: 28px 20px; border-radius: 20px; }
            .cta-heading { font-size: 3rem; margin-bottom: 14px; }
            .cta-text { font-size: 1rem; margin-bottom: 20px; }
            .btn-cta { font-size: 0.62rem; padding: 14px 7px; width: 100%; justify-content: center; border-radius: 14px; }
            .btn-cta img { max-height: 20px; max-width: 20px; left: 10px}

            .cases {  padding: 40px 0 56px; }
            .cases-heading { font-size: 1.8rem; font-weight: 500; padding: 0 16px; margin-bottom: 20px; }
            .cases-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 0 16px 8px; margin-bottom: 24px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
            .cases-tabs::-webkit-scrollbar { display: none; }
            .cases-tab { font-size: 0.95rem; padding: 9px 16px; margin-left: 0; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
            .laptop-mockup { padding: 0 12px; width: 100%; height: 85vh}
            .laptop-screen { touch-action: auto !important; padding: 0 !important; border-radius: 14px; width: 100%; height: 100%; border: none !important; overflow: hidden; }
            .iframe-viewport { width: 100%; height: 100% !important; position: relative; background: #000; border-radius: 10px; overflow: hidden; -webkit-overflow-scrolling: touch; }
            .iframe-viewport iframe { position: absolute; top: 0; left: 0; width: calc(100% + 20px) !important; height: 100% !important; border: none; pointer-events: auto !important; touch-action: pan-y !important; transform: none !important; display: block; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;  overscroll-behavior: none !important;}
            .iframe-viewport iframe::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
            .diagonal-line { display: none; }
            .case-description { font-size: 0.92rem; padding: 0 16px; }
            .placeholder-image { height: 200px; border-radius: 14px; font-size: 1rem; }

            .advantages { padding: 40px 12px; min-height: auto; }
            .advantages-box { padding: 20px 16px; }
            .advantages-heading { font-size: 1.8rem; font-weight: 500; margin-bottom: 24px;  }
            .advantage-item { grid-template-columns: 38px 1fr 32px; padding: 14px 0; min-height: auto; align-items: flex-start; }
            .advantage-number { font-size: 1.1rem; padding-right: 8px; }
            .advantage-body { padding: 0 10px; }
            .advantage-title { font-size: 1rem; margin-bottom: 6px; }
            .advantage-details p { font-size: 0.88rem; padding-top: 8px; }
            .advantage-toggle img { min-width: 28px; width: 28px; height: 28px; }

            .faq { padding: 40px 12px; }
            .faq-heading { font-size: 1.8rem; margin-bottom: 24px; }
            .faq-question { grid-template-columns: 38px 1fr 32px; padding: 14px 0; min-height: auto; align-items: flex-start; }
            .faq-number { font-size: 1.1rem; padding-right: 8px; }
            .faq-title { font-size: 1rem; }
            .faq-answer p { font-size: 0.88rem; padding: 0 0 14px 38px; }
            .faq-toggle img { min-width: 28px; width: 28px; height: 28px; }
            .faq-cta { margin-top: 24px; }
            .faq-cta-btn { font-size: 1.1rem; padding: 14px 28px; }

            .test-section { padding: 40px 0; }
            .hero-section { margin: 16px auto; padding: 0 12px; }
            .hero-title { font-size: 1.8rem; font-weight: 500; margin-bottom: 24px; text-align: center; }
            .timeline { display: flex; flex-direction: column; gap: 10px; grid-template-columns: none; grid-template-rows: none; }
            .path-container { display: none; }
            .pacman-marker { display: none; }
            .step { display: flex; flex-direction: row; align-items: center; text-align: left; justify-content: flex-start; gap: 14px; padding: 14px 16px; background: rgba(57,255,20,0.04); border-radius: 14px; border: 1px solid rgba(57,255,20,0.18); }
            .step-number { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 10px; flex-shrink: 0; margin-left: auto; }
            .step-text { font-size: 0.88rem; height: auto; max-width: none; margin-bottom: 0; text-align: left; line-height: 1.35; }
            .step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8 { grid-column: auto; grid-row: auto; }

            .footer-main { padding: 48px 0 0; }
            .footer-inner { grid-template-columns: 1fr; gap: 36px; }
            .footer-cta-hero-title { font-size: 2rem; font-weight: 500; margin-bottom: 22px; line-height: 0.98; }
            .footer-cta-buttons { flex-direction: column; gap: 10px; }
            .footer-cta-btn-wrap { max-width: 100%; }
            /* border-radius тут раньше сбрасывался на 10px (квадратные углы) — эти две кнопки
               визуально отличались от третьей (btn-yandex-reviews), у которой мобильного
               переопределения не было и она оставалась круглой. Теперь у всех троих одна форма. */
            .footer-cta-contact-btn { padding: 15px 20px; font-size: 1rem; }
            .footer-cta-email-btn { padding: 15px 20px; font-size: 1rem; }
            .footer-columns { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; margin-bottom: 24px; }
            .footer-column-title { font-size: 0.75rem; margin-bottom: 12px; }
            .footer-link { font-size: 0.83rem; }
            .footer-links { gap: 12px; }
            .footer-contacts-row { grid-template-columns: 1fr 1fr; gap: 14px 10px; padding-top: 20px; }
            .footer-contact-address { font-size: 0.74rem; }
            .footer-contact-phone { font-size: 0.82rem; }
            .footer-brand-giant { padding: 5px 12px 18px; }
            .footer-brand-main { font-size: clamp(2rem, 12vw, 4.5rem); letter-spacing: -1px; }
            .footer-brand-sub { font-size: 0.68rem; letter-spacing: 4px; }
            .footer-bottom-row { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 0 20px; }
            .footer-copy { font-size: 0.75rem; }
            .footer-policy-link { font-size: 0.75rem; }

            .modal-overlay { padding: 12px; align-items: flex-end; }
            .modal-content { padding: 28px 20px 24px; border-radius: 20px 20px 16px 16px; max-width: 100%; margin: 0; max-height: 90vh; overflow-y: auto; }
            .modal-title { font-size: 1.3rem; margin-bottom: 20px; }
            .application-form .form-row { grid-template-columns: 1fr; gap: 6px; text-align: left; margin-bottom: 14px; }
            .application-form .form-label { text-align: left; padding-right: 0; font-size: 1rem; }
            .application-form .form-input, .application-form .form-textarea { padding: 13px 14px; font-size: 0.95rem; min-height: 46px; border-radius: 10px; }
            .application-form .form-textarea { min-height: 100px; }
            .form-note { font-size: 0.72rem; margin: 8px 0 16px; }
            .form-consent { margin: 16px 0 20px; padding-top: 16px; gap: 10px; }
            .consent-checkbox { width: 20px; height: 20px; }
            .consent-text { font-size: 0.78rem; }
            .modal-submit { padding: 14px; font-size: 1.05rem; }
            .modal-close { top: 10px; right: 14px; font-size: 1.7rem; }
        }

        .mobile-nav-header { display: flex; flex-direction: column; margin-bottom: 40px; }
        .mobile-nav-title { color: var(--text-green); font-family: var(--font-heading); font-size: 2.8rem; text-transform: uppercase; margin-bottom: 20px; }
        .mobile-nav-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
        .mobile-nav-list li a { font-family: var(--font-heading); font-size: 2.2rem; color: #fff; background: transparent; border: none; padding: 10px 0; justify-content: flex-start; text-align: left; border-radius: 0; text-transform: uppercase; }
        .mobile-nav-list li a:hover, .mobile-nav-list li a:focus { background: transparent; color: var(--text-green); }
        .mobile-nav-list .nav-cta { display: none; }

        .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #000000; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; transition: opacity 0.6s ease, visibility 0.6s ease; }
        .loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
        .glitch-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        .glitch-logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        .glitch-layer-1 { animation: glitchRed 2.5s ease-out forwards; mix-blend-mode: screen; opacity: 0.8; filter: hue-rotate(-30deg) brightness(1.5); }
        .glitch-layer-2 { animation: glitchBlue 2.5s ease-out forwards; mix-blend-mode: screen; opacity: 0.8; filter: hue-rotate(30deg) brightness(1.5); }
        .loading-progress { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); width: min(300px, 60vw); height: 3px; background: rgba(0, 0, 0, 0.5); border-radius: 3px; overflow: hidden; z-index: 2; }
        .progress-bar { width: 0%; height: 100%; background: var(--gradient-primary); border-radius: 3px; animation: loadingProgress 2.5s ease-in-out forwards; box-shadow: 0 0 10px rgba(57, 255, 20, 0.8); }
        @keyframes loadingProgress { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; } }
        @keyframes glitchRed { 0% { clip-path: inset(0 0 100% 0); transform: translate(0); } 5% { clip-path: inset(20% 0 60% 0); transform: translate(-8px, 3px); } 10% { clip-path: inset(50% 0 10% 0); transform: translate(6px, -4px); } 15% { clip-path: inset(10% 0 70% 0); transform: translate(-5px, 2px); } 20% { clip-path: inset(0 0 100% 0); } 25% { clip-path: inset(40% 0 30% 0); transform: translate(10px, -3px); } 30% { clip-path: inset(70% 0 5% 0); transform: translate(-7px, 5px); } 35% { clip-path: inset(0 0 100% 0); } 40% { clip-path: inset(15% 0 55% 0); transform: translate(4px, -2px); } 45% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); transform: translate(0); } }
        @keyframes glitchBlue { 0% { clip-path: inset(0 0 100% 0); transform: translate(0); } 8% { clip-path: inset(60% 0 20% 0); transform: translate(7px, -2px); } 13% { clip-path: inset(10% 0 60% 0); transform: translate(-6px, 4px); } 18% { clip-path: inset(30% 0 40% 0); transform: translate(3px, -3px); } 23% { clip-path: inset(0 0 100% 0); } 28% { clip-path: inset(20% 0 50% 0); transform: translate(-9px, 2px); } 33% { clip-path: inset(50% 0 20% 0); transform: translate(8px, -4px); } 38% { clip-path: inset(0 0 100% 0); } 43% { clip-path: inset(65% 0 15% 0); transform: translate(-3px, 1px); } 48% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); transform: translate(0); } }
        .loading-screen::after { content: ''; position: absolute; inset: 0; background: transparent; animation: flashOut 2.5s ease-out forwards; pointer-events: none; }
        @keyframes flashOut { 0%, 85% { background: transparent; } 90% { background: rgba(57, 255, 20, 0.15); } 95% { background: transparent; } 100% { background: transparent; } }

        /* Cookie Banner Styles */
        .cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 20px 40px;
            z-index: 9999;
            box-shadow: 0 -5px 30px rgba(57, 255, 20, 0.2);
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0, 1, 0, 1);
        }

        .cookie-banner.show {
            transform: translateY(0);
        }

        .cookie-banner-content {
            max-width: var(--container-width);
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .cookie-banner-icon {
            flex-shrink: 0;
        }

        .cookie-banner-icon img {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }

        .cookie-banner-text {
            flex: 1;
            min-width: 300px;
        }

        .cookie-banner-text p {
            font-family: var(--font-body);
            font-size: 1rem;
            color: var(--text-white);
            line-height: 1.5;
            margin: 0;
        }

        .cookie-banner-actions {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-shrink: 0;
        }

        .cookie-banner-link {
            background: transparent;
            color: var(--text-white);
            font-family: var(--font-roboto-bold);
            text-decoration: underline;
            font-size: 1rem;
            padding: 12px 25px;
            cursor: pointer;
            transition: all var(--transition-normal);
        }

        .cookie-banner-link:hover {

            transform: translateY(-2px);
        }

        .cookie-banner-accept {
            background: var(--gradient-primary);
            border: none;
            color: var(--bg-dark);
            font-family: var(--font-roboto-bold);
            font-size: 1rem;
            padding: 12px 25px;
            border-radius: var(--border-radius-lg);
            cursor: pointer;
            transition: all var(--transition-normal);
            box-shadow: var(--shadow-glow);
        }

        .cookie-banner-accept:hover {
            transform: translateY(-2px);
        }

        /* Cookie Details Modal */
        .cookie-details-modal {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .cookie-details-modal.active {
            opacity: 1;
            visibility: visible;
        }

        .cookie-details-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .cookie-details-content {
            position: relative;
            background: var(--bg-dark);
            border: 3px solid var(--accent);
            border-radius: var(--border-radius-md);
            width: 90%;
            max-width: 1200px;
            max-height: 90vh;
            overflow-y: auto;
            padding: 40px;
            z-index: 1;
            transform: scale(0.9);
            transition: transform 0.3s ease;
            box-shadow: var(--shadow-glow);
        }

        .cookie-details-modal.active .cookie-details-content {
            transform: scale(1);
        }

        .cookie-details-close {
            position: absolute;
            top: 20px;
            right: 25px;
            background: transparent;
            border: none;
            color: var(--text-white);
            font-size: 2.5rem;
            cursor: pointer;
            transition: color var(--transition-fast);
            line-height: 1;
            z-index: 2;
        }

        .cookie-details-close:hover {
            color: var(--accent);
        }

        .cookie-details-title {
            font-family: var(--font-heading);
            font-size: 2.5rem;
            color: var(--text-white);
            text-align: center;
            margin-bottom: 40px;
            text-transform: uppercase;
        }

        .cookie-details-documents {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .cookie-document-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .cookie-document-section h3 {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            color: var(--text-green);
            text-transform: uppercase;
            margin: 0;
        }

        .cookie-document-frame {
            width: 100%;
            height: 500px;
            border: 2px solid rgba(57, 255, 20, 0.3);
            border-radius: var(--border-radius-sm);
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
        }

        .cookie-document-frame iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .cookie-details-accept {
            display: block;
            width: 100%;
            max-width: 400px;
            margin: 40px auto 0;
            background: var(--gradient-primary);
            border: none;
            color: var(--bg-dark);
            font-family: var(--font-bulgaria);
            font-size: 1.4rem;
            padding: 18px 40px;
            border-radius: var(--border-radius-lg);
            cursor: pointer;
            transition: all var(--transition-normal);
            text-transform: uppercase;
            font-weight: normal;
            box-shadow: var(--shadow-glow);
        }

        .cookie-details-accept:hover {
            opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 15px 50px rgba(57, 255, 20, 0.5);
        }

        /* Mobile Responsive */
        @media (max-width: 767px) {
            .cookie-banner {
                padding: 20px 16px;
            }

            .cookie-banner-content {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }

            .cookie-banner-icon img {
                width: 50px;
                height: 50px;
            }

            .cookie-banner-text {
                min-width: auto;
                width: 100%;
            }

            .cookie-banner-text p {
                font-size: 0.9rem;
            }

            .cookie-banner-actions {
                flex-direction: column;
                width: 100%;
                gap: 12px;
            }

            .cookie-banner-link,
            .cookie-banner-accept {
                width: 100%;
            }

            .cookie-banner-accept {
                font-size: 1.1rem;
                padding: 14px 25px;
            }

            .cookie-details-content {
                width: 95%;
                padding: 30px 20px;
                max-height: 95vh;
            }

            .cookie-details-title {
                font-size: 1.6rem;
                margin-bottom: 25px;
            }

            .cookie-document-section h3 {
                font-size: 1.3rem;
            }

            .cookie-document-frame {
                height: 350px;
            }

            .cookie-details-accept {
                font-size: 1.2rem;
                padding: 16px 30px;
            }
        }
        /* Контейнер кнопки-слайдера */
        .swipe-button-container {
            position: relative;
            width: 100%;
            max-width: 400px;
            height: 70px;
            background: var(--gradient-primary);
            border: 2px solid var(--gradient-primary);
            border-radius: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            user-select: none;
            margin: 20px 0;
        }

        /* Фоновый текст подсказки */
        .swipe-text {
            padding-left: 50px;
            font-family: var(--font-bulgaria);
            font-size: 1.4rem;
            color: var(--bg-dark);
            text-transform: uppercase;
            letter-spacing: 1px;
            pointer-events: none;
            font-weight: normal;
            transition: opacity 0.2s ease;
        }

        /* Ползунок (круглый элемент слева с картинкой) */
        .swipe-handle {
            position: absolute;
            left: 4px; /* Небольшой отступ от левого края */
            top: 50%;
            transform: translateY(-50%);
            width: 58px;
            height: 58px;
            background: var(--bg-dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            z-index: 10;
            transition: background-color var(--transition-fast);
        }

        .swipe-handle:active {
            cursor: grabbing;
        }

        /* Картинка внутри ползунка */
        .swipe-handle img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            pointer-events: none; /* Запрещаем дефолтное перетаскивание картинки браузером */
        }

        /* Анимация успешного свайпа (когда кнопка сработала) */
        .swipe-button-container.unlocked {
            background: var(--gradient-primary);
            border-color: transparent;
        }
        .swipe-button-container.unlocked .swipe-text {
            color: var(--bg-dark);
            opacity: 0.8;
        }

/* ==================== СТРАНИЦЫ УСЛУГ (svc-*) ==================== */
.page-wrap { max-width: var(--container-width); margin: 0 auto; padding: 0 40px; }
.breadcrumbs { font-family: var(--font-heading); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 10px; }
.breadcrumbs a, .breadcrumbs .current { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.breadcrumbs a { color: rgba(255,255,255,0.6); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { opacity: 0.4; color: rgba(255,255,255,0.5); }
.breadcrumbs .current { color: var(--text-green); }

.svc-hero { padding: 34px 0 30px; }
.svc-hero h1 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.06; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 24px; text-wrap: balance; }
.svc-lead { font-family: var(--font-roboto-bold), var(--font-body); font-size: clamp(1.1rem, 1.9vw, 1.5rem); line-height: 1.55; color: rgba(255,255,255,0.9); max-width: 840px; margin-bottom: 32px; }
.svc-hero-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.svc-hero-note { display: block; margin-top: 12px; font-size: 0.9rem; color: var(--text-white); }
/* кнопка с мелкой подписью снизу */
.btn-with-sub { flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 12px 30px; text-align: center; line-height: 1.15; }
.btn-with-sub .btn-main { font-family: var(--font-bulgaria); font-size: 1.5rem; text-transform: uppercase; }
.btn-with-sub .btn-sub { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; text-transform: none; opacity: 0.82; letter-spacing: 0.2px; }

.svc-section { padding: 44px 0; }
.svc-section + .svc-section { border-top: 1px solid rgba(255,255,255,0.06); }
.svc-section h2 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 3rem); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 24px; text-wrap: balance; }
.svc-section h2 .accent { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.svc-section p { font-family: var(--font-body); font-size: 1.3rem; line-height: 1.7; color: rgba(255,255,255,0.87); max-width: 900px; margin-bottom: 18px; }
.svc-section p:last-child { margin-bottom: 0; }
.svc-section p a { color: var(--text-green); text-decoration: underline; text-underline-offset: 3px; }
.svc-section p a:hover { color: var(--accent); }

ul.svc-list { list-style: none; display: grid; gap: 13px; max-width: 880px; margin: 6px 0 0; }
ul.svc-list li { position: relative; padding-left: 38px; font-family: var(--font-body); font-size: 1.25rem; line-height: 1.55; color: rgba(255,255,255,0.9); }
ul.svc-list li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 18px; background: url('img/arrow_green_pix.png') no-repeat left center; background-size: contain; image-rendering: pixelated; }

.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; margin-top: 8px; }
.svc-card { background: rgba(10,31,10,0.5); border: 1px solid rgba(57,255,20,0.16); border-radius: var(--border-radius-md); padding: 26px 24px; transition: transform var(--transition-normal), border-color var(--transition-normal); }
.svc-card:hover { border-color: rgba(57,255,20,0.42); transform: translateY(-4px); }
.svc-card h3 { font-family: var(--font-roboto-bold), var(--font-body); font-size: 1.22rem; margin-bottom: 10px; color: var(--text-white); }
.svc-card p { font-size: 1.1rem; line-height: 1.55; color: rgba(255,255,255,0.75); margin: 0; max-width: none; }

/* Этапы как связанный таймлайн: неоновая линия + кружки-узлы (не «столбец цифр») */
.svc-steps { position: relative; display: grid; gap: 0; max-width: 780px; margin-top: 8px; }
.svc-step { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 22px; min-height: 96px; align-items: start; }
.svc-step:last-child { min-height: 58px; }
/* линия идёт от низа кружка до низа блока; left = центр колонки кружка минус половина ширины линии */
.svc-step:not(:last-child)::before { content: ''; position: absolute; left: 27.5px; top: 58px; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--text-green), var(--text-yellow)); opacity: 0.4; }
.svc-step .n { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 50%; background: var(--bg-dark); border: 2px solid rgba(57,255,20,0.55); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 400; font-size: 1.9rem; color: var(--text-green); box-shadow: 0 0 18px rgba(57,255,20,0.16); }
.svc-step > div { padding-top: 11px; }
.svc-step h3 { font-family: var(--font-roboto-bold), var(--font-body); font-size: 1.18rem; margin-bottom: 5px; color: var(--text-white); }
.svc-step p { font-size: 1.02rem; line-height: 1.55; margin: 0; color: rgba(255,255,255,0.72); max-width: none; }

.svc-cta { text-align: center; padding: 56px 0 20px; }
.svc-cta h2 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 18px; }
.svc-cta p { margin: 0 auto 28px; text-align: center; }
.svc-related { font-size: 1.05rem; color: rgba(255,255,255,0.7); }
.svc-cta .svc-related { margin-top: 22px; }
.svc-related a { color: var(--text-green); }
.svc-related a:hover { color: var(--accent); }

.svc-section .faq-list { margin-top: 6px; }

@media (max-width: 767px) {
    .page-wrap { padding: 0 18px; }
    .svc-section { padding: 34px 0; }
    /* Паддинг на самом .svc-step сдвигал кружок, а линию (absolute) — нет:
       она уезжала влево от центра и не доходила до следующего кружка.
       Поэтому отступы держит текст, а геометрия кружок↔линия считается от края блока. */
    .svc-step { grid-template-columns: 46px 1fr; gap: 14px; padding: 0; min-height: 0; }
    .svc-step:last-child { min-height: 0; }
    .svc-step .n { width: 46px; height: 46px; font-size: 1.5rem; }
    .svc-step > div { padding-top: 5px; padding-bottom: 26px; }
    .svc-step:last-child > div { padding-bottom: 0; }
    .svc-step:not(:last-child)::before { left: 21.5px; top: 46px; bottom: 0; }
}

/* кликабельные карточки-ссылки (витрина услуг) */
a.svc-card { text-decoration: none; color: inherit; display: block; }
a.svc-card h3 { display: flex; align-items: center; gap: 8px; }
a.svc-card h3::after { content: '→'; color: var(--text-green); font-weight: 700; transition: transform var(--transition-normal); margin-left: auto; }
a.svc-card:hover h3::after { transform: translateX(4px); }

/* Ссылки в карточках услуг на главной (хаб) */
.accordion-content-inner li a { color: var(--text-green); text-decoration: none; }
.accordion-content-inner li a:hover { color: var(--accent); text-decoration: underline; }
.accordion-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--font-roboto-bold), var(--font-body); font-weight: 700; color: var(--text-yellow); text-decoration: none; }
.accordion-more:hover { color: var(--accent); }
.accordion-more__arr { width: 18px; height: auto; transition: transform var(--transition-fast); }
.accordion-more:hover .accordion-more__arr { transform: translateX(4px); }
/* .btn-primary img (1 класс+элемент) задуман под крупную ведущую иконку слева (40px,
   margin-right) — специфичность выше одного класса, поэтому переопределяем тем же
   сочетанием класс+элемент, без !important. */
.btn-primary img.btn-primary__arr { width: 20px; height: 20px; margin: 0 0 0 8px; transition: transform var(--transition-fast); }
.btn:hover .btn-primary__arr { transform: translateX(4px); }

/* ==================== КЕЙСЫ (case-*) ==================== */
.cases-grid-page { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 26px; margin-top: 10px; }
.case-card { display: flex; flex-direction: column; background: rgba(10,31,10,0.5); border: 1px solid rgba(57,255,20,0.16); border-radius: var(--border-radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--transition-normal), border-color var(--transition-normal); }
.case-card:hover { transform: translateY(-5px); border-color: rgba(57,255,20,0.45); }
.case-card__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.case-card__site { display: inline-flex; align-items: center; gap: 6px; margin: 2px 24px 20px; padding: 6px 0; color: var(--text-green); font-family: var(--font-roboto-bold), var(--font-body); font-weight: 700; font-size: 1rem; text-decoration: none; }
.case-card__site:hover { color: var(--accent); }
.case-card__site-arr { width: 20px; height: auto; flex-shrink: 0; transition: transform var(--transition-fast); }
.case-card__site:hover .case-card__site-arr { transform: translateX(4px); }
.case-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; display: block; background: #0a140a; border-bottom: 1px solid rgba(57,255,20,0.14); }
.case-card__body { padding: 22px 24px 26px; }
.case-card__title { font-family: var(--font-roboto-bold), var(--font-body); font-weight: 700; font-size: 1.32rem; color: var(--text-white); margin-bottom: 6px; }
.case-card__sub { font-family: var(--font-body); font-size: 1rem; color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.case-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-chip { font-family: var(--font-body); font-size: 0.82rem; padding: 5px 12px; border-radius: 20px; background: rgba(57,255,20,0.1); color: var(--text-green); border: 1px solid rgba(57,255,20,0.2); white-space: nowrap; }
.case-chip.muted { background: rgba(255,255,255,0.05); color: var(--text-white); border-color: rgba(255,255,255,0.12); }

/* Страница кейса */
.case-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 26px; }
.case-cover { margin: 8px 0 12px; }
.case-cover img, .case-shot img { width: 100%; display: block; border-radius: var(--border-radius-md); border: 1px solid rgba(57,255,20,0.18); }
.case-shot { margin: 22px 0; }
.case-shot figcaption { margin-top: 10px; font-size: 0.95rem; color: rgba(255,255,255,0.55); text-align: center; }
.case-open-btn { margin-top: 4px; }
.case-tag-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-body); font-size: 1.05rem; color: var(--text-green); }
.case-tag-link:hover { color: var(--accent); }
.case-note { font-size: 0.95rem; color: rgba(255,255,255,0.5); }
@media (max-width: 767px){ .cases-grid-page { grid-template-columns: 1fr; } }

/* Тизер кейсов на главной — 3 карточки в ряд */
.cases-grid-home { grid-template-columns: repeat(3, 1fr); margin-top: 30px; }
@media (max-width: 1000px){ .cases-grid-home { grid-template-columns: 1fr; } }

/* Реферальная форма (переиспользуется формой вакансий — .vacancy-form) */
.referral-form-wrap, .vacancy-form-wrap { max-width: 660px; margin-top: 20px; }
.referral-form, .vacancy-form { display: grid; gap: 18px; }
.referral-form .form-input, .referral-form .form-textarea,
.vacancy-form .form-input, .vacancy-form .form-textarea { width: 100%; }
.referral-form select.form-input, .vacancy-form select.form-input { appearance: auto; cursor: pointer; }
/* .btn наследует justify-content:flex-start/text-align:left (нужно для кнопок с иконкой) —
   а эти кнопки растянуты на всю ширину формы (grid), поэтому текст без центрирования уезжал влево. */
.referral-submit, .vacancy-submit { justify-content: center; text-align: center; margin-top: 4px; }
.referral-form-status { margin-top: 8px; font-size: 1rem; }
.referral-form-status.ok { color: var(--text-green); }
.referral-form-status.err { color: #ff6b6b; }

/* Полные стили реферальной формы (не наследует .application-form) */
.referral-form .form-row, .vacancy-form .form-row { display: grid; grid-template-columns: 1fr; gap: 7px; margin-bottom: 2px; }
.referral-form .form-label, .vacancy-form .form-label { font-family: var(--font-roboto-bold), var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.5px; color: var(--accent); text-shadow: 0 0 12px rgba(57,255,20,0.45); text-transform: uppercase; }
.referral-form .form-label.required::after, .vacancy-form .form-label.required::after { content: ' *'; color: #ff4444; }
.referral-form .form-field, .vacancy-form .form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.referral-form .form-input, .referral-form .form-textarea,
.vacancy-form .form-input, .vacancy-form .form-textarea { width: 100%; padding: 13px 14px; background: rgba(255,255,255,0.1); border: 1px solid rgba(57,255,20,0.3); border-radius: 10px; color: var(--text-white); font-family: var(--font-body); font-size: 0.98rem; min-height: 48px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.referral-form .form-input:focus, .referral-form .form-textarea:focus,
.vacancy-form .form-input:focus, .vacancy-form .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57,255,20,0.2); }
.referral-form .form-textarea, .vacancy-form .form-textarea { resize: vertical; min-height: 110px; }
.referral-form select.form-input option, .vacancy-form select.form-input option { background: #0a140a; color: #fff; }
.referral-form .form-error, .vacancy-form .form-error { font-size: 0.82rem; color: #ff6b6b; }
.referral-form .form-error[hidden], .vacancy-form .form-error[hidden] { display: none; }
.referral-form .form-consent, .vacancy-form .form-consent { display: grid; gap: 12px; margin: 6px 0; }
.referral-form .consent-item, .vacancy-form .consent-item { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.referral-form .consent-checkbox, .vacancy-form .consent-checkbox { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.referral-form .consent-text, .vacancy-form .consent-text { font-size: 0.92rem; color: rgba(255,255,255,0.8); line-height: 1.4; }
.referral-form .consent-link, .vacancy-form .consent-link { color: var(--text-green); text-decoration: underline; }

/* Загрузка резюме — нативный input скрыт, видимая кнопка + имя файла */
.form-file-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.form-file-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: rgba(57,255,20,0.1); border: 1px solid rgba(57,255,20,0.3); border-radius: 10px; color: var(--text-green); font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); }
.form-file-btn:hover { background: rgba(57,255,20,0.18); border-color: var(--accent); }
.form-file-input:focus-visible + .form-file-btn { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57,255,20,0.2); }
.form-file-name { font-size: 0.9rem; color: rgba(255,255,255,0.7); word-break: break-all; }
.form-file-hint { font-size: 0.82rem; color: rgba(255,255,255,0.5); }

/* Карточка вакансии — крупный выделенный блок, отличается от .svc-card на страницах услуг */
.job-card { position: relative; margin-top: 26px; padding: clamp(28px,4vw,48px); background: linear-gradient(160deg, rgba(57,255,20,0.12), rgba(6,15,6,0.7) 65%); border: 1px solid rgba(57,255,20,0.4); border-radius: var(--border-radius-md); box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 60px rgba(57,255,20,0.08); overflow: hidden; }
.job-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--gradient-primary); }
.job-card__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(57,255,20,0.14); border: 1px solid rgba(57,255,20,0.45); color: var(--text-green); padding: 6px 16px; border-radius: 999px; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.job-card h3 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.7rem); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
.job-card__lede { font-size: 1.15rem; line-height: 1.65; color: rgba(255,255,255,0.88); max-width: 760px; margin-bottom: 8px; }
.job-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px 40px; margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(57,255,20,0.18); }
.job-card__col h4 { font-family: var(--font-roboto-bold), var(--font-body); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-yellow); margin-bottom: 14px; }
.job-card__col ul.svc-list { gap: 10px; }
.job-card__col ul.svc-list li { font-size: 1.05rem; }
@media (max-width: 767px) { .job-card { padding: 26px 20px; } }

/* ==================== БЛОГ ==================== */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; margin-top: 10px; }
.post-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(158deg, rgba(57,255,20,0.07), rgba(6,15,6,0.5) 62%); border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; padding: 30px 30px 24px 34px; text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--transition-normal), border-color var(--transition-normal); }
.post-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--gradient-primary); }
.post-card:hover { transform: translateY(-6px); border-color: rgba(57,255,20,0.5); }
.post-card__pill { align-self: flex-start; background: rgba(57,255,20,0.12); color: var(--text-green); border: 1px solid rgba(57,255,20,0.3); padding: 5px 14px; border-radius: 30px; font-family: var(--font-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 16px; }
.post-card__title { font-family: var(--font-roboto-bold), var(--font-body); font-weight: 700; font-size: 1.42rem; color: var(--text-white); margin-bottom: 12px; line-height: 1.22; }
.post-card__excerpt { font-family: var(--font-body); font-size: 1.05rem; color: rgba(255,255,255,0.72); line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.post-card__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; }
.post-card__date { font-family: var(--font-body); font-size: 0.88rem; color: rgba(255,255,255,0.5); }
.post-card__more { display: inline-flex; align-items: center; gap: 8px; color: var(--text-yellow); font-family: var(--font-roboto-bold), var(--font-body); font-weight: 700; font-size: 0.95rem; }
.post-card__more img { width: 16px; height: 14px; }
.article-meta { font-family: var(--font-body); font-size: 0.95rem; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
.article-body { max-width: 760px; }
.article-body h2 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem); text-transform: uppercase; letter-spacing: 0.5px; margin: 30px 0 14px; }
.article-body p { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.8; color: rgba(255,255,255,0.88); margin-bottom: 20px; }
.article-body ul { margin: 4px 0 18px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.article-body ul li { position: relative; padding-left: 28px; font-family: var(--font-body); font-size: 1.22rem; line-height: 1.55; color: rgba(255,255,255,0.88); }
.article-body ul li::before { content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 14px; background: url('img/arrow_green_pix.png') no-repeat left center; background-size: contain; image-rendering: pixelated; }
.article-body a { color: var(--text-green); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--accent); }
.article-body strong { color: #fff; }

/* Реферальная — панель формы + выбор программы карточками */
.referral-panel { max-width: 700px; margin-top: 22px; background: linear-gradient(160deg, rgba(57,255,20,0.07), rgba(6,15,6,0.55)); border: 1px solid rgba(57,255,20,0.28); border-radius: 22px; padding: 34px 36px; box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.ref-programs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 24px; padding: 0; border: 0; min-inline-size: 0; }
.ref-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ref-prog-card { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; background: rgba(255,255,255,0.04); border: 2px solid transparent; border-radius: 14px; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); height: 100%; }
.ref-prog-card:hover { background: rgba(57,255,20,0.06); }
.ref-radio:checked + .ref-prog-card { border-color: var(--text-green); background: rgba(57,255,20,0.1); }
.ref-radio:focus-visible + .ref-prog-card { box-shadow: 0 0 0 3px rgba(57,255,20,0.25); }
.ref-prog-name { font-family: var(--font-roboto-bold), var(--font-body); font-weight: 700; font-size: 1.12rem; color: #fff; }
.ref-prog-desc { font-family: var(--font-body); font-size: 0.92rem; color: rgba(255,255,255,0.65); line-height: 1.35; }
@media (max-width: 560px){ .ref-programs { grid-template-columns: 1fr; } }

/* ==== Self-hosted Roboto/Montserrat (из Google Fonts, woff2) ==== */
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/webfonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/webfonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Контакты */
.kontakt-link { color: var(--text-green); text-decoration: none; font-size: 1.15rem; font-family: var(--font-roboto-bold), var(--font-body); }
.kontakt-link:hover { color: var(--accent); text-decoration: underline; }

/* ── Контакт-панель (страница «Контакты») — вместо квадратных карточек ── */
.contact-panel { display: grid; grid-template-columns: minmax(240px, 350px) 1fr; background: linear-gradient(160deg, #0c1a0c 0%, #000 72%); border: 1px solid rgba(70,214,70,.25); border-radius: var(--border-radius-md); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.contact-panel__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 46px 32px; border-right: 1px solid rgba(70,214,70,.18); background: radial-gradient(circle at 50% 40%, rgba(57,255,20,.22), transparent 68%); }
.contact-panel__mark { width: 150px; height: auto; }
.contact-panel__name { font-family: var(--font-heading); font-size: 2rem; line-height: 1; color: var(--text-white); }
.contact-panel__name span { color: var(--text-green); }
.contact-panel__tag { color: #9a9a9a; font-size: .88rem; line-height: 1.5; max-width: 250px; }
.contact-list { list-style: none; margin: 0; padding: 8px 24px; display: flex; flex-direction: column; }
.contact-row + .contact-row a { border-top: 1px solid rgba(255,255,255,.07); }
.contact-row a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 20px 6px; text-decoration: none; color: var(--text-white); transition: background var(--transition-fast), padding var(--transition-fast); }
.contact-row a:hover { background: rgba(70,214,70,.07); padding-left: 14px; }
.contact-row__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-row__label { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.02; color: var(--text-white); letter-spacing: .01em; }
.contact-row a:hover .contact-row__label { color: var(--text-green); }
/* overflow-wrap, а не word-break: телефон рвать по цифрам нельзя, переносим только то, что реально не влезло (длинный e-mail / ссылка) */
.contact-row__val { color: #cfe8cf; font-weight: 600; font-size: 1.05rem; font-family: var(--font-roboto-bold), var(--font-body); overflow-wrap: break-word; }
.contact-row__val--nowrap { white-space: nowrap; }
.contact-row__arr { width: 34px; height: auto; flex-shrink: 0; opacity: .85; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.contact-row a:hover .contact-row__arr { opacity: 1; transform: translateX(5px); }
@media (max-width: 768px) {
  .contact-panel { grid-template-columns: 1fr; }
  .contact-panel__brand { border-right: none; border-bottom: 1px solid rgba(70,214,70,.18); padding: 34px 24px; }
  .contact-panel__mark { width: 116px; }
  .contact-list { padding: 6px 12px; }
  /* было `42px 1fr auto` под колонку с иконкой, которой в разметке нет:
     текст падал в 42-пиксельную колонку и телефон переносился по 2-3 цифры */
  .contact-row a { grid-template-columns: 1fr auto; gap: 12px; padding: 15px 4px; }
  .contact-row__label { font-size: 1.3rem; }
  .contact-row__val { font-size: 1rem; }
  .contact-row__arr { width: 26px; }
}

/* ── Блок «Мы на Яндекс.Картах» ── */
.ya-maps { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.ya-maps__badge { flex-shrink: 0; width: auto; height: 500px; max-width: 100%; display: block; background: radial-gradient(circle at 50% 46%, rgba(70,214,70,.32) 0%, rgba(70,214,70,.12) 38%, transparent 64%); }
.ya-maps__info { flex: 1; min-width: 280px; }
.ya-maps__info h3 { font-family: var(--font-heading); font-weight: 400; font-size: 2.5rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-white); margin: 0 0 14px; }
.ya-maps__info p { color: #9a9a9a; margin: 0 0 20px; line-height: 1.55; font-size: 1.05rem; }
.ya-maps__info .btn-yandex-reviews { display: inline-flex; }
@media (max-width: 768px) {
  .ya-maps { gap: 26px; justify-content: center; }
  .ya-maps__badge { height: 320px; }
  .ya-maps__info h3 { font-size: 2rem; }
}

/* ── Кнопка «Отклонить» в cookie-баннере (добавляется из main.js) ── */
.cookie-banner-decline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--text-white);
    font-family: var(--font-roboto-bold);
    font-size: 1rem;
    padding: 12px 25px;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
}
.cookie-banner-decline:hover { border-color: var(--text-white); transform: translateY(-2px); }

/* ── Кнопка «Удалить мои персональные данные» в подвале (добавляется из main.js) ── */
.pdn-delete-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-white);
    text-decoration: none;
    padding: 0;
    line-height: inherit;
    transition: color var(--transition-fast);
}
.pdn-delete-btn:hover { color: var(--accent); }
@media (max-width: 767px) { .pdn-delete-btn { font-size: 0.75rem; } }

/* ── Модалка удаления персональных данных ── */
.pdn-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pdn-modal.active { opacity: 1; visibility: visible; }
.pdn-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pdn-modal-content {
    position: relative;
    background: var(--bg-dark);
    border: 3px solid var(--accent);
    border-radius: var(--border-radius-md);
    width: 90%;
    max-width: 640px;
    padding: 52px 40px 36px;
    text-align: center;
    box-shadow: var(--shadow-glow);
}
.pdn-modal-close {
    position: absolute;
    top: 12px;
    right: 18px;
    background: transparent;
    border: none;
    color: var(--text-white);
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.pdn-modal-close:hover { color: var(--accent); }
.pdn-modal-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--text-white);
    margin: 0 0 22px;
}
.pdn-modal-title a { color: var(--accent); text-decoration: none; word-break: break-word; }
.pdn-modal-title a:hover { text-decoration: underline; }
.pdn-modal-note {
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
@media (max-width: 767px) { .pdn-modal-content { padding: 44px 22px 28px; } }