/* ============================================================
   SBiDesk — рекламный сайт. «Neon Grid» (редизайн 2026-07,
   см. site/design_handoff_piu_mio_neon_redesign/README.md).
   Space Grotesk (display) + Inter (текст) + Roboto Mono (цифры).
   Цифровой шрифт менялся дважды: у JetBrains Mono и IBM Plex Mono
   ноль с точкой внутри читался как «8» — у Roboto Mono ноль пустой.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Roboto+Mono:wght@500;600;700&display=swap');

:root {
  --bg:        #15171F;
  --panel:     #1D202B;
  --panel-2:   #191C25;
  --ink:       #F3F5F9;
  --ink-soft:  #9AA0B4;
  --ink-faint: #6B7086;
  --ink-list:  #C9CDDA;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.14);
  --on-grad:   #0A0C11;

  /* акценты модулей (1:1 с хендоффом) */
  --m-landing:   oklch(70% 0.18 265);
  --m-memory:    oklch(72% 0.16 210);
  --m-dashboard: oklch(69% 0.19 285);
  --m-booking:   oklch(70% 0.19 250);
  --m-crm:       oklch(75% 0.15 195);
  --m-hr:        oklch(68% 0.20 300);
  --m-academy:   oklch(72% 0.16 165);
  --m-documents: oklch(70% 0.18 315);
  --m-ai:        oklch(72% 0.19 330);

  --blue:   var(--m-booking);
  --cyan:   var(--m-crm);
  --violet: var(--m-hr);
  --magenta:var(--m-ai);
  /* акцент цены «всё включено» — яркий неоновый красный (просьба юзера) */
  --red:    oklch(66% 0.26 22);

  /* фирменный градиент — только CTA, лого, ядро, ИИ-блок, финальный баннер */
  --grad:      linear-gradient(135deg, oklch(70% 0.19 250), oklch(68% 0.20 300));
  --grad-wide: linear-gradient(135deg, oklch(72% 0.17 220), oklch(70% 0.19 250) 45%, oklch(68% 0.20 300) 80%, oklch(72% 0.19 330));
  --grad-bar:  linear-gradient(90deg, oklch(70% 0.19 250), oklch(68% 0.20 300));

  --font:      'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-hero: 'Space Grotesk', var(--font);
  --font-num:  'Roboto Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-hero); margin: 0 0 .5em; }
h1 { font-size: clamp(36px, 4.6vw, 54px); font-weight: 700; line-height: 1.12; letter-spacing: -.5px; }
h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.2; }
h3 { font-size: 17px; font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: var(--ink); text-decoration: none; }
img { max-width: 100%; display: block; }
.num { font-family: var(--font-num); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
section { padding: 76px 0; }
section.tight { padding-top: 8px; }
.section-sub { max-width: 700px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; }

.section-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px var(--font-num); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 16px;
}
.section-kicker::before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--grad-bar); }

/* ── Анимации ───────────────────────────────────────────── */
@keyframes floatY  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatY2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes driftX  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(22px,-16px); } }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dashFlow { to { stroke-dashoffset: -24; } }
@keyframes corePulse {
  0%,100% { box-shadow: 0 0 0 18px oklch(70% 0.19 250 / 10%), 0 0 60px oklch(70% 0.19 250 / 35%); }
  50%     { box-shadow: 0 0 0 26px oklch(70% 0.19 250 / 16%), 0 0 90px oklch(70% 0.19 250 / 55%); }
}
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.on { opacity: 1; transform: none; }

/* ── Топбар ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(21,23,31,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-in { display: flex; align-items: center; gap: 30px; height: 66px; }
.logo { display: flex; align-items: center; gap: 9px; font: 700 18px var(--font-hero); color: var(--ink); }
.logo img { height: 44px; width: auto; display: block; }
.logo-mark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--grad);
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 14px var(--font-hero); color: var(--on-grad);
}
.topnav { display: flex; gap: 24px; margin-left: auto; align-items: center; font: 600 13.5px var(--font); }
.topnav a { color: var(--ink-soft); }
.topnav a:hover { color: var(--ink); }
@media (max-width: 820px) { .topnav a:not(.btn) { display: none; } }

/* ── Кнопки / чипы ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 11px; border: none; cursor: pointer;
  font: 700 14px var(--font); text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, opacity .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--grad); color: var(--on-grad) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 28px -8px oklch(70% 0.19 250 / 55%);
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 36px -8px oklch(70% 0.19 250 / 70%); }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--ink) !important; }
.btn-ghost:hover { border-color: rgba(255,255,255,.34); }
.btn-dark { background: var(--on-grad); color: #fff !important; }
.btn-sm { padding: 10px 18px; border-radius: 10px; font-size: 13.5px; }
.btn-lg { padding: 15px 28px; border-radius: 12px; font-size: 15.5px; }

.trial-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font: 600 12.5px var(--font); color: var(--ink-soft);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px 14px;
}
.chip b { display: none; } /* галочки из старой версии не нужны в этом стиле */

