/* ─────────────────────────────────────────────────────────────────────────
   ai-tm.ru — тема «светлый финтех» (вариант А, 28.10.2026).
   Подключается после site.css и меняет только внешний вид: разметка и
   тексты страниц те же.

   Правила:
   · каждый блок — отдельная скруглённая плашка одной ширины, между плашками
     виден мятно-серый фон страницы;
   · три поверхности: белая (--light), светло-мятная (--white), мятная (--mint)
     и тёмная (--night) — только для двух-трёх акцентных блоков;
   · карточки без рамок: на белой плашке — светло-мятные, на мятной — белые;
   · первый экран светлый: сетка и мягкое свечение, шапка светлая на всех
     страницах;
   · зелёный — кнопки, цифры, значки; янтарный — только «критично».
   ───────────────────────────────────────────────────────────────────────── */

body { background: var(--surface); }
h1, h2, h3, h4 { font-weight: 700; }
.hm-eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .08em; }

/* ─── кнопки: таблетки ─── */
button, .btn { border-radius: 999px; font-weight: 600; padding: 8px 20px; }
.btn-lg { min-height: 54px; padding: 12px 28px; font-size: 1.02rem; }
.btn-primary { box-shadow: 0 10px 24px rgba(22, 107, 71, .26); }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(22, 107, 71, .32); }
.btn:where(:not(.btn-primary, .btn-mark, .btn-onnight, .btn-ghost, .btn-light)) { border-color: transparent; background: var(--btn2, var(--paper)); }
.btn:where(:not(.btn-primary, .btn-mark, .btn-onnight, .btn-ghost, .btn-light)):hover { background: var(--accent-soft); color: var(--accent); }
input[type=text], input[type=email], input[type=number], textarea, select { border-radius: var(--radius-sm); }

