:root{--bg:#0b0a10;--bg2:#0f0d16;--panel:#14111d;--panel2:#1c1828;--line:#2a2439;--fg:#f4f1fa;--muted:#a49cb8;--soft:#cfc8e0;--acc:#7c5cff;--acc2:#a78bff;--ok:#7be3a6;--okbg:#14301f;--bad:#ff9aa8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:500 16px/1.55 Onest,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.m{font-family:Manrope,sans-serif;letter-spacing:-.035em;margin:0}
.num{font-family:"JetBrains Mono",monospace;letter-spacing:-.03em}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font:700 15px Onest;padding:12px 20px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.btn.p{background:linear-gradient(135deg,#8b6cff,#6a4bff);border-color:transparent;color:#fff;box-shadow:0 12px 30px -10px rgba(106,75,255,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.lg{padding:16px 26px;font-size:16px;border-radius:14px}
.eyebrow{font:700 12px "JetBrains Mono";letter-spacing:.16em;text-transform:uppercase;color:var(--acc2)}
.ico{width:22px;height:22px}
/* header */
header{position:sticky;top:0;z-index:5;background:rgba(11,10,16,.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05)}
header .wrap{display:flex;align-items:center;gap:28px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font:800 20px Manrope;letter-spacing:-.03em}
.mk{width:34px;height:34px;display:grid;place-items:center;flex:none}.mk img{width:34px;height:34px;display:block}
nav.top{display:flex;gap:26px;font-weight:600;font-size:15px;color:var(--soft)}
.hdr-r{margin-left:auto;display:flex;gap:10px;align-items:center}
.tgl{display:flex;gap:3px;padding:3px;border-radius:99px;border:1px solid var(--line);background:var(--panel)}
.tgl span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--muted)}.tgl span.on{background:var(--panel2);color:var(--fg)}
/* hero */
.hero{position:relative;padding:84px 0 70px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-200px -200px auto;height:700px;background:radial-gradient(700px 360px at 70% 30%,rgba(124,92,255,.32),transparent 70%),radial-gradient(500px 300px at 15% 0%,rgba(124,92,255,.14),transparent 70%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:center}
.hero h1{font-size:58px;line-height:1.03;margin:16px 0 18px;text-wrap:balance}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#b49bff,#7c5cff);-webkit-background-clip:text;color:transparent}
.lead{font-size:19px;color:var(--soft);max-width:560px}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;max-width:620px}
.path{padding:18px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--panel);display:flex;flex-direction:column;gap:8px}
.path b{font:800 19px Manrope;letter-spacing:-.03em;display:flex;align-items:center;gap:10px}
.path span{color:var(--muted);font-size:14px}
.path .btn{margin-top:6px;justify-content:center}
.chips{display:flex;gap:16px;margin-top:22px;color:var(--muted);font-size:14px;align-items:center;flex-wrap:wrap}
.chips span{display:inline-flex;gap:8px;align-items:center}
/* phone */
.phone{justify-self:center;width:300px;height:600px;border-radius:44px;border:10px solid #1e1a2b;background:linear-gradient(180deg,#2b1e5a,#120e1f 60%);position:relative;box-shadow:0 40px 120px -30px rgba(124,92,255,.6)}
.phone .vid{position:absolute;inset:0;border-radius:34px;background:radial-gradient(240px 260px at 50% 35%,rgba(167,139,255,.55),transparent 70%),linear-gradient(160deg,#3a2780,#140f24)}
.phone .play{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;backdrop-filter:blur(6px)}
.float{position:absolute;padding:12px 14px;border-radius:14px;background:rgba(20,17,29,.88);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:13px;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.float b{display:block;font-size:18px}
.f1{left:-70px;top:110px}.f2{right:-60px;top:300px}
.ok{color:var(--ok)}
/* sections */
section.s{padding:84px 0;border-top:1px solid rgba(255,255,255,.05)}
.sh{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}
.sh h2{font-size:42px;line-height:1.08;max-width:720px}
.sh p{color:var(--muted);max-width:420px;margin:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.step{padding:22px;border-radius:18px;background:var(--panel);border:1px solid var(--line);position:relative}
.step .n{font:700 13px "JetBrains Mono";color:var(--acc2);display:block;margin-bottom:14px}.step>svg{display:block;width:40px;height:40px;padding:9px;border-radius:12px;background:rgba(124,92,255,.14);color:var(--acc2);box-sizing:border-box}
.step h3{font-size:20px;margin:12px 0 8px}
.step p{margin:0;color:var(--muted);font-size:15px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.side{padding:30px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(124,92,255,.10),transparent 50%),var(--panel)}
.side h3{font-size:30px;margin:10px 0 14px}
.side ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.side li{display:flex;gap:12px;color:var(--soft)}
.side li svg{flex:none;color:var(--acc2);margin-top:2px}
.shield{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini{padding:20px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.mini h3{font-size:18px;margin:10px 0 6px}.mini p{margin:0;color:var(--muted);font-size:14px}
table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
th,td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
th{font:700 13px Onest;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;background:var(--bg2)}
tr:last-child td{border-bottom:0}
td.g{background:rgba(124,92,255,.08);font-weight:700}
.yes{color:var(--ok)}.no{color:var(--bad)}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.calc .side{display:grid;gap:16px}
.slider{height:6px;border-radius:99px;background:var(--panel2);position:relative}.slider i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#8b6cff,#6a4bff)}
.slider b{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(124,92,255,.4)}
.res{display:flex;justify-content:space-between;align-items:end;padding-top:14px;border-top:1px solid var(--line)}
.res .big{font-size:40px}
.ref{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 34px;border-radius:22px;background:linear-gradient(110deg,#2a1d63,#171126 60%);border:1px solid #3d2f78}
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.post .cov{height:150px;background:radial-gradient(160px 120px at 70% 30%,rgba(167,139,255,.5),transparent 70%),linear-gradient(135deg,#3a2780,#16112a);display:grid;place-items:center}.post .cov svg{width:46px;height:46px;opacity:.95;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.post .cov.b{background:linear-gradient(135deg,#1d3a5a,#101827)}.post .cov.c{background:linear-gradient(135deg,#4a2350,#170f1d)}
.post div.t{padding:18px}.post .tag{font:700 11px "JetBrains Mono";letter-spacing:.12em;color:var(--acc2);text-transform:uppercase}
.post h3{font-size:19px;margin:8px 0 6px;line-height:1.25}.post p{margin:0;color:var(--muted);font-size:14px}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q{padding:20px 22px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.q b{display:flex;justify-content:space-between;gap:12px;font:700 16px Onest}.q p{margin:8px 0 0;color:var(--muted);font-size:14px}
.final{text-align:center;padding:90px 0;position:relative;overflow:hidden}
.final:before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 60%,rgba(124,92,255,.3),transparent 70%)}
.final .wrap{position:relative}.final h2{font-size:52px}
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
footer b{color:var(--fg);display:block;margin-bottom:10px}
footer a{display:block;margin:6px 0}

/* блог и статьи (из макета) */
.bl-hero{padding:70px 0 30px}.bl-hero h1{font-size:54px}.cats{display:flex;gap:8px;margin-top:22px}
.cats span{padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--panel);font-size:14px;font-weight:600;color:var(--soft)}
.cats span.on{background:linear-gradient(135deg,#8b6cff,#6a4bff);color:#fff;border-color:transparent}
.feat{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin:30px 0}
.feat>.post .cov{height:320px}.feat>.post h3{font-size:30px}
.side-list{display:grid;gap:14px}.side-list .post{display:grid;grid-template-columns:140px 1fr}.side-list .post .cov{height:100%}
.art{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding:50px 0 80px}.art>*{min-width:0}.tbl{max-width:100%;overflow-x:auto}
.art h1{font-size:46px;line-height:1.08;margin:14px 0}.art .meta{color:var(--muted);font-size:14px;display:flex;gap:14px}
.art .body{font-size:18px;line-height:1.75;color:var(--soft)}.art .body h2{font-size:28px;color:var(--fg);margin:36px 0 12px}
.art .body p{margin:0 0 16px}.toc{position:sticky;top:96px;padding:20px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.toc b{display:block;margin-bottom:10px}.toc a{display:block;color:var(--muted);font-size:14px;padding:6px 0;border-top:1px solid var(--line)}
.cta-box{margin:28px 0;padding:24px;border-radius:18px;background:linear-gradient(110deg,#2a1d63,#171126 60%);border:1px solid #3d2f78;display:flex;justify-content:space-between;align-items:center;gap:20px}
.crumbs{color:var(--muted);font-size:14px}.callout{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--panel);font-size:16px}

/* ===== живые элементы ===== */
html{scroll-behavior:smooth}
.btn{cursor:pointer;transition:transform .15s ease,filter .15s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
nav.top a:hover,footer a:hover{color:var(--fg)}
.tgl button{all:unset;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--muted);cursor:pointer}
.tgl button.on{background:var(--panel2);color:var(--fg)}
.q{padding:0}.q summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;gap:12px;font:700 16px Onest}
.q summary::-webkit-details-marker{display:none}.q summary:after{content:"+";color:var(--muted);font-weight:500}
.q[open] summary:after{content:"−"}.q p{margin:0;padding:0 22px 20px;color:var(--muted);font-size:15px}
.faq{align-items:start}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;margin:14px 0 4px;background:linear-gradient(90deg,#8b6cff,#6a4bff) 0/var(--p,50%) 100% no-repeat,var(--panel2);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(124,92,255,.4);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(124,92,255,.4);cursor:pointer}
.calc label{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}.calc label b{color:var(--fg)}
.post{display:block;transition:border-color .2s,transform .2s}.post:hover{border-color:#4a3c86;transform:translateY(-2px)}
.cats a{padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--panel);font-size:14px;font-weight:600;color:var(--soft);cursor:pointer}
.cats a.on{background:linear-gradient(135deg,#8b6cff,#6a4bff);color:#fff;border-color:transparent}
.cats{flex-wrap:wrap}
.crumbs a:hover{color:var(--fg)}
.art .body ul,.art .body ol{margin:0 0 16px;padding-left:22px}.art .body li{margin:6px 0}
.art .body h3{font-size:21px;color:var(--fg);margin:26px 0 10px}
.art .body a{color:var(--acc2);text-decoration:underline;text-underline-offset:3px}
.art .body strong{color:var(--fg)}
.art .body table{margin:8px 0 20px;font-size:15px}.art .body td,.art .body th{padding:12px 14px}
.art .callout{margin:0 0 18px}
.toc a:hover{color:var(--fg)}
.art .faq{grid-template-columns:1fr;margin-top:8px}
.related{padding:0 0 80px}.related h2{font-size:30px;margin-bottom:20px}
.page-hero{padding:80px 0 50px;position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:-200px -200px auto;height:600px;background:radial-gradient(600px 320px at 70% 30%,rgba(124,92,255,.28),transparent 70%)}
.page-hero .wrap{position:relative}.page-hero h1{font-size:54px;line-height:1.05;margin:16px 0 18px;max-width:860px;text-wrap:balance}
.page-hero .actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.muted{color:var(--muted)}
footer span.soon{display:block;margin:6px 0;opacity:.6}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:10;background:var(--panel);padding:8px 12px;border-radius:8px}

/* ===== светлая тема ===== */
html[data-theme=light]{--bg:#f7f5fc;--bg2:#efebf8;--panel:#ffffff;--panel2:#ece7f8;--line:#e2dcef;--fg:#16121f;--muted:#6c6480;--soft:#3b3550;--acc2:#6a4bff;--ok:#15803d;--okbg:#dcfce7;--bad:#c2334a}
html[data-theme=light] header{background:rgba(247,245,252,.85);border-bottom-color:var(--line)}
html[data-theme=light] .ref,html[data-theme=light] .cta-box{background:linear-gradient(110deg,#e4dcff,#f6f3ff 60%);border-color:#d3c8fb}
html[data-theme=light] .float{background:rgba(255,255,255,.92)}
html[data-theme=light] .post:hover{border-color:#c4b6fb}
html[data-theme=light] .hero:before,html[data-theme=light] .page-hero:before{opacity:.55}
html[data-theme=light] th{background:var(--bg2)}

/* ===== телефон ===== */
@media (max-width:900px){
  .wrap{padding:0 18px}
  nav.top,.tgl{display:none}.hdr-r .btn{padding:9px 14px;font-size:14px}
  header .wrap{height:64px;gap:12px}
  .hero{padding:44px 0}.hero .wrap{grid-template-columns:1fr}.hero h1{font-size:38px}.lead{font-size:16px}
  .paths{grid-template-columns:1fr}.phone{width:240px;height:470px;margin-top:10px}.float{display:none}
  .steps,.two,.shield,.cards,.calc,.blog,.faq,.feat,.art,footer .wrap{grid-template-columns:1fr}
  .sh{flex-direction:column;align-items:start}.sh h2,.shield h2{font-size:30px!important}
  section.s{padding:56px 0}
  .ref,.cta-box{flex-direction:column;align-items:start}.ref h2{font-size:24px!important}
  .tbl{overflow-x:auto}table{font-size:13px;min-width:560px}th,td{padding:10px}
  .final{padding:60px 0}.final h2{font-size:34px}
  .bl-hero h1,.page-hero h1{font-size:36px}.page-hero{padding:48px 0 30px}
  .side-list .post{grid-template-columns:1fr}.side-list .post .cov{height:150px}
  .art{gap:24px;padding:30px 0 50px}.art h1{font-size:32px}.art .body{font-size:17px}
  .art aside{display:none}.feat>.post .cov{height:200px}.feat>.post h3{font-size:22px}
  .side{padding:22px}.side h3{font-size:24px}.res .big{font-size:32px}
  .res{flex-direction:column;align-items:flex-start;gap:4px}.res .big{white-space:nowrap}
}
@media (max-width:420px){.hdr-r{gap:6px}.hdr-r .btn{padding:8px 11px;font-size:13px}.logo{font-size:18px}}
.bl-hero h1{line-height:1.05;margin:12px 0 0}
.side-list .post h3{font-size:19px}
@media (max-width:900px){.side-list .post h3{font-size:19px}}

/* ровная вёрстка: кнопки карточек на одной линии, заголовки без лишних интервалов */
h2,h3{line-height:1.15}
.path .btn{margin-top:auto}
.path span{flex:1}
.two .side{display:flex;flex-direction:column}
.two .side ul{flex:1}
.two .side>.btn{align-self:flex-start}
/* калькулятор: бренд и креатор по отдельности, не рядом */
.calc.one{grid-template-columns:1fr;max-width:640px}
.calc.one [data-calc="creator"]{display:none}
.calc.one.show-creator [data-calc="creator"]{display:grid}
.calc.one.show-creator [data-calc="brand"]{display:none}
.calc-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;border:1px solid var(--line);background:var(--panel);margin-bottom:16px}
.calc-tabs button{all:unset;cursor:pointer;padding:10px 18px;border-radius:10px;font:700 15px Onest;color:var(--muted)}
.calc-tabs button.on{background:linear-gradient(135deg,#8b6cff,#6a4bff);color:#fff}

/* ===== живой телефон на первом экране ===== */
.stage{position:relative}
.phone .vid{overflow:hidden;background:#140f24}
.blob{position:absolute;border-radius:50%;filter:blur(30px);opacity:.85}
.blob.b1{width:260px;height:260px;left:-40px;top:40px;background:#7c5cff;animation:drift1 9s ease-in-out infinite alternate}
.blob.b2{width:220px;height:220px;right:-60px;top:260px;background:#c04bff;animation:drift2 11s ease-in-out infinite alternate}
.blob.b3{width:180px;height:180px;left:40px;bottom:-40px;background:#3b7bff;opacity:.55;animation:drift1 13s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(60px,90px) scale(1.15)}}
@keyframes drift2{to{transform:translate(-80px,-70px) scale(.9)}}
.pbar{position:absolute;left:16px;right:16px;top:16px;height:3px;border-radius:9px;background:rgba(255,255,255,.2);overflow:hidden}
.pbar i{position:absolute;inset:0;width:0;background:#fff;border-radius:9px}
.stage.run .pbar i{animation:pbar 8.5s linear forwards}
@keyframes pbar{to{width:100%}}
.vui-r{position:absolute;right:12px;bottom:110px;display:grid;gap:16px;color:#fff}
.vui-r span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.vui-r span:first-child{animation:beat 1.6s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.12);color:#ff6b9a}}
.vui-b{position:absolute;left:16px;right:70px;bottom:28px;display:grid;gap:8px;color:#fff;font-size:14px}
.vui-b i{display:block;height:8px;border-radius:9px;background:rgba(255,255,255,.35)}.vui-b i.s{width:60%}
.vcount{position:absolute;left:16px;top:32px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);color:#fff;font-size:15px}
.vcount svg{width:16px;height:16px}
.stage .float{opacity:0;transform:translateY(12px) scale(.96);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.stage .float.on{opacity:1;transform:none}
.okc{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--okbg);color:var(--ok);font-size:12px;font-weight:800;margin-right:8px}
.f3{left:-90px;bottom:150px}
.coins{position:absolute;right:16px;top:8px;pointer-events:none}
.coins i{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#f5b70a);opacity:0}
.f2.on .coins i{animation:coin 1.1s ease-out forwards}
.f2.on .coins i:nth-child(2){animation-delay:.15s;left:-14px}.f2.on .coins i:nth-child(3){animation-delay:.3s;left:12px}
@keyframes coin{0%{opacity:0;transform:translateY(10px)}20%{opacity:1}100%{opacity:0;transform:translateY(-46px)}}
html[data-theme=light] .stage .float{background:rgba(255,255,255,.94)}
@media (prefers-reduced-motion:reduce){.blob,.vui-r span,.pbar i{animation:none!important}.pbar i{width:100%}.stage .float{opacity:1;transform:none}}

/* ===== шаги: ровно и дорого ===== */
.steps{gap:18px}
.step{padding:28px;border-radius:22px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(124,92,255,.08),transparent 45%),var(--panel);overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.step:hover{border-color:#4a3c86;transform:translateY(-3px);box-shadow:0 24px 60px -30px rgba(124,92,255,.7)}
.step:before{content:"";position:absolute;left:0;top:0;height:3px;background:linear-gradient(90deg,#8b6cff,#c4b2ff);width:25%;border-radius:0 3px 3px 0}
.step:nth-child(2):before{width:50%}.step:nth-child(3):before{width:75%}.step:nth-child(4):before{width:100%}
.step .n{font:800 46px/1 Manrope;letter-spacing:-.04em;margin:6px 0 30px;background:linear-gradient(180deg,#fff,rgba(167,139,255,.35));-webkit-background-clip:text;color:transparent}
.step>svg{position:absolute;top:28px;right:28px;width:44px;height:44px;padding:10px;border-radius:14px}
.step h3{font-size:20px;line-height:1.2;margin:0 0 12px;min-height:2.4em}
.step p{line-height:1.6}
html[data-theme=light] .step .n{background:linear-gradient(180deg,#16121f,rgba(106,75,255,.45));-webkit-background-clip:text}

/* ===== обложки статей ===== */
.post .cov img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.post:hover .cov img{transform:scale(1.04)}
.post .cov{overflow:hidden}
.post .cov:has(img){height:auto;aspect-ratio:16/9}
.feat>.post .cov:has(img){height:auto}
.side-list .post .cov:has(img){aspect-ratio:auto}


/* ===== сравнение: три карточки, GRIZZLI в центре ===== */
.cmp3{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:20px;align-items:center}
.cmpc{position:relative;border-radius:24px;border:1px solid var(--line);background:var(--panel);padding:28px}
.cmpc:not(.us){opacity:.82}
.cmpc-h{display:flex;align-items:center;gap:12px}.cmpc-h b{font:800 20px Manrope;letter-spacing:-.03em}
.cmpc-i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--panel2);color:var(--muted)}
.cmpc-i .mk{width:42px;height:42px;border-radius:13px}
.cmpc-t{margin:12px 0 18px;color:var(--muted);font-size:14px;min-height:2.9em}
.cmpc-s{display:flex;gap:6px;margin-bottom:8px}.cmpc-s i{flex:1;height:6px;border-radius:9px;background:var(--panel2)}
.cmpc-s i.h{background:linear-gradient(90deg,#8a8199 50%,var(--panel2) 50%)}.cmpc-s i.f{background:#8a8199}
.us .cmpc-s i.f{background:linear-gradient(90deg,#8b6cff,#b49bff);box-shadow:0 0 12px rgba(139,108,255,.7)}
.cmpc ul{list-style:none;margin:0;padding:0}
.cmpc li{padding:13px 0;border-top:1px solid var(--line)}.cmpc li:first-child{border-top:0}
.cmpc li small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.cmpc .v{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--soft)}
.cmpc .v>span{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.mk-ok{background:var(--okbg);color:var(--ok)}.mk-no{background:rgba(255,154,168,.12);color:var(--bad)}.mk-mid{background:var(--panel2);color:var(--muted)}
html[data-theme=light] .mk-no{background:#fde4e8}
/* центр: живая переливающаяся рамка и свечение */
.cmpc.us{padding:36px 30px;border-color:transparent;background:linear-gradient(180deg,rgba(124,92,255,.18),rgba(124,92,255,.04) 55%),var(--panel);box-shadow:0 40px 100px -40px rgba(124,92,255,.95);isolation:isolate}
.cmpc.us:before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:1.5px;background:conic-gradient(from var(--a,0deg),#8b6cff,#f0c6ff,#6a4bff,#3b7bff,#8b6cff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;z-index:-1}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--a:360deg}}
.cmpc.us .cmpc-h b{font-size:24px}.cmpc.us .v{color:var(--fg);font-weight:700}
.cmpc.us .btn{width:100%;justify-content:center;margin-top:16px}
.cmp-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:5px 12px;border-radius:99px;font:700 12px Onest;letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,#8b6cff,#6a4bff);box-shadow:0 8px 24px -8px rgba(106,75,255,.9);white-space:nowrap}
/* появление при прокрутке */
.cmp3 li,.cmpc-s i{transition:opacity .5s ease,transform .5s ease}
.cmpc:not(.in) li{opacity:0;transform:translateY(8px)}
.cmpc:not(.in) .cmpc-s i{transform:scaleX(0);transform-origin:left}
.cmp3 li:nth-child(2){transition-delay:.06s}.cmp3 li:nth-child(3){transition-delay:.12s}.cmp3 li:nth-child(4){transition-delay:.18s}.cmp3 li:nth-child(5){transition-delay:.24s}
.cmpc-s i:nth-child(2){transition-delay:.1s}.cmpc-s i:nth-child(3){transition-delay:.2s}.cmpc-s i:nth-child(4){transition-delay:.3s}.cmpc-s i:nth-child(5){transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.cmpc.us:before{animation:none}.cmp3 li,.cmpc-s i{opacity:1!important;transform:none!important}}
@media (max-width:900px){.cmp3{grid-template-columns:1fr;gap:26px}.cmpc.us{order:-1}.cmpc-t{min-height:0}}

/* ===== лента из трёх «роликов» в телефоне ===== */
.feed{position:absolute;inset:0}
.scene{position:absolute;inset:0;overflow:hidden;transform:translateY(100%);transition:transform .7s cubic-bezier(.7,0,.2,1)}
.scene.cur{transform:none}.scene.prev{transform:translateY(-100%)}.scene.wait{transition:none}
.scene .blob{position:absolute;border-radius:50%;filter:blur(30px);opacity:.85}
.scene .b1{width:260px;height:260px;left:-50px;top:30px;animation:drift1 9s ease-in-out infinite alternate}
.scene .b2{width:230px;height:230px;right:-70px;top:250px;animation:drift2 11s ease-in-out infinite alternate}
.s1{background:#1a1030}.s1 .b1{background:#8b5cff}.s1 .b2{background:#ff5ca8}
.s2{background:#0c1a2c}.s2 .b1{background:#2d8cff}.s2 .b2{background:#22d3c5}
.s3{background:#120f26}.s3 .b1{background:#6a4bff}.s3 .b2{background:#1fd8a4}
/* сцена 1: блогер говорит в камеру */
.person{position:absolute;left:50%;top:118px;width:150px;height:230px;transform:translateX(-50%)}
.person .body{position:absolute;left:5px;right:5px;bottom:0;height:110px;border-radius:70px 70px 20px 20px;background:linear-gradient(180deg,#2a1d55,#140e28)}
.person .head{position:absolute;left:37px;top:22px;width:76px;height:88px;border-radius:40px;background:linear-gradient(160deg,#f3d2c1,#d9a58f)}
.person .hair{position:absolute;left:30px;top:12px;width:90px;height:60px;border-radius:46px 46px 20px 20px;background:#2b1a16;z-index:1}
.person .mouth{position:absolute;left:28px;bottom:18px;width:20px;height:7px;border-radius:8px;background:#7a2f3a;animation:talk .28s ease-in-out infinite alternate}
@keyframes talk{to{transform:scaleY(.35)}}
.wave{position:absolute;left:50%;top:372px;transform:translateX(-50%);display:flex;gap:5px;align-items:center;height:26px}
.wave i{width:5px;border-radius:5px;background:rgba(255,255,255,.75);animation:wv .9s ease-in-out infinite}
.wave i:nth-child(1){height:10px}.wave i:nth-child(2){height:22px;animation-delay:.1s}.wave i:nth-child(3){height:14px;animation-delay:.2s}.wave i:nth-child(4){height:24px;animation-delay:.3s}.wave i:nth-child(5){height:12px;animation-delay:.4s}
@keyframes wv{50%{transform:scaleY(.35)}}
/* сцена 2: гаджет */
.gadget{position:absolute;left:50%;top:120px;width:120px;height:200px;margin-left:-60px;border-radius:26px;background:linear-gradient(150deg,#e8f1ff,#8fb2d9);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 0 0 5px #0e1b2e;animation:float3d 3.2s ease-in-out infinite}
.gadget i{position:absolute;inset:14px;border-radius:16px;background:linear-gradient(160deg,#22d3c5,#2d5bff);overflow:hidden}
.gadget i:after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);animation:shine 2.4s ease-in-out infinite}
@keyframes float3d{50%{transform:translateY(-10px) rotate(-4deg)}}
@keyframes shine{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.spark{position:absolute;width:12px;height:12px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:tw 1.6s ease-in-out infinite}
.sp1{left:70px;top:130px}.sp2{right:66px;top:170px;animation-delay:.5s}.sp3{left:92px;top:300px;animation-delay:1s;width:9px;height:9px}
@keyframes tw{50%{opacity:.2;transform:scale(.5) rotate(45deg)}}
/* сцена 3: график и монета */
.bars{position:absolute;left:46px;right:46px;top:150px;height:170px;display:flex;align-items:flex-end;gap:10px}
.bars i{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#5df2c6,rgba(31,216,164,.25));transform-origin:bottom;transform:scaleY(.1)}
.s3.cur .bars i{animation:grow .9s cubic-bezier(.2,.8,.2,1) forwards}
.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:48%;animation-delay:.1s!important}.bars i:nth-child(3){height:40%;animation-delay:.2s!important}.bars i:nth-child(4){height:70%;animation-delay:.3s!important}.bars i:nth-child(5){height:100%;animation-delay:.4s!important}
@keyframes grow{to{transform:scaleY(1)}}
.coin{position:absolute;right:52px;top:112px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:800 22px Manrope;color:#5a3d00;background:radial-gradient(circle at 35% 30%,#fff3b0,#f5b70a);box-shadow:0 10px 30px -8px rgba(245,183,10,.8);animation:bounce 1.2s ease-in-out infinite}
@keyframes bounce{50%{transform:translateY(-12px)}}
/* субтитры как в CapCut */
.subs{position:absolute;left:18px;right:58px;top:398px;text-align:center;font:800 23px/1.25 Manrope;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.subs span{display:inline-block;opacity:0;transform:scale(.6)}
.subs span.hl{color:#14101f;background:#ffe14d;padding:0 6px;border-radius:6px;text-shadow:none}
.s3 .subs span.hl{background:#5df2c6}
.scene.cur .subs span{animation:pop .32s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:var(--d)}
@keyframes pop{to{opacity:1;transform:none}}
.pbar,.vui-r,.vui-b,.vcount{z-index:2}
.vui-b{bottom:22px}
.stage.run .pbar i{animation:none}
.pbar i.go{animation:pbar 3.2s linear forwards!important}
@media (prefers-reduced-motion:reduce){.scene.s1{transform:none}.subs span{opacity:1;transform:none}.bars i{transform:none}}
.phone{z-index:0;isolation:isolate}.stage .float{z-index:3}
.coin{right:auto;left:52px}
.f3{left:-150px;bottom:120px}
@media (max-width:900px){.stage{display:flex;justify-content:center}.phone{width:300px!important;height:600px!important;transform:scale(.8);transform-origin:top center;margin:10px 0 -120px!important}}

/* ===== счётчик «GRIZZLI в цифрах» (включается STATS_ON в build_site.py) ===== */
.live-box{position:relative;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(124,92,255,.10),transparent 60%),var(--panel);padding:28px 32px}
.live-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.live-top .eyebrow{display:flex;align-items:center;gap:10px}.live-top span{color:var(--muted);font-size:13px}
.dot{width:9px;height:9px;border-radius:50%;background:#7be3a6;animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(123,227,166,.6)}70%,100%{box-shadow:0 0 0 10px rgba(123,227,166,0)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.st{padding:6px 24px;border-left:1px solid var(--line)}.st:first-child{border-left:0;padding-left:0}
.st b{display:block;font:700 40px "JetBrains Mono";letter-spacing:-.04em;background:linear-gradient(180deg,#fff,#b9a6ff);-webkit-background-clip:text;color:transparent}
.st b.ok{background:linear-gradient(180deg,#d9ffe9,#7be3a6);-webkit-background-clip:text}
.st small{color:var(--muted);font-size:14px}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr;row-gap:22px}.st{border-left:0;padding:0}.st b{font-size:30px}}
.stats{grid-template-columns:repeat(var(--n,4),1fr)}
.st[hidden],.live[hidden]{display:none!important}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.cards[style]{grid-template-columns:1fr!important}}

/* ===== цветные иконки: у каждой свой цвет + мягкая заливка ===== */
.ico{color:var(--ic,var(--acc2))}
.i-eye,.i-grid,.i-play,.i-plus,.i-swap{--ic:#a78bff}
.i-checks,.i-link,.i-compass,.i-list{--ic:#60a5fa}
.i-scale,.i-gift,.i-lock,.i-sparkle{--ic:#fbbf24}
.i-wallet,.i-dollar,.i-card{--ic:#4ade80}
.i-users,.i-user,.i-megaphone,.i-heart{--ic:#f472b6}
.i-file{--ic:#93c5fd}
.i-eye,.i-grid,.i-play,.i-plus,.i-wallet,.i-card,.i-lock,.i-users,.i-user,.i-megaphone,.i-heart,.i-gift,.i-file,.i-compass{fill:color-mix(in srgb,currentColor 18%,transparent)}
.step>svg,.cmpc-i svg{background:color-mix(in srgb,var(--ic,#7c5cff) 14%,transparent)!important;color:var(--ic,var(--acc2))!important}
.mini>svg.ico{width:40px;height:40px;padding:9px;border-radius:12px;box-sizing:border-box;background:color-mix(in srgb,var(--ic,#7c5cff) 12%,transparent)}
.mini>svg.i-shield{background:rgba(74,222,128,.12)}
.side li svg.ico{color:var(--ic,var(--acc2))!important}
html[data-theme=light] .i-scale,html[data-theme=light] .i-gift,html[data-theme=light] .i-lock,html[data-theme=light] .i-sparkle{--ic:#d97706}
html[data-theme=light] .i-wallet,html[data-theme=light] .i-dollar,html[data-theme=light] .i-card{--ic:#16a34a}

/* ======================= ПРЕМИУМ-СЛОЙ ======================= */
/* 1. появление блоков при прокрутке (классы ставит site.js) */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.rv.in{opacity:1;transform:none}

/* 2. подсветка за курсором на карточках */
.spot{position:relative}
.spot>.glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(139,108,255,.16),transparent 60%)}
.spot:hover>.glow{opacity:1}
.spot:hover{border-color:rgba(167,139,255,.45)!important}
html[data-theme=light] .spot>.glow{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(106,75,255,.10),transparent 60%)}

/* 3. бегущая строка ниш */
.mq{padding:46px 0 50px;overflow:hidden;border-top:1px solid rgba(255,255,255,.05)}
.mq-h{margin-bottom:26px}
.mq{position:relative}.mq-row{display:flex;overflow:hidden;position:relative}
.mq:before,.mq:after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
.mq:before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}.mq:after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.mq-row+.mq-row{margin-top:12px}
.mq-track{display:flex;gap:12px;flex:none;padding-right:12px;animation:mq 42s linear infinite;will-change:transform;backface-visibility:hidden}
.mq-row.rev .mq-track{animation-direction:reverse;animation-duration:50s}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mq-i{flex:none;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:99px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),var(--panel);font:700 16px Manrope;letter-spacing:-.02em;color:var(--soft);white-space:nowrap}
.mq-i i{width:8px;height:8px;border-radius:50%}

/* 4. плавающие значки вокруг телефона */
.fly{position:absolute;z-index:2;display:grid;place-items:center;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));
  transform:translate(var(--px,0),var(--py,0));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.fly>svg,.fly.coin3d{animation:bob 5s ease-in-out infinite}
.fy1{left:-30px;top:-10px}.fy1>svg{transform:rotate(-12deg)}
.fy2{right:-10px;top:40px}.fy2>svg{animation-delay:-1.5s}
.fy3{left:-40px;bottom:40px}.fy3>svg{animation-delay:-3s}
.coin3d{width:44px;height:44px;border-radius:50%;font:800 21px Manrope;color:#5a3d00;background:radial-gradient(circle at 35% 30%,#fff3b0,#f5b70a 60%,#c98a00);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.6)}
.coin3d.sm{width:30px;height:30px;font-size:14px}
.fy4{right:-26px;bottom:150px;animation-delay:-2s}.fy5{right:40px;top:-24px;animation-delay:-4s}
@keyframes bob{50%{translate:0 -12px;rotate:4deg}}

/* 5. световые линии между блоками */
section.s{position:relative;border-top-color:transparent}
section.s:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(167,139,255,.08) 20%,rgba(167,139,255,.55) 50%,rgba(167,139,255,.08) 80%,transparent)}
section.s:after{content:"";position:absolute;left:50%;top:-40px;width:420px;height:80px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(124,92,255,.18),transparent)}

/* 6. кнопки-магниты с бликом */
.btn.mag{transition:transform .25s cubic-bezier(.2,.7,.2,1),filter .15s}

@media (max-width:900px){.fly{display:none}.mq-i{font-size:14px;padding:10px 16px}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}.mq-track,.fly>svg,.fly.coin3d,.final-card:before,.final-card .aur{animation:none!important}}

/* шаги: у каждого свой цвет значка */
.steps .step:nth-child(1)>svg{--ic:#a78bff}.steps .step:nth-child(2)>svg{--ic:#f472b6}
.steps .step:nth-child(3)>svg{--ic:#60a5fa}.steps .step:nth-child(4)>svg{--ic:#4ade80}
.step>svg{width:48px!important;height:48px!important;padding:11px!important;border-radius:15px!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 30%,transparent)}
.step>svg.ico{fill:color-mix(in srgb,var(--ic) 22%,transparent)}

/* кнопки: блик через фон, текст строго по центру */
.btn{justify-content:center;text-align:center}
.btn.p{background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%),linear-gradient(135deg,#8b6cff,#6a4bff);
  background-size:260% 100%,100% 100%;background-position:130% 0,0 0;background-repeat:no-repeat}
.btn.p:hover{animation:shine2 .9s ease}
@keyframes shine2{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}

/* финал: светящаяся карточка вместо мутного фона */
.final{padding:90px 0;border-top:0}.final:before{display:none!important}
.final-card{position:relative;isolation:isolate;overflow:hidden;border-radius:32px;padding:80px 40px;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,rgba(124,92,255,.35),transparent 60%),linear-gradient(180deg,#151026,#0d0b15);
  box-shadow:0 50px 120px -50px rgba(124,92,255,.9)}
.final-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),rgba(139,108,255,.9),rgba(240,198,255,.6),rgba(106,75,255,.2),rgba(59,123,255,.7),rgba(139,108,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 8s linear infinite}
.final-card .grid{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 30%,#000,transparent);mask-image:radial-gradient(60% 70% at 50% 30%,#000,transparent)}
.final-card .aur{position:absolute;z-index:-1;left:50%;top:-30%;width:70%;height:90%;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(139,108,255,.55),rgba(59,123,255,.18) 60%,transparent);animation:aur 9s ease-in-out infinite alternate}
@keyframes aur{to{transform:translateX(-46%) scale(1.15);opacity:.8}}
.final-card h2{font-size:64px;background:linear-gradient(180deg,#fff 35%,#c4b2ff);-webkit-background-clip:text;color:transparent}
html[data-theme=light] .final-card{background:radial-gradient(120% 90% at 50% 0%,rgba(124,92,255,.22),transparent 60%),#fff}
html[data-theme=light] .final-card h2{background:linear-gradient(180deg,#16121f 35%,#6a4bff);-webkit-background-clip:text}
html[data-theme=light] .final-card .grid{background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px)}
@media (max-width:900px){.final-card{padding:50px 20px;border-radius:24px}.final-card h2{font-size:36px}}

/* финал: соцсети, монетки и бегущий счётчик вокруг карточки */
.final-zone{position:relative}
.ff{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));animation:bob 5s ease-in-out infinite}
.ff1{left:-28px;top:-30px;rotate:-10deg}.ff2{right:-24px;top:40px;rotate:8deg;animation-delay:-1.6s}.ff3{left:-34px;bottom:30px;rotate:6deg;animation-delay:-3.2s}
.ff4{right:60px;top:-20px;animation-delay:-.8s}.ff5{left:90px;bottom:-18px;animation-delay:-2.4s}.ff6{right:-30px;bottom:70px;animation-delay:-4s}
.chip-g,.chip-v{padding:9px 14px;border-radius:99px;font:700 15px "JetBrains Mono";border:1px solid var(--line);backdrop-filter:none}
.chip-g{background:#123321;color:#7be3a6;border-color:rgba(123,227,166,.35)}
.chip-v{background:#1d1638;color:#c9b8ff;border-color:rgba(167,139,255,.4)}
.chip-v svg{width:16px;height:16px}
.rise{position:absolute;inset:0;pointer-events:none;z-index:1}
.rise i{position:absolute;bottom:-20px;opacity:0;animation:rise 6s linear infinite}
.rise i:nth-child(1){left:6%}.rise i:nth-child(2){left:18%;animation-delay:-1s}.rise i:nth-child(3){left:82%;animation-delay:-2s}
.rise i:nth-child(4){left:93%;animation-delay:-3s}.rise i:nth-child(5){left:30%;animation-delay:-4s}.rise i:nth-child(6){left:70%;animation-delay:-5s}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:.95}80%{opacity:.8}100%{transform:translateY(-480px) rotate(200deg);opacity:0}}
.final-card{z-index:2}
.vticker{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:10px 18px;border-radius:99px;background:rgba(0,0,0,.35);border:1px solid rgba(167,139,255,.35);color:#fff}
.vticker svg{width:18px;height:18px;color:#a78bff}
.vticker b{font-size:22px;min-width:8.5ch;text-align:right}.vticker span{color:var(--muted);font-size:14px}
html[data-theme=light] .vticker{background:#fff;color:var(--fg)}
@media (max-width:900px){.ff{display:none}.rise i:nth-child(n+4){display:none}.vticker b{font-size:18px}}
@media (prefers-reduced-motion:reduce){.ff,.rise i{animation:none!important}.rise{display:none}}
.rise{z-index:3;inset:-40px -110px}
.rise i:nth-child(1){left:2%}.rise i:nth-child(2){left:5%}.rise i:nth-child(3){left:auto;right:3%}
.rise i:nth-child(4){left:auto;right:6%}.rise i:nth-child(5){left:1%}.rise i:nth-child(6){left:auto;right:1%}
@media (max-width:1200px){.rise{display:none}}

/* ===== страница «О GRIZZLI» ===== */
.about-hero h1 em{font-style:normal;background:linear-gradient(90deg,#b49bff,#7c5cff);-webkit-background-clip:text;color:transparent}
.roles-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.role-c{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(124,92,255,.07),transparent 50%),var(--panel)}
.role-h{display:flex;align-items:center;gap:12px}.role-h h3{font-size:20px;line-height:1.2;margin:0}
.role-h svg{flex:none;width:44px;height:44px;padding:11px;border-radius:14px;box-sizing:border-box;background:color-mix(in srgb,var(--ic,#7c5cff) 14%,transparent)}
.role-c p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;flex:1}
.role-c .btn{align-self:flex-start}
.fr-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.fr-intro{position:sticky;top:110px}.fr-intro h2{font-size:42px;line-height:1.08;margin:12px 0 16px}
.fr-list{display:grid;gap:12px}
.fr-s{display:grid;grid-template-columns:auto auto 1fr;gap:16px;align-items:start;padding:20px 22px;border-radius:18px;border:1px solid var(--line);background:var(--panel)}
.fr-n{font-size:13px;color:var(--muted);padding-top:12px}
.fr-s>svg{width:44px;height:44px;padding:11px;border-radius:14px;box-sizing:border-box;background:color-mix(in srgb,var(--ic,#7c5cff) 14%,transparent)}
.fr-s h3{font-size:18px;margin:2px 0 6px}.fr-s p{margin:0;color:var(--muted);font-size:15px}
.fee-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center}.fee-wrap h2{font-size:42px;line-height:1.08;margin:12px 0 0}
.fees{border-radius:22px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.fee-r{display:flex;justify-content:space-between;align-items:center;padding:20px 26px;border-top:1px solid var(--line);font-size:16px;color:var(--soft)}
.fee-r:first-child{border-top:0}.fee-r b{font-size:22px}.fee-r b.ok{color:var(--ok)}
@media (max-width:900px){.roles-g,.fr-wrap,.fee-wrap{grid-template-columns:1fr}.fr-intro{position:static}.fr-intro h2,.fee-wrap h2{font-size:30px}.fr-s{grid-template-columns:auto 1fr}.fr-n{display:none}}
@media (min-width:901px) and (max-height:860px){.hero{padding:40px 0 50px}.hero h1{font-size:50px}.paths{margin-top:22px}}
@media (min-width:901px) and (max-width:1300px){.hero .wrap{grid-template-columns:1.25fr .75fr;gap:24px}.hero h1{font-size:48px}}
@media (min-width:901px){.hero .stage{align-self:start;margin-top:6px}}
@media (min-width:901px) and (max-height:700px){.hero{padding:26px 0 36px}.hero h1{font-size:44px;margin:10px 0 12px}.lead{font-size:17px}.paths{margin-top:16px}}

/* Telegram-канал и менеджер */
.tg-pill{display:inline-flex;align-items:center;gap:8px;margin:4px 0 14px;padding:8px 16px;border:1px solid var(--acc2);border-radius:999px;color:var(--fg);font-weight:600;font-size:14px;transition:border-color .2s,background .2s}
.tg-pill svg{color:var(--acc2)}.tg-pill:hover{background:color-mix(in srgb,var(--acc) 14%,transparent);border-color:var(--acc)}
.tg-sec{padding:10px 0 40px}
.tg-strip{display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.tg-ic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc2)}
.tg-ic svg{width:24px;height:24px}
.tg-tx{flex:1;min-width:0;display:grid;gap:4px}.tg-tx b{font-size:19px;line-height:1.3;color:var(--fg)}.tg-tx span{color:var(--muted);font-size:14px}
.tg-strip .btn{flex:none}
.mgr-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:14px;color:var(--acc2)}.mgr-link:hover{text-decoration:underline}
.mgr-link svg{width:15px;height:15px}
@media(max-width:640px){.tg-strip{flex-wrap:wrap;padding:18px}.tg-strip .btn{width:100%;justify-content:center}.tg-tx b{font-size:17px}}
.paths + .mgr-link{margin-top:14px}