/* Лаборатория ночью: тёмная основа, синий (он) и розовый (она), плитки-«элементы» как главный приём.
   Сайт сознательно только тёмный — это часть фирменного стиля. */
:root {
  color-scheme: dark;
  --bg: #090b11;
  --surface: #10131b;
  --surface-2: #161a25;
  --line: rgba(214, 222, 255, 0.09);
  --line-strong: rgba(214, 222, 255, 0.18);
  --fg: #eef0f7;
  --muted: #9aa2b8;
  --blue: #2e8bff;
  --cyan: #3bb9ff;
  --pink: #ec3fdf;
  --pink-soft: #f38beb;
  --danger: #ff5a7a;
  --ok: #4fd1a5;
  --grad: linear-gradient(115deg, var(--cyan) 0%, var(--blue) 38%, var(--pink) 100%);
  --grad-soft: linear-gradient(115deg, rgba(59, 185, 255, 0.16), rgba(236, 63, 223, 0.16));

  --font-display: "Onest", "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --r: 16px;
  --r-sm: 10px;
  --wrap: 1160px;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
/* Скрытые элементы (например, окно 18+ до проверки) не показываем, даже если у них задан display */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.55 var(--font-body);
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.section { padding-block: clamp(56px, 9vw, 104px); }
.section { position: relative; }
.hero ~ .section::before, .section + .section::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--wrap), calc(100% - 32px)); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 18%, var(--blue) 45%, var(--pink) 82%, transparent);
  opacity: .75;
}

.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ——— Заголовок секции с плиткой-элементом ——— */
.sec-head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head h2 { font-size: clamp(26px, 4.2vw, 42px); }
.sec-head p { color: var(--muted); margin-top: 8px; font-size: 17px; }
.mini-el {
  flex: none; width: 64px; height: 64px; border-radius: 12px; position: relative;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
  display: grid; place-items: center;
  font: 700 24px/1 var(--font-display);
}
.mini-el span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mini-el small { position: absolute; top: 5px; left: 7px; font: 500 10px/1 var(--font-mono); color: var(--muted); }

/* ——— Шапка ——— */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: rgba(9, 11, 17, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 20px/1 var(--font-display); }
.brand img { width: 64px; height: 64px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }

/* ——— Кнопки ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-main { background: var(--grad); color: #fff; box-shadow: 0 8px 30px -10px rgba(236, 63, 223, .7); }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -10px rgba(236, 63, 223, .85); }
.btn-ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--cyan); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14px; }

/* ——— Первый экран ——— */
.hero { position: relative; overflow: hidden; padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px); }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 820px; max-height: 820px;
  background: radial-gradient(closest-side, rgba(46, 139, 255, .22), transparent 70%), radial-gradient(closest-side at 70% 60%, rgba(236, 63, 223, .2), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; }