/* ─── шапка: светлая на всех страницах ─── */
.site-top,
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .site-top {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; }
.site-top.is-scrolled, .site-top:focus-within { border-bottom-color: var(--line); }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .site-top .brand { color: var(--ink); }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .site-top .brand span,
.brand span { color: var(--accent); }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .site-nav a,
.site-nav a { color: #33413a; font-weight: 600; border-radius: 999px; }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .site-nav a:hover,
.site-nav a:hover { color: var(--ink); background: var(--paper); }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .site-nav a[aria-current],
.site-nav a[aria-current] { color: var(--accent); background: var(--paper); font-weight: 700; }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .site-top__end .lang a { color: var(--ink-subtle); }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .site-top__end .lang a[aria-current] { color: var(--ink); }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .site-top__end .btn,
.site-top__end .btn { background: var(--accent); color: #fff; border-color: var(--accent); }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .site-top__end .btn:hover,
.site-top__end .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .menu-toggle { background: var(--paper); border-color: transparent; }
body:is([data-page-kind="home"],[data-page-kind="stroyka"],[data-page-kind="dc"]) .menu-toggle span { background: var(--ink); }

/* ─── плашки блоков ─── */
.hm-band, .pg-facts, .facts-strip {
  width: calc(100% - 32px); max-width: var(--panel-max); margin: 16px auto 0;
  border-radius: var(--radius-panel); border: 0; position: relative; overflow: hidden; }
.hm-band { padding: clamp(3.5rem, 7vw, 5.25rem) 0; }
.hm-band--short { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
.hm-band--top0 { padding-top: clamp(2.25rem, 4vw, 3.5rem); }
.hm-band--light { background: var(--paper); --band-bg: var(--paper); --card: var(--surface-mint); --btn2: var(--surface-mint); }
.hm-band--white { background: var(--surface-mint); --band-bg: var(--surface-mint); --card: var(--paper); --btn2: var(--paper); }
.hm-band--mint  { background: var(--panel-mint); --band-bg: var(--panel-mint); --card: var(--paper); --btn2: var(--paper); }
.hm-band--white + .hm-band--white, .hm-band--flush { border-top: 0; }
.hm-onec > .hm-band:last-child { margin-top: 16px; }
.hm-band > .wrap { position: relative; z-index: 1; }

/* полосы цифр под первым экраном — компактные белые плашки */
.pg-facts, .facts-strip { background: var(--paper); border: 0; margin-top: 0; }
.pg-facts b, .facts-strip b { color: var(--accent); font-weight: 800; }

/* тёмные плашки: сетка и свечение */
.hm-band--night { background: var(--night); }
.hm-band--night::before, .hm-band--night::after { content: ""; position: absolute; pointer-events: none; }
.hm-band--night::before { inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px; }
.hm-band--night::after { left: -15%; bottom: -80%; width: 75%; height: 190%;
  background: radial-gradient(closest-side, rgba(61, 220, 151, .22), transparent); animation: tm-glow 7s ease-in-out infinite; }
@keyframes tm-glow { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.hm-final__who img { border-radius: 22px; }

main, .home, .hm { padding-bottom: 16px; }
.site-foot, body[data-page-kind="home"] .site-foot, .hm + .site-foot, .hm-onec + .site-foot {
  margin-top: 0; background: transparent; border-top: 0; color: var(--ink-muted); }
.site-foot__legal { border-top-color: var(--line-strong); }

/* ─── карточки: без рамок, цвет от плашки ─── */
:is(.panel, .step, .proof > div, .find, .tile, .deal, .plan, .place, .way, .hm-card, .hm-free__tile,
    .pg-steps li, .pg-metrics > div, .pg-findings > div, .pg-plan, .pg-mod, .pg-exp > div, .pg-person,
    .pg-ways a, .pg-ways div, .dc-cycle li, .dc-chart, .pg-specs, .dc-works, .dc-table-wrap) {
  background: var(--card, var(--paper)); border-color: transparent; border-radius: var(--radius-md); --btn2: var(--band-bg, var(--surface-mint)); }
.hm-why__card, .pg-checks li, .compare__col:not(.compare__col--after), .dc-scheme-light, .pg-mods--soon .pg-mod { background: var(--card, var(--surface-mint)); }
.hm-mark { background: var(--card, var(--accent-soft)); border-radius: 14px; }
.hm-band--light .hm-mark, .hm-band--mint .hm-mark { background: var(--paper); }
.hm-band--light .hm-card .hm-mark { background: var(--paper); }
.hm-band:not(.hm-band--light) .hm-card .hm-mark, .hm-band:not(.hm-band--light) .hm-free__tile .hm-mark,
.hm-band:not(.hm-band--light) .pg-mod .hm-mark { background: var(--accent-soft); }
.hm-screen { background: var(--surface); border-radius: 16px; }
.hm-band--light .hm-screen { background: var(--paper); }
.hm-band--light .hm-line, .hm-band--light .hm-bubble:not(.hm-bubble--me), .hm-band--light .hm-stages span { background: var(--surface-mint); }
.hm-card__foot, .find .src, .pg-plan__dl { border-top-color: rgba(14, 21, 18, .08); }
.deal.start, .way--main, .pg-plan--accent { border: 0; box-shadow: inset 0 0 0 2px var(--accent); }
.hm-chip { border-color: transparent; background: var(--card, var(--paper)); font-weight: 600; }
.hm-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.hm-chip[aria-pressed="true"] small { color: #d5ebdf; }
.hm-chips { background: var(--card, var(--paper)); border-radius: 999px; padding: 6px; display: inline-flex; }
.hm-chips .hm-chip { background: transparent; }
.hm-chips .hm-chip[aria-pressed="true"] { background: var(--accent); }
.pg-tag { background: var(--accent-soft); }
.pg-steps__no, .pg-after li > span:first-child { background: var(--accent); }
.dc-chain span { background: var(--accent); }
.compare__col--after { background: var(--night); }
.qa details { border-bottom-color: rgba(14, 21, 18, .1); }
.qa { border-top-color: rgba(14, 21, 18, .1); }
.mint { background: var(--panel-mint); border-radius: var(--radius-md); }
.box-dark, .c-result, .home-cta { background: var(--night); border-radius: var(--radius-md); }
.hm-free__tile { border: 0; }
.pg-form-card, .pg-form .form-card { border: 0; box-shadow: 0 24px 60px rgba(16, 40, 28, .10); }
.shot, .hm-frame--light, .pg-screen-card { border: 0; box-shadow: 0 24px 60px rgba(16, 40, 28, .12); }

/* ─── первый экран: светлый, сетка и свечение ─── */
.hm-hero, .home-hero, .pg-hero { background: transparent; color: var(--ink); position: relative; overflow: hidden; }
:is(.hm-hero, .home-hero, .pg-hero)::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#d9e5df 1px, transparent 1px), linear-gradient(90deg, #d9e5df 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent); }
:is(.hm-hero, .home-hero, .pg-hero)::after { content: ""; position: absolute; right: -8%; top: -10%; width: 62%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); animation: tm-glow 7s ease-in-out infinite; }
:is(.hm-hero, .home-hero, .pg-hero) > * { position: relative; z-index: 1; }
.hm-hero h1, .home-hero h1 { color: var(--ink); font-weight: 800; }
.pg-hero h1 { font-weight: 800; }
.hm-hero__lede, .home-hero__lede { color: #3d4a44; }
.home-hero__eyebrow, .dc-kicker { color: var(--accent); font-weight: 700; }
.home-hero__proof, .hm-hero__cap { color: var(--ink-muted); }
.hm-live { background: var(--accent); }
@keyframes hm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 107, 71, .5); } 50% { box-shadow: 0 0 0 6px rgba(22, 107, 71, 0); } }
.hm-hero .btn-mark, .home-hero .btn-mark { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(22, 107, 71, .26); }
.hm-hero .btn-mark:hover, .home-hero .btn-mark:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.hm-hero .btn-onnight, .home-hero .btn-onnight { background: var(--paper); border-color: transparent; color: var(--ink); }
.hm-hero .btn-onnight:hover, .home-hero .btn-onnight:hover { background: var(--accent-soft); color: var(--accent); }
.hm-frame { border: 0; box-shadow: 0 30px 70px rgba(16, 40, 28, .16); border-radius: 22px; }
.hm-frame__bar { background: #fbfcfb; }

/* бегущая лента — белые таблетки на светлом */
.hm-ticker { border-top: 0; padding: 8px 0 22px; }
.hm-tick { background: var(--paper); border-color: transparent; color: var(--ink); box-shadow: 0 4px 14px rgba(16, 40, 28, .05); }
.hm-tick small { color: var(--ink-subtle); }
.hm-mark--night { background: var(--accent-soft); color: var(--accent); }

/* /stroyka: лента находок на светлом */
.feed__head { color: var(--ink-muted); }
.feed__badge::before { background: var(--accent); }
.feed-item { box-shadow: 0 4px 14px rgba(16, 40, 28, .05); }
.feed-item:first-of-type { box-shadow: 0 24px 50px rgba(16, 40, 28, .16); }
.feed__total { background: var(--night); color: #fff; }
.feed__total span { color: var(--on-night); }

/* /dc: панель контура и схема на светлом */
.hm-hero .dc-panel, .hm-hero .dc-visual { background: var(--paper); border-color: transparent; box-shadow: 0 24px 60px rgba(16, 40, 28, .12); }
.hm-hero .dc-panel__title { color: var(--ink-subtle); }
.hm-hero .dc-panel__item { background: var(--surface-mint); }
.hm-hero .dc-panel__item b { color: var(--ink); }
.hm-hero .dc-panel__item span { color: var(--ink-muted); }
.hm-hero .dc-panel__core { background: var(--night); color: #fff; }
.hm-hero .dc-visual__chips span { background: var(--accent-soft); color: var(--accent); }
.hm-hero .dcs { --b-bg: var(--paper); --b-line: var(--line-strong); --b-act: var(--accent-soft);
  --t: var(--ink); --s: var(--ink-muted); --flow: var(--accent); --off: var(--line-strong);
  --rack: var(--surface-mint); --slot: var(--line-strong); --led: var(--accent); --cool: var(--accent-mid); --x: var(--crit); }

/* ─── графики: зелёная шкала ─── */
.tone-accent { background: var(--accent); }
.tone-mid { background: var(--accent-warm); }
.tone-warm { background: #c9d0cc; }
.hm-funnel .step-1 { background: var(--card, var(--accent-soft)); }
.hm-funnel .step-2 { background: #bfe3cf; }
.kind-bar i, .meter i { background: var(--accent); }
.hm-big, .hm-stats b, .pg-metrics b, .hm-free__big { letter-spacing: -.045em; font-weight: 800; }
.hm-big { color: var(--accent); }

/* ─── телефон ─── */
@media (max-width: 860px) {
  .hm-band, .pg-facts, .facts-strip { width: calc(100% - 16px); margin-top: 8px; border-radius: 26px; }
  .hm-band { padding: 2.75rem 0; }
  .hm-chips { display: flex; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-band--night::after, :is(.hm-hero, .home-hero, .pg-hero)::after { animation: none; }
}
