/* === 2K / QHD ADAPTATION (вынесено из основного CSS) ===
       Ниже 2200px сайт остаётся во вёрстке Full HD без изменений. */

    
            /* === ТЕКСТ ПО КРУГУ (правый верхний угол hero) ===
               Названия услуг нанизаны на две круговые дуги через SVG textPath:
               верхняя идёт слева направо через верх, нижняя — через низ, поэтому
               в покое весь текст читается нормально. Весь SVG медленно вращается,
               из-за чего названия идут по кругу. */
            .hero-orbit-clip {
            /* Обрезка по границам hero: круг физически не может выйти
               на светлые секции ниже, при любой высоте экрана. */
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
            }
            .hero-orbit {
            /* Диаметр подобран так, чтобы кольцо целиком помещалось в hero.
               Чтобы уменьшить круг, не трогая кегль, из ленты убраны четыре
               названия — длина текста сократилась, а радиус и размер бокса
               уменьшились пропорционально. Размер надписей на экране
               (кегль × масштаб viewBox) остался прежним — 35px. */
            --orbit-size: 976.5px;
            /* Подгонка радиуса: лента заканчивается разделителем «•», поэтому
               промежуток до первого названия должен равняться ровно одному
               пробелу — столько же остаётся между соседними словами.
               ВАЖНО: масштаб задаётся на самом <svg>, а не на <path> —
               Chrome верстает textPath по исходной геометрии пути и
               transform: scale() на пути просто игнорирует: окружность
               под текстом остаётся прежней и круг не замыкается. */
            --orbit-k: 1;
            position: absolute;
            top: -262px;
            /* right — расстояние от правого края hero: больше значение → левее,
               отрицательное → круг уходит за правый край экрана. */
            right: -27.75rem;
            width: var(--orbit-size);
            height: var(--orbit-size);
            z-index: 0;
            opacity: 0.5;
            pointer-events: none;
            /* лента вписана в viewBox, поэтому обрезка ничего не теряет */
            overflow: hidden;
            /* Масштаб задан отдельным свойством scale, а не transform:
               transform целиком перезаписывается анимацией вращения,
               поэтому в keyframes остаётся только rotate. */
            scale: var(--orbit-k);
            transform-box: view-box;
            transform-origin: 50% 50%;
            animation: heroOrbitSpin 48s linear infinite;
            }
            /* Второй круг: тот же бокс и та же позиция — значит тот же центр,
               но свой радиус траектории и свой кегль. Вращение в другую сторону. */
            .hero-orbit--alt {
            animation-direction: reverse;
            }
            /* Дубли тех же двух кругов в левом нижнем углу hero: та же
               геометрия, но позиция зеркальна правой верхней паре.
               top/right нужно сбросить в auto, иначе блок будет
               переопределён по вертикали и горизонтали сразу. */
            .hero-orbit--bl {
            top: auto;
            right: auto;
            bottom: -162px;
            left: -384px;
            }
            /* === ПАДАЮЩИЕ ЭМОДЗИ ===
               Слой живёт внутри каждой светлой секции, а не на всю страницу.
               Так дождь вообще не заходит на фиолетовые блоки — нечего резать
               на границе hero и «О нас». У своих кромок секции слой гасится
               маской, поэтому символ растворяется, а не рубится пополам.
               Позиция, длительность, размер, снос и поворот заданы на каждом
               span через пользовательские свойства. Задержка отрицательная:
               анимация стартует сразу, но уже «сдвинута» по фазе, поэтому
               эмодзи расставлены по высоте случайно и ни один не ждёт. */
            .section-emoji {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
            }
            .section-emoji span {
            position: absolute;
            top: 0;
            left: var(--x);
            font-size: var(--s);
            line-height: 1;
            opacity: 0.55;
            animation: emojiFall var(--d) linear infinite;
            animation-delay: var(--dl);
            will-change: transform;
            }
            @keyframes emojiFall {
            from { transform: translate3d(0, -12vh, 0) rotate(0deg); }
            to { transform: translate3d(var(--drift), 112vh, 0) rotate(var(--r)); }
            }
            @media (prefers-reduced-motion: reduce) {
            .section-emoji span { animation: none; }
            }
            /* === ТОНКАЯ КЛЕТКА ПО КРАЯМ HERO ===
               Две полосы с сеткой из линий слева и справа. Рисуются
               псевдоэлементами, разметку не трогаем. Каждая линия —
               repeating-linear-gradient, шаг задаёт --grid-cell.
               Маска гасит клетку к внутреннему краю, чтобы полоса
               растворялась, а не заканчивалась резкой чертой. */
            .hero::before,
            .hero::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: clamp(150px, 24vw, 380px);
            z-index: 0;
            pointer-events: none;
            --grid-cell: 30px;
            --grid-line: rgba(255, 255, 255, 0.22);
            background-image:
            repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-cell)),
            repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px var(--grid-cell));
            }
            .hero::before {
            left: 0;
            -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.34) 62%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.34) 62%, transparent 100%);
            }
            .hero::after {
            right: 0;
            -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.34) 62%, transparent 100%);
            mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.34) 62%, transparent 100%);
            }
            .hero-orbit-text {
            font-family: 'Unbounded', sans-serif;
            /* ВЕРХНИЙ РЕГИСТР: требование заказчика */
            text-transform: uppercase;
            /* Радиус траектории = (длина текста + один пробел) / 2π:
               текст кончается на «•», и добавленный пробел делает
               промежуток до первого названия точно таким же, как между
               соседними словами. Радиус в units viewBox; на экране его
               размер задаёт --orbit-size. */
            font-size: 25.8px;
            font-weight: 700;
            letter-spacing: 0.04em;
            fill: #fff;
            }
            /* Второй круг: названий столько же, но они длиннее первого круга,
               поэтому радиус траектории больше, а кегль меньше — на
               экране лента получается заметно короче и идёт внутри
               первого круга. */
            .hero-orbit--alt .hero-orbit-text { font-size: 12.1px; }
            @keyframes heroOrbitSpin {
            /* Круг должен сжиматься и вращаться одновременно, поэтому
               масштаб и поворот разнесены по разным свойствам. */
            from { rotate: 0deg; }
            to { rotate: 360deg; }
            }
            @media (prefers-reduced-motion: reduce) {
            .hero-orbit { animation: none; }
            }
            @media (max-width: 1100px) {
            .hero-orbit {
            --orbit-size: 457.5px;
            /* кегль тут меньше → текст короче → круг ужимается целиком,
               вместе с траекторией и надписями */
            --orbit-k: 0.6399;
            top: -206px;
            right: -11.75rem;
            }
            .hero-orbit-text { font-size: 16.5px; }
            /* Второй круг на узких экранах скрыт: 84 символа не помещаются
               во вложенное кольцо читаемым кеглем — радиусы сходились бы
               вплотную к первому кругу. Свой --orbit-k на случай, если
               круг всё же включат: иначе лента переполнила бы окружность. */
            .hero-orbit--alt { display: none; --orbit-k: 1.366; }
            /* зеркальная пара снизу слева на тех же брейкпоинтах;
               top/right сбрасываем здесь же — ниже по файлу идёт
               .hero-orbit { top: … }, которое иначе перебьёт сброс */
            .hero-orbit--bl { top: auto; right: auto; bottom: -106px; left: -8rem; }
            }
            @media (max-width: 768px) {
            .hero-orbit { display: none; }
            }
            /* === HERO 2.0: заголовок и подзаголовок сверху по центру,
               ниже услуги 4×2, в самом низу кнопка и быстрые ссылки === */
            .hero-inner {
            position: relative;
            z-index: 1;
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(1.5rem, 3vw, 2.75rem);
            width: min(1400px, 95%);
            margin: 0 auto;
            }
            .hero-svc-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: calc(clamp(0.5rem, 0.7vw, 0.7rem) * var(--svc-scale));
            width: 100%;
            }
            .hero-copy {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            }
            /* Подъём сетки услуг: блок перестаёт «провисать» после подзаголовка.
               Свободное место под подзаголовком — его margin-bottom (20px)
               плюс зазор .hero-inner. На 901px это даёт ~7px до плашек. */
            @media (min-width: 901px) {
.hero-svc-grid { margin-top: -2rem; }
}
            .hero-svc {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: calc(0.25rem * var(--svc-scale));
            min-height: calc(140px * var(--svc-scale));
            padding: calc(0.5rem * var(--svc-scale));
            background: #fff;
            border: 1px solid rgba(26, 26, 26, 0.08);
            border-radius: calc(16px * var(--svc-scale));
            box-shadow: 0 6px 18px rgba(26, 26, 26, 0.06);
            text-decoration: none;
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
            }
            .hero-svc:hover {
            transform: translateY(-5px);
            border-color: rgba(139, 92, 246, 0.35);
            box-shadow: 0 14px 30px rgba(26, 26, 26, 0.12);
            }
            .hero-svc-media {
            display: block;
            border-radius: calc(11px * var(--svc-scale));
            overflow: hidden;
            aspect-ratio: 2.35 / 1;
            width: 100%;
            margin: 0 auto;
            background: radial-gradient(ellipse 120% 120% at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 80%), radial-gradient(circle at var(--p1, 18% 28%), rgba(255, 255, 255, 0.15) 0 34px, transparent 35px), radial-gradient(circle at var(--p2, 84% 72%), rgba(255, 255, 255, 0.15) 0 56px, transparent 57px), radial-gradient(circle at var(--p3, 70% 18%), rgba(255, 255, 255, 0.15) 0 20px, transparent 21px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M0 20 Q30 0 60 20 T120 20' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'/%3E%3Cpath d='M0 44 Q30 24 60 44 T120 44' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2'/%3E%3C/svg%3E") 0 50% / 120px 60px repeat-x, radial-gradient(circle at 10% 90%, var(--media-to) 0%, transparent 55%), linear-gradient(135deg, var(--media-from), var(--media-to));
            }
            .hero-svc-media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            }
