body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .heading { font-family: 'Geologica', sans-serif; }
/* бургер‑иконка */
.burger-icon {
    width: 24px; height: 20px; display: flex; flex-direction: column; justify-content: space-between;
}
.burger-icon span {
    width: 100%; height: 3px; background-color: white; border-radius: 2px; transition: 0.3s;
}
.headerdark .burger-icon span {
    background-color: #1C2A4A;
}

/* фон hero */
.hero-bg {
    /*background-image: radial-gradient(circle at 30% 30%, rgba(0, 80, 150, 0.4) 0%, rgba(0, 20, 50, 0.9) 100%),
                        linear-gradient(145deg, #0b1e33, #0a1a2f);*/
    background-image: url("/assets/site/images/rebranding/bg.jpg");
    background-size: cover;
    background-position: center;
}
.overlay-active {
    background: rgba(4, 24, 54, 0.35);
    backdrop-filter: blur(8px);
}
.menu-item svg {
    transition: transform 0.2s;
}
.menu-item svg.animate-rotate-90 {
    transform: rotate(90deg);
}
#menu {
    transition: transform 0.3s ease-in-out;
    top: 0; /* чтобы было под статус-баром, как в макете */
    will-change: transform;
}
/* декоративные элементы */
.decor-blur {
    position: absolute;
    border-radius: 1000px;
    filter: blur(80px);
    opacity: 0.2;
    pointer-events: none;
}
/* FAQ стили */
.faq-item.active .faq-answer {
    display: block;
}
.faq-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border-radius: 16px;
    font-size: 32px;
    color: #414E5B;
    cursor: pointer;
    user-select: none;
}
.faq-answer {
    display: none;
    margin-top: 1.5rem;
    color: #414E5B;
    font-size: 1rem;
    line-height: 1.5;
}
.faq-item.active .faq-toggle {
    color: #1C2A4A;
}
.faq-card {
    box-shadow: 0px 1px 3px rgba(0,0,0,0.05), 0px 20px 25px -5px rgba(0,0,0,0.05);
}
/* кастомный чекбокс */
.custom-checkbox {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #687C91;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.custom-checkbox:checked {
    background: #007BFF;
    border-color: #007BFF;
    position: relative;
}
.custom-checkbox:checked::after {
    content: "✓";
    color: white;
    font-size: 16px;
    font-weight: bold;
}
/* футер: скругление верхних углов */
.footer-rounded {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
}

/*sro*/
/* Анимации появления */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

.decor-group1.animate {
  animation: slideInRight 1.2s ease-out forwards;
}
.decor-group2.animate {
  animation: fadeInUp 1.5s ease-out forwards;
}
.decor-vector1.animate {
  animation: fadeInScale 1.3s ease-out forwards;
}
.decor-vector2.animate {
  animation: fadeInUp 1.7s ease-out forwards;
}
/* Декоративные элементы (точное воспроизведение из CSS) */
.decor-rect {
    position: absolute;
    width: 226px;
    height: 233px;
    background: linear-gradient(180deg, rgba(28, 42, 74, 0.8) 0%, rgba(0, 111, 255, 0.8) 63.58%, rgba(50, 177, 255, 0.8) 100%);
    opacity: 0.2;
    filter: blur(30px);
    border-radius: 1000px;
    transform: rotate(-152.57deg);
    pointer-events: none;
}

.decor-group1 {
    position: absolute;
    pointer-events: none;
}

.decor-subtract {
    position: absolute;
    width: 246px;
    height: 281px;
    background: linear-gradient(147.98deg, rgba(97, 144, 245, 0.2) 21.9%, rgba(28, 42, 74, 0.2) 78.1%);
    box-shadow: 114.837px 67.4419px 114.531px rgba(8, 23, 55, 0.29), 74.4312px 43.7124px 67.0752px rgba(8, 23, 55, 0.22), 44.2334px 25.9776px 36.4804px rgba(8, 23, 55, 0.176), 22.9673px 13.4884px 18.6114px rgba(8, 23, 55, 0.145), 9.35707px 5.49527px 9.3322px rgba(8, 23, 55, 0.114), 2.12661px 1.24892px 4.50703px rgba(8, 23, 55, 0.07);
    border-radius: 2px;
    transform: rotate(-22.28deg);
}

