/* ══════════════════════════════════════════════════════════════════════
   НУЖНЫДЕНЬГИ — HOME HERO (эталонный экран)
   Композиция: deep emerald base → graphite depth → платиновая декоративная
   геометрия → главный контент → светлый premium offer panel (ice/platinum),
   который переводит тёмный герой в светлый листинг ниже.
   Только селекторы .zh-* — не конфликтует со style.css.
   Все токены (--nd-*) приходят из design-system.css.
   ══════════════════════════════════════════════════════════════════════ */

/* ── ГЕРОЙ ── */
.zh-hero {
    position: relative;
    overflow: hidden;
    margin: 20px 0 14px;
    padding: clamp(32px, 3.8vw, 58px) clamp(20px, 3.2vw, 52px);
    border-radius: var(--nd-r-panel);
    background:
        radial-gradient(760px 340px at 3% -10%, rgba(18,148,106,.45), transparent 62%),
        radial-gradient(620px 360px at 78% 116%, rgba(17,24,23,.75), transparent 64%),
        var(--nd-surf-deep-emerald);
    border: 1px solid var(--nd-silver-line-soft);
    box-shadow: var(--nd-shadow-dark);
    color: var(--nd-text-invert);
}
/* Серебряная кромка по верху панели */
.zh-hero::before {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    top: 0;
    height: 1px;
    background: var(--nd-silver-rule-dark);
    opacity: .55;
    pointer-events: none;
    z-index: 2;
}

/* Абстрактная финансовая геометрия: тонкие платиновые окружности */
.zh-hero-deco {
    position: absolute;
    left: -170px;
    bottom: -230px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    border: 1px solid rgba(226,233,230,.16);
    box-shadow:
        0 0 0 46px rgba(226,233,230,.045),
        0 0 0 92px rgba(226,233,230,.025);
    pointer-events: none;
    z-index: 0;
}

.zh-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(28px, 3vw, 46px);
    align-items: center;
}

/* Левая колонка — грид-чild: не даём контенту распирать её */
.zh-left { min-width: 0; }
.zh-right { min-width: 0; }

/* ── НАДЗАГОЛОВОК ── */
.zh-trust-row { margin-bottom: 20px; }

.zh-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 12px;
    background: rgba(243,247,245,.06);
    border: 1px solid var(--nd-silver-line);
    border-radius: var(--nd-r-full);
    color: rgba(233,240,237,.84);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.zh-trust-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nd-accent-on-dark);
    box-shadow: 0 0 0 3px rgba(87,206,163,.18);
    flex-shrink: 0;
}

/* ── TIPOGРАФИЯ: крупно, но не гигантски; вес дозирован ── */
.zh-h1 {
    font-size: var(--nd-fs-hero);
    font-weight: var(--nd-fw-display);
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--nd-text-invert);
    margin: 0 0 16px;
    max-width: 15ch;
}
.zh-h1-accent {
    position: relative;
    color: var(--nd-accent-on-dark);
    white-space: nowrap;
}
.zh-h1-accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: var(--nd-silver-rule-dark);
    opacity: .8;
}

/* .zh-hero в селекторе — не случайно: design-system.css подключается после
   этого файла и правилом `.container p/li` (та же специфичность) перебивает
   цвета текста тёмного героя на #47544F. Префикс .zh-hero поднимает
   специфичность выше. */
.zh-hero .zh-sub {
    font-size: clamp(1rem, 1.1vw, 1.0625rem);
    line-height: 1.65;
    color: rgba(233,240,237,.72);
    margin: 0 0 26px;
    max-width: 46ch;
}
.zh-sub strong { color: #FFFFFF; font-weight: 600; }

/* ── КНОПКИ ── */
.zh-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.zh-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 28px;
    background: var(--nd-metal-plate);
    color: var(--nd-emerald-950);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    border: 1px solid var(--nd-silver-300);
    border-radius: var(--nd-r-md);
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--nd-shadow-metal), 0 22px 46px -26px rgba(0,0,0,.95);
    transition: background var(--nd-t) var(--nd-ease), transform var(--nd-t-fast) var(--nd-ease),
                box-shadow var(--nd-t) var(--nd-ease), border-color var(--nd-t) var(--nd-ease);
    white-space: nowrap;
}
.zh-btn-primary:hover {
    background: #FFFFFF;
    border-color: var(--nd-silver-200);
    color: var(--nd-emerald-950);
    transform: translateY(-2px);
    box-shadow: var(--nd-shadow-metal), 0 28px 54px -28px rgba(0,0,0,1);
}
.zh-btn-primary svg { color: var(--nd-emerald-800); }

.zh-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 24px;
    background: rgba(243,247,245,.05);
    color: var(--nd-text-invert);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--nd-silver-line);
    border-radius: var(--nd-r-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--nd-t) var(--nd-ease), border-color var(--nd-t) var(--nd-ease),
                transform var(--nd-t-fast) var(--nd-ease);
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.zh-btn-ghost:hover {
    background: rgba(243,247,245,.12);
    border-color: var(--nd-silver-line-strong);
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* ── КЛЮЧЕВЫЕ ЦИФРЫ: выраженная иерархия ── */
.zh-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.zh-metrics li {
    padding: 2px 24px;
    border-left: 1px solid var(--nd-silver-line-soft);
}
.zh-metrics li:first-child { padding-left: 0; border-left: 0; }

.zh-metrics-value {
    display: block;
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF;
}
/* Первый показатель — главный в иерархии */
.zh-metrics li:first-child .zh-metrics-value {
    font-size: clamp(1.9rem, 3vw, 2.45rem);
    color: var(--nd-accent-on-dark);
}
.zh-metrics-label {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(226,233,230,.55);
    max-width: 15ch;
}

/* ── СТРОКА ДОВЕРИЯ: тихая, без «таблеток» ── */
.zh-trust-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    list-style: none;
    padding: 16px 0 0;
    margin: 0;
    border-top: 1px solid var(--nd-silver-line-soft);
}
.zh-hero .zh-trust-line li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(243,247,245,.86);
}
.zh-trust-line svg { flex-shrink: 0; color: var(--nd-accent-on-dark); }