/* ── Герой ──────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 76px 0 24px; }
.hero-gridlines {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 46px);
}
.hero-blob {
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, oklch(70% 0.19 250), oklch(68% 0.20 300) 65%, transparent 75%);
  filter: blur(90px); opacity: .35; top: -120px; right: -60px;
  animation: driftX 11s ease-in-out infinite;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-slogan {
  font: 600 12.5px var(--font-num); letter-spacing: .24em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 18px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, oklch(72% 0.17 220), oklch(70% 0.19 250) 45%, oklch(68% 0.20 300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 480px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 22px; }

/* скриншот: рамка с акцентной обводкой, цвета — натуральные (как в кабинете) */
.browser {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid oklch(70% 0.19 250 / 30%);
  box-shadow: 0 20px 60px -24px rgba(0,0,0,.6);
}
.browser img { width: 100%; display: block; }
.browser-bar { display: none; } /* рамки-«браузера» в новом стиле нет */

.hero-shot { position: relative; }
/* 3D-иллюстрация (не флоатскриншот кабинета) — без рамки/обводки/клипа .browser,
   у картинки уже своя тень и неровный силуэт. */
.hero-illustration { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }
.float-card {
  position: absolute; background: var(--panel); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 11px 15px; font: 600 12.5px var(--font); color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.6);
  animation: floatY 5s ease-in-out infinite;
}
.float-card .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.float-card small { font-weight: 600; color: var(--ink); font-size: 12.5px; }

.hero .rise { opacity: 0; animation: rise .7s ease forwards; }
.hero .rise.d1 { animation-delay: .08s; } .hero .rise.d2 { animation-delay: .18s; }
.hero .rise.d3 { animation-delay: .28s; } .hero .rise.d4 { animation-delay: .4s; }

/* ── Лента «кому подходит» ──────────────────────────────── */
.marquee {
  overflow: hidden; padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
}
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marqueeScroll 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.biz {
  white-space: nowrap; border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
  padding: 9px 18px; font: 600 14px var(--font); color: var(--ink-soft);
}
.biz span:first-child { display: none; } /* без эмодзи в этом стиле */

/* ── Боль → решение ─────────────────────────────────────── */
.pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
@media (max-width: 860px) { .pain-grid { grid-template-columns: 1fr; } }
.pain-col { border-radius: 18px; padding: 28px; }
.pain-col.bad  { background: var(--panel-2); border: 1px dashed rgba(255,255,255,.16); }
.pain-col.good { background: var(--panel); border: 1px solid oklch(70% 0.19 250 / 25%); box-shadow: 0 10px 40px -20px rgba(0,0,0,.5); }
.pain-col h3 { margin-bottom: 16px; }
.pain-col.bad h3 { color: var(--ink-soft); }
.pain-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; font: 400 14.5px/1.4 var(--font); }
.pain-col.bad ul  { color: var(--ink-soft); }
.pain-col.good ul { color: var(--ink-list); }
.pain-col li { display: flex; gap: 10px; }
.pain-col li i { flex: none; width: 5px; height: 5px; border-radius: 50%; margin-top: 8px; font-size: 0; }
.pain-col.bad  li i { background: var(--ink-faint); }
.pain-col.good li i { background: var(--cyan); box-shadow: 0 0 6px oklch(75% 0.15 195 / 70%); }

