/* ============================================================
   ФИНМОНИТОР — FINTECH GLASS SHELL
   Общая визуальная система публичных страниц.
============================================================ */

body {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 14% 4%, rgba(0, 209, 255, .08), transparent 28rem),
        radial-gradient(circle at 86% 24%, rgba(255, 117, 230, .045), transparent 26rem),
        linear-gradient(180deg, #0a0f18 0%, #0b1220 48%, #09101a 100%);
    background-attachment: fixed;
}

body::after {
    content: '';
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 12% 3%, rgba(0, 184, 224, .18), transparent 34rem),
        radial-gradient(circle at 88% 18%, rgba(255, 117, 230, .085), transparent 30rem),
        radial-gradient(circle at 48% 92%, rgba(35, 109, 145, .10), transparent 38rem),
        linear-gradient(180deg, #e7f0f6 0%, #dce8f0 52%, #e6edf4 100%);
    transition: opacity .48s cubic-bezier(.2, .75, .2, 1);
}

body::before {
    content: '';
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background-image:
        linear-gradient(rgba(125, 211, 252, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .035) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
}

main,
.site-header,
.site-footer { position: relative; z-index: 1; }

/* Компактная единая шапка */
.site-header {
    height: var(--header-height);
    border-bottom-color: rgba(125, 211, 252, .13);
    background: rgba(7, 13, 23, .76);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .16);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    transition: background-color .42s ease, border-color .42s ease, box-shadow .42s ease;
}

.site-header::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 209, 255, .46), rgba(255, 117, 230, .22), transparent);
    pointer-events: none;
}

.site-header > .container { max-width: 1480px; padding-inline: 1rem; }
.header-inner { min-height: var(--header-height); gap: .65rem; }
.logo { gap: .48rem; font-size: .92rem; }
.brand-logo-mark { width: 29px; height: 29px; flex-basis: 29px; border-radius: 9px; box-shadow: 0 0 24px rgba(0, 209, 255, .12); }
.brand-logo-text { font-size: .92rem; letter-spacing: -.035em; }

.header-nav {
    flex: 0 1 auto;
    justify-content: center;
    gap: .12rem;
    padding: .2rem;
    border: 1px solid rgba(125, 211, 252, .11);
    border-radius: 999px;
    background: rgba(15, 27, 43, .64);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 12px 28px rgba(0, 0, 0, .13);
    backdrop-filter: blur(16px);
    transition: background-color .42s ease, border-color .42s ease, box-shadow .42s ease;
}

.header-nav .nav-link {
    min-height: 34px;
    gap: .33rem;
    padding: .35rem .58rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #91a4b8;
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: -.01em;
    transition: color .28s ease, border-color .28s ease, background-color .28s ease, box-shadow .28s ease;
}

.header-nav .nav-link:hover {
    color: #e9faff;
    border-color: rgba(0, 209, 255, .14);
    background: rgba(0, 209, 255, .07);
}

.header-nav .nav-link.active {
    color: #f7fdff;
    border-color: rgba(0, 209, 255, .28);
    background: linear-gradient(110deg, rgba(0, 209, 255, .15), rgba(0, 209, 255, .055));
    box-shadow: inset 0 0 0 1px rgba(125, 233, 255, .055), 0 0 24px rgba(0, 209, 255, .08);
}

