/* Bitki — главная: стыковка макета Андрея (css/nsite.css — его файл без изменений) с общими частями сайта.
   Здесь только: шапка/подвал из /js/app.js над его первым экраном, три отличия владельца (наши фото — в разметке; без названий площадок;
   серая «Скоро в Google Play»), статичный рендер телефона как запасной вариант для 3D, цифры компании (4 плитки — как у него). */

/* шапка (app.js) над тёмным первым экраном — светлые токены, как его .nav.on-dark */
.bk-home .bk-nav { --bk-card: var(--fill); --bk-card-2: var(--fill-hover); --bk-nav-bg: var(--nav-bg); }
.bk-home .bk-nav.on-dark { color-scheme: dark; --text: #F4F6F8; --text-2: #B4BCC7; --bk-card: rgba(255, 255, 255, .09); --bk-card-2: rgba(255, 255, 255, .15);
  --focus: #FFFFFF; --bg: #000000; --hairline: rgba(255, 255, 255, .1); --bk-nav-bg: rgba(0, 0, 0, .78); }
.bk-home .bk-nav__link { font-size: 16px; }
.bk-home .bk-foot { margin-top: 0; background: var(--bg); }

/* отличие №3: Google Play — серая неактивная заглушка на месте его оранжевой кнопки */
.btn.btn--gp-soon { background: rgba(255, 255, 255, .12); color: #B4BCC7; cursor: default; }
.btn.btn--gp-soon:active { transform: none; }
.hero .hero__actions .btn.btn--gp-soon svg { opacity: .8; }

/* 3D-телефон: пока его WebGL-модель не загрузилась (или на телефонах / «меньше движения» / без WebGL) — статичный рендер той же модели */
.phone-render { position: absolute; left: 50%; top: 50%; z-index: 0; width: 36em; height: 50em; max-width: none; transform: translate(-50%, -50%); pointer-events: none;
  opacity: 0; transition: opacity .6s; animation: levitate 7s ease-in-out infinite; }
.hero__visual.is-render .phone-render { opacity: 1; }
.hero__visual.is-render:not(.is-3d) .phone { opacity: 0; }
.hero__visual.is-3d.is-ready .phone-render { opacity: 0; }
.bk-home .hero__visual .phone-render--dark { display: none; }
:root[data-theme="dark"] .bk-home .hero__visual .phone-render--light { display: none; }
:root[data-theme="dark"] .bk-home .hero__visual .phone-render--dark { display: block; }
@media (prefers-reduced-motion: reduce) { .phone-render { animation: none; transition: none; } }

/* 3D-шар: наш globe.js кладёт canvas в .globe и ставит .is-ready; до этого — его запасной круг */
.globe:not(.is-ready) { inset: 11.5%; border-radius: 50%; background: var(--globe-fallback); }
.globe canvas { width: 100%; height: 100%; }

/* «Живой пример»: процент/маркер скрыты, где нет реального сравнения (РБ, РБ → РФ) */
.gauge__you[hidden], .reco[hidden], .gauge[hidden] { display: none; }
/* «Скоро в Google Play»: как «Загрузите в / App Store» — маленькое «Скоро в» сверху, крупное «Google Play» снизу (правка владельца 30.09) */
.btn--gp-soon .gp-2l { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.btn--gp-soon .gp-2l small { font-size: .55em; font-weight: 500; letter-spacing: 0; opacity: .85; margin-bottom: 1px; }
/* только РБ: серая «Разница с рынком РФ» (не маржа, не зелёный/жёлтый) */
.reco.reco--neutral { color: var(--text-2); background: var(--fill); }

/* C11 01.10: рынок «Китай» (владелец: «Китай везде, где нужно»). nsite.css не трогаем — токены и метки рынка здесь, в стиле его --kr/.tag--kr/.mk--kr */
:root { --cn: #C8102E; --tag-cn-bg: rgba(200, 16, 46, .10); --tag-cn-fg: #A30D25; }
:root[data-theme="dark"] { --cn: #FF6B7D; --tag-cn-bg: rgba(255, 107, 125, .16); --tag-cn-fg: #FFB3BD; }
.mk--cn { background: var(--cn); }
.tag--cn { background: var(--tag-cn-bg); color: var(--tag-cn-fg); }
.chip .tag--cn { background: rgba(200, 16, 46, .10); color: #A30D25; }
/* C11: четыре рынка в «Живом примере» на телефоне — равные доли, без выхода за край (у Андрея было три) */
@media (max-width: 599px) { .calc .seg { box-sizing: border-box; } .calc .seg button { flex: 1 1 0; min-width: 0; gap: 5px; padding: 0 4px; font-size: 14px; } .calc .seg .mk { flex: none; } }