.decor-group2 {
    position: absolute;
    width: 441px;
    height: 403px;
    pointer-events: none;
}

.decor-vector1 {
    position: absolute;
}

.decor-vector2 {
    position: absolute;
}

/* Декорации скрыты на мобильных, включаются с md */
@media (max-width: 768px) {
    .decor-rect, .decor-group1, .decor-group2 {
        display: none;
    }
}

/*section 2*/
/* Иконка предупреждения (синий квадрат 45° с восклицательным знаком) */
.alert-icon {
    position: relative;
    width: 50px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alert-icon .square {
    position: absolute;
    width: 36px;
    height: 36px;
    background: #007BFF;
    border-radius: 4px;
    transform: rotate(45deg);
}
.alert-icon .exclamation {
    position: relative;
    color: #EBF5FF;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    z-index: 1;
}
/* Кастомный чекбокс (для маркированных списков) */
.checkbox-custom {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #007BFF;
    border-radius: 4px;
    background: white;
    margin-right: 8px;
    flex-shrink: 0;
}

/*section 3 */
/* Декоративные элементы (blur-пятна) */
.decor-blur-1 {
    position: absolute;
    width: 248px;
    height: 326px;
    right: 5%;
    top: 10%;
    background: linear-gradient(180deg, #1C2A4A 0%, #001530 63.58%, #000000 100%);
    opacity: 0.8;
    filter: blur(80px);
    border-radius: 1000px;
    transform: rotate(-122.34deg);
    pointer-events: none;
    z-index: 0;
}
.decor-blur-2 {
    position: absolute;
    width: 604px;
    height: 621px;
    left: 20%;
    top: -40%;
    background: linear-gradient(180deg, rgba(28, 42, 74, 0.8) 0%, rgba(0, 111, 255, 0.8) 63.58%, rgba(50, 177, 255, 0.8) 100%);
    opacity: 0.2;
    filter: blur(80px);
    border-radius: 1000px;
    transform: rotate(-152.57deg);
    pointer-events: none;
    z-index: 0;
}
.decor-blur-3 {
    position: absolute;
    width: 424px;
    height: 424px;
    right: 5%;
    top: -5%;
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
}

/* Иконки для карточек */
.icon-message, .icon-calendar {
    position: relative;
    width: 50px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-message::before, .icon-calendar::before {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    background: #687C91;
    border-radius: 4px;
    transform: rotate(45deg);
}
.icon-message span, .icon-calendar span {
    position: relative;
    font-size: 24px;
    color: #EBF5FF;
    z-index: 1;
}
/* Градиентный фон карточек */
.card-gradient {
    background: linear-gradient(147.98deg, rgba(70, 118, 222, 0.2) 21.9%, rgba(20, 48, 110, 0.2) 78.1%);
}

/*section 4*/
.ic-marker {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid #007BFF;
    border-radius: 4px;
    flex-shrink: 0;
    background: transparent;
}
.ic-marker-white {
    border-color: #fff;
}
/* иконка восклицания (для синей карточки) */
.alert-icon {
    position: relative;
    width: 50px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.alert-icon .square {
    position: absolute;
    width: 36px;
    height: 36px;
    background: #007BFF;
    border-radius: 4px;
    transform: rotate(45deg);
}
.alert-icon .exclamation {
    position: relative;
    color: #F8F9FA;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    z-index: 1;
}
/*section 6*/
/* маркер списка (синий квадрат) */
.ic-marker-blue {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid #007BFF;
    border-radius: 4px;
    flex-shrink: 0;
}
/* иконка для СРО (слева) */
.icon-sro {
    position: relative;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.icon-sro .square-bg {
    position: absolute;
    width: 64px;
    height: 64px;
    background: #D4DAE0;
    border-radius: 8px;
    transform: rotate(45deg);
}
/* иконка для ЧЛЕНОВ СРО (справа) */
.icon-member {
    position: relative;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-member .square-bg {
    position: absolute;
    width: 64px;
    height: 64px;
    background: #D4DAE0;
    border-radius: 8px;
    transform: rotate(45deg);
}

/* Поворот стрелки при открытом дропдауне */
.dropdown-arrow.rotated {
    transform: rotateX(180deg);
}

#header .dropdown-trigger.hovered {
    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}

#headerdark .dropdown-trigger.hovered {
    background-color: var(--color-gray-50);
}

/* Плавное появление (опционально) */
.dropdown-menu:not(.hidden) {
    animation: fadeIn 0.2s ease-out;
}

/*Страхование*/
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

 /* для карусели */
.carousel-track {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}
.carousel-track.dragging {
    cursor: grabbing;
    transition: none !important;
}
.logo-item {
    width: 240px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Отключаем переход при ресете позиции */
.no-transition {
    transition: none !important;
}
/* Эффект затухания по краям */
.carousel-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.carousel-wrapper::before,
.carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px; /* ширина зоны затухания */
    height: 100%;
    pointer-events: none; /* чтобы не мешать кликам */
    z-index: 2;
}
.carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}
.carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}

label.error {
    color: red;
    font-size: 0.75rem;
}
span.error {
    color: red;
    font-size: 0.75rem;
}
input.error {
    border: 1px red solid !important;
    /* font-size: 0.75rem; */
}

.form-group.has-error input {
    border: 1px red solid !important;
    /* font-size: 0.75rem; */
}
#header.scrolled {
  background: rgba(0,36,83,0.3);
}
#header.scrolled .header-link,
#header.scrolled .logo,
#header.scrolled .dropdown-trigger {
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
/* bg page */
.range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    background: #EBF5FF; /* Secondary/Secondary 0 */
    border-radius: 20px;
    outline: none;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #007BFF;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    margin-top: -6px;
}
.range-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #007BFF;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
}
.range-slider::-webkit-slider-runnable-track {
    height: 12px;
    background: #EBF5FF;
    border-radius: 20px;
}
.range-slider::-moz-range-track {
    height: 12px;
    background: #EBF5FF;
    border-radius: 20px;
}
/* Активная часть слайдера (заполненная) будет визуально отдельно, но range сам заполняет цвет, мы сделаем через background-size, но проще оставить стандартное поведение */
.range-slider {
    background: linear-gradient(to right, #007BFF 0%, #007BFF var(--fill), #EBF5FF var(--fill), #EBF5FF 100%);
}
/* Иконка карандаша */
.pencil-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #687C91;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M17 3l4 4L7 21H3v-4L17 3z'/%3E%3Cpath d='M15 5l4 4'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    cursor: pointer;
}
@media (min-width: 1280px) {
    .card-custom {
        width: calc(33.333% - 1rem); /* по умолчанию ~33% с учётом gap-6 */
    }
    .card-custom:nth-child(1),
    .card-custom:nth-child(2) {
        width: calc(50% - 0.75rem); /* первые две по 50% */
    }
}
/* end bg page */