.nav-link-icon { width: 18px; height: 18px; flex-basis: 18px; filter: saturate(.86); }
.header-actions { gap: .35rem; }
.theme-toggle,
.header-burger {
    width: 34px;
    height: 34px;
    border-color: rgba(125, 211, 252, .16);
    border-radius: 10px;
    color: #a9bfd0;
    background: rgba(14, 25, 40, .70);
}
.theme-toggle:hover,
.header-burger:hover { color: #fff; border-color: rgba(0, 209, 255, .44); background: rgba(0, 209, 255, .09); }

.mobile-menu {
    top: var(--header-height);
    padding: .65rem 1rem 1rem;
    border-bottom-color: rgba(0, 209, 255, .18);
    background: rgba(7, 13, 23, .96);
    backdrop-filter: blur(24px);
}
.mobile-menu .nav-link { display:flex; min-height:45px; align-items:center; gap:.65rem; margin:0; padding:.55rem .7rem; border-radius:11px; font-size:.88rem; }
.mobile-menu .nav-link.active { border:1px solid rgba(0,209,255,.2); background:rgba(0,209,255,.09); }
.mobile-menu .nav-link-icon { width:24px; height:24px; flex-basis:24px; }

/* Типографика и hero-блоки */
.eyebrow,
.section-kicker,
.home-section-index,
.calc-hero-badge { color: var(--color-accent); letter-spacing: .095em; }

.deposits-hero,
.cards-hero,
.mortgage-hero,
.loans-hero,
.calc-hero,
.section-page {
    border-bottom: 1px solid rgba(0, 209, 255, .10);
    background:
        radial-gradient(circle at 78% 22%, rgba(0, 209, 255, .10), transparent 28rem),
        radial-gradient(circle at 20% 86%, rgba(255, 117, 230, .055), transparent 24rem),
        linear-gradient(145deg, rgba(8, 16, 29, .95), rgba(10, 25, 42, .88));
}

.deposits-hero h1,
.calc-hero-title,
.section-hero h1,
.catalog-heading h1 {
    color: #f7fbff;
    font-weight: 760;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.deposits-hero h1,
.calc-hero-title { font-size: clamp(2.55rem, 5vw, 4.8rem); line-height: .98; }
.catalog-heading h1 { font-size: clamp(2.35rem, 4.4vw, 4.15rem); line-height: 1; }
.section-hero h1 { font-size: clamp(2.6rem, 5vw, 4.7rem); line-height: 1; }
.page-hero-illustration { opacity: .11; filter: saturate(.65) contrast(1.08); }

/* Стеклянные панели и карточки */
body :is(
    .filters-panel,
    .product-card,
    .deposit-card,
    .quick-calc,
    .catalog-toolbar,
    .catalog-controls,
    .cards-catalog-toolbar,
    .cards-guide-disclosure,
    .mortgage-calculator,
    .mortgage-aside,
    .mortgage-hero-route,
    .mortgage-offer-card,
    .program-card,
    .payment-note,
    .guide-grid article,
    .loan-calculator,
    .loan-calc-aside,
    .loan-hero-note,
    .calc-product-selector,
    .calc-offer-match,
    .calc-params,
    .calc-result-card,
    .calc-chart-wrap,
    .calc-table-wrap,
    .calc-principle,
    .coming-soon,
    .about-card
) {
    border-color: rgba(125, 211, 252, .20);
    background: linear-gradient(145deg, rgba(22, 40, 60, .68), rgba(9, 20, 34, .56));
    box-shadow: inset 0 1px rgba(255, 255, 255, .075), inset 1px 0 rgba(0, 209, 255, .035), 0 20px 52px rgba(0, 0, 0, .24);
    backdrop-filter: blur(22px) saturate(138%);
    -webkit-backdrop-filter: blur(22px) saturate(138%);
}

body :is(.product-card,.deposit-card,.mortgage-offer-card,.program-card,.about-card) {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    transition: transform .22s ease, border-color .32s ease, box-shadow .32s ease, background-color .42s ease, color .3s ease;
}

body :is(.product-card,.deposit-card,.mortgage-offer-card,.program-card,.about-card)::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 14%;
    left: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 209, 255, .48), transparent);
    pointer-events: none;
}

body :is(.product-card,.deposit-card,.mortgage-offer-card,.program-card,.about-card):hover {
    transform: translateY(-3px);
    border-color: rgba(0, 209, 255, .32);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 24px 58px rgba(0, 0, 0, .28), 0 0 32px rgba(0, 209, 255, .045);
}

