/* =========================================================================
   MODERN SKIN — LANDING (1990.marketing)
   Подключается ПОСЛЕДНИМ. Перекрывает Bootstrap + style.css + component.css.
   Цвета: золото (FFD700/F7D002) + тёмное стекло, как в личном кабинете.
   ========================================================================= */

:root {
    --ms-accent: #FFD700;
    --ms-accent-2: #F7D002;
    --ms-accent-soft: rgba(255, 215, 0, 0.18);
    --ms-accent-glow: rgba(255, 215, 0, 0.35);

    --ms-glass-bg: rgba(20, 20, 25, 0.55);
    --ms-glass-bg-strong: rgba(20, 20, 25, 0.72);
    --ms-glass-bg-dark: rgba(15, 15, 20, 0.82);
    --ms-glass-border: rgba(255, 255, 255, 0.10);
    --ms-glass-border-strong: rgba(255, 215, 0, 0.32);
    --ms-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --ms-glass-shadow-hover: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--ms-glass-border-strong);

    --ms-radius-sm: 10px;
    --ms-radius: 16px;
    --ms-radius-lg: 22px;
    --ms-blur: 18px;
    --ms-blur-strong: 28px;

    --ms-text: #ffffff;
    --ms-text-muted: rgba(255, 255, 255, 0.78);
    --ms-text-dim: rgba(255, 255, 255, 0.62);

    --ms-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- BASE ---------- */
html, body {
    color: var(--ms-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #1a1a1a;
}

body {
    background:
        linear-gradient(60deg, rgba(51,51,51,1) 0%, rgba(255,215,0,1) 30%, rgba(247,208,2,1) 70%, rgba(51,51,51,1) 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 215, 0, 0.10), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(247, 208, 2, 0.08), transparent 45%),
        linear-gradient(180deg, rgba(10, 10, 15, 0.62) 0%, rgba(10, 10, 15, 0.72) 100%);
    pointer-events: none;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

/* Базовая типографика */
h1, h2, h3, h4, h5, h6 {
    color: var(--ms-text);
    /* Эмодзи в заголовках должны рендериться системными шрифтами */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI', Roboto, Poppins, sans-serif;
}
p, span, div, li, a {
    /* Подключаем emoji-fallback шрифты в общий стек, чтобы 💯 ✅ 💥 рисовались */
    font-family: inherit, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}
p { color: var(--ms-text-muted); line-height: 1.7; }
a { color: var(--ms-accent); transition: color var(--ms-transition); }
a:hover { color: var(--ms-accent-2); text-decoration: none !important; }

/* ---------- FONTAWESOME ICONS FIX ----------
   На лендинге используется Font Awesome 4 (через /landing/css/font-awesome.min.css).
   Принудительно прописываем font-family и цвет, чтобы иконки рисовались символами,
   а не квадратами и были видны на любом фоне. */
i.fa,
.fa,
.fa::before,
[class^="fa-"]::before,
[class*=" fa-"]::before {
    font-family: 'FontAwesome' !important;
    font-weight: normal !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
    line-height: 1;
}

/* Цвет иконок по умолчанию: золотой акцент (если конкретный класс не задал свой) */
.fa-icon-image,
.feature-box i.fa,
.contact-icon .fa,
.contact-icon i,
.footer__box i,
footer i.fa, .footer i.fa {
    color: var(--ms-accent) !important;
}

/* Соцсети-иконки — белые на тёмных карточках */
i.fa-facebook,
i.fa-twitter,
i.fa-linkedin,
i.fa-instagram,
i.fa-youtube,
i.fa-vk,
i.fa-telegram {
    color: var(--ms-text);
    transition: color var(--ms-transition);
}
i.fa-facebook:hover,
i.fa-twitter:hover,
i.fa-linkedin:hover,
i.fa-instagram:hover,
i.fa-youtube:hover,
i.fa-vk:hover,
i.fa-telegram:hover {
    color: var(--ms-accent);
}

/* ---------- TEXT FIX (перебиваем тёмные цвета из style.css) ---------- */
/* В исходном style.css есть color:#000, #666, #888, #999, #444 — на тёмном фоне
   это чёрный/серый текст на чёрном. Перекрываем явно. */
#showcase, #showcase *,
#features, #features *,
#services, #services *,
#testimonials, #testimonials *,
#blog, #blog *,
#contact, #contact *,
.features-caption, .features-caption *,
.feature-box, .feature-box *,
.features-section-2, .features-section-2 *,
.testimonials, .testimonials *,
.blog, .blog *,
.contact, .contact *,
.footer, .footer * {
    color: inherit;
}

/* Базовые цвета для секций */
#showcase, #showcase h1, #showcase h2, #showcase h3, #showcase h4,
#features, #features h1, #features h2, #features h3, #features h4, #features h5,
#services, #services h1, #services h2, #services h3, #services h4,
.features-section-2, .features-section-2 h2, .features-section-2 h3 {
    color: var(--ms-text);
}

#showcase p,
#features p,
#services p,
.feature-box p,
.feature-box__text,
.features-section-2 p,
.testimonials p,
.blog p {
    color: var(--ms-text-muted) !important;
}

/* Конкретно — heading-tertiary в карточках (название) */
.heading-tertiary,
.feature-box .heading-tertiary,
.feature-box h3 {
    color: var(--ms-accent) !important;
}

/* ---------- UNIVERSAL: переопределяем любые белые/светлые фоны ---------- */
/* В исходном style.css есть множество inline background:#fff/transparent/light на разных
   блоках которые сложно перечислить. Берём всё вместе. */
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background: white"] {
    background: var(--ms-glass-bg) !important;
    backdrop-filter: blur(var(--ms-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--ms-blur)) saturate(140%);
    border: 1px solid var(--ms-glass-border) !important;
    color: var(--ms-text) !important;
    border-radius: var(--ms-radius) !important;
}