/* ── Экосистема ─────────────────────────────────────────── */
.eco { position: relative; margin: 50px auto 10px; max-width: 820px; min-height: 440px; }
.eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.eco-lines line { animation: dashFlow 1.6s linear infinite; }
.eco-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, oklch(78% 0.14 195), oklch(70% 0.19 250) 55%, oklch(65% 0.20 300));
  color: var(--on-grad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; font: 800 15px var(--font-hero); z-index: 2;
  animation: corePulse 3.4s ease-in-out infinite;
}
.eco-core small { font: 600 11px var(--font); opacity: .75; max-width: 120px; }
.eco-node {
  position: absolute; display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.6); padding: 11px 16px;
  font: 700 13.5px var(--font); color: var(--ink); cursor: pointer;
  animation: floatY2 6s ease-in-out infinite;
}
.eco-node i { width: 10px; height: 10px; border-radius: 4px; background: var(--nc, var(--blue)); box-shadow: 0 0 8px color-mix(in srgb, var(--nc, var(--blue)) 70%, transparent); }
.eco-node small { display: block; font: 600 10.5px var(--font); color: var(--ink-soft); }
/* тултип узла — CSS-hover (в хендоффе делался JS-ом, поведение то же) */
.eco-tip {
  position: absolute; left: 0; width: 250px; z-index: 5;
  background: #20232F; border: 1px solid color-mix(in srgb, var(--nc) 40%, transparent);
  border-radius: 14px; padding: 16px 17px;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.7), 0 0 30px -14px var(--nc);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.eco-node.tip-below .eco-tip { top: calc(100% + 10px); }
.eco-node.tip-above .eco-tip { bottom: calc(100% + 10px); }
.eco-node:hover .eco-tip, .eco-node:focus-visible .eco-tip { opacity: 1; visibility: visible; transform: none; }
.eco-tip .tip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.eco-tip .tip-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--nc); box-shadow: 0 0 8px var(--nc); }
.eco-tip .tip-head b { font: 700 14.5px var(--font-hero); color: var(--ink); }
.eco-tip p { margin: 0 0 10px; font: 400 12.5px/1.5 var(--font); color: #B8BCCB; }
.eco-tip .tip-foot { display: flex; align-items: center; justify-content: space-between; font: 700 12px var(--font); color: var(--ink); }
.eco-tip .tip-foot .pr { font-family: var(--font-num); }
.eco-tip .tip-foot .go { color: var(--nc); }
@media (max-width: 720px) {
  .eco { min-height: 0; display: grid; gap: 10px; padding-top: 16px; }
  .eco-lines { display: none; }
  .eco-core { position: static; transform: none; margin: 0 auto 12px; animation: none; box-shadow: 0 0 0 14px oklch(70% 0.19 250 / 10%); }
  .eco-node { position: static !important; animation: none; }
  .eco-tip { display: none; }
}

/* ── Карточки модулей ───────────────────────────────────── */
.mods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 1000px) { .mods-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .mods-grid { grid-template-columns: 1fr; } }
.mod-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  scroll-margin-top: 90px;
}
.mod-card.paid { border-top: 2px solid var(--mc); }
.mod-ic { width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--mc) 16%, transparent); position: relative; }
.mod-ic > b { position: absolute; font-size: 0; } /* геометрические метки — см. index.html */
.mod-name { font: 700 17px var(--font-hero); color: var(--ink); }
.mod-tag { font: 400 13px var(--font); color: var(--ink-soft); margin-top: 2px; }
.mod-price { font: 700 22px var(--font-num); color: var(--mc); }
.mod-price .unit { font: 500 12px var(--font); color: var(--ink-soft); }
.mod-price s { color: var(--ink-faint); font-size: 15px; margin-right: 6px; }
.mod-price .free { color: var(--cyan); }
.badge-free {
  font: 700 10.5px var(--font); color: var(--cyan);
  background: oklch(75% 0.15 195 / 14%); border-radius: 999px; padding: 3px 9px;
  margin-left: 8px; vertical-align: middle;
}
.mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font: 400 13.5px var(--font); color: var(--ink-list); }
.mod-list li::before { content: none; }
.mod-more { margin-top: auto; padding-top: 4px; font: 700 13.5px var(--font); color: var(--mc); }
.mod-more::after { content: " →"; }
.mod-more:hover { text-decoration: underline; }

/* ── ИИ-блок ────────────────────────────────────────────── */
.ai-band {
  position: relative; overflow: hidden; border-radius: 24px; padding: 48px;
  background: linear-gradient(160deg, #1A1233, #241947 55%, #1C1444);
  scroll-margin-top: 90px;
}
.ai-band::before {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, oklch(68% 0.20 300), oklch(72% 0.19 330) 60%, transparent 72%);
  filter: blur(80px); opacity: .4; top: -100px; right: -40px;
}
.ai-band > * { position: relative; }
.ai-band .section-kicker { color: oklch(78% 0.14 300); }
.ai-band .section-kicker::before { background: oklch(78% 0.14 300); }
.ai-band h2 { color: #fff; }
.ai-band .section-sub { color: rgba(255,255,255,.72); max-width: 620px; }
.ai-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
@media (max-width: 860px) { .ai-cols { grid-template-columns: 1fr; } }
.ai-col { border-radius: 16px; padding: 22px; }
.ai-col.without { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.ai-col.with {
  background: rgba(255,255,255,.08); border: 1px solid oklch(72% 0.19 330 / 45%);
  box-shadow: 0 0 40px -12px oklch(72% 0.19 330 / 40%);
}
.ai-col h3 { font: 700 12px var(--font); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.ai-col.without h3 { color: rgba(255,255,255,.5); }
.ai-col.with h3 { color: oklch(80% 0.13 330); }
.ai-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font: 400 14px/1.4 var(--font); }
.ai-col.without ul { color: rgba(255,255,255,.78); }
.ai-col.with ul { color: #fff; }
.ai-col li::before { content: none; }
.ai-band .btn-ghost { border-color: rgba(255,255,255,.25); color: #fff !important; margin-top: 26px; }

/* ── Калькулятор ────────────────────────────────────────── */
.calc {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 34px; scroll-margin-top: 90px;
}
.calc-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 32px; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-mods { display: grid; gap: 10px; }
.calc-row {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid rgba(255,255,255,.08); background: var(--panel-2);
  border-radius: 14px; padding: 14px 16px; user-select: none;
  transition: box-shadow .18s, border-color .18s, background .18s;
}
.calc-row[data-key] { cursor: pointer; }
.calc-row.on {
  border-color: var(--mc);
  background: color-mix(in srgb, var(--mc) 10%, var(--panel));
  box-shadow: 0 0 24px -10px var(--mc);
}
.calc-row .sw {
  flex: none; width: 40px; height: 22px; border-radius: 999px; position: relative;
  background: #3A3E4C; transition: background .18s;
}
.calc-row .sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--on-grad); transition: left .18s ease;
}
.calc-row.on .sw { background: var(--mc); }
.calc-row.on .sw::after { left: 20px; }
.calc-row.locked .sw { background: var(--cyan); }
.calc-row.locked .sw::after { left: 20px; }
.calc-row .nm { font: 700 14.5px var(--font); color: var(--ink); }
.calc-row .nm small { display: block; font: 500 12px var(--font); color: var(--ink-soft); }
.calc-row .pr { margin-left: auto; font: 700 15px var(--font-num); color: var(--ink); white-space: nowrap; }
.calc-row .pr .unit { font: 500 11px var(--font); color: var(--ink-soft); }
.calc-row .pr s { font-size: 12px; color: var(--ink-faint); margin-right: 5px; }
.calc-row .pr .free { color: var(--cyan); }

.calc-total {
  align-self: start; position: sticky; top: 90px;
  background: var(--panel-2); border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 26px; display: grid; gap: 16px;
}
.calc-total .kick { font: 700 11.5px var(--font-num); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.calc-total .line { display: flex; justify-content: space-between; font: 400 14px var(--font); color: var(--ink-soft); }
.calc-total .line + .line { margin-top: 6px; }
.calc-total .line b { color: var(--ink); font: 700 14px var(--font-num); }
.calc-total .grand {
  border-top: 1px dashed var(--line-2); padding-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.calc-total .grand .lbl { font: 700 15px var(--font); color: var(--ink); }
.calc-total .grand .sum { font: 700 36px var(--font-num); letter-spacing: -1px; color: var(--ink); }
.calc-total .grand .sum span { font: 500 13px var(--font); color: var(--ink-soft); letter-spacing: 0; }
.offer {
  display: none; background: linear-gradient(135deg, #1A1233, #241947);
  border: 1px solid oklch(68% 0.20 300 / 40%);
  border-radius: 14px; padding: 15px 17px; font: 400 13.5px/1.45 var(--font); color: #fff;
}
.offer.show { display: block; animation: rise .5s ease; }
.offer b { color: oklch(80% 0.13 300); }
.offer .num { font-family: var(--font-num); color: #fff; }

/* цена пакета «всё включено»: зачёркнутая сумма по отдельности → яркая красная цена */
.bundle-price {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 4px; font-family: var(--font-num);
}
.bundle-price s { font: 600 20px var(--font-num); color: var(--ink-faint); text-decoration-thickness: 2px; }
.bundle-price .bundle-new b {
  font: 700 44px var(--font-num); letter-spacing: -1.5px; color: var(--red);
  text-shadow: 0 0 26px color-mix(in srgb, var(--red) 55%, transparent);
}
.bundle-price .bundle-new .unit { font: 600 15px var(--font-num); color: var(--red); margin-left: 2px; }

/* тумблер «в месяц / за год» */
.bill-toggle {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  cursor: pointer; user-select: none; width: max-content; max-width: 100%;
}
.bill-toggle .bt-lbl { font: 700 12.5px var(--font); color: rgba(255,255,255,.45); transition: color .18s; white-space: nowrap; }
.bill-toggle .bt-lbl.on { color: #fff; }
.bill-toggle .bt-lbl .num { color: inherit; }
.bill-toggle .bt-sw {
  flex: none; width: 40px; height: 22px; border-radius: 999px; position: relative;
  background: #3A3E4C; transition: background .18s;
}
.bill-toggle .bt-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--on-grad); transition: left .18s ease;
}
.bill-toggle.yearly .bt-sw { background: var(--red); }
.bill-toggle.yearly .bt-sw::after { left: 20px; }
.bill-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 8px; }

/* ── Шаги запуска ───────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.step .n {
  display: inline-block; font: 700 13px var(--font-num);
  color: var(--sc, var(--blue)); background: color-mix(in srgb, var(--sc, var(--blue)) 14%, transparent);
  border-radius: 8px; padding: 5px 10px; margin-bottom: 14px;
}
.step h3 { font-size: 15.5px; margin-bottom: 6px; }
.step p { margin: 0; font: 400 13.5px/1.5 var(--font); color: var(--ink-soft); }

/* ── Финальный CTA ──────────────────────────────────────── */
.final {
  position: relative; overflow: hidden; text-align: center;
  background: var(--grad-wide); border-radius: 26px; padding: 64px 34px;
}
.final::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%);
  top: -100px; left: -60px;
}
.final > * { position: relative; }
.final h2 { max-width: 640px; margin: 0 auto 14px; color: var(--on-grad); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.25; }
.final p { max-width: 520px; margin: 0 auto 28px; font: 400 16px/1.5 var(--font); color: rgba(10,12,17,.75); }

/* ── Форма заявки ───────────────────────────────────────── */
.lead-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 36px; max-width: 800px; margin: 0 auto; scroll-margin-top: 90px;
}
.lead-form { display: grid; gap: 14px; }
.lead-form label { display: grid; gap: 6px; font: 700 13px var(--font); color: var(--ink-list); }
.lead-form input, .lead-form textarea {
  font: 500 15px var(--font); color: var(--ink);
  border: 1px solid rgba(255,255,255,.14); border-radius: 11px;
  background: var(--bg); padding: 12px 14px;
}
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--ink-faint); }
.lead-form textarea { min-height: 88px; resize: vertical; }
.lead-form input:focus, .lead-form textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px oklch(70% 0.19 250 / 25%);
}
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .lead-grid { grid-template-columns: 1fr; } }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.lead-status { display: none; border-radius: 12px; padding: 13px 16px; font: 600 14px var(--font); }
.lead-status.ok  { display: block; background: oklch(75% 0.15 195 / 14%); border: 1px solid oklch(75% 0.15 195 / 40%); color: oklch(84% 0.1 195); animation: rise .5s ease; }
.lead-status.err { display: block; background: oklch(60% 0.19 25 / 14%); border: 1px solid oklch(60% 0.19 25 / 40%); color: oklch(80% 0.12 25); animation: rise .5s ease; }

/* ── Футер ──────────────────────────────────────────────── */
footer { padding: 44px 0 56px; border-top: 1px solid rgba(255,255,255,.08); color: var(--ink-soft); }
.foot-in { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
.foot-in p { max-width: 280px; margin-top: 12px; font: 400 13.5px/1.5 var(--font); }
.foot-cols { display: flex; gap: 44px; flex-wrap: wrap; }
.foot-cols b { display: block; color: var(--ink); margin-bottom: 9px; font: 700 12px var(--font); text-transform: uppercase; letter-spacing: .1em; }
.foot-cols a { display: block; color: var(--ink-soft); margin: 5px 0; font: 400 13.5px var(--font); }
.foot-cols a:hover { color: var(--ink); }
.foot-copy { margin-top: 26px; font: 400 12px var(--font); color: var(--ink-faint); }

/* ============================================================
   Страница модуля (те же токены)
   ============================================================ */
.mhero { position: relative; overflow: hidden; padding: 66px 0 30px; }
.mhero .crumb { font: 700 13px var(--font); color: var(--mc); display: inline-flex; gap: 8px; margin-bottom: 22px; }
.mhero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
@media (max-width: 960px) { .mhero-grid { grid-template-columns: 1fr; } }
.mchip {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font: 700 12px var(--font-num); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mc); border: 1px solid color-mix(in srgb, var(--mc) 35%, transparent);
  background: color-mix(in srgb, var(--mc) 10%, transparent);
  border-radius: 999px; padding: 6px 14px;
}
.mhero h1 { font-size: clamp(32px, 4.2vw, 48px); }
.mhero-lead { font: 400 17px/1.6 var(--font); color: var(--ink-soft); max-width: 520px; }
.mprice { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 4px; font-family: var(--font-num); }
.mprice b { font-size: 40px; font-weight: 700; color: var(--mc); letter-spacing: -1px; }
.mprice s { color: var(--ink-faint); }
.mprice span { color: var(--ink-soft); font: 500 14px var(--font); }
.mhero .browser { border-color: color-mix(in srgb, var(--mc) 30%, transparent); }

