/* © 2026 Миллиардик. Все права защищены. Лендинг milliardik.ru (v0.5.18.1). */
:root{
  --paper:#EEF1FA;--card:#FFFFFF;--ink:#171C4F;--ink-2:#565C8C;--line:#DDE1F2;
  --acc:#2F45E6;--acc-ink:#2438C9;--acc-soft:#E3E7FF;--coin:#FFC23C;--coin-ink:#7A4E00;--coin-soft:#FFF0C7;
  --doc:#FFFDF7;--doc-line:#D9D3C2;--income:#0A9396;--bezel:#171C4F;--shadow:0 18px 50px rgba(23,28,79,.16);
  --r:22px;--max:1120px;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0F1336;--card:#1A2052;--ink:#EEF0FF;--ink-2:#A2A8D8;--line:#2B336D;
  --acc:#5468FF;--acc-ink:#A3AEFF;--acc-soft:#262E78;--coin-ink:#FFD67A;--coin-soft:#3D3313;
  --doc:#1E2246;--doc-line:#3A4280;--bezel:#2B336D;--shadow:0 18px 50px rgba(0,0,0,.45);
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc-ink)}
h1,h2,h3{hyphens:manual;overflow-wrap:break-word;font-family:Unbounded,'Golos Text',system-ui,sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:0}
h1{font-size:clamp(30px,6.2vw,54px)}
.nb i{font-style:normal;color:var(--acc)}   /* «неБанк»: «не» — синим кнопок, «Банк» — цветом заголовка (вариант C, 21.10) */
h2{font-size:clamp(24px,4.2vw,38px);margin-bottom:14px}
h3{font-size:19px;font-weight:700}
p{margin:0 0 12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
section{padding:64px 0}
.sub{color:var(--ink-2)}
.eyebrow{display:inline-block;font:600 13px/1 'Golos Text',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink);margin-bottom:12px}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:16px;
  background:var(--acc);color:#fff;font:700 17px/1 'Golos Text',sans-serif;text-decoration:none;border:0;cursor:pointer;
  box-shadow:0 8px 22px rgba(47,69,230,.28);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(47,69,230,.34)}
.btn:focus-visible,.nav a:focus-visible,summary:focus-visible{outline:3px solid var(--coin);outline-offset:3px}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px;border-radius:13px;box-shadow:none}

/* шапка */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font:800 18px/1 Unbounded,sans-serif;color:var(--ink);text-decoration:none;margin-right:auto}
.logo svg{width:34px;height:34px}
.nav{display:flex;gap:22px}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:15px}
.nav a:hover{color:var(--ink)}
@media (max-width:760px){.nav{display:none}}
@media (max-width:420px){.hide-s{display:none}.logo{font-size:16px}}

/* первый экран */
.hero{padding:48px 0 40px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero p.lead{font-size:clamp(18px,2.4vw,22px);color:var(--ink-2);margin:18px 0 26px;max-width:34ch}
.hero .note{font-size:14px;color:var(--ink-2);margin-top:12px}
.slogan{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:600 14px/1.3 'Golos Text',sans-serif;color:var(--coin-ink);
  background:var(--coin-soft);padding:8px 14px;border-radius:999px}
.stage{position:relative;justify-self:center;width:min(330px,80vw)}
.phone{border-radius:46px;padding:11px;background:var(--bezel);box-shadow:var(--shadow);position:relative}
.phone img{border-radius:36px;aspect-ratio:390/844;object-fit:cover;object-position:top;width:100%;background:var(--paper)}
.stage .check{position:absolute;width:62%;left:-26%;bottom:6%;transform:rotate(-7deg);filter:drop-shadow(0 16px 26px rgba(23,28,79,.24))}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .stage{width:min(290px,70vw);margin-left:18%}
  .stage .check{left:-22%;width:58%}
}

/* боль */
.pain{background:var(--card);border-block:1px solid var(--line)}
.pain ul{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:12px}
.pain li{background:var(--paper);border-radius:16px;padding:14px 18px;font-size:18px}
.pain li::before{content:'';display:inline-block;width:1.25em;height:1.25em;margin-right:10px;vertical-align:-.25em;background:url(/emoji/1f624.svg) center/contain no-repeat}
.pain li:nth-child(2)::before{background-image:url(/emoji/1f937.svg)}
.pain li:nth-child(3)::before{background-image:url(/emoji/1f61e.svg)}
.big{font:700 clamp(20px,3vw,26px)/1.35 Unbounded,sans-serif;max-width:30ch}
.big mark{background:none;color:var(--acc-ink)}

