body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* верхняя плашка */
.top-bar {
    background: #0056a3;
    color: #fff;
}

/* hero */
.hero-section {
    background: linear-gradient(135deg, #0056a3 0%, #0096c7 40%, #ffffff 100%);
    color: #fff;
}

.hero-section .btn-outline-light {
    border-color: #fff;
}

/* иллюстрация-заглушка */
.hero-illustration {
    background: rgba(255, 255, 255, 0.12);
    border: 1px dashed rgba(255, 255, 255, 0.6);
    padding: 40px 20px;
    font-size: 0.95rem;
}

/* карточки сервисов */
.service-card,
.safety-card,
.tariff-card,
.news-card {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.service-card:hover,
.safety-card:hover,
.tariff-card:hover,
.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* about */
.about-box {
    background: #f8f9fb;
}

/* footer */
.footer-bg {
    background: #f4f4f6;
}

/* navbar logo */
.logo-navbar {
    height: 42px;
    width: auto;
    filter: drop-shadow(0 0 8px #ffea00);
    user-select: none;
}

/* HERO LOGO — Desktop */
.hero-section {
    position: relative;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../img/logo.png');
    background-repeat: no-repeat;
    background-size: 25%;        /* размер для больших экранов */
    background-position: right 50px center; /* отступ справа */
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

/* Tablet (до 992px) */
@media (max-width: 992px) {
    .hero-section::after {
        background-size: 35%;
        background-position: right 20px center;
        opacity: 0.28;
    }
}

/* Mobile (до 768px) */
@media (max-width: 768px) {
    .hero-section::after {
        background-size: 45%;
        background-position: center bottom 10px; /* переносим вниз */
        opacity: 0.22;
    }
}

/* Small Mobile (до 480px) */
@media (max-width: 480px) {
    .hero-section::after {
        background-size: 60%;        /* ещё меньше, но видно */
        background-position: center bottom -10px;
        opacity: 0.18;
    }
}

/* Топ-бар (если ещё не оформлен) */
.top-bar {
    background: #002b55;   /* тёмно-синий */
    color: #fff;
}

/* Вертикальная линия между блоками */
.top-separator {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.35);
    display: inline-block;
}

/* SOS-кнопка */
.top-sos-btn {
    background: #ff4d4f;
    border-color: #ff4d4f;
    color: #fff;
    font-weight: 600;
    padding-inline: 0.6rem;
}

.top-sos-btn:hover,
.top-sos-btn:focus {
    background: #d9363e;
    border-color: #d9363e;
    color: #fff;
}