.hero-svc-name {
            flex: 1 1 auto;
            min-width: 0;
            font-family: 'Unbounded', sans-serif;
            font-size: calc(clamp(0.56rem, 0.78vw, 0.8rem) * var(--svc-scale));
            font-weight: 700;
            line-height: 1.05;
            text-align: left;
            color: var(--clr-text);
            }
            /* Название услуги в одну строку на десктопе. Порог 960px: при 4 колонках
               плашка ~218px, и самая длинная подпись («Мобильные конструкции»)
               ещё помещается целиком. Ниже — обычный перенос. */
            @media (min-width: 960px) {
.hero-svc-name { white-space: nowrap; }
}
/* На узких экранах 4 колонки схлопывают плашки до нечитаемого размера */
            @media (max-width: 900px) {
.hero-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Планшеты: 8 услуг в два ряда, чтобы hero помещался на один экран */
@media (min-width: 601px) and (max-width: 900px) {
.hero-svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 1100px) {
.hero-svc-name { white-space: normal; text-align: center; display: flex; flex-direction: column; justify-content: center; min-height: 2.1em; }
}
            .hero-svc-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: calc(0.5rem * var(--svc-scale));
            width: 100%;
            margin: 0 auto;
            }
            .hero-svc-arrow {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: calc(1.45rem * var(--svc-scale));
            height: calc(1.45rem * var(--svc-scale));
            border-radius: 999px;
            color: #fff;
            box-shadow: none;
            }
            /* Стрелка — вектор, а не символ «→». У символа тушь лежит над
               базовой линией, из-за чего визуально он уезжал вверх от
               центра круга на ~3px. SVG центрируется геометрически. */
            .hero-svc-arrow svg {
            display: block;
            width: 56%;
            height: 56%;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round;
            }
            .hero-svc:nth-child(1) .hero-svc-arrow { background: linear-gradient(135deg, #6ee7a0, #10a060); }
            .hero-svc:nth-child(2) .hero-svc-arrow { background: linear-gradient(135deg, #ff8a8a, #e04848); }
            .hero-svc:nth-child(3) .hero-svc-arrow { background: linear-gradient(135deg, #b89cff, #7c3aed); }
            .hero-svc:nth-child(4) .hero-svc-arrow { background: linear-gradient(135deg, #ffb347, #e07820); }
            .hero-svc:nth-child(5) .hero-svc-arrow { background: linear-gradient(135deg, #f9a8d4, #db2777); }
            .hero-svc:nth-child(6) .hero-svc-arrow { background: linear-gradient(135deg, #7ab8ff, #2563eb); }
            .hero-svc:nth-child(7) .hero-svc-arrow { background: linear-gradient(135deg, #fde68a, #d97706); }
            .hero-svc:nth-child(8) .hero-svc-arrow { background: linear-gradient(135deg, #5eead4, #0f766e); }
             .hero-svc:nth-child(1) .hero-svc-media { --media-from: #bbf7d0; --media-to: #34d399; --p1: 18% 28%; --p2: 84% 72%; --p3: 70% 18%; }
              .hero-svc:nth-child(2) .hero-svc-media { --media-from: #fecaca; --media-to: #f87171; --p1: 80% 25%; --p2: 22% 75%; --p3: 50% 60%; }
             .hero-svc:nth-child(3) .hero-svc-media { --media-from: #ddd6fe; --media-to: #8b5cf6; --p1: 30% 70%; --p2: 75% 30%; --p3: 10% 15%; }
             .hero-svc:nth-child(4) .hero-svc-media { --media-from: #fed7aa; --media-to: #fb923c; --p1: 60% 20%; --p2: 15% 60%; --p3: 90% 85%; }
              .hero-svc:nth-child(5) .hero-svc-media { --media-from: #fbcfe8; --media-to: #ec4899; --p1: 25% 40%; --p2: 88% 35%; --p3: 55% 80%; }
              .hero-svc:nth-child(6) .hero-svc-media { --media-from: #bfdbfe; --media-to: #3b82f6; --p1: 70% 65%; --p2: 35% 15%; --p3: 92% 20%; }
             .hero-svc:nth-child(7) .hero-svc-media { --media-from: #fef08a; --media-to: #eab308; --p1: 12% 75%; --p2: 60% 45%; --p3: 85% 55%; }
             .hero-svc:nth-child(8) .hero-svc-media { --media-from: #99f6e4; --media-to: #14b8a6; --p1: 45% 30%; --p2: 90% 80%; --p3: 20% 20%; }
            .hero-copy {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            }
            .hero-copy .hero-headline {
            text-align: center;
            margin: 0 0 20px;
            font-size: clamp(1.8rem, 3.8vw, 3.8rem);
            }
            .hero-copy .hero-sub {
            margin: 0 0 1.25rem;
            font-size: clamp(0.85rem, 1.35vw, 1.22rem);
            color: rgba(255, 255, 255, 0.84);
            }
            .hero-copy .hero-sub-line {
            display: block;
            white-space: normal;
            }
            /* Быстрые ссылки: одна общая плашка на стыке hero и секции «О нас»,
               наезжает вверх на волнистую границу */
            .hero-anchor-links {
            position: relative;
            z-index: 3;
            display: flex;
            width: fit-content;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 5px;
            max-width: calc(100% - 3rem);
            /* Подъём плашки на стык. ВАЖНО: подъём не может превышать padding-bottom
               секции hero (6rem). Когда содержимое hero выше окна, hero растёт,
               min-height перестаёт давать запас, и всё, что поднято выше
               padding-bottom, наезжает на сетку услуг. */
            margin: -5rem auto 0;
            padding: 6px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(26, 26, 26, 0.07);
            box-shadow: 0 10px 30px rgba(26, 26, 26, 0.03);
            backdrop-filter: blur(10px);
            }
            .hero-anchor-links a {
            --pill-a: #db2777;
            --pill-b: #f9a8d4;
            --pill-glow: rgba(219, 39, 119, 0.28);
            position: relative;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            padding: 0.6rem 1.6rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.4);
            background-color: var(--pill-a);
            background-image: linear-gradient(115deg, var(--pill-b) 0%, var(--pill-a) 100%);
            color: #fff;
            font-family: 'Unbounded', sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.03em;
            text-decoration: none;
            transition: transform 0.2s ease, border-color 0.2s ease;
            }
            .hero-anchor-links a::after {
            content: '';
            position: absolute;
            top: -60%;
            bottom: -60%;
            left: 0;
            width: 45%;
            pointer-events: none;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: translateX(-140%) skewX(-16deg);
            animation: heroPillFlow 3.6s ease-in-out infinite;
            }
            .hero-anchor-links a:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.8); }
/* Свой цвет у каждой ссылки: О нас — фиолетовый, Отзывы — розовый, Контакты — синий */
.hero-anchor-links a:nth-child(1) { --pill-a: #7c3aed; --pill-b: #c4b5fd; --pill-glow: rgba(124, 58, 237, 0.30); }
.hero-anchor-links a:nth-child(2) { --pill-a: #db2777; --pill-b: #f9a8d4; --pill-glow: rgba(219, 39, 119, 0.28); }
.hero-anchor-links a:nth-child(3) { --pill-a: #2563eb; --pill-b: #93c5fd; --pill-glow: rgba(37, 99, 235, 0.28); }
            .hero-anchor-links a:nth-child(2)::after { animation-delay: -1.2s; }
            .hero-anchor-links a:nth-child(3)::after { animation-delay: -2.4s; }
            @keyframes heroPillFlow {
            from { transform: translateX(-140%) skewX(-16deg); }
            to { transform: translateX(340%) skewX(-16deg); }
            }
            @media (prefers-reduced-motion: reduce) {
            .hero-anchor-links a::after { animation: none; opacity: 0; }
            }
            @media (min-width: 901px) {
            .hero {
            /* hero начинается от самого верха страницы (body padding-top = 0),
               поэтому сверху нужен только запас под плавающую шапку (её низ ~90px) */
            padding: 6.5rem 2rem 6rem;
            }
            }
            @media (min-width: 3200px) {
            .hero-svc-grid {
            max-width: calc(52rem * var(--svc-scale));
            }
            .hero-svc-name {
            font-size: calc(0.88rem * var(--svc-scale));
            }
            .hero-copy .hero-headline {
            font-size: 3.96rem;
            }
            .hero-copy .hero-sub {
            font-size: 1.26rem;
            }
            }
            @media (max-width: 900px) {
            .hero-inner {
            grid-template-columns: minmax(0, 1fr);
            gap: 1.75rem;
            }
            .hero-copy {
            order: 0;
            }
            .hero-copy .hero-headline {
            font-size: clamp(1.62rem, 5.6vw, 2.34rem);
            }
            .hero-copy .hero-sub {
            font-size: clamp(0.81rem, 2.8vw, 0.99rem);
            color: rgba(255, 255, 255, 0.84);
            }
            .hero-svc-name {
            font-size: calc(clamp(0.52rem, 2.2vw, 0.68rem) * var(--svc-scale));
            }
            }
            @media (max-width: 480px) {
            .slider-dots {
            display: none;
            }
            /* Блок «О нас» чуть ниже; top не влияет на раскладку соседей */
            .about-intro {
            position: relative;
            top: 1.25rem;
            }
            .about-glass {
            width: min(calc(100% - 2rem), 400px);
            padding: 1.25rem 1rem;
            top: 1rem;
            }
            .about-glass-text h3 {
            font-size: clamp(0.9rem, calc((100vw - 5.25rem) / 16.5), 1.25rem);
            }
            .about-glass-content {
            gap: 1rem;
            }
            .about-glass-text {
            text-align: center;
            }
            .about-glass-text p {
            margin-left: auto;
            margin-right: auto;
            }
            .about-glass-text .about-map-rect {
            height: 180px;
            margin-top: 0.75rem;
            }
            .map-wrapper {
            max-width: 210px;
            }
            /* Телефон: все 8 услуг и быстрые ссылки помещаются в первый экран */
            .hero {
            padding-top: 9rem;
            padding-bottom: 6.5rem;
            }
            .hero-inner {
            gap: 1rem;
            }
            .hero-copy .hero-sub {
            margin-bottom: 0;
            }
            .hero-copy .hero-headline {
            font-size: clamp(2.25rem, 10.5vw, 2.65rem);
            margin-bottom: 0.375rem;
            }
            .hero-copy .word-rainbow-wrap {
            font-size: 0.9em;
            }
            .hero-copy .hero-sub {
            font-size: clamp(0.85rem, 3.6vw, 0.95rem);
            }
            .hero-copy .hero-sub-line {
            display: block;
            }
            .hero-svc-arrow {
            display: none;
            }
            .hero-svc-name {
            text-align: center;
            }
            .hero-svc-grid {
            margin-top: 0.75rem;
            }
            .hero-svc-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;
            }
            .hero-svc {
            flex: 0 0 calc((100% - 1rem) / 3);
            min-width: 0;
            position: relative;
            min-height: 0;
            padding: 0.3rem;
            gap: 0.3rem;
            border-radius: 12px;
            }
            .hero-svc-media {
            aspect-ratio: 1.1 / 1;
            border-radius: 9px;
            }
            .hero-svc-name {
            font-size: 0.55rem;
            line-height: 1.1;
            letter-spacing: -0.01em;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 2.2em;
            }
            .hero-svc-arrow {
            position: absolute;
            top: 0.45rem;
            right: 0.45rem;
            width: 1.2rem;
            height: 1.2rem;
            }
            .hero-anchor-links {
            flex-wrap: nowrap;
            gap: 4px;
            padding: 4px;
            max-width: calc(100% - 1.5rem);
            }
            .hero-anchor-links a {
            padding: 0.55rem 0.8rem;
            font-size: 0.7rem;
            }
            }
            @media (max-width: 380px) {
            .hero-svc-name {
            letter-spacing: -0.03em;
            }
            }
            @media (max-width: 1100px) {
            /* Волны на 2px ближе к основной части фиолетового фона */
            section.cta-section {
            -webkit-mask-position: 0 2px, 0 calc(100% - 2px), 0 var(--cta-wave-h);
            mask-position: 0 2px, 0 calc(100% - 2px), 0 var(--cta-wave-h);
            }
            }
            @media (max-width: 1100px) {
            section.cta-section::before,
            section.cta-section::after {
            --grid-line: rgba(255, 255, 255, 0.28);
            background-image:
            linear-gradient(90deg, var(--grid-line) 0 1.5px, transparent 1.5px),
            linear-gradient(0deg, var(--grid-line) 0 1.5px, transparent 1.5px);
            background-size: var(--grid-cell) 100%, 100% var(--grid-cell);
            background-position: 0 0, 0 100%;
            }
            }
            /* Разделитель между контактами и кнопками соцсетей убран на планшетах и телефонах */
            @media (max-width: 1100px) {
            section.cta-section .contacts-socials { border-top-color: transparent; }
            }
            /* Низкие телефоны (360×740, 480×854): кнопки-якоря поднимаются в первый экран.
               На 412×914 правило не действует. */
            @media (max-width: 480px) and (max-height: 880px) {
            .hero-inner {
            gap: 0.75rem;
            }
            .hero-svc-grid {
            margin-top: 0.25rem;
            }
            .hero-svc-media {
            aspect-ratio: 1.25 / 1;
            }
            }
            /* Планшеты (601–1100): hero заполняет экран, круг целиком в кадре, заголовок и карточки крупнее */
@media (min-width: 601px) and (max-width: 1100px) {
.hero {
justify-content: center;
padding: 6.5rem 2rem 6.5rem;
}
.hero-inner {
gap: clamp(1.5rem, 3.5vh, 2.5rem);
}
.hero-copy .hero-headline {
font-size: clamp(2.6rem, min(8vw, 8.5vh), 4.6rem);
}
.hero-copy .hero-sub {
font-size: clamp(1.05rem, 2.6vw, 1.45rem);
}
.hero-svc-grid {
width: min(100%, 760px);
gap: 0.75rem;
}
.hero-svc {
padding: 0.6rem;
gap: 0.45rem;
border-radius: 16px;
}
.hero-svc-media {
aspect-ratio: 1.2 / 1;
border-radius: 12px;
}
.hero-svc-name {
font-size: clamp(0.8rem, 1.9vw, 1.05rem);
text-align: center;
}
.hero-svc {
position: relative;
}
.hero-svc-arrow {
display: none;
}
.hero-orbit {
display: block;
--orbit-size: 420px;
--orbit-k: 1;
top: -8rem;
right: -12rem;
}
.hero-orbit--alt {
display: block;
--orbit-size: 500px;
--orbit-k: 1;
top: calc(-8rem - 40px);
right: calc(-12rem - 40px);
}
.hero-orbit--bl {
top: auto;
right: auto;
bottom: 22rem;
left: -14rem;
}
.hero-orbit--alt.hero-orbit--bl {
top: auto;
right: auto;
bottom: calc(22rem - 40px);
left: calc(-14rem - 40px);
}
.hero-orbit-text {
font-size: 25.8px;
}
}
@media (min-width: 601px) and (max-width: 1100px) {
.contacts-horizontal {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
@media (min-width: 601px) and (max-width: 900px) {
.about-glass {
max-width: 640px;
}
.about-glass-text h3,
.about-glass-text p {
text-align: center;
}
.about-glass-text p {
margin-left: auto;
margin-right: auto;
}
}
/* Планшет в альбомной ориентации (901–1100): заголовок слева, карточки справа — hero помещается по высоте */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1100px) {
.hero-inner {
display: grid;
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
align-items: center;
column-gap: 2rem;
row-gap: 1.5rem;
}
.hero-copy .hero-headline {
font-size: clamp(1.9rem, min(3.9vw, 6.2vh), 3.2rem);
white-space: nowrap;
}
.hero-copy .hero-sub {
font-size: clamp(0.95rem, 1.6vw, 1.15rem);
}
.hero-svc-grid {
width: 100%;
margin-top: 0;
}
.hero-svc-media {
aspect-ratio: 1.2 / 1;
}
.hero-svc-name {
white-space: normal;
font-size: clamp(0.7rem, 1.25vw, 0.85rem);
}
.hero-orbit {
top: -15rem;
right: -15rem;
}
.hero-orbit--alt {
top: calc(-15rem - 40px);
right: calc(-15rem - 40px);
}
.hero-orbit--bl,
.hero-orbit--alt.hero-orbit--bl {
top: auto;
right: auto;
}
.hero-orbit--bl {
bottom: -8rem;
left: -16rem;
}
.hero-orbit--alt.hero-orbit--bl {
bottom: calc(-8rem - 40px);
left: calc(-16rem - 40px);
}
}
@media (min-width: 481px) and (max-width: 900px) {
            .review-slide {
            flex: 0 0 50%;
            }
            }

            /* === QHD / 4K (2560px+) === */


@media (min-width: 2560px) {
.hero { min-height: calc(100vh / 1.3333); }
.kaleido-text { height: calc(100vh / 1.3333); }
}