/* Quillon Quiz — стили (вынесены из inline <style>) */
[data-theme="dark"] {
  --qb:#5E6AD2;
  --qbd:#4F5BC0;
  --qbl:#7D88E8;
  --qbg:rgba(94,106,210,0.28);
  --qbs:rgba(94,106,210,0.10);
  --qbb:rgba(94,106,210,0.32);
  --qp:#5E6AD2;
  --bg0:#0B0C0F;
  --bg1:#121318;
  --bg2:#181A20;
  --bgh:#1F222B;
  --brd:rgba(255,255,255,0.07);
  --brdb:rgba(94,106,210,0.4);
  --brdl:rgba(255,255,255,0.13);
  --t1:#F4F5F7;
  --t2:#9A9DA8;
  --t3:#5A5D68;
  --tb:#9DA6F0;
  --ok:#3FB97F;
  --err:#E5564B;
  --shd:0 1px 0 rgba(255,255,255,0.03) inset,0 8px 32px rgba(0,0,0,0.5);
  --glow:rgba(94,106,210,0.14);
}
[data-theme="light"] {
  --qb:#5E6AD2;
  --qbd:#4F5BC0;
  --qbl:#5E6AD2;
  --qbg:rgba(94,106,210,0.20);
  --qbs:rgba(94,106,210,0.08);
  --qbb:rgba(94,106,210,0.28);
  --qp:#5E6AD2;
  --bg0:#FBFBFC;
  --bg1:#FFFFFF;
  --bg2:#F5F6F8;
  --bgh:#EDEEF2;
  --brd:rgba(15,17,24,0.09);
  --brdb:rgba(94,106,210,0.38);
  --brdl:rgba(15,17,24,0.14);
  --t1:#15171C;
  --t2:#5A5D68;
  --t3:#9A9DA8;
  --tb:#4F5BC0;
  --ok:#2E9E66;
  --err:#D4453B;
  --shd:0 1px 0 rgba(15,17,24,0.02) inset,0 8px 32px rgba(15,17,24,0.08);
  --glow:rgba(94,106,210,0.08);
}
:root {
  --fd:'Inter',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
  --fm:'Geist Mono','JetBrains Mono',monospace;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --spring:cubic-bezier(0.34,1.2,0.64,1);
}
*,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html {
  scroll-behavior:smooth;
}
body {
  font-family:var(--fb);
  background:var(--bg0);
  color:var(--t1);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* NAV */ .nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:60px;
  z-index:100;
  display:flex;
  align-items:center;
  padding:0 clamp(16px,4vw,48px);
  background:rgba(8,11,20,.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--brd);
}
[data-theme="light"] .nav {
  background:rgba(255,255,255,.88);
}
.nav-logo {
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.nav-logo img {
  display:block;
  height:30px;
  width:auto;
}
/* HERO */ .hero {
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:120px clamp(16px,4vw,48px) 80px;
  text-align:center;
  overflow:hidden;
}
.hero canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}
.hero-glow {
  position:absolute;
  top:-180px;
  left:50%;
  transform:translateX(-50%);
  width:900px;
  height:600px;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(ellipse,var(--glow) 0%,transparent 60%);
}
.hero-inner {
  position:relative;
  z-index:2;
  max-width:780px;
}
.hero-tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 18px;
  border-radius:9999px;
  background:var(--qbs);
  border:1px solid var(--qbb);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tb);
  margin-bottom:28px;
  opacity:0;
  animation:fu .7s var(--ease) .2s forwards;
}
.hero-tag .dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ok);
  animation:blink 2s infinite;
}
.hero h1 {
  font-family:var(--fd);
  font-weight:700;
  font-size:clamp(32px,5vw,56px);
  line-height:1.05;
  letter-spacing:-.03em;
  margin-bottom:24px;
  opacity:0;
  animation:fu .7s var(--ease) .4s forwards;
}
.hero h1 .grad {
  color:var(--qb);
}
.hero-sub {
  font-size:clamp(1rem,1.8vw,1.15rem);
  color:var(--t2);
  line-height:1.75;
  max-width:580px;
  margin:0 auto 36px;
  opacity:0;
  animation:fu .7s var(--ease) .6s forwards;
}
.hero-cta {
  opacity:0;
  animation:fu .7s var(--ease) .8s forwards;
}
.btn-big {
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:64px;
  padding:0 44px;
  border-radius:12px;
  border:none;
  background:var(--qb);
  color:#fff;
  font-family:var(--fb);
  font-weight:600;
  font-size:1.15rem;
  cursor:pointer;
  transition:background .2s var(--ease),box-shadow .2s var(--ease);
  box-shadow:0 0 0 1px var(--qbb),0 8px 24px -8px var(--qbg);
}
.btn-big:hover {
  background:var(--qbl);
  box-shadow:0 0 0 4px var(--qbs),0 8px 24px -6px var(--qbg);
}
.btn-big:active {
  transform:translateY(1px);
}
.hero-hint {
  font-size:.75rem;
  color:var(--t3);
  margin-top:14px;
  opacity:0;
  animation:fu .7s var(--ease) 1s forwards;
}
/* POPUP BACKDROP — квиз как модальное окно */ body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,var(--qbs) 0%,transparent 55%),var(--bg0);
}
/* EMBED — квиз внутри iframe-модалки сайта: своя шапка не нужна */ .q-embed .nav {
  display:none;
}
.q-embed .ftr {
  display:none;
}
/* В iframe-модалке внешняя попап-рамка уже есть — снимаем внутреннюю карточку и фоновый backdrop, квиз заполняет фрейм плоско */ .q-embed body::before {
  display:none;
}
.q-embed body {
  background:var(--bg0);
}
.q-embed .quiz {
  min-height:100vh;
  padding:40px clamp(16px,4vw,40px);
}
.q-embed .qbox {
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  max-width:560px;
}
.q-embed .anl {
  padding:40px 24px;
}
.q-embed .res {
  padding:40px clamp(16px,4vw,40px);
}
/* Полная страница ревью (top-переход из модалки): только результат, просторно, сайт-nav виден. Вопросы/анализ не мелькают. */ .q-result .quiz,.q-result .anl,.q-result .hero {
  display:none!important;
}
/* result-страница: чистый v4-чёрный, без бирюзового радиала */ .q-result body {
  background:#08090A;
}
.q-result body::before {
  display:none;
}
.q-result .ftr {
  display:none;
}
.q-result .res {
  display:block;
  min-height:0;
  padding-top:clamp(104px,12vw,148px);
}
.q-result .res.on {
  display:block;
}
html.q-result,html.q-result body {
  min-height:0;
  height:auto;
}
/* QUIZ */ .quiz {
  min-height:100vh;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:96px clamp(16px,4vw,48px) 48px;
  position:relative;
  z-index:1;
}
.quiz.on {
  display:flex;
}
.qbox {
  width:100%;
  max-width:600px;
  background:var(--bg1);
  border:1px solid var(--brd);
  border-radius:20px;
  padding:clamp(24px,4vw,40px);
  box-shadow:var(--shd);
}
.qprog {
  margin-bottom:36px;
}
.qpm {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:.8rem;
  color:var(--t2);
  font-family:var(--fm);
}
.qphase {
  color:var(--tb);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.72rem;
}
.qdots {
  display:flex;
  gap:5px;
  margin-bottom:10px;
}
.qdot {
  flex:1;
  height:5px;
  border-radius:9999px;
  background:var(--brdl);
  transition:background .3s var(--ease);
}
.qdot.done {
  background:var(--qb);
}
.qdot.now {
  background:var(--qbl);
  animation:qdotpulse 1.6s var(--ease) infinite;
}
@keyframes qdotpulse {
  0%,100% {
    opacity:1;
  }
  50% {
    opacity:.45;
  }
}
@media(prefers-reduced-motion:reduce) {
  .qdot.now {
    animation:none;
  }
}
.qhint {
  margin-top:10px;
  font-size:.78rem;
  color:var(--t3);
  text-align:center;
  min-height:1em;
  transition:opacity .3s;
}
.qpt {
  height:4px;
  background:var(--brdl);
  border-radius:9999px;
}
.qpf {
  height:100%;
  border-radius:9999px;
  background:linear-gradient(90deg,var(--qb),var(--qbl));
  transition:width .4s var(--ease);
  position:relative;
}
.qpf::after {
  content:'';
  position:absolute;
  right:-2px;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--qbl);
  box-shadow:0 0 8px var(--qbl);
}
.qfb {
  max-width:540px;
  margin:18px auto 0;
  min-height:38px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.qfb.show {
  opacity:1;
  transform:none;
}
.qfb-line {
  display:block;
  padding-left:14px;
  border-left:2px solid var(--qb);
  color:var(--t2);
  font-size:.92rem;
  line-height:1.5;
  text-align:left;
}
.qfb-go {
  display:block;
  margin-top:6px;
  padding-left:14px;
  font-family:var(--fm);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--t3);
}
@media(prefers-reduced-motion:reduce) {
  .qfb {
    transition:opacity .15s linear;
    transform:none;
  }
}
.qq {
  text-align:center;
  margin-bottom:32px;
  animation:fu .4s var(--ease);
}
.qq h2 {
  font-family:var(--fd);
  font-weight:700;
  font-size:clamp(1.25rem,3vw,1.55rem);
  line-height:1.3;
  margin-bottom:8px;
}
.qq p {
  font-size:.875rem;
  color:var(--t3);
}
.qg {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  max-width:540px;
  margin:0 auto;
}
.qg.c3 {
  grid-template-columns:repeat(3,1fr);
}
.qg.c1 {
  grid-template-columns:1fr;
  max-width:420px;
}
.qg.c2c {
  grid-template-columns:repeat(2,1fr);
  max-width:540px;
}
.qc {
  background:var(--bg2);
  border:1px solid var(--brd);
  border-radius:14px;
  padding:14px 16px;
  cursor:pointer;
  transition:border-color .25s,background .25s;
  user-select:none;
  text-align:center;
  overflow:visible;
}
.qc:hover {
  border-color:var(--brdb);
  background:var(--bgh);
}
@media(hover:none) {
  .qc:hover {
    border-color:var(--brd);
    background:var(--bg2);
  }
}
.qc.sel {
  border:2px solid var(--qb);
  background:var(--qbs);
  animation:qba .2s var(--spring);
}
.qsvg {
  display:block;
  width:1em;
  height:1em;
  flex-shrink:0;
}
.qc .qi {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  color:var(--tb);
  font-size:24px;
}
.qc.sel .qi {
  color:var(--qbl);
}
.di-ic {
  display:flex;
  align-items:center;
  color:var(--tb);
  font-size:20px;
  flex-shrink:0;
}
.stl {
  display:flex;
  align-items:center;
  gap:9px;
}
.stl-ic {
  width:19px;
  height:19px;
  flex-shrink:0;
  color:var(--qb);
}
.stl.blue .stl-ic {
  color:var(--tb);
}
.qc .qt {
  font-size:.85rem;
  font-weight:500;
  line-height:1.4;
}
.qc .psvg {
  width:100%;
  height:70px;
  margin-bottom:6px;
  border-radius:8px;
  overflow:hidden;
}
.qc .psvg svg {
  width:100%;
  height:100%;
}
.qc .mscr {
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:9/14;
  background:var(--bg1);
  margin-bottom:6px;
}
.qc .mscr svg {
  width:100%;
  height:100%;
}
.qc .mlbl {
  font-family:var(--fm);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tb);
  margin-bottom:4px;
}
/* City other input */ .co-wrap {
  max-width:420px;
  margin:10px auto 0;
  display:none;
}
.co-wrap.vis {
  display:block;
}
.co-in {
  width:100%;
  height:48px;
  padding:0 16px;
  background:var(--bg1);
  border:1px solid var(--brdl);
  border-radius:10px;
  color:var(--t1);
  font-family:var(--fb);
  font-size:1rem;
  outline:none;
  text-align:center;
}
.co-in:focus {
  border-color:var(--qb);
  box-shadow:0 0 0 3px var(--qbs);
}
.co-in::placeholder {
  color:var(--t3);
}
.rmt {
  max-width:420px;
  margin:18px auto 0;
  text-align:center;
}
.rmt-q {
  display:block;
  font-size:.85rem;
  color:var(--t2);
  margin-bottom:10px;
}
.rmt-opts {
  display:flex;
  gap:8px;
  justify-content:center;
}
.rmt-b {
  flex:1;
  max-width:130px;
  height:42px;
  border-radius:10px;
  border:1px solid var(--brdl);
  background:var(--bg1);
  color:var(--t2);
  font-family:var(--fb);
  font-size:.9rem;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.rmt-b:hover {
  border-color:var(--brdb);
  color:var(--t1);
}
.rmt-b.on {
  border-color:var(--qb);
  background:var(--qbs);
  color:var(--tb);
}
.sal-note {
  margin-top:10px;
  font-size:.78rem;
  color:var(--t3);
  font-family:var(--fm);
}
/* Maze */ .mzw {
  width:100%;
  max-width:540px;
  margin:0 auto;
  position:relative;
  aspect-ratio:16/9;
  background:var(--bg2);
  border:1px solid var(--brdl);
  border-radius:16px;
  overflow:hidden;
  cursor:crosshair;
  touch-action:none;
}
.mzw canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.mzh {
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  font-size:.75rem;
  color:var(--t3);
  pointer-events:none;
  background:rgba(8,11,20,.7);
  padding:4px 14px;
  border-radius:99px;
  transition:opacity .3s;
}
[data-theme="light"] .mzh {
  background:rgba(255,255,255,.85);
  color:var(--t1);
}
.mzw.dr .mzh {
  opacity:0;
}
/* Drag */ .dl {
  max-width:400px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.di {
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  background:var(--bg2);
  border:1px solid var(--brd);
  border-radius:12px;
  cursor:grab;
  user-select:none;
}
.di:hover {
  border-color:var(--brdb);
  background:var(--bgh);
}
.di.dg {
  opacity:.5;
}
.dh {
  color:var(--t3);
  font-size:1.2rem;
}
.dn {
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--qbs);
  color:var(--tb);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--fm);
  font-size:.75rem;
  font-weight:600;
  flex-shrink:0;
}
.dt {
  font-size:.875rem;
  font-weight:500;
}
.qnav {
  display:none;
  gap:12px;
  justify-content:center;
}
.qnav.on {
  display:flex;
  margin-top:24px;
  padding:20px 0 max(8px,env(safe-area-inset-bottom));
  border-top:1px solid var(--brd);
}
.qnav.on .qbtn {
  flex:1;
  max-width:240px;
}
.qbtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:52px;
  padding:0 32px;
  border-radius:12px;
  border:none;
  font-family:var(--fb);
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  transition:all .25s var(--ease);
}
.qbp {
  background:var(--qb);
  color:#fff;
  box-shadow:0 0 0 1px var(--qbb);
}
.qbp:hover {
  background:var(--qbl);
  box-shadow:0 0 0 4px var(--qbs);
}
.qbp:active {
  transform:translateY(1px);
}
.qbp:disabled {
  opacity:.4;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.qbs2 {
  background:transparent;
  color:var(--t2);
  border:1px solid var(--brdl);
}
/* ANALYSIS */ .anl {
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:80px 24px;
  text-align:center;
  position:relative;
  z-index:1;
}
.anl.on {
  display:flex;
}
.anl-p {
  width:80px;
  height:80px;
  border-radius:50%;
  position:relative;
  margin-bottom:32px;
}
.anl-p::before,.anl-p::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--qb);
}
.anl-p::before {
  animation:pr 1.5s ease-out infinite;
}
.anl-p::after {
  animation:pr 1.5s ease-out .5s infinite;
}
.anl-p .core {
  position:absolute;
  inset:20px;
  border-radius:50%;
  background:var(--qb);
  animation:pd 1.5s ease-in-out infinite;
}
.anl h3 {
  font-family:var(--fd);
  font-size:1.3rem;
  font-weight:700;
}
.anl p {
  font-size:.875rem;
  color:var(--t3);
  margin-top:8px;
  font-family:var(--fm);
}
/* ═══ RESULT — v4 editorial (hairline-секции, mono-нумерация) ═══ */ .res {
  display:none;
  padding:0 clamp(16px,5vw,40px) 80px;
  position:relative;
  z-index:1;
}
.res.on {
  display:block;
}
.rcon {
  width:100%;
  max-width:720px;
  margin:0 auto;
}
/* Секция = hairline-разделитель, без боксов */ .rsec {
  padding:clamp(48px,7vw,84px) 0;
  border-top:1px solid var(--brd);
}
.rsec:first-child {
  border-top:0;
}
.rsec.d1 {
  animation:fu .5s var(--ease) .04s both;
}
.rsec.d2 {
  animation:fu .5s var(--ease) .08s both;
}
.rsec.d3 {
  animation:fu .5s var(--ease) .12s both;
}
.rsec.d4 {
  animation:fu .5s var(--ease) .16s both;
}
.rsec.d5 {
  animation:fu .5s var(--ease) .20s both;
}
/* ── Depth-ритм (styleguide §01 surface-scale, border-first, БЕЗ
   мульти-цвета). Fullbleed-полоса bg-1 #0D0E10 — не «бокс»,
   тот же 100vw-прорыв, что у hero-арта (без клипа). ── */
