/* Контейнер и сетка */
.contact-hero {
    position: relative;
    padding: clamp(32px, 4vw, 56px) 0;
    overflow: hidden;
}

.contact-head {
    margin-bottom: 18px;
}

.contact-head h1 {
    font-size: clamp(24px, 3.4vw, 40px);
    line-height: 1.15;
    letter-spacing: .2px;
    font-weight: 800;
}

.contact-head .muted {
    opacity: .85;
}

/* Анимированный фон — мягкий «неон» */
.bg-animated {
    position: absolute;
    inset: 0;
    background: radial-gradient(40% 40% at 20% 20%, rgba(105, 124, 255, .18) 0%, transparent 60%),
    radial-gradient(45% 45% at 80% 30%, rgba(0, 255, 200, .12) 0%, transparent 60%),
    radial-gradient(50% 50% at 50% 80%, rgba(255, 120, 180, .12) 0%, transparent 60%);
    filter: blur(40px);
    animation: float 16s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes float {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(0, -20px, 0) scale(1.05);
    }
}

/* Карточки */
.cards {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
    "phones map"
    "emails map";
    gap: 16px;
    z-index: 1;
}

.card {
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(17, 22, 28, .8), rgba(13, 18, 24, .8));
    border: 1px solid var(--stroke, #2a2f36);
    border-radius: 16px;
    padding: 16px 16px 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}

.card-title {
    margin: 2px 0 10px;
    font-size: 1.05rem;
    letter-spacing: .2px;
    color: var(--muted, #95a1b5);
    font-weight: 700;
    text-transform: uppercase;
}

/* Раскладка */
.cards .card:nth-child(1) {
    grid-area: phones;
}

.cards .card:nth-child(2) {
    grid-area: emails;
}

.card--map {
    grid-area: map;
    display: flex;
    flex-direction: column;
}

/* Список контактов */
.contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--stroke, #2a2f36);
    border-radius: 12px;
    background: #0f141a;
    text-decoration: none;
    color: var(--text, #cfd6e4);
    transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}

.contact-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
    border-color: #3a4048;
}

.tip {
    margin-top: 10px;
    font-size: .88rem;
    opacity: .75;
}

/* Карта */
.map-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--stroke, #2a2f36);
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.map-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.btn.ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke, #2a2f36);
    background: transparent;
    color: var(--text, #cfd6e4);
    text-decoration: none;
}

.btn.ghost:hover {
    border-color: #3a4048;
}

/* Мобилки */
@media (max-width: 900px) {
    .cards {
        grid-template-columns: 1fr;
        grid-template-areas:
      "phones"
      "emails"
      "map";
    }
}

.hero {
    position: relative;
    min-height: clamp(380px, 70vh, 720px);
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(1200px 600px at -10% 10%, rgba(120, 150, 255, .08), transparent 60%),
    radial-gradient(900px 600px at 110% 20%, rgba(255, 120, 180, .09), transparent 60%),
    linear-gradient(180deg, #0d1218, #0b0f14 50%, #0a0e13);
}

.hero-canvas {
    position: absolute;
    inset: -10% -10% -10% -10%;
    width: 120%;
    height: 120%;
    filter: blur(22px) saturate(1.05) contrast(1.05);
    opacity: .9;
    z-index: 0;
}

/* Контент поверх */
.hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-inline: 16px;
}

.hero-title {
    font-weight: 900;
    font-size: clamp(32px, 6vw, 68px);
    line-height: 1.05;
    letter-spacing: .2px;
    margin: 0;
    color: #e9eef8;
    /* тонкая подсветка букв из canvas */
    text-shadow: 0 2px 18px rgba(50, 110, 255, .15);
}

.hero-sub {
    display: block;
    margin-top: 10px;
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight: 500;
    color: #9fb0c9;
}

.hero-cta {
    margin-top: clamp(16px, 3.5vh, 28px);
    display: inline-flex;
    gap: 10px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--stroke, #2a2f36);
    text-decoration: none;
    color: var(--text, #cfd6e4);
}

.btn.primary {
    background: linear-gradient(180deg, #2a7bff, #1a4dcb);
    border-color: rgba(42, 123, 255, .65);
    color: white;
    box-shadow: 0 10px 26px rgba(42, 123, 255, .25);
}

.btn.primary:hover {
    filter: brightness(1.05);
}

.btn.ghost:hover {
    border-color: #3a4048;
}

/* Чтобы под героем не липло */
.hero + section, .hero + .container {
    margin-top: 24px;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-canvas {
        display: none;
    }
}

.site-header.glass {
    background: rgba(10, 14, 19, .55) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* ——— Прозрачный хедер на странице Контактов ——— */
.site-header,
.rcc-header {
    background: transparent !important; /* убираем чёрный фон */
    box-shadow: none !important;
}

/* чтобы шапка была поверх динамичного фона */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* мягкий градиент под шапкой для читаемости (поверх canvas) */
.hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 96px; /* можно 64–128 */
    background: linear-gradient(180deg, rgba(6, 9, 13, .65), rgba(6, 9, 13, 0));
    pointer-events: none;
    z-index: 0; /* под контентом .hero-inner */
}

.contact-page .site-header,
.contact-page .rcc-header,
.contact-page .site-header::before,
.contact-page .site-header::after,
.contact-page .rcc-header::before,
.contact-page .rcc-header::after,
.contact-page .site-header .header-wrap,
.contact-page .site-header .rcc-wrap,
.contact-page .site-header .capsule {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Если фон «пришит» к какому-то дополнительному контейнеру внутри хедера */
.contact-page .site-header * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Позиционирование шапки — чтобы она была поверх canvas, но не «распухала» */
.contact-page .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Тонкий градиент под шапкой для читаемости (можно убрать, если не нужен) */
.contact-page .hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 84px; /* уменьши/увеличь при желании */
    background: linear-gradient(180deg, rgba(6, 9, 13, .58), rgba(6, 9, 13, 0));
    pointer-events: none;
    z-index: 0; /* ниже .hero-inner, выше canvas */
}

/* На всякий — убираем возможные фиксированные фоны у логотипа/меню */
.contact-page .rcc-logo,
.contact-page .rcc-menu,
.contact-page .rcc-contacts,
.contact-page . {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* высота шапки (подгони при необходимости) */
:root {
    --header-h: 96px;
}

/* шапка поверх, без фона */
.contact-page .site-header,
.contact-page .rcc-header {
    background: transparent !important;
    box-shadow: none !important;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* тянем секцию hero ПОД шапку, чтобы её фон был виден за шапкой */
.contact-page .hero {
    margin-top: calc(-1 * var(--header-h)); /* поднимаем вверх под шапку */
    padding-top: calc(var(--header-h) + 24px); /* возвращаем отступ для контента */
}

/* если градиент сверху кажется «полосой» — уменьши или убери */
.contact-page .hero::before {
    height: 64px; /* было 84/96 — делаем тоньше; можно вообще закомментить */
}

/* по умолчанию, если JS не успел */
:root {
    --header-h: 120px;
}

/* шапка прозрачная, без теней и нижних полос, и без внешних отступов */
.contact-page .site-header,
.contact-page .rcc-header {
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    position: sticky;
    top: 0;
    z-index: 100;
}

.contact-page .site-header::before,
.contact-page .site-header::after,
.contact-page .rcc-header::before,
.contact-page .rcc-header::after {
    background: transparent !important;
    border: 0 !important;
    height: 0 !important;
    box-shadow: none !important;
    content: none !important; /* если это декоративные псевдоэлементы */
}

/* фон hero уходит под шапку ровно на её высоту */
.contact-page .hero {
    margin-top: calc(-1 * var(--header-h));
    padding-top: calc(var(--header-h) + 24px);
}

/* если верхний градиент кажется «полосой» — уменьши/убери */
.contact-page .hero::before {
    height: 48px;
}

/* ===== Контакты: прозрачный фикс-хедер и герой под ним ===== */

/* запас по умолчанию: если JS не успел посчитать высоту шапки */
:root {
    --header-h: 120px;
}

/* фиксируем шапку и убираем её фон/тени */
.contact-page .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 !important;
}

.contact-page .site-header::before,
.contact-page .site-header::after {
    content: none !important;
}

.contact-page .site-header * {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* герой начинается под шапкой и его фон «заходит» за неё */
.contact-page .hero {
    margin-top: 0; /* без отрицательных маргинов */
    padding-top: calc(var(--header-h) + 24px); /* отступ под высоту шапки */
}

/* если верхняя «полоса» мешает — выключим её */
.contact-page .hero::before {
    display: none;
}

/* ===== Контакты: прозрачный фикс-хедер и герой под ним ===== */

/* запас по умолчанию (потом JS проставит точную высоту) */
:root {
    --header-h: 120px;
}

/* фиксированная прозрачная шапка без теней/границ */
.contact-page .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 !important;
}

.contact-page .site-header::before,
.contact-page .site-header::after {
    content: none !important;
}

/* на всякий: убираем внутренние заливки */
.contact-page .site-header * {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* герой начинается под шапкой и его фон уходит за шапку */
.contact-page .hero {
    margin-top: 0;
    padding-top: calc(var(--header-h) + 24px);
}

/* убираем верхний градиент-«полосу», если мешает */
.contact-page .hero::before {
    display: none;
}

/* фон героя растягиваем на весь экран и кладём под всё */
.contact-page .hero-canvas {
    position: fixed; /* вместо absolute */
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none; /* чтобы кликались ссылки сверху */
    filter: blur(22px) saturate(1.05) contrast(1.05);
    opacity: .9;
}

/* сам герой — просто контейнер над фоном, начинаем ниже шапки */
:root {
    --header-h: 120px;
}

/* подгони при желании */
.contact-page .hero {
    position: relative;
    z-index: 1; /* выше canvas */
    min-height: calc(100vh - var(--header-h));
    padding-top: calc(var(--header-h) + 24px);
    margin-top: 0;
}

/* делаем шапку прозрачной, чтобы фон был виден под ней */
.contact-page .site-header {
    background: transparent !important;
    box-shadow: none !important;
}

/* === БОМБЕЗНЫЙ ДИНАМИЧНЫЙ ТИТУЛ === */
.fx-title {
    font-family: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, "Manrope", Arial, sans-serif;
    font-weight: 900;
    letter-spacing: .5px;
    line-height: 1.05;
    position: relative;
    /* анимированный градиент в тексте */
    background: conic-gradient(from 180deg at 50% 50%,
    #75b6ff, #2ae0b8, #ff7fb2, #75b6ff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fxShift 14s linear infinite, fxGlowPulse 4.5s ease-in-out infinite alternate;
    /* мягкое свечение вокруг букв */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 30px rgba(80, 140, 255, .18),
    0 24px 60px rgba(42, 123, 255, .12);
}

/* бегущая блик-полоска */
.fx-title::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%,
    rgba(255, 255, 255, .18) 40%, transparent 60%);
    mix-blend-mode: screen;
    background-size: 200% 100%;
    animation: fxSweep 3.8s ease-in-out infinite;
    pointer-events: none;
    border-radius: 8px;
}

/* Второй заголовок — более спокойный, но живой */
.fx-subtitle {
    font-family: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, "Manrope", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: .3px;
    display: inline-block;
    background: linear-gradient(90deg, #cfe7ff 0%, #e5d1ff 50%, #cfe7ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(80, 140, 255, .12));
    animation: fxSub 8s linear infinite;
}

@keyframes fxShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes fxGlowPulse {
    0% {
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 30px rgba(80, 140, 255, .18),
        0 24px 60px rgba(42, 123, 255, .12);
    }
    100% {
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 42px rgba(42, 220, 180, .25),
        0 36px 80px rgba(255, 120, 180, .18);
    }
}

@keyframes fxSweep {
    0% {
        background-position: -120% 0;
        opacity: .0;
    }
    25% {
        opacity: .6;
    }
    50% {
        background-position: 120% 0;
        opacity: .0;
    }
    100% {
        background-position: 120% 0;
        opacity: .0;
    }
}

@keyframes fxSub {
    0% {
        filter: drop-shadow(0 6px 18px rgba(80, 140, 255, .12));
    }
    50% {
        filter: drop-shadow(0 10px 24px rgba(255, 120, 180, .16));
    }
    100% {
        filter: drop-shadow(0 6px 18px rgba(80, 140, 255, .12));
    }
}

.fx-title:hover {
    animation-duration: 9s, 3.6s;
}

.fx-subtitle:hover {
    animation-duration: 5s;
}

@media (prefers-reduced-motion: reduce) {
    .fx-title, .fx-title::after, .fx-subtitle {
        animation: none !important;
    }
}

/* === Контакты: зелёная тёмная тема (оверрайды) === */
:root {
  --bg: #0f2d2a;            /* общий фон */
  --bg-2: #123632;          /* вторичные панели */
  --stroke: rgba(187,245,232,.14);
  --text: #eaf6f3;
  --muted: #b6cec8;
  --shadow-deep: 0 12px 40px rgba(7,32,29,.45);
}

/* фон геро-секции: синие/розовые всполохи → зелёные/бирюзовые */
.contact-page .hero {
  background:
    radial-gradient(1200px 600px at -10% 10%, rgba(24, 120, 100, .10), transparent 60%),
    radial-gradient(900px 600px at 110% 20%, rgba(40, 200, 170, .10), transparent 60%),
    linear-gradient(180deg, #0f2d2a, #123632 55%, #0e2522);
  color: var(--text);
}

/* «неоновые» пятна в бг — делаем зелёно-бирюзовыми */
.contact-page .bg-animated {
  background:
    radial-gradient(40% 40% at 20% 20%, rgba(40, 200, 170, .18) 0%, transparent 60%),
    radial-gradient(45% 45% at 80% 30%, rgba(24, 160, 130, .12) 0%, transparent 60%),
    radial-gradient(50% 50% at 50% 80%, rgba(90, 210, 170, .12) 0%, transparent 60%);
  filter: blur(40px);
}

/* «стеклянные» карточки – тёмно-зелёные */
.contact-page .card {
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(16, 41, 37, .80), rgba(13, 38, 34, .80));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-deep);
}

/* подписи карточек чуть приглушённые в зелёный */
.contact-page .card-title { color: var(--muted); }

/* ссылки-кнопки контактов: фон и бордер в зелёную гамму */
.contact-page .contact-link {
  background: #102521;
  border-color: var(--stroke);
  color: var(--text);
}
.contact-page .contact-link:hover {
  box-shadow: 0 10px 20px rgba(7,32,29,.35);
  border-color: rgba(187,245,232,.22);
  transform: translateY(-2px);
}

/* рамки карты и ghost-кнопок — те же зелёные бордеры */
.contact-page .map-wrap,
.contact-page .btn,
.contact-page .btn.ghost {
  border-color: var(--stroke);
  color: var(--text);
}
.contact-page .btn.ghost { background: rgba(18, 54, 50, .25); }
.contact-page .btn.ghost:hover { border-color: rgba(187,245,232,.22); }

/* шапка-стекло на этой странице — зелёное стекло */
.contact-page .site-header.glass {
  background: rgba(10, 36, 31, .55) !important;
  border-bottom: 1px solid rgba(187,245,232,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* заголовки/подзаголовки — лёгкая коррекция цветов под зелёный */
.contact-page .hero-title { color: #eaf6f3; text-shadow: 0 2px 18px rgba(24,120,100,.18); }
.contact-page .hero-sub   { color: #b6cec8; }

/* если где-то остались “чёрные” подложки */
.contact-page .site-header,
.contact-page .rcc-header { background: transparent !important; box-shadow: none !important; }