.eyebrow { font: 500 13px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wordmark { display: block; margin: 18px 0 14px; font: 700 clamp(64px, 11vw, 132px)/1.25 var(--font-display); letter-spacing: -0.03em; }
.wordmark .el {
  position: relative; display: inline-block; vertical-align: baseline;
  padding: .16em .1em .12em; margin-right: .04em; border-radius: .14em; line-height: 1;
  background: var(--grad); color: #fff;
  box-shadow: 0 20px 60px -20px rgba(236, 63, 223, .8);
}
.wordmark .el small { position: absolute; font: 500 clamp(10px, 1.3vw, 14px)/1 var(--font-mono); letter-spacing: 0; }
.wordmark .el .n { top: .5em; left: .55em; top: 8%; left: 8%; }
.wordmark .el .m { bottom: 8%; right: 9%; }
.formula { font: 500 clamp(15px, 2vw, 19px)/1.4 var(--font-mono); color: var(--muted); }
.formula b { font-weight: 500; }
.formula .he { color: var(--cyan); }
.formula .she { color: var(--pink-soft); }
.lead { font-size: clamp(19px, 2.4vw, 24px); font-weight: 600; margin-top: 22px; max-width: 30ch; text-wrap: balance; }

.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-width: 620px; }
.tube {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
  min-height: 60px; padding: 0 16px 0 14px; cursor: pointer; text-align: left;
  border-radius: 10px 999px 999px 10px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  font-weight: 700; font-size: 16px;
  transition: border-color .2s ease, transform .15s ease;
}
.tube::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 46%; opacity: .32; transition: width .35s ease, opacity .25s ease; }
.tube > * { position: relative; }
.tube .ic { width: 22px; height: 22px; }
.tube-model::before { background: linear-gradient(90deg, var(--pink), transparent); }
.tube-op::before { background: linear-gradient(90deg, var(--blue), transparent); }
.tube-agent::before { background: linear-gradient(90deg, var(--cyan), var(--pink) 70%, transparent); }
.tube:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.35); }
.tube:hover::before { width: 100%; opacity: .4; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.mascot { position: relative; justify-self: end; width: min(100%, 500px); padding-bottom: 36%; }
.board { display: block; width: 84%; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.mascot-img { position: absolute; right: -4%; top: 12%; display: block; width: 62%; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ——— О студии ——— */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 22px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.stat b { font: 700 clamp(34px, 5vw, 52px)/1 var(--font-display); }
.stat span { color: var(--muted); font-weight: 600; }
.stats .stat:first-child b { color: var(--pink-soft); }
.stats .stat:nth-child(2) b { color: var(--cyan); }
.geo { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px; border-radius: var(--r); background: var(--grad-soft); border: 1px solid var(--line); }
.geo svg { width: 120px; height: 120px; }
.geo h3 { font-size: clamp(19px, 2.4vw, 24px); }
.geo p { color: var(--muted); margin-top: 6px; }

/* ——— Честно о главном ——— */
.honest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fact { padding: 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.fact .ic { width: 30px; height: 30px; color: var(--cyan); }
.fact:nth-child(even) .ic { color: var(--pink-soft); }
.fact h3 { font: 700 18px/1.25 var(--font-body); }
.fact p { color: var(--muted); font-size: 15px; }
.money { margin-top: 12px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; padding: clamp(22px, 3vw, 32px); border-radius: var(--r); border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; }
.money h3 { font-size: clamp(20px, 2.6vw, 28px); }
.money p { color: var(--muted); margin-top: 10px; }
.money .avg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: 15px; }
.chip i { font-style: normal; color: var(--muted); font-weight: 600; }
.bars { display: grid; gap: 18px; }
.bar-row { display: grid; gap: 8px; }
.bar-label { display: flex; justify-content: space-between; gap: 12px; font: 500 14px/1.3 var(--font-mono); color: var(--muted); }
.bar-label b { color: var(--fg); font-weight: 500; }
.bar { height: 38px; border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.bar span { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding-right: 12px; border-radius: 10px; font: 700 16px/1 var(--font-display); color: #fff; min-width: 76px; }
.bar-a span { width: 28%; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.22)); color: var(--fg); }
.bar-b span { width: 100%; background: var(--grad); }
.note { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ——— Условия: вкладки и плитки-элементы ——— */
.tabs { display: inline-flex; padding: 5px; gap: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 26px; max-width: 100%; overflow-x: auto; }
.tab { border: 0; background: transparent; cursor: pointer; padding: 10px 20px; border-radius: 999px; font-weight: 700; color: var(--muted); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.tab .ic { width: 18px; height: 18px; }
.tab[aria-selected="true"] { background: var(--grad); color: #fff; }
.panel-intro { font-size: 18px; font-weight: 600; margin-bottom: 18px; max-width: 60ch; }
.duties { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.duties .chip .ic { width: 18px; height: 18px; color: var(--cyan); }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.el-tile {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 20px; border-radius: var(--r);
  border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, rgba(59,185,255,.55), rgba(255,255,255,.06) 45%, rgba(236,63,223,.55)) border-box;
  transition: transform .2s ease, background .3s ease;
}
.el-tile:hover { transform: translateY(-3px); background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad) border-box; }
.tile-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-strong); }
.tile-ic .ic { width: 26px; height: 26px; color: var(--fg); }
.el-tile h3 { font: 700 clamp(17px, 1.9vw, 20px)/1.2 var(--font-display); letter-spacing: -0.01em; }
.el-tile p { color: var(--muted); font-size: 14.5px; margin-top: 4px; line-height: 1.4; }

.payout { display: grid; gap: 14px; margin-bottom: 22px; }
.track { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.track > b { font: 700 16px/1.2 var(--font-display); }
.track-line { display: flex; align-items: center; gap: 0; min-width: 0; }
.track-line .dot { flex: none; display: grid; place-items: center; text-align: center; min-width: 96px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: 14px; line-height: 1.25; }
.track-line .dot em { display: block; font: 700 18px/1.1 var(--font-display); font-style: normal; }
.track-line .dot.pay em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.track-line .bond { flex: 1 1 24px; min-width: 16px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--pink)); opacity: .6; }

/* ——— Как это происходит ——— */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; counter-reset: step; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 14px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.lab-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lab {
  position: relative; z-index: 1; width: 112px; height: 112px; border-radius: 20px; display: grid; place-items: center;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, rgba(59,185,255,.7), rgba(255,255,255,.08) 50%, rgba(236,63,223,.7)) border-box;
}
.lab svg { width: 92px; height: 92px; overflow: visible; }
.lab::after { counter-increment: step; content: counter(step); position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font: 700 12px/26px var(--font-mono); text-align: center; }
/* Трубка между шагами: по ней «течёт» реакция */
.step:not(:last-child)::before {
  content: ""; position: absolute; top: 70px; left: 100%; width: 30px; height: 8px; border-radius: 4px;
  border: 1.5px solid rgba(223, 229, 242, .35);
  background: linear-gradient(90deg, var(--cyan), var(--pink), var(--cyan)) 0 0 / 200% 100%;
  opacity: .8; animation: flow 3.5s linear infinite;
}
@keyframes flow { to { background-position: -200% 0; } }
.step h3 { font: 800 18px/1.25 var(--font-body); margin-top: 6px; }
.step p { color: var(--muted); font-size: 15px; }

/* ——— Запрещённые реакции ——— */
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rule { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.no { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--fg); border: 2px solid var(--danger); }
.no::after { content: ""; position: absolute; width: 2px; height: 64px; background: var(--danger); transform: rotate(45deg); }
.no .ic { width: 26px; height: 26px; opacity: .85; }
.rule h3 { font: 800 17px/1.3 var(--font-body); }
.verdict { margin-top: 12px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border-radius: var(--r); background: rgba(255, 90, 122, .08); border: 1px solid rgba(255, 90, 122, .35); }
.verdict p { flex: 1 1 280px; font: 700 clamp(16px, 2vw, 20px)/1.4 var(--font-display); color: var(--danger); }
.verdict b { font-weight: 700; }

/* ——— Платформы ——— */
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.platform { display: grid; place-items: center; min-height: 104px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font: 700 clamp(20px, 2.6vw, 28px)/1 var(--font-display); letter-spacing: -0.01em; }
.platform:nth-child(1) { color: #ff6b6b; }
.platform:nth-child(2) { color: #f7a64b; }
.platform:nth-child(3) { color: #ff6fae; }

/* ——— Подходишь ——— */
.fit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fit-card { padding: 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.fit-card h3 { font-size: 20px; margin-bottom: 18px; }
.fit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fit-list li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); font-weight: 700; line-height: 1.3; }
.fit-list .ic { width: 28px; height: 28px; color: var(--cyan); }
.fit-card.calm { background: var(--grad-soft); }
.fit-card.calm .fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fit-card.calm .ic { color: var(--pink-soft); }
.fit-list li span small { display: block; font-weight: 500; color: var(--muted); font-size: 14px; margin-top: 2px; }

/* ——— Вопросы ——— */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.faq details[open] { border-color: var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 700; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font: 500 20px/1 var(--font-mono); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 20px; color: var(--muted); max-width: 68ch; }

/* ——— Форма ——— */
.apply { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; align-items: start; }
.form { padding: clamp(20px, 3vw, 32px); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 18px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field > label, .field > .lbl { font-weight: 700; font-size: 14px; }
.input, .select {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px;
  background: var(--bg); border: 1.5px solid var(--line-strong); outline: none;
  transition: border-color .2s ease;
}
.input:focus, .select:focus { border-color: var(--cyan); }
.input::placeholder { color: #626a80; }
.field.bad .input, .field.bad .select, .field.bad .role-pick { border-color: var(--danger); }
.err { display: none; color: var(--danger); font-size: 13px; font-weight: 600; }
.field.bad .err { display: block; }
.with-prefix { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.with-prefix .pre { display: grid; place-items: center; padding: 0 14px; border: 1.5px solid var(--line-strong); border-right: 0; border-radius: 12px 0 0 12px; background: var(--surface-2); color: var(--muted); font-weight: 700; }
.with-prefix .input { border-radius: 0 12px 12px 0; }
.phone { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px; }
.role-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; border: 1.5px solid transparent; border-radius: 14px; margin: 0; }
.role-pick legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.role-pick input { position: absolute; opacity: 0; pointer-events: none; }
.role-pick label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--bg); cursor: pointer; font-weight: 700; font-size: 15px; text-align: center; }
.role-pick label .ic { width: 20px; height: 20px; }
.role-pick input:checked + label { border-color: transparent; background: var(--grad); color: #fff; }
.role-pick input:focus-visible + label { outline: 2px solid var(--cyan); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pink); flex: none; }
.field.bad .consent { color: var(--danger); }
.form .btn { width: 100%; }
.form-done { display: none; text-align: center; padding: 20px 6px; }
.form-done .ic { width: 56px; height: 56px; color: var(--ok); }
.form-done h3 { font-size: 24px; margin: 12px 0 8px; }
.form-done p { color: var(--muted); }
.form.sent > :not(.form-done) { display: none; }
.form.sent .form-done { display: block; }
.demo-note { font-size: 13px; color: #f7c948; background: rgba(247, 201, 72, .08); border: 1px dashed rgba(247, 201, 72, .45); border-radius: 10px; padding: 10px 12px; margin-top: 14px; }

.side { display: grid; gap: 12px; }
.side-card { padding: 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; }
.side-card h3 { font-size: 19px; }
.side-card p { color: var(--muted); }
.side-mascot { display: grid; place-items: center; padding: 18px; border-radius: var(--r); background: var(--grad-soft); border: 1px solid var(--line); }
.side-mascot img { width: 180px; height: auto; }

/* ——— Подвал ——— */
.foot { border-top: 1px solid var(--line); padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--fg); }
.badge18 { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--muted); font: 700 11px/1 var(--font-mono); color: var(--fg); margin-right: 10px; }

/* ——— Проверка возраста ——— */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); background: rgba(5, 6, 10, .86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.gate-box { width: min(100%, 420px); text-align: center; padding: 32px 24px; border-radius: 22px; border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; display: grid; gap: 14px; justify-items: center; }
.gate-box .mini-el { width: 84px; height: 84px; font-size: 30px; }
.gate-box h2 { font-size: 26px; }
.gate-box p { color: var(--muted); }
.gate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 6px; }
.gate-actions .btn { padding: 0 10px; }
.gate-no { display: none; color: var(--danger); font-weight: 700; }
.gate.denied .gate-actions { display: none; }
.gate.denied .gate-no { display: block; }
html.gate-open { overflow: hidden; }

/* ——— Блог ——— */
.page-head { padding-block: clamp(40px, 6vw, 72px) 8px; }
.page-head h1 { font-size: clamp(34px, 6vw, 60px); margin-top: 14px; }
.page-head p { color: var(--muted); font-size: 18px; margin-top: 12px; max-width: 56ch; }
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.post-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.post-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.cover { position: relative; aspect-ratio: 16 / 10; max-width: 100%; display: grid; place-items: center; overflow: hidden; }
.cover.c1 { background: radial-gradient(circle at 25% 30%, rgba(46,139,255,.55), transparent 55%), radial-gradient(circle at 80% 80%, rgba(236,63,223,.35), transparent 50%), var(--surface-2); }
.cover.c2 { background: radial-gradient(circle at 75% 25%, rgba(236,63,223,.55), transparent 55%), radial-gradient(circle at 20% 85%, rgba(59,185,255,.4), transparent 50%), var(--surface-2); }
.cover.c3 { background: radial-gradient(circle at 50% 40%, rgba(46,139,255,.45), transparent 50%), radial-gradient(circle at 50% 100%, rgba(236,63,223,.45), transparent 55%), var(--surface-2); }
.cover .big-el { width: 42%; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; position: relative; background: rgba(9, 11, 17, .55); border: 1.5px solid rgba(255,255,255,.35); backdrop-filter: blur(4px); font: 700 clamp(34px, 5vw, 56px)/1 var(--font-display); }
.cover .big-el small { position: absolute; top: 8px; left: 10px; font: 500 12px/1 var(--font-mono); color: rgba(255,255,255,.7); }
.cover .big-el .ic { position: absolute; bottom: 10px; right: 10px; width: 22px; height: 22px; color: rgba(255,255,255,.75); }
.post-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.post-body h2 { font-size: 20px; line-height: 1.2; }
.post-body p { color: var(--muted); font-size: 15px; }
.post-meta { font: 500 12px/1 var(--font-mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--cyan); }
.more .ic { width: 18px; height: 18px; }

.article { max-width: 760px; margin-inline: auto; }
.back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-weight: 600; }
.back .ic { width: 18px; height: 18px; transform: rotate(180deg); }
.back:hover { color: var(--fg); }
.article .cover { border-radius: var(--r); margin: 24px 0 8px; aspect-ratio: 16 / 7; }
.article .cover .big-el { width: 24%; }
.article h1 { font-size: clamp(30px, 5vw, 46px); margin-top: 18px; }
.article .intro { font-size: 19px; font-weight: 600; margin-top: 16px; }
.article h2 { font-size: clamp(21px, 3vw, 26px); margin: 40px 0 14px; display: flex; align-items: center; gap: 12px; }
.article h2 .mini-el { width: 44px; height: 44px; font-size: 16px; border-radius: 10px; }
.article h2 .mini-el small { font-size: 8px; top: 4px; left: 5px; }
.article p { color: #c9cede; margin-top: 12px; }
.article ul.points { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.article ul.points li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.article ul.points li .ic { width: 22px; height: 22px; color: var(--cyan); margin-top: 1px; }
.article ul.points li b { display: block; }
.article ul.points li span { color: var(--muted); font-size: 15px; }
.callout { margin-top: 18px; padding: 18px 20px; border-radius: var(--r); background: var(--grad-soft); border: 1px solid var(--line-strong); font-weight: 600; }
.demo { margin-top: 16px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.demo-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: baseline; }
.demo-row:first-child { border-top: 0; }
.demo-row b { font: 500 12px/1.4 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.demo-row span { font-family: var(--font-mono); font-size: 14.5px; }
.demo-row .ru { color: var(--pink-soft); }
.article-cta { margin-top: 48px; padding: 28px; border-radius: var(--r); text-align: center; display: grid; gap: 14px; justify-items: center; border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; }
.article-cta h2 { margin: 0; justify-content: center; }
.article-cta p { margin: 0; color: var(--muted); }

/* ——— Адаптивность ——— */
@media (max-width: 1020px) {
  .honest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; align-items: start; text-align: left; padding: 0 0 26px; border: 0; background: none; border-radius: 0; }
  .step .lab { grid-row: span 2; width: 96px; height: 96px; }
  .lab svg { width: 78px; height: 78px; }
  .step h3 { margin-top: 18px; }
  .step:not(:last-child)::before { top: 100px; bottom: 2px; left: 44px; right: auto; width: 8px; border-radius: 4px; height: auto; background: linear-gradient(180deg, var(--cyan), var(--pink), var(--cyan)) 0 0 / 100% 200%; animation-name: flow-v; }
  @keyframes flow-v { to { background-position: 0 -200%; } }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .nav .nav-anchor { display: none; }
  .hero .wrap { grid-template-columns: 1fr; gap: 12px; }
  .mascot { order: -1; width: 180px; justify-self: start; position: absolute; right: -8px; top: -18px; opacity: .95; }
  .mascot { padding-bottom: 0; }
  .board { display: none; }
  .mascot-img { position: static; width: 100%; }
  .about-grid, .money, .fit, .apply { grid-template-columns: 1fr; }
  .fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .side-mascot { flex-direction: row-reverse; justify-content: center; gap: 14px; padding: 14px; }
  .side-mascot img { width: 96px; }
  .bubble-down::after { left: auto; right: -9px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .top .brand span { display: none; }
  .brand img { width: 46px; height: 46px; }
  .top .wrap { min-height: 64px; }
  .nav { gap: 16px; }
  .top .btn-sm { padding: 0 14px; }
  .mascot { width: 128px; top: -10px; right: -14px; }
  .wordmark { margin-top: 14px; }
  .roles { grid-template-columns: 1fr; max-width: none; }
  .hero-cta .btn { flex: 1 1 100%; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 16px 12px; }
  .stat span { font-size: 13px; line-height: 1.3; }
  .geo { grid-template-columns: 1fr; text-align: left; }
  .geo svg { width: 92px; height: 92px; }
  .honest, .rules, .platforms { grid-template-columns: 1fr; }
  .fact, .rule { flex-direction: row; align-items: flex-start; gap: 14px; }
  .fact > div, .rule > div { min-width: 0; }
  .platforms { grid-template-columns: 1fr; }
  .platform { min-height: 72px; }
  .el-tile { padding: 14px; gap: 12px; }
  .tile-ic { width: 42px; height: 42px; }
  .el-tile h3 { font-size: 15.5px; }
  .el-tile p { font-size: 13.5px; }
  .track { grid-template-columns: 1fr; gap: 12px; }
  .track-line .dot { min-width: 0; flex: 1 1 0; padding: 10px 6px; font-size: 13px; }
  .track-line .bond { flex: 0 0 12px; min-width: 12px; }
  .fit-list, .fit-card.calm .fit-list { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .phone { grid-template-columns: 122px minmax(0, 1fr); }
  .phone .select { padding: 0 8px 0 12px; }
  .tabs { display: flex; }
  .tab { flex: 1 1 0; justify-content: center; padding: 10px 8px; }
  .tab .ic { display: none; }
  .role-pick label { flex-direction: column; gap: 4px; font-size: 14px; }
  .sec-head { align-items: flex-start; gap: 14px; }
  .sec-head .mini-el { width: 52px; height: 52px; font-size: 19px; }
  .posts { grid-template-columns: 1fr; }
  .demo-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ——— Политика данных ——— */
.legal h2 { font-size: clamp(19px, 2.6vw, 22px); margin: 34px 0 6px; }
.legal ul { margin: 10px 0 0; padding-left: 22px; color: #c9cede; display: grid; gap: 6px; }
.legal .callout { margin-top: 22px; }
.fill { background: rgba(247, 201, 72, .14); color: #f7c948; border-radius: 4px; padding: 0 4px; }
.consent a { color: var(--fg); }

/* ——— Заголовки в стиле таблицы Менделеева: настоящий элемент + продолжение слова.
   Буква в плитке стоит на той же линии, что и остальной текст. ——— */
.bb { line-height: 1.5; }
.pt {
  position: relative; display: inline-block; vertical-align: baseline;
  padding: .3em .16em .26em; margin-right: .05em; border-radius: .12em;
  background: var(--grad); color: #fff; line-height: 1; text-align: center;
  box-shadow: 0 10px 30px -14px rgba(236, 63, 223, .8);
}
.pt b { font-weight: 700; }
.pt small { position: absolute; font: 500 max(8px, .2em)/1 var(--font-mono); letter-spacing: 0; }
.pt .n { top: .1em; left: .14em; }
.pt .m { bottom: .08em; right: .14em; opacity: .85; }
.money .pt, .post-body .pt { padding: .14em .12em .1em; }
.money .pt small, .post-body .pt small { display: none; }
.cover .big-el .m { position: absolute; top: 8px; right: 10px; left: auto; font: 500 11px/1 var(--font-mono); color: rgba(255,255,255,.7); }
.cover .big-el .nm { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 600 12px/1 var(--font-body); color: rgba(255,255,255,.8); }
@media (max-width: 640px) { .pt .m { display: none; } .pt { padding-bottom: .16em; } }

/* ——— Знаки опасности, как на химических этикетках ——— */
.ghs {
  flex: none; width: 52px; height: 52px; margin: 10px; display: grid; place-items: center;
  transform: rotate(45deg); border: 4px solid #e8364f; border-radius: 6px; background: #f6f7fb;
  box-shadow: 0 8px 22px -10px rgba(232, 54, 79, .8);
}
.ghs .ic { transform: rotate(-45deg); width: 26px; height: 26px; color: #12141a; stroke-width: 2.1; }
.signal { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #ff6b81; margin-bottom: 6px; }

/* ——— Форма-протокол ——— */
.protocol { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--line-strong); font: 500 12px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.protocol b { color: var(--pink-soft); font-weight: 500; }
.protocol-sub { font: 500 13px/1.4 var(--font-mono); color: var(--muted); margin-top: -8px; }
.form-done .done-crystal { width: 120px; height: 120px; display: block; margin: 0 auto; animation: pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ——— Платформы: банки с реактивами на полке ——— */
.shelf { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 3vw, 36px); padding: 0 clamp(8px, 3vw, 32px) 18px; }
.shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 4px; background: linear-gradient(#3a4150, #222834); box-shadow: 0 14px 30px -12px rgba(0,0,0,.8); }
.jar { position: relative; display: flex; justify-content: center; min-width: 0; }
.bottle { display: block; width: 100%; max-width: 210px; height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.label { position: absolute; left: 50%; top: 50%; width: min(74%, 158px); padding: 7px 6px 9px; border-radius: 3px; background: #f2efe6; border-top: 5px solid var(--c); text-align: center; transform: translateX(-50%) rotate(-2deg); box-shadow: 0 6px 16px -8px rgba(0,0,0,.7); }
.label small { display: block; font: 500 10px/1.2 var(--font-mono); color: #6b6b6b; letter-spacing: .06em; }
.label b { display: block; font: 700 clamp(11px, 1.4vw, 16px)/1.1 var(--font-display); color: #15171d; margin-top: 4px; }
.jar:nth-child(2) .label { transform: translateX(-50%) rotate(1.5deg); }

/* ——— Химик с репликами ——— */
.bubble { position: relative; padding: 14px 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-strong); font-weight: 700; }
.bubble::after { content: ""; position: absolute; width: 16px; height: 16px; background: var(--surface-2); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.bubble-down::after { left: 50%; bottom: -9px; transform: translateX(-50%) rotate(45deg); }
.bubble-left::after { left: -9px; top: 50%; transform: translateY(-50%) rotate(135deg); }
.side-mascot { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ask-chemist { display: flex; align-items: center; gap: 22px; max-width: 860px; margin-top: 22px; }
.ask-chemist img { width: 110px; height: auto; flex: none; filter: drop-shadow(0 16px 26px rgba(0,0,0,.5)); }
.ask-chemist .bubble { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ask-chemist .bubble p { margin: 0; }
@media (max-width: 640px) {
  .ask-chemist { gap: 14px; }
  .ask-chemist img { width: 78px; }
  .ghs { width: 44px; height: 44px; margin: 8px; border-width: 3px; }
  .ghs .ic { width: 22px; height: 22px; }
  .shelf { padding: 0 0 14px; }
  .label { width: 86%; padding: 5px 2px 7px; }
  .label small { font-size: 8px; }
}
@media (max-width: 860px) {
  .side-mascot { flex-direction: row-reverse; justify-content: center; gap: 16px; padding: 14px; }
  .side-mascot img { width: 96px; }
  .bubble-down::after { left: -9px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%) rotate(135deg); }
}
@media (max-width: 640px) {
  .label b { font-size: 10px; letter-spacing: -0.02em; overflow-wrap: normal; }
}

/* ——— Жёлтые знаки «Внимание» с нашими иконками ——— */
.warn { flex: none; width: 64px; height: 58px; filter: drop-shadow(0 0 8px rgba(236, 63, 223, .7)) drop-shadow(0 0 16px rgba(59, 185, 255, .35)); }
.signal { color: var(--pink-soft); }
@media (max-width: 640px) { .warn { width: 54px; height: 49px; } }

/* ——— «О студии»: цифры в мерных стаканах ——— */
.stat { flex-direction: row; align-items: center; gap: 16px; }
.stat > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.beaker { flex: none; width: 56px; height: 70px; overflow: visible; }
.beaker .liq { transform-box: view-box; transform-origin: 50% 72px; transform: scaleY(var(--lvl)); transition: transform 1.8s cubic-bezier(.2, .8, .2, 1); }
.stats.pre .beaker .liq { transform: scaleY(.04); }
@media (max-width: 640px) {
  .stat { flex-direction: column; align-items: flex-start; gap: 10px; }
  .beaker { width: 40px; height: 50px; }
}

/* ——— Окно 18+ в виде пропуска в лабораторию ——— */
.gate-box.pass { position: relative; width: min(100%, 360px); margin-top: 40px; padding-top: 40px; border-radius: 20px; }
.pass .strap { position: absolute; top: -46px; left: 50%; transform: translateX(-50%); width: 40px; height: 56px; border-radius: 6px; background: var(--pink); box-shadow: 0 0 0 4px rgba(236, 63, 223, .18); }
.pass .slot { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 52px; height: 9px; border-radius: 5px; background: var(--bg); }
.pass-org { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pass h2 { font-size: 28px; }
.gate-actions { grid-template-columns: 1fr; }


/* ——— Страница 404 ——— */
.nf { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; min-height: 60vh; }
.nf-art { position: relative; justify-self: center; width: min(100%, 340px); }
.nf-art img { display: block; width: 100%; height: auto; }
.nf-flask { position: absolute; right: -42%; bottom: -2%; width: 46%; height: auto; }
.nf-code { font: 700 clamp(72px, 12vw, 140px)/1.2 var(--font-display); letter-spacing: -0.03em; }
.nf h1 { font-size: clamp(30px, 5vw, 48px); margin-top: 6px; }
.nf-text { color: var(--muted); font-size: 18px; margin: 14px 0 26px; max-width: 40ch; }
@media (max-width: 860px) { .nf { grid-template-columns: 1fr; gap: 24px; text-align: center; } .nf-art { width: 200px; margin-right: 60px; } .nf-text { margin-inline: auto; } }

/* ——— Обложки блога: этикетка реактива и штамп ——— */
.cover-label { position: relative; width: min(64%, 260px); padding: 14px 10px 16px; border-radius: 4px; background: #f2efe6; border-top: 7px solid var(--c); text-align: center; transform: rotate(-2deg); box-shadow: 0 14px 30px -12px rgba(0,0,0,.75); color: #15171d; }
.cover.c2 .cover-label { transform: rotate(1.5deg); }
.cover-label small { display: block; font: 500 12px/1.2 var(--font-mono); color: #6b6b6b; letter-spacing: .06em; }
.cover-label b { display: block; margin-top: 6px; font: 700 clamp(17px, 2.2vw, 24px)/1.1 var(--font-display); letter-spacing: -0.01em; }
.stamp { position: absolute; right: 7%; bottom: 10%; transform: rotate(-12deg); padding: 4px 9px; border: 2px solid var(--pink-soft); border-radius: 6px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-soft); background: rgba(9, 11, 17, .35); }
.article .cover .cover-label { width: min(44%, 300px); }

/* ——— Четвёртая склянка «?» ——— */
.label-q { border-top: 5px solid transparent; border-image: linear-gradient(90deg, var(--cyan), var(--pink)) 1; }
.label-q b { font-size: clamp(20px, 2.4vw, 28px); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shelf-note { margin-top: 24px; text-align: center; color: var(--fg); font-size: 19px; font-weight: 600; }
.shelf-note b { color: var(--fg); font-weight: 800; }
@media (max-width: 640px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; padding-bottom: 0; }
  .shelf::after { display: none; }
  .jar { padding-bottom: 14px; }
  .jar::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: 0; height: 12px; border-radius: 3px; background: linear-gradient(#3a4150, #222834); }
  .bottle { max-width: 140px; }
  .label b { font-size: 12px; }
  .label-q b { font-size: 22px; }
  .shelf-note { font-size: 17px; }
}
@media (max-width: 640px) {
  /* Этикетка не шире самой склянки */
  .label { width: min(56%, 92px); padding: 4px 3px 6px; border-top-width: 4px; }
  .label small { font-size: 7.5px; }
  .label b { font-size: 10.5px; margin-top: 2px; }
  .label-q b { font-size: 18px; }
}

/* ——— Логотип в подвале ——— */
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand img { width: 44px; height: 44px; flex: none; }

.hero-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hero-tags li { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.hero-tags .ic { width: 16px; height: 16px; color: var(--pink-soft); stroke-width: 2.4; }

/* ——— Номер раздела на линии-разделителе ——— */
.section[data-n]::after {
  content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 2px 14px; background: var(--bg); color: var(--muted);
  font: 500 12px/1 var(--font-mono); letter-spacing: .18em;
}

/* ——— Что важно понимать ——— */
.understand { margin-top: 12px; padding: 20px 22px; border-radius: var(--r); border: 1px dashed var(--line-strong); background: var(--surface); }
.understand h3 { font: 700 17px/1.3 var(--font-body); margin-bottom: 6px; }
.understand p { color: var(--muted); max-width: 80ch; }

/* ——— Форматы работы: переключатели ——— */
.formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.formats.one { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-bottom: 22px; }
.fmt { padding: 18px 20px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.fmt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.fmt-head h3 { font: 700 17px/1.2 var(--font-body); }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-strong); }
.seg button { border: 0; background: transparent; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.seg button[aria-selected="true"] { background: var(--grad); color: #fff; }
.fmt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fmt-list li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; line-height: 1.35; }
.fmt-list .ic { width: 20px; height: 20px; color: var(--cyan); margin-top: 1px; }
@media (max-width: 860px) { .formats { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .seg button { padding: 7px 11px; font-size: 13px; } }
/* ——— Статья-чеклист ——— */
.checklist { display: grid; gap: 12px; margin-top: 26px; }
.q { padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.q-head { display: flex; align-items: center; gap: 12px; }
.q-head h2 { margin: 0; font: 700 18px/1.3 var(--font-body); display: block; }
.q-n { font: 500 12px/1 var(--font-mono); color: var(--pink-soft); letter-spacing: .1em; }
.q-head .ic { width: 22px; height: 22px; color: var(--cyan); flex: none; }
.q p { margin-top: 10px; }
.q .q-us { padding: 10px 12px; border-radius: 10px; background: var(--grad-soft); color: var(--fg); font-weight: 600; }

.field > label .opt { font-weight: 500; color: var(--muted); }

/* ——— Меню на телефоне ——— */
.burger { display: none; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--fg); transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mnav { display: grid; padding: 8px var(--gut-r) 18px var(--gut-l); border-top: 1px solid var(--line); }
.mnav a { padding: 14px 0; font-size: 18px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line); }
.mnav a:last-child { border-bottom: 0; }
@media (max-width: 860px) {
  .has-burger .nav { display: none; }
  .has-burger .btn-sm { margin-left: auto; }
  .burger { display: flex; }
}
@media (min-width: 861px) { .mnav { display: none !important; } }

/* ——— Блок «Напиши нам»: Telegram главнее формы ——— */
.apply { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.write { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r); border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: 0 24px 60px -30px rgba(236, 63, 223, .6); }
.write-mascot { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.write-mascot img { width: 150px; height: auto; filter: drop-shadow(0 18px 28px rgba(0,0,0,.5)); }
.write h3 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; }
.write p { color: var(--muted); max-width: 36ch; }
.write-btn { width: 100%; min-height: 60px; font-size: 18px; margin-top: auto; }
.form-title { font: 700 18px/1.3 var(--font-body); color: var(--fg); margin-top: -4px; }
.btn-outline { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; color: var(--fg); }
.btn-outline:hover { transform: translateY(-2px); }
@media (max-width: 860px) { .apply { grid-template-columns: minmax(0, 1fr); } .write-mascot img { width: 110px; } }

/* Скрытое поле-ловушка для спам-ботов */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }