/* общий стиль внутренних страниц сайта (друзьям, блог, статья): токены, шапка, полоска «3 дня», заголовки, кнопки, подвал — как на лендинге */
:root{
  --bg:#000;--card:#131313;--card2:#0e0e0e;--chip:#1c1c1c;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);
  --g:#65ff65;--g2:#1afc1a;--gd:#058205;
  --t1:#fff;--t2:rgba(255,255,255,.69);--t3:rgba(255,255,255,.39);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,sans-serif;
  --inter:"Inter",var(--font);
  --ear:clamp(16px,12.7083vw,244px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
html{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%}
.wrap{max-width:1920px;margin:0 auto;padding:0 var(--ear)}
.num{font-variant-numeric:tabular-nums}
p,li,.lead{text-wrap:pretty}

/* полоска «3 дня бесплатно» */
.promo{position:relative;z-index:21;display:block;height:34px;
  background:radial-gradient(900px 120px at 50% -40px,#7dff7d,#1afc1a 55%,#11d611 100%);color:#000;font:500 14px/17px var(--font);letter-spacing:-.03em;white-space:nowrap}
.promo .pr-in{max-width:1440px;height:100%;margin:0 auto;padding:0 183px 0 130px;display:flex;align-items:center;justify-content:center;gap:28px}
.promo .pr-l{display:flex;align-items:center;gap:12px;min-width:0}
.promo .pr-l > span{color:rgba(0,0,0,.72);overflow:hidden;text-overflow:ellipsis}
.pr-fl{display:flex;margin-left:4px}
.pr-fl svg{width:16px;height:16px;border-radius:50%;margin-left:-4px;box-shadow:0 0 0 1.5px #1afc1a}
.pr-fl svg:first-child{margin-left:0}
.pr-chip{display:inline-block;padding:3px 10px;background:#000;color:#fff;font:600 13px/15px var(--inter);font-style:normal;letter-spacing:-.04em;transform:skewX(-14deg);border-radius:4px}
.promo em{display:flex;align-items:center;gap:6px;font-style:normal;font-weight:600}
.promo em svg{width:9px;height:9px;stroke:#000;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.promo:hover em svg{transform:translateX(3px)}
@media (max-width:1439px){.promo .pr-in{padding:0 12.7vw 0 9vw}}
@media (max-width:899px){.promo{font-size:13px}.promo .pr-in{padding:0 16px;gap:16px}.promo .pr-l > span:not(.pr-fl){display:none}}

/* шапка: кадр 1440, на 900–1920 масштабируется целиком (sub.js) */
.bar{max-width:1440px;height:96px;margin:0 auto;padding:0 130px;display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:7.5px;flex:none}
.logo img{display:block;margin:4px 0 0 -.5px}
.logo b{font:700 32px/39px var(--inter);letter-spacing:-.1em}
.links{display:flex;gap:32px;margin-left:96px}
.links a{font:500 16px/19px var(--inter);letter-spacing:-.06em;color:rgba(255,255,255,.32);transition:color .2s}
.links a:hover,.links a.on{color:rgba(255,255,255,.85)}
.cab{margin-left:auto;height:38px;padding:0 27px;border-radius:39px;background:#131313;display:flex;align-items:center;font:500 16px/19px var(--font);letter-spacing:-.03em;color:#fff;transition:background .2s ease}
.cab:hover{background:#1f1f1f}
@media (max-width:899px){.links{display:none}.bar{height:72px;padding:0 16px}.cab{padding:0 18px;font-size:15px}}

/* заголовки: серая первая часть, белая вторая */
.h1{margin:0;font:700 60px/52px var(--inter);letter-spacing:-.08em} /* как заголовок первого экрана главной */
.h1 span,.h2 span{color:rgba(255,255,255,.34)}
.h2{margin:0;font:700 60px/52px var(--inter);letter-spacing:-.08em}
.lead{margin:21px 0 0;max-width:447px;font:500 16px/19px var(--inter);letter-spacing:-.06em;color:#fff} /* как подзаголовок первого экрана главной */
@media (max-width:899px){.h1,.h2{font-size:46px;line-height:38px}}
section.blk{padding:130px 0 0}
@media (max-width:899px){section.blk{padding-top:90px}}

/* кнопки: белая главная и тёмная вторая, без свечения и подъёма */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px;border:0;border-radius:39px;cursor:pointer;white-space:nowrap;
  font:500 16px/19px var(--font);letter-spacing:-.03em;transition:background .2s ease,transform .15s ease}
.btn:active{transform:scale(.98)}
.btn-w{background:#fff;color:#000}
.btn-w:hover{background:#e9e9e9}
.btn-d{background:var(--chip);color:#fff}
.btn-d:hover{background:#262626}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}

/* вопросы: два столбца, плюс поворачивается в минус */
.faq{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.q{border-top:1px solid var(--line2)}
.q button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:24px 0;border:0;background:none;cursor:pointer;text-align:left;font:600 19px/24px var(--inter);letter-spacing:-.05em}
.q button i{position:relative;width:16px;height:16px;flex:none}
.q button i::before,.q button i::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;border-radius:2px;background:var(--t2);transition:transform .3s ease}
.q button i::after{transform:rotate(90deg)}
.q.open button i::after{transform:rotate(0)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
.q.open .a{grid-template-rows:1fr}
.q .a > div{overflow:hidden}
.q .a p{margin:0 0 24px;max-width:480px;font:400 16px/22px var(--font);letter-spacing:-.03em;color:var(--t2)}
@media (max-width:899px){.faq{grid-template-columns:1fr}.q button{font-size:17px;line-height:22px;padding:20px 0}}

/* подвал (собирает sub.js) */
.end{margin-top:110px;padding:64px 0 34px;background:#000;border-top:1px solid rgba(255,255,255,.08)}
.ft{display:grid;grid-template-columns:minmax(200px,1fr) auto;gap:56px}
.ft-l .logo{display:inline-flex;align-items:center;gap:6px}
.ft-l .logo img{width:19px;height:auto;margin-top:3px}
.ft-l .logo b{font:700 25px/1 var(--inter);letter-spacing:-.1em;color:#fff}
.ft-l p{margin:22px 0 0;max-width:260px;font:400 15px/23px var(--font);letter-spacing:-.02em;color:rgba(255,255,255,.55)}
.ft-cols{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:32px}
.ft-cols h5{margin:0 0 22px;font:600 15px/1.2 var(--font);letter-spacing:-.02em;color:#fff}
.ft-cols a{display:block;white-space:nowrap;margin-bottom:14px;font:400 15px/20px var(--font);letter-spacing:-.02em;color:rgba(255,255,255,.55);transition:color .2s}
.ft-cols a:hover{color:#fff}
.ft-b{display:flex;align-items:center;gap:26px;margin-top:56px;padding-top:30px;border-top:1px solid rgba(255,255,255,.08);font:400 14px/1 var(--font);letter-spacing:-.02em;color:rgba(255,255,255,.55)}
.ft-st{display:inline-flex;align-items:center;gap:9px}
.ft-st i{width:7px;height:7px;border-radius:50%;background:#1afc1a;box-shadow:0 0 0 3px rgba(26,252,26,.12)}
.ft-st.down i{background:#ff5a4d;box-shadow:0 0 0 3px rgba(255,90,77,.14)}
.ft-b .req{color:rgba(255,255,255,.35)}
.ft-soc{margin-left:auto;display:flex;gap:20px}
.ft-soc a{color:rgba(255,255,255,.55);transition:color .2s}
.ft-soc a:hover{color:#fff}
.ft-soc svg{display:block;width:19px;height:19px}
@media (max-width:1300px){.ft{grid-template-columns:minmax(0,1fr);gap:40px}.ft-l p{max-width:420px}}
@media (max-width:899px){.end{margin-top:80px;padding-top:48px}.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.ft-cols a{white-space:normal}.ft-b{flex-wrap:wrap;gap:16px 22px;margin-top:40px}.ft-soc{margin-left:0;width:100%}}

/* появление снизу вверх */
.up{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.up.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.up{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- блог: обложки и карточки (blog.html, post.html) ---------- */
/* обложка: тёмная плашка со свечением снизу, 3D-предмет по центру, его чёрный фон растворяется */
.cv{position:relative;aspect-ratio:16/11}
.cv::before{content:"";position:absolute;left:22%;right:22%;bottom:4%;height:44%;border-radius:50%;filter:blur(40px);pointer-events:none}
.cv-g::before{background:radial-gradient(closest-side,rgba(26,252,26,.2),transparent)}
.cv-w::before{background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent)}
.cv img{position:absolute;left:50%;top:50%;width:auto;height:78%;transform:translate(-50%,-50%);mix-blend-mode:lighten;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cv-wide img{height:auto;width:76%}
.cv-big{aspect-ratio:16/10}
.cat{display:inline-block;padding:3px 10px;border-radius:4px;background:#1c1c1c;color:#fff;font:600 13px/15px var(--inter);letter-spacing:-.04em;transform:skewX(-14deg)}
.card{display:flex;flex-direction:column}
.card:hover .cv img{transform:translate(-50%,-50%) scale(1.05)}
.card-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px;font:500 calc(14px * var(--k,1))/1.2 var(--inter);letter-spacing:-.04em;color:var(--t3)}
/* размеры текста карточек умножаются на --k: тот же масштаб, что у первого экрана главной (sub.js) */
.card b{margin-top:14px;font:700 calc(24px * var(--k,1))/1.08 var(--inter);letter-spacing:-.065em;transition:color .2s}
.card:hover b{color:rgba(255,255,255,.8)}
.card p{margin:12px 0 0;max-width:447px;font:500 calc(16px * var(--k,1))/calc(19px * var(--k,1)) var(--inter);letter-spacing:-.06em;color:#fff} /* как подзаголовок первого экрана главной */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards{grid-template-columns:1fr;gap:40px}.card b{font-size:24px}}
.card-m span{white-space:nowrap}