/* ==========================================================================
   ai.ads, дизайн-система сайта (стиль Pitch, концепт /koncept-pitch/, 12.11.2026)
   Источник: /root/ИИ-таргетолог/web/ds/ds.css, на сайт кладётся в /var/www/aiads/css/ds.css.
   Подключают главная (web/landing/landing.html) и все страницы site_chrome.
   Только светлая тема: тёмные варианты владелец не принимает.
   Подписи без капса с разрядкой (правило «без ИИ-маркеров»).
   ========================================================================== */

/* ---------- шрифт Onest, вариативный 100–900, свои файлы ---------- */
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/onest-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/onest-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/onest-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/onest-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* запасной Arial подогнан под метрики Onest, чтобы текст не прыгал при подгрузке */
@font-face{font-family:'Onest Fallback';font-weight:100 550;src:local('Arial'),local('Helvetica Neue'),local('Roboto'),local('Liberation Sans');size-adjust:102%;ascent-override:95.1%;descent-override:29.9%;line-gap-override:0%}
/* жирные начертания подгоняем под Arial Bold: ширина Onest 600–800 почти как у него (замер 13.11), иначе при подгрузке шрифта заголовки перескакивали */
@font-face{font-family:'Onest Fallback';font-weight:551 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Neue Bold'),local('Roboto Bold'),local('Liberation Sans Bold'),local('Arial');size-adjust:100.5%;ascent-override:96.5%;descent-override:30.3%;line-gap-override:0%}

/* ---------- токены ---------- */
:root{
  color-scheme:light;
  --violet:#5318EB;
  --violet-h:#6630F0;
  --deep:#280F61;
  --night:#1A0947;
  --ink:#0C021C;
  --c-ink:#0C021C; /* тёмный текст, который не перекрашивается в тёмных секциях */
  --ink-2:#3B3150;
  --muted:#6E6585;
  --lav:#DFD4FB;
  --lav-2:#EFE9FD;
  --lav-3:#F7F4FE;
  --lav-line:#C6A5FF;
  --lime:#C4EE87;
  --lime-hi:#D3F5A2;
  --white:#FFFFFF;
  --gut:clamp(16px,3vw,40px);
  --max:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --font:'Onest','Onest Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
  --r-xl:40px;--r-lg:32px;--r-md:24px;--r-sm:18px;--r-xs:12px;

  /* старые имена переменных: на них опираются шаблоны страниц */
  --bg:#F7F4FE;
  --hi:#FFFFFF;
  --lo:#D9CFF7;
  --card:#FFFFFF;
  --bd:#E6DDFB;
  --shadow:0 1px 2px rgba(40,15,97,.04),0 12px 32px -20px rgba(40,15,97,.28);
  --field:#F7F4FE;
  --fbd:#E0D6FA;
  --sel:#EFE9FD;
  --ghost:#FFFFFF;
  --dim:#4A4060;
  --hint:#857C9C;
  --accent:#5318EB;
  --accent2:#7B4DF3;
  --ok:#2E8B57;
  --warn:#C9741F;
  --bad:#D2433A;
  --ok-bg:#E6F7D2;
  --warn-bg:#FCEEDC;
  --line:rgba(83,24,235,.12);
  --btnshadow:rgba(83,24,235,.28);
  --ring:0 0 0 3px rgba(83,24,235,.2);
  --r-in:14px;
  /* градиенты: однотонных заливок на сайте нет (правило владельца 12.11.2026) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --g-page:radial-gradient(1100px 520px at 8% 0%,rgba(198,165,255,.20),rgba(198,165,255,0) 62%),radial-gradient(900px 520px at 100% 100%,rgba(196,238,135,.10),rgba(196,238,135,0) 62%),linear-gradient(180deg,#F9F6FF 0%,#F3EEFE 100%);
  --g-white:radial-gradient(900px 460px at 88% 0%,rgba(223,212,251,.42),rgba(223,212,251,0) 62%),radial-gradient(700px 420px at 0% 100%,rgba(198,165,255,.12),rgba(198,165,255,0) 62%),linear-gradient(180deg,#FFFFFF 0%,#FBF9FF 100%);
  --g-violet:radial-gradient(60% 80% at 88% 0%,rgba(198,165,255,.55) 0%,rgba(198,165,255,0) 62%),radial-gradient(55% 70% at 0% 100%,rgba(30,8,80,.45) 0%,rgba(30,8,80,0) 62%),linear-gradient(135deg,#6026F3 0%,#5318EB 46%,#4510D2 100%);
  --g-deep:radial-gradient(60% 70% at 92% 0%,rgba(122,82,220,.42) 0%,rgba(122,82,220,0) 62%),radial-gradient(55% 60% at 0% 100%,rgba(83,24,235,.32) 0%,rgba(83,24,235,0) 62%),linear-gradient(160deg,#2F1173 0%,#280F61 48%,#1B0946 100%);
  --g-hero:radial-gradient(40% 60% at 50% 0%,rgba(34,9,90,.9) 0%,rgba(34,9,90,0) 100%),radial-gradient(30% 50% at 0% 30%,rgba(146,112,222,.7) 0%,rgba(146,112,222,0) 100%),radial-gradient(34% 60% at 100% 70%,rgba(118,86,214,.6) 0%,rgba(118,86,214,0) 100%),linear-gradient(180deg,#25105E 0%,#2D1270 45%,#4A22A6 100%);
  --g-lav:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 55%),linear-gradient(160deg,#E7DDFE 0%,#D7C9FA 100%);
  --g-lav-2:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 55%),linear-gradient(160deg,#F4EFFE 0%,#E8DFFC 100%);
  --g-lav-3:linear-gradient(160deg,#FBF9FF 0%,#F2ECFE 100%);
  --g-card:linear-gradient(180deg,#FFFFFF 0%,#FBF9FF 100%);
  --g-lime:linear-gradient(180deg,#D7F7A8 0%,#C4EE87 52%,#B2E06B 100%);
  --g-lime-h:linear-gradient(180deg,#E0FAB8 0%,#CFF398 52%,#BDE77B 100%);
  --g-btn:linear-gradient(180deg,#6D35F5 0%,#5318EB 55%,#4511D6 100%);
  --g-btn-h:linear-gradient(180deg,#7A47F7 0%,#6127EF 55%,#4F18E0 100%);
  --g-glass:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 100%);
}

/* до прихода всех частей Onest (скрипт в шапке ставит .fonts-on) текст рисуется подогнанным запасным шрифтом, без JavaScript сразу Onest */
:root.js:not(.fonts-on){--font:'Onest Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}

/* ---------- основа ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:88px}
html,body{width:100%}
body{background:transparent;color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
body::before{content:none}
/* фон страницы рисует html: собственный фон body перекрыл бы подложки секций (они на z-index:-1) */
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
::selection{background:var(--lav);color:var(--ink)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* контейнер страницы: секции внутри, фон секций на всю ширину через ::before */
.page{width:100%;max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
section{position:relative;padding:clamp(64px,8vw,112px) 0}
section::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;background:var(--g-page)}
section.sec-white::before{background:var(--g-white)}
section.sec-lav::before{background:var(--g-lav-2)}

/* ---------- типографика ---------- */
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,84px);font-weight:800;line-height:.96;letter-spacing:-.045em}
h2{font-size:clamp(32px,4.6vw,60px);font-weight:800;line-height:1;letter-spacing:-.04em;max-width:960px}
h3{font-size:clamp(20px,1.9vw,26px);font-weight:700;line-height:1.15;letter-spacing:-.03em}
p{text-wrap:pretty}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--dim);max-width:640px;margin-top:22px}
.sub{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--dim);max-width:680px;margin-top:20px}
.sub a,.lead a{color:var(--violet);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:40px;background:var(--g-lav-2);color:var(--violet);box-shadow:inset 0 0 0 1px rgba(83,24,235,.08);font-size:14px;font-weight:600;letter-spacing:-.01em;text-transform:none;margin-bottom:20px}
.grad,h1 .grad{background:none;color:var(--violet);-webkit-text-fill-color:currentColor}
.small,small{font-size:14px;color:var(--hint)}
.cta-note{font-size:14px;color:var(--hint);margin-top:14px}