.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(28, 42, 74, 0.8);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    opacity: 1;
    visibility: visible;
}
.spinner {
    width: 80px;
    height: 80px;
    position: relative;
}
.spinner .square {
    position: absolute;
    width: 38px;
    height: 38px;
    margin: 1px;
    background: #007BFF;
    border-radius: 8px;
    animation: spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.spinner .square:nth-child(1) {
    top: 0;
    left: 0;
    animation-delay: 0s;
}
.spinner .square:nth-child(2) {
    top: 0;
    right: 0;
    animation-delay: 0.15s;
}
.spinner .square:nth-child(3) {
    bottom: 0;
    left: 0;
    animation-delay: 0.3s;
}
.spinner .square:nth-child(4) {
    bottom: 0;
    right: 0;
    animation-delay: 0.45s;
}
@keyframes spin {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.6) rotate(45deg);
        opacity: 0.5;
    }
    100% {
        transform: scale(1) rotate(90deg);
        opacity: 1;
    }
}
.cookie-banner {
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateY(0);
    opacity: 1;
}
.cookie-banner.hide {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}
.policy-link {
    color: #007BFF;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,123,255,0.3);
    transition: border-color 0.2s;
}
.policy-link:hover {
    border-bottom-color: #007BFF;
}
/* Иконка для формы (синий квадрат 45°) */
.rounded-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rounded-icon .square {
    position: absolute;
    background: #007BFF;
    border-radius: 4px;
    transform: rotate(45deg);
}