/* Поля и действия */
body :is(input:not([type="range"]), select, textarea, .filter-select, .filter-input, .calc-search-input, .calc-input) {
    border-color: rgba(125, 211, 252, .16);
    color: var(--color-text);
    background-color: rgba(6, 14, 25, .66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

body :is(input:not([type="range"]), select, textarea, .filter-select, .filter-input, .calc-search-input, .calc-input):focus {
    outline: none;
    border-color: rgba(0, 209, 255, .62);
    box-shadow: 0 0 0 3px rgba(0, 209, 255, .09), inset 0 1px rgba(255, 255, 255, .025);
}

.btn-primary,
.home-btn-primary {
    color: #03121a;
    border-color: #20d8ff;
    background: linear-gradient(115deg, #70eaff, #00d1ff 58%, #20b8e5);
    box-shadow: 0 12px 30px rgba(0, 209, 255, .16);
}
.btn-primary:hover,
.home-btn-primary:hover { color:#021017; border-color:#7de9ff; background:linear-gradient(115deg,#a8f3ff,#20d8ff); transform:translateY(-1px); }

.quick-filter.is-active,
.loan-goal.is-active,
.home-catalog-tools .quick-btn.active {
    color: #eefdff;
    border-color: rgba(0, 209, 255, .46);
    background: rgba(0, 209, 255, .11);
    box-shadow: 0 0 22px rgba(0, 209, 255, .055);
}

.rate,
.product-rate,
.calc-offer-rate { color: var(--color-accent); text-shadow: 0 0 26px rgba(0, 209, 255, .12); }
.error-state,
.calc-warning { border-color: rgba(255, 117, 230, .25); color: #ff9ceb; background: rgba(255, 117, 230, .07); }

.site-footer {
    margin-top: clamp(3rem, 7vw, 6rem);
    border-top-color: rgba(0, 209, 255, .12);
    background: rgba(7, 13, 23, .72);
    backdrop-filter: blur(18px);
}

/* Светлая тема: тот же glass-язык, но с ясным контрастом и мягким переходом. */
:root[data-theme="light"] body::after { opacity: 1; }
:root[data-theme="light"] body::before {
    opacity:.62;
    background-image:
        linear-gradient(rgba(24, 94, 123, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 94, 123, .045) 1px, transparent 1px);
}
:root[data-theme="light"] .site-header {
    border-bottom-color: rgba(17, 94, 119, .20);
    background: rgba(220, 235, 245, .84);
    box-shadow: 0 12px 34px rgba(34, 67, 91, .14);
}
:root[data-theme="light"] .site-header::after { opacity:.72; }
:root[data-theme="light"] .brand-logo-text { color:#17253a; }
:root[data-theme="light"] .header-nav {
    border-color: rgba(17, 94, 119, .17);
    background: rgba(239, 247, 251, .60);
    box-shadow: inset 0 1px rgba(255,255,255,.72), 0 10px 28px rgba(34,67,91,.12);
}
:root[data-theme="light"] .header-nav .nav-link { color:#5d6b80; }
:root[data-theme="light"] .header-nav .nav-link:hover,
:root[data-theme="light"] .header-nav .nav-link.active {
    color:#064b65;
    border-color:rgba(0,161,202,.24);
    background:rgba(0,181,226,.09);
}
:root[data-theme="light"] :is(.theme-toggle,.header-burger) {
    color:#496176;
    border-color:rgba(17,94,119,.20);
    background:rgba(222,237,246,.86);
}
:root[data-theme="light"] :is(.theme-toggle,.header-burger):hover { color:#064b65; background:rgba(218,242,249,.9); }
:root[data-theme="light"] .mobile-menu { border-bottom-color:rgba(17,94,119,.18); background:rgba(222,236,245,.97); }

:root[data-theme="light"] :is(
    .deposits-hero,.cards-hero,.mortgage-hero,.loans-hero,.calc-hero,.section-page,.home-hero
) {
    border-bottom-color:rgba(17,94,119,.11);
    color:#17253a;
    background:
        radial-gradient(circle at 76% 18%, rgba(0, 188, 230, .18), transparent 31rem),
        radial-gradient(circle at 18% 88%, rgba(255, 117, 230, .09), transparent 27rem),
        linear-gradient(145deg, rgba(229, 241, 248, .96), rgba(204, 222, 234, .91));
}
:root[data-theme="light"] :is(
    .deposits-hero h1,.calc-hero-title,.section-hero h1,.catalog-heading h1,.home-hero h1,.home-catalog-copy h2
) { color:#172238; }
:root[data-theme="light"] .home-hero h1 em { color:#0284c7; }
:root[data-theme="light"] :is(.home-kicker,.home-hero-copy>p,.home-trust-line) { color:#60748a; }
:root[data-theme="light"] :is(.signal-panel,.signal-panel h2) { color:#f7fbff; }
:root[data-theme="light"] .home-catalog-tools .quick-btn.active {
    color:#075985;
    border-color:rgba(0,151,194,.38);
    background:rgba(196,231,242,.78);
    box-shadow:inset 0 1px rgba(255,255,255,.72),0 8px 24px rgba(34,67,91,.08);
}
:root[data-theme="light"] :is(.quick-filter.is-active,.loan-goal.is-active) {
    color:#075985;
    border-color:rgba(0,151,194,.38);
    background:rgba(196,231,242,.78);
    box-shadow:inset 0 1px rgba(255,255,255,.72),0 8px 24px rgba(34,67,91,.08);
}
:root[data-theme="light"] .home-btn-secondary { color:#234258; border-color:rgba(17,94,119,.18); background:rgba(255,255,255,.46); }
:root[data-theme="light"] .home-hero::before { opacity:.34; }
:root[data-theme="light"] .home-hero-glow-one { border-color:rgba(0,161,202,.14); }
:root[data-theme="light"] .main-content {
    background:linear-gradient(180deg,rgba(193,216,231,.22),rgba(218,231,240,.78) 28%,rgba(199,219,232,.55) 76%,transparent 100%);
}
:root[data-theme="light"] body :is(
    .filters-panel,.product-card,.deposit-card,.quick-calc,.catalog-toolbar,.catalog-controls,.cards-catalog-toolbar,.cards-guide-disclosure,
    .mortgage-calculator,.mortgage-aside,.mortgage-offer-card,.program-card,.payment-note,.guide-grid article,
    .loan-calculator,.loan-calc-aside,.calc-product-selector,.calc-offer-match,.calc-params,.calc-result-card,
    .calc-chart-wrap,.calc-table-wrap,.calc-principle,.coming-soon,.about-card
) {
    border-color:rgba(56, 121, 150, .20);
    background:linear-gradient(145deg,rgba(247,252,255,.64),rgba(203,222,234,.52));
    box-shadow:inset 0 1px rgba(255,255,255,.84), inset 1px 0 rgba(0,156,198,.09), 0 20px 48px rgba(34,67,91,.16);
    backdrop-filter:blur(26px) saturate(150%);
    -webkit-backdrop-filter:blur(26px) saturate(150%);
}
:root[data-theme="light"] body :is(.product-card,.deposit-card,.mortgage-offer-card,.program-card,.about-card)::before {
    right:10%;
    left:10%;
    background:linear-gradient(90deg,transparent,rgba(0,181,226,.62),rgba(255,117,230,.24),transparent);
}
:root[data-theme="light"] body :is(.product-card,.deposit-card,.mortgage-offer-card,.program-card,.about-card):hover {
    border-color:rgba(0,151,194,.38);
    box-shadow:inset 0 1px rgba(255,255,255,.9),0 26px 58px rgba(34,67,91,.20),0 0 34px rgba(0,181,226,.08);
}
:root[data-theme="light"] body :is(input:not([type="range"]),select,textarea,.filter-select,.filter-input,.calc-search-input,.calc-input) {
    color:#172238;
    border-color:rgba(17,94,119,.22);
    background-color:rgba(224,238,247,.82);
    box-shadow:inset 0 1px rgba(255,255,255,.78);
}
:root[data-theme="light"] body :is(input,textarea)::placeholder { color:#8797a9; }
:root[data-theme="light"] .site-footer { background:rgba(208,226,238,.84); }

@media (max-width: 1240px) {
    .header-nav .nav-link { padding-inline:.46rem; font-size:.72rem; }
}

@media (max-width: 1050px) {
    .site-header > .container { padding-inline:.85rem; }
    .brand-logo-text { font-size:.88rem; }
}

@media (max-width: 850px) {
    .mortgage-layout,
    .loan-calc-section { grid-template-columns:minmax(0,1fr); }
    .mortgage-layout > *,
    .loan-calc-section > *,
    .mortgage-calculator form > *,
    .loan-calculator form > * { min-width:0; }
    .mortgage-calculator :is(input,select,button),
    .loan-calculator :is(input,select,button) { width:100%; min-width:0; }
}

@media (max-width: 640px) {
    .site-header > .container { padding-inline:.75rem; }
    .brand-logo-mark { width:28px; height:28px; flex-basis:28px; }
    .deposits-hero h1,.calc-hero-title,.section-hero h1,.catalog-heading h1 { font-size:clamp(2.3rem,12vw,3.35rem); }
    body :is(.product-card,.deposit-card,.mortgage-offer-card,.program-card,.about-card):hover { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
    body :is(.product-card,.deposit-card,.mortgage-offer-card,.program-card,.about-card) { transition:none; }
}