/* Любой div прямой потомок секций с белым фоном из CSS */
#showcase [class*="bg-white"],
#features [class*="bg-white"],
#services [class*="bg-white"],
#testimonials [class*="bg-white"],
.bg-white,
.bg-light {
    background: var(--ms-glass-bg) !important;
    color: var(--ms-text) !important;
    border: 1px solid var(--ms-glass-border) !important;
    border-radius: var(--ms-radius) !important;
}

.bg-white *,
.bg-light *,
.bg-white p,
.bg-light p,
.bg-white span,
.bg-light span,
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4,
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4 {
    color: var(--ms-text) !important;
}

/* Бирюзовые блоки и .folded-corner внутренний text */
.text-blue { color: var(--ms-accent) !important; }
.text-dark { color: var(--ms-text) !important; }
.text-muted { color: var(--ms-text-muted) !important; }
.text-black { color: var(--ms-text) !important; }
.text-secondary { color: var(--ms-text-muted) !important; }

/* ---------- FOLDED-CORNER (блоки в #services с белым фоном из style.css) ---------- */
.folded-corner,
.service_tab_1 {
    background-color: var(--ms-glass-bg) !important;
    background: var(--ms-glass-bg) !important;
    backdrop-filter: blur(var(--ms-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--ms-blur)) saturate(140%);
    border: 1px solid var(--ms-glass-border) !important;
    border-radius: var(--ms-radius-lg) !important;
    color: var(--ms-text) !important;
    padding: 32px !important;
    box-shadow: var(--ms-glass-shadow);
    transition: all var(--ms-transition);
}

.folded-corner:hover,
.service_tab_1:hover {
    background-color: var(--ms-glass-bg-strong) !important;
    background: var(--ms-glass-bg-strong) !important;
    border-color: var(--ms-glass-border-strong) !important;
    transform: translateY(-4px);
    box-shadow: var(--ms-glass-shadow-hover);
}

.folded-corner::before,
.folded-corner::after {
    display: none !important; /* убираем «загнутый угол» из старого стиля */
}

.folded-corner:hover::before {
    background-color: transparent !important;
    border-width: 0 !important;
}

.folded-corner .text,
.service_tab_1 .text {
    color: var(--ms-text) !important;
    visibility: visible !important;
}

.folded-corner h3,
.folded-corner .item-title,
.service_tab_1 h3,
.service_tab_1 .item-title {
    color: var(--ms-accent) !important;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 18px 0 12px;
}

.folded-corner p,
.service_tab_1 p {
    color: var(--ms-text-muted) !important;
    line-height: 1.7;
}

.folded-corner i.fa,
.service_tab_1 i.fa,
.fa-icon-image {
    color: var(--ms-accent) !important;
    margin-bottom: 12px;
    display: inline-block;
}

/* ---------- FOOTER SOCIAL ICONS ---------- */
footer .social,
.footer .social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

footer .social a,
.footer .social a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    border-radius: 50%;
    background: var(--ms-glass-bg) !important;
    border: 1px solid var(--ms-glass-border);
    color: var(--ms-text) !important;
    font-size: 18px !important;
    transition: all var(--ms-transition);
    margin: 0 !important;
}

footer .social a:hover,
.footer .social a:hover {
    background: var(--ms-accent-soft) !important;
    border-color: var(--ms-accent) !important;
    color: var(--ms-accent) !important;
    transform: translateY(-2px);
}

/* Гарантируем что FontAwesome иконки в футере отрисуются как символы */
footer .social a .fa,
.footer .social a .fa,
footer .social a i,
.footer .social a i {
    font-family: 'FontAwesome' !important;
    font-style: normal !important;
    font-weight: normal !important;
    color: inherit !important;
    line-height: 1 !important;
    display: inline-block;
}

/* ---------- NAVBAR ---------- */
.navbar.fixed-top,
.navbar.navbar-light.bg-light,
.navbar-default {
    background: var(--ms-glass-bg-dark) !important;
    backdrop-filter: blur(var(--ms-blur-strong)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--ms-blur-strong)) saturate(140%);
    border-bottom: 1px solid var(--ms-glass-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 12px 24px;
    z-index: 1030;
}

.navbar-brand img {
    max-width: 50px !important;
    max-height: 50px !important;
    height: auto;
    width: auto !important;
    object-fit: contain;
}

.navbar-light .navbar-nav .nav-link,
.navbar-default .navbar-nav > li > a {
    color: var(--ms-text) !important;
    font-weight: 500;
    padding: 8px 16px !important;
    border-radius: var(--ms-radius-sm);
    transition: all var(--ms-transition);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-default .navbar-nav > li > a:hover {
    color: var(--ms-accent) !important;
    background: var(--ms-accent-soft);
    text-shadow: 0 0 12px var(--ms-accent-glow);
}

.navbar-toggler {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid var(--ms-glass-border) !important;
    border-radius: var(--ms-radius-sm) !important;
    padding: 6px 10px;
}
.navbar-toggler-icon {
    filter: invert(1) brightness(1.5);
}

/* Language dropdown в navbar */
.user-img {
    border: 2px solid var(--ms-glass-border-strong);
    border-radius: 50% !important;
    transition: all var(--ms-transition);
    cursor: pointer;
}
.user-img:hover {
    box-shadow: 0 0 0 3px var(--ms-accent-glow);
}

.dropdown-menu {
    background: var(--ms-glass-bg-dark) !important;
    backdrop-filter: blur(var(--ms-blur-strong)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--ms-blur-strong)) saturate(140%);
    border: 1px solid var(--ms-glass-border) !important;
    border-radius: var(--ms-radius) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    padding: 8px;
}
.dropdown-item {
    color: var(--ms-text) !important;
    border-radius: var(--ms-radius-sm);
    transition: all var(--ms-transition);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ms-accent-soft) !important;
}

/* ---------- SHOWCASE (HERO) ---------- */
#showcase {
    background: transparent !important;
    background-image: none !important;
    padding: 120px 0 80px !important;
    position: relative;
    overflow: hidden;
}

#showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 215, 0, 0.12), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(247, 208, 2, 0.08), transparent 50%);
    pointer-events: none;
}

.showcase {
    position: relative;
    z-index: 2;
}

.showcase-caption h1 {
    color: var(--ms-text);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.showcase-caption p {
    color: var(--ms-text-muted);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    margin-bottom: 36px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.showcase-button {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- BUTTONS ---------- */
.button-style,
.showcase-btn,
.btn {
    display: inline-block;
    padding: 14px 32px !important;
    border-radius: var(--ms-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    text-decoration: none !important;
    transition: all var(--ms-transition) !important;
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.button-style::before,
.button-style::after {
    display: none !important; /* убираем шахматные псевдоэлементы из старого style.css */
}

.button-style,
.showcase-btn {
    background: linear-gradient(135deg, var(--ms-accent) 0%, var(--ms-accent-2) 100%) !important;
    color: #1a1a1a !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.30);
    border: none !important;
}

.button-style:hover,
.showcase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 215, 0, 0.50);
    color: #1a1a1a !important;
    text-decoration: none !important;
}

/* Второй ник (Зарегистрироваться) — outline */
.showcase-button .button-style:nth-child(2),
.showcase-button .showcase-btn:nth-child(2) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--ms-text) !important;
    border: 1px solid var(--ms-glass-border-strong) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
}
.showcase-button .button-style:nth-child(2):hover,
.showcase-button .showcase-btn:nth-child(2):hover {
    background: var(--ms-accent-soft) !important;
    color: var(--ms-accent) !important;
    border-color: var(--ms-accent) !important;
    box-shadow: 0 6px 24px rgba(255, 215, 0, 0.20);
}

/* ---------- FEATURES SECTION ---------- */
#features {
    background: transparent !important;
    padding: 80px 0;
}

