/* Главная страница. Вынесено из src/landing.ts по TD-027 шаг 2. */
/* Shapka i futer - obshie dlya vsego sayta (chrome.ts). Rezhim overlay: na glavnoy
     shapka visit poverh geroya vo ves ekran, kontent pod nee NE sdvigaetsya.
     Vstavleno pervym, chtoby lokalnye pravila nizhe mogli ego perekryvat. */
  
  :root{--bg:#f7f5fb;--bg2:#efe9f8;--card:#fff;--ink:#221836;--mut:#6f6288;--line:rgba(34,24,54,.09);
    --glass:rgba(255,255,255,.58);--vio:#7b3ff2;--pink:#ef5fd4;--gold:#f0c46a;
    --shadow:0 24px 60px -34px rgba(34,24,54,.35);--v1:52%;--v2:12%;--vtop:12%;
    --logo1:#b82a99;--logo2:#9c650a;--heroP:#392d4e;--heroGlow:rgba(247,245,251,.36);
    --acc1:#7b3ff2;--acc2:#c936a8;--navlink:#4a3f66;
    --hdScrim:linear-gradient(180deg,rgba(247,245,251,.82),rgba(247,245,251,.6) 32%,rgba(247,245,251,.32) 58%,rgba(247,245,251,.1) 78%,rgba(247,245,251,.03) 90%,rgba(247,245,251,0));
    --vcbg:linear-gradient(#fff,#fff) padding-box,linear-gradient(180deg,rgba(34,24,54,.10),rgba(34,24,54,.05)) border-box;
    --vcsh:0 24px 60px -34px rgba(34,24,54,.35);--sceneBg:#efe9f8}
  html[data-theme="dark"]{--bg:#0e0917;--bg2:#171028;--card:#1b1230;--ink:#f4effc;--mut:#a89bc7;--line:rgba(244,239,252,.11);
    --glass:rgba(22,14,40,.55);--shadow:0 24px 60px -30px rgba(0,0,0,.6);--v1:94%;--v2:56%;--vtop:40%;
    --logo1:#ef5fd4;--logo2:#f0c46a;--heroP:#a89bc7;--heroGlow:rgba(14,9,23,.45);
    --acc1:#9d6bff;--acc2:#ef5fd4;--navlink:#E8DFFF;
    --hdScrim:linear-gradient(180deg,rgba(10,5,20,.72),rgba(10,5,20,.52) 32%,rgba(10,5,20,.26) 58%,rgba(10,5,20,.08) 78%,rgba(10,5,20,.02) 90%,rgba(10,5,20,0));
    --vcbg:linear-gradient(176deg,#251543,#150d28) padding-box,linear-gradient(155deg,rgba(157,107,255,.42),rgba(239,95,212,.15) 42%,rgba(244,239,252,.05)) border-box;
    --vcsh:0 34px 80px -36px rgba(0,0,0,.75),0 0 46px -20px rgba(123,63,242,.4),inset 0 1px 0 rgba(255,255,255,.06);
    --sceneBg:linear-gradient(180deg,#191031,#110a22)}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:'Onest','Segoe UI',system-ui,sans-serif;
    line-height:1.5;overflow-x:clip;transition:background .4s,color .4s}
  a{color:var(--vio);text-decoration:none;transition:color .2s}a:hover{color:var(--pink)}
  ::selection{background:rgba(239,95,212,.28)}
  .u{font-family:'Unbounded',sans-serif}
  .wrap{max-width:1220px;margin:0 auto;padding:0 40px}
  .rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
  .rv.rv-in{opacity:1;transform:translateY(0)}
  /* fadeUp obyavlen v authModalCss() - odno opredelenie na stranicu. */
  @keyframes aIn{0%{opacity:0;transform:translateY(20px) scale(.9)}55%{opacity:1;transform:translateY(-4px) scale(1.03)}100%{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes comet{0%{left:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 46px);opacity:0}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes pulseDot{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
  /* header */
  .scrim{position:fixed;top:0;left:0;right:0;height:108px;z-index:59;background:var(--hdScrim);pointer-events:none;transition:opacity .25s}
  html[data-theme="light"] .hd.onDark{--navlink:#E8DFFF;--ink:#f4effc;--mut:#a89bc7;--line:rgba(244,239,252,.18);
    --glass:rgba(22,14,40,.5);--logo1:#ef5fd4;--logo2:#f0c46a}
  html[data-theme="light"] .hd.onDark .panel{background:rgba(12,6,22,.55)}
  /* scroll rail */
  .rail-nav{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;align-items:center;gap:12px;
    padding:13px 9px;border-radius:999px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(16px);box-shadow:var(--shadow)}
  /* Strelka: vid prezhniy 30x30, zona 48x44 - tozhe na vsyu shirinu kapsuly.
     Po vertikali -7px: do blizhayshego segmenta 12px, zony ne peresekayutsya.
     Bez border-radius: krug ostavil by mertvymi ugly, a nam nuzhen ves pryamougolnik. */
  .rail-nav .ar{position:relative;width:30px;height:30px;border-radius:50%;border:0;background:transparent;
    color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;transition:background .2s}
  .rail-nav .ar::after{content:'';position:absolute;inset:-7px -9px}
  .rail-nav .ar:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
  .rail-nav .ar:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
  .rail-nav .ar:hover{color:var(--pink)}
  .rail-nav .ar.up:hover{transform:translateY(-2px)}
  .rail-nav .ar.dn:hover{transform:translateY(2px)}
  .rail-nav .segs{display:flex;flex-direction:column;gap:8px;align-items:center}
  /* Vid prezhniy: poloska 7x26, kapsula ne razdulas.
     Zona nazhatiya rasshirena psevdoelementom - on position:absolute, poetomu na razmer
     samoy knopki i na razmetku kapsuly ne vliyaet voobshe.
     Kapsula sushestvuet TOLKO radi navigacii, poetomu mertvyh zon v ney byt ne dolzhno:
     po gorizontali zona tyanetsya do samogo kraya (vnutrennyaya shirina 48px, poloska 7px,
     znachit -20px s kazhdoy storony).
     Po vertikali rovno +4px: gap mezhdu segmentami 8px, zony sosedey stykuyutsya vpritык
     i ne voruyut kliki. Bolshe nelzya - naedut na zony strelok (do nih 12px, iz nih 7 uzhe ih). */
  .seg{position:relative;width:7px;height:26px;border-radius:5px;border:0;padding:0;
    background:color-mix(in srgb,var(--mut) 38%,transparent);cursor:pointer;
    transition:background .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
  .seg::after{content:'';position:absolute;inset:-4px -20px}
  .seg.on{background:linear-gradient(180deg,var(--acc1),var(--acc2));box-shadow:0 0 12px rgba(239,95,212,.7)}
  .seg:hover{background:color-mix(in srgb,var(--ink) 55%,transparent)}
  .seg:focus-visible{outline:2px solid var(--acc2);outline-offset:3px}
  /* hero */
  .hero{position:relative;margin-bottom:-2px;padding-bottom:2px;min-height:100vh;display:flex;align-items:center;overflow:clip}
  .hero img{position:absolute;left:0;top:-8%;width:100%;max-width:none;height:112%;object-fit:cover;object-position:62% 32%;
    will-change:transform;
    -webkit-mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,0) 96%);
    mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,0) 96%)}
  .hero .v1{position:absolute;inset:0;background:linear-gradient(100deg,color-mix(in srgb,var(--bg) var(--v1),transparent) 4%,color-mix(in srgb,var(--bg) var(--v2),transparent) 30%,transparent 52%)}
  .hero .v2{position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 0%,var(--bg) 7%,color-mix(in srgb,var(--bg) 82%,transparent) 13%,color-mix(in srgb,var(--bg) 45%,transparent) 24%,color-mix(in srgb,var(--bg) 16%,transparent) 36%,transparent 50%)}
  .hero .v3{position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) var(--vtop),transparent),transparent 16%)}
  .hero .stage{position:relative;width:100%;padding:110px 17px 60px}
  .hero .col{position:relative;width:max-content;max-width:calc(100vw - 34px);display:flex;flex-direction:column;align-items:center}
  .hero .glow{position:absolute;inset:-70px -120px -70px -160px;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 60% 55% at 38% 50%,var(--heroGlow),transparent 70%)}
  .hero .col > *:not(.glow){position:relative;z-index:1;align-self:center}
  .badge{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;background:var(--glass);
    backdrop-filter:blur(14px);border:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--mut);animation:fadeUp .8s .05s both}
  .badge i{width:7px;height:7px;border-radius:50%;background:linear-gradient(95deg,#7b3ff2,#ef5fd4);
    box-shadow:0 0 10px rgba(239,95,212,.8);animation:pulseDot 2s infinite}
  .hero h1{margin:22px 0 0;font-family:'Unbounded',sans-serif;font-weight:500;font-size:clamp(40px,4.3vw,66px);
    line-height:1.07;letter-spacing:-.01em;text-align:center;animation:fadeUp .9s .16s both}
  .gl{-webkit-background-clip:text;background-clip:text;color:transparent}
  .gl1{background-image:linear-gradient(95deg,#ef5fd4 6%,#f09b95 94%)}
  .gl2{background-image:linear-gradient(95deg,#f09b95 6%,#f0c46a 94%)}
  .hero p.lead{margin:24px 0 0;max-width:500px;font-size:17.5px;line-height:1.65;color:var(--heroP);
    text-wrap:pretty;text-align:center;animation:fadeUp .9s .28s both}
  .hero .cta{margin-top:36px;animation:fadeUp .9s .4s both}
  .bigbtn{display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 36px;border-radius:999px;border:0;
    background:linear-gradient(95deg,#7b3ff2,#ef5fd4);color:#fff;font-family:inherit;font-size:17px;font-weight:600;letter-spacing:.01em;
    cursor:pointer;box-shadow:0 14px 40px -10px rgba(123,63,242,.6),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .28s,box-shadow .28s}
  .bigbtn:hover{transform:translateY(-2px);box-shadow:0 22px 52px -12px rgba(239,95,212,.65),inset 0 1px 0 rgba(255,255,255,.28)}
  .hero .note{margin-top:20px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);animation:fadeUp .9s .52s both}
  html[data-theme="light"] .hero p.lead,html[data-theme="light"] .hero .note{color:#170D2C}
  html[data-theme="light"] .hero .note svg{stroke:#5b2fc4}
  /* sections */
  .sec{padding-top:130px}
  .sec.value{padding-top:96px}
  .kick{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    background:linear-gradient(95deg,#7b3ff2,#ef5fd4);-webkit-background-clip:text;background-clip:text;color:transparent}
  h2.t{margin:14px 0 0;font-family:'Unbounded',sans-serif;font-weight:500;font-size:clamp(28px,2.9vw,42px);letter-spacing:-.01em}
  .sub{margin:14px 0 0;max-width:560px;font-size:15.5px;line-height:1.65;color:var(--mut)}
  /* value cards */
  .cards3{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .vcard{border:1px solid transparent;background:var(--vcbg);border-radius:26px;padding:14px 14px 26px;box-shadow:var(--vcsh);transition:transform .35s}
  .vcard:hover{transform:translateY(-5px)}
  .vcard .scene{height:230px;border-radius:18px;background:var(--sceneBg);display:flex;align-items:center;justify-content:center;overflow:clip;position:relative}
  .vcard .scene.dark{background:#120b22}
  .vcard .body{padding:22px 14px 0}
  .vcard h3{margin:0 0 8px;font-size:17.5px;font-weight:700}
  .vcard .body p{margin:0;font-size:14.5px;line-height:1.62;color:var(--mut)}
  .dmock{width:204px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 12px 30px -18px rgba(34,24,54,.35)}
  .dmock .t{font-size:12.5px;font-weight:700}
  .dmock .qr{display:flex;justify-content:center;margin:10px 0;color:var(--ink)}
  .dmock .l{height:9px;border-radius:5px;background:var(--bg2)}
  .dmock .l.s{width:68%;margin-top:6px}
  .dmock .go{margin-top:11px;height:27px;border-radius:999px;background:linear-gradient(95deg,#7b3ff2,#ef5fd4);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
  .live{position:absolute;top:12px;left:14px;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.75)}
  .live i{width:7px;height:7px;border-radius:50%;background:#ff4d67;box-shadow:0 0 8px #ff4d67;animation:pulseDot 1.6s infinite}
  .obs-tag{position:absolute;bottom:10px;right:14px;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.35)}
  .amock{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 24px;border-radius:18px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
  .amock.pop{animation:aIn .6s cubic-bezier(.22,1,.36,1) both}
  .amock .h{display:flex;align-items:center;gap:10px}
  .amock .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7b3ff2,#ef5fd4);display:flex;align-items:center;justify-content:center;font-size:15px}
  .amock .n{color:#fff;font-size:13.5px;font-weight:700}
  .amock .a{font-size:13.5px;font-weight:700;background:linear-gradient(95deg,#ef5fd4,#f0c46a);-webkit-background-clip:text;background-clip:text;color:transparent}
  .amock .m{color:rgba(255,255,255,.72);font-size:13px;max-width:220px;text-align:center}
  .smock{width:212px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 12px 30px -18px rgba(34,24,54,.35)}
  .smock .h{display:flex;justify-content:space-between;align-items:baseline;font-size:11px}
  .smock .h b{font-weight:700;background:linear-gradient(95deg,#7b3ff2,#ef5fd4);-webkit-background-clip:text;background-clip:text;color:transparent}
  .smock .h span{font-weight:600;color:var(--mut)}
  .smock .bars{display:flex;align-items:flex-end;gap:7px;height:88px;margin-top:12px}
  .smock .bars i{flex:1;border-radius:6px;background:linear-gradient(180deg,#9d6bff,#7b3ff2)}
  .smock .bars i.hot{background:linear-gradient(180deg,#ef5fd4,#f0c46a)}
  .smock .sum{margin-top:12px;font-size:12px;font-weight:700}
  /* trust */
  .trust{padding-top:120px}
  .trust .row{display:grid;grid-template-columns:1fr 1fr 1fr}
  .trust .c{padding:10px 36px}
  .trust .c:first-child{padding-left:0}
  .trust .c:last-child{padding-right:0}
  .trust .c+.c{border-left:1px solid var(--line)}
  .trust .in{display:flex;gap:16px;align-items:flex-start}
  .tic{flex:none;width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(123,63,242,.14),rgba(239,95,212,.14));color:var(--vio)}
  .trust h3{margin:2px 0 6px;font-size:16.5px;font-weight:700}
  .trust p{margin:0;font-size:14px;line-height:1.6;color:var(--mut)}
  /* assets */
  .coins{margin-top:40px;display:flex;gap:18px;flex-wrap:wrap}
  .coin{width:158px;padding:24px 18px 20px;background:var(--card);border:1px solid var(--line);border-radius:22px;
    display:flex;flex-direction:column;align-items:center;box-shadow:var(--shadow)}
  .coin.off{opacity:.55}
  .coin .ic{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700}
  .coin.off .ic{filter:saturate(.4);font-size:23px}
  .coin b{margin-top:12px;font-size:15.5px;font-weight:700}
  .coin span{font-size:12.5px;color:var(--mut)}
  .coin .on{margin-top:9px;display:inline-flex;gap:6px;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#2fa470}
  .coin .on i{width:6px;height:6px;border-radius:50%;background:#35c184;box-shadow:0 0 8px #35c184}
  .coin .wait{margin-top:9px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
    border:1px dashed var(--mut);padding:3px 10px;border-radius:999px;opacity:.8}
  .zero{margin-top:28px;display:flex;align-items:center;gap:30px;padding:30px 38px;border-radius:24px;border:1px solid transparent;
    background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(95deg,#7b3ff2,#ef5fd4,#f0c46a) border-box;box-shadow:var(--shadow);flex-wrap:wrap}
  .zero .pct{font-family:'Unbounded',sans-serif;font-weight:600;font-size:54px;line-height:1;
    background:linear-gradient(95deg,#7b3ff2,#ef5fd4);-webkit-background-clip:text;background-clip:text;color:transparent}
  .zero .tx{flex:1;min-width:280px}
  .zero .tx b{font-size:16.5px;font-weight:700}
  .zero .tx p{margin:5px 0 0;font-size:14.5px;line-height:1.6;color:var(--mut)}
  .zero .tag{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--bg2);
    font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--mut);text-transform:uppercase}
  /* manifesto */
  .mani{position:relative;z-index:1;margin-top:140px;padding:140px 0;background:#0c0616}
  .mani .orb{position:absolute;border-radius:50%;pointer-events:none}
  .mani .o1{top:-240px;left:2%;width:620px;height:620px;filter:blur(24px);
    background:radial-gradient(circle,rgba(123,63,242,.36),rgba(123,63,242,.12) 42%,transparent 72%)}
  .mani .o2{bottom:-300px;right:0%;width:680px;height:680px;filter:blur(28px);
    background:radial-gradient(circle,rgba(239,95,212,.22),rgba(239,95,212,.08) 44%,transparent 72%)}
  .mani .o3{top:12%;right:18%;width:300px;height:300px;filter:blur(20px);
    background:radial-gradient(circle,rgba(240,196,106,.18),transparent 68%)}
  .mani .wrap{position:relative}
  .mani .ln{font-family:'Unbounded',sans-serif;font-weight:600;font-size:clamp(38px,4.6vw,72px);line-height:1.16;letter-spacing:-.01em;color:#f6f1fd;text-align:center}
  .mani .ln.g{background:linear-gradient(95deg,#ef5fd4 15%,#f0c46a 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .mani .ln.o{letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(246,241,253,.5)}
  .mani p.after{margin:30px auto 0;max-width:520px;font-size:16px;line-height:1.7;color:rgba(246,241,253,.55);text-align:center}
  .path{margin-top:110px}
  .path .cap{text-align:center;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,241,253,.45)}
  .path .rail{position:relative;margin-top:48px}
  .path .line{position:absolute;top:5px;left:5%;right:5%;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,rgba(123,63,242,.75) 22%,rgba(239,95,212,.75) 78%,transparent)}
  .path .line i{position:absolute;top:-4px;left:0;width:46px;height:10px;border-radius:999px;
    background:radial-gradient(closest-side at 50% 50%,rgba(240,196,106,.95),rgba(239,95,212,.5) 46%,rgba(123,63,242,.22) 72%,transparent);
    filter:blur(.4px);box-shadow:0 0 20px rgba(240,196,106,.3);animation:comet 4.5s linear infinite}
  .path .steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:44px;padding-top:44px}
  .path .st{text-align:center}
  .path .st .n{font-family:'Unbounded',sans-serif;font-weight:600;font-size:14px;letter-spacing:.1em;
    background:linear-gradient(95deg,#9d6bff,#ef5fd4);-webkit-background-clip:text;background-clip:text;color:transparent}
  .path .st b{display:block;margin-top:12px;font-size:17px;font-weight:700;color:#f6f1fd}
  .path .st p{margin:10px auto 0;max-width:300px;font-size:14.5px;line-height:1.65;color:rgba(246,241,253,.55)}
  /* CTA */
  .ctasec{padding:140px 0 120px}
  .banner{position:relative;overflow:clip;border-radius:36px;padding:84px 40px;text-align:center;
    background:linear-gradient(115deg,#7b3ff2 0%,#a94ef0 40%,#ef5fd4 72%,#f0c46a 108%);box-shadow:0 40px 90px -40px rgba(123,63,242,.55)}
  .banner .b1{position:absolute;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.13);top:-64px;right:9%;animation:floaty 7s ease-in-out infinite}
  .banner .b2{position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(240,196,106,.35);filter:blur(6px);bottom:-58px;left:6%;animation:floaty 9s ease-in-out infinite reverse}
  .banner h2{margin:0;font-family:'Unbounded',sans-serif;font-weight:500;font-size:clamp(30px,3.4vw,50px);letter-spacing:-.01em;color:#fff;position:relative}
  .banner p{margin:18px auto 0;max-width:460px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.85);position:relative}
  .banner .bwrap{margin-top:34px;position:relative}
  .banner .bigbtn{background:#fff;color:#47187f;font-weight:700;box-shadow:0 16px 40px -14px rgba(20,6,40,.5)}
  .banner .bigbtn:hover{box-shadow:0 24px 52px -16px rgba(20,6,40,.6)}
  .banner .fine{margin-top:18px;font-size:13px;color:rgba(255,255,255,.75);position:relative}
  /* footer */
  /* Futer obshiy (chrome.ts). Zdes tolko shirina: ostalnaya stranica idet po 1220,
     i futer dolzhen s ney sovpadat po levomu krayu - inache on uzhe kontenta na 100px. */
  .foot .wrap{max-width:1220px}
  /* Okno vhoda - obshiy modul (auth-modal.ts). Toast nizhe ostaetsya stranichnym. */
  
  /* toast */
  #toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:120;background:var(--ink);color:var(--bg);
    padding:13px 22px;border-radius:14px;font-size:13.5px;font-weight:600;box-shadow:0 18px 44px -16px rgba(10,4,22,.5);
    pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .3s}
  #toast.show{opacity:1;animation:fadeUp .35s cubic-bezier(.22,1,.36,1) both}

/* --- Утилиты вместо атрибутов style. Вынесено по TD-027 шаг 2 (ADR 022). --- */
/* Ступенчатое появление блоков: каждый следующий чуть позже соседа. */
.d8{transition-delay:.08s}
.d10{transition-delay:.1s}
.d12{transition-delay:.12s}
.d14{transition-delay:.14s}
.d16{transition-delay:.16s}
.d20{transition-delay:.2s}
.d24{transition-delay:.24s}
.d28{transition-delay:.28s}
.d32{transition-delay:.32s}
.d36{transition-delay:.36s}
/* Столбики в макете статистики. Высоты фиксированные — это картинка, не данные. */
.bars i:nth-child(1){height:34%}
.bars i:nth-child(2){height:48%}
.bars i:nth-child(3){height:28%}
.bars i:nth-child(4){height:60%}
.bars i:nth-child(5){height:44%}
.bars i:nth-child(6){height:78%}
.bars i:nth-child(7){height:56%}
/* Кружки монет: фирменный цвет каждой. */
.ic.c-btc{background:linear-gradient(135deg,#f7931a,#ffb347);box-shadow:0 10px 28px -10px rgba(247,147,26,.65)}
.ic.c-ltc{background:linear-gradient(135deg,#8e9aa8,#c3cdd6);box-shadow:0 10px 28px -10px rgba(142,154,168,.65)}
.ic.c-eth{background:linear-gradient(135deg,#6f7cba,#8fa0e8)}
.ic.c-usdt{background:linear-gradient(135deg,#26a17b,#4fd1a5)}
.ic.c-ton{background:linear-gradient(135deg,#2e8fd8,#54b1f0)}
.mb-44{margin-bottom:44px}
.mt-0{margin-top:0}

/* ============================================================================
   Мобильная раскладка (BL-23, 2026-08-27).

   Адаптив сделан ТОЛЬКО медиазапросами: десктопная раскладка выше не тронута.
   Брейкпоинты 1024 / 768 / 420 - те же, что в chrome.css, content-page.css
   и dashboard.css. Один набор на весь сайт.

   Что чинилось. На 375px страница раскладывалась на 765px, то есть половина
   контента уезжала за правый край и молча срезалась: у body стоит
   overflow-x:clip, поэтому полосы прокрутки не появлялось и на глаз всё
   выглядело просто пустым. Причина - три сетки по три колонки и фиксированные
   ширины макетов внутри карточек.
   ============================================================================ */

@media (max-width:1024px){
  .wrap{padding:0 28px}
  .sec{padding-top:96px}
  .sec.value{padding-top:72px}
  .trust{padding-top:88px}
  .cards3{gap:18px}
  .rail-nav{inset-inline-end:14px}
  .mani{margin-top:104px;padding:104px 0}
  .path{margin-top:80px}
  .ctasec{padding:104px 0 88px}
  .banner{padding:64px 28px}
}

@media (max-width:768px){
  /* Капсула-навигация на телефоне прячется: полоска 7px под палец не годится,
     а листают там пальцем, а не кнопками. Решение владельца 2026-08-27.
     Разметка остаётся на месте - скрипт главной ищет .seg через
     querySelectorAll и на пустом списке работает штатно. */
  .rail-nav{display:none}

  .wrap{padding:0 20px}
  .sec{padding-top:72px}
  .sec.value{padding-top:56px}
  .trust{padding-top:64px}

  /* Три сетки по три колонки - в одну колонку. Именно они давали 765px. */
  .cards3{grid-template-columns:1fr;gap:18px}
  .trust .row{grid-template-columns:1fr}
  .trust .c{padding:20px 0}
  .trust .c:first-child{padding-top:0}
  .trust .c+.c{border-inline-start:0;border-top:1px solid var(--line)}
  .path .steps{grid-template-columns:1fr;gap:26px;padding-top:0}
  /* Комета летит по горизонтали вдоль трёх шагов - в колонке ей места нет. */
  .path .rail{margin-top:26px}
  .path .line{display:none}

  /* Макеты внутри карточек заданы в пикселях - сжимаем их по месту. */
  .vcard .scene{height:210px}
  .dmock{width:min(204px,72%)}
  .smock{width:min(212px,74%)}
  .amock{padding:16px 18px}
  .amock .m{max-width:min(220px,78%)}

  .coins{gap:12px}
  .coin{width:calc(50% - 6px);padding:20px 14px 18px}

  .zero{margin-top:22px;padding:24px 22px;gap:18px}
  .zero .pct{font-size:44px}
  .zero .tx{min-width:0}

  .mani{margin-top:80px;padding:80px 0}
  .path{margin-top:64px}
  .ctasec{padding:80px 0 68px}
  .banner{padding:48px 22px;border-radius:28px}

  /* ---- Первый экран на узком экране ----
     На десктопе фото занимает весь экран, а текст лежит поверх него. На вертикальном
     телефоне так не выходит по геометрии: чтобы фото закрыло экран высотой 812px,
     кадр приходится увеличить так, что в видимую часть попадает около 30 процентов
     ширины снимка. Героиню обрезает по плечо, монеты уходят за край, а текст ложится
     на самую пёструю часть картинки и почти не читается (замер 2026-08-27).
     Поэтому на телефоне фото идёт полосой сверху и показывается целиком, а текст
     встаёт под ним на чистом фоне. Высота полосы - переменная, менять её в одном
     месте: от неё же считается верхний отступ текста.
     Решение временное по договорённости с владельцем: окончательный мобильный кадр
     рисует дизайнер (запись в BACKLOG, раздел BL-23). */
  .hero{--heroImgH:clamp(300px,46vh,430px);display:block;min-height:0;overflow:clip}
  .hero img{top:0;height:var(--heroImgH);object-position:10% 22%;
    -webkit-mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.4) 82%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.4) 82%,rgba(0,0,0,0) 100%)}
  /* Боковая и нижняя заливки нужны, только когда текст лежит поверх фото. */
  .hero .v1,.hero .v2{display:none}
  .hero .stage{padding:calc(var(--heroImgH) - 18px) 20px 54px}
  .hero .col{width:100%;max-width:100%}
  .hero .glow{inset:-40px -30px}
  /* Затемнение под шапкой тянем на всю её высоту: на второй строке меню лежит
     поверх светлой части снимка. */
  .scrim{height:calc(var(--hd-h) + 34px)}

  /* Декоративные пятна фона заданы в пикселях под широкий экран и торчали
     за правый край: страница считалась шириной 628px при экране 375. Видно этого
     не было (у body overflow-x:clip), но лишняя ширина ломала центрирование. */
  .hero .glow{inset:-50px -20px}
  .mani .o1{width:340px;height:340px;top:-120px;inset-inline-start:-40px;filter:blur(18px)}
  .mani .o2{width:360px;height:360px;bottom:-160px;filter:blur(20px)}
  .mani .o3{width:180px;height:180px;inset-inline-end:6%}

  /* Тост в одну строку не помещается - разрешаем перенос. */
  #toast{max-width:calc(100vw - 32px);white-space:normal;text-align:center}
}

@media (max-width:420px){
  .wrap{padding:0 16px}
  .sec{padding-top:60px}
  .sec.value{padding-top:48px}
  .trust{padding-top:56px}

  /* Нижняя граница clamp подобрана под десктоп и на 375px не помещается.
     Верхнее значение не тронуто - на широком экране вид прежний. */
  .hero h1{font-size:clamp(30px,8.4vw,40px)}
  .hero p.lead{font-size:16px}
  h2.t{font-size:clamp(24px,6.6vw,28px)}
  .sub{font-size:15px}
  .mani .ln{font-size:clamp(26px,7.4vw,38px)}
  .mani p.after{font-size:15px}
  .banner h2{font-size:clamp(24px,6.4vw,30px)}
  .banner p{font-size:15.5px}

  .vcard{border-radius:22px;padding:12px 12px 22px}
  .vcard .scene{height:190px}
  .zero{padding:20px 18px}
  .zero .pct{font-size:38px}
  .banner{padding:40px 18px;border-radius:24px}
  .bigbtn{height:54px;padding:0 26px;font-size:16px}
  .mani{margin-top:64px;padding:64px 0}
  .ctasec{padding:64px 0 56px}
}

/* ============================================================================
   Системная настройка «меньше движения» (BL-23.1, 2026-08-27).

   Первый заход по этому правилу в проекте: до сегодня @media
   prefers-reduced-motion не было ни в одном файле. На главной больше всего
   движения на сайте - комета вдоль пути доната, покачивание кругов на баннере,
   пульс точки в бейдже, всплытие блоков при прокрутке и параллакс фото.
   Параллакс выключается не здесь, а в src/web/landing.ts: он делается
   присваиванием transform из скрипта, CSS его не перебьёт.
   Остальные страницы сайта - отдельной записью в BACKLOG (к BL-26).
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  /* Блоки просто на месте, без всплытия. */
  .rv{opacity:1;transform:none;transition:none}
  .badge,.hero h1,.hero p.lead,.hero .cta,.hero .note{animation:none}
  /* Бесконечные: пульс, комета, покачивание, всплытие алерта. */
  .badge i,.coin .on i,.live i,.path .line i,.banner .b1,.banner .b2,.amock.pop{animation:none}
  .vcard,.bigbtn,.coin,.hbtn{transition:none}
  .vcard:hover,.bigbtn:hover{transform:none}
  #toast.show{animation:none}
}