/* как работает */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 22px;display:flex;flex-direction:column}
.step .shot{height:300px;border-radius:16px;background:var(--paper);overflow:hidden;display:flex;align-items:flex-start;justify-content:center;margin-bottom:16px}
.step .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.step .shot.doc{align-items:center;padding:10px}
.step .shot.doc img{height:auto;object-fit:contain}
.step h3::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--coin);color:#2A1B00;font-size:15px;margin-right:10px;vertical-align:2px}
.step p{color:var(--ink-2);font-size:15.5px;margin:10px 0 0}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.step .shot{height:340px}}
/* 3.11: «Своя карта» — вводная карточка перед четырьмя шагами (утверждено Леонидом, docs/brand/лендинг-своя-карта) */
.step.intro .ey{display:block;color:rgba(255,255,255,.78);font:700 13px "Golos Text",sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}.step.intro .pts{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;color:#fff;font-size:16px}.step.intro .pts li{display:flex;gap:10px;align-items:center;line-height:1.35}.step.intro .pts .emj{width:22px;height:22px;flex:0 0 22px;background:rgba(255,255,255,.16);border-radius:9px;padding:5px;box-sizing:content-box}@media (min-width:981px){.step.intro{grid-column:1/-1;display:grid;grid-template-columns:330px 1fr;grid-template-rows:1fr auto auto auto auto 1fr;column-gap:40px;padding:22px 36px 22px 22px}.step.intro .shot{grid-row:1/7;height:auto;margin:0;background:none!important;overflow:visible;perspective:1600px;padding:14px 0 18px 40px}.step.intro .shot picture{display:block;width:236px;padding:9px;border-radius:44px;background:var(--bezel);box-shadow:0 40px 70px rgba(10,16,80,.45);transform:rotateY(22deg) rotateX(6deg) rotateZ(-4deg);transform-origin:center}.step.intro .shot img{height:auto;border-radius:34px;display:block}.step.intro .ey{grid-row:2;grid-column:2;font-size:15px}.step.intro h3{grid-row:3;grid-column:2;font-size:52px;margin:0}.step.intro p{grid-row:4;grid-column:2;font-size:24px;max-width:28ch;margin-top:14px}.step.intro .pts{grid-row:5;grid-column:2;font-size:20px;gap:16px;margin-top:28px}.step.intro .pts .emj{width:28px;height:28px;flex-basis:28px}}.step.intro{background:var(--acc);border-color:var(--acc)}.step.intro h3,.step.intro p{color:#fff}.step.intro h3::before{display:none}.step.intro .shot{background:rgba(255,255,255,.12)}@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}@media (max-width:980px){.step.intro .pts{display:none}.step.intro p{margin-top:8px}}@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* что внутри */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.feat .ic{font-size:30px;line-height:1;margin-bottom:12px}
.feat p{color:var(--ink-2);font-size:15.5px;margin:8px 0 0}
.medals{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center}
.medals img{border-radius:14px;width:100%;max-width:420px}
@media (max-width:860px){.grid{grid-template-columns:1fr 1fr}.medals{grid-template-columns:1fr}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* сравнение */
.cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cmp th,.cmp td{padding:16px 18px;text-align:left;vertical-align:top;font-size:16px}
.cmp th{font:700 14px/1.2 Unbounded,sans-serif;color:var(--ink-2);background:var(--paper)}
.cmp th:last-child{color:var(--acc-ink)}
.cmp tr+tr td{border-top:1px solid var(--line)}
.cmp td:first-child{color:var(--ink-2)}
.cmp td:last-child{font-weight:500}
.cmp td:last-child b{font-weight:700}
.cmp td:last-child::before{content:'✓ ';color:var(--income)}
.cap{margin-top:16px;font-style:italic;color:var(--ink-2)}
@media (max-width:560px){.cmp th,.cmp td{padding:12px;font-size:14.5px}}

/* история */
.story .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center}
.story .book{background:var(--doc);border:1px solid var(--doc-line);border-radius:18px;padding:26px 24px;font-family:'Golos Text',sans-serif;
  box-shadow:var(--shadow);transform:rotate(-2deg)}
.story .book .row{display:flex;justify-content:space-between;border-bottom:1px dashed var(--doc-line);padding:9px 0;font-size:15px}
.story .book .row b{font-weight:600}
.story .book .t{font:700 15px/1.2 Unbounded,sans-serif;margin-bottom:6px}
.plus{color:var(--income)}.minus{color:#C23B30}
@media (prefers-color-scheme:dark){.minus{color:#FF9385}}
@media (max-width:860px){.story .wrap{grid-template-columns:1fr}.story .book{max-width:360px}}

/* безопасность */
.safe{background:var(--card);border-block:1px solid var(--line)}
.safe .grid .feat{background:var(--paper);border:0}
.more{display:inline-block;margin-top:22px;font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline}

/* бесплатно */
.free .box{background:var(--acc);color:#fff;border-radius:28px;padding:44px 32px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.free .box h2{color:#fff;margin:0 0 8px}
.free .box p{color:rgba(255,255,255,.86);font-size:18px;margin:0}
.free svg{width:96px;height:96px}
@media (max-width:560px){.free .box{grid-template-columns:1fr;padding:32px 24px}}

/* как начать */
.start ol{list-style:none;padding:0;margin:26px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.start li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.start li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--acc-soft);color:var(--acc-ink);font:800 17px/1 Unbounded,sans-serif;margin-bottom:14px}
.start li p{color:var(--ink-2);font-size:15.5px;margin:6px 0 0}
@media (max-width:760px){.start ol{grid-template-columns:1fr}}

/* вопросы */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 20px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);font:700 22px/1 'Golos Text',sans-serif;color:var(--acc-ink)}
.faq details[open] summary::after{content:'−'}
.faq details p{padding:0 20px 18px;margin:0;color:var(--ink-2)}
.faq .wrap{max-width:820px}

/* подвал */
.foot{padding:34px 0 44px;border-top:1px solid var(--line);color:var(--ink-2);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.foot a{color:var(--ink-2)}
.foot .c{margin-right:auto}

/* внутренние страницы */
.page{padding:48px 0 64px}
.page .wrap{max-width:780px}
.page h1{font-size:clamp(24px,6vw,42px);margin-bottom:18px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.page h2{font-size:22px;margin:28px 0 10px}
/* «Безопасность и данные» (21.10) */
.sec .lead2{color:var(--ink-2);font-size:18px;margin:0 0 6px}.sec .grid.short{margin:22px 0 8px}.sec .grid.short .feat{padding:18px}.sec .grid.short h3{font-size:17px}
.sec h2 img.emj{width:1.05em;height:1.05em;margin-right:10px;vertical-align:-.15em}.sec p,.sec li{color:var(--ink);font-size:16.5px;line-height:1.55}.sec ul{padding-left:22px;margin:10px 0}.sec li{margin:6px 0}
.sec .cta{margin:34px 0 0}
.stub{background:var(--coin-soft);color:var(--coin-ink);border-radius:16px;padding:14px 18px;margin:18px 0;font-weight:500}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.safe .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.safe .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.safe .grid{grid-template-columns:1fr}}

/* v0.5.18.1: «Как работает» на телефоне — слайдер (scroll-snap, без библиотек) */
.dots{display:none}
@media (max-width:760px){
  .steps{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:26px -20px 0;padding:0 20px 6px;scroll-padding:0 20px}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 86%;scroll-snap-align:start}
  .step .shot{height:360px}
  .dots{display:flex;align-items:center;gap:10px;margin-top:16px}
  .dots [role=tab]{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer}
  .dots [role=tab][aria-selected=true]{background:var(--acc);width:26px;border-radius:6px}
  .dots .next{margin-left:auto;background:none;border:0;color:var(--acc-ink);font:600 16px 'Golos Text',sans-serif;cursor:pointer;padding:8px 0}
}
@media (prefers-reduced-motion:reduce){.steps{scroll-behavior:auto}}

/* v0.5.19: значки Twemoji (CC-BY 4.0) — как в приложении */
img.emj{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em}
.feat .ic img.emj{width:32px;height:32px}
.slogan img.emj{width:1.2em;height:1.2em}

/* v0.5.20: правовые документы */
.doc .ed{color:var(--ink-2);margin:-6px 0 18px}
.doc h3{font-size:17px;margin:20px 0 8px}
.doc p,.doc li{line-height:1.6}
.doc ul,.doc ol{padding-left:22px;margin:0 0 12px}
.doc table{border-collapse:collapse;width:100%;font-size:14px;margin:0 0 16px;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--line);padding:8px 10px;vertical-align:top;text-align:left;min-width:120px}

/* v2 (21.10): «Чему научится», подзаголовки секций, RuStore, кнопка «Открыть» с QR */
.lead2{max-width:62ch;margin:-4px 0 22px;font-size:17px}
.learn .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.learn .col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px}
.learn .mds{display:flex;gap:6px;margin-bottom:12px}
.learn .md svg{width:56px;height:56px;display:block;filter:drop-shadow(0 4px 8px rgba(23,28,79,.18))}
.learn h3{font:700 19px/1.2 Unbounded,sans-serif;margin:0 0 8px;display:flex;align-items:center;gap:10px}
.learn h3 .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--coin);color:#2A1B00;font-size:14px}
.learn .col p{margin:0}
.learn .mn{margin-top:10px!important;font-size:13.5px;color:var(--ink-2)}
.big2{font:600 clamp(17px,2.2vw,20px)/1.45 'Golos Text',sans-serif;margin-top:22px;max-width:60ch;color:var(--acc-ink)}
@media (max-width:760px){.learn .cols{grid-template-columns:minmax(0,1fr)}.learn .md svg{width:48px;height:48px}}
.start .hs{margin:26px 0 22px}
.store{margin-top:12px;font-size:14px;color:var(--ink-2)}
.ob .qr svg{display:block;width:100%;height:100%}
.ha img.emj{width:1em;height:1em;vertical-align:-.12em}
.nw{white-space:nowrap}
/* v0.5.28 (30.10): RuStore — первый экран Android в России (вариант Б), значки, плашка встроенного браузера (rs.js) */
.cta2{display:grid;gap:10px;max-width:360px}
.cta2 .btn{width:100%}
.rs-btn{background:#1A1C20;padding:0;box-shadow:0 8px 20px rgba(26,28,32,.28);overflow:hidden}
.rs-btn:hover{box-shadow:0 12px 26px rgba(26,28,32,.34)}
.rs-btn .rsi{display:block;overflow:hidden;width:138px;height:46px;margin:0 auto}   /* рамку значка (1 px) прячем: фон кнопки = фон значка */
.rs-btn img{display:block;height:52px;width:144px;max-width:none;margin:-3px}
@media (prefers-color-scheme:dark){.rs-btn{box-shadow:0 0 0 1px #393E45}}
.rs-badge{display:inline-block;vertical-align:middle;border-radius:6px;line-height:0}
.rs-badge:focus-visible{outline:3px solid var(--coin);outline-offset:3px}
.rs-in{margin:10px 0 0;display:flex;justify-content:center}
.start .store{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.inapp{position:sticky;top:0;z-index:60;background:#FFE7A6;color:#2A1B00;padding:12px 16px 12px;font-size:15px;line-height:1.4;box-shadow:0 4px 16px rgba(23,28,79,.18)}
.inapp p{margin:0 auto 10px;max-width:var(--max)}
.inapp-b{display:flex;gap:8px;max-width:var(--max);margin:0 auto}
.inapp button{min-height:40px;border:0;border-radius:12px;padding:0 14px;font:600 14px 'Golos Text',system-ui,sans-serif;cursor:pointer}
.inapp .ia-copy{background:#2A1B00;color:#FFE7A6}
.inapp .ia-here{background:transparent;color:#2A1B00;box-shadow:inset 0 0 0 1.5px rgba(42,27,0,.35)}
.ob .rs-line{display:block;margin:-10px 0 16px;font-size:14px;color:var(--acc,#2F45E6);font-weight:600;text-decoration:none}
.ob .rs-line:hover{text-decoration:underline}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-row .rs-btn{min-width:200px}
/* v0.5.28 (30.10): блок «Индекс карманных денег» — внизу, кнопка второго плана (ЛЕНДИНГ.md, 2а) */
.idx{padding-top:8px}
.idx .wrap{max-width:820px}
.idx-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 28px 22px}
.idx-box h2{font-size:clamp(22px,3.4vw,30px);margin-bottom:10px}
.idx-box p{color:var(--ink-2);max-width:60ch}
.btn-line{background:transparent;color:var(--acc-ink);box-shadow:inset 0 0 0 2px var(--acc);margin-top:6px}
.btn-line:hover{box-shadow:inset 0 0 0 2px var(--acc),0 8px 20px rgba(47,69,230,.18)}
.idx-note{font-size:13.5px;margin:12px 0 0}