/* ---------- кнопки ----------
   На светлом фоне кнопка фиолетовая, на тёмном и фиолетовом лаймовая, как в концепте. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border:0;border-radius:8px;background:var(--g-btn);color:#fff;font:600 17px/1.15 var(--font);letter-spacing:-.02em;text-align:center;text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 32px -16px var(--btnshadow);transition:background .2s ease-out,transform .3s var(--spring),box-shadow .3s ease-out}
.btn::before{content:none}
/* блик пробегает по кнопке при наведении */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 70%);transform:translateX(-130%);transition:transform .9s var(--ease);pointer-events:none}
.btn:hover::after{transform:translateX(130%)}
.btn svg{flex-shrink:0}
.btn.big{min-height:62px;padding:0 34px;font-size:18px}
.btn.small{min-height:44px;padding:0 18px;font-size:15px;border-radius:6px}
.btn.ghost{background:var(--g-card);color:var(--violet);box-shadow:inset 0 0 0 1.5px var(--fbd)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--g-btn-h);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 36px -16px var(--btnshadow)}
  .btn.ghost:hover{background:var(--g-lav-2);box-shadow:inset 0 0 0 1.5px var(--lav-line)}
}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:3px solid var(--lav-line);outline-offset:3px}
.sec-dark .btn,.sec-blue .btn,.sec-deep .btn{background:var(--g-lime);color:var(--c-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 34px -16px rgba(196,238,135,.6)}
.sec-dark .btn.ghost,.sec-blue .btn.ghost,.sec-deep .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
@media (hover:hover) and (pointer:fine){
  .sec-dark .btn:hover,.sec-blue .btn:hover,.sec-deep .btn:hover{background:var(--g-lime-h)}
  .sec-dark .btn.ghost:hover,.sec-blue .btn.ghost:hover,.sec-deep .btn.ghost:hover{background:rgba(255,255,255,.1)}
}
.sec-dark .btn:focus-visible,.sec-blue .btn:focus-visible{outline-color:#fff}
.hero-cta,.final-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.sec-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:clamp(36px,4vw,56px)}

/* ---------- карточки и поля ---------- */
.out{background:var(--g-card);border:1px solid var(--bd);border-radius:var(--r-md);box-shadow:var(--shadow)}
.out-s{background:var(--g-card);border:1px solid var(--bd);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.in{background:var(--g-lav-3);border:1.5px solid var(--fbd);border-radius:var(--r-in)}
.hover-lift{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s ease-out}
@media (hover:hover) and (pointer:fine){
  .hover-lift:hover,a.out:hover,a.out-s:hover{transform:translateY(-4px);border-color:var(--lav-line);box-shadow:0 2px 4px rgba(40,15,97,.04),0 24px 48px -24px rgba(83,24,235,.38)}
}
a.out,a.out-s{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s ease-out}
.tag{display:inline-flex;align-items:center;align-self:flex-start;min-height:30px;padding:5px 12px;border-radius:40px;background:var(--g-lime);color:var(--c-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.tag.w{background:linear-gradient(180deg,#FDF2E3 0%,#F9E2C2 100%);color:#7A4310}

/* ---------- тёмные и фиолетовые секции ---------- */
.sec-dark{position:relative;color:#fff;--ink:#FFFFFF;--dim:rgba(255,255,255,.84);--hint:rgba(255,255,255,.64);--line:rgba(255,255,255,.18);--ghost:transparent;--fbd:rgba(255,255,255,.4)}
.sec-dark::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;background:var(--grain),var(--g-hero)}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .grad{color:var(--lav-line)}
.sec-dark .eyebrow{background:rgba(255,255,255,.12);color:#fff}
.sec-dark .lead,.sec-dark .sub{color:rgba(255,255,255,.9)}
.sec-dark .sub a,.sec-dark .lead a{color:#fff}

section.sec-blue,section.sec-deep{color:#fff;--ink:#FFFFFF;--dim:rgba(255,255,255,.86);--hint:rgba(255,255,255,.66);--line:rgba(255,255,255,.2)}
section.sec-blue::before{background:var(--grain),var(--g-violet)}
section.sec-deep::before{background:var(--grain),var(--g-deep)}
section.sec-blue h2,section.sec-blue h3,section.sec-deep h2,section.sec-deep h3{color:#fff}
section.sec-blue .sub,section.sec-deep .sub{color:rgba(255,255,255,.86)}
section.sec-blue .sub a,section.sec-deep .sub a{color:#fff}
section.sec-blue .eyebrow,section.sec-deep .eyebrow{background:rgba(255,255,255,.14);color:#fff}
section.sec-blue .grad,section.sec-deep .grad{color:var(--lime)}
/* карточки внутри фиолетовых секций остаются светлыми */
section.sec-blue .out,section.sec-blue .out-s,section.sec-blue .faq details,
section.sec-deep .out,section.sec-deep .out-s,section.sec-deep .faq details{--ink:#0C021C;--dim:#4A4060;--hint:#857C9C;--line:rgba(83,24,235,.12);color:var(--ink);border-color:transparent}
section.sec-blue .out h3,section.sec-blue .out-s h3,section.sec-deep .out h3,section.sec-deep .out-s h3{color:var(--ink)}
section.sec-blue .out .btn,section.sec-blue .out-s .btn,section.sec-deep .out .btn,section.sec-deep .out-s .btn{background:var(--violet);color:#fff}

/* ---------- шапка ---------- */
header.sec-dark{position:sticky;top:0;z-index:50;padding:calc(12px + env(safe-area-inset-top,0px)) 0 12px}
header.sec-dark::before{background:var(--grain),linear-gradient(180deg,#210A57 0%,#26105F 100%);transition:background-color .3s ease-out,opacity .3s ease-out}
header.sec-dark.scrolled::before{background:rgba(37,16,94,.86);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;color:#fff}
.logo{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;background:linear-gradient(135deg,#6A8BFF 0%,#5318EB 100%);border:0;box-shadow:0 8px 20px -10px rgba(83,24,235,.8)}
.logo svg{width:22px;height:22px}
.bn{font-size:21px;font-weight:700;letter-spacing:-.04em;line-height:1.05;color:#fff}
.bs{font-size:12.5px;color:rgba(255,255,255,.66);margin-top:2px;white-space:nowrap;letter-spacing:-.005em}
.nav{display:flex;gap:4px;margin:0 auto}
.nav a{position:relative;color:rgba(255,255,255,.88);font-size:15.5px;font-weight:500;white-space:nowrap;padding:9px 12px;border-radius:8px;transition:color .2s ease-out,background-color .2s ease-out}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.nav-dd{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--g-card);border:1px solid var(--bd);border-radius:20px;padding:8px;box-shadow:0 30px 60px -24px rgba(40,15,97,.45);z-index:60;--ink:#0C021C}
header .nav-dd a,.sec-dark .nav-dd a{display:block;padding:13px 16px;border-radius:12px;color:#0C021C!important;font-weight:500;font-size:16px}
.nav-dd a:hover,.nav-dd a[aria-current="page"]{background:var(--g-lav-2)}
.top-cta{position:relative;display:flex;gap:10px;align-items:center;flex-shrink:0}
.top-cta .btn{white-space:nowrap}
.lang-globe{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;background:rgba(255,255,255,.12);transition:background-color .2s ease-out}
.lang-globe:hover{background:rgba(255,255,255,.2)}
@media (min-width:1100px) and (max-width:1319px){.nav a{padding:9px 8px;font-size:14.5px}}
@media (max-width:1099px){.nav{display:none}.burger{display:flex}.top-cta:has(> .lg-stub:only-child){display:none}}
@media (max-width:479px){.bs{display:none}.bn{font-size:20px}.logo{width:36px;height:36px;border-radius:10px}}

/* ---------- первый экран внутренних страниц ---------- */
.hero-wrap{position:relative;padding:clamp(40px,6vw,88px) 0 clamp(72px,9vw,128px)}
.hero-wrap.sec-dark::after{content:"";position:absolute;left:50%;bottom:0;width:100vw;height:120px;transform:translateX(-50%);z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(247,244,254,0) 0%,rgba(247,244,254,.5) 60%,var(--bg) 100%)}
.hero-c{max-width:980px;margin:0 auto;text-align:center}
.hero-c h1{font-size:clamp(38px,6.2vw,80px);line-height:.96}
.hero-c .lead{margin:24px auto 0;max-width:660px}
.hero-c .hero-cta{justify-content:center;margin-top:30px}
.hero-c .cta-note{margin-top:16px}
.hero-c .rot-p{margin-top:12px;font-size:clamp(20px,3vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.hst{padding:18px 16px;border-radius:var(--r-sm);background:var(--g-glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);text-align:center}
.hst + .hst{border-left:0}
.hst-v{font-size:clamp(24px,3.6vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1}
.hst-l{font-size:14px;color:var(--hint);margin-top:8px;line-height:1.4}
@media (max-width:559px){.hero-stats{gap:8px}.hst{padding:14px 8px}.hst-v{font-size:22px}.hst-l{font-size:12px}}

/* ---------- сетки и типовые блоки ---------- */
.cards3{display:grid;gap:16px;margin-top:clamp(32px,4vw,48px)}
@media (min-width:760px){.cards3{grid-template-columns:repeat(3,1fr);gap:20px}}
.cards2{display:grid;gap:16px;margin-top:clamp(32px,4vw,48px)}
@media (min-width:760px){.cards2{grid-template-columns:repeat(2,1fr);gap:20px}}
.pain{padding:30px 28px}
.pain-ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--violet);margin-bottom:20px;background:var(--g-lav-2);border:0}
.pain h3{font-size:21px}
.pain p{font-size:16px;color:var(--dim);margin-top:10px;line-height:1.6}
.pain-tail{font-size:17px;color:var(--dim);margin-top:36px;max-width:680px;line-height:1.65}
.pain-tail b{color:var(--ink)}

.steps{display:grid;gap:16px;margin-top:clamp(36px,5vw,64px);counter-reset:step}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1020px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding:28px 24px 30px;counter-increment:step;border-radius:var(--r-md)}
.step:before{content:counter(step,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;margin-bottom:20px;font-size:16px;font-weight:700;color:var(--violet);background:var(--g-lav-2);border:0}
.step h3{font-size:20px}
.step p{font-size:15.5px;color:var(--dim);margin-top:10px;line-height:1.6}
.step .tag{margin-top:14px}

.ba{display:grid;gap:16px;margin-top:clamp(32px,4vw,48px)}
@media (min-width:760px){.ba{grid-template-columns:1fr 1fr;gap:20px}}
.ba-col{padding:30px 28px 24px}
.ba-t{font-size:16px;font-weight:700;letter-spacing:-.01em;text-transform:none;margin-bottom:14px}
.ba-bad{color:var(--bad)}
.ba-good{color:var(--ok)}
.ba-list{list-style:none;padding:0;margin:0}
.ba-list li{position:relative;padding:11px 0 11px 32px;font-size:16px;line-height:1.55;color:var(--dim);border-top:1px solid var(--line)}
.ba-list li:first-child{border-top:0}
.ba-list li::before{content:"";position:absolute;left:0;top:15px;width:20px;height:20px;border-radius:50%;background:linear-gradient(180deg,#FDECEA 0%,#F8D4D0 100%)}
.ba-list li::after{content:"";position:absolute;left:6px;top:21px;width:8px;height:8px;background:linear-gradient(45deg,transparent 42%,var(--bad) 42%,var(--bad) 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--bad) 42%,var(--bad) 58%,transparent 58%)}
.ba-list.ok li::before{background:linear-gradient(180deg,#EEFADF 0%,#DDF3C4 100%)}
.ba-list.ok li::after{left:6px;top:20px;width:8px;height:5px;background:none;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}

/* кейсы */
.case{overflow:hidden;padding:0;display:flex;flex-direction:column}
.case-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(140deg,var(--deep),var(--violet))}
.case-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.case:hover .case-ph img{transform:scale(1.04)}
.case-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,transparent 0%,rgba(12,2,28,.66) 100%);pointer-events:none}
.case-n{position:absolute;left:16px;right:16px;bottom:12px;z-index:1;color:#fff;font-weight:700;font-size:17px;letter-spacing:-.02em;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.case-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.case-l{font-size:14px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--hint)}
.case-row{display:flex;align-items:center;gap:10px}
.case-was,.case-now{flex:1;border-radius:14px;padding:11px 14px}
.case-was{background:var(--g-lav-3)}
.case-was span,.case-now span{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--hint)}
.case-was b{font-size:19px;color:var(--hint);text-decoration:line-through;text-decoration-thickness:1.5px}
.case-now{background:var(--g-lav-2)}
.case-now span{color:var(--violet)}
.case-now b{font-size:21px;color:var(--violet);letter-spacing:-.02em}
.case-arr{color:var(--violet);font-size:18px}
.case-drop{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--g-deep);color:#fff;border-radius:12px;padding:10px 14px}
.case-drop b{font-size:18px;color:var(--lime)}
.case-drop span{font-size:13px;letter-spacing:-.01em;text-transform:none;color:rgba(255,255,255,.72)}
.case-x{font-size:15px;color:var(--dim);line-height:1.55;margin:0}
.case-note{margin-top:24px;font-size:14px;color:var(--hint);max-width:640px}

/* ---------- вопросы ---------- */
.faq{margin-top:clamp(32px,4vw,52px);max-width:880px}
.faq details{background:var(--g-card);border:1px solid var(--bd);border-radius:20px;margin-bottom:12px;padding:0 26px;box-shadow:none;transition:border-color .3s ease-out,box-shadow .3s ease-out}
.faq details[open]{border-color:var(--lav-line);box-shadow:0 20px 44px -28px rgba(83,24,235,.4)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 0;font-size:clamp(17px,1.5vw,19px);font-weight:600;line-height:1.35;letter-spacing:-.02em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{margin-left:auto;flex-shrink:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--g-lav-2);color:var(--violet);transition:transform .4s var(--ease),background .3s ease-out,color .3s ease-out}
.faq details[open] summary .chev{transform:rotate(180deg);background:var(--g-btn);color:#fff}
.faq .ans{font-size:16.5px;color:var(--dim);line-height:1.7;padding:0 0 24px;max-width:720px}
.faq .ans b{color:var(--ink)}
.faq .ans a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- финальный призыв: фиолетовая карточка с полями ---------- */
section.final{text-align:center;padding:clamp(64px,7vw,104px) clamp(20px,5vw,72px);margin:clamp(40px,5vw,72px) 0}
section.final::before{left:0;width:100%;transform:none;border-radius:var(--r-xl);background:
  radial-gradient(60% 80% at 85% 0%,rgba(198,165,255,.55) 0%,rgba(198,165,255,0) 100%),
  radial-gradient(50% 70% at 0% 100%,rgba(40,15,97,.55) 0%,rgba(40,15,97,0) 100%),var(--grain),linear-gradient(135deg,#6026F3 0%,#5318EB 46%,#4510D2 100%)}
section.final h2{margin:0 auto;max-width:900px}
section.final .sub{margin:20px auto 0;max-width:720px}
.final-cta{justify-content:center;margin-top:34px}

/* ---------- хлебные крошки ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:14px;color:var(--hint);margin:0 0 20px}
.crumbs a{color:inherit;text-decoration:underline;text-decoration-color:rgba(133,124,156,.4);text-underline-offset:3px}
.crumbs a:hover{color:var(--violet);text-decoration-color:currentColor}
.sec-dark .crumbs{color:rgba(255,255,255,.7)}
.sec-dark .crumbs a{text-decoration-color:rgba(255,255,255,.35)}
.sec-dark .crumbs a:hover{color:#fff}

/* ---------- таблицы ---------- */
.tbl-wrap{margin-top:28px;overflow-x:auto;border-radius:var(--r-sm);border:1px solid var(--bd);background:var(--g-card);-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.tbl th,.tbl td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl thead tr{background:var(--g-lav-2)}
.tbl th{background:transparent;color:var(--ink);font-weight:700;font-size:15px;letter-spacing:-.01em}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{color:var(--ink)}

/* ---------- статьи ---------- */
.prose{max-width:760px;font-size:18px;line-height:1.72;color:var(--ink-2)}
.prose > * + *{margin-top:1.05em}
.prose h2{font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.035em;margin-top:1.8em;color:var(--ink)}
.prose h3{font-size:clamp(20px,2vw,24px);margin-top:1.6em;color:var(--ink)}
.prose a{color:var(--violet);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{padding-left:.3em}
.prose li + li{margin-top:.45em}
.prose ul li::marker{color:var(--violet)}
.prose ol li::marker{color:var(--violet);font-weight:700}
.prose blockquote{margin-left:0;padding:20px 24px;border-radius:var(--r-sm);background:var(--g-lav-2);color:var(--ink);border-left:4px solid var(--violet)}
.prose img{border-radius:var(--r-sm)}
.prose figure figcaption{margin-top:10px;font-size:14px;color:var(--hint)}
.prose b,.prose strong{color:var(--ink)}
.prose code{font-size:.9em;padding:.12em .4em;border-radius:6px;background:var(--g-lav-2)}
.toc{padding:22px 26px;border-radius:var(--r-sm);background:var(--g-lav-2);border:0}
.toc a{color:var(--ink-2)}
.toc a:hover{color:var(--violet)}

/* ---------- подвал ---------- */
footer{position:relative;padding:0 0 calc(28px + env(safe-area-inset-bottom,0px));margin-top:clamp(48px,6vw,96px);color:rgba(255,255,255,.72);font-size:14.5px}
footer::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;background:var(--grain),var(--g-deep)}
.f-word{position:relative;z-index:0;margin:0 calc(var(--gut)*-1);padding-top:clamp(28px,4vw,48px);font-weight:800;font-size:clamp(84px,24vw,360px);line-height:.78;letter-spacing:-.06em;text-align:center;white-space:nowrap;color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(198,165,255,.06) 70%,rgba(255,255,255,0) 100%);-webkit-background-clip:text;background-clip:text;user-select:none;pointer-events:none;overflow:hidden}
footer .f-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(28px,4vw,44px) 0 26px;border-bottom:1px solid rgba(255,255,255,.12)}
footer .f-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:22px;letter-spacing:-.04em}
footer .f-brand svg{width:22px;height:22px;color:var(--lime)}
footer .f-grid{display:grid;gap:28px 24px;padding:32px 0 8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:860px){footer .f-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
footer .f-col-t{font-size:16px;font-weight:700;letter-spacing:-.02em;text-transform:none;color:#fff;margin-bottom:12px}
footer .f-links a{display:block;padding:4px 0;line-height:1.45;color:rgba(255,255,255,.72);transition:color .2s ease-out}
footer .f-links a:hover{color:#fff}
footer .f-bottom{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
footer .f-note{max-width:720px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62);margin:0;padding:0;border:0}
footer .f-meta{font-size:13.5px;color:rgba(255,255,255,.62);white-space:nowrap}
footer .f-login{color:#fff;text-decoration:underline;text-underline-offset:3px}


/* ---------- плеер видеоотзывов (ds.js, video[data-vp]): одно касание запускает, одно ставит на паузу ---------- */
.vp{position:relative;border-radius:24px;overflow:hidden;background:#140632;isolation:isolate}
.vp video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#140632}
.vp-hit{position:absolute;inset:0;z-index:2;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.vp-hit:focus-visible{outline:3px solid var(--lime);outline-offset:-4px;border-radius:inherit}
.vp-play{position:absolute;left:50%;top:34%;z-index:3;width:19%;aspect-ratio:1;border-radius:50%;background:linear-gradient(180deg,#FFFFFF 0%,#F1ECFE 100%);box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none;transition:opacity .25s ease-out,transform .35s var(--spring),top .35s var(--ease)}
.vp-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--violet)}
.vp-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.65);animation:vpRing 2.4s ease-out infinite}
@keyframes vpRing{0%{opacity:.85;transform:scale(.86)}100%{opacity:0;transform:scale(1.35)}}
.vp.is-started .vp-play{top:50%}
.vp.is-started .vp-play::before{animation:none;opacity:0}
.vp.is-playing .vp-play{opacity:0;transform:translate(-50%,-50%) scale(.7)}
@media (hover:hover) and (pointer:fine){.vp:not(.is-playing):hover .vp-play{transform:translate(-50%,-50%) scale(1.08)}}
.vp-bar{position:absolute;left:14px;right:14px;bottom:10px;z-index:4;height:26px;cursor:pointer;touch-action:none;opacity:0;pointer-events:none;transition:opacity .3s ease-out}
.vp-bar::before{content:"";position:absolute;left:0;right:0;top:11px;height:4px;border-radius:4px;background:rgba(255,255,255,.32)}
.vp-bar i{position:absolute;left:0;right:0;top:11px;height:4px;border-radius:4px;background:var(--g-lime);transform-origin:left center;transform:scaleX(0)}
.vp-fs{position:absolute;right:12px;top:12px;z-index:4;width:40px;height:40px;border:0;border-radius:12px;background:linear-gradient(160deg,rgba(12,2,28,.55),rgba(12,2,28,.35));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease-out}
.vp-fs svg{width:18px;height:18px}
.vp.is-started .vp-bar,.vp.is-started .vp-fs{opacity:1;pointer-events:auto}
.vp-fs:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* ---------- эффекты (12.11.2026): живой фон, подсветка, наклон, умная шапка, переходы ---------- */
/* живой фон в фиолетовых и тёмных секциях: медленно плывут пятна света (слой 92vw, чтобы сдвиг ±3% не вылезал за экран) */
section.sec-blue::after,section.sec-deep::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:92vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(26% 40% at 18% 28%,rgba(198,165,255,.32) 0%,rgba(198,165,255,0) 70%),radial-gradient(22% 34% at 82% 72%,rgba(196,238,135,.10) 0%,rgba(196,238,135,0) 70%),radial-gradient(30% 40% at 60% 10%,rgba(122,82,220,.22) 0%,rgba(122,82,220,0) 70%);
  animation:aurora 20s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translateX(-50%) translate3d(-3%,0,0);opacity:.75}50%{opacity:1}100%{transform:translateX(-50%) translate3d(3%,0,0);opacity:.8}}
section.final::after{left:0;width:100%;transform:none;border-radius:var(--r-xl);clip-path:inset(0 round var(--r-xl));animation-name:auroraIn}
@keyframes auroraIn{0%{transform:translate3d(-2%,0,0);opacity:.75}100%{transform:translate3d(2%,0,0);opacity:1}}
/* подсветка под курсором на карточках (ds.js добавляет .spot и слой .spot-l) */
.spot{isolation:isolate}
.spot-l{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease-out;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(124,77,255,.16) 0%,rgba(124,77,255,0) 62%)}
.spot.spot-dk .spot-l{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 62%)}
.spot.spot-on .spot-l{opacity:1}
/* наклон за курсором */
[data-tilt]{transition:transform .5s var(--ease);will-change:transform}
/* умная шапка: прячется при прокрутке вниз, возвращается при прокрутке вверх */
header.sec-dark{transition:transform .38s var(--ease)}
header.sec-dark.hide{transform:translateY(-100%)}
/* плавный переход между страницами сайта */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){section.sec-blue::after,section.sec-deep::after{animation:none}header.sec-dark.hide{transform:none}}

/* ---------- появление при прокрутке (ds.js ставит .rv и .is-in; не .in, это класс полей ввода) ---------- */
.js .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:var(--rd,0s)}
.js .rv.is-in{opacity:1;transform:none}
/* полоса прогресса чтения статьи */
.read-pb{position:fixed;left:0;top:0;right:0;height:3px;z-index:70;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--violet),var(--lav-line) 70%,var(--lime));pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .rv{opacity:1;transform:none}
}
@media print{
  header.sec-dark{position:static}
  .js .rv{opacity:1;transform:none}
  .read-pb{display:none}
}