.features-caption,
.features {
    text-align: center;
    margin-bottom: 60px;
}

.features-caption h3,
.features h3 {
    color: var(--ms-accent);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.features-caption h4,
.features h4 {
    color: var(--ms-text);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.features-caption p,
.features p {
    color: var(--ms-text-muted);
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.05rem;
}

/* Видео-обёртка iframe */
.plyr__video-embed {
    border-radius: var(--ms-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--ms-glass-border);
    background: #000;
}

.plyr__video-embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
}

/* Карточки преимуществ */
.feature-box {
    background: var(--ms-glass-bg) !important;
    backdrop-filter: blur(var(--ms-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--ms-blur)) saturate(140%);
    border: 1px solid var(--ms-glass-border);
    border-radius: var(--ms-radius-lg);
    padding: 0 0 24px 0 !important;
    box-shadow: var(--ms-glass-shadow);
    height: 100%;
    overflow: hidden;
    transition: transform var(--ms-transition), box-shadow var(--ms-transition), border-color var(--ms-transition);
    text-align: center;
}

.feature-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--ms-glass-shadow-hover);
    border-color: var(--ms-glass-border-strong);
}

.feature-box img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover;
    padding: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--ms-glass-border);
    filter: brightness(0.92);
    transition: filter var(--ms-transition), transform 0.4s ease;
}
.feature-box:hover img {
    filter: brightness(1.05);
    transform: scale(1.03);
}

.feature-box h3,
.feature-box .heading-tertiary {
    color: var(--ms-accent);
    font-size: 1.25rem;
    font-weight: 700;
    padding: 24px 24px 12px;
    margin: 0;
    letter-spacing: 0.3px;
}

.feature-box__text,
.feature-box p {
    color: var(--ms-text-muted);
    padding: 0 24px;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* features-section-2 (нижний баннер) */
.features-section-2 {
    margin-top: 80px;
    border-radius: var(--ms-radius-lg);
    overflow: hidden;
    box-shadow: var(--ms-glass-shadow);
}

.features-section-2-col-1 {
    background-image: url('/landing/img_1.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 360px;
    position: relative;
}
.features-section-2-col-1::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.20), rgba(0, 0, 0, 0.55));
}

.features-section-2-col-2 {
    background: var(--ms-glass-bg-strong) !important;
    backdrop-filter: blur(var(--ms-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--ms-blur)) saturate(140%);
    padding: 40px !important;
    display: flex;
    align-items: center;
}

/* В исходном style.css есть внутренний __content с background-color: #ffffff —
   это и есть тот «белый блок где текст не виден». Перекрываем. */
.features-section-2-col-2__content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 20px !important;
    color: var(--ms-text);
}

.features-section-2-col-2__content h2,
.features-section-2-col-2__content h1,
.features-section-2-col-2__content h3 {
    color: var(--ms-text) !important;
    font-size: 1.65rem;
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.3;
}
.features-section-2-col-2__content p,
.features-section-2-col-2__content span,
.features-section-2-col-2__content div {
    color: var(--ms-text-muted) !important;
    line-height: 1.7;
}

/* ---------- SERVICES (видео-секция) ---------- */
#services {
    background: transparent !important;
    padding: 80px 0;
}

#services h1, #services h2, #services h3 { color: var(--ms-text); }
#services p { color: var(--ms-text-muted); }

#services .plyr,
#services .plyr__video-embed {
    border-radius: var(--ms-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--ms-glass-border);
}

/* ---------- TESTIMONIALS ---------- */
#testimonials,
.testimonials {
    background: transparent !important;
    padding: 80px 0;
}

.testimonials h2, .testimonials h3 { color: var(--ms-text); }

/* slick-карусели (если есть) */
.slick-slide > div {
    margin: 0 12px;
}

/* ---------- BLOG ---------- */
.blog {
    background: transparent !important;
    padding: 80px 0;
}

figure.blog-item {
    background: var(--ms-glass-bg) !important;
    backdrop-filter: blur(var(--ms-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--ms-blur)) saturate(140%);
    border: 1px solid var(--ms-glass-border) !important;
    border-radius: var(--ms-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--ms-glass-shadow);
    transition: transform var(--ms-transition), box-shadow var(--ms-transition);
}