.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
@media (max-width: 960px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.feat .fic {
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 13px;
  background: color-mix(in srgb, var(--mc) 15%, transparent); position: relative;
}
.feat .fic::after {
  content: ""; position: absolute; left: 12px; top: 12px; width: 10px; height: 10px;
  border-radius: 3px; background: var(--mc); box-shadow: 0 0 8px color-mix(in srgb, var(--mc) 60%, transparent);
}
.feat h3 { font-size: 15.5px; margin-bottom: 6px; }
.feat p { font: 400 13.5px/1.5 var(--font); color: var(--ink-soft); margin: 0; }

.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 34px; counter-reset: hs; }
.how .hs {
  counter-increment: hs; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px;
}
.how .hs::before {
  content: "0" counter(hs);
  display: inline-block; font: 700 13px var(--font-num);
  color: var(--mc); background: color-mix(in srgb, var(--mc) 14%, transparent);
  border-radius: 8px; padding: 5px 10px; margin-bottom: 13px;
}
.how .hs h3 { font-size: 15px; margin: 0 0 6px; }
.how .hs p { font: 400 13.5px/1.5 var(--font); color: var(--ink-soft); margin: 0; }

.lose-band {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--panel-2); border: 1px dashed rgba(255,255,255,.18);
  border-radius: 16px; padding: 22px 24px; margin-top: 36px;
  font: 400 15px/1.55 var(--font); color: var(--ink-list);
}
.lose-band .lic { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: oklch(65% 0.2 25); box-shadow: 0 0 8px oklch(65% 0.2 25 / 70%); font-size: 0; }
.lose-band b { display: block; margin-bottom: 3px; color: var(--ink); font-family: var(--font-hero); }

.eco-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 30px; }
.eco-link {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--lc, var(--blue)); border-radius: 14px; padding: 16px 18px;
  transition: border-color .18s, box-shadow .18s;
}
.eco-link:hover { border-color: color-mix(in srgb, var(--lc) 50%, var(--line)); box-shadow: 0 0 24px -12px var(--lc); }
.eco-link b { display: block; color: var(--lc, var(--blue)); font: 700 14.5px var(--font-hero); }
.eco-link span { font: 400 13px/1.45 var(--font); color: var(--ink-soft); }

.mcta {
  margin-top: 60px; background: var(--panel); border: 1px solid var(--line);
  border-top: 2px solid var(--mc); border-radius: 22px; padding: 42px; text-align: center;
}
.mcta .mprice { justify-content: center; }
.mcta .hero-cta { justify-content: center; }
.mcta .trial-chips { justify-content: center; }

.mnav { display: flex; justify-content: space-between; gap: 14px; margin-top: 52px; }
.mnav a {
  flex: 1; max-width: 330px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 15px 19px; transition: border-color .18s;
}
.mnav a:hover { border-color: var(--line-2); }
.mnav a small { display: block; color: var(--ink-faint); font: 600 10.5px var(--font-num); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 4px; }
.mnav a b { font: 700 15px var(--font-hero); color: var(--ink); }
.mnav a.next { text-align: right; margin-left: auto; }