.rsec--band,
.rsec--break {
  position:relative;
}
.rsec--band>*,
.rsec--break>* {
  position:relative;
  z-index:1;
}
.rsec--band::before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:0;
  background:#0D0E10;
  pointer-events:none;
}
/* ── Rhythm-break (quillon-design §4: «большой стат-блок» после
   нескольких одинаковых секций). Приподнятая поверхность bg-2
   #121316 + двойной hairline + крупнее число. Моноколор. ── */
.rsec--break {
  padding-top:clamp(60px,8.5vw,104px);
  padding-bottom:clamp(60px,8.5vw,104px);
}
.rsec--break::before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:0;
  background:#121316;
  border-top:1px solid var(--brd);
  border-bottom:1px solid var(--brd);
  pointer-events:none;
}
.rsec--break .rsal {
  font-size:clamp(3rem,9.5vw,5.2rem);
}
/* mono-нумерованный eyebrow */ .rsec-eb {
  font-family:var(--fm);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--t3);
  margin-bottom:20px;
}
.rsec-eb em {
  font-style:normal;
  color:var(--qb);
}
.rsub-eb {
  font-family:var(--fm);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--t3);
  margin-bottom:12px;
}
/* display-заголовок секции */ .rsec-h {
  font-family:var(--fd);
  font-weight:600;
  font-size:clamp(1.55rem,4.2vw,2.4rem);
  letter-spacing:-.025em;
  line-height:1.12;
  color:var(--t1);
  max-width:18ch;
}
.rsec-sub {
  margin-top:16px;
  max-width:56ch;
  font-size:.98rem;
  color:var(--t2);
  line-height:1.6;
}
.rsec .bv {
  margin-top:28px;
}
/* gate: eyebrow/headline ЧЁТКИЕ, тело размыто + lock-плашка */ .bv {
  transition:filter .56s var(--ease),opacity .56s var(--ease);
}
.rsec.lk {
  position:relative;
}
.rsec.lk .bv {
  filter:blur(9px) saturate(.6);
  opacity:.45;
  pointer-events:none;
  user-select:none;
}
.rsec.lk::after {
  content:'ОТКРОЕТСЯ ПОСЛЕ ЗАПОЛНЕНИЯ ↑';
  position:absolute;
  left:0;
  right:0;
  bottom:clamp(48px,7vw,84px);
  text-align:center;
  font-family:var(--fm);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--t3);
  pointer-events:none;
}
.rsec--hero.lk::after {
  display:none;
}
@media(prefers-reduced-motion:reduce) {
  .bv {
    transition:none;
  }
}
/* HERO — якорь + атмосферный арт. БЕЗ overflow:hidden:
   ::before прорывается на 100vw (полная ширина страницы),
   а по вертикали ограничен высотой hero (top/bottom:0) —
   арт обрезан сверху/снизу ровно по hero, по бокам не режется. */ .rsec--hero {
  position:relative;
  padding-top:clamp(36px,5vw,56px);
  padding-bottom:clamp(28px,4vw,40px);
}
/* Арт = рецепт главной. Высота = hero (top:0/bottom:0 → клип сверху
   и снизу по блоку). Ширина = 100vw, прорыв из центрированного
   контейнера. probe-colors прозрачен, screen-бленд с #08090A. */
