.home-page .cn-hero-live { min-height: 0; width: 100%; max-width: 450px; justify-self: center; padding: 12px 0; background: transparent; box-shadow: none; }
.cn-hero-caption { display: flex; gap: 20px; margin: 0 0 18px 26px; color: #bda774; font-size: 12px; letter-spacing: .1em; }
.cn-hero-caption span + span { padding-left: 20px; border-left: 1px solid #665c46; }
.cn-hero-stack { display: grid; gap: 12px; padding: 0 24px; }
.cn-hero-card { display: block; position: relative; padding: 15px 20px 12px; border: 1px solid #675a3d; border-radius: 16px; background: linear-gradient(115deg,#182b40,#0c1929); box-shadow: 0 10px 24px #0003; color: #f3e6c4; transition: border-color .18s, transform .18s; }
.cn-hero-card:first-child { transform: translateX(-20px); }
.cn-hero-card:nth-child(2) { transform: translateX(20px); border-color: #ac9057; background: linear-gradient(115deg,#223346,#122133); }
.cn-hero-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #d7be87; }
.cn-hero-card-status { color: #aab9b8; font-size: 10px; }
.cn-hero-card-main { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 10px 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cn-hero-number { font-size: clamp(26px,2.4vw,34px); line-height: 1.1; letter-spacing: .04em; font-weight: 750; }
.cn-hero-number.is-empty { font-size: 17px; }
.cn-hero-price { color: #dfbd70; font-size: 18px; font-weight: 700; }
.cn-hero-price small { font-size: 11px; margin-right: 3px; }
.cn-hero-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid #d5b56d24; color: #9aaaba; font-size: 10px; }
.cn-hero-card-foot span { color: #d6bc83; font-size: 16px; line-height: 1; }
.cn-hero-card:hover { border-color: #e4c887; }
.cn-hero-card:focus-visible { outline: 2px solid #f0d59a; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .cn-hero-card { transition: none; } }
@media (max-width: 1100px) and (min-width: 821px) { .cn-hero-stack { padding-inline: 16px; } .cn-hero-card { padding-inline: 14px; } .cn-hero-card:first-child { transform: translateX(-12px); } .cn-hero-card:nth-child(2) { transform: translateX(12px); } }