/* ── PREMIUM OFFER PANEL (ice / platinum) ── */
.zh-offers-card {
    position: relative;
    background: linear-gradient(180deg, #FCFDFD 0%, var(--nd-ice-100) 100%);
    border: 1px solid var(--nd-silver-300);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--nd-shadow-silver), 0 40px 80px -46px rgba(0,0,0,.85);
}
/* Верхняя эмалевая линия: изумруд → серебро */
.zh-offers-card::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--nd-emerald-700) 0%, var(--nd-emerald-300) 42%, var(--nd-silver-400) 100%);
}

.zh-offers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--nd-silver-300);
    background: rgba(255,255,255,.72);
}
.zh-offers-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nd-graphite-800);
}
.zh-offers-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nd-text-muted);
}
.zh-offers-updated::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nd-emerald-700);
    box-shadow: 0 0 0 3px rgba(13,118,84,.16);
}

/* Карточки внутри светлой панели */
.zh-offers-card .listing-large-grid {
    display: flex;
    flex-direction: column;
    padding: 14px;
    margin: 0;
    gap: 12px;
}
.zh-offers-card .listing-large-card {
    margin-top: 0;
    border-radius: var(--nd-r-md);
    box-shadow: var(--nd-shadow-sm);
}
.zh-offers-card .listing-large-card:hover { box-shadow: var(--nd-shadow-md); }

/* Нижняя служебная строка панели */
.zh-offers-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--nd-silver-300);
    font-size: 12.5px;
    color: var(--nd-text-muted);
}
.zh-offers-foot a {
    font-weight: 700;
    color: var(--nd-emerald-800);
    white-space: nowrap;
}
.zh-offers-foot a:hover { color: var(--nd-emerald-900); }

/* ── ПЛАВАЮЩАЯ КНОПКА (только мобайл) ── */
.zh-fab {
    display: none;
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    max-width: calc(100vw - 28px);
    padding: 13px 24px 11px;
    background: linear-gradient(180deg, var(--nd-emerald-700) 0%, var(--nd-emerald-900) 100%);
    color: #FFFFFF;
    border: 1px solid var(--nd-silver-line);
    border-radius: var(--nd-r-full);
    text-decoration: none;
    text-align: center;
    box-shadow: 0 20px 46px -20px rgba(0,0,0,.9);
    animation: zh-fab-in .4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes zh-fab-in {
    from { opacity: 0; transform: translateX(-50%) translateY(24px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.zh-fab:hover {
    background: linear-gradient(180deg, var(--nd-emerald-600) 0%, var(--nd-emerald-800) 100%);
    color: #FFFFFF;
    transform: translateX(-50%) translateY(-2px);
}
.zh-fab:active { transform: translateX(-50%) translateY(-1px); }
.zh-fab-icon { display: none; }
.zh-fab-text { font-size: 15px; font-weight: 700; line-height: 1.25; }
.zh-fab-sub { font-size: 11px; font-weight: 400; opacity: .82; letter-spacing: .02em; }

@media (max-width: 768px) { .zh-fab { display: flex; } }

/* ── АДАПТИВ ── */
@media (max-width: 1024px) {
    .zh-hero-inner { grid-template-columns: 1fr; gap: 30px; }
    .zh-offers-card .listing-large-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
    .zh-h1 { max-width: 20ch; }
}

@media (max-width: 768px) {
    .zh-hero {
        padding: 26px 18px 28px;
        margin: 14px 0 12px;
        border-radius: 20px;
    }
    .zh-hero-inner { gap: 24px; }
    .zh-h1 { font-size: clamp(1.65rem, 7vw, 1.95rem); max-width: none; }
    .zh-sub { font-size: 15px; margin-bottom: 22px; }
    .zh-cta-row { flex-direction: column; margin-bottom: 24px; }
    .zh-btn-primary, .zh-btn-ghost { width: 100%; justify-content: center; }

    .zh-metrics { gap: 16px 0; }
    .zh-metrics li { flex: 1 1 40%; padding: 0 14px; }
    .zh-metrics li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .zh-metrics li:first-child .zh-metrics-value { font-size: clamp(1.75rem, 8vw, 2.1rem); }

    .zh-trust-line { gap: 8px 14px; }
    .zh-hero .zh-trust-line li { font-size: 12.5px; }

    .zh-offers-card .listing-large-grid { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
    .zh-offers-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
    .zh-hero-deco { width: 320px; height: 320px; left: -140px; bottom: -170px; }
}

@media (max-width: 480px) {
    .zh-hero { padding: 22px 14px 24px; }
    .zh-trust-chip { font-size: 10.5px; letter-spacing: .08em; }
    .zh-metrics li { padding: 0 10px; }
    .zh-fab { bottom: 14px; padding: 12px 18px 10px; }
}