figure.blog-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--ms-glass-shadow-hover);
}

figure.blog-item img {
    border-radius: 0 !important;
    transition: transform 0.5s ease;
}
figure.blog-item:hover img {
    transform: scale(1.05);
}

figure.blog-item h3,
figure.blog-item h2 {
    color: var(--ms-accent) !important;
    padding: 20px 24px 8px;
}

figure.blog-item p {
    color: var(--ms-text-muted) !important;
    padding: 0 24px 24px;
}

figure.blog-item figcaption {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

figure.blog-item figcaption p {
    color: var(--ms-text) !important;
}

/* ---------- CONTACT FORM ---------- */
.contact {
    background: transparent !important;
    padding: 80px 0;
}

.contact-heading {
    color: var(--ms-text) !important;
    font-weight: 700;
    margin-bottom: 30px;
}

.contact-icon,
.contact-icon.text-blue {
    color: var(--ms-accent) !important;
    font-size: 2rem;
}

.contact__form input,
.contact__form textarea,
.contact__form select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--ms-glass-border) !important;
    border-radius: var(--ms-radius-sm) !important;
    color: var(--ms-text) !important;
    padding: 12px 16px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--ms-transition);
    width: 100%;
    margin-bottom: 14px;
}

.contact__form input::placeholder,
.contact__form textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--ms-text-dim);
}

.contact__form input:focus,
.contact__form textarea:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: var(--ms-glass-border-strong) !important;
    box-shadow: 0 0 0 3px var(--ms-accent-soft) !important;
}

.contact__form button,
.contact__form input[type="submit"] {
    background: linear-gradient(135deg, var(--ms-accent) 0%, var(--ms-accent-2) 100%) !important;
    color: #1a1a1a !important;
    border: none !important;
    padding: 14px 36px !important;
    border-radius: var(--ms-radius-sm) !important;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.30);
    transition: all var(--ms-transition);
}
.contact__form button:hover,
.contact__form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 215, 0, 0.50);
}

/* ---------- FOOTER ---------- */
footer,
.footer {
    background: var(--ms-glass-bg-dark) !important;
    backdrop-filter: blur(var(--ms-blur-strong)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--ms-blur-strong)) saturate(140%);
    border-top: 1px solid var(--ms-glass-border);
    color: var(--ms-text-muted) !important;
    padding: 50px 0 30px !important;
    margin-top: 60px;
}

footer h1, footer h2, footer h3, footer h4, footer h5,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5 {
    color: var(--ms-text) !important;
    font-weight: 600;
    margin-bottom: 16px;
}

footer p, .footer p,
footer span, .footer span {
    color: var(--ms-text-muted) !important;
}

footer a, .footer a {
    color: var(--ms-text-muted) !important;
    transition: color var(--ms-transition);
}
footer a:hover, .footer a:hover {
    color: var(--ms-accent) !important;
}

.footer__box i {
    color: var(--ms-accent);
    margin-right: 8px;
}

.footer__copyright,
.copyright {
    border-top: 1px solid var(--ms-glass-border);
    padding-top: 20px;
    margin-top: 30px;
    color: var(--ms-text-dim) !important;
    text-align: center;
    font-size: 0.9rem;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ms-accent-soft);
    background-clip: content-box;
}

/* ---------- LOADER (если есть) ---------- */
.loader-bg {
    background: #1a1a1a !important;
}

/* ---------- FALLBACK ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar.fixed-top,
    .feature-box,
    figure.blog-item,
    .features-section-2-col-2,
    footer, .footer,
    .dropdown-menu {
        background: rgba(15, 15, 20, 0.92) !important;
    }
}

/* ---------- ADAPTIVE ---------- */
@media (max-width: 992px) {
    #showcase { padding: 100px 16px 60px !important; }
    .features-section-2-col-1 { min-height: 240px; }
    .features-section-2-col-2 { padding: 28px !important; }
}

@media (max-width: 768px) {
    .navbar.fixed-top { padding: 10px 16px; }
    .button-style, .showcase-btn { padding: 12px 22px !important; font-size: 0.95rem; }
    .showcase-button { gap: 10px; }
    .feature-box img { height: 180px !important; }
    .feature-box h3 { padding: 18px 20px 8px; font-size: 1.1rem; }
    .feature-box__text { padding: 0 20px; font-size: 0.9rem; }
}