.rsec--hero::before {
  content:'';
  position:absolute;
  top:calc(61px - clamp(104px,12vw,148px));
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none;
  opacity:.24;
  background:url(/v4/images/recolored/probe-colors.svg) no-repeat center center;
  background-size:cover;
  mix-blend-mode:screen;
}
.rsec--hero>* {
  position:relative;
  z-index:1;
}
.rsec-kick {
  font-family:var(--fm);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--t3);
  margin-bottom:18px;
}
.rhero-name {
  font-family:var(--fd);
  font-weight:600;
  font-size:clamp(2.2rem,6.5vw,3.6rem);
  letter-spacing:-.03em;
  line-height:1.02;
  color:var(--t1);
  margin:0;
}
.rhero-meta {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-top:32px;
  padding-top:22px;
  border-top:1px solid var(--brd);
}
.rhero-meta__lbl {
  font-size:.95rem;
  color:var(--t2);
  max-width:24ch;
}
.rhero-meta__pct {
  font-family:var(--fd);
  font-weight:600;
  font-size:clamp(2.4rem,5.5vw,3.4rem);
  letter-spacing:-.03em;
  line-height:1;
  color:var(--t1);
  flex-shrink:0;
}
/* Salary — big-number */ .rsal {
  font-family:var(--fd);
  font-weight:600;
  font-size:clamp(2.6rem,8vw,4.2rem);
  letter-spacing:-.04em;
  line-height:1;
  color:var(--t1);
}
.sal-note {
  margin-top:18px;
  font-family:var(--fm);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--t3);
}
/* Talent — 2-колоночный rail */ .rgrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,44px);
}
.rgrid__col.jb {
  border-left:1px solid var(--brd);
  padding-left:clamp(24px,4vw,44px);
}
@media(max-width:720px) {
  .rgrid {
    grid-template-columns:1fr;
    gap:28px;
  }
  .rgrid__col.jb {
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--brd);
    padding-top:24px;
  }
}
.tl-name {
  font-family:var(--fd);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:-.01em;
  margin-bottom:12px;
  color:var(--t1);
}
.tl-desc {
  font-size:.95rem;
  color:var(--t2);
  line-height:1.75;
}
.jb p {
  font-size:.95rem;
  color:var(--t2);
  line-height:1.75;
}
/* Why — нумерованный rail-list */ .wi {
  display:flex;
  gap:14px;
  align-items:flex-start;
  font-size:.98rem;
  color:var(--t2);
  line-height:1.6;
  padding:16px 0;
  border-top:1px solid var(--brd);
  counter-increment:wli;
}
.wi:first-child {
  border-top:0;
  padding-top:0;
}
.wi .ck {
  display:flex;
  flex-shrink:0;
}
.wi .ck svg {
  display:none;
}
.wi .ck::before {
  content:counter(wli,decimal-leading-zero);
  font-family:var(--fm);
  font-size:.78rem;
  font-weight:500;
  color:var(--qb);
  min-width:2.2rem;
}
#rW {
  counter-reset:wli;
}
/* Compat — rail-list (без pill-прогрессов) */ .cb {
  padding:20px 0;
  border-top:1px solid var(--brd);
}
.cb:first-child {
  border-top:0;
  padding-top:0;
}
.cb-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.cb-name {
  font-size:1rem;
  font-weight:500;
  color:var(--t2);
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}
.cb-badge {
  font-family:var(--fm);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--qb);
  flex-shrink:0;
}
.cb-pct {
  font-family:var(--fm);
  font-size:.92rem;
  font-weight:600;
  color:var(--t3);
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.cb-pct.top {
  color:var(--t1);
}
.cb-track {
  height:3px;
  border-radius:2px;
  background:var(--brd);
  overflow:hidden;
}
.cb-fill {
  height:3px;
  border-radius:2px;
  width:0;
  transition:width 1.1s var(--ease);
}
.cb-fill.top {
  background:var(--qb);
}
.cb-fill.oth {
  background:var(--bgh);
}
/* Roadmap — rail-list с маркером */ #rRM {
  border-left:1px solid var(--brd);
  padding-left:clamp(20px,3vw,28px);
}
.rm-ph {
  position:relative;
  padding:0 0 clamp(24px,3vw,32px);
}
.rm-ph:last-child {
  padding-bottom:0;
}
.rm-ph::before {
  content:'';
  position:absolute;
  left:calc(-1*clamp(20px,3vw,28px) - 2px);
  top:5px;
  width:5px;
  height:5px;
  background:var(--qb);
}
.rm-hd {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:8px;
}
.rm-wk {
  font-family:var(--fm);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--t3);
}
.rm-ti {
  font-family:var(--fd);
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--t1);
}
.rm-desc {
  font-size:.92rem;
  color:var(--t2);
  line-height:1.65;
  margin-bottom:10px;
}
.rm-tags {
  font-family:var(--fm);
  font-size:.72rem;
  color:var(--t3);
  line-height:1.7;
}
.rm-tag {
  display:inline;
}
.rm-tag:not(:last-child)::after {
  content:' · ';
  color:var(--t3);
}
/* Form — editorial (не бокс) */ .rform {
  margin-top:32px;
}
.rform--repeat {
  padding:clamp(48px,7vw,84px) 0 0;
  border-top:1px solid var(--brd);
  margin-top:0;
}
.rform--repeat .rsec-h {
  margin-bottom:28px;
}
.fr {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.fi {
  width:100%;
  height:52px;
  padding:0 16px;
  background:transparent;
  border:1px solid var(--brd);
  border-radius:8px;
  color:var(--t1);
  font-family:var(--fb);
  font-size:.95rem;
  outline:none;
  transition:border-color .15s;
}
.fi::placeholder {
  color:var(--t3);
}
.fi:focus {
  border-color:var(--qb);
}
.fi.err {
  border-color:var(--err);
}
.btn-sub {
  width:100%;
  height:56px;
  border-radius:8px;
  border:none;
  background:var(--qb);
  color:#fff;
  font-family:var(--fb);
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  transition:background .18s var(--ease),box-shadow .18s var(--ease);
  box-shadow:0 0 0 1px var(--qbb);
}
.btn-sub:hover {
  background:var(--qbl);
  box-shadow:0 0 0 4px var(--qbs);
}
.btn-sub:active {
  transform:translateY(1px);
}
.btn-sub:disabled {
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}
.fcon {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:16px;
  font-size:.8rem;
  color:var(--t3);
  line-height:1.5;
}
.fcon input {
  margin-top:2px;
  accent-color:var(--qb);
}
.fcon a {
  color:var(--tb);
}
.q-form-error {
  margin:0 0 14px;
  padding:11px 14px;
  border-radius:8px;
  background:color-mix(in srgb,var(--err) 10%,transparent);
  border:1px solid var(--err);
  color:var(--err);
  font-size:.84rem;
  line-height:1.5;
}
/* Video block — v4 */ .vbl {
  display:none;
  text-align:center;
  max-width:680px;
  margin:0 auto;
  padding:64px clamp(16px,4vw,40px);
  opacity:0;
  animation:fu .55s var(--ease) forwards;
}
.vbl.on {
  display:block;
}
.vbl .vi {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border:1px solid var(--brd);
  border-radius:14px;
  color:var(--qb);
  margin-bottom:18px;
}
.vbl h2 {
  font-family:var(--fd);
  font-weight:600;
  font-size:1.4rem;
  letter-spacing:-.01em;
  margin-bottom:10px;
  color:var(--t1);
}
.vbl p {
  font-size:.95rem;
  color:var(--t2);
  max-width:460px;
  margin:0 auto;
  line-height:1.7;
}
/* After / FAQ — v4 */ .aft,.fqs {
  max-width:760px;
  margin:0 auto;
  padding:clamp(48px,8vw,80px) clamp(16px,4vw,40px);
  display:none;
}
.aft.on,.fqs.on {
  display:block;
}
.sh {
  margin-bottom:40px;
}
.sh h2 {
  font-family:var(--fd);
  font-weight:600;
  font-size:clamp(1.4rem,3vw,1.9rem);
  letter-spacing:-.02em;
  color:var(--t1);
}
.steps {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;
  background:var(--brd);
  border:1px solid var(--brd);
  border-radius:14px;
  overflow:hidden;
}
.scd {
  background:var(--bg1);
  padding:26px;
}
.scd-n {
  font-family:var(--fm);
  font-size:.66rem;
  font-weight:600;
  color:var(--qb);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.scd-i {
  display:flex;
  align-items:center;
  font-size:26px;
  color:var(--t2);
  margin-bottom:14px;
}
.scd h3 {
  font-family:var(--fd);
  font-weight:600;
  font-size:1.02rem;
  margin-bottom:8px;
  color:var(--t1);
}
.scd p {
  font-size:.86rem;
  color:var(--t3);
  line-height:1.7;
}
.acc {
  max-width:680px;
  margin:0 auto;
  border:1px solid var(--brd);
  border-radius:14px;
  overflow:hidden;
}
.ai {
  border-bottom:1px solid var(--brd);
}
.ai:last-child {
  border-bottom:0;
}
.ai.op {
  background:var(--bg1);
}
.at2 {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  cursor:pointer;
  background:none;
  border:none;
  color:var(--t1);
  font-family:var(--fb);
  font-size:.94rem;
  font-weight:500;
  text-align:left;
}
.ax {
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--brd);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  color:var(--t3);
  flex-shrink:0;
  transition:transform .25s,color .2s;
}
.ai.op .ax {
  color:var(--qb);
  transform:rotate(45deg);
}
.ab2 {
  max-height:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(0.4,0,0.2,1),padding .3s ease;
  padding:0 20px;
  color:var(--t2);
  font-size:.88rem;
  line-height:1.75;
}
.ai.op .ab2 {
  max-height:520px;
  padding-bottom:20px;
  padding-top:2px;
}
.ftr {
  padding:28px clamp(16px,4vw,40px);
  border-top:1px solid var(--brd);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--fm);
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--t3);
}
@keyframes fu {
  from {
    opacity:0;
    transform:translateY(16px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes blink {
  0%,100% {
    opacity:1;
  }
  50% {
    opacity:.3;
  }
}
@keyframes qba {
  0%,100% {
    transform:scale(1);
  }
  50% {
    transform:scale(1.025);
  }
}
@keyframes pr {
  0% {
    transform:scale(1);
    opacity:.6;
  }
  100% {
    transform:scale(2.5);
    opacity:0;
  }
}
@keyframes pd {
  0%,100% {
    transform:scale(1);
  }
  50% {
    transform:scale(.8);
  }
}
@media(max-width:600px) {
  .qg {
    grid-template-columns:1fr;
  }
  .qg.c3 {
    grid-template-columns:repeat(2,1fr);
  }
  .fr {
    grid-template-columns:1fr;
  }
  .steps {
    grid-template-columns:1fr;
  }
  .ftr {
    flex-direction:column;
    gap:8px;
